/* Obversa – Website-Look (Papier, Schwarz, schmale Versal-Headlines). Nur öffentliche Seiten,
   NACH obversa.css laden. Portal und Studio behalten das dunkle App-Design. */
@import url('/css/fonts.css');
/* Gestaltung aus dem Website-Baukasten (Studio → Website → Gestaltung): nur Abweichungen vom Standard, erzeugt (docs/BAUKASTEN.md) */
@import url('/css/site-theme.css');

/* — Tokens: fest hell, unabhängig vom gespeicherten Modus — */
:root, :root[data-mode="dark"], :root[data-mode="light"]{
  --brand-filter:none;
  --color-bg:#eee8dc;--color-surface:#e2dacc;--color-header:#e5dccb;--color-text:#1b1612;
  --color-divider:rgba(27,22,18,.16);
  --color-neutral-100:#e6dfd2;--color-neutral-200:#d8cfbf;--color-neutral-300:#c1b7a6;--color-neutral-400:#a2978a;--color-neutral-500:#706559;--color-neutral-600:#655b50;--color-neutral-700:#4d443b;--color-neutral-800:#332c25;--color-neutral-900:#1f1a15;
  --color-accent:#1b1612;--color-accent-100:#dcd3c3;--color-accent-200:#c6bba8;--color-accent-300:#9a8f80;--color-accent-400:#655b50;--color-accent-500:#1b1612;--color-accent-600:#332c25;--color-accent-700:#4d443b;--color-accent-800:#1b1612;--color-accent-900:#000;
  --gold:#b08a3e;--gold-soft:#d2b370;--gold-ink:#7f6123; /* Gold als Text: 4,7:1 auf Papier (WCAG AA); --gold bleibt für Rahmen, Punkte und Flächen */
  --color-accent-2:#b04a2f;--color-accent-2-100:#f1ddd6;--color-accent-2-700:#702c1b;--color-accent-2-800:#4f1f13;
  --shadow-sm:0 1px 2px rgba(40,25,10,.12);--shadow-md:0 3px 12px rgba(40,25,10,.14);--shadow-lg:0 12px 32px rgba(40,25,10,.2);
  --font-heading:"Inter",system-ui,sans-serif;--font-heading-weight:600;
  --font-body:"Inter",system-ui,sans-serif;
  --font-display:"Instrument Serif","Times New Roman",Georgia,serif;
  --font-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --radius-sm:6px;--radius-md:10px;--radius-lg:18px;
  --pad-x:56px;
  color-scheme:light;
}
body{font-family:var(--font-body);font-size:16px;line-height:1.5;letter-spacing:-.005em;background:var(--color-bg)}
/* Körnung wie Papier */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.08;mix-blend-mode:multiply;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>")}
a{color:inherit}
a:hover{color:var(--color-neutral-600)}
h1,h2,.display,.display-xl,.display-lg{font-family:var(--font-display);font-weight:400;text-transform:none;letter-spacing:-.015em;line-height:1.0}
h1 em,h2 em,.display-xl em,.display-lg em{font-style:italic;color:var(--gold-ink)}
h1{font-size:clamp(44px,6.5vw,88px)}
h2{font-size:clamp(40px,6vw,76px)}
h3,h4{font-family:var(--font-body);font-weight:600;letter-spacing:-.01em}
.display-xl{font-size:clamp(50px,8vw,112px);line-height:.98;margin:0}
.display-lg{font-size:clamp(40px,5.6vw,78px);line-height:1;margin:0}
.kicker{font-family:var(--font-body);font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--gold-ink)}
.mono{font-family:var(--font-body);font-size:13px;letter-spacing:0;text-transform:none;color:var(--color-neutral-600)}
.tag-mono{display:inline-block;font-family:var(--font-body);font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;border:1px solid var(--gold);color:var(--gold-ink);padding:5px 12px;border-radius:999px}
.mode-switch{display:none !important}
.shell{max-width:1440px}
.section{padding-block:96px}

/* — Buttons: schwarze Rechtecke, schmale Versal-Labels — */
.btn{font-family:var(--font-body);font-weight:500;text-transform:none;letter-spacing:0;font-size:15px;border-radius:999px;padding:12px 22px}
.btn-lg{padding:15px 28px;font-size:16px}
.btn-sm{padding:8px 14px;font-size:13px}
.btn-primary{background:var(--color-accent);color:var(--color-bg)}
.btn-primary:hover{background:var(--color-accent-600);color:var(--color-bg)}
.btn-secondary{border:1px solid var(--color-text);color:var(--color-text)}
.btn-secondary:hover{background:var(--color-text);color:var(--color-bg)}
.btn-ghost{color:var(--color-text);text-decoration:underline;text-underline-offset:4px;padding-inline:0}
.btn-ghost:hover{background:none;color:var(--color-neutral-600)}
.input{background:rgba(255,255,255,.35);border:1px solid var(--color-divider);border-radius:10px;font-size:15px}
.input:focus-visible{border-color:var(--color-text)}
.seg{border-radius:999px;border-color:var(--color-text)}
.seg-opt{font-family:var(--font-body);font-size:13px;font-weight:500;padding:9px 16px}
.seg-opt+.seg-opt{border-left-color:var(--color-text)}
.radio .dot{border-color:var(--color-text)}
.radio input:checked+.dot{background:var(--color-text);border-color:var(--color-text)}
.tag{border-radius:999px}

/* — Navigation — */
/* Navigation im Ton des Kopfbereichs, eine Stufe tiefer als das Papier */
.nav.sticky{background:color-mix(in srgb,var(--color-header) 92%,transparent)}
.nav{padding:22px var(--pad-x);gap:28px}
.nav-brand{font-family:var(--font-display);font-weight:400;font-size:22px;letter-spacing:.06em;text-transform:none}
.nav-brand .brand-sub{font-family:var(--font-mono);font-weight:400;letter-spacing:.08em;font-size:11px;color:var(--gold-ink);text-transform:uppercase}
.nav a{font-size:15px;font-weight:500}
.nav a[aria-current="page"]{color:var(--gold-ink)}
.nav .nav-user{font-size:15px;font-weight:500;color:var(--color-text)}
.nav .nav-cta{margin-left:4px}
.nav a.btn-primary,.nav a.btn-primary:hover{color:var(--color-bg)}
.nav a.btn-secondary{color:var(--color-text)}
.nav a.btn-secondary:hover{color:var(--color-bg)}
.nav-toggle{font-family:var(--font-body);font-weight:500;font-size:14px;border:1px solid var(--color-text);border-radius:999px;padding:10px 16px}

/* — Panels (dunkle, eingesetzte Blöcke) — */
.panel{margin:0 16px;border-radius:28px;padding:112px var(--pad-x);overflow:hidden}
.panel~.panel{margin-top:16px}
.panel-dark{
  --brand-filter:brightness(0) invert(94%);
  --color-bg:#1a1411;--color-surface:#261d18;--color-text:#f1eadc;--color-divider:rgba(241,234,220,.16);
  --color-neutral-500:#a0917f;--color-neutral-600:#a0917f;--color-neutral-700:#b9ab98;--color-neutral-800:#d3c8b6;
  --color-accent:#f1eadc;--color-accent-600:#ffffff;--color-accent-700:#ffffff;--color-accent-100:#2c231d;--color-accent-800:#f1eadc;--gold:#d2b370;--gold-ink:#d2b370;
  background-color:var(--color-bg);color:var(--color-text)}

/* — Licht im Raum: die dunklen Panels sind keine flache Fläche mehr, sondern eine Wand, auf die
   warmes Licht fällt. Vier weiche Verläufe übereinander (breiter Schein, Lichtkegel, Schatten in der
   Gegenecke, Vignette zum Rand) und darüber eine kaum sichtbare, aufhellende Körnung.
   Alles CSS und Inline-SVG, kein Bild, kein JS. Position und Stärke je Panel über die Variablen. — */
.panel-dark{
  position:relative;isolation:isolate;
  --licht-x:13%;--licht-y:44%;   /* Kern des Lichtkegels: liegt auf Medaillon und Zitat */
  --l-w:660px;--l-h:540px;       /* Grösse des Kegels */
  --wash-x:-6%;--wash-y:-4%;     /* breiter Schein aus derselben Richtung */
  --w-w:1180px;--w-h:980px;
  --s-w:880px;--s-h:700px;       /* Schatten in den Gegenecken */
  --licht:1;                     /* Stärke */
  background-image:
    radial-gradient(140% 126% at 36% 42%,rgba(0,0,0,0) 40%,rgba(0,0,0,.19) 74%,rgba(0,0,0,.36) 100%),
    radial-gradient(var(--s-w) var(--s-h) at 103% 109%,rgba(0,0,0,.55),rgba(0,0,0,0) 66%),
    radial-gradient(var(--s-w) var(--s-h) at 105% -13%,rgba(0,0,0,.34),rgba(0,0,0,0) 62%),
    radial-gradient(var(--l-w) var(--l-h) at var(--licht-x) var(--licht-y),rgba(238,199,132,calc(.125*var(--licht))),rgba(238,199,132,calc(.06*var(--licht))) 42%,rgba(238,199,132,0) 76%),
    radial-gradient(var(--w-w) var(--w-h) at var(--wash-x) var(--wash-y),rgba(193,132,72,calc(.068*var(--licht))),rgba(193,132,72,0) 78%);
}
/* Körnung: warme, aufhellende Punkte gegen die digitale Glätte. Liegt unter dem Inhalt. */
.panel-dark::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 .93 0 0 0 0 .82 0 0 0 .55 0'/></filter><rect width='180' height='180' filter='url(%23g)'/></svg>")}
/* — Helles Panel (Über uns nach den drei Schritten): ein Blatt in --color-surface, eine Stufe tiefer als die Seite.
   Dasselbe Licht wie auf den dunklen Wänden, hier als Tageslicht: zwei warme, aufhellende Scheine (links hinter dem
   Titel, rechts hinter dem Zitat) und keine Schatten, damit der Kontrast nirgends unter den der Grundfläche fällt.
   Gold als Text eine Stufe dunkler, weil --gold-ink auf --color-surface nur 4,2:1 erreicht. — */
.panel-paper{
  --gold-ink:#6f5520; /* 5,0:1 auf --color-surface */
  position:relative;isolation:isolate;
  background-color:var(--color-surface);color:var(--color-text);
  background-image:
    radial-gradient(780px 560px at 14% 26%,rgba(250,246,238,.5),rgba(250,246,238,.18) 48%,rgba(250,246,238,0) 78%),
    radial-gradient(760px 440px at 76% 36%,rgba(250,246,238,.3),rgba(250,246,238,0) 72%);
}
.stations{--licht-x:15%;--licht-y:12%;--l-h:460px;--wash-x:-6%;--wash-y:-8%;--licht:.78}
.cta-panel{--licht-x:22%;--licht-y:24%;--l-w:720px;--l-h:520px;--wash-x:-4%;--wash-y:-10%;--w-w:1300px;--licht:.8}
.panel-dark .btn-primary{background:var(--color-text);color:#1a1411}
.panel-dark .btn-primary:hover{background:#fff;color:#1a1411}
.panel-dark .btn-secondary{border-color:var(--color-text);color:var(--color-text)}
.panel-dark .btn-secondary:hover{background:var(--color-text);color:#1a1411}
.panel-dark a:hover{color:#fff}
.panel-dark .tag-mono{border-color:var(--gold);color:var(--gold-ink)}
.panel-dark .mono{color:var(--color-neutral-600)}

/* — Kopfzeile einer Sektion: Titel links, Tag + Intro rechts — */
.sec-head{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;margin-bottom:88px}
.sec-head .intro{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;max-width:520px;justify-self:end}
.sec-head .intro p{margin:0;font-size:16px;line-height:1.55;color:var(--color-neutral-700)}
.panel-dark .sec-head .intro p{color:var(--color-neutral-800)}

/* — Nummerierte Blöcke (01. Titel ↙) — */
.svc{display:grid;grid-template-columns:minmax(120px,1fr) 2fr auto;gap:24px 40px;padding:44px 0 72px;border-top:1px solid var(--color-divider);align-items:start}
.svc .num{font-family:var(--font-display);font-style:normal;color:var(--gold-ink);font-size:clamp(40px,4.5vw,60px);line-height:1}
.svc .title{font-family:var(--font-display);font-weight:400;font-size:clamp(36px,4.2vw,56px);line-height:1;margin:0}
.svc .arrow{font-size:22px;color:var(--gold);line-height:1;padding-top:14px}
.svc .body{grid-column:2;max-width:520px}
.svc .body p{font-size:16px;line-height:1.55;color:var(--color-neutral-700);margin:22px 0 28px}
.panel-dark .svc .body p{color:var(--color-neutral-800)}
.svc .list{display:flex;flex-direction:column}
.svc .list div{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--color-divider);font-family:var(--font-display);font-size:24px}
.svc .list div:last-child{border-bottom:0}
.svc .list .n{font-family:var(--font-mono);font-size:12px;color:var(--color-neutral-500)}
.svc .list .p{font-family:var(--font-body);font-size:14px;font-weight:500;color:var(--color-neutral-600);letter-spacing:0;font-variant-numeric:tabular-nums lining-nums}

/* — Zeilenlisten (Projekte) — */
.rows{border-top:1px solid var(--color-divider)}
.row{display:grid;grid-template-columns:minmax(140px,1fr) 3fr auto;gap:24px;align-items:center;padding:26px 0;border-bottom:1px solid var(--color-divider);text-decoration:none;color:inherit}
a.row:hover .name{transform:translateX(6px)}
.row .meta{font-size:14px;color:var(--color-neutral-600)}
.row .name{font-family:var(--font-display);font-size:clamp(28px,3.4vw,46px);line-height:1;transition:transform .2s}
.row .arrow{font-size:20px;color:var(--gold)}

/* — Punkte-Zeilen (Warum) — */
.facts{border-top:1px solid var(--color-divider)}
.fact{display:grid;grid-template-columns:1fr 1.4fr;gap:24px 40px;padding:30px 0;border-bottom:1px solid var(--color-divider);font-size:clamp(20px,2.2vw,28px);line-height:1.3}
.fact .k{font-family:var(--font-display);font-style:normal;color:var(--gold-ink);text-align:right;font-size:1.15em}
.fact .v{color:var(--color-text);max-width:22ch}
.panel-dark .fact .k{color:var(--gold)}
.panel-dark .fact .v{color:var(--color-neutral-800)}

/* — FAQ-Zeilen — */
.faq-rows{border-top:1px solid var(--color-divider)}
.faq-rows details{border-bottom:1px solid var(--color-divider);padding:0}
.faq-rows summary{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;padding:18px 0;cursor:pointer;list-style:none;font-size:16px;font-weight:500}
.faq-rows summary::-webkit-details-marker{display:none}
.faq-rows summary .n{font-family:var(--font-mono);font-size:12px;color:var(--gold)}
.faq-rows summary::after{content:"+";font-size:22px;line-height:1;color:var(--gold);transition:transform .2s}
.faq-rows details[open] summary::after{transform:rotate(45deg)}
.faq-rows details p{grid-column:1;margin:0 0 22px;padding-left:0;font-size:16px;line-height:1.55;color:var(--color-neutral-700);max-width:760px}

/* — CTA-Panel — */
.cta-panel{text-align:center;padding:140px var(--pad-x)}
.cta-panel .small{font-size:15px;color:var(--color-neutral-700);margin:0 0 20px}
.cta-panel .display-xl{max-width:14ch;margin:0 auto 44px}

/* — Footer — */
.site-footer{padding:56px var(--pad-x) 40px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:40px;font-size:14px}
.site-footer>div{border-top:1px solid var(--color-divider);padding-top:20px;display:flex;flex-direction:column;gap:8px}
.site-footer a{text-decoration:none;color:var(--color-neutral-700)}
.site-footer a:hover{color:var(--color-text)}
.site-footer .brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:20px;letter-spacing:.04em}
.site-footer .copy{font-size:13px;color:var(--color-neutral-600);margin-top:auto;padding-top:16px}
/* Design-Newsletter über den drei Spalten (siteFooter in ui.js) */
.site-footer .footer-news{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:10px 40px;align-items:end}
.footer-news .kicker{display:block;margin-bottom:6px}
.footer-news p{margin:0;font-size:14px;line-height:1.55;color:var(--color-neutral-700)}
.footer-news-row{display:flex;gap:10px}
.footer-news-row .input{flex:1;min-width:0;min-height:44px;font-size:16px} /* ab 16 px zoomt iOS beim Antippen nicht */
.footer-news-row .btn{min-height:44px}
.site-footer .footer-news-note{grid-column:2;font-size:12px}
.site-footer .footer-news-note a{text-decoration:underline}
.footer-news-note.is-error{color:var(--color-accent-2-700)}
.footer-news.is-done .footer-news-row{display:none}

/* — Statische Raumansicht: randlos, fließt ins Papier — */
.room-static-wrap{position:relative;width:100%;line-height:0}
.room-static{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;border:0;border-radius:0;transition:opacity .35s ease;-webkit-mask-image:radial-gradient(ellipse 78% 82% at 50% 55%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 78% 82% at 50% 55%,#000 62%,transparent 100%)}
.room-static.swap{opacity:.55}
/* Wandfarbe als Canvas über dem Basisbild (nur /start) */
.room-static.room-paint{position:absolute;inset:0;height:100%;opacity:0}
.room-static.room-paint.on{opacity:1}
.room-static-wrap.swap .room-static{opacity:.55}
.room-static-wrap.swap .room-static.room-paint:not(.on){opacity:0}
.room-video{width:100%;height:auto;aspect-ratio:16/9;display:block;object-fit:cover;border:0;background:var(--color-bg);-webkit-mask-image:radial-gradient(ellipse 78% 82% at 50% 55%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 78% 82% at 50% 55%,#000 62%,transparent 100%)}
.room-static-wrap.cross{position:relative;aspect-ratio:16/9}
.room-static-wrap.cross .room-static{position:absolute;inset:0;height:100%;opacity:0;transition:opacity 1.1s ease}
.room-static-wrap.cross .room-static.on{opacity:1}
/* — Medien-Rahmen (3D-Raum wie ein Gerät) — */
.media{border-radius:22px;overflow:hidden;background:var(--color-surface);box-shadow:var(--shadow-md)}
.media .r3d{border-radius:22px}

/* — Bilder ohne Rasterpunkt-Effekt: der Look ist hier klar und sachlich — */
.halftone{filter:none;border-radius:10px}
.halftone::after{display:none}
.img-fill{border-radius:10px}
.sp-tile{border-radius:8px}
.sp-swatch[aria-pressed="true"]{box-shadow:0 0 0 2px var(--color-bg),0 0 0 3px var(--color-text)}
.sp-style.sel{background:var(--color-text);color:var(--color-bg);border-color:var(--color-text)}
.sp-style.sel .sp-style-desc{color:var(--color-neutral-300)}
.chip[aria-pressed="true"]{background:var(--color-text);color:var(--color-bg);border-color:var(--color-text)}
.cal .day.sel{background:var(--color-text);color:var(--color-bg)}
.price-card{border-radius:10px}
.price-card.featured{background:#1a1411;color:#f1eadc;border-color:#1a1411}
.price-card.featured .muted,.price-card.featured .soft{color:#b0aea8}
.doc{border-radius:10px}

/* — Stationen: links die Schritte, rechts ein Bild je Schritt (Startseite „So geht's“, /leistungen „Ablauf“) — */
.stations.panel{overflow:clip}
.stn{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:72px;align-items:start}
.stn-step{position:relative;grid-column:1;display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:20px;padding:26px 0 44px;border-top:1px solid var(--color-divider);align-self:start}
/* Goldpunkt auf der Haarlinie: markiert den Anfang jeder Station */
.stn-step::before{content:"";position:absolute;left:0;top:-4px;width:9px;height:9px;border-radius:50%;background:var(--gold)}
.stn-when{grid-column:1/-1;margin:0 0 14px;font-size:13px;font-weight:500;color:var(--gold)}
.stn-num{font-family:var(--font-display);font-style:normal;font-size:30px;line-height:1;color:var(--gold);padding-top:8px;transition:color .4s}
.stn-title{font-family:var(--font-display);font-weight:400;font-size:clamp(30px,3vw,44px);line-height:1;margin:0 0 16px}
.stn-text{font-size:17px;line-height:1.6;color:var(--color-neutral-700);margin:0;max-width:46ch}
.panel-dark .stn-text{color:var(--color-neutral-800)}
.stn-fig{grid-column:2;margin:0;align-self:start}
/* Ohne JS (und bei reduzierter Bewegung) steht jedes Bild neben seinem Schritt */
.stn-fig:nth-of-type(1),.stn-step:nth-of-type(1){grid-row:1}
.stn-fig:nth-of-type(2),.stn-step:nth-of-type(2){grid-row:2}
.stn-fig:nth-of-type(3),.stn-step:nth-of-type(3){grid-row:3}
/* Papierblatt für Raumbilder: das Diorama liegt vollständig darin. Die Renderings haben rundum
   Papierrand in genau diesem Ton, der hier aus dem Blatt geschoben wird, statt die Wände zu beschneiden. */
.sheet{position:relative;border-radius:20px;overflow:hidden;background:#eee8dc;aspect-ratio:16/10}
.sheet>img{position:absolute;width:119.3%;max-width:none;height:auto;left:-16.1%;top:-11.9%;display:block}
.stn-fig figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;margin-top:14px;font-size:13px;color:var(--color-neutral-600)}
.stn-fig figcaption span{white-space:nowrap}
.stn-fig figcaption .n{color:var(--gold)}
.stn-fig figcaption .n i{font-style:normal}
/* — Kamerafahrt: ein Blatt, das beim Scrollen von der Seitenansicht in die Draufsicht schwenkt und zurück — */
.sheet--flat{aspect-ratio:16/9}
.sheet--flat>img{position:static;width:100%;left:auto;top:auto}
/* Materialkarte unter dem Stellplan (Mobil und ohne JS) */
.plan-mat-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:12px}
.plan-mat-row .k{font-size:12px;font-weight:500;color:var(--gold)}
.plan-mat-row ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px 14px;margin:0;padding:0}
.plan-mat-row li{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--color-neutral-700)}
.plan-mat-row i{width:12px;height:12px;border-radius:3px;flex:none}
.stn-flight{margin:0;grid-column:2;grid-row:1/span 3;position:sticky;top:96px;align-self:start}
.stn-flight .sheet{position:relative}
.stn-flight canvas{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#ede7dc}
.stn-flight figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;margin-top:14px;font-size:13px;color:var(--color-neutral-600)}
.stn-flight figcaption .n{color:var(--gold)}
/* Materialien der Draufsicht: rechts in der Zeile unter dem Blatt, nicht über dem Bild. Der Platz bleibt reserviert, damit nichts springt. */
.flight-mat{opacity:0;transition:opacity .35s ease;pointer-events:none}
.flight-mat.on{opacity:1}
.flight-mat ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px 14px;margin:0;padding:0}
.flight-mat li{display:flex;align-items:center;gap:7px;white-space:nowrap}
.flight-mat i{width:12px;height:12px;border-radius:3px;flex:none}
/* Sobald die Kamerafahrt läuft, treten die drei Einzelbilder zurück (sie bleiben für Mobil und ohne JS) */
.stn.js .stn-fig{display:none}

/* Desktop mit JS: die drei Bilder liegen übereinander, bleiben beim Scrollen stehen und blenden weich um.
   Das ausgehende Blatt bleibt deckend liegen, bis das neue voll da ist – deshalb nur eine Verzögerung, keine Ausblend-Dauer. */
.stn.js .stn-fig{grid-row:1/span 3;position:sticky;top:96px;opacity:0;z-index:1;transition:opacity 0s linear .55s;pointer-events:none}
.stn.js .stn-fig.is-on{opacity:1;z-index:2;transition:opacity .5s ease;pointer-events:auto}
/* Die Bildunterschriften liegen ebenfalls übereinander: die alte geht zuerst, die neue kommt danach */
.stn.js .stn-fig figcaption{opacity:0;transition:opacity .18s ease}
.stn.js .stn-fig.is-on figcaption{opacity:1;transition:opacity .3s ease .2s}
.stn.js .stn-step .stn-num{color:var(--color-neutral-500)}
.stn.js .stn-step.is-on .stn-num{color:var(--gold)}
@media (prefers-reduced-motion:reduce){
  .stn.js .stn-fig{grid-row:auto;position:static;opacity:1;pointer-events:auto;transition:none}
  .stn.js .stn-step .stn-num{color:var(--gold)}
}
/* Desktop mit JS: die drei Bilder liegen übereinander, bleiben beim Scrollen stehen und blenden weich um.
   Das ausgehende Blatt bleibt deckend liegen, bis das neue voll da ist – deshalb nur eine Verzögerung, keine Ausblend-Dauer. */
.stn.js .stn-fig{grid-row:1/span 3;position:sticky;top:96px;opacity:0;z-index:1;transition:opacity 0s linear .55s;pointer-events:none}
.stn.js .stn-fig.is-on{opacity:1;z-index:2;transition:opacity .5s ease;pointer-events:auto}
/* Die Bildunterschriften liegen ebenfalls übereinander: die alte geht zuerst, die neue kommt danach */
.stn.js .stn-fig figcaption{opacity:0;transition:opacity .18s ease}
.stn.js .stn-fig.is-on figcaption{opacity:1;transition:opacity .3s ease .2s}
.stn.js .stn-step .stn-num{color:var(--color-neutral-500)}
.stn.js .stn-step.is-on .stn-num{color:var(--gold)}
@media (prefers-reduced-motion:reduce){
  .stn.js .stn-fig{grid-row:auto;position:static;opacity:1;pointer-events:auto;transition:none}
  .stn.js .stn-step .stn-num{color:var(--gold)}
}
/* Kompakt (/leistungen): vier Schritte in einer Spalte, ohne Bild */
.stn-list{margin:0;padding:0;list-style:none;border-bottom:1px solid var(--color-divider)}
.stn-list .stn-step{grid-column:auto;grid-row:auto;grid-template-columns:48px minmax(0,1fr);padding:22px 0 24px}
.stn-list .stn-step:first-of-type{border-top:1px solid var(--color-divider);padding-top:22px}
.stn-list .stn-num{font-size:24px;padding-top:4px}
.stn-list .stn-title{font-size:clamp(24px,2.2vw,30px);margin-bottom:8px}
.stn-list .stn-text{font-size:15px;max-width:52ch}
/* Zwischengrössen (Laptop, iPad quer): schmalerer Spaltenabstand, und das Blatt zeigt nur
   Stellplan und Materialkarte – die drei Mono-Zeilen bräuchten Breite, die hier fehlt. */
@media (min-width:901px) and (max-width:1180px){
  .stn{column-gap:40px}
  .stn-step{grid-template-columns:44px minmax(0,1fr);column-gap:14px}
}

/* — Zwei Räume nebeneinander (/leistungen): gleiche Möbel, andere Richtung — */
.duo-note{font-family:var(--font-display);font-size:clamp(20px,2vw,26px);line-height:1.35;color:var(--color-neutral-700);margin:0 0 26px;max-width:44ch}
.duo-note em{font-style:italic;color:var(--gold)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
.duo figure{margin:0}
.duo .sheet{border-radius:16px}
.duo figcaption{display:flex;justify-content:space-between;gap:16px;margin-top:12px;font-size:13px;color:var(--color-neutral-600)}
.duo figcaption .n{color:var(--gold)}

/* — Über uns: Titel und Satz links, Zitat mit Goldlinie rechts, darunter fünf Punkte in einer Reihe.
   Steht hell (.panel-paper) nach den dunklen drei Schritten; die Farben kommen aus dem Panel, nicht von hier. — */
.about-panel{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:80px 80px;align-items:end}
.about-head .tag-mono{margin-bottom:22px}
.about-lead{margin:24px 0 0;max-width:42ch;font-size:17px;line-height:1.6;color:var(--color-neutral-800)}
.about-quote{margin:0;padding:6px 0 6px 36px;border-left:1px solid var(--gold)}
.about-quote .q{margin:0;font-family:var(--font-display);font-size:clamp(30px,3.1vw,44px);line-height:1.18;letter-spacing:-.01em;color:var(--color-text);max-width:24ch}
.about-quote figcaption{display:flex;align-items:center;gap:12px;margin-top:28px}
.medal{width:28px;height:28px;display:grid;place-items:center;flex:none}
.medal img{width:100%;height:100%;object-fit:contain;filter:var(--brand-filter)}
.about-quote .who{font-size:13px;color:var(--color-neutral-600)}
.points{grid-column:1/-1;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0 32px}
.points li{border-top:1px solid var(--color-divider);padding:22px 0 0;font-size:15px;line-height:1.55;color:var(--color-neutral-800)}
.points .n{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--gold-ink)}
.points strong{display:block;margin:0 0 8px;font-family:var(--font-display);font-style:normal;font-weight:400;font-size:24px;line-height:1.15;color:var(--gold-ink)}

/* — Buchen mit Telefon darunter: eigene Zeile mit Luft und ausreichend Tippfläche — */
.cta-actions{display:flex;flex-direction:column;align-items:center;gap:16px}
.cta-call{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;font-size:15px;color:var(--color-neutral-700);text-decoration:underline;text-underline-offset:4px}

@media (max-width:900px){
  :root, :root[data-mode="dark"], :root[data-mode="light"]{--pad-x:20px}
  .section{padding-block:64px}
  .panel{margin:0 10px;border-radius:16px;padding:72px var(--pad-x)}
  .sec-head{grid-template-columns:1fr;gap:28px;margin-bottom:48px}
  .sec-head .intro{justify-self:start}
  .svc{grid-template-columns:auto 1fr auto;gap:16px 20px;padding:32px 0 48px}
  .svc .body{grid-column:1/-1}
  .row{grid-template-columns:1fr auto;gap:8px 16px;padding:20px 0}
  .row .meta{grid-column:1/-1}
  .fact{grid-template-columns:1fr;gap:6px;padding:22px 0;font-size:19px}
  .fact .k{text-align:left}
  .faq-rows summary{grid-template-columns:auto 1fr auto;gap:14px}
  .faq-rows details p{padding-left:0}
  .cta-panel{padding:88px var(--pad-x)}
  .site-footer{grid-template-columns:1fr;gap:20px}
  .site-footer .footer-news{grid-template-columns:1fr}
  .site-footer .footer-news-note{grid-column:auto}
  .nav{padding:14px 20px;gap:10px}
  .nav-brand>span{display:none} /* mobil nur das Zeichen, wie bei grigoletti */
  .nav .nav-cta{margin-left:auto;padding:10px 14px;font-size:14px}
  .nav-toggle{padding:10px 12px;font-size:13px}
  .nav-links .btn{width:auto}
  .stn{grid-template-columns:1fr;column-gap:0}
  .stn>.stn-step,.stn>.stn-fig{grid-column:1;grid-row:auto}
  .panel~.panel{margin-top:10px}
  .stn.js{display:block}
  .stn.js .stn-fig{display:none}
  .stn-flight{position:sticky;top:0;z-index:3;margin:0 calc(-1 * var(--pad-x)) 8px;padding:12px var(--pad-x) 10px;background:transparent;transition:background-color .2s ease}
  .stn-flight.is-stuck{background:#1a1411}
  .stn-flight::after{content:"";position:absolute;left:0;right:0;top:100%;height:28px;background:linear-gradient(#1a1411,rgba(26,20,17,0));pointer-events:none;opacity:0;transition:opacity .2s ease}
  .stn-flight.is-stuck::after{opacity:1}
  .stn-flight .sheet{border-radius:12px}
  .stn-flight figcaption{margin-top:8px}
  .flight-mat{display:none} /* klebendes Bild bleibt auf dem Handy kompakt */
  .stn:not(.js) .stn-fig{display:block;grid-row:auto;position:static;opacity:1;pointer-events:auto}
  .stn.js .stn-fig figcaption{opacity:1} /* sonst bleiben die Unterschriften nach dem Verkleinern unsichtbar */
  .stn.js .stn-step .stn-num{color:var(--gold)}
  .stn-step{grid-template-columns:40px minmax(0,1fr);column-gap:14px;padding:18px 0 34px}
  .stn-step::before{width:8px;height:8px;top:-3.5px}
  .stn-when{margin-bottom:10px;font-size:11px}
  .stn-num{font-size:24px;padding-top:6px}
  .stn-title{font-size:30px;margin-bottom:12px}
  .stn-fig{padding-top:0;border-top:0}
  .stn-fig .sheet{border-radius:14px}
  .stn-fig figcaption{margin-top:10px;margin-bottom:16px} /* Abstand zur Linie des nächsten Schritts */
  .stn-fig figcaption .n i{display:none} /* die Ziffer steht direkt darunter am Schritt */
  .stn-list .stn-step{grid-template-columns:40px minmax(0,1fr);border-top:1px solid var(--color-divider);padding:18px 0 20px}
  /* Konzeptblatt hochkant: erst der Stellplan, darunter die Materialkarte – Schrift bleibt bei 11 px */
  .duo{grid-template-columns:1fr;gap:24px}
  .duo .sheet{border-radius:12px}
  .duo-note{margin-bottom:16px}
  .panel-dark{--licht-x:30%;--licht-y:26%;--l-w:340px;--l-h:400px;--wash-x:-8%;--wash-y:4%;--w-w:470px;--w-h:720px;--s-w:460px;--s-h:600px}
  .stations{--licht-x:26%;--licht-y:9%;--l-h:380px;--wash-x:0%}
  .cta-panel{--licht-x:50%;--licht-y:34%;--l-w:420px;--l-h:400px;--wash-x:50%;--w-w:700px}
  .about-panel{display:block}
  .about-head .tag-mono{margin-bottom:18px}
  .about-lead{margin-top:18px;font-size:16px}
  .about-quote{margin-top:40px;padding:2px 0 2px 20px}
  .about-quote .q{font-size:25px;line-height:1.24;max-width:none}
  .about-quote figcaption{margin-top:18px}
  .points{display:block;margin-top:40px}
  .points li{padding:15px 0;font-size:15px}
  .points li:last-child{padding-bottom:0}
  .points .n{display:inline-block;margin-right:10px;vertical-align:.12em}
  .points strong{display:inline;margin:0 .25em 0 0;font-size:20px}
  .cta-panel .display-xl{margin-bottom:36px}
  .cta-actions{gap:12px}
  .cta-actions .btn-lg{min-width:220px;justify-content:center}
}