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: Juni 2026 ============================================================= 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 ============================================================= */ /* ── 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; !important; } /* Ü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; !important; } .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; !important; } .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 { background-color: #5556791; } .footer-stage-left { background-color: #293043; } .footer-stage-right { background-color: #5556791; } .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.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.e-learning-produktion .builder--section:first-of-type { background-color: #1A2748 !important; padding-bottom: 0 !important; padding-top: 0 !important; } /* Teamfortbildungs-Seite */ 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%); !important; } 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 { overflow: vertical; } 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; backgound: #000 !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) { 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: 14px !important; line-height: 1.65 !important; color: #6B7280 !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: 14px !important; line-height: 1.65 !important; color: #6B7280 !important; background: #f0f6fc !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; } .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 */