/* ===================================================================== SCHRIFTEN – lokal eingebunden, keine Verbindung zu Google Beide Schriften stehen unter der SIL Open Font License; die Lizenztexte liegen als OFL-*.txt neben den Dateien in fonts/. Es sind Variable Fonts: eine Datei deckt den ganzen Bereich 400–600 ab, deshalb drei Dateien statt acht. Nur das latin-Subset, das Umlaute, ss-Ligatur, Gedankenstrich und typografische Anfuehrungszeichen enthaelt. font-display:swap – der Text ist sofort lesbar, die Schrift tauscht nach dem Laden nach. ===================================================================== */ @font-face{ font-family:'Cormorant Garamond'; font-style:normal; font-weight:400 600; font-display:swap; src:url('fonts/cormorant-garamond-var.woff2') format('woff2'); } @font-face{ font-family:'Cormorant Garamond'; font-style:italic; font-weight:400 600; font-display:swap; src:url('fonts/cormorant-garamond-var-italic.woff2') format('woff2'); } @font-face{ font-family:'Inter'; font-style:normal; font-weight:400 600; font-display:swap; src:url('fonts/inter-var.woff2') format('woff2'); } :root{ --night:#2c2130; --plum:#4a3550; --mauve:#7a5c72; --blush:#e9cfc9; --dawn:#efd0b8; --ivory:#fbf6f1; --gold:#b5654a; --gold-deep:#9a4f38; /* Die drei Zahlentripel, die frueher fest im CSS standen. Sie tragen Schatten, Ringe, Leuchten und Randfarben. Als Variable, damit sich der Schein an einer Stelle umschalten laesst - fuer die Frage, ob das Leuchten Terrakotta oder Blush sein soll. Reihenfolge hell nach dunkel; sie entsprechen den drei Goldstufen von frueher. */ --gold-rgb:181,101,74; --gold-tief-rgb:154,79,56; --gold-dunkel-rgb:138,70,50; --ink:#332830; --muted:#6d6069; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ font-family:'Inter',sans-serif; color:var(--ink); background:var(--ivory); line-height:1.65; -webkit-font-smoothing:antialiased; } h1,h2,h3,.serif{font-family:'Cormorant Garamond',serif;font-weight:500;line-height:1.12;letter-spacing:.01em} .wrap{max-width:940px;margin:0 auto;padding:0 26px} .eyebrow{font-family:'Inter';font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600} /* sticky bar */ .topbar{position:fixed;top:0;left:0;right:0;z-index:30;background:rgba(251,246,241,.9);backdrop-filter:blur(10px); border-bottom:1px solid rgba(44,33,48,.08);transform:translateY(-105%);transition:transform .45s cubic-bezier(.22,.7,.3,1)} .topbar.show{transform:none} .topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:62px} .brand{font-family:'Cormorant Garamond';font-size:1.35rem;font-weight:600;color:var(--plum)} .brand-sub{opacity:.65;font-weight:400} .btn{display:inline-block;border:none;cursor:pointer;font-family:'Inter';font-weight:600;font-size:.95rem; text-align:center;padding:14px 26px;border-radius:40px;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,background .18s ease} .btn-gold{background:var(--gold);color:#fff;box-shadow:0 8px 22px rgba(var(--gold-tief-rgb),.3); will-change:transform;backface-visibility:hidden; animation:btnAtem 4.6s ease-in-out infinite; transition:transform .3s ease,box-shadow .3s ease,filter .3s ease} .btn-gold:hover{background:var(--gold);filter:brightness(1.07); transform:scale(1.03) translateY(-2px) !important; box-shadow:0 12px 30px rgba(var(--gold-rgb),.5) !important; animation-play-state:paused} /* Ruhezustand: leichtes Atmen (scale) mit mitatmendem Schein, nur ueber transform + box-shadow */ @keyframes btnAtem{ 0%,100%{transform:scale(1);box-shadow:0 8px 22px rgba(var(--gold-tief-rgb),.3)} 50%{transform:scale(1.03);box-shadow:0 8px 30px rgba(var(--gold-rgb),.6)} } .btn-sm{padding:10px 20px;font-size:.85rem} .btn-ghost{background:transparent;border:1.5px solid rgba(74,53,80,.4);color:var(--plum)} .btn-ghost:hover{background:rgba(74,53,80,.08)} /* hero */ .hero{position:relative;overflow:hidden; min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center; /* Variante E, gewaehlt am 14. August 2026, Endfarbe am 17. August auf #efd0b8 zurueckgenommen. Gegenueber der veroeffentlichten Fassung: Mittelstopp 52% -> 32% Endfarbe --dawn (#f4dccb) -> #efd0b8 Zwischenschritt war #e9c3a4. Das war der Kundin zu kraeftig: Der Unterschied zwischen oberem und unterem Bereich sollte kleiner werden, ohne zum blassen Ausgangszustand zurueckzukehren. #efd0b8 liegt genau auf halber Strecke - Spanne 1,36 statt 1,53 (Ausgangszustand: 1,23). Nebeneffekt: Der Text im unteren Bereich liest sich besser, weil der Grund dort heller ist. Seit dem 20. August 2026 steht die Endfarbe im Token --dawn, und alle Stellen ziehen sie von dort: #danach, #schluss, der letzte Farbstopp von #diskretion, die Startfarbe von #schritt, dazu .weg (mischt Ivory mit 22% Dawn), der Foto-Rahmen im Story-Abschnitt und der Kursivsatz im Abschluss-Band. Ein Dreh am Token zieht damit alles mit - zwei der Stellen sind Nahtstellen, an denen zwei Sektionen dieselbe Farbe teilen muessen, und die koennen so nicht mehr auseinanderlaufen. Die Mittelfarbe #fbeee4 bleibt bewusst, wie sie ist: Sie liegt fast auf ivory und haelt damit das obere Drittel hell. Genau das macht den Unterschied zwischen oben und unten sichtbar - Bettinas Kritik war, dass sich die beiden Bereiche zu wenig voneinander absetzen, nicht dass es oben zu blass sei. Eine waermere Mittelfarbe (Variante F) verwischt die Grenze und schwaecht genau diesen Eindruck. Die Spanne selbst haengt allein an der Endfarbe. Soll der Unterschied spaeter noch groesser werden, ist dort der Hebel - #e9c3a4 ist die mittlere von drei erprobten Stufen. Die Endfarbe stand waehrend der Erprobung bewusst als fester Wert im CSS, damit ein Versuch nicht sofort die ganze Seite umfaerbt. Mit der Entscheidung vom 20. August 2026 ist sie ins Token gewandert - der frueher getrennte zweite Warmton #f4dccb gibt es nicht mehr. */ background:linear-gradient(180deg,var(--ivory) 0%,#fbeee4 32%,var(--dawn) 100%); /* Der Innenabstand unten stand bis zum 22. September 2026 auf 104px. Er ist auf 16px zurueckgenommen, weil er sonst die Untergrenze dafuer waere, wie nah die Schlusszeile an den Bildrand kommen kann - und genau das war der Wunsch: moeglichst knapp. Der Wert ist jetzt der Abstand, den die Zeile zum unteren Rand behaelt, und er steckt als Summand in der Breitenrechnung des Videos weiter unten. Wer ihn aendert, muss die 476 dort mitziehen. Unterhalb von 720px gilt weiterhin der eigene Wert aus dem Media-Query weiter unten (28px oben, 76px unten) - dort begrenzt ohnehin die Spaltenbreite das Video, nicht die Hoehe. */ color:var(--night);text-align:center;padding:40px 0 16px} /* Bei sehr niedrigen Fenstern (z. B. Handy im Querformat) keine volle Hoehe erzwingen */ @media (max-height:620px){.hero{min-height:auto}} .leaves{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;filter:blur(2px)} .leaf-piece{position:absolute;top:0;will-change:transform,opacity;animation:leaffall var(--dur,12s) linear var(--delay,0s) infinite} .leaf-inner{display:block;animation:leafsway var(--sway,3.4s) ease-in-out var(--delay,0s) infinite alternate;transform-origin:center} .leaf-inner svg{display:block} @keyframes leaffall{0%{transform:translateY(-14vh);opacity:0}8%{opacity:var(--op,.5)}90%{opacity:var(--op,.5)}100%{transform:translateY(116vh);opacity:0}} @keyframes leafsway{0%{transform:translateX(-16px) rotate(-28deg)}100%{transform:translateX(16px) rotate(34deg)}} .hero .wrap{position:relative;z-index:2} .hero .eyebrow{color:var(--gold-deep);margin-bottom:22px;display:inline-flex;align-items:center;gap:14px} .hero .eyebrow::before,.hero .eyebrow::after{content:"";width:30px;height:1px;background:var(--gold);flex:none} /* ---- Video im Hero (16/9-Rahmen, skaliert mit der Fensterhoehe) ---- Das Video liegt seit dem 18. September 2026 direkt sichtbar in der Seite; davor sass hier ein Teaser-Knopf, der ein Overlay oeffnete. Der Rahmen leitet seine Breite aus der verfuegbaren HOEHE ab, nicht aus der Breite des Elternelements. Das ist hier der springende Punkt: Der Hero ist min-height:100svh und stapelt seinen Inhalt mittig; ein Video, das nur mit der Breite waechst, wuerde auf flachen Bildschirmen die Handlungsknoepfe aus dem Bild schieben. Wunsch des Nutzers vom 22. September 2026: Das Video soll so gross sein, dass die Schlusszeile unter dem Knopf knapp ueber der Bildkante sitzt - auf jeder Bildschirmhoehe. Die Rechnung 100svh - 476px leistet genau das, und die 476 sind gemessen, nicht geschaetzt. Sie sind eine Summe aus drei Teilen: 420px alles ausser dem Video - Augenbrauenzeile, Ueberschrift, Fliesstext, Knopf, Schlusszeile und die Abstaende dazwischen 40px Innenabstand des Hero oben 16px Innenabstand des Hero unten, also der Abstand, den die Schlusszeile zum Bildrand behaelt Die 420 sind der Hoechstwert aus dieser Messreihe: 1920x1080 420px 1366x768 420px 1600x900 420px 1280x720 420px 1440x900 420px 1024x768 401px Ab 1280px Breite ist der Wert konstant, weil die Ueberschrift dort an ihrer Deckelung von 2.7rem anliegt und nicht mehr mitwaechst. Darunter wird er kleiner, nie groesser - 420 ist also der sichere Wert. Damit gilt: Hoehe des Hero = 40 + 420 + Videohoehe + 16 = 100svh. Der Hero fuellt den Schirm also exakt, ohne ueberzulaufen, und der Abstand unter der Schlusszeile ist immer der Innenabstand des Hero. WER EINEN DER DREI SUMMANDEN AENDERT, MUSS DIE 476 MITZIEHEN. Das betrifft besonders den Innenabstand des Hero und jede Aenderung am Text im Hero, die eine Zeile mehr oder weniger umbricht. max(150px,...) faengt sehr flache Fenster ab, min(100%,...) schmale. Die doppelte width-Zeile ist Absicht: 100svh kennt nicht jeder Browser, die erste Zeile mit 100vh ist der Rueckfall. overflow:hidden ist noetig, damit der Player die 18px Rundung des Rahmens annimmt - ein iframe schneidet sich nicht von allein. */ .video-inline{display:flex;flex-direction:column;align-items:center;gap:14px; margin:0 auto 32px;text-align:center} /* Ab 481px darf das Video aus der Textspalte heraustreten. Die .wrap ist auf 940px begrenzt, das Video soll aber die Bildschirmhoehe ausnutzen duerfen - auf breiten Schirmen braucht es dafuer mehr als die Spalte. margin-left:50% schiebt die linke Kante auf die Mitte der Spalte, translateX(-50%) zieht um die halbe eigene Breite zurueck. Nur so bleibt ein Element mittig, das breiter ist als sein Elternelement - margin:auto versagt dort und setzt es linksbuendig. Unterhalb von 481px bleibt es bei der Spaltenbreite, damit das Video auf dem Handy mit dem Text darunter fluchtet. */ @media (min-width:481px){ .video-inline{width:92vw;margin-left:50%;transform:translateX(-50%)} } .vt-frame{position:relative;display:flex;align-items:center;justify-content:center; aspect-ratio:16/9;height:auto;margin:0 auto; width:min(100%,calc(max(150px,100vh - 476px) * 16 / 9)); width:min(100%,calc(max(150px,100svh - 476px) * 16 / 9)); overflow:hidden; border-radius:18px;border:1px solid rgba(var(--gold-rgb),.45); background:linear-gradient(160deg,rgba(74,53,80,.12),rgba(122,92,114,.10)); box-shadow:0 14px 36px rgba(74,53,80,.16)} /* Der Verlauf im Rahmen bleibt: Auf der danke.html steht dort vorerst nur der Platzhalter, und die Flaeche soll nicht leer wirken. */ .vt-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:none} /* Die danke.html rechnet mit einem EIGENEN Abzug. Ihr Hero traegt anderen Inhalt als der der Startseite - Bestaetigungshaken, eine laengere Ueberschrift und eine Bildunterschrift, die hier auf jeder Breite steht. Gemessen am 6. Oktober 2026 nach demselben Verfahren wie die 476 der Startseite, also Hoehe des .wrap mit auf null gesetztem Rahmen plus 40px oben und 16px unten: 1920x1080 444px 1366x768 444px 1600x900 444px 1280x720 443px 1440x900 444px 1024x768 433px Ab 1280px Breite ist der Wert konstant; genommen ist der Hoechstwert, damit der Hero nie ueberlaeuft. Wer am Hero dieser Seite etwas aendert, was eine Zeile mehr oder weniger umbricht, muss die 444 mitziehen. Der Wert lag am selben Tag zunaechst bei 514, dann bei 444. Die erste Stufe von 70px war der entfallene Lichtstrahl zum Video - 58px hoch plus 12px Abstand darunter. Die zweite von 32px ist der Aussenabstand der figure, siehe direkt darunter. Wer den Lichtstrahl zurueckholt, muss hier 70 und unten ebenfalls 70 aufschlagen. */ .danke .vt-frame{ width:min(100%,calc(max(150px,100vh - 412px) * 16 / 9)); width:min(100%,calc(max(150px,100svh - 412px) * 16 / 9))} /* Auf der Startseite trennt der Aussenabstand von 32px das Video vom Fliesstext darunter und wird gebraucht. In der danke.html ist die figure das LETZTE Element im Hero - dort trennt er nichts mehr und war schlicht verschenkte Hoehe. Gemessen am 6. Oktober 2026: unter der Bildunterschrift standen 48px frei, 16px Innenabstand des Hero plus diese 32px. Jetzt sind es 16px, genau so knapp wie die Schlusszeile der Startseite. */ .danke .video-inline{margin-bottom:0} /* Der Pfeil zum Weiterscrollen unter der Bildunterschrift. Er schwebt auf und ab, damit er als Aufforderung gelesen wird und nicht als Zierde. 26px hoch plus 12px Abstand darueber - diese 38px sind der Platz, den der Hero oben wieder hergeben muss, damit das Video dadurch NICHT kleiner wird; siehe die beiden Regeln darunter. Die Farbe ist --gold-deep statt --gold: Das Zeichen ist klein und duenn, und der tiefere Ton traegt auf dem hellen Verlauf besser. */ .weiter{display:block;width:26px;height:26px;margin:12px auto 0; color:var(--gold-deep); animation:weiterSchweben 2.4s ease-in-out infinite} .weiter svg{display:block;width:100%;height:100%} .weiter:hover{color:var(--plum)} @keyframes weiterSchweben{ 0%,100%{transform:translateY(0);opacity:.7} 50%{transform:translateY(7px);opacity:1}} /* Die 38px des Pfeils kommen aus zwei Stellen weiter oben im Hero, damit das Video seine Groesse behaelt - ausdruecklicher Wunsch des Nutzers: den Platz schaffen, indem Video und Text nach oben ruecken, nicht indem das Video schrumpft. Innenabstand oben 40px -> 20px = 20px Abstand unter .lead 34px -> 16px = 18px Macht 38px, genau die Hoehe des Pfeils samt Abstand. Der Abzug der Videobreite bleibt deshalb bei 412. Nur auf der danke.html - die Startseite behaelt ihre 40px und ihre 34px. */ .danke .hero{padding-top:20px} .danke .hero p.lead{margin-bottom:16px} .vt-cap{display:block;font-family:'Cormorant Garamond',serif;font-style:italic; font-size:1.12rem;color:#4a3550;letter-spacing:.01em} /* Die Bildunterschrift der Startseite erscheint nur auf Handybreiten. Entscheidung des Nutzers vom 21. September 2026, und sie hat einen sachlichen Grund: Dort ist das Video ohnehin so gross, wie es werden kann - die Deckelung aus 32vh greift gar nicht, weil min(100%,...) vorher zuschlaegt. Gemessene Breite des Rahmens gegen die verfuegbare Spaltenbreite: 320x568 Spalte 268 Rahmen 268 360x740 Spalte 308 Rahmen 308 390x844 Spalte 338 Rahmen 338 414x896 Spalte 362 Rahmen 362 430x932 Spalte 378 Rahmen 378 540x720 Spalte 488 Rahmen 410 <- nicht mehr bildschirmfuellend Bis 430px liegt der Rahmen also an der Spaltenkante, ab 540px nicht mehr. Die Grenze bei 480px trennt beides sauber. Auf breiteren Schirmen wuerde die Zeile nur Hoehe kosten, die das groessere Video besser gebrauchen kann. Die Klasse haengt an der Startseite. Die danke.html nutzt .vt-cap allein und zeigt ihre Bildunterschrift weiterhin auf jeder Breite. */ .vt-cap-mobil{display:none} @media (max-width:480px){.vt-cap-mobil{display:block}} /* Das Video-Overlay (.video-modal, .vm-inner, .vm-frame, .vm-close) ist am 18. September 2026 entfallen - das Video liegt jetzt direkt in der Seite, es gab also keinen Knopf mehr, der es geoeffnet haette. Wer es zurueckholen will, findet es vollstaendig in der Historie. Das Keyframe bleibt: Es traegt auch das Einblenden des Anfrage- formulars weiter unten. Der Name ist aus der Videozeit geblieben. */ @keyframes vmIn{from{opacity:0}to{opacity:1}} /* ---- Anfrageformular als Overlay (index.html) ---- Dunkler Grund, darin eine helle Karte: Eingabefelder lesen sich auf hellem Grund ruhiger. Der Goldschein ist derselbe wie am Abschluss- Band. Das Einblenden laeuft ueber vmIn - der Name stammt aus der Zeit, als es das Video-Overlay noch gab; dieses Formular ist seit dessen Wegfall der einzige Nutzer der Animation. */ .form-modal[hidden]{display:none} .form-modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center; background:rgba(44,33,48,.94);padding:24px;overflow-y:auto;animation:vmIn .35s ease} .fm-inner{position:relative;width:100%;max-width:520px;margin:auto;background:var(--ivory); border-radius:22px;padding:44px 40px 36px;text-align:center; box-shadow:0 0 0 1px rgba(var(--gold-rgb),.45),0 0 34px rgba(var(--gold-rgb),.26),0 30px 80px rgba(44,33,48,.45)} .fm-inner h2{font-size:clamp(1.6rem,3.4vw,2.1rem);color:var(--plum);margin-bottom:12px} .fm-intro{font-size:1rem;line-height:1.6;color:#5b4a56;margin-bottom:26px} .fm-close{position:absolute;top:10px;right:16px;background:none;border:none;cursor:pointer; color:var(--muted);font-size:1.9rem;line-height:1;padding:4px 8px} .fm-close:hover{color:var(--plum)} .fm-close:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:8px} .fm-feld{text-align:left;margin-bottom:16px} .fm-feld label{display:block;font-size:.86rem;font-weight:600;color:var(--plum); letter-spacing:.02em;margin-bottom:7px} .fm-feld input{width:100%;font-family:'Inter',sans-serif;font-size:1rem;color:var(--ink); background:#fff;border:1px solid rgba(74,53,80,.22);border-radius:12px;padding:13px 15px; transition:border-color .18s ease,box-shadow .18s ease} .fm-feld input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(var(--gold-rgb),.25)} .fm-freiwillig{font-weight:400;color:var(--muted)} .fm-senden{width:100%;margin-top:4px} /* Datenschutzhinweis steht unmittelbar ueber dem Absenden-Knopf. Bewusst klein und gedaempft, damit er dem Knopf keine Aufmerksamkeit nimmt; der Link traegt nur eine feine goldene Unterlaengung. */ .fm-hinweis{font-size:.82rem;line-height:1.55;color:var(--muted);margin:2px 0 14px} .fm-hinweis a{color:var(--gold-deep);text-decoration:underline;text-underline-offset:3px; text-decoration-thickness:1px;text-decoration-color:rgba(var(--gold-rgb),.65)} .fm-hinweis a:hover{color:var(--plum);text-decoration-color:var(--plum)} /* Meldung, wenn anfrage.php mit einem Fehlercode zurueckgeschickt hat */ .fm-fehler[hidden]{display:none} .fm-fehler{text-align:left;font-size:.92rem;line-height:1.55;color:#7a4a2e;margin-bottom:20px; background:rgba(var(--gold-rgb),.16);border:1px solid rgba(var(--gold-tief-rgb),.45);border-radius:12px;padding:12px 16px} /* Honigtopf: aus dem Blickfeld geschoben statt display:none, damit auch Bots ihn finden, die nur sichtbare Felder ausfuellen. */ .fm-honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} @media (max-width:560px){.fm-inner{padding:38px 24px 30px;border-radius:18px}} @media (max-width:520px){.hero .eyebrow{gap:10px}.hero .eyebrow::before,.hero .eyebrow::after{width:16px}} .hero h1{font-size:clamp(1.9rem,3.4vw,2.7rem);font-weight:600;margin-bottom:30px;color:#43284c;text-wrap:balance} .hero h1 em{font-style:italic;color:#7e5576} .hero p.lead{font-size:1.14rem;max-width:560px;margin:0 auto 34px;color:#5b4a56} .cta-row{display:flex;gap:14px;justify-content:center;align-items:center;flex-wrap:wrap} /* CTA-Buttons in linksbuendigen Sektionen auf dem Smartphone mittig setzen */ @media (max-width:560px){ .recog .close .btn-gold,.path .btn-gold,#ablauf .btn-gold,#schritt .btn-gold{ display:block;width:-webkit-fit-content;width:fit-content;margin-left:auto;margin-right:auto} } .reassure{font-size:.82rem;color:#7a6b74;margin-top:18px;letter-spacing:.02em} .reassure span{color:var(--plum);font-weight:600} /* wiedererkennung (aubergine) */ .recog{background:linear-gradient(165deg,var(--night) 0%,var(--plum) 100%);color:var(--ivory);padding:92px 0} .recog .eyebrow{color:var(--blush);margin-bottom:16px} .recog h2{font-size:clamp(2rem,4.6vw,3rem);color:#fff;margin-bottom:24px;max-width:640px} .recog .intro{font-size:1.1rem;color:rgba(251,246,241,.88);max-width:660px;margin-bottom:32px} .recog .signs{list-style:none;max-width:720px;margin:0 0 34px} .recog .signs li{position:relative;padding:16px 0 16px 42px;border-top:1px solid rgba(251,246,241,.14);font-size:1.04rem;color:rgba(251,246,241,.92);line-height:1.55} .recog .signs li:last-child{border-bottom:1px solid rgba(251,246,241,.14)} .recog .signs li::before{content:"";position:absolute;left:6px;top:24px;width:13px;height:13px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(var(--gold-rgb),.18)} .recog .close{max-width:660px} .recog .close p{color:rgba(251,246,241,.9);font-size:1.08rem;margin-bottom:18px} .recog .close .recog-note{display:block;max-width:600px;margin:44px 0 36px;padding:32px 30px; border-radius:18px;background:var(--ivory); font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:600; font-size:clamp(1.5rem,3.2vw,2.05rem);color:var(--plum);line-height:1.45; box-shadow:0 0 0 1px rgba(233,207,201,.35),0 0 36px rgba(233,207,201,.28),0 16px 40px rgba(0,0,0,.20)} @media (max-width:560px){.recog .close .recog-note{padding:24px 22px}} /* sections */ .section{padding:88px 0} .section-tint{background:linear-gradient(180deg,#fff 0%,#faf2ea 100%)} .lede{font-size:1.05rem;color:var(--muted);max-width:620px} .kicker{color:var(--gold-deep);margin-bottom:14px} /* story */ .story h2{font-size:clamp(2rem,4.4vw,3rem);color:var(--plum);margin-bottom:30px;max-width:720px} .story p{margin-bottom:20px;max-width:660px;font-size:1.05rem} .story-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;margin-top:34px} .story-text{min-width:0} .story-photo{position:sticky;top:96px} .story-photo .frame{position:relative} .story-photo .frame::before{content:"";position:absolute;left:-16px;bottom:-16px;width:56%;height:62%;background:var(--dawn);border-radius:18px;z-index:0} .story-photo .frame img{position:relative;z-index:1;width:100%;height:auto;border-radius:18px;box-shadow:0 22px 55px rgba(74,53,80,.2);display:block} .story-photo .cap{display:block;margin-top:14px;font-family:'Cormorant Garamond',serif;font-style:italic;color:var(--gold-deep);font-size:1.12rem} @media (max-width:760px){.story-grid{grid-template-columns:1fr;gap:24px}.story-photo{position:static;max-width:360px}} /* Initiale - trifft absichtlich BEIDE Stellen: den Kicker und den Fliesstext der Geschichte. Der Kicker ist ebenfalls ein

und das erste seiner Art in seinem Elternelement, deshalb beginnt auch "ICH STAND, WO DU JETZT STEHST" mit dem grossen Serifen-I. AUSDRUECKLICH SO GEWOLLT, Bestaetigung des Nutzers vom 20. August 2026. Nicht auf .story-text verengen - das nimmt dem Kicker die Initiale. */ .story p:first-of-type::first-letter{font-family:'Cormorant Garamond';font-size:3.4rem;line-height:.8;float:left; color:var(--gold);margin:6px 12px 0 0;font-weight:600} /* Die Initiale ist float:left mit 12px Aussenabstand und ragt aus dem Kicker nach unten in die Ueberschrift hinein. Ein Float schiebt die Zeilen zur Seite, die er schneidet - und er schneidet nur die ERSTE Zeile der Ueberschrift. Dadurch stand "Ich weiss, wo du stehst - weil ich" um 34px eingerueckt, "selbst dort stand." dagegen buendig. Der Versatz betraegt auf jeder Bildschirmbreite dieselben 34px, weil die Initiale eine feste Groesse hat. Auf Wunsch des Nutzers vom 20. August 2026 bekommt die Ueberschrift denselben Versatz als Aussenabstand, damit BEIDE Zeilen gleich weit eingerueckt stehen. Der Kasten faengt damit rechts neben der Initiale an, der Float schneidet ihn nicht mehr, und alle Zeilen fluchten. Aussenabstand statt Innenabstand, damit die Kastenbreite von 720px erhalten bleibt und die Zeile an derselben Stelle umbricht. Erst ab 900px: Darunter steht das Foto ueber dem Text statt daneben, und 34px Einzug waeren auf einem Handy verschenkte Breite. */ @media (min-width:900px){ .story h2{margin-left:34px} } .pullquote{font-family:'Cormorant Garamond';font-style:italic;font-size:clamp(1.7rem,3.6vw,2.5rem); color:var(--mauve);text-align:center;max-width:640px;margin:56px auto;line-height:1.3} .pullquote::before{content:"„"} .pullquote::after{content:"“"} @media (max-width:560px){.pullquote{font-weight:600}} /* for whom */ .cols{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:44px} .card{background:#fff;border-radius:20px;padding:36px 32px;box-shadow:0 14px 40px rgba(74,53,80,.07)} .card.yes{border-top:4px solid var(--gold)} .card.no{border-top:4px solid var(--mauve);background:#f8f1ec} .card h3{font-size:1.7rem;margin-bottom:20px} .card.yes h3{color:var(--gold-deep)} .card.no h3{color:var(--mauve)} .list{list-style:none} .list li{position:relative;padding-left:32px;margin-bottom:16px;font-size:.98rem} .list li:last-child{margin-bottom:0} .list.yes li::before{content:"";position:absolute;left:0;top:7px;width:15px;height:15px;border-radius:50%; background:var(--gold);box-shadow:inset 0 0 0 3px #fff} .list.no li::before{content:"";position:absolute;left:2px;top:11px;width:12px;height:2px;background:var(--mauve);border-radius:2px} /* ---- Die Begleitung: Weg vom Abend ins Morgenlicht ---- */ .path{position:relative;overflow:hidden;padding:96px 0; background:linear-gradient(155deg,#fdf3ea 0%,#f8e8db 48%,#f1dbd4 100%)} .path::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%; top:-190px;right:-160px;background:rgba(var(--gold-rgb),.28);filter:blur(80px);pointer-events:none} .path .wrap{position:relative;z-index:1} .path h2{font-size:clamp(2rem,4.4vw,3rem);color:var(--plum);max-width:640px;margin-bottom:18px} .path .intro{color:#5f5058;max-width:640px;font-size:1.06rem;margin-bottom:44px} .path h3.sub-head{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:1.6rem;color:var(--plum);margin:0 0 24px} /* Ueberblick als ruhige Karte */ .overview{max-width:720px;margin-bottom:60px;background:rgba(255,255,255,.72); border-radius:20px;padding:34px 34px 30px;box-shadow:0 14px 40px rgba(74,53,80,.1)} .overview ul{list-style:none} .overview li{display:flex;gap:16px;padding:15px 0;border-bottom:1px solid rgba(74,53,80,.12);font-size:1rem;line-height:1.55} .overview li:last-child{border-bottom:none;padding-bottom:0} .overview li:first-child{padding-top:0} .overview .lbl{flex:none;width:150px;font-weight:600;color:var(--gold-deep)} @media (max-width:600px){.overview li{flex-direction:column;gap:4px}.overview .lbl{width:auto}} /* Der Weg: senkrechte Linie vom Abend ins Morgenlicht */ .journey{list-style:none;max-width:760px;margin-bottom:46px} .stop{position:relative;z-index:1;display:grid;grid-template-columns:54px 1fr;gap:28px;padding-bottom:44px} .stop:last-child{padding-bottom:0} /* Linienstueck zwischen zwei Stationen, endet an den Kreisen */ .stop:not(:last-child)::before{content:"";position:absolute;left:26px;width:2px;top:62px;bottom:-8px; border-radius:2px;opacity:.55;z-index:-1} .stop:nth-child(1)::before{background:linear-gradient(180deg,var(--plum),var(--mauve))} .stop:nth-child(2)::before{background:linear-gradient(180deg,var(--mauve),var(--gold))} .ring{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center; font-family:'Cormorant Garamond',serif;font-size:1.4rem;font-weight:600; background:#fdf5ee;box-shadow:0 0 0 6px rgba(253,243,234,.9),0 8px 20px rgba(74,53,80,.13)} .stop:nth-child(1) .ring{color:var(--plum);border:1.5px solid rgba(74,53,80,.5)} .stop:nth-child(2) .ring{color:var(--mauve);border:1.5px solid rgba(122,92,114,.55)} .stop:nth-child(3) .ring{color:var(--gold-deep);border:1.5px solid rgba(var(--gold-rgb),.75)} .stop-body{padding-top:4px} .stop-body .label{font-family:'Inter',sans-serif;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase; font-weight:600;color:var(--gold-deep);display:block;margin-bottom:8px} .stop-body h4{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:1.75rem;color:var(--plum); line-height:1.15;margin-bottom:12px} .stop-body p{font-size:1rem;color:#584b53;line-height:1.65;max-width:560px} /* Seit Bettinas Texten vom 22. September 2026 haben die Phasen 2 und 3 zwei Absaetze. Der Reset ganz oben setzt alle Aussenabstaende auf null, sonst klebten sie aneinander. Die Leerzeile in ihrer Vorlage trennt zwei Gedanken - innerhalb eines Absatzes stehen harte Zeilenumbrueche als
, so wie sie es gesetzt hat. */ .stop-body p+p{margin-top:14px} /* Erstes im Projekt, in Phase 3. Inter ist als Variable Font mit 400 bis 600 eingebunden; der Browser deckelt die 700 von auf 600, was genau das Halbfett der Seite ist. Hier ausdruecklich gesetzt, damit es nicht vom Deckel abhaengt. */ .stop-body strong{font-weight:600} @media (max-width:560px){ .stop{grid-template-columns:42px 1fr;gap:20px;padding-bottom:36px} .stop:not(:last-child)::before{left:20px;top:50px} .ring{width:42px;height:42px;font-size:1.15rem;box-shadow:0 0 0 5px rgba(253,243,234,.9),0 8px 20px rgba(74,53,80,.13)} .stop-body h4{font-size:1.5rem} } .ph{background:rgba(var(--gold-rgb),.22);border-bottom:1px dashed var(--gold);padding:1px 5px;border-radius:3px;font-style:italic} /* cta band */ .band{background:linear-gradient(135deg,var(--plum),var(--night));color:var(--ivory);text-align:center; border-radius:26px;padding:64px 30px;max-width:820px;margin:0 auto} .band h2{font-size:clamp(2rem,4.4vw,3rem);margin-bottom:16px} .band h2 em{font-style:italic;color:var(--dawn)} .band p{color:rgba(251,246,241,.85);max-width:520px;margin:0 auto 30px} /* Extra Luft ueber der Reassure-Zeile: der Button wird spaeter pulsieren/atmen */ .band .reassure{margin-top:34px} footer{padding:56px 0 44px;text-align:center;color:var(--muted);font-size:.86rem;background:#f7efe8} footer .brand{display:block;margin-bottom:10px} /* Seit dem 6. Oktober 2026 steht in der Fusszeile das Logo statt der Schriftzeile "Bettina Scheck - Trennungsbegleitung". Regel, Klasse, Dateiname und Ablageort sind bewusst dieselben wie im Workshop-Projekt - dort war es zuerst so geloest, und dem Nutzer gefiel es besser. Die beiden Dateien sind byte-identisch. Gemessen wird ueber die HOEHE, nicht die Breite: Eine Wortmarke sitzt in einer Zeile neben anderen Elementen, und 48px Hoehe sagt mehr darueber, wie gross sie wirkt, als eine Breitenangabe. Die Breite folgt mit 208px und passt damit auch auf das schmalste Handy - eine Deckelung braucht es nicht. Die width/height-Attribute im Markup stehen auf den echten Massen 1488x344. Damit kennt der Browser das Seitenverhaeltnis, bevor das Bild geladen ist, und die Fusszeile springt beim Laden nicht. Die Regel .brand darueber bleibt: Kopfzeile und .legal-head nutzen sie weiterhin fuer ihre Schriftzeile. Dieselbe Arbeitsteilung wie drueben - die Kopfzeile sagt, WAS man ansieht, die Fusszeile, WER dahintersteht. */ footer .logo{display:block;height:48px;width:auto;margin:0 auto 14px} @media (max-width:720px){ .cols{grid-template-columns:1fr} .section{padding:64px 0} .hero{padding:28px 0 76px} /* Der Innenabstand des Hero waechst hier von 56px auf 104px. Der Abzug der danke.html muss das mittragen, sonst waere ihr Video um diese 48px zu hoch. 412 - 56 + 104 = 460. Was dann passieren wuerde, stand hier bis zum 6. Oktober 2026 falsch: Die Bildunterschrift waere NICHT abgeschnitten worden. .hero traegt min-height, keine feste Hoehe - waechst der Inhalt darueber hinaus, waechst der Hero mit und die Seite scrollt ein Stueck. Das overflow:hidden an .hero haelt die fallenden Blaetter im Rahmen, es kappt keinen Inhalt. Die Werte stimmen trotzdem, nur die Begruendung war zu dramatisch. Dazu kommen 14px fuer den Pfeil zum Weiterscrollen. Auf dem Schirm zahlt ihn der kleinere Innenabstand oben vollstaendig; hier nicht, weil der Hero mit 28px ohnehin weniger hat und .danke .hero ihn nur auf 20px senkt - es fehlen genau diese 14px. Gemessen bei 560x740 und 500x800, wo der Hero vorher um 14px ueberlief. 412 - 56 + 104 + 14 = 474. */ .danke .vt-frame{ width:min(100%,calc(max(150px,100vh - 474px) * 16 / 9)); width:min(100%,calc(max(150px,100svh - 474px) * 16 / 9))} .topbar .brand{font-size:1.15rem} .brand-sub{display:none} .topbar .btn{padding:9px 16px} } .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease} .reveal.in{opacity:1;transform:none} /* Das !important ist hier kein Schludrian, sondern noetig - zweimal aus demselben Grund: Eine Regel in einem @media-Block bekommt dadurch KEINE hoehere Spezifitaet, und eine Wunschaeusserung zur Barrierefreiheit muss gegen die Gestaltung gewinnen, egal was spaeter im Stylesheet steht. Ohne !important liefen beide Zeilen ins Leere: - .btn-gold{animation:none} liegt bei 0,1,0 und wird von den drei spaeteren Knopf-Fassungen ueberholt - .topbar .btn-gold (0,2,0) und .recog/.band .btn-gold (0,3,0) gewinnen ueber die Spezifitaet, die zweite .btn-gold-Regel im Knopf-Abschnitt ueber die Reihenfolge. Die Knoepfe atmeten also weiter. - .btn:hover{transform:none} verlor gegen .btn-gold:hover, das seinen transform selbst mit !important setzt. Der Knopf sprang beim Ueberfahren also weiter an. Wer hier neue Knopf-Fassungen ergaenzt, muss nichts nachziehen - das !important deckt auch spaetere Regeln ab. Genau dafuer steht es da. */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .reveal{opacity:1;transform:none;transition:none} .btn:hover{transform:none !important} .btn-gold{animation:none !important} } a:focus-visible,.btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px} /* ---- Das "Danach" (Sektion 7): heller, warmer Hoehepunkt ---- */ /* Auf denselben Verlauf gebracht wie der Hero (Variante E). Die Sektion ist der zweite Ort mit diesem Motiv und soll ihn spiegeln, sonst zeigt die Seite zwei verschiedene Morgenlichter. */ #danach{background:linear-gradient(180deg,var(--ivory) 0%,#fbeee4 32%,var(--dawn) 100%)} #danach h2{font-size:clamp(2rem,4.4vw,3rem);color:var(--plum);max-width:720px;margin-bottom:26px} #danach .intro{font-size:1.1rem;color:#5b4a56;max-width:660px;margin-bottom:30px} /* Zwischenueberschrift "Nach diesen drei Monaten ..." */ #danach .cue{font-family:'Cormorant Garamond',serif;font-weight:600;font-style:normal; font-size:clamp(1.5rem,3.2vw,1.9rem);color:var(--plum);margin:56px 0 32px} #danach .cue::after{content:"";display:block;width:60px;height:2px;background:var(--gold); border-radius:2px;margin-top:14px} /* Liste mit feinem goldenem Haken */ #danach .danach-list{list-style:none;max-width:720px;margin:0} #danach .danach-list li{display:flex;align-items:flex-start;gap:16px; font-size:1.04rem;line-height:1.55;margin-bottom:18px} #danach .danach-list li:last-child{margin-bottom:0} #danach .danach-list svg{flex:none;width:22px;height:22px;margin-top:4px;color:var(--gold)} /* Ausklang */ #danach .outro{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:600; font-size:clamp(1.2rem,2.6vw,1.35rem);color:var(--plum);max-width:660px;margin:52px 0 0} /* Schlusssatz mit Signatur */ #danach .danach-close{margin-top:72px;text-align:center} #danach .statement{display:inline-block;max-width:560px; font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:600; font-size:clamp(1.35rem,3vw,1.6rem);color:var(--plum);line-height:1.35; padding:20px 0;border-top:1px solid rgba(var(--gold-rgb),.6);border-bottom:1px solid rgba(var(--gold-rgb),.6)} #danach .signature{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:22px} #danach .signature span{font-family:'Cormorant Garamond',serif;font-size:1.15rem;color:var(--gold-deep)} #danach .signature::before,#danach .signature::after{content:"";flex:none;width:46px;height:1px;background:var(--gold)} @media (max-width:560px){#danach .signature::before,#danach .signature::after{width:28px}} /* ---- Das Erstgespraech / So laeuft es ab (Sektion 8) ---- */ #ablauf h2{font-size:clamp(2rem,4.4vw,3rem);color:var(--plum);max-width:680px;margin-bottom:22px} #ablauf .intro{font-size:1.1rem;color:#5f5058;max-width:660px;margin-bottom:44px} #ablauf .sub-head{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:1.6rem;color:var(--plum);margin:0 0 24px} #ablauf .journey{margin-bottom:38px} #ablauf .outro{max-width:660px;font-size:1.04rem;color:#584b53;margin-bottom:34px} /* ---- FAQ (Sektion 9): aufklappbare Liste, kein JS ---- */ #faq h2{font-size:clamp(2rem,4.4vw,3rem);color:var(--plum);max-width:680px;margin-bottom:36px} #faq .faq-list{max-width:760px} #faq details{background:#fff;border:1px solid rgba(74,53,80,.08);border-radius:16px; box-shadow:0 10px 30px rgba(74,53,80,.06);margin-bottom:14px} #faq details[open]{box-shadow:0 14px 38px rgba(74,53,80,.1)} #faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:18px; padding:22px 26px;font-family:'Cormorant Garamond',serif;font-weight:600;font-size:1.22rem; color:var(--plum);line-height:1.3} #faq summary::-webkit-details-marker{display:none} #faq summary::after{content:"";flex:none;margin-left:auto;width:11px;height:11px; border-right:2px solid var(--gold-deep);border-bottom:2px solid var(--gold-deep); transform:rotate(45deg);transition:transform .25s ease} #faq details[open] summary::after{transform:rotate(-135deg)} #faq summary:focus-visible{outline:3px solid var(--gold);outline-offset:-3px;border-radius:16px} #faq .faq-a{padding:0 26px 24px;max-width:660px;font-size:1rem;line-height:1.65;color:#584b53} /* ===================================================================== SEKTION 3 (index.html) – „Der Weg" Flacher, warmer Papierton statt Farbverlauf. Eine feine Goldlinie fuehrt als Pfad durch die Sektion: oben schmal und eng am Text, am Ankersatz knickt sie ab, danach fuehrt sie weiter rechts und laeuft ruhig aus. Der Text haengt an der Linie, die drei Fragen sitzen als Stationen darauf. Die Sektion setzt sich bewusst als eigenes Kapitel ab: oben eine Goldlinie als sauberer Schnitt gegen die dunkle Sektion darueber, unten laeuft der Papierton fast nahtlos in .path. Das Linienmotiv greift .draw-line (Hero) und die Verbindungslinie in #ablauf auf. ===================================================================== */ .weg{background:color-mix(in oklab,var(--ivory),var(--dawn) 22%); border-top:1px solid var(--gold); padding:104px 0 96px} .weg-inner{position:relative;max-width:880px;margin:0 auto;padding:0 26px} /* Linie, oberer Abschnitt: beginnt an der Oberkante der Sektion, damit der Weg von oben hereinzukommen scheint, und blendet dort weich ein. */ .weg-oben{position:relative;padding-left:76px} .weg-oben::before{content:"";position:absolute;left:34px;top:-104px;bottom:0;width:1px; background:linear-gradient(180deg in oklab,transparent,var(--plum) 26%,var(--gold)); opacity:.75} /* Der Knick. Feste Hoehe: die Kurve schliesst dadurch immer sauber an beide Geraden an, unabhaengig davon, wie lang der Text darueber laeuft. */ .weg-knick{position:relative;height:120px;color:var(--gold);opacity:.75} .weg-knick svg{position:absolute;left:0;top:0;width:96px;height:120px;display:block} /* Linie, unterer Abschnitt: breiter und blasser, laeuft nach unten aus. */ .weg-unten{position:relative;padding-left:124px} .weg-unten::before{content:"";position:absolute;left:81px;top:0;bottom:0;width:2px; border-radius:2px;background:linear-gradient(180deg in oklab,var(--gold),transparent); opacity:.6} /* ---- Typografie ---- */ /* Farbe kommt aus der globalen .kicker-Regel */ .weg .kicker{display:block;margin-bottom:22px; font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600} .weg h2{font-size:clamp(1.9rem,3.6vw,2.8rem);color:var(--plum);line-height:1.14; max-width:620px;margin-bottom:30px} .weg p{font-size:1.12rem;line-height:1.75;color:var(--ink);max-width:560px;margin-bottom:20px} /* Die drei Fragen als Stationen auf der Linie. Der Ring in Hintergrundfarbe schneidet die Linie hinter dem Punkt frei. */ .weg .fragen{list-style:none;margin:26px 0 34px} .weg .fragen li{position:relative;font-family:'Cormorant Garamond',serif;font-style:italic; font-size:clamp(1.25rem,2.4vw,1.6rem);line-height:1.45;color:var(--plum); max-width:520px;margin-bottom:16px} .weg .fragen li::before{content:"";position:absolute;left:-46px;top:.62em; width:9px;height:9px;border-radius:50%;background:var(--gold); box-shadow:0 0 0 5px color-mix(in oklab,var(--ivory),var(--dawn) 22%)} /* Der Ankersatz steht am Knick, wo der Weg die Richtung wechselt. Keine Rahmenlinien mehr - die Fuehrungslinie uebernimmt das. */ .weg .anker{font-family:'Cormorant Garamond',serif;font-weight:600; font-size:clamp(2rem,4.8vw,3rem);line-height:1.15;color:var(--gold-deep); margin:0 0 34px;max-width:none} .weg .stark{color:var(--plum);font-weight:600} .weg .btn{margin-top:16px} @media (max-width:760px){ .weg{padding:72px 0 68px} .weg-inner{padding:0 20px} .weg-oben{padding-left:34px} .weg-oben::before{left:11px;top:-72px} .weg-knick{height:76px} .weg-knick svg{width:30px;height:76px} .weg-unten{padding-left:48px} .weg-unten::before{left:25px} .weg p{font-size:1.06rem} .weg .fragen li::before{left:-26px;width:7px;height:7px; box-shadow:0 0 0 4px color-mix(in oklab,var(--ivory),var(--dawn) 22%)} } /* ---- Sektion 2 "Dein nächster Schritt" (danke.html, hell, zentriert) ---- */ /* Farbbruecke nach oben: der Hero endet in Dawn, diese Sektion beginnt in derselben Farbe. Dadurch gibt es an der Naht keine Kante, die Sektion haengt optisch am Hero. Nach gut der Haelfte ist sie auf Ivory und laeuft damit in den Seitenhintergrund aus. Die id gewinnt gegen .section-tint. */ /* Die oben beschriebene Farbbruecke haengt daran, dass diese Sektion genau dort beginnt, wo der Hero endet. Beide ziehen die Farbe aus --dawn, sie koennen also nicht mehr auseinanderlaufen. Zwischendurch stand hier ein fester Wert, solange die Endfarbe erprobt wurde. */ /* Weiche Naht statt harter Kante. Die Sektion wird um 150px nach oben ueber das Ende des Heros gezogen und blendet auf dieser Strecke per Maske ein. Die Maske laeuft nicht gerade, sondern in einer weichen Kurve (28% bei 56px, 72% bei 108px): Eine gerade Rampe setzt an ihren beiden Enden merklich ein und aus, die Kurve schleicht sich ein und wieder aus. Das ergibt denselben Eindruck wie ein zarter Blur, ohne einen Filter. Anfangs waren es 96px in gerader Rampe - der Uebergang war sauber, aber noch als Strecke wahrnehmbar. Durch die Ueberblendung mischen sich die beiden Verlaeufe ineinander, statt an einer Linie aufeinanderzustossen - dort kehrte sich die Richtung um (oben wird es nach unten waermer, hier nach unten heller), und genau diese Umkehr sieht das Auge als Kante, auch wenn die Farben identisch sind. Ein backdrop-filter waere der naheliegende Weg, scheitert hier aber: Hero und Sektion haben beide overflow:hidden und schneiden alles an der Grenze ab, ein Blur kaeme also nie ueber die Naht. Das Polster oben faengt die 150px wieder auf, damit die Karte an derselben Stelle steht wie zuvor - auf schmalen Fenstern ebenso. Aus demselben Grund ist das dekorative Blatt .db-1 um dieselbe Strecke nach unten gerueckt, sonst verblasste es in der Einblendzone. */ #schritt{position:relative;overflow:hidden;text-align:center; padding:246px 0 96px; margin-top:-150px; -webkit-mask:linear-gradient(180deg,transparent 0,rgba(0,0,0,.28) 56px, rgba(0,0,0,.72) 108px,#000 150px); mask:linear-gradient(180deg,transparent 0,rgba(0,0,0,.28) 56px, rgba(0,0,0,.72) 108px,#000 150px); background:linear-gradient(180deg,var(--dawn) 0%,var(--ivory) 55%,var(--ivory) 100%)} /* Karte liegt ueber den Blaettern */ #schritt .wrap{position:relative;z-index:1} /* Textspalte schmaler als die Karte, damit die Zeilen ruhig stehen */ #schritt h2{font-size:clamp(2rem,4.4vw,3rem);color:var(--plum);max-width:470px;margin:0 auto 22px} /* Untermarge auf 0: das Polster der Karte bestimmt den Abstand allein */ #schritt .intro{font-size:1.1rem;color:#5f5058;max-width:470px;margin:0 auto} /* Karte im Licht: Ivory-Flaeche, oben und unten je eine Goldlinie, seitlich randlos. Der Schein aussen ist Dawn mit viel Transparenz und grossem Radius - er soll wie Licht wirken, nicht wie ein Schlagschatten. Unten minimal weniger Polster als oben, das gleicht die Oberlaenge der Ueberschrift optisch aus. */ .danke-karte{background:var(--ivory); border-top:1px solid var(--gold);border-bottom:1px solid var(--gold); padding:56px 30px 52px; box-shadow:0 0 44px color-mix(in oklab,var(--dawn),transparent 55%), 0 0 120px color-mix(in oklab,var(--dawn),transparent 62%)} /* Zwei ruhende Blaetter, Silhouette wie im Hero. Bewusst ohne Animation: das Fallen bleibt dem Hero vorbehalten. Sie liegen hinter der Karte und werden von deren deckender Flaeche verdeckt, wo sie sich ueberschneiden. */ .danke-blatt{position:absolute;z-index:0;pointer-events:none;filter:blur(2px)} .danke-blatt svg{display:block;width:100%;height:100%} /* Um die 96px der Einblendstrecke nach unten geruecht, damit das Blatt optisch dort liegt wie zuvor und nicht in der Maske verblasst. */ .db-1{top:188px;left:5%;width:132px;height:132px;transform:rotate(-16deg); color:var(--blush);opacity:.34} .db-2{bottom:44px;right:6%;width:92px;height:92px;transform:rotate(23deg); color:var(--mauve);opacity:.16} @media (max-width:700px){ /* oben zusaetzlich die 96px der Einblendstrecke */ #schritt{padding:214px 0 64px} /* Karte darf bis nahe an den Bildschirmrand */ #schritt .wrap{padding-left:12px;padding-right:12px} .danke-karte{padding:38px 20px 34px; box-shadow:0 0 40px color-mix(in oklab,var(--dawn),transparent 62%)} /* Nur ein Blatt, und zwar im Polster ueber der Karte, damit es keine Textzeile stoert */ .db-1{top:158px;left:4%;width:78px;height:78px} .db-2{display:none} } /* ---- Sektion 3 "Was dich im Gespräch erwartet" (danke.html, hell, zentriert) ---- */ #erwartet{text-align:center} #erwartet h2{font-size:clamp(2rem,4.4vw,3rem);color:var(--plum);max-width:680px;margin:0 auto 22px} #erwartet .intro{font-size:1.1rem;color:#5b4a56;max-width:660px;margin:0 auto 24px} #erwartet p{max-width:660px;font-size:1.05rem;color:#584b53;margin:0 auto 20px} #erwartet p:last-child{margin-bottom:0} /* ---- Sektion 4 "Diskretion" (danke.html): dunkel, unten weich nach Morgenlicht, zentriert ---- */ /* Der letzte Farbstopp ist --dawn - er muss der Startfarbe von #schluss entsprechen, die beiden Sektionen sind nahtlos aneinandergesetzt. Zusaetzlich sind die zwei Stopps davor angefasst: #a68a8f und #d7b7ab waren mauve-graue, kuehle Toene, und der Verlauf sprang erst in den letzten Prozenten nach warm. Die Farben an der Naht passten dadurch zwar, aber das Tempo brach - was sich als Wechsel von kuehl nach warm liest. Jetzt sind die beiden Stopps waermer, sitzen frueher, und --dawn ist schon bei 97% erreicht. Der letzte Rest bleibt flach und trifft damit auf den ebenso flachen Anfang von #schluss. Der Stopp bei 91% ist mit der Endfarbe mitgewandert: von #ddbca4 auf #e5c7b1. Mit dem helleren Ziel waere der Sprung in den letzten sechs Prozent sonst groesser geworden als zuvor - und genau dieses Tempo hatte die Kante erzeugt, die wir hier abgestellt haben. */ #diskretion{background:linear-gradient(180deg, var(--night) 0%,var(--plum) 38%,#4a3550 60%,#6f5369 72%,#ab8f88 82%,#e5c7b1 91%,var(--dawn) 97%); padding:100px 0 150px;text-align:center} #diskretion h2{font-size:clamp(2rem,4.6vw,3rem);color:#fff;max-width:640px;margin:0 auto 22px} #diskretion p{color:rgba(251,246,241,.92);font-size:1.12rem;max-width:600px;margin:0 auto;line-height:1.7} /* Symbol ueber der Ueberschrift: umschliessender Kreis mit Herz (feine Linie + Glow) */ #diskretion .disk-sym{display:inline-flex;align-items:center;justify-content:center;color:var(--dawn);margin:0 auto 24px; filter:drop-shadow(0 0 7px rgba(244,220,203,.65)) drop-shadow(0 0 15px rgba(var(--gold-rgb),.4))} #diskretion .disk-sym svg{display:block;width:66px;height:66px} @media (max-width:720px){#diskretion{padding:64px 0 110px}} /* ---- Sektion 5 "Warmes Schlusswort" (danke.html, hell) ---- */ /* Gespiegelte Fassung des Hero-Verlaufs (Variante E). Hier laeuft er andersherum - warm oben, hell unten -, deshalb sitzt der Mittelstopp bei 68% statt 32%: Der helle Bereich haelt jetzt das untere Drittel, so wie der Hero das obere haelt. */ #schluss{background:linear-gradient(180deg,var(--dawn) 0%,#fbeee4 68%,var(--ivory) 100%); text-align:center;padding:96px 0 104px} /* Foto links, Text rechts */ #schluss .schluss-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;max-width:920px;margin:0 auto} #schluss .schluss-photo .frame{position:relative} #schluss .schluss-photo .frame::before{content:"";position:absolute;left:-14px;bottom:-14px; width:56%;height:60%;background:rgba(var(--gold-rgb),.28);border-radius:18px;z-index:0} #schluss .schluss-photo .frame img{position:relative;z-index:1;width:100%;height:auto; border-radius:18px;box-shadow:0 22px 55px rgba(74,53,80,.2);display:block} #schluss .schluss-text{min-width:0} @media (max-width:760px){ #schluss .schluss-grid{grid-template-columns:1fr;gap:28px} #schluss .schluss-photo{max-width:360px;margin:0 auto} } #schluss .statement{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:500; font-size:clamp(1.5rem,3.4vw,2.1rem);color:var(--plum);line-height:1.42;max-width:640px;margin:0 auto} /* Der Schein um "Es gibt ihn." ist am 19. August 2026 auf Wunsch des Nutzers entfallen. Die Hervorhebung traegt jetzt allein ueber Farbe und Schriftschnitt. Der fruehere text-shadow lag bei 8, 18 und 32px in --gold-rgb. */ #schluss .statement .anchor{font-style:normal;font-weight:600;color:var(--gold-deep)} #schluss .signature{display:flex;align-items:center;justify-content:center;gap:14px;margin:30px 0 40px} #schluss .signature span{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.2rem;color:var(--gold-deep)} #schluss .signature::before,#schluss .signature::after{content:"";flex:none;width:46px;height:1px;background:var(--gold)} @media (max-width:560px){#schluss .signature::before,#schluss .signature::after{width:28px}} /* ===================================================================== HERO-FEINSCHLIFF (danke.html, Sektion 1) – laeuft EINMAL beim Laden 1) Bestaetigungshaken ueber der Headline: der weisse Kreis blendet auf, dann zeichnet sich der Haken selbst. Erstes Zeichen der Seite. 2) Ivory-Strich unter der Headline (so breit wie die Headline), der sich von links nach rechts aufbaut, mit einer helleren "Stiftspitze" und ganz feinem Lichtstaub, die mitwandern und am Ende verblassen. 3) Danach leuchtet die Headline EINMAL kurz in Ivory auf und klingt ab. 4) Strich zum Video im selben Stil, senkrecht von oben nach unten. Die Verzoegerungen bauen aufeinander auf - wer eine aendert, muss die folgenden mitziehen, sonst ueberholen sich die Schritte. ===================================================================== */ /* 1) Haken im weissen Kreis. Das Selbstzeichnen greift dasselbe Motiv auf wie der Strich darunter, nur zuerst. */ .haken{display:flex;align-items:center;justify-content:center; width:74px;height:74px;margin:0 auto 26px;border-radius:50%;background:#fff;color:var(--gold); box-shadow:0 0 0 1px rgba(var(--gold-rgb),.32),0 10px 30px rgba(74,53,80,.12), 0 0 26px rgba(var(--gold-rgb),.26); animation:hakenKreis .55s cubic-bezier(.2,.8,.3,1) .1s both} .haken svg{width:34px;height:34px;display:block} /* Pfadlaenge betraegt rund 23 - 24 deckt ihn also sicher ab */ .haken path{stroke-dasharray:24;stroke-dashoffset:24;animation:hakenZug .5s ease-out .45s both} @keyframes hakenKreis{from{opacity:0;transform:scale(.72)}to{opacity:1;transform:scale(1)}} @keyframes hakenZug{to{stroke-dashoffset:0}} @media (max-width:560px){.haken{width:62px;height:62px;margin-bottom:20px}.haken svg{width:29px;height:29px}} /* Headline exakt so breit fassen, dass der Strich ihre Breite bekommt. Der Strich ist am 19. August 2026 aus danke.html entfernt worden; .head-wrap bleibt stehen, weil es sonst nichts kostet und den Strich sofort wieder tragen wuerde. Der Abstand nach unten kam vorher vom Strich (14px Vorlauf + 2px Hoehe + 24px Nachlauf) - deshalb steht er jetzt an der Headline selbst. */ .head-wrap{display:inline-block;max-width:100%} .head-wrap .glow-head{margin-bottom:40px} /* Wandernde "Stiftspitze": kleiner, hellerer Lichtpunkt */ .draw-tip{position:absolute;width:7px;height:7px;border-radius:50%;opacity:0;pointer-events:none; background:radial-gradient(circle,#ffffff 0%,#fff6e6 55%,rgba(255,246,230,0) 100%); box-shadow:0 0 10px 3px rgba(255,249,238,.9),0 0 18px 7px rgba(244,220,203,.45)} @keyframes tipTravel{0%{opacity:1}82%{opacity:1}100%{opacity:0}} /* Schweif aus feinem, ivory Lichtstaub hinter der Spitze (Zauberstab-Effekt): baut sich mit dem Strich auf, an der Spitze am dichtesten, laeuft nach hinten aus (Masken-Verlauf) und verblasst am Ende. */ .draw-trail{position:absolute;pointer-events:none;opacity:0} .draw-line .draw-trail{left:0;top:50%;transform:translateY(-50%);width:100%;height:16px; background-image: radial-gradient(1px 1px at 2px 5px,rgba(255,250,240,.9),transparent 60%), radial-gradient(1px 1px at 8px 11px,rgba(255,247,232,.7),transparent 60%), radial-gradient(1px 1px at 13px 3px,rgba(255,252,244,.6),transparent 60%); background-size:14px 16px,19px 16px,24px 16px;background-repeat:repeat-x; -webkit-mask:linear-gradient(90deg,transparent 0%,#000 62%); mask:linear-gradient(90deg,transparent 0%,#000 62%); animation:trailFadeX 1.6s ease-out 1.1s both} .beam-to-video .draw-trail{left:50%;top:0;transform:translateX(-50%);width:16px;height:0; background-image: radial-gradient(1px 1px at 5px 2px,rgba(255,250,240,.9),transparent 60%), radial-gradient(1px 1px at 11px 8px,rgba(255,247,232,.7),transparent 60%), radial-gradient(1px 1px at 3px 13px,rgba(255,252,244,.6),transparent 60%); background-size:16px 14px,16px 19px,16px 24px;background-repeat:repeat-y; -webkit-mask:linear-gradient(180deg,transparent 0%,#000 62%); mask:linear-gradient(180deg,transparent 0%,#000 62%); animation:trailDrawY2 1.6s ease-out 2.85s both} @keyframes trailFadeX{0%{opacity:.85}80%{opacity:.85}100%{opacity:0}} @keyframes trailDrawY2{0%{height:0;opacity:.85}80%{opacity:.85}100%{height:100%;opacity:0}} /* 2) Waagerechter Strich unter der Headline UNBENUTZT seit dem 19. August 2026: Das Element ist aus danke.html entfernt. Die Regeln bleiben stehen, damit der Strich mit einer Zeile im HTML zurueckkaeme - und weil .draw-trail und .draw-tip weiterhin vom Lichtstrahl zum Video gebraucht werden. */ .draw-line{position:relative;display:block;width:0;height:2px;margin:14px 0 24px;border-radius:2px; background:linear-gradient(90deg,rgba(251,246,241,.12) 0%,rgba(255,250,240,.8) 18%,rgba(255,250,240,.9) 100%); box-shadow:0 0 8px rgba(var(--gold-rgb),.75),0 0 16px rgba(var(--gold-rgb),.4); animation:lineDrawX 1.6s ease-out 1.1s both} @keyframes lineDrawX{from{width:0}to{width:100%}} .draw-line .draw-tip{left:100%;top:50%;transform:translate(-50%,-50%); animation:tipTravel 1.6s ease-out 1.1s forwards} /* 3) Headline erscheint von links nach rechts Stand 19. August 2026. Vorher flammte sie bei 2,75s einmal auf und behielt einen dauerhaften Gold-Glow (Keyframes headGlowSettle) - der Glow ist auf Wunsch des Nutzers entfallen, ebenso der Strich darunter. Damit war die Stelle zwischen Haken und Lichtstrahl leer; das Erscheinen der Headline fuellt sie und uebernimmt die Rolle, die vorher der Strich hatte. Umgesetzt als wandernde Maske, nicht als harter Schnitt: Die Maske ist zweieinhalbmal so breit wie die Headline und traegt einen weichen Verlauf von deckend nach durchsichtig. Sie startet rechts aussen - dort liegt der durchsichtige Teil ueber dem Text - und wandert nach links, bis der deckende Teil alles freigibt. Die Kante ist dadurch weich statt scharf, was zum ruhigen Ton der Seite passt und den zeichnenden Charakter des alten Strichs weitertraegt. Beginn bei 1,05s, direkt nachdem der Haken fertig gezeichnet ist (0,45s + 0,5s), Ende bei 2,55s - kurz bevor der Lichtstrahl zum Video bei 2,85s einsetzt. */ .hero h1.glow-head{ -webkit-mask-image:linear-gradient(90deg,#000 0 38%,transparent 62% 100%); mask-image:linear-gradient(90deg,#000 0 38%,transparent 62% 100%); -webkit-mask-size:250% 100%; mask-size:250% 100%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; animation:headWipe 1.5s cubic-bezier(.22,.7,.3,1) 1.05s both} @keyframes headWipe{ from{-webkit-mask-position:100% 0;mask-position:100% 0} to {-webkit-mask-position:0 0; mask-position:0 0} } /* 4) Senkrechter Strich zum Video – gleicher Stil; feste Hoehe, damit das Video an Ort und Stelle bleibt (nur die Fuellung + Spitze animieren) */ .beam-to-video{position:relative;display:block;width:2px;height:58px;margin:6px auto 12px} .beam-to-video::before{content:"";position:absolute;top:0;left:0;width:100%;height:0;border-radius:2px; background:linear-gradient(180deg,rgba(251,246,241,.12) 0%,rgba(255,250,240,.8) 18%,rgba(255,250,240,.9) 100%); box-shadow:0 0 8px rgba(var(--gold-rgb),.75),0 0 16px rgba(var(--gold-rgb),.4); animation:lineDrawY 1.6s ease-out 2.85s both} @keyframes lineDrawY{from{height:0}to{height:100%}} .beam-to-video .draw-tip{left:50%;top:0;transform:translate(-50%,-50%); animation:tipDrop 1.6s ease-out 2.85s forwards} @keyframes tipDrop{0%{opacity:1;top:0}82%{opacity:1}100%{opacity:0;top:100%}} @media (prefers-reduced-motion:reduce){ .haken{animation:none} .haken path{stroke-dashoffset:0;animation:none} .draw-line{width:100%;animation:none} .beam-to-video::before{height:100%;animation:none} .draw-tip,.draw-trail{display:none} .hero h1.glow-head{animation:none;-webkit-mask-image:none;mask-image:none} /* Der Pfeil bleibt sichtbar, nur das Schweben hoert auf - er ist ein Wegweiser, keine Zierde, und wird hier gebraucht. Deshalb animation:none und nicht display:none wie bei .draw-tip. */ .weiter{animation:none;opacity:1} } /* ===================================================================== SEKTION 3 (danke.html) – "Was dich im Gespraech erwartet" Emotion: Zuversicht/Klarheit, rein typografisch (keine Fotos). Drei Icon-Karten im Zentrum, das Klarheit-Herzstueck als Abschluss. ===================================================================== */ .s3{text-align:center} .s3 h2{font-size:clamp(2rem,4.4vw,3rem);color:var(--plum);max-width:680px;margin:0 auto 22px} .s3 .intro{font-size:1.1rem;color:#5b4a56;max-width:660px;margin:0 auto 24px} .s3 .ic{display:inline-flex;align-items:center;justify-content:center;color:var(--gold)} /* Klarheit-Block: Originalsatz + hervorgehobener Zusatz mit Dawn-Glow */ .s3-quote{max-width:660px;margin:44px auto 0} .s3-quote-lead{font-size:1.05rem;color:#584b53;margin-bottom:16px} .s3-quote-hero{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:600; font-size:clamp(1.45rem,3.2vw,2.05rem);color:var(--plum);line-height:1.35; text-shadow:0 0 22px rgba(244,220,203,.75)} /* "ruhiger Ort" + "dich selbst" */ .s3-ort{font-size:.98rem;color:var(--muted);max-width:560px;margin:30px auto 0} .s3-selbst{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:600; font-size:clamp(1.2rem,2.6vw,1.5rem);color:var(--gold-deep);max-width:560px;margin:12px auto 0} /* Die drei Blicke als Icon-Karten */ .s3-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:820px; margin:42px auto 0;text-align:left} .s3-card{background:#fff;border-radius:18px;padding:28px 24px;border-top:3px solid var(--gold); box-shadow:0 14px 40px rgba(74,53,80,.08)} .s3-card .ic{width:46px;height:46px;border-radius:50%;background:#fbf3ea;margin-bottom:14px} .s3-card .ic svg{width:24px;height:24px} .s3-card h3{font-size:1.3rem;color:var(--plum);margin-bottom:8px} .s3-card p{font-size:.98rem;color:#584b53;line-height:1.55} @media(max-width:700px){.s3-cards{grid-template-columns:1fr;max-width:420px}} /* Dauerhafter Schein um das Abschlussfeld, in vier Lagen: Goldring an der Kante, ein enger und ein weiter Halo fuer die Tiefe, darunter ein erdender Schatten. Verwandt mit .recog-note, dort in Blush auf dunklem Grund, hier in Gold auf hellem. Bewusst statisch - das Atmen bleibt dem Button vorbehalten. */ .band{box-shadow:0 0 0 1px rgba(var(--gold-rgb),.45), 0 0 28px rgba(var(--gold-rgb),.30), 0 0 80px rgba(var(--gold-rgb),.26), 0 24px 70px rgba(44,33,48,.22)} /* ===================================================================== DER HANDLUNGSKNOPF Die Fuellung kommt aus --gold, die Beschriftung ist weiss. Seit dem 18. August 2026 steht in --gold das Terrakotta #b5654a. ENTSCHIEDEN, NICHT MEHR OFFEN. Der Stand mit Terrakotta, gemessen am tatsaechlichen Sitz der Knoepfe: weisse Schrift 4,26 (Richtwert 4,5) Flaeche, heller Grund 3,28 (Richtwert 3,0) Flaeche, Wiedererkennung 2,77 - dort traegt der Umriss, siehe unten Flaeche, Abschluss-Band 3,14 Die 4,26 statt 4,5 bei der Schrift sind bewusst hingenommen: gegenueber den 2,58 des Golds ist es trotzdem ein Sprung, und eine Fuellung, die 4,5 erreicht, waere so dunkel, dass sie ihre Waerme verliert. Die folgenden Absaetze halten die Goldzeit fest - warum das Gold weichen musste und welche Wege vorher durchprobiert wurden. Ihre Zahlen beziehen sich auf das alte Gold #c49a63 (weisse Schrift 2,58, Flaeche 1,91) und sind Vorgeschichte, nicht der aktuelle Stand. Sie stehen hier, damit niemand sie ein zweites Mal durchprobiert. Zwei Wege wurden gebaut und von der Kundin verworfen: 1. Dunkle Beschriftung #332830 auf dem hellen Gold. Loest die Schrift (5,49) an allen zwoelf Knoepfen, ohne die Fuellung anzufassen. Verworfen, weil der Knopf dadurch seine Signalwirkung verliert: Auf einer Seite mit durchgehend dunkler Schrift faellt ein Element mit heller Schrift durch den Musterbruch auf. Nimmt man ihm das, ist er besser lesbar, aber nur noch ein Element unter vielen. 2. Dunklere Fuellung #936d3d bei weisser Schrift. Loest beides ohne Kante (4,67 und 3,46). Verworfen, weil das Gold dabei spuerbar Richtung Bronze wandert. Viel Spielraum gibt es dort nicht: #936d3d ist der hellste Ton, der weisse Schrift noch traegt, ab #96703f sind es 4,48. Zu beachten waere dann auch das Ueberfahren - die Grundregel hellt um 7% auf und druecken die Schrift auf 4,13. Ebenfalls verworfen: eine dunkle 1px-Linie als Kante. Zusammen mit dunkler Schrift ergab das zwei dunkle Elemente auf heller Flaeche, was den Knopf schwer und stempelhaft wirken liess. Die helle Innenkante ist geblieben, sie muss in die Keyframes, nicht nur in die Grundregel: .btn-gold atmet ueber eine Animation, die box-shadow setzt, und eine laufende Animation gewinnt gegen die Grundregel - die Innenkante waere sonst waehrend des Atmens verschwunden. Das Leuchten ist auf hellen Sektionen kraeftiger als auf dunklen. Grund: Ein Schein, der heller ist als sein Untergrund, ist auf hellem Grund praktisch unsichtbar - sichtbar wird er dort nur als satter, etwas dunklerer Warmton. Auf dunklem Grund traegt dasselbe Gold von allein, dort wuerde dieselbe Staerke ueberzogen wirken. Deshalb zwei Animationen: btnAtemKanteHell fuer helle Sektionen, btnAtemKante fuer .recog und .band. Der Schein auf hellen Sektionen liegt in gestaffelten Lagen: 5, 13, 29 und 55px mit fallender Deckkraft, darunter der erdende Schatten mit Versatz. Am 19. August 2026 auf Wunsch des Nutzers halbiert und gedimmt - vorher 10, 26, 58 und 110px bei deutlich hoeherer Deckkraft. Der Schein sitzt damit eng am Knopf statt als Wolke darum. Gestaffelt statt in zwei Wolken, weil sich die Lagen zur Mitte hin addieren und trotzdem keine Kante bilden - kein Radius dominiert. Der helle Kern innen erzeugt den Eindruck von Licht: Er hebt vor allem die obere Kante ab und gibt dem Knopf eine Lichtrichtung. Ohne ihn wirkt derselbe Schein wie ein weicher Schlagschatten. Die zwei aeusseren Lagen sind bewusst dunkler als die Fuellung. Auf cremefarbenem Grund entsteht Sichtbarkeit ueber Dunkelheit, nicht ueber Helligkeit - ein Schein, der heller waere als sein Untergrund, waere schlicht unsichtbar. Streuung (der vierte Schattenwert) ist bewusst nicht im Spiel: Sie erzeugt eine Zone gleicher Deckkraft und damit einen harten Ring. Reihenfolge beachten: enge Lagen vor weiten, sonst verwaschen die weiten die engen. */ .btn-gold{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.5), 0 0 5px rgba(255,255,255,.5), 0 0 13px rgba(255,248,236,.32), 0 0 29px rgba(var(--gold-tief-rgb),.32), 0 0 55px rgba(var(--gold-dunkel-rgb),.2), 0 4px 12px rgba(var(--gold-dunkel-rgb),.3); animation-name:btnAtemKanteHell} .btn-gold:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.6), 0 0 8px rgba(255,255,255,.6), 0 0 20px rgba(255,248,236,.42), 0 0 44px rgba(var(--gold-tief-rgb),.4), 0 0 80px rgba(var(--gold-dunkel-rgb),.28), 0 6px 16px rgba(var(--gold-dunkel-rgb),.36) !important} @keyframes btnAtemKanteHell{ 0%,100%{transform:scale(1); box-shadow:inset 0 0 0 1px rgba(255,255,255,.5), 0 0 5px rgba(255,255,255,.5), 0 0 13px rgba(255,248,236,.32), 0 0 29px rgba(var(--gold-tief-rgb),.32), 0 0 55px rgba(var(--gold-dunkel-rgb),.2), 0 4px 12px rgba(var(--gold-dunkel-rgb),.3)} 50%{transform:scale(1.03); box-shadow:inset 0 0 0 1px rgba(255,255,255,.55), 0 0 7px rgba(255,255,255,.56), 0 0 17px rgba(255,248,236,.38), 0 0 37px rgba(var(--gold-tief-rgb),.38), 0 0 70px rgba(var(--gold-dunkel-rgb),.27), 0 5px 15px rgba(var(--gold-dunkel-rgb),.34)} } /* Der Knopf in der Kopfzeile traegt keinen Schein. Wunsch des Nutzers vom 19. August 2026. Die Leiste ist ein schmales Band, das ueber dem Inhalt liegt und durchscheint; ein Schein darin legt sich auf den durchscheinenden Grund und wirkt unruhig, waehrend die Seite darunter weiterlaeuft. Es bleiben die helle Kante und ein knapper, erdender Schatten. Eigene Keyframes, weil das Atmen box-shadow mitsetzt: Stuende der knappe Schatten nur in der Grundregel, kaeme der Schein waehrend der Bewegung zurueck. */ .topbar .btn-gold{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.4), 0 2px 6px rgba(var(--gold-dunkel-rgb),.26); animation-name:btnAtemLeiste} .topbar .btn-gold:hover{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.5), 0 3px 10px rgba(var(--gold-dunkel-rgb),.32) !important} @keyframes btnAtemLeiste{ 0%,100%{transform:scale(1); box-shadow:inset 0 0 0 1px rgba(255,255,255,.4), 0 2px 6px rgba(var(--gold-dunkel-rgb),.26)} 50%{transform:scale(1.03); box-shadow:inset 0 0 0 1px rgba(255,255,255,.45), 0 3px 8px rgba(var(--gold-dunkel-rgb),.3)} } /* Dunkle Sektionen: die Silhouette kommt aus dem Umriss, nicht aus der Flaeche. Entscheidung des Nutzers vom 20. August 2026. Terrakotta #b5654a hebt sich vom Grund der Wiedererkennung (#443149) nur mit 2,77 ab, noetig sind 3,0; im Abschluss-Band (#392a3e) sind es 3,14. Der Richtwert laesst ausdruecklich zu, dass ein Bedienelement ueber seinen Umriss erkennbar ist statt ueber seine Flaeche - weiss gegen #443149 liegt bei 11:1. Daher die kraeftige helle Innenkante, dazu aussen eine dunkle Haarlinie, damit sie nicht ausfranst. Die Kante hebt den Wert der Flaeche NICHT. Wer die 2,77 spaeter verbessern will, muss die Fuellung aendern, nicht die Kante. Dazu der Terrakotta-Schimmer, Entscheidung des Nutzers vom 20. August 2026: Er liegt jetzt schon im Ruhezustand um den Knopf, nicht erst im Hover. Er ersetzt den dunklen Schatten der frueheren Fassung - der war auf dunklem Grund ohnehin kaum zu sehen, und zwei Schatten uebereinander wuerden den Schimmer nur truebe machen. Die dunkle Haarlinie bleibt, sie gehoert zur Kante und haelt sie scharf. WICHTIG: Kante und Schimmer muessen in die Grundregel UND in beide Keyframes. Das Atmen setzt box-shadow mit, und eine laufende Animation gewinnt gegen die Grundregel - stuenden sie nur dort, waeren sie waehrend der Bewegung weg. */ .recog .btn-gold,.band .btn-gold{ box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.85), 0 0 0 1px rgba(20,12,22,.35), 0 12px 30px rgba(var(--gold-rgb),.5); animation-name:btnAtemKante} /* Der Hover braucht hier eine eigene Regel, sonst faellt die Kante genau im Moment der Bedienung weg: .btn-gold:hover setzt box-shadow neu, und box-shadow ist eine Eigenschaft, kein Stapel - wer sie setzt, setzt sie ganz. Auf hellem Grund ist das folgenlos, dort traegt die Flaeche den Kontrast selbst (3,28). Hier traegt ihn allein der Umriss. Kante und Schimmer bleiben also stehen und gehen einen Schritt ueber den Scheitel des Atmens hinaus (.62 auf .68) - sonst waere der Hover im falschen Moment schwaecher als die Ruhebewegung und die Rueckmeldung ginge unter. Das Anheben und Aufhellen kommt weiterhin aus der allgemeinen Regel: transform und filter stehen dort und werden hier nicht angefasst. Nur box-shadow wird ersetzt. Das !important ist aus zwei Gruenden noetig, nicht aus einem: Die allgemeine Hover-Regel traegt es selbst, und animation-play-state:paused haelt das Atmen nur an, statt es zu beenden - eine pausierte Animation setzt ihre Werte weiter durch und steht in der Kaskade ueber normalen Deklarationen. Spezifitaet 0,3,0 gegen 0,2,0 gibt den Ausschlag. */ .recog .btn-gold:hover,.band .btn-gold:hover{ box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.95), 0 0 0 1px rgba(20,12,22,.4), 0 14px 38px rgba(var(--gold-rgb),.68) !important} /* Das Atmen schwillt im Schimmer an, wie es die Knoepfe auf hellem Grund auch tun (dort .3 auf .6). Die Kante zieht leicht mit, damit der Knopf im Scheitel nicht weicher wirkt als im Ruhepunkt. */ @keyframes btnAtemKante{ 0%,100%{transform:scale(1); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.85), 0 0 0 1px rgba(20,12,22,.35), 0 12px 30px rgba(var(--gold-rgb),.5)} 50%{transform:scale(1.03); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.95), 0 0 0 1px rgba(20,12,22,.4), 0 12px 36px rgba(var(--gold-rgb),.62)} } /* ===================================================================== RECHTSTEXT-SEITEN (impressum.html, spaeter datenschutz.html) Ruhige Lesetypografie auf dem Seitenhintergrund, schmale Spalte. ===================================================================== */ /* Kopfzeile dauerhaft sichtbar, nicht einblendend wie .topbar */ .legal-head{background:var(--ivory);border-bottom:1px solid rgba(44,33,48,.08)} .legal-head .wrap{display:flex;align-items:center;justify-content:space-between; gap:16px;flex-wrap:wrap;min-height:72px;padding-top:14px;padding-bottom:14px} .legal{padding:64px 0 88px} .legal .wrap{max-width:720px} .legal h1{font-size:clamp(2.1rem,4.4vw,3rem);color:var(--plum);margin-bottom:40px} .legal h2{font-size:clamp(1.25rem,2.4vw,1.55rem);color:var(--plum);margin:38px 0 12px} .legal p{font-size:1.02rem;line-height:1.75;color:var(--ink);margin-bottom:14px;max-width:620px} .legal address{font-style:normal;font-size:1.02rem;line-height:1.85;color:var(--ink)} /* Die UID im Impressum steht direkt unter der Anschrift. Ohne den Abstand klebte sie an der Telefonnummer und laese sich wie eine weitere Kontaktzeile. */ .legal-uid{margin-top:14px} .legal h3{font-family:'Inter',sans-serif;font-size:1.02rem;font-weight:600;color:var(--plum); margin:26px 0 10px;letter-spacing:.01em} .legal-stand{margin-top:44px;font-size:.92rem;color:var(--muted)} /* Eigene Platzhalter-Markierung fuer die Rechtstext-Seiten, gleich aussehend wie .ph. Sie entstand, als .ph im Projekt noch doppelt belegt war (Markierung und Foto-Wrapper); dieser Konflikt besteht nicht mehr, der Foto-Wrapper heisst seit dem Umbau des Story-Abschnitts .story-photo mit .frame darin. Zusammengelegt wird trotzdem nicht: Die .ph-Stellen verschwinden mit den Platzhaltern vor dem Livegang, .legal-ph bleibt fuer das Stand-Datum stehen. Getrennt zu halten kostet vier Zeilen und erspart, beim Aufraeumen die falsche Regel zu loeschen. */ .legal-ph{background:rgba(var(--gold-rgb),.22);border-bottom:1px dashed var(--gold); padding:1px 5px;border-radius:3px;font-style:italic} .legal a{color:var(--gold-deep);text-decoration:underline;text-underline-offset:3px} .legal a:hover{color:var(--plum)} /* Links in der Fusszeile beider Hauptseiten (Impressum, spaeter Datenschutz) */ footer a:not(.btn){color:var(--gold-deep);text-decoration:underline;text-underline-offset:3px} footer a:not(.btn):hover{color:var(--plum)} @media (max-width:600px){ .legal{padding:44px 0 64px} .legal h1{margin-bottom:30px} .legal h2{margin-top:30px} }