/* NOBLE SILENCE — layout: editorial grid + scenes */
.wrap{padding-inline:var(--margin)}
/* Sprungziele halten Abstand zur fixierten Navigationsleiste, sonst schiebt
sich die Leiste beim Ankersprung ueber die Ueberschrift. */
main [id]{scroll-margin-top:clamp(5rem,9vw,7rem)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--col-gap);position:relative;z-index:1}
.scene{position:relative;padding-block:calc(var(--chapter-gap) * .55)}
/* Zieht den Inhalt an die vorige Sektion heran — gedacht fuer Bloecke, die
inhaltlich noch zur Sektion darueber gehoeren (Fakten, Raumliste). */
.scene--pull{padding-top:0}
/* ABER: wechselt dabei der Grund, faellt der Farbwechsel mit der Oberkante
des ersten Elements auf dieselbe Linie — bei einer Bildreihe liest sich das
als harter Balken. Dann bekommt der neue Grund Luft, bevor Inhalt kommt.
Der Wert ist knapp die Haelfte eines Kapitelabstands: genug, damit die
Flaeche als eigener Grund liest, zu wenig fuer ein Loch. */
.chapter--paper + .scene--pull:not(.chapter--paper),
.chapter--dark + .scene--pull:not(.chapter--dark){padding-top:calc(var(--chapter-gap) * .42)}
.scene--full{min-height:100svh;display:grid;align-items:center}
.scene--empty{min-height:78svh;display:grid;align-content:center}
.chapter--dark,.chapter--cool,.chapter--paper{background:var(--bg);color:var(--fg)}
/* Spalten-Helfer (Desktop): .c-a-b = grid-column a / b */
.c-1-5{grid-column:1/5}.c-1-6{grid-column:1/6}.c-1-7{grid-column:1/7}.c-1-8{grid-column:1/8}.c-1-9{grid-column:1/9}.c-2-9{grid-column:2/9}.c-6-12{grid-column:6/12}.c-7-12{grid-column:7/12}.c-7-13{grid-column:7/13}.c-8-13{grid-column:8/13}.c-9-13{grid-column:9/13}
@media (max-width:900px){.grid>[class*="c-"]{grid-column:1/13}}
/* Hero */
.hero{position:relative;min-height:100svh;overflow:hidden;background:var(--ns-ink);color:var(--ns-bone)}
.hero__media{position:absolute;inset:0}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:55% 50%;filter:sepia(.07) contrast(1.03)}
/* Rollover "Augen oeffnen": ein .eyes-Rahmen traegt zwei Zustaende derselben
Aufnahme; das zweite Bild liegt darueber und blendet beim Ueberfahren ein.
CSS :hover nur mit echtem Zeiger, dazu .is-eyes per JS (Touch: Antippen). */
.eyes .eyes__open{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
transition:opacity 700ms var(--ease-soft);pointer-events:none}
@media (hover:hover){.eyes:hover .eyes__open{opacity:1}}
.hero__media::after{content:"";position:absolute;inset:0;
background:
linear-gradient(100deg,rgba(var(--scrim),.52) 0%,rgba(var(--scrim),.28) 30%,rgba(var(--scrim),0) 62%),
linear-gradient(180deg,rgba(var(--scrim),.28) 0%,rgba(var(--scrim),0) 34%,rgba(var(--scrim),.34) 100%)}
.hero__content{position:relative;z-index:2;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
padding:var(--margin);padding-top:clamp(6rem,14vh,10rem);padding-bottom:clamp(4rem,12vh,8rem)}
.hero__wordmark{max-width:9ch;font-family:var(--font-display);font-weight:400;
font-size:var(--t-display-xl);line-height:.9;letter-spacing:-.02em;color:var(--ns-bone)}
.hero__wordmark em{font-style:italic}
.hero__claim{display:flex;align-items:center;gap:var(--s-3);margin-top:clamp(1.25rem,2.5vh,2rem);color:var(--ns-mist)}
.hero__claim::before{content:"";width:clamp(36px,5vw,86px);height:1px;background:currentColor;opacity:.7;flex:none}
.hero__claim .label{color:inherit;font-size:var(--t-small)}
.hero__scroll{position:absolute;left:50%;bottom:clamp(2rem,6vh,3.5rem);transform:translateX(-50%);z-index:2;
display:flex;flex-direction:column;align-items:center;gap:var(--s-2);color:var(--ns-stone);text-align:center}
.hero__scroll-arrow{font-size:1rem;line-height:1}
@media (max-width:900px){
.hero__media img{object-position:50% 42%}
.hero__media::after{background:
linear-gradient(180deg,rgba(var(--scrim),.3) 0%,rgba(var(--scrim),0) 30%,rgba(var(--scrim),.62) 100%)}
.hero__content{justify-content:flex-end;padding-bottom:clamp(7rem,22vh,11rem)}
}
/* Partnerleiste — Haarlinie, mittig eingesetzte Kennzeile, Logoreihe,
Abschlusslinie. Die Logos liegen als Ein-Ton-Grafiken mit Transparenz vor,
damit die Reihe als eine Zeile liest und nicht als vier fremde Marken. */
.proof{display:grid;gap:var(--s-5);margin-top:var(--s-7)}
/* Die Kennzeile sitzt in der Linie, nicht darueber. */
.proof__label{display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem);margin:0}
.proof__label::before,.proof__label::after{content:"";flex:1;height:1px;background:var(--hairline)}
.proof__label .label{color:var(--fg-muted);white-space:nowrap}
/* Mittig gesetzt statt auf die volle Breite verteilt: die Reihe bleibt als
Gruppe zusammen, aussen bleibt Rand. Keine Abschlusslinie — die Kennzeile
oben genuegt als Rahmen. */
.proof__row{--s:1;list-style:none;margin:0;padding:0;
display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
gap:clamp(1.75rem,4vw,3rem) clamp(2.5rem,6vw,6rem)}
.proof__item{display:flex;align-items:center;justify-content:center}
/* Die Hoehe steht je Logo im Markup (--h): die Seitenverhaeltnisse reichen von
1,8 bis 8,7, eine gemeinsame Hoehe waere optisch falsch. --s skaliert die
ganze Reihe auf schmalen Schirmen. */
.proof__item img{display:block;width:auto;max-width:100%;
height:calc(var(--h,40) * var(--s) * 1px);opacity:.78}
@media (max-width:900px){
.proof__row{--s:.84}
}
@media (max-width:560px){
.proof__row{--s:.72;gap:var(--s-5) var(--s-6)}
}
/* Bild-Module */
.media{position:relative;overflow:hidden;background:var(--bg-elev)}
.media img{width:100%;height:100%;object-fit:cover}
.media--2x1{aspect-ratio:2/1}.media--2x3{aspect-ratio:2/3}.media--3x2{aspect-ratio:3/2}.media--16x9{aspect-ratio:16/9}.media--9x16{aspect-ratio:9/16}
.media--4x5{aspect-ratio:4/5}.media--tall{aspect-ratio:3/4}.media--1x1{aspect-ratio:1/1}
.media--bleed-r{margin-right:calc(var(--margin) * -1)}
.full-image{position:relative;min-height:100svh;overflow:hidden}
.full-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Ken-Burns-Zoom auf einem eigenen Wrapper, getrennt vom Parallax-Bild selbst —
sonst schreiben CSS-Animation und JS-Parallax auf dieselbe transform-Property
desselben Elements und ueberschreiben sich gegenseitig. */
.full-image__drift{position:absolute;inset:0;overflow:hidden}
.full-image .full-image__drift img{position:static;width:100%;height:100%;object-fit:cover}
.full-image__text{position:relative;z-index:2;min-height:100svh;display:flex;align-items:flex-end;padding:var(--margin);padding-bottom:clamp(3rem,10vh,8rem)}
.full-image::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(var(--scrim),0) 40%,rgba(var(--scrim),.55) 100%)}
/* TEMPORÄR — Story: Finale laeuft am unteren Rand zu Ink-Schwarz aus, damit
der Schnitt zur folgenden dunklen "Stille"-Section weicher wirkt */
[aria-label="Finale"]::before{background:linear-gradient(180deg,rgba(var(--scrim),0) 30%,rgba(var(--scrim),.55) 70%,var(--ns-ink) 100%)}
[aria-label="Finale"] .full-image__text{justify-content:flex-start}
/* Schriftgroessen der Vollbild-Texte (vorher inline im Markup, dadurch nicht
mobil anpassbar). Handy: 45px statt 38/42 — die Saetze tragen die Sektion. */
.full-image__lead{font-size:clamp(2.4rem,6.4vw,6rem)}
.full-image__finale{font-size:calc(var(--t-display) * .88)}
@media (max-width:700px){
.full-image__lead,.full-image__finale{font-size:clamp(2.75rem,12vw,3.4rem)}
}
/* Finale mobil (Kundenwunsch 10.09.: Person an den rechten Bildrand, aber ganz
zu sehen): Mobilfassung ist ein 1135x1535-Ausschnitt aus terrace-sunset-2752,
x 930-2065, die Figur steht an dessen rechter Kante, das wehende Kleid laeuft
dort aus. Rechtsbuendig eingepasst, damit sie bei jedem Hochformat rechts
bleibt; das Handy sieht mit scale(1.1) rund 645px des Ausschnitts, Tablets
fast alles. Der Text (62 %) liegt links ueber Himmel und Landschaft. */
@media (max-width:900px){
[aria-label="Finale"] .full-image__drift img{object-position:100% 50%}
}
[aria-label="Finale"] .seq{max-width:62%;margin-right:auto;text-align:left}
/* Atmosphäre / Gradient-Kapitel */
.atmos{position:relative;overflow:hidden;isolation:isolate}
.atmos__layer{position:absolute;inset:-20%;z-index:-1;pointer-events:none;
background:
radial-gradient(60% 50% at 30% 40%, rgba(201,180,174,.45) 0%, rgba(201,180,174,0) 70%),
radial-gradient(50% 45% at 75% 65%, rgba(154,140,147,.35) 0%, rgba(154,140,147,0) 70%),
linear-gradient(160deg, var(--ns-ivory) 0%, var(--ns-bone) 55%, var(--ns-mist) 100%);
filter:blur(40px)}
.chapter--dark .atmos__layer{
background:
radial-gradient(55% 45% at 25% 35%, rgba(154,140,147,.28) 0%, rgba(154,140,147,0) 70%),
radial-gradient(45% 40% at 78% 70%, rgba(184,176,164,.14) 0%, rgba(184,176,164,0) 70%),
linear-gradient(160deg, var(--ns-charcoal) 0%, var(--ns-ink) 60%, var(--ns-black) 100%)}
.grain::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.07;mix-blend-mode:multiply;
background-image:url("data:image/svg+xml;utf8,")}
.chapter--dark .grain::after{mix-blend-mode:screen;opacity:.06}
/* Modell */
.model{display:grid;gap:var(--s-5)}
.model__def{max-width:var(--measure);color:var(--fg-soft);opacity:0;transform:translateY(6px);
transition:opacity var(--dur-reveal) var(--ease-settle),transform var(--dur-reveal) var(--ease-settle)}
.model__row:hover .model__def,.model__row:focus-within .model__def,.model__row.is-open .model__def{opacity:1;transform:none}
@media (max-width:900px){.model__row,.model__sum{grid-template-columns:1fr;gap:var(--s-2)}.model__def{opacity:1;transform:none}
.model__print{max-width:78%;margin-top:var(--s-5)}}
/* Experiences */
.exp{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--col-gap);row-gap:var(--s-7)}
.exp__item{display:grid;gap:var(--s-4);align-content:start}
.exp__meta{display:flex;gap:var(--s-3);flex-wrap:wrap}
.exp__links{display:flex;gap:var(--s-5);flex-wrap:wrap}
@media (max-width:900px){.exp__item--a,.exp__item--b{grid-column:1/13;margin-top:0}}
/* Selma */
@media (max-width:900px){.founder__text,.founder__img{grid-column:1/13}.founder__img{order:-1;max-width:70%}}
/* Testimonial */
.quote{min-height:70svh;display:grid;align-content:center;position:relative}
.quote__item.is-active{opacity:1}
/* Waitlist */
.waitlist{display:grid;gap:var(--s-5)}
/* Letter-Formular im Feldstil der Anmeldung: Label ueber einem Kasten mit
feiner Kontur, Radius 0. Der Knopf steht daneben und ist so hoch wie das
Feld (align-self:stretch). */
.form{display:grid;gap:var(--s-3);max-width:520px}
.form__row{display:grid;grid-template-columns:1fr auto;align-items:end;gap:var(--s-3)}
.form .field{display:grid;gap:.4rem}
.form .field__label{font-size:.8125rem;letter-spacing:0;text-transform:none;color:var(--fg)}
.form input[type=email]{width:100%;background:var(--ns-white);border:1px solid var(--hairline-strong);
border-radius:0;padding:.8em 1em;font:inherit;font-weight:300;font-size:1rem;line-height:1.4;color:var(--fg);
transition:border-color var(--dur-hover),box-shadow var(--dur-hover)}
.form input::placeholder{color:var(--fg-muted)}
.form input:focus{outline:none;border-color:var(--fg);box-shadow:0 0 0 3px rgba(17,17,16,.06)}
/* Der Knopf steht auf der Hoehe des Feldes, nicht auf der des Labels:
align-self:end plus dieselbe Hoehe wie der Kasten (0,8em + 0,8em + 1,4em
auf 1rem plus zwei Konturen). */
.form__row .btn--rose{align-self:end;min-height:3.125rem}
.form__note{color:var(--fg-muted)}
.form__ok{display:none;color:var(--fg-soft)}
.form.is-sent .form__row,.form.is-sent .form__note{display:none}
.form.is-sent .form__ok{display:block}
/* Fehlerzustand: Formular bleibt bedienbar, Hinweis mit direktem Ausweg. */
.form__err{display:none;color:var(--ns-rose-deep)}
.form__err a{text-decoration:underline;text-underline-offset:.15em}
.form.is-error .form__err{display:block}
.closing .form__err{color:var(--ns-blush)}
/* Footer */
.footer{border-top:var(--border);padding-block:var(--s-6) var(--s-5)}
.footer__grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--col-gap);row-gap:var(--s-5);align-items:end}
.footer__brand{grid-column:1/4;display:grid;gap:var(--s-2)}
/* 7 Spalten: die fuenf Links brauchen 481px und stehen so bis 900px einzeilig. */
.footer__nav{grid-column:4/11;display:flex;gap:var(--s-4);flex-wrap:wrap}
.footer__copy{grid-column:11/13;text-align:right}
/* Credit als eigene Zeile unter dem Copyright, gleiche Groesse und Farbe. */
/* Einzeilig: bei knapper Zelle laeuft die Zeile nach links in die leere Nav-Spalte ueber (flex-end), statt das Logo umzubrechen. */
.footer__credit{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:baseline;gap:.35em;white-space:nowrap;margin-top:.35em}
/* Ab 1060px bleibt die Zeile einzeilig und laeuft nach links ueber; darunter kaeme sie der Fussnavigation zu nahe (bei 960px fehlen 57px), also Umbruch aufs Logo. */
@media (min-width:1060px){.footer__credit{flex-wrap:nowrap}}
/* Corvis-Wortmarke als Inline-SVG (erbt die gedaempfte Textfarbe), Hoehe an der Kleinschrift, Grundlinie auf der Textlinie. */
.footer__logo{display:inline-block;flex:none;transition:color .25s var(--ease-soft)}
.footer__logo .corvis{display:block;height:.95em;width:auto}
.footer__logo:hover{color:var(--fg)}
/* 959px statt 900px: darunter reicht die halbe Breite fuer die Links nicht mehr. */
@media (max-width:959px){.footer__brand,.footer__nav,.footer__copy{grid-column:1/13;text-align:left}.footer__credit{justify-content:flex-start}}
/* Unterseiten */
.page-hero{min-height:88svh;display:grid;align-content:end;padding:var(--margin);padding-top:calc(var(--margin) + 5rem);gap:var(--s-4);position:relative;overflow:hidden}
.page-hero--image{color:var(--ns-bone)}
.page-hero--image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}
.page-hero--image::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(var(--scrim),.15),rgba(var(--scrim),.6))}
.page-hero>*{position:relative;z-index:1}
/* Termin + Textlink unter dem Lead (day.html, Villa-Hero). Kein Button: die
Haarlinie steht bei 55 % und wird beim Ueberfahren voll — der Link ist
erkennbar, ohne zu draengen. */
.page-hero__meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-3) var(--s-6);
margin-top:var(--s-3);color:var(--ns-bone)}
/* Der Termin stand im kleinsten Grad der Seite (--t-label, 10px) und las sich
als Mikro-Beschriftung statt als Datum. Jetzt 15-19px; die Sperrung geht von
.22em auf .1em zurueck, weil der Satz bei groesserem Grad sonst zerfaellt,
und die Farbe von Mist auf Bone, damit er gegen das Hero-Bild traegt. */
.page-hero__date{font-size:clamp(.95rem,1.3vw,1.2rem);letter-spacing:.1em;text-transform:uppercase;
color:var(--ns-bone)}
.page-hero__link{color:var(--ns-bone)}
.page-hero__link::after{transform:scaleX(1);opacity:.55;transition:opacity var(--dur-hover) var(--ease-soft)}
.page-hero__link:hover::after,.page-hero__link:focus-visible::after{opacity:1}
/* Selma-Hero: das Motiv sitzt rechts der Mitte, links liegt offenes Wasser.
Bei mittigem Beschnitt wandert der Ausschnitt auf schmalen Schirmen auf die
leere Saeule — deshalb nach rechts und oben verschoben. */
.page-hero--selma img{object-position:56% 32%}
/* Die Villa-Aufnahme ist hell — die weisse Fassade liegt genau hinter dem Satz.
Gemessen ohne Zusatzschleier: Kennzeile 1,12:1, Aufmacher 2,09:1. Deshalb ein
zweiter, seitlicher Verlauf: er dunkelt die linke Haelfte, auf der der Text
steht, und laesst das Gebaeude rechts unangetastet. */
.page-hero--villa::before{background:
linear-gradient(95deg, rgba(var(--scrim),.78) 0%, rgba(var(--scrim),.62) 30%, rgba(var(--scrim),.22) 62%, rgba(var(--scrim),.08) 100%),
linear-gradient(180deg, rgba(var(--scrim),.10) 0%, rgba(var(--scrim),.20) 45%, rgba(var(--scrim),.45) 100%)}
/* Schmal: der Satz laeuft fast ueber die volle Breite, der seitliche Verlauf
liefe rechts aus. Dort deshalb nur ein kraeftiger Verlauf von unten. */
@media (max-width:900px){
.page-hero--villa::before{background:linear-gradient(180deg,
rgba(var(--scrim),.20) 0%, rgba(var(--scrim),.52) 40%, rgba(var(--scrim),.88) 100%)}
}
@media (max-width:700px){.page-hero--selma img{object-position:64% 26%}}
/* Der Standardverlauf reicht knapp nicht: das Motiv ist hell (Himmel, heller
Anzug), der Vorspann kam gemessen nur auf 4,1:1. Ein staerkerer Verlauf von
OBEN allein loest das nicht (2,9:1 an der Headline) — wirksam ist der Verlauf
von LINKS, weil dort der Text steht. Werte gemessen, nicht geschaetzt:
Label 6,1:1 · Headline 4,8:1 · Vorspann 5,0:1. Bewusst nicht dunkler, das
Foto soll Foto bleiben. */
.page-hero--selma::before{background:
linear-gradient(95deg,rgba(var(--scrim),.34) 0%,rgba(var(--scrim),.20) 40%,rgba(var(--scrim),0) 70%),
linear-gradient(180deg,rgba(var(--scrim),.18) 0%,rgba(var(--scrim),.10) 30%,rgba(var(--scrim),.62) 100%)}
/* Schmaler Schirm: der Ausschnitt zeigt fast nur noch den hellen Anzug, und der
Text laeuft ueber die volle Breite. Gemessen fielen Label (4,1) und Vorspann
(3,7) durch, deshalb hier von oben kraeftiger. Der Links-Verlauf bleibt
trotzdem stehen — ohne ihn faellt das Label auf 3,6.
Mit diesen Werten: Label 5,2 · Headline 5,7 · Vorspann 5,4. */
@media (max-width:700px){
.page-hero--selma::before{background:
linear-gradient(95deg,rgba(var(--scrim),.34) 0%,rgba(var(--scrim),.20) 40%,rgba(var(--scrim),0) 70%),
linear-gradient(180deg,rgba(var(--scrim),.26) 0%,rgba(var(--scrim),.20) 30%,rgba(var(--scrim),.76) 100%)}
}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--s-4);border-top:var(--border);padding-top:var(--s-4)}
.facts dt{composes:label}.facts dd{margin-top:var(--s-2);font-size:var(--t-lead);font-family:var(--font-display)}
.stack{display:grid;gap:var(--s-4)}
.stack--lg{gap:var(--s-6)}
@media (max-width:700px){.rhythm__row{grid-template-columns:1fr}}
.next{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--col-gap);align-items:center}
/* ==========================================================================
2.0 — Orientierung, Modell-Bühne, Advertorial
========================================================================== */
/* --- Fortschrittslinie --- */
.progress{position:fixed;inset:0 0 auto 0;height:1px;z-index:var(--z-nav);background:#fff;
mix-blend-mode:difference;pointer-events:none;transform-origin:left;transform:scaleX(var(--sp,0))}
/* --- Modell-Bühne: Sticky-Stack ---
Der Scrollweg steht in Pixeln in --stage-weg und wird von js/main.js
(leseMasse) aus den gemessenen Rahmen gesetzt: zwei Uebergaenge zu je
Bildhoehe H + Texthoehe T (beide laufen 1:1 mit dem Scrollweg), dann der
Weg C, auf dem die Kreise von unten ueber die Buehne fahren, dann --venn-vh
fuer das Zeichnen der Kreise. Der Wert hier ist nur der Rueckfall ohne JS.
Frueher: 180vh Weg, 42vh je Wort, alles mit Easing und leerer Buehne beim
Einstieg — der "Stopper", auf den der Kunde wartete. */
.model-stage{position:relative;--venn-vh:54;--stage-weg:calc(220vh + var(--venn-vh) * 1vh)}
.model-stage__track{height:calc(var(--stage-weg) + 100svh)}
.model-stage__sticky{position:sticky;top:0;height:100svh;display:grid;place-items:center;
padding:var(--margin);overflow:hidden}
/* --- Modell: Bildrahmen links, Textrahmen rechts ---
Beide Rahmen sind Fenster (overflow:hidden). Die drei Bilder liegen absolut
uebereinander; wer noch nicht dran ist, steht bei translateY(100%) unterhalb
des Rahmens. Die Texte teilen sich eine Rasterzelle, der Rahmen ist so hoch
wie der laengste Text; die Maske laesst den nachrueckenden Text weich aus
dem unteren Rand kommen. Keine Transitions: das Tempo gehoert dem Nutzer. */
.beats{grid-area:1/1;position:relative;width:100%;max-width:1280px;height:min(80svh,720px);
display:grid;grid-template-columns:1.3fr .85fr;align-items:center;gap:clamp(1.5rem,4vw,4rem);
will-change:transform,opacity}
.beats__frame{position:relative;height:100%;overflow:hidden;background:var(--bg-elev)}
.beat__img{position:absolute;inset:0;margin:0;overflow:hidden;will-change:transform;
transform:translate3d(0,100%,0)}
.beat__img[data-beat="0"]{transform:none}
.beat__img img{width:100%;height:100%;object-fit:cover;will-change:transform}
/* Unten 5rem Luft und eine ebenso hohe weiche Maske: der nachrueckende Text
taucht aus einem Verlauf auf, statt mit harter Kante unter dem alten Absatz
hervorzukommen. Der ruhende Text endet oberhalb der Maske. */
.beats__copy{position:relative;display:grid;overflow:hidden;padding:2.5rem 0 5rem;
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 2.5rem,#000 calc(100% - 5rem),transparent 100%);
mask-image:linear-gradient(180deg,transparent 0,#000 2.5rem,#000 calc(100% - 5rem),transparent 100%)}
.beat__text{grid-area:1/1;display:grid;gap:var(--s-3);align-content:center;will-change:transform,opacity;
transform:translate3d(0,100%,0);visibility:hidden}
.beat__text[data-beat="0"]{transform:none;visibility:visible}
.beat__num{font-size:var(--t-label);letter-spacing:var(--track-label);color:var(--fg-muted)}
.beat__word{font-family:var(--font-display);font-weight:400;
font-size:clamp(3rem,7vw,5.6rem);line-height:.95;letter-spacing:-.015em}
.beat__def{color:var(--fg-soft);max-width:34ch;font-size:var(--t-lead);line-height:1.5}
@media (max-width:820px){
.beat__def{font-size:var(--t-body);max-width:none}
}
/* Schmalere Fenster (821–1024px): kuerzeres Zeichnen der Kreise. */
@media (max-width:1024px){.model-stage{--venn-vh:48}}
/* --- Der Tag als Journey (day.html, alle Fassungen) ---
Kopf oben, darunter acht Elemente auf dem 12er-Raster wie ein Magazin-
aufschlag: Querformate ueber acht Spalten, Hochformate ueber fuenf, der
Text steht daneben am Bildfuss und wechselt bei --r die Seite. Keine
Nummern, keine Zeiten, keine Haarlinien — der Ablauf des Tages bleibt
bewusst offen (Kundenentscheidung 06.09.2026). */
/* Der Abstand nach unten sass frueher am Kopf; seit der Kopf in einem Raster
neben dem Termin steht, traegt ihn die Zeile. */
.journey__head{display:grid;gap:var(--s-4);max-width:44ch}
.journey__head .body{color:var(--fg-soft)}
.journey__intro{row-gap:var(--s-6);align-items:start;margin-bottom:clamp(3rem,6vw,5rem)}
/* Termin, Zeit und Ort gross an der rechten Seite des Kopfes. Das Datum in der
Display-Schrift wie die Ueberschriften, zweite Zeile kursiv — dieselbe Geste
wie „Was dich erwartet." daneben. Zeit und Ort darunter im vorhandenen
.facts-Muster, nur einspaltig: nebeneinander waere die Spalte zu schmal. */
.journey__when{display:grid;gap:var(--s-4);align-content:start}
.journey__date{margin:0;font-family:var(--font-display);font-weight:400;
font-size:clamp(2.1rem,3.6vw,3.2rem);line-height:1.02;letter-spacing:-.015em}
.journey__date em{font-style:italic}
.journey__when .facts{grid-template-columns:1fr;gap:var(--s-3)}
/* Abstand zwischen den Elementen: von 96px auf 160px (bei 1600px). Die Fotos
standen zu dicht, die Reihe las sich als Block statt als Folge. */
.journey__flow{display:grid;gap:clamp(5.5rem,11vw,10rem)}
.journey__item{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--col-gap);row-gap:var(--s-5);align-items:end}
.journey__fig{margin:0;display:grid;gap:var(--s-3)}
.journey__fig .media{display:block}
.journey__item--wide>.journey__fig{grid-column:1/9}
.journey__item--wide>.journey__text{grid-column:9/13}
.journey__item--wide.journey__item--r>.journey__fig{grid-column:5/13;grid-row:1}
.journey__item--wide.journey__item--r>.journey__text{grid-column:1/5;grid-row:1}
.journey__item--tall>.journey__fig{grid-column:1/6}
.journey__item--tall>.journey__text{grid-column:6/13}
.journey__item--tall.journey__item--r>.journey__fig{grid-column:8/13;grid-row:1}
.journey__item--tall.journey__item--r>.journey__text{grid-column:1/8;grid-row:1}
/* --air: zusaetzliche Luft nach oben (Kundenwunsch fuer den Grossen Salon,
der dort nach dem Auftakt mehr Abstand braucht). */
.journey__item--air{margin-top:var(--s-7)}
/* --half: sechs Spalten — fuer das Cafe, dessen Foto nur 1024 px breit
vorliegt und nicht ueber die volle Breite gezogen werden darf. */
.journey__item--half>.journey__fig{grid-column:1/7}
.journey__item--half>.journey__text{grid-column:8/13}
.journey__item--half.journey__item--r>.journey__fig{grid-column:7/13;grid-row:1}
.journey__item--half.journey__item--r>.journey__text{grid-column:1/6;grid-row:1}
.journey__cap{font-size:var(--t-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--fg-muted)}
/* 38ch ergaben ~35 Zeichen je Zeile und damit bis zu sieben Zeilen neben
einem Bild — der Textblock wirkte schmal und lang. 70ch greift nur dort,
wo die Spalte es zulaesst: die breiten Elemente sind durch ihre fuenf
Spalten ohnehin bei 568px gedeckelt, die hohen laufen bis 783px. */
.journey__text{display:grid;gap:var(--s-3);align-content:end;max-width:70ch}
/* Die Elementueberschriften standen mit 40px (2,5rem) deutlich unter dem, was
die Startseite fuer vergleichbare Ueberschriften setzt, und wirkten neben den
grossen Aufnahmen zu leise. Die Obergrenze 3,4rem liegt bewusst direkt neben
dem --t-h2 der Seite (3,2rem), gehoert also in dieselbe Familie.
Die Untergrenze ist der eigentliche Punkt: mit --t-h2 waeren es auf schmalen
Schirmen nur +9 % gewesen, weil dort die Untergrenze greift. 2,3rem bringt
ueber alle Breiten 31-46 % mehr — und alle acht Titel bleiben einzeilig
(gemessen bei 1600, 1200, 950 und 500px). */
.journey__t{margin:0;font-family:var(--font-display);font-weight:400;font-size:clamp(2.3rem,3.8vw,3.4rem);line-height:1.05;letter-spacing:-.01em}
.journey__p{margin:0;color:var(--fg-soft);font-size:var(--t-lead);line-height:1.5;text-wrap:pretty}
/* Das Cafe traegt ein zweites, kleines Bild unter dem Text — die einzige
Stelle mit zwei Fotos, weil hier die meiste neue Information steht. */
.journey__fig--square{width:min(100%,17rem);margin-top:var(--s-4)}
/* Zwischenruf: Serif in Lead-Groesse, eingerueckt, viel Luft — die Pause
zwischen den Elementen, ohne Bild. */
.journey__pause{grid-column:1/-1;padding:clamp(1rem,3vw,2.5rem) 0 clamp(1rem,3vw,2.5rem) calc(100% / 12 + var(--col-gap));max-width:none}
.journey__pause p{margin:0;max-width:26ch;font-family:var(--font-display);font-weight:400;
font-size:clamp(1.6rem,3vw,2.6rem);line-height:1.2;letter-spacing:-.01em;text-wrap:pretty}
.journey__pause em{font-style:italic}
@media (max-width:900px){.journey__pause{padding-left:0}}
.journey__cta{padding-top:var(--s-4)}
.journey__list{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-2);
font-family:var(--font-display);font-size:var(--t-lead);line-height:1.35;text-wrap:pretty}
@media (max-width:900px){
.journey__head{max-width:none}
.journey__flow{gap:clamp(7rem,20vw,9rem)}
/* Spezifitaet (0,3,0) wie die Platzierungsregeln oben, spaeter im Blatt. */
.journey .journey__item>.journey__fig,.journey .journey__item>.journey__text{grid-column:1/-1;grid-row:auto}
.journey__text{max-width:none;align-content:start}
}
/* --- Anmeldung (anmelden.html): schmaler Hero, Checkout ohne Zahlung ---
Links das Formular, rechts der Ueberblick (sticky ab 900px). Unter 900px
steht der Ueberblick VOR dem Formular: Datum und Preis zuerst. Ein Bild
oben, ein kleines Portraet im Ueberblick, sonst Typografie. */
@media (max-width:900px){
}
/* Ueberblick auf Papier */
.order{background:var(--ns-white);color:var(--ns-ink);padding:var(--s-5);display:grid;gap:var(--s-4);
--fg-soft:var(--ns-warm-grey);--fg-muted:var(--ns-muted-text);--hairline:rgba(17,17,16,.11)}
.order__sum{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3);
border-top:1px solid var(--hairline);padding-top:var(--s-3)}
/* Felder: Label oben, untere Haarlinie, Fokus in Ink, Fehler in Rose-Deep */
.form--booking{display:grid;gap:var(--s-5)}
.form--booking .form__body{display:grid;gap:var(--s-5)}
.form--booking.is-error .form__err{display:block}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4) var(--col-gap)}
@media (max-width:700px){.fields{grid-template-columns:1fr}}
.field{display:grid;gap:.5rem;position:relative}
.field__label{font-size:var(--t-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--fg-muted)}
.field__label i{font-style:normal;color:var(--ns-rose-deep)}
.form--booking input:not([type=checkbox]),.form--booking textarea,.form--booking select{
width:100%;background:none;border:0;border-bottom:1px solid var(--hairline-strong);border-radius:0;
padding:var(--s-2) 0;font-weight:300;font-size:var(--t-lead);color:var(--fg);
transition:border-color var(--dur-hover)}
.form--booking textarea{font:inherit;font-weight:300;font-size:var(--t-lead);min-height:5.5rem;resize:vertical;line-height:1.5}
.form--booking input:focus,.form--booking textarea:focus,.form--booking select:focus{outline:none;border-bottom-color:var(--fg)}
.form--booking input::placeholder,.form--booking textarea::placeholder{color:var(--fg-muted)}
.field.is-invalid input,.field.is-invalid textarea{border-bottom-color:var(--ns-rose-deep)}
.field__err{display:none;font-size:var(--t-small);color:var(--ns-rose-deep)}
.field.is-invalid .field__err{display:block}
/* Zugeklappte Rechnungsadresse */
.form__more>.fields{display:none}
.form__more.is-open>.fields{display:grid}
/* Checkbox: 18px, Haarlinie, Haekchen in Ink */
.check{display:grid;grid-template-columns:18px 1fr;gap:var(--s-3);align-items:start;font-size:var(--t-small);line-height:1.5;cursor:pointer}
.check input{appearance:none;-webkit-appearance:none;width:18px;height:18px;margin:.2em 0 0;border:1px solid var(--fg);background:none;cursor:pointer;display:grid;place-content:center}
.check input::before{content:"";width:10px;height:10px;background:var(--fg);transform:scale(0);transition:transform var(--dur-hover) var(--ease-soft)}
.check input:checked::before{transform:scale(1)}
.check input:focus-visible{outline:1px solid var(--fg);outline-offset:3px}
.check.is-invalid{color:var(--ns-rose-deep)}
.check.is-invalid input{border-color:var(--ns-rose-deep)}
.check a{text-decoration:underline;text-underline-offset:.15em}
/* Verbindlichkeit: unuebersehbar, direkt ueber dem Button */
@media (max-width:700px){.form__submit .btn--rose{width:100%;justify-content:center}}
/* Zustaende */
.booking-done{display:none;gap:var(--s-4)}
.form--booking.is-sent .form__body{display:none}
.form--booking.is-sent .booking-done{display:grid}
.booking-done h2{margin:0;font-family:var(--font-display);font-weight:400;font-size:var(--t-h2);line-height:1.1}
.booking-done ul{margin:0;padding:0;list-style:none;display:grid;gap:.5rem}
/* --- Anmeldung als eine Bildschirmseite (anmelden.html) ---
Links die Maske in drei Schritten, rechts die Villa im Hochformat. Die
linke Haelfte ist ein eigener Scroll-Container (Sicherheit fuer niedrige
Fenster), die Seite selbst scrollt auf dem Desktop nie. Unter 900px Bild
oben, Formular darunter. Klasse .book, weil .split dem Founder-Modul
gehoert. */
.book{display:grid;grid-template-columns:1fr 1fr;min-height:100svh;background:var(--bg)}
/* Rasterkinder haben min-width:auto und koennen sonst nicht unter ihre
Inhaltsbreite schrumpfen — das machte die Seite auf dem Handy breiter. */
.book__form,.book__img{min-width:0}
.book__form{max-height:100svh;overflow:auto;display:grid;align-content:center;
padding:calc(var(--margin) + 2.75rem) var(--margin) var(--margin);scrollbar-width:thin}
.book__inner{width:min(100%,30rem);min-width:0;margin-inline:auto}
.form--booking.book__inner{display:grid;gap:0}
.form--booking.book__inner .form__body{display:grid;gap:1.5rem}
.form--booking.book__inner.is-sent .form__body{display:none}
.book__head{display:grid;gap:.6rem}
.book__title{margin:0;font-family:var(--font-display);font-weight:400;font-size:clamp(1.9rem,2.6vw,2.6rem);line-height:1.05;letter-spacing:-.01em}
.book__facts{margin:0;font-size:.875rem;color:var(--fg-soft)}
/* Schrittanzeige: drei Eintraege in Label-Schrift, darunter eine Linie,
deren gefuellter Teil mit dem Schritt waechst. Keine Kreise, keine Badges. */
.steps{list-style:none;margin:0;padding:0 0 .9rem;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;position:relative;
font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-muted)}
.steps::before,.steps::after{content:"";position:absolute;left:0;bottom:0;height:1px}
.steps::before{width:100%;background:var(--hairline-strong)}
.steps::after{width:var(--steps-p,0%);background:var(--fg);transition:width 500ms var(--ease-settle)}
.steps__item{display:inline-flex;gap:.5rem;align-items:baseline;white-space:nowrap}
.steps__item.is-current,.steps__item.is-done{color:var(--fg)}
.steps__n{font-variant-numeric:tabular-nums}
.steps__item.is-done .steps__n::after{content:" ✓";letter-spacing:0}
/* Schritte: nur der aktive ist im Fluss; Einblendung mit 8px Anstieg */
.step{margin:0;padding:0;border:0;min-width:0;display:none;gap:1.25rem}
.step.is-active{display:grid;animation:step-in 400ms var(--ease-settle) both}
@keyframes step-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.step__lead{margin:0;font-size:.9375rem;line-height:1.5;color:var(--fg-soft)}
.step__note{margin:0;font-size:.8125rem;line-height:1.5;color:var(--fg-soft);max-width:52ch}
.step__nav{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);padding-top:.25rem}
.step__nav:has(.step__next:only-child){justify-content:flex-end}
.step__back{background:none;border:0;padding:0;cursor:pointer;font:inherit;font-size:.875rem;color:var(--fg-soft)}
/* .btn steht in components.css und wird spaeter geladen; bei gleicher
Spezifitaet gewaenne dort die Kurzform border und der Hover-Zustand.
Deshalb hier zwei Klassen statt einer. */
.btn.step__next{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn.step__next:hover,.btn.step__next:focus-visible{background:transparent;color:var(--fg);border-color:var(--fg)}
/* Felder: Label in Satzschrift ueber einem weissen Kasten mit feiner Kontur,
Radius 0 (Brief §36). Fokus Kontur in Ink mit weichem Bone-Ring. */
.fields{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem var(--s-4)}
.field{display:grid;gap:.4rem;position:relative}
.field--wide{grid-column:1/-1}
.field__label{font-size:.8125rem;letter-spacing:0;text-transform:none;color:var(--fg)}
.field__label i{font-style:normal;color:var(--ns-rose-deep)}
.field__opt{color:var(--fg-muted);font-size:.75rem;margin-left:.35rem}
.form--booking .field input:not([type=checkbox]):not([type=radio]),.form--booking .field textarea{
width:100%;background:var(--ns-white);border:1px solid var(--hairline-strong);border-radius:0;
padding:.8em 1em;font:inherit;font-weight:300;font-size:1rem;line-height:1.4;color:var(--fg);
transition:border-color var(--dur-hover),box-shadow var(--dur-hover)}
.form--booking .field textarea{min-height:3.6rem;resize:vertical}
.form--booking .field input::placeholder,.form--booking .field textarea::placeholder{color:var(--fg-muted)}
.form--booking .field input:focus,.form--booking .field textarea:focus{outline:none;border-color:var(--fg);box-shadow:0 0 0 3px rgba(17,17,16,.06)}
.field.is-invalid input,.field.is-invalid textarea{border-color:var(--ns-rose-deep)}
.field__err{display:none;font-size:.8125rem;color:var(--ns-rose-deep)}
.field.is-invalid .field__err{display:block}
/* Auswahl "Rechnung an": zwei ruhige Kacheln mit Radio */
.choices{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}
.choice{display:flex;align-items:center;gap:.75rem;padding:.7em 1em;background:var(--ns-white);
border:1px solid var(--hairline-strong);cursor:pointer;font-size:.9375rem;transition:border-color var(--dur-hover)}
.choice input{position:absolute;opacity:0;width:0;height:0}
.choice__mark{width:16px;height:16px;border:1px solid var(--fg);border-radius:50%;display:grid;place-content:center;flex:0 0 16px}
.choice__mark::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--fg);transform:scale(0);transition:transform var(--dur-hover) var(--ease-soft)}
.choice:has(input:checked){border-color:var(--fg)}
/* Ohne :has() traegt nichts den Auswahlzustand — dann bleibt das native
Auswahlfeld sichtbar und der Ersatzpunkt entfaellt. */
@supports not selector(:has(*)){
.choice input{position:static;opacity:1;width:auto;height:auto;margin:0;accent-color:var(--fg)}
.choice__mark{display:none}
}
.choice:has(input:checked) .choice__mark::before{transform:scale(1)}
.choice:has(input:focus-visible){outline:1px solid var(--fg);outline-offset:3px}
.firma{display:none;gap:.6rem var(--s-4)}
.firma.is-open{display:grid}
/* Mit aufgeklappter Firma entfaellt der Einleitungssatz des Schritts, damit
alles ohne Scrollbalken steht. */
.step:has(.firma.is-open) .step__lead{display:none}
.step:has(.firma.is-open) textarea{min-height:2.7rem}
/* Zusammenfassung */
.sum{margin:0;display:grid;gap:.4rem}
.sum div{display:grid;grid-template-columns:7rem 1fr;gap:var(--s-3);font-size:.9375rem}
.sum dt{color:var(--fg-muted)}
.sum dd{margin:0;overflow-wrap:anywhere}
.sum__total{display:grid;gap:.3rem;padding:.6rem 0;border-top:1px solid var(--hairline-strong);border-bottom:1px solid var(--hairline-strong)}
.sum__row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3);font-size:.9375rem}
.sum__price{font-family:var(--font-display);font-size:1.6rem;line-height:1}
.checks{display:grid;gap:.6rem}
.check{font-size:.875rem}
.book__legal{display:flex;flex-wrap:wrap;gap:.35rem var(--s-4);row-gap:.35rem}
.book__legal a{text-decoration:underline;text-underline-offset:.15em;text-decoration-color:var(--hairline-strong)}
.book__form .booking-done{width:min(100%,30rem);margin-inline:auto}
/* Bildpanel: unten der dunkle Verlauf fuer den Text, oben ein Bone-Verlauf,
damit die Navigation ueber dem Bild lesbar bleibt. */
.book__img{position:relative;overflow:hidden;min-height:100svh;background:var(--ns-ink)}
.book__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.book__img--retreat img{object-position:58% 50%}
/* Begleitung: Hochformat um die sprechende Frau, Gesicht im oberen Drittel. */
.book__img--begleitung img{object-position:50% 28%}
/* Anfrageseite: ein Feld mehr als die Warteliste, dafuer das Textfeld eine Spur niedriger. */
.form--begleitung .field textarea{min-height:3.2rem}
/* .form--begleitung (begleitung.html, 09.09.2026) teilt jede Regel der Warteliste:
gleiche Felder, gleiche Textarea, gleicher Fokus, gleicher Fehlerzustand. */
.form--waitlist.book__inner,.form--begleitung.book__inner{display:grid}
.form--waitlist.book__inner .form__body,.form--begleitung.book__inner .form__body{display:grid;gap:1.5rem}
.form--waitlist.book__inner.is-sent .form__body,.form--begleitung.book__inner.is-sent .form__body{display:none}
.form--waitlist.is-sent .booking-done,.form--begleitung.is-sent .booking-done{display:grid}
.form--waitlist .field input:not([type=checkbox]),.form--waitlist .field textarea,.form--begleitung .field input:not([type=checkbox]),.form--begleitung .field textarea{width:100%;background:var(--ns-white);border:1px solid var(--hairline-strong);border-radius:0;padding:.8em 1em;font:inherit;font-weight:300;font-size:1rem;line-height:1.4;color:var(--fg);transition:border-color var(--dur-hover),box-shadow var(--dur-hover)}
.form--waitlist .field textarea,.form--begleitung .field textarea{min-height:3.6rem;resize:vertical}
.form--waitlist .field input::placeholder,.form--waitlist .field textarea::placeholder,.form--begleitung .field input::placeholder,.form--begleitung .field textarea::placeholder{color:var(--fg-muted)}
.form--waitlist .field input:focus,.form--waitlist .field textarea:focus,.form--begleitung .field input:focus,.form--begleitung .field textarea:focus{outline:none;border-color:var(--fg);box-shadow:0 0 0 3px rgba(17,17,16,.06)}
.form--waitlist.is-error .form__err,.form--begleitung.is-error .form__err{display:block}
.book__img::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(180deg,rgba(240,237,231,.92) 0,rgba(240,237,231,.55) 5rem,rgba(240,237,231,0) 11rem),
linear-gradient(180deg,rgba(var(--scrim),0) 38%,rgba(var(--scrim),.55) 68%,rgba(var(--scrim),.88) 100%)}
.book__caption{position:absolute;left:var(--margin);right:var(--margin);bottom:var(--margin);z-index:2;display:grid;gap:var(--s-3);color:var(--ns-bone)}
.book__display{margin:0;font-family:var(--font-display);font-weight:400;font-size:clamp(2.6rem,4.6vw,4.4rem);line-height:.98;letter-spacing:-.015em}
.book__meta{margin:0;font-size:var(--t-small);line-height:1.5;color:var(--ns-bone)}
@media (max-width:900px){
.book{grid-template-columns:1fr;min-height:0}
.book__img{order:-1;min-height:42svh}
/* Begleitung: 42svh reichen nicht, die Bildunterschrift (Label, zwei Display-Zeilen, zweizeilige Meta) laege auf dem Gesicht. */
.book__img--begleitung{min-height:56svh}
.book__img--begleitung img{object-position:50% 22%}
.book__img::before{background:linear-gradient(180deg,rgba(var(--scrim),.35) 0,rgba(var(--scrim),0) 30%,rgba(var(--scrim),0) 45%,rgba(var(--scrim),.62) 100%)}
.book__form{max-height:none;overflow:visible;padding-top:var(--s-6)}
.book__display{font-size:clamp(2.2rem,9vw,3.2rem)}
}
@media (max-width:420px){.steps{gap:.4rem .9rem;font-size:.625rem;letter-spacing:.1em}}
@media (max-width:700px){
.fields,.choices{grid-template-columns:1fr}
.step__nav{flex-direction:column-reverse;align-items:stretch}
.step__nav .btn--rose,.step__nav .step__next{justify-content:center}
}
/* Niedrige Fenster: enger, damit die linke Haelfte ohne Scrollbalken steht. */
/* Anfrageseite: schon ab 900 px Fensterhoehe sanft verdichten. Sie hat einen
Hinweissatz mehr als die Warteliste und stand bei 1536x864 (verbreitete
Windows-Groesse) 19 px ueber; die 840er-Stufe unten greift dort noch nicht. */
@media (min-width:901px) and (max-height:900px){
.form--begleitung.book__inner .form__body{gap:1.25rem}
.form--begleitung .field input:not([type=checkbox]),.form--begleitung .field textarea{padding:.65em 1em}
.form--begleitung .book__title{font-size:clamp(1.7rem,2.2vw,2.2rem)}
.book__form:has(.form--begleitung){padding-top:calc(var(--margin) + 2rem)}
}
@media (min-width:901px) and (max-height:840px){
.book__form{padding-top:calc(var(--margin) + 2rem)}
.form--booking.book__inner .form__body,.form--waitlist.book__inner .form__body,.form--begleitung.book__inner .form__body{gap:1.25rem}
.step{gap:.9rem}
.fields{gap:.75rem var(--s-4)}
.form--booking .field input:not([type=checkbox]):not([type=radio]),.form--booking .field textarea,.form--waitlist .field input:not([type=checkbox]),.form--waitlist .field textarea,.form--begleitung .field input:not([type=checkbox]),.form--begleitung .field textarea{padding:.65em 1em}
.book__title{font-size:clamp(1.7rem,2.2vw,2.2rem)}
}
@media (min-width:901px) and (max-height:910px){.book__legal{font-size:.75rem}}
@media (min-width:901px) and (max-height:790px){
.book__facts{display:none}
.book__form{padding-top:calc(var(--margin) + 1.5rem);padding-bottom:var(--s-4)}
.form--booking .field textarea,.form--waitlist .field textarea,.form--begleitung .field textarea{min-height:3.4rem}
}
/* 791 bis 830px (Safari auf 13-Zoll-MacBooks): zwischen der 900er- und der 790er-Stufe fehlten noch 4 bis 15px; steht nach der 840er-Regel, sonst gewinnt deren gap:1.25rem bei gleicher Spezifitaet. */
@media (min-width:901px) and (max-height:830px){
.form--begleitung.book__inner .form__body{gap:.95rem}
.book__form:has(.form--begleitung){padding-top:calc(var(--margin) + 1.5rem);padding-bottom:var(--s-4)}
}
/* Anmeldung, Schritt 3 mit drei Haekchen (seit 10.09.): der Schritt wurde um rund 40px hoeher.
Zwei Stufen, beide HINTER den 840/790er-Regeln (gleiche Spezifitaet): 841 bis 960px etwas
dichter, bis 840px noch einen Tick enger, sonst scrollt die linke Haelfte im letzten Schritt. */
@media (min-width:901px) and (min-height:841px) and (max-height:960px){
.form--booking .step{gap:.8rem}
.form--booking .checks{gap:.3rem}
.form--booking .step__nav{padding-top:0}
.form--booking.book__inner .form__body{gap:1.1rem}
.form--booking .sum__total{padding:.45rem 0}
.book__form:has(.form--booking){padding-top:calc(var(--margin) + 2rem)}
.book__form:has(.form--booking) .book__title{font-size:clamp(1.7rem,2.2vw,2.2rem)}
}
@media (min-width:901px) and (max-height:840px){
.form--booking .step{gap:.55rem}
.form--booking .checks{gap:.25rem}
.form--booking .step__nav{padding-top:0}
.form--booking.book__inner .form__body{gap:1rem}
.form--booking .sum__total{gap:.2rem;padding:.4rem 0}
}
/* ==========================================================================
Editorial-Scrollstory "Idee"
========================================================================== */
.story__scene{position:relative;padding-block:calc(var(--chapter-gap) * .55)}
.story__scene--quiet{min-height:78svh;display:grid;align-content:center;justify-items:center;text-align:center}
/* --- Venn --- */
/* Die Kreise stehen unter dem Rand der Buehne (overflow:hidden) und fahren
per JS 1:1 mit dem Scrollweg herauf — dieselbe Geste wie die Bilder. */
.venn{grid-area:1/1;width:min(92vw,660px);height:auto;pointer-events:none;will-change:transform;
transform:translate3d(0,120svh,0);opacity:0}
.venn__unit{will-change:transform}
.venn__outer{font-family:var(--font-display);font-size:30px;fill:var(--fg);
text-anchor:middle;opacity:0}
.venn__ring{fill:none;stroke:var(--fg);stroke-width:1;vector-effect:non-scaling-stroke;
stroke-dasharray:1;stroke-dashoffset:1}
.venn__pair{font-family:var(--font-sans);font-size:12px;font-weight:400;letter-spacing:.14em;
text-transform:uppercase;fill:var(--fg-soft);text-anchor:middle;opacity:0}
.venn__result{font-family:var(--font-display);font-size:46px;letter-spacing:-.015em;font-style:italic;
fill:var(--fg);text-anchor:middle;opacity:0}
@media (max-width:600px){.venn__pair{font-size:16px}.venn__result{font-size:62px}.venn__outer{font-size:38px}}
/* --- Advertorial: Dreierstreifen mit Mikro-Bildunterschriften --- */
.advert .media{aspect-ratio:1/1}
.advert .media{margin:0}
@media (max-width:800px){.advert{grid-template-columns:1fr;row-gap:var(--s-6)}}
/* --- Heller Split (Möglichkeiten) --- */
.split{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--col-gap);row-gap:var(--s-6);align-items:center}
@media (max-width:900px){.split__media,.split__text{grid-column:1/13}}
/* --- Nachtrag: zentrierter Kapitelauftakt (nach Aro Hā) --- */
.chapter-open{display:grid;justify-items:center;text-align:center;gap:var(--s-3);
margin-bottom:var(--s-7)}
/* Vorher standen hier drei kurze Saetze nebeneinander (flex mit Trennabstand).
Jetzt traegt die Zeile einen zusammenhaengenden Satz — der braucht ein Mass,
sonst laeuft er ueber die volle Sektionsbreite. balance statt pretty: bei
drei Zeilen unter einer zentrierten Headline faellt eine kurze Schlusszeile
auf. Gemessen 510/518/507 px statt 644/642/249. */
.chapter-open__text{color:var(--fg-soft);max-width:52ch;text-wrap:balance}
.exp__item .media{margin:0}
/* --- Nachtrag: Ziffern-Pfeiler mit Geisterzahl (nach School of Self-Image) --- */
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:var(--s-5) var(--col-gap)}
.pillar{position:relative;padding-top:var(--s-5)}
.pillar__n{position:absolute;top:0;left:-.06em;font-family:var(--font-display);
font-size:clamp(4rem,7vw,6.5rem);line-height:.8;color:var(--fg);opacity:.10;
pointer-events:none;-webkit-user-select:none;user-select:none}
.pillar__t{position:relative;font-family:var(--font-display);font-size:var(--t-h2);
line-height:1.1}
.pillar p{margin-top:var(--s-2);color:var(--fg-soft);font-size:var(--t-small);
line-height:1.6;max-width:32ch}
/* --- Foto-Trenner: Aussage über Vollbild --- */
.full-image--center .full-image__text{align-items:center;padding-bottom:var(--margin)}
/* Seitlicher Scrim: die Aussage steht links, dort muss der Grund verlaesslich
dunkel sein — egal welches Motiv spaeter eingesetzt wird. */
.full-image--center img{filter:brightness(1.20) contrast(.97)}
.full-image--center::before{background:
linear-gradient(100deg,rgba(var(--scrim),.74) 0%,rgba(var(--scrim),.44) 28%,rgba(var(--scrim),.08) 56%,rgba(var(--scrim),0) 82%),
linear-gradient(180deg,rgba(var(--scrim),.14) 0%,rgba(var(--scrim),0) 45%,rgba(var(--scrim),.18) 100%)}
/* Zugang-Schluss (day.html): dieses Motiv ist heller als die uebrigen
Vollbilder — die Bronze und der Bildrahmen dahinter reichen bis in die
Textzone. Deshalb hier KEIN Aufhellen wie sonst bei --center, und der
seitliche Scrim laeuft weiter nach rechts aus.
Gemessen ohne diese beiden Regeln lagen die hellsten 5 % der Flaeche hinter
dem Text bei 2,5:1 — unter den 3:1, die grosse Schrift nach WCAG braucht. */
.full-image--zugang img{filter:none}
/* Die Aussage ist jetzt ein zugeschriebenes Zitat. Die Zuschreibung folgt der
Form der Stimmen auf der Startseite (.voice__name: Display-Kursive), nur im
hellen Ton fuer den dunklen Grund. blockquote/footer statt
, weil das die
Zuschreibung auch fuer Vorleseprogramme als solche ausweist. */
/* Das Mass gehoert an den Absatz, nicht an das blockquote: ch rechnet gegen
die Schriftgroesse des Elements, an dem es steht — am blockquote waeren das
die geerbten 17px und der Kasten nur 291px breit statt 612px. */
.full-image--zugang blockquote{margin:0}
.full-image--zugang blockquote p{margin:0;color:var(--ns-bone);font-family:var(--font-display);
font-size:var(--t-h2);line-height:1.2;max-width:26ch;text-wrap:pretty}
.full-image--zugang blockquote footer{margin-top:var(--s-4);font-family:var(--font-display);
font-style:italic;font-size:1.4rem;line-height:1.1;color:var(--ns-mist)}
.full-image--zugang::before{background:
linear-gradient(100deg,rgba(var(--scrim),.84) 0%,rgba(var(--scrim),.70) 34%,rgba(var(--scrim),.26) 64%,rgba(var(--scrim),0) 88%),
linear-gradient(180deg,rgba(var(--scrim),.16) 0%,rgba(var(--scrim),0) 45%,rgba(var(--scrim),.20) 100%)}
/* Handy: Zitat an den Bildfuss statt mittig — mittig sass es genau auf dem
Gesicht der Bronze. Der senkrechte Scrim wird unten staerker (.20 -> .55),
damit der Kontrast dort haelt. */
@media (max-width:700px){
.full-image--zugang .full-image__text{align-items:flex-end;padding-bottom:clamp(3rem,9vh,5rem)}
.full-image--zugang::before{background:
linear-gradient(100deg,rgba(var(--scrim),.84) 0%,rgba(var(--scrim),.70) 34%,rgba(var(--scrim),.26) 64%,rgba(var(--scrim),0) 88%),
linear-gradient(180deg,rgba(var(--scrim),.10) 0%,rgba(var(--scrim),0) 40%,rgba(var(--scrim),.68) 100%)}
}
.quote--over .label{color:var(--ns-mist)}
/* --- Founder groß --- */
@media (max-width:900px){
}
/* Auf schmalen Viewports traegt der seitliche Scrim nicht — dort flaechiger. */
@media (max-width:900px){
.full-image--center::before{background:
linear-gradient(180deg,rgba(var(--scrim),.40) 0%,rgba(var(--scrim),.58) 45%,rgba(var(--scrim),.66) 100%)}
}
/* --- Magazin-Rahmen: weißes Passepartout, kein Schatten --- */
.frame{margin:0;background:#FFFFFF;padding:clamp(14px,1.3vw,22px);display:grid;gap:.7rem}
.frame__cap{font-size:var(--t-label);letter-spacing:var(--track-label);text-transform:uppercase;
color:var(--ns-mushroom);text-align:right}
/* --- Dunkler Split: Text links, Bild rechts mit Verlauf in den Grund --- */
.split-dark{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:stretch;
min-height:78svh;background:var(--bg);color:var(--fg);overflow:hidden}
.split-dark__img{margin:0;grid-column:2;position:relative;overflow:hidden}
.split-dark__img img{width:100%;height:100%;object-fit:cover;will-change:transform}
.split-dark__img::after{content:"";position:absolute;inset:0;
background:linear-gradient(90deg,var(--bg) 0%,rgba(17,17,16,.55) 32%,rgba(17,17,16,0) 72%)}
.split-dark__text{grid-column:1;grid-row:1;display:grid;align-content:center;
padding-block:var(--chapter-gap);position:relative;z-index:2;max-width:none}
@media (max-width:900px){
.split-dark{grid-template-columns:1fr;min-height:0}
.split-dark__img{grid-column:1;grid-row:1;height:60svh}
.split-dark__img::after{background:linear-gradient(180deg,rgba(17,17,16,.2) 0%,var(--bg) 92%)}
.split-dark__text{grid-row:2;padding-block:var(--s-6) var(--s-7)}
}
/* --- Auflösung, die beim Scrollen aufbaut --- */
.lift{display:grid;gap:var(--s-3);max-width:46ch}
.lift__item{font-family:var(--font-display);color:var(--fg-muted);
opacity:0;transform:translateY(14px);
transition:opacity 900ms var(--ease-settle),transform 900ms var(--ease-settle),color 900ms}
.lift.is-in .lift__item{opacity:1;transform:none}
.lift.is-in .lift__item:nth-child(2){transition-delay:180ms}
.lift.is-in .lift__item:nth-child(3){transition-delay:360ms}
.lift.is-in .lift__item:nth-child(4){transition-delay:640ms}
@media (max-width:900px){.lift{max-width:none}}
/* --- Erleben: eines ganz, das zweite angeschnitten --- */
.exp-rail{margin-right:calc(var(--margin) * -1)}
.exp{display:flex;gap:var(--col-gap);overflow-x:auto;scroll-snap-type:x mandatory;
padding-bottom:var(--s-3);scrollbar-width:none}
.exp::-webkit-scrollbar{display:none}
.exp:focus-visible{outline:1px solid var(--fg);outline-offset:4px}
.exp__item{flex:0 0 min(74vw,880px);scroll-snap-align:start;display:grid;gap:var(--s-4)} /* s-4 statt s-3: unter der Platte steht nur noch der Link, 16px waeren zu eng */
.exp__item .media{margin:0}
@media (max-width:900px){.exp__item{flex:0 0 86vw}}
/* --- Erleben-Karten: Titel auf der Bildplatte (Mechanik von .teaser__plate) --- */
.exp__plate{position:relative;display:block;overflow:hidden;color:var(--ns-bone)}
/* display:block ist Pflicht: .media haengt an einem und bliebe sonst
inline — dann greift aspect-ratio nicht und die Platte kollabiert. */
.exp__plate>.media{display:block;margin:0}
/* Verlauf am Bildfuss. Die Kalkfassade und die hellen Stufen der Villa liegen
roh bei 1,27:1 gegen Bone.
Stopps in Pixeln, nicht in Prozent: der Textblock ist mit 70-115px ueber alle
Breiten fast gleich hoch, die Platte schrumpft aber von 495px auf 242px. Mit
prozentualen Stopps ragte das Label auf der kleinen Platte aus dem Verlauf
heraus und fiel auf 2,14:1. */
.exp__plate::after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(to top,rgba(17,17,16,.76) 0,rgba(17,17,16,.68) 96px,
rgba(17,17,16,.40) 180px,transparent 250px)}
.exp__masthead{position:absolute;z-index:2;pointer-events:none;
left:clamp(1.25rem,4%,2.25rem);right:clamp(1.25rem,4%,2.25rem);
bottom:clamp(1.25rem,6%,2.25rem);display:grid;gap:var(--s-3)}
.exp__masthead .label{color:var(--ns-mist);transition:color var(--dur-hover)}
/* Die zwei Labels der Retreat-Karte trennt Abstand, kein Zeichen: das zweite
Label fuehrt selbst schon einen Mittelpunkt ("5 Tage · Ort am See"), ein
dritter flacht die Gliederung ab — und beim Umbruch auf schmalen Platten
stuende er allein am Zeilenanfang. */
.exp__masthead .exp__meta{column-gap:var(--s-5);row-gap:var(--s-2)}
.exp__title{margin:0;font-family:var(--font-display);font-weight:400;
font-size:clamp(1.5rem,2.5vw,2.5rem);line-height:1.04;color:var(--ns-bone);
text-wrap:pretty}
/* Der globale Fokusrahmen ist --fg und waere auf dem dunklen Bildfuss unsichtbar. */
.exp__plate:focus-visible{outline-color:var(--ns-bone)}
/* Hover: das Motiv wird eine Spur heller und zieht weich heran — das Signal,
dass hier ein Angebot ausgewaehlt wird. Der Zoom laeuft in der Maske von
.media, der Verlauf und die Schrift darueber bleiben stehen. Bewusst lang
(700ms) statt der 240ms der uebrigen Hover: eine Flaeche dieser Groesse
ruckt sonst, statt sich zu bewegen. */
/* .plate-hover: dieselbe Geste fuer die "Weiter"-Platten der Unterseiten
(day, retreat). Der Link liegt um die Figur; die Maske ist deren .media. */
.plate-hover{display:block;color:inherit}
.plate-hover:focus-visible{outline-color:var(--fg)}
/* clip-path steht mit in der Liste: das Bild der "Weiter"-Platte traegt die
Maske (.reveal--mask), und die Kurzform hier wuerde deren Uebergang sonst
ueberschreiben — die Maske spraenge auf statt sich zu oeffnen. */
.exp__plate img,.plate-hover img{transition:transform var(--dur-reveal) var(--ease-soft),
filter var(--dur-hover) var(--ease-soft),clip-path var(--dur-image) var(--ease-settle);will-change:transform}
/* :hover nur auf Geraeten mit echtem Zeiger — auf Touch bleibt der Zustand
nach dem Antippen sonst haengen, bis woanders hingetippt wird. Der
Tastaturfall steht ausserhalb der Abfrage. */
@media (hover:hover){
.exp__plate:hover img,.plate-hover:hover img{transform:scale(1.045);filter:brightness(1.10)}
.exp__plate:hover .exp__masthead .label{color:var(--ns-bone)}
}
.exp__plate:focus-visible img,.plate-hover:focus-visible img{transform:scale(1.045);filter:brightness(1.10)}
/* Retreat-Platte: "To be announced" erscheint beim Ueberfahren in Serif ueber
dem gedimmten Bild; auf Touch steht der Text dauerhaft. Liegt ueber dem
Tropfen-Canvas und dem Fussverlauf (z-index 2). */
.exp__tba{position:absolute;inset:0;z-index:2;display:grid;place-items:center;pointer-events:none;
font-family:var(--font-display);font-size:clamp(1.6rem,2.4vw,2.4rem);letter-spacing:.02em;color:var(--ns-bone);
opacity:0;transform:translateY(4px);transition:opacity 400ms var(--ease-settle),transform 400ms var(--ease-settle)}
@media (hover:hover){
.exp__plate--tba:hover img,.exp__plate--tba:hover .media__ripple{filter:brightness(.72)}
.exp__plate--tba:hover .exp__tba{opacity:1;transform:none}
}
.exp__plate--tba:focus-visible img{filter:brightness(.72)}
.exp__plate--tba:focus-visible .exp__tba{opacity:1;transform:none}
@media (hover:none){
.exp__plate--tba img{filter:brightness(.78)}
.exp__plate--tba .exp__tba{opacity:1;transform:none}
}
.exp__plate:focus-visible .exp__masthead .label{color:var(--ns-bone)}
/* ANGEBOTE — Tropfen beim Ueberfahren (testweise, js/ripple.js)
Das Canvas liegt ueber dem und unter dem Fussverlauf (::after, ohne
z-index) sowie der Schrift (z-index 2). Es traegt dieselbe Transformation
wie das Bild, sonst liefe der Hover-Zoom unter der Welle weg. */
/* Alle Uebergaenge stehen in der Grundregel. Sie lagen vorher in einer
zweiten Regel (.exp__plate .media__ripple) mit derselben Spezifitaet wie
.media__ripple.is-on — die spaetere gewann und stellte die
Deckkraft-Blende wieder her, die .is-on gerade abschalten wollte. Das
Canvas blendete dadurch ueber 240 ms auf, waehrend die Welle schon lief:
der Anfang der Bewegung war unsichtbar. */
.media__ripple{position:absolute;inset:0;width:100%;height:100%;display:block;
pointer-events:none;opacity:0;visibility:hidden;
transition:opacity var(--dur-hover) var(--ease-soft),
transform var(--dur-reveal) var(--ease-soft),
filter var(--dur-hover) var(--ease-soft)}
.media__ripple.is-ready{visibility:visible}
/* Beim Start ohne Blende: das Canvas zeigt im ersten Bild ohnehin genau das
Motiv darunter, es gibt nichts zu ueberblenden. Transform und Filter
behalten ihre Uebergaenge, damit der Hover-Zoom mitlaeuft. */
.media__ripple.is-on{opacity:1;
transition:transform var(--dur-reveal) var(--ease-soft),
filter var(--dur-hover) var(--ease-soft)}
@media (hover:hover){
.exp__plate:hover .media__ripple{transform:scale(1.045);filter:brightness(1.10)}
}
.exp__plate:focus-visible .media__ripple{transform:scale(1.045);filter:brightness(1.10)}
/* Hero und das interaktive Modell behalten bewusst die klassische,
kleinere Typografie-Skala — beim Modell haengt die Scroll-Choreografie
(main.js) an den tatsaechlichen Bildschirm-Massen der Elemente, das soll
nicht durch groessere Typografie verschoben werden. */
.hero,
#modell{
--t-display-xl: clamp(3.2rem, 9vw, 9.5rem);
--t-display: clamp(2.6rem, 6.2vw, 6.4rem);
--t-h1: clamp(2.2rem, 4.6vw, 4.4rem);
--t-h2: clamp(1.7rem, 3vw, 2.9rem);
--t-label: 0.6875rem;
--track-label: 0.18em;
--lh-display: 0.98;
--margin: clamp(1.25rem, 5vw, 5.5rem);
}
/* Kontrollierte Asymmetrie: Founder-Bild ist jetzt der Hauptdarsteller
(6/5-Spalten-Ratio, direkt in .founder2__img/.founder2__text unten
gesetzt). "Moeglichkeiten" behaelt bewusst seine bestehende 6/5-Aufteilung
— die Headline dort ist zu lang fuer eine engere Spalte. */
/* --- Stimmen: weisses Papier, fuenf Zitate in Haarlinien-Spalten (nach Granola /
Aro Hā; Brief §40 keine Karten, Audit 8 Haarlinien statt Boxen). Drei stehen
nebeneinander, die uebrigen erreicht man ueber die Pfeile darunter. Die Attribution sitzt am Spaltenfuss auf einer
Linie, das Portraet ist quadratisch und S/W. --- */
.voices{padding-block:calc(var(--chapter-gap) * .55)}
.voices__head{margin:0 auto var(--s-6);text-align:center;max-width:24ch;text-wrap:balance;
font-size:clamp(2.4rem,5.4vw,5.2rem)}
/* Nur die Trennlinien ZWISCHEN den Stimmen (border-right an .voice, mobil
border-bottom). Der Rahmen oben und unten ist entfallen — die Tafel schliesst
jetzt ueber den Abstand, nicht ueber eine Kante.
--border bleibt hier definiert: .voice erbt es fuer die Trenner. */
/* Blaettern statt Stapeln (Kundenwunsch 09.09.2026): alle Stimmen stehen in EINER
Reihe nebeneinander, drei sind sichtbar, geblaettert wird ueber die Pfeile unter
der Tafel. Natives Scrollen mit Snap statt einer Transform-Schleife — Wischen,
Tastatur und Scrollrad funktionieren dadurch von selbst, das JS setzt nur die
Pfeile und ihren Zustand. Leiste ausgeblendet.
Kein scroll-behavior im CSS: die weiche Bewegung setzt das JS, damit sie bei
prefers-reduced-motion entfaellt. */
.voices__viewport{overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
scrollbar-width:none;-ms-overflow-style:none}
.voices__viewport::-webkit-scrollbar{display:none}
.voices__viewport:focus-visible{outline:1px solid var(--fg);outline-offset:4px}
.voices__grid{display:grid;grid-auto-flow:column;grid-auto-columns:calc(100% / 3);
--border:1px solid var(--hairline-strong)} /* auf Weiss: .32, damit das Raster steht */
/* Die Signatur folgt dem Text direkt (align-content:start) statt am Spaltenfuss
zu sitzen: mit den kurzen Statements riss "1fr auto" eine leere Flaeche von
mehreren hundert Pixeln zwischen Zitat und Bild auf. */
.voice{margin:0;display:grid;align-content:start;gap:var(--s-5);
padding:var(--s-6) var(--s-5);border-right:var(--border);scroll-snap-align:start}
.voice:first-child{padding-left:0}
.voice:last-child{border-right:0;padding-right:0}
/* Die Pfeile: kein Kreis, nur das Zeichen in Ink. Die Schaltflaeche behaelt ihre
52px Trefferflaeche, sie ist nur unsichtbar. Beim Ueberfahren wandert das
Zeichen in seine Richtung, dieselbe Geste wie .link .arrow in components.css.
Am Ende der Reihe wird gedaempft statt ausgeblendet, damit die Bedienung
erkennbar bleibt und nicht ins Leere fuehrt. */
.voices__nav,.rail-nav{display:flex;gap:var(--s-2);justify-content:center;margin-top:var(--s-5)}
.rail-nav{justify-content:flex-end;margin-top:var(--s-3)} /* Angebote: rechts, wo die angeschnittene Karte hinzeigt */
.voices__arrow,.rail-arrow{inline-size:3.25rem;block-size:3.25rem;padding:0;border:0;
background:none;color:var(--fg);
display:grid;place-items:center;cursor:pointer;
transition:opacity var(--dur-hover) var(--ease-soft)}
.voices__arrow svg,.rail-arrow svg{inline-size:1.75rem;block-size:1.75rem;display:block;
transition:transform var(--dur-hover) var(--ease-soft)}
@media (hover:hover){
.voices__arrow:not(:disabled):hover[data-rail-step="-1"] svg,.rail-arrow:not(:disabled):hover[data-rail-step="-1"] svg{transform:translateX(-4px)}
.voices__arrow:not(:disabled):hover[data-rail-step="1"] svg,.rail-arrow:not(:disabled):hover[data-rail-step="1"] svg{transform:translateX(4px)}
}
.voices__arrow:focus-visible,.rail-arrow:focus-visible{outline:1px solid var(--fg);outline-offset:2px}
.voices__arrow:disabled,.rail-arrow:disabled{opacity:.28;cursor:default}
/* Der Textkoerper haelt Zitat, aufgeklappten Rest und den Schalter zusammen und
sitzt oben; die Signatur bleibt ueber grid-template-rows am Spaltenfuss. */
.voice__body{display:grid;gap:var(--s-3);align-content:start}
.voice__toggle{justify-self:start;margin-top:.4em}
/* Zwei Ebenen: Das Statement (.voice__lead) ist ein woertlicher Satz aus der
Stimme, in der Display-Serif und mit Anfuehrungszeichen. Aufgeklappt folgt die
ganze Stimme (.voice__full) in der Grotesk des Fliesstexts — kleiner, aber auf
Lesbarkeit gesetzt (--t-body / --lh-body), in Ink. Ohne eigene Anfuehrungs-
zeichen: das Statement traegt sie, der Volltext steht als Beleg darunter. */
.voice__text{margin:0;font-family:var(--font-display);font-weight:400;
font-size:clamp(1.3rem,1.7vw,1.75rem);line-height:1.32;color:var(--fg);text-wrap:pretty}
.voice__full{font-family:var(--font-sans);font-size:var(--t-body);line-height:var(--lh-body);
color:var(--fg);text-wrap:pretty}
.voice__more>div{gap:var(--s-3)}
/* Signatur gestapelt: Portraet, darunter Name und Rolle. Nebeneinander blieben
bei 176px Bild in der 295px-Spalte nur ~100px fuer den Namen — "Brigitta
Mueller" brach um, Ginas Rolle wurde zur Acht-Zeilen-Saeule. */
.voice__sig{display:grid;justify-items:start;gap:var(--s-3)}
/* als EIN Rasterfeld: sonst wuerden seine -Kinder eigene
(leere) Felder belegen und das Bild in die zweite Spalte schieben. */
.voice__sig>picture{display:block}
/* Portraet 176px (war 72, dann 128): die Signatur traegt das Bild, nicht umgekehrt —
Name und Rolle stehen mittig daneben. Quellen aus 10 Testimonials, Stufen
176/352/528 fuer 1x/2x/3x, weit gefasster Ausschnitt. Mobil 136px. */
/* Entsaettigt statt Schwarzweiss (Entscheidung 10.09.2026): die Selfies haben sehr
verschiedenes Licht; .55 laesst Hautton und Umgebung erkennen, ohne dass die
Reihe zerfaellt. */
.voice__portrait{width:176px;height:176px;object-fit:cover;flex:none;filter:saturate(.55);
background:var(--bg-elev)}
.voice__who{display:grid;gap:.15rem}
.voice__name{font-family:var(--font-display);font-style:italic;font-size:1.4rem;line-height:1.1;color:var(--fg)}
.voice__role{font-size:var(--t-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--fg-soft)}
@media (max-width:900px){
.voices__grid{grid-auto-columns:100%}
.voice{border-right:0;padding:var(--s-5) 0}
/* Handy: alles auf eine linke Achse — Ueberschrift, Zitat, Signatur, Pfeile.
Signatur nebeneinander (Portraet links, Name rechts), sonst stuende das
136px-Bild allein in einer Zeile mit 190px Leere daneben. */
.voices__head{max-width:none;text-align:left}
.voice__portrait{width:136px;height:136px}
.voice__sig{grid-template-columns:136px minmax(0,1fr);align-items:center} /* feste Spalte: meldet sonst eine falsche Eigenbreite */
.voices__nav{justify-content:flex-start}
}
/* --- Gründerin auf der Startseite: Branding-Teaser im Magazinstil.
Nur Aufmacher, Vorspann und Verweis — der Volltext liegt als Porträtstrecke
auf selma.html. Foto links, Satz rechts, beide senkrecht zentriert. --- */
.teaser{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--col-gap);
row-gap:var(--s-6);align-items:center}
/* Die Platte laeuft nach links bis an die Fensterkante — der Einzug von .wrap
wird dort aufgehoben. Oben und unten bleibt der Sektionsabstand stehen. */
.teaser__plate{grid-column:1/7;position:relative;margin:0;overflow:hidden;
margin-left:calc(var(--margin) * -1)}
/* display:block ist Pflicht: .media haengt an einem und bliebe sonst
inline — dann greift die Hoehe nicht und die Platte kollabiert.
Feste, gedeckelte Hoehe statt Seitenverhaeltnis: hohe Platte im Hochformat,
aber gedeckelt — die Sektion bleibt kuerzer als bei starrem 4/5. Der Parallax
dazu ist bewusst dezent (siehe data-parallax im Markup). */
.teaser__plate>.media{display:block;height:clamp(520px,80svh,820px)}
.teaser__plate img{width:100%;height:100%;object-fit:cover;object-position:58% 50%}
/* Verlauf am Bildfuss: unter dem Schriftzug laeuft ihr cremefarbener Mantel
durch — im Flaechenmittel unauffaellig, an der unguenstigsten Kachel aber
nur rund 2:1. Der Verlauf hebt den schlechtesten Punkt ueber 4,5:1. */
.teaser__plate::after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(to top,rgba(17,17,16,.72) 0%,rgba(17,17,16,.60) 24%,transparent 58%)}
/* Links auf die Seitenmarge gesetzt: der Schriftzug fluchtet mit der Wortmarke
in der Navigation, obwohl das Bild darunter bis an die Fensterkante laeuft. */
.teaser__masthead{position:absolute;z-index:2;left:var(--margin);
bottom:clamp(1.5rem,7%,3rem);right:clamp(1.25rem,7%,2.75rem);
display:grid;gap:var(--s-3);color:var(--ns-bone);pointer-events:none}
.teaser__kicker{font-family:var(--font-sans);font-weight:400;font-size:var(--t-label);
letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ns-bone)}
.teaser__name{font-family:var(--font-display);font-weight:400;
font-size:clamp(2.2rem,4vw,3.8rem);line-height:.94;color:var(--ns-bone)}
.teaser__name em{font-style:italic}
.teaser__body{grid-column:8/13;display:grid;gap:var(--s-4);align-content:center;
justify-items:start}
.teaser__eyebrow{font-size:var(--t-label);letter-spacing:var(--track-label);
text-transform:uppercase;color:var(--eyebrow);margin:0}
.teaser__head{font-family:var(--font-display);font-weight:400;
font-size:clamp(1.9rem,3.2vw,3.1rem);line-height:1.1;margin:0;color:var(--fg);
text-wrap:balance}
.teaser__head em{font-style:italic}
.teaser__lead{font-size:var(--t-body);line-height:1.62;color:var(--fg-muted);
margin:0;max-width:44ch;text-wrap:pretty}
@media (max-width:900px){
.teaser__plate,.teaser__body{grid-column:1/13}
/* Einspaltig laeuft die Platte auf beide Seiten aus — sonst stuende sie
links an der Kante und rechts im Einzug, was schief wirkt. */
/* Kein Creme-Streifen ueber dem Foto: die weisse Stimmen-Sektion davor
traegt den Abstand, das Bild beginnt direkt darunter (Weiss -> Foto). */
#founder{padding-top:0}
.teaser__plate{margin-inline:calc(var(--margin) * -1)}
.teaser__plate>.media{height:clamp(420px,64svh,600px)}
.teaser__masthead{left:var(--margin);right:var(--margin)}
.teaser__body{gap:var(--s-3)}
}
/* --- Porträtstrecke auf selma.html: einspaltiger Magazinsatz --- */
.feature{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--col-gap)}
/* Sechs statt acht Spalten und 18 px statt 17: 835 px ergaben 97 Zeichen pro
Zeile, lesbar sind 45–75. Jetzt rund 69. */
/* Block statt Grid: die Absaetze tragen ihre Abstaende selbst, und nur in
einem Blockkontext kann der Bildeinschub (float) den Text brechen. */
.feature__col{grid-column:4/10}
/* :not([class]) — sonst schlaegt diese Regel (0,1,1) die Klassenregeln von
Wendezeile und Initial (je 0,1,0) und alles liefe auf Fliesstextgroesse. */
.feature__col>p:not([class]),.feature__col>p.feature__first{
font-size:1.125rem;line-height:1.7;color:var(--fg);
margin:0 0 1.05em;text-wrap:pretty}
.feature__first::first-letter{float:left;font-family:var(--font-display);font-size:4.1em;
line-height:.8;padding:.02em .1em 0 0;color:var(--fg)}
/* Zitat haengt nach links in die Rinne aus: Blickpunkt, ohne den Fluss zu verlassen */
.feature__pull{margin:var(--s-5) 0 var(--s-5) calc(var(--s-5) * -1);padding:0}
.feature__pull p{font-family:var(--font-display);font-size:clamp(1.6rem,2.6vw,2.5rem);
line-height:1.16;margin:0;color:var(--fg);text-wrap:balance}
.feature__pull em{font-style:italic}
.feature__turn{font-family:var(--font-display);font-style:italic;
font-size:clamp(1.4rem,2vw,1.95rem);line-height:1.3;color:var(--fg);
margin:var(--s-5) 0 var(--s-5)}
/* Bildeinschub: 44 % der Spalte, links um eine Rinne ausgehaengt wie das
Zitat, der Text laeuft rechts daran vorbei. */
.feature__inset{float:left;width:44%;margin:.45rem var(--s-5) var(--s-3) calc(var(--s-5) * -1)}
.feature__inset img{object-position:56% 30%}
/* Wendezeile und Zitat stehen immer unter dem Einschub, nie neben ihm —
sonst reisst der Umfluss die Zeile auseinander. */
.feature__turn,.feature__pull{clear:both}
.feature__figure figcaption{margin-top:var(--s-3);font-size:var(--t-label);
letter-spacing:var(--track-label);text-transform:uppercase;color:var(--fg-muted)}
@media (max-width:1100px){.feature__col{grid-column:3/11}}
@media (max-width:900px){
.feature__col{grid-column:1/13}
.feature__pull{margin-left:0}
.feature__inset{margin-left:0;width:48%}
}
@media (max-width:600px){.feature__inset{float:none;width:72%;margin:0 0 var(--s-4)}}
/* --- Leichtigkeit: Headline eine Stufe unter --t-h1.
Die Skala in tokens.css gibt fuer .h1 bis 5,6rem (bei 1440 px sind das
80,6 px). In der sechsspaltigen Spalte von 619 px kippt genau DIESE
Headline damit auf fuenf Zeilen — die Nachbar-Headline gleicher Groesse
bleibt bei vier, sie ist nur ein Wort kuerzer. 4,9vw statt 5,6vw bringt sie
zurueck auf vier Zeilen, ohne auf breiten Schirmen kleiner zu werden:
ab 1920 px steht wieder der volle Maximalwert. Geprueft von 1024 bis 2400 px. */
#leichtigkeit .h1{font-size:clamp(2.6rem,4.9vw,5.6rem)}
/* --- Advertorial: redaktionell aufgemachter Verweis auf die Angebote.
Eigener Block statt .advert, weil dort ein Dreierraster mit erzwungenem
Seitenverhaeltnis 1/1 steht — hier laeuft ein einzelnes 16:9-Motiv.
Bild links, schmale Textspalte rechts, senkrecht zentriert. --- */
.advertorial{display:grid;grid-template-columns:7fr 4fr;column-gap:clamp(2rem,4vw,4.5rem);
row-gap:var(--s-5);align-items:center;margin:0}
.advertorial__media{display:block}
.advertorial__body{display:grid;gap:var(--s-3);justify-items:start}
.advertorial__head{font-family:var(--font-display);font-weight:400;
font-size:clamp(1.6rem,2.4vw,2.6rem);line-height:1.15;margin:0;color:var(--fg);
text-wrap:balance}
.advertorial__head em{font-style:italic}
.advertorial__text{font-size:var(--t-body);line-height:1.62;color:var(--fg-muted);
margin:0;max-width:38ch;text-wrap:pretty}
@media (max-width:900px){
.advertorial{grid-template-columns:1fr}
}
/* --- Die Villa: drei Hochformate nebeneinander.
Eigener Block statt .advert, weil dort aspect-ratio 1/1 erzwungen wird —
die Aufnahmen sind 3:4. --- */
.villa-trio{display:grid;grid-template-columns:repeat(3,1fr);column-gap:var(--col-gap);
row-gap:var(--s-5)}
.villa-trio__item{margin:0;display:grid;gap:var(--s-3);align-content:start}
.villa-trio__item>.media{display:block}
.villa-trio__item img{width:100%;height:100%;object-fit:cover}
.villa-trio__cap{font-size:var(--t-label);letter-spacing:var(--track-label);
text-transform:uppercase;color:var(--fg-muted)}
/* Bildnachweis: a{text-decoration:none} gilt global (base.css) — in einer
Bildunterschrift muss der Lizenzverweis aber dauerhaft als Verweis lesbar
sein, nicht erst beim Ueberfahren. CC BY-SA verlangt, dass Lizenz und
Nennung die Kopie begleiten; ein unsichtbarer Link erfuellt das nicht. */
.villa-trio__cap a{text-decoration:underline;text-underline-offset:.3em;
text-decoration-thickness:1px;text-decoration-color:var(--hairline-strong)}
.villa-trio__cap a:hover{text-decoration-color:currentColor}
@media (max-width:900px){
.villa-trio{grid-template-columns:1fr;row-gap:var(--s-6);max-width:460px}
}
/* --- Textspalte neben einer Aufnahme MIT Bildunterschrift ---
align-items:end richtet an der Unterkante der FIGUR aus, und die schliesst
die Bildunterschrift ein. Der Text saeckt dadurch unter die Bildkante.
Diese Klasse holt ihn zurueck — und zwar so, dass die GRUNDLINIE der letzten
Zeile auf der Bildkante sitzt, nicht der Fuss des Zeilenkastens. Wuerde man
den Kasten ausrichten, bliebe ueber der Kante eine Luecke in Hoehe von
Unterlaenge plus halbem Durchschuss (8,2px) und der Text laese sich als zu
kurz geraten.
Gemessen bei 17px/1.6 (an 1200px und 1400px identisch):
Block der Bildunterschrift var(--s-3) + var(--t-label)*var(--lh-body) = 32,00px
Grundlinie bis Kastenfuss var(--t-body) * .482 = 8,19px
Versatz = 23,81px
Der Faktor .482 ist Unterlaenge plus halber Durchschuss der Geist; er
skaliert mit der Schriftgroesse, solange der Durchschuss 1.6 bleibt.
Aendert sich der Abstand in .villa-trio__item (gap) oder --t-label, aendert
sich der erste Summand automatisch mit. */
.align-image-foot{padding-bottom:calc(
var(--s-3) + var(--t-label) * var(--lh-body) - var(--t-body) * .482)}
/* Unter 900px stehen die Spalten untereinander — dann gibt es nichts auszurichten. */
@media (max-width:900px){.align-image-foot{padding-bottom:0}}
/* --- Schaerfe-Moment: aus der Stille klart das Bild auf.
Der Grundzustand ist SCHARF. Die Unschaerfe bringt erst die Klasse
.is-pulling, die ausschliesslich von JS vergeben wird — ohne JavaScript und
bei reduzierter Bewegung bleibt das Bild damit scharf statt dauerhaft blind.
JS setzt nur --focus; die filter-Kette steht hier. transform bleibt
unangetastet, das gehoert allein dem Parallax. --- */
.focus-pull.is-pulling img{
filter:blur(calc((1 - var(--focus,0)) * 26px))
brightness(calc(.80 + var(--focus,0) * .20))
saturate(calc(.82 + var(--focus,0) * .18));
will-change:filter}
/* Bei voller Schaerfe entfernt JS die Klasse ganz: kein filter, kein
will-change, die Rasterebene wird wieder freigegeben. */
@media (prefers-reduced-motion: reduce){
.focus-pull.is-pulling img{filter:none;will-change:auto}
}
/* --- Abschluss: Kampagnen-Ende über Vollbild, zentriert --- */
.closing{position:relative;overflow:hidden;background:var(--ns-ink);color:var(--ns-bone);
padding-block:clamp(5rem,11vw,9rem);text-align:center}
/* Kein Hintergrundbild und kein Schleier mehr. Das Schreib-Motiv traegt keine
Typo: gemessen kommt helle Schrift dort auf hoechstens 1,34:1, dunkle auf
1,53:1 — helle Fensterstreifen liegen direkt neben dunklem Haar. Es steht
deshalb als Platte NEBEN dem Satz, auf reinem Ink. Damit braucht der Text
keine Abdunklung und das Foto keine Beschneidung seiner Helligkeit. */
/* Letzte Magazinseite statt zentriertem Stapel: das Motiv atmet oben, der Satz
sitzt tief im Format, zweispaltig und linksbuendig. Die frueheren
.closing__stmt / .closing__rule / .closing__form entfallen — zwei
Display-Zeilen uebereinander plus Haarlinie dazwischen war das Problem. */
.closing{text-align:left}
.closing__in{position:relative;z-index:2;display:grid;align-content:center;
min-height:min(56svh,560px)}
.finale{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--col-gap);
row-gap:var(--s-6);align-items:center}
.finale__head{grid-column:1/6;display:grid;gap:var(--s-4);align-content:center}
.finale__eyebrow{font-size:var(--t-label);letter-spacing:var(--track-label);
text-transform:uppercase;color:var(--ns-mist)}
/* Groesse gedeckelt: --t-display waere in sechs Spalten zu gross und braeche
auf vier Zeilen. Gemessen von 1024 bis 1920 px auf hoechstens drei. */
.finale__head-line{font-family:var(--font-display);font-weight:400;
font-size:clamp(2.2rem,4.3vw,4rem);line-height:1.06;margin:0;
color:var(--ns-bone);text-wrap:balance}
.finale__head-line em{font-style:italic}
.finale__plate{grid-column:7/13;margin:0}
.finale__plate>.media{display:block}
.finale__plate img{width:100%;height:100%;object-fit:cover}
/* Hinweis und Versprechen beide auf Mist: Stone kam ueber der hellen
Wasserspiegelung nur auf 2,3:1. */
.closing .form__note{color:var(--ns-mist)}
.finale__lead{font-size:var(--t-body);line-height:1.6;color:var(--ns-mist);
margin:0;max-width:38ch;text-wrap:pretty}
@media (max-width:900px){
.finale__head,.finale__plate{grid-column:1/13}
.finale__plate{order:-1}
.closing__in{min-height:0}
}
/* Formular einzeilig, mittig */
/* justify-items:start statt center — der Abschluss ist jetzt linksbuendig. */
/* Auf dunklem Grund traegt der Kasten keine weisse Flaeche, sondern eine
Haarlinie in Bone mit einem Hauch Aufhellung — sonst wuerde ein weisses
Feld die Sektion aufreissen. */
.form--inline{gap:var(--s-3);width:100%;justify-items:start;margin-top:0}
.form--inline .form__row{display:grid;grid-template-columns:1fr auto;align-items:end;gap:var(--s-3);
width:100%;max-width:560px}
.form--inline .field__label{color:var(--ns-mist)}
.form--inline input[type=email]{background:rgba(240,237,231,.06);border-color:rgba(240,237,231,.38);
color:var(--ns-bone)}
.form--inline input::placeholder{color:var(--ns-stone)}
.form--inline input:focus{border-color:var(--ns-bone);box-shadow:0 0 0 3px rgba(240,237,231,.12)}
.form--inline .form__note{color:var(--ns-stone)}
@media (max-width:640px){
/* linksbuendig statt zentriert — Rest der frueheren mittigen Fassung.
.form--inline .form__row liegt bei (0,2,0) und wuerde eine Regel mit
(0,1,0) schlagen, auch spaeter im Blatt — deshalb beide Selektoren. */
.form__row,.form--inline .form__row{grid-template-columns:1fr;gap:var(--s-3);justify-items:stretch}
.form__row .btn--rose{justify-self:stretch;justify-content:center}
}
/* --- Vollbild-Motive mit Mobilvariante: darf keinen eigenen Kasten
bilden, sonst faengt .page-hero>* das Element statt das Bild. --- */
/* Seit alle grossen Bilder eine Handy-Fassung haben, steht ueberall ein
um das . display:contents nimmt ihm den eigenen Kasten, damit
jede Regel, die auf das Bild im Rahmen zielt, unveraendert greift. */
picture{display:contents}
/* --- Rechtsseiten: schmale Lesespalte, Fakten als Definitionsliste --- */
.legal{max-width:68ch}
.legal h2{font-family:var(--font-display);font-weight:400;font-size:var(--t-h2);line-height:1.1;margin:var(--s-7) 0 var(--s-3)}
.legal h3{font-family:var(--font-display);font-weight:400;font-size:var(--t-h3);line-height:1.2;margin:var(--s-5) 0 var(--s-2)}
.legal p,.legal li{font-size:var(--t-body);line-height:1.7;color:var(--fg);margin:0 0 1em;text-wrap:pretty}
/* Verweise im Fliesstext der Rechtsseiten. .link taugt hier nicht: die Klasse
setzt display:inline-flex und eine eigene Schriftgroesse und unterstreicht
erst beim Ueberfahren — im Satz braucht ein Lizenzverweis eine dauerhafte,
ruhige Auszeichnung. */
.legal p a,.legal li a,.legal dd a{text-decoration:underline;text-underline-offset:.25em;
text-decoration-thickness:1px;text-decoration-color:var(--hairline-strong)}
.legal p a:hover,.legal li a:hover,.legal dd a:hover{text-decoration-color:currentColor}
.legal ul{padding-left:1.2em}
.legal dl{display:grid;grid-template-columns:minmax(10rem,14rem) 1fr;gap:.55rem 1.5rem;margin:var(--s-4) 0 var(--s-5);
border-top:var(--border);padding-top:var(--s-4)}
.legal dt{font-size:var(--t-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--fg-muted);padding-top:.35em}
.legal dd{margin:0;font-size:var(--t-body)}
/* Platzhalter fuer Firmendaten: sichtbar, damit sie nicht uebersehen werden.
Nach dem Eintragen die -Umhuellung entfernen. */
mark.fill{background:transparent;color:var(--fg-muted);border-bottom:1px dashed var(--hairline-strong);padding:0 .1em;font-style:italic}
@media (max-width:640px){.legal dl{grid-template-columns:1fr;gap:.2rem 0}.legal dt{margin-top:.8em}}
/* ==========================================================================
NOBLE SILENCE DAY — Aufbau nach dem Muster einer Ereignisseite:
Sticky-Zweispalter, Gegenueberstellung, drei Akte, ausklappbarer Zeitplan.
Alle Werte aus dem bestehenden Token-System, keine neuen Farben.
========================================================================== */
/* Titelspalte bleibt stehen, der Fliesstext zieht daran vorbei. Reine
Struktur — es bewegt sich nichts, die Seite bewegt sich. */
.sticky-split{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--col-gap);row-gap:var(--s-6)}
.sticky-split__title{grid-column:1/6;position:sticky;top:clamp(6rem,10vw,8rem);align-self:start;
display:grid;gap:var(--s-4)}
.sticky-split__prose{grid-column:7/13;display:grid;gap:var(--s-4)}
@media (max-width:900px){
.sticky-split{grid-template-columns:1fr}
.sticky-split__title,.sticky-split__prose{grid-column:1/-1}
/* sticky abschalten: einspaltig klebte der Titel ueber dem eigenen Text */
.sticky-split__title{position:static}
}
/* Die Umkehrung, Fassung A: zwei Zahlen, ein Schraegstrich, darunter die
Leitfrage. Liegt nur noch im Einstieg "Bild"; die Fassung "Typo" traegt
stattdessen den einen Satz darunter. */
.ratio{max-width:54rem;margin-inline:auto;display:grid;gap:var(--s-5);justify-items:center;text-align:center}
.ratio__lead{color:var(--fg-muted);max-width:48ch;margin:0}
.ratio__lead em{font-style:italic;color:var(--fg)}
.ratio__stats{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
gap:clamp(.75rem,4vw,3rem);width:100%}
.ratio__col{display:grid;gap:var(--s-3);justify-items:center}
.ratio__num{font-family:var(--font-display);font-weight:400;
font-size:clamp(4rem,13vw,10rem);line-height:.88;letter-spacing:-.02em;color:var(--fg);
font-variant-numeric:tabular-nums}
.ratio__label{font-size:var(--t-label);letter-spacing:var(--track-label);
text-transform:uppercase;color:var(--fg-muted);max-width:14ch}
.ratio__slash{font-family:var(--font-display);font-size:clamp(2.5rem,7vw,5rem);
line-height:1;color:var(--ns-stone);-webkit-user-select:none;user-select:none}
.ratio__q{font-family:var(--font-display);font-style:italic;
font-size:clamp(1.35rem,2.6vw,2.1rem);line-height:1.25;max-width:26ch;margin:0;
color:var(--fg);text-wrap:balance}
/* Die Umkehrung: eine Sektion, ein Satz. Groesse so gewaehlt, dass die drei
hart gesetzten Zeilen in jeder Breite ohne weichen Umbruch stehen — der
engste Fall ist 901px, wo die acht Spalten nur rund 520px messen, bevor das
Raster bei 900px auf volle Breite umbricht. Faellt die Messung durch, wird
die Schriftgroesse nachgezogen, nicht das nowrap entfernt: ein weicher
Umbruch in einer .line liesse zwei Zeilen gemeinsam einfahren. */
.umkehr{margin:0;font-family:var(--font-display);font-weight:400;
font-size:clamp(1.9rem,4.6vw,4.4rem);line-height:1.06;letter-spacing:-.01em;
color:var(--fg);text-wrap:nowrap}
.umkehr em{font-style:italic}
/* Drei Akte. Kennung | Zeit + Leitfrage | Beschreibung, getrennt durch Haarlinien
wie .rhythm__row. */
.act{display:grid;grid-template-columns:minmax(8rem,1fr) minmax(0,1.3fr) minmax(0,1.7fr);
column-gap:var(--col-gap);row-gap:var(--s-4);
padding-block:var(--s-5);border-bottom:var(--border);align-items:start}
.act__label{font-size:var(--t-label);letter-spacing:var(--track-label);
text-transform:uppercase;color:var(--eyebrow)}
.act__title{font-family:var(--font-display);font-weight:400;
font-size:clamp(1.8rem,3.2vw,2.7rem);line-height:1.02;margin:0;color:var(--fg)}
.act__phase{font-size:var(--t-label);letter-spacing:var(--track-label);
text-transform:uppercase;color:var(--fg-muted)}
.act__time{font-size:var(--t-label);letter-spacing:var(--track-label);
text-transform:uppercase;color:var(--fg-muted);font-variant-numeric:tabular-nums}
.act__q{font-family:var(--font-display);font-style:italic;
font-size:clamp(1.15rem,1.9vw,1.55rem);line-height:1.28;margin:0;color:var(--fg);
text-wrap:balance}
@media (max-width:900px){
.act{grid-template-columns:1fr;row-gap:var(--s-3)}
}
/* Ausklappbarer Zeitplan — dieselbe 0fr/1fr-Technik wie das Akkordeon. */
.acts__toggle{display:inline-flex;align-items:center;gap:.7em;background:none;border:0;
padding:var(--s-3) 0;cursor:pointer;color:var(--fg);
font-family:var(--font-display);font-size:var(--t-h3);line-height:1.2}
.acts__toggle-icon{font-family:var(--font-sans);font-weight:300;font-size:1.15em;line-height:1;
transition:transform var(--dur-hover) var(--ease-soft)}
.acts__panel.is-open{grid-template-rows:1fr}
.schedule{display:grid;border-top:var(--border);margin:var(--s-3) 0 0;padding:0;list-style:none}
.schedule__row{display:grid;grid-template-columns:minmax(4.5rem,auto) minmax(0,1fr);
column-gap:var(--s-5);row-gap:var(--s-2);padding-block:var(--s-4);border-bottom:var(--border)}
.schedule__time{font-size:var(--t-label);letter-spacing:var(--track-label);color:var(--fg-muted);
font-variant-numeric:tabular-nums;padding-top:.35em}
.schedule__t{font-family:var(--font-display);font-weight:400;font-size:var(--t-h3);
line-height:1.2;margin:0 0 .35em;color:var(--fg)}
@media (max-width:700px){
}
/* ==========================================================================
HERO — helle Phase der Wellen-Animation
Die Startseite ist auf die dunkle Fassung festgelegt; die hellen und
farbigen Vergleichs-Header sind entfallen. Die Werte hier bleiben, weil die
Wellen-Animation (js/hero-wave.js) beim Uebergang ins helle Motiv genau
diesen Zustand herstellt — Schleier und Schriftfarbe wechseln mit.
Ohne laufende Welle greift nichts davon.
========================================================================== */
/* Nur leicht entsaettigt — das Motiv bringt sein Licht schon mit, der Verlauf
uebernimmt die Stimmung. Kein Sepia, das wuerde gegen das Hellblau arbeiten. */
.hero--dark.is-light-phase .hero__media img{object-position:58% 50%;
filter:saturate(.9) brightness(1.02) contrast(1.02)}
/* Overlay aus Weiss und Hellblau. Zwei Ebenen mit verschiedenen Achsen:
Weiss kommt diagonal von links oben und traegt die Wortmarke, Hellblau
legt sich oben und unten an die Kante und nimmt den Ton des Wassers auf. */
.hero--dark .hero__wash{
background:
linear-gradient(112deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,.38) 34%,rgba(255,255,255,.04) 64%,rgba(255,255,255,0) 100%),
linear-gradient(168deg,rgba(198,220,233,.62) 0%,rgba(198,220,233,.10) 36%,rgba(198,220,233,.30) 70%,rgba(198,220,233,.72) 100%)}
.hero--dark.is-light-phase .hero__wordmark{color:var(--ns-ink)}
/* Claim und Scroll-Hinweis stehen ueber Wasser und Pool — Warm Grey kam dort
auf 4,0:1 bzw. 3,9:1. Charcoal haelt 8,6:1 und 6,5:1, ohne dass der Verlauf
staerker werden muss und das Bild verwaescht. */
.hero--dark.is-light-phase .hero__claim,
.hero--dark.is-light-phase .hero__scroll{color:var(--ns-charcoal)}
@media (max-width:900px){
.hero--dark.is-light-phase .hero__media img{object-position:50% 28%}
/* Hochformat: der Text sitzt unten, also traegt ihn hier das Weiss von unten.
Das Hellblau bleibt als Kante oben und ganz unten. */
.hero--dark .hero__wash{background:
linear-gradient(180deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.44) 70%,rgba(255,255,255,.82) 100%),
linear-gradient(180deg,rgba(198,220,233,.46) 0%,rgba(198,220,233,0) 28%,rgba(198,220,233,.34) 100%)}
}
/* ==========================================================================
FOUNDER-STORY — zweite Fassung (temporaer, Vergleichsfassung)
Zwei Fassungen der Geschichte liegen parallel im Markup von selma.html,
sichtbar ist immer genau eine. Die Wahl haengt an :root[data-story], das ein
Inline-Skript im setzt. Eigener Schluessel, damit die Schalter der
Start- und der Day-Seite unberuehrt bleiben.
Wie beim Day-Schalter wird die ANDERE Fassung ausgeblendet, nicht die aktive
eingeblendet — so behaelt die sichtbare ihren eigenen display-Wert.
Beim Aufraeumen: diesen Block, die verworfene in selma.html, den
Schalter am Seitenende, das Inline-Skript und den JS-Block in main.js.
========================================================================== */
:root[data-story="alt"] [data-story-variant]:not([data-story-variant~="alt"]),
:root[data-story="neu"] [data-story-variant]:not([data-story-variant~="neu"]){display:none}
/* Zwischenueberschriften der langen Fassung. Eine Stufe unter der Seiten-H1,
damit die Gliederung traegt, ohne mit dem Hero zu konkurrieren. */
.feature__head{font-family:var(--font-display);font-weight:400;
font-size:clamp(1.9rem,3vw,2.8rem);line-height:1.08;letter-spacing:-.01em;
margin:0 0 var(--s-4)}
/* Der zweite Teil beginnt spuerbar neu — sonst laufen die beiden Kapitel
ineinander. */
.feature__col--zweiter{margin-top:var(--s-7)}
/* ==========================================================================
SILENCE DAY — zweiter Einstieg (temporaer, Vergleichsfassung)
Zwei Fassungen liegen parallel im Markup von day.html, sichtbar ist immer
genau eine. Die Wahl haengt an :root[data-dayhero], das ein Inline-Skript
im setzt. Eigener Schluessel, damit sich der Schalter nicht mit dem
der Startseite (data-hero) ins Gehege kommt.
Beim Aufraeumen: diesen Block, die zweite und die .villa-lead in
day.html, das Inline-Skript und den JS-Block in main.js entfernen.
========================================================================== */
/* Ausgeblendet wird die jeweils andere Fassung, nicht die aktive eingeblendet:
.hero-typo bringt display:grid mit und steht spaeter in der Datei. Ein
schlichtes [data-day-variant]{display:none} haette dieselbe Spezifitaet und
waere unterlegen — beide Fassungen standen dann uebereinander. Mit dem
:root-Praefix liegt die Ausblendung bei (0,2,0) und gewinnt, waehrend die
sichtbare Fassung ihren eigenen display-Wert behaelt. */
/* Drei Fassungen. Das Attribut ist mehrwertig ("bild typo" = in A und B),
deshalb der Wortvergleich ~= statt des exakten Vergleichs. */
:root[data-dayhero="bild"] [data-day-variant]:not([data-day-variant~="bild"]),
:root[data-dayhero="typo"] [data-day-variant]:not([data-day-variant~="typo"]),
:root[data-dayhero="retreat"] [data-day-variant]:not([data-day-variant~="retreat"]){display:none}
/* Der Einstieg traegt kein Bild — also traegt ihn die Typografie. Kein
Vollbild: 82svh lassen die naechste Sektion angeschnitten stehen, das
nimmt der weissen Flaeche das Plakathafte. */
.hero-typo{background:var(--ns-white);color:var(--ns-ink);
min-height:78svh;display:grid;align-content:center;
padding-block:calc(var(--margin) + 5.5rem) calc(var(--chapter-gap) * .62)}
.hero-typo__in{display:grid;justify-items:center;text-align:center;gap:var(--s-5);
max-width:64rem;margin-inline:auto}
/* Eine Stufe unter der Bild-Hero (display-xl): ohne Foto dahinter wirkt
derselbe Grad zu laut, und die zwei Zeilen muessen mittig sauber stehen. */
.hero-typo__title{margin:0;font-family:var(--font-display);font-weight:400;
font-size:clamp(2.8rem,7.4vw,6.4rem);line-height:.98;letter-spacing:-.015em;
color:var(--ns-ink)}
.hero-typo__title em{font-style:italic}
.hero-typo__lead{margin:0;max-width:40rem;color:var(--fg-soft);
font-size:var(--t-lead);line-height:1.55;text-wrap:pretty}
.hero-typo__cta{margin-top:var(--s-3)}
@media (max-width:700px){
.hero-typo{min-height:auto;padding-block:calc(var(--margin) + 5rem) calc(var(--chapter-gap) * .6)}
.hero-typo__in{gap:var(--s-4)}
}
/* Der Ort, breit: nur in Fassung B, wo das Motiv nicht schon oben steht. */
.villa-lead{margin:0 0 var(--s-6);display:grid;gap:var(--s-3)}
.villa-lead>.media{display:block}
.villa-lead img{width:100%;height:100%;object-fit:cover}
/* ==========================================================================
SILENCE DAY — Fassung C „Retreat" (05.09.2026)
Bild fuehrt, Text folgt, das Programm steht am Ende.
========================================================================== */
/* Hero C: helles Motiv, Typografie in Ink. Schleier aus Weiss statt Schwarz:
Weiss kommt diagonal von links oben und traegt den Satz, rechts bleibt das
Motiv frei. Die Nav wird ueber
data-chapter="light" dunkel; das loest zugleich den 3,4:1-Befund am "Menue". */
/* Ink-Typografie braucht hellen Grund: links liegt nach der Spiegelung das
dunkle Laub, gemessen 1,96:1 unter dem Aufmacher. Das Weiss links ist deshalb
kraeftig (.94) und laeuft erst bei 60 % aus — die linke Drittelflaeche wird
ein weiches Feld, die Figur rechts bleibt frei. */
.page-hero--day::before{background:
linear-gradient(112deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.82) 30%,rgba(255,255,255,.40) 58%,rgba(255,255,255,0) 100%),
linear-gradient(180deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,0) 24%,rgba(255,255,255,0) 58%,rgba(255,255,255,.34) 100%)}
/* Der Kopf des Motivs ist gespiegelt: die Figur sitzt rechts und blickt zum
Satz, statt unter ihm zu stehen. Der Verlauf von oben traegt die Navigation. */
.page-hero--day .label{color:var(--eyebrow)}
.page-hero--day .lead{color:var(--ns-charcoal)}
@media (max-width:900px){
/* Hochformat: der Satz sitzt unten, das Weiss kommt von dort. */
.page-hero--day::before{background:
linear-gradient(180deg,rgba(255,255,255,.78) 0%,rgba(255,255,255,0) 18%),
linear-gradient(180deg,rgba(255,255,255,0) 26%,rgba(255,255,255,.74) 48%,rgba(255,255,255,.96) 100%)}
/* Die Kennzeile steht mobil bei ~52 % Hoehe auf dem Kleid — gemessen 3,86:1;
der Anstieg beginnt deshalb frueher (26 %) und ist bei 48 % schon bei .74. */
}
/* Ankommen: grosses Hochformat links, kleines Quadrat rechts oben, darunter
wenig Text. Der Ort ist das kleine Bild — Nebensache, nicht Hauptsache. */
.arrive{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
gap:clamp(2rem,6vw,5rem);align-items:start}
.arrive figure{margin:0}
.arrive .media{display:block}
.arrive .media img{width:100%;height:100%;object-fit:cover}
.arrive__big .media{aspect-ratio:3/4}
.arrive__side{display:grid;gap:clamp(2rem,5vw,3.5rem);padding-top:clamp(0rem,6vw,5rem)}
.arrive__small{width:min(18rem,68%)}
.arrive__small .media{aspect-ratio:1/1}
.arrive__cap{margin-top:var(--s-2);font-size:var(--t-label);letter-spacing:var(--track-label);
text-transform:uppercase;color:var(--fg-muted)}
.arrive__text{display:grid;gap:var(--s-4);max-width:var(--measure-wide)}
@media (max-width:900px){
.arrive{grid-template-columns:1fr;gap:var(--s-5)}
.arrive__side{padding-top:0}
.arrive__small{width:min(13rem,52%)}
}
/* Zitat: eine Sektion, ein Satz, viel Luft. Grund Weiss (chapter--paper) —
das Grau war kalt fuer einen Satz ueber Energie und Waerme. */
.quote-still{padding-block:clamp(5rem,11vw,9rem);display:grid;align-content:center;justify-items:center;
text-align:center;gap:var(--s-5)}
.quote-still__text{margin:0;font-family:var(--font-display);font-weight:400;
font-size:clamp(1.9rem,4.1vw,3.8rem);line-height:1.16;letter-spacing:-.01em;
/* 26ch ergab fuenf Zeilen — fuer einen Satz zu viel Stapel. Gemessen bei
1400 px: 28-32ch = vier Zeilen, ab 34ch = drei. Weil ch mit der Schrift
mitwaechst, bleibt die Zeichenzahl pro Zeile ueber alle Breiten gleich. */
max-width:34ch;text-wrap:balance;color:var(--fg)}
.quote-still__text em{font-style:italic}
@media (max-width:700px){.quote-still{padding-block:calc(var(--chapter-gap) * .5)}
.quote-still__text{max-width:none;font-size:clamp(1.6rem,7vw,2.2rem)}}
/* Wie Stille wirken kann — Scroll-Buehne (Fassung C).
Grundzustand = Fallback: Titel + Bild oben, acht Themen als Haarlinien-Zeilen.
.is-live (nur JS, nur ab 900px und ohne Reduced Motion) macht daraus die
Buehne: Wrapper bekommt Trackhoehe, die Stage klebt, rechts liegen die acht
Themen uebereinander (grid-area:1/1 wie bei den Testimonials) und nur das
aktive ist sichtbar. Crossfade = Fade + 10px, die zwei Gesten der Seite. */
.wirk__stage{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--col-gap);row-gap:var(--s-6)}
.wirk__side{grid-column:1/6;display:grid;gap:var(--s-4);align-content:start}
.wirk__fig{margin:0}
.wirk__fig .media{display:block;aspect-ratio:4/3} /* Originalformat der Aufnahme */
.wirk__fig img{width:100%;height:100%;object-fit:cover}
.wirk__list{grid-column:7/13;display:grid}
.wirk__item{display:grid;grid-template-columns:minmax(0,1fr);row-gap:var(--s-2);
padding-block:var(--s-4);align-items:start}
.wirk__t{margin:0;font-family:var(--font-display);font-weight:400;
font-size:clamp(1.35rem,1.7vw,1.7rem);line-height:1.15;text-wrap:balance}
.wirk__p{margin:0;color:var(--fg-soft);font-size:var(--t-small);line-height:1.6;max-width:34ch}
@media (max-width:900px){
.wirk__side,.wirk__list{grid-column:1/-1}
/* Unterhalb 900px laeuft die Buehne nicht (JS-Grenze in main.js), und uebrig
blieben acht fast gleiche Absaetze in 21px Titel und 14px Grau — auf dem
Telefon die langweiligste Stelle der Seite. Drei Griffe, alle aus der
Formensprache der Seite und ohne eine Zeile Markup:
die Zeile wird zur Schlagzeile (21,6 -> bis 38px), der Fliesstext waechst
auf Lesegroesse, und eine Ziffer im Ton der Kapitel-Label gibt Rhythmus und
zeigt, wo in den acht Themen man steht. Die Ziffer kommt aus einem
CSS-Zaehler, steht also ausserhalb der Ueberschrift.
Die Obergrenze 2.4rem entspricht der der Buehne (.wirk.is-live .wirk__t) —
so springt der Grad an der Breakpoint-Kante nicht. */
.wirk__list{counter-reset:wirk}
.wirk__item{counter-increment:wirk;padding-block:var(--s-5);row-gap:var(--s-2)}
/* Auf dem Desktop trennt der Abstand allein; gestapelt auf schmalem Schirm
braucht die Reihe eine Kante, sonst zerfliesst sie. */
.wirk__item + .wirk__item{border-top:1px solid var(--hairline)}
.wirk__item::before{content:counter(wirk,decimal-leading-zero);
font-family:var(--font-sans);font-size:var(--t-label);
letter-spacing:var(--track-label);color:var(--eyebrow)}
.wirk__t{font-size:clamp(1.75rem,7.5vw,2.4rem);line-height:1.05;letter-spacing:-.01em}
.wirk__p{font-size:var(--t-body);line-height:1.65;max-width:38ch;margin-top:var(--s-2)}
/* Der Schleier. Er klebt am unteren Fensterrand, solange die Liste im Bild
ist, und geht nach oben in nichts aus. Der Text scrollt von unten durch ihn
hindurch — dadurch faehrt er aus dem Verlauf herein, statt an einer Schwelle
zu erscheinen. Der negative Aussenabstand nimmt ihn wieder aus dem Fluss,
sonst haenge unter der Liste eine leere Flaeche.
display:block auf der Liste, weil sticky mit negativem Abstand im Raster
schwerer vorherzusagen ist — die Liste hat mobil ohnehin nur ein Kind. */
.wirk__list{display:block;position:relative}
.wirk__veil{display:block;position:sticky;bottom:0;z-index:1;pointer-events:none;
height:46vh;margin-top:-46vh;
background:linear-gradient(to top,var(--bg) 0,var(--bg) 8%,transparent 100%)}
}
/* Ab der Buehne traegt deren eigene Maske den Verlauf (siehe .wirk.is-live
.wirk__list weiter unten) — hier waere der Schleier doppelt. Als eigene
Medienabfrage, nicht als Grundregel: Medienabfragen erhoehen die Spezifitaet
nicht, eine spaetere Grundregel gleicher Staerke haette den Schleier auch
mobil abgeschaltet. Die Grenze 900px ist dieselbe, ab der main.js .is-live
setzt — bei genau 900px gewinnt diese Regel und damit die Buehne. */
@media (min-width:900px){.wirk__veil{display:none}}
/* Fenster: die Liste bleibt eine Liste, das Fenster zeigt zwei Bloecke. JS misst
Listen- und Fensterhoehe, setzt die Trackhoehe (--wirk-weg) und schiebt
.wirk__inner 1:1 mit dem Scrollweg — ohne Transition, damit das Tempo dem
Nutzer gehoert. Weiche Kanten oben/unten ueber eine Maske. */
.wirk.is-live{padding-block:0;min-height:calc(100svh + var(--wirk-weg,0px))}
.wirk.is-live .wirk__stage{position:sticky;top:0;height:100svh;align-content:center;align-items:center}
.wirk.is-live .wirk__side{align-content:center}
/* Das Motiv bleibt 4:5 und wird nicht beschnitten: die Hoehe ist gedeckelt,
die Breite folgt aus dem Seitenverhaeltnis (vorher lief der Kasten quer und
schnitt den Kopf ab). */
.wirk.is-live .wirk__fig .media{aspect-ratio:4/3;height:auto}
.wirk.is-live .wirk__list{overflow:hidden;height:var(--wirk-fenster,60svh);
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);
mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%)}
.wirk.is-live .wirk__inner{will-change:transform}
.wirk.is-live .wirk__item{padding-block:var(--s-5)} /* ohne Linien und Zeichen: der Abstand trennt */
.wirk.is-live .wirk__t{font-size:clamp(1.7rem,2.4vw,2.4rem);line-height:1.1}
.wirk.is-live .wirk__p{font-size:var(--t-lead);line-height:1.55}
/* Der Tag als drei Pfeiler: Zeitspanne als Label unter dem Titel. */
/* Methodik (selma.html): feste Spaltenzahl. Das auto-fit von .pillars
(minmax 200px) wuerde auf breiten Schirmen sechs schmale Spalten nebeneinander
erzeugen. Titel und Text eine Stufe ruhiger als bei den Tages-Pfeilern, weil
hier sechs statt drei Bloecke stehen. */
.pillars--method{grid-template-columns:repeat(3,minmax(0,1fr));
gap:var(--s-7) var(--col-gap);margin-top:var(--s-7)}
/* Ziffer auf eigener Zeile statt hinter dem Titel. Bei den drei Tages-Pfeilern
auf retreat.html liegt die Geisterzahl bewusst hinter der Ueberschrift; bei
sechs Feldern nebeneinander ueberlagerte sie den Titel und die Reihe las sich
unruhig. Hier steht sie im Fluss, der Titel beginnt darunter — und weil sie
dadurch fuer sich stehen muss, traegt sie etwas mehr Deckkraft.
Alles unter .pillars--method: retreat.html bleibt unberuehrt. */
.pillars--method .pillar{padding-top:0}
.pillars--method .pillar__n{position:static;display:block;
font-size:clamp(2.6rem,4vw,3.6rem);line-height:.85;opacity:.18;
margin-bottom:var(--s-3)}
.pillars--method .pillar__t{display:block;font-size:clamp(1.75rem,2.6vw,2.5rem);line-height:1.05}
.pillars--method .pillar p{margin-top:var(--s-3);font-size:var(--t-body);max-width:34ch}
/* 1080 statt 900: bei 950px waren drei Spalten nur noch ~250px breit, der Text
lief auf fuenf Zeilen und die laengeren Titel wurden eng. */
@media (max-width:1080px){
.pillars--method{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-6) var(--col-gap)}
}
@media (max-width:600px){.pillars--method{grid-template-columns:1fr}}
.pillar__time{display:block;margin-top:var(--s-2);font-size:var(--t-label);
letter-spacing:var(--track-label);text-transform:uppercase;color:var(--fg-muted)}
/* Foto-Trenner Wald (day.html): kein Flaechen-Overlay — das Licht durch die
Staemme bleibt frei. Nur ein Verlauf von links, der unter dem Satz liegt und
nach rechts auslaeuft; dafuer ist der Satz schmaler gesetzt (4 Zeilen), damit
er nicht bis in den hellen Weg hineinreicht. */
.full-image--wald::before{background:
linear-gradient(100deg,rgba(var(--scrim),.74) 0%,rgba(var(--scrim),.52) 30%,rgba(var(--scrim),.16) 52%,rgba(var(--scrim),0) 64%)}
.full-image--wald .full-image__text p{max-width:17ch;font-size:clamp(2.4rem,5.6vw,5.4rem)}
@media (max-width:900px){
.full-image--wald::before{background:linear-gradient(180deg,rgba(var(--scrim),0) 34%,rgba(var(--scrim),.58) 70%,rgba(var(--scrim),.78) 100%)}
.full-image--wald .full-image__text p{max-width:none}
}
/* Der Schalter selbst gehoert nicht zur Gestaltung — bewusst klein, neutral
und ausserhalb des Rasters, damit er die Wirkung nicht mitbeurteilt. */
.hero-switch{position:fixed;right:clamp(1rem,2.4vw,1.8rem);bottom:clamp(1rem,2.4vw,1.8rem);
z-index:calc(var(--z-nav) + 2);display:inline-flex;align-items:center;gap:.55rem;
padding:.6rem .95rem;border:1px solid rgba(240,237,231,.24);border-radius:999px;
background:rgba(17,17,16,.82);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
color:var(--ns-bone);font-family:var(--font-sans);font-size:.6875rem;font-weight:400;
letter-spacing:.14em;text-transform:uppercase;line-height:1;cursor:pointer;
transition:background var(--dur-hover),border-color var(--dur-hover)}
.hero-switch:hover{background:rgba(17,17,16,.94);border-color:rgba(240,237,231,.4)}
.hero-switch__dot{width:7px;height:7px;border-radius:50%;background:var(--ns-stone);
transition:background var(--dur-hover)}
@media (max-width:700px){.hero-switch{font-size:.625rem;padding:.5rem .8rem;letter-spacing:.1em}}
/* Die dekorativen Anfuehrungszeichen der Story. Die Farbe stand vorher inline
im Markup — dort liess sie sich von keiner Fassung ueberschreiben. */
.mark-quiet{color:var(--ns-stone)}
/* Auf dem Handy ragen die Zeichen ueber den Rand hinaus und machen die Seite
waagrecht scrollbar — dort entfallen sie. */
@media (max-width:700px){.mark-quiet{display:none}}
/* ==========================================================================
LIGHT — helle Seitenfassung
Die helle Fassung beschraenkt sich bewusst auf zwei Dinge: den hellen
Header (Block darueber) und die Anfuehrungszeichen dieser einen Sektion.
Alles andere rendert exakt wie die dunkle Fassung — der frueher hier
stehende Umbau von Gruenden, Bildschleiern und Textfarben ist entfallen.
========================================================================== */
/* Statt Warmgrau ein Dunkelgrau. Bei 6,8:1 gegen Weiss stehen die Zeichen
deutlich kraeftiger im Bild als die 2,2:1 der dunklen Fassung — das ist
gewollt, sie sollen hier gesehen werden. */
/* ==========================================================================
HERO — Wellen-Uebergang (temporaer, nur die dunkle Fassung)
Das Canvas liegt ueber dem Bild und unter dem Schleier; die Malreihenfolge
ergibt sich von selbst aus der Dokumentreihenfolge (img → canvas → wash →
::after), .hero__content steht mit z-index:2 weiterhin darueber.
Beim Aufraeumen: diesen Block, js/hero-wave.js, das