/* Theme Name: inlingua Stendal Description: Child-Theme fuer my.inlingua-stendal.de. Alles Stendal-Spezifische liegt hier; das Eltern-Theme "inlingua" (inlinguainternational/inlingua-theme) bleibt unveraendert und aktualisiert sich ueber git-updater. Template: inlingua-theme Version: 1.0.10 Author: inlingua Stendal Text Domain: inlingua-theme-stendal */ /* Kein Suchfeld: die Seite hat nur eine Handvoll Landingpages, eine Suche fuehrt ins Leere. */ .header__search-form, button[aria-controls="header-search"], .footer__search-form { display: none !important; } /* Erfolgsgeschichten/Team: Das Rundbild sitzt 80 px ueber der Karte (top: -80px). Das Theme gibt dem Slider dafuer padding-top: 80px, aber das Swiper-Stylesheet setzt .swiper { padding: 0 } und ueberschreibt das – die Koepfe waren oben abgeschnitten (gemessen 16.09.2026). */ .success-stories__slider.swiper { padding-top: 80px !important; } @media (max-width: 550px) { .success-stories__slider.swiper { padding-top: 50px !important; } } /* WPForms im Theme-Look: Formular mittig, Senden-Knopf wie .btn-primary des Themes (Farben aus den Theme-Optionen ueber die CSS-Variablen, Rueckfall = Theme-Standard). */ .one-column div.wpforms-container, .one-column div.wpforms-container-full { max-width: 640px; margin: 0 auto; } .wpforms-form button[type="submit"].wpforms-submit { background-color: var(--button-primary-background-color, #f0b334) !important; color: var(--button-primary-text-color, #000000) !important; border: none !important; border-radius: 0 !important; font-weight: bold !important; text-transform: uppercase !important; letter-spacing: 0.05em; padding: 16px 40px !important; transition: background 0.3s ease, color 0.3s ease; } .wpforms-form button[type="submit"].wpforms-submit:hover, .wpforms-form button[type="submit"].wpforms-submit:focus { background-color: var(--button-primary-hover-background-color, #000000) !important; color: var(--button-primary-hover-text-color, #ffffff) !important; } /* Formular „Link zum KI-Check anfordern“ (Seite ki-kompetenzcheck), sendet an ki.inlingua-stendal.de */ .ki-anfordern { max-width: 640px; margin: 0 auto; text-align: left; } .ki-anfordern label { display: block; font-weight: bold; margin-bottom: 8px; } .ki-anfordern__zeile { display: flex; gap: 12px; flex-wrap: wrap; } .ki-anfordern__zeile input[type="email"] { flex: 1 1 260px; min-height: 52px; padding: 0 16px; font-size: 16px; border: 1px solid #c8c8c8; background: #fff; border-radius: 0; } .ki-anfordern__zeile .btn { flex: 0 0 auto; padding: 16px 28px; } .ki-anfordern__hinweis { font-size: 14px; color: #666; margin-top: 12px; } .ki-anfordern__falle { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .ki-anfordern__meldung { padding: 14px 18px; margin: 0 0 18px; font-weight: bold; } .ki-anfordern__meldung--gut { background: #e0f7f5; color: #0b6d72; } .ki-anfordern__meldung--fehler { background: #fdecea; color: #b3261e; } /* Block „Seminartermine“: je Termin eine Kachel mit Kalenderblatt, Fakten, Preis und Knopf. */ .seminartermine { padding: 70px 0; } .seminartermine .container { max-width: 900px; margin: 0 auto; padding: 0 20px; } .seminartermine__titel { margin: 0 0 12px; } .seminartermine__text { margin: 0 0 30px; color: #555; } .seminartermine__leer { padding: 28px; background: #f6f6f6; border-radius: 4px; } .seminartermine__leer p { margin: 0 0 16px; color: #555; } .seminartermine__liste { display: grid; gap: 16px; } .stermin { display: grid; grid-template-columns: 88px 1fr auto; gap: 24px; align-items: center; padding: 22px 26px; background: #fff; border: 1px solid #e3e3e3; transition: box-shadow .25s ease, transform .25s ease; } .stermin:hover { box-shadow: 0 8px 28px rgba(0, 0, 0, .09); transform: translateY(-2px); } .stermin--voll { background: #fafafa; border-color: #ececec; } .stermin--voll:hover { box-shadow: none; transform: none; } .stermin__datum { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px 6px; background: #37C0AA; color: #fff; line-height: 1.1; } .stermin--voll .stermin__datum { background: #cfcfcf; } .stermin__tag { font-family: 'Roboto Slab', Georgia, serif; font-size: 30px; font-weight: 700; } .stermin__monat { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .stermin__jahr { font-size: 12px; opacity: .85; margin-top: 2px; } .stermin__mitte { min-width: 0; } .stermin__wann { margin: 0 0 4px; font-size: 17px; font-weight: 700; } .stermin__weitere { display: block; font-size: 14px; font-weight: 400; color: #666; } .stermin__fakten { margin: 0 0 10px; font-size: 14.5px; color: #555; } .stermin__plaetze { margin: 0; } .stermin__pille { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: .01em; } .stermin__pille--frei { background: rgba(55, 192, 170, .16); color: #0F5D63; } .stermin__pille--knapp { background: rgba(240, 179, 52, .22); color: #8a5a00; } .stermin__pille--voll { background: #ececec; color: #666; } .stermin__rechts { text-align: right; display: grid; gap: 10px; justify-items: end; } .stermin__preis { margin: 0; line-height: 1.25; } .stermin__betrag { display: block; font-family: 'Roboto Slab', Georgia, serif; font-size: 22px; font-weight: 700; } .stermin__betrag .woocommerce-Price-amount { font-size: inherit; } .stermin__proTn { display: block; font-size: 12.5px; color: #666; } /* Beide Knöpfe exakt gleich groß — sonst richtet sich die Breite nach der Textlänge (.btn des Themes ist auf width:100% ausgelegt). „Warteliste“ ist der stille von beiden. */ .stermin .stermin__knopf { width: 190px; height: 46px; flex: none; white-space: nowrap; font-size: 14px; letter-spacing: .03em; } .stermin .stermin__knopf--buchen { background-color: var(--button-primary-background-color, #f0b334); color: var(--button-primary-text-color, #000); } .stermin .stermin__knopf--buchen:hover, .stermin .stermin__knopf--buchen:focus { background-color: #1f2a28; color: #fff; } .stermin .stermin__knopf--warte { background-color: #fff; color: #1f2a28; box-shadow: inset 0 0 0 1px #c9c9c9; } .stermin .stermin__knopf--warte:hover, .stermin .stermin__knopf--warte:focus { background-color: #1f2a28; color: #fff; box-shadow: none; } @media (max-width: 720px) { .stermin { grid-template-columns: 64px 1fr; gap: 16px; padding: 18px; } .stermin__datum { padding: 8px 4px; } .stermin__tag { font-size: 24px; } .stermin__rechts { grid-column: 1 / -1; justify-items: stretch; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid #ededed; padding-top: 14px; } .stermin .stermin__knopf { width: 150px; } } /* ── Shop-Seiten im Theme-Look ──────────────────────────────────────────────────────── Warenkorb, Kasse und Konto laufen als klassische Shortcodes (die Block-Versionen brauchen das WordPress-JS-Gerüst, das dieses Theme verzögert lädt — sie blieben im Ladezustand hängen, gemessen 17.09.2026). Der Shortcode bringt schlichtes HTML ohne Container; Breite, Knöpfe, Tabellen und Felder kommen deshalb von hier. */ .woocommerce-cart main > .woocommerce, .woocommerce-checkout main > .woocommerce, .woocommerce-account main > .woocommerce, .woocommerce-cart main > .entry-content, .woocommerce-checkout main > .entry-content { max-width: 1100px; margin: 0 auto; padding: 0 20px 90px; } .woocommerce-cart .headline, .woocommerce-checkout .headline, .woocommerce-account .headline { padding-bottom: 0; } /* Tabellen: ruhig, ohne Rahmenwerk */ .woocommerce table.shop_table { border: 1px solid #e3e3e3; border-radius: 0; border-collapse: collapse; width: 100%; } .woocommerce table.shop_table th { background: #f6f6f6; font-weight: 700; padding: 14px 16px; } .woocommerce table.shop_table td { padding: 16px; border-top: 1px solid #ededed; } .woocommerce table.shop_table img { max-width: 56px; height: auto; } .woocommerce .cart_totals h2, .woocommerce-checkout h3, .woocommerce-billing-fields h3 { font-family: 'Roboto Slab', Georgia, serif; font-size: 24px; margin: 0 0 14px; } /* Knöpfe: die Farben des Themes statt WooCommerce-Lila */ .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce #respond input#submit, .woocommerce .checkout-button { background-color: var(--button-primary-background-color, #f0b334) !important; color: var(--button-primary-text-color, #000) !important; border: none !important; border-radius: 0 !important; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 14px 28px !important; line-height: 1.2; } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce .checkout-button:hover, .woocommerce #respond input#submit:hover { background-color: #1f2a28 !important; color: #fff !important; } .woocommerce .checkout-button { display: block; text-align: center; } .woocommerce button.button:disabled, .woocommerce button.button[disabled] { opacity: .45; } /* Formularfelder */ .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .woocommerce .select2-container .select2-selection--single { border: 1px solid #c8c8c8; border-radius: 0; padding: 12px 14px; min-height: 48px; font-size: 16px; } .woocommerce form .form-row label { font-weight: 700; margin-bottom: 6px; } /* Kasse: eine Spalte, ruhig gestapelt. Ein zweispaltiges Raster brachte die float-basierten Standardspalten durcheinander (Rechnungsdaten rechts, Hinweise links, gemessen 17.09.2026). Bei acht Feldern ist eine Spalte ohnehin die klarere Form. */ .woocommerce-checkout form.checkout { max-width: 720px; } .woocommerce form.checkout .col2-set { display: block; width: 100%; } .woocommerce form.checkout .col-1, .woocommerce form.checkout .col-2 { width: 100%; float: none; margin-bottom: 34px; } .woocommerce-checkout #order_review_heading { margin-top: 10px; } .woocommerce-checkout .woocommerce-privacy-policy-text { font-size: 14px; color: #555; } .woocommerce #payment { background: #f6f6f6; border-radius: 0; padding: 20px; } .woocommerce #payment ul.payment_methods { padding: 0 0 12px; border-bottom: 1px solid #e3e3e3; } .woocommerce #payment div.payment_box { background: #fff; border: 1px solid #e3e3e3; } .woocommerce #payment div.payment_box::before { display: none; } .woocommerce #payment .form-row.place-order { padding-top: 16px; } /* Warenkorb: ein Seminarplatz hat kein Produktbild und keine Menge zum Ändern. */ .woocommerce-cart table.shop_table .product-thumbnail, .woocommerce-cart table.shop_table .product-quantity, .woocommerce-cart table.shop_table th.product-thumbnail, .woocommerce-cart table.shop_table th.product-quantity { display: none; } .woocommerce-cart button[name="update_cart"] { display: none; } .woocommerce-cart .cart_totals { max-width: 520px; margin-left: auto; } .woocommerce-cart .shop_table .actions { padding: 12px 16px; } /* Meldungen */ .woocommerce-message, .woocommerce-info, .woocommerce-error { border-top-color: #37C0AA; background: #f6f6f6; border-radius: 0; } .woocommerce-message::before, .woocommerce-info::before { color: #37C0AA; } @media (max-width: 860px) { .woocommerce form.checkout { grid-template-columns: 1fr; gap: 28px; } .woocommerce-checkout #order_review_heading, .woocommerce-checkout #order_review { grid-column: 1; } .woocommerce table.shop_table td, .woocommerce table.shop_table th { padding: 12px 10px; } } /* Schriften vom eigenen Server (s. functions.php „Schriften vom eigenen Server statt von Google"). Dateien in fonts/, dieselben wie im Plugin ki-kompetenzcheck. */ /* Hero-Kachel der Auswertung: Datum oben rechts in Grau, darunter der Satz, darunter der Name. Farben aus dem inlingua-CI (Grau #666666). */ .hero-block__content .st-hero-datum { display: block; text-align: right; margin: 0 0 18px; font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #666666; } .hero-block__content .st-hero-name { margin: 18px 0 0; font-family: 'Roboto Slab', Georgia, serif; font-size: 30px; line-height: 125%; font-weight: 400; color: #000000; } /* Luft zwischen den Teilen, damit die Kachel gegliedert ist und nicht wie ein Block Text wirkt (Mechthild, 19.09.2026). */ .hero-block__content .hero-block__title { margin-bottom: 14px; } .hero-block__content .hero-block__desc { margin: 0; } /* ── Block „Drei Kacheln" ────────────────────────────────────────────── EINE Karte mit drei Feldern nebeneinander, getrennt durch dünne Linien — Aufbau aus Mechthilds Entwurf vom 19.09.2026, weil drei einzelne Quadrate über die volle Breite leer wirken und eine Auswertung kompakt sein muss. Von inlingua kommen: Schatten und Innenabstand der Hero-Kachel, die Schriften, das Türkis. */ .st-kacheln { padding: 60px 0; background: #F7F8FA; } .st-kacheln .container { max-width: 1120px; margin: 0 auto; padding: 0 20px; } /* Kopf wie der .title-wrapper des Themes: mittig, Ueberschrift 50 px (unter 1440 px 40, mobil 24), Satz darunter 25 px in leichter Schrift. */ .st-kacheln__kopf { text-align: center; display: flex; flex-direction: column; justify-content: center; margin: 0 auto 30px; gap: 10px; width: 100%; } .st-kacheln__vor { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #37C0AA; } .st-kacheln__titel { margin: 0; font-size: 50px; font-weight: 400; line-height: 1.2; } .st-kacheln__satz { margin: 0; font-size: 25px; font-weight: 300; line-height: 1.2; color: #5F6B76; } @media (max-width: 1440px) { .st-kacheln__titel { font-size: 40px; } .st-kacheln__satz { font-size: 20px; } } @media (max-width: 768px) { .st-kacheln__kopf { gap: 12px; } .st-kacheln__titel { font-size: 24px; } .st-kacheln__satz { font-size: 16px; } } /* Die Karte: weiß, Schatten wie die Hero-Kachel, innen drei gleiche Felder. */ .st-kacheln__reihe { display: grid; grid-template-columns: repeat(3, 1fr); background: #fff; box-shadow: 0 0 5px 0 #d1d1d1; } .st-kachel { padding: 30px; border-left: 1px solid #E4E9EE; display: flex; flex-direction: column; aspect-ratio: 1 / 1; } .st-kachel:first-child { border-left: 0; } .st-kachel__ikon { width: 110px; height: auto; display: block; margin: 0 0 18px; } .st-kachel__titel { margin: 0; font-size: 20px; line-height: 140%; } .st-kachel__strich { display: block; width: 30px; height: 2px; background: #37C0AA; margin: 12px 0 14px; } .st-kachel__liste { margin: 0; padding: 0; list-style: none; } .st-kachel__liste li { position: relative; padding-left: 15px; margin-bottom: 7px; font-size: 16px; line-height: 140%; } .st-kachel__liste li::before { content: ""; position: absolute; left: 0; top: .58em; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .55; } @media (max-width: 900px) { .st-kacheln__reihe { grid-template-columns: 1fr; } .st-kachel { border-left: 0; border-top: 1px solid #E4E9EE; aspect-ratio: auto; } .st-kachel:first-child { border-top: 0; } } /* ── Block „Aufklapper" ─────────────────────────────────────────────── Zeilen, die sich oeffnen lassen. Schlicht gehalten, damit er in jeden Abschnitt passt; auf farbigen Flaechen mit der Zusatzklasse --hell. */ .st-aufklapper__titel { margin: 0 0 12px; font-size: 20px; line-height: 140%; } .st-aufklapper__zeile { border-bottom: 1px solid #E4E9EE; } .st-aufklapper__zeile:first-of-type { border-top: 1px solid #E4E9EE; } .st-aufklapper__zeile summary { display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 14px 0; list-style: none; } .st-aufklapper__zeile summary::-webkit-details-marker { display: none; } .st-aufklapper__zeile summary:focus-visible { outline: 3px solid #F0B334; outline-offset: 3px; } .st-aufklapper__nr { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; border: 1px solid #C6CFD6; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; } .st-aufklapper__kopf { flex: 1 1 auto; font-weight: 700; font-size: 16px; } .st-aufklapper__neben { font-size: 14px; color: #666666; white-space: nowrap; } .st-aufklapper__zeichen { flex: 0 0 auto; width: 15px; height: 15px; position: relative; } .st-aufklapper__zeichen::before, .st-aufklapper__zeichen::after { content: ""; position: absolute; background: #37C0AA; border-radius: 2px; transition: transform .18s ease; } .st-aufklapper__zeichen::before { left: 0; top: 6.5px; width: 15px; height: 2px; } .st-aufklapper__zeichen::after { left: 6.5px; top: 0; width: 2px; height: 15px; } .st-aufklapper__zeile[open] .st-aufklapper__zeichen::after { transform: scaleY(0); } .st-aufklapper__inhalt { padding: 0 0 16px; font-size: 16px; line-height: 150%; } .st-aufklapper__inhalt ul { margin: 0; padding-left: 20px; } .st-aufklapper__inhalt li { margin-bottom: 5px; } /* Auf farbiger Flaeche */ .st-aufklapper--hell { color: #fff; } .st-aufklapper--hell .st-aufklapper__zeile, .st-aufklapper--hell .st-aufklapper__zeile:first-of-type { border-color: rgba(255,255,255,.22); } .st-aufklapper--hell .st-aufklapper__nr { border-color: rgba(255,255,255,.34); } .st-aufklapper--hell .st-aufklapper__neben { color: rgba(255,255,255,.7); } @media (prefers-reduced-motion: reduce) { .st-aufklapper__zeichen::before, .st-aufklapper__zeichen::after { transition: none; } } /* ── Block „Kursempfehlung" ─────────────────────────────────────────── Zwei Anordnungen: zweispaltig (links entscheiden, rechts informieren) und Karte (alles untereinander). Grauer Grund wie die uebrigen Abschnitte. */ .st-kurs { padding: 60px 0; background: #ededed; } .st-kurs .container { max-width: 1120px; margin: 0 auto; padding: 0 20px; } .st-kurs__kopf { text-align: center; display: flex; flex-direction: column; margin: 0 auto 30px; gap: 10px; } .st-kurs__vor { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #37C0AA; } .st-kurs__titel { margin: 0; font-size: 50px; font-weight: 400; line-height: 1.2; } .st-kurs__satz { margin: 0; font-size: 25px; font-weight: 300; line-height: 1.2; color: #666666; } @media (max-width: 1440px) { .st-kurs__titel { font-size: 40px; } .st-kurs__satz { font-size: 20px; } } @media (max-width: 768px) { .st-kurs__titel { font-size: 24px; } .st-kurs__satz { font-size: 16px; } } .st-kurs__karte { background: #fff; box-shadow: 0 0 5px 0 #d1d1d1; } .st-kurs--zweispaltig .st-kurs__karte { display: grid; grid-template-columns: 380px 1fr; } .st-kurs--zweispaltig .st-kurs__links { padding: 34px; border-right: 1px solid #E4E9EE; } .st-kurs--zweispaltig .st-kurs__rechts { padding: 34px; } .st-kurs--karte .st-kurs__links, .st-kurs--karte .st-kurs__rechts { padding: 0 34px; } .st-kurs--karte .st-kurs__links { padding-top: 0; } .st-kurs--karte .st-kurs__rechts { padding-bottom: 34px; } .st-kurs--karte .st-kurs__bild { width: 100%; height: 260px; object-fit: cover; display: block; margin: 0 0 26px; } .st-kurs--karte .st-kurs__links > :first-child:not(.st-kurs__bild) { padding-top: 34px; } .st-kurs--zweispaltig .st-kurs__bild { width: 100%; height: 190px; object-fit: cover; display: block; margin: 0 0 24px; } .st-kurs__name { margin: 0 0 18px; font-size: 25px; line-height: 130%; } .st-kurs__eck { margin: 0 0 24px; } .st-kurs__eck > div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid #E4E9EE; } .st-kurs__eck dt { margin: 0; font-size: 15px; color: #666666; } .st-kurs__eck dd { margin: 0; font-size: 15px; font-weight: 700; text-align: right; } .st-kurs__knopf { display: inline-block; } .st-kurs__knopf-klein { margin: 10px 0 0; font-size: 14px; color: #666666; } @media (max-width: 900px) { .st-kurs--zweispaltig .st-kurs__karte { grid-template-columns: 1fr; } .st-kurs--zweispaltig .st-kurs__links { border-right: 0; border-bottom: 1px solid #E4E9EE; } } @font-face { font-family: 'Lato'; font-style: normal; font-weight: 300; font-display: swap; src: url(fonts/lato-300-latin.woff2) format('woff2'); } /* Kopfzeilen-Links wie inlingua.com (Bjoern, 22.09.2026) */ @font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/lato-400-latin.woff2) format('woff2'); } @font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/lato-700-latin.woff2) format('woff2'); } @font-face { font-family: 'Roboto Slab'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/roboto-slab-400-latin.woff2) format('woff2'); } @font-face { font-family: 'Roboto Slab'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/roboto-slab-700-latin.woff2) format('woff2'); } /* ── Block „KI-Lernreise“ (Mechthilds Entwurf 54, 19.09.2026) ────────────────── Waagerecht ab 961px wie im Entwurf. Darunter KEIN 2-Spalten-Raster: eine Reise, die in Paare zerfällt, ist keine Reise mehr, und die Verbindungslinien zeigen dann ins Leere. Also senkrecht, Kachel links, Text rechts, Linie dazwischen. */ .st-lernband { padding: clamp(40px, 4.2vw, 60px) 0; position: relative; overflow: hidden; background: linear-gradient(112deg, #0A8E99 0%, #0A7287 38%, #125C80 72%, #154C6E 100%); } .st-lernband .container { max-width: 1120px; margin: 0 auto; padding: 0 24px; } .st-lernband__kopf { display: flex; flex-direction: column; gap: 10px; margin-bottom: 26px; } .st-lernband__vor { margin: 0; font-size: 12.5px; letter-spacing: .09em; font-weight: 700; text-transform: uppercase; color: #8FF0E4; } .st-lernband__titel { margin: 0; color: #fff; font-size: clamp(26px, 3.2vw, 40px); font-weight: 400; line-height: 1.2; } /* Alle Stationen gleich breit, auch die letzte, Text linksbuendig; die letzte Spalte endet an der Fluchtlinie des Containers (Bjoern, 21.09.2026: rechts keinen Rasterabstand, der Strich fuellt den Abstand zwischen den Kacheln, rechts gibt es keinen). Vorher: N-1 Spalten plus 78px, letzte Station rechtsbuendig mit negativem Rand - die rechte Kachel wurde abgeschnitten. */ .st-reise { display: grid; grid-template-columns: repeat(var(--st-reise-spalten, 6), minmax(0, 1fr)); gap: 26px; margin-top: 10px; } .st-rstation { position: relative; padding-top: 6px; } .st-rstation::before { content: ""; position: absolute; left: -32px; top: 44px; width: 32px; height: 2px; background: rgba(255, 255, 255, .34); } .st-rstation:first-child::before { display: none; } .st-rfeld { width: 78px; height: 78px; border-radius: 26px; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 26px rgba(4, 38, 54, .28); } .st-rfeld svg { width: 38px; height: 38px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .st-rstation--gruen .st-rfeld { background: #1F9D57; } .st-rstation--blass .st-rfeld { background: rgba(255, 255, 255, .14); box-shadow: none; } .st-rstation--gold .st-rfeld { background: #F0B334; } .st-rstation--gold .st-rfeld svg { stroke: #20303C; } .st-rstation--tuerkis-hell .st-rfeld { background: #2FC4B4; } .st-rstation--tuerkis .st-rfeld { background: #1BB3B6; } .st-rstation--blau-hell .st-rfeld { background: #1590B4; } .st-rstation--blau .st-rfeld { background: #1570A6; } .st-rstation--blau-tief .st-rfeld { background: #175C94; } .st-rstation--aus { opacity: .5; } .st-rstation--jetzt .st-rfeld { box-shadow: 0 0 0 4px rgba(240, 179, 52, .28), 0 10px 26px rgba(4, 38, 54, .3); } .st-rtitel { margin: 18px 0 0; font-family: 'Roboto Slab', Georgia, serif; font-size: 15px; font-weight: 600; line-height: 1.25; color: #fff; overflow-wrap: anywhere; } .st-rzeile { margin: 6px 0 0; font-size: 13.5px; font-weight: 700; color: #fff; line-height: 1.3; } .st-rmass { margin: 3px 0 0; font-size: 13.5px; color: rgba(255, 255, 255, .72); line-height: 1.3; } .st-rstation--jetzt .st-rtitel, .st-rstation--jetzt .st-rzeile { color: #F0B334; } .st-rstation--klickbar { text-decoration: none; display: block; transition: transform .15s ease; } .st-rstation--klickbar:hover, .st-rstation--klickbar:focus-visible { transform: translateY(-3px); } .st-rstation--klickbar:hover .st-rfeld { box-shadow: 0 14px 30px rgba(4, 38, 54, .38); } .st-rstation--klickbar:hover .st-rtitel { text-decoration: underline; } .st-nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .st-programm { margin-top: clamp(30px, 3.2vw, 42px); background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .26); border-radius: 12px; padding: 20px 22px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; } .st-programm p { margin: 0; font-size: 15.5px; color: #fff; max-width: 46ch; } .st-programm__knoepfe { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .st-knopf { display: inline-block; background: #F0B334; color: #20303C; font-weight: 700; font-size: 16px; text-decoration: none; padding: 14px 26px; border-radius: 0; transition: background .18s ease; } .st-knopf:hover, .st-knopf:focus-visible { background: #D89B1C; } .st-weiterlink { display: inline-block; color: #fff; font-weight: 700; font-size: 15px; text-decoration: none; border: 1px solid rgba(255, 255, 255, .7); border-radius: 0; padding: 11px 20px; transition: background .18s ease; } .st-weiterlink:hover, .st-weiterlink:focus-visible { background: rgba(255, 255, 255, .16); } @media (max-width: 960px) { .st-reise { grid-template-columns: 1fr; gap: 16px; margin-top: 4px; } .st-rstation { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 16px; align-items: center; padding-top: 0; text-align: left; } /* Die Linie läuft jetzt senkrecht durch den Zwischenraum, mittig unter der Kachel. */ .st-rstation::before { left: 30px; top: -16px; width: 2px; height: 16px; } .st-rfeld { width: 62px; height: 62px; border-radius: 20px; } .st-rfeld svg { width: 30px; height: 30px; } .st-rtitel { margin-top: 0; font-size: 16px; white-space: normal; } .st-programm { flex-direction: column; align-items: stretch; } .st-programm__knoepfe { flex-direction: column; align-items: stretch; } .st-knopf, .st-weiterlink { text-align: center; } } @media (max-width: 560px) { .st-lernband .container { padding: 0 20px; } .st-rstation { grid-template-columns: 54px minmax(0, 1fr); gap: 14px; } .st-rfeld { width: 54px; height: 54px; border-radius: 17px; } .st-rfeld svg { width: 26px; height: 26px; } .st-rstation::before { left: 26px; } .st-rtitel { font-size: 15px; } } /* ── Block „Abschlussband“ (Entwurf 54, letzter Abschnitt) ───────────────────── Bild, heller Schleier, Karte. Auf schmalen Schirmen wird aus dem Verlauf von links ein gleichmäßiger Schleier — „links hell, rechts frei“ ist bei 360px keine Bildwirkung mehr, sondern eine halb verdeckte Karte. */ .st-schluss { position: relative; isolation: isolate; overflow: hidden; padding: clamp(68px, 7vw, 108px) 0; } .st-schluss .container { max-width: 1120px; margin: 0 auto; padding: 0 24px; } .st-schluss__bild { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: right center; } .st-schluss__schleier { position: absolute; inset: 0; z-index: -1; background: linear-gradient(97deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.42) 44%, rgba(255,255,255,.14) 74%, rgba(255,255,255,0) 100%); } /* Auch die einzelne Karte ist quadratisch (Mechthild, 20.09.2026). Passt der Inhalt nicht hinein, waechst sie - abgeschnittener Text waere schlimmer. */ .st-schluss__karte { background: rgba(255, 255, 255, .94); border: 1px solid rgba(255,255,255,.8); border-radius: 0; padding: clamp(28px, 3vw, 40px); width: 100%; max-width: 460px; aspect-ratio: 1 / 1; display: flex; flex-direction: column; justify-content: center; box-shadow: 0 18px 44px rgba(9, 40, 54, .14); } @media (max-width: 560px) { .st-schluss__karte { aspect-ratio: auto; } } .st-schluss__formel { margin: 0 0 15px; color: #37C0AA; font-size: clamp(12px, 1.15vw, 14px); letter-spacing: .02em; font-weight: 700; padding-bottom: 13px; border-bottom: 1px solid #E4E9EE; display: inline-block; } .st-schluss__titel { margin: 0; color: #1D2A35; font-size: clamp(1.6rem, 2.7vw, 2.2rem); line-height: 1.16; max-width: 19ch; } .st-schluss__zeile { margin: 12px 0 0; font-size: 16px; color: #5F6B76; max-width: 44ch; } /* 5,45:1 statt 4,4:1 (WCAG 1.4.3) */ .st-schluss__knoepfe { display: flex; flex-wrap: wrap; gap: 13px; align-items: stretch; margin-top: 24px; } .st-schluss__knoepfe .st-knopf, .st-zweitknopf { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 212px; padding: 14px 22px; border-radius: 0; font-weight: 700; font-size: 16px; text-decoration: none; } .st-zweitknopf { background: #fff; color: #20303C; border: 1px solid #C6CFD6; } .st-zweitknopf:hover, .st-zweitknopf:focus-visible { background: #F7F8FA; } .st-zweitknopf svg { width: 21px; height: 21px; fill: #25D366; flex: 0 0 auto; } .st-zweitknopf .st-wa-hoerer { fill: #fff; } @media (max-width: 700px) { .st-schluss { padding: 54px 0; } .st-schluss .container { padding: 0 20px; } .st-schluss__bild { background-position: center; } .st-schluss__schleier { background: linear-gradient(180deg, rgba(255,255,255,.58) 0%, rgba(255,255,255,.40) 100%); } .st-schluss__karte { max-width: none; } .st-schluss__titel { max-width: none; } .st-schluss__knoepfe { flex-direction: column; } .st-schluss__knoepfe .st-knopf, .st-zweitknopf { min-width: 0; width: 100%; } } /* ── Karten fuer die Modulseiten ─────────────────────────────────────────────── Die Modulseiten bestehen aus gewoehnlichen WordPress-Bausteinen, damit Mechthild jeden Satz anklicken und aendern kann. Ohne Rahmen liefe der Text ueber die ganze Schirmbreite; deshalb steht jeder Abschnitt auf einer Karte. */ .st-karte { max-width: 1000px; margin: 0 auto 26px; padding: clamp(24px, 3vw, 40px); background: #fff; border: 1px solid #E4E9EE; border-left: 5px solid #37C0AA; box-shadow: 0 6px 20px rgba(41, 54, 57, .05); } .st-karte > h2:first-child, .st-karte > .wp-block-heading:first-child { margin-top: 0; } .st-karte h2 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.18; } .st-karte h3 { font-size: clamp(19px, 2vw, 22px); margin-top: 28px; } .st-karte h4 { font-size: 17px; margin-top: 22px; } .st-karte .has-small-font-size { color: #667277; font-size: 14px; } .st-karte ul { padding-left: 20px; } .st-karte li { margin: 5px 0; } .st-karte table { width: 100%; border-collapse: collapse; font-size: 15px; } .st-karte th, .st-karte td { border: 1px solid #E4E9EE; padding: 9px 10px; text-align: left; } .st-karte th { background: #F1F3F4; } @media (max-width: 640px) { .st-karte { margin-left: 16px; margin-right: 16px; padding: 20px; } } /* ── Block „Lernstufen" (Entwurf ki-lernreise-typo3-schnipsel_2, 19.09.2026) ─── Das Programm als Treppe: farbige Icon-Flaeche, daneben Stufe und Module als Kacheln. Ab 960px steht das Icon ueber dem Text, die Kacheln untereinander. */ .st-stufen { padding: clamp(40px, 4.2vw, 60px) 0; background: #F7F8FA; } .st-stufen .container, .st-stufen-band .container { max-width: 1120px; margin: 0 auto; padding: 0 24px; } .st-stufen__kopf { margin-bottom: 28px; } .st-stufen__vor { margin: 0; font-size: 12.5px; letter-spacing: .09em; color: #37C0AA; font-weight: 700; text-transform: uppercase; } .st-stufen__titel { margin: 8px 0 0; font-family: 'Roboto Slab', Georgia, serif; font-size: clamp(1.45rem, 2.1vw, 1.9rem); line-height: 1.2; font-weight: 700; } .st-stufen__satz { margin: 12px 0 0; font-size: 16px; color: #5F6B76; max-width: 70ch; } .st-stufe { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 26px; padding-bottom: 26px; position: relative; } .st-stufe:last-child { padding-bottom: 0; } .st-stufe::before { content: ""; position: absolute; left: 39px; top: 88px; bottom: 0; width: 2px; background: #E4E9EE; } .st-stufe:last-child::before { display: none; } .st-stufe__feld { width: 78px; height: 78px; border-radius: 26px; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 22px rgba(4, 38, 54, .12); } .st-stufe__feld svg { width: 38px; height: 38px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .st-stufe--gruen .st-stufe__feld { background: #1F9D57; } .st-stufe--tuerkis-hell .st-stufe__feld { background: #2FC4B4; } .st-stufe--tuerkis .st-stufe__feld { background: #1BB3B6; } .st-stufe--blau-hell .st-stufe__feld { background: #1590B4; } .st-stufe--blau .st-stufe__feld { background: #1570A6; } .st-stufe--blau-tief .st-stufe__feld { background: #175C94; } .st-stufe--blau-nacht .st-stufe__feld { background: #14507F; } .st-stufe__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; } .st-stufe__nr { margin: 0; font-size: 12.5px; font-weight: 700; letter-spacing: .09em; color: #37C0AA; text-transform: uppercase; } .st-stufe__name { margin: 0; width: 100%; font-family: 'Roboto Slab', Georgia, serif; font-size: clamp(1.15rem, 1.7vw, 1.4rem); font-weight: 700; line-height: 1.2; } .st-stufe__dauer { font-size: 13.5px; font-weight: 700; color: #41525F; background: #F7F8FA; border: 1px solid #E4E9EE; border-radius: 999px; padding: 4px 11px; } /* Kacheln in fester Groesse nebeneinander. „auto-fill" statt „auto-fit": eine einzelne Kachel bleibt dann eine Spalte breit, statt sich ueber die ganze Reihe zu ziehen - sonst wird ihr quadratisches Foto riesig (Mechthild, 21.09.2026, Stufe 0). Deckel bei 300px: Quadrate nur so gross wie noetig. */ /* Eine Zeile traegt das Verb fuer alle Kacheln darunter, damit nicht in jeder Kachel „Sie ..." steht (Mechthild, 21.09.2026). */ .st-stufe__lernzeile { margin: 16px 0 0; font-size: 13px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #0A7287; } .st-stufe__lernzeile + .st-stufe__module { margin-top: 8px; } .st-stufe__module { margin-top: 15px; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 300px)); gap: 11px; justify-content: start; align-items: stretch; } .st-modul { background: #fff; border: 1px solid #E4E9EE; border-radius: 12px; padding: 14px 15px; display: block; } .st-modul--klickbar { text-decoration: none; color: inherit; transition: border-color .15s ease, box-shadow .15s ease; } .st-modul--klickbar:hover, .st-modul--klickbar:focus-visible { border-color: #37C0AA; box-shadow: 0 8px 20px rgba(41, 54, 57, .08); } .st-modul__nr { margin: 0; font-size: 13.5px; font-weight: 700; color: #37C0AA; } .st-modul__titel { margin: 5px 0 0; font-family: 'Roboto Slab', Georgia, serif; font-size: 18px; font-weight: 600; line-height: 1.26; } .st-modul__dauer { margin: 7px 0 0; font-size: 15px; color: #5F6B76; } /* 5,45:1 statt 4,4:1 (WCAG 1.4.3) */ .st-modul__engl { margin: 5px 0 0; font-size: 13px; color: #5F6B76; font-style: italic; } .st-stufe__knopf { margin-top: 14px; } .st-knopf--bald { flex-direction: column; gap: 3px; cursor: default; background: #F6E2B4; color: #6E5A2B; display: inline-flex; align-items: center; } .st-knopf--bald:hover { background: #F6E2B4; } .st-knopf--bald em { font-style: normal; font-size: 12.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; } .st-stufen-band { padding: clamp(40px, 4.2vw, 60px) 0; background: #fff; } .st-stufen-band__kasten { background: linear-gradient(112deg, #0A8E99 0%, #0A7287 38%, #125C80 72%, #154C6E 100%); border-radius: 14px; padding: 24px 26px; display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; color: #fff; } .st-stufen-band__kasten p { margin: 0; max-width: 48ch; font-size: 15.5px; } .st-stufen-band__kasten b { display: block; font-family: 'Roboto Slab', Georgia, serif; font-size: 18px; margin-bottom: 5px; } @media (max-width: 960px) { .st-stufe { grid-template-columns: 1fr; gap: 16px; } .st-stufe::before { display: none; } .st-stufe__module { grid-template-columns: repeat(auto-fill, minmax(240px, 300px)); } .st-stufen-band__kasten { flex-direction: column; align-items: flex-start; } .st-stufen-band__kasten .st-knopf { width: 100%; } } /* Kleine Zeile ueber der Hero-Ueberschrift: „Modul 3" (19.09.2026) */ .st-hero-vor { margin: 0 0 8px; font-size: 12.5px; letter-spacing: .09em; font-weight: 700; text-transform: uppercase; color: #37C0AA; } /* Modulkarten: jedes Modul steht fuer sich, mit tuerkiser Kopflinie statt der Kante links. So hebt sich das einzelne Modul vom Abschnitt darueber ab. */ .st-karte--modul { border-left: 1px solid #E4E9EE; border-top: 5px solid #37C0AA; max-width: 1000px; } .st-karte--modul h3 { margin-top: 0; font-size: clamp(20px, 2.1vw, 24px); } .st-karte--modul .has-small-font-size { display: inline-block; margin-bottom: 4px; background: #F7F8FA; border: 1px solid #E4E9EE; border-radius: 999px; padding: 4px 11px; font-weight: 700; color: #41525F; } /* Aufklappbare Modulkacheln (19.09.2026).
kann der Browser selbst, also ohne JavaScript. Die Pille an der Stufe ist weg, die Dauer steht jetzt als stille Zeile. */ .st-stufe__dauer { margin: 4px 0 0; font-size: 13.5px; font-weight: 700; color: #41525F; background: none; border: 0; border-radius: 0; padding: 0; } .st-modul--auf { padding: 0; } .st-modul--auf > summary { list-style: none; cursor: pointer; padding: 14px 40px 14px 15px; position: relative; display: block; } .st-modul--auf > summary::-webkit-details-marker { display: none; } .st-modul--auf > summary::after { content: ""; position: absolute; right: 16px; top: 22px; width: 10px; height: 10px; border-right: 2px solid #0A6E7C; border-bottom: 2px solid #0A6E7C; transform: rotate(45deg); transition: transform .15s ease; } .st-modul--auf[open] > summary::after { transform: rotate(-135deg); top: 26px; } .st-modul--auf > summary:hover { background: #F7F8FA; } .st-modul--auf > summary .st-modul__nr { display: block; font-size: 12.5px; font-weight: 700; color: #37C0AA; } .st-modul--auf > summary .st-modul__titel { display: block; margin-top: 5px; font-family: 'Roboto Slab', Georgia, serif; font-size: 15px; font-weight: 600; line-height: 1.26; } .st-modul--auf > summary .st-modul__dauer { display: block; margin-top: 7px; font-size: 13.5px; font-weight: 400; color: #5F6B76; } .st-modul__mehr { padding: 0 15px 16px; border-top: 1px solid #E4E9EE; margin: 0 15px; padding-top: 12px; } .st-modul__mehr p { margin: 0; font-size: 14.5px; line-height: 1.5; } .st-modul__merkmale { margin-top: 8px !important; font-size: 13px !important; color: #5F6B76; } /* Katalogtext in der aufgeklappten Modulkachel */ .st-modul__text { margin-top: 10px; font-size: 16px; line-height: 1.6; } .st-modul__text p { margin: 10px 0 0; } .st-modul__text p:first-child { margin-top: 0; } .st-modul__text ul { margin: 6px 0 0; padding-left: 18px; list-style: disc; } .st-modul__text li { margin: 3px 0; } .st-modul__text strong { color: #1D2A35; } /* Pillen in der Hero-Kachel und groessere Karte im Bildband */ .st-hero-pillen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .st-hero-pillen span { font-size: 12.5px; font-weight: 700; color: #41525F; background: #F7F8FA; border: 1px solid #E4E9EE; border-radius: 999px; padding: 3px 10px; } .st-schluss__karte--breit { max-width: 860px; } .st-schluss__text { margin-top: 16px; font-size: 15.5px; line-height: 1.55; } .st-schluss__text ul { margin: 8px 0 0; padding-left: 20px; } .st-schluss__text li { margin: 5px 0; } .st-schluss__text h3 { margin: 16px 0 6px; font-size: 18px; } /* Nutzenzeile: warum man das Modul bucht - steht in der Kachel, ohne Aufklappen */ .st-modul--auf > summary .st-modul__nutzen { display: block; margin-top: 8px; font-size: 16px; line-height: 1.45; color: #41525F; } /* Notentabelle in der aufgeklappten Kachel */ .st-modul__text table.st-noten { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 14px; } .st-modul__text table.st-noten th, .st-modul__text table.st-noten td { border: 1px solid #E4E9EE; padding: 6px 8px; text-align: left; } .st-modul__text table.st-noten th { background: #F7F8FA; } /* Breite Module (eine Kachel je Reihe) und die zwei Phasen nebeneinander */ .st-stufe__module--breit { grid-template-columns: 1fr; } .st-phasen { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 10px; } .st-phase { background: #F7F8FA; border: 1px solid #E4E9EE; padding: 14px 16px; } .st-phase > p:first-child { margin-top: 0; } .st-phase ul { margin: 6px 0 0; padding-left: 18px; } @media (max-width: 800px) { .st-phasen { grid-template-columns: 1fr; } } /* Das Eltern-Theme setzt eigene Aufzaehlungszeichen per ::before. In unseren Kacheln kommt dazu das Zeichen der Liste selbst - also zweimal. Hier bleibt das der Liste. */ .st-modul__text li::before, .st-phase li::before, .st-karte li::before { content: none !important; } .st-modul__text ul, .st-phase ul, .st-karte ul { list-style: disc; } .st-modul__text li, .st-phase li, .st-karte li { padding-left: 0 !important; } /* Modul mit Bild: Foto links, Text rechts - die schmalere Textspalte liest sich besser als eine Zeile ueber die ganze Breite (Mechthild, 20.09.2026). Das Foto steht NEBEN dem Aufklapper, nicht darin: in einem zugeklappten
zeigt der Browser nur die Zusammenfassung, das Bild waere sonst erst nach dem Aufklappen zu sehen. */ .st-modul--bild { display: grid; grid-template-columns: 220px minmax(0, 1fr); padding: 0; overflow: hidden; align-items: stretch; } /* Das Bild bleibt quadratisch und oben stehen. Ohne das wird es beim Aufklappen auf die ganze Hoehe gezogen und zeigt nur noch einen Streifen. */ .st-modul--bild .st-modul__foto { background: #F7F8FA; align-self: start; } .st-modul--bild .st-modul__foto img { aspect-ratio: 1 / 1; } /* Der aufgeklappte Teil laeuft unter dem Bild durch ueber die ganze Karte - so haben die zwei Spalten Platz (Mechthild, 20.09.2026). */ .st-modul--bild .st-modul__mehr { margin-left: -220px; padding: 14px 16px 18px; border-top: 1px solid #E4E9EE; } .st-modul--bild .st-modul__foto img { width: 100%; height: auto; object-fit: cover; display: block; } .st-modul__klapp > summary { list-style: none; cursor: pointer; padding: 14px 40px 14px 15px; position: relative; display: block; } .st-modul__klapp > summary::-webkit-details-marker { display: none; } .st-modul__klapp > summary::after { content: ""; position: absolute; right: 16px; top: 22px; width: 10px; height: 10px; border-right: 2px solid #37C0AA; border-bottom: 2px solid #37C0AA; transform: rotate(45deg); transition: transform .15s ease; } .st-modul__klapp[open] > summary::after { transform: rotate(-135deg); top: 26px; } .st-modul__klapp > summary:hover { background: #F7F8FA; } .st-modul__klapp .st-modul__nr { display: block; font-size: 12.5px; font-weight: 700; color: #37C0AA; } .st-modul__klapp .st-modul__titel { display: block; margin-top: 5px; font-family: 'Roboto Slab', Georgia, serif; font-size: 18px; font-weight: 600; line-height: 1.26; } .st-modul__klapp .st-modul__dauer { display: block; margin-top: 7px; font-size: 15px; font-weight: 400; color: #5F6B76; } .st-modul__klapp .st-modul__nutzen { display: block; margin-top: 8px; font-size: 16px; line-height: 1.45; color: #41525F; } @media (max-width: 760px) { .st-modul--bild { grid-template-columns: 1fr; } .st-modul--bild .st-modul__foto { aspect-ratio: 16 / 9; } } /* Die breite Modulzeile nicht breiter als ihr Inhalt - sonst steht rechts eine halbleere Flaeche (Mechthild, 20.09.2026). Zugeklappt sitzt der Text mittig neben dem Bild. */ .st-stufe__module--breit { max-width: 900px; } .st-modul--bild .st-modul__klapp { display: flex; flex-direction: column; } .st-modul--bild .st-modul__klapp > summary { min-height: 220px; } /* Der obere Teil ist ueberall gleich hoch - sonst sitzt die Trennlinie in jeder Kachel woanders (Mechthild, 20.09.2026). */ .st-stufe__module:not(.st-stufe__module--breit) .st-modul--auf:not(:only-child) > summary { min-height: 210px; } /* Praxisbeispiele stehen oben in der Kachel und heben sich ab */ /* Praxisbeispiele als Pillen: als Fliesstext gingen sie unter (Mechthild, 20.09.2026). */ .st-modul__merkmale { margin: 0 0 16px; } /* Sie sollen ins Auge fallen: hier erkennt der Leser seine eigene Arbeit wieder (Mechthild, 20.09.2026). Tuerkiser Grund, kraeftige Kante. */ .st-modul__merkmale-titel { margin: 0 0 10px !important; color: #0A6E7C; text-transform: uppercase; letter-spacing: .06em; font-size: 13px; font-weight: 700; } .st-modul__merkmale-liste { margin: 0 !important; display: flex; flex-wrap: wrap; gap: 8px; } .st-modul__merkmale-liste .st-pille { font-size: 15px; font-weight: 700; color: #0A5F6B; background: #E4F7F3; border: 1px solid #9FE2D6; padding: 6px 14px; } /* Anforderungsformular: Feld und Knopf gleich breit (Mechthild, 20.09.2026). Die Zeile ist ein flex-Container; untereinander statt nebeneinander. */ /* Ein Takt fuer das ganze Formular: Feld, Ankreuzbox und Knopf sitzen in gleichen Abstaenden untereinander und sind gleich breit (Mechthild, 20.09.2026: "abstaende gerade, soll gerade aussehen"). */ .ki-anfordern { max-width: 460px; margin: 0; } .ki-anfordern label[for="ki-mail"] { font-family: 'Roboto Slab', Georgia, serif; font-size: 16px; font-weight: 600; margin-bottom: 10px; } .ki-anfordern__zeile { display: grid; gap: 18px; } .ki-anfordern__zeile #ki-mail, .ki-anfordern__zeile .btn { display: block; width: 100%; box-sizing: border-box; margin: 0; } .ki-anfordern__zeile #ki-mail { padding: 14px 16px; font-size: 16px; font-family: Lato, sans-serif; } /* Der Vorschautext in der Hausschrift, und beim Hineinklicken verschwindet er. */ .ki-anfordern__zeile #ki-mail::placeholder { font-family: Lato, sans-serif; color: #5F6B76; opacity: 1; } .ki-anfordern__zeile #ki-mail:focus::placeholder { color: transparent; } /* Zwei Regeln des Eltern-Themes halten den Knopf klein: .btn deckelt bei 339px und 45px Hoehe, und .two-column__content-item .btn setzt width:fit-content - gleich stark wie eine eigene Klasse und spaeter geladen. Deshalb hier mit drei Klassen dagegen (Mechthild, 20.09.2026: er blieb dreimal schmal). */ .ki-anfordern .ki-anfordern__zeile .btn.btn-primary { display: block; width: 100%; max-width: none; height: auto; text-align: center; padding: 15px 20px; font-size: 16px; } /* Abschlussband mit zwei Karten nebeneinander */ /* Nur so gross wie noetig: zwei Quadrate nebeneinander, nicht die ganze Spur (Mechthild, 20.09.2026). */ /* So klein, wie es geht, ohne dass das Quadrat bricht: 320px tragen drei Zeilen Ueberschrift, drei Zeilen Text und zwei Knoepfe nebeneinander (20.09.2026). */ .st-schluss__karten { display: grid; grid-template-columns: repeat(2, minmax(0, 320px)); gap: 20px; } /* Quadratisch wie die Hero-Kachel des Themes (Mechthild, 20.09.2026). Unter 700px darf die Kachel wieder wachsen, sonst passt der Text nicht hinein. */ .st-schluss__karten .st-schluss__karte { max-width: none; display: flex; flex-direction: column; background: rgba(255, 255, 255, .96); border: 0; border-radius: 0; box-shadow: 0 18px 44px rgba(9, 40, 54, .18); aspect-ratio: 1 / 1; justify-content: center; padding: 26px; } @media (max-width: 700px) { .st-schluss__karten .st-schluss__karte { aspect-ratio: auto; } } .st-schluss__karten .st-schluss__titel { font-size: 1.1rem; line-height: 1.25; max-width: none; } .st-schluss__karten .st-schluss__zeile { font-size: 14.5px; margin-top: 8px; line-height: 1.45; } .st-schluss__karten .st-knopf, .st-schluss__karten .st-zweitknopf { font-size: 14px; padding: 10px 14px; } .st-schluss__karten .st-schluss__karte { padding: 22px; } .st-schluss__karten .st-schluss__knoepfe { margin-top: auto; padding-top: 18px; } @media (max-width: 800px) { .st-schluss__karten { grid-template-columns: 1fr; } } .st-schluss:has(.st-schluss__karten) .st-schluss__schleier { background: linear-gradient(180deg, rgba(14, 40, 54, .55), rgba(14, 40, 54, .35)); } .st-schluss:has(.st-schluss__karten) .st-schluss__formel { color: #fff; border-bottom-color: rgba(255, 255, 255, .4); } /* Phasen: Ueberschrift, darunter zwei Pillen (Teil 1 / 4 U.-Std.). Die Zeile „Name · Dauer" in einem Fettdruck war zu suppig (Mechthild, 20.09.2026). */ .st-phase__titel { margin: 0; font-family: 'Roboto Slab', Georgia, serif; font-size: 17px; font-weight: 600; line-height: 1.25; } .st-phase__pillen { margin: 8px 0 0 !important; display: flex; flex-wrap: wrap; gap: 6px; } .st-pille { font-size: 13px; font-weight: 700; color: #41525F; background: #fff; border: 1px solid #E4E9EE; border-radius: 999px; padding: 3px 11px; } .st-phase ul { margin-top: 12px; } .st-phase li { font-size: 16px; line-height: 1.5; } /* Kein abgerundetes Eck an Karten - das CI arbeitet mit Kanten. Pillen und die Icon-Flaechen der Lernreise bleiben rund, die kommen so aus dem Entwurf. */ .st-modul, .st-phase, .st-karte, .st-programm, .st-stufen-band__kasten, .st-schluss__karte { border-radius: 0 !important; } /* Stille Kachel (nicht aufklappbar) und der unauffaellige Weg zur Modulseite */ .st-modul--still { padding: 0; display: flex; flex-direction: column; } .st-modul--still .st-modul__still { padding: 14px 15px 16px; } @media (max-width: 560px) { .st-stufe__module { grid-template-columns: 1fr; } .st-modul--still .st-modul__foto img { aspect-ratio: 16 / 9 !important; } } .st-modul--still .st-modul__foto img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; } .st-modul--still .st-modul__nutzen { margin: 8px 0 0; font-size: 16px; line-height: 1.5; color: #41525F; } .st-stufe__mehr { display: inline-block; margin-top: 14px; font-size: 16px; font-weight: 700; color: #0A6E7C; text-decoration: none; border-bottom: 2px solid #37C0AA; padding-bottom: 2px; } .st-stufe__mehr::after { content: " →"; } .st-stufe__mehr:hover, .st-stufe__mehr:focus-visible { color: #1D2A35; } /* Die Zeile ist genau so hoch wie das quadratische Bild - kein Weissraum darunter (Mechthild, 20.09.2026). Aufgeklappt darf sie wachsen. */ /* Zugeklappt ist die Karte exakt so hoch wie das quadratische Bild: die Rasterzeile gibt das Mass vor, Bild und Text fuellen sie. Vorher hing die Karte unten ueber (Mechthild, 20.09.2026). */ .st-modul--bild:has(> .st-modul__klapp:not([open])) { grid-template-rows: 220px; align-items: stretch; } .st-modul--bild:has(> .st-modul__klapp:not([open])) .st-modul__foto { height: 220px; } .st-modul--bild:has(> .st-modul__klapp:not([open])) .st-modul__foto img { height: 100%; aspect-ratio: auto; object-fit: cover; } .st-modul--bild > .st-modul__klapp:not([open]) { height: 220px; overflow: hidden; } .st-modul--bild > .st-modul__klapp:not([open]) > summary { height: 100%; min-height: 0; display: flex; flex-direction: column; justify-content: center; overflow: hidden; } @media (max-width: 760px) { .st-modul--bild .st-modul__klapp:not([open]) > summary { height: auto; } } /* Ueberschrift im aufgeklappten Modul: Schriftart, Groesse und der tuerkise Strich machen sie erkennbar - fett allein tat es nicht. */ .st-modul__kopfzeile { font-family: 'Roboto Slab', Georgia, serif; font-size: 17px; font-weight: 600; line-height: 1.3; color: #1D2A35; margin: 0 0 14px !important; padding-bottom: 12px; position: relative; } .st-modul__kopfzeile::after { content: ""; position: absolute; left: 0; bottom: 0; width: 30px; height: 2px; background: #37C0AA; } .st-kachel__satz { margin: 0; font-size: 16px; line-height: 1.55; color: #41525F; } /* Die beiden Knoepfe einer Abschlusskarte stehen nebeneinander, solange Platz ist (Mechthild, 20.09.2026). */ .st-schluss__karten .st-schluss__knoepfe { flex-direction: row; flex-wrap: wrap; gap: 10px; } .st-schluss__karten .st-schluss__knoepfe .st-knopf, .st-schluss__karten .st-schluss__knoepfe .st-zweitknopf { min-width: 0; flex: 1 1 auto; padding: 12px 16px; font-size: 15px; } @media (max-width: 900px) { .st-schluss__karten .st-schluss__knoepfe { flex-direction: column; } } /* Abschluss des aufgeklappten Moduls: zwei Knoepfe nebeneinander, darunter der Textlink zu den Terminen. Sichtbar ist damit genau ein gelber Knopf, sobald eine Kachel offen ist - die Rangfolge bleibt erhalten (Mechthild, 20.09.2026). */ .st-modul__aktionen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid #E4E9EE; } .st-modul__aktionen .st-knopf, .st-modul__aktionen .st-zweitknopf { font-size: 15px; padding: 11px 18px; min-width: 0; } .st-modul__termine { display: inline-block; margin-top: 12px; font-size: 15px; font-weight: 700; color: #0A6E7C; text-decoration: none; border-bottom: 2px solid #37C0AA; padding-bottom: 2px; } .st-modul__termine::after { content: " →"; } .st-modul__termine:hover, .st-modul__termine:focus-visible { color: #1D2A35; } /* Anforderungsformular: Feld, Ankreuzbox und Knopf untereinander, Feld und Knopf gleich breit (Mechthild, 20.09.2026). */ /* Ankreuzzeile: Box links, Text rechts, beide auf einer Linie. Die Box ist 20px hoch, die Textzeile 24px (16px * 1.5) - also 2px Versatz. */ /* .ki-anfordern label (Klasse + Element) ist staerker als eine blosse Klasse - deshalb hier mit Klasse UND Element dagegen, sonst bleibt display:block und die Box steht ueber dem Text (20.09.2026 gemessen). */ .ki-anfordern label.ki-anfordern__ok { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; margin: 0; font-size: 16px; line-height: 1.5; color: #1D2A35; font-weight: 400; cursor: pointer; } .ki-anfordern__ok input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: #37C0AA; } .ki-anfordern__ok span { display: block; font-weight: 400; } .ki-anfordern__ok a { color: #0A6E7C; } /* Zwei Spalten mit Text: Ueberschriften als solche erkennbar, ein Schriftgrad fuer alles darunter. Das Eltern-Theme setzt 16px Flisstext, Roboto Slab fuer Ueberschriften - daran halten wir uns. */ .two-column .st-spalte h3, .two-column__column h3, .two-column h3 { font-family: 'Roboto Slab', Georgia, serif; font-size: 20px; font-weight: 700; line-height: 1.25; color: #1D2A35; margin: 32px 0 12px; } .two-column h3:first-child { margin-top: 0; } .two-column p, .two-column li { font-size: 16px; line-height: 1.6; color: #1D2A35; } /* Nummerierung buendig zur Ueberschrift: haengender Einzug. Die Ziffer steht am linken Rand, umbrechender Text darunter auf einer Linie. (Ein Raster mit eigener Ziffernspalte zerlegte den Text in Einzelwoerter.) */ /* Eigene Klasse, damit die Regel des Eltern-Themes (ol:not([class]) li:before, absolut positioniert) nicht mehr greift - sie ist gleich stark wie unsere und wird spaeter geladen. Ziffer am linken Rand, umbrechender Text buendig. */ .st-liste { margin: 0 0 18px; padding-left: 0; list-style: none; counter-reset: st-zaehler; } .st-liste li { counter-increment: st-zaehler; margin: 6px 0; padding-left: 1.6em; text-indent: -1.6em; font-size: 16px; line-height: 1.6; color: #1D2A35; } .st-liste li::before { content: counter(st-zaehler) "."; color: #1D2A35; display: inline-block; width: 1.6em; text-indent: 0; } .two-column ul { margin: 0 0 18px; padding-left: 20px; } .two-column ul li { margin: 6px 0; padding-left: 0; } .two-column p { margin: 0 0 12px; } .ki-anfordern__hinweis { font-size: 14px; line-height: 1.5; color: #5F6B76; margin: 16px 0 0; } /* Die Beschriftung "Ihre E-Mail-Adresse" bleibt fett, der Einwilligungssatz nicht. */ .ki-anfordern label.ki-anfordern__ok { font-weight: 400; } /* "Das nehmen Sie mit" ist der wichtigste Satz des Moduls und steht deshalb hervorgehoben - nicht kleiner als der Rest (Mechthild, 20.09.2026). */ .st-modul__text .st-mitnehmen { margin: 20px 0 0 !important; padding: 16px 18px; background: #E4F7F3; border-left: 4px solid #37C0AA; font-size: 17px; line-height: 1.55; color: #1D2A35; } .st-modul__text .st-mitnehmen strong { color: #0A5F6B; } /* Eyebrows stehen im Haus in Großbuchstaben - das gilt auch für die Modulnummer in der Kachel (Mechthild, 20.09.2026). */ .st-modul__nr, .st-modul--auf > summary .st-modul__nr, .st-modul__klapp .st-modul__nr, .st-modul--still .st-modul__nr { text-transform: uppercase; letter-spacing: .09em; font-size: 12.5px; } /* Die aus der Auswertung angesprungene Modulkachel bekommt einen goldenen Rand (0.81.0). */ .st-modul--gezeigt { outline: 3px solid #F0B334; outline-offset: 4px; scroll-margin-top: 120px; } .st-modul[id] { scroll-margin-top: 120px; } /* ── Handy-Korrekturen (0.82.0, Bjoern 20.09.2026 an Stufe 1 und 2 gesehen) ──────────────── * 1. Modulkachel mit Foto: der aufgeklappte Inhalt zieht am Desktop mit margin-left:-220px unter * das Foto. Unter 760px steht das Foto oben, der negative Rand blieb - der Text stand 220px * links aus dem Bild. 2. Fusszeile: das Eltern-Theme gibt die Rechtslinks zweimal aus * (footer__links--desktop und --mobile) und blendet unter 1024px nur die mobile ein, die * Desktop-Liste aber nicht aus. Deshalb am Handy zweimal Impressum, auf jeder Seite. */ @media (max-width: 760px) { .st-modul--bild .st-modul__mehr { margin-left: 0; margin-right: 0; } } @media (max-width: 1024px) { .footer__links--desktop { display: none; } } /* Drei Kacheln (0.83.0, Bjoern 20.09.2026: "die Kachel ist rechts rausgelaufen"): Die Zeile * streckte jede Kachel auf die Hoehe der hoechsten, und aspect-ratio 1/1 machte sie dann * genauso BREIT - breiter als ihre Spalte. Jetzt: Spalten duerfen nicht wachsen, Kacheln * richten sich oben aus; sie sind quadratisch, solange der Inhalt passt, und werden bei viel * Inhalt nur hoeher, nie breiter. */ .st-kacheln__reihe { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; } .st-kachel { min-width: 0; overflow-wrap: anywhere; } @media (max-width: 900px) { .st-kacheln__reihe { grid-template-columns: minmax(0, 1fr); } } /* Hinweis ueber den Anfrageformularen der KI-Strecke (Plugin [ki_check_hinweis], 21.09.2026) */ .kk-hinweis { padding: 16px 20px; margin: 0 0 22px; border-left: 4px solid #37C0AA; background: #F7F8FA; } .kk-hinweis p { margin: 0 0 10px; } .kk-hinweis p:last-child { margin-bottom: 0; } .kk-hinweis--bekannt { border-left-color: #1F9D57; } .kk-hinweis--empfehlung { border-left-color: #F0B334; } /* ══ Rechtstexte: Datenschutz, Impressum, AGB (0.87.0, Bjoern 21.09.2026) ════════════════════ * "die seite ist grottenschlecht. viel kleinerer text." Gemessen auf /datenschutz/ vorher: * 16

in 50 px - groesser als das

der Seite mit 35 px, * 36 Absaetze in 18 px / line-height 200 %, Schriftschnitt 300, * dazwischen KEIN Abstand (der globale Reset des Eltern-Themes setzt margin:0 auf p und h2, * der Abstand kommt sonst vom flex-gap, und der greift nur zwischen den Block-Kindern), * Listenpunkte in 16 px, also kleiner als die Absaetze daneben, * Textspalte 635 px breit. * Die Klasse "rechtstext" haengt functions.php an den (per Slug). Sie wirkt NUR auf * diesen drei Seiten - die Werbeseiten sollen ihre grosse Typo behalten. */ body.rechtstext .one-column { padding: 46px 0; } body.rechtstext .one-column .container { max-width: 880px; gap: 16px; } body.rechtstext .one-column .title-wrapper h1 { font-size: 30px; } body.rechtstext .one-column .container .one-column__column-content p, body.rechtstext .one-column .container .one-column__column-content li { font-size: 16px; line-height: 1.65; font-weight: 400; letter-spacing: 0; } body.rechtstext .one-column .container .one-column__column-content p { margin: 0 0 0.95em; } body.rechtstext .one-column .container .one-column__column-content > p:last-child { margin-bottom: 0; } body.rechtstext .one-column .container .one-column__column-content ul, body.rechtstext .one-column .container .one-column__column-content ol { margin: 0 0 0.95em; } body.rechtstext .one-column .container .one-column__column-content h2 { font-size: 21px; line-height: 1.35; margin: 2.1em 0 0.5em; } body.rechtstext .one-column .container .one-column__column-content > h2:first-child { margin-top: 0; } body.rechtstext .one-column .container .one-column__column-content h3 { font-size: 17px; margin: 1.5em 0 0.4em; } /* Die Kopfzeile der Seite ueberdeckt sonst die angesprungene Ueberschrift. */ body.rechtstext .one-column .container .one-column__column-content [id] { scroll-margin-top: 110px; } @media (max-width: 768px) { body.rechtstext .one-column .title-wrapper h1 { font-size: 24px; } body.rechtstext .one-column .container .one-column__column-content p, body.rechtstext .one-column .container .one-column__column-content li { font-size: 15px; line-height: 1.6; } body.rechtstext .one-column .container .one-column__column-content h2 { font-size: 19px; } } /* Uebersichtstabelle "Auf einen Blick" - erste Ebene der Datenschutzerklaerung. */ .rt-tab { width: 100%; border-collapse: collapse; margin: 0.3em 0 1.1em; } .rt-tab th, .rt-tab td { text-align: left; vertical-align: top; padding: 9px 12px 9px 0; border-bottom: 1px solid #dcdcdc; font-size: 15px; line-height: 1.5; } .rt-tab thead th { font-family: 'Roboto Slab', serif; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 2px solid #37C0AA; } .rt-tab td:first-child { font-weight: 700; width: 24%; } .rt-tab td:nth-child(3) { width: 21%; } .rt-tab td:last-child { width: 21%; } .rt-tab a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .rt-tab a:hover { color: #37C0AA; } /* Am Handy ist eine vierspaltige Tabelle nicht lesbar: jede Zeile wird zur Karte, die * Spaltenueberschrift steht als kleine Zeile ueber dem Wert (data-s). */ @media (max-width: 760px) { .rt-tab, .rt-tab tbody, .rt-tab tr, .rt-tab td { display: block; width: auto; } .rt-tab thead { display: none; } .rt-tab tr { border: 1px solid #dcdcdc; padding: 10px 14px; margin: 0 0 12px; } .rt-tab td { border: 0; padding: 0 0 8px; } .rt-tab td:last-child { padding-bottom: 0; } .rt-tab td:first-child { width: auto; font-size: 16px; padding-bottom: 10px; } .rt-tab td::before { content: attr(data-s); display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #666; margin-bottom: 1px; } .rt-tab td:first-child::before { content: none; } } /* Widerspruchsrecht: Art. 21 Abs. 4 DSGVO verlangt den Hinweis "in verstaendlicher und von * anderen Informationen getrennter Form" - deshalb ein abgesetzter Kasten, kein Listenpunkt. */ .rt-kasten { border-left: 4px solid #F0B334; background: #F7F8FA; padding: 14px 18px; margin: 1.3em 0; } body.rechtstext .rt-kasten p { margin-bottom: 0.6em; } body.rechtstext .rt-kasten p:last-child { margin-bottom: 0; } /* Zwei Fallen des Eltern-Themes, beide am 21.09.2026 an der fertigen Seite gemessen: * 1. Seine Regel fuer den Absatz hat vier Klassen (.one-column .container * .one-column__column-content p) und schlaegt jede kuerzere - deshalb nennen die Regeln * oben die ganze Kette. Mit der kurzen Fassung blieb der Absatz bei 18 px / 300, die * Aenderung war unsichtbar. * 2. hat im Browser font-weight:bolder, und "bolder" von 300 aus ist 400, nicht 700 * (CSS-Stufenleiter). Die Hervorhebungen "Zweck:", "WhatsApp.", "Zahlung auf Rechnung." * standen deshalb ueberhaupt nicht hervor. Hier wird der Wert gesetzt statt abgeleitet. */ body.rechtstext .one-column .container .one-column__column-content strong, body.rechtstext .one-column .container .one-column__column-content b { font-weight: 700; } /* Die Ueberschrift des Blocks ("Diese Website", "Unsere digitalen Dienste") sitzt im * .title-wrapper, nicht im Inhalt, und traegt deshalb die 50 px des Eltern-Themes - doppelt * so gross wie das

der Seite darueber. */ body.rechtstext .one-column .container .title-wrapper h2 { font-size: 26px; line-height: 1.3; } @media (max-width: 768px) { body.rechtstext .one-column .container .title-wrapper h2 { font-size: 21px; } } /* ── Ein Eingabefeld fuer alle Formulare (0.88.0, Bjoern 21.09.2026: "ist es die gleiche Form wie in den Formularen?") ─ Vorbild ist das Feld der Anforderung auf der Startseite: eckig, 1px grau, 14/16px Innenabstand, Lato 16. Gilt fuer Fluent Forms (Beratung, Wunschmodul, Stammtisch) und die WooCommerce-Kasse; Knoepfe im Hausgelb wie ueberall. */ .fluentform .ff-el-form-control, .woocommerce .input-text, .woocommerce select, .woocommerce textarea, .woocommerce-checkout .form-row input.input-text, .woocommerce-checkout .form-row select { border: 1px solid #c8c8c8; border-radius: 0; background: #fff; padding: 14px 16px; font-family: Lato, sans-serif; font-size: 16px; line-height: 1.3; color: #101314; box-shadow: none; min-height: 52px; width: 100%; box-sizing: border-box; } .fluentform textarea.ff-el-form-control, .woocommerce textarea { min-height: 120px; } .fluentform .ff-el-form-control:focus, .woocommerce .input-text:focus, .woocommerce select:focus, .woocommerce textarea:focus { outline: none; border-color: #37C0AA; box-shadow: 0 0 0 2px rgba(55, 192, 170, .25); } .fluentform .ff-el-form-control::placeholder, .woocommerce .input-text::placeholder { font-family: Lato, sans-serif; color: #5F6B76; opacity: 1; } .fluentform .ff-el-input--label label, .woocommerce form .form-row label { font-family: 'Roboto Slab', Georgia, serif; font-size: 16px; font-weight: 600; color: #101314; } .fluentform .ff-el-input--label label .ff-required, .woocommerce form .form-row .required { color: #F0B334; } .fluentform .ff-el-group { margin-bottom: 18px; } /* Absendeknopf in Hausfarbe. Fluent Forms bringt fuer .ff_btn_style ein eigenes Blau mit, das nach style.css geladen wird und bei gleicher Spezifitaet gewinnt (Pruefstand-Bild 1030, 21.09.2026) - deshalb Klassenkette plus !important fuer Farbe und Grund. */ .fluentform .ff-btn.ff-btn-submit, .fluentform .ff-btn.ff_btn_style, .fluentform .ff-btn-submit.ff_btn_style { display: block; width: 100%; max-width: none; height: auto; padding: 15px 20px; background: #F0B334 !important; background-color: #F0B334 !important; color: #20303C !important; font-weight: 700; font-size: 16px; border: 0; border-radius: 0; font-family: Lato, sans-serif; cursor: pointer; transition: background .18s ease; } .fluentform .ff-btn.ff-btn-submit:hover, .fluentform .ff-btn.ff-btn-submit:focus-visible, .fluentform .ff-btn-submit.ff_btn_style:hover { background: #D89B1C !important; background-color: #D89B1C !important; color: #20303C !important; } .fluentform .ff-message-success { border-left: 4px solid #1F9D57; background: #e0f7f5; color: #0b6d72; padding: 14px 18px; font-weight: 700; } .fluentform .ff-el-is-error .ff-el-form-control { border-color: #b3261e; } /* Datenschutz-Haken: Text neben dem Kaestchen, nicht darunter */ .fluentform .ff-el-tc { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; } .fluentform .ff-el-tc input[type=checkbox] { margin-top: 4px; } /* Alle Haekchen-Zeilen (nicht nur die Datenschutz-Zeile): Kaestchen 18 px statt 13, Text umbricht neben dem Kaestchen statt darunter (Pruefstand-Bild 1036 auf 390 px, 21.09.2026). */ .fluentform .ff-el-form-check-label { display: flex; gap: 10px; align-items: flex-start; line-height: 1.5; cursor: pointer; } .fluentform .ff-el-form-check-label input[type=checkbox], .fluentform .ff-el-form-check-label input[type=radio], .fluentform .ff-el-tc input[type=checkbox] { width: 18px; height: 18px; min-width: 18px; margin: 3px 0 0; accent-color: #F0B334; } /* ══ Hero-Kachel: lange deutsche Wörter brechen, statt aus dem Quadrat zu laufen ══════════ * Björn, 21.09.2026: "datenschutzerklärung fällt aus dem weißen quadrat im hero." * Gemessen an der echten Kachel (Innenbreite 310 px = 370 minus 2×30 Polster, Titel 35 px * Roboto Slab), längstes Wort je Seite: * AGB "Geschäftsbedingungen" 319 px → läuft 9 px heraus * Datenschutz "Datenschutzerklärung" 307 px → 3 px Luft, optisch auf Kante * KI-Gesamtprogramm / KI-Kompetenzcheck je 310 px → 0 px Luft * Das Eltern-Theme hat weder Silbentrennung noch Umbruchregel, und .hero-block schneidet * mit overflow:hidden ab — der Überlauf ist also nicht einmal sichtbar, das Wort hört * einfach auf. Mit hyphens:auto trennt der Browser nach deutschen Regeln (das der * Seite trägt lang="de", sonst wirkte es nicht); overflow-wrap ist der Auffang für Wörter, * die auch getrennt nicht passen. */ .hero-block__title { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; } /* Und der Rest der Rechnung (0.93.0): "Datenschutzerklärung" ist 307 px breit, die Kachel * bietet 310 — es PASST, also greift weder hyphens:auto noch das Weichtrennzeichen im Titel; * beide trennen nur, was nicht passt. Ergebnis: das Wort steht auf der Polsterkante, und * genau das sieht man. Zwölf Pixel Innenabstand machen aus "passt knapp" ein "passt nicht", * und die Trennstelle greift. * Bewusst NUR auf den Rechtstexten (body.rechtstext = datenschutz, impressum, agb): Auf allen * anderen 25 Hero-Kacheln hat der längste Titel mindestens 78 px Luft, dort gäbe es nichts zu * gewinnen und der Zeilenumbruch könnte woanders hinfallen. "KI-Gesamtprogramm" (301 px) und * "KI-Kompetenzcheck" (292 px) bleiben deshalb unberührt — sie tragen ihren Bindestrich * ohnehin selbst (Björn, 21.09.2026: "die anderen beiden werden schon getrennt"). */ body.rechtstext .hero-block__title { padding-right: 12px; } /* ── Bestaetigungsseite nach der Buchung (0.92.0) ────────────────────────────────────── */ .woocommerce-order .woocommerce-thankyou-order-received { font-family: 'Roboto Slab', Georgia, serif; font-size: 24px; font-weight: 600; color: #101314; margin: 0 0 22px; } .woocommerce-order ul.woocommerce-order-overview { list-style: none; margin: 0 0 30px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0; border: 1px solid #E4E9EE; background: #fff; } .woocommerce-order ul.woocommerce-order-overview li { margin: 0; padding: 16px 18px; border-right: 1px solid #E4E9EE; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: #5F6B76; } .woocommerce-order ul.woocommerce-order-overview li:last-child { border-right: 0; } .woocommerce-order ul.woocommerce-order-overview li strong { display: block; margin-top: 6px; font-size: 17px; letter-spacing: 0; text-transform: none; color: #101314; font-weight: 700; } .woocommerce-order h2 { font-family: 'Roboto Slab', Georgia, serif; font-size: 22px; margin: 30px 0 12px; } .woocommerce-order .woocommerce-bacs-bank-details, .woocommerce-order .woocommerce-customer-details address { background: #F7F8FA; border-left: 4px solid #37C0AA; padding: 16px 18px; font-style: normal; } .woocommerce-order table.shop_table tfoot th { text-align: left; } @media (max-width: 700px) { .woocommerce-order ul.woocommerce-order-overview { grid-template-columns: 1fr; } .woocommerce-order ul.woocommerce-order-overview li { border-right: 0; border-bottom: 1px solid #E4E9EE; } } /* Bestaetigungsseite mit eigener Vorlage (woocommerce/checkout/thankyou.php) */ .st-danke { max-width: 720px; } .st-danke__satz { font-family: 'Roboto Slab', Georgia, serif; font-size: 26px; font-weight: 600; margin: 0 0 24px; color: #101314; } .st-danke__eck { max-width: none; } /* so breit wie die Tabelle darunter (Bjoern, 21.09.2026) */ .st-danke .woocommerce-order-details__title, .st-danke .woocommerce-column__title { font-family: 'Roboto Slab', Georgia, serif; font-size: 22px; margin: 34px 0 12px; } /* Barrierefreiheit, Pflicht nach BFSG (Pruefstand 21.09.2026) -------------------------------------- Sichtbarer Fokus fuer jedes Bedienelement (WCAG 2.4.7): Das Eltern-Theme laesst .btn, Tabellenlinks und Slider-Knoepfe ohne Fokusring. Ein dunkler Ring mit Abstand ist auf Gelb, Tuerkis und Weiss gleich gut sichtbar. Nur bei Tastaturfokus (:focus-visible), nicht beim Klick mit der Maus. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible { outline: 3px solid #1E2430 !important; outline-offset: 3px; border-radius: 2px; } /* Preis auf der Produktseite: Eltern-Theme-Grau hatte 3,4:1 (WCAG 1.4.3 verlangt 4,5:1) */ .woocommerce div.product p.price, .woocommerce div.product span.price, .woocommerce ul.products li.product .price { color: #1E2430; } /* Lagerhinweis „10 vorraetig": WooCommerce-Gruen hatte 3,4:1 (WCAG 1.4.3) */ .woocommerce div.product p.stock { color: #1F6B3A; } /* ── Kopf mit Karte ─────────────────────────────────────────────────────── Bildband ganz oben, darauf eine weisse Karte, die auch ein Formular traegt. Der Hero des Eltern-Themes kann das nicht: seine Kachel ist ein festes Quadrat von 370px und er selbst 738px hoch, alles darunter liegt unter der Falz (Mechthild, 21.09.2026: nicht scrollen muessen, um zu fragen). */ .st-kopf { position: relative; isolation: isolate; overflow: hidden; padding: clamp(28px, 3.2vw, 54px) 0; } .st-kopf .container { max-width: 1120px; margin: 0 auto; padding: 0 24px; display: flex; } .st-kopf--rechts .container { justify-content: flex-end; } .st-kopf__bild { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: right center; } .st-kopf__schleier { position: absolute; inset: 0; z-index: -1; background: linear-gradient(97deg, rgba(255,255,255,.66) 0%, rgba(255,255,255,.46) 46%, rgba(255,255,255,.16) 76%, rgba(255,255,255,0) 100%); } .st-kopf--rechts .st-kopf__bild { background-position: left center; } .st-kopf--rechts .st-kopf__schleier { background: linear-gradient(263deg, rgba(255,255,255,.66) 0%, rgba(255,255,255,.46) 46%, rgba(255,255,255,.16) 76%, rgba(255,255,255,0) 100%); } /* Kein Quadrat: die Karte traegt ein Formular, da waere abgeschnittener Text schlimmer als die Abweichung von der Form (Regel 5). */ .st-kopf__karte { background: rgba(255, 255, 255, .96); border: 1px solid rgba(255,255,255,.8); border-radius: 0; padding: clamp(24px, 2.6vw, 34px); width: 100%; max-width: 620px; box-shadow: 0 18px 44px rgba(9, 40, 54, .14); } .st-kopf__vor { margin: 0 0 12px; color: #0A7287; font-size: 13px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; } .st-kopf__titel { margin: 0; color: #1D2A35; font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.14; } .st-kopf__satz { margin: 10px 0 0; font-size: 16px; color: #41525F; max-width: 52ch; } .st-kopf__inhalt { margin-top: 20px; } .st-kopf__inhalt > *:first-child { margin-top: 0; } .st-kopf__inhalt > *:last-child { margin-bottom: 0; } @media (max-width: 700px) { .st-kopf { padding: 26px 0 30px; } .st-kopf .container { padding: 0 16px; } .st-kopf__bild { background-position: center; } .st-kopf__schleier, .st-kopf--rechts .st-kopf__schleier { background: linear-gradient(180deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.46) 100%); } .st-kopf__karte { max-width: none; padding: 20px 18px 24px; } } /* Die Frage im Formular ist die Zwischenueberschrift der Karte (Mechthild, 22.09.2026). Nur die Beschriftung des grossen Feldes - Name und E-Mail bleiben normale Beschriftungen. h3 des Eltern-Themes: Roboto Slab, 20px. */ .st-kopf__inhalt .ff-el-group:has(textarea) .ff-el-input--label label { font-family: 'Roboto Slab', Georgia, serif; font-size: 20px; font-weight: 600; line-height: 140%; color: #1D2A35; } @media (max-width: 700px) { .st-kopf__inhalt .ff-el-group:has(textarea) .ff-el-input--label label { font-size: 18px; } } /* Drei Woerter als ruhige Zeile unter einem Absatz („Verstehen · Entwickeln · Umsetzen"), dieselbe Form wie „Praxisbeispiele" auf den Modulseiten (Mechthild, 22.09.2026). */ .st-dreiklang { margin-top: 22px; color: #0A7287; font-size: 13px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; } /* Der Baustein „Welt von inlingua" zentriert h2, h5 und p, aber kein h3 - die Bereichsnamen standen deshalb links (Mechthild, 22.09.2026: alles zentriert). Unter 550px wird auch im Eltern-Theme linksbuendig gesetzt. */ .world-of-inlingua__slider-item-content h3 { text-align: center; } @media screen and (max-width: 550px) { .world-of-inlingua__slider-item-content h3 { text-align: left; } } /* Portraitreihe im Baustein „Portfolio": alle Bilder als gleich grosse Quadrate. Die Aufnahmen sind 1920x1281 (quer), ein aelteres ist 500x500 - nebeneinander sah das ungleich aus (Mechthild, 22.09.2026: „in die kachelform bringen"). Der Slider zeigt zwei Kacheln nebeneinander, also rund 255px je Quadrat. */ .portfolio .portfolio-item .images-block .portfolio-images .swiper-slide img { aspect-ratio: 1 / 1; object-fit: cover; object-position: center center; display: block; background: #F7F8FA; } /* Ueber uns: die beiden Portraits der Geschaeftsleitung eine Nummer kleiner als die 409px des Eltern-Themes und quadratisch (Mechthild, 22.09.2026). */ /* Die beiden Portraits der Geschaeftsleitung eine Nummer kleiner als die Kacheln der Geschaeftsfelder (Mechthild, 22.09.2026). */ .seite-ueber-uns .world-of-inlingua__slider-item-image img { aspect-ratio: 1 / 1; object-fit: cover; }