/* ============================================================ FOUNDATION / TOKENS ============================================================ */ :root { /* --- Brand Colors --- */ --bitcol-0: #140082; --bitcol-1: #1964FF; --bitcol-1-50: #1964FF80; --bitcol-2: #28D296; --bitcol-2-50: #28D29680; --bitcol-3: #FFC800; --bitcol-3-50: #FFC80080; --bitcol-4: #FF5041; --bitcol-4-50: #FF504180; --bitcol-5: #07262D; --bitcol-5-50: #07262D80; --bitcol-6: #aa50ff; --bitcol-6-50: #aa50ff80; --bitcol-7: #64e6e1; --bitcol-7-50: #64e6e180; /* --- Background Colors --- */ --bitcol-bg-1: #EBF5FF; --bitcol-bg-2: #E6F5E6; --bitcol-bg-3: #FAF5E1; --bitcol-bg-4: #FFF0E6; --bitcol-bg-6: #f8eeff; --bitcol-bg-7: #e4f7f8; /* --- UI Tokens --- */ --ui-container: 70rem; --ui-radius: 0rem; --ui-text: var(--bitcol-5); --font-sans: thesans, Lexend Deca, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; --default-font-feature-settings: 18px; /* --- Motion Tokens --- */ --tr-fast: .3s ease-in-out; --tr-mid: .5s ease-in-out; --tr-slow: .8s ease; --clip-cut: polygon(0 0, 100% 0, 100% 92.5%, 0% 100%); --clip-rect: polygon(0 0, 100% 0, 100% 100%, 0% 100%); } html { scroll-behavior: smooth; } /* ============================================================ FONT FACES ============================================================ */ @font-face { font-family: thesans; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/bitkom/thesans_lt_400_.woff) format("woff"); } @font-face { font-family: thesans; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/bitkom/thesans_b2_500.woff) format("woff"); } @font-face { font-family: thesans; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/bitkom/thesans_b2_600.woff) format("woff"); } /* ============================================================ GLOBAL TYPE / BASE BEHAVIOR ============================================================ */ .text-default { color: var(--bitcol-5); } .prose { font-size: 1.125rem; line-height: 1.75rem; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 16 3 4; p { text-wrap: pretty; } } .mt-2.text-error { font-size: smaller; } .animate-bounce, .animate-pulse { animation: none; } .hover\:scale-105 { scale: inherit; } input[placeholder="Search..."]::placeholder, .app-cart-page input[placeholder="Abweichende E-Mail-Adresse für die Rechnung eingeben"]::placeholder, .app-cart-page input[placeholder="Bestellnummer eingeben"]::placeholder { color: transparent; opacity: 0; } /* ============================================================ GLOBAL HIDE RULES / FRAMEWORK OVERRIDES ============================================================ */ :is( #app-header-user-desktop-menu-login .iconify, #app-event-list-page form > div > div > button, #app-header-cart-link > span, #app-header-user-desktop-menu-register, div#app-header-user-mobile-menu-item-menu-request-seminar, #menu-request-seminar, #menu-request-seminar .iconify, .app-header-d-menu-link-label span, .app-header-d-menu-link-trailing, .app-header-user-avatar, main[aria-label="pageMeta.userBookings.ariaLabel"] button[aria-label="Filter Buchungen"] ) { display: none; } #app-scroll-to-top-button { bottom: 1.5%; z-index: 100; } button[data-testid="uc-privacy-button"] { display: none; } /* ============================================================ REUSABLE PATTERNS ============================================================ */ /* Shared mask icon behavior */ .bt_v_item_id + div > span:first-of-type::before, .icon-contact, a[isexecutionguarantee="1"]:has(article.planned_events) .event-list-card-info::after, [class*="app-card-cat-id-"] #contents a:not(.extras-btn)::before, [class*="app-card-cat-id-"] #seminarProgram a:not(.extras-btn)::before, [class*="app-card-cat-id-"] #requirements a:not(.extras-btn)::before, main[aria-label="Registrieren"] div.flex.gap-0.items-center:has(input[name="orgPosition"])::after, main[aria-label="Registrieren"] form div:nth-child(2) > div.mb-4.w-full > div > div.mt-1.relative > div.flex.gap-0.items-center > button:has(span.truncate.text-dimmed)::after, .bt_seminar_cta p::before, .bt_reg_now p::before, .bt_cart_cta_rsn::before, .bt_inhouse-cta a:not(.extras-btn)::before { -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } /* Shared clipped corner behavior */ :is( .hero-image-clip, .app-elem-clip-path, .event-list-card, .app-cart-page [class*="app-category-id-"] > img ) { clip-path: var(--clip-cut); } :is( .app-elem-clip-path, .event-list-card, .app-cart-page [class*="app-category-id-"] > img ) { transition: clip-path var(--tr-fast) !important; } :is( .app-elem-clip-path:hover, .event-list-card:hover, .app-cart-page [class*="app-category-id-"] > img:hover ) { clip-path: var(--clip-rect); } /* Shared thematic link behavior */ :is( .bt_sd-contact a, [class*="app-card-cat-id-"] .app-contact-detail-left-block a, [class*="app-card-cat-id-"] .event-detail-contact-form a ) { color: var(--highlight-secondary); transition: all var(--tr-fast); &:hover { color: var(--bitcol-5); } } /* Shared neutral button inversion */ :is( div#trainer button.ring, .app-event-detail-page .ring-primary, .app-event-detail-page .extras-btn, .app-event-detail-page .event-detail-contact-btn ) { cursor: pointer; --tw-ring-color: var(--bitcol-5); background-color: #fff; color: var(--bitcol-5); } :is( div#trainer button.ring, .app-event-detail-page .extras-btn, .app-event-detail-page .event-detail-contact-btn ) { transition: all var(--tr-fast); &:hover { background-color: var(--bitcol-5); color: #fff !important; } } .app-event-detail-page .cart-button { cursor: pointer; --tw-ring-color: var(--bitcol-5); background-color: var(--bitcol-5); color: #fff; &:hover { background-color: #fff; color: var(--bitcol-5); } &.disabled\:opacity-75:disabled { cursor: auto !important; } } /* ============================================================ JS-INJECTED / OWN CLASSES ============================================================ */ @media (max-width:767px) { .bt_dates_btn { position: fixed; background: var(--highlight-primary); bottom: 10%; right: 20px; padding: 3px; border-radius: 7px; scale: 1; z-index: 50; transition: all .3s ease; .dates-cta { display: block; margin-top: -6px; color: var(--bfhover); font-size: 0.785rem; } &:hover { background: var(--bitcol-5); scale: 1.125; .dates-cta { color: #fff; } .i-heroicons-outline\:calendar-days { background-color: #fff; } } .i-heroicons-outline\:calendar-days { background-color: var(--bfhover); width: 35px; height: 35px; } } #dates { scroll-margin-top: 170px; } } @media (min-width:768px) { .bt_dates_btn { display: none; } } .app-card-cat-id-16 { .grid.grid-cols-1:has(> .app-contact-detail-left-block) { grid-template-columns: auto; } } .bt_sd-contact { padding-bottom: 30px; } .bt_note { display: block; font-size: smaller; padding-top: 10px; } #bot_contact { scroll-margin-top: 260px; } .bt_contact_jump { margin-top: -0.5rem; padding-bottom: 25px; } .bt_sales_ppl { margin-top: -6px; padding: 5px 0; p { padding: 8px 0; } } .bt_v_item_id + div > span:first-of-type::before { content: ""; width: 1rem; height: 1rem; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M11.5 3a9.5 9.5 0 0 1 9.5 9.5a9.5 9.5 0 0 1-9.5 9.5A9.5 9.5 0 0 1 2 12.5A9.5 9.5 0 0 1 11.5 3m0 1A8.5 8.5 0 0 0 3 12.5a8.5 8.5 0 0 0 8.5 8.5a8.5 8.5 0 0 0 8.5-8.5A8.5 8.5 0 0 0 11.5 4M11 7h1v5.42l4.7 2.71l-.5.87l-5.2-3z'/%3E%3C/svg%3E"); background-color: currentColor; transform: translateY(-1px); } .rm-b, .is-ex .rm-b { font-size: 0.875rem; color: var(--bitcol-1); padding: 5px 0; letter-spacing: 0.05rem; cursor: pointer; transition: text-shadow .3s linear; &:hover { text-shadow: 0 0 .3px currentColor, 0 0 .3px currentColor; } } @media(max-width: 767px) { .rm-f { scroll-margin-top: 100px; } } .rm-f[style="display\: block;"] p ~ p, .rm-f[style="display\: block;"] li + li + li ~ li { animation: bit-fade-in .5s ease-in; } .bt_inhalte:last-child { margin-bottom: 0; } .bt_login_alert { &::before { content: "Hinweis für Bitkom-Mitglieder:"; position: relative; display: block; white-space: pre-wrap; top: 70px; font-weight: 600; } &::after { content: "\A\A Ihre Login-Daten für das Mitgliederportal des Bitkom sind hier nicht gültig.\A\A Sie benötigen ein separates Konto bei der Bitkom Akademie."; position: relative; display: block; white-space: pre-wrap; } } .bt_cart_alert_main::after, .bt_cart_alert_los_buy::after { position: relative; display: block; margin-top: 5px; font-size: smaller; font-weight: 600; } .bt_cart_alert_main::after { content: "Nach 15 Minuten ohne Aktivität wird der Warenkorb automatisch geleert."; } .bt_cart_alert_los_buy::after { content: "Bei einer kostenfreien Buchung entfällt der Weg über den Warenkorb. Ihr Seminar ist jetzt bereits unter 'Meine Buchungen' zu finden."; } .icon-contact { margin-top: 4px; display: inline-block; width: 1em; height: 1em; background-color: currentColor; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' d='M1 2h21v16h-8l-8 4v-4H1zm5 8h1v1H6zm5 0h1v1h-1zm5 0h1v1h-1z'/%3E%3C/svg%3E"); } .bt_reg_now { flex: 1 1 auto; display: flex; flex-direction: column; gap: 1.5px; @media(max-width: 930px) { height: 475px; } } .bt_reg_now h2 { color: var(--bitcol-1); } .bt_reg_now h3 { font-size: 1.2rem; font-weight: 400; line-height: 1.4; margin: 15px 0 15px 0; } .bt_reg_btn { font-size: 1rem; font-weight: 600; padding: 12px 14px; border: solid 1px; border-color: var(--bitcol-5); color: var(--bitcol-5); background-color: #fff; transition: all .3s ease-in-out; } .bt_reg_btn:hover { color: var(--bitcol-5); background-color: var(--bitcol-2); border-color: var(--bitcol-2); } .bt_reg_now_btn { display: block; text-align: center; font-size: 1rem; font-weight: 600; padding: 12px 14px; border: solid 1px; border-color: var(--bitcol-1); color: #fff; background-color: var(--bitcol-1); position: relative; transition: all .3s ease-in-out; } .bt_reg_now_btn:hover { background-color: #fff; color: var(--bitcol-1); } .bt_reg_now_btn::after { content: "Hinweis: Sie möchten eine Buchung für Mitarbeitende Ihres Unternehmens tätigen? Dann weisen wir Ihnen gerne eine entsprechende Rolle im System zu. Bitte schreiben Sie dafür vor der Buchung eine E-Mail an seminarmanagement@bitkom-akademie.de"; position: absolute; top: calc(100% + 2.5rem); left: 0; width: 100%; box-sizing: border-box; padding: 1rem; background: var(--bitcol-bg-1); color: var(--bitcol-5); font-size: 0.875rem; font-weight: 400; line-height: 1.4; text-align: left; } .bt_reg_now p { padding: 0 0 15px 35px; text-indent: -35px; font-size: 1rem; } .bt_reg_now p:last-of-type { margin-bottom: 16px; } .bt_reg_now p::before { content: ""; display: inline-block; width: 35px; height: 18px; transform: translateY(3px); --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='m14.914 4l-9.47 9.47L1.09 8.393L2.608 7.09l2.948 3.44L13.5 2.585z'/%3E%3C/svg%3E"); background-color: var(--bitcol-2); -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } .bt_reg_now p::before { left: 85px; } .bt_removable { display: none; } .bt_to-the-cart > button { min-width: 180px; --tw-ring-color: var(--highlight-primary); background-color: var(--highlight-primary); color: var(--bfhover); &:hover { --tw-ring-color: var(--bitcol-5); background-color: var(--bitcol-5); color: #fff; } } .bt_tech-popup { p { color: var(--bitcol-5); } h3 { color: var(--bitcol-0); } } body:has(.bt_tech-popup:popover-open) { pointer-events: none; } button.link { display: contents; } .bt_tech-popup[popover] { transition: opacity 0.5s, transform 0.5s; transition-behavior: allow-discrete; opacity: 0; transform: translateY(20px); } .bt_tech-popup[popover]:popover-open { opacity: 1; transform: translateY(0); } @starting-style { .bt_tech-popup[popover]:popover-open { opacity: 0; transform: translateY(20px); } } .bt_tech-popup:popover-open { position: fixed; margin: 5vh auto; height: fit-content; inset: 0; border: none; padding: 2rem; display: flex; flex-direction: column; align-items: end; pointer-events: auto; border: 1px solid var(--bitcol-1-50); &::backdrop { backdrop-filter: blur(8px); pointer-events: auto; } } .x-out { font-weight: 300; font-size: 1rem; transform: translate(10px, -20px) scale(1.2, 1); padding: 0.4rem 0.7rem; position: absolute; background: var(--bitcol-bg-1); right: 60px; top: 40px; cursor: pointer; transition: all .3s ease-in-out; &:hover { text-shadow: 0 0 .2px currentColor, 0 0 .2px currentColor; background-color: var(--bitcol-bg-2); } } /* ============================================================ HERO SECTION ============================================================ */ .bitkom-hero-box-line { stroke-dasharray: 200%; stroke-dashoffset: 200%; } .bitkom-hero-svg-line-1 { animation: bitkom-hero-draw-line 1500ms 0ms forwards; } .bitkom-hero-svg-line-2 { animation: bitkom-hero-draw-line 1500ms 500ms forwards; } .bitkom-hero-svg-line-3 { animation: bitkom-hero-draw-line 1500ms 750ms forwards; } .bitkom-hero-svg-line-4 { animation: bitkom-hero-draw-line 1500ms 1250ms forwards; } .bitkom-hero-outline-box { animation: bitkom-hero-outline-box 750ms 1750ms forwards; position: relative; } .bitkom-hero-image-fade { animation: hero-fade 500ms 2500ms forwards; } @media(max-width: 767px) { .bitkom-hero-svg-line-1 { animation: bitkom-hero-draw-line 0ms 0ms forwards; } .bitkom-hero-svg-line-2 { animation: bitkom-hero-draw-line 0ms 0ms forwards; } .bitkom-hero-svg-line-3 { animation: bitkom-hero-draw-line 0ms 0ms forwards; } .bitkom-hero-svg-line-4 { animation: bitkom-hero-draw-line 0ms 0ms forwards; } .bitkom-hero-outline-box { animation: bitkom-hero-outline-box 0ms 0ms forwards; position: relative; } .bitkom-hero-image-fade { animation: hero-fade 0ms 0ms forwards; } } .app-bitkom-hero-section-img { top: 0; object-position: center; width: 45vw; height: auto; } @keyframes bitkom-hero-draw-line { to { stroke-dashoffset: 0; } } @keyframes hero-fade { from { opacity: 0; transform: translateX(-50px); } to { opacity: 1; transform: translateX(0); } } @media (min-width:1025px) { .app-bitkom-hero-section-img { min-height: 300px; max-height: 350px; } @keyframes bitkom-hero-outline-box { from { transform: translate(0, 0); } to { transform: translate(35%, 20%); } } } @media (min-width:600px) and (max-width:1024px) { .app-bitkom-hero-section-img { min-height: 200px; max-height: 300px; } @keyframes bitkom-hero-outline-box { from { transform: translate(0, 0); } to { transform: translate(25%, 20%); } } } @media (max-width:599px) { .app-bitkom-hero-section-img { height: 185px; } @keyframes bitkom-hero-outline-box { from { transform: translate(0, 0); } to { transform: translate(30%, 25%); } } } .app-bitkom-hero-section-desc { box-sizing: border-box; width: 100%; color: var(--bitcol-5); z-index: 2; opacity: 1; margin-left: auto; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 16 3 4; } @media (min-width:1025px) { .app-bitkom-hero-section-desc { padding: 150px 200px 50px 0; max-width: 705px; } } @media screen and (min-width:1180px) and (max-width:1340px) { .app-bitkom-hero-section-desc { max-width: 605px; } } @media screen and (min-width:750px) and (max-width:860px) { .app-bitkom-hero-section-desc { max-width: 450px !important; } } @media screen and (min-width:600px) and (max-width:1179px) { .app-bitkom-hero-section-desc { max-width: 525px; } } @media screen and (min-width:750px) and (max-width:1024px) { .app-bitkom-hero-section-desc { padding: 170px 75px 75px; } } @media screen and (min-width:600px) and (max-width:750px) { .app-event-detail-page .app-bitkom-hero-section-desc { padding: 275px 75px 75px 125px; } #app-event-list-page .app-bitkom-hero-section-desc { padding: 185px 75px 75px 160px; } .app-cart-page .app-bitkom-hero-section-desc { padding: 200px 75px 75px 200px; } } @media (max-width:599px) { .app-bitkom-hero-section-desc { padding: 275px 10px 30px 30px; max-width: calc(100% - 35%); } } @media (max-width:550px) { .app-bitkom-hero-section-desc { padding: 250px 10px 30px 30px; } } @media (max-width:450px) { .app-bitkom-hero-section-desc { padding: 200px 10px 30px 15px; } } /* ============================================================ GENERAL PAGE STYLES ============================================================ */ [aria-label="Notifications (F8)"] ol:has(li[role="alert"]) { top: 115px; right: 5vw; } .bg-black { background-color: var(--bitcol-5) !important; } @media (min-width: 48rem) { .md\:w-70 { width: calc(var(--spacing) * 72); } } img.h-12.app-logo { height: calc(var(--spacing) * 14.92); } #app-footer-logo img.h-12 { height: calc(var(--spacing) * 17.77); } .app-footer-company-info { border: none; > div > div { position: relative; top: -30px; } } .text-error { color: var(--bitcol-4); } .text-green-500 { color: var(--bitcol-2); } /* ============================================================ THEMES ============================================================ */ .app-card-cat-id-16, .app-event-detail-trainer-modal-cat-16 { --highlight-primary: var(--bitcol-3); --highlight-primary-50: var(--bitcol-3-50); --highlight-secondary: var(--bitcol-4); --svg-color: %23FF5041; --bfhover: var(--bitcol-5); --afthover: #fff; --bg-color: var(--bitcol-bg-3); --bg-color2: var(--bitcol-bg-4); --imgfilter: url(#duotone-yellow); } .app-card-cat-id-11, .app-event-detail-trainer-modal-cat-11 { --highlight-primary: var(--bitcol-2); --highlight-primary-50: var(--bitcol-2-50); --highlight-secondary: var(--bitcol-1); --svg-color: %231964ff; --bfhover: var(--bitcol-5); --afthover: #fff; --bg-color: var(--bitcol-bg-2); --bg-color2: var(--bitcol-bg-1); --imgfilter: url(#duotone-green); } .app-card-cat-id-12, .app-event-detail-trainer-modal-cat-12 { --highlight-primary: var(--bitcol-1); --highlight-primary-50: var(--bitcol-1-50); --highlight-secondary: var(--bitcol-1); --svg-color: %231964ff; --bfhover: #fff; --afthover: var(--bitcol-5); --bg-color: var(--bitcol-bg-1); --bg-color2: var(--bitcol-bg-2); --imgfilter: url(#duotone-blue); } .app-card-cat-id-17, .app-event-detail-trainer-modal-cat-17 { --highlight-primary: var(--bitcol-7); --highlight-primary-50: var(--bitcol-7-50); --highlight-secondary: var(--bitcol-6); --svg-color: %23aa50ff; --bfhover: var(--bitcol-5); --afthover: #fff; --bg-color: var(--bitcol-bg-7); --bg-color2: var(--bitcol-bg-6); --imgfilter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='duotone-turquoise' x='-10%25' y='-10%25' width='120%25' height='120%25' filterUnits='objectBoundingBox' primitiveUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeColorMatrix in='SourceGraphic' result='grayfilter' type='matrix' values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 1 0'/%3E%3CfeComponentTransfer in='grayfilter' result='tricolor'%3E%3CfeFuncR type='table' tableValues='0.08 0.39 0.89'/%3E%3CfeFuncG type='table' tableValues='0 0.9 0.97'/%3E%3CfeFuncB type='table' tableValues='0.51 0.88 0.97'/%3E%3CfeFuncA type='table' tableValues='0 1'/%3E%3C/feComponentTransfer%3E%3CfeBlend mode='normal' in='tricolor' in2='SourceGraphic' result='blend'/%3E%3C/filter%3E%3C/svg%3E#duotone-turquoise"); } .app-card-cat-id-666, .app-event-detail-trainer-modal-cat-666 { --highlight-primary: var(--bitcol-6); --highlight-primary-50: var(--bitcol-6-50); --highlight-secondary: var(--bitcol-7); --svg-color: %23aa50ff; --bfhover: #fff; --afthover: var(--bitcol-5); --bg-color: var(--bitcol-bg-6); --bg-color2: var(--bitcol-bg-7); --imgfilter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='duotone-purple' x='-10%25' y='-10%25' width='120%25' height='120%25' filterUnits='objectBoundingBox' primitiveUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeColorMatrix in='SourceGraphic' result='grayfilter' type='matrix' values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 1 0'/%3E%3CfeComponentTransfer in='grayfilter' result='tricolor'%3E%3CfeFuncR type='table' tableValues='0.08 0.67 0.97'/%3E%3CfeFuncG type='table' tableValues='0 0.31 0.93'/%3E%3CfeFuncB type='table' tableValues='0.51 1 1'/%3E%3CfeFuncA type='table' tableValues='0 1'/%3E%3C/feComponentTransfer%3E%3CfeBlend mode='normal' in='tricolor' in2='SourceGraphic' result='blend'/%3E%3C/filter%3E%3C/svg%3E#duotone-purple"); } /* ============================================================ SPECIAL EFFECTS ============================================================ */ .seminar-detail-content { .selected-tab span { color: var(--bitcol-2); } #contents ul, #contents ol, #seminarProgram ul, #seminarProgram ol, #requirements ul, #requirements ol { list-style-type: inherit !important; padding: revert; } } .bg-success { background-color: var(--bitcol-2) !important; } .bg-error { background-color: var(--bitcol-4) !important; } /* ============================================================ BUTTONS ============================================================ */ .ring-primary\/50, .ring-primary\/75 { cursor: pointer; font-weight: 600; padding: 16px; transition: all var(--tr-fast); &:hover { background-color: var(--bitcol-1); color: #fff; } } .bg-primary { cursor: pointer; border: 1px solid var(--bitcol-1); transition: all var(--tr-fast); &:hover { background-color: #fff; color: var(--bitcol-1); } } .ring-error\/25 { border-color: var(--bitcol-4); background-color: var(--bitcol-4); color: #fff; } .ring-success\/25 { border-color: var(--bitcol-2); background-color: var(--bitcol-2); color: var(--bitcol-5); } .ring-warning\/25 { border-color: var(--bitcol-3); background-color: var(--bitcol-3); color: var(--bitcol-5); } /* ============================================================ SEMINAR LISTING & CARDS ============================================================ */ a[isexecutionguarantee="1"]:has(article.planned_events) { .event-list-card-info { position: relative; &::after { content: ""; position: absolute; width: 24px; height: 24px; top: 10px; right: 15px; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10s10-4.5 10-10S17.5 2 12 2m-2 15l-5-5l1.41-1.41L10 14.17l7.59-7.59L19 8z'/%3E%3C/svg%3E"); background-color: var(--highlight-primary); } &::before { content: "Bereits durchführbar"; position: absolute; font-size: 14px; font-weight: 500; text-align: center; top: 0; right: 0; color: var(--bitcol-5); background-color: #fff; width: 100%; opacity: 0; transition: opacity .8s ease; } &:hover::before { opacity: 1; } } } #app-event-list-page { .relative.overflow-auto.w-full.hidden.md\:block table.min-w-full.overflow-clip { thead tr th:nth-of-type(5), tbody tr td:nth-of-type(5) { display: none; } } table.min-w-full.overflow-clip .text-muted { color: var(--bitcol-5); } .app-bitkom-hero-section-desc h1 { font-size: clamp(1.5rem, calc(1.1rem + 2vw), 2.8rem); } div.w-full.mx-auto.px-4 .text-2xl { font-size: 1.9rem; margin: 25px 0 10px 0; } div.rounded-lg:has(form) { padding: calc(var(--spacing) * 7); } form > div > div > button { display: none !important; } input.ring, input.ring-inset { box-shadow: none !important; } input.ring-inset { --tw-ring-inset: ; } .i-heroicons-outline\:document-magnifying-glass { background-color: var(--bitcol-1-50); } section.relative.w-full { background: var(--bitcol-bg-2); } button[role="switch"] { cursor: pointer; } tr:has(td.p-4.text-sm.text-muted.whitespace-nowrap) { height: 125px; } td.p-4.text-sm.text-muted.whitespace-nowrap { white-space: pre-wrap; a:hover { text-decoration: none; color: var(--bitcol-5); } } div.bg-white.border-b.border-primary-500.p-4 h3:hover { text-decoration: none; color: var(--bitcol-5); } } .app-event-list-dp-cont { .vc-bordered { border: none; } .vc-pane-container { background-color: var(--bitcol-bg-2); } .vc-header { border-radius: 0; } .vc-focus { --vc-focus-ring: 0; } .vc-arrow .vc-base-icon { height: 16px; width: 16px; } .vc-arrow:hover, .vc-focus:hover, .vc-focusable:hover { background: #fff !important; } .vc-day .vc-day-content, .vc-title-wrapper { color: var(--bitcol-5); } .vc-title-wrapper { font-size: 15px; } .vc-highlight-content-solid { background: var(--bitcol-1) !important; } } div.border-b:has(.app-event-list-form-fields):first-child { margin-right: 30px; border: none !important; } .event-list-card-info { padding: calc(var(--spacing) * 8); } .app-event-list-select-menu, .app-event-list-date-range { margin-top: -2px; background-color: transparent; border: 0; outline: 0; box-shadow: none; padding: 0; span { margin-top: -2px; font-weight: normal; color: var(--bitcol-5); &.iconify { height: 15px; margin-right: 20px; } } } [class*="app-card-cat-id-"] { .event-list-card-img { filter: var(--imgfilter); color: var(--afthover); } .event-list-card-type { background-color: var(--highlight-primary); color: var(--bfhover); font-weight: 500; } .event-list-card-info { background-color: var(--bg-color); } } .app-event-list-form-fields { button:has(span.iconify.i-heroicons-outline\:x-circle.shrink-0.size-5) { background-color: transparent; } button > span.iconify.i-heroicons-outline\:x-circle.shrink-0.size-5 { background-color: var(--bitcol-5-50); position: absolute; right: 10px; top: -5px; &:hover { background-color: var(--bitcol-5); transition: all var(--tr-fast); } } } .app-event-list-page button.app-event-list-select-menu[aria-expanded="true"] .i-lucide\:chevron-down, button.app-event-list-select-menu[data-state="open"] .i-lucide\:chevron-down, .app-event-list-page button.app-event-list-date-range[aria-expanded="true"] .i-heroicons-outline\:chevron-down, button.app-event-list-date-range[data-state="open"] .i-heroicons-outline\:chevron-down { transform: rotate(180deg); transition: all var(--tr-fast); } div[id^="reka-combobox-item-v-"]:hover { background: #fff !important; } #app-event-list-page, .seminar-detail-content { background-color: #fff !important; } /* ============================================================ NAVIGATION ============================================================ */ .app-layout { > header#header { box-shadow: none; height: 142px; } > main { margin-top: 142px !important; } } #app-header-cart-link > span { display: none; } .app-header-d-menu-list li:has([href="https://bitkom-akademie.de/seminare"]):first-child { display: none; } #app-header-user-desktop-menu-login { font-weight: 600; border: 1px solid var(--bitcol-1); color: var(--bitcol-1); padding: 12px 17px 12px 13px; margin-right: 0; &:hover { background-color: var(--bitcol-1) !important; color: #fff !important; } .text-sm { font-size: 18px; } } .app-header-d-menu-root, .app-header-d-menu-root > div:first-child { position: static !important; } .app-header-d-menu-viewport { background-color: var(--bitcol-5); box-shadow: none; position: relative; &::before { content: ""; position: absolute; inset: 0; background: url('data:image/svg+xml;utf8,') no-repeat center / cover; } } .app-header-d-menu-list { max-width: var(--ui-container); margin: 0 auto; padding: 50px calc(var(--spacing) * 8); } .app-header-d-menu-link, #menu-request-seminar { font-weight: 600; transition: none; box-shadow: none; } .app-header-d-menu-link { color: var(--bitcol-5); font-size: 18px; &:hover { background-color: #fff; color: var(--bitcol-1); transition: none; box-shadow: none; } &::before { background: transparent !important; transition: none !important; } &:hover::before { color: inherit !important; background: transparent !important; } } #menu-request-seminar { color: var(--bitcol-1); &:hover { color: var(--bitcol-5); } } .app-header-d-menu-child-link { color: #fff; &:hover { background-color: transparent; color: var(--bitcol-1); } } .app-header-d-menu-child-link-label { font-size: 22px; } #app-header-user-menu-mobile-drawer-dynamic { background-color: #08262e; nav ul li, .app-header-m-menu-list { border: none; } nav ul li a, nav ul li button { color: #fff; border: none; } } nav > div.flex.items-center.gap-1 > button.ring { box-shadow: none; } /* ============================================================ DETAIL PAGES ============================================================ */ @media (min-width:768px) { #event-top-tab-nav { position: sticky; top: 142px; z-index: 10; } } .bt_inhouse-cta { h4 { margin-top: 35px; margin-bottom: 15px; font-size: 1.9rem; font-weight: 600; color: var(--bitcol-5); text-wrap: balance; } a { text-decoration: none; font-weight: bold; color: var(--highlight-secondary); position: relative; margin-left: 22px; &:hover { color: var(--bitcol-5); } &:not(.extras-btn)::before { content: ""; display: inline-block; position: absolute; top: 5px; left: -22px; width: 24px; height: 14px; background-color: currentColor; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M8 1h6v6h-1V2.707L1.854 13.854l-.708-.708L12.293 2H8z' clip-rule='evenodd' stroke-width='0.1' stroke='%23000'/%3E%3C/svg%3E"); } } } .app-card-cat-id-16 .bt_inhouse-cta { display: none; } .app-event-detail-page { margin: 0; background-color: #fff; min-height: 100vh; &:not(:has(.seminar-planned-event-card)) .iconify.i-lucide\:loader.animate-spin { visibility: hidden; position: relative; animation: none; --svg: none; &::before { content: "Zurzeit sind keine Seminare zu diesem Thema geplant."; font-size: 1rem; color: var(--bitcol-5); position: absolute; visibility: visible; width: 200px; margin: 0 50% 0 50%; transform: translateX(-50%); } } .text-2xl { font-size: 1.9rem; &:not(.seminar-extras span) { margin-bottom: 25px; } } .app-bitkom-hero-section-desc { h2 { font-size: clamp(1.3rem, calc(1.3rem + 1.8vw), 2.8rem); } h1, h3 { font-size: clamp(0.8rem, calc(0.8rem + 1vw), 1.3rem); } } #contents { min-height: 240px; } .event-detail-info-card-content > div { align-items: self-start; .iconify { transform: translate(0, 3px); } } .app-planned-event-details-button { cursor: pointer; color: var(--bitcol-5); } .cart-button { min-width: 180px; justify-content: center; position: relative; isolation: isolate; } } .cart-button.is-cart-lifting{ background:var(--bitcol-1); color:#fff; } .cart-fly-proxy{ position:fixed; z-index:2147483647; display:grid; place-items:center; border-radius:999px; background:var(--bitcol-1); color:#fff; pointer-events:none; box-shadow:0 10px 30px rgba(37,99,235,.28); will-change:transform; } .cart-fly-proxy>span{ color:#fff!important; line-height:1; } #app-header-cart-link.is-cart-receiving{ animation:cart-receive-pulse .32s ease-out; } @keyframes cart-receive-pulse{ 0%{transform:scale(1)} 45%{transform:scale(1.14)} 100%{transform:scale(1)} } .app-card-cat-id-16 .event-detail-info-card-content div:nth-child(2) > div.flex.flex-col > span, .app-card-cat-id-12:not(:has(.bt_rezert)) .event-detail-info-card-content div:nth-of-type(3) span:nth-of-type(2), .app-card-cat-id-12:not(:has(.bt_rezert)) .event-detail-planned-event-block > div > div > div:nth-of-type(3) > div:last-of-type, ul.seminar-detail-content-left-tab li:nth-child(4) > button > span.truncate, ul.seminar-detail-content-left-tab li:nth-child(2) > button > span.truncate { font-size: 0; } .app-card-cat-id-16 .event-detail-info-card-content div:nth-child(2) > div.flex.flex-col > span::after { position: relative; content: "1 Stunde"; font-size: 1rem; } .app-card-cat-id-12:not(:has(.bt_rezert)) .event-detail-info-card-content div:nth-of-type(3) span:nth-of-type(2)::after { position: relative; content: "Zertifizierung inkl.\A zzgl. 19% USt"; white-space: pre-line; font-size: .875rem; color: var(--color-gray-500); } .app-card-cat-id-12:not(:has(.bt_rezert)) .event-detail-planned-event-block > div > div > div:nth-of-type(3) > div:last-of-type::after { position: relative; content: "* Zertifikatsgebühr inkl.\A\00A0\00A0\00A0 Alle Preise zzgl. 19% USt"; white-space: pre-line; font-size: .875rem; color: var(--color-gray-500); } .app-card-cat-id-12:not(:has(.bt_rezert, img[src="https://bitkom-admin.simplyorg-seminare.de//picture/event/18"], img[src="https://bitkom-admin.simplyorg-seminare.de//picture/event/275"])) .event-detail-planned-event-block > div > div > div:nth-child(1) > div:last-of-type > div > div:last-of-type::after { position: relative; top: 2px; white-space: pre-line; content: "\A(Tag der Prüfung)"; color: var(--color-gray-500); font-size: .875rem; } div#contents > h4.text-2xl.font-semibold.mb-4, div#seminarProgram > h4.text-2xl.font-semibold.mb-4, .app-card-cat-id-16 ul.seminar-detail-content-left-tab li:nth-child(2), .app-card-cat-id-17 ul.seminar-detail-content-left-tab li:nth-child(2), .app-card-cat-id-17 ul.seminar-detail-content-left-tab li:nth-child(4), .app-card-cat-id-17 .seminar-detail-content + div.w-full h2.text-3xl, .app-card-cat-id-17 .cart-button { display: none; } ul.seminar-detail-content-left-tab li:nth-child(4) > button > span.truncate::before { content: "Hinweise"; font-size: 1.125rem; } ul.seminar-detail-content-left-tab li:nth-child(2) > button > span.truncate::before { content: "Inhalte"; font-size: 1.125rem; } [class*="app-card-cat-id-"] { .event-detail-hero-img { filter: var(--imgfilter); } .event-detail-hero-svg line { stroke: var(--highlight-secondary); } #event-top-tab-nav { button { font-size: 1.125rem; } .selected-tab span, .seminar-detail-content-left-tab button:hover { color: var(--highlight-primary); background-color: transparent; } } .event-detail-dates-btn { background-color: var(--highlight-primary); transition: all var(--tr-fast); &:hover { background-color: var(--highlight-secondary); color: var(--afthover); } } .seminar-detail-content-right-dates-btn { background-color: transparent; color: var(--bfhover); transition: color var(--tr-fast); &:hover { background-color: transparent; color: var(--afthover); } } .event-detail-info-card-border { border-color: var(--highlight-secondary); margin-bottom: 25px; } .app-contact-detail-left-block-img-cont { border-color: var(--highlight-primary); } .event-detail-info-card-content { background-color: var(--bg-color); min-height: 260px; height: fit-content; .truncate { font-size: 1rem; color: var(--highlight-secondary); &:hover { color: var(--bitcol-5); } } } .seminar-planned-event-card { border: 1px solid var(--highlight-primary-50); position: relative; } .event-detail-planned-event-block { background-color: var(--bg-color); } .event-detail-planned-event-block-border { border-color: var(--highlight-primary); background: #fff; } .event-detail-planned-event-block div div div:nth-child(3) div.space-y-2 div { margin-bottom: 0; } .app-planned-event-details-button:hover { background-color: transparent; } div:has(> .app-event-detail-trainer-block-border) { align-items: normal; } .app-event-detail-trainer-block-border { border-color: var(--highlight-secondary); margin-bottom: 0.8rem; width: 225px; height: 225px; } .app-contact-detail-left-block { color: var(--bitcol-5); div p { margin-top: -5px; font-size: 1rem; } } .event-detail-contact-form { label { font-size: 0.9rem; color: var(--bitcol-5); } button[type="submit"] { font-size: 0; gap: 0; &::before { content: "Absenden"; font-size: 14px; width: fit-content; } } } #contents h4, #seminarProgram h4, #requirements h4 { margin-top: 35px; margin-bottom: 15px; font-size: 1.9rem; font-weight: 600; color: var(--bitcol-5); text-wrap: balance; } } .app-card-cat-id-12 { .event-detail-hero-svg line { stroke: var(--bitcol-2); } .event-detail-dates-btn:hover { background-color: var(--bitcol-2); } .event-detail-info-card-border, .app-event-detail-trainer-block-border { border-color: var(--bitcol-2); } .event-detail-info-card-border { height: 300px; } } .app-card-cat-id-16, .app-card-cat-id-17 { .event-detail-contact-form, .app-contact-detail-left-block { display: none; } } @keyframes roll-out { from { width: 0; } to { width: 60%; } } @keyframes bit-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes bit-fade-out { from { opacity: 1; } to { opacity: 0; } } @media (max-width:599px) { [class*="app-card-cat-id-"] { #contents .slogan, #seminarProgram .slogan, #requirements .slogan { width: 90%; } } } @media (min-width:600px) { [class*="app-card-cat-id-"] { #contents .slogan, #seminarProgram .slogan, #requirements .slogan { width: 60%; } } } [class*="app-card-cat-id-"] { #contents .slogan, #seminarProgram .slogan, #requirements .slogan { padding-top: 50px; padding-bottom: 60px; font-size: 1.9rem; font-weight: 400; color: var(--bitcol-5); hyphenate-limit-chars: 16 3 4; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; &::after { width: 60%; animation: roll-out 4s ease; display: grid; content: ""; position: relative; left: 0; height: 3px; bottom: -0.8em; background-color: var(--highlight-primary); } } #contents a:not(.dates-cta-link, .specials), #seminarProgram a, #requirements a { text-decoration: none; font-weight: bold; color: var(--highlight-secondary); position: relative; margin-left: 22px; transition: color .3s ease-in-out; &:hover { color: var(--bitcol-5); } &:not(.extras-btn)::before { content: ""; display: inline-block; position: absolute; top: 5px; left: -22px; width: 24px; height: 14px; background-color: currentColor; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M8 1h6v6h-1V2.707L1.854 13.854l-.708-.708L12.293 2H8z' clip-rule='evenodd' stroke-width='0.1' stroke='%23000'/%3E%3C/svg%3E"); } } a.specials { border: 1px solid var(--highlight-secondary); padding: 1rem 1.5rem; color: #fff; background: var(--highlight-secondary); text-decoration: none; font-weight: bold; transition: all .3s ease-in-out; cursor: pointer; &:hover, &:active, &:focus { background-color: #fff;; color: var(--highlight-secondary); } } p:has(> .specials) { margin: 2rem 0 3.5rem 0; } #requirements .extras-btn { text-decoration: none; font-weight: bold; color: var(--bitcol-5); } section.relative.w-full { background: var(--bg-color); } #contents ul + p, #seminarProgram ul + p, #requirements ul + p { margin-top: 0; } #contents ul + h4, #seminarProgram ul + h4, #requirements ul + h4 { margin-top: 20px; } #contents ul, #seminarProgram ul, #requirements ul { list-style: none !important; list-style-type: none !important; margin: 0; padding-left: 15px; padding-bottom: 15px; ul { margin-top: 2px; padding: 0; } } #contents li, #seminarProgram li, #requirements li { position: relative; margin: 0 0 5px 0; padding-left: 18px; &::before { content: ""; clip-path: var(--clip-cut); display: inline-block; position: absolute; width: 7px; height: 7px; background-color: var(--highlight-secondary); left: 0; top: 0.6em; transform: none; } } #contents ul ul > li::before, #seminarProgram ul ul > li::before, #requirements ul ul > li::before { background-color: var(--highlight-primary); } #contents ul ul ul > li::before, #seminarProgram ul ul ul > li::before, #requirements ul ul ul > li::before { background-color: var(--highlight-secondary); } } [class*="app-event-detail-trainer-modal-cat-"] { .app-event-detail-trainer-block-border { border-color: var(--highlight-secondary); } a { text-decoration: none; font-weight: bold; color: var(--bitcol-5); &:hover { color: var(--highlight-secondary); } } } div#trainer, div#requirements { padding-bottom: 50px; } [data-isexecutionguarantee="1"] { div:has(> .bt_v_item_id) { position: relative; &::before { content: "Nach aktueller Anmeldezahl ist dieser Termin bereits durchführbar."; text-wrap: pretty; color: #fff; font-size: 0.9rem; width: 80%; background: var(--bitcol-5); padding: 6px; border-radius: 6px; position: absolute; opacity: 0; transform: translate(0, 0); transition: all .4s ease; } &:hover::before { transform: translate(0, -65px); opacity: 1; } } .bt_v_item_id + div { gap: 10px; flex-wrap: wrap; &::before { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -4 24 24' width='14' height='14'%3E%3Cpath fill='%235d6e83' d='m9.55 18l-5.7-5.7l1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z'/%3E%3C/svg%3E") " Durchführbar"; order: 1; } } } @media screen and (min-width:640px) and (max-width:767px) { [class*="app-card-cat-id-"] .event-detail-dates-btn { margin-left: -3.5vw; width: calc(100vw - 17px); } } /* ============================================================ USER MENU ============================================================ */ .border-t:nth-child(4), div#app-header-user-mobile-menu-item-menu-request-seminar { display: none; } div#app-user-main-menu-item-menu-booked-seminars a, div#app-user-main-menu-item-menu-team-learnings a, main[aria-label="pageMeta.userBookings.ariaLabel"] div.flex.items-start.justify-center.gap-2 span.truncate { font-size: 0; } div#app-user-main-menu-item-menu-booked-seminars a::after { content: "Meine Buchungen"; font-size: var(--text-sm); } div#app-user-main-menu-item-menu-team-learnings a::after { content: "Gruppenanmeldungen"; font-size: var(--text-sm); } main[aria-label="pageMeta.userBookings.ariaLabel"] { button[title="Alle Termine"] { color: var(--bitcol-5); text-decoration: none; &:hover { color: var(--bitcol-1); } } div.flex.items-start.justify-center.gap-2 { span.truncate::before { content: "Zum Online-Termin"; font-size: 14px; } &:has(span.truncate) { width: fit-content; } } } main[aria-label="Trainer-Seminar-Details"] > div > div > div > div > div > div:nth-child(3) > div > div:nth-child(1), main[aria-label="Trainer-Seminar-Notiz"] button:has(.i-heroicons-outline\:plus-circle), main[aria-label="Trainer-Seminar-Dokument verwalten"] button:has(.i-heroicons-outline\:plus-circle) { display: none; } body#bt_feedback div[data-dismissable-layer]:has(input[placeholder="Suchen"]) table { thead th:first-child, tbody tr > td:first-child { display: none; } } main[aria-label="Trainer-Seminarteilnehmer verwalten"] { div.p-4.sm\:px-6, table thead tr th:nth-child(2), table tbody tr td:nth-child(2) { display: none; } } main[aria-label="pageMeta.trainerManageSeminarFeedbackDetails.ariaLabel"] { div.border.rounded.bg-white.border-gray-200 td.whitespace-nowrap { white-space: pre-wrap; position: relative; } table tbody tr td:nth-child(3)::after { content: " "; width: calc(100% - 20px); position: absolute; left: 43px; background: #fff; display: inline-block; } } /* ============================================================ CART ============================================================ */ .app-cart-page { .app-bitkom-hero-section-desc h1 { font-size: clamp(1.5rem, calc(1.5rem + 2vw), 2.8rem); font-weight: 500; } span a { color: var(--bitcol-1); &:hover { color: var(--bitcol-5); } } button:has(.iconify.i-heroicons-outline\:check-circle.shrink-0.size-4), button:has(.iconify.i-heroicons-outline\:exclamation.shrink-0.size-4) { margin-top: 2px; cursor: pointer; border: 1px solid; box-shadow: none; } button:has(.iconify.i-heroicons-outline\:check-circle.shrink-0.size-4) { border-color: var(--bitcol-bg-2); &:hover { background-color: var(--bitcol-bg-2); } } button:has(.iconify.i-heroicons-outline\:exclamation.shrink-0.size-4) { border-color: var(--bitcol-bg-4); &:hover { background-color: var(--bitcol-bg-4); } } .iconify.i-heroicons-outline\:exclamation.shrink-0.size-4 { color: var(--bitcol-4); } .iconify.i-heroicons-outline\:check-circle.shrink-0.size-4 { color: var(--bitcol-2); } div.ring { box-shadow: none; > div.p-4.sm\:px-6:first-child { display: none; } } a.rounded-full { border-radius: 0; } .i-heroicons-outline\:shopping-cart { background-color: var(--bitcol-1-50); } h1.py-6.text-2xl { font-size: 1.9rem; } .app-category-id-16 > img { filter: url(#duotone-yellow); } .app-category-id-17 > img { filter: url(#duotone-turquoise); } .app-category-id-11 > img { filter: url(#duotone-green); } .app-category-id-12 > img { filter: url(#duotone-blue); } button > span.mr-1 { color: var(--bitcol-1); &:hover, &:active { color: var(--bitcol-1); } } .bt_v_cart_item_price { text-align: right; span { del { text-decoration: line-through var(--bitcol-1); color: var(--bitcol-5-50); &::after { content: "\A"; white-space: pre; } } } } div:has(> input[name="invoiceOtherEmail"].touched:required:invalid) { border: 1px solid var(--bitcol-4); } } .bt_v_cart_item { button:has(span.truncate) { padding: 16px; font-size: 0.875rem; width: 192px; } button span.iconify.i-heroicons\:plus { width: 1.25rem; height: 1.25rem; } div.flex.flex-col.items-start.text-sm.text-gray-600 { max-width: 192px; } } .app-checkout-address-selection, div[role="tabpanel"] div form div div.text-sm:has(div[role="radiogroup"] > fieldset), div[aria-label="Communication Config"] label:has(input[type="radio"]):first-of-type, div[aria-label="Communication Config"] label:has(input[type="radio"]):nth-of-type(2), div[aria-label="Communication Config"] label:has(input[type="radio"]):nth-of-type(4), .app-manager-manage-participant div[role="tablist"] button:nth-child(3) { display: none; } div[aria-label="Communication Config"] { div p#label-3, div p#desc-3 { font-size: 0; } div p#label-3::after { content: "Information an alle"; font-size: 1rem; } div p#desc-3::after { content: "Alle E-Mails und Dokumente, die im Zusammenhang mit der Buchung entstehen, werden sowohl an Sie als auch an die von Ihnen hinzufügten Personen gesendet."; font-size: .875rem; } & + div button { padding: 15px; span { font-size: 0; &::before { content: "Teilnehmer hinzufügen"; font-size: 0.875rem; } } } &::before { content: "Hier wählen Sie, wie die von Ihnen hinzugefügten Personen über die Seminarbuchung informiert werden.\A\A Wir bieten nur die Option 'Information an alle' an."; white-space: pre; color: var(--bitcol-5); font-size: 1em; line-height: 1; position: relative; top: -15px; display: block; font-weight: 600; margin: 80px 0 80px 15px; } } .app-manager-manage-participant { div > div { button[aria-controls*="reka-tabs-"]:first-of-type span::after { display: block; position: relative; top: 3px; content: "Personen, für die bereits ein Platz in der Buchung enthalten ist"; white-space: pre-wrap; justify-content: left; height: fit-content; font-size: .8rem; color: var(--bitcol-5-50); } button[aria-controls*="reka-tabs-"]:nth-of-type(3) span::after { display: block; position: relative; top: 3px; content: "Personen, für die zusätzliche Plätze im Seminar gebucht werden sollen"; white-space: pre-wrap; justify-content: left; height: fit-content; font-size: .8rem; color: var(--bitcol-5-50); } } .app-cart-group-reg-modal-part-manual-add-submit-btn { font-size: 0; &::before { content: "Speichern"; font-size: 0.875rem; } } } .app-cart-group-reg-modal-part-manual-add-submit-btn { padding: 15px; } @media (min-width:768px) { .app-cart-page .bt_v_cart_item_price span::after { content: "\A"; white-space: pre; } } /* ============================================================ TESTIMONIAL SLIDER ============================================================ */ [class*="app-card-cat-id-"] #contents .tms-title, .tms-title { margin-top: 35px; margin-bottom: 40px; font-size: 1.9rem; font-weight: 600; color: var(--bitcol-5); } .tms { * { box-sizing: border-box; } [type="radio"] { position: absolute; inset: auto; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } } .tms-viewport { overflow: hidden; position: relative; } .tms-track { display: flex; width: 100%; transition: transform .5s ease; will-change: transform; transform: translateX(calc(-1 * var(--page, 0) * 100%)); } .tms-page { flex: 0 0 100%; width: 100%; } .tms-spaces { gap: 3rem; padding-inline: 2rem; } .tms-card { background-color: var(--bg-color); padding: 40px 20px 50px 35px; p { padding: .7rem .7rem; margin: 0; font-size: 1.125rem; line-height: 1.75rem; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 16 3 4; } .quote { color: var(--bitcol-5); &::before { content: "“"; color: var(--highlight-primary); position: absolute; transform: translate(-0.4em, -0.2em); font-size: 400%; } } .author { padding-left: .7rem; font-size: 80%; font-weight: 550; } .authorfirm { padding-left: .7rem; line-height: normal; font-size: 80%; } } .tms-arrows { display: flex; justify-content: center; align-items: center; column-gap: 2rem; margin-top: .75rem; } .tms-arrow { display: none; inline-size: 3.75rem; block-size: 3.75rem; font-size: 2.75rem; line-height: 1; cursor: pointer; user-select: none; &:hover { color: var(--highlight-primary); opacity: 1; } &[aria-disabled="true"] { opacity: .50; pointer-events: none; } } #pg-1:checked ~ .tms-viewport .tms-track { --page: 0; } #pg-2:checked ~ .tms-viewport .tms-track { --page: 1; } #pg-3:checked ~ .tms-viewport .tms-track { --page: 2; } #pg-4:checked ~ .tms-viewport .tms-track { --page: 3; } #pg-5:checked ~ .tms-viewport .tms-track { --page: 4; } #pg-6:checked ~ .tms-viewport .tms-track { --page: 5; } #pg-1:checked ~ .tms-arrows [data-when="p1"] { display: inline-flex; } #pg-2:checked ~ .tms-arrows [data-when="p2"] { display: inline-flex; } #pg-3:checked ~ .tms-arrows [data-when="p3"] { display: inline-flex; } #pg-4:checked ~ .tms-arrows [data-when="p4"] { display: inline-flex; } #pg-5:checked ~ .tms-arrows [data-when="p5"] { display: inline-flex; } #pg-6:checked ~ .tms-arrows [data-when="p6"] { display: inline-flex; } /* ============================================================ VIDEO WRAP ============================================================ */ .video-wrap { margin-inline: auto; position: relative; width: 70%; padding-bottom: 39.375%; height: 0; overflow: hidden; iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; display: block; } } /* ============================================================ EXTRA INFO ============================================================ */ .seminar-extras { box-sizing: border-box; padding: 2.3rem 0 2.3rem 0; overflow-x: hidden; width: calc(100vw - 17px); position: relative; left: 50%; transform: translateX(-50%); max-width: none; background-color: var(--bg-color); } [class*="app-card-cat-id-"] #requirements ul + p:has(.extras-btn) { margin-top: 20px; } .extras-btn + .extras-btn { margin-right: 20px; } .extras-btn { font-size: 1rem; padding: 16px; border: solid 1px; border-color: var(--bitcol-5); color: var(--bitcol-5); background-color: #fff; &:hover { color: #fff; background-color: var(--bitcol-2); transition: all var(--tr-fast); } } .extras-box { margin: 3rem 0 3rem 0; } details { &[open] { .extras-info svg { transform: rotate(180deg); transition: all var(--tr-mid); } > div { max-height: max-content; opacity: 1; transition: all var(--tr-mid); } } > div { max-height: 0; opacity: 0; overflow: hidden; transition: all var(--tr-mid); } } /* ============================================================ LOGIN PAGE ============================================================ */ main[aria-label="Anmelden"] { .w-full.sm\:w-1\/2.flex.flex-col.items-center.justify-center.p-4.sm\:p-8 > *:not(.bt_reg_now) { display: none; } .app-login-submit-btn { font-size: 1rem; font-weight: 600; padding: 12px 14px; line-height: unset; } a:not(.bt_reg_now_btn) { font-weight: 450; text-decoration: none; color: var(--bitcol-1); &:hover { color: var(--bitcol-5); transition: all var(--tr-fast); } } div.app-login-sign-up-link-cont::after { content: "Ihre Login-Daten für das Mitgliederportal des Bitkom sind hier nicht gültig. Sie benötigen ein separates Konto bei der Bitkom\A0 Akademie."; position: relative; display: block; white-space: pre-wrap; margin: 1.5rem 0; padding: 1rem; background: var(--bitcol-bg-1); color: var(--bitcol-5); font-size: 0.875rem; text-align: left; } } main[aria-label="Anmelden"] div.bg-white.rounded-lg.shadow.p-4.w-full.max-w-5xl.flex.flex-col.sm\:flex-row.z-10.relative.h-fit.mx-4.sm\:mx-0 { @media (min-width: 40rem) { flex-direction: row-reverse; } @media (max-width: 639px) { flex-direction: column-reverse; } } /* ============================================================ PASSWORT RESET PAGE ============================================================ */ main[aria-label="Passwort zurücksetzen"] { div.text-center a { text-decoration: none; font-weight: 450; transition: color var(--tr-fast); &:hover { color: var(--bitcol-5); } } button[type="submit"] { font-size: 0; &::before { content: "Absenden"; font-size: 1rem; font-weight: 600; line-height: unset; } } div:has(> input[name="password"]), div:has(> input[name="confirmPassword"]) { position: relative; &::before { content: "Mindestens 8 Zeichen. Muss enthalten: Großbuchstabe, Ziffer und Sonderzeichen.\A\A Erlaubte Sonderzeichen sind: !@#$%^&_*"; text-wrap: pretty; white-space: pre-wrap; color: #fff; font-size: 0.9rem; width: 80%; background: var(--bitcol-5); padding: 6px; border-radius: 6px; position: absolute; opacity: 0; transform: translate(0, 0); transition: all .4s ease; } &:hover::before { transform: translate(0, -6rem); opacity: 1; } } } /* ============================================================ REGISTRATION PAGE ============================================================ */ body:has(main[aria-label="Registrieren"]) { input[placeholder="Search..."].bg-transparent { background-color: #f1f1f1; } div[role="group"][aria-label="progress"] form { display: flex; flex-direction: column; > :nth-child(1) { order: 1; } > :nth-child(2) { order: 2; } > :nth-child(3) { order: 3; } > :nth-child(4) { order: 5; } > :nth-child(5) { order: 4; } > :nth-child(6) { order: 6; } } div.py-2.text-center.text-sm.text-muted { font-size: 0; &::before { content: "Die Suche beginnt bei drei Buchstaben."; font-size: 0.875rem; } } } main[aria-label="Registrieren"] { div.w-full.sm\:w-2\/5.flex.flex-col.items-center.justify-center.p-4.sm\:p-8 { > div { display: none; } justify-content: start !important; } .additionalPrivacyNoticeMargin { margin-top: -10px; } div.flex.gap-0.items-center:has(input[name="orgPosition"]) { --tip-top: -37px; --tip-left: -18rem; --tip-width: 215px; --tip-pd: 15px; --tip-bg: #fff; --icon-top: -12px; --icon-left: -5em; --icon-size: 60px; --icon-path: url("data:image/svg+xml;utf8,"); &::before, &::after { opacity: 0; transform: translateY(6px); pointer-events: none; } &::before { transition: opacity .8s ease, transform .8s ease; position: absolute; top: var(--tip-top); left: var(--tip-left); width: var(--tip-width); display: block; content: "Anhand Ihrer Eingabe erhalten Sie Vorschläge.\A Sie können auswählen oder eine neue Position anlegen."; background-color: var(--tip-bg); font-weight: 500; white-space: pre-line; padding: var(--tip-pd); z-index: 9999; color: var(--bitcol-5); } &::after { transition: opacity .3s ease, transform .3s ease; position: absolute; top: var(--icon-top); left: var(--icon-left); display: inline-block; content: ""; z-index: 9998; width: var(--icon-size); height: var(--icon-size); background-color: var(--bitcol-1); --svg: var(--icon-path); } &:hover::before, &:hover::after, &:focus::before, &:focus::after, &:focus-within::before, &:focus-within::after { opacity: 1; transform: translateY(0); } } .w-full.sm\:w-2\/5.flex.flex-col.items-center.items-center.p-4.sm\:p-8:first-child { h1, h2 { display: none; } p { justify-content: left; color: var(--bitcol-5); font-size: 1.5rem; &::after { width: 60%; animation: roll-out 4s ease; display: block; content: ""; position: relative; left: 50%; transform: translateX(-50%); height: 3px; bottom: -0.8em; background-color: var(--bitcol-1); } } } a:not(.text-inverted) { font-weight: 450; text-decoration: none; color: var(--bitcol-1); &:hover { color: var(--bitcol-5); transition: all var(--tr-fast); } } div.text-center h3.text-gray-600.mb-6 { font-weight: 600; } form div:nth-child(2) > div.mb-4.w-full > div > div.mt-1.relative > div.flex.gap-0.items-center > button:has(span.truncate.text-dimmed) { --tip-top: -37px; --tip-left: -18rem; --tip-width: 215px; --tip-pd: 15px; --tip-bg: #fff; --icon-top: -12px; --icon-left: -5em; --icon-size: 60px; --icon-path: url("data:image/svg+xml;utf8,"); &::before, &::after { opacity: 0; transform: translateY(6px); pointer-events: none; } &::before { transition: opacity .8s ease, transform .8s ease; position: absolute; top: var(--tip-top); left: var(--tip-left); width: var(--tip-width); display: block; content: "Bitte wählen Sie aus unserer Vorschlagsliste aus.\A Als Privatperson geben Sie Privat an."; background-color: var(--tip-bg); font-weight: 500; white-space: pre-line; padding: var(--tip-pd); z-index: 9999; color: var(--bitcol-5); } &::after { transition: opacity .3s ease, transform .3s ease; position: absolute; top: var(--icon-top); left: var(--icon-left); display: inline-block; content: ""; z-index: 9998; width: var(--icon-size); height: var(--icon-size); background-color: var(--bitcol-1); --svg: var(--icon-path); } &:hover::before, &:hover::after, &:focus::before, &:focus::after, &:focus-within::before, &:focus-within::after { opacity: 1; transform: translateY(0); } } } @media (max-width: 639px) { main[aria-label="Registrieren"] { div.flex.gap-0.items-center:has(input[name="orgPosition"]) { --tip-top: -140px; --tip-left: 0; --tip-width: 100%; --tip-pd: 30px 10px; --tip-bg: #F9FAFB; --icon-top: -55px; --icon-left: 43%; --icon-size: 40px; --icon-path: url("data:image/svg+xml;utf8,"); } form div:nth-child(2) > div.mb-4.w-full > div > div.mt-1.relative > div.flex.gap-0.items-center > button:has(span.truncate.text-dimmed) { --tip-top: -140px; --tip-left: 0; --tip-width: 100%; --tip-pd: 30px 10px; --tip-bg: #F9FAFB; --icon-top: -55px; --icon-left: 43%; --icon-size: 40px; --icon-path: url("data:image/svg+xml;utf8,"); } } } /* ============================================================ HOME PAGE ============================================================ */ /* ============================================================ CTA FOR CART ============================================================ */ #bt_cart_cta { opacity: 0; visibility: hidden; pointer-events: none; display: none; } body:has(a[href="/login"], a[href^="/login?"]) #bt_cart_cta { opacity: 1; visibility: visible; pointer-events: auto; display: block; } .bt_cart_cta { padding-top: 15px; padding-bottom: 30px; h2 { padding: 25px 0; font-size: 1.9em; font-weight: 600; color: var(--bitcol-1); } p { font-size: 1em; } a { color: var(--bitcol-1); font-weight: 500; &:hover { color: var(--bitcol-5); } } } @media (min-width:946px) { .bt_cart_cta p { line-height: 2; padding-bottom: 16px; } } @media (max-width:945px) { .bt_cart_cta p { line-height: 1.5; padding-bottom: 10px; } } p.bt_cart_cta_rsn { padding-left: 35px; position: relative; } .bt_cart_cta_rsn::before { content: ""; position: absolute; left: 7px; top: 3px; width: 18px; height: 18px; transform: translateY(3px); background-color: var(--bitcol-2); --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='m14.914 4l-9.47 9.47L1.09 8.393L2.608 7.09l2.948 3.44L13.5 2.585z'/%3E%3C/svg%3E"); } /* ============================================================ FOOTER ============================================================ */ div:has(div#app-footer-logo) { margin-top: 20px; } footer { background-color: var(--bitcol-5); h3, a { font-size: 1.125rem; line-height: 1.6875rem; } h3 { color: #C0B9B9; } p { color: #fff; } a[href="https://bitkom-akademie.de/vertrag-widerrufen"] { font-weight: bold; text-decoration: underline; text-decoration-color: var(--bitcol-2); &:hover { text-decoration: none; } } } .app-footer-nested-links-list { a, span { color: #fff; } a:hover { color: var(--bitcol-1); } } #app-footer-contact-button-cont a { font-weight: 600; color: #fff; border-color: #fff; box-shadow: none; border: 1px solid #fff; padding: 15px 48px; &:hover { background-color: #FFFFFF; color: var(--bitcol-5); } }

Further Education for the Digitalized Working World

Current Seminars

Green IT-Experte