/* ═══════════════════════════════════════════════════════════
   21rooms — Redaktionell, ruhig, schweizerisch
   Papier: Parchment · Anker: Waldgrün
   Handschrift: Haarlinien, Nummernschilder, harte 3px-Kanten.
   Grundregel: Text steht nie auf einem Grund, für den er nicht
   gestaltet wurde — dekorative Flächen liegen nie hinter Schrift.
   ═══════════════════════════════════════════════════════════ */

/* ── Tokens ────────────────────────────────────────────── */
:root{
  --bistre:#382411;
  --parchment:#F3F0DA;
  --sage:#CCD5AE;
  --hunter:#3A5A40;
  --brunswick:#1F3D2E;

  --paper:#F3F0DA;
  --paper-2:#EDE9CE;
  --paper-3:#E4E0C0;
  --ink:#2E1D0C;
  /* Alpha-Werte sind auf WCAG AA gerechnet, nicht geschätzt:
     ink-70 ≈ 5.6:1 · ink-52 ≈ 4.9:1 · cream-45 ≈ 4.8:1 auf ihrem Grund. */
  --ink-70:rgba(46,29,12,.70);
  --ink-52:rgba(46,29,12,.66);
  --ink-14:rgba(46,29,12,.14);
  --ink-08:rgba(46,29,12,.08);

  --cream-70:rgba(243,240,218,.78);
  --cream-45:rgba(243,240,218,.62);
  --cream-16:rgba(243,240,218,.16);

  --font-display:"Bricolage Grotesque","Outfit",system-ui,sans-serif;
  --font-body:"Outfit",system-ui,-apple-system,sans-serif;
  --font-script:"Parisienne",cursive;

  /* Fluide Typo — Skala bewusst gross ("Exaggerated Minimalism"):
     Wucht entsteht hier über Schriftgrad und Leerraum, nicht über Dekor. */
  --t-h2:clamp(2.4rem,5.4vw,4.9rem);
  --t-h3:clamp(1.15rem,1.6vw,1.4rem);
  --t-lead:clamp(1.02rem,1.35vw,1.24rem);
  --t-body:clamp(.98rem,1.05vw,1.06rem);

  --wrap:clamp(1.25rem,5vw,5.5rem);
  --max:1320px;
  /* Bildmarke oben gross, nach dem Scrollen klein.
     Wichtig: die Leistenhöhe hängt an --logo-h-min, nicht an --logo-h.
     Die grosse Marke steht ausserhalb des Flusses und hängt über den Hero,
     die Leiste bleibt dadurch immer schlank. */
  /* Zusätzlich an die Fensterhöhe gekoppelt: auf flachen Schirmen gibt die
     Marke nach, damit die Handlungsaufforderung über dem Falz bleibt. */
  --logo-h:clamp(4.5rem,min(20vw,30svh),19.2rem);
  --logo-h-min:2.4rem;
  --nav-h:calc(var(--logo-h-min) + 2.6rem);
  /* Der Hero hält so viel Platz frei, dass die grosse Marke nichts überdeckt. */
  --hero-top:calc(var(--logo-h) + 3.25rem);

  --sp-sec:clamp(5.5rem,12vw,11rem);

  /* Ruhige, gleichbleibende Radien. Die Handschrift entsteht über
     Haarlinien und Nummernschilder, nicht über gebogene Bildmasken. */
  --r-img:3px;
  --r-box:3px;
  --ease:cubic-bezier(.22,.86,.32,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ── Reset ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,figure,blockquote,ul,ol,dd{margin:0}
ul,ol{list-style:none;padding:0}
img{display:block;max-width:100%;height:auto}
button,input,textarea,select{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:2.5px solid var(--hunter);outline-offset:3px;border-radius:3px}

html{scroll-behavior:smooth;scroll-padding-top:6rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media (max-width:659px){.h2{hyphens:auto}}

body{
  font-family:var(--font-body);
  font-size:var(--t-body);
  font-weight:380;
  line-height:1.62;
  color:var(--ink);
  background:var(--paper);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--wrap)}

.skip{
  position:fixed;top:0;left:50%;translate:-50% -120%;z-index:200;
  background:var(--brunswick);color:var(--paper);padding:.8rem 1.4rem;
  border-radius:0 0 3px 3px;font-size:.9rem;transition:translate .25s var(--ease);
}
.skip:focus{translate:-50% 0}

/* ── Korn: gibt dem Cremeton Papierhaptik ──────────────── */
.grain{
  position:fixed;inset:-120%;z-index:9999;pointer-events:none;
  opacity:.2;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}   17%{transform:translate(-3%,-2%)}
  33%{transform:translate(2%,-4%)} 50%{transform:translate(-2%,3%)}
  67%{transform:translate(3%,2%)}  83%{transform:translate(-4%,-1%)}
}

/* ═══ Typografische Bausteine ═══════════════════════════ */
.h2{
  font-family:var(--font-display);
  font-size:var(--t-h2);
  font-weight:800;
  font-variation-settings:"wdth" 84;
  line-height:.88;
  letter-spacing:-.045em;
  text-wrap:balance;
}
.h2--light{color:var(--paper)}
.accent{color:var(--hunter)}
.accent-sage{color:var(--sage)}

/* Nummernschild: das Haus-Motiv von „rooms“, als Abschnittsmarke.
   Ersetzt die Bogenformen des Dossiers als wiederkehrende Handschrift. */
.label{
  display:flex;align-items:center;gap:.85rem;
  font-size:.73rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-52);margin-bottom:1.6rem;
}
.label--light{color:var(--cream-45)}
.label__n{
  display:grid;place-content:center;min-width:2.15rem;height:1.7rem;
  font-family:var(--font-display);font-weight:700;letter-spacing:.06em;
  font-size:.76rem;color:var(--paper);background:var(--hunter);
  border-radius:2px;
}
.label--light .label__n{color:var(--brunswick);background:var(--sage)}
/* Masslinie, die vom Schild wegläuft */
.label::after{
  content:"";flex:1 1 auto;height:1px;max-width:5rem;
  background:currentColor;opacity:.32;
}

.eyebrow{
  display:flex;align-items:center;gap:.85rem;
  font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-52);margin-bottom:1.7rem;
}
.eyebrow__rule{width:2.4rem;height:1px;background:var(--hunter);flex:0 0 auto}

.sec-head{margin-bottom:clamp(3rem,6vw,5.5rem)}
.sec-head__lead{
  font-size:var(--t-lead);color:var(--ink-70);max-width:46ch;margin-top:1.6rem;
}
.sec-head--split{
  max-width:none;display:grid;gap:2rem clamp(2rem,6vw,6rem);
  grid-template-columns:1fr;align-items:end;
}
@media (min-width:900px){
  .sec-head--split{grid-template-columns:1.15fr .85fr}
  .sec-head--split .sec-head__lead{margin-top:0}
}

.link-arrow{
  display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;
  font-weight:500;color:var(--hunter);padding-bottom:.15rem;
  background:linear-gradient(currentColor,currentColor) no-repeat left bottom / 100% 1.5px;
  transition:background-size .45s var(--ease);
}
.link-arrow:hover{background-size:0% 1.5px;background-position:right bottom}
.link-arrow span{transition:translate .3s var(--ease)}
.link-arrow:hover span{translate:5px 0}

/* ── Buttons ───────────────────────────────────────────── */
.btn{
  --bg:var(--brunswick); --fg:var(--paper);
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  padding:1.02rem 2rem;border:none;cursor:pointer;text-decoration:none;
  font-family:var(--font-body);font-size:.94rem;font-weight:500;letter-spacing:.01em;
  color:var(--fg);background:var(--bg);
  border-radius:var(--r-box);
  overflow:hidden;isolation:isolate;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),color .3s var(--ease);
  will-change:transform;
}
.btn span{position:relative;z-index:2}
.btn::before{
  content:"";position:absolute;inset:0;z-index:1;background:var(--hunter);
  translate:0 101%;transition:translate .45s var(--ease-out);
}
/* Harter Versatz-Schatten statt Weichzeichner: die Riso-Druck-Anmutung
   passt zu den harten 3px-Kanten und wirkt gedruckt statt gerendert. */
.btn:hover{box-shadow:7px 7px 0 0 var(--sage)}
.btn--sage:hover{box-shadow:7px 7px 0 0 rgba(243,240,218,.3)}
.btn:hover::before{translate:0 0}
.btn:active{transform:scale(.975);box-shadow:3px 3px 0 0 var(--sage)}
.btn--sm{padding:.68rem 1.35rem;font-size:.85rem}
.btn--sage{--bg:var(--sage);--fg:var(--brunswick);align-self:flex-start}
.btn--sage::before{background:var(--paper)}

/* ═══ NAV ═══════════════════════════════════════════════ */
.nav{
  position:fixed;inset:0 0 auto;z-index:100;
  transition:background .45s var(--ease),box-shadow .45s var(--ease),backdrop-filter .45s;
}
.nav__bar{
  max-width:var(--max);margin-inline:auto;
  padding:1.15rem var(--wrap);
  display:flex;align-items:center;gap:2rem;
  transition:padding .45s var(--ease);
}
.nav.is-stuck{
  background:rgba(243,240,218,.82);
  backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:0 1px 0 var(--ink-08);
}
.nav.is-stuck .nav__bar{padding-block:.65rem}

/* Bildmarke ohne Schriftzug: oben gross, beim Scrollen auf Kopfzeilen-Grösse.
   Der Name steht als aria-label am Link, bleibt also für Screenreader da.
   Der Anker behält die kleine Grösse und bestimmt damit die Leistenhöhe –
   das Bild liegt absolut darüber und darf nach unten überhängen. */
.nav__logo{
  position:relative;display:block;text-decoration:none;margin-right:auto;
  width:var(--logo-h-min);height:var(--logo-h-min);
}
.nav__logo img{
  position:absolute;top:0;left:0;
  width:auto;height:var(--logo-h);max-width:none;
  transition:height .45s var(--ease),opacity .3s var(--ease);
}
.nav.is-stuck .nav__logo img{height:var(--logo-h-min)}
.nav__logo:hover img{opacity:.72}

.nav__links{display:none;gap:2rem}
@media (min-width:1040px){.nav__links{display:flex}}
.nav__links a{
  position:relative;text-decoration:none;font-size:.9rem;font-weight:400;
  color:var(--ink-70);padding-block:.3rem;transition:color .3s
}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1.5px;
  background:var(--hunter);scale:0 1;transform-origin:right;
  transition:scale .4s var(--ease-out);
}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after{scale:1 1;transform-origin:left}
.nav .btn--sm{display:none}
@media (min-width:1040px){.nav .btn--sm{display:inline-flex}}

.nav__progress{
  height:2px;background:var(--hunter);width:0;
  transition:width .1s linear;opacity:.55;
}

.nav__burger{
  display:grid;place-content:center;gap:6px;
  width:46px;height:46px;background:var(--brunswick);border:none;
  border-radius:var(--r-box);cursor:pointer;
}
@media (min-width:1040px){.nav__burger{display:none}}
.nav__burger span{
  display:block;width:20px;height:1.6px;background:var(--paper);
  transition:transform .35s var(--ease),opacity .25s;
}
.nav__burger[aria-expanded="true"] span:first-child{transform:translateY(3.8px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:last-child{transform:translateY(-3.8px) rotate(-45deg)}

.mobilnav{
  position:fixed;inset:0;z-index:99;
  background:var(--brunswick);color:var(--paper);
  display:flex;flex-direction:column;justify-content:center;gap:.4rem;
  padding:6rem var(--wrap) 3rem;
}
.mobilnav[hidden]{display:none}
.mobilnav a{
  text-decoration:none;font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.9rem,8vw,2.8rem);letter-spacing:-.03em;line-height:1.25;
  opacity:0;translate:0 18px;animation:mnIn .5s var(--ease-out) forwards;
}
.mobilnav a:nth-child(1){animation-delay:.05s}
.mobilnav a:nth-child(2){animation-delay:.1s}
.mobilnav a:nth-child(3){animation-delay:.15s}
.mobilnav a:nth-child(4){animation-delay:.2s}
.mobilnav a:nth-child(5){animation-delay:.25s}
.mobilnav a:nth-child(6){animation-delay:.3s}
.mobilnav__cta{
  margin-top:1.6rem;color:var(--sage);font-size:1.1rem !important;
  border-top:1px solid var(--cream-16);padding-top:1.6rem;animation-delay:.35s !important;
}
@keyframes mnIn{to{opacity:1;translate:0 0}}

/* ═══ HERO ══════════════════════════════════════════════
   Redaktioneller Zweispalter. Die Typo steht ausschliesslich auf
   Cremegrund, das Bild bleibt textfrei — nichts überlagert sich.
   Das Bild läuft rechts aus dem Bild heraus, beginnt aber unter der
   Navigation, damit die Leiste nie auf dem Foto liegt.
   ═══════════════════════════════════════════════════════ */
.hero{
  display:grid;grid-template-columns:1fr;
  align-items:center;
  gap:clamp(2.5rem,5vw,3.5rem);
  padding-top:var(--hero-top);
}
@media (min-width:1040px){
  .hero{
    grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
    gap:clamp(2.5rem,5vw,4.5rem);
    min-height:100svh;
  }
}

.hero__type{
  padding-block:clamp(2.25rem,5vw,3.25rem);
  padding-inline:var(--wrap);
}
@media (min-width:1040px){
  .hero__type{
    /* linksbündig zum zentrierten Raster, ohne das Bild einzuengen */
    padding-inline:max(var(--wrap),calc((100vw - var(--max)) / 2 + var(--wrap)))
                   clamp(2rem,4vw,4rem);
    /* Oben ansetzen statt vertikal zentrieren: sonst entsteht zwischen
       Bildmarke und Text eine tote Fläche und die CTA rutscht unter den Falz. */
    align-self:start;
  }
}

.hero__h1{
  font-family:var(--font-display);
  /* Obergrenze ist nicht der Geschmack, sondern die Spaltenbreite:
     bei mehr als ~4.4vw bricht "Deine Wohnung verdient" in der 527px
     breiten Textspalte um und die Headline wird dreizeilig. */
  font-size:clamp(2.3rem,min(4.4vw,8svh),4rem);font-weight:800;
  font-variation-settings:"wdth" 82;
  line-height:.88;letter-spacing:-.052em;
  margin-bottom:1.8rem;
}
.hero__h1 .line{display:block;overflow:hidden;padding-block:.03em}
.hero__h1 .line__in{
  display:block;translate:0 105%;
  animation:lineUp 1.05s var(--ease-out) both;animation-delay:var(--d,0s);
}
@keyframes lineUp{to{translate:0 0}}

.hero__lead{font-size:var(--t-lead);color:var(--ink-70);max-width:44ch}
.hero__cta{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:1.1rem clamp(1.4rem,3vw,2.2rem);margin-top:2.4rem;
}

.hero__trust{
  display:flex;flex-wrap:wrap;gap:.55rem 1.6rem;
  margin-top:clamp(2.6rem,5vw,3.4rem);
  padding-top:1.5rem;border-top:1px solid var(--ink-14);
  font-size:.82rem;color:var(--ink-52);max-width:44ch;
}
.hero__trust li{display:flex;align-items:center;gap:.55rem}
.hero__trust li::before{
  content:"";width:.4rem;height:.4rem;background:var(--hunter);rotate:45deg;
}

/* Bild: randlos nach rechts, ruhiges Rechteck statt Bogen */
.hero__visual{position:relative;isolation:isolate}
.hero__visual img{
  width:100%;height:100%;object-fit:cover;
  aspect-ratio:4/3;
  border-radius:0;                     /* randlos, also keine Ecken */
  clip-path:inset(0 0 0 0);
  animation:imgReveal 1.25s var(--ease-out) .3s both;
}
@media (min-width:1040px){
  /* Die grosse Marke steht links. Nur die Textspalte muss sie freihalten –
     die Bildspalte holt den Vorschub wieder heraus und beginnt direkt
     unter der Leiste. */
  .hero__visual{
    align-self:stretch;
    margin-top:calc(var(--nav-h) - var(--hero-top));
    margin-bottom:clamp(1.5rem,3vw,2.5rem);
  }
  .hero__visual img{
    aspect-ratio:auto;min-height:clamp(28rem,74svh,46rem);
    border-radius:var(--r-img) 0 0 var(--r-img);
  }
}
@keyframes imgReveal{from{clip-path:inset(0 0 100% 0)}}

/* Aussage auf eigener Fläche — nie direkt auf dem Foto */
.hero__card{
  position:relative;z-index:2;
  display:grid;gap:.5rem;
  background:var(--brunswick);color:var(--paper);
  padding:clamp(1.3rem,2.4vw,1.7rem) clamp(1.4rem,2.6vw,1.9rem);
  margin:-3.5rem var(--wrap) 0 var(--wrap);
  border-radius:3px;
  rotate:-1.6deg;
  box-shadow:9px 9px 0 0 var(--sage);
  animation:cardIn .8s var(--ease-out) 1s both;
}
@media (min-width:1040px){
  .hero__card{
    position:absolute;left:clamp(1.5rem,3vw,2.5rem);bottom:clamp(1.5rem,3vw,2.5rem);
    margin:0;max-width:23rem;
  }
}
@keyframes cardIn{from{opacity:0;translate:0 16px}}
/* Auf schmalen Schirmen weniger Überhang: Karte ragt nur noch leicht ins
   Bild und bekommt Luft zum Laufband darunter. */
@media (max-width:1039px){
  .hero__card{
    margin:-2.2rem var(--wrap) 1.5rem;
    rotate:-1deg;
    box-shadow:6px 6px 0 0 var(--sage);
  }
}
.hero__card-rule{width:2.2rem;height:2px;background:var(--sage);margin-bottom:.3rem}
.hero__card strong{
  font-family:var(--font-display);font-weight:600;font-variation-settings:"wdth" 90;
  font-size:1.06rem;letter-spacing:-.015em;
}
.hero__card span:last-child{font-size:.88rem;color:var(--cream-70);line-height:1.5}

/* ═══ PLATTFORMEN ═══════════════════════════════════════
   Echte Markenlogos statt Text-Wortmarken, ohne Zusatzlabels.
   Kein Laufband: bei drei Logos wäre Endlosbewegung unmotiviert.
   ═══════════════════════════════════════════════════════ */
.plattformen{
  border-block:1px solid var(--ink-08);
  background:var(--paper-2);
  padding:clamp(1.4rem,3vw,2rem) 0;
}
.plattformen__inner{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:1rem clamp(2rem,5vw,4rem);justify-content:center;
}
@media (min-width:760px){.plattformen__inner{justify-content:space-between}}
.plattformen__label{
  font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-52);
}
.plattformen__row{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:clamp(1.8rem,4vw,3.4rem);justify-content:center;
}
.plattformen__row img{
  height:clamp(1.15rem,2vw,1.5rem);width:auto;
  opacity:.62;transition:opacity .35s var(--ease);
}
.plattformen__row li:hover img{opacity:1}

/* ═══ ZUSICHERUNGEN ═════════════════════════════════════
   Standen vorher im Hero. Die Hero-Stack-Regel erlaubt dort
   maximal vier Textelemente, ein Trust-Streifen gehört darunter.
   ═══════════════════════════════════════════════════════ */
.zusicherung{padding:clamp(3rem,6vw,4.5rem) 0 0}
.zusicherung__list{
  display:grid;gap:clamp(1.6rem,3vw,2.4rem);
  grid-template-columns:1fr;
}
@media (min-width:720px){.zusicherung__list{grid-template-columns:repeat(3,1fr)}}
.zusicherung__list li{
  display:grid;gap:.45rem;align-content:start;
  padding-top:1.1rem;border-top:1px solid var(--ink-14);
}
.zusicherung__list strong{
  font-family:var(--font-display);font-weight:600;font-variation-settings:"wdth" 90;
  font-size:1.02rem;letter-spacing:-.015em;
}
.zusicherung__list span{font-size:.9rem;color:var(--ink-70);line-height:1.55}

/* ═══ MANIFEST ══════════════════════════════════════════ */
.manifest{padding:var(--sp-sec) 0 calc(var(--sp-sec) * .8)}
.manifest__text{
  font-family:var(--font-display);
  font-size:clamp(1.5rem,3.6vw,2.9rem);
  font-weight:500;font-variation-settings:"wdth" 92;
  line-height:1.22;letter-spacing:-.025em;
  max-width:32ch;text-wrap:pretty;
}
.manifest__text .w{color:var(--ink-14);transition:color .45s var(--ease)}
.manifest__text .w.on{color:var(--ink)}
html:not(.js) .manifest__text .w{color:var(--ink)}

/* ═══ 01 · SCHLUSS DAMIT ════════════════════════════════ */
.strike{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--brunswick);color:var(--paper);
  padding:var(--sp-sec) 0;
}
.strike__head{margin-bottom:clamp(3rem,6vw,4.5rem)}
/* Note rechts am Listenende — sonst bleibt die halbe Sektion leeres Waldgruen */
@media (min-width:940px){
  .strike .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.5fr);gap:0 clamp(3rem,6vw,5rem)}
  .strike__head{grid-column:1/-1}
  .strike__note{margin-top:0;align-self:end}
}

.strike__list{
  border-top:1px solid var(--cream-16);
  max-width:900px;
}
.strike__list li{border-bottom:1px solid var(--cream-16)}
.strike__i{
  position:relative;display:inline-block;
  padding:clamp(.9rem,2vw,1.5rem) 0;
  font-family:var(--font-display);
  font-size:clamp(1.7rem,5.4vw,3.7rem);
  font-weight:600;font-variation-settings:"wdth" 82;
  letter-spacing:-.035em;line-height:1.05;
  color:var(--paper);
  transition:color .6s var(--ease) .18s;
}
.strike__i::after{
  content:"";position:absolute;left:0;top:52%;height:3px;width:100%;
  background:var(--sage);border-radius:2px;
  scale:0 1;transform-origin:left;
  transition:scale .62s var(--ease-out);
}
li.is-struck .strike__i{color:var(--cream-45)}
li.is-struck .strike__i::after{scale:1 1}
html:not(.js) .strike__i::after{scale:1 1}

.strike__note{
  margin-top:clamp(2.5rem,5vw,3.5rem);
  font-size:var(--t-lead);color:var(--cream-70);max-width:48ch;
}

/* ═══ 02 · KONZEPT ══════════════════════════════════════ */
.konzept{padding:var(--sp-sec) 0;position:relative}
.steps{
  display:grid;gap:clamp(2.6rem,4vw,3.4rem);
  grid-template-columns:1fr;
  counter-reset:s;
}
@media (min-width:820px){.steps{grid-template-columns:repeat(3,1fr)}}

.step__media{
  position:relative;margin-bottom:1.6rem;overflow:visible;border-radius:var(--r-img);
  box-shadow:12px 12px 0 0 var(--paper-3);
  transition:rotate .5s var(--ease),box-shadow .5s var(--ease);
}
/* Das Bild wird hier geclippt — die Ziffer darf ueber die Kante haengen */
.step__frame{overflow:hidden;border-radius:var(--r-img)}
/* Leicht gekippt wie hingelegte Abzüge — beim Überfahren richten sie sich auf */
.step:nth-child(1) .step__media{rotate:-1.4deg}
.step:nth-child(2) .step__media{rotate:1.1deg}
.step:nth-child(3) .step__media{rotate:-.8deg}
.step:hover .step__media{rotate:0deg;box-shadow:12px 12px 0 0 var(--sage)}
.step__frame img{
  width:100%;aspect-ratio:4/5;object-fit:cover;
  transition:transform 1s var(--ease);
}
.step:hover .step__frame img{transform:scale(1.04)}
/* Ziffer als Schauelement statt als Etikett: sie sitzt halb über der
   Bildkante und trägt den Rhythmus der drei Schritte. */
.step{position:relative}
.step__n{
  position:absolute;left:-.5rem;bottom:-1.4rem;z-index:2;
  font-family:var(--font-display);font-weight:800;
  font-variation-settings:"wdth" 78;
  font-size:clamp(3.4rem,6vw,5.2rem);line-height:.8;letter-spacing:-.05em;
  color:var(--paper);
  -webkit-text-stroke:2px var(--hunter);
  paint-order:stroke fill;
  pointer-events:none;
}
@media (min-width:820px){.step__n{left:-1rem}}
.step__t{
  font-family:var(--font-display);font-size:var(--t-h3);font-weight:600;
  font-variation-settings:"wdth" 90;letter-spacing:-.02em;line-height:1.18;
  margin:1.4rem 0 .7rem;
}
.step__p{color:var(--ink-70)}

.konzept__foot{
  margin-top:clamp(3rem,5vw,4rem);padding-top:2rem;
  border-top:1px solid var(--ink-14);
  font-family:var(--font-display);font-weight:500;font-variation-settings:"wdth" 92;
  font-size:clamp(1.1rem,2vw,1.5rem);letter-spacing:-.02em;
}
.konzept__foot sup{color:var(--hunter)}
.konzept__foot em{
  display:block;font-family:var(--font-body);font-style:normal;font-weight:300;
  font-size:.8rem;color:var(--ink-52);margin-top:.5rem;letter-spacing:0;
}

/* ═══ 03 · VORTEILE ═════════════════════════════════════ */
.vorteile{
  padding:var(--sp-sec) 0;
  background:var(--paper-2);
  border-block:1px solid var(--ink-08);
}
/* Bento statt Gleichmass. Die Zellrechnung geht ohne Rest auf:
   4 Spalten -> Karte 1 belegt 2x2, Karte 6 belegt 2x1 = 12 Zellen = 3 Zeilen.
   2 Spalten -> Karte 1 und 6 je volle Zeile        = 10 Zellen = 5 Zeilen. */
.cards{
  display:grid;gap:1px;background:var(--ink-14);
  border:1px solid var(--ink-14);border-radius:var(--r-box);overflow:hidden;
  grid-template-columns:1fr;
}
@media (min-width:660px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .cards .card:nth-child(1),
  .cards .card:nth-child(6){grid-column:span 2}
}
/* Sechs Karten, kein Loch: links die hohe Fotokarte, rechts vier im Raster,
   unten die Sage-Karte über die ganze Breite. */
@media (min-width:1060px){
  .cards{grid-template-columns:repeat(3,1fr)}
  .cards .card:nth-child(1){grid-column:1;grid-row:1 / span 2}
  .cards .card:nth-child(6){grid-column:1 / -1;grid-row:auto}
}

/* Die grosse Zelle bekommt eigene Typo, sonst wirkt sie nur aufgeblasen. */
@media (min-width:1060px){
  .card:nth-child(1){display:flex;flex-direction:column;justify-content:space-between;min-height:34rem}
  .card:nth-child(1) .card__ico{width:4rem;height:4rem;margin-bottom:auto}
  .card:nth-child(1) .card__ico svg{width:2.1rem;height:2.1rem}
  .card:nth-child(1) .card__t{
    font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1.06;
    letter-spacing:-.035em;margin-top:2rem;
  }
  .card:nth-child(1) .card__p{font-size:1rem;max-width:34ch}
}

/* Foto in der dunklen Karte. Der Verlauf unten ist die Textschutzfläche —
   die Grundregel «Text nie auf ungestaltetem Grund» gilt auch hier. */
.card--dunkel .card__bild{
  position:absolute;inset:0;z-index:-3;width:100%;height:100%;object-fit:cover;
  transition:transform .9s var(--ease);
}
.card--dunkel::after{
  content:"";position:absolute;inset:0;z-index:-2;
  background:linear-gradient(180deg,
    rgba(31,61,46,.42) 0%, rgba(31,61,46,.62) 40%,
    rgba(31,61,46,.9) 72%, var(--brunswick) 96%);
}
@media (hover:hover){
  .card--dunkel:hover .card__bild{transform:scale(1.05)}
}

/* Die Sage-Karte als Querbanner: Icon links, Text daneben. */
@media (min-width:1060px){
  .cards .card:nth-child(6){display:flex;align-items:center;gap:2.2rem}
  .cards .card:nth-child(6) .card__t{margin:0;flex:0 0 auto;max-width:14ch}
  .cards .card:nth-child(6) .card__p{margin:0;max-width:52ch}
  .cards .card:nth-child(6) .card__ico{margin:0;flex:0 0 auto}
}

/* Mikrobewegung: Das Icon nickt beim Überfahren, die Ecke waechst. */
@media (hover:hover){
  .card:hover .card__ico{transform:translateY(-3px) rotate(-3deg)}
  .card:hover .card__corner{width:2.6rem;height:2.6rem}
}
.card__ico{transition:transform .45s var(--ease),background .45s var(--ease),color .45s var(--ease)}
.card__corner{transition:width .45s var(--ease),height .45s var(--ease)}

.card{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--paper);padding:clamp(1.8rem,2.6vw,2.3rem);
  transition:background .45s var(--ease),transform .45s var(--ease),
             box-shadow .45s var(--ease);
}
/* Empfehlung aus der Stil-Datenbank: leichte Skalierung plus weicher
   Schattenaufbau statt Farbwechsel allein. */
@media (hover:hover){
  .card:hover{transform:scale(1.015);box-shadow:0 24px 50px -30px rgba(56,36,17,.55);z-index:2}
}
.card::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--sage);
  translate:0 100%;transition:translate .55s var(--ease-out);
}
.card:hover{background:transparent}
.card:hover::before{translate:0 0}

/* Haarlinie oben, die auf Hover durchläuft — ruhiger als ein Eckwinkel
   und passt zur Masslinien-Sprache der Abschnittsmarken. */
.card__corner{
  position:absolute;top:0;left:0;width:100%;height:2px;
  background:var(--hunter);
  scale:0 1;transform-origin:left;
  transition:scale .55s var(--ease-out);
}
.card:hover .card__corner{scale:1 1}

.card__ico{
  display:grid;place-content:center;width:3.1rem;height:3.1rem;margin-bottom:1.5rem;
  color:var(--hunter);background:var(--paper-3);
  border-radius:var(--r-box);
  transition:background .45s var(--ease),color .45s var(--ease),rotate .55s var(--ease);
}
.card__ico svg{width:1.65rem;height:1.65rem}
.card:hover .card__ico{background:var(--brunswick);color:var(--sage);rotate:-6deg}

.card__t{
  font-family:var(--font-display);font-size:1.03rem;font-weight:600;
  font-variation-settings:"wdth" 92;letter-spacing:-.015em;line-height:1.28;
  margin-bottom:.6rem;text-wrap:balance;
}
.card__p{font-size:.91rem;color:var(--ink-70);line-height:1.58}
.card:hover .card__p{color:rgba(31,61,46,.86)}

/* Rhythmus im Raster: acht identische Kacheln lesen sich als Vorlage.
   Zwei Zellen bekommen eine eigene Fläche, ohne die Rasterrechnung
   (8 Kacheln, 4 Spalten, 2 volle Zeilen) zu brechen. */
.card--dunkel{background:var(--brunswick)}
.card--dunkel .card__t{color:var(--paper)}
.card--dunkel .card__p{color:var(--cream-70)}
.card--dunkel .card__ico{background:rgba(243,240,218,.1);color:var(--sage)}
.card--dunkel .card__corner{background:var(--sage)}
.card--dunkel:hover .card__t,
.card--dunkel:hover .card__p{color:var(--brunswick)}
.card--dunkel:hover .card__ico{background:var(--brunswick);color:var(--sage)}

.card--sage{background:var(--sage)}
.card--sage .card__p{color:rgba(31,61,46,.82)}
.card--sage .card__ico{background:rgba(31,61,46,.12);color:var(--brunswick)}
.card--sage::before{background:var(--paper)}
.card--sage:hover .card__p{color:var(--ink-70)}

/* ═══ ZITAT-BAND ════════════════════════════════════════ */
.band{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(24rem,62vh,38rem);
  display:grid;place-items:center;
  padding:clamp(4rem,9vw,7rem) var(--wrap);
  color:var(--paper);
}
.band__img{position:absolute;inset:-12% 0;z-index:-2;will-change:transform}
.band__img img{width:100%;height:100%;object-fit:cover}
/* Der Schleier ist bewusst kräftig: das Foto wirkt hier als Textur unter
   einer Aussage, nicht als Schaubild. So trägt der Text auch dann noch,
   wenn später ein helleres Bild eingesetzt wird (worst case 5.3:1). */
.band::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(31,61,46,.78),rgba(31,61,46,.92));
}
/* Die Zeilenbegrenzung gehört auf den Absatz: `ch` rechnet dort gegen die
   grosse Zitatschrift, auf dem Blockquote dagegen gegen die Basisschrift. */
.band__quote{max-width:min(92vw,58rem);text-align:center}
.band__quote p{max-width:17ch;margin-inline:auto}
.band__quote p{
  font-family:var(--font-display);
  font-size:clamp(1.75rem,4.6vw,3.6rem);font-weight:500;
  font-variation-settings:"wdth" 86;
  line-height:1.1;letter-spacing:-.03em;text-wrap:balance;
}
/* Name in der Schreibschrift, Rolle klein darunter: Attribution braucht
   beides, aber die Rolle gehört nicht in 43px Schreibschrift. */
.band__quote cite{
  display:block;margin-top:1.6rem;font-family:var(--font-script);
  font-style:normal;font-size:clamp(1.9rem,3.6vw,2.7rem);line-height:1.1;
  color:var(--sage);
}
.band__quote cite span{
  display:block;margin-top:.5rem;
  font-family:var(--font-body);font-size:.8rem;font-weight:400;
  letter-spacing:.18em;text-transform:uppercase;color:var(--cream-70);
}

/* ═══ 04 · CHANTAL ══════════════════════════════════════ */
.chantal{padding:var(--sp-sec) 0}
.chantal__grid{display:grid;gap:clamp(3rem,6vw,5.5rem);align-items:center}
@media (min-width:940px){.chantal__grid{grid-template-columns:.92fr 1.08fr}}

.chantal__figure{max-width:520px;justify-self:center;width:100%}
.chantal__figure img{
  width:100%;aspect-ratio:3/4;object-fit:cover;
  border-radius:var(--r-img);
  rotate:1.2deg;
  box-shadow:12px 12px 0 0 var(--paper-3);
  transition:rotate .5s var(--ease),box-shadow .5s var(--ease);
}
.chantal__figure:hover img{rotate:0deg;box-shadow:12px 12px 0 0 var(--sage)}

.chantal__text p{margin-bottom:1.15rem;color:var(--ink-70);max-width:48ch}
.chantal__text p strong{color:var(--ink);font-weight:500}

.chantal__text .h2{margin-bottom:1.8rem}
.signature{
  font-family:var(--font-script);font-size:clamp(2.6rem,5vw,3.6rem);
  color:var(--hunter);line-height:1;margin:1.6rem 0 2rem !important;
}
.chantal__text .btn{margin-top:.4rem}

/* ═══ 05 · FRAGEN ═══════════════════════════════════════ */
.faq{padding:var(--sp-sec) 0;background:var(--paper-2);border-block:1px solid var(--ink-08)}
.faq__grid{display:grid;gap:clamp(2.5rem,5vw,4.5rem)}
@media (min-width:940px){.faq__grid{grid-template-columns:.8fr 1.2fr;align-items:start}}
@media (min-width:940px){.faq__head{position:sticky;top:7rem}}
.faq__aside{margin:1.8rem 0 1.4rem;color:var(--ink-70);max-width:34ch}

.faq__list{border-top:1px solid var(--ink-14)}
.ac{border-bottom:1px solid var(--ink-14)}
.ac summary{
  display:flex;align-items:center;gap:1.4rem;justify-content:space-between;
  padding:1.5rem 0;cursor:pointer;list-style:none;
  font-family:var(--font-display);font-weight:600;font-variation-settings:"wdth" 92;
  font-size:clamp(1.02rem,1.7vw,1.28rem);letter-spacing:-.018em;line-height:1.32;
  transition:color .3s var(--ease);
}
.ac summary::-webkit-details-marker{display:none}
.ac summary:hover{color:var(--hunter)}
.ac summary i{
  position:relative;flex:0 0 auto;width:2.3rem;height:2.3rem;
  border:1px solid var(--ink-14);border-radius:var(--r-box);
  transition:background .4s var(--ease),border-color .4s,rotate .45s var(--ease);
}
.ac summary i::before,.ac summary i::after{
  content:"";position:absolute;top:50%;left:50%;translate:-50% -50%;
  background:var(--hunter);border-radius:2px;transition:opacity .3s,background .4s;
}
.ac summary i::before{width:.8rem;height:1.5px}
.ac summary i::after{width:1.5px;height:.8rem}
.ac[open] summary i{background:var(--brunswick);border-color:var(--brunswick)}
.ac[open] summary i::before{background:var(--sage)}
.ac[open] summary i::after{opacity:0}
.ac[open] summary{color:var(--hunter)}

.ac__body{overflow:hidden}
.ac[open] .ac__body{animation:acOpen .45s var(--ease-out)}
@keyframes acOpen{from{opacity:0;transform:translateY(-8px)}}
.ac__body p{padding:0 clamp(0rem,6vw,4rem) 1.7rem 0;color:var(--ink-70);max-width:62ch}

/* ═══ 06 · GALERIE ══════════════════════════════════════ */
.galerie{padding:var(--sp-sec) 0 0}
/* Zellen gehen ohne Rest auf: mobil 8 Kacheln in 2 Spalten = 4 Zeilen,
   ab 760px zählt die breite Kachel doppelt: 9 Zellen in 3 Spalten = 3 Zeilen.
   Deshalb entstehen keine Löcher im Raster. */
.mosaik{
  margin-top:clamp(2.5rem,5vw,4rem);
  display:grid;gap:clamp(.5rem,1.2vw,1rem);
  grid-template-columns:repeat(2,1fr);
  padding-inline:clamp(.5rem,1.2vw,1rem);
}
@media (min-width:760px){.mosaik{grid-template-columns:repeat(3,1fr)}}
.mo{
  position:relative;overflow:hidden;border-radius:var(--r-box);background:var(--paper-3);
  border:5px solid #FCFAEE;outline:1px solid var(--ink-14);
  transition:rotate .45s var(--ease),translate .45s var(--ease),box-shadow .45s var(--ease);
}
.mo:nth-child(odd){rotate:-.9deg}
.mo:nth-child(even){rotate:.8deg}
.mo:hover{
  rotate:0deg;translate:0 -6px;z-index:2;
  box-shadow:10px 12px 0 0 var(--sage);
}
.mo img{
  width:100%;height:100%;object-fit:cover;aspect-ratio:3/4;
  transition:transform 1.1s var(--ease),filter .6s var(--ease);
}
.mo:hover img{transform:scale(1.06)}
/* Mobil laufen alle Kacheln einspaltig mit, sonst bricht die Rechnung. */
.mo--tall img{aspect-ratio:3/4}
.mo--wide img{aspect-ratio:3/4}
@media (min-width:760px){
  .mo--tall img{aspect-ratio:3/4.6}
  .mo--wide{grid-column:span 2}
  .mo--wide img{aspect-ratio:8/5}
}

/* ═══ KONTAKT ═══════════════════════════════════════════ */
.kontakt{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--brunswick);color:var(--paper);
  padding:var(--sp-sec) 0;
}
.kontakt__glow{
  position:absolute;width:46rem;height:46rem;left:0;top:0;z-index:-1;
  translate:-50% -50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgba(204,213,174,.14),transparent 62%);
  transition:opacity .6s var(--ease);
}
.kontakt:hover .kontakt__glow{opacity:1}
.kontakt__ghost{
  position:absolute;left:-4vw;bottom:-8vh;z-index:-1;
  font-family:var(--font-display);font-weight:800;font-variation-settings:"wdth" 78;
  font-size:min(42vw,34rem);line-height:.72;letter-spacing:-.06em;
  color:transparent;-webkit-text-stroke:1.5px rgba(204,213,174,.22);
  pointer-events:none;user-select:none;
}
.kontakt__grid{display:grid;gap:clamp(3rem,6vw,5rem)}
@media (min-width:940px){.kontakt__grid{grid-template-columns:1fr 1fr;align-items:start}}
.kontakt__lead{font-size:var(--t-lead);color:var(--cream-70);max-width:44ch;margin-top:1.6rem}

.kontakt__direct{
  margin-top:2.8rem;display:grid;gap:1px;background:var(--cream-16);
  border:1px solid var(--cream-16);border-radius:var(--r-box);overflow:hidden;
}
.kontakt__big{
  display:grid;gap:.3rem;padding:1.25rem 1.3rem;text-decoration:none;
  background:var(--brunswick);transition:padding-left .4s var(--ease),background .4s;
}
.kontakt__big:hover{padding-left:1.8rem;background:#25473a}
.kontakt__big-l{font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:var(--cream-45)}
.kontakt__big-v{
  font-family:var(--font-display);font-weight:600;font-variation-settings:"wdth" 88;
  font-size:clamp(1.05rem,2.3vw,1.5rem);letter-spacing:-.02em;
  word-break:break-word;
}

/* Formular */
.form{display:grid;gap:1.15rem}
.form__row{display:grid;gap:1.15rem}
@media (min-width:560px){.form__row{grid-template-columns:1fr 1fr}}
.field{display:grid;gap:.5rem}
.field>span{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-45)}
.field>span em{font-style:normal;color:var(--sage);margin-left:.25rem}
.field input,.field textarea{
  width:100%;padding:.95rem 1.05rem;
  background:rgba(243,240,218,.06);color:var(--paper);
  border:1px solid var(--cream-16);border-radius:var(--r-box);
  font-size:.95rem;font-weight:300;resize:vertical;
  transition:border-color .3s,background .3s;
}
.field input::placeholder,.field textarea::placeholder{color:rgba(243,240,218,.7)}
.field input:focus,.field textarea:focus{
  outline:none;border-color:var(--sage);background:rgba(243,240,218,.1);
}
.field input:user-invalid,.field textarea:user-invalid{border-color:#C98B6B}
.form .btn{margin-top:.6rem}
.form__hint{font-size:.8rem;color:var(--cream-45)}
.form__hint.is-error{color:#E8B79C}

/* ═══ FOOTER ════════════════════════════════════════════
   Aufbau: Schlussaussage · Haarlinie · Spalten · Haarlinie · Basiszeile.
   Die Bildmarke steht fest an der Wortmarke, statt frei zu schweben.
   ═══════════════════════════════════════════════════════ */
.footer{background:var(--bistre);color:var(--cream-70);padding:clamp(4rem,8vw,6rem) 0 2rem;box-shadow:inset 0 1px 0 var(--cream-16)}

.footer__top{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:2rem;padding-bottom:clamp(2.5rem,5vw,3.5rem);
}
.footer__claim{
  font-family:var(--font-display);font-weight:600;font-variation-settings:"wdth" 88;
  font-size:clamp(1.75rem,4.2vw,3.1rem);line-height:1.02;letter-spacing:-.03em;
  color:var(--paper);
}
.footer__claim span{color:var(--sage)}
.footer__cta{
  display:inline-flex;align-items:center;gap:.6rem;flex:0 0 auto;
  text-decoration:none;font-weight:500;font-size:.98rem;color:var(--paper);
  padding-bottom:.4rem;border-bottom:1.5px solid var(--sage);
}
.footer__cta span{transition:translate .3s var(--ease)}
.footer__cta:hover span{translate:5px 0}

.footer__grid{
  display:grid;gap:2.4rem;
  padding-block:clamp(2.5rem,5vw,3.5rem);
  border-top:1px solid var(--cream-16);
}
@media (min-width:760px){.footer__grid{grid-template-columns:1.2fr .8fr 1fr}}
/* Rechtsseiten: keine Schlussaussage darüber, also keine obere Linie */
.footer__grid--flush{border-top:none;padding-top:0}

.footer__brand{display:grid;gap:1rem;align-content:start}
.footer__lockup{
  display:inline-flex;align-items:center;gap:.6rem;width:max-content;
  text-decoration:none;color:var(--sage);
  font-family:var(--font-display);font-weight:700;font-size:1.15rem;letter-spacing:-.02em;
}
.footer__lockup img{width:38px;height:38px}
.footer__brand p{font-size:.92rem;line-height:1.6;max-width:26ch}

.footer__nav{display:grid;gap:.65rem;align-content:start}
.footer__nav a{text-decoration:none;font-size:.92rem;width:max-content;transition:color .3s}
.footer__nav a:hover{color:var(--sage)}

.footer__meta{display:grid;gap:.65rem;align-content:start;font-size:.92rem}
.footer__meta a{text-decoration:none;width:max-content;transition:color .3s}
.footer__meta a:hover{color:var(--sage)}

.footer__base{
  display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;justify-content:space-between;
  padding-top:1.6rem;border-top:1px solid var(--cream-16);
  font-size:.84rem;color:var(--cream-45);
}
.footer__base a{text-decoration:none;transition:color .3s}
.footer__base a:hover{color:var(--sage)}

/* ═══ Rechtstexte (Impressum / Datenschutz) ═════════════ */
.legal{padding:clamp(8rem,14vw,11rem) 0 var(--sp-sec)}
.legal__back{
  display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
  font-size:.85rem;color:var(--ink-52);margin-bottom:2.5rem;transition:color .3s;
}
.legal__back:hover{color:var(--hunter)}
.legal__body{max-width:68ch}
.legal__body h2{
  font-family:var(--font-display);font-weight:600;font-variation-settings:"wdth" 90;
  font-size:clamp(1.15rem,2vw,1.45rem);letter-spacing:-.02em;
  margin:2.8rem 0 .8rem;padding-top:1.6rem;border-top:1px solid var(--ink-14);
}
.legal__body h2:first-of-type{border-top:none;padding-top:0}
.legal__body p,.legal__body li{color:var(--ink-70);margin-bottom:.9rem}
.legal__body ul{list-style:none;display:grid;gap:.35rem;margin-bottom:1.4rem}
.legal__body li{position:relative;padding-left:1.2rem}
.legal__body li::before{
  content:"";position:absolute;left:0;top:.65em;width:.4rem;height:.4rem;
  background:var(--sage);border-radius:1px;
}
.legal__body a{color:var(--hunter)}
.todo{
  display:block;background:var(--paper-3);border-left:3px solid var(--hunter);
  padding:1rem 1.2rem;border-radius:0 2px 2px 0;
  font-size:.88rem;color:var(--ink-70);margin:.4rem 0 1.4rem;
}
.todo strong{color:var(--ink);font-weight:500}

/* ═══ Reveal-System ═════════════════════════════════════ */
.js .reveal{opacity:0;translate:0 26px;filter:blur(5px)}
.js .reveal.on{
  opacity:1;translate:0 0;filter:blur(0);
  transition:opacity .85s var(--ease-out) var(--d,0s),
             translate .85s var(--ease-out) var(--d,0s),
             filter .85s var(--ease-out) var(--d,0s);
}

/* ═══ Reduzierte Bewegung ═══════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .grain{animation:none}
  .js .reveal{opacity:1;translate:none;filter:none}
  .hero__h1 .line__in{translate:0 0}
  .hero__visual img{clip-path:none}
  .manifest__text .w{color:var(--ink)}
  .strike__i::after{scale:1 1}
  .ticker__track{animation:none}
}


/* ═══ Feinschliff-Schicht ═══════════════════════════════ */
::selection{background:var(--sage);color:var(--brunswick)}

/* Laufband unter dem Hero: die Kernzusagen als endlose Zeile.
   Text auf eigener dunkler Bahn — die Grundregel gilt auch hier. */
.laufband{
  overflow:hidden;background:var(--brunswick);color:var(--parchment);
  border-block:1px solid var(--cream-16);
  padding:.85rem 0;
}
.laufband__spur{
  display:flex;gap:0;white-space:nowrap;width:max-content;
  animation:laufband 36s linear infinite;
}
.laufband:hover .laufband__spur{animation-play-state:paused}
.laufband__satz{
  display:inline-flex;align-items:center;gap:2.2rem;padding-right:2.2rem;
  font-family:var(--font-display);font-weight:600;font-variation-settings:"wdth" 88;
  font-size:.92rem;letter-spacing:.04em;text-transform:uppercase;
}
.laufband__satz i{
  font-style:normal;color:var(--sage);font-size:.7rem;translate:0 -1px;
}
@keyframes laufband{to{translate:-50% 0}}
@media (prefers-reduced-motion:reduce){.laufband__spur{animation:none}}


/* Senden-Knopf: auf Desktop kein Balken ueber die volle Formularbreite */
@media (min-width:560px){.form .btn{justify-self:start;min-width:15rem}}

/* ═══ Mehrseitigkeit (Umbau 08/2026) ════════════════════
   Die Startseite wurde auf fünf Seiten aufgeteilt. Die Bausteine
   unten teilen sich die bestehende Handschrift: Nummernschilder,
   Haarlinien, harte 3px-Kanten, Versatz-Schatten.
   ═══════════════════════════════════════════════════════ */

/* Aktiver Navigationspunkt: die Unterstreichung bleibt stehen */
.nav__links a[aria-current="page"]{color:var(--ink)}
.nav__links a[aria-current="page"]::after{scale:1 1;transform-origin:left}
.mobilnav a[aria-current="page"]{color:var(--sage)}

/* Seitenkopf der Unterseiten: hält wie der Hero Platz für die
   grosse Bildmarke frei, die über den Anfang hängt. */
.seitenkopf{padding:var(--hero-top) 0 clamp(2.75rem,6vw,4.5rem)}
.seitenkopf__lead{font-size:var(--t-lead);color:var(--ink-70);max-width:50ch;margin-top:1.7rem}

/* Generische Abschnitte für die Unterseiten */
.abschnitt{padding:var(--sp-sec) 0}
.abschnitt--band{background:var(--paper-2);border-block:1px solid var(--ink-08)}
.zweispalt{display:grid;gap:1.4rem clamp(3rem,6vw,5rem)}
@media (min-width:940px){.zweispalt{grid-template-columns:1fr 1fr}}
.zweispalt .sec-head__lead{margin-top:0;max-width:52ch}

/* Drei gleichwertige Karten: hebt die Bento-Spannen des
   Sechser-Rasters auf (Startseite zeigt nur noch drei Vorteile). */
@media (min-width:660px){
  .cards--drei{grid-template-columns:repeat(3,1fr)}
  .cards--drei .card:nth-child(1){grid-column:auto}
}
@media (min-width:1060px){
  .cards--drei .card:nth-child(1){grid-column:auto;grid-row:auto;display:block;min-height:0}
  .cards--drei .card:nth-child(1) .card__ico{width:3.1rem;height:3.1rem;margin-bottom:1.5rem}
  .cards--drei .card:nth-child(1) .card__ico svg{width:1.65rem;height:1.65rem}
  .cards--drei .card:nth-child(1) .card__t{font-size:1.03rem;line-height:1.28;letter-spacing:-.015em;margin-top:0}
  .cards--drei .card:nth-child(1) .card__p{font-size:.91rem;max-width:none}
}

/* Ablauf: nummerierte Schrittleiste in der Masslinien-Sprache */
.prozess{display:grid;gap:2.2rem 1.6rem;grid-template-columns:1fr;counter-reset:p;margin-top:clamp(2.5rem,5vw,3.5rem)}
@media (min-width:660px){.prozess{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.prozess{grid-template-columns:repeat(var(--p-cols,5),1fr)}}
.prozess--vier{--p-cols:4}
.prozess--drei{--p-cols:3}
.prozess li{counter-increment:p;display:grid;gap:.55rem;align-content:start;padding-top:1.15rem;border-top:1px solid var(--ink-14)}
.prozess li::before{
  content:counter(p,decimal-leading-zero);
  display:grid;place-content:center;width:2.15rem;height:1.7rem;
  font-family:var(--font-display);font-weight:700;font-size:.76rem;letter-spacing:.06em;
  color:var(--paper);background:var(--hunter);border-radius:2px;margin-bottom:.35rem;
}
.prozess strong{font-family:var(--font-display);font-weight:600;font-variation-settings:"wdth" 90;font-size:1.02rem;letter-spacing:-.015em}
.prozess span{font-size:.9rem;color:var(--ink-70);line-height:1.55}
/* Auf dunklem Grund */
.prozess--hell li{border-top-color:var(--cream-16)}
.prozess--hell li::before{color:var(--brunswick);background:var(--sage)}
.prozess--hell span{color:var(--cream-70)}

/* Perspektivwechsel: Dauermiete und 21rooms nebeneinander */
.vergleich{display:grid;gap:1px;background:var(--ink-14);border:1px solid var(--ink-14);border-radius:var(--r-box);overflow:hidden;margin-top:clamp(2.5rem,5vw,3.5rem)}
@media (min-width:760px){.vergleich{grid-template-columns:1fr 1fr}}
.vergleich>div{padding:clamp(1.8rem,3vw,2.4rem);display:grid;gap:.7rem;align-content:start;background:var(--paper)}
.vergleich__seite--wir{background:var(--brunswick) !important;color:var(--paper)}
.vergleich__tag{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-52)}
.vergleich__seite--wir .vergleich__tag{color:var(--cream-45)}
.vergleich strong{font-family:var(--font-display);font-weight:600;font-variation-settings:"wdth" 90;font-size:clamp(1.1rem,1.8vw,1.35rem);letter-spacing:-.02em;line-height:1.3}
.vergleich p{font-size:.93rem;color:var(--ink-70);line-height:1.6;max-width:44ch}
.vergleich__seite--wir p{color:var(--cream-70)}

/* Die beiden Gründerinnen: gleichwertige Tafeln, Name in der
   Schreibschrift als persönliche Signatur statt Porträtfotos. */
.duo{display:grid;gap:clamp(1.6rem,3vw,2.4rem);grid-template-columns:1fr;margin-top:clamp(2.5rem,5vw,3.5rem)}
@media (min-width:820px){.duo{grid-template-columns:1fr 1fr}}
.duo article{
  position:relative;
  border:1px solid var(--ink-14);border-radius:var(--r-box);background:var(--paper);
  padding:clamp(1.8rem,3vw,2.6rem);display:grid;gap:1rem;align-content:start;
  transition:box-shadow .45s var(--ease),translate .45s var(--ease);
}
/* Grüner Reiter oben links, in der Sprache der Karten-Haarlinien */
.duo article::before{
  content:"";position:absolute;top:-1px;left:clamp(1.8rem,3vw,2.6rem);
  width:2.6rem;height:3px;background:var(--hunter);
}
.duo article:hover{translate:0 -4px;box-shadow:10px 12px 0 0 var(--sage)}
/* Höhere Spezifität als ».duo p«, sonst schrumpfen Name und Rolle
   auf Fliesstextgrösse — genau das war der Fehler. */
.duo p.duo__name{font-family:var(--font-script);font-size:clamp(2.6rem,4.5vw,3.4rem);color:var(--hunter);line-height:1;max-width:none}
.duo p.duo__rolle{font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-52);padding-bottom:1rem;border-bottom:1px solid var(--ink-14);max-width:none}
.duo p{color:var(--ink-70);max-width:52ch;font-size:.95rem}
.duo p strong{color:var(--ink);font-weight:500}
.duo ul{display:grid;gap:.45rem;font-size:.92rem;color:var(--ink-70)}
.duo ul li{display:flex;gap:.6rem;align-items:baseline}
.duo ul li::before{content:"";width:.4rem;height:.4rem;background:var(--hunter);rotate:45deg;flex:0 0 auto;translate:0 -1px}

/* Namensgeschichte: die 21 als Konturziffer, wie der Geist im Kontakt */
.name21{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center;grid-template-columns:1fr}
@media (min-width:900px){.name21{grid-template-columns:.85fr 1.15fr}}
.name21__zahl{
  font-family:var(--font-display);font-weight:800;font-variation-settings:"wdth" 78;
  font-size:clamp(9rem,24vw,17rem);line-height:.75;letter-spacing:-.06em;
  color:transparent;-webkit-text-stroke:2.5px var(--hunter);
  user-select:none;justify-self:center;
}
.name21__text p{color:var(--ink-70);max-width:52ch;margin-bottom:1.1rem}
.name21__text p strong{color:var(--ink);font-weight:500}

/* Merkmalliste: gesuchte Wohnungen, Hausregeln.
   Spaltenlayout statt Raster: jede Spalte fliesst unabhängig, so reisst
   ein zweizeiliger Punkt keine Lücken in die Nachbarspalte. */
.merkmale{margin-top:1.5rem;columns:1;column-gap:clamp(2.5rem,5vw,4rem)}
@media (min-width:660px){.merkmale{columns:2}}
.merkmale li{
  display:flex;gap:.7rem;align-items:baseline;color:var(--ink-70);
  break-inside:avoid;margin-bottom:.75rem;
}
.merkmale li:last-child{margin-bottom:0}
.merkmale li::before{content:"";width:.45rem;height:.45rem;background:var(--hunter);rotate:45deg;flex:0 0 auto;translate:0 -2px}
.merkmale li strong{color:var(--ink);font-weight:500}

/* Bildzeile: drei Einrichtungsbeispiele in einer Reihe */
.bildzeile{display:grid;gap:clamp(.5rem,1.2vw,1rem);grid-template-columns:repeat(3,1fr);margin-top:clamp(2.5rem,5vw,3.5rem)}
.bildzeile figure{
  overflow:hidden;border-radius:var(--r-box);background:var(--paper-3);
  border:5px solid #FCFAEE;outline:1px solid var(--ink-14);
  transition:rotate .45s var(--ease),translate .45s var(--ease),box-shadow .45s var(--ease);
}
.bildzeile figure:nth-child(odd){rotate:-.7deg}
.bildzeile figure:nth-child(even){rotate:.6deg}
.bildzeile figure:hover{rotate:0deg;translate:0 -5px;box-shadow:8px 10px 0 0 var(--sage)}
.bildzeile img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/4;transition:transform 1s var(--ease)}
.bildzeile figure:hover img{transform:scale(1.05)}

/* FAQ-Seite: eine ruhige Spalte mit Themengruppen */
.faq-seite{max-width:56rem}
.faq__gruppe{margin-bottom:clamp(2.4rem,5vw,3.6rem)}
.faq__gruppe:last-child{margin-bottom:0}
.faq__gruppe .label{margin-bottom:.5rem}

/* Kompaktes Kontaktband auf den Unterseiten */
.kontakt--band{padding:calc(var(--sp-sec) * .8) 0}
/* Im Band steht der Direktkontakt als eigene Spalte: bündig oben,
   als gefasste Tafel statt frei schwebender Zeilen. */
.kontakt--band .kontakt__direct{margin-top:0}

/* Gemeinsame Fotos der Gründerinnen (Über uns) */
.duo-foto{
  overflow:hidden;border-radius:var(--r-box);background:var(--paper-3);
  border:5px solid #FCFAEE;outline:1px solid var(--ink-14);
  rotate:-.5deg;box-shadow:12px 12px 0 0 var(--paper-3);
  transition:rotate .5s var(--ease),box-shadow .5s var(--ease);
}
.duo-foto:hover{rotate:0deg;box-shadow:12px 12px 0 0 var(--sage)}
.duo-foto img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.duo-foto:hover img{transform:scale(1.03)}
.duo-foto--breit{margin-bottom:clamp(2.5rem,5vw,3.5rem)}
.duo-foto--breit img{aspect-ratio:5/2;object-position:50% 32%}
@media (max-width:659px){.duo-foto--breit img{aspect-ratio:4/3}}
.duo-foto--seite{rotate:.7deg}
.duo-foto--seite img{aspect-ratio:3/2}
.zweispalt--mitte{align-items:center}

/* Startseite: kleines Duo-Foto als mittlere Kachel zwischen den Profilen */
@media (min-width:820px){.duo--mit-foto{grid-template-columns:1.075fr .85fr 1.075fr}}
.duo-foto--karte{rotate:-.8deg;position:relative;min-height:15rem}
.duo-foto--karte img{
  position:absolute;inset:0;object-position:44% 30%;
  transform:scale(1.45);transform-origin:42% 30%;
}
.duo-foto--karte:hover img{transform:scale(1.5)}
@media (max-width:819px){
  .duo-foto--karte{position:static;min-height:0}
  .duo-foto--karte img{position:static;height:auto;aspect-ratio:16/10}
}

/* Weiterführender Link am Abschnittsende */
.sec-mehr{margin-top:clamp(2.5rem,4vw,3.5rem);padding-top:1.6rem;border-top:1px solid var(--ink-14)}

/* Vorteile ohne eigene Bandfläche (Startseite wechselt die Flächen ab) */
.vorteile--flach{background:transparent;border-block:0}

/* Fuer-wen-Sektion (Altbestand, wird von .zweispalt abgelöst) */
#eignung{background:var(--paper-2);border-block:1px solid var(--ink-08)}
#eignung .sec-head{margin-bottom:clamp(2rem,4vw,3rem)}
.eignung__cols{display:grid;gap:1.4rem clamp(3rem,6vw,5rem)}
@media (min-width:940px){.eignung__cols{grid-template-columns:1fr 1fr}}
.eignung__cols .sec-head__lead{margin-top:0;max-width:52ch}