/* Porzellan: warmes Elfenbein, Bodoni Moda + Jost, eckige Kanten, Abzüge an der Wand */
@font-face{font-family:"Bodoni Moda";src:url(fonts/bodoni-moda.woff2) format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url(fonts/bodoni-moda-italic.woff2) format("woff2");font-weight:400 900;font-style:italic;font-display:swap}
@font-face{font-family:"Jost";src:url(fonts/jost.woff2) format("woff2");font-weight:300 700;font-display:swap}

:root{
  --bg:#F5EFE8; --surface:#EADFD3; --field:#E9C9C4; --ink:#2B211C; --muted:#6B5B51; --accent:#4A3A32; --on-accent:#F8F2EC;
  --serif:"Bodoni Moda",Didot,"Times New Roman",serif; --sans:"Jost",system-ui,sans-serif;
  --m:clamp(16px,4vw,48px); --gap:clamp(72px,12vw,200px);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.55 var(--sans);overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit}
h1,h2{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;line-height:1;margin:0;font-optical-sizing:auto}
p{margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;z-index:50;background:var(--ink);color:var(--bg);padding:10px 14px}
.ph{background:rgba(74,58,50,.08);padding:0 .2em}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;background:var(--accent);color:var(--on-accent);text-decoration:none;font:500 16px/1 var(--sans);letter-spacing:.01em;border:0;transition:transform .25s var(--ease),background-color .25s}
.btn:hover{background:#2E231E}.btn:active{transform:scale(.97)}
.btn-2{background:transparent;color:var(--ink);text-decoration:underline;text-underline-offset:5px;padding:0 8px}
.btn-2:hover{background:transparent;color:var(--accent)}
.btn-s{min-height:44px;padding:0 18px;font-size:15px}
.chip{position:absolute;right:8px;bottom:8px;font:400 12px/1 var(--sans);background:rgba(245,239,232,.85);color:var(--ink);padding:5px 8px}

/* Leiste */
.bar{position:fixed;inset:0 0 auto;z-index:20;display:flex;align-items:center;gap:24px;padding:12px var(--m);transition:background-color .3s}
.bar.solid{background:var(--bg)}
.mark{font:400 22px/1 var(--serif);text-decoration:none;margin-right:auto;letter-spacing:-.01em}
.links{display:none;gap:28px;font-size:15px}
.links a{text-decoration:none}.links a:hover{text-decoration:underline;text-underline-offset:5px}

/* Erster Schirm: zwei Abzüge, ruhige Zeile */
.hero{position:relative;display:grid;grid-template-columns:repeat(12,1fr);column-gap:16px;padding:76px var(--m) 0;min-height:100svh}
.print{position:relative;margin:0;overflow:hidden;background:var(--surface)}
.print-big{grid-column:4/13;grid-row:1;aspect-ratio:4/5;justify-self:end;width:100%}
.print-big video{width:100%;height:100%;object-fit:cover;object-position:50% 38%}
.print-small{grid-column:1/6;grid-row:1;align-self:end;aspect-ratio:1;margin-bottom:-28px;z-index:2;border:6px solid var(--bg)}
.print-small img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.6s ease}
.print-small img.on{opacity:1}
.hero-text{grid-column:1/13;grid-row:2;padding-top:48px}
.hero h1{font-size:clamp(40px,11vw,96px);max-width:9.5em}
.lead{font-size:18px;margin:20px 0 26px;max-width:30ch}
@media (min-width:900px){
  .links{display:flex}
  .hero{grid-template-rows:auto;align-items:start;padding-top:96px;padding-bottom:40px}
  .print-big{grid-column:5/9;grid-row:1;margin-top:2vh;max-height:78svh;width:auto;height:78svh;justify-self:center}
  .print-small{grid-column:2/4;grid-row:1;margin-top:46svh;align-self:start;border:0;margin-bottom:0}
  .print-small img{filter:brightness(.97)}
  .hero-text{grid-column:9/13;grid-row:1;align-self:end;padding:0 0 4svh 24px}
  .hero h1{font-size:clamp(40px,3.6vw,64px)}
  .lead{font-size:18px}
}

/* Mitte als Journal: Essay, Tafeln mit Bildunterschrift, Preisliste, erzählter Ablauf */
h3{margin:0;font-weight:400}
.essay,.plates,.tarif,.story,.faq{padding:var(--gap) var(--m) 0}
.essay h2,.plates h2,.tarif h2,.story h2,.faq h2{font-size:clamp(40px,6vw,88px);max-width:14ch}
.plate{margin:0;overflow:hidden}
.plate img{width:100%;height:auto;transition:transform 1.2s var(--ease)}
.plate:hover img{transform:scale(1.03)}
.plate figcaption{margin-top:12px;font:italic 400 17px/1.45 var(--serif);max-width:44ch}
.plate figcaption b{font-style:normal;font-weight:500;margin-right:.3em}
.plate figcaption i{font:400 12px/1 var(--sans);letter-spacing:.04em;margin-left:.4em;color:var(--muted)}
.plate-wide{margin-top:48px}
.essay-text{margin-top:40px;font-size:18px;display:grid;gap:18px;max-width:62ch}
.facts{margin:16px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:18px 16px;background:var(--field);padding:24px}
.facts dt{font-size:14px;color:var(--ink)}
.facts dd{margin:2px 0 0;font:400 20px/1.25 var(--serif);color:var(--ink)}
.plates{display:grid;gap:56px}
.plates-note{color:var(--muted);font-size:15px}
.tarif-list{list-style:none;padding:0;margin:48px 0 0;max-width:640px}
.tarif-list li{display:flex;align-items:baseline;gap:12px;padding:14px 0;border-bottom:1px solid rgba(43,33,28,.18)}
.t-n{flex:1;font:400 21px/1.25 var(--serif)}
.t-n i{display:block;font:400 15px/1.4 var(--sans);color:var(--muted);margin-top:3px}
.t-p{font-variant-numeric:tabular-nums;white-space:nowrap}
.tarif-note{margin-top:24px;color:var(--muted);font-size:15px}
.story-list{margin:40px 0 0;padding:0;list-style:none;counter-reset:s;display:grid;gap:22px;font-size:18px;max-width:62ch}
.story-list li{counter-increment:s;display:grid;grid-template-columns:2.4em 1fr;gap:8px}
.story-list li::before{content:counter(s,upper-roman) ".";font:400 22px/1.2 var(--serif);color:var(--accent)}
.story-list b{font-weight:500}
/* Termin: weiche Karte */
.termin{padding:var(--gap) 10px 0}
.card{background:var(--surface);border-radius:28px;padding:clamp(24px,5vw,64px) clamp(18px,5vw,64px);max-width:1080px;margin:0 auto}
.card h2{font-size:clamp(40px,6vw,80px)}
.termin-lead{margin-top:14px;max-width:40ch}
.book{margin-top:36px;display:grid;gap:30px}
.book fieldset{border:0;margin:0;padding:0;min-width:0}
.book legend{font:400 22px/1.2 var(--serif);margin-bottom:12px;padding:0}
.chips,.swatches{display:flex;flex-wrap:wrap;gap:8px}
.chips input,.swatches input{position:absolute;opacity:0;pointer-events:none}
.chips span,.swatches label{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;background:var(--bg);border-radius:999px;cursor:pointer;transition:background-color .2s,color .2s}
.days span{min-width:48px;justify-content:center;padding:0 10px}
.chips input:checked+span{background:var(--accent);color:var(--on-accent)}
.chips input:focus-visible+span,.swatches input:focus-visible+.sw{outline:2px solid var(--accent);outline-offset:2px}
.swatches label{gap:8px;padding:0 14px 0 8px;font-size:15px}
.swatches input:checked~.sw-t{text-decoration:underline;text-underline-offset:4px}
.swatches label:has(input:checked){background:var(--accent);color:var(--on-accent)}
.sw{width:28px;height:28px;border-radius:50%;background:var(--c)}
.sw.fr{border-top:9px solid #FBF7F2}
.sw.no{background:var(--surface);outline:1px dashed var(--muted);outline-offset:-4px}
.book-out{display:grid;grid-template-columns:56px 1fr;gap:16px;align-items:start;background:var(--bg);border-radius:20px;padding:20px 16px}
.nail{width:56px;height:auto;--lack:#E3C2AE}
.nail .base{fill:var(--lack);transition:fill .4s}
.nail .tip{fill:#FBF7F2;opacity:0;transition:opacity .3s}
.nail[data-kind="French"] .tip{opacity:1}
.msg-wrap{min-width:0}
.field label{display:block;font-size:14px;color:var(--muted);margin-bottom:6px}
.field input{width:100%;max-width:320px;min-height:46px;border:0;border-radius:12px;background:var(--surface);padding:0 12px;font:inherit;color:var(--ink)}
.msg-label{margin-top:18px;font-size:14px;color:var(--muted)}
.msg{margin-top:6px;background:var(--field);border-radius:14px;padding:16px 18px;font:italic 400 19px/1.45 var(--serif)}
.btns{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:20px}
.card .btn{border-radius:999px}
.small{margin-top:14px;font-size:14px;color:var(--muted);max-width:52ch}
.faq-cols{margin-top:44px;display:grid;gap:28px}
.faq-cols h3{font:400 22px/1.2 var(--serif)}
.faq-cols p{margin-top:6px;max-width:44ch}
@media (min-width:900px){
  .essay{display:grid;grid-template-columns:repeat(12,1fr);column-gap:16px}
  .essay h2{grid-column:1/9}
  .plate-wide{grid-column:3/13}
  .essay-text{grid-column:3/11;grid-template-columns:1fr 1fr;column-gap:40px;max-width:none}
  .facts{grid-column:1/3;grid-template-columns:repeat(4,1fr)}
  .plates{grid-template-columns:repeat(12,1fr);column-gap:16px;row-gap:96px}
  .plates h2{grid-column:1/9}
  .pl1{grid-column:1/6;grid-row:2}.pl2{grid-column:8/12;grid-row:2;margin-top:180px}
  .pl3{grid-column:1/9;grid-row:3}.pl4{grid-column:10/13;grid-row:3;align-self:end}
  .plates-note{grid-column:1/9;grid-row:4}
  .tarif{display:grid;grid-template-columns:repeat(12,1fr);column-gap:16px}
  .tarif h2{grid-column:1/5}.tarif-list{grid-column:6/12;margin-top:0}.tarif-note{grid-column:6/12}
  .story{display:grid;grid-template-columns:repeat(12,1fr);column-gap:16px}
  .story h2{grid-column:1/5}.story-list{grid-column:6/13;margin-top:0;columns:2;column-gap:40px;display:block}
  .story-list li{break-inside:avoid;margin-bottom:22px}
  .book{grid-template-columns:1fr 1fr;column-gap:40px}
  .book-out{grid-column:1/3;grid-template-columns:96px 1fr;padding:32px}
  .nail{width:96px}
  .faq-cols{grid-template-columns:1fr 1fr 1fr;column-gap:40px}
}

/* Person: Über mich, Leistungen, Kalender, Anfahrt */
.me,.svc,.proj,.find{padding:var(--gap) var(--m) 0}
.me{display:grid;gap:36px}
.me-pic{position:relative;margin:0;overflow:hidden;max-width:520px}
.me-pic img{width:100%;height:auto}
.me h2,.svc h2,.proj h2,.find h2{font-size:clamp(40px,6vw,88px);max-width:14ch}
.me .essay-text{margin-top:28px}
.me .facts{margin-top:28px}
.facts a{text-decoration:none}
.svc-cols{display:grid;gap:56px;margin-top:48px}
.svc-one h3{font:400 clamp(30px,3.4vw,44px)/1 var(--serif);margin-top:20px}
.svc-one .plate img{aspect-ratio:4/5;object-fit:cover}
.svc-one .tarif-list{margin-top:14px}
.proj-list{display:grid;gap:56px;margin-top:48px}
.pj .plate img{aspect-ratio:4/5;object-fit:cover}
.pj-date{margin-top:16px;font-size:14px;color:var(--muted);letter-spacing:.04em}
.pj h3{font:400 26px/1.15 var(--serif);margin-top:6px}
.pj p:last-child{margin-top:8px;max-width:40ch}
.find-row{display:grid;gap:32px;margin-top:40px}
.find-map{margin:0}
.find-map figcaption{margin-top:8px;font-size:13px;color:var(--muted)}
.map{display:block;width:100%;height:auto}
.m-bg{fill:var(--surface)}.m-block{fill:#E3D5C7}.m-park{fill:#D9DCC8}
.m-st{stroke:var(--bg);stroke-width:14;fill:none}
.m-walk{stroke:var(--accent);stroke-width:3;stroke-dasharray:2 7;stroke-linecap:round;fill:none}
.m-stop{fill:var(--accent)}.m-h{fill:var(--on-accent);font:600 13px var(--sans)}
.m-pin{fill:var(--accent)}.m-dot{fill:var(--field)}
.m-t{fill:var(--ink);font:500 14px var(--sans)}
.addr{font:400 26px/1.25 var(--serif)}
.how{margin:24px 0 24px;display:grid;gap:16px}
.how dt{font-size:14px;color:var(--muted)}
.how dd{margin:2px 0 0;font-size:17px;max-width:40ch}
.find .btn-2{padding:0}
@media (min-width:900px){
  .me{grid-template-columns:5fr 7fr;column-gap:64px;align-items:center}
  .me .facts{grid-template-columns:repeat(4,1fr)}
  .me .essay-text{grid-template-columns:1fr;max-width:52ch}
  .svc-cols{grid-template-columns:repeat(3,1fr);column-gap:40px}
  .svc-one:nth-child(2){margin-top:80px}
  .proj-list{grid-template-columns:repeat(3,1fr);column-gap:40px}
  .pj:nth-child(2){margin-top:120px}
  .find-row{grid-template-columns:7fr 5fr;column-gap:56px;align-items:center}
}

/* Fuß: dunkle Fläche, Name über die volle Breite */
.foot{margin-top:var(--gap);background:var(--ink);color:var(--bg);padding:40px var(--m) 96px;min-height:80svh;display:grid;grid-template-rows:auto 1fr auto auto}
.foot-cols{display:grid;grid-template-columns:1fr 1fr;gap:28px 16px;font-size:15px}
.foot-cols strong{font-weight:500}
.foot a{color:var(--bg)}
.foot-mark{grid-row:3;font:400 15.5vw/.9 var(--serif);letter-spacing:-.04em;white-space:nowrap;margin-top:15svh}
.legal{grid-row:4;margin-top:20px;font-size:13px;opacity:.8;max-width:80ch}
@media (min-width:900px){.foot-cols{grid-template-columns:repeat(4,1fr)}.foot{padding-bottom:40px}}

/* Daumenleiste auf dem Telefon */
.dock{position:fixed;inset:auto 0 0;z-index:30;display:flex;gap:8px;padding:10px var(--m) calc(10px + env(safe-area-inset-bottom));background:var(--bg)}
.dock .btn{flex:1}
.dock .btn-2{flex:0 0 auto}
@media (min-width:900px){.dock{display:none}}

.toast{position:fixed;left:50%;bottom:84px;z-index:40;transform:translate(-50%,20px);width:min(92vw,520px);background:var(--ink);color:var(--bg);padding:14px 18px;font-size:15px;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s var(--ease)}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* Einblenden: Überschrift, dann Text, dann Bild */
.js [data-rv]{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--d,0) * 80ms)}
.js [data-rv].in{opacity:1;transform:none}
.hero h1,.hero .lead,.hero .btn{animation:rise 1s var(--ease) both}
.hero .lead{animation-delay:.12s}.hero .btn{animation-delay:.22s}
.print-big{animation:open 1.4s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(20px)}}
@keyframes open{from{opacity:.4;transform:scale(.94)}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js [data-rv]{opacity:1;transform:none}
}

/* Daumenleiste: erscheint nach dem ersten Schirm */
.js .dock{transform:translateY(130%);transition:transform .45s cubic-bezier(.16,1,.3,1)}
.js.past .dock{transform:none}

/* Prüfung 08.11.2026: Tippziele, Safe Area, Sprungziele */
html{scroll-padding-top:72px;scroll-padding-bottom:110px}
.foot a,.link,.mark,.skip:focus{display:inline-flex;align-items:center;min-height:44px}
.foot{padding-bottom:calc(110px + env(safe-area-inset-bottom))!important}
.facts a{display:inline-flex;align-items:center;min-height:44px}

/* Gericht 08.11.2026: Porträt im ersten Schirm, Film klein, Anfrage-Links */
.print-big img{width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.print-small video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-note{margin-top:12px;font-size:15px;color:var(--muted)}
.m-only{display:inline-flex;align-items:center;min-height:44px;font-size:15px;text-decoration:none;margin-right:4px}
@media (min-width:900px){.m-only{display:none}}
.ask{display:inline-flex;align-items:center;min-height:44px;margin-top:10px;font-weight:500;text-underline-offset:5px}
.ask::after{content:"→";margin-left:8px}
.pj-quote{margin:16px 0 0;font:italic 400 22px/1.35 var(--serif)}
.pj-quote cite{display:block;margin-top:6px;font:400 14px/1 var(--sans);font-style:normal;color:var(--muted)}
.story-note{margin-top:18px;max-width:52ch;color:var(--muted)}
.home-note{margin:-6px 0 18px;max-width:40ch}
@media (min-width:900px){.story-note{grid-column:6/13}}
@media (min-width:900px){
  .print-big{grid-column:4/9;width:100%;height:auto;max-height:none;justify-self:stretch;margin-top:0}
  .print-small{grid-column:1/4;margin-top:40svh;width:70%;justify-self:end}
  .hero-text{padding-left:40px}
}
.facts a,.me-facts a,.hi-tags a{white-space:nowrap}
@media (max-width:899px){.facts div:last-child{grid-column:1/-1}}

/* 14.11.2026: Erster Schirm ohne 3D-Abzug, alles ohne Scrollen */
@media (max-width:899px){
  .hero{min-height:0;padding-top:72px;padding-bottom:28px}
  .print-big{grid-column:1/13;justify-self:stretch;aspect-ratio:4/3}
  .hero-text{padding-top:28px}
  .hero h1{font-size:clamp(38px,10.5vw,56px)}
  .lead{margin:14px 0 20px}
}
@media (min-width:900px){
  .hero{height:100svh;min-height:540px;padding-top:80px;padding-bottom:28px;align-items:center}
  .print-big{grid-column:7/12;grid-row:1;aspect-ratio:4/5;height:calc(100svh - 120px);min-height:400px;width:auto;max-height:none;margin:0;justify-self:center}
  .hero-text{grid-column:1/7;grid-row:1;align-self:center;padding:0 32px 0 0}
  .hero h1{font-size:clamp(44px,4.4vw,84px);max-width:9em}
  .lead{font-size:20px;max-width:32ch}
}

/* 14.11.2026: Kontakt-Knöpfe (WhatsApp, Telegram, Instagram) */
.ic{width:22px;height:22px;fill:currentColor;flex:none}
.k-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.k-btns .btn{gap:10px;min-height:56px}
.btn-o{background:transparent;color:inherit;box-shadow:inset 0 0 0 2px currentColor}
.ic-btn{display:inline-flex;align-items:center;justify-content:center;width:50px;height:50px;flex:none;color:inherit;box-shadow:inset 0 0 0 2px currentColor;text-decoration:none}
.dock .btn{gap:10px}
.ic-btn,.btn-o{border-radius:999px}

/* ===== 14.11.2026 (abends): Abstandssystem. Eine Skala statt Augenmaß; überschreibt die Schichten oben ===== */
:root{
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px;
  --gap:clamp(64px,10vw,144px);          /* Abstand zwischen Abschnitten */
  --hd:clamp(32px,4vw,56px);             /* Überschrift → Inhalt */
  --stack:clamp(40px,5vw,72px);          /* Abstand zwischen Bildern/Karten */
  --off:clamp(0px,5vw,72px);             /* Versatz der Abzüge (Desktop) */
  --btn:52px;
}
body{line-height:1.6}
p,li,dd{max-width:none}
/* Knöpfe: eine Höhe, eine Form */
.btn{min-height:var(--btn);padding:0 var(--s4);border-radius:999px;font-size:16px;gap:10px}
.btn-s{min-height:44px;padding:0 var(--s3);font-size:15px}
.btn-2{min-height:44px;padding:0;border-radius:0;text-decoration:underline}
.k-btns{gap:var(--s2);margin-top:var(--s4)}
.k-btns .btn,.dock .btn{min-height:var(--btn)}
.ic-btn{width:var(--btn);height:var(--btn)}
.dock{gap:var(--s1)}
/* Erster Schirm */
.lead{margin:20px 0 var(--s4);line-height:1.5;max-width:34ch}
.hero-note{margin-top:var(--s2)}
.hero h1{line-height:1.02}
/* Überschrift → Inhalt überall gleich */
.svc-cols,.proj-list,.find-row,.story-list,.essay-text{margin-top:var(--hd)}
.me .essay-text{margin-top:var(--s3)}.me .facts{margin-top:var(--s4)}
.tarif-note,.plates-note{margin-top:var(--s4)}
.plates{gap:var(--stack)}
.card h2+.termin-lead{margin-top:var(--s2)}
.termin-lead{max-width:44ch}
.story-note{margin-top:var(--s4);max-width:56ch}
.story-list{gap:var(--s3);max-width:60ch}
.how{gap:var(--s2);margin:var(--s3) 0}
.how dd{max-width:44ch}
.home-note{margin:0 0 var(--s3)}
/* Bildunterschriften */
.plate figcaption{margin-top:var(--s2);font-size:17px}
.pj-date{margin-top:var(--s2);color:var(--muted)}
.pj h3{margin-top:var(--s1)}
.pj p:last-child{margin-top:var(--s1)}
.svc-one h3{margin-top:var(--s3)}
.svc-one .tarif-list{margin-top:var(--s2)}
.ask{margin-top:var(--s2)}
/* Telefon: gleicher Rand überall */
.termin{padding:var(--gap) var(--m) 0}
.foot{margin-top:var(--gap);min-height:0;padding-top:var(--s5)}
.foot-mark{margin-top:var(--s6)}
.legal{margin-top:var(--s3);max-width:70ch}
@media (min-width:900px){
  .plates{row-gap:var(--stack)}
  .pl2{margin-top:var(--s7)}
  .svc-one:nth-child(2){margin-top:var(--off)}
  .pj:nth-child(2){margin-top:var(--off)}
  .svc-cols,.proj-list{column-gap:var(--s5)}
  .foot{padding-bottom:calc(var(--s6) + env(safe-area-inset-bottom))!important}
  .foot-mark{margin-top:var(--s7)}
}
@media (max-width:899px){
  .foot-cols{gap:var(--s3) var(--s2)}
  .plates,.svc-cols,.proj-list{gap:var(--stack)}
}
@media (min-width:900px){.print-big{grid-column:8/13;justify-self:end}.hero-text{grid-column:1/8}}
.btn-o:hover{background:var(--accent);color:var(--on-accent)}