/* ── Lokale Schriften (kein Google-CDN, DSGVO-sauber) ── */ @font-face{font-family:'Baloo 2';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/baloo-2-700.woff2") format("woff2")} @font-face{font-family:'Baloo 2';font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/baloo-2-800.woff2") format("woff2")} @font-face{font-family:'Gochi Hand';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/gochi-hand-400.woff2") format("woff2")} @font-face{font-family:'Caveat';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/caveat-700.woff2") format("woff2")} @font-face{font-family:'Nunito Sans';font-style:normal;font-weight:200 1000;font-display:swap;src:url("../fonts/nunito-sans-variable.woff2") format("woff2-variations"),url("../fonts/nunito-sans-variable.woff2") format("woff2")} /* ============================================================ OmniKids – Stylesheet Design-System: Tafel & Kreide Typo: Nunito Sans (warm, runde Terminals, harmoniert mit Gochi Hand) – live als lokale woff2-Subsets. Rhythmus und Weißraum fluid, weiche Schatten, FAQ als Aufklapper, Formular als Karte, Sticky-CTA auf schmalen Geräten, dezente Scroll-Reveals (nur ohne prefers-reduced-motion). ============================================================ */ :root{ --tuerkis:#3fc1f0; /* Infopaket-CTA (weiche Tuer) */ --tuerkis-dunkel:#1f92bd; --creme:#ffffff; --hell:#f6f4ef; --kreide-pink:#ff5fa8; --kreide-cyan:#3fc1f0; --kreide-gruen:#63c76a; --tinte:#1a1a1a; --tafel:#232323; --kreide:#fffefb; --tintenblau:#1f3864; /* eleganter statt Ultramarin #1800ad */ --cta:#f89840; /* Knopf-Orange. NICHT identisch mit dem Logo-Orange: die Vektor- Wortmarke füllt mit #ff9845 (gemessen). Der alte Kommentar behauptete Gleichheit – vermutlich aus dem PNG gesampelt, wo der eingebrannte Schatten die Randpixel abdunkelte. Angleichen wäre eine eigene Entscheidung: am Token hängen alle Knöpfe, Ränder und Hover-Schatten. */ --cta-dunkel:#d97b26; --gelb:#ffd500; --muted:#6b6659; --line:#e6e2d8; --blau-hell:#eef2fa; /* ruhige blaue Flächen (Entscheider, Bänder, Einrichtungen) */ --blau-line:#d9e2f2; --card:#ffffff; --radius:20px; --shadow:0 1px 2px rgba(26,26,26,.05), 0 10px 30px rgba(31,56,100,.07); --w:1080px; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{transition:none!important;animation:none!important} } body{ background:var(--creme); color:var(--tinte); font-family:"Nunito Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; } img{max-width:100%;height:auto;display:block} a{color:var(--tintenblau)} a:focus-visible{outline:3px solid var(--tintenblau);outline-offset:2px;border-radius:4px} .wrap{max-width:var(--w);margin:0 auto;padding:0 20px} .chalk{font-family:"Gochi Hand","Chalkboard SE",Chalkboard,"Segoe Print","Comic Sans MS",cursive;font-weight:400} /* Dunkle Baender (Tafel): klarere Schreibschrift, besser lesbar auf Schwarz */ .zitat-band .chalk,.abschluss .chalk,.laufband-text.chalk{font-family:"Caveat","Segoe Print","Chalkboard SE",cursive;font-weight:700;letter-spacing:.01em} h2{color:var(--tintenblau);font-size:clamp(28px,5vw,42px);font-weight:800;line-height:1.15;letter-spacing:-.01em;margin-bottom:16px} h3{font-size:19px;font-weight:800;line-height:1.3} section{padding:clamp(56px,8vw,80px) 0} .lead{font-size:clamp(17px,2.6vw,20px);max-width:62ch} /* Skip-Link (Tastatur/Screenreader) */ .skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--tintenblau);color:#fff; padding:12px 18px;border-radius:0 0 12px 0;font-weight:800;text-decoration:none} .skip:focus{left:0} /* Scroll-Reveal – Basiszustand wird NUR per JS gesetzt (Klasse .animiert), und nur wenn prefers-reduced-motion nicht aktiv ist. Ohne JS: alles sichtbar. */ .animiert{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease} .animiert.drin{opacity:1;transform:none} /* Buttons – Orange exklusiv für CTAs */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; background:var(--cta);color:#2a0a04;text-decoration:none; font-weight:800;font-size:17px; min-height:52px;padding:14px 26px;border-radius:999px; border:2px solid var(--cta-dunkel); box-shadow:0 3px 0 var(--cta-dunkel), 0 10px 24px rgba(248,152,64,.28); transition:transform .13s ease, box-shadow .13s ease; } .btn:hover{transform:translateY(-2px);box-shadow:0 5px 0 var(--cta-dunkel), 0 14px 28px rgba(248,152,64,.34)} .btn:active{transform:translateY(1px);box-shadow:0 2px 0 var(--cta-dunkel), 0 6px 16px rgba(248,152,64,.24)} .btn:focus-visible{outline:3px solid var(--tintenblau);outline-offset:3px} .btn.klein{min-height:46px;padding:10px 20px;font-size:15px} /* Zweiter CTA: Infopaket – gleiche Form wie .btn, ruhigeres Tuerkis */ .btn.tuerkis{ background:var(--tuerkis);color:#06303d;border-color:var(--tuerkis-dunkel); box-shadow:0 3px 0 var(--tuerkis-dunkel), 0 10px 24px rgba(63,193,240,.28); } .btn.tuerkis:hover{box-shadow:0 5px 0 var(--tuerkis-dunkel), 0 14px 28px rgba(63,193,240,.34)} .btn.tuerkis:active{box-shadow:0 2px 0 var(--tuerkis-dunkel), 0 6px 16px rgba(63,193,240,.24)} .ghost{ display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:10px 6px; color:inherit;text-decoration:none;font-weight:700; } .ghost:hover{color:var(--tintenblau)} .ghost:focus-visible{outline:3px solid var(--tintenblau);outline-offset:3px} /* ── Header ─────────────────────────────── */ /* Farben umgedreht – Header dunkel (Wortmarke kommt zur Geltung), Hero hell */ header.top{ position:sticky;top:0;z-index:50; background:rgba(30,30,30,.97);backdrop-filter:blur(6px); border-bottom:4px solid var(--gelb); box-shadow:0 2px 16px rgba(0,0,0,.22); } .top-inner{display:flex;align-items:center;gap:18px;min-height:64px} .top-inner .wortmarke{height:42px;width:auto} @media(min-width:860px){ .top-inner .wortmarke{height:50px} } [hidden]{display:none!important} nav.haupt{display:none;gap:8px;margin-left:auto} nav.haupt a{ display:inline-flex;align-items:center;min-height:44px;padding:4px 10px; text-decoration:none;font-weight:700;font-size:15.5px;color:var(--kreide); border-bottom:2px solid transparent; } nav.haupt a:hover{color:var(--gelb);border-bottom-color:var(--gelb)} nav.haupt a[aria-current="page"], nav.haupt a.aktiv{color:var(--gelb);border-bottom-color:var(--gelb)} nav.haupt a:focus-visible{outline:3px solid var(--gelb);outline-offset:2px;border-radius:6px} /* ── Untermenüs: Kurse und Wissen klappen bei Hover/Fokus auf ── */ .menue-punkt{position:relative;display:inline-flex} .menue-punkt > a::after{content:"";width:0;height:0;margin-left:7px;border:4px solid transparent;border-top-color:currentColor;transform:translateY(2px);transition:transform .15s ease} .untermenue{ position:absolute;top:100%;left:-10px;min-width:272px;z-index:60; background:var(--tafel);border:1px solid rgba(255,255,255,.14);border-radius:16px; box-shadow:0 20px 44px rgba(0,0,0,.42);padding:8px; opacity:0;visibility:hidden;transform:translateY(-6px); transition:opacity .16s ease, transform .16s ease, visibility 0s .16s; } nav.haupt .untermenue a{ display:block;min-height:0;padding:10px 13px;border-radius:10px;border-bottom:0; color:var(--kreide);font-weight:800;font-size:15px;line-height:1.25;white-space:nowrap; } nav.haupt .untermenue a small{display:block;font-weight:400;font-size:12.5px;opacity:.72;margin-top:3px;white-space:normal} nav.haupt .untermenue a:hover,nav.haupt .untermenue a:focus-visible{background:rgba(255,255,255,.09);color:var(--gelb)} .menue-punkt:hover .untermenue, .menue-punkt:focus-within .untermenue{opacity:1;visibility:visible;transform:none;transition-delay:0s} .menue-punkt:hover > a::after, .menue-punkt:focus-within > a::after{transform:translateY(2px) rotate(180deg)} /* Brücke, damit die Maus zwischen Punkt und Klappe nicht "abreißt" */ .menue-punkt::after{content:"";position:absolute;left:0;right:0;top:100%;height:12px} @media(hover:none){ .untermenue{display:none} } /* Mobiles Menü: Unterpunkte eingerückt */ .mobil-menue a.unterpunkt{padding-left:22px;font-size:16px;opacity:.9;border-left:2px solid rgba(255,255,255,.18);margin-left:4px} /* Mobil: Marke + Burger-Menü („man sieht kein Menü oben") – Desktop: Nav + CTA, Burger versteckt */ .top-cta{display:none;margin-left:auto} @media(min-width:760px){ nav.haupt{display:flex} .top-cta{display:inline-flex;margin-left:8px} } /* ── Burger + Mobil-Menü ────────────────── */ .burger{ display:inline-flex;flex-direction:column;justify-content:center;align-items:center;gap:5px; width:44px;height:44px;margin-left:auto;padding:0; background:none;border:0;cursor:pointer; } .burger span{display:block;width:24px;height:2.5px;background:var(--kreide);border-radius:2px; transition:transform .25s ease, opacity .2s ease} .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)} .burger[aria-expanded="true"] span:nth-child(2){opacity:0} .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)} .burger:focus-visible{outline:3px solid var(--gelb);outline-offset:2px;border-radius:8px} .mobil-menue{ position:absolute;top:100%;left:0;right:0; background:#1c1c1c;border-bottom:4px solid var(--gelb); padding:8px 20px 24px;display:flex;flex-direction:column; box-shadow:0 20px 34px rgba(0,0,0,.38); visibility:hidden;opacity:0;transform:translateY(-8px); transition:opacity .22s ease, transform .22s ease, visibility 0s linear .22s; } .mobil-menue.offen{visibility:visible;opacity:1;transform:none;transition-delay:0s} .mobil-menue a:not(.btn){ color:var(--kreide);text-decoration:none;font-weight:700;font-size:17px; min-height:54px;display:flex;align-items:center; border-bottom:1px solid rgba(255,254,251,.12); } .mobil-menue a[aria-current="page"]{color:var(--gelb)} .mobil-menue a:not(.btn):focus-visible{outline:3px solid var(--gelb);outline-offset:-3px;border-radius:8px} .mobil-menue .btn{margin-top:16px} .menue-kontakt{display:flex;flex-wrap:wrap;gap:4px 22px;margin-top:14px} .mobil-menue .menue-kontakt a{border-bottom:0;font-size:15px;min-height:44px;color:rgba(255,254,251,.85)} @media(min-width:760px){ .burger,.mobil-menue{display:none} } /* ── Hero (helle Bühne fürs Badge) ──────── */ .hero{ background:var(--creme); /* flach statt Verlauf – der Fastweiss-Verlauf leuchtete bei invertierter Darstellung */ color:var(--tinte); padding:52px 0 60px; } @media(min-width:860px){ .hero{padding:68px 0 76px} } /* Badge als Zentralelement oben, alles zentriert, kein Kreide-Pfeil mehr (ruhiger) */ .hero-mitte{display:flex;flex-direction:column;align-items:center;text-align:center} .eyebrow{font-size:13px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:14px} .hero h1{font-size:clamp(29px,6vw,48px);line-height:1.08;font-weight:800;letter-spacing:-.015em;color:var(--tintenblau);max-width:19ch} .hero .sub{font-size:clamp(16px,2.6vw,19px);color:var(--tinte);max-width:48ch;margin:14px 0 28px} .hero-cta{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;justify-content:center} .kontaktzeile{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:18px} .kontaktzeile a{color:var(--tinte);text-decoration:none;font-weight:700;font-size:16.5px;display:inline-flex;align-items:center;gap:8px;min-height:44px} .kontaktzeile a:hover{color:var(--tintenblau)} .kontaktzeile svg{flex:0 0 auto} .cta-hinweis{font-size:14px;color:var(--muted);margin-top:10px} .hero .kontaktzeile{margin-top:14px;justify-content:center} .hero-badge{max-width:200px;margin-bottom:24px} @media(min-width:860px){ .hero-badge{max-width:250px} } .hero-badge img{filter:drop-shadow(0 8px 22px rgba(26,26,26,.22))} /* ── Pitch ──────────────────────────────── */ .pitch{padding:clamp(56px,8vw,80px) 0 34px} .pitch p{font-size:clamp(18px,2.8vw,22px);line-height:1.55;max-width:58ch;margin-left:auto;margin-right:auto} .pitch mark{background:linear-gradient(transparent 55%, var(--gelb) 55%);padding:0 3px} /* ── Formate ────────────────────────────── */ .karten{display:grid;gap:22px;margin-top:8px} @media(min-width:760px){ .karten{grid-template-columns:1fr 1fr} } .karte{ background:var(--card);border:1px solid var(--line);border-radius:var(--radius); padding:28px 26px 26px;box-shadow:var(--shadow); display:flex;flex-direction:column;gap:10px; } .karte .format-eyebrow{font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .karte h3{color:var(--tintenblau);font-size:22px} .fakten{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 4px} .seite-kopf .fakten{justify-content:center;margin-top:14px} .fakt{white-space:nowrap} .seite-kopf .cta-zeile{display:flex;flex-wrap:wrap;gap:14px 22px;justify-content:center} .fakt{font-size:13.5px;font-weight:700;background:var(--hell);border:1px solid var(--line);border-radius:999px;padding:4px 12px;color:var(--muted)} .karte .cta-zeile{margin-top:auto;padding-top:14px} .karte .tandem-claim{color:var(--tintenblau);font-size:19px} /* Kurskarten mit Marken-Lockups (v12) */ .karte.kurs{padding:0;overflow:hidden;gap:0} .kurs-kopf{background:radial-gradient(130% 160% at 50% -12%, #2b2b2b 0%, var(--tafel) 66%);min-height:190px;display:flex;align-items:center;justify-content:center;padding:26px 22px} .kurs-kopf img{max-width:min(340px,86%);width:100%;height:auto} /* Tandem-Lockup das neue Lockup ist höher als das der Nachbarkarte. Im Zweispalter beide Kartenköpfe gleich hoch, damit die Karten auf einer Linie liegen. Einspaltig (mobil) bleibt es bei 190px – dort steht nichts nebeneinander. */ @media(min-width:760px){ #formate .kurs-kopf{min-height:254px} } .kurs-body{flex:1;display:flex;flex-direction:column;gap:10px;padding:22px 26px 26px} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* Tafel-Kommentar: kurzes Statement, Kreideschrift in Orange */ .zitat-band{background:var(--tafel);padding:clamp(42px,7vw,66px) 0;text-align:center} .zitat-band .chalk{font-size:clamp(26px,5vw,42px);color:var(--cta);line-height:1.25;max-width:36ch;margin:0 auto} /* flache Variante: breit statt blockig */ .zitat-band.flach{padding:26px 0 24px} .zitat-band.flach .chalk{max-width:none;font-size:clamp(22px,2.9vw,31px);line-height:1.3} .zitat-band.flach .chalk span{display:block} @media(min-width:900px){ .zitat-band.flach .chalk{max-width:none} .zitat-band.flach .chalk span{display:inline;margin-left:.4em;color:var(--gelb)} } .entscheider{ margin-top:26px;background:var(--blau-hell);border:1px solid var(--blau-line); border-radius:var(--radius);padding:26px 28px; } .entscheider .frage{font-size:24px;color:var(--tintenblau);margin-bottom:8px} .entscheider strong{color:var(--tintenblau)} .entscheider p{max-width:70ch} /* ── Säulen ─────────────────────────────── */ .saeulen{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .unterstrich{width:210px;margin:-6px 0 28px} /* „Alles zum Kurs" – rechtsbündig, klar als Link erkennbar, mit Kreide-Pfeil */ .cta-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px} .mehr-link{position:relative;margin-left:auto;display:inline-flex;align-items:center;min-height:44px; font-weight:800;font-size:15.5px;color:var(--tintenblau);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px} .mehr-link:hover{color:var(--cta-dunkel);text-decoration-color:var(--cta)} .mehr-link:focus-visible{outline:3px solid var(--tintenblau);outline-offset:3px;border-radius:6px} .mehr-doodle{position:static;color:var(--cta);width:30px;height:20px;margin-left:6px;transform:rotate(-4deg);flex:none} @media(max-width:520px){ .mehr-link{margin-left:0} .mehr-doodle{display:none} } .saeulen-grid{display:grid;gap:16px} @media(min-width:680px){ .saeulen-grid{grid-template-columns:1fr 1fr} } @media(min-width:1000px){ .saeulen-grid{grid-template-columns:repeat(5,1fr)} } .saeule{ background:var(--creme);border:1px solid var(--line);border-radius:var(--radius); padding:20px 16px;display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center; } .saeule img{width:84px;height:84px;object-fit:contain;transition:transform .25s ease} .saeule:hover img{transform:translateY(-4px)} .saeule .nr{font-size:12px;font-weight:800;letter-spacing:.12em;color:var(--muted)} .saeule h3{font-size:16.5px;color:var(--tintenblau)} .saeule .ich{font-size:15px;color:var(--tinte);line-height:1.45} .saeule .tiername{font-size:12.5px;font-weight:700;color:var(--muted)} .zuordnung-hinweis{margin-top:16px;font-size:13.5px;color:var(--muted)} /* ── Bausteine (Woraus jede Stunde gemacht ist) ── */ .baustein h3{color:var(--tintenblau);font-size:19px} .baustein p{font-size:15.5px} #bausteine .band-blau{margin-bottom:0} /* ── Testimonials ───────────────────────── */ .testi-grid{display:grid;gap:18px;margin-top:6px} @media(min-width:760px){ .testi-grid{grid-template-columns:repeat(3,1fr)} } .testi{ background:var(--card);border:1px solid var(--line);border-radius:var(--radius); padding:22px;position:relative; } .testi .strich{color:var(--tintenblau);font-size:34px;line-height:.6} .stimmen-notiz{ background:var(--card);border:1px solid var(--line);border-radius:var(--radius); padding:28px 26px;max-width:620px;box-shadow:var(--shadow); } .stimmen-notiz .gross{font-size:26px;color:var(--tintenblau);margin-bottom:6px} /* ── Team ───────────────────────────────── */ .team-grid{display:grid;gap:30px;align-items:center} @media(min-width:820px){ .team-grid{grid-template-columns:auto 1fr} } .portraits{display:flex;gap:18px} .portraits figure{text-align:center} .portraits img{ width:132px;height:132px;object-fit:cover;border-radius:50%; border:4px solid var(--card);box-shadow:var(--shadow);filter:grayscale(1); } .portraits figcaption{font-size:14px;font-weight:700;margin-top:8px;color:var(--muted)} .team-text p{max-width:56ch;font-size:clamp(17px,2.6vw,20px)} /* ── Einrichtungen (Palette-Blau statt Alt-Lila) ── */ .einrichtungen{background:var(--blau-hell);border-top:1px solid var(--blau-line);border-bottom:1px solid var(--blau-line)} .einr-grid{display:grid;gap:20px;margin:18px 0 22px} @media(min-width:760px){ .einr-grid{grid-template-columns:1fr 1fr} } .einr-card{background:#fff;border:1px solid var(--blau-line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)} .einr-card h3{color:var(--tintenblau);margin-bottom:8px} .einr-card ul{margin:8px 0 0 18px} .einr-card li{margin:4px 0} /* ── FAQ ────────────────────────────────── */ .faq details{ background:var(--card);border:1px solid var(--line);border-radius:14px; margin-bottom:12px;overflow:hidden;transition:border-color .2s ease; } .faq details[open]{border-color:var(--blau-line);box-shadow:var(--shadow)} .faq summary{ cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:center; padding:18px 20px;font-weight:800;font-size:16.5px;min-height:52px; } .faq summary:hover{background:#faf5e6} .faq summary:focus-visible{outline:3px solid var(--tintenblau);outline-offset:-3px} .faq summary::-webkit-details-marker{display:none} .faq summary::after{ content:"+";flex:0 0 auto;width:28px;height:28px;border-radius:50%; display:inline-flex;align-items:center;justify-content:center; border:2px solid var(--blau-line);color:var(--tintenblau); font-size:19px;font-weight:600;line-height:1; transition:transform .25s ease, background .2s ease; } .faq details[open] summary::after{content:"–";background:var(--blau-hell);transform:rotate(180deg)} .faq details[open] summary{color:var(--tintenblau)} .faq .antwort{padding:0 20px 20px;color:var(--tinte)} .faq .antwort p{max-width:70ch} .offen-badge{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:#fdeeea;border:1px solid var(--cta);color:#8a4a10;border-radius:999px;padding:3px 10px} /* ── Wissen ─────────────────────────────── */ .wissen-grid{display:grid;gap:18px;margin-top:6px} @media(min-width:760px){ .wissen-grid{grid-template-columns:repeat(3,1fr)} } .artikel{ background:var(--card);border:1px solid var(--line);border-radius:var(--radius); padding:22px;display:flex;flex-direction:column;gap:10px; } .artikel .kicker{font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .artikel h3{color:var(--tintenblau)} .artikel .bald{margin-top:auto;font-size:13.5px;color:var(--muted);font-weight:700} /* ── Abschluss-CTA (Tafel-Band) ─────────── */ .abschluss{ background: linear-gradient(rgba(30,30,30,.6), rgba(30,30,30,.78)), var(--tafel) url("../img/tafel-textur.webp") center/cover; color:var(--kreide);text-align:center;padding:clamp(64px,9vw,88px) 0; } .abschluss .chalk{font-size:clamp(26px,5vw,40px);color:var(--kreide);margin-bottom:8px} .abschluss p{color:rgba(255,254,251,.9);margin-bottom:26px} .abschluss .kontaktzeile{justify-content:center} .abschluss .kontaktzeile a{color:var(--kreide)} .abschluss .kontaktzeile a:hover{color:var(--gelb)} /* ── Footer ─────────────────────────────── */ footer.fuss{background:var(--tafel);color:rgba(255,254,251,.78);padding:46px 0 58px;border-top:4px solid var(--gelb)} .fuss-grid{display:grid;gap:26px} @media(min-width:760px){ .fuss-grid{grid-template-columns:1.2fr 1fr 1fr} } .fuss h4{font-size:14px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,254,251,.5);margin-bottom:10px} .fuss ul{list-style:none} .fuss li{margin:6px 0} .fuss a{text-decoration:none;font-weight:600;color:var(--kreide)} .fuss a:hover{color:var(--gelb)} .fuss .marke{font-weight:800;color:var(--kreide)} .fuss .platzhalter{color:var(--muted);font-style:italic} .fuss small{display:block;margin-top:26px;color:rgba(255,254,251,.45)} /* ── Anfrage-Formular ── */ .anfrage{background:var(--card);border-top:1px solid var(--line)} .anfrage .hinweis-termine{color:var(--muted);font-size:15px} .formular{ max-width:660px;display:flex;flex-direction:column;gap:18px; background:#fff;border:1px solid var(--line);border-radius:var(--radius); padding:clamp(22px,4vw,32px);box-shadow:var(--shadow); } .feld{display:flex;flex-direction:column;gap:6px;flex:1} .feld-reihe{display:flex;flex-direction:column;gap:18px} @media(min-width:640px){ .feld-reihe{flex-direction:row} } .feld label{font-weight:800;font-size:15px} .feld input,.feld select,.feld textarea{ font:inherit;font-size:16px;color:var(--tinte);background:#fff; border:1.5px solid var(--line);border-radius:12px; padding:13px 14px;min-height:50px;width:100%; transition:border-color .15s ease, background .15s ease; } .feld input:hover,.feld select:hover,.feld textarea:hover{border-color:#cfc4a6} .feld textarea{min-height:90px;resize:vertical} .feld input:focus-visible,.feld select:focus-visible,.feld textarea:focus-visible{ outline:3px solid var(--tintenblau);outline-offset:1px;border-color:var(--tintenblau);background:#fff; } .einwilligung{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--tinte);max-width:640px} .einwilligung input{width:22px;height:22px;margin-top:2px;flex:0 0 auto;accent-color:var(--tintenblau)} .anfrage .btn{align-self:stretch} @media(min-width:640px){ .anfrage .btn{align-self:flex-start} } /* Honeypot: für Menschen unsichtbar, für Bots ein normales Feld */ .hp-feld{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden} .form-fehler{ background:#fdeeea;border:1px solid var(--cta);color:#8a2a10; border-radius:14px;padding:14px 18px;margin-bottom:16px;max-width:660px;font-weight:700; } /* ── Trust-Leiste ───────────────────────── */ .trust{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .trust-inner{ display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:center; padding:15px 20px;font-size:14.5px;font-weight:700;color:var(--tinte); } .trust-inner span{display:inline-flex;align-items:baseline;gap:7px;text-align:left;max-width:100%} .trust-inner span::before{content:"✓";color:var(--cta-dunkel);font-weight:800;flex:0 0 auto} @media(min-width:760px){ .trust-inner span{white-space:nowrap} } /* ── Sticky-Mobile-CTA (nur klein; erscheint per JS nach dem Hero) ── */ .mobil-cta{ position:fixed;left:0;right:0;bottom:0;z-index:40; display:flex;justify-content:center; padding:10px 16px calc(12px + env(safe-area-inset-bottom)); background:linear-gradient(transparent, rgba(255,250,239,.94) 42%); pointer-events:none; transform:translateY(110%);transition:transform .3s ease; } .mobil-cta.sichtbar{transform:none} .mobil-cta .btn{pointer-events:auto;flex:1;max-width:420px} @media(min-width:760px){ .mobil-cta{display:none} } /* ── Unterseiten ────────────────────────── */ .seite-kopf{padding:clamp(46px,7vw,64px) 0 8px;text-align:center; background:var(--creme)} /* flach statt Verlauf – siehe oben */ .seite-kopf h1{font-size:clamp(28px,5.5vw,44px);line-height:1.1;font-weight:800;letter-spacing:-.015em;color:var(--tintenblau);max-width:24ch;margin:0 auto} .seite-kopf .lead{margin:14px auto 0} /* Marken-Band im Seitenkopf (Ansatz A1, ): Die Kursseiten öffnen mit dem Lockup auf Tafel – dieselbe Fläche wie die Kartenkappe der Startseite, nur über die volle Breite. Gelb darf laut Styleguide nicht auf Creme stehen; die Tafel ist die dafür vorgesehene dunkle Klammer. Das Lockup ersetzt die sichtbare Überschrift, die h1 trägt es. */ .marken-band{background:radial-gradient(130% 190% at 50% -30%, #2b2b2b 0%, var(--tafel) 68%); padding:clamp(20px,3.6vw,30px) 0;text-align:center} .marken-band .marken-titel{margin:0;max-width:none;font-size:0} .marken-band .marken-titel img{display:inline-block;width:min(340px,70%);height:auto} .seite-kopf.knapp{padding-top:clamp(24px,3.4vw,34px)} /* H1 = die Zeile unter dem Lockup (SEO-Doktrin aus seo.md: genau eine H1, und die trägt den Kernbegriff). Sie behält die Optik der Augenbraue – die Bühne macht das Lockup darüber. Nötig, weil `.seite-kopf h1` sonst die große Titelgröße vererbt. */ .seite-kopf h1.eyebrow{font-size:13px;font-weight:800;letter-spacing:.2em;text-transform:uppercase; color:var(--muted);line-height:1.5;max-width:none;margin:0 0 14px} /* Grosse Claimzeile im Seitenkopf Wo die H1 den Suchbegriff trägt (klein, oben), braucht die Seite trotzdem ihren Satz in Titelgröße. Übernimmt die Werte der früheren H1 – gleiche Optik, andere Bedeutung im Dokument. */ .seite-kopf .gross-claim{font-size:clamp(28px,5.5vw,44px);line-height:1.1;font-weight:800; letter-spacing:-.015em;color:var(--tintenblau);max-width:24ch;margin:0 auto} /* Reine Wortmarke im Tafelband (Einrichtungsseite): schmaler als ein Lockup, deshalb eigener Wert. */ .marken-band .wortmarke-band{display:inline-block;width:min(260px,62%);height:auto} .person{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px;margin-bottom:20px;box-shadow:var(--shadow)} .person h2{margin-bottom:10px;font-size:24px} .quali{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 14px} .slot-notiz{background:var(--hell);border-radius:12px;padding:12px 16px;font-size:14.5px;color:var(--muted)} .collage{max-width:560px;margin:28px auto 6px} .collage img{border-radius:var(--radius);box-shadow:var(--shadow)} .pyramide-fig{margin:26px 0 22px;border-radius:24px;padding:34px 22px 24px;background:linear-gradient(rgba(30,30,30,.5),rgba(30,30,30,.7)),var(--tafel) url("../img/tafel-textur.webp") center/cover;box-shadow:0 18px 44px rgba(26,26,26,.22)} .band-blau{background:var(--blau-hell);border:1px solid var(--blau-line);border-radius:var(--radius);padding:26px 28px;margin:22px 0} /* ── Wissen-Artikel ─────────────────────── */ .artikel-body{max-width:720px} .artikel-body p,.artikel-body li{font-size:17.5px;line-height:1.7;max-width:68ch} .artikel-body p{margin:14px 0} .artikel-body h2{font-size:23px;margin:40px 0 10px} .artikel-body ul{margin:12px 0 12px 22px} .artikel-body li{margin:7px 0} .artikel-body .band-blau p{font-size:16.5px} .artikel-meta{color:var(--muted);font-size:14.5px;margin-top:10px} .artikel a.karten-link{text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:10px;height:100%} .artikel:has(a.karten-link){transition:transform .18s ease, box-shadow .18s ease} .artikel:has(a.karten-link):hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(26,26,26,.05),0 14px 34px rgba(31,56,100,.11)} .artikel .weiter{margin-top:auto;font-weight:800;color:var(--tintenblau)} /* ── Rechtsseiten (Impressum / Datenschutz / AGB) ── */ .rechtstext{max-width:760px} .rechtstext h2{font-size:22px;margin:38px 0 10px} .rechtstext h3{font-size:17.5px;color:var(--tintenblau);margin:24px 0 8px} .rechtstext p,.rechtstext li{max-width:72ch} .rechtstext p{margin:10px 0} .rechtstext ul,.rechtstext ol{margin:10px 0 10px 22px} .rechtstext li{margin:6px 0} .rechtstext hr{border:0;border-top:1px solid var(--line);margin:34px 0} .adressblock{background:var(--card);border:1px solid var(--line);border-radius:var(--radius); padding:22px 24px;margin:18px 0;box-shadow:var(--shadow)} .adressblock p{margin:4px 0} .entwurf-banner{ background:#fdf6e3;border:1px solid #e8d48a;border-radius:14px; padding:16px 20px;margin:20px 0 8px;font-size:15px;max-width:760px; } .entwurf-banner strong{color:#8a6a10} .offen-chip{ display:inline-block;font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase; background:#fdeeea;border:1px solid var(--cta);color:#8a4a10;border-radius:999px; padding:2px 10px;margin-left:6px;vertical-align:2px;white-space:nowrap; } .rechts-kopf{padding:clamp(40px,6vw,56px) 0 8px} .rechts-kopf h1{font-size:clamp(26px,5vw,38px);line-height:1.12;font-weight:800;letter-spacing:-.015em;color:var(--tintenblau)} .rechts-kopf .stand{color:var(--muted);font-size:14.5px;margin-top:10px} /* ── v12 · Display-Schrift für Überschriften ── */ h1,h2,h3{font-family:'Baloo 2','Nunito Sans',sans-serif} .hero h1{font-size:clamp(38px,6.6vw,62px);letter-spacing:-.01em} /* ── v12b · Vorteilsboxen + Häkchen-Lernziele ── */ .vorteile{border-bottom:1px solid var(--line);padding:26px 0 30px;margin-top:-6px} .vorteile-grid{display:grid;gap:12px} @media(min-width:640px){ .vorteile-grid{grid-template-columns:1fr 1fr} } @media(min-width:1020px){ .vorteile-grid{grid-template-columns:repeat(4,1fr)} } .vorteil{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px} .vorteil svg{width:32px;height:32px;margin-bottom:8px} .vorteil h3{font-size:17px;color:var(--tintenblau);margin-bottom:4px} .vorteil p{font-size:14.5px;line-height:1.5;color:var(--tinte)} .lernziele-titel{font-size:15px;margin-bottom:-2px} .lernziele{list-style:none;display:flex;flex-direction:column;gap:7px;font-size:15px;padding:0} .lernziele li{position:relative;padding-left:24px;line-height:1.45} .lernziele li::before{content:"✓";position:absolute;left:2px;top:0;color:var(--cta-dunkel);font-weight:800} /* Sprungziele unter dem klebenden Header freihalten */ [id]{scroll-margin-top:84px} /* ── v12c · Pyramide als HTML (palettenkonform, lesbar auf Creme) ── */ .pyramide{display:flex;flex-direction:column;align-items:center;gap:7px;max-width:720px;margin:0 auto} .stufe{color:var(--tinte);text-align:center;padding:12px 16px;border-radius:12px;display:flex;flex-direction:column;gap:2px;box-shadow:0 8px 22px rgba(0,0,0,.35)} .stufe strong{font-family:'Baloo 2','Nunito Sans',sans-serif;font-size:16.5px;line-height:1.2} .stufe span{font-size:13px;opacity:.92;line-height:1.35} .s5{width:max(46%,210px);background:#e2661f;color:#fff} .s5 span{opacity:.92} .s4{width:max(60%,240px);background:#f28a2e;color:#fff} .s3{width:max(74%,270px);background:#f9a83a} .s2{width:max(87%,300px);background:#ffc21a} .s1{width:100%;background:var(--gelb)} .pyramide-legende{text-align:center;font-size:14px;color:rgba(255,254,251,.85);margin-top:16px} .pyramide-legende .innen,.pyramide-legende .aussen{font-weight:800;color:var(--gelb)} /* Kennenlern-Band (Einrichtungen) */ .kennenlern{text-align:center} .kennenlern .chalk{font-size:clamp(24px,4vw,32px);color:var(--tintenblau);margin-bottom:8px} .kennenlern p{max-width:56ch;margin-left:auto;margin-right:auto} .kennenlern-cta{margin-top:18px} .kennenlern-kontakt{margin-top:12px;font-weight:700} /* Leben in den Karten */ .karte{transition:transform .25s ease,box-shadow .25s ease} @media(hover:hover){ .karte:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(26,26,26,.12)} } /* ══════════ v2 · Modernisierung (Design v13) ══════════ */ .hell{background:var(--hell)} /* Infopaket hebt sich von der FAQ ab: eigene Fläche + Trennlinien */ .infopaket{background:var(--blau-hell);border-top:1px solid var(--blau-line);border-bottom:1px solid var(--blau-line)} /* Hero-Split */ .hero-grid{display:grid;gap:30px;align-items:center} .hero-split .hero-text{text-align:center} .hero-split .hero-cta{justify-content:center} .hero-split .hero-text .sub{margin-left:auto;margin-right:auto} @media(min-width:900px){ .hero-grid{grid-template-columns:1.05fr .95fr;gap:48px} .hero-split .hero-text{text-align:left} .hero-split .hero-cta{justify-content:flex-start} .hero-split .hero-text .sub{margin-left:0} .hero-split h1{max-width:12ch} } .tafel-panel{position:relative;border-radius:28px;aspect-ratio:1/1;max-width:520px;margin:0 auto;display:flex;align-items:center;justify-content:center;padding:34px; background:linear-gradient(rgba(30,30,30,.55),rgba(30,30,30,.72)),var(--tafel) url("../img/tafel-textur.webp") center/cover;box-shadow:0 24px 60px rgba(26,26,26,.22)} .tafel-panel img{width:78%;height:auto;filter:drop-shadow(0 10px 24px rgba(0,0,0,.45))} .tafel-panel .kreide-notiz{position:absolute;right:22px;bottom:18px;color:var(--gelb);font-size:20px;transform:rotate(-4deg)} /* Trainingsort */ .ort-grid{display:grid;gap:28px;align-items:center} @media(min-width:900px){ .ort-grid{grid-template-columns:.9fr 1.1fr;gap:48px} .ort-grid.ohne-fotos{grid-template-columns:1fr;max-width:820px} } .ort .adresse{margin-top:14px;line-height:1.7} .ort .adresse .fakt{display:inline-block;margin:6px 6px 0 0} .foto-raster{display:grid;grid-template-columns:1fr 1fr;gap:12px} .foto-platz{aspect-ratio:4/3;border-radius:16px;background:linear-gradient(135deg,#eef2fa 0%,#d9e2f2 100%);border:1.5px dashed #b9c6de;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--tintenblau);font-size:13.5px;font-weight:700;line-height:1.45;padding:12px} .foto-platz em{font-style:normal;font-weight:600;opacity:.75} /* Zahlen */ .zahlen{background:var(--tafel);color:#fff;padding:34px 0 30px} .zahlen-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 14px;text-align:center} @media(min-width:760px){ .zahlen-grid{grid-template-columns:repeat(4,1fr)} } .zahlen strong{display:block;font-family:'Baloo 2','Nunito Sans',sans-serif;font-size:clamp(42px,6vw,66px);line-height:1;color:var(--gelb)} .zahlen span{display:block;margin-top:4px;font-size:14.5px;opacity:.9} /* Säulen ohne Kästen */ .saeulen{background:var(--creme);border:0} .saeule{background:none;border:0;box-shadow:none;padding:10px 6px} .saeule img{width:110px;height:110px} /* Tierhelden-Laufband */ .laufband{background:var(--tafel);padding:30px 0 26px;overflow:hidden} /* zarte Variante auf der Kursseite: zwei ruhige Bänder, kleinere Tiere */ .laufband.zart{padding:26px 0 30px} .laufband.zart .laufband-text{margin:0 0 16px;font-size:clamp(17px,2.2vw,22px);text-align:center} .laufband.zart .laufband-spur + .laufband-spur{margin-top:14px} .laufband.zart .laufband-spur + .laufband-spur .laufband-inhalt{animation-direction:reverse} .laufband.zart img{width:48px;height:48px} .laufband.zart figcaption{font-size:18px;color:var(--kreide);opacity:.92} .laufband.zart .laufband-inhalt{gap:38px;padding-right:38px} .laufband-spur{display:flex;width:max-content} .laufband-inhalt{display:flex;align-items:center;gap:52px;padding-right:52px;animation:lauf 36s linear infinite} .laufband-spur:hover .laufband-inhalt{animation-play-state:paused} .laufband figure{display:flex;align-items:center;gap:12px;margin:0;white-space:nowrap} .laufband img{width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,.4))} .laufband figcaption{font-family:'Gochi Hand',cursive;font-size:22px;color:var(--kreide)} .laufband-text{text-align:center;color:var(--gelb);font-size:clamp(18px,3vw,24px);margin-top:18px} @keyframes lauf{to{transform:translateX(-100%)}} @media(prefers-reduced-motion:reduce){ .laufband-inhalt{animation:none} .laufband-spur{width:auto;overflow-x:auto} } /* Leises Laufband Auf der Kursseite ist Dunkel die Klammer oben und unten – ein schwarzes Band mittendrin drückt. Hier deshalb helle Fläche, EINE Spur statt zwei gegenläufigen und ein dreimal langsamerer Umlauf. Muss NACH den .zart-Regeln stehen, sonst gewinnen deren Maße (gleiche Spezifität, spätere Regel zählt). */ .laufband.hell{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line); padding:clamp(24px,3.6vw,32px) 0} .laufband.hell .laufband-text{color:var(--tintenblau);margin:0 0 18px;font-size:clamp(21px,2.8vw,26px);text-align:center} .laufband.hell img{width:52px;height:52px;filter:none} .laufband.hell figcaption{font-size:20px;color:var(--tinte);opacity:1} .laufband.hell .laufband-inhalt{gap:44px;padding-right:44px} .laufband.hell .mehr figcaption{color:var(--muted);font-size:18px} /* Stundenablauf */ .ablauf{list-style:none;padding:0;display:grid;gap:10px;margin:26px 0 30px} @media(min-width:760px){ .ablauf{grid-template-columns:15fr 10fr 25fr 10fr} } .phase{border-radius:16px;padding:18px 16px;color:#fff;display:flex;flex-direction:column;gap:6px;min-height:150px} .phase .min{font-family:'Baloo 2','Nunito Sans',sans-serif;font-size:24px;line-height:1} .phase strong{font-size:15.5px;line-height:1.25} .phase p{font-size:13.5px;line-height:1.4;opacity:.92} .p1{background:#2a4a7d}.p2{background:#3a5c92}.p4{background:#4d70a6} .p3{background:var(--cta);color:var(--tinte)} .p3 p{opacity:.85} .zutaten{display:grid;gap:16px 26px;margin:0} @media(min-width:640px){ .zutaten{grid-template-columns:1fr 1fr} } .zutaten dt{font-family:'Baloo 2','Nunito Sans',sans-serif;font-size:18px;color:var(--tintenblau);margin-bottom:2px} .zutaten dd{margin:0;font-size:15px;line-height:1.5} /* Elternstimme groß */ .zitat-gross{margin:10px auto 0;max-width:820px;text-align:center} .zitat-gross blockquote{font-family:'Baloo 2','Nunito Sans',sans-serif;font-weight:700;font-size:clamp(21px,3.4vw,30px);line-height:1.3;color:var(--tintenblau);margin:0} .zitat-gross .anf{color:var(--gelb);font-size:1.5em;line-height:0;vertical-align:-.15em} .zitat-gross figcaption{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:20px;font-size:14.5px;color:var(--muted);text-align:left} .zitat-gross .avatar{width:44px;height:44px;border-radius:50%;background:var(--creme);border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;font-weight:800;color:var(--tintenblau)} /* Pfeil-Liste */ .pfeil-liste{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)} .pfeil-liste li{border-bottom:1px solid var(--line)} .pfeil-liste a{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 4px;text-decoration:none;color:var(--tinte);font-size:16.5px;line-height:1.4} .pfeil-liste a strong{color:var(--tintenblau)} .pfeil-liste .pfeil{font-size:24px;color:var(--cta-dunkel);transition:transform .2s ease} .pfeil-liste a:hover .pfeil{transform:translateX(6px)} /* Team mit großen Fotos */ .team-v2 .portraits{display:grid;grid-template-columns:1fr 1fr;gap:14px} .team-v2 .portraits figure{margin:0} .team-v2 .portraits img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:20px;height:auto} @media(min-width:860px){ .team-v2.team-grid, .team-v2 .team-grid{grid-template-columns:1fr 1fr;gap:44px} } /* v2 · Hero-Motiv (Illustration) */ .hero-motiv{margin:0 auto;max-width:470px;border-radius:28px;overflow:hidden;box-shadow:0 26px 60px rgba(26,26,26,.28);background:var(--tafel)} .hero-motiv img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover} /* v2 · Seitenkopf als Split (Über uns) */ .kopf-grid{display:grid;gap:26px;align-items:center} .kopf-split{text-align:center} .kopf-split .lead{margin-left:auto;margin-right:auto} .kopf-split .kopf-bild img{width:100%;height:auto;border-radius:24px;box-shadow:0 18px 44px rgba(26,26,26,.18)} @media(min-width:900px){ .kopf-grid{grid-template-columns:1.05fr .95fr;gap:48px} .kopf-split{text-align:left} .kopf-split h1,.kopf-split .lead,.kopf-split p{margin-left:0} } .pfeil-liste .teaser{font-size:14.5px;color:var(--muted);font-weight:400} /* ══════════ v2c · Kreide-Ebene (Annotationen, dosiert) ══════════ */ .doodle{position:absolute;pointer-events:none;filter:url(#kreide);overflow:visible} .doodle use{fill:none;stroke:currentColor;stroke-width:4.2;stroke-linecap:round;stroke-linejoin:round} .doodle.stern use{fill:currentColor;stroke:none} .hero-cta{position:relative} .pfeil-cta{display:none;color:var(--cta);width:96px;height:64px;left:-106px;top:-2px;transform:rotate(14deg)} @media(min-width:1200px){ .pfeil-cta{display:block} } /* Der Pfeil trug Kreide-Cyan – dieselbe Farbe wie der Knopf DANEBEN, während er auf den orangen zeigt. Ein Zeiger muss die Farbe seines Ziels tragen. */ .kringel{position:relative;white-space:nowrap} .kringel-svg{color:var(--kreide-pink);left:-10px;top:-12px;width:calc(100% + 20px);height:calc(100% + 24px)} .kringel-svg use{stroke-width:3.4} .kicker{display:inline-block;font-family:'Gochi Hand',cursive;font-size:clamp(20px,3vw,26px);line-height:1;margin-bottom:6px;transform:rotate(-2deg)} .kicker.pink{color:var(--kreide-pink)} .kicker.cyan{color:var(--kreide-cyan)} .kurs-kopf{position:relative} .sticker{position:absolute;top:12px;right:14px;width:86px;height:86px;display:flex;align-items:center;justify-content:center;text-align:center; background:var(--gelb);color:var(--tinte);font-family:'Gochi Hand',cursive;font-size:15px;line-height:1.05;transform:rotate(9deg); clip-path:polygon(50% 0%,61% 12%,76% 6%,80% 21%,96% 26%,90% 40%,100% 50%,90% 60%,96% 74%,80% 79%,76% 94%,61% 88%,50% 100%,39% 88%,24% 94%,20% 79%,4% 74%,10% 60%,0% 50%,10% 40%,4% 26%,20% 21%,24% 6%,39% 12%)} .zettel-reihe{display:flex;flex-wrap:wrap;gap:16px;margin:18px 0 10px} .zettel{flex:1 1 140px;max-width:240px;position:relative;padding:16px 16px 16px;border-radius:6px;font-size:14.5px;line-height:1.45;color:var(--tinte);box-shadow:0 10px 24px rgba(26,26,26,.14)} .zettel::before{content:"";position:absolute;top:-9px;left:50%;width:66px;height:16px;margin-left:-33px;background:rgba(255,255,255,.6);transform:rotate(-3deg);box-shadow:0 1px 2px rgba(0,0,0,.08)} .zettel-titel{display:block;font-family:'Gochi Hand',cursive;font-size:22px;margin-bottom:4px;line-height:1} .zettel em{font-style:normal;opacity:.7} .zettel.gruen{background:#d6f0c2;transform:rotate(-1.5deg)} .zettel.gelb{background:#ffe9a3;transform:rotate(1.2deg)} .zettel.pink{background:#ffd3e4;transform:rotate(-.8deg)} .laufband{position:relative} .laufband .stern{color:var(--gelb);width:30px;height:30px} .laufband .stern-a{left:5%;top:14px} .laufband .stern-b{right:6%;bottom:16px;width:22px;height:22px} /* ── Einwilligungs-Banner ── */ .consent{position:fixed;left:14px;right:14px;bottom:14px;z-index:95;max-width:700px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 22px 60px rgba(26,26,26,.28);padding:20px 22px 18px} .consent-titel{font-family:'Baloo 2','Nunito Sans',sans-serif;font-size:20px;color:var(--tintenblau);margin-bottom:6px} .consent-text{font-size:14.5px;line-height:1.5;color:var(--tinte)} .consent-text a{color:var(--tintenblau)} .consent-aktionen{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px} .consent-aktionen .btn{flex:1 1 180px;text-align:center;justify-content:center} .btn.hell{background:#fff;color:var(--tinte);border:2px solid var(--tinte);box-shadow:none} .btn.hell:hover{background:var(--hell)} @media(min-width:760px){ .consent{left:24px;right:auto;bottom:24px;width:min(560px,calc(100% - 48px))} } /* Original-Pyramide (Programm-Grafik) auf Tafel */ .pyramide-bild{display:block;width:100%;max-width:760px;height:auto;margin:0 auto;filter:drop-shadow(0 10px 24px rgba(0,0,0,.45))} /* ── Einrichtungen v2: drei Karten, Referenzen, Ablauf ── */ @media(min-width:760px){ .karten.drei{grid-template-columns:1.15fr 1fr;align-items:stretch} .karten.drei > :first-child{grid-row:1 / span 2} } .referenzen{font-size:16px;gap:10px;margin-top:18px} .referenzen li{padding-left:28px} .referenzen li::before{font-size:18px} .schritte{list-style:none;padding:0;display:grid;gap:14px;margin-top:8px} @media(min-width:760px){ .schritte{grid-template-columns:repeat(4,1fr)} } .schritte li{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 18px 16px;display:flex;flex-direction:column;gap:6px} .schritte .nr{width:34px;height:34px;border-radius:50%;background:var(--gelb);color:var(--tinte);font-family:'Baloo 2','Nunito Sans',sans-serif;font-size:18px;display:inline-flex;align-items:center;justify-content:center;margin-bottom:4px} .schritte strong{font-size:16px;color:var(--tintenblau)} .schritte p{font-size:14.5px;line-height:1.45} /* Kündigungsschaltfläche (§ 312k BGB): auf jeder Seite im Fußbereich, als Schaltfläche erkennbar */ .fuss .kuendigen-link{display:inline-block;margin:6px 0 4px;padding:6px 12px;border:1.5px solid var(--kreide);border-radius:999px;font-size:13.5px} .fuss .kuendigen-link:hover{border-color:var(--gelb)} /* ── Über uns: Bio-Layout (Polaroids + Zettel + Kommentar-Ebene) ── */ .person.bio{position:relative;display:grid;gap:22px;align-items:start} @media(min-width:900px){ .person.bio{grid-template-columns:280px 1fr;gap:36px;padding:32px 34px} } .bio-fotos{display:grid;gap:26px;justify-items:center} .polaroid{position:relative;margin:8px 0 0;background:#fff;padding:12px 12px 36px;box-shadow:0 14px 30px rgba(26,26,26,.16);transform:rotate(-2.2deg);max-width:230px;width:100%} .polaroid img{display:block;width:100%;height:auto} .polaroid figcaption{position:absolute;left:0;right:0;bottom:8px;text-align:center;font-family:'Gochi Hand',cursive;font-size:20px;color:var(--kreide-pink);line-height:1} .polaroid::before{content:"";position:absolute;top:-10px;left:50%;width:78px;height:20px;margin-left:-39px;background:#ffd3e4;opacity:.9;transform:rotate(-3deg);box-shadow:0 1px 2px rgba(0,0,0,.08)} .polaroid.fertig{background:none;padding:0;box-shadow:none;max-width:280px;transform:rotate(-1.5deg)} .polaroid.fertig::before{display:none} .polaroid.fertig.zwei{transform:rotate(2deg);margin-top:-6px} .bio-text{position:relative} .zettel.quali{max-width:420px;padding:16px 22px 14px;margin:6px 0 18px;transform:rotate(-1.2deg)} .zettel.quali ul{list-style:none;margin:0;padding:0;font-family:'Gochi Hand',cursive;font-size:19px;line-height:1.35;color:#1a1a1a} .zettel.blau{background:#a6c4de} .zettel.quali.gruen{transform:rotate(.9deg)} .doodle-png{display:none;position:absolute;pointer-events:none;height:auto} @media(min-width:1100px){ .doodle-png{display:block} .doodle-png.gehirn{width:150px;right:-18px;top:-22px;transform:rotate(8deg)} .doodle-png.faust{width:64px;right:-6px;top:150px;transform:rotate(-10deg)} .doodle-png.buch{width:104px;right:-52px;bottom:-46px;transform:rotate(6deg)} } .zitat-band .quelle{margin:14px 0 0;text-align:center;color:var(--kreide);opacity:.85;font-size:14px;letter-spacing:.08em;text-transform:uppercase} @media(max-width:600px){ .zettel.quali ul{font-size:17px} .polaroid{max-width:210px} } /* Partner-Logo-Wand (Einrichtungen) */ .logo-wand{margin-top:22px} .logo-wand-titel{font-size:15.5px;margin:0 0 12px} .logo-raster{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px} .logo-raster li{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden} .logo-raster img{display:block;width:100%;height:auto} .logo-raster a{display:block;transition:transform .18s ease,box-shadow .18s ease} .logo-raster a:hover,.logo-raster a:focus-visible{transform:translateY(-2px);box-shadow:0 8px 20px rgba(31,56,100,.12);outline:none} .logo-raster a:focus-visible{box-shadow:0 0 0 3px var(--tuerkis)} .band-blau.mit-foto{display:grid;gap:22px;align-items:center} @media(min-width:900px){ .band-blau.mit-foto{grid-template-columns:250px 1fr;gap:30px} } .polaroid.fertig.familie{max-width:250px;margin:0 auto;transform:rotate(-2deg)} .polaroid.fertig.hunde{max-width:230px;margin:14px 0 0 auto;transform:rotate(2.5deg)} @media(min-width:900px){ .polaroid.fertig.hunde{margin:-6px -10px 0 auto} } /* ── Infopaket-Sektion (weiche Tür) ── */ .infopaket-grid{display:grid;gap:26px;align-items:start} @media(min-width:900px){ .infopaket-grid{grid-template-columns:1.1fr 1fr;gap:40px;align-items:center} } .infopaket-form{max-width:none;margin:0} .infopaket-text h2{margin-top:0} /* Säulen: Symbole statt Tierhelden (Tiere = Thementiere, nicht Säulen) */ .saeule-icon{display:inline-flex;width:84px;height:84px;border-radius:50%;background:#ffe9a3;align-items:center;justify-content:center;margin:0 auto 10px;color:var(--tintenblau)} .saeule-icon svg{width:44px;height:44px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} @media(min-width:960px){ .saeule-icon{width:96px;height:96px} .saeule-icon svg{width:50px;height:50px} } .pitch-signatur{margin-top:14px;font-size:15px;color:var(--muted)} .pitch-signatur a{color:var(--tintenblau)} /* ── Unterrichtszeiten & Buchtipps ── */ .zeiten-tabelle{width:100%;border-collapse:collapse;margin:6px 0 4px;font-size:15.5px} .zeiten-tabelle th,.zeiten-tabelle td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)} .zeiten-tabelle th{background:var(--hell);font-family:'Baloo 2','Nunito Sans',sans-serif;font-size:14px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)} .zeiten-tabelle a{color:var(--tintenblau)} .klein-hinweis{font-size:13.5px;color:var(--muted)} @media(max-width:700px){ .zeiten-tabelle,.zeiten-tabelle tbody,.zeiten-tabelle tr,.zeiten-tabelle td{display:block;width:100%} .zeiten-tabelle thead{display:none} .zeiten-tabelle tr{border:1px solid var(--line);border-radius:14px;padding:6px 4px;margin-bottom:12px} .zeiten-tabelle td{border-bottom:0;padding:6px 12px} } .buchliste{list-style:none;margin:0;padding:0} .buchliste li{padding:14px 0;border-bottom:1px solid var(--line)} .buchliste strong{display:block;font-family:'Baloo 2','Nunito Sans',sans-serif;font-size:18px;color:var(--tintenblau)} .buchliste .warum{display:block;margin:6px 0 0;color:var(--tinte);font-size:15.5px;line-height:1.6;max-width:68ch} /* ══════════ Motive, Gürtel-System, Säulen-Symbole ══════════ */ /* 2 · „Alles zum Kurs": .doodle (position:absolute) stand später im Stylesheet und schlug .mehr-doodle – Pfeil lag über dem Text */ .doodle.mehr-doodle{position:static} /* 4 · Dunkle Zitat-Bänder flacher, Text breiter (zwei Zeilen auf Desktop, staucht sich auf Mobil von allein) */ .zitat-band{padding:clamp(30px,4.5vw,44px) 0} .zitat-band .wrap{max-width:1200px} .zitat-band .chalk{font-size:clamp(22px,2.6vw,33px);line-height:1.3;max-width:none} .zitat-band .quelle{margin-top:10px} /* 6 · Pyramide füllt die Tafel: weniger Schwarz, mehr Pyramide */ .pyramide-fig{max-width:960px;margin:26px auto 22px;padding:14px 14px 10px} .pyramide-bild{max-width:none} /* 3 · Anfrage-Formular als Zweispalter auf Desktop: links Formular, rechts „So geht's weiter" */ .anfrage-grid{display:grid;gap:28px;align-items:start} .anfrage-neben .schritte{grid-template-columns:1fr;gap:12px;margin-top:4px} .anfrage-neben .schritte li{background:var(--hell)} .anfrage-neben .kicker{margin-bottom:2px} @media(min-width:960px){ .anfrage-grid{grid-template-columns:minmax(0,660px) minmax(280px,1fr);gap:48px} .anfrage-neben{padding-top:6px} } /* Motive: Danke-Seite mit Kinder-Löwe, Kreide-Band „Freie. Mutige. Kinder." am Ende der Kursseiten */ .danke-bild{display:block;width:240px;height:auto;margin:0 auto 22px;border-radius:22px;box-shadow:0 14px 34px rgba(26,26,26,.22)} .kreide-band{padding:clamp(22px,3.5vw,34px) 0} .kreide-band .kreide-bild{display:block;width:min(100%,420px);height:auto;margin:0 auto;filter:drop-shadow(0 6px 18px rgba(0,0,0,.45))} /* Gürtel-System: Sektion „Heldenstreifen und Gürtel" auf der Kursseite */ .guertel{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .guertel-grid{display:grid;gap:26px;align-items:center;margin-top:6px} @media(min-width:900px){ .guertel-grid{grid-template-columns:1.1fr 1fr;gap:48px} } .guertel-svg{width:100%;height:auto;display:block;filter:drop-shadow(0 8px 20px rgba(26,26,26,.12))} .guertel-fig{margin:0} .guertel-text .lead{margin-bottom:14px} .guertel-legende{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:8px;font-size:14.5px;color:var(--muted)} .guertel-legende li{display:flex;align-items:center;gap:10px} .swatch{width:18px;height:18px;border-radius:5px;flex:none;border:1px solid rgba(0,0,0,.08)} .swatch.bunt{background:linear-gradient(90deg,#3fc1f0,#63c76a,#ff5fa8)} .swatch.stern{background:linear-gradient(#ffe680,#f2bd2e)} .swatch.weiss{background:#fffefb;border-color:#d9d3c3} .guertel-schluss{margin-top:18px;font-family:'Gochi Hand',cursive;font-size:clamp(19px,2.6vw,24px);line-height:1.25;color:var(--tintenblau);transform:rotate(-1deg);max-width:34ch} /* Pfeil eng am Linktext, illustrierte Säulen-Symbole mit Mini-Animation */ .doodle.mehr-doodle{position:static;margin-left:2px;transform:translateY(3px) rotate(-6deg)} .saeule-icon.illu{width:100px;height:100px;background:#ffe9a3} .saeule-icon.illu svg{width:76px;height:76px;stroke:none;stroke-width:0;fill:none;overflow:visible} @media(min-width:960px){ .saeule-icon.illu{width:116px;height:116px} .saeule-icon.illu svg{width:88px;height:88px} } @media(prefers-reduced-motion:no-preference){ .saeule.drin .anim-herz{animation:s-herz 2.8s ease-in-out infinite;transform-origin:60px 78px;transform-box:view-box} @keyframes s-herz{0%,100%{transform:scale(1)}12%{transform:scale(1.14)}24%{transform:scale(1)}36%{transform:scale(1.08)}48%{transform:scale(1)}} .saeule.drin .anim-welle{animation:s-welle 2.4s ease-out infinite;opacity:.25} .saeule.drin .anim-welle:nth-child(2){animation-delay:.35s} .saeule.drin .anim-welle:nth-child(3){animation-delay:.7s} @keyframes s-welle{0%{opacity:.2}35%{opacity:1}100%{opacity:.2}} .saeule.drin .anim-nadel{animation:s-nadel 3.6s ease-in-out infinite;transform-origin:60px 66px;transform-box:view-box} @keyframes s-nadel{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(78deg)}} .saeule.drin .anim-hand{animation:s-hand 3.4s ease-in-out infinite;transform-origin:50px 53px;transform-box:view-box} @keyframes s-hand{0%,55%,100%{transform:rotate(0)}25%{transform:rotate(-9deg)}} .saeule.drin .anim-linie{animation:s-linie 3.4s ease-out infinite} @keyframes s-linie{0%{stroke-dashoffset:80;opacity:1}40%{stroke-dashoffset:0;opacity:1}88%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}} .saeule.drin .anim-lauf{animation:s-lauf 1.2s ease-in-out infinite} @keyframes s-lauf{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.5px)}} .saeule.drin .anim-spur{animation:s-spur 1.2s linear infinite} @keyframes s-spur{0%{transform:translateX(4px);opacity:1}100%{transform:translateX(-10px);opacity:0}} } /* Telefon im Header · Formular-Anker enger · Einrichtungen-Intro */ .top-tel{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;margin-left:auto;padding:0 8px;border-radius:999px;color:var(--kreide);text-decoration:none;font-weight:800;font-size:15px;white-space:nowrap} .top-tel svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none} .top-tel span{display:none} .top-tel:hover,.top-tel:focus-visible{color:var(--gelb)} .top-tel:focus-visible{outline:3px solid var(--gelb);outline-offset:2px} .top-tel + .burger{margin-left:2px} nav.haupt a,.top-cta{white-space:nowrap} @media(min-width:760px) and (max-width:899px){ .top-tel{display:none} } @media(min-width:900px){ .top-tel{margin-left:6px;min-width:40px;padding:0 4px} } @media(min-width:1180px){ .top-tel span{display:inline} .top-tel{padding:0 10px} } #probetraining{scroll-margin-top:72px} .anfrage{padding-top:clamp(30px,5vw,52px)} .intro-block{max-width:62ch;margin:0 auto;text-align:left} .intro-block .lead{max-width:none} .intro-frage{font-weight:800;color:var(--tintenblau);margin-bottom:8px} .intro-frage strong{color:var(--cta-dunkel)} /* Einrichtungen – Angebot auf einen Blick, Gewinn-Balken, Haltung */ .kicker.gruen{color:var(--kreide-gruen)} .angebot h2{margin-bottom:0} .angebot-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px} .angebot-kachel{display:flex;flex-direction:column;gap:5px;padding:16px 16px 15px;background:#fff;border:1px solid var(--line);border-radius:16px;text-decoration:none;color:var(--tinte);box-shadow:0 6px 18px rgba(26,26,26,.05);transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease} .angebot-kachel:hover,.angebot-kachel:focus-visible{border-color:var(--tintenblau);transform:translateY(-2px);box-shadow:0 12px 26px rgba(26,26,26,.09)} .angebot-kachel:focus-visible{outline:3px solid var(--gelb);outline-offset:2px} .angebot-fuer{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .angebot-kachel strong{font-family:'Baloo 2','Nunito Sans',sans-serif;font-size:18px;line-height:1.15;color:var(--tintenblau)} .angebot-was{font-size:14px;line-height:1.45;color:var(--muted)} @media(min-width:760px){ .angebot-grid{grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px} .angebot-kachel{padding:20px 20px 18px;gap:6px} .angebot-kachel strong{font-size:20px} .angebot-was{font-size:15px} } .zitat-band.gewinn .chalk{color:var(--kreide)} .zitat-band .akzent{color:var(--cta)} .haltung-intro{margin:14px 0 6px;max-width:70ch} /* Die Chip-Zeile darf die Karte nicht sprengen – sonst Querscrollen bei 390 px */ .karte{min-width:0} @media(max-width:479px){ .fakt{white-space:normal;text-align:center;line-height:1.35} } /* Tierhelden als Säulen-Symbole */ .saeule-icon.tier{position:relative;width:120px;height:120px;background:#ffe9a3;overflow:visible;margin-bottom:14px} .saeule-icon.tier img{position:absolute;left:50%;bottom:4px;transform:translateX(-50%);width:auto;max-width:none;height:134px;object-fit:contain;filter:drop-shadow(0 8px 10px rgba(26,26,26,.16));transition:transform .25s ease} .saeule:hover .saeule-icon.tier img{transform:translate(-50%,-4px)} .saeule .tiername{margin:-4px 0 6px} @media(min-width:960px){ .saeule-icon.tier{width:136px;height:136px} .saeule-icon.tier img{height:152px;bottom:5px} } @media(prefers-reduced-motion:no-preference){ .saeule.drin .saeule-icon.tier img{animation:s-tier .8s cubic-bezier(.2,.9,.25,1.12) backwards} @keyframes s-tier{from{opacity:0;transform:translate(-50%,18px) scale(.82)}to{opacity:1;transform:translate(-50%,0) scale(1)}} } /* „Mitglied werden“ – Footer-Knöpfe, Code-Feld */ .fuss-knoepfe{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center} .fuss-knoepfe .kuendigen-link{margin:0} .mitglied-link{} .code-feld{text-transform:uppercase;letter-spacing:.08em;font-weight:700} .code-feld::placeholder{text-transform:none;letter-spacing:0;font-weight:400} /* ══════════ Buchtipps: Titelkarten (Stufe A, ohne Cover) ══════════ */ .buchliste li{ display:grid; grid-template-columns:84px 1fr; gap:18px; align-items:start; padding:18px 0; border-bottom:1px solid var(--line); } .buch-karte{ width:84px; aspect-ratio:2/3; box-sizing:border-box; display:flex; flex-direction:column; justify-content:flex-end; gap:5px; padding:10px 9px 11px 11px; background:var(--blau-hell); border:1px solid var(--blau-line); border-left:5px solid var(--tintenblau); border-radius:3px 8px 8px 3px; box-shadow:0 1px 2px rgba(26,26,26,.07); overflow:hidden; } .bk-autor{ font-size:9px; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); line-height:1.2; } .bk-titel{ font-family:'Baloo 2','Nunito Sans',sans-serif; font-size:11px; line-height:1.18; color:var(--tintenblau); display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; hyphens:manual; /* lange Wörter tragen ­ im Markup (Farbenmonster, Entwicklungspsychologie) */ } /* Kinderbücher: warmer Buchrücken, damit die beiden Regale unterscheidbar bleiben */ .buchliste.kinder .buch-karte{ background:var(--hell); border-color:var(--line); border-left-color:var(--cta); } .buch-text{display:block} .buch-text .klein-hinweis{display:block; margin-bottom:2px} @media(max-width:700px){ /* Mobil: Karte bleibt 84 px breit – die 64-px-Variante brach Wörter („Grundlag/en“) und war mit 8 px unlesbar. Textspalte bei 360 px noch 222 px, das reicht. overflow-wrap:anywhere nur als Notnagel (sonst würde geklippt). */ .buchliste li{gap:14px} .bk-autor,.bk-titel{overflow-wrap:anywhere} } /* Stufe B (echte Cover nach Verlagsfreigabe) – noch ungenutzt */ .buch-karte.hat-cover{padding:0; border:0; background:none; box-shadow:0 1px 3px rgba(26,26,26,.18)} .buch-karte.hat-cover img{width:100%; height:100%; object-fit:contain; border-radius:2px} /* Logo-Morph – große Wortmarke im Hero fliegt beim Scrollen in den Header. Nur Desktop ≥1200 px, nur mit JS, nur ohne „Bewegung reduzieren“ (html.logo-morph setzt ui.js). Ohne JS: Header-Logo wie immer, Hero ohne Marke. */ .hero-marke{display:none} html.logo-morph .hero-marke{display:block;position:relative;z-index:55;width:clamp(320px,34vw,480px);aspect-ratio:808/168;margin:0 0 18px;transform-origin:0 0;will-change:transform;pointer-events:none} /* z-index 55 > Header 50: die Marke gleitet ÜBER die Leiste, nicht darunter */ html.logo-morph .hero-marke img{position:absolute;inset:0;width:100%;height:100%;display:block} /* Schatten für die orange Wortmarke – die SVG ist flach, die alten PNG hatten ihn eingebrannt. Als Filter, damit er beim Andocken an die Leiste mit ausblendet; nur an der orangen Fassung, die weiße sitzt auf dunklem Grund und braucht ihn nicht. EIN weiter, schwacher Schatten – kein zweiter, feiner. Dessen 2 px Weichzeichnung waren so groß wie die Lücken im Pinselstrich und liefen hinein statt dahinter; die Kratzer der Schrift wurden grau. Untergrenze für diese Schrift: nicht unter 6 px Weichzeichnung, darunter wird der Schatten zum Rand. Stärke: Fassung C – D nahm der Marke Kraft. EIN Schatten, 0 10px 22px bei 42 %. Bitte weder die Weichzeichnung verkleinern (unter 6 px läuft sie in die Lücken des Pinselstrichs) noch eine enge zweite Ebene ergänzen – beides macht die Kratzer der Schrift grau. */ html.logo-morph .hero-marke .hm-orange{filter:drop-shadow(0 10px 22px rgba(26,26,26,.42)); transition:filter .22s ease-out} /* Sobald die Marke wandert, blendet der Schatten aus. Grund: Er gehört zur orangen Fassung, liegt versetzt darunter und wird von der einblendenden weißen NICHT verdeckt – auf dem hellen Hero ergab das im letzten Drittel eine ausgebleichte Marke mit dunklem Schmier darunter (kurzes Schwarzblitzen). Auf der dunklen Leiste ist der Schatten ohnehin unsichtbar. Alpha auf 0 statt filter:none, damit der Übergang weich interpoliert. */ html.logo-morph.marke-wandert .hero-marke .hm-orange{filter:drop-shadow(0 10px 22px rgba(26,26,26,0))} html.logo-morph .hero-marke .hm-weiss{opacity:0} html.logo-morph.marke-oben .hero-marke{visibility:hidden} html.logo-morph .top-inner .wortmarke{opacity:0;transition:opacity .12s} html.logo-morph.marke-oben .top-inner .wortmarke{opacity:1} /* ══════════ Mobile-First (Safari/iPhone) ══════════ */ /* 1 iOS Safari vergrößert Text im Querformat eigenmächtig – aus */ html{-webkit-text-size-adjust:100%;text-size-adjust:100%} /* 2 WebKit (Safari): ein