/* Ueberschriften tragen die Struktur, nicht die Gestaltung: die Klassen am
   Tag bestimmen weiterhin alles. Ohne diesen Reset brechen die Browser-
   Standardwerte fuer Groesse, Gewicht und Aussenabstand das Layout auf.   */
h1,h2,h3,h4{font-size:inherit;font-weight:inherit;line-height:inherit;
  letter-spacing:inherit;margin:0}
.legal .legal-h1{font-size:var(--t4);line-height:1.55;max-width:30em;
  margin-bottom:clamp(30px,3.2vw,46px)}

/* ═══ Schrift ══════════════════════════════════════════════════════════════
   Inter liegt im Projekt, nicht bei Google. Ein Aufruf an fonts.gstatic.com
   uebertraegt die IP des Besuchers in die USA — das LG Muenchen hat das 2022
   als DSGVO-Verstoss gewertet. Selbst ausgeliefert entfaellt die Uebertragung,
   und die Seite laedt schneller.                                            */
@font-face{font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;
  src:url('font/inter-300.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url('font/inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
  src:url('font/inter-500.woff2') format('woff2')}

/* Atha — rohes Layout-Gerüst
   Layout: eine linke Kante für alles (Spine), 12 Spalten, Bilder brechen randabfallend aus.
   Typo: Inter, eine Stärke (400), Versal-Statements in 300. Maße aus studio-ato.com (Raster, Skala)
   und jasminsparrow.com (Bildunterschriften, Links, Zeilen im Bild, asymmetrische Bildlagen). */

:root{
  --bg:#F2F3EF;          /* Grund — einen Tick kühler und grüner als Ato (#F4F4F1), kein Gelb */
  --fg:#121413;          /* Schrift, derselbe Ton wie das dunkle Feld */
  --slate:#9FAEB8;       /* Graublau: Cookie-Leiste, Hinweise, dritte Haut */
  --mute:#6E6D68;        /* Nebentext, Ratio-Tags */
  --line:#CFCEC7;        /* Haarlinien */
  --ph:#DEDDD7;          /* Bild-Platzhalter */
  --ph-d:#AEADA5;        /* Bild-Platzhalter dunkler (Hero, Galerie) */
  --on-img:#FFFFFF;      /* Zeilen im Bild */
  --card:#FFFFFF;        /* Plan-Karten */
  --dark:#121413;        /* der Raum: dunkles Feld, auf dem das Produkt liegt */

  --font:'Inter',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;

  --m:clamp(24px,3vw,44px);        /* Seitenrand — Ato 43px bei 1440 */
  --gap:clamp(16px,1.7vw,24px);    /* Spaltenabstand */
  --head:clamp(72px,8vw,112px);    /* Höhe der fixen Kopfzeile — Ato 112 */

  /* Skala — Ato: 40/56 · 24/32 · 16/22 · 14/21 · 12/14 ; Sparrow: 33 Versal light · 11 Meta */
  --t1:clamp(28px,2.8vw,40px);
  --t2:clamp(20px,1.7vw,24px);
  --t3:16px;
  --t4:14px;
  --t5:12px;
  --t6:11px;
  --caps:clamp(26px,2.3vw,33px);
  --caps-xl:clamp(32px,3.4vw,48px);

  /* Abstände: ein Takt pro Abschnitt, nur oben — nie oben und unten, sonst verdoppeln sich die Löcher */
  --step:clamp(40px,5vw,72px);     /* dicht: gehört zum Vorigen */
  --sec:clamp(72px,9vw,128px);     /* neuer Gedanke */
  --sec-l:clamp(112px,14vw,192px); /* Themenwechsel */

  color-scheme:light;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg);color:var(--fg);
  font:400 var(--t3)/1.4 var(--font);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%}
a{color:inherit}
p,h1,h2,h3{margin:0;font-weight:400}

/* Rand */
.wrap{
  padding-left:max(var(--m),env(safe-area-inset-left,0px));
  padding-right:max(var(--m),env(safe-area-inset-right,0px));
}

/* Kopfzeile — liegt auf dem ersten Bild, Signatur links, Navigation rechts in Title Case (14) */
.hd{
  position:absolute;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:10;
  display:flex;justify-content:space-between;align-items:center;
  padding-block:clamp(16px,2vw,26px);
}
.hd.onpic{color:var(--on-img)}
.logo{display:block;text-decoration:none;color:inherit}
.logo svg{height:clamp(23px,2.2vw,31px);width:auto;display:block;fill:currentColor}
.nav{display:flex;gap:clamp(15px,1.9vw,26px);font-size:var(--t4);line-height:1.1;letter-spacing:.01em}
.nav a{text-decoration:none}
.nav a[aria-current]{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}

/* Hero — randabfallend, eine Zeile im Bild (Sparrow) oder Titel zentriert (Ato) */
.hero{position:relative;height:78vh;min-height:520px;background:var(--ph-d);overflow:hidden}
.hero img,.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero .shade{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.26),rgba(0,0,0,0) 28%,rgba(0,0,0,0) 72%,rgba(0,0,0,.22))}
.ph:has(> img),.ph.dark{--x:1}
.ph:has(> img)::after,.ph.dark::after{display:none}
.ph:has(> img){background:transparent}
.hero.short{height:64vh}  /* kürzer: der Hook steht im ersten Schirm, das Bild ist angeschnitten */
.inimg{
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  font-size:var(--t5);letter-spacing:.1em;text-transform:uppercase;color:var(--on-img);
}
.inimg.t1{font-size:var(--t1);letter-spacing:-.0125em;text-transform:none;line-height:1.4}
/* Etikett im Bild, unten links — gesetzt wie die Modul-Etiketten (14, Versal) */
.inimg.bl{display:flex;align-items:flex-end;justify-content:flex-start;text-align:left;padding:0 0 16px 18px;font-size:var(--t4);letter-spacing:.02em;line-height:1.5;z-index:2}
.ph:has(.bl)::before{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;z-index:1;background:linear-gradient(to top,rgba(0,0,0,.28),rgba(0,0,0,0))}
.hero .inimg{z-index:2}
/* Zeilen im Hero sitzen unten links, nicht mittig: das Motiv bleibt frei (Sparrow) */
.hero .inimg.bl{padding:0 var(--m) clamp(22px,2.6vw,36px);font-size:var(--t4);letter-spacing:.06em}
.hero .inimg.t1.bl{font-size:var(--t1);letter-spacing:-.024em;text-transform:none;line-height:1.2;font-weight:300}
.hero .inimg.t2.bl{font-size:var(--t2);letter-spacing:-.02em;text-transform:none;line-height:1.3;font-weight:300}
.hero:has(.bl)::before{display:none}
/* helles Motiv: Zeilen in Tinte, kein Schleier */
.hero.light .inimg,.hero.light .corner{color:var(--fg)}
.hero.light .shade{display:none}
.hero.light img{object-position:50% 50%}
/* helles Motiv: Zeilen in Tinte, keine Verlaufsschicht */
.hero.light .inimg,.hero.light .corner{color:var(--fg)}
.hero.light .shade{display:none}
.corner{position:absolute;top:calc(var(--head) + 4px);right:var(--m);font-size:var(--t4);color:var(--on-img)}

[id]{scroll-margin-top:24px}

/* Raster */
.g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:var(--gap)}
.c2{grid-column-end:span 2}.c3{grid-column-end:span 3}.c4{grid-column-end:span 4}.c5{grid-column-end:span 5}.c6{grid-column-end:span 6}
.c7{grid-column-end:span 7}.c8{grid-column-end:span 8}.c9{grid-column-end:span 9}.c10{grid-column-end:span 10}.c12{grid-column:1/-1}
.s2{grid-column-start:2}.s4{grid-column-start:4}.s5{grid-column-start:5}.s6{grid-column-start:6}.s7{grid-column-start:7}.s8{grid-column-start:8}.s9{grid-column-start:9}.s10{grid-column-start:10}
.g > *{min-width:0}

/* Abschnitte */
.sec{padding-top:var(--sec)}
.sec-l{padding-top:var(--sec-l)}
.sec-top{padding-top:calc(var(--head) + var(--sec))}
.dos.g{padding-top:0}
.docpage .sec-top{padding-top:clamp(40px,4.6vw,72px)}
.dos.g{padding-top:0}
.docpage .sec-top{padding-top:clamp(40px,4.6vw,72px)}
.dos.g{padding-top:0}
.docpage .sec-top{padding-top:clamp(40px,4.6vw,72px)}
.pt0{padding-top:var(--step)}      /* dicht an das Vorige */
.pb0{padding-bottom:0}
.hero + .sec,.filmband + .sec{padding-top:clamp(56px,7vw,96px)}   /* nach dem Hero: etwas enger, der Text gehört zum Bild */

/* Skala */
/* Alles über Body in 300; Inter läuft über die opsz-Achse (Display-Schnitt ab ~32 px) */
.t1{font-size:var(--t1);font-weight:300;line-height:1.22;letter-spacing:-.024em;text-wrap:balance}
.t2{font-size:var(--t2);font-weight:300;line-height:1.3;letter-spacing:-.02em;text-wrap:balance}
.t3{font-size:var(--t3);line-height:1.4}
.t4{font-size:var(--t4);line-height:1.5}
.t5{font-size:var(--t5);line-height:1.35}
.lbl{font-size:var(--t4);line-height:1.5;text-transform:uppercase;letter-spacing:.02em}
.mute{color:var(--mute)}
.stack > * + *{margin-top:1.4em}
/* Nach einer 40px-Zeile sind 1,4em des Bodys nur 22px — der Sprung liest dann
   gedraengt statt gesetzt. Die Luft traegt den Sprung, nicht eine Zwischengroesse. */
/* Nicht die Zeile ist zu gross, der Absatz darunter ist zu klein fuer die
   Breite, in der er steht: 16px auf 77% der Headline-Breite liest als
   Bildunterschrift. Eine Vorlaufgroesse faengt den Sprung auf.               */
.stack > .t1 + p{margin-top:1.5em;font-size:clamp(17px,1.35vw,19px);
  line-height:1.5;max-width:34em}
.stack-s > * + *{margin-top:.8em}

/* Versal-Statement mit Etikett in der ersten Zeile (Sparrow) */
.caps{font-size:var(--caps);line-height:1.3;font-weight:300;text-transform:uppercase;letter-spacing:.01em}
.caps-xl{font-size:var(--caps-xl);line-height:1.05;font-weight:300;text-transform:uppercase;letter-spacing:.01em;text-wrap:balance}
.lbl-in{
  display:inline-block;vertical-align:top;
  font-size:var(--t5);font-weight:400;line-height:1.35;letter-spacing:.01em;
  margin-right:1.2em;margin-top:.35em;
}

/* Links */
/* Links: eine Form — unterstrichen, nie mit Pfeil. Allein stehend zwei Zeilen (Verb / Ziel), im Text das Wort selbst. */
.stack a:not(.link2):not(.pill),.read a:not(.link2),.list a{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.more{display:inline-block;font-size:var(--t6);line-height:1.36;white-space:nowrap;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px} /* Sparrow: Read More */
.link2{display:inline-block;font-size:var(--t5);line-height:1.35;text-decoration:none}          /* Sparrow: View / Journal */
.link2 u{display:block;text-underline-offset:5px;text-decoration-thickness:1px}
.act{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}   /* Handlung: eine Zeile, Fließtextgröße */

/* Bild-Platzhalter */
.ph{position:relative;background:var(--ph);max-width:100%;overflow:hidden}
.ph::after{content:attr(data-r);position:absolute;left:10px;bottom:8px;font-size:var(--t6);color:var(--mute);letter-spacing:.02em}
.r23{aspect-ratio:2/3}.r34{aspect-ratio:3/4}.r45{aspect-ratio:4/5}.r1{aspect-ratio:1/1}.r43{aspect-ratio:4/3}.r169{aspect-ratio:16/9}.r21{aspect-ratio:2/1}.r32{aspect-ratio:3/2}
.ph .inimg{position:absolute}
.ph.r21,.ph.r169{background:var(--ph-d)}

/* Bildunterschriften (Sparrow): zwei Zeilen, 12px, Versal + Regular */
.cap{font-size:var(--t5);line-height:1.35;margin-top:10px}
.cap b{display:block;font-weight:400;text-transform:uppercase;letter-spacing:.01em}

/* Meta-Unterschrift (Sparrow Journal): Datum im schmalen Slot, Titel hängt rechts */
.meta{display:grid;grid-template-columns:46px minmax(0,1fr);column-gap:6px;font-size:var(--t6);line-height:1.36;margin-top:18px}
.meta .h{font-size:var(--t2);line-height:1.25;font-weight:300;text-transform:uppercase;letter-spacing:.01em}
.meta .more{margin-top:40px;grid-column:1}

/* Module-Reihe (Ato): Hochformat 2:3, Etikett, Text, Pfeil */
.mods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,5.6vw,76px)}
.mods.m3{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,7vw,100px)}
.mod .link2{margin-top:4px}
.mod .lbl{margin-top:36px}
.mod p{margin-top:12px}
.mod .lbl{margin-top:28px}

/* Haarlinien-Liste: Etikett links, Inhalt rechts */
.list .row{display:grid;grid-template-columns:minmax(110px,2fr) 7fr;gap:var(--gap);padding-block:14px;border-top:1px solid var(--line)}
.list .row:last-child{border-bottom:1px solid var(--line)}
.list .row .k{font-size:var(--t5);line-height:1.6;text-transform:uppercase;letter-spacing:.02em}

/* Verzeichnis (Home, Anker Services): wie die Listen im Fuß, nur in Body-Größe — Name links als Link, wenige Worte rechts, keine Linien */
.toc{display:grid;grid-template-columns:minmax(150px,2fr) 5fr;column-gap:var(--gap);row-gap:.5em;font-size:var(--t3);line-height:1.4}
.toc a{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.toc span{min-width:0}

/* Service-Blöcke (Home): Bild links, Text rechts auf der Bildmitte; gleicher Abstand untereinander */
.svc{align-items:center}
.svc + .svc{margin-top:var(--sec)}
.svc .lbl{margin-bottom:-.4em}

/* Referenzen als Namen */
.names{display:flex;flex-wrap:wrap;gap:.6em clamp(24px,4vw,64px);font-size:var(--t4);line-height:1.5}

/* Fußzeile (Ato): drei Spalten, 12px, Versal-Etiketten */
.ft{border-top:1px solid var(--line);margin-top:var(--sec-l);padding-block:clamp(40px,5vw,64px) clamp(40px,6vw,80px)}
.ft .cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.ft{font-size:var(--t5);line-height:1.2}
/* Die Abstaende tragen die Gliederung: Marke und ihr Block eng, Block zu Block
   weit. Vorher lagen 1,2em und 1,6em so nah beieinander, dass kein Auge sie als
   zwei Ebenen las — daher das Zerfaserte.                                     */
.ft .k{text-transform:uppercase;letter-spacing:.02em;margin-bottom:.6em}
.ft p{margin:0 0 2.2em}
.ft .grp{margin-bottom:2.2em}
.ft .grp p{margin:0}
.ft a{text-decoration:none}

/* Typ C — die stille Seite (Atha, Contact): eine Spalte, sechs von zwölf, mittig.
   Zwischentitel in Body-Größe, eine Stufe fetter; keine Haarlinien, kein Bleed, ein Bild. */
.quiet .col{grid-column:5/span 4}
.hq{font-size:var(--t3);font-weight:500;line-height:1.4}
.quiet .stack > .hq{margin-top:2.8em}
.quiet .stack > .hq + p{margin-top:.45em}
.quiet .ph{margin-bottom:clamp(40px,5vw,64px)}

/* Menu — das Produkt als Objekt */
.dark{background:var(--dark);color:var(--on-img)}
.phone{--w:clamp(230px,22vw,300px);position:relative;width:var(--w);margin-inline:auto;
  border-radius:calc(var(--w) * .1133);background:#0A0806;padding:calc(var(--w) * .0233)}
.phone .scr{position:relative;overflow:hidden;border-radius:calc(var(--w) * .09);aspect-ratio:390/700;background:#1B1D1C}
.phone .scr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;opacity:0;transition:opacity .85s ease}
.phone .scr img.on{opacity:1}
.phone .scr.quick img{transition-duration:.45s}
.phone .tint{position:absolute;inset:0;mix-blend-mode:multiply;transition:background 1.4s ease;pointer-events:none}
.phone .scr.inv img{filter:invert(1) hue-rotate(180deg) brightness(.92)}   /* dunkle Haut: Papier wird dunkel, Schrift hell */
.phone.sm{--w:clamp(200px,17vw,240px)}
.phone.lg{--w:clamp(260px,25vw,350px)}
.phone.paper{--w:clamp(220px,20vw,290px);box-shadow:0 30px 60px -34px rgba(0,0,0,.45)}
.cards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--gap)}
.cards figure{margin:0}
.ph .phone{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.menu .item{padding-block:18px 20px;border-top:1px solid var(--line)}
.menu .item:last-child{border-bottom:1px solid var(--line)}
.menu .n{font-size:var(--t2);font-weight:300;letter-spacing:-.02em;line-height:1.3}
.menu .item p + p{margin-top:4px}
.strip{display:flex;gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.strip > *{flex:0 0 clamp(170px,18vw,240px);scroll-snap-align:start;margin:0}
.strip > .wide{flex-basis:clamp(260px,28vw,370px)}
.r57{aspect-ratio:105/148}.r8555{aspect-ratio:85/55}
/* Menu-Hero: mittig wie eine Produktseite. Kopf oben, darunter die Gruppe: Karte, Telefon davor, nach links versetzt. */
.hero-menu{padding-top:calc(var(--head) + clamp(24px,4vh,48px));padding-bottom:clamp(48px,6vw,96px);text-align:center}
.hm-head{max-width:760px;margin-inline:auto}
.hm-head .t1{margin-top:20px;text-wrap:balance}
.hm-head .pill{margin-top:clamp(28px,3.4vw,44px)}
.stage{display:flex;align-items:flex-end;justify-content:center;gap:clamp(24px,4vw,56px);margin:clamp(56px,7vw,96px) auto 0}
.stage .card{width:min(360px,52vw);flex:none}
.stage .phone.paper{position:relative;--w:clamp(180px,17vw,236px);width:var(--w);margin:0 0 6%;flex:none;
  border-radius:calc(var(--w) * .1133);padding:calc(var(--w) * .0233);
  box-shadow:0 40px 80px -36px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.06)}
.stage .phone.paper .scr{border-radius:calc(var(--w) * .09)}
/* Menu-Seite: eine Achse — alles mittig, Bilder laufen voll */
.colc{grid-column:4/span 6;text-align:center}
.colc p{text-wrap:balance}
.colc.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);max-width:460px;margin-inline:auto;width:100%}
.strip.bleed{margin-right:calc(-1 * var(--m));padding-right:var(--m);margin-top:clamp(36px,4vw,56px)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:start}
.two figure{margin:0}
.two .cap{text-align:center}

/* Hero: nur das eine Wort, hell, auf dem Feld */
.hero .inimg.now{display:flex;align-items:flex-end;justify-content:center;padding-bottom:clamp(40px,6vh,72px);font-family:"Newsreader",Georgia,serif;font-size:clamp(30px,3.2vw,46px);letter-spacing:0;text-transform:none;font-weight:300;color:var(--on-img)}
.hero.light .inimg.now{color:var(--on-img)}

/* Duo (Sparrow / V1): zwei Flächen zur Wahl, Etikett mittig, View */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.tile{position:relative;display:block;height:clamp(420px,72vh,760px);overflow:hidden;text-decoration:none;color:var(--on-img)}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile .veil{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(10,8,6,.12),rgba(10,8,6,.42) 45%,rgba(10,8,6,.42) 55%,rgba(10,8,6,.12))}
.tile .lab{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px}
.tile .lab .lbl{letter-spacing:.1em}
.tile .lab u{text-underline-offset:5px;text-decoration-thickness:1px}
.tile:hover{opacity:1}
.tile:hover .veil{background:linear-gradient(to bottom,rgba(10,8,6,.2),rgba(10,8,6,.5) 45%,rgba(10,8,6,.5) 55%,rgba(10,8,6,.2))}

/* Serie (Home): jede Zeile Bild und Text, Seite wechselt, Format nicht */
.row{align-items:center}
.row + .row{margin-top:var(--sec)}

/* Fakten als Stapel: Name halbfett, Zeile darunter — keine Linien */
.facts > .lbl{margin-bottom:1.2em}
.facts > .hq{margin-top:1.8em}
.facts > .hq + p{margin-top:.35em}
.facts > p + p:not(.hq){margin-top:.9em}
.cap1{font-size:var(--t5);line-height:1.4;color:var(--mute);margin-top:7px}

/* Das Telefon scrollt das echte Menü */
.scr.scrolling img.full{position:absolute;left:0;top:0;width:100%;height:auto;opacity:1;animation:menuscroll 42s linear infinite alternate}
@keyframes menuscroll{0%{transform:translateY(0)}6%{transform:translateY(0)}94%{transform:translateY(-87.4%)}100%{transform:translateY(-87.4%)}}
@media (prefers-reduced-motion:reduce){.scr.scrolling img.full{animation:none}}
.three-ph{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);max-width:640px;margin-inline:auto;width:100%}
.three-ph figure{margin:0}
.three-ph .phone.sm{--w:min(100%,180px)}
.three-ph .cap1{text-align:center}

/* Journal (Sparrow): asymmetrische Lagen */
.jl{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:clamp(64px,8vw,120px)}
.jl > *{min-width:0}

/* Mobil */
@media (max-width:760px){
  .hero{height:64vh;min-height:380px}
  .hero.short{height:52vh}
  .nav{font-size:var(--t4);gap:16px}
  .g > *,.jl > *{grid-column:1/-1}
  .mods,.mods.m3{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}
  .mod .lbl{margin-top:16px}
  .ft .cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(26px,6vw,38px) var(--gap)}
  .ft .cols > :first-child{grid-column:1/-1}
  .list .row{grid-template-columns:1fr;gap:4px}
  .corner{top:calc(var(--head) - 8px)}
  .quiet .col,.colc{grid-column:1/-1}
  .row .ph{order:-1}
  .three-ph{grid-template-columns:repeat(3,1fr);gap:8px}
  .three-ph .phone.sm{--w:100%}
  .duo{grid-template-columns:1fr}
  .tile{height:clamp(300px,46vh,420px)}
  .toc{grid-template-columns:1fr;row-gap:.2em}
  .toc span{margin-bottom:.8em;color:var(--mute)}
  .phone{--w:min(240px,62vw)}
  .phone.sm{--w:min(150px,40vw)}
  .phone.paper{--w:min(240px,64vw);margin-top:32px}
  .stage{gap:16px}
  .stage .card{width:52vw}
  .stage .phone.paper{--w:34vw}
  .cards{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (prefers-reduced-motion:no-preference){
  a{transition:opacity .15s}
  a:hover{opacity:.55}
}
a:focus-visible{outline:1px solid var(--fg);outline-offset:3px}

/* ——— Menu-Darstellung (Struktur aus theclass.com) ——— */

/* Pille: 32–34 px hoch, rund, dunkel; helle Variante in Karten */
.pill{display:inline-flex;align-items:center;gap:.5em;height:34px;padding:0 16px;border-radius:999px;background:var(--fg);color:var(--bg);font-size:var(--t4);line-height:1;text-decoration:none;white-space:nowrap}
.pill.light{background:var(--ph);color:var(--fg)}
.pill.wide{width:100%;justify-content:center}
.pills{display:flex;gap:10px;flex-wrap:wrap}

/* Feld: Frage in der Mitte, Session-Karten drumherum (The Class: 600 px hoch, Karten 300 × 123, Bild 100 quadratisch) */
.field{position:relative;min-height:600px;max-width:1400px;margin-inline:auto}
.field .q{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;width:max-content;max-width:90vw}
.q .k{font-size:var(--t3);letter-spacing:.15em;text-transform:uppercase}
.q .w{display:inline-flex;align-items:center;gap:.4em;margin-top:12px;font-size:var(--t2);font-weight:300;letter-spacing:-.01em;border-bottom:1px solid var(--fg);padding-bottom:6px;min-width:7em;justify-content:center}
.scard{position:absolute;display:flex;gap:14px;width:300px;max-width:100%;padding:10px 15px 10px 10px;background:var(--ph);text-decoration:none}
.scard .th{flex:none;width:100px;height:100px;background:var(--ph-d)}
.scard .tt{font-size:var(--t4);line-height:1.35;padding-top:8px;min-width:0}
.scard .tt small{display:block;margin-top:6px;font-size:var(--t6);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}

/* Zentrierter Block (Statement + Pille) — The Class: 576 px breit */
.center{text-align:center;margin-inline:auto;max-width:600px}
.center .pill{margin-top:clamp(38px,4.2vw,56px)}
.pill.cta{height:50px;padding:0 34px;font-size:var(--t3)}
.pill.line{background:transparent;color:var(--fg);border:1px solid var(--fg);height:44px;padding:0 26px;cursor:pointer;font:inherit;font-size:var(--t4)}
/* Formular (V1): Haarlinien statt Kästen, 16 px damit iOS nicht zoomt */
.form label{display:block;margin-top:22px}
.form label span{display:block;font-size:var(--t5);color:var(--mute);margin-bottom:6px}
.form input,.form textarea{width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;padding:8px 0;font:400 16px/1.4 var(--font);color:var(--fg);outline:none;resize:vertical}
.form input:focus,.form textarea:focus{border-bottom-color:var(--fg)}
.form p{margin-top:28px}
.form .hq{margin-top:0;margin-bottom:4px}
.act.plain{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer}
.quiet-t > .hq{margin-top:2.2em}
.quiet-t > .hq + p{margin-top:.4em}
.center p{text-wrap:balance}
.eyebrow{font-size:var(--t4);line-height:1.5;margin-bottom:14px}

/* Bildpaar randabfallend */
.split2{display:grid;grid-template-columns:1fr 1fr;gap:2px}

/* Drei Spalten, eingerückt (The Class: Spalten 336 bei x 112 — ein Raster weiter innen) */
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,5vw,64px);padding-inline:clamp(0px,5vw,64px)}
.three .k{font-size:var(--t2);font-weight:300;letter-spacing:-.02em;line-height:1.3;margin-bottom:12px}

/* Text + Gerät / Text + Bilder: zwei Hälften 560 | 560, Text in der Mitte der Höhe */
.half{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,6vw,112px);align-items:center}
.half .txt > * + *{margin-top:18px}
.half .txt .eyebrow{margin:0}
.half .txt .t1{margin-top:8px}
.device{position:relative;aspect-ratio:16/10;margin-left:8%}
.device .screen{position:absolute;inset:0;background:var(--ph-d);border-radius:10px;border:1px solid var(--line)}
.device .phone{position:absolute;left:-14%;bottom:-10%;width:26%;aspect-ratio:9/19.5;background:var(--ph);border:1px solid var(--line);border-radius:22px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}

/* Mosaik: 3 × 3 Kacheln, 8 px Fuge */
.mosaic{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}

/* Pläne: zwei weiße Karten, 1040 breit zentriert */
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);max-width:1040px;margin:clamp(32px,4vw,56px) auto 0}
.plan{background:var(--card);border-radius:16px;padding:28px 32px 32px}
.plan .k{font-size:var(--t4)}
.plan .pr{display:flex;align-items:baseline;gap:8px;margin:24px 0 20px;flex-wrap:wrap}
.plan .pr b{font-weight:300;font-size:clamp(40px,4.5vw,60px);line-height:1;letter-spacing:-.02em}
.plan .pr span{font-size:var(--t4);color:var(--mute)}

@media (max-width:760px){
  .field{min-height:0;display:flex;flex-direction:column;gap:10px}
  .field .q{position:static;transform:none;margin:0 auto 28px;max-width:100%}
  .scard{position:static;width:100%}
  .three{grid-template-columns:1fr;padding-inline:0;gap:28px}
  .half{grid-template-columns:1fr;gap:32px}
  .half .txt{order:1}
  .device{margin-left:10%;margin-bottom:10%}
  .plans{grid-template-columns:1fr}
  .split2{grid-template-columns:1fr}
}

/* Nur für die Raster-Seite */
.spec{display:grid;grid-template-columns:minmax(120px,2fr) 10fr;gap:var(--gap);padding-block:20px;border-top:1px solid var(--line);align-items:baseline}
.spec:last-child{border-bottom:1px solid var(--line)}
.spec .k{font-size:var(--t5);line-height:1.6;text-transform:uppercase;letter-spacing:.02em;color:var(--mute)}
.cols12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);height:120px}
.cols12 > i{display:block;background:var(--ph)}
@media (max-width:760px){.spec{grid-template-columns:1fr;gap:6px}}

/* ——— Fassung 2b: das Gerüst ——— */
/* Eine Linkform: das Wort, die Linie darunter mit Abstand. Allein stehend 14 px, im Text in Textgröße. */
.lk{display:inline-block;font-size:var(--t4);line-height:1.5;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
p a,.idx a{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.nav a[aria-current]{text-underline-offset:5px}

/* Hero: der Satz im Himmel, über der Figur, in Tinte */
.hero .inimg.mid{inset:0 0 46% 0;display:flex;align-items:center;justify-content:center;padding:var(--head) var(--m) 0;
  font-size:var(--t1);font-weight:300;letter-spacing:-.024em;text-transform:none;line-height:1.22;text-wrap:balance}

/* Die stille Liste — Index auf Home, Fakten auf den Unterseiten: Name links, Zeile rechts, keine Linien */
.idx{display:grid;grid-template-columns:minmax(150px,2fr) 6fr;column-gap:var(--gap);row-gap:1.15em;font-size:var(--t3);line-height:1.4;align-items:start}
.idx > *{min-width:0}
.idx .k{font-weight:500}
.idx .t5{margin-top:-.4em}

/* Das Menü auf der Achse: Karte, Telefon versetzt, ein Satz — alle auf einer Grundlinie */
.phone.inline{--w:min(100%,240px);width:min(100%,240px);margin:0;box-shadow:0 40px 80px -36px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.06)}

@media (max-width:760px){
  .hero .inimg.mid{inset:0 0 54% 0;font-size:clamp(24px,7vw,32px)}
  .idx{grid-template-columns:1fr;row-gap:.3em}
  .idx .k,.idx > p:nth-child(odd):not(.k){margin-top:1.2em}
  .idx > p:nth-child(odd):empty{display:none}
  .phone.inline{--w:40vw;width:40vw;margin:28px 0 0}
}
/* Heller Hero, dunkler Fuß: Titel in Weiß auf leichtem Verlauf, Kopfzeile bleibt Tinte */
.hero.light.tw .inimg{color:var(--on-img)}
.hero.light.tw::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;z-index:1;background:linear-gradient(to top,rgba(0,0,0,.34),rgba(0,0,0,0))}

/* ——— Fassung 2c ——— */
/* Hero: eine kleine weiße Zeile unten, ein Tick über Textgröße */
.hero .inimg.low{display:flex;align-items:flex-end;justify-content:center;padding:0 var(--m) clamp(22px,3vh,36px);
  font-size:clamp(16px,1.25vw,18px);letter-spacing:0;text-transform:none;line-height:1.4;color:var(--on-img)}
.hero.light .inimg.low{color:var(--on-img)}

/* Services: Liste links, ein Bild rechts, das wechselt — beim Überfahren, sonst langsam von allein */
.svc-list{display:flex;flex-direction:column;gap:clamp(22px,2.4vw,34px)}
.svc-list .n{font-size:var(--t2);font-weight:300;letter-spacing:-.02em;line-height:1.3}
.svc-list .n a{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.svc-list .e p + p{margin-top:.4em;max-width:26em}
.svc-list .e{transition:opacity .4s}
.svc-list:hover .e:not(.on){opacity:.5}
.svc-pic{position:relative;overflow:hidden;background:var(--ph)}
.svc-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s ease}
.svc-pic img.on{opacity:1}

/* Das Telefon: kurz angerollt, dann zurück — ein kleiner Moment, kein Film */
@keyframes menupeek{0%,12%{transform:translateY(0)}24%,31%{transform:translateY(-13%)}43%,76%{transform:translateY(-19.5%)}90%,100%{transform:translateY(0)}}
.scr.scrolling img.full{animation:menupeek 21s cubic-bezier(.45,0,.2,1) infinite}

/* Zwei Hochformate: das zweite ein Stück tiefer */
.g > figure.lower{margin-top:clamp(40px,6vw,88px)!important}

@media (max-width:760px){
  .svc-pic{order:-1;margin-bottom:28px}
  .svc-list .n{font-size:20px}
  .g > figure.lower{margin-top:var(--gap)!important}
  .phone.inline{--w:44vw;width:44vw;margin:0 0 24px}
}

/* ——— Fassung 2d: Typo zurück zur Ruhe von V1 ——— */
/* Zweizeiliger Link (Sparrow): Verb klein, Ziel unterstrichen in eigener Zeile */
.link2{display:inline-block;font-size:var(--t5);line-height:1.4;text-decoration:none}
.link2 u{display:block;font-size:var(--t4);text-underline-offset:5px;text-decoration-thickness:1px;margin-top:2px}
.stack > .link2{margin-top:1.6em}
/* Feature-Satz: eine Stufe zwischen t2 und t1, Satzschreibung, hell */

/* Services-Liste: Etikett, Zeile, Link — wie die Türen in V1, nur untereinander */
.svc-list{gap:clamp(26px,2.8vw,40px)}
.svc-list .e .lbl{margin:0}
.svc-list .e p + p{margin-top:.6em;max-width:24em}
.svc-list .e .link2{margin-top:.9em}
.svc-list:hover .e:not(.on){opacity:.45}
@media (max-width:760px){.svc-list .e .lbl{font-size:var(--t4)}}

/* ——— Fassung 2e ——— */
/* Unterseiten beginnen direkt unter der Kopfzeile, ein Takt Luft */
.top{height:calc(var(--head) + var(--step))}
/* Services: vier Namen, ein Pfeil, ein Bild — nur beim Überfahren wechselt es */
.svc-list{display:flex;flex-direction:column;gap:0}
.svc-list a.e{display:block;font-size:clamp(23px,2.2vw,32px);font-weight:300;letter-spacing:-.02em;line-height:1.25;text-decoration:none;padding:.42em 0;transition:opacity .35s}
.svc-list a.e:first-child{padding-top:0;margin-top:-.2em}
.svc-list a.e span{display:inline-block;margin-left:.45em;font-weight:300;opacity:.45;transition:transform .35s,opacity .35s}
.svc-list a.e.on span{opacity:1;transform:translateX(.15em)}
.svc-list:hover a.e:not(.on){opacity:.4}
/* Feature: der Satz direkt am Bild, auf dessen Unterkante */
.feat{padding-bottom:0}
.feat .link2{margin-top:1.6em}
/* Fakten in der Textspalte: Schlüssel schmaler */
.c5 > .idx{grid-template-columns:minmax(96px,1fr) 4fr;row-gap:1em}
.idx > p:empty{display:block}
@media (max-width:760px){
  .top{height:calc(var(--head) + 8px)}
  .svc-list a.e{font-size:22px}
  .svc-pic{order:-1;margin-bottom:24px}
  .feat{padding-bottom:0;margin-top:20px}
  .c5 > .idx{grid-template-columns:1fr}
}

/* ——— Fassung 2f: Ato-Raster für die Unterseiten, Home nachgemessen ——— */
/* Unterseiten: Titel mittig im Hero (Ato: 40, mittig, randabfallend 786 hoch) */
.hero .inimg.t1{font-weight:300;line-height:1.2;padding:0 var(--m)}
/* Nach dem Hero: Ato 168 px bis zum Hook */
.ato-in{padding-top:clamp(96px,11.7vw,168px)}
/* Zwei Hochformate randabfallend, Ato 720 × 873 je Hälfte, keine Fuge */
.split2{gap:0}
.split2 .ph.half{aspect-ratio:720/873}
/* Home: die Servicenamen eine Stufe unter dem Feature-Satz (24), eng gesetzt; der Pfeil klein */
.svc-list a.e{font-size:var(--t2);letter-spacing:-.02em;line-height:1.3;padding:.3em 0}
.svc-list a.e span{font-size:.85em;margin-left:.4em}
/* Feature-Satz: Sparrow 33 → hier 28, Satzschreibung */

@media (max-width:760px){
  .ato-in{padding-top:56px}
  .split2{grid-template-columns:1fr 1fr}
  .svc-list a.e{font-size:20px}
}

/* ——— Fassung 2g: die Liste ——— */
/* Liste (Home): Etikett, dann Name halbfett mit Linie darunter, eine Zeile. Sonst nichts. */
.lst > .lbl{margin-bottom:1.9em}
.lst .hq a{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.lst .hq + p{margin-top:.55em;max-width:30em}
.lst p + .hq{margin-top:2.1em}

/* ——— Fassung 2h ——— */
/* Listeneintrag: der ganze Block ist der Link, der Pfeil steht am Satzende, keine Linie */
.ent{display:block;text-decoration:none;margin-top:2.1em}
.ent .hq{text-decoration:none}
.ent p + p{margin-top:.55em;max-width:30em}
.lst > .lbl + .ent{margin-top:0}
/* Das Bild folgt der Höhe des Textes — bei jeder Breite */
.g.follow{align-items:stretch}
.g.follow figure.fit{margin:0;display:flex;flex-direction:column}
.g.follow figure.fit .ph{flex:1 1 auto;min-height:240px}
/* Hero mit Titel und Hook */
.hero .inimg.t1.two{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(10px,1.2vw,16px)}
.hero .inimg .sub{font-size:clamp(16px,1.25vw,18px);font-weight:400;letter-spacing:0;line-height:1.4;text-wrap:balance}
@media (max-width:760px){
  .g.follow figure.fit .ph{aspect-ratio:4/5;min-height:0}
}
/* Services in einer Reihe: Atos Türen ohne Bild — Name, Zeile, Pfeil */
.row4{align-items:start}
.row4 .ent{margin-top:0}
.row4 .ent p + p{max-width:none}
@media (max-width:760px){.row4 .ent + .ent{margin-top:1.8em}}

/* ——— Fassung 7: das Gerüst zu Ende ——— */
/* Eingerückter Hero: ein Bild im Satzspiegel, Titel und zwei Zeilen oben links */
.hero.inset{position:relative;height:auto;aspect-ratio:2/1;min-height:360px;max-height:66vh;background:var(--ph-d);overflow:hidden}
.hero.inset img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero.inset .lines{position:absolute;left:clamp(20px,2.6vw,40px);top:clamp(20px,2.6vw,40px);right:clamp(20px,2.6vw,40px);max-width:34em;color:var(--on-img);z-index:2}
.hero.inset .lines .t2{margin-bottom:.9em}
.hero.inset.light .lines{color:var(--fg)}
.hero.inset:not(.light)::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.28),rgba(0,0,0,0) 55%)}
/* Hook auf Home in 24 */
.hero .inimg.mid{font-size:var(--t2);letter-spacing:-.02em;color:var(--fg)}
/* Listeneintrag: Pfeil hinter dem Namen, klein und leise */
.ent .hq .ar,.ent.one .ar{display:inline-block;margin-left:.45em;font-weight:300;opacity:.55;transition:transform .3s}
.ent:hover .ar{transform:translateX(.2em)}
.ent.one{display:inline;margin:0}
/* Das ungleiche Paar: Welt groß, Beleg klein, eine Stufe tiefer */
.g > figure.lower{margin-top:clamp(56px,8vw,120px)!important}
/* Handlungen: Write to links, Next rechts außen */
.actions{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-top:var(--step)}
.actions .nx{text-align:right}
/* Pille: nur für Transaktionen */
.pill{height:40px;padding:0 22px;font-size:var(--t4);cursor:pointer;border:0;font-family:var(--font)}
/* Die Serife, einmal */
.serif{font-family:"Newsreader",Georgia,serif;font-weight:300;font-size:clamp(24px,2.4vw,34px);line-height:1.2;letter-spacing:0;padding-bottom:4px}
/* Verse */
.verse{line-height:1.4}
/* Fakten mittig (Menu) */
.idx.mid{text-align:left;max-width:520px;margin-inline:auto;margin-top:1.2em}
/* Atha: feste Lesebreite, nicht mit dem Schirm schrumpfen */
.quiet .col{grid-column:4/span 6;max-width:36em;margin-inline:auto}
@media (max-width:1100px){.quiet .col{grid-column:3/span 8}}
@media (max-width:760px){
  .hero.inset{aspect-ratio:4/5;max-height:none;min-height:0}
  .hero.inset .lines{left:18px;top:18px;right:18px}
  .actions{flex-direction:column;align-items:flex-start}
  .actions .nx{text-align:left}
  .quiet .col{grid-column:1/-1;max-width:none}
  .serif{margin-top:24px}
}
/* Navigation: lange Namen am Schirm, kurze am Telefon */
.nav a{white-space:nowrap}
.nav .s{display:none}
@media (max-width:760px){.nav .l{display:none}.nav .s{display:inline}.nav{gap:14px;font-size:13px}}
/* Hero-Zeile zurück nach unten, weiß */
.hero .inimg.low{font-size:clamp(16px,1.25vw,18px);color:var(--on-img)}
.ent p .ar{margin-left:.35em}

/* ——— Mobil: eigener Durchgang ——— */
/* Hero-Zeilen bleiben am Schirm im Bild, liegen am Telefon darunter — immer lesbar */
@media (max-width:760px){
  .hero.inset{aspect-ratio:4/5;position:relative}
  .hero.inset .lines{position:static;color:var(--fg)!important;max-width:none;margin-top:18px;padding:0}
  .hero.inset{height:auto;overflow:visible;background:transparent}
  .hero.inset img{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
  .hero.inset{aspect-ratio:auto}
  .hero.inset::after{display:none}
  .hero.inset .lines .t2{margin-bottom:.5em}
  /* Der eine große Satz: eine Stufe kleiner, sonst vier Zeilen Schlagzeile */
  .t1{font-size:26px;line-height:1.25}
  /* Menu: am Telefon linksbündig — mittig liest auf schmalem Schirm ratlos */
  .colc,.colc p{text-align:left}
  .three-ph .cap1{text-align:left}
  .hm-head,.hero-menu{text-align:left}
  .stage{justify-content:flex-start}
  /* Contact: die drei Wege brauchen Abstand voneinander, nicht nur zur Zeile */
  .g > .c3.stack-s + .c3.stack-s,.g > .c3.stack-s + .c4.stack-s{margin-top:1.6em}
  .form textarea{min-height:120px}
  /* Das Paar behält seine Ungleichheit: der Beleg bleibt kleiner und rückt nach rechts */
  .g > figure.lower{width:74%;margin-left:auto;margin-top:28px!important}
}
/* Helle Hero-Motive: ein weicher Schleier, damit die Tinte trägt (nur am Schirm) */
@media (min-width:761px){
  .hero.inset.light::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(242,243,239,.88),rgba(242,243,239,.2) 40%,rgba(242,243,239,0) 58%)}
  .hero.inset.light .lines{z-index:2}
  .hero.inset:not(.light)::after{background:linear-gradient(to bottom,rgba(0,0,0,.42),rgba(0,0,0,0) 52%)}
}
@media (max-width:760px){.colc p,.center p,p{text-wrap:initial}.t1,.t2{text-wrap:initial}}

/* ═══════ Konsolidierung 17.10. ═══════ */
/* Die eine mittlere Stufe: Schluss- und Übergangszeilen */
.t0{font-size:clamp(23px,2.3vw,30px);font-weight:300;line-height:1.3;letter-spacing:-.02em;max-width:22em}
.t0 a{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;white-space:nowrap}

/* Navigation: sechs Punkte am Schirm, am Telefon der Punkt aus dem Logo */
.dot{display:none;position:relative;width:40px;height:40px;padding:0;margin:-6px -6px -6px 0;border:0;background:none;cursor:pointer;color:var(--fg);-webkit-text-fill-color:currentColor;font:inherit;-webkit-appearance:none;appearance:none}
.dot span{position:absolute;left:50%;top:50%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:currentColor;transition:transform .3s,border-radius .3s,width .3s,height .3s}
.dot.x span{width:18px;height:18px;margin:-9px 0 0 -9px;background:transparent;border:1px solid currentColor}
.sheet{position:fixed;inset:0;z-index:40;background:var(--bg);opacity:0;transition:opacity .28s ease;display:flex;align-items:center}
.sheet[hidden]{display:none}
.hd{z-index:50}
.sheet.on{opacity:1}
.sheet nav{display:flex;flex-direction:column;gap:.55em;padding:0 var(--m);width:100%}
.sheet nav a{font-size:clamp(26px,7.5vw,34px);font-weight:300;letter-spacing:-.024em;line-height:1.25;text-decoration:none}
.sheet nav a[aria-current]{text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:1px}
@media (max-width:860px){.nav{display:none}.dot{display:block}}

/* Rotierende Karten auf Home */
.roll img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.3s ease}
.roll img.on{opacity:1}

/* (ersetzt) */
/* Unterseiten: Überschrift fett, Text, Luft. Eine Spalte, sonst nichts. */
.blocks > .hq{margin-top:clamp(40px,4vw,60px)}
.blocks > .hq:first-child{margin-top:0}
.blocks > .hq + p,.blocks > .hq + .verse,.blocks > .hq + ul{margin-top:.55em}
.blocks > p + p{margin-top:.9em}
.blocks > .lead{font-size:var(--t2);font-weight:300;line-height:1.3;letter-spacing:-.02em}
.blocks > .lead + .hq{margin-top:clamp(48px,5vw,72px)}
.names-l{list-style:none;margin:.55em 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.3em var(--gap)}
.verse{line-height:1.45;margin-bottom:1.2em}

/* Wellbeing Menu: das Produkt auf warmem Dunkel abgesetzt */
.band{background:#241E1A;color:#F3EFE7}
.band.top0{margin-top:0}
.band.top0 .band-in{padding-top:calc(var(--head) + clamp(40px,5vw,72px))}
.band-in{padding-top:clamp(64px,8vw,112px);padding-bottom:clamp(48px,6vw,80px);text-align:center;position:relative}
.band .lbl{color:rgba(243,239,231,.6)}
.band .t1{margin-top:.5em;max-width:16em;margin-inline:auto}
.band-sub{margin-top:1.4em;max-width:30em;margin-inline:auto;color:rgba(243,239,231,.78)}
.band .pill{margin-top:clamp(38px,4.2vw,56px)}
.pill.light{background:#F3EFE7;color:#241E1A}
.float{margin-top:clamp(44px,5vw,72px);display:flex;justify-content:center}
.float .phone.paper{--w:clamp(210px,19vw,262px);width:var(--w);margin:0;box-shadow:0 50px 90px -40px rgba(0,0,0,.7)}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media (prefers-reduced-motion:reduce){.float .phone.paper{animation:none}}
.band + section{padding-top:var(--sec-l)}

/* Sanftes Einblenden, einmal */
@media (prefers-reduced-motion:no-preference){
  .rv{opacity:0;transform:translateY(14px);transition:opacity .75s ease,transform .75s cubic-bezier(.22,.61,.36,1)}
  .rv.in{opacity:1;transform:none}
  .hero.light .rv,.band.rv{transition-duration:.9s}
}
.hd,.sheet{opacity:1!important;transform:none!important}

@media (max-width:760px){
  .doc > .row{grid-template-columns:1fr;row-gap:.5em}
  .doc .k{grid-column:1}
  .doc .row > div{grid-column:1}
  .names-l{grid-template-columns:1fr}
  .band-in{text-align:left}
  .band .t1,.band-sub{margin-inline:0}
  
  .float{justify-content:flex-start}
  .t0{max-width:none}
}

/* Hero-Zeilen unten, wenn der Bildfuß dunkel ist */
.hero.inset.bl .lines{top:auto;bottom:clamp(20px,2.6vw,40px)}
.hero.inset.bl::after{background:linear-gradient(to top,rgba(0,0,0,.52),rgba(0,0,0,0) 48%)!important}
@media (max-width:760px){.hero.inset.bl .lines{position:static;bottom:auto}}

/* Telefon im Band: das Menü rollt kurz an und kommt zurück */
.band .scr.scrolling img.full{position:absolute;left:0;top:0;width:100%;height:auto;opacity:1;animation:menupeek 21s cubic-bezier(.45,0,.2,1) infinite}
@keyframes menupeek{0%,12%{transform:translateY(0)}24%,31%{transform:translateY(-13%)}43%,76%{transform:translateY(-19.5%)}90%,100%{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.band .scr.scrolling img.full{animation:none}}
/* Kopfzeile hell auf dem Band */
.hd.onpic .logo,.hd.onpic .nav a,.hd.onpic .dot{color:#F3EFE7;-webkit-text-fill-color:#F3EFE7}
.hd.onpic .nav a[aria-current]{text-decoration-color:#F3EFE7}
@media (max-width:860px){.hd.onpic .dot span{background:#F3EFE7}.hd.onpic .dot.x span{background:transparent;border-color:#F3EFE7}}
.sheet .logo{color:var(--fg)}

/* iOS: keine automatischen blauen Links aus Telefonnummern und Adressen */
a[href^="tel"],a[href^="mailto"]{color:inherit;-webkit-text-fill-color:currentColor}
button{color:inherit;font:inherit}

/* Kapitel: das Bild ist der Trenner, dann Etikett, Einstieg, Blöcke */
.chbreak{aspect-ratio:2/1}
.blocks > .lbl{margin-bottom:1.2em}
.blocks > .lead{font-size:var(--t2);font-weight:300;line-height:1.3;letter-spacing:-.02em}
.blocks > .lead + .hq{margin-top:clamp(44px,4.6vw,68px)}
.lk2{display:inline-block;font-size:var(--t4);line-height:1.5;text-decoration:none}
.lk2 .ar{display:inline-block;opacity:.55;transition:transform .3s}
.lk2:hover .ar{transform:translateX(.2em)}
.lk2{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
@media (max-width:760px){.chbreak{aspect-ratio:4/3}}

/* Das Angebot: der Name ist die Überschrift, darunter Fließtext. Zeilenlänge begrenzt. */
.offer{max-width:34em}
.oname{margin-bottom:.7em}
.offer > p + p{margin-top:1em}
.ometa{margin-top:1.6em!important;font-size:var(--t4);line-height:1.6;color:var(--mute)}
.offer .pill{margin-top:.6em}
.offer .names-l{margin-top:.6em}
.mcard{padding-bottom:2px}
.mcard .hq{margin-bottom:.5em}
.mcard p + p{margin-top:.5em}
.lst .ent p + p{max-width:none}
.t0.verse{max-width:none;line-height:1.4}
@media (max-width:760px){
  .offer,.t0.verse{max-width:none}
  .mcard{margin-top:24px}
}

/* Scannbare Fakten: Schlüssel links, Wert rechts — die Form der Fußlisten */
.f2{display:grid;grid-template-columns:minmax(104px,1fr) 3fr;column-gap:var(--gap);row-gap:.75em;margin:1.8em 0 0;font-size:var(--t4);line-height:1.55}
.f2 dt{text-transform:uppercase;letter-spacing:.02em;color:var(--mute)}
.f2 dd{margin:0}
.offer .f2 + .act-row{margin-top:1.8em!important}
/* Classes: randabfallender Hero wie Home, Zeilen unten links */
.hero.full{position:relative;height:84vh;min-height:520px;overflow:hidden}
.hero.full img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero.full .shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0) 46%,rgba(0,0,0,.18))}
.hero.full .lines{position:absolute;left:0;right:0;bottom:clamp(36px,5vh,64px);color:var(--on-img);z-index:2}
.hero.full .lines .t1{margin-bottom:.5em}
@media (max-width:760px){
  .f2{grid-template-columns:1fr;row-gap:.25em}
  .f2 dd{margin-bottom:.9em}
  .hero.full{height:76vh}
}

.names-l.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:760px){.names-l.three{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Zwei Session-Loops nebeneinander, stumm und ruhig */

/* Heller randabfallender Hero: Zeilen in Tinte */
.hero.full.light .lines{color:var(--fg)}
.hero.full.light .shade{background:linear-gradient(to top,rgba(242,243,239,.92),rgba(242,243,239,.3) 26%,rgba(242,243,239,0) 50%)}


/* Produktseite im Takt von The Class: Etikett, große Zeile, ein Absatz */
.sec-head .lbl{margin-bottom:1.1em}
.sec-head .t1{max-width:16em;margin-inline:auto}
.sec-head .t1 + p{margin-top:1.2em;max-width:30em;margin-inline:auto}
/* Zäsur auf wärmerem Grund, direkt vor der Zahl */

.tone-in{padding-block:clamp(72px,9vw,128px);text-align:center}
.tone .t1{max-width:14em;margin-inline:auto}
/* Zwei Wege zu kaufen */
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);max-width:860px;margin:clamp(40px,5vw,64px) auto 0}
.plan{background:var(--ph);padding:clamp(26px,2.6vw,36px)}
.plan .pr{display:flex;flex-direction:column;gap:2px;margin:1.4em 0 1em}
.plan .pr b{font-weight:300;font-size:clamp(32px,3.4vw,46px);line-height:1;letter-spacing:-.024em}
.plan .pr span{font-size:var(--t4);color:var(--mute)}
.plan .act-row{margin-top:1.4em!important}
@media (max-width:760px){
  .plans{grid-template-columns:1fr}
  .sec-head .t1,.sec-head .t1 + p,.tone .t1{max-width:none}
  .tone-in{text-align:left}
}

/* Produkt: die Sessions randlos gegeneinander */
.split2 video{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;background:var(--ph)}
/* Die Idee, nicht der Verkauf */
.idea{max-width:14em;margin-inline:auto;line-height:1.3}
/* Preis: zwei Spalten, keine Kästen */
.two-price{margin-top:clamp(36px,4vw,56px);text-align:center}
.two-price .pr{display:flex;flex-direction:column;gap:3px;margin-bottom:.9em}
.two-price .pr b{font-weight:300;font-size:clamp(30px,3vw,42px);line-height:1;letter-spacing:-.024em}
.two-price .pr span{font-size:var(--t4);color:var(--mute);line-height:1.5}
@media (max-width:760px){
  .split2 video{aspect-ratio:1/1}
  .two-price .c4{margin-bottom:2em}
  .idea{max-width:none}
}

.colc-l{grid-column:1/span 7}
@media (max-width:760px){.colc-l{grid-column:1/-1}}

/* Die Sessions: schmal, mittig, das zweite versetzt — nicht randlos */
.two-v{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,24px);max-width:660px;margin-inline:auto;align-items:start}
.two-v video{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;background:var(--ph)}
.two-v video:last-child{margin-top:clamp(24px,3.4vw,52px)}
@media (max-width:760px){.two-v{max-width:none;gap:10px}.two-v video:last-child{margin-top:18px}}

.quiet .form{margin-top:clamp(44px,4.6vw,68px)}
.quiet .form .hq{margin-bottom:.6em}

/* ── Fakten: Label: Text, einzeilig, kein Raster ── */
.fx{list-style:none;margin:1.7em 0 0;padding:0;font-size:var(--t4);line-height:1.6;max-width:33em}
.fx li{margin-top:.55em}
.fx li:first-child{margin-top:0}
.fx b{font-weight:500}
.offer .fx + .act-row{margin-top:1.8em}
/* Lead-in im Fließtext */
.ld{font-weight:500}
.quiet .stack > p + p{margin-top:1.5em}

/* Kopfzeile lesbar über dem vollen Hero */
.hero.full::before{content:"";position:absolute;left:0;right:0;top:0;height:clamp(130px,20vh,230px);z-index:1;pointer-events:none;background:linear-gradient(to bottom,rgba(0,0,0,.46),rgba(0,0,0,.16) 55%,rgba(0,0,0,0))}


/* Kopfzeile lesbar: Unterseiten-Heroes bekommen oben einen Schleier */
.hero:not(.light) .shade{background:linear-gradient(to bottom,rgba(0,0,0,.58),rgba(0,0,0,.14) 20%,rgba(0,0,0,0) 44%,rgba(0,0,0,0) 62%,rgba(0,0,0,.42))}

/* ═══ Unterseiten im System: Spalten ohne Bilder, Schritte ohne Fettung ═══ */
.cols4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:clamp(20px,3.2vw,52px);row-gap:clamp(46px,5vw,74px)}
.cols4 > *{display:block;text-decoration:none;color:inherit}
.cols4 .lbl{margin-bottom:1.6em}
.cols4 p:not(.lbl){font-size:var(--t3);line-height:1.6}
.cols4 .ar{display:inline-block;margin-left:.3em;font-weight:300;opacity:.55;transition:transform .3s}
.cols4 a:hover .ar{transform:translateX(.2em)}

.steps{display:grid;grid-template-columns:minmax(92px,auto) minmax(0,1fr);column-gap:clamp(20px,2.2vw,38px);row-gap:.62em;font-size:var(--t3);line-height:1.55;margin:1.5em 0 0;max-width:40em}
.steps dt{font-weight:400}
.steps dd{margin:0}
.steps + .act-row{margin-top:2em}
.lbl + .steps{margin-top:1.3em}
.verse{max-width:none}

@media (max-width:980px){.cols4{grid-template-columns:1fr 1fr;column-gap:var(--gap)}}
@media (max-width:640px){
  .cols4{grid-template-columns:1fr;row-gap:clamp(38px,8vw,54px)}
  .steps{grid-template-columns:1fr;row-gap:.1em}
  .steps dt{color:var(--mute)}
  .steps dd{margin-bottom:.85em}
}

/* ═══ Service-Zeilen: Name und Beleg links, Text rechts ═══ */
.srow{align-items:start}
.srow .side{grid-column:1/span 3}
.srow .bodyc{grid-column:5/span 5}
.srow .side .ph{margin-top:clamp(18px,1.8vw,26px);max-width:clamp(150px,13.5vw,196px)}
.srow .side .cap1{margin-top:10px;max-width:22em}
.sblock > .srow-s{padding-top:clamp(76px,8.6vw,132px)}
.sblock > .srow-s:first-child{padding-top:var(--sec-l)}

.entree{max-width:24em}
.lead2{font-size:var(--t2);font-weight:300;line-height:1.34;letter-spacing:-.012em;max-width:21em}
.facts2{margin-top:clamp(24px,2.4vw,36px);font-size:var(--t3);line-height:1.62;max-width:33em}
.facts2 p + p{margin-top:1em}
.facts2 b{font-weight:500}
.nsteps{font-size:var(--t3);line-height:1.62;max-width:33em}
.nsteps p + p{margin-top:1em}

@media (max-width:860px){
  .srow .side{grid-column:1/span 4}
  .srow .bodyc{grid-column:6/span 7}
}
@media (max-width:760px){
  .srow .side,.srow .bodyc{grid-column:1/-1}
  .srow .bodyc{margin-top:clamp(22px,5vw,32px)}
  .srow .side .ph{max-width:58%}
  .entree,.lead2,.facts2,.nsteps{max-width:none}
}

/* ═══ Seite als Dokument: ein Bild, eine Spalte, eine Fluchtlinie ═══ */
.hero.inset.wide{aspect-ratio:16/9;max-height:72vh;min-height:320px}
.hero.inset.wide .lines{right:auto;left:clamp(20px,2.6vw,40px);max-width:30em}
.hero.inset.wide.bl::after{background:linear-gradient(to top,rgba(0,0,0,.52),rgba(0,0,0,.08) 40%,rgba(0,0,0,0) 62%)!important}
.hline{font-size:clamp(16px,1.25vw,18px);line-height:1.4;font-weight:400}

.doc{max-width:33em}
.chap{font-size:var(--t2);font-weight:400;line-height:1.3;letter-spacing:-.006em;margin-bottom:.85em}
.doc p + p{margin-top:1.05em}
.doc .chap + p{margin-top:0}
.chap-s{padding-top:clamp(66px,7.4vw,118px)}
.chapters > .chap-s:first-child{padding-top:var(--sec-l)}
.platecap + .chap-s{padding-top:clamp(78px,8.6vw,140px)}

@media (max-width:760px){
  .hero.inset.wide{aspect-ratio:4/5}
  .doc{max-width:none}
}

/* ═══ Home v2: Behauptung links, Beleg rechts ═══ */
.claim{font-size:clamp(34px,3.6vw,52px);font-weight:300;line-height:1.08;letter-spacing:-.022em;max-width:13em}
.lede{margin-top:clamp(46px,5vw,84px);max-width:30em}
.lede p + p{margin-top:1.05em}
@media (max-width:760px){
  .claim{font-size:clamp(30px,8vw,40px);max-width:none}
  .lede{margin-top:clamp(30px,6vw,44px);max-width:none}
}

/* ═══ Home v2: geteilter Screen, Bild als Fläche bis an die Kante ═══ */
.split{display:grid;grid-template-columns:1fr 1fr;margin-top:var(--head);height:min(calc(100vh - var(--head) - 96px),840px);min-height:480px}
.split-t{display:flex;flex-direction:column;justify-content:space-between;padding:clamp(44px,7vh,96px) clamp(28px,4vw,72px) 0 var(--m)}
.splitfoot{font-size:var(--t3);line-height:1.55;max-width:26em}

.claim2{font-size:clamp(30px,3.4vw,50px);font-weight:300;line-height:1.1;letter-spacing:-.022em;max-width:13em}
.split-i{position:relative;overflow:hidden;background:var(--ph-d)}
.split-i img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.4s ease}
.split-i img.on{opacity:1}
.split-i .shade-b{position:absolute;left:0;right:0;bottom:0;height:34%;z-index:1;background:linear-gradient(to top,rgba(0,0,0,.42),rgba(0,0,0,0))}
.icap{position:absolute;left:clamp(18px,2vw,32px);bottom:clamp(16px,2vw,28px);z-index:2;color:var(--on-img);font-size:var(--t5);letter-spacing:.04em;text-transform:uppercase}
.icap span{position:absolute;left:0;bottom:0;white-space:nowrap;opacity:0;transition:opacity 1.4s ease}
.icap span.on{opacity:.9}
@media (max-width:860px){
  .split{grid-template-columns:1fr;height:auto;min-height:0;margin-top:var(--head)}
  .split-t{padding:clamp(28px,6vw,48px) var(--m) clamp(28px,6vw,44px);gap:clamp(24px,6vw,36px)}
  .claim2{font-size:clamp(28px,7.4vw,38px);max-width:none}
  .split-i{aspect-ratio:4/5}
}

/* Die Arbeitszeile ist Inventar und liest als Inventar: Lesegroesse.
   Die einzige Displaystufe auf Home ist die Klaerungszeile.          */
/* Das Manifest ist als gesprochene Zeile geschrieben und war als Body gesetzt —
   mobil von einer Bildunterschrift nicht zu unterscheiden. Jetzt Display.     */
.worktext{font-size:var(--t2);font-weight:300;line-height:1.35;letter-spacing:-.014em;max-width:34em}
.svcrow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:clamp(20px,3vw,48px);row-gap:clamp(34px,4vw,52px)}
.svcrow > a{display:block;text-decoration:none;color:inherit}
.svcrow .hq{margin-bottom:.45em}
.svcrow p:not(.hq){font-size:var(--t4);line-height:1.5;max-width:17em}
.svcrow .ar{display:inline-block;margin-left:.3em;font-weight:300;opacity:.55;transition:transform .3s}
.svcrow a:hover .ar{transform:translateX(.2em)}
@media (max-width:860px){.svcrow{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.worktext{max-width:none}}
@media (max-width:560px){.svcrow{grid-template-columns:1fr;row-gap:clamp(26px,6vw,36px)}}

.svcrow .pr2{margin-top:.75em}
.cap1 a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px}
.doors{display:flex;gap:clamp(24px,3vw,48px);font-size:var(--t3)}

/* ═══ Home 2: Fälle und Ausatmer ═══ */
.case{padding-top:clamp(56px,6.6vw,104px)}
.g > .casefig.lower{margin-top:clamp(56px,8vw,120px)}
@media (max-width:760px){.g > .casefig.lower{margin-top:0}}
.casefig{display:block;text-decoration:none;color:inherit}
.caseline{margin-top:clamp(9px,0.85vw,13px);font-size:var(--t4);line-height:1.5}
.caseline b{font-weight:500}
.caseline .ar{display:inline-block;margin-left:.25em;font-weight:300;opacity:.5;transition:transform .3s}
.casefig:hover .ar{transform:translateX(.2em)}
.exhale.under{margin-top:clamp(22px,2.4vw,34px)}
.exhale{margin-top:var(--sec-l);height:min(74vh,780px);overflow:hidden;background:var(--ph)}
.exhale img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:760px){
  .caseline{max-width:none}
  .exhale{height:auto;aspect-ratio:4/5}
  .doors{flex-wrap:wrap;gap:.8em 1.4em}
}

/* ═══ Dokumentseite: zweizeilige Kapitelköpfe, Tafel, Lede ═══ */
.lede{font-size:var(--t2);font-weight:300;line-height:1.38;letter-spacing:-.01em;max-width:30em}
.doc .lede + p{margin-top:1.5em}
.chap{margin-bottom:.1em}
.chapsub{font-size:var(--t3);line-height:1.4;color:var(--mute);margin-bottom:1.35em}
.doc .chapsub + p{margin-top:0}
.doc b{font-weight:500}
.mailline{margin-top:1.1em;font-size:var(--t2);font-weight:300}

.plate{margin-top:var(--sec-l);height:min(70vh,760px);overflow:hidden;background:var(--ph)}
.plate img{width:100%;height:100%;object-fit:cover;display:block}
.platecap{padding-top:clamp(8px,0.8vw,12px)}

@media (max-width:760px){
  .lede{max-width:none}
  .plate{height:auto;aspect-ratio:4/5}
}

/* ═══ 20.10.2026, Textstand-Fassungen (body.ts) — Bildunterschriften tragen Fakten: Lesegröße, Tinte. Eine Kapitelkopfzeile. ═══ */
.ts .cap1{font-size:var(--t4);line-height:1.5;color:var(--fg)}
.ts .cap1 b{font-weight:500}
.ts .cap1 .ar{display:inline-block;margin-left:.25em;font-weight:300;opacity:.5;transition:transform .3s}
.ts .casefig .cap1{margin-top:clamp(13px,1.3vw,19px)}
.ts .capr{grid-column:7/-1}
@media (max-width:760px){.ts .capr{grid-column:1/-1}}
.ts .chap{margin-bottom:.85em}
.ts .u{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.ts .doc .lede + .mailline{margin-top:1.1em}

/* ═══ System B (Textlabor 20.10.2026): 17/1,55 · Maß 36em · Vorspann 20 leicht · Köpfe 30 leicht, Luft nur davor ═══ */
.ts .doc{max-width:36em;font-size:17px;line-height:1.55}
.ts .doc p + p{margin-top:1.05em}
.ts .head{font-size:clamp(30px,2.9vw,40px);font-weight:300;line-height:1.18;letter-spacing:-.022em;max-width:16em;margin-bottom:28px}
.ts .stand{font-size:clamp(19px,1.5vw,21px);line-height:1.45;font-weight:300;letter-spacing:-.008em}
.ts .doc .head + .stand{margin-top:0}
.ts .chap{font-size:clamp(26px,2.3vw,30px);font-weight:300;line-height:1.22;letter-spacing:-.018em;margin-top:0;margin-bottom:.5em}
.ts .doc .chap + p{margin-top:0}
.ts .chapb{padding-top:clamp(72px,7.4vw,96px)}
.ts .platecap + .chapb{padding-top:clamp(64px,6.6vw,88px)}
.ts .fig{padding-top:clamp(56px,6vw,80px)}
.ts .fig + .chapb{padding-top:clamp(64px,6.6vw,88px)}
.ts .close{padding-top:clamp(96px,10vw,140px)}
.ts .mailline{margin-top:1.1em;font-size:clamp(20px,1.7vw,24px);font-weight:300}
.ts .plate{margin-top:clamp(64px,7vw,104px)}
.ts .lk2{font-size:15px}
@media (max-width:760px){
  .ts .doc{max-width:none}
  .ts .chapb{padding-top:64px}
  .ts .fig{padding-top:48px}
}

/* ═══ Spreads (20.10.2026): Kopf · Dek · Bild · Text — innen eng, dazwischen der eine große Schritt ═══ */
.ts .spread{padding-top:clamp(104px,11vw,160px)}
.ts .platecap + .spread{padding-top:clamp(80px,8.5vw,120px)}
.ts .chap{margin-bottom:.35em}
.ts .dek{font-size:clamp(19px,1.5vw,21px);line-height:1.45;font-weight:300;letter-spacing:-.008em;max-width:30em}
.ts .doc .chap + .dek{margin-top:0}
.ts .doc .dek + .first{margin-top:1.6em}
.ts .doc .first{margin-top:0}
.ts .opener{margin-top:clamp(28px,3vw,40px)}
.ts .doc.after{margin-top:clamp(28px,3vw,40px)}
.ts .idx4{list-style:none;padding:0;margin:.55em 0 0}
.ts .idx4 li + li{margin-top:.3em}
.ts .idx4 a{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.ts .idx4 .ar{display:inline-block;opacity:.5;font-weight:300}
@media (max-width:760px){
  .ts .spread{padding-top:80px}
  .ts .platecap + .spread{padding-top:64px}
}


/* ═══ Dossier — For Hotels / For Companies ═════════════════════════════════
   Einstieg: Label, eine Aussage, Bild. Kapitel: Kolumnentitel in Versalien in
   der Marginalspalte, laufend mit; Text in der Lesespalte. Fliesstext, Masse
   und Takt sind dieselben wie auf Atha, Menu und Contact.                   */
.dos{row-gap:0}
.dos p{margin:0}

.dos .head{grid-column:1/span 7}
.dos .pagelbl{font-size:var(--t4);line-height:1.5;text-transform:uppercase;letter-spacing:.02em;
  color:var(--fg);margin-bottom:clamp(24px,2.6vw,38px)}
.dos .h1{font-size:var(--t2);font-weight:300;line-height:1.36;letter-spacing:-.012em;
  max-width:26em;text-wrap:balance}

.dos .ch{grid-column:1/-1;display:grid;grid-template-columns:subgrid;margin-top:0}
.dos .ch + .ch{border-top:1px solid var(--line);padding-top:clamp(38px,3.9vw,56px);
  margin-top:clamp(64px,6.6vw,96px)}
/* Kapitelkopf: Versalsatz wie die Labels auf der Menu-Seite und im Fuss.
   Dieselbe Marke traegt Classes — ein Satzbild fuer alle Unterseiten.          */
.khead,.dos .kx{font-size:var(--t4);line-height:1.5;font-weight:400;
  text-transform:uppercase;letter-spacing:.02em;color:var(--fg)}
.dos .kx{grid-column:1/span 3;position:sticky;top:clamp(20px,2.6vw,34px);
  align-self:start;padding-right:1.2em}
.dos .kx small{display:block;margin-top:.5em;font-size:13px;line-height:1.45;
  font-weight:400!important;text-transform:none;letter-spacing:0;color:var(--mute)}

.dos .tx{grid-column:4/span 7;max-width:34em}
.dos .tx p + p{margin-top:1.4em}
.dos .tx b{font-weight:500}
.dos .tx figure{display:block;margin:clamp(40px,4.2vw,60px) 0 0}
.dos .tx figure.half{width:58%}

.dos .close{grid-column:1/span 7;max-width:34em;margin-top:clamp(84px,8.8vw,128px)}
.dos .close .lede{font-size:var(--t2);font-weight:300;line-height:1.32;letter-spacing:-.018em}
.dos .mail{margin-top:1.1em;font-size:var(--t2);font-weight:300}
.dos .lk2{font-size:inherit;font-weight:500}
.dos .tx .go{display:block}
.dos .tx p.go .lk2{text-decoration:underline;text-underline-offset:5px;
  text-decoration-thickness:1px}
.chapters{padding-top:clamp(132px,14vw,200px)}
/* Faedeln statt einschneiden: The Class laeuft aus dem Vorspann heraus weiter,
   nur The Retreat bekommt den vollen Kapitel-Einschnitt und ein Vollbild.   */
.thread{padding-top:clamp(68px,7vw,104px)}
.thread figure{width:clamp(236px,21vw,312px);margin-left:auto}
/* Fakten direkt nach einem Bildpaar duerfen naeher heran */
.wrap.sec.tight{padding-top:clamp(40px,4.2vw,62px)}
/* Was in der linken Spalte unter dem Bildpaar weiterlaeuft, setzt ungefaehr an
   der Unterkante des tiefer haengenden rechten Bildes an. Der Ueberhang ist
   proportional zur Fensterbreite, deshalb ein vw-Wert statt einer festen Zahl. */
.after-pair{margin-top:calc(13.3vw + 40px)}
.after-pair .facts{margin-top:0}
@media (max-width:760px){.after-pair{margin-top:clamp(30px,7.5vw,44px)}}
@media (max-width:760px){.thread{padding-top:clamp(52px,13vw,72px)}}

.docpage .hd{position:sticky;top:0;background:var(--bg)}
.docpage .sec-top{padding-top:calc(var(--head) + clamp(10px,1.4vw,22px))}
.docpage .plate{margin-top:clamp(44px,4.6vw,68px)}

@media (max-width:980px){
  .dos .head{grid-column:1/span 9}
  .dos .kx{grid-column:1/span 4}
  .dos .tx{grid-column:5/span 8}
  .dos .close{grid-column:1/span 10}
}

/* ═══ Home ═════════════════════════════════════════════════════════════════ */
.hero .place{position:absolute;right:var(--m);bottom:clamp(24px,2.8vw,38px);z-index:2;
  font-size:var(--t5);letter-spacing:.06em;text-transform:uppercase;color:var(--on-img);opacity:.76}
.close-line{padding-bottom:4px}
/* Der Schlussgedanke auf Atha bekommt Luft, keine eigene Stufe */
.stack .close-line{margin-top:clamp(44px,4.4vw,66px)}
.ctaline{max-width:34em}
.ctaline a{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;
  white-space:nowrap}
@media (max-width:760px){.ctaline a{display:block;margin-top:.9em}}
/* Kein einzelnes Wort auf der letzten Zeile — gilt fuer jede Stufe ueber Lesegroesse
   und fuer die kurzen Zeilen unter Bildern. */
.t1,.t2,.colc,.cap1,.caseline,.fact-lede,.worktext,.ctaline,.band-sub,.idea{text-wrap:balance}
.offers .off{display:block;text-decoration:none;color:inherit;line-height:1.5;
  margin-top:.75em;max-width:38em}
.offers .off:first-child{margin-top:0}
.offers .off b{font-weight:500}
.offers .ar{display:inline-block;margin-left:.2em;font-weight:300;opacity:.5;transition:transform .3s}
.offers .off:hover .ar{transform:translateX(4px);opacity:.8}
.practice{font-size:var(--t4);line-height:1.55;color:var(--mute);padding-bottom:4px}
.practice a{color:var(--fg);text-decoration:underline;text-underline-offset:5px;
  text-decoration-thickness:1px}
.doorline{margin-top:clamp(28px,3vw,44px);display:flex;flex-wrap:wrap;
  gap:.6em clamp(24px,3vw,46px);font-size:var(--t3)}
.doorline a{text-decoration:none;color:inherit}
.doorline .ar{display:inline-block;font-weight:300;opacity:.5;transition:transform .3s}
.doorline a:hover .ar{transform:translateX(4px);opacity:.8}

/* ═══ Offenes Menue: die Signatur bleibt oben stehen, in Tinte ═════════════ */
.sheet{align-items:flex-start}
.sheet-open .hd{color:var(--fg)}
.sheet-open .hd.onpic .logo,.sheet-open .hd.onpic .dot{color:var(--fg);-webkit-text-fill-color:var(--fg)}
.sheet-open .hd.onpic .dot span{background:var(--fg)}
.sheet-open .hd.onpic .dot.x span{background:transparent;border-color:var(--fg)}

/* ═══ Mobil ════════════════════════════════════════════════════════════════
   Ein Satzbild fuer alle Seiten. Nur Stellung und Abstand aendern sich.     */
@media (max-width:760px){
  .sec-l{padding-top:clamp(76px,19vw,104px)}
  .sheet{padding-top:calc(var(--head) + clamp(52px,11vh,88px))}
  .sheet nav{gap:1.05em}
  .sheet nav a{font-size:clamp(23px,6vw,27px);letter-spacing:-.016em}

  .band.top0 .band-in{padding-top:calc(var(--head) + clamp(56px,14vw,88px));
    padding-bottom:clamp(44px,11vw,68px)}
  .colc,.colc p,.idea,.two-price .pr{text-align:left}
  .idea{max-width:none;margin-inline:0}
  .two-price{display:block}
  .two-price > *{grid-column:1/-1}
  .two-price .pr{margin-bottom:1.6em}
  .two-price .pr b{font-size:clamp(26px,7.4vw,32px)}
  .cap1,.two-price .pr span{font-size:var(--t4);line-height:1.5}

  .hero .place{display:none}
  .close-line{margin-bottom:clamp(28px,7vw,40px)}
  /* Zwei Breiten, keine dritte: randlos bleibt dem Hero, dem Ausatmer und der
     Platte vorbehalten; alles in einer Lesestrecke haelt exakt die Textspalte.
     Damit hat die Seite mobil genau eine linke Kante.                        */
  .casefig{width:100%}
  .g > .casefig.lower{width:100%;margin-left:0!important}
  .g > .casefig{margin-top:0}
  /* Die Zeile fuellt das Mass des Bildes. text-wrap:balance bricht sie absicht-
     lich kurz — dann endet sie weit vor der Bildkante und loest sich vom Bild. */
  .casefig .caseline{max-width:none;text-wrap:pretty}
  .case{padding-top:clamp(62px,16vw,88px)}
  .g > .casefig + .casefig{margin-top:clamp(40px,10vw,56px)!important}
  /* Gleiche Breite, verschiedene Hoehen: der Index statt des Kachelstapels.
     Jedes Bild bekommt mobil das Format, das sein Motiv traegt.              */
  .casefig.m-tall .ph{aspect-ratio:2/3}
  .casefig.m-wide .ph{aspect-ratio:4/3}
  .casefig .caseline{margin-top:clamp(10px,2.6vw,14px)}

  .dos .head,.dos .tx,.dos .close{grid-column:1/-1;max-width:none}
  .dos .h1{font-size:clamp(21px,5.6vw,24px);line-height:1.34;letter-spacing:-.012em}
  .dos .ch{grid-template-columns:1fr}
  .dos .ch + .ch{border-top:0;padding-top:0;margin-top:clamp(84px,21vw,112px)}
  .dos .kx{grid-column:1;position:static;padding-right:0;margin-bottom:1.15rem}
  .dos .kx small{display:none}
  .dos .tx figure.half{width:100%}
  .dos .tx figure.half .cap1{text-wrap:pretty}
  .dos .close{margin-top:clamp(76px,17vw,104px)}
  .chapters{padding-top:clamp(100px,25vw,140px)}
}

/* Produktbild im Menu-Kapitel: das Telefon klein, statt einer Flaeche */
.dos .tx figure.mock{margin-top:clamp(36px,3.8vw,52px)}
.dos .tx figure.mock .phone.sm{width:clamp(150px,16vw,190px);margin-left:0;margin-right:auto}

/* Das Menue als Gegenstand: das Geraet frei auf der Flaeche, kein Bildkasten */
.dos .tx figure.dev{display:block;margin:clamp(40px,4.2vw,60px) 0 0;width:clamp(108px,11vw,134px)}
.dos .tx figure.dev img{width:100%;height:auto;display:block}
.dos .tx figure.dev .cap1{margin-top:clamp(14px,1.4vw,20px)}
@media (max-width:760px){.dos .tx figure.dev{width:min(38%,134px)}}

/* ═══ Tippziele mobil ══════════════════════════════════════════════════════
   Textlinks sind 15–24px hoch; getippt wird mit einem Finger. Die Trefferflaeche
   waechst ueber ein Pseudoelement, damit sich am Satzbild nichts aendert.      */
@media (max-width:760px){
  .wrap a:not(.pill),.ft a,.logo{position:relative}
  .wrap a:not(.pill)::after,.ft a::after,.logo::after{
    content:"";position:absolute;inset:-13px -6px;z-index:1}
  /* 1,9 war die Notloesung fuer die Tippflaeche und hat die Listen formlos
     gemacht. Die Flaeche kommt jetzt allein aus dem Pseudoelement.           */
  /* 12px ist am Daumen zu klein, und 1,9 Durchschuss hat die Listen formlos
     gemacht. Eine Stufe groesser bei engerem Durchschuss ergibt dieselbe
     Zeilenhoehe, aber mehr Schrift darin — und eine Flaeche, die man trifft. */
  .ft .cols{font-size:13px}
  .ft .cols p{line-height:1.65}
  .doors .lk2 + .lk2{margin-top:0}
  .hq + p{line-height:1.8}
  button[type=submit],.form button,.pill{min-height:44px}
}

/* ═══ Classes: die Fakten, nuechtern — Marke links, Wert im Fliesstext ════ */
.fact-lede{margin-top:1.3em;max-width:34em}
.facts{display:grid;grid-template-columns:10.5em minmax(0,1fr);column-gap:var(--gap);
  row-gap:.85em;max-width:36em;margin:clamp(26px,2.8vw,38px) 0 0}
/* Die Marke vor dem Wert: Lesegroesse, eine Stufe fetter, in Tinte — wie der
   Satzanfang auf Atha. Kein Versalsatz, kein Grau; das ist die andere Stufe.  */
.facts dt{font-size:var(--t3);line-height:1.4;font-weight:500;
  letter-spacing:-.004em;color:var(--fg)}
.facts dd{margin:0}
.act-row{margin-top:clamp(76px,8.2vw,112px)}
@media (max-width:560px){
  .facts{grid-template-columns:1fr;row-gap:0}
  .facts dt{padding-top:0}
  .facts dd{margin:.15em 0 1.1em}
}

/* Der Knopf traegt immer helle Schrift — auch als mailto */
a.pill:not(.light):not(.line),.act-row .pill:not(.light):not(.line){
  color:var(--bg);-webkit-text-fill-color:var(--bg)}
a.pill.light,.band a.pill.light{color:#241E1A;-webkit-text-fill-color:#241E1A}

/* Heller Schleier oben, damit die Navigation in Tinte auf hellen Motiven traegt */
.hero .topscrim,.filmband .topscrim{position:absolute;left:0;right:0;top:0;height:clamp(96px,13vh,150px);z-index:1;
  background:linear-gradient(to bottom,rgba(242,243,239,.92),rgba(242,243,239,.55) 55%,rgba(242,243,239,0))}

/* Classes: Bildfelder laufen am Telefon ueber die volle Spalte, kein Versatz, keine Loecher */
@media (max-width:760px){
  /* Mobil steht dieses Bild immer als letztes in der Spalte — unter Fakten und
     Knopf. Die Zeilenluft des Rasters allein traegt dort nicht.              */
  .g > .pf{grid-column:1/-1!important;width:100%!important;margin-left:0!important;
    margin-top:clamp(46px,11vw,62px)!important}
  .pf,.thread figure{width:100%!important;margin-left:0!important}
  /* Das Portrait auf Atha ist die einzige Ausnahme von den zwei Breiten — ein
     Portrait, keine Szene. Bei 52% wirkte es am Telefon briefmarkig.         */
  .quiet .col > .ph{width:68%!important}
  .pf .cap1,.thread .cap1{text-wrap:pretty}
  .g > .pf + .pf{margin-top:clamp(46px,11vw,62px)!important}
}

/* ═══ Rechtstexte ══════════════════════════════════════════════════════════
   Reduziertester Satz der Seite: das Register der Fussnotenlisten, eine
   Spalte, enges Mass. Die Gliederung kommt allein aus Marke und Abstand.   */
.legal{max-width:30em}
.legal p{font-size:var(--t4);line-height:1.55;max-width:30em}
.legal p + p{margin-top:1.1em}
.legal .lbl.lead{font-size:var(--t4);margin-bottom:clamp(52px,5.4vw,78px)}
.legal .k{font-size:var(--t5);line-height:1.5;text-transform:uppercase;
  letter-spacing:.02em;color:var(--fg);margin-top:clamp(34px,3.6vw,50px)}
.legal .k + p{margin-top:.55em}
/* Marken, die selbst der Eintrag sind (Instagram, LinkedIn): als Liste, nicht
   als zwei Abschnitte. */
.legal .k + .k{margin-top:.5em}
/* Ohne Unterstrich gesetzt — der Strich erscheint erst bei Beruehrung. */
.legal a{text-decoration:none}
.legal a:hover,.legal a:active,.legal a:focus-visible{
  text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.legal .updated{margin-top:clamp(52px,5.4vw,78px);color:var(--mute)}

/* ═══ Wellbeing Menu: Preis ══════════════════════════════════════════════
   Label, dann der erklaerende Satz in Lesegroesse wie ueberall, dann die
   Zahlen. Alles zentriert wie der Rest der Produktseite.                  */
.prices{display:flex;justify-content:center;gap:clamp(44px,6vw,96px);
  margin-top:clamp(34px,3.6vw,52px);text-align:center}
.prices .pr{margin:0}
.prices .pr b{display:block;font-size:clamp(30px,3.2vw,44px);font-weight:300;
  line-height:1.1;letter-spacing:-.022em}
.prices .pr span{display:block;margin-top:.5em;font-size:var(--t4);line-height:1.5;color:var(--mute)}
@media (max-width:760px){
  .prices{display:block}
  .prices .pr + .pr{margin-top:clamp(28px,6.5vw,38px)}
  .prices .pr b{font-size:clamp(28px,7.6vw,34px)}
}

/* Die Schlusszeile im Fuss traegt die Marke — in Tinte, nicht im Nebenton */
.ft .sig{color:var(--fg);font-size:var(--t4);line-height:1.5;letter-spacing:.01em}

/* ═══ Formular im Rechtstext-Register ══════════════════════════════════════
   Eingabefelder stehen auf 16px: alles darunter laesst iOS beim Antippen
   in die Seite hineinzoomen, und der Nutzer landet verschoben.            */
.legal-form{margin-top:clamp(46px,4.8vw,70px);max-width:30em}
.legal-form .k{margin-top:0}
.legal-form label{display:block;margin-top:clamp(22px,2.4vw,32px)}
.legal-form label span{display:block;font-size:var(--t5);line-height:1.5;
  color:var(--mute);margin-bottom:.35em}
.legal-form input,.legal-form textarea{display:block;width:100%;
  font:400 16px/1.55 var(--font);color:var(--fg);background:transparent;border:0;
  border-bottom:1px solid var(--line);padding:0 0 .55em;border-radius:0;-webkit-appearance:none}
.legal-form input:focus,.legal-form textarea:focus{outline:0;border-bottom-color:var(--fg)}
.legal-form textarea{resize:vertical;min-height:5.5em}
.legal-form button{margin-top:clamp(30px,3.2vw,44px);font:400 var(--t4)/1.55 var(--font);
  background:none;border:0;padding:0;color:var(--fg);cursor:pointer;
  text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.legal .note-after{margin-top:clamp(46px,4.8vw,70px)}

/* ═══ Classes — die bildgefuehrte Seite ════════════════════════════════════
   Zwei Baender, je ein Ortswechsel. Titel und Eckdaten stehen im Bild, auf
   derselben linken Kante wie der Text darunter: das Bild hoert auf, der Satz
   geht weiter. Dazwischen Papier. Kein drittes Band, keine Kopfzeile.      */
.filmband{position:relative;height:clamp(400px,46vw,620px);overflow:hidden;background:var(--ph)}
.filmband.sub{height:clamp(320px,33vw,440px)}
.filmband > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.bandtitle{position:absolute;left:0;right:0;top:clamp(104px,20%,196px);z-index:2}
.bandtitle .bt{font-size:var(--t2);font-weight:300;line-height:1.2;letter-spacing:-.022em}
.bandtitle .bd{margin-top:.9em;font-size:var(--t4);line-height:1.55}
/* Helles Motiv: die Zeilen stehen in Tinte. Weiss auf hellgrauem Korn ist das,
   was auf der Live-Seite fast verschwindet.                                 */
.filmband.ink .bandtitle{color:var(--fg)}
.filmband.onimg .bandtitle{color:var(--on-img)}
.filmband.onimg::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to bottom,rgba(0,0,0,.40),rgba(0,0,0,0) 62%)}

.classtext{max-width:33em}
.joinline{margin-top:1.5em}
.wayline{margin-top:clamp(26px,2.8vw,38px);font-size:var(--t4);line-height:1.55;
  color:var(--mute);max-width:30em}

/* Reservierung, keine Buchung: zwei Felder auf der Textkante, ein Knopf. */
.reserve{margin-top:clamp(30px,3.2vw,44px);display:flex;flex-wrap:wrap;align-items:flex-end;
  gap:clamp(16px,1.8vw,24px) clamp(20px,2.2vw,30px);max-width:32em}
.reserve .fld{flex:1 1 168px;min-width:146px}
.reserve label{display:block;font-size:var(--t5);line-height:1.5;text-transform:uppercase;
  letter-spacing:.02em;color:var(--fg);margin-bottom:.55em}
.reserve input{display:block;width:100%;font:400 16px/1.5 var(--font);color:var(--fg);
  background:transparent;border:0;border-bottom:1px solid var(--line);padding:0 0 9px;
  border-radius:0;-webkit-appearance:none}
.reserve input:focus{outline:none;border-bottom-color:var(--fg)}
button.pill{color:var(--bg);-webkit-text-fill-color:var(--bg)}
.reserve button{flex:0 0 auto}

.chapter-close{margin-top:clamp(40px,4.4vw,64px)}

@media (max-width:760px){
  .filmband{height:auto;aspect-ratio:4/5}
  .filmband.sub{height:auto;aspect-ratio:1/1}
  .bandtitle{top:auto;bottom:clamp(26px,6vw,40px)}
  .filmband.ink::after{content:"";position:absolute;inset:0;z-index:1;
    background:linear-gradient(to top,rgba(242,243,239,.78),rgba(242,243,239,0) 46%)}
  .classtext,.wayline,.reserve{max-width:none}
  .reserve button{flex:1 1 100%;justify-content:center}
}

/* Kapitelraster auf Classes: Zeile 1 Text, Zeile 2 Handlung, rechts ueber beide
   Zeilen das Detail, darunter das Abschlussbild. Explizit gesetzt, damit am
   Telefon die DOM-Reihenfolge Text · Detail · Handlung · Abschluss greift —
   sonst stossen die beiden Bilder am Ende aneinander.                        */
.chgrid{row-gap:0}
.chgrid > .chx.a{grid-column:1/span 6;grid-row:1}
.chgrid > .chdetail{grid-column:8/span 5;grid-row:1/span 2;align-self:start;margin:0}
.chgrid > .chx.b{grid-column:1/span 6;grid-row:2;margin-top:clamp(30px,3.2vw,44px)}
.chgrid > .chclose{grid-column:1/span 6;grid-row:3;margin:clamp(52px,5.6vw,84px) 0 0}
@media (max-width:760px){
  .chgrid > .chx.a,.chgrid > .chdetail,.chgrid > .chx.b,.chgrid > .chclose{
    grid-column:1/-1;grid-row:auto}
  .chgrid > .chdetail{margin:clamp(36px,9vw,52px) 0 0}
  .chgrid > .chx.b{margin-top:clamp(36px,9vw,52px)}
  .chgrid > .chclose{margin-top:clamp(44px,11vw,62px)}
}
/* Das Band nach einem Kapitel braucht Luft — sonst stoesst die Bildunterschrift
   des Abschlussbildes an die Oberkante des naechsten Bandes. */
.sec + .filmband{margin-top:clamp(76px,9vw,128px)}

/* Titelkarte tief im Bild, hell: das Motiv ist oben hellgrau (Navigation in
   Tinte unter dem hellen Schleier), unten traegt ein weicher Verlauf die
   weissen Zeilen. Eine Kante bleibt es trotzdem.                            */
.filmband.lift .bandtitle{top:auto;bottom:clamp(40px,8%,82px);color:var(--on-img)}
.filmband.lift .bt{font-size:var(--t1);letter-spacing:-.026em}
.filmband.lift .bd{font-size:var(--t3);line-height:1.5}
.filmband.lift::after{background:linear-gradient(to top,rgba(0,0,0,.54),
  rgba(0,0,0,.14) 36%,rgba(0,0,0,0) 62%)}

/* Das Intro der Stunde traegt die Seite — Display, nicht Lesegroesse. */
.classtext{font-size:var(--t2);font-weight:300;line-height:1.32;letter-spacing:-.016em;
  max-width:24em}
.facts a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* Reservierung im Overlay, nicht auf der Seite. Netlify liest Formulare beim
   Deploy aus dem HTML — unsichtbar funktioniert genauso.                    */
dialog.rsv{border:0;padding:clamp(28px,3vw,40px);background:var(--bg);color:var(--fg);
  width:min(400px,calc(100vw - 2*var(--m)));box-shadow:0 18px 60px rgba(26,24,22,.22)}
dialog.rsv::backdrop{background:rgba(26,24,22,.46)}
.rsv .reserve{display:block;max-width:none;margin-top:0}
.rsv-h{font-size:var(--t3);font-weight:500;line-height:1.4}
.rsv-s{font-size:var(--t4);line-height:1.55;color:var(--mute);margin-top:.55em}
.rsv .fld{margin-top:clamp(22px,2.4vw,30px)}
.rsv-act{display:flex;align-items:center;gap:20px;margin-top:clamp(26px,2.8vw,36px)}
.rsv-x{background:none;border:0;padding:0;cursor:pointer;color:var(--mute);
  font:400 14px/1.5 var(--font)}
@media (max-width:760px){.classtext{max-width:none}}
/* In diesem Kapitel stehen die Fakten direkt ueber der Handlung — der grosse
   Abstand der Buchungszeile stammt aus dem alten Satz und traegt hier nicht. */
.chgrid .act-row{margin-top:clamp(40px,4.4vw,60px)}
/* Ein Textblock, eine Stufe ueber der Lesegroesse — dieselbe Vorlaufgroesse wie
   auf Home. Keine zusaetzliche Stufe fuer diese Seite.                       */
.class-lede{font-size:clamp(17px,1.35vw,19px);line-height:1.5;max-width:34em}
.class-lede + .facts{margin-top:clamp(30px,3.2vw,44px)}
.thread .act-row{margin-top:clamp(44px,4.8vw,66px)}
@media (max-width:760px){.class-lede{max-width:none}}
/* Auf Contact ist die Marke der Kopf der Zeile darunter, nicht der Kopf eines
   Abschnitts — der grosse Abstand der Rechtstexte laesst sie isoliert stehen. */
.legal .lbl.lead.tight{margin-bottom:clamp(18px,2vw,26px)}

/* ═══ Classes am Telefon: zwei Stufen statt sieben ═════════════════════════
   Zwischen Kapiteln und vor einer randlosen Flaeche die grosse Stufe, innerhalb
   eines Blocks die kleine. Die Werte standen vorher aus vier verschiedenen
   Regeln zusammen und ergaben 22, 26, 43, 52, 62, 72, 76 und 100 Pixel.     */
@media (max-width:760px){
  .thread{padding-top:60px}
  .thread .facts{margin-top:30px}
  .thread .act-row{margin-top:40px}
  .thread .g > .pf{margin-top:32px!important}   /* + Zeilenluft des Rasters = 48 */
  .g > .pf{margin-top:32px!important}
  .chapters{padding-top:84px}
  .chapters + .exhale{margin-top:34px}
  .exhale + .sec{padding-top:56px;padding-bottom:0}
  .exhale + .sec + .sec{padding-top:48px}
  .after-pair{margin-top:30px!important}
  .after-pair .act-row{margin-top:40px}
}
/* Die Listen in der Fusszeile: 1,2 ist der Durchschuss einer Zeile, nicht der
   einer Liste — am Rechner klebten die Kundennamen aneinander. Mobil steht der
   Wert schon auf 1,65. */
.ft .cols p{line-height:1.45}

/* ═══ The Class — vier Takte ═══════════════════════════════════════════════
   Vollbild · die Stimme allein · Diptychon · Fakten und die Tuer.           */
.filmband.tall{height:min(82vh,780px)}
.filmband.tall .bt{text-transform:uppercase;letter-spacing:0;font-size:var(--t1)}
.filmband.tall .bd{font-size:var(--t3);line-height:1.5;margin-top:1em}

/* Die einzige Stelle der Seite, an der eine Stimme spricht statt Information —
   deshalb steht sie allein, mit Luft auf beiden Seiten. */
.voiceblock{padding-block:clamp(78px,9vw,136px)}
.voice{font-size:var(--t2);font-weight:300;line-height:1.38;letter-spacing:-.013em;
  max-width:26em;margin:0}

/* Diptychon: gleiche Breite, verschiedene Hoehen, vertikal versetzt. */
.dip > .dipa{grid-column:1/span 4;margin:0}
.dip > .dipb{grid-column:6/span 7;margin:clamp(96px,11vw,150px) 0 0}
.dipsec + .sec{padding-top:clamp(72px,8vw,120px)}

@media (max-width:760px){
  .filmband.tall{height:84svh;min-height:520px;aspect-ratio:auto}
  .voiceblock{padding-block:clamp(56px,14vw,78px)}
  .voice{max-width:none}
  .dip > .dipa,.dip > .dipb{grid-column:1/-1}
  .dip > .dipb{margin-top:48px}
  .dipsec + .sec{padding-top:56px}
}
@media (max-width:760px){
  /* Dieselben zwei Stufen wie im Rest der Seite: 48 im Block, 56 zum Abschnitt. */
  .dip > .dipb{margin-top:32px}   /* + Zeilenluft des Rasters = 48 */
  .act-row{margin-top:40px}
}
/* Der Vorgabewert des Browsers fuer figure ist margin:1em 40px — das eine em
   unten schiebt den naechsten Abschnitt um 16 Pixel weg. */
.dip figure{margin-bottom:0}
@media (max-width:760px){.dipsec + .sec{padding-top:40px}}
/* Ein Band statt eines Hochbilds: es legt sich unter die Ueberschrift wie eine
   Linie und versucht nicht, Hero zu sein. Classes bleibt die bildgefuehrte Seite. */
.plate.band{height:auto;aspect-ratio:21/9}
@media (max-width:760px){.plate.band{aspect-ratio:16/9}}