/* ============================================================ ROOT SETTINGS ============================================================ */ :root { --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: #aa46ff; --bitcol-6-50: #aa46ff80; --bitcol-7: #28e1ff; --bitcol-7-50: #28e1ff80; --bitcol-bg-1: #EBF5FF; --bitcol-bg-2: #E6F5E6; --bitcol-bg-3: #FAF5E1; --bitcol-bg-4: #FFF0E6; --bitcol-bg-6: #faebff; --bitcol-bg-7: #e6faff; --ui-container: 70rem; --font-sans: thesans, Lexend Deca, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important; --ui-radius: 0rem; --ui-text: var(--bitcol-5); --default-font-feature-settings: 18px; } html { scroll-behavior: smooth; } .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; } .prose 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 { color: transparent; opacity: 0; } #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; } /* --- JS-INJECTED STYLES --- */ .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_sd-contact a { color: var(--highlight-secondary); transition: all .3s ease; } .bt_sd-contact a:hover { color: var(--bitcol-5); } .bt_note { display: block; font-size: smaller; padding-top: 2px; } #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; } .bt_sales_ppl p { padding: 8px 0; } .bt_cart_alert_main::after { content: "Nach 15 Minuten ohne Aktivität wird der Warenkorb automatisch geleert."; position: relative; display: block; margin-top: 5px; font-size: smaller; font-weight: 600; } .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."; position: relative; display: block; margin-top: 5px; font-size: smaller; font-weight: 600; } .icon-contact { margin-top: 4px; display: inline-block; width: 1em; height: 1em; background-color: currentColor; -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%; --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"); } /* ============================================================ 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"); } /* ============================================================ 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; } .hero-image-clip { clip-path: polygon(0 0, 100% 0, 100% 92.5%, 0% 100%); } .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; } .app-footer-company-info>div>div { position: relative; top: -30px; } .text-error { color: var(--bitcol-4); } .text-green-500 { color: var(--bitcol-2); } /* --- Themes --- */ /* Yellow, Live-Online-Seminare */ .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); --bfhover: var(--bitcol-5); --afthover: #fff; --bg-color: var(--bitcol-bg-3); --bg-color2: var(--bitcol-bg-4); --imgfilter: url(#duotone-yellow); } /* Green, Workshops */ .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); --bfhover: var(--bitcol-5); --afthover: #fff; --bg-color: var(--bitcol-bg-2); --bg-color2: var(--bitcol-bg-1); --imgfilter: url(#duotone-green); } /* Blue, Zertifikatslehrgänge */ .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); --bfhover: #fff; --afthover: var(--bitcol-5); --bg-color: var(--bitcol-bg-1); --bg-color2: var(--bitcol-bg-2); --imgfilter: url(#duotone-blue); } /* Violet, Specials */ .app-card-cat-id-18, .app-event-detail-trainer-modal-cat-18 { --highlight-primary: var(--bitcol-6); --highlight-primary-50: var(--bitcol-6-50); --highlight-secondary: var(--bitcol-7); --bfhover: #fff; --afthover: var(--bitcol-5); --bg-color: var(--bitcol-bg-6); --bg-color2: var(--bitcol-bg-7); --imgfilter: url("data:image/svg+xml;utf8,#f"); } /* ============================================================ SPECIAL EFFECTS ============================================================ */ .app-elem-clip-path { clip-path: polygon(0 0, 100% 0, 100% 92.5%, 0% 100%); transition: clip-path 0.3s ease-in-out !important; } .app-elem-clip-path:hover { clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); } .seminar-detail-content .selected-tab span { color: var(--bitcol-2); } .seminar-detail-content #contents ul, .seminar-detail-content #contents ol, .seminar-detail-content #seminarProgram ul, .seminar-detail-content #seminarProgram ol, .seminar-detail-content #requirements ul, .seminar-detail-content #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 .3s ease-in-out; } .ring-primary\/50:hover, .ring-primary\/75:hover { background-color: var(--bitcol-1); color: #fff; } .bg-primary { cursor: pointer; border: 1px solid var(--bitcol-1); transition: all .3s ease-in-out; } .bg-primary: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; } a[isexecutionguarantee="1"]:has(article.planned_events) .event-list-card-info::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); -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%; } a[isexecutionguarantee="1"]:has(article.planned_events) .event-list-card-info::before { content: "Durchführung garantiert"; 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 0.8s ease; } a[isexecutionguarantee="1"]:has(article.planned_events) .event-list-card-info: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), #app-event-list-page .relative.overflow-auto.w-full.hidden.md\:block table.min-w-full.overflow-clip tbody tr td:nth-of-type(5) { display: none; } #app-event-list-page table.min-w-full.overflow-clip .text-muted { color: var(--bitcol-5); } #app-event-list-page .app-bitkom-hero-section-desc h1 { font-size: clamp(1.5rem, calc(1.1rem + 2vw), 2.8rem); } #app-event-list-page div.w-full.mx-auto.px-4 .text-2xl { font-size: 1.9rem; margin: 25px 0 10px 0; } #app-event-list-page div.rounded-lg:has(form) { padding: calc(var(--spacing) * 7); } #app-event-list-page form>div>div>button { display: none !important; } .app-event-list-dp-cont .vc-bordered { border: none; } #app-event-list-page input.ring { box-shadow: none !important; } div.border-b:has(.app-event-list-form-fields):first-child { margin-right: 30px; border: none !important; } #app-event-list-page input.ring-inset { --tw-ring-inset: ; box-shadow: none !important; } #app-event-list-page .i-heroicons-outline\:document-magnifying-glass { background-color: var(--bitcol-1-50); } .event-list-card { clip-path: polygon(0 0, 100% 0, 100% 95%, 0% 100%); transition: clip-path 0.3s ease-in-out !important; } .event-list-card:hover { clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); } .event-list-card-info { padding: calc(var(--spacing) * 8); } .app-event-list-dp-cont .vc-pane-container { background-color: var(--bitcol-bg-2); } .app-event-list-select-menu span.iconify, .app-event-list-date-range span.iconify { height: 15px; margin-right: 20px; } [class*="app-card-cat-id-"] .event-list-card-img { filter: var(--imgfilter); color: var(--afthover) } [class*="app-card-cat-id-"] .event-list-card-type { background-color: var(--highlight-primary); color: var(--bfhover); font-weight: 500; } [class*="app-card-cat-id-"] .event-list-card-info { background-color: var(--bg-color); } #app-event-list-page section.relative.w-full { background: var(--bitcol-bg-2); } #app-event-list-page button[role="switch"] { cursor: pointer; } .app-event-list-dp-cont .vc-header { border-radius: 0; } .app-event-list-dp-cont .vc-focus { --vc-focus-ring: 0; } .app-event-list-dp-cont .vc-arrow .vc-base-icon { height: 16px; width: 16px; } .app-event-list-dp-cont .vc-arrow:hover, .app-event-list-dp-cont .vc-focus:hover { background: #fff !important; } .app-event-list-dp-cont .vc-day .vc-day-content { color: var(--bitcol-5); } .app-event-list-dp-cont .vc-title-wrapper { font-size: 15px; color: var(--bitcol-5); } .app-event-list-dp-cont .vc-focusable:hover { background: #fff !important; } .app-event-list-dp-cont .vc-highlight-content-solid { background: var(--bitcol-1) !important; } #app-event-list-page, .seminar-detail-content { background-color: #fff !important; } .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; } .app-event-list-select-menu span, .app-event-list-date-range span { margin-top: -2px; font-weight: normal; color: var(--bitcol-5); } .app-event-list-form-fields button:has(span.iconify.i-heroicons-outline\:x-circle.shrink-0.size-5) { background-color: transparent; } .app-event-list-form-fields button>span.iconify.i-heroicons-outline\:x-circle.shrink-0.size-5 { background-color: var(--bitcol-5-50); position: absolute; right: 10px; top: -5px; } .app-event-list-form-fields button>span.iconify.i-heroicons-outline\:x-circle.shrink-0.size-5:hover { background-color: var(--bitcol-5); transition: all .3s ease-in-out; } .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 { transform: rotate(180deg); transition: all .3s ease-in-out; } .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 .3s ease-in-out; } div[id^="reka-combobox-item-v-"]:hover { background: #fff; } #app-event-list-page tr:has(td.p-4.text-sm.text-muted.whitespace-nowrap) { height: 125px; } #app-event-list-page td.p-4.text-sm.text-muted.whitespace-nowrap { white-space: pre-wrap; } #app-event-list-page td.p-4.text-sm.text-muted.whitespace-nowrap a:hover, #app-event-list-page div.bg-white.border-b.border-primary-500.p-4 h3:hover { text-decoration: none; color: var(--bitcol-5); } /* ============================================================ NAVIGATION ============================================================ */ .app-layout>header#header { box-shadow: none; height: 142px; } .app-layout>main { margin-top: 142px !important; } #app-header-cart-link>span { display: none; } .app-header-d-menu-list li:first-child { display: none; } #app-header-user-desktop-menu-login { font-weight: 600; border: 1px solid var(--bitcol-1); color: var(--bitcol-1); padding-right: 17px; margin-right: 0; } #app-header-user-desktop-menu-login:hover { background-color: var(--bitcol-1) !important; color: #fff !important; } #app-header-user-desktop-menu-login .iconify { display: none; } #app-header-user-desktop-menu-register { display: none; } #menu-request-seminar { display: none; } .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; } .app-header-d-menu-list { max-width: var(--ui-container); margin: 0 auto; padding: 50px calc(var(--spacing) * 8); } .app-header-d-menu-link { color: var(--bitcol-5); font-weight: 600; transition: none; font-size: 15px; box-shadow: none; } #menu-request-seminar { color: var(--bitcol-1); font-weight: 600; transition: none; box-shadow: none; } #menu-request-seminar:hover { color: var(--bitcol-5); } #menu-request-seminar .iconify { display: none; } .app-header-d-menu-link-label span { display: none; } .app-header-d-menu-link-trailing { display: none; } .app-header-d-menu-link:hover { background-color: #fff; color: var(--bitcol-1); transition: none; box-shadow: none; } .app-header-d-menu-link::before { background: transparent !important; transition: none !important; } .app-header-d-menu-link:hover::before { color: inherit !important; background: transparent !important; } .app-header-d-menu-child-link { color: #fff; } .app-header-d-menu-child-link-label { font-size: 22px; } .app-header-d-menu-child-link:hover { background-color: transparent; color: var(--bitcol-1); } #app-header-user-menu-mobile-drawer-dynamic { background-color: #08262e; } #app-header-user-menu-mobile-drawer-dynamic nav ul li { border: none; } #app-header-user-menu-mobile-drawer-dynamic nav ul li a { border: none; color: #fff; } #app-header-user-menu-mobile-drawer-dynamic nav ul li button { color: #fff; border: none; } #app-header-user-menu-mobile-drawer-dynamic .app-header-m-menu-list { border: none; } .app-header-user-avatar { display: none; } .app-header-d-menu-viewport::before { content: ""; position: absolute; inset: 0; background: url('data:image/svg+xml;utf8,') no-repeat center / cover; } nav>div.flex.items-center.gap-1>button.ring { box-shadow: none; } /* ============================================================ DETAIL PAGES ============================================================ */ /* --- TRANSFORM Workshops --- */ .app-card-cat-id-11:has(img[src="https://bitkom-admin.simplyorg-seminare.de//picture/event/114"]) ul.seminar-detail-content-left-tab li:nth-child(2), .app-card-cat-id-11:has(img[src="https://bitkom-admin.simplyorg-seminare.de//picture/event/114"]) ul.seminar-detail-content-left-tab li:nth-child(4), .app-card-cat-id-11:has(img[src="https://bitkom-admin.simplyorg-seminare.de//picture/event/115"]) ul.seminar-detail-content-left-tab li:nth-child(2), .app-card-cat-id-11:has(img[src="https://bitkom-admin.simplyorg-seminare.de//picture/event/115"]) ul.seminar-detail-content-left-tab li:nth-child(4), .app-card-cat-id-11:has(img[src="https://bitkom-admin.simplyorg-seminare.de//picture/event/116"]) ul.seminar-detail-content-left-tab li:nth-child(2), .app-card-cat-id-11:has(img[src="https://bitkom-admin.simplyorg-seminare.de//picture/event/116"]) ul.seminar-detail-content-left-tab li:nth-child(4), .app-card-cat-id-11:has(img[src="https://bitkom-admin.simplyorg-seminare.de//picture/event/117"]) ul.seminar-detail-content-left-tab li:nth-child(2), .app-card-cat-id-11:has(img[src="https://bitkom-admin.simplyorg-seminare.de//picture/event/117"]) ul.seminar-detail-content-left-tab li:nth-child(4), .app-card-cat-id-11:has(img[src="https://bitkom-admin.simplyorg-seminare.de//picture/event/118"]) ul.seminar-detail-content-left-tab li:nth-child(2), .app-card-cat-id-11:has(img[src="https://bitkom-admin.simplyorg-seminare.de//picture/event/118"]) ul.seminar-detail-content-left-tab li:nth-child(4) { display: none; } .app-card-cat-id-16 .event-detail-info-card-content div:nth-child(2) > div.flex.flex-col > span { 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 .event-detail-info-card-content div:nth-of-type(3) span:nth-of-type(2) { font-size: 0; } .app-card-cat-id-12 .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 .event-detail-planned-event-block > div > div > div:nth-of-type(3) > div:last-of-type { font-size: 0; } .app-card-cat-id-12 .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 .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 { display: none; } .app-card-cat-id-16 ul.seminar-detail-content-left-tab li:nth-child(2) { display: none; } 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; } 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; } .app-event-detail-page { margin: 0; background-color: #fff; min-height: 100vh; } .app-event-detail-page .text-2xl { font-size: 1.9rem; } .app-event-detail-page .text-2xl:not(.seminar-extras span) { margin-bottom: 25px; } .app-event-detail-page .app-bitkom-hero-section-desc h2 { font-size: clamp(1.3rem, calc(1.3rem + 1.8vw), 2.8rem); } .app-event-detail-page .app-bitkom-hero-section-desc h1, .app-event-detail-page .app-bitkom-hero-section-desc h3 { font-size: clamp(0.8rem, calc(0.8rem + 1vw), 1.3rem); } .app-event-detail-page #contents { min-height: 240px; } .app-event-detail-page .event-detail-info-card-content>div { align-items: self-start; } .app-event-detail-page .event-detail-info-card-content>div .iconify { transform: translate(0, 3px) } [class*="app-card-cat-id-"] .event-detail-hero-img { filter: var(--imgfilter); } [class*="app-card-cat-id-"] .event-detail-hero-svg line { stroke: var(--highlight-secondary); } .app-card-cat-id-12 .event-detail-hero-svg line { stroke: var(--bitcol-2); } [class*="app-card-cat-id-"] #event-top-tab-nav { padding: .5rem 0 .5rem 0; } [class*="app-card-cat-id-"] #event-top-tab-nav button { font-size: 1.125rem; } [class*="app-card-cat-id-"] #event-top-tab-nav .selected-tab span, [class*="app-card-cat-id-"] #event-top-tab-nav .seminar-detail-content-left-tab button:hover { color: var(--highlight-primary); background-color: transparent; } [class*="app-card-cat-id-"] .event-detail-dates-btn { background-color: var(--highlight-primary); height: calc(100% + 1rem); transition: all 0.3s ease-in-out; } @media (max-width:767px) { [class*="app-card-cat-id-"] .event-detail-dates-btn { margin-bottom: -0.5rem; } } @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); } } [class*="app-card-cat-id-"] .event-detail-dates-btn:hover { background-color: var(--highlight-secondary); color: var(--afthover); } [class*="app-card-cat-id-"] .seminar-detail-content-right-dates-btn { background-color: transparent; color: var(--bfhover); transition: color 0.3s ease-in-out; } [class*="app-card-cat-id-"] .seminar-detail-content-right-dates-btn:hover { background-color: transparent; color: var(--afthover); } [class*="app-card-cat-id-"] .event-detail-info-card-border { border-color: var(--highlight-secondary); margin-bottom: 25px; } .app-card-cat-id-12 .event-detail-info-card-border { height: 300px; border-color: var(--bitcol-2); } [class*="app-card-cat-id-"] .app-contact-detail-left-block-img-cont { border-color: var(--highlight-primary); } [class*="app-card-cat-id-"] .event-detail-info-card-content { background-color: var(--bg-color); min-height: 260px; height: fit-content; } [class*="app-card-cat-id-"] .event-detail-info-card-content .truncate { font-size: 1rem; color: var(--highlight-secondary); } [class*="app-card-cat-id-"] .event-detail-info-card-content .truncate:hover { color: var(--bitcol-5); } [class*="app-card-cat-id-"] .seminar-planned-event-card { border: 1px solid var(--highlight-primary-50); } [class*="app-card-cat-id-"] .event-detail-planned-event-block { background-color: var(--bg-color); } [class*="app-card-cat-id-"] .event-detail-planned-event-block-border { border-color: var(--highlight-primary); background: #fff; } [class*="app-card-cat-id-"] .event-detail-planned-event-block div div div:nth-child(3) div.space-y-2 div { margin-bottom: 0; } [class*="app-card-cat-id-"] .app-planned-event-details-button:hover { background-color: transparent; } [class*="app-card-cat-id-"] div:has(> .app-event-detail-trainer-block-border) { align-items: normal; } [class*="app-card-cat-id-"] .app-event-detail-trainer-block-border { border-color: var(--highlight-secondary); margin-bottom: 0.8rem; width: 225px; height: 225px; } .app-card-cat-id-12 .app-event-detail-trainer-block-border { border-color: var(--bitcol-2); } [class*="app-card-cat-id-"] .app-contact-detail-left-block div p { margin-top: -5px; font-size: 1rem; } [class*="app-card-cat-id-"] .app-contact-detail-left-block { color: var(--bitcol-5); } .app-card-cat-id-16 .event-detail-contact-form, .app-card-cat-id-16 .app-contact-detail-left-block { display: none; } [class*="app-card-cat-id-"] .event-detail-contact-form label { font-size: 0.9rem; color: var(--bitcol-5); } [class*="app-card-cat-id-"] .event-detail-contact-form a { color: var(--highlight-secondary); } [class*="app-card-cat-id-"] .event-detail-contact-form a:hover { color: var(--bitcol-5); } [class*="app-card-cat-id-"] .event-detail-contact-form button[type="submit"] { font-size: 0; gap: 0; } [class*="app-card-cat-id-"] .event-detail-contact-form button[type="submit"]::before { content: "Absenden"; font-size: 14px; width: fit-content; } [class*="app-card-cat-id-"] #contents h4, [class*="app-card-cat-id-"] #seminarProgram h4, [class*="app-card-cat-id-"] #requirements h4 { margin-top: 35px; margin-bottom: 15px; font-size: 1.9rem; font-weight: 600; color: var(--bitcol-5); text-wrap: balance; } /* --- Slogan ---*/ @keyframes roll-out { from { width: 0; } to { width: 60% } } @media (max-width:599px) { [class*="app-card-cat-id-"] #contents .slogan, [class*="app-card-cat-id-"] #seminarProgram .slogan, [class*="app-card-cat-id-"] #requirements .slogan { width: 90%; } } @media (min-width:600px) { [class*="app-card-cat-id-"] #contents .slogan, [class*="app-card-cat-id-"] #seminarProgram .slogan, [class*="app-card-cat-id-"] #requirements .slogan { width: 60%; } } [class*="app-card-cat-id-"] #contents .slogan, [class*="app-card-cat-id-"] #seminarProgram .slogan, [class*="app-card-cat-id-"] #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; } [class*="app-card-cat-id-"] #contents .slogan::after, [class*="app-card-cat-id-"] #seminarProgram .slogan::after, [class*="app-card-cat-id-"] #requirements .slogan::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); } [class*="app-card-cat-id-"] #contents a, [class*="app-card-cat-id-"] #seminarProgram a, [class*="app-card-cat-id-"] #requirements a { text-decoration: none; font-weight: bold; color: var(--highlight-secondary); position: relative; margin-left: 22px; } [class*="app-card-cat-id-"] #requirements .extras-btn { text-decoration: none; font-weight: bold; color: var(--bitcol-5); } [class*="app-card-cat-id-"] #contents a:hover, [class*="app-card-cat-id-"] #seminarProgram a:hover, [class*="app-card-cat-id-"] #requirements a:hover { color: var(--bitcol-5); } [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 { content: ""; display: inline-block; position: absolute; top: 5px; left: -22px; width: 24px; height: 14px; --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"); background-color: currentColor; -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%; } [class*="app-card-cat-id-"] .app-contact-detail-left-block a { color: var(--highlight-secondary); } [class*="app-card-cat-id-"] .app-contact-detail-left-block a:hover { color: var(--bitcol-5); } [class*="app-card-cat-id-"] section.relative.w-full { background: var(--bg-color); } [class*="app-card-cat-id-"] #contents ul+p, [class*="app-card-cat-id-"] #seminarProgram ul+p, [class*="app-card-cat-id-"] #requirements ul+p { margin-top: 0; } [class*="app-card-cat-id-"] #contents ul+h4, [class*="app-card-cat-id-"] #seminarProgram ul+h4, [class*="app-card-cat-id-"] #requirements ul+h4 { margin-top: 20px; } [class*="app-card-cat-id-"] #contents ul, [class*="app-card-cat-id-"] #seminarProgram ul, [class*="app-card-cat-id-"] #requirements ul { list-style: none !important; list-style-type: none !important; margin: 0; padding-left: 15px; padding-bottom: 15px; } [class*="app-card-cat-id-"] #contents ul ul, [class*="app-card-cat-id-"] #seminarProgram ul ul, [class*="app-card-cat-id-"] #requirements ul ul { margin-top: 2px; padding: 0; } [class*="app-card-cat-id-"] #contents li, [class*="app-card-cat-id-"] #seminarProgram li, [class*="app-card-cat-id-"] #requirements li { position: relative; margin: 0 0 5px 0; padding-left: 18px; } [class*="app-card-cat-id-"] #contents li::before, [class*="app-card-cat-id-"] #seminarProgram li::before, [class*="app-card-cat-id-"] #requirements li::before { content: ""; clip-path: polygon(0 0, 100% 0, 100% 92.5%, 0% 100%); display: inline-block; position: absolute; width: 7px; height: 7px; background-color: var(--highlight-secondary); left: 0; top: 0.6em; transform: none; } [class*="app-card-cat-id-"] #contents ul ul>li::before, [class*="app-card-cat-id-"] #seminarProgram ul ul>li::before, [class*="app-card-cat-id-"] #requirements ul ul>li::before { background-color: var(--highlight-primary); } [class*="app-card-cat-id-"] #contents ul ul ul>li::before, [class*="app-card-cat-id-"] #seminarProgram ul ul ul>li::before, [class*="app-card-cat-id-"] #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); } [class*="app-event-detail-trainer-modal-cat-"] a { text-decoration: none; font-weight: bold; color: var(--bitcol-5); } [class*="app-event-detail-trainer-modal-cat-"] a:hover { color: var(--highlight-secondary); } div#trainer, div#requirements { padding-bottom: 50px; } div#trainer button.ring { cursor: pointer; --tw-ring-color: var(--bitcol-5); background-color: #fff; color: var(--bitcol-5); transition: all .3s ease-in-out; } div#trainer button.ring:hover { background-color: var(--bitcol-5); color: #fff; transition: all .3s ease-in-out; } .app-event-detail-page .app-planned-event-details-button { cursor: pointer; color: var(--bitcol-5); } .app-event-detail-page .ring-primary, .app-event-detail-page .extras-btn { cursor: pointer; --tw-ring-color: var(--bitcol-5); background-color: #fff; color: var(--bitcol-5); } .app-event-detail-page .cart-button, .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); transition: all .3s ease-in-out; } .app-event-detail-page .cart-button { min-width: 180px; justify-content: center; } .app-event-detail-page .cart-button:hover, .app-event-detail-page .extras-btn:hover, .app-event-detail-page .event-detail-contact-btn:hover { background-color: var(--bitcol-5); color: #fff !important; transition: all .3s ease-in-out; } /* --- Sonderformate nach Seminar-Vorlagen-ID ---*/ /*body:has(img[src*="/picture/event/100"]) main .app-card-cat-id-16 section.seminar-detail-content+div { display: none; } */ /* ============================================================ 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 { 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 { font-size: 0; } 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; } main[aria-label="pageMeta.userBookings.ariaLabel"] button[title="Alle Termine"]:hover { color: var(--bitcol-1); } main[aria-label="pageMeta.trainerManageSeminarFeedbackDetails.ariaLabel"] div.border.rounded.bg-white.border-gray-200 td.whitespace-nowrap { white-space: pre-wrap; } * main[aria-label="pageMeta.userBookings.ariaLabel"] div.flex.items-start.justify-center.gap-2 span.truncate { font-size: 0; } main[aria-label="pageMeta.userBookings.ariaLabel"] div.flex.items-start.justify-center.gap-2 span.truncate::before { content: "Zum Online-Termin"; font-size: 14px; } main[aria-label="pageMeta.userBookings.ariaLabel"] div.flex.items-start.justify-center.gap-2: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) { display: none; } 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, body#bt_feedback div[data-dismissable-layer]:has(input[placeholder="Suchen"]) table tbody tr > td:first-child { display: none; } /* ============================================================ CART ============================================================ */ .app-cart-page .app-bitkom-hero-section-desc h1 { font-size: clamp(1.5rem, calc(1.5rem + 2vw), 2.8rem); font-weight: 500; } .bt_v_cart_item button:has(span.truncate) { padding: 16px; font-size: 0.875rem; width: 192px; } .bt_v_cart_item button span.iconify.i-heroicons\:plus { width: 1.25rem; height: 1.25rem; } .bt_v_cart_item div.flex.flex-col.items-start.text-sm.text-gray-600 { max-width: 192px; } .app-checkout-address-selection { display: none; } div[role="tabpanel"] div form div div.text-sm:has(div[role="radiogroup"] > fieldset) { display: none; } 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) { display: none; } div[aria-label="Communication Config"] div p#label-3 { font-size: 0; } div[aria-label="Communication Config"] div p#label-3::after { content: "Information an alle"; font-size: 1rem; } div[aria-label="Communication Config"] div p#desc-3 { font-size: 0; } div[aria-label="Communication Config"] 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[aria-label="Communication Config"]+div button { padding: 15px; } div[aria-label="Communication Config"]+div button span { font-size: 0; } div[aria-label="Communication Config"]+div button span::before { content: "Teilnehmer hinzufügen"; font-size: 0.875rem; } div[aria-label="Communication Config"]::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-cart-page span a { color: var(--bitcol-1); } .app-cart-page span a:hover { color: var(--bitcol-5); } .app-cart-page button:has(.iconify.i-heroicons-outline\:check-circle.shrink-0.size-4) { margin-top: 2px; cursor: pointer; border: 1px solid; border-color: var(--bitcol-bg-2); box-shadow: none; } .app-cart-page button:has(.iconify.i-heroicons-outline\:exclamation.shrink-0.size-4) { margin-top: 2px; cursor: pointer; border: 1px solid; border-color: var(--bitcol-bg-4); box-shadow: none; } .app-cart-page button:has(.iconify.i-heroicons-outline\:check-circle.shrink-0.size-4):hover { background-color: var(--bitcol-bg-2); } .app-cart-page button:has(.iconify.i-heroicons-outline\:exclamation.shrink-0.size-4):hover { background-color: var(--bitcol-bg-4); } .app-cart-page .iconify.i-heroicons-outline\:exclamation.shrink-0.size-4 { color: var(--bitcol-4); } .app-cart-page .iconify.i-heroicons-outline\:check-circle.shrink-0.size-4 { color: var(--bitcol-2); } .app-cart-page div.ring { box-shadow: none; } .app-cart-page a.rounded-full { border-radius: 0; } .app-cart-page div.ring>div.p-4.sm\:px-6:first-child { display: none; } .app-cart-page .i-heroicons-outline\:shopping-cart { background-color: var(--bitcol-1-50); } .app-cart-page h1.py-6.text-2xl { font-size: 1.9rem; } .app-cart-page .app-category-id-16>img { filter: url(#duotone-yellow); } .app-cart-page .app-category-id-11>img { filter: url(#duotone-green); } .app-cart-page .app-category-id-12>img { filter: url(#duotone-blue); } .app-cart-page [class*="app-category-id-"]>img { clip-path: polygon(0 0, 100% 0, 100% 92.5%, 0% 100%); transition: clip-path 0.3s ease-in-out; } .app-cart-page [class*="app-category-id-"]>img:hover { clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); } .app-cart-page button>span.mr-1 { color: var(--bitcol-1); } .app-cart-page button>span.mr-1:hover, .app-cart-page button>span.mr-1:active { color: var(--bitcol-1); } .app-manager-manage-participant div[role="tablist"] button:nth-child(3) { display: none; } .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); } .app-manager-manage-participant div>div 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-manager-manage-participant .app-cart-group-reg-modal-part-manual-add-submit-btn { font-size: 0; } .app-manager-manage-participant .app-cart-group-reg-modal-part-manual-add-submit-btn::before { content: "Speichern"; font-size: 0.875rem; } .app-cart-page .bt_v_cart_item_price { text-align: right; } @media (min-width:768px) { .app-cart-page .bt_v_cart_item_price span::after { content: "\A"; white-space: pre; } } .app-cart-page .bt_v_cart_item_price span del { text-decoration: line-through var(--bitcol-1); color: var(--bitcol-5-50) } .app-cart-page .bt_v_cart_item_price span del::after { content: "\A"; white-space: pre; } .app-cart-page div:has(> input[name="invoiceOtherEmail"].touched:required:invalid) { border: 1px solid var(--bitcol-4); } /* Cart Page Button */ .app-cart-group-reg-modal-part-manual-add-submit-btn { padding: 15px } .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; } /* ============================================================ FOOTER ============================================================ */ div:has(div#app-footer-logo) { margin-top: 20px; } footer h3, footer a { font-size: 1.125rem; line-height: 1.6875rem; } footer { background-color: var(--bitcol-5); } footer h3 { color: #C0B9B9; } footer p { color: #fff; } .app-footer-nested-links-list a, .app-footer-nested-links-list span { color: #fff; } .app-footer-nested-links-list 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; } #app-footer-contact-button-cont a:hover { background-color: #FFFFFF; color: var(--bitcol-5); } /* ============================================================ TESTIMONIAL SLIDER ============================================================ */ [class*="app-card-cat-id-"] #contents .tms-title { margin-top: 35px; margin-bottom: 40px; font-size: 1.9rem; font-weight: 600; color: var(--bitcol-5); } .tms * { box-sizing: border-box; } .tms [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: 8rem; padding-inline: 5vw; } .tms-card { background-color: var(--bg-color); padding: 40px 20px 50px 35px; } .tms-card p { padding: .7rem .7rem; margin: 0; } .tms-card .quote { color: var(--bitcol-5); } .tms-card .quote::before { content: "“"; color: var(--highlight-primary); position: absolute; transform: translate(-0.4em, -0.2em); font-size: 400%; } .tms-card .author { padding-left: .7rem; font-size: 80%; font-weight: 550; } .tms-card .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; } .tms-arrow:hover { color: var(--highlight-primary); opacity: 1; } .tms-arrow[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; } .video-wrap 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; } .extras-btn:hover { color: #fff; background-color: var(--bitcol-2); transition: all .3s ease-in-out; } .extras-box { margin: 3rem 0 3rem 0; } details[open] .extras-info svg { transform: rotate(180deg); transition: all .5s ease-in-out; } details[open]>div { max-height: max-content; opacity: 1; transition: all .5s ease-in-out; } details>div { max-height: 0; opacity: 0; overflow: hidden; transition: all .5s ease-in-out; } /* ============================================================ LOGIN PAGE ============================================================ */ main[aria-label="Anmelden"] .w-full.sm\:w-1\/2.flex.flex-col.items-center.justify-center.p-4.sm\:p-8:first-child h1 { font-size: 0 !important; } main[aria-label="Anmelden"] .w-full.sm\:w-1\/2.flex.flex-col.items-center.justify-center.p-4.sm\:p-8:first-child h1::before { content: "Willkommen bei der"; font-size: x-large; } main[aria-label="Anmelden"] .w-full.sm\:w-1\/2.flex.flex-col.items-center.justify-center.p-4.sm\:p-8:first-child p { font-size: 0 !important; } main[aria-label="Anmelden"] .w-full.sm\:w-1\/2.flex.flex-col.items-center.justify-center.p-4.sm\:p-8:first-child p::before { content: "Bitte melden Sie sich an. Oder registrieren Sie sich bei uns."; font-size: medium; } main[aria-label="Anmelden"] a { font-weight: 450; text-decoration: none; color: var(--bitcol-1); } main[aria-label="Anmelden"] a:hover { color: var(--bitcol-5); transition: all .3s ease-in-out; } /* ============================================================ REGISTRATION PAGE ============================================================ */ 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; } main[aria-label="Registrieren"] div.w-full.sm\:w-2\/5.flex.flex-col.items-center.justify-center.p-4.sm\:p-8 { justify-content: start !important; } main[aria-label="Registrieren"] 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,"); } main[aria-label="Registrieren"] div.flex.gap-0.items-center:has(input[name="orgPosition"])::before { opacity: 0; transform: translateY(6px); transition: opacity .8s ease, transform .8s ease; pointer-events: none; } main[aria-label="Registrieren"] div.flex.gap-0.items-center:has(input[name="orgPosition"])::after { opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .3s ease; pointer-events: none; } main[aria-label="Registrieren"] div.flex.gap-0.items-center:has(input[name="orgPosition"])::before { 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); } main[aria-label="Registrieren"] div.flex.gap-0.items-center:has(input[name="orgPosition"])::after { 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); --svg: var(--icon-path); background-color: var(--bitcol-1); -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%; } main[aria-label="Registrieren"] div.flex.gap-0.items-center:has(input[name="orgPosition"]):hover::before, main[aria-label="Registrieren"] div.flex.gap-0.items-center:has(input[name="orgPosition"]):hover::after, main[aria-label="Registrieren"] div.flex.gap-0.items-center:has(input[name="orgPosition"]):focus::before, main[aria-label="Registrieren"] div.flex.gap-0.items-center:has(input[name="orgPosition"]):focus::after, main[aria-label="Registrieren"] div.flex.gap-0.items-center:has(input[name="orgPosition"]):focus-within::before, main[aria-label="Registrieren"] div.flex.gap-0.items-center:has(input[name="orgPosition"]):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,"); } } main[aria-label="Registrieren"] .w-full.sm\:w-2\/5.flex.flex-col.items-center.items-center.p-4.sm\:p-8:first-child h1, main[aria-label="Registrieren"] .w-full.sm\:w-2\/5.flex.flex-col.items-center.items-center.p-4.sm\:p-8:first-child h2 { display: none; } main[aria-label="Registrieren"] .w-full.sm\:w-2\/5.flex.flex-col.items-center.items-center.p-4.sm\:p-8:first-child p { justify-content: left; color: var(--bitcol-5); font-size: 1.5rem; } main[aria-label="Registrieren"] .w-full.sm\:w-2\/5.flex.flex-col.items-center.items-center.p-4.sm\:p-8:first-child p::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); } main[aria-label="Registrieren"] a:not(.text-inverted) { font-weight: 450; text-decoration: none; color: var(--bitcol-1); } main[aria-label="Registrieren"] a:hover { color: var(--bitcol-5); transition: all .3s ease-in-out; } main[aria-label="Registrieren"] div.text-center h3.text-gray-600.mb-6 { font-weight: 600; } 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) { --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,"); } 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)::before { opacity: 0; transform: translateY(6px); transition: opacity .8s ease, transform .8s ease; pointer-events: none; } 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 { opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .3s ease; pointer-events: none; } 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)::before { 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 Die Suche benötigt mindestens drei Buchstaben."; background-color: var(--tip-bg); font-weight: 500; white-space: pre-line; padding: var(--tip-pd); z-index: 9999; color: var(--bitcol-5); } 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 { 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); --svg: var(--icon-path); background-color: var(--bitcol-1); -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%; } 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):hover::before, 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):hover::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):focus::before, 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):focus::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):focus-within::before, 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):focus-within::after { opacity: 1; transform: translateY(0); } @media (max-width: 639px){ 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) { --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 ============================================================ */ section[aria-labelledby="explore-seminars-heading"] { visibility: hidden; height: 500px !important; } #app-home-hero-section > div.overlay { background-color: color-mix(in oklab,var(--color-black)25%,transparent); } #app-home-hero-section::after { content: "Bitte klicken Sie im Hauptmenü auf 'Seminare', um zur Seminarübersicht zurückzukehren."; font-size: 1.6em; width: 50%; line-height: 1.2; color: var(--bitcol-5); position: absolute; display: block; top: 130%; left: 50%; transform: translateX(-50%); } /* ============================================================ CTA FOR REGISTRATION ============================================================ */ .bt_seminar_cta { position: fixed; top: 15%; left: 0; right: auto; width: 250px; transform: translateX(-100%); z-index: 9999; padding: 25px; box-shadow: 0 10px 30px rgba(0, 0, 0, .12); background: rgba(255, 255, 255, .95); backdrop-filter: blur(2px); transition: transform .28s ease, opacity .28s ease; opacity: 0; pointer-events: none; padding-bottom: 3em; color: var(--bitcol-5); } #bt_seminar_cta.is-open { transform: translateX(0); opacity: 1; pointer-events: auto; } .bt_seminar_cta.is-open { transform: translateX(0); opacity: 1; pointer-events: auto; } .bt_seminar_cta 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; } .bt_reg_btn:hover { color: var(--bitcol-5); background-color: var(--bitcol-2); border-color: var(--bitcol-2); transition: all .3s ease-in-out; } .bt_seminar_cta p { padding: 0 0 16px 35px; font-size: 16px; } .bt_seminar_cta p:last-of-type { margin-bottom: 16px; } .bt_seminar_cta p::before { content: ""; position: absolute; left: 30px; width: 18px; 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%; } /* ============================================================ 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; } @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; } } .bt_cart_cta h2 { padding: 25px 0; font-size: 1.9em; font-weight: 600; color: var(--bitcol-1); } .bt_cart_cta p { font-size: 1em; } 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); --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_cart_cta a { color: var(--bitcol-1); font-weight: 500; } .bt_cart_cta a:hover { color: var(--bitcol-5) } /* .rmb { margin-top: .5rem; background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer } */