@font-face{font-family:"Inter";src:url("../fonts/inter-latin-var.woff2") format("woff2-variations");
  font-weight:100 900;font-display:swap}
/* Studio Atha — Angebotsseite Hotels · 08.10.2026 */

@font-face{font-family:"Canela";src:url("../fonts/canela-300.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Canela";src:url("../fonts/canela-300-italic.woff2") format("woff2");font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:"Artico";src:url("../fonts/artico-300.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Artico";src:url("../fonts/artico-400.woff2") format("woff2");font-weight:400;font-display:swap}

:root{
  --paper:#FAF8F2; --tone:#F2EFE6; --ink:#2A1C14; --deep:#17120E; --onpic:#FAF8F2;
  --hair:rgba(42,28,20,.17); --mute:rgba(42,28,20,.55);

  --edge:clamp(22px,4vw,76px);
  --bar:clamp(52px,4.4vw,72px);
  --top:calc(env(safe-area-inset-top,0px) + var(--bar));
  --col:29em;

  --t-mid:clamp(23px,1.95vw,29px);
  --t-text:clamp(16px,1.3vw,19px);
  --t-lab:clamp(10.5px,.78vw,11.5px);

  --lead:calc(var(--t-mid) * 1.45);
  --air:calc(var(--t-mid) * 5.4);

  --voice:"Canela",Georgia,serif;
  --work:"Inter",Helvetica,Arial,sans-serif;
  --order:"Artico",Helvetica,Arial,sans-serif;

  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html{background:var(--deep)}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--work);font-weight:400;
  font-size:var(--t-text);line-height:1.5;letter-spacing:-.005em;
  font-optical-sizing:auto;-webkit-font-smoothing:antialiased;overflow-x:hidden}
p,h1,h2,ul,li,figure,figcaption{margin:0;padding:0;font:inherit;list-style:none}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:1px solid currentColor;outline-offset:4px}

/* Drei Stimmen: Canela nur im Hero, Artico nur in Labels, Inter für alles Gelesene */
.hero-t{font-family:var(--voice);font-weight:300;font-size:clamp(36px,5vw,72px);
  line-height:1;letter-spacing:-.024em;max-width:12em}
.mid{font-weight:300;font-size:var(--t-mid);line-height:1.28;letter-spacing:-.012em}
.lab{font-family:var(--order);font-weight:400;font-size:var(--t-lab);
  letter-spacing:.22em;text-transform:uppercase;line-height:1.4;color:var(--mute)}
.u{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em}

.bar{position:fixed;left:0;right:0;top:0;z-index:12;display:flex;align-items:center;
  justify-content:space-between;height:calc(var(--bar) + env(safe-area-inset-top,0px));
  padding:env(safe-area-inset-top,0px) var(--edge) 0;
  background:var(--paper);transition:background .3s,color .3s}
.on-dark .bar{background:linear-gradient(180deg,rgba(23,18,14,.72),rgba(23,18,14,0));color:var(--onpic)}
.on-dark .bar .lab{color:rgba(250,248,242,.62)}
.on-tone .bar{background:var(--tone)}

/* ── 1 · Hero ── */
.hero{position:relative;height:auto;min-height:100svh;background:var(--deep);color:var(--onpic);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:calc(var(--top) + 2.5vh) var(--edge) calc(var(--air) * .32);overflow:hidden}
.room{position:absolute;inset:0;z-index:0}
.room video{width:100%;height:100%;object-fit:cover;object-position:50% 44%;
  filter:sepia(.45) saturate(.42) brightness(.26) contrast(1.2)}
.room::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 54% 58% at 50% 62%,rgba(23,18,14,.45),rgba(23,18,14,.94) 58%,var(--deep) 80%)}
.glow{position:absolute;left:50%;top:56%;transform:translate(-50%,-50%);z-index:1;
  width:min(86vh,94vw);aspect-ratio:1;pointer-events:none;
  background:radial-gradient(circle,rgba(226,201,166,.2),rgba(226,201,166,.05) 44%,transparent 68%)}
.hero h1{position:relative;z-index:3}
.hero .pr{position:relative;z-index:3;margin-top:clamp(22px,2vw,28px);text-wrap:balance;
  color:rgba(250,248,242,.62);font-size:clamp(14.5px,1.05vw,16.5px);max-width:32em}
.act{position:relative;z-index:3;margin-top:clamp(34px,3.2vw,44px)}
.pill{display:inline-flex;align-items:center;gap:.6em;background:var(--paper);color:var(--ink);
  padding:.85em 1.5em;border-radius:99px;font-size:clamp(14px,1vw,15.5px);line-height:1;
  transition:transform .25s}
.pill:hover{transform:translateY(-1px)}
.dev{position:relative;z-index:3;margin-top:clamp(58px,6.4vw,96px);width:clamp(206px,15vw,250px);flex:0 0 auto}
.ph-dev{position:relative;border-radius:clamp(24px,2vw,34px);background:#0A0806;padding:clamp(5px,.45vw,8px);
  box-shadow:0 0 0 1px rgba(250,248,242,.11),0 44px 100px -28px rgba(0,0,0,.92),0 0 130px -8px rgba(226,201,166,.26)}
.ph-dev::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;pointer-events:none;
  border-radius:0 0 clamp(24px,2vw,34px) clamp(24px,2vw,34px);
  background:linear-gradient(180deg,rgba(23,18,14,0),rgba(23,18,14,.86) 72%,var(--deep))}
.scr{position:relative;border-radius:clamp(19px,1.6vw,27px);overflow:hidden;aspect-ratio:390/700;background:#FAF8EE}
.scr img{position:absolute;inset:0;object-position:50% 0;opacity:0;transition:opacity .85s ease}
.scr img.on{opacity:1}

/* ── Mitte: eine Spalte, zentriert ── */
/* Rhythmus über Kontrast, nicht über gleiche Schritte: eine Aussage bekommt
   viel Luft, was zu ihr gehört steht eng dran. Nur zwei Zustände. */
.mitte{padding:calc(var(--air) * .5) var(--edge) 0;text-align:center}
.mitte + .mitte{padding-top:calc(var(--air) * 1.2)}
.mitte.tail{padding-bottom:0}
/* Die Zeile nach den Karten steht an derselben Kante wie der Abschnitt davor —
   zentriert war sie eine zweite Bühne direkt vor dem Band. */
.mitte > * + *{margin-top:var(--lead)}
.mitte .dot{margin:0 auto}
.mitte .mid{max-width:24em;margin-left:auto;margin-right:auto;text-wrap:balance}
.mitte p:not(.mid){max-width:30em;margin-left:auto;margin-right:auto}

.dot{width:calc(var(--t-mid) * .5);height:calc(var(--t-mid) * .5)}
.dot svg{display:block;width:100%;height:100%}

/* ── 3 · Branded ── */
.pair{display:flex;justify-content:center;align-items:stretch;gap:clamp(22px,3vw,52px);
  margin-top:calc(var(--lead) * 1.5)}
.pair figure{width:clamp(146px,13.4vw,196px);display:flex;flex-direction:column;align-items:center}
.pair .lph{width:100%;border-radius:clamp(15px,1.3vw,21px);background:#D9D3C6;padding:clamp(3px,.3vw,5px);
  box-shadow:0 1px 2px rgba(42,28,20,.08),0 20px 42px -30px rgba(42,28,20,.6)}
.pair img{display:block;width:100%;height:auto;border-radius:clamp(12px,1.1vw,17px)}
/* Zwei Zeilen Platz, damit ein Umbruch die beiden Knöpfe nicht versetzt */
.pair figcaption{margin-top:.8em;text-align:center;min-height:2.8em}
.door{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  margin-top:clamp(20px,2.4vw,30px);padding:.82em 1.35em;border-radius:99px;
  font-size:clamp(13px,.95vw,14.5px);line-height:1;letter-spacing:-.004em;
  white-space:nowrap;transition:transform .25s}
.door:hover{transform:translateY(-1px)}
.door.light{background:#FAF8EE;color:var(--ink);box-shadow:inset 0 0 0 1px rgba(42,28,20,.3)}
.door.dark{background:#1E2B26;color:#F1EEE3}
.mitte .house{max-width:30em;margin:calc(var(--lead) * 2.4) auto 0;color:rgba(42,28,20,.82)}

/* ── Abschnitt an der linken Kante ── */
.sec{padding:var(--air) var(--edge) 0}
/* Hier wechselt die Seite von zentrierter Mitte auf linke Kante — der stärkste
   Schnitt der Seite, also der größte Abstand. */
.mitte.tail + .sec{padding-top:calc(var(--air) * 1.15)}
.sec > * + *{margin-top:var(--lead)}
.sec p{max-width:var(--col)}
.sec .mid{max-width:18em}
.sec > .lab{display:block}
.sec > .lab + *{margin-top:var(--lead)}
/* Die Atemzeile ist eine eigene Aussage, der Erklärtext eine andere Ebene */
.sec .mid + p{margin-top:calc(var(--lead) * .9)}

/* ── 4 · Karten ── */
.cards{display:flex;align-items:flex-start;gap:clamp(14px,1.6vw,30px);overflow-x:auto;
  margin:calc(var(--lead) * .8) 0 0;padding:0 var(--edge);scroll-padding-left:var(--edge);
  scroll-snap-type:x proximity;scrollbar-width:none}
.cards::-webkit-scrollbar{display:none}
.cards::after{content:"";flex:0 0 1px;margin-right:var(--edge)}
.cards figure{flex:0 0 clamp(230px,23vw,380px);scroll-snap-align:start}
.cards img{height:auto;aspect-ratio:1135/1600;box-shadow:0 0 0 1px rgba(42,28,20,.1)}
/* Anmerkung, keine Beschilderung: klein, in Klammern, im Lesealphabet —
   identisch mit dem Produktpapier. */
.cards figcaption{margin-top:calc(var(--lead) * .42);font-family:var(--work);
  font-weight:400;font-size:calc(var(--t-text) * .66);letter-spacing:0;
  text-transform:none;line-height:1.4;color:var(--mute)}
/* Zwei Formate, eine Mechanik: die kleine Reihe steht im echten Verhältnis zur
   großen — 81 % der Breite, 37 % der Höhe. Die freie Fläche rechts trägt die
   Größeninformation; auf volle Breite gezogen wären beide Formate gleich groß. */
/* Eine Zeile je Reihe statt Label plus Beschreibung — die Zone hatte elf Ebenen */
.cards-lab{display:block;padding:calc(var(--air) * .58) var(--edge) 0}
.cards-line{padding:calc(var(--lead) * .4) var(--edge) 0;max-width:36em}
.cards-note{padding:calc(var(--air) * .62) var(--edge) 0;max-width:36em}
/* Sieben Kacheln: erst die Motive, dann die Farben — die Reihe scrollt jetzt
   wie die A6-Reihe darüber, statt kurz zu enden. */
.cards.small{overflow-x:auto}
.cards.small figure{flex:0 0 clamp(186px,18.6vw,308px)}
.cards.small img{aspect-ratio:85/55}
/* Cremefarbene Karten auf cremefarbenem Papier brauchen ihre Kante — das ist
   keine Linie im Layout, das ist der Rand des Gegenstands. */
.cards img{outline:1px solid rgba(42,28,20,.08);outline-offset:-1px}
@media (max-width:860px){
  .cards.small{overflow-x:auto}
  .cards.small figure{flex:0 0 55%}
}

/* ── 5 · Zäsur: ein Band, keine Fläche ── */
/* Kapitelwechsel: davor ein ganzes --air, danach rückt der Preis dicht heran —
   er ist die Antwort auf die Zeile, nicht das nächste Thema. Zentriert, damit
   das Band als Überschrift liest und nicht als Leiste mit Text in der Ecke. */
.cut{margin-top:calc(var(--air) * 1.3);background:var(--deep);color:var(--paper);
  padding:calc(var(--air) * .55) var(--edge);display:flex;align-items:center;
  justify-content:center;text-align:center;min-height:25svh}
.cut .mid{max-width:16em;text-wrap:balance}

/* ── 6 · Preis ── */
.price{background:var(--tone);padding:calc(var(--air) * .6) var(--edge) var(--air)}
.price > .lab{display:block}
.price > .lab + .mid{margin-top:var(--lead);max-width:18em}
.conf{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,420px);
  gap:var(--lead) clamp(48px,7vw,130px);align-items:start;margin-top:var(--lead);max-width:1180px}
.grp{margin-top:var(--lead)}
.grp:first-child{margin-top:0}
.grp .lab{display:block;margin-bottom:calc(var(--lead) * .4)}
.grp p{margin-bottom:.9em}
.grp .sub{margin:calc(var(--lead) * .5) 0 0;color:var(--mute);font-size:calc(var(--t-text) * .9)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
/* Alles Bedienbare steht auf der hellen Fläche, der Grund bleibt --tone */
.chips button{background:var(--paper);border:1px solid rgba(42,28,20,.26);
  padding:.5em .95em;cursor:pointer;border-radius:0;line-height:1.2;
  color:inherit;font:inherit;transition:border-color .2s,background .2s}
.chips button:hover{border-color:rgba(42,28,20,.5)}
.chips button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.chips button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.grp .add{display:flex;align-items:baseline;justify-content:space-between;gap:1em;flex-wrap:wrap;
  margin:calc(var(--lead) * .5) 0 0;max-width:15em}
.grp .add input{width:5.4em;background:var(--paper);border:1px solid rgba(42,28,20,.26);
  color:inherit;text-align:right;padding:.5em .7em;font-variant-numeric:tabular-nums;
  font:inherit;border-radius:0;transition:border-color .2s,box-shadow .2s;
  -moz-appearance:textfield}
.grp .add input[type="date"]{width:10.5em}
.grp .add input:hover{border-color:rgba(42,28,20,.45)}
.grp .add input:focus{outline:0;border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.grp .add input::-webkit-outer-spin-button,
.grp .add input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

.amt{margin-bottom:0;font-size:calc(var(--t-mid) * 1.16)}
.lines-sum{margin-top:.4em}
.first{margin-top:.4em}
/* Dritter Schritt: Auswahl — Preis — Anfrage. Die Linie muss den Wechsel tragen,
   sonst liest NAME wie eine weitere Zeile des Preisblocks. */
.form{margin-top:calc(var(--lead) * 2)
  ;padding-top:calc(var(--lead) * 1.55);border-top:1px solid var(--hair)}
.form label{display:block}
.form label + label{margin-top:calc(var(--lead) * .5)}
.form .lab{display:block;margin-bottom:calc(var(--lead) * .4)}
/* Eingabefelder brauchen eine Fläche, keine Linie: der Preisblock steht auf --tone,
   das Feld auf --paper liest sofort als „hier schreibt man rein". Eine Haarlinie
   allein ist editorial richtig und wird nicht benutzt. */
.form input,.form textarea{display:block;width:100%;background:var(--paper);
  border:1px solid rgba(42,28,20,.26);padding:.72em .8em;border-radius:0;resize:none;
  color:inherit;font:inherit;transition:border-color .2s,box-shadow .2s}
.form input:hover,.form textarea:hover{border-color:rgba(42,28,20,.45)}
.form input:focus,.form textarea:focus{outline:0;border-color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--ink)}
.form textarea{min-height:5.2em}
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.btn{display:inline-block;background:var(--ink);color:var(--paper);border:0;
  padding:.8em 1.5em;cursor:pointer;line-height:1.2;margin-top:var(--lead)}
.btn::after{content:"\2192";margin-left:.5em}
.after{margin-top:1em}
.form + .after{margin-top:calc(var(--lead) * 1.15)}
/* Der Haftungssatz steht unter dem „Or write to" und darf nicht mitlesen */
.after.fine{margin-top:calc(var(--lead) * .9);color:var(--mute);font-size:calc(var(--t-text) * .88)}
/* Die Zeile gehört zum Abschnitt, nicht hinter die Galerie */
.after-card{margin-top:calc(var(--lead) * 1.3)}

/* ── Schritte ── */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,56px);max-width:960px}
.steps-sec{padding-top:0}
/* Zwei getrennte Blöcke: erst der Ablauf, dann die Auskunft */
.facts > .lab.lab-zone{display:block;padding:var(--air) var(--edge) 0}
.lab-zone + .dl{padding-top:var(--lead)}
.steps-sec .note{margin-top:var(--lead);color:var(--mute);max-width:36em}
.steps .n{display:flex;align-items:center;justify-content:center;
  width:calc(var(--t-text) * 2.2);height:calc(var(--t-text) * 2.2);border-radius:50%;
  background:var(--deep);color:var(--paper);font-weight:300;font-size:var(--t-text);
  line-height:1;margin-bottom:calc(var(--lead) * .6)}

/* ── Unten: die Fakten ── */
.facts{margin-top:0}
.facts > .lab{display:block;padding:0 var(--edge)}
.facts .sec{padding-top:calc(var(--air) * .6)}
.facts > .lab + .sec{padding-top:var(--lead)}
.facts p{max-width:var(--col)}
/* Die Fakten stehen nebeneinander, sonst wird der Fuß eine endlose schmale Spalte */
/* Zwei Felder, nicht fünf Inseln: beide an einer Kante, gleicher Abstand oben */
/* Die Fakten als Liste: links worum es geht, rechts was gilt. Ein Schriftgrad,
   kein Versal-Label, keine Haarlinien — man liest es wie eine Auskunft, nicht wie
   eine gestaltete Seite. Das ist die ruhige Zone nach dem Verkauf. */
.dl{padding:var(--lead) var(--edge) 0}
.dl > div{display:grid;grid-template-columns:minmax(0,10.5em) minmax(0,36em);
  gap:0 clamp(22px,3vw,54px);padding-top:calc(var(--lead) * 1.1)}
.dl > div:first-child{padding-top:0}
.dl .k{font-weight:500}
.dl .v p{max-width:36em}
.dl .v p + p{margin-top:.45em}

/* Atha bricht die Spalte: die Bilder stehen außerhalb der Textbreite.
   Die Reihe trägt ein Bild und ebenso drei — mehr Motive kommen einfach dazu. */
/* Editorial statt Kachelreihe: oben die Arbeit und die Szene als Paar an einer
   Unterkante, darunter der Text mit dem Porträt daneben — das Bild der Person
   steht bei dem Absatz, der von ihr handelt. */
.atha figure{margin:0}
.atha img{display:block;width:100%;height:auto;object-fit:cover}
/* Zwei Bilder, gleiche Höhe, über die ganze Textbreite — ein Atemzug, keine
   Komposition. Darunter der Text in derselben Ruhe wie die Liste darüber. */
.facts .sec.atha{padding-top:calc(var(--air) * 1.6)}
/* Eine Fläche statt drei Bilder: ein großes trägt, zwei stapeln sich daneben,
   bündig und ohne Zwischenraum. Die Ruhe kommt aus der geschlossenen Form. */
.atha-top{display:grid;grid-template-columns:repeat(3,1fr);
  gap:2px;margin-top:var(--lead);margin-right:calc(var(--edge) * -1)}
.atha-top figure{min-height:0;overflow:hidden;aspect-ratio:3/4}
.atha-top img{width:100%;height:100%;object-fit:cover}
/* Die beiden Porträts werden hoch beschnitten — Gesicht nach oben halten */
.atha-top figure:nth-child(2) img{object-position:50% 6%}
.atha-top figure:nth-child(3) img{object-position:50% 8%}
/* Nach dem Atemzug wieder Abstand, sonst kleben die Fragen am Bild */
.facts .atha + .sec{padding-top:calc(var(--air) * 1.6)}
.atha-words{margin-top:calc(var(--lead) * 1.3);max-width:36em}
.atha-words p + p{margin-top:.45em}
.atha .atha-gal + p{margin-top:var(--lead)}

/* Das Gespräch ist kein Abschnitt unter Abschnitten: eigene Fläche, ein Gesicht,
   ein Link. Es trennt sich vom Papier, ohne eine zweite Handlungsaufforderung zu sein. */
/* Kein Bild, keine Fläche, keine Überschrift: ein großer Satz an der Spine und
   ein Link darunter. Das Porträt lebt in der Galerie, hier spricht nur die Seite. */
.talk{padding:var(--air) var(--edge)}
.talk-say{font-weight:300;font-size:clamp(25px,2.7vw,40px);line-height:1.2;
  letter-spacing:-.016em;max-width:24em}
.talk-go{margin-top:calc(var(--lead) * 1.2)}
@media (max-width:860px){
  .cols{grid-template-columns:1fr;padding-top:0}
  .cols .sec{padding:calc(var(--air) * .6) 0 0}
  .dl > div{grid-template-columns:1fr;gap:0}
  .dl .k{margin-bottom:.35em}
  /* Mobil wird das Triptychon eine Reihe zum Wischen: Raum zuerst, Judith dritte —
     nicht auf den ersten Blick, aber da. Nichts wird mehr versteckt. */
  .atha-top{display:flex;overflow-x:auto;gap:2px;
    margin-right:calc(var(--edge) * -1);
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;-ms-overflow-style:none}
  .atha-top::-webkit-scrollbar{display:none}
  .atha-top figure{flex:0 0 64%;scroll-snap-align:start}
  .facts > .lab.lab-zone{padding-top:calc(var(--air) * .7)}
  .talk-say{font-size:clamp(23px,6.4vw,31px)}
  /* Mobil war der Sprung vom Call zu How it works mehr als doppelt so groß wie
     der von How it works zu Details — der Knopf stand allein im Feld. */
  .talk{padding-bottom:calc(var(--air) * .55)}
  .talk{grid-template-columns:1fr;gap:var(--lead);justify-items:start}
  .talk-pic{max-width:56%}
}

/* ── FAQ ── */
.faq{max-width:var(--col)}
.faq details{border-bottom:1px solid var(--hair)}
.faq details:first-child{border-top:1px solid var(--hair)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;
  gap:20px;padding:calc(var(--lead) * .5) 0}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq .a{padding:0 0 calc(var(--lead) * .6)}

/* ── Schluss ── */
.end{margin-top:var(--air);background:var(--deep);color:var(--paper);min-height:86svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:var(--air) var(--edge) calc(var(--air) * 1.2);position:relative}
.end .dot{margin-bottom:var(--lead)}
.end .lab{color:rgba(250,248,242,.78)}
.end .lines p + p{margin-top:.5em}
.end .closer{position:absolute;left:0;right:0;bottom:calc(36px + env(safe-area-inset-bottom,0px));
  color:rgba(250,248,242,.55)}

@media (max-width:860px){
  :root{--col:100%}
  .hide-s{display:none}
  /* Der Hero darf höher werden als der Schirm — entscheidend ist, dass unter
     dem Telefon dunkle Fläche steht und es nicht an der Kante abgeschnitten wird. */
  .hero{padding:calc(var(--top) + 3vh) var(--edge) calc(var(--air) * .45);
    height:auto;min-height:100svh}
  .hero h1{font-size:clamp(32px,9.4vw,46px);max-width:none}
  .hero .pr{margin-top:26px}
  .act{margin-top:38px}
  .dev{width:min(56vw,246px);margin-top:66px}
  .pair{gap:14px}
  .door{padding:.8em 1.4em;font-size:clamp(12px,3.2vw,13.5px)}
  .price > .lab + .mid{max-width:none}
  .conf{margin-top:calc(var(--lead) * 1.5)}
  .end{min-height:76svh;padding-bottom:calc(var(--air) * 1.5)}
  /* Abschnittsaussagen dürfen auf dem Telefon kleiner sein als auf dem Schirm */
  .sec .mid{font-size:clamp(21px,5.6vw,26px)}
  .cards{margin-top:var(--lead)}
  .after-card{margin-top:var(--lead)}
  .cards figure{flex:0 0 68%}
  .cut{min-height:0;padding:calc(var(--air) * .7) var(--edge)}
  .conf{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:0}
  .steps > div + div{margin-top:var(--lead)}

  /* Einspaltig wird aus Eingabe und Ergebnis eine Liste — das Ergebnis setzt sich ab.
     Die Gruppen rücken etwas zusammen, damit Auswahl und Preis auf einen Bildschirm passen. */
  .grp{margin-top:calc(var(--lead) * .82)}
  .conf > div + div{margin-top:calc(var(--lead) * 1.1);padding-top:calc(var(--lead) * 1.3);
    border-top:1px solid var(--hair)}

  /* Tippziele: 44 px ist die Untergrenze, die eine Fingerkuppe sicher trifft */
  .chips button,.pill,.door,.btn{min-height:44px}
  .chips button{padding:.5em 1em}
  .form input,.form textarea{padding:.8em .8em;min-height:48px}
  .grp .add input{padding:.6em .7em;min-height:44px}
}
@media (prefers-reduced-motion:reduce){
  .scr img{transition:none}
  .room{display:none}
  .pill,.door{transition:none}
}

/* Platzhalter dürfen nicht wie eingetragener Text lesen */
.form input::placeholder,.form textarea::placeholder{color:rgba(42,28,20,.38);opacity:1}

/* Zweiter Einstieg nach der FAQ: wer unten überzeugt ist, soll nicht zurücksuchen */
/* Der Knopf gehört zu den Fragen, nicht zu einem neuen Kapitel — näher heran,
   damit er nach dem letzten Zweifel als Antwort liest statt als Nachtrag. */
.facts .sec.close{padding-top:calc(var(--air) * .85)}
.sec.close{text-align:center}
.pill.dark{background:var(--ink);color:var(--paper)}

/* ── Rechtsseiten ── */
/* Ein Schnitt, ein Farbton, ein Grad. Die Gliederung macht allein der Abstand —
   knapp genug, dass es als Fließtext liest, nicht als Formular. */
.legal{max-width:34em;margin:0 auto;color:var(--ink);
  padding:calc(var(--top) + var(--lead) * 1.4) var(--edge) calc(var(--air) * .8)}
.legal h1,.legal h2{font-family:var(--work);font-size:var(--t-text);font-weight:400;
  letter-spacing:0;text-transform:none;line-height:inherit}
.legal h1{margin-bottom:calc(var(--lead) * 1.1)}
.legal h2{margin:calc(var(--lead) * 1.4) 0 calc(var(--lead) * .3)}
.legal p{max-width:none}
.legal p + p{margin-top:.8em}
.legal .note{color:inherit;font-size:inherit;border:0;padding:0;margin-top:.8em}
.legal .after{margin-top:calc(var(--lead) * 2);color:inherit}
.end-s{min-height:0;padding:calc(var(--air) * .5) var(--edge)}
.end .legal-links{margin-top:var(--lead)}
.end .legal-links a{color:rgba(250,248,242,.55)}
.end .legal-links span{color:rgba(250,248,242,.3);margin:0 .5em}
/* Das Produktblatt steht in eigener Zeile unter den Rechtslinks — auf dem
   Telefon wäre es als dritter Mittelpunkt in der Zeile nicht mehr lesbar. */
.end .sheet-link{margin-top:calc(var(--lead) * .5)}
.end .sheet-link a{color:rgba(250,248,242,.55);display:inline-flex;align-items:center;gap:.7em}
/* Der Pfeil liegt in der Zeile, nicht darunter: im Fuß ist alles einzeilig, und ein
   Pfeil auf eigener Zeile liest als Schmuck, nicht als Download. */
.end .sheet-link .sheet-arrow{width:.66em;height:.78em;flex:0 0 auto;padding:0;
  overflow:visible;transform:translateY(.04em)}
/* Die Knöpfe unter den Telefonen bekommen dieselbe Luft wie der im Hero */
.door{padding:.85em 1.5em}


/* ══ Druck und PDF ════════════════════════════════════════════════════════════
   Die Seite ist zum Lesen im Browser gebaut; gedruckt wird sie eine Auskunft,
   keine zweite Bühne. Alles Bewegte, alles Dunkle und alles Anklickbare fällt
   weg, die Reihen brechen um, die Fragen stehen offen. Der Dateiname kommt
   vom <title>. */
@media print{
  @page{margin:16mm 14mm}
  :root{--edge:0mm;--air:9mm;--top:0px}
  html,body{background:#fff !important;color:#17120E !important}
  body{font-size:10pt;line-height:1.5}
  /* Das Weihnachtsband bleibt draußen: es ist am Schirm fixiert und druckt sich
     sonst auf jede Seite, und ein gesichertes PDF trüge die Frist noch im Januar. */
  .top,.bar,.promo,.room,.glow,.dev,.act,.form,.add,.trap,
  .pill,.door,.btn,.close,.to-pdf,.legal-links span:last-of-type{display:none !important}
  /* Die Auswahlknöpfe sind auf Papier keine Knöpfe, aber die Optionen müssen
     dastehen — sonst steht über jeder Gruppe ein Label ohne Inhalt. */
  .chips{display:block !important;margin-top:.6em}
  .chips button,.chips button[aria-pressed="true"]{display:inline !important;
    border:0 !important;background:none !important;color:inherit !important;
    padding:0 !important;margin:0;font:inherit;font-weight:400;
    letter-spacing:inherit;text-transform:none}
  /* Keine Markierung der Auswahl: auf Papier gibt es keinen Zustand, die Zeile
     unter dem Betrag sagt ohnehin, was gerechnet wurde. */
  .chips button + button::before{content:" \00b7 ";color:#8A8276}
  /* Der Fuß ist am Schirm eine Fläche auf 86 % Bildschirmhöhe und zentriert.
     Auf Papier ist er eine Adresse: links, kompakt, am Ende der letzten Seite. */
  .end{display:block !important;text-align:left !important;
    padding:6mm 0 0 !important;margin-top:8mm !important;
    border-top:.4pt solid #C9C2B4}
  .end .lines p + p{margin-top:.2em}
  .end .legal-links{margin-top:3mm !important}
  .end .closer{position:static !important;margin-top:4mm !important}
  /* Die Trennlinie der Mobilspalte erbt der Druck; sie bricht hier nur auf. */
  .conf > div + div,.sum{border-top:0 !important;padding-top:6mm !important}
  .hero,.end{min-height:0 !important;height:auto !important;padding:0 0 var(--air) !important}
  .hero{background:#fff !important;color:#17120E !important}
  .hero-t{color:#17120E !important;font-size:30pt;margin:0 0 4mm}
  .cut,.end,.price{background:#fff !important;color:#17120E !important}
  .cut{min-height:0 !important;padding:var(--air) 0 !important;
    border-top:.4pt solid #C9C2B4;border-bottom:.4pt solid #C9C2B4}
  .end .lines a,.end .legal-links a,.end .closer{color:#17120E !important}
  .dot{color:#17120E !important}
  section,.sec,.mitte,.talk,.dl > div,.steps > div,.faq details{break-inside:avoid}
  .mid{font-size:14pt;line-height:1.3}
  .talk-say{font-size:16pt}
  /* Die Reihen scrollen nicht mehr, sie brechen um */
  .cards{display:flex;flex-wrap:wrap;overflow:visible !important;
    gap:4mm;padding:0 !important}
  /* Beide Reihen müssen je in eine Zeile und auf eine Seite passen —
     eine umgebrochene Kartenreihe liest wie zwei verschiedene Serien. */
  .cards,.cards-lab,.cards-line{break-inside:avoid;break-after:avoid}
  /* Der Kartenabschnitt bleibt bei seinen Karten */
  .sec:has(+ .cards-lab){break-after:avoid}
  .cards{flex-wrap:nowrap;gap:3mm}
  .cards figure{flex:0 0 22mm}
  .cards.small figure{flex:0 0 30mm}
  .cards img{aspect-ratio:auto}
  /* Das Triptychon reicht in einer Zeile, ohne Rand nach rechts */
  .atha-top{display:grid !important;grid-template-columns:repeat(3,1fr) !important;
    overflow:visible !important;gap:2mm;margin-right:0 !important}
  .atha-top figure{flex:none}
  .faq details{border-bottom:.4pt solid #E2DCCE}
  .faq summary{list-style:none}
  .faq summary::marker,.faq summary::-webkit-details-marker{display:none}
  a{color:inherit !important;text-decoration:none}
  /* Was im Druck nicht klickbar ist, muss lesbar dastehen */
  .after a[href^="mailto:"]::after{content:""}
  /* Die Versal-Labels sind am Schirm ein Flüstern; auf Papier verschwinden sie.
     Hier tragen sie die Gliederung, also müssen sie stehen. */
  .lab,figcaption.lab{color:#6B6358 !important}
  .sub,.note,.fine,.lines-sum,.first,.ship,.cards-line{color:#4A443B !important}
  .pr{font-size:11pt}

  /* ── Was im Druck wegfällt ──────────────────────────────────────────────
     Auf Papier ist das Angebot ein Merkblatt, keine Inszenierung. Weg
     kommen die Zäsur, das Gespräch, das Triptychon und die Satzzeichen der
     Bühne — der Punkt, die Mitte, die großen Grade. Was bleibt, ist das,
     was jemand braucht, um das Angebot bei sich zu haben: was es ist, wie
     es aussieht, was es kostet, was gilt. */
  .cut,.talk,.atha-top,.dot,.cards-note,.after.fine{display:none !important}
  /* Eine Spalte, alles linksbündig: Mittelachse ist Bühne. */
  .mitte{text-align:left !important;padding-top:calc(var(--air) * .55) !important}
  .mitte .mid,.mitte p:not(.mid),.mitte .house{margin-left:0 !important;
    margin-right:0 !important;max-width:34em}
  .mitte > * + *{margin-top:.5em}
  .mitte.tail{padding-top:var(--air) !important}
  .pair{justify-content:flex-start;gap:7mm;margin-top:4mm}
  .pair figure{width:30mm}
  .pair .lph{background:none;padding:0;box-shadow:none}
  .pair figcaption{min-height:0;text-align:left;margin-top:.5em}
  /* Die Überschrift trägt den Namen, nicht die Fläche */
  .hero{display:block !important;text-align:left !important;padding:0 !important}
  .hero-t{font-size:21pt !important;max-width:none;margin:0 0 2mm}
  .hero .pr{color:#4A443B !important;margin-top:0 !important;max-width:34em}
  .sec{padding-top:var(--air) !important}
  .sec > * + *,.sec .mid + p{margin-top:.5em !important}
  .mid{font-size:12pt !important;max-width:34em !important}
  .steps{gap:6mm;margin-top:3mm}
  /* Auf Papier ist der schwarze Kreis ein Fleck: die Ziffer reicht. */
  .steps .n{display:block !important;width:auto !important;height:auto !important;
    background:none !important;color:#8A8276 !important;border-radius:0;
    font-size:9pt;margin-bottom:1.5mm}
  .steps .n::after{content:"."}
  .faq details{break-inside:avoid}
  .faq summary{padding:1.6mm 0}
  .faq .a{padding-bottom:1.6mm}
  .dl{padding-top:3mm !important}
  .dl > div{padding-top:3mm !important}
  .atha-words{margin-top:0;max-width:34em}
  .facts .sec.atha{padding-top:var(--air) !important}
  .cards-lab{padding-top:5mm !important}
  .cards-line{padding-top:1.5mm !important}
}