body { font-family: Open Sans; background: #FFFFFF !important; color: #000000 !important; } main a:link:not(.btn):not(.active).not(.dropdown-item):not(.list-group-item-action), main a:visited:not(.btn):not(.active).not(.dropdown-item):not(.list-group-item-action) { color: #2071b5 !important; } main a:hover:not(.btn):not(.active).not(.dropdown-item):not(.list-group-item-action), main a:active:not(.btn):not(.active).not(.dropdown-item):not(.list-group-item-action) { color: #2071b5 !important; } #nav-bar { background-color: #1f3150; } #menu-bar { background-color: #ffffff; } #menu-bar a.nav-link:link, #menu-bar a.nav-link:visited { color: #333333; } .body-content .hUnderline:before { color: #f6d84d; } .body-content .ap-frontend-paginator > .page-item.active .page-link { background-color: #f6d84d; border-color: #f6d84d; } .body-content a:not(.btn):not(.search-item), .body-content a.nav-link:link.text-primary:not(.btn):not(.active):not(.search-item), .body-content a.nav-link:visited.text-primary:not(.btn):not(.active):not(.search-item) { color: #2071b5; } .body-content main a:link:not(.btn):not(.list-group-item):not(.search-item), .body-content main a:visited:not(.btn):not(.list-group-item):not(.search-item) { color: #2071b5; } .body-content main a:hover:not(.btn):not(.list-group-item):not(.search-item), .body-content main a:active:not(.btn):not(.list-group-item):not(.search-item) { color: #2071b5; } .footer { background-color: #1a2748; color: #ffffff; } .footer a:link, .footer a:visited { color: #ffffff; } .footer a:hover, .footer a:active { color: #F98C14; } /* No glocal colors */ .modules-lesson-media iframe { width: 100% !important; } /* Custom CSS */ /* ============================================================= KIPORT – GLOBAL STYLESHEET | Stand: 15.09.2026, 07:48 (Abschnitt 35 neu, bereinigt 11.09.2026, siehe Kommentar unten) ============================================================= INHALT 1 Farben & Utility-Klassen 2 Schriften & Typografie 3 Blockquote 4 Buttons 5 Navigation & Navbar 6 Suche 7 Cards & Kursübersicht 8 Kurs-Landingpage 9 Kurs-Player (Classroom) 10 Kurs-Seitenleiste 11 Downloads im Kurs 12 Blog / Post 13 Hero-Hintergründe (Body-Klassen) 14 Login-Seite (action-login) 15 Magic-Login-Seite (action-login-magic) 16 Footer am Bildschirmrand – Login & Magic-Login 17 Profil-Bereich 18 Footer 19 Paginator 20 Animationen 21 Sonstiges (Cookie, AC-Branding, Bewertungsmodul, Schatten) 22 Media Queries 23 KiPort Badge 24 KiPort Tag (kompakt) 25 Testimonial Card 26 Kategorie-Kacheln (Kursübersicht) 27 Praxisszenario-Kacheln 28 Blog-Kacheln – Variante B 29 Nav Redesign 30 FAQ-Akkordeon (Hilfe & Kontakt) 31 FAQ-Akkordeon (Teamfortbildungen) 32 COOKIE CONSENT MODAL 33 Kurskacheln Qualifizierung zur Fachkraft (Seiten-ID) 34 Navigation ab 1401px: breiterer Container 35 Profil-Menü: lange Namen kürzen BEREINIGT 11.09.2026 (ohne sichtbare Änderung, im Browser auf 10 Seiten geprüft): - Abschnitt 13: drei Selektoren auf body- korrigiert (Blog-Übersicht, E-Learning-Produktion, Teamfortbildungen). Werte identisch mit den Abschnittseinstellungen im Editor. - Ungültige Angaben entfernt, die nie gewirkt haben: #5556791 (Footer-Stage), overflow: vertical, backgound, verirrte "!important;" hinter Deklarationen. - Verschachtelter Altblock (Megakurse, Blog-Liste, Kursübersicht, Artikel-Bubble) aus diesem Feld entfernt. Er gehört ins Feld „Global SCSS" und wird von dort umgerechnet ausgeliefert. Stand in 07-Website/bausteine/stylesheet_global.scss. ============================================================= */ /* ── 1. FARBEN & UTILITY-KLASSEN ─────────────────────────── */ /* Hintergrundfarben, Listen-Tabs und Alert-Stile */ .bg-orange { background-color: #F09415 !important; } .tabs-options ul li a:link.active { background-color: #F09415 !important; color: #fff !important; } .list-group-item-orange { background-color: #F09415 !important; color: #fff; } .alert-primary { background-color: #F0F2F5; border-color: #F0F2F5; color: #073984; } .rating-container.stars-wrapper { color: #F6993F; } /* ── 2. SCHRIFTEN & TYPOGRAFIE ───────────────────────────── */ /* Basis: Nunito, 16px, Zeilenabstand 1.4, Textfarbe #2E384D */ .body-content { font-family: 'Nunito', Sans-Serif !important; font-size: 100% !important; line-height: 1.4 !important; color: #2E384D !important; } .body-content p, .body-content span { font-family: 'Nunito', Sans-Serif; line-height: 1.4; } .body-content b { font-family: 'Nunito', Sans-Serif; color: #2E384D !important; font-weight: 700; } /* Überschriften h1–h6 */ .body-content h1 { font-size: 2rem; color: #2E384D; font-weight: 600; line-height: 2.5rem !important; } .body-content h1 em { font-style: normal; color: #2072B5; } /* Blauer Akzent in h1 via */ .body-content .h1-hell { font-size: 2rem; color: #ffffff; font-weight: 600; line-height: 2.5rem; } /* h1-Variante für dunkle Hintergründe */ .body-content h2 { font-size: 1.625rem; color: #2E384D; font-weight: 600; line-height: 32px !important; margin-top: 1.25rem; margin-bottom: 1.25rem; } .body-content h3 { font-size: 1.5rem; color: #2E384D; font-weight: 600; line-height: 32px !important; margin-top: 1.25rem; margin-bottom: 1.25rem; } .body-content h4 { font-size: 1.375rem; color: #2E384D; font-weight: 600; line-height: 24px !important; margin-top: 10px !important; margin-bottom: 1.25rem; } .body-content h5 { font-size: 1.125rem; color: #2071B5; font-weight: 600; margin-top: 1.25rem; margin-bottom: 1.25rem; } /* h5 in Primärblau */ .body-content h6 { font-size: 1.125rem; color: #2E384D; font-weight: 600; margin-top: 1.25rem; margin-bottom: 1.25rem; } /* Abschnittsüberschrift mit gelbem Unterstrich (70px, #FFB606) */ .heading { font-weight: 600; margin-top: 1.25rem; margin-bottom: 1.25rem; text-transform: uppercase; } .heading::after { content: ""; display: block; width: 70px; padding-top: 3px; margin-bottom: 20px; border-bottom: 2px solid #FFB606; } /* Hilfsklassen – Schriftgröße & Farbe */ .autor-beruf { font-size: 14px; font-style: italic; line-height: 0.9rem; } .text12 { font-size: 12px; line-height: 1.0 !important; } .text14 { font-size: 14px; line-height: 12px; } .text14_w { font-size: 14px; color: #fff; line-height: 14px; } .text14_grau { font-size: 14px; color: #C2C2C2; line-height: 12px; text-align: left; } .text14_gold { font-size: 14px; color: #EFB467; line-height: 10px; } .text14_gelb { font-size: 14px; color: #F6D84C; line-height: 10px; } .text14_italic { font-size: 14px; line-height: 10px; font-style: italic; } .text16_w { font-size: 1rem; color: #fff; } .text16_hellblau { font-size: 1rem; color: #9aafc8; } .text18_blau { font-size: 18px; color: #2071B5; margin-bottom: 1rem; } .text_w_bold { color: #fff; font-weight: 900; line-height: 10px; } .kp-subline { line-height: 1.1 !important; } /* Eyebrow-Labels: kleines Label über Überschriften, Grün oder Türkis */ .kiport-eyebrow { --eyebrow-text: #00B67A; --eyebrow-font-size: 13px; display: block; font-family: -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: var(--eyebrow-font-size); font-weight: 600; color: var(--eyebrow-text); text-transform: uppercase; letter-spacing: 0.05em; line-height: 1; white-space: nowrap; } .kiport-eyebrow-turkis { --eyebrow-text: #41B7AC; --eyebrow-font-size: 13px; display: block; font-family: -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: var(--eyebrow-font-size); font-weight: 600; color: var(--eyebrow-text); text-transform: uppercase; letter-spacing: 0.05em; line-height: 1; white-space: nowrap; } /* Checkliste mit grünem Haken – HTML: */ .checklist { list-style: none; padding: 0; margin: 0; } .checklist li { display: flex; align-items: flex-start; gap: 10px; font-size: 1rem; line-height: 1.5; color: #1a1a1a; } .checklist li:last-child { border-bottom: none; } .checklist li::before { content: "✓"; color: #00B67A; font-weight: 700; font-size: 1rem; flex-shrink: 0; margin-top: 1px; } /* ── 3. BLOCKQUOTE ───────────────────────────────────────── */ /* Blauer linker Rand, dekoratives schließendes Anführungszeichen rechts unten */ blockquote { background-color: #F9FAFB; border-left: 10px solid #2071B5; padding: 30px; margin: 50px 0; font-size: 1em; font-style: italic; color: #555; position: relative; } blockquote::after { content: '\201D'; font-size: 7em; color: #E1E0E1; position: absolute; right: 25px; bottom: -5px; } /* ── 4. BUTTONS ──────────────────────────────────────────── */ /* Alle Buttons: border-radius 10px, padding 15px 50px, 16px, weight 600 */ /* Varianten: Blau (primär), Blau zentriert, Blau invertiert (Ghost), Lila */ .kiport_btn_blau { display: block !important; width: fit-content !important; color: #ffffff !important; background-color: #1f72b5 !important; font-size: 16px !important; border: 1px solid #2d63c8 !important; border-radius: 10px !important; padding: 15px 50px !important; } .kiport_btn_blau:hover { color: #6B7280 !important; background-color: #F7F9FA !important; } .kiport_btn_blau_center { display: block !important; width: fit-content !important; margin: 30px auto 0 !important; color: #ffffff !important; background-color: #1f72b5 !important; font-size: 16px !important; border: 1px solid #2d63c8 !important; border-radius: 10px !important; padding: 15px 50px !important; cursor: pointer; } .kiport_btn_blau_center:hover { color: #6B7280 !important; background-color: #F7F9FA !important; } .kiport_btn_blau_inv { color: #6B7280 !important; background-color: #F7F9FA !important; font-size: 16px !important; border: 1px solid #2d63c8 !important; border-radius: 10px !important; padding: 15px 50px !important; cursor: pointer; } .kiport_btn_blau_inv:hover { color: #ffffff !important; background-color: #1f72b5 !important; } .kiport_btn_lila { color: #ffffff !important; background-color: #5F4DDB !important; font-size: 16px !important; border: 1px solid #5F4DBC !important; border-radius: 10px !important; padding: 15px 50px !important; cursor: pointer; } .kiport_btn_lila:hover { color: #6B7280 !important; background-color: #F7F9FA !important; } /* ── 5. NAVIGATION & NAVBAR ──────────────────────────────── */ /* Kein Zeilenumbruch in Nav-Links; Logo max. 250×80px */ nav a, nav li { white-space: nowrap; } .navbar-brand { padding-top: 1.32rem; padding-bottom: 1.32rem; } .navbar-nav { padding-left: 4rem; padding-top: 2rem; } a.nav-link.custom-nav-link:hover { color: #497FBB !important; } img#apprex-academy-logo { height: 80px; max-width: 250px; max-height: 80px; } /* Anmeldung-Button (grün) */ a.login-link, a.login-link:link, a.login-visited { background-color: #00B67A; border: 1px solid #00B67A; color: #fff !important; border-radius: 8px; padding: 9px 18px !important; transition: 0.2s all ease; } a.login-link:hover, a.login-link:active { color: #6B7280 !important; background-color: #F9FAFB; } /* Kurs-Button (grün) */ a.kurs-link, a.kurs-link:link { background-color: #00B67A; border: 1px solid #00B67A; color: #fff !important; border-radius: 3px; padding: 7px 16px !important; transition: 0.2s all ease; white-space: nowrap; } a.kurs-link:hover, a.kurs-link:active { background-color: #F9FAFB; color: #000 !important; white-space: nowrap; } /* Suchlupe ausblenden */ .nav-search-icon, .nav-search { display: none; } /* ── 6. SUCHE ────────────────────────────────────────────── */ /* Metadaten in Suchergebnissen ausblenden; oberes Padding reduzieren */ small.search-item-updated_at, small.search-item-model { display: none; } .pt-5, .py-5 { padding-top: 1rem !important; } /* ── 7. CARDS & KURSÜBERSICHT ────────────────────────────── */ /* Dropdown-Scrollbereich, Preis- und Streichpreisdarstellung */ .dropdown-item.active, .dropdown-item:active { color: #fff !important; } .scrollable-menu > ul { height: auto; max-height: 300px; overflow-x: hidden; } #dropdown-category > ul { transform: translate3d(-204px, 40px, 0px) !important; } /* Preis und Streichpreis */ .preis { font-size: 1.5rem; color: #2E384D; font-weight: 600; line-height: 24px !important; margin-top: 1.25rem; margin-bottom: 1.25rem; } .streichpreis { font-size: 14px; margin-left: 10px; text-decoration: line-through; color: red; } /* Listen-Reset (global) */ ul, ol { padding-left: 1em; } ul li, ol li { margin: 0.5em; } /* ── 8. KURS-LANDINGPAGE ─────────────────────────────────── */ /* Kaufen-Buttons (erster und letzter Button im Buy-Block) */ .course .modules-course-buy a.btn:first-of-type { color: #fff !important; background-color: #2071B5 !important; border: 1px solid #DCDCE6; } .course .modules-course-buy a.btn:first-of-type:hover { color: #000 !important; border: 1px solid #2071B5; background-color: #F7F9FA !important; } .course .modules-course-buy a.btn:last-of-type { color: #fff !important; background-color: #2071B5 !important; border: 1px solid #DCDCE6; } .course .modules-course-buy a.btn:last-of-type:hover { color: #000 !important; border: 1px solid #2071B5; background-color: #F7F9FA !important; } /* Curriculum – Kapitel-Header: Variante F (dunkler Header #203150 / gelber Modulzähler) */ .course .modules-course-content .card { border: none !important; border-radius: 8px !important; overflow: hidden !important; margin-bottom: 0.75rem !important; box-shadow: 0 1px 4px rgba(0,0,0,0.07) !important; } .course .modules-course-content .card header { background: #203150 !important; padding: 10px 14px !important; font-size: 14px !important; font-weight: 700 !important; } .course .modules-course-content .card header h3 { color: #ffffff !important; font-size: 16px !important; font-weight: 600 !important; margin: 0 !important; line-height: 1.3 !important; } .course .modules-course-content .card header span { color: #FAB215 !important; font-size: 13px !important; font-weight: 600 !important; } .course-content-module-single.module-is-not-public { color: #f00 !important; pointer-events: none; cursor: default; } .pt-3, .py-3 { padding-top: 4px !important; } .float-right { float: right !important; } /* Curriculum – Lektionsliste: Variante F (Zebra-Streifen, Icon blau, Laufzeit gedimmt) */ .course .modules-course-content .list-group-item { font-size: 16px !important; color: #2E384D !important; border-top: none !important; padding: 8px 14px !important; } .course .modules-course-content .list-group-item:nth-child(even) { background: #f7f9fc !important; } .course .modules-course-content .list-group-item:nth-child(odd) { background: #ffffff !important; } .course .modules-course-content .list-group-item:first-child { padding-top: 12px !important; } .course .modules-course-content .list-group-item .mb-1 { font-size: 16px !important; color: #2E384D !important; margin-bottom: 0 !important; } .course .modules-course-content .list-group-item div { color: #2E384D !important; } .course .modules-course-content .list-group-item small { color: #6B7280 !important; font-size: 14px !important; } .course .modules-course-content .list-group-item .lesson-status-icon { color: #2071B5 !important; } .course .modules-course-content .list-group-item svg { fill: #2071B5 !important; color: #2071B5 !important; } /* Reihenfolge der Badges "VORSCHAU" und "Laufzeit": VORSCHAU kommt zuerst (order: -1) */ .course .modules-course-content .list-group-item div span { display: flex; flex-wrap: nowrap; flex-direction: row; gap: 10px; } .course .modules-course-content .list-group-item div span small { padding-top: 3px; } .course .modules-course-content .list-group-item div span span.badge { display: flex; flex-wrap: nowrap; flex-direction: row; gap: 10px; order: -1; } .course .modules-course-content .list-group-item div span span.runtime-caption { display: none !important; } /* Badge-Stile global */ .badge { font-weight: 600 !important; font-size: 85% !important; } .featured-caption { border-radius: 20px !important; } .offer-caption { border-radius: 20px !important; } /* Megakurse – leere Kapitel wirken als visueller Trenner/Überschrift */ .course .modules-course-content .chapter-empty.card .card-header { background-color: #2070B6 !important; } .course .modules-course-content .chapter-empty.card .card-header h3 { color: #fff !important; } .course .modules-course-content .chapter-empty.card .modules-count { display: none !important; } /* Experten-Avatar im "Bubble-Style" (2-spaltig: Bild | Text) */ .bubble-style { display: grid; grid-template-columns: 15% 85%; grid-column-gap: 10px; } .bubble-style .div-image { grid-area: 1 / 1 / 2 / 2; } .bubble-style .div-text { grid-area: 1 / 2 / 2 / 3; } .bubble-style .div-image .avatar-bild { width: 50px; height: 50px; border-radius: 50%; float: right; } .bubble-style .div-image #avatar-bild { border-radius: 50%; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; } .bubble-style .div-text .avatar-name { font-family: 'Nunito', Sans-Serif; color: #6B7280 !important; font-weight: 600; } .bubble-style .div-text .avatar-beruf { display: block; font-size: 12px; line-height: 14px !important; font-style: italic; } /* Listen innerhalb der Kurs-Landingpage */ .course ul, .course ol { padding-left: 0.5em; } .course ul li, .course ol li { margin: 0.5em; } /* ── 9. KURS-PLAYER (CLASSROOM) ──────────────────────────── */ /* Hintergrund, ausgeblendete Elemente (Nav, Footer, Kommentare) */ main.classroom, body.action-body-modules-show { background: #F9FAFB !important; } body.action-body-modules-show #ds24cart_added_container, body.action-body-modules-show #nav-bar { display: none !important; } body.action-body-modules-show footer.footer { display: none; } body.action-body-modules-show main { padding-top: 0px; } body.action-body-modules-show h1.modules-title { display: none; } #s3_tdlpupkif { background: transparent; } /* Lektions-Überschrift im Content-Bereich */ .classroom-content.right h1 { font-size: 1.25rem !important; line-height: 1.5rem !important; font-weight: 600 !important; margin-bottom: 30px !important; } /* Footer-Stage (untere Navigationsleiste im Player) */ /* .footer-stage: ungültiger Farbwert #5556791 entfernt (11.09.2026), hat nie gewirkt */ .footer-stage-left { background-color: #293043; } /* .footer-stage-right: ungültiger Farbwert #5556791 entfernt (11.09.2026), hat nie gewirkt */ .btn-to-next, .btn-to-previous { text-decoration: none !important; } .footer-stage-left a.btn-to-overview span { margin-left: 10px; } .footer-stage .btn-footer-stage-ready span { text-transform: capitalize; } .footer-stage-right div:nth-of-type(1) a span { margin-left: 10px; } .footer-stage-right div:nth-of-type(3) a span { margin-right: 10px; } .btn-to-overview { color: #fff !important; text-decoration: none !important; } .btn-to-overview:hover, .btn-to-overview:active { color: #3490dc !important; } .btn-to-previous { color: #3490dc !important; } .btn-to-previous:hover, .btn-to-previous:active { color: #000 !important; } .btn-to-next { color: #3490dc !important; } .btn-to-next:hover, .btn-to-next:active { color: #000 !important; } /* Quiz-Formular: Extra-Padding damit Submit-Button nicht vom Footer verdeckt wird */ main.action-modules-show-quiz-results { padding-bottom: 80px; } form.quiz-form { margin-bottom: 200px; } /* Admin-Elemente */ .body-content main.course .expand-sidebar-toggle-btn:focus { outline: none; box-shadow: none; } .lesson-status-icon { margin-left: 5px; } .lesson-media-runtime { padding-left: 5px; padding-top: 3px; } /* ── 10. KURS-SEITENLEISTE ───────────────────────────────── */ /* Scrollbare Sidebar; rtl-Trick für Scrollbar-Position (im Media Query) */ .course-sidebar { padding-left: 10px; padding-right: 10px; padding-bottom: 70px; } .monochrom-sidebar-chapter h4 { font-size: 1.125rem !important; font-weight: 600; color: #000 !important; border-bottom: 1px solid #E1E0E1; } .course-sidebar .chapter-list .collapse h5 { margin-top: 2px !important; margin-bottom: 2px !important; font-size: 14px !important; } .lesson-head-title, .quiz-head-title, .challenge-head-title { display: block; margin-top: -20px; margin-left: 25px !important; } .course-sidebar .chapter-list { margin-bottom: 10px; } h4.chapter-head { margin: 0 !important; } div.chapter-caption { margin-top: 15px; color: #2071B5 !important; } /* ── 11. DOWNLOADS IM KURS ───────────────────────────────── */ .downloads-list-item { background: #F5F5F5 !important; margin: 7px 0; border: 1px solid #2071B5 !important; border-radius: 3px !important; } .downloads-item-caption { color: #000 !important; padding-top: 5px; } .btn-downloads { color: #fff !important; background-color: #2071B5 !important; border: 1px solid #DCDCE6; } .btn-downloads:hover { color: #000 !important; border: 1px solid #2071B5; background-color: #F7F9FA !important; } /* ── 12. BLOG / POST ─────────────────────────────────────── */ /* Listen-Einrückung im Blog-Artikel */ .post ul, .post ol { padding-left: 1.5em; } .post ul li, .post ol li { margin: 0.5em; } /* bph-title: line-height gegen globale h1-Regel erzwingen */ body.body-body-post .bph-title { font-size: 28px !important; line-height: 1.2 !important; } /* Mobile: Titelgröße halten, line-height straff */ @media (max-width: 768px) { body.body-body-post .bph-title { font-size: 24px !important; line-height: 1.2 !important; } main.post h2 { font-size: 22px !important; line-height: 1.2 !important; } main.post h3 { font-size: 20px !important; line-height: 1.2 !important; } } /* ── 13. HERO-HINTERGRÜNDE (Body-Klassen) ────────────────────── */ /* Der Hintergrund wird via globalem CSS auf .builder--section:first-of-type gesetzt, damit das Hero-Modul selbst background: transparent haben kann und trotzdem die volle Spaltenbreite füllt. Inneres Padding (.xx-inner) = 15px seitlich. Neue Seiten hier eintragen; Body-Klasse per Konsole prüfen: document.body.className Die Startseite hat keine Body-Klasse – dort Hintergrund direkt auf das Modul setzen. */ /* Blog-Übersichtsseite: Impulse rund um Kita und Tagespflege */ body.body-impulse-rund-um-kita-und-tagespflege .builder--section:first-of-type { background-color: #1A2748 !important; padding-bottom: 0 !important; padding-top: 0 !important; } /* E-Learning-Produktionsseite */ body.body-e-learning-produktion .builder--section:first-of-type { background-color: #1A2748 !important; padding-bottom: 0 !important; padding-top: 0 !important; } /* Teamfortbildungs-Seite */ body.body-kita-teamfortbildungen .builder--section:first-of-type { background-color: #1A2748 !important; padding-bottom: 0 !important; padding-top: 0 !important; } /* Hilfe- & Kontaktseite: Abschnitt 1 (Hero) dunkelblau, Abschnitt 2 (Trust Bar) sehr dunkelblau */ body.body-hilfe-kontakt .builder--section:first-of-type { background-color: #1A2748 !important; padding-bottom: 0 !important; padding-top: 0 !important; } body.body-hilfe-kontakt .builder--section:nth-of-type(2) { background-color: #111D36 !important; padding-bottom: 0 !important; padding-top: 0 !important; } /* 404-Seite */ /* Hintergrund Hero-Bereich (erster Abschnitt) */ body.body-404 .builder--section:first-of-type { background-color: #1A2748 !important; padding-bottom: 0 !important; padding-top: 0 !important; } /* Footer ans untere Bildschirmende: Flex-Kette body → #app → main + footer */ body.body-404 { min-height: 100vh; display: flex; flex-direction: column; } body.body-404 #app { flex: 1; display: flex; flex-direction: column; } body.body-404 #app main { flex: 1; } /* ── 14. LOGIN-SEITE (action-login) ────────────────────────── Rein CSS-basiertes Redesign der Apprex-Systemseite. Body-Klasse: action-body-login | Main-Klasse: action-login Kein HTML-Zugriff nötig. Alle Regeln greifen ausschließlich auf dieser Seite – kein Einfluss auf andere Seitenbereiche. ──────────────────────────────────────────────────────────── */ /* Seitenhintergrund hellgrau-blau – klare Abgrenzung zum dunklen Footer */ main.action-login { background-color: #EEF2F7 !important; padding-top: 48px !important; padding-bottom: 48px !important; } /* Container – Abstände zurücksetzen */ main.action-login .container.mt-5.mb-5 { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; width: 100% !important; } /* Card – weiß, runde Ecken, weicher Schatten */ main.action-login .card { border: none !important; border-radius: 16px !important; box-shadow: 0 4px 24px rgba(0,0,0,0.10) !important; overflow: hidden !important; } /* Card-Header: grüner Streifen oben als border-top, Text als Eyebrow-Label */ main.action-login .login-card-header { background-color: #fff !important; border-bottom: none !important; border-top: 4px solid #00B67A !important; padding: 20px 32px 0 !important; font-family: 'Nunito', sans-serif !important; font-size: 11px !important; font-weight: 700 !important; color: #00B67A !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; } main.action-login .login-card-header a.small { display: none !important; } /* Card-Body */ main.action-login .card-body { padding: 16px 32px 24px !important; } main.action-login .card-body div.text-center.mb-4 { display: none !important; } /* Überschrift – komplett in Blau, da kein -Tag im Systemtext vorhanden */ main.action-login .card-body h1.text-center.mb-4 { display: block !important; font-family: 'Nunito', sans-serif !important; font-size: 1.625rem !important; font-weight: 600 !important; color: #2071B5 !important; text-align: left !important; text-transform: none !important; letter-spacing: normal !important; margin-bottom: 20px !important; } /* Formular-Layout: von zweispaltig (Label | Input) auf einspaltig umgestellt */ main.action-login .form-group.row { display: block !important; } main.action-login .form-group.row .col-xs-12.col-md-5, main.action-login .form-group.row .col-xs-12.col-lg-4 { width: 100% !important; max-width: 100% !important; text-align: left !important; padding-bottom: 4px !important; } main.action-login .form-group.row .col-xs-12.col-md-7, main.action-login .form-group.row .col-xs-12.col-lg-8 { width: 100% !important; max-width: 100% !important; padding-bottom: 12px !important; } main.action-login .form-group.row .col-xs-12.col-md-12 { width: 100% !important; max-width: 100% !important; } main.action-login .offset-lg-4 { margin-left: 0 !important; } /* Labels */ main.action-login .col-form-label { font-family: 'Nunito', sans-serif !important; font-size: 13px !important; font-weight: 600 !important; color: #2E384D !important; padding-top: 4px !important; padding-bottom: 4px !important; } /* Eingabefelder */ main.action-login input.form-control { border: 1.5px solid #e6e8eb !important; border-radius: 10px !important; background-color: #F9FAFB !important; font-family: 'Nunito', sans-serif !important; font-size: 17px !important; color: #2E384D !important; padding: 11px 13px !important; height: auto !important; box-shadow: none !important; width: 100% !important; } main.action-login input.form-control:focus { border-color: #2071B5 !important; background-color: #fff !important; box-shadow: none !important; outline: none !important; } /* Checkbox */ main.action-login .form-check { padding-top: 4px !important; padding-bottom: 8px !important; } main.action-login .form-check-label { font-family: 'Nunito', sans-serif !important; font-size: 13px !important; color: #6B7280 !important; } /* Anmelden-Button – KiPort-Standard mit Hover-Invertierung */ main.action-login button.btn.btn-primary.btn-block { background-color: #2071B5 !important; border: 1px solid #175a91 !important; border-radius: 10px !important; font-family: 'Nunito', sans-serif !important; font-size: 16px !important; font-weight: 600 !important; padding: 13px 36px !important; color: #fff !important; transition: 0.2s all ease !important; width: 100% !important; } main.action-login button.btn.btn-primary.btn-block:hover { background-color: #F0F2F5 !important; color: #6B7280 !important; border-color: #e6e8eb !important; } /* Magischer Login – dezentes Grau, sichtbarer als Ghost, weniger dominant als Primärbutton */ main.action-login a.btn.btn-light.btn-block { background-color: #F0F2F5 !important; border: 1px solid #d1d5db !important; border-radius: 10px !important; font-family: 'Nunito', sans-serif !important; font-size: 14px !important; font-weight: 600 !important; color: #2E384D !important; padding: 11px 36px !important; margin-top: 8px !important; white-space: nowrap !important; transition: 0.2s all ease !important; display: block !important; text-align: center !important; } main.action-login a.btn.btn-light.btn-block:hover { background-color: #e2e6ea !important; color: #1a1a2e !important; border-color: #b0b7c0 !important; } /* Kennwort vergessen */ main.action-login a.btn.btn-link.text-primary { font-family: 'Nunito', sans-serif !important; font-size: 13px !important; color: #2071B5 !important; text-decoration: none !important; display: block !important; text-align: center !important; padding: 8px !important; } main.action-login a.btn.btn-link.text-primary:hover { color: #175a91 !important; text-decoration: underline !important; } /* Trennlinie vor Kennwort-vergessen */ main.action-login .form-group.row.mb-0 { border-top: 1px solid #e6e8eb !important; padding-top: 12px !important; margin-top: 12px !important; } /* Hinweistext unten: Registrierung erfolgt automatisch beim Kurskauf */ main.action-login .col-md-8 .card::after { content: "Noch kein Konto? Kein Problem. Sie werden automatisch beim Kauf Ihres ersten Kurses registriert." !important; display: block !important; font-family: 'Nunito', sans-serif !important; font-size: 13px !important; color: #6B7280 !important; text-align: center !important; padding: 14px 32px 20px !important; line-height: 1.6 !important; background: #fff !important; } /* Admin-Button ausblenden */ main.action-login .btn-login-as-admin { display: none !important; } /* ── 15. MAGIC-LOGIN-SEITE (action-login-magic) ────────────── Separater Block – identisches Design, eigene Selektoren. Body-Klasse: action-body-login-magic | Main-Klasse: action-login-magic Bewusst getrennt von Sektion 14 um Selektor-Konflikte zu vermeiden. ──────────────────────────────────────────────────────────── */ /* Seitenhintergrund */ main.action-login-magic { background-color: #EEF2F7 !important; padding-top: 48px !important; padding-bottom: 48px !important; } /* Container */ main.action-login-magic .container.mt-5.mb-5 { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; width: 100% !important; } /* Card */ main.action-login-magic .card { border: none !important; border-radius: 16px !important; box-shadow: 0 4px 24px rgba(0,0,0,0.10) !important; overflow: hidden !important; } /* Card-Header */ main.action-login-magic .login-card-header { background-color: #fff !important; border-bottom: none !important; border-top: 4px solid #00B67A !important; padding: 20px 32px 0 !important; font-family: 'Nunito', sans-serif !important; font-size: 11px !important; font-weight: 700 !important; color: #00B67A !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; } main.action-login-magic .login-card-header a.small { display: none !important; } /* Card-Body */ main.action-login-magic .card-body { padding: 16px 32px 24px !important; } main.action-login-magic .card-body div.text-center.mb-4 { display: none !important; } /* Überschrift */ main.action-login-magic .card-body h1.text-center.mb-4 { display: block !important; font-family: 'Nunito', sans-serif !important; font-size: 1.625rem !important; font-weight: 600 !important; color: #2071B5 !important; text-align: left !important; text-transform: none !important; letter-spacing: normal !important; margin-bottom: 20px !important; } /* Formular-Layout: einspaltig */ main.action-login-magic .form-group.row { display: block !important; } main.action-login-magic .form-group.row .col-xs-12.col-md-5, main.action-login-magic .form-group.row .col-xs-12.col-lg-4 { width: 100% !important; max-width: 100% !important; text-align: left !important; padding-bottom: 4px !important; } main.action-login-magic .form-group.row .col-xs-12.col-md-7, main.action-login-magic .form-group.row .col-xs-12.col-lg-8 { width: 100% !important; max-width: 100% !important; padding-bottom: 12px !important; } main.action-login-magic .form-group.row .col-xs-12.col-md-12 { width: 100% !important; max-width: 100% !important; } main.action-login-magic .offset-lg-4 { margin-left: 0 !important; } /* Labels */ main.action-login-magic .col-form-label { font-family: 'Nunito', sans-serif !important; font-size: 13px !important; font-weight: 600 !important; color: #2E384D !important; padding-top: 4px !important; padding-bottom: 4px !important; } /* Eingabefelder */ main.action-login-magic input.form-control { border: 1.5px solid #e6e8eb !important; border-radius: 10px !important; background-color: #F9FAFB !important; font-family: 'Nunito', sans-serif !important; font-size: 17px !important; color: #2E384D !important; padding: 11px 13px !important; height: auto !important; box-shadow: none !important; width: 100% !important; } main.action-login-magic input.form-control:focus { border-color: #2071B5 !important; background-color: #fff !important; box-shadow: none !important; outline: none !important; } /* Anmelden-Button */ main.action-login-magic button.btn.btn-primary.btn-block { background-color: #2071B5 !important; border: 1px solid #175a91 !important; border-radius: 10px !important; font-family: 'Nunito', sans-serif !important; font-size: 16px !important; font-weight: 600 !important; padding: 13px 36px !important; color: #fff !important; transition: 0.2s all ease !important; width: 100% !important; } main.action-login-magic button.btn.btn-primary.btn-block:hover { background-color: #F0F2F5 !important; color: #6B7280 !important; border-color: #e6e8eb !important; } /* Kennwort vergessen */ main.action-login-magic a.btn.btn-link.text-primary { font-family: 'Nunito', sans-serif !important; font-size: 13px !important; color: #2071B5 !important; text-decoration: none !important; display: block !important; text-align: center !important; padding: 8px !important; } main.action-login-magic a.btn.btn-link.text-primary:hover { color: #175a91 !important; text-decoration: underline !important; } /* Trennlinie */ main.action-login-magic .form-group.row.mb-0 { border-top: 1px solid #e6e8eb !important; padding-top: 12px !important; margin-top: 12px !important; } /* Hinweistext unten: Erklärung zum verschlüsselten Magic-Link */ main.action-login-magic .col-md-8 .card::after { content: "Sie erhalten nach dem Absenden sofort eine E-Mail mit einem verschlüsselten Link. Ein einziger Klick auf diesen Link genügt. Sie benötigen kein Kennwort. Achtung: Der Link ist nur 15 Minuten gültig." !important; display: block !important; font-family: 'Nunito', sans-serif !important; font-size: 13px !important; color: #6B7280 !important; text-align: center !important; padding: 14px 32px 20px !important; line-height: 1.6 !important; background: #fff !important; } /* Admin-Button ausblenden */ main.action-login-magic .btn-login-as-admin { display: none !important; } /* ── 16. FOOTER AM BILDSCHIRMRAND – LOGIN & MAGIC-LOGIN ────── #app als Flex-Container damit der Footer immer am unteren Bildschirmrand sitzt, unabhängig von der Fenstergröße. Bewusst als separater Block nach Sektion 14 und 15, damit diese Flex-Regeln bei Bedarf einzeln entfernt werden können ohne die Login-Styles zu beeinflussen. ACHTUNG: Nie display:flex direkt auf #app ohne body-Klasse setzen – Vue.js nutzt #app als Mount-Point und reagiert empfindlich auf globale Display-Overrides. ──────────────────────────────────────────────────────────── */ body.action-body-login #app { display: flex !important; flex-direction: column !important; min-height: 100vh !important; } body.action-body-login #app main.action-login { flex: 1 !important; } body.action-body-login #app footer.footer { margin-top: 0 !important; } body.action-body-login-magic #app { display: flex !important; flex-direction: column !important; min-height: 100vh !important; } body.action-body-login-magic #app main.action-login-magic { flex: 1 !important; } body.action-body-login-magic #app footer.footer { margin-top: 0 !important; } /* ── 17. PROFIL-BEREICH ──────────────────────────────────── */ /* Sidebar-Sub und diverse Kurs-Statistiken ausblenden */ .profile-sidebar-sub { display: none; } .mb-3, .my-3 { gap: 1rem; } .quiz-correct-score, .course-runtime, .access-expires-info, .course-progress-text, .course-stats { display: none !important; } /* ── 18. FOOTER ──────────────────────────────────────────── */ /* Kein top-padding; Links grau (#C2C2C2), Hover hellblau (#4A9FD4) */ footer.footer { padding-top: 0; margin-top: 0; color: #ffffff !important; } .footer a:link, .footer a:visited { font-size: 14px; color: #C2C2C2 !important; line-height: 1rem; margin: 10px; } .footer a:hover { text-decoration: none; color: #4A9FD4 !important; } .footer h2 { font-size: 14px; font-weight: 100; text-transform: uppercase; color: #ffffff !important; margin-top: 30px; margin-bottom: 10px; } .footer b { color: #C2C2C2 !important; } /* ── 19. PAGINATOR ───────────────────────────────────────── */ /* Aktive Seite: Gelb (#f6d84d) */ .body-content .ap-frontend-paginator > .page-item.active .page-link { background-color: #f6d84d !important; border-color: #f6d84d; color: #000; } /* ── 20. ANIMATIONEN ─────────────────────────────────────── */ /* Pulsierender grüner Unterstrich – Live-Status-Indikator */ .blink-word { position: relative; display: inline-block; } .blink-word::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: #00B67A; animation: blink 1s infinite; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* Premium-Headline: Gradient-Flow Weiß → Pink → Weiß + fadeIn von unten */ .headline-kp-mint { font-size: 36px; font-weight: 700; line-height: 1.2; background: linear-gradient(90deg, #ffffff 0%, #FA6BBD 40%, #ffffff 75%); background-size: 200% auto; color: transparent; -webkit-background-clip: text; background-clip: text; animation: gradientMove 4s ease-in-out infinite, fadeIn 0.8s ease forwards; text-shadow: 0 2px 10px rgba(0,0,0,0.15); opacity: 0; transform: translateY(10px); } @keyframes gradientMove { 0% { background-position: 0% center; } 100% { background-position: 200% center; } } @keyframes fadeIn { to { opacity: 1; transform: translateY(0); } } /* ── 21. SONSTIGES (Cookie, AC-Branding, Bewertungsmodul, Schatten) ── */ /* ActiveCampaign Branding ausblenden */ #_form_5_._dark ._form-branding, #_form_7_._dark ._form-branding { display: none; color: #333; } /* Cookie-Banner */ .modal-body { flex: 1 1 auto; padding: 1rem; position: relative; margin-left: 20px; margin-right: 20px; } .text-xs { font-size: 1rem; line-height: 1.25rem; } /* Schatten für Video-Elemente */ .modules-video.embed-responsive { overflow: visible !important; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4)); display: inline-block !important; vertical-align: top; } .vimeo-container { border-radius: 6px; overflow: hidden; } /* Schatten-Klassen für Bilder: soft / medium / deep */ .bild-schatten-soft { box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06); border-radius: 16px !important; overflow: hidden !important; display: inline-block !important; } .bild-schatten-medium { box-shadow: 0 2px 4px rgba(0,0,0,0.05), 0 8px 24px rgba(0,0,0,0.08); border-radius: 16px !important; overflow: hidden !important; display: inline-block !important; } .bild-schatten-deep { box-shadow: 0 2px 4px rgba(0,0,0,0.04), 0 8px 16px rgba(0,0,0,0.06), 0 16px 40px rgba(0,0,0,0.08); border-radius: 16px !important; overflow: hidden !important; display: inline-block !important; } .bild-schatten-soft img, .bild-schatten-medium img, .bild-schatten-deep img { width: 100% !important; height: auto !important; display: block !important; } /* Bildbreiten-Hilfsklassen */ .bild-w-40 { width: 40% !important; } .bild-w-60 { width: 60% !important; } .bild-w-80 { width: 80% !important; } /* ── 22. MEDIA QUERIES ───────────────────────────────────── */ /* ≥ 1200px – große Desktops */ @media (min-width: 1200px) { .card-deck .card { margin-right: 10px; flex: 0 0 calc(33.33333% - 11px) !important; border: 1px solid transparent; border-radius: 2px; box-shadow: 0 2px 1px -1px #0003, 0 1px 1px #00000024, 0 1px 3px #0000001f; } .card-deck .card:hover { border: 1px solid #3988E3; text-decoration: none !important; } main.action-search-index .card-deck .card { margin-right: 0; flex: 0 0 calc(30% - 1px) !important; } main.action-search-index .card-deck .card .search-item-image { margin-bottom: 30px; } main.action-search-index a.search-item:link, main.action-search-index a.search-item:visited { text-decoration: none !important; color: #222 !important; } main.action-search-index a.search-item:hover { text-decoration: none !important; } div.card-deck.articles-list.articles-list-tiles h5 { margin-bottom: 15px !important; font-size: 1.2rem !important; line-height: 1.5rem !important; color: #000 !important; } div.card-deck.articles-list.articles-list-tiles p { font-size: 14px; line-height: 1rem !important; color: #6B7280 !important; } .col-sm-4.col-lg-3.text-center { text-align: left !important; } } /* ≤ 1199px – mittlere Desktops */ @media (max-width: 1199px) { .card-deck .card { margin-right: 10px; flex: 0 0 calc(33.33333% - 11px) !important; border: 1px solid transparent; border-radius: 2px; box-shadow: 0 2px 1px -1px #0003, 0 1px 1px #00000024, 0 1px 3px #0000001f; } .card-deck .card:hover { border: 1px solid #3988E3; text-decoration: none !important; } div.card-deck.articles-list.articles-list-tiles h5 { margin-top: 15px !important; margin-bottom: 15px !important; font-size: 20px !important; line-height: 1.5rem !important; color: #000 !important; } div.card-deck.articles-list.articles-list-tiles p { font-size: 14px; line-height: 1rem !important; color: #6B7280 !important; text-decoration: none !important; } } /* ≥ 1248px – Kurs-Player: Extra-Margin unter dem Video */ @media (min-width: 1248px) { main.classroom .modules-lesson-media { margin-bottom: 4em !important; } } /* 992px–1200px – Tablet/iPad quer: Player-Layout als Flex-Row */ @media (min-width: 992px) and (max-width: 1200px) { main.classroom div.classroom-container { display: flex !important; flex-direction: row !important; width: 100%; } main.classroom div.classroom-container div.classroom-content { width: 66% !important; } form.quiz-form { margin-bottom: 200px; } } /* ≥ 992px – PC & Tablet */ @media (min-width: 992px) { .card-deck .card { margin-right: 10px; flex: 0 0 calc(33.33333% - 11px) !important; border: 1px solid transparent; border-radius: 2px; box-shadow: 0 2px 1px -1px #0003, 0 1px 1px #00000024, 0 1px 3px #0000001f; } .card-deck .card:hover { border: 1px solid #3988E3; text-decoration: none !important; } div.card-deck.articles-list.articles-list-tiles h5 { margin-top: 15px !important; margin-bottom: 15px !important; font-size: 20px !important; line-height: 1.5rem !important; color: #000 !important; } div.card-deck.articles-list.articles-list-tiles p { font-size: 14px; line-height: 1rem !important; color: #6B7280 !important; text-decoration: none !important; } .col-sm-4.col-lg-3.text-center { text-align: center !important; } main.classroom div.classroom-container div.classroom-content { border-left: 0; padding-top: 50px; padding-left: 40px; } main.classroom .modules-lesson-media { padding: 0 !important; box-shadow: 0 10px 30px 11px rgb(0 0 0 / 25%); } main.classroom .modules-lesson-media div:first-of-type { padding: 0 !important; } main.classroom .modules-lesson-comments { display: none; } main.classroom div.classroom-container div.classroom-sidebar { width: 35%; margin-top: 20px; margin-right: 10px; height: 80vh; box-shadow: 0 2px 1px -1px #0003, 0 1px 1px #00000024, 0 1px 3px #0000001f; background: #fff; direction: rtl; } main.classroom div.classroom-container div.classroom-sidebar .course-sidebar { direction: ltr; } div.classroom-sidebar.course-sidebar-collapsed { direction: ltr !important; } } /* ≤ 992px – Smartphone */ @media (max-width: 992px) { main.classroom, body.action-body-modules-show { background: #fff !important; } /* body.action-body-modules-show: ungültiges overflow: vertical entfernt (11.09.2026) */ main.classroom div.classroom-container div.left { max-height: 75vh; overflow: auto; padding-bottom: 27vh; } main.classroom .modules-lesson-media { padding-top: 0 !important; padding-bottom: 0 !important; } form.quiz-form .form-control { height: auto !important; } body.action-body-modules-show #menu-bar { display: none; } body.action-body-modules-show .course-sidebar { background: #fff; } .nav-tabs { display: none; } .footer .col { flex-basis: auto !important; } } /* ── 23. KIPORT BADGE ────────────────────────────────────── */ /* Pill mit grünem Häkchen-Kreis (CSS-generated). HTML: Text Text */ .kiport-badge { --badge-bg: #ffffff; } .kiport-badge-grau { --badge-bg: #F9FAFB; } .kiport-badge, .kiport-badge-grau { --badge-circle: #00B67A; --badge-text: #6b7280; --badge-border: #e6e8eb; --badge-radius: 12px; --badge-font-size: 12px; display: inline-flex; align-items: center; padding: 9px 18px 9px 11px; background: var(--badge-bg); border: 1px solid var(--badge-border); border-radius: var(--badge-radius); box-shadow: 0 1px 2px rgba(0,0,0,0.04); font-family: -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: var(--badge-font-size); font-weight: 700; color: var(--badge-text); line-height: 1; white-space: nowrap; } .kiport-badge::before, .kiport-badge-grau::before { content: ""; display: inline-block; width: 22px; height: 22px; flex-shrink: 0; vertical-align: middle; margin-right: 10px; background-color: var(--badge-circle); border-radius: 50%; background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%3E%3Cpath%20d='M5%2012.5l4.5%204.5L19%207'%20stroke='%23ffffff'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 12px 12px; } /* Badge-Kreis ohne Text (für Icon-only-Varianten) */ .badge-circle, .badge-circle-grau { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background-color: #CBE2FE; color: #203150; font-size: 24px; font-weight: 600; } /* ── 24. KIPORT TAG (KOMPAKT) ────────────────────────────── */ /* Wie Badge, aber ohne Rahmen und kleiner (18px Kreis, 13px Text). HTML: Text Gruppe:
…
*/ .kiport-tag { --tag-circle: #00B67A; --tag-text: #6b7280; --tag-circle-size: 18px; --tag-font-size: 13px; display: inline-flex; align-items: center; font-family: -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: var(--tag-font-size); color: var(--tag-text); line-height: 1; white-space: nowrap; } .kiport-tag::before { content: ""; display: inline-block; width: var(--tag-circle-size); height: var(--tag-circle-size); flex-shrink: 0; vertical-align: middle; margin-right: 7px; background-color: var(--tag-circle); border-radius: 50%; background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%3E%3Cpath%20d='M5%2012.5l4.5%204.5L19%207'%20stroke='%23ffffff'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 10px 10px; } .kiport-tag-group { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; } /* ── 25. TESTIMONIAL CARD ────────────────────────────────── */ .testimonial-card { background: #F9FAFB; border: 1px solid #e6e8eb; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); padding: 1.5rem 1.75rem; max-width: 420px; margin-left: auto; } .testimonial-card blockquote::after { display: none; } .testimonial-quote { background: #F0F2F5; border-left: 3px solid #1D9E75; border-radius: 0; padding-left: 1rem; margin: 0 0 1.25rem 0; font-style: italic; font-size: 15px; line-height: 1.65; color: #1a1a1a; } .testimonial-author { display: flex; align-items: center; gap: 12px; margin-bottom: 1rem; } .testimonial-avatar { width: 40px; height: 40px; border-radius: 50%; background: #E1F5EE; display: flex; align-items: center; justify-content: center; font-weight: 500; font-size: 13px; color: #0F6E56; flex-shrink: 0; } .testimonial-name { font-weight: 600; font-size: 14px; color: #1a1a1a; margin: 0; line-height: 1.3; } .testimonial-role { font-size: 12px; color: #6b7280; margin: 0; line-height: 1.3; } .testimonial-stars { display: flex; align-items: center; gap: 3px; font-size: 18px; color: #00B67A; line-height: 1; } .testimonial-source { margin-left: 0.75rem; font-size: 12px; color: #6b7280; } /* ── 26. KATEGORIE-KACHELN (KURSÜBERSICHT) ───────────────── */ /* Grid: 3 Spalten (≥960px) → 2 (≤960px) → 1 (≤580px) */ :root { --kp-accent: #2072B5; --kp-accent-light: #e8f1fa; --kp-accent-dark: #175a91; --kp-text: #2E384D; --kp-category-card-bg: #ffffff; --kp-category-card-border: #dde3ea; } span:has(> .kp-category-card-grid) { display: block; } .kp-category-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; width: 100%; } .kp-category-card { background: var(--kp-category-card-bg); border: 1px solid var(--kp-category-card-border); border-radius: 12px; padding: 1.5rem; display: flex; flex-direction: column; gap: 0.65rem; position: relative; cursor: pointer; text-decoration: none; color: inherit; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .kp-category-card:hover { border-color: var(--kp-accent); box-shadow: 0 8px 28px rgba(32,114,181,0.18); transform: translateY(-4px); text-decoration: none; } .kp-category-card__badge { position: absolute; top: 1.25rem; right: 1.25rem; background: var(--kp-accent-light); color: var(--kp-accent-dark); font-size: 0.7rem; font-weight: 600; padding: 3px 10px; border-radius: 20px; white-space: nowrap; } .kp-category-card__icon { width: 56px; height: 56px; display: flex; align-items: center; flex-shrink: 0; } .kp-category-card__icon img { width: 56px; height: 56px; object-fit: contain; } .kp-category-card__heading { display: flex; flex-direction: column; gap: 0.2rem; } .kp-category-card__title { font-size: 0.92rem; font-weight: 700; color: var(--kp-text); line-height: 1.3; margin: 0; padding-right: 3.5rem; } .kp-category-card__desc { font-size: 0.78rem; color: var(--kp-text); line-height: 1.55; margin: 0; flex-grow: 1; } .kp-category-card__link { font-size: 0.78rem; font-weight: 600; color: var(--kp-accent); text-decoration: none; margin-top: 0.5rem; display: inline-block; } .kp-category-card:hover .kp-category-card__link { color: var(--kp-accent-dark); text-decoration: underline; } @media (max-width: 960px) { .kp-category-card-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 580px) { .kp-category-card-grid { grid-template-columns: 1fr; } } /* ── 27. PRAXISSZENARIO-KACHELN ──────────────────────────── */ /* Dunkelblaue Kacheln mit türkisem Akzentbalken links. Grid: 2 Spalten (≥768px) → 1 Spalte darunter. */ .kp-kacheln-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; max-width: 1100px; margin: 0 auto; padding: 2rem 1rem; } .kp-kachel { background-color: #2E3D5B; border-radius: 10px; border-left: 4px solid #41B7AC; padding: 1.75rem 1.75rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; text-decoration: none !important; cursor: pointer; transition: border-left-color .2s ease, background-color .2s ease, box-shadow .2s ease; } .kp-kachel:hover, .kp-kachel:focus { background-color: #354466; border-left-color: #23AADC; box-shadow: 0 0 0 1px #23AADC; outline: none; text-decoration: none !important; } .kp-kachel:hover *, .kp-kachel:focus * { text-decoration: none !important; } .kp-kachel__zitat { font-style: italic; color: #9aafc8; font-size: .95rem; line-height: 1.65; margin: 0; } .kp-kachel__nutzen { color: #fff; font-weight: 700; font-size: .95rem; line-height: 1.55; margin: 0; display: flex; align-items: flex-start; gap: .5em; } .kp-kachel__nutzen > span:first-child { flex-shrink: 0; } .kp-kachel__kurs { display: inline-block; color: #41B7AC; font-size: .875rem; margin-top: auto; padding-top: .25rem; transition: color .15s ease; } .kp-kachel:hover .kp-kachel__kurs, .kp-kachel:focus .kp-kachel__kurs { color: #23AADC; text-decoration: none !important; } @media (max-width: 768px) { .kp-kacheln-grid { grid-template-columns: 1fr; } } /* ── 28. BLOG-KACHELN – VARIANTE B ──────────────────────── */ /* Scope: ausschließlich .articles-list-tiles – kein JS erforderlich. */ div.card-deck.articles-list.articles-list-tiles .card { position: relative !important; background-color: #F9FAFB !important; border-radius: 16px !important; border: 1px solid #e6e8eb !important; box-shadow: 0 1px 4px rgba(0,0,0,0.05) !important; transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease !important; } div.card-deck.articles-list.articles-list-tiles .card:hover { border: 1px solid #c8d8ec !important; transform: translateY(-4px) !important; box-shadow: 0 8px 24px rgba(32,113,181,0.10) !important; text-decoration: none !important; } div.card-deck.articles-list.articles-list-tiles .card:hover * { text-decoration: none !important; } div.card-deck.articles-list.articles-list-tiles .card::after { content: '→'; position: absolute; bottom: 14px; right: 16px; font-size: 15px; font-family: 'Nunito', sans-serif; color: transparent; pointer-events: none; line-height: 1; transition: color 0.2s ease, transform 0.2s ease; } div.card-deck.articles-list.articles-list-tiles .card:hover::after { color: #2071B5; transform: translateX(4px); } div.card-deck.articles-list.articles-list-tiles .card:has(.card-footer)::after { display: none !important; } div.card-deck.articles-list.articles-list-tiles .card .subline-bar { position: static !important; background: transparent !important; width: 100% !important; padding: 16px 20px 0 20px !important; top: auto !important; bottom: auto !important; left: auto !important; right: auto !important; border: none !important; border-radius: 0 !important; } div.card-deck.articles-list.articles-list-tiles .card .subline-caption, div.card-deck.articles-list.articles-list-tiles .card .subline-bar span { color: #2071B5 !important; background: transparent !important; font-family: 'Nunito', sans-serif !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.09em !important; text-transform: uppercase !important; line-height: 1 !important; } div.card-deck.articles-list.articles-list-tiles .card .card-body { padding: 8px 20px 22px !important; } div.card-deck.articles-list.articles-list-tiles .card .card-body > h5:first-of-type { font-size: 1.1rem !important; font-weight: 700 !important; color: #2E384D !important; line-height: 1.5 !important; margin-top: 16px !important; margin-bottom: 14px !important; } div.card-deck.articles-list.articles-list-tiles .card .card-body > p { font-size: 14px !important; color: #6B7280 !important; line-height: 1.7 !important; margin-bottom: 0 !important; } /* ── 29. NAV REDESIGN: Zweizeilig + Slide-Underline + Kurs-CTA ── */ .first-navbar { background-color: #1A2748 !important; } .navbar:not(.first-navbar):not(.announcement-navbar) { background-color: #ffffff !important; padding-top: 0 !important; padding-bottom: 0 !important; min-height: 64px !important; } .nav-link.custom-nav-link { position: relative !important; color: #4a5568 !important; font-weight: 600 !important; font-size: 16px !important; padding: 0 13px !important; height: 64px !important; display: flex !important; align-items: center !important; border-bottom: 3px solid transparent !important; transition: color 0.18s ease !important; white-space: nowrap !important; } .nav-link.custom-nav-link::after { content: '' !important; position: absolute !important; bottom: 0 !important; left: 13px !important; right: 13px !important; height: 3px !important; background: #2071B5 !important; border-radius: 2px 2px 0 0 !important; transform: scaleX(0) !important; transform-origin: left !important; transition: transform 0.2s ease !important; } .nav-link.custom-nav-link:hover { color: #2071B5 !important; } .nav-link.custom-nav-link:hover::after { transform: scaleX(1) !important; } .nav-link.custom-nav-link.kp-active { color: #2071B5 !important; } .nav-link.custom-nav-link.kp-active::after { transform: scaleX(1) !important; } .nav-link.custom-nav-link.blink-word { background: #2071B5 !important; color: #ffffff !important; border-radius: 8px !important; padding: 9px 18px !important; height: auto !important; margin: auto 0 auto 16px !important; font-weight: 700 !important; font-size: 16px !important; transition: background 0.18s ease !important; } .nav-link.custom-nav-link.blink-word::before { content: '' !important; display: inline-block !important; width: 16px !important; height: 16px !important; margin-right: 7px !important; vertical-align: -2px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-size: contain !important; } .nav-link.custom-nav-link.blink-word::after { display: none !important; } .nav-link.custom-nav-link.blink-word:hover { background: #F0F2F5 !important; color: #6B7280 !important; border: 1px solid #2071B5 !important; } .nav-link.custom-nav-link.blink-word:hover::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") !important; } .nav-link.custom-nav-link.blink-word.kp-active { background: #2071B5 !important; color: #ffffff !important; box-shadow: 0 0 0 2.5px #FAB215 !important; border: none !important; } .nav-link.custom-nav-link.blink-word.kp-active:hover { background: #2071B5 !important; color: #ffffff !important; box-shadow: 0 0 0 2.5px #FAB215 !important; border: none !important; } .nav-link.custom-nav-link.blink-word.kp-active:hover::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") !important; } .nav-item:has(.blink-word) { border-left: 1px solid #e6e8eb !important; padding-left: 16px !important; margin-left: 8px !important; display: flex !important; align-items: center !important; } /* Nav Responsive: Hamburger ab 1400px */ @media (max-width: 1400px) { .navbar-toggler { display: block !important; } } @media (max-width: 1400px) { .navbar-collapse:not(.show), .navbar-expand .navbar-collapse:not(.show), .navbar-expand-sm .navbar-collapse:not(.show), .navbar-expand-md .navbar-collapse:not(.show), .navbar-expand-lg .navbar-collapse:not(.show), .navbar-expand-xl .navbar-collapse:not(.show) { display: none !important; flex: unset !important; } } @media (max-width: 1400px) { .navbar .container .navbar-collapse .navbar-nav.navbar-left { display: none !important; } } @media (max-width: 1400px) { .navbar .container .navbar-collapse.show .navbar-nav.navbar-left { display: block !important; width: 100% !important; } } @media (max-width: 1400px) { .navbar-collapse.show .nav-item { width: 100% !important; } } @media (max-width: 1400px) { .navbar-collapse.show .nav-link.custom-nav-link { height: auto !important; padding: 12px 24px !important; width: 100% !important; border-bottom: 1px solid #f0f2f5 !important; } } @media (max-width: 1400px) { .navbar-collapse.show .nav-item:has(.blink-word) { display: block !important; width: 100% !important; padding: 12px 0 4px !important; margin: 0 !important; border-top: none !important; border-bottom: none !important; border-left: none !important; margin-left: 0 !important; } } @media (max-width: 1400px) { .navbar-collapse.show .nav-link.custom-nav-link.blink-word { margin: 0 0 0 24px !important; width: fit-content !important; border-bottom: none !important; padding: 9px 18px !important; } } @media (max-width: 1400px) { .navbar-collapse.show { background: #ffffff !important; padding: 12px 0 20px !important; border-top: 1px solid #e6e8eb !important; } } /* Nav Responsive: Globale Overrides */ .navbar-collapse.show { display: block !important; } .navbar-collapse.show .navbar-nav { float: none !important; display: block !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } .navbar-collapse.show .nav-item.nav-search { display: none !important; visibility: hidden !important; height: 0 !important; overflow: hidden !important; padding: 0 !important; margin: 0 !important; } .navbar-collapse.show .nav-item.nav-cart-button { display: none !important; } .navbar-collapse.show .nav-item-profile-dropdown { display: none !important; } .navbar-collapse.show .nav-item-logout { display: none !important; } .navbar-collapse.show .navbar-nav.ml-auto { margin-top: -16px !important; } .navbar-collapse.show .navbar-nav.ml-auto .nav-item { padding: 4px 0 12px !important; border-top: none !important; border-bottom: none !important; } .navbar-collapse.show .navbar-nav.ml-auto a.login-link { margin-left: 8px !important; } .navbar-collapse.show a.login-link { background-color: #00B67A !important; border-color: #00B67A !important; border-radius: 8px !important; padding: 9px 18px !important; font-weight: 700 !important; font-size: 16px !important; width: fit-content !important; display: inline-block !important; } /* ── 30. FAQ-AKKORDEON (Hilfe & Kontakt) ─────────────────── */ body.body-hilfe-kontakt .modules-title { background: transparent !important; border-radius: 0 !important; border-bottom: 2px solid #FAB215 !important; margin-right: 0 !important; margin-top: 24px !important; margin-bottom: 12px !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: .06em !important; text-transform: uppercase !important; color: #1A2748 !important; } body.body-hilfe-kontakt .modules-accordion { border: 1px solid #e6e8eb !important; border-radius: 8px !important; overflow: hidden !important; margin-top: 0 !important; margin-bottom: 24px !important; } body.body-hilfe-kontakt .modules-accordion .card { border-radius: 0 !important; border: none !important; border-bottom: 1px solid #e6e8eb !important; box-shadow: none !important; background: #ffffff !important; margin-bottom: 0 !important; } body.body-hilfe-kontakt .modules-accordion .card.mb-1 { margin-bottom: 0 !important; } body.body-hilfe-kontakt .modules-accordion .card:last-child { border-bottom: none !important; } body.body-hilfe-kontakt .modules-accordion .card-header { background: #ffffff !important; padding: 13px 16px !important; font-size: 15px !important; font-weight: 500 !important; color: #2E384D !important; cursor: pointer !important; border: none !important; } body.body-hilfe-kontakt .modules-accordion .card-header.not-collapsed { background: #ffffff !important; border-top: none !important; font-weight: 700 !important; color: #1A2748 !important; font-size: 15px !important; } body.body-hilfe-kontakt .modules-accordion .arrow-down { color: #9aafc8 !important; transition: transform .2s ease !important; } body.body-hilfe-kontakt .modules-accordion .card-header.not-collapsed .arrow-down { color: #2071B5 !important; transform: rotate(180deg) !important; } body.body-hilfe-kontakt .modules-accordion .card-body { padding: 12px 16px 14px !important; font-size: 15px !important; line-height: 1.65 !important; color: #000 !important; margin-right: 0 !important; background: #f5f9fd !important; } /* ── 31. FAQ-AKKORDEON (Teamfortbildungen) ───────────────── */ body.body-kita-teamfortbildungen .modules-title { background: transparent !important; border-radius: 0 !important; border-bottom: 2px solid #FAB215 !important; padding: 0 0 6px 0 !important; margin-top: 24px !important; margin-bottom: 12px !important; margin-right: 0 !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: .06em !important; text-transform: uppercase !important; color: #1A2748 !important; } body.body-kita-teamfortbildungen .modules-accordion { border: 1px solid #e6e8eb !important; border-radius: 8px !important; overflow: hidden !important; margin-top: 0 !important; margin-bottom: 24px !important; } body.body-kita-teamfortbildungen .modules-accordion .card { border-radius: 0 !important; border: none !important; border-bottom: 1px solid #e6e8eb !important; box-shadow: none !important; background: #ffffff !important; margin-bottom: 0 !important; } body.body-kita-teamfortbildungen .modules-accordion .card.mb-1 { margin-bottom: 0 !important; } body.body-kita-teamfortbildungen .modules-accordion .card:last-child { border-bottom: none !important; } body.body-kita-teamfortbildungen .modules-accordion .card-header { background: #ffffff !important; padding: 13px 16px !important; font-size: 15px !important; font-weight: 500 !important; color: #2E384D !important; cursor: pointer !important; border: none !important; } body.body-kita-teamfortbildungen .modules-accordion .card-header.not-collapsed { background: #ffffff !important; border-top: none !important; font-weight: 700 !important; color: #1A2748 !important; font-size: 15px !important; } body.body-kita-teamfortbildungen .modules-accordion .arrow-down { color: #9aafc8 !important; transition: transform .2s ease !important; } body.body-kita-teamfortbildungen .modules-accordion .card-header.not-collapsed .arrow-down { color: #2071B5 !important; transform: rotate(180deg) !important; } body.body-kita-teamfortbildungen .modules-accordion .card-body { padding: 12px 16px 14px !important; font-size: 15px !important; line-height: 1.65 !important; color: #000 !important; background: #f5f9fd !important; } /* ============================================================= 32. COOKIE CONSENT MODAL – KiPort Custom Styling ------------------------------------------------------------- Ziel: Apprex-eigenes Cookie-Consent-Modal optisch an das KiPort-Design anpassen. Keine Änderungen an Funktionen oder DOM-Struktur – ausschließlich visuelle Überschreibungen. Struktur des Modals: .consent-modal-backdrop Overlay-Hintergrund #form-consent Dialog-Container (FORM-Tag) .modal-content Weißer Kasten .text-center.mt-3 Logo-Bereich .modal-header Überschrift "Datenschutzeinstellungen" .modal-body .text-xs Fließtext (3

-Tags) .d-flex.mb-1 (×3) Toggle-Zeilen (Essenziell, Marketing, Extern) .modal-footer Button-Bereich (4 Buttons, 1 davon ausgeblendet) Button-Mapping: button[onclick="consentAll()"] → "Alle speichern" (primär, volle Breite) button[type="submit"] → "Speichern" (Auswahl übernehmen) a[onclick="return consentEssential()"] → "Nur essenzielle Cookies" a[href="?consent_individual=1"] → "Individuelle Einstellung" (ausgeblendet) Bekannte Apprex-Eigenheiten: .ap-switch hat margin-bottom: 8px von Haus aus → wird neutralisiert .d-block.ml-3 hat line-height: 12.5px → wird auf 1 gesetzt ============================================================= */ /* Overlay-Hintergrund: KiPort-Navy mit leichtem Blur */ .consent-modal-backdrop { background: rgba(17, 29, 54, 0.55) !important; backdrop-filter: blur(2px) !important; } /* Dialog-Breite begrenzen, horizontal zentriert */ #form-consent { max-width: 460px !important; width: calc(100% - 32px) !important; margin: auto !important; } /* Kasten: stärkere Rundung, weicher Schatten, kein Border */ #form-consent .modal-content { border-radius: 20px !important; box-shadow: 0 8px 40px rgba(17,29,54,0.18) !important; border: none !important; } /* Logo: kompaktes Padding, Höhe reduziert */ #form-consent .text-center.mt-3 { padding: 1rem 1.5rem 0 !important; margin: 0 !important; } #form-consent .text-center.mt-3 img { height: 34px !important; width: auto !important; } /* Überschrift: Padding oben auf Minimum, Text direkt unter Logo */ #form-consent .modal-header { padding: 0.2rem 1.5rem 0 !important; border: none !important; } #form-consent .modal-title { font-family: 'Nunito', sans-serif !important; font-size: 0.95rem !important; font-weight: 600 !important; color: #1A2748 !important; margin: 0 !important; } /* Body: minimaler Abstand oben, Text sitzt direkt unter der Überschrift */ #form-consent .modal-body { padding: 0.05rem 1.5rem 0 !important; margin: 0 !important; } /* Fließtext: kompakte Schrift, enger Zeilenabstand, Abstand nach unten zu den Toggles */ #form-consent .modal-body .text-xs { font-size: 12px !important; line-height: 1.5 !important; color: #6B7280 !important; margin-top: 0 !important; margin-bottom: 0.85rem !important; } /* Absätze im Fließtext eng halten, letzter ohne Abstand */ #form-consent .modal-body .text-xs p { margin-top: 0 !important; margin-bottom: 0.15rem !important; } #form-consent .modal-body .text-xs p:last-child { margin-bottom: 0 !important; } #form-consent .modal-body .text-xs a { color: #2071B5 !important; text-decoration: none !important; } /* Toggle-Zeilen: flex mit gap, kein Bootstrap-Spacing mehr */ #form-consent .d-flex.mb-1 { display: flex !important; align-items: center !important; gap: 10px !important; margin-bottom: 5px !important; padding: 0.45rem 0.9rem !important; background: #F9FAFB !important; border-radius: 10px !important; border: 1px solid #e6e8eb !important; } /* Letzter Toggle ohne Abstand nach unten */ #form-consent .d-flex.mb-1:last-of-type { margin-bottom: 0 !important; } /* Toggle-Schalter: Apprex-eigenes margin-bottom: 8px neutralisieren */ #form-consent .ap-switch { margin-bottom: 0 !important; display: flex !important; align-items: center !important; flex-shrink: 0 !important; } /* Toggle-Label: Bootstrap ml-3 neutralisieren, exakte vertikale Zentrierung */ #form-consent .d-block.ml-3 { font-size: 12.5px !important; font-weight: 600 !important; color: #2E384D !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; display: flex !important; align-items: center !important; } /* Button-Bereich: eine Spalte, alle Buttons untereinander */ #form-consent .modal-footer { padding: 0.75rem 1.5rem 1.25rem !important; border: none !important; display: flex !important; flex-direction: column !important; gap: 8px !important; } /* Alle Buttons: volle Breite, einheitliche Basis-Styles */ #form-consent .modal-footer .btn { font-family: 'Nunito', sans-serif !important; font-size: 13px !important; font-weight: 600 !important; border-radius: 10px !important; padding: 10px 14px !important; box-shadow: none !important; width: 100% !important; text-align: center !important; line-height: 1.3 !important; border: 1px solid #e6e8eb !important; background: #F0F2F5 !important; color: #2E384D !important; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease !important; } /* Sekundärbuttons: Hover auf Navy */ #form-consent .modal-footer .btn:hover { background: #1A2748 !important; color: #fff !important; border-color: #1A2748 !important; } /* Primärbutton "Alle speichern": KiPort-Blau, Hover auf Navy */ #form-consent .modal-footer button[onclick="consentAll()"] { background: #2071B5 !important; color: #fff !important; border-color: #2071B5 !important; } #form-consent .modal-footer button[onclick="consentAll()"]:hover { background: #1A2748 !important; border-color: #1A2748 !important; } /* "Individuelle Einstellung" ausblenden – Toggles übernehmen diese Funktion */ #form-consent .modal-footer a[href="?consent_individual=1"] { display: none !important; } /* ── 33. KURSKACHELN QUALIFIZIERUNG ZUR FACHKRAFT (SEITEN-ID) ── */ /* Seite /qualifizierung-zur-fachkraft-fuer-ihren-kita-schwerpunkt (bis 13.09.2026 /fortbildung-zur-fachkraft). Flache Kopie des Blocks „KURSE ÜBERSICHT MODUL" aus dem Feld Global SCSS. Dort hängt er an der Klasse main.fortbildung-zur-fachkraft, die es seit der Umbenennung nicht mehr gibt. Hier hängt er an der Seiten-ID, die bei einer Umbenennung gleich bleibt. Neu am 13.09.2026. */ main[class~="3c5e5590-dcd7-4a50-b029-59fc19261b70"] .articles-list div.card div.subline-bar { padding: 7px 7px 7px 20px !important; background-color: #2071B5; } main[class~="3c5e5590-dcd7-4a50-b029-59fc19261b70"] .articles-list div.card div.subline-caption { font-size: 12px; color: #fff; text-transform: uppercase; padding: 2px 0px; } main[class~="3c5e5590-dcd7-4a50-b029-59fc19261b70"] .articles-list div.card div.featured-caption { text-transform: uppercase !important; font-size: 12px; background: #F6D84D; color: #000; margin-right: 10px; padding: 2px 0px; left: 7px; box-shadow: 7px 0px 0px #F6D84D, -7px 0px 0px #F6D84D; } main[class~="3c5e5590-dcd7-4a50-b029-59fc19261b70"] .articles-list div.card div.offer-caption { order: 2; text-transform: uppercase !important; font-size: 12px; background: #00B67A; color: #000; margin-right: 10px; padding: 2px 0px; left: 7px; box-shadow: 7px 0px 0px #00B67A, -7px 0px 0px #00B67A; } main[class~="3c5e5590-dcd7-4a50-b029-59fc19261b70"] .card-footer .strike-price { margin-right: 5px; } main[class~="3c5e5590-dcd7-4a50-b029-59fc19261b70"] .ap-frontend-paginator-top { display: none; } main[class~="3c5e5590-dcd7-4a50-b029-59fc19261b70"] .articles-list div.card div.offer-caption { color: #fff; background: #18B974 !important; } main[class~="3c5e5590-dcd7-4a50-b029-59fc19261b70"] .articles-list div.card div.card-footer { background: transparent !important; } main[class~="3c5e5590-dcd7-4a50-b029-59fc19261b70"] .articles-list div.card { border: 1px solid transparent; border-radius: 2px; box-shadow: 0 2px 1px -1px #0003, 0 1px 1px #00000024, 0 1px 3px #0000001f; } main[class~="3c5e5590-dcd7-4a50-b029-59fc19261b70"] .articles-list div.card:hover { border: 1px solid #3988E3; } main[class~="3c5e5590-dcd7-4a50-b029-59fc19261b70"] .articles-list div.card div.card-body { padding-top: 0px !important; } main[class~="3c5e5590-dcd7-4a50-b029-59fc19261b70"] .articles-list div.card div.card-body h2 { margin-top: 15px; font-size: 1.2rem !important; line-height: 1.5rem !important; } main[class~="3c5e5590-dcd7-4a50-b029-59fc19261b70"] .articles-list div.card div.card-body .content-excerpt { font-size: 14px; } main[class~="3c5e5590-dcd7-4a50-b029-59fc19261b70"] .articles-list div.card div.card-body .author-container { display: none !important; padding-top: 20px; } main[class~="3c5e5590-dcd7-4a50-b029-59fc19261b70"] .articles-list div.card div.card-body .author-info .author-name { font-weight: 800 !important; color: #222; } main[class~="3c5e5590-dcd7-4a50-b029-59fc19261b70"] .articles-list div.card div.card-body .author-info .author-bio { font-size: 12px; color: #888 !important; } main[class~="3c5e5590-dcd7-4a50-b029-59fc19261b70"] .card-footer .payment-info { font-size: 12px; color: #888; position: absolute; bottom: 11px; } main[class~="3c5e5590-dcd7-4a50-b029-59fc19261b70"] .card-footer .strike-price { color: #E0797F !important; text-decoration: line-through; } main[class~="3c5e5590-dcd7-4a50-b029-59fc19261b70"] .card-footer .norm-price { color: #000 !important; font-size: 1.125rem; font-weight: 600; } /* ── 34. NAVIGATION AB 1401PX: BREITERER CONTAINER ────────── */ /* Die ausgeschriebene Navigation braucht rund 1.260px, der Standard-Container hat innen 1.110px. Bis 15.09.2026 ragte sie deshalb zwischen 1401 und ca. 1655px über den rechten Fensterrand (Anmelden abgeschnitten, Seite breiter als das Fenster). Ab 1401px (darunter Hamburger, Abschnitt 29) Topbar und Hauptnav auf 1320px, Einzug der Linklisten aus Abschnitt 5 weg. */ @media (min-width: 1401px) { .first-navbar > .container, .navbar:not(.first-navbar):not(.announcement-navbar) > .container { max-width: 1320px !important; } } @media (min-width: 1401px) { .navbar:not(.first-navbar):not(.announcement-navbar) .navbar-nav { padding-left: 0 !important; } } /* ── 35. PROFIL-MENÜ: LANGE NAMEN KÜRZEN ─────────────────── */ /* Angemeldet steht der Name als Text direkt im Link (a.nav-link.dropdown-toggle, Pfeil als ::after). Lange Namen machten die Leiste bis zu 70px zu breit fürs Fenster (gemessen 15.09.2026). Link auf 180px begrenzt, Rest mit „…“. Der Pfeil sitzt absolut im rechten Innenabstand, damit er beim Kürzen nicht mit abgeschnitten wird. Kurze Namen (z. B. „Michael Baldamus“) bleiben ungekürzt. Darunter Hamburger, dort ist das Profil-Menü ausgeblendet (Abschnitt 29). */ @media (min-width: 1401px) { .navbar:not(.first-navbar):not(.announcement-navbar) .nav-item-profile-dropdown > .nav-link.dropdown-toggle { max-width: 180px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; position: relative !important; padding-right: 22px !important; } } @media (min-width: 1401px) { .navbar:not(.first-navbar):not(.announcement-navbar) .nav-item-profile-dropdown > .nav-link.dropdown-toggle::after { position: absolute !important; right: 8px !important; top: 50% !important; margin: -0.15em 0 0 0 !important; vertical-align: 0 !important; } } .course-content-module-single:hover{text-decoration:none}.action-login{}.action-login .login-card-header a{display:none}.action-login .btn-login-as-admin{display:none}body.body-leiten-mit-herz-und-verstand .chapter-caption,body.body-zertifizierte-fachkraft-kitaleitung .chapter-caption,body.body-fachkraft-gesundheitsfoerderung-kita .chapter-caption,body.body-fachkraft-fuer-bueromanagement .chapter-caption,body.body-fachkraft-fuer-eltern-und-oeffentlichkeitsarbeit .chapter-caption,body.body-microsoft-office-produktivitat-im-kita-buro .chapter-caption{justify-content:end !important}.chapter-empty{cursor:default}.chapter-empty .chapter-head{color:#2071B5 !important;text-transform:uppercase !important;font-weight:bold !important;padding:0px !important;border-bottom:1px solid silver}.chapter-empty .chapter-head .modules-count-caption{display:none !important}.chapter-empty .open-close-caret{display:none !important}.popover{max-width:600px !important;width:400px !important;box-shadow:0 10px 30px 11px rgba(0, 0, 0, 0.25) !important}.article-index-bottom-section .col{width:100%;flex:1;margin-left:auto;margin-right:auto}.article-index-bottom-section-col-left,.article-index-bottom-section-col-right{display:none}main.impulse-rund-um-kita-und-tagespflege,main.action-index,main.testseite{}main.impulse-rund-um-kita-und-tagespflege .ap-frontend-paginator-top,main.action-index .ap-frontend-paginator-top,main.testseite .ap-frontend-paginator-top{display:none}main.impulse-rund-um-kita-und-tagespflege div.articles-list div.card,main.action-index div.articles-list div.card,main.testseite div.articles-list div.card{border:1px solid transparent;border-radius:2px;box-shadow:0 2px 1px -1px #0003, 0 1px 1px #00000024, 0 1px 3px #0000001f}main.impulse-rund-um-kita-und-tagespflege div.articles-list div.card:hover,main.action-index div.articles-list div.card:hover,main.testseite div.articles-list div.card:hover{border:1px solid #3988E3}main.impulse-rund-um-kita-und-tagespflege div.articles-list div.card div.card-body,main.action-index div.articles-list div.card div.card-body,main.testseite div.articles-list div.card div.card-body{padding-top:15px !important}main.impulse-rund-um-kita-und-tagespflege div.articles-list div.card div.card-body h2,main.action-index div.articles-list div.card div.card-body h2,main.testseite div.articles-list div.card div.card-body h2{margin-top:4px;margin-bottom:10px !important;font-size:1.2rem !important;line-height:1.5rem !important;color:#000 !important}main.impulse-rund-um-kita-und-tagespflege div.articles-list div.card div.card-body .content-excerpt,main.action-index div.articles-list div.card div.card-body .content-excerpt,main.testseite div.articles-list div.card div.card-body .content-excerpt{font-size:0.875rem;font-size:14px;height:82px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:-webkit-box !important;-webkit-line-clamp:4;-webkit-box-orient:vertical;white-space:normal}main.impulse-rund-um-kita-und-tagespflege div.articles-list div.card div.card-body .author-container,main.action-index div.articles-list div.card div.card-body .author-container,main.testseite div.articles-list div.card div.card-body .author-container{padding-top:20px}main.impulse-rund-um-kita-und-tagespflege div.articles-list div.card div.card-body .author-info .author-name,main.action-index div.articles-list div.card div.card-body .author-info .author-name,main.testseite div.articles-list div.card div.card-body .author-info .author-name{font-weight:800 !important;color:#222}main.impulse-rund-um-kita-und-tagespflege div.articles-list div.card div.card-body .author-info .author-bio,main.action-index div.articles-list div.card div.card-body .author-info .author-bio,main.testseite div.articles-list div.card div.card-body .author-info .author-bio{font-size:0.875rem;font-size:12px;line-height:16px;color:#888 !important}main.impulse-rund-um-kita-und-tagespflege div.articles-list div.card div.subline-bar,main.action-index div.articles-list div.card div.subline-bar,main.testseite div.articles-list div.card div.subline-bar{background:#2071B5 !important;color:#fff !important;padding:7px 7px 7px 20px !important}main.impulse-rund-um-kita-und-tagespflege div.articles-list div.card div.subline-caption,main.action-index div.articles-list div.card div.subline-caption,main.testseite div.articles-list div.card div.subline-caption{font-size:0.875rem;font-size:14px;color:#fff;background:#2071B5 !important}main.impulse-rund-um-kita-und-tagespflege div.articles-list div.card div.featured-caption,main.action-index div.articles-list div.card div.featured-caption,main.testseite div.articles-list div.card div.featured-caption{text-transform:uppercase !important;font-size:0.75rem;font-size:12px;background:#F6D84D;color:#000;margin-right:10px;padding:2px 0px;left:7px;box-shadow:7px 0px 0px #F6D84D, -7px 0px 0px #F6D84D}main.kurse,main.action-courses-index,main.courses-show,main.course,main.fortbildung-fuer-kitaleitungen,main.fortbildung-kindertagespflege,main.fortbildung-zur-fachkraft,main.action-index,main.post,main.pages,main.testseite{}main.kurse .articles-list div.card div.subline-bar,main.action-courses-index .articles-list div.card div.subline-bar,main.courses-show .articles-list div.card div.subline-bar,main.course .articles-list div.card div.subline-bar,main.fortbildung-fuer-kitaleitungen .articles-list div.card div.subline-bar,main.fortbildung-kindertagespflege .articles-list div.card div.subline-bar,main.fortbildung-zur-fachkraft .articles-list div.card div.subline-bar,main.action-index .articles-list div.card div.subline-bar,main.post .articles-list div.card div.subline-bar,main.pages .articles-list div.card div.subline-bar,main.testseite .articles-list div.card div.subline-bar{padding:7px 7px 7px 20px !important;background-color:#2071B5}main.kurse .articles-list div.card div.subline-caption,main.action-courses-index .articles-list div.card div.subline-caption,main.courses-show .articles-list div.card div.subline-caption,main.course .articles-list div.card div.subline-caption,main.fortbildung-fuer-kitaleitungen .articles-list div.card div.subline-caption,main.fortbildung-kindertagespflege .articles-list div.card div.subline-caption,main.fortbildung-zur-fachkraft .articles-list div.card div.subline-caption,main.action-index .articles-list div.card div.subline-caption,main.post .articles-list div.card div.subline-caption,main.pages .articles-list div.card div.subline-caption,main.testseite .articles-list div.card div.subline-caption{font-size:0.75rem;font-size:12px;color:#fff;text-transform:uppercase;padding:2px 0px}main.kurse .articles-list div.card div.featured-caption,main.action-courses-index .articles-list div.card div.featured-caption,main.courses-show .articles-list div.card div.featured-caption,main.course .articles-list div.card div.featured-caption,main.fortbildung-fuer-kitaleitungen .articles-list div.card div.featured-caption,main.fortbildung-kindertagespflege .articles-list div.card div.featured-caption,main.fortbildung-zur-fachkraft .articles-list div.card div.featured-caption,main.action-index .articles-list div.card div.featured-caption,main.post .articles-list div.card div.featured-caption,main.pages .articles-list div.card div.featured-caption,main.testseite .articles-list div.card div.featured-caption{text-transform:uppercase !important;font-size:0.75rem;font-size:12px;background:#F6D84D;color:#000;margin-right:10px;padding:2px 0px;left:7px;box-shadow:7px 0px 0px #F6D84D, -7px 0px 0px #F6D84D}main.kurse .articles-list div.card div.offer-caption,main.action-courses-index .articles-list div.card div.offer-caption,main.courses-show .articles-list div.card div.offer-caption,main.course .articles-list div.card div.offer-caption,main.fortbildung-fuer-kitaleitungen .articles-list div.card div.offer-caption,main.fortbildung-kindertagespflege .articles-list div.card div.offer-caption,main.fortbildung-zur-fachkraft .articles-list div.card div.offer-caption,main.action-index .articles-list div.card div.offer-caption,main.post .articles-list div.card div.offer-caption,main.pages .articles-list div.card div.offer-caption,main.testseite .articles-list div.card div.offer-caption{order:2;text-transform:uppercase !important;font-size:0.75rem;font-size:12px;background:#00B67A;color:#000;margin-right:10px;padding:2px 0px;left:7px;box-shadow:7px 0px 0px #00B67A, -7px 0px 0px #00B67A}main.kurse .card-footer .strike-price,main.action-courses-index .card-footer .strike-price,main.courses-show .card-footer .strike-price,main.course .card-footer .strike-price,main.fortbildung-fuer-kitaleitungen .card-footer .strike-price,main.fortbildung-kindertagespflege .card-footer .strike-price,main.fortbildung-zur-fachkraft .card-footer .strike-price,main.action-index .card-footer .strike-price,main.post .card-footer .strike-price,main.pages .card-footer .strike-price,main.testseite .card-footer .strike-price{margin-right:5px}main.kurse .ap-frontend-paginator-top,main.action-courses-index .ap-frontend-paginator-top,main.courses-show .ap-frontend-paginator-top,main.course .ap-frontend-paginator-top,main.fortbildung-fuer-kitaleitungen .ap-frontend-paginator-top,main.fortbildung-kindertagespflege .ap-frontend-paginator-top,main.fortbildung-zur-fachkraft .ap-frontend-paginator-top,main.action-index .ap-frontend-paginator-top,main.post .ap-frontend-paginator-top,main.pages .ap-frontend-paginator-top,main.testseite .ap-frontend-paginator-top{display:none}main.kurse .articles-list div.card div.offer-caption,main.action-courses-index .articles-list div.card div.offer-caption,main.courses-show .articles-list div.card div.offer-caption,main.course .articles-list div.card div.offer-caption,main.fortbildung-fuer-kitaleitungen .articles-list div.card div.offer-caption,main.fortbildung-kindertagespflege .articles-list div.card div.offer-caption,main.fortbildung-zur-fachkraft .articles-list div.card div.offer-caption,main.action-index .articles-list div.card div.offer-caption,main.post .articles-list div.card div.offer-caption,main.pages .articles-list div.card div.offer-caption,main.testseite .articles-list div.card div.offer-caption{color:#fff;background:#18B974 !important}main.kurse .articles-list div.card div.card-footer,main.action-courses-index .articles-list div.card div.card-footer,main.courses-show .articles-list div.card div.card-footer,main.course .articles-list div.card div.card-footer,main.fortbildung-fuer-kitaleitungen .articles-list div.card div.card-footer,main.fortbildung-kindertagespflege .articles-list div.card div.card-footer,main.fortbildung-zur-fachkraft .articles-list div.card div.card-footer,main.action-index .articles-list div.card div.card-footer,main.post .articles-list div.card div.card-footer,main.pages .articles-list div.card div.card-footer,main.testseite .articles-list div.card div.card-footer{background:transparent !important}main.kurse .articles-list div.card,main.action-courses-index .articles-list div.card,main.courses-show .articles-list div.card,main.course .articles-list div.card,main.fortbildung-fuer-kitaleitungen .articles-list div.card,main.fortbildung-kindertagespflege .articles-list div.card,main.fortbildung-zur-fachkraft .articles-list div.card,main.action-index .articles-list div.card,main.post .articles-list div.card,main.pages .articles-list div.card,main.testseite .articles-list div.card{border:1px solid transparent;border-radius:2px;box-shadow:0 2px 1px -1px #0003, 0 1px 1px #00000024, 0 1px 3px #0000001f}main.kurse .articles-list div.card:hover,main.action-courses-index .articles-list div.card:hover,main.courses-show .articles-list div.card:hover,main.course .articles-list div.card:hover,main.fortbildung-fuer-kitaleitungen .articles-list div.card:hover,main.fortbildung-kindertagespflege .articles-list div.card:hover,main.fortbildung-zur-fachkraft .articles-list div.card:hover,main.action-index .articles-list div.card:hover,main.post .articles-list div.card:hover,main.pages .articles-list div.card:hover,main.testseite .articles-list div.card:hover{border:1px solid #3988E3}main.kurse .articles-list div.card div.card-body,main.action-courses-index .articles-list div.card div.card-body,main.courses-show .articles-list div.card div.card-body,main.course .articles-list div.card div.card-body,main.fortbildung-fuer-kitaleitungen .articles-list div.card div.card-body,main.fortbildung-kindertagespflege .articles-list div.card div.card-body,main.fortbildung-zur-fachkraft .articles-list div.card div.card-body,main.action-index .articles-list div.card div.card-body,main.post .articles-list div.card div.card-body,main.pages .articles-list div.card div.card-body,main.testseite .articles-list div.card div.card-body{padding-top:0px !important}main.kurse .articles-list div.card div.card-body h2,main.action-courses-index .articles-list div.card div.card-body h2,main.courses-show .articles-list div.card div.card-body h2,main.course .articles-list div.card div.card-body h2,main.fortbildung-fuer-kitaleitungen .articles-list div.card div.card-body h2,main.fortbildung-kindertagespflege .articles-list div.card div.card-body h2,main.fortbildung-zur-fachkraft .articles-list div.card div.card-body h2,main.action-index .articles-list div.card div.card-body h2,main.post .articles-list div.card div.card-body h2,main.pages .articles-list div.card div.card-body h2,main.testseite .articles-list div.card div.card-body h2{margin-top:15px;font-size:1.2rem !important;line-height:1.5rem !important}main.kurse .articles-list div.card div.card-body .content-excerpt,main.action-courses-index .articles-list div.card div.card-body .content-excerpt,main.courses-show .articles-list div.card div.card-body .content-excerpt,main.course .articles-list div.card div.card-body .content-excerpt,main.fortbildung-fuer-kitaleitungen .articles-list div.card div.card-body .content-excerpt,main.fortbildung-kindertagespflege .articles-list div.card div.card-body .content-excerpt,main.fortbildung-zur-fachkraft .articles-list div.card div.card-body .content-excerpt,main.action-index .articles-list div.card div.card-body .content-excerpt,main.post .articles-list div.card div.card-body .content-excerpt,main.pages .articles-list div.card div.card-body .content-excerpt,main.testseite .articles-list div.card div.card-body .content-excerpt{font-size:14px}main.kurse .articles-list div.card div.card-body .author-container,main.action-courses-index .articles-list div.card div.card-body .author-container,main.courses-show .articles-list div.card div.card-body .author-container,main.course .articles-list div.card div.card-body .author-container,main.fortbildung-fuer-kitaleitungen .articles-list div.card div.card-body .author-container,main.fortbildung-kindertagespflege .articles-list div.card div.card-body .author-container,main.fortbildung-zur-fachkraft .articles-list div.card div.card-body .author-container,main.action-index .articles-list div.card div.card-body .author-container,main.post .articles-list div.card div.card-body .author-container,main.pages .articles-list div.card div.card-body .author-container,main.testseite .articles-list div.card div.card-body .author-container{display:none !important;padding-top:20px}main.kurse .articles-list div.card div.card-body .author-info .author-name,main.action-courses-index .articles-list div.card div.card-body .author-info .author-name,main.courses-show .articles-list div.card div.card-body .author-info .author-name,main.course .articles-list div.card div.card-body .author-info .author-name,main.fortbildung-fuer-kitaleitungen .articles-list div.card div.card-body .author-info .author-name,main.fortbildung-kindertagespflege .articles-list div.card div.card-body .author-info .author-name,main.fortbildung-zur-fachkraft .articles-list div.card div.card-body .author-info .author-name,main.action-index .articles-list div.card div.card-body .author-info .author-name,main.post .articles-list div.card div.card-body .author-info .author-name,main.pages .articles-list div.card div.card-body .author-info .author-name,main.testseite .articles-list div.card div.card-body .author-info .author-name{font-weight:800 !important;color:#222}main.kurse .articles-list div.card div.card-body .author-info .author-bio,main.action-courses-index .articles-list div.card div.card-body .author-info .author-bio,main.courses-show .articles-list div.card div.card-body .author-info .author-bio,main.course .articles-list div.card div.card-body .author-info .author-bio,main.fortbildung-fuer-kitaleitungen .articles-list div.card div.card-body .author-info .author-bio,main.fortbildung-kindertagespflege .articles-list div.card div.card-body .author-info .author-bio,main.fortbildung-zur-fachkraft .articles-list div.card div.card-body .author-info .author-bio,main.action-index .articles-list div.card div.card-body .author-info .author-bio,main.post .articles-list div.card div.card-body .author-info .author-bio,main.pages .articles-list div.card div.card-body .author-info .author-bio,main.testseite .articles-list div.card div.card-body .author-info .author-bio{font-size:12px;color:#888 !important}main.kurse .card-footer .payment-info,main.action-courses-index .card-footer .payment-info,main.courses-show .card-footer .payment-info,main.course .card-footer .payment-info,main.fortbildung-fuer-kitaleitungen .card-footer .payment-info,main.fortbildung-kindertagespflege .card-footer .payment-info,main.fortbildung-zur-fachkraft .card-footer .payment-info,main.action-index .card-footer .payment-info,main.post .card-footer .payment-info,main.pages .card-footer .payment-info,main.testseite .card-footer .payment-info{font-size:12px;color:#888;position:absolute;bottom:11px}main.kurse .card-footer .strike-price,main.action-courses-index .card-footer .strike-price,main.courses-show .card-footer .strike-price,main.course .card-footer .strike-price,main.fortbildung-fuer-kitaleitungen .card-footer .strike-price,main.fortbildung-kindertagespflege .card-footer .strike-price,main.fortbildung-zur-fachkraft .card-footer .strike-price,main.action-index .card-footer .strike-price,main.post .card-footer .strike-price,main.pages .card-footer .strike-price,main.testseite .card-footer .strike-price{color:#E0797F !important;text-decoration:line-through}main.kurse .card-footer .norm-price,main.action-courses-index .card-footer .norm-price,main.courses-show .card-footer .norm-price,main.course .card-footer .norm-price,main.fortbildung-fuer-kitaleitungen .card-footer .norm-price,main.fortbildung-kindertagespflege .card-footer .norm-price,main.fortbildung-zur-fachkraft .card-footer .norm-price,main.action-index .card-footer .norm-price,main.post .card-footer .norm-price,main.pages .card-footer .norm-price,main.testseite .card-footer .norm-price{color:#000 !important;font-size:18px;font-size:1.125rem;font-weight:600}.btn-add-to-cart{background-color:#2071B5;margin-top:0px !important}.article-bubble-or{display:none}.article-bubble{width:300px}.popover-body{padding:30px 30px 30px 30px}.popover-header{display:none !important;margin-top:0 !important;background:transparent !important}.article-bubble .hover-bubble-author{margin-bottom:0px}.article-bubble .hover-bubble-author .bubble-top-author-avatar{margin-left:-5px;margin-top:-5px;width:4em;height:4em}.article-bubble .hover-bubble-author .bubble-top-author-name{padding-left:10px;font-size:14px;line-height:0.75rem}.article-bubble .hover-bubble-author .bubble-top-author-name .author-name{color:#2E384D;font-weight:900 !important}.article-bubble .hover-bubble-author .bubble-top-author-name .author-company{margin-top:5px;font-size:12px;line-height:0.75rem}.article-bubble .articles-single-tooltip .author-bio{display:none}.article-bubble .articles-subline-container .articles-subline{margin-top:30px;margin-bottom:5px;color:#2071B5;text-transform:uppercase !important;font-size:12px}.article-bubble .articles-subline-container .articles-title{margin-top:10px;margin-bottom:20px;color:#000;font-size:20px;line-height:1.3 !important;font-weight:bold !important}.article-bubble .articles-subline-container .articles-content-excerpt{margin-top:10px;margin-bottom:30px;color:#6B7280;font-weight:600;font-size:14px;line-height:1.3 !important}.article-bubble .articles-meta .articles-meta-detach{font-size:11px}.article-bubble .articles-meta .articles-meta-modules-count{font-size:11px}.article-bubble .articles-bubble-btn-container{display:flex;flex-direction:column}.article-bubble .articles-bubble-btn-container :nth-child(1){order:3}.article-bubble .articles-bubble-btn-container :nth-child(3){order:1}.col-moreinfo{padding-right:0px !important;padding-left:0 !important}.col-buy-or-start{padding-left:0 !important}.btn-bubble-moreinfo{background-color:#00B67A !important;border:1px solid #00B67A !important;color:#fff !important;border-radius:3px;padding:6px 16px 6px 16px !important;transition:0.2s all ease}a.btn-bubble-moreinfo:visited,a.btn-bubble-moreinfo:link{background-color:#00B67A !important;border:1px solid #00B67A !important;color:#fff !important;border-radius:3px;padding:6px 16px 6px 16px !important;transition:0.2s all ease}a.btn-bubble-moreinfo:hover{background-color:#FFF !important;color:#000 !important}.article-bubble .articles-bubble-btn-container a.btn,.article-bubble .btn{width:100%;margin-top:10px;margin-bottom:10px;border-radius:3px}.article-bubble .articles-bubble-btn-container a.btn:link,.article-bubble .articles-bubble-btn-container a.btn:visited,.article-bubble button{background-color:#2071B5;color:#fff;border:1px solid #496599}.article-bubble .articles-bubble-btn-container a.btn:hover,.article-bubble button.btn:hover{background-color:#fff;color:#496599}.articles-bubble-price .article-bubble-price-text{color:#888;float:left;font-size:12px !important;position:relative;bottom:-7px}.articles-bubble-price .article-bubble-price-price{font-size:18px;font-size:1.125rem;color:#000;font-weight:900 !important}.articles-bubble-price .article-bubble-strike-price{font-size:12px;text-decoration:line-through;color:#E0797F;padding-right:5px} /* Custom CSS End */