/* ==========================================================================
   HOFF & SCHNEIDER — design tokens & system
   Mid-century, zurückhaltend: warmes Off-White, Nussbraun, Vintage-Hellblau.
   Struktur spiegelt das geplante Astro-Setup: tokens → base → components.
   ========================================================================== */

:root{
  /* ── colour ─────────────────────────────────────────────────────────────
     Zwei Akzente, beide gedämpft. Braun trägt die Wärme, Hellblau die Ruhe.
     Nie beide gleichzeitig in einer Sektion dominant.                     */
  --ink:      #201C17;   /* warmes Schwarzbraun — Text, dunkle Flächen      */
  --ink-80:   rgba(32,28,23,.80);
  --ink-55:   rgba(32,28,23,.55);
  --paper:    #F7F3EB;   /* warmes Off-White — nie reines Weiß             */
  --paper-72: rgba(247,243,235,.72);
  --paper-48: rgba(247,243,235,.48);
  --sand:     #EBE3D5;   /* Sektionswechsel, Karten                        */
  --clay:     #6E3A2F;   /* Oxblood, Akzent: Hover, Linien, Zahlen        */
  --clay-dp:  #38201A;   /* tiefes Oxblood, alle dunklen Flächen          */
  --clay-lt:  #C89A80;   /* heller Akzent auf dunklem Grund               */
  --sky:      #A9C4CC;   /* Vintage-Hellblau — Flächen, Marker             */
  --sky-lt:   #C9DBE0;
  --sky-dp:   #4E7686;   /* dunkles Petrol — Labels, Fokus                 */
  --stone:    #857B6D;
  --line:     #E0D7C7;
  --line-dk:  rgba(247,243,235,.18);

  /* ── type ───────────────────────────────────────────────────────────── */
  --display: "Jost", "Futura", "Century Gothic", "Inter Tight",
             -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  --sans:    "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont,
             "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* ── motion ─────────────────────────────────────────────────────────── */
  --ease: cubic-bezier(.22,1,.36,1);
  --dur:  .7s;

  /* ── layout ─────────────────────────────────────────────────────────── */
  --pad: clamp(20px, 5.5vw, 96px);
  --max: 1440px;
  --nav-h: 84px;
}

/* ── reset ─────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:var(--nav-h)}
img,svg,video{display:block;max-width:100%}
button,input,textarea{font:inherit;color:inherit;background:none;border:0}
button{cursor:pointer}
a{color:inherit}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.62;
  letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* ── layout ────────────────────────────────────────────────────────────── */
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:clamp(80px,11vw,180px)}
.section--tight{padding-block:clamp(56px,7vw,110px)}
.bleed{width:100vw;margin-left:calc(50% - 50vw)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,80px)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,2.8vw,44px)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,2.6vw,48px)}
@media (max-width:900px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .grid-4{gap:34px}
}

/* ── typography ────────────────────────────────────────────────────────── */
.display{
  font-family:var(--display);
  font-size:clamp(3.05rem, 9vw, 9.4rem);
  line-height:.94;
  letter-spacing:-.03em;
  font-weight:300;
  text-wrap:balance;
}
.display .dim{color:var(--clay)}
h2,.h2{
  font-family:var(--display);
  font-size:clamp(2rem, 4.2vw, 4rem);
  line-height:1.04;
  letter-spacing:-.028em;
  font-weight:300;
  max-width:20ch;
  text-wrap:balance;
}
/* Der kursive Serif-Akzent aus dem Hero, überall gleich eingesetzt */
h1 em,h2 em,.h2 em,.quote blockquote em{
  font-family:"Instrument Serif",Georgia,"Times New Roman",serif;
  font-style:italic;font-weight:400;color:var(--clay);
  letter-spacing:-.005em;padding-right:.05em;
}
.surface-dark h2 em,.surface-clay h2 em,.quote blockquote em{color:var(--clay-lt)}
h3,.h3{font-family:var(--display);font-size:1.3rem;line-height:1.26;letter-spacing:-.022em;font-weight:400}
.lead{font-size:clamp(1.12rem,1.55vw,1.36rem);line-height:1.5;letter-spacing:-.017em;max-width:44ch;font-weight:450}
.body{max-width:60ch;color:var(--ink-80)}
.body + .body{margin-top:1.1em}
.small{font-size:.9rem;line-height:1.6;color:var(--stone)}
.label{
  font-family:var(--sans);
  font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--sky-dp);font-weight:500;
}
.sec-head{
  display:flex;gap:clamp(20px,4vw,64px);align-items:baseline;flex-wrap:wrap;
  margin-bottom:clamp(36px,5vw,72px);padding-top:18px;border-top:1px solid var(--line);
}
.sec-head .label{flex:0 0 auto;min-width:180px}

/* ── surfaces ──────────────────────────────────────────────────────────── */
.surface-dark{background:var(--clay-dp);color:var(--paper)}
.surface-clay{background:var(--clay-dp);color:var(--paper)}
.surface-sky{background:var(--sky);color:var(--ink)}
.surface-sand{background:var(--sand)}
.surface-dark .body,.surface-clay .body{color:var(--paper-72)}
.surface-dark .small,.surface-clay .small{color:var(--paper-48)}
.surface-dark .label,.surface-clay .label{color:var(--sky)}
.surface-dark .sec-head,.surface-clay .sec-head{border-top-color:var(--line-dk)}
.surface-sky .label{color:var(--ink-55)}
.surface-sky .sec-head{border-top-color:rgba(32,28,23,.18)}

/* ── buttons ───────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 30px;
  background:var(--clay-dp);color:var(--paper);
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  text-decoration:none;border:1px solid var(--clay-dp);
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.btn:hover{background:var(--clay);border-color:var(--clay)}
.btn--ghost{background:transparent;color:var(--clay-dp);border-color:var(--clay-dp)}
.btn--ghost:hover{background:var(--clay);color:var(--paper);border-color:var(--clay)}
.surface-dark .btn,.surface-clay .btn{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.surface-dark .btn:hover,.surface-clay .btn:hover{background:var(--sky);border-color:var(--sky)}
:focus-visible{outline:2px solid var(--sky-dp);outline-offset:3px}
.surface-dark :focus-visible,.surface-clay :focus-visible{outline-color:var(--sky)}

/* Unterstreichung, die beim Hover von links einläuft */
.ul{position:relative;text-decoration:none;display:inline-block}
.ul::after{
  content:"";position:absolute;left:0;bottom:-3px;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--ease);
}
.ul:hover::after,.ul.is-active::after{transform:scaleX(1);transform-origin:left}

/* ── nav ─────────────────────────────────────────────────────────────────
   Schwebt über allem, ohne Rahmen. Erst beim Scrollen legt sich Papier
   darunter. Nur ein Punkt ist hervorgehoben, und der leise.             */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;background:transparent;
  transition:transform .5s var(--ease),background .4s var(--ease),box-shadow .4s var(--ease);
}
.nav.is-stuck{background:var(--paper-72);backdrop-filter:saturate(160%) blur(16px);box-shadow:0 1px 0 rgba(32,28,23,.06)}
.nav.is-hidden{transform:translateY(-102%)}
.nav__in{
  max-width:var(--max);margin-inline:auto;padding:0 var(--pad);height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.mark{
  /* Kein padding-left. Der Kasten sitzt damit exakt auf derselben Rasterkante
     wie Hero-Headline und Subline, die Wortmarke steht bündig. */
  font-family:var(--display);font-weight:400;font-size:14px;letter-spacing:.2em;
  text-transform:uppercase;text-decoration:none;white-space:nowrap;
  display:inline-flex;align-items:baseline;gap:.9em;margin-left:-.075em;
}
.mark__sub{
  font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none;
  letter-spacing:.01em;font-size:15px;color:var(--stone);position:relative;top:.5px;
}
.mark__sub::before{
  content:"";position:absolute;left:-.48em;top:.1em;bottom:.22em;width:1px;
  background:var(--line);
}
.surface-dark .mark__sub::before{background:rgba(247,243,235,.24)}
/* Das Ampersand ist der einzige kursive Moment in der Wortmarke. */
.mark .amp,.footer .amp{
  font-family:var(--serif);font-style:italic;font-weight:400;
  color:var(--clay);letter-spacing:0;font-size:1.18em;padding:0 .04em;
}
.footer .amp{font-size:1.1em}
@media (max-width:520px){
  .mark{font-size:11px;letter-spacing:.13em;gap:.7em}
  .mark__sub{font-size:12.5px}
}
.nav__right{display:flex;align-items:center;gap:clamp(20px,3vw,46px)}
.nav__links{display:flex;gap:clamp(16px,2vw,30px)}
.nav__links a{
  font-size:12.5px;color:var(--stone);text-decoration:none;position:relative;
  transition:color .35s var(--ease);
}
.nav__links a::after{
  content:"";position:absolute;left:0;right:0;bottom:-7px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease);
}
.nav__links a:hover,.nav__links a.is-active{color:var(--ink)}
.nav__links a:hover::after,.nav__links a.is-active::after{transform:scaleX(1);transform-origin:left}
.lang{
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--stone);
  text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;
}
.lang b{font-weight:500;color:var(--ink)}
.lang i{display:inline-block;width:9px;height:1px;background:currentColor;opacity:.4;margin:0 8px}
.nav__cta{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--ink);
  white-space:nowrap;display:inline-flex;align-items:center;gap:10px;transition:color .35s var(--ease);
}
.nav__cta i{width:5px;height:5px;border-radius:50%;background:var(--clay);display:block;transition:transform .45s var(--ease)}
.nav__cta:hover{color:var(--clay)}
.nav__cta:hover i{transform:scale(1.7)}
.nav__toggle{display:none;font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:12px 0}
@media (max-width:900px){.nav__links,.nav__cta{display:none}.nav__toggle{display:block}}
.drawer{
  position:fixed;inset:0;z-index:70;background:var(--clay-dp);color:var(--paper);
  padding:var(--pad);display:flex;flex-direction:column;justify-content:center;gap:2px;
  transform:translateY(-100%);transition:transform .55s var(--ease);
}
.drawer.is-open{transform:none}
.drawer a{font-family:var(--display);font-weight:300;font-size:2.1rem;letter-spacing:-.03em;text-decoration:none;padding:13px 0;border-bottom:1px solid var(--line-dk)}
.drawer__close{position:absolute;top:28px;right:var(--pad);color:inherit;font-size:11px;letter-spacing:.16em;text-transform:uppercase}

/* ── hero ────────────────────────────────────────────────────────────────
   Die Typografie steht auf Papier, das Bild ist eine eigene Spalte. Kein
   Text auf Bild, kein Schleier: das Foto bleibt unangetastet, die Schrift
   muss gegen nichts ankämpfen.                                          */
.hero{
  min-height:100svh;padding-top:var(--nav-h);
  display:grid;grid-template-columns:1fr minmax(0,.8fr);align-items:stretch;
}
.hero__type{
  display:flex;flex-direction:column;
  padding:clamp(34px,6vh,88px) clamp(30px,5vw,90px) clamp(26px,4vh,52px) var(--pad);
}
.hero__h1{
  font-family:var(--display);font-weight:300;
  font-size:clamp(2.65rem,4.9vw,5.5rem);line-height:1.04;letter-spacing:-.028em;
  margin-top:auto;
  /* Optischer Randausgleich: Jost setzt links eine Vorbreite von rund .082em.
     Ohne diesen Zug stünde die Headline sichtbar eingerückt gegenüber Wortmarke,
     Subline und CTA. Der Wert ist in em, skaliert also mit der Schriftgröße mit. */
  margin-left:-.082em;
}
.hero__h1 em{
  font-family:"Instrument Serif",Georgia,"Times New Roman",serif;
  font-style:italic;font-weight:400;color:var(--clay);
  letter-spacing:-.005em;padding-right:.05em;
}
.hero__h1 .quiet{color:var(--clay)}
.lm{display:block;overflow:hidden;padding-bottom:.07em}
.lm > span{display:block;transform:translateY(114%);transition:transform 1.15s var(--ease)}
.hero.is-ready .lm > span{transform:none}
.hero.is-ready .lm:nth-child(2) > span{transition-delay:.10s}
.hero.is-ready .lm:nth-child(3) > span{transition-delay:.20s}

.hero__sub{margin-top:clamp(26px,3.4vh,42px);max-width:35ch;font-size:1rem;line-height:1.56;color:var(--ink-55)}
.hero .cta{margin-top:clamp(24px,3vh,38px);align-self:flex-start}
.hero__foot{
  margin-top:auto;padding-top:clamp(36px,6vh,80px);
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.hero__meta{display:flex;align-items:center;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--stone)}
.hero__meta i{display:block;width:16px;height:1px;background:currentColor;opacity:.5;margin:0 13px}

.hero__sub,.hero .cta,.hero__foot{opacity:0;transform:translateY(10px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.hero.is-ready .hero__sub{opacity:1;transform:none;transition-delay:.44s}
.hero.is-ready .cta{opacity:1;transform:none;transition-delay:.56s}
.hero.is-ready .hero__foot{opacity:1;transform:none;transition-delay:.68s}

.hero__figure{position:relative;overflow:hidden;background:var(--sand)}
.hero__figure img{
  width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.05);clip-path:inset(0 0 15% 0);
  transition:transform 1.9s var(--ease),clip-path 1.5s var(--ease);
}
.hero.is-ready .hero__figure img{transform:none;clip-path:inset(0)}

/* Der einzige CTA im Hero: eine Textmarke, kein Knopf */
.cta{
  display:inline-flex;align-items:center;gap:15px;text-decoration:none;position:relative;
  font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;
  padding-bottom:13px;color:var(--ink);transition:color .4s var(--ease);
}
.cta::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink);opacity:.2}
.cta::before{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--clay);
  transform:scaleX(0);transform-origin:right;transition:transform .6s var(--ease);
}
.cta:hover{color:var(--clay)}
.cta:hover::before{transform:scaleX(1);transform-origin:left}
.cta svg{transition:transform .5s var(--ease)}
.cta:hover svg{transform:translateX(7px)}

.scrollcue{display:inline-flex;align-items:center;gap:13px;text-decoration:none;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--stone);transition:color .35s var(--ease)}
.scrollcue i{display:block;width:1px;height:36px;background:currentColor;opacity:.35;position:relative;overflow:hidden}
.scrollcue i::after{content:"";position:absolute;inset:0;background:var(--clay);animation:cue 2.8s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(-100%)}50%{transform:translateY(100%)}100%{transform:translateY(100%)}}
.scrollcue:hover{color:var(--clay)}

@media (max-width:900px){
  .hero{grid-template-columns:1fr;min-height:auto}
  .hero__type{padding:44px var(--pad) 44px;order:1}
  .hero__h1{margin-top:0;font-size:clamp(2.5rem,10.5vw,4rem)}
  .hero__figure{order:2;aspect-ratio:4/5}
  .hero__foot{padding-top:38px}
  .scrollcue{display:none}
}

/* ── media ─────────────────────────────────────────────────────────────── */
.media{position:relative;overflow:hidden;background:var(--sand)}
.media img,.media > svg{width:100%;height:100%;object-fit:cover;display:block}
.media__cap{
  position:absolute;left:14px;bottom:12px;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--stone);background:var(--paper-72);
  padding:5px 9px;backdrop-filter:blur(6px);
}
.ratio-21x9{aspect-ratio:21/9}
.ratio-16x9{aspect-ratio:16/9}
.ratio-3x2 {aspect-ratio:3/2}
.ratio-4x5 {aspect-ratio:4/5}
.ratio-3x4 {aspect-ratio:3/4}
.ratio-1x1 {aspect-ratio:1/1}
@media (max-width:700px){.ratio-21x9,.ratio-16x9{aspect-ratio:4/3}}
.media--zoom img,.media--zoom > svg{transform:scale(1.06);transition:transform 1.2s var(--ease)}
.reveal.is-in .media--zoom img,.reveal.is-in .media--zoom > svg{transform:none}

/* ── reveal ────────────────────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(24px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.reveal.is-in{opacity:1;transform:none}
.line-mask{display:block;overflow:hidden}
.line-mask > span{display:block;transform:translateY(105%);transition:transform .9s var(--ease)}
.reveal.is-in .line-mask > span{transform:none}
.reveal.is-in .line-mask:nth-child(2) > span{transition-delay:.08s}
.reveal.is-in .line-mask:nth-child(3) > span{transition-delay:.16s}

/* ── statement ─────────────────────────────────────────────────────────── */
.statement p{font-family:var(--display);font-size:clamp(1.6rem,3.3vw,2.9rem);line-height:1.22;letter-spacing:-.026em;max-width:24ch;font-weight:300}

/* ── before / after slider ─────────────────────────────────────────────────
   Ein Foto, zwei Präsentationen. Links die Darstellung von 2011, rechts das
   Bild in voller Fläche. Der Griff wird gezogen oder mit den Pfeiltasten
   bewegt; ohne JS steht er bei 50 % und beide Seiten sind sichtbar.       */
.compare{position:relative;overflow:hidden;background:var(--sand);aspect-ratio:16/10;touch-action:pan-y;user-select:none}
@media (max-width:700px){.compare{aspect-ratio:4/5}}
.compare__after,.compare__before{position:absolute;inset:0}
.compare__after img{width:100%;height:100%;object-fit:cover}
.compare__before{
  clip-path:inset(0 50% 0 0);background:#E9E7E2;
  display:flex;align-items:center;justify-content:flex-start;
  padding:clamp(16px,3vw,48px);transition:clip-path .05s linear;
}
/* Die moderne Seite: randlos, ohne Chrome, Typografie trägt alles */
.sitemock{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(18px,2.6vw,40px);
  padding-bottom:clamp(52px,5.5vw,84px);
  color:var(--paper);
  background:linear-gradient(180deg,rgba(32,28,23,.28) 0%,rgba(32,28,23,.02) 32%,rgba(32,28,23,.46) 100%);
}
.sitemock__top{display:flex;align-items:center;justify-content:space-between;gap:20px}
.sitemock__brand{font-family:var(--display);font-size:clamp(11px,1.1vw,14px);letter-spacing:.32em;text-transform:uppercase}
.sitemock__nav{display:flex;gap:clamp(12px,1.6vw,26px);font-size:clamp(9px,.85vw,12px);letter-spacing:.06em;opacity:.82}
.sitemock__bottom{display:flex;flex-direction:column;align-items:flex-end;gap:clamp(9px,1.1vw,15px);text-align:right;margin-left:auto;max-width:56%}
@media (max-width:900px){.sitemock__bottom{max-width:70%}}
.sitemock__meta{font-size:clamp(7px,.72vw,10px);letter-spacing:.2em;text-transform:uppercase;opacity:.8}
.sitemock__meta i{font-style:normal}
.sitemock__meta i + i::before{content:"·";padding:0 .55em;opacity:.7}
.sitemock__head{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.25rem,2.9vw,2.9rem);line-height:1.06;letter-spacing:-.035em;
}
.sitemock__row{
  display:flex;align-items:center;justify-content:flex-end;gap:clamp(12px,1.6vw,26px);
  width:100%;padding-top:clamp(9px,1.1vw,17px);border-top:1px solid rgba(247,243,235,.3);
}
.sitemock__price{font-family:var(--display);font-size:clamp(9px,1vw,13px);opacity:.88;white-space:nowrap}
.sitemock__cta{
  font-size:clamp(8px,.8vw,11px);letter-spacing:.14em;text-transform:uppercase;
  border:1px solid rgba(247,243,235,.7);padding:9px 16px;white-space:nowrap;
}
@media (max-width:700px){.sitemock__nav{display:none}}

/* ── die Seite von 2011 ────────────────────────────────────────────────────
   Bewusst ein Klischee, aber ein realistisches: Kopfband mit gequetschtem
   Foto und Schlagschattenschrift, blaue unterstrichene Links mit Pipe,
   Blocksatz in Arial 9 px, Bevel-Button, Besucherzähler. Alle Maße in cqw,
   damit das Fenster proportional skaliert statt auf dem Handy zu zerfallen. */
.oldsite{
  width:min(560px,44%);flex:0 0 auto;margin-left:clamp(0px,3vw,52px);
  background:#fff;border:1px solid #B9B5AE;box-shadow:0 12px 26px rgba(32,28,23,.13);
  container-type:inline-size;font-family:Arial,Helvetica,sans-serif;color:#3A3A3A;
}
.oldsite__bar{
  height:16px;height:5.4cqw;background:linear-gradient(#F4F2EE,#DAD7D1);
  border-bottom:1px solid #BCB8B1;display:flex;align-items:center;gap:1cqw;padding:0 1.6cqw;
}
.oldsite__bar i{
  width:4px;height:4px;width:1.7cqw;height:1.7cqw;border-radius:50%;
  background:#C4C0B9;border:1px solid #AAA69F;display:block;flex:0 0 auto;
}
.oldsite__bar u{
  flex:1;margin-left:1.4cqw;background:#fff;border:1px solid #C3BFB8;text-decoration:none;
  font-size:6px;font-size:1.75cqw;color:#6C6862;padding:.45cqw 1cqw;line-height:1.5;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.oldsite__band{position:relative;height:40px;height:13.5cqw;overflow:hidden;
  background:#24405A;border-bottom:3px solid #16283A}
.oldsite__band img{width:100%;height:100%;object-fit:cover;opacity:.5;
  filter:grayscale(.4) saturate(.65) contrast(.8) brightness(1.08)}
.oldsite__ident{position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:center;padding-left:2.6cqw}
.oldsite__ident b{font-family:"Times New Roman",Times,serif;font-weight:700;
  font-size:16px;font-size:5.4cqw;line-height:1;color:#fff;text-shadow:1px 1px 0 rgba(0,0,0,.6)}
.oldsite__ident em{font-style:italic;font-size:7px;font-size:2.3cqw;color:#D5E2EF;
  text-shadow:1px 1px 0 rgba(0,0,0,.5);margin-top:.9cqw}
.oldsite__nav{background:#EDEAE3;border-bottom:1px solid #CFCBC4;
  padding:1.4cqw 2.4cqw;font-size:6px;font-size:1.85cqw;line-height:1.6;color:#8A867F}
.oldsite__nav a{color:#0000CC;text-decoration:underline}
.oldsite__col{padding:2.4cqw}
.oldsite__col h4{font-family:"Times New Roman",Times,serif;font-weight:700;
  font-size:12px;font-size:4cqw;line-height:1.1;color:#8B1A1A;margin-bottom:1.8cqw}
.oldsite__body{display:grid;grid-template-columns:34% 1fr;gap:2.2cqw;align-items:start}
.oldsite__thumb{border:1px solid #4A4640;padding:.5cqw;background:#fff}
.oldsite__thumb img{width:100%;aspect-ratio:4/3;object-fit:cover;
  filter:grayscale(.45) contrast(.75) brightness(1.12) saturate(.6)}
.oldsite__text{font-size:6px;font-size:1.95cqw;line-height:1.5;color:#494949;text-align:justify}
.oldsite__gal{font-family:"Times New Roman",Times,serif;font-weight:700;
  font-size:8px;font-size:2.6cqw;color:#8B1A1A;margin:2.6cqw 0 1.3cqw}
.oldsite__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6cqw}
.oldsite__grid span{border:1px solid #4A4640;padding:.4cqw;background:#fff;display:block}
.oldsite__grid img{width:100%;aspect-ratio:4/3;object-fit:cover;
  filter:grayscale(.5) contrast(.72) brightness(1.14) saturate(.55)}
.oldsite__grid span:nth-child(2) img{object-position:82% 22%}
.oldsite__grid span:nth-child(3) img{object-position:18% 78%}
.oldsite__foot{display:flex;align-items:center;justify-content:space-between;
  gap:2cqw;margin-top:2.8cqw}
.oldsite__btn{
  font-weight:700;font-size:7px;font-size:2.1cqw;line-height:1;color:#fff;
  padding:1.2cqw 2.4cqw;border-radius:3px;background:linear-gradient(#82B4E6,#3B7BC3);
  border:1px solid #2A5D9E;text-shadow:0 1px 0 rgba(0,0,0,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);white-space:nowrap;
}
.oldsite__counter{font-family:"Courier New",Courier,monospace;font-size:6px;font-size:1.8cqw;
  color:#8FE08F;background:#111;border:1px solid #333;padding:.7cqw 1.2cqw;letter-spacing:.06em;
  white-space:nowrap}
.oldsite__updated{font-size:5px;font-size:1.6cqw;font-style:italic;color:#9A968F;
  margin-top:1.9cqw;text-align:right}
@media (max-width:700px){
  .oldsite{width:min(560px,52%);margin-left:0}
  /* Schmaler Schirm: der Entwurf rechts muss mit weniger Platz auskommen. */
  .sitemock__bottom{max-width:56%;gap:7px}
  .sitemock__head{font-size:15px;line-height:1.1}
  .sitemock__meta{font-size:6.5px;letter-spacing:.13em}
  .sitemock__row{flex-direction:column;align-items:flex-end;gap:7px;padding-top:8px}
  .sitemock__price{font-size:8.5px}
  .sitemock__cta{font-size:7px;padding:6px 10px;letter-spacing:.1em}
}
.compare__handle{
  position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--paper);
  transform:translateX(-1px);z-index:3;box-shadow:0 0 0 1px rgba(32,28,23,.12);
}
.compare__grip{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:60px;height:60px;border-radius:50%;background:var(--paper);color:var(--ink);
  display:grid;place-items:center;font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  box-shadow:0 6px 24px rgba(32,28,23,.20);cursor:ew-resize;
  transition:transform .3s var(--ease),background .3s var(--ease);
}
.compare:hover .compare__grip{transform:translate(-50%,-50%) scale(1.06)}
.compare__grip:active{background:var(--sky)}
.compare__tag{
  position:absolute;bottom:14px;z-index:4;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;padding:7px 11px;background:var(--paper-72);
  backdrop-filter:blur(6px);color:var(--ink);
}
.compare__tag--l{left:14px}
.compare__tag--r{right:14px;background:rgba(56,32,26,.55);color:var(--paper);backdrop-filter:blur(6px)}

/* ── symptoms ──────────────────────────────────────────────────────────── */
.symptoms{list-style:none;max-width:720px}
.symptoms li{padding:14px 0;border-top:1px solid var(--line);font-size:.98rem;color:var(--ink-80)}


/* ── value ─────────────────────────────────────────────────────────────── */
.value-item{border-top:1px solid var(--line-dk);padding-top:18px}
.value-item h3{color:var(--sky-lt)}
.value-item p{margin-top:12px;font-size:.94rem;line-height:1.6;color:var(--paper-72)}

/* ── commission calculator ─────────────────────────────────────────────── */
.calc{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,72px);align-items:start}
@media (max-width:900px){.calc{grid-template-columns:1fr}}
.calc__row{margin-bottom:30px}
.calc__row label{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-size:.92rem;color:var(--ink-80);margin-bottom:12px}
.calc__row output{font-variant-numeric:tabular-nums;font-weight:500;color:var(--ink)}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:1px;background:var(--line);
  cursor:pointer;margin:14px 0;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:26px;height:26px;border-radius:50%;
  background:var(--paper);border:1px solid var(--clay);box-shadow:0 2px 10px rgba(32,28,23,.14);
  transition:transform .25s var(--ease),background .25s var(--ease);
}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.12);background:var(--sky)}
input[type=range]::-moz-range-thumb{
  width:24px;height:24px;border-radius:50%;background:var(--paper);
  border:1px solid var(--clay);box-shadow:0 2px 10px rgba(32,28,23,.14);
}
.calc__out{background:var(--sky);padding:clamp(26px,3.4vw,48px);align-self:stretch}
.calc__out .label{color:var(--ink-55)}
.calc__sum{
  font-family:var(--display);font-weight:300;font-size:clamp(2.8rem,6vw,5rem);line-height:1;
  letter-spacing:-.035em;margin:14px 0 20px;font-variant-numeric:tabular-nums;
}
.calc__note{font-size:.94rem;line-height:1.6;color:var(--ink-80);max-width:38ch}
.calc__note + .calc__note{margin-top:12px;padding-top:12px;border-top:1px solid rgba(32,28,23,.16)}

/* ── work ──────────────────────────────────────────────────────────────── */
.work-item{display:block}
.work-item h3{margin-top:22px;font-family:var(--display);font-size:1.02rem;letter-spacing:.2em;text-transform:uppercase;font-weight:400}
.work-item .place{font-size:.85rem;color:var(--stone);margin-top:6px}
.work-item p{margin-top:12px;font-size:.94rem;line-height:1.62;color:var(--ink-80)}
.work-item .tag{margin-top:16px;font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--stone)}
.work-item:hover .work-item__more,.work-item:focus-visible .notice{
  border-left:2px solid var(--sky);padding:14px 0 14px 20px;font-size:.92rem;
  line-height:1.6;color:var(--ink-80);max-width:78ch;margin-bottom:clamp(36px,4vw,56px);
}

/* ── Projektgalerie: seitlich schiebbar, öffnet nichts ─────────────────── */
.wslider{position:relative}
.wslider__track{
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
}
.wslider__track::-webkit-scrollbar{display:none}
.wslide{flex:0 0 100%;scroll-snap-align:start}
.wnav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:40px;height:40px;border-radius:50%;
  background:var(--paper-72);backdrop-filter:blur(8px);color:var(--ink);
  display:grid;place-items:center;opacity:0;
  transition:opacity .35s var(--ease),background .3s var(--ease);
}
.wnav:hover{background:var(--paper)}
.wslider:hover .wnav,.wnav:focus-visible{opacity:1}
.wnav[disabled]{opacity:0 !important;pointer-events:none}
.wnav--prev{left:12px}
.wnav--next{right:12px}
@media (hover:none){.wslider:hover .wnav,.wnav{opacity:.9}}
.wdots{
  position:absolute;left:50%;bottom:12px;transform:translateX(-50%);
  display:flex;gap:6px;pointer-events:none;
}
.wdot{
  width:5px;height:5px;border-radius:50%;background:rgba(247,243,235,.55);
  box-shadow:0 0 6px rgba(32,28,23,.35);transition:background .3s var(--ease);
}
.wdot.is-on{background:var(--paper)}

/* ── quote over image ──────────────────────────────────────────────────── */
.quote{position:relative;min-height:min(78vh,720px);display:grid;place-items:center;overflow:hidden;background:var(--clay-dp)}
.quote__bg{position:absolute;inset:0}
.quote__bg img{width:100%;height:100%;object-fit:cover}
.quote__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(56,32,26,.16) 0%,rgba(56,32,26,.52) 62%,rgba(56,32,26,.70) 100%)}
.quote__in{position:relative;z-index:2;text-align:center;padding:clamp(56px,9vw,130px) var(--pad);max-width:1180px}
.quote blockquote{
  /* Größe auf ein längeres Zitat ausgelegt. Ein Dreizeiler verträgt 3,4rem,
     ein Zitat über vierzig Wörter nicht mehr, sonst füllt es zwei Bildschirme. */
  font-family:var(--display);font-weight:300;color:var(--paper);
  font-size:clamp(1.18rem,2.35vw,2.15rem);line-height:1.24;letter-spacing:-.022em;
  text-wrap:pretty;max-width:26ch;margin:0 auto;
}
@media (min-width:1100px){.quote blockquote{max-width:30ch}}
.quote blockquote.is-quote::before{content:"\201C"}
.quote blockquote.is-quote::after{content:"\201D"}
/* Leitsatz: keine Anführungszeichen, dafür größer. Ein Zitat wird jemandem
   zugeschrieben, eine Haltung nicht. */
.quote blockquote.is-statement{
  font-size:clamp(1.5rem,3.7vw,3.1rem);line-height:1.15;letter-spacing:-.03em;
  max-width:none;text-wrap:balance;
}
/* Instrument Serif kursiv trägt rechts eine Nachbreite. Ohne diesen Zug steht
   der Punkt nach dem Akzentwort sichtbar abgesetzt. */
.quote blockquote em{margin-right:-.07em}
.quote figcaption{
  margin-top:clamp(26px,3.4vw,46px);color:var(--sky-lt);font-size:.85rem;
  letter-spacing:.16em;text-transform:uppercase;
}
.quote figcaption::before{
  content:"";display:block;width:44px;height:1px;background:rgba(247,243,235,.4);
  margin:0 auto clamp(20px,2.4vw,30px);
}
.quote figcaption span{display:block;color:var(--paper-48);letter-spacing:.06em;text-transform:none;margin-top:6px;font-size:.88rem}
.quote__flag{
  position:absolute;left:0;right:0;top:0;z-index:3;background:var(--sky);color:var(--ink);
  font-size:11px;letter-spacing:.1em;padding:10px var(--pad);text-align:center;
}

/* ── Bildmomente ───────────────────────────────────────────────────────── */
.collage{display:grid;gap:clamp(14px,2vw,32px);align-items:end}
.collage--3{grid-template-columns:1.05fr .8fr 1.05fr}
.collage--2{grid-template-columns:1.15fr .85fr;align-items:start}
.collage__cell--mid{padding-bottom:clamp(20px,4vw,64px)}
.collage__cell--offset{padding-top:clamp(36px,7vw,120px)}
.collage__note{
  margin-top:16px;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--stone);
}
@media (max-width:820px){
  .collage--3{grid-template-columns:1fr 1fr}
  .collage--3 .collage__cell--mid{grid-column:1 / -1;padding-bottom:0;max-width:60%}
  .collage--2{grid-template-columns:1fr}
  .collage__cell--offset{padding-top:0}
}

/* ── process ───────────────────────────────────────────────────────────── */
.step{border-top:1px solid var(--line);padding-top:20px}
.step .num{font-family:var(--display);font-size:12px;letter-spacing:.16em;color:var(--clay);margin-bottom:14px}
.step p{margin-top:12px;font-size:.95rem;line-height:1.62;color:var(--ink-80)}
.freelook{margin-top:clamp(48px,6vw,88px);border-top:1px solid var(--line);padding-top:clamp(28px,3vw,44px)}

/* ── pricing ───────────────────────────────────────────────────────────── */
.plan{border:1px solid var(--line);background:var(--paper);padding:clamp(26px,3vw,46px);display:flex;flex-direction:column;gap:22px;transition:border-color .4s var(--ease),transform .4s var(--ease)}
.plan:hover{border-color:var(--clay)}
.plan__price{font-family:var(--display);font-weight:300;font-size:clamp(2.4rem,4vw,3.5rem);line-height:1;letter-spacing:-.032em;margin-top:10px}
.plan__sub{font-size:.93rem;color:var(--stone);margin-top:10px;max-width:34ch}
.plan ul{list-style:none;font-size:.94rem;color:var(--ink-80)}
.plan li{padding:9px 0;border-bottom:1px solid var(--line)}
.plan li:last-child{border-bottom:0}
.plan .btn{align-self:flex-start;margin-top:auto}
.options{margin-top:clamp(36px,4vw,56px);max-width:760px}
.options .row{display:flex;justify-content:space-between;gap:20px;padding:13px 0;border-top:1px solid var(--line);font-size:.94rem}
.options .row span:last-child{color:var(--clay);white-space:nowrap}

/* ── booking tabs ──────────────────────────────────────────────────────── */
.tabs{display:flex;gap:0;border-bottom:1px solid var(--line-dk);flex-wrap:wrap}
.tab{
  padding:16px 24px 16px 0;margin-right:28px;color:var(--paper-48);
  font-size:.95rem;letter-spacing:-.01em;position:relative;
  transition:color .35s var(--ease);
}
.tab:last-child{margin-right:0}
.tab::after{content:"";position:absolute;left:0;right:24px;bottom:-1px;height:1px;background:var(--sky);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.tab.is-active{color:var(--paper)}
.tab.is-active::after{transform:scaleX(1)}
.tab .num{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--sky);margin-bottom:6px}
.tabpanel{padding-top:clamp(30px,4vw,54px);display:none}
.tabpanel.is-active{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,72px);animation:fadein .55s var(--ease)}
@media (max-width:900px){.tabpanel.is-active{grid-template-columns:1fr}}
@keyframes fadein{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.tabpanel h3{font-size:clamp(1.6rem,2.6vw,2.4rem);letter-spacing:-.028em;font-weight:300;color:var(--paper)}
.tabpanel .price-hint{margin-top:18px;font-size:.9rem;color:var(--sky)}

/* ── Exposé-Websites ─────────────────────────────────────────────────────
   Eigenes Angebot, andere Zielgruppe. Bleibt im System, setzt sich aber
   durch die Sandfläche und die Datenleiste über dem Bild ab.            */
.ex-figure{position:relative;overflow:hidden;background:var(--sand)}

/* Der Entwurf einer Objektseite, nicht bloß ein Foto mit Beschriftung */
.exmock{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(16px,2.2vw,34px);color:var(--paper);
  background:linear-gradient(180deg,
    rgba(56,32,26,.46) 0%, rgba(56,32,26,.06) 26%,
    rgba(56,32,26,0) 46%, rgba(56,32,26,.56) 78%, rgba(56,32,26,.84) 100%);
}
.exmock__top{display:flex;align-items:center;gap:clamp(12px,2vw,28px)}
.exmock__brand{
  font-family:var(--display);font-weight:400;font-size:clamp(10px,1.05vw,13px);
  letter-spacing:.3em;text-transform:uppercase;margin-right:auto;
}
.exmock__nav{display:flex;gap:clamp(10px,1.5vw,24px);font-size:clamp(9px,.85vw,11.5px);letter-spacing:.05em;opacity:.85}
.exmock__bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.exmock__head{
  font-family:var(--display);font-weight:300;
  font-size:clamp(1.15rem,2.6vw,2.7rem);line-height:1.06;letter-spacing:-.03em;
  margin-bottom:clamp(12px,1.6vw,22px);max-width:28ch;text-wrap:nowrap;
}
.ex-data{
  display:flex;align-items:baseline;gap:clamp(10px,1.8vw,28px);flex-wrap:wrap;
  font-size:clamp(8.5px,.78vw,11px);letter-spacing:.13em;text-transform:uppercase;color:rgba(247,243,235,.82);
}
.ex-price{
  font-family:var(--display);font-weight:300;font-size:clamp(.95rem,1.5vw,1.4rem);
  letter-spacing:-.02em;text-transform:none;color:var(--paper);
  padding-right:clamp(8px,1.4vw,20px);
}
.exmock__cta{
  flex:0 0 auto;font-size:clamp(8.5px,.78vw,10.5px);letter-spacing:.15em;text-transform:uppercase;
  border:1px solid rgba(247,243,235,.7);padding:10px 16px;white-space:nowrap;
}
@media (max-width:820px){
  .exmock__nav,.exmock__cta{display:none}
  .exmock__head{max-width:none;text-wrap:wrap;font-size:clamp(1.1rem,5.4vw,1.7rem)}
  .ex-data{gap:6px 12px}
  .ex-price{flex:0 0 100%;padding-right:0;margin-bottom:2px}
}

.ex-item{border-top:1px solid var(--line);padding-top:18px}
.ex-item p{margin-top:12px;font-size:.94rem;line-height:1.6;color:var(--ink-80)}
.ex-foot{
  margin-top:clamp(44px,5vw,80px);padding-top:clamp(26px,3vw,40px);border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:clamp(28px,5vw,80px);flex-wrap:wrap;align-items:flex-start;
}
.ex-price-box{flex:0 0 auto;max-width:36ch}
.ex-price-box .label{font-size:clamp(1.15rem,1.9vw,1.5rem);letter-spacing:.02em;text-transform:none;
  font-family:var(--display);font-weight:300;color:var(--ink)}
@media (max-width:820px){.ex-foot{flex-direction:column}}

/* ── about ─────────────────────────────────────────────────────────────── */
.trust{list-style:none;margin-top:clamp(30px,3vw,44px)}
.trust li{padding:12px 0;border-top:1px solid var(--line);font-size:.95rem;color:var(--ink-80)}
.trust li::before{content:"·";color:var(--clay);margin-right:12px;font-weight:700}

/* ── faq ───────────────────────────────────────────────────────────────── */
.faq details{border-top:1px solid var(--line)}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:24px 0;display:flex;justify-content:space-between;
  gap:24px;align-items:baseline;font-size:clamp(1.05rem,1.5vw,1.25rem);letter-spacing:-.022em;
  transition:color .3s var(--ease);
}
.faq summary:hover{color:var(--clay)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--clay);font-size:1.3rem;line-height:1;transition:transform .35s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .answer{padding-bottom:26px;max-width:64ch;color:var(--ink-80);font-size:.98rem}

/* ── lead form ─────────────────────────────────────────────────────────── */
.form{display:flex;flex-direction:column}
.field{position:relative;border-bottom:1px solid var(--line-dk);padding-top:22px;transition:border-color .35s var(--ease)}
.field:focus-within{border-bottom-color:var(--sky)}
.field label{
  position:absolute;top:22px;left:0;font-size:.95rem;color:var(--paper-48);
  pointer-events:none;transform-origin:left top;
  transition:transform .3s var(--ease),font-size .3s var(--ease),color .3s var(--ease);
}
.field input,.field textarea{width:100%;outline:none;padding:6px 0 14px;font-size:1rem;color:var(--paper)}
.field textarea{resize:vertical;min-height:26px}
.field input:focus + label,.field textarea:focus + label,
.field input:not(:placeholder-shown) + label,.field textarea:not(:placeholder-shown) + label{
  transform:translateY(-19px) scale(.72);color:var(--sky);
}
.field input::placeholder,.field textarea::placeholder{color:transparent}
.form .btn{margin-top:30px;align-self:flex-start}
.form__fine{margin-top:16px}
.form-success{padding:26px 0;font-size:1.05rem;color:var(--paper)}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}

/* ── Kontakt: E-Mail als Hauptweg ──────────────────────────────────────── */
.mailto{
  display:block;width:fit-content;max-width:100%;margin-top:16px;font-family:var(--display);font-weight:300;
  font-size:clamp(1.5rem,3.4vw,2.9rem);line-height:1.05;letter-spacing:-.035em;
  color:var(--paper);text-decoration:none;position:relative;word-break:break-word;
}
.mailto::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--sky);
  transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease);
}
.mailto:hover{color:var(--sky)}
.mailto:hover::after{transform:scaleX(1);transform-origin:left}
.formwrap{margin-top:clamp(36px,5vw,64px);border-top:1px solid var(--line-dk);padding-top:20px}
.formwrap summary{
  list-style:none;cursor:pointer;font-size:12px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--paper-48);display:flex;align-items:center;gap:10px;transition:color .3s var(--ease);
}
.formwrap summary:hover{color:var(--sky)}
.formwrap summary::-webkit-details-marker{display:none}
.formwrap summary::after{content:"+";font-size:1.1rem;line-height:1;transition:transform .35s var(--ease)}
.formwrap[open] summary::after{transform:rotate(45deg)}
.formwrap .form{margin-top:18px}

/* ── sticky mobile cta ─────────────────────────────────────────────────── */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:55;
  padding:12px var(--pad) calc(12px + env(safe-area-inset-bottom));
  background:var(--paper-72);backdrop-filter:saturate(150%) blur(14px);
  border-top:1px solid var(--line);transform:translateY(120%);
  transition:transform .45s var(--ease);
}
.sticky-cta.is-in{transform:none}
.sticky-cta .btn{width:100%}
@media (min-width:861px){.sticky-cta{display:none}}

/* ── scroll progress ───────────────────────────────────────────────────── */
.progress{position:fixed;top:0;left:0;height:2px;background:var(--clay);z-index:80;width:0;transition:width .12s linear}

/* ── footer ────────────────────────────────────────────────────────────── */
.footer{border-top:1px solid var(--line);padding-block:clamp(44px,5vw,72px)}
.footer__in{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:13px;color:var(--stone)}
.footer a{text-decoration:none;transition:color .3s var(--ease)}
.footer a:hover{color:var(--clay)}
.footer__links{display:flex;gap:22px;flex-wrap:wrap}

/* ── legal pages ───────────────────────────────────────────────────────── */
.prose{max-width:70ch;padding-top:calc(var(--nav-h) + 60px)}
.prose h1{font-family:var(--display);font-size:clamp(2rem,4vw,3rem);letter-spacing:-.03em;line-height:1.05;margin-bottom:28px;font-weight:300}
.prose h2{font-size:1.15rem;letter-spacing:-.02em;margin:34px 0 10px;max-width:none;font-family:var(--sans);font-weight:500}
.prose p{color:var(--ink-80);margin-bottom:14px}

/* ── reduced motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .reveal{opacity:1;transform:none}
  .line-mask > span{transform:none}
  .media--zoom img,.media--zoom > svg{transform:none}
  .hero .lm > span{transform:none}
  .hero__sub,.hero .cta,.hero__foot{opacity:1;transform:none}
  .hero__figure img{transform:none;clip-path:none}
  .scrollcue i::after{animation:none}
}

/* ── print ─────────────────────────────────────────────────────────────── */
@media print{.nav,.sticky-cta,.drawer,.lightbox,.progress{display:none}.reveal{opacity:1;transform:none}}




/* ══════════════════════════════════════════════════════════════════════════
   Umbau August 2026: Bildwelt, Risikoumkehr, Beweisband, editoriale Listen.
   Ziel war, die drei Standardbausteine (Vierer-Kachel, Prozesskacheln,
   Referenzraster) durch Formen zu ersetzen, die man nicht in jedem Baukasten
   findet. Alles bleibt im bestehenden Farb- und Schriftsystem.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Hero: Preiszeile sitzt jetzt oben, direkt unter der Subline ────────── */
.hero__meta--top{margin:clamp(18px,2.2vw,28px) 0 clamp(26px,3vw,40px)}
.hero__foot{justify-content:flex-end}

/* ── Was das verändert: editoriale Liste statt Kachelraster ────────────── */
.vlist{list-style:none;border-top:1px solid var(--line-dk)}
.vrow{
  display:grid;grid-template-columns:auto minmax(0,.85fr) minmax(0,1.5fr);
  gap:clamp(16px,3vw,60px);align-items:baseline;
  padding:clamp(20px,2.4vw,34px) 0;border-bottom:1px solid var(--line-dk);
}
.vrow__n{
  font-family:var(--serif);font-style:italic;color:var(--clay-lt);
  font-size:clamp(1.1rem,1.8vw,1.5rem);line-height:1;min-width:2.2ch;
}
.vrow__t{
  font-family:var(--display);font-weight:300;letter-spacing:-.02em;overflow-wrap:break-word;
  font-size:clamp(1.15rem,2.1vw,1.7rem);line-height:1.12;
}
.vrow__d{font-size:.96rem;color:rgba(247,243,235,.72);max-width:52ch}
@media (max-width:800px){
  .vrow{grid-template-columns:auto 1fr;gap:14px 18px}
  .vrow__d{grid-column:2/3}
}

/* ── Bildwelt: versetztes Band, horizontal weiterblätterbar ─────────────────
   Die Breiten sind aus dem früheren 24-Spalten-Raster gerechnet, damit die
   ersten fünf Bilder exakt so stehen wie vorher. Danach wiederholt sich der
   Rhythmus alle fünf Bilder: breit, schmal, breit, schmal, schmal.          */
.moodband{
  --mb-pad:clamp(20px,4vw,64px);
  --mb-gap:clamp(10px,1.2vw,20px);
  --mb-col:calc((100% - var(--mb-gap) * 23) / 24);
  display:flex;gap:var(--mb-gap);align-items:flex-start;
  padding:0 var(--mb-pad);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;scroll-behavior:smooth;
  scroll-padding-left:var(--mb-pad);
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.moodband::-webkit-scrollbar{display:none}
.moodband:focus-visible{outline:2px solid var(--clay);outline-offset:6px}
.mb__i{min-width:0;scroll-snap-align:start}
.mb__i figcaption{
  margin-top:11px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--stone);font-weight:500;
}
/* Der Rhythmus hängt an einer festen Klasse, nicht an der Position im DOM.
   Nur so behalten die geklonten Bilder des Endlosbandes ihre Größe.          */
.mb__i--r1{flex:0 0 calc(var(--mb-col)*6 + var(--mb-gap)*5);margin-top:0}
.mb__i--r2{flex:0 0 calc(var(--mb-col)*4 + var(--mb-gap)*3);margin-top:clamp(44px,7vw,124px)}
.mb__i--r3{flex:0 0 calc(var(--mb-col)*6 + var(--mb-gap)*5);margin-top:clamp(14px,2vw,38px)}
.mb__i--r4{flex:0 0 calc(var(--mb-col)*4 + var(--mb-gap)*3);margin-top:clamp(58px,9vw,164px)}
.mb__i--r5{flex:0 0 calc(var(--mb-col)*4 + var(--mb-gap)*3);margin-top:clamp(24px,3.4vw,74px)}

/* Pfeile. Sitzen in der Kopfzeile des Abschnitts, nicht über den Bildern. */
.mb-nav{display:flex;gap:9px;margin-left:auto;align-self:center}
.mb-nav__b{
  width:42px;height:42px;padding:0;border-radius:50%;
  border:1px solid var(--line);background:transparent;color:var(--ink);
  display:grid;place-items:center;cursor:pointer;
  transition:border-color .3s,color .3s,opacity .3s;
}
.mb-nav__b svg{width:16px;height:16px;display:block}
.mb-nav__b--next svg{transform:scaleX(-1)}
.mb-nav__b:hover{border-color:var(--clay);color:var(--clay)}
.mb-nav__b:focus-visible{outline:2px solid var(--clay);outline-offset:3px}
.mb-nav__b[disabled]{opacity:.26;cursor:default;border-color:var(--line);color:var(--ink)}

/* Im Endlosbetrieb darf nicht zwingend eingerastet werden: der Browser zieht
   die Position beim Wiedereinrasten sonst eigenmächtig auf einen anderen
   Fangpunkt und der lautlose Rücksprung wird sichtbar.                       */
.moodband.is-loop{scroll-snap-type:none}

@media (prefers-reduced-motion:reduce){.moodband{scroll-behavior:auto}}
@media (max-width:900px){
  .moodband{--mb-pad:clamp(20px,5vw,40px);--mb-gap:14px;scroll-snap-type:x mandatory}
  .mb__i{flex:0 0 62% !important;margin-top:0 !important;scroll-snap-align:center}
  .mb-nav{display:none}
}

/* ── Risikoumkehr: das einzige Oxblood-Feld der Seite ───────────────────── */
.surface-ox{background:var(--clay);color:var(--paper)}
.surface-ox .label{color:var(--clay-lt)}
.surface-ox .sec-head{border-top-color:rgba(247,243,235,.26)}
.surface-ox h2 em{font-family:var(--serif);font-style:italic;color:var(--paper);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.14em}
.surface-ox .body{color:rgba(247,243,235,.82)}
.rk{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(247,243,235,.24)}
@media (max-width:900px){.rk{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.rk{grid-template-columns:1fr}}
.rk__i{background:var(--clay);padding:clamp(22px,2.4vw,34px) clamp(18px,2vw,28px)}
.rk__i h3{
  font-family:var(--display);font-weight:400;letter-spacing:.01em;
  font-size:clamp(1rem,1.5vw,1.15rem);margin-bottom:10px;
}
.rk__i p{font-size:.92rem;color:rgba(247,243,235,.76)}
.rk__note{
  margin-top:clamp(24px,2.8vw,38px);font-size:.88rem;color:rgba(247,243,235,.66);
  padding-top:16px;border-top:1px solid rgba(247,243,235,.24);max-width:60ch;
}

/* ── Beweisband: diese Seite ist das Produkt ────────────────────────────── */
.proof{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(22px,3vw,56px);align-items:start;
  border:1px solid var(--line);background:var(--sand);
  padding:clamp(24px,2.8vw,40px);margin-bottom:clamp(28px,3.4vw,52px);
}
@media (max-width:820px){.proof{grid-template-columns:1fr;gap:20px}}
.proof__t{
  font-family:var(--display);font-weight:300;letter-spacing:-.028em;
  font-size:clamp(1.3rem,2.4vw,1.9rem);line-height:1.1;margin-bottom:12px;
}
.proof__d{font-size:.95rem;color:var(--ink-80);max-width:56ch}
.proof__f{list-style:none;display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.proof__f li{
  background:var(--sand);padding:11px 14px;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-80);font-weight:500;
}

/* ── Ablauf: was der Kunde liefert ──────────────────────────────────────── */
.deliver{
  padding-top:clamp(32px,4vw,58px);margin-top:clamp(32px,4vw,58px);
  border-top:1px solid var(--line);align-items:start;
}
.deliver__t{
  font-family:var(--display);font-weight:300;letter-spacing:-.028em;
  font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1.06;
}
.deliver__l{list-style:none}
.deliver__l li{
  padding:11px 0 11px 26px;border-bottom:1px solid var(--line);
  font-size:.98rem;position:relative;
}
.deliver__l li:last-child{border-bottom:0}
.deliver__l li::before{
  content:"";position:absolute;left:2px;top:1.24em;width:10px;height:5px;
  border-left:1.4px solid var(--clay);border-bottom:1.4px solid var(--clay);
  transform:rotate(-45deg);
}
.deliver__n{margin-top:18px;font-size:.9rem;color:var(--stone);max-width:52ch}

/* ── Ablaufschritte: hängende Serifenziffer statt Kachelnummer ─────────── */
.step .num{
  font-family:var(--serif);font-style:italic;font-weight:400;color:var(--clay);
  font-size:clamp(1.4rem,2.2vw,1.9rem);letter-spacing:0;
}