/* =========================================================
   «FIRMA» — Seitengestaltung
   Farben: Papier und Tinte, dazu Cortenrost als einziger Akzent.
   Der Rostton stammt aus den Cortenstahl-Hochbeeten seiner
   eigenen Anlagen — nicht das uebliche Gaertnergruen.
   ========================================================= */

:root{
  --papier:      #f4f1ea;
  --papier-tief: #e9e5da;
  --tinte:       #191e15;
  --tinte-leise: #5c6353;
  /* 4.96:1 auf Papier. Der vorige Ton #a75b2e kam nur auf 4.45:1 und
     lag damit unter der WCAG-Schwelle von 4.5 — betraf 13 Stellen,
     darunter alle Kapitelmarken und die Telefonnummer im Kontakt. */
  --corten:      #9e5429;
  /* Corten auf dunklem Grund. Das normale kommt dort nur auf 2.98:1.
     Am gerenderten Bild nachgemessen: über dem hellen Terrassenbelag von
     Kachel 01 reichte #d98b52 mit 4.07:1 nicht, dieser Ton hält 5.03:1. */
  --corten-hell: #e5a06e;
  /* Akzentfarbe fuer SCHRIFT und Anzeigen. Sie muss dem Grund folgen:
     dunkles Corten auf Papier (4.96:1), helles auf Tinte (7.74:1).
     Eine einzige Farbe schafft beides nicht — dunkles Corten kommt auf
     Tinte nur auf 3.03:1. Die Knopffarbe bleibt bewusst --corten, sonst
     stuende Papierschrift auf hellem Corten (1.94:1). */
  --akzent: var(--corten);
  --moos:        #55663c;
  --hauch:       rgba(25,30,21,.14);

  --rand:  clamp(20px, 6vw, 92px);
  --luft:  clamp(64px, 11vw, 168px);

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

*{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--papier); color:var(--tinte);
  font:400 clamp(16px,1.15vw,18px)/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block }

/* Sichtbar nur fuer Vorleseprogramme. clip-path statt display:none —
   Verstecktes wird sonst gar nicht vorgelesen. */
.nur-vorlesen{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}
/* Der Sprunganker liegt ausserhalb des Bildes und kommt beim ersten
   Tabulator herein. Ohne ihn muss man sich mit der Tastatur durch vier
   Bildschirme Kopfbereich arbeiten. */
.sprung{
  position:absolute; left:var(--rand); top:0; z-index:99;
  transform:translateY(-120%);
  background:var(--papier); color:var(--tinte);
  padding:.7em 1.1em; border-radius:0 0 8px 8px; text-decoration:none;
  font:500 .95rem/1 var(--sans);
  transition:transform .18s ease;
}
.sprung:focus{ transform:translateY(0) }
a{ color:inherit }

h1,h2,h3,.kopf__zeile{
  font-family:var(--serif); font-weight:400;
  letter-spacing:-.018em; line-height:1.04; margin:0;
  text-wrap:balance;
}
h1,.kopf__zeile{ font-size:clamp(34px, 5.6vw, 82px) }
h2{ font-size:clamp(30px, 4.6vw, 64px) }
h3{ font-size:clamp(20px, 2vw, 27px); line-height:1.2 }

/* Umschaltung fuer alle dunklen Abschnitte auf einmal. Weil
   Custom Properties vererben, wirkt das auf jede Verwendung darin. */
.kopf, .abschnitt--dunkel, .kopf__echt{ --akzent: var(--corten-hell) }

.bahn{ padding-inline:var(--rand) }
.eng { max-width:38rem }
.mittel{ max-width:56rem }

/* Platzhalter sichtbar machen, damit keiner aus Versehen so aufschaltet */
.luecke{
  color:var(--akzent); font-style:normal;
  border-bottom:1.5px dotted currentColor; white-space:nowrap;
}

/* ---------- Handlungsaufruf ---------- */
.tut{
  display:inline-flex; align-items:center; gap:.7em;
  font:500 1rem/1 var(--sans); letter-spacing:.01em;
  color:var(--papier); background:var(--tinte);
  padding:1.15em 1.7em; border-radius:100px;
  text-decoration:none; transition:background .18s ease, transform .18s ease;
}
.tut:hover{ background:var(--corten); transform:translateY(-1px) }
.tut--offen{
  background:none; color:var(--tinte);
  box-shadow:inset 0 0 0 1.5px var(--hauch);
}
.tut--offen:hover{ background:var(--tinte); color:var(--papier) }

/* Knopf auf dunklem Grund umkehren — sonst dunkel auf dunkel und unsichtbar */
.kopf .tut, .abschnitt--dunkel .tut{ background:var(--papier); color:var(--tinte) }
.kopf .tut:hover, .abschnitt--dunkel .tut:hover{ background:var(--corten); color:var(--papier) }
.kopf .tut .luecke, .abschnitt--dunkel .tut .luecke{ color:#8a4a22 }
.kopf .tut--offen, .abschnitt--dunkel .tut--offen{
  background:none; color:var(--papier); box-shadow:inset 0 0 0 1.5px rgba(244,241,234,.32);
}
.kopf .tut--offen:hover, .abschnitt--dunkel .tut--offen:hover{
  background:var(--papier); color:var(--tinte);
}
.tut svg{ width:1em; height:1em; flex:none }

.kopf__satz{ position:relative; z-index:1; max-width:min(100%, 54rem) }
/* ch rechnet mit der eigenen Schriftgroesse — die Begrenzung gehoert
   deshalb an die Ueberschrift, nicht an den Kasten darum. */
.kopf__zeile{ margin-bottom:.42em; max-width:15ch }
.kopf__unter{
  font-size:clamp(17px,1.6vw,22px); line-height:1.5;
  opacity:.9; max-width:44ch; margin:0 0 2em;
}
.kopf .luecke{ color:#e9b98f }

.marke{
  position:absolute; top:var(--rand); left:var(--rand); z-index:2;
  font:500 1.05rem/1 var(--sans); letter-spacing:.06em;
  text-transform:uppercase; color:var(--papier);
}

/* ---------- Gabelung ---------- */
.gabel{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  border-bottom:1px solid var(--hauch);
}
.gabel__weg{
  padding:clamp(40px,6vw,84px) var(--rand);
  display:flex; flex-direction:column; gap:.9em;
  text-decoration:none; background:var(--papier);
  transition:background .2s ease;
}
.gabel__weg + .gabel__weg{ border-left:1px solid var(--hauch) }
.gabel__weg:hover{ background:var(--papier-tief) }
.gabel__wer{
  font:500 .82rem/1 var(--sans); letter-spacing:.12em;
  text-transform:uppercase; color:var(--akzent);
}
.gabel__weg p{ margin:0; color:var(--tinte-leise); max-width:34ch }
.gabel__pfeil{ margin-top:.6em; font-size:1.5rem; color:var(--akzent) }

@media (max-width:640px){
  .gabel__weg + .gabel__weg{ border-left:0; border-top:1px solid var(--hauch) }
}

/* ---------- Abschnitte ---------- */
.abschnitt{ padding-block:var(--luft) }
/* Zeilenlaenge fuer Ueberschriften in ch — mitwachsend mit der Schrift.
   rem-Grenzen wie .eng sind hier falsch: sie rechnen mit 16px. */
.abschnitt h2{ max-width:15ch }
.abschnitt--dunkel{ background:var(--tinte); color:var(--papier) }
.abschnitt--dunkel .luecke{ color:#e9b98f }

.marke-klein{
  font:500 .82rem/1 var(--sans); letter-spacing:.12em;
  text-transform:uppercase; color:var(--akzent);
  margin:0 0 1.6em;
}
.abschnitt p.lauf{
  font-size:clamp(17px,1.5vw,21px); line-height:1.62;
  color:var(--tinte-leise); max-width:46ch; margin:1.1em 0 0;
}
.abschnitt--dunkel p.lauf{ color:rgba(244,241,234,.72) }

/* ---------- Nutzenzeilen ---------- */
.nutzen{ list-style:none; margin:clamp(40px,6vw,72px) 0 0; padding:0; counter-reset:n }
.nutzen li{
  counter-increment:n; padding:clamp(22px,2.6vw,32px) 0;
  border-top:1px solid var(--hauch);
  display:grid; grid-template-columns:2.6rem 1fr; gap:0 clamp(16px,2vw,32px);
  align-items:start;
}
.abschnitt--dunkel .nutzen li{ border-color:rgba(244,241,234,.18) }
.nutzen li::before{
  content:counter(n,decimal-leading-zero);
  font:400 .95rem/1.5 var(--sans); color:var(--akzent); letter-spacing:.04em;
}
.nutzen h3{ margin:0 0 .35em }
.nutzen p{ margin:0; color:var(--tinte-leise); max-width:52ch }
.abschnitt--dunkel .nutzen p{ color:rgba(244,241,234,.7) }
@media (max-width:560px){
  .nutzen li{ grid-template-columns:1fr }
  .nutzen li::before{ margin-bottom:.5em }
}

/* ---------- Leistungen ---------- */
.leistungen{
  list-style:none; margin:clamp(40px,6vw,72px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:1px; background:var(--hauch); border-block:1px solid var(--hauch);
}
.leistungen li{
  background:var(--papier); padding:clamp(24px,3vw,38px) clamp(18px,2vw,28px);
  display:flex; flex-direction:column; gap:.5em;
}
.leistungen b{ font:400 clamp(19px,1.6vw,23px)/1.2 var(--serif) }
.leistungen span{ font-size:.95rem; color:var(--tinte-leise) }

/* ---------- Kontakt ---------- */
.kontakt{ display:grid; gap:clamp(28px,4vw,56px); align-items:end;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr)) }
.kontakt dl{ margin:0; display:grid; gap:1.1em }
.kontakt dt{ font:500 .8rem/1 var(--sans); letter-spacing:.11em;
  text-transform:uppercase; color:var(--akzent); margin-bottom:.35em }
.kontakt dd{ margin:0; font-size:1.15rem }
.kontakt a{ text-decoration-thickness:1px; text-underline-offset:3px }

/* ---------- Fuss ---------- */
.fuss{
  border-top:1px solid var(--hauch); padding:clamp(32px,4vw,56px) var(--rand);
  display:flex; flex-wrap:wrap; gap:1.4em 2.4em; justify-content:space-between;
  font-size:.92rem; color:var(--tinte-leise);
}
.fuss nav{ display:flex; gap:1.6em; flex-wrap:wrap }

/* =========================================================
   Bauteil Wischer / Stufen — Gestaltung
   Die Mechanik steckt in js/scroll.js
   ========================================================= */
.gw{ position:relative }
.gw__kleber{ position:sticky; top:0; height:100svh; overflow:hidden }
.gw__rahmen{ position:relative; width:100%; height:100% }
.gw__rahmen img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  user-select:none; -webkit-user-drag:none;
}
/* clip-path statt opacity: harte Kante, kein Ueberblenden */
.gw__b{ clip-path:inset(0 100% 0 0) }
.gw--stufen .gw__rahmen img{ visibility:hidden }
.gw--stufen .gw__rahmen img.ist-da{ visibility:visible }

.gw__schrift{
  position:absolute; inset:auto 0 0 0; z-index:1;
  padding:var(--rand); padding-bottom:clamp(34px,5vw,64px);
  color:var(--papier); pointer-events:none;
  background:linear-gradient(to top, rgba(12,16,10,.88) 12%, rgba(12,16,10,.55) 55%, rgba(12,16,10,0));
}
.gw__schrift h2{ max-width:16ch }
.gw__zeile{ margin:.7em 0 0; max-width:40ch; opacity:.85;
  font-size:clamp(15px,1.3vw,18px) }
.gw__balken{ position:absolute; inset:auto 0 0 0; height:2px;
  background:rgba(244,241,234,.25); z-index:2 }
.gw__balken i{ display:block; height:100%; background:var(--akzent);
  width:calc(var(--p,0) * 100%) }

/* ---------- Bewegung abschalten ----------
   Kein Kleben, keine Maske. Beide Zustaende stehen untereinander,
   der Text bleibt vollstaendig lesbar. */
@media (prefers-reduced-motion: reduce){
  .gw{ height:auto !important }
  .gw__kleber{ position:static; height:auto }
  .gw__rahmen{ height:auto; display:grid; gap:2px }
  .gw__rahmen img{
    position:static; height:auto; aspect-ratio:16/9;
    clip-path:none !important; visibility:visible !important;
  }
  .gw__schrift{
    position:static; background:none; color:var(--tinte);
    padding-inline:var(--rand); padding-block:clamp(28px,4vw,48px);
  }
  .gw__balken{ display:none }
  .tut, .gabel__weg{ transition:none }
}

/* ---------- Tastaturbedienung sichtbar ---------- */
:where(a,button):focus-visible{
  outline:2.5px solid var(--corten); outline-offset:3px; border-radius:4px;
}


/* =========================================================
   Plan, der sich zeichnet — Gestaltung
   Mechanik in js/plan.js
   ========================================================= */
.plan{ position:relative; background:var(--papier) }
  .plan__kleber{ position:sticky; top:0; height:100svh; overflow:hidden;
    display:grid; grid-template-rows:auto minmax(0,1fr); gap:0 }

  .plan__kopf{ padding:var(--rand); padding-bottom:0; display:flex;
    justify-content:space-between; align-items:baseline; gap:.4em 2em; flex-wrap:wrap }
  @media (max-width:700px){
    .plan__kopf{ display:block }
    .plan__phasen{ min-width:0; text-align:left; margin-top:.5em }
    .plan__phase{ right:auto; left:0 }
  }
  .plan__titel{ font-family:var(--serif); font-size:clamp(20px,2.2vw,30px); margin:0 }
  .plan__phasen{ position:relative; height:1.5em; min-width:0; text-align:right }
  .plan__phase{
    position:absolute; right:0; top:0; opacity:0; transform:translateY(.35em);
    transition:opacity .32s ease, transform .32s ease;
    font:500 .82rem/1.5 var(--sans); letter-spacing:.12em;
    text-transform:uppercase; color:var(--akzent); white-space:nowrap;
  }
  .plan__phase.ist-da{ opacity:1; transform:none }

  .plan__blatt{ padding:clamp(10px,1.6vw,24px) var(--rand) clamp(26px,3vw,44px);
    display:grid; place-items:center; min-height:0 }
  .plan__blatt svg{ width:100%; height:100%; display:block }

  /* Zeichnung */
  .z{ fill:none; stroke:var(--tinte); vector-effect:non-scaling-stroke }
  .z--duenn{ stroke-width:1 }
  .z--mittel{ stroke-width:1.6 }
  .z--kraeftig{ stroke-width:2.4 }
  .z--grenze{ stroke-width:1.2; stroke-dasharray:14 5 2 5; opacity:.55 }
  .z--bestand{ stroke-width:1.4; stroke-dasharray:6 5; opacity:.6 }
  .z--corten{ stroke:var(--corten); stroke-width:2.2 }
  .f--haus{ fill:rgba(25,30,21,.10); stroke:none }
  .f--rasen{ fill:rgba(85,102,60,.16); stroke:none }
  .f--platte{ fill:rgba(25,30,21,.05); stroke:none }
  .f--corten{ fill:rgba(167,91,46,.14); stroke:none }
  .beschriftung, .maass{
    paint-order:stroke fill; stroke:var(--papier); stroke-width:7px;
    stroke-linejoin:round; fill:var(--tinte-leise);
  }
  .beschriftung{ font:500 16px/1 var(--sans); letter-spacing:.1em; text-transform:uppercase }
  .maass{ font:400 14px/1 var(--sans); letter-spacing:.04em }
  [data-art="wachsen"]{ transform-box:fill-box; transform-origin:center }

  /* Die Zeichnung schrumpft auf schmalen Schirmen stark. Damit die
     Beschriftung lesbar bleibt, waechst sie in Nutzereinheiten mit. */
  @media (max-width:900px){
    .beschriftung{ font-size:23px; stroke-width:7px }
    .maass{ font-size:20px; stroke-width:7px }
    .nur-gross{ display:none }
  }

  @media (prefers-reduced-motion: reduce){
    .plan{ height:auto !important }
    .plan__kleber{ position:static; height:auto }
    .plan__phase{ position:static; opacity:1; transform:none; display:none }
    .plan__phase.ist-da{ display:block }
  }


/* =========================================================
   Vom Plan zur Miniatur — Gestaltung
   Mechanik in js/miniatur.js
   ========================================================= */
.mini{ position:relative; background:var(--papier) }
  .mini__kleber{ position:sticky; top:0; height:100svh; overflow:hidden;
    display:grid; grid-template-rows:auto minmax(0,1fr) }
  .mini__kopf{ padding:var(--rand); padding-bottom:0; display:flex;
    justify-content:space-between; align-items:baseline; gap:.4em 2em; flex-wrap:wrap }
  .mini__titel{ font-family:var(--serif); font-size:clamp(20px,2.2vw,30px); margin:0 }
  .mini__phasen{ position:relative; height:1.5em }
  .mini__phase{ position:absolute; right:0; top:0; opacity:0; transform:translateY(.35em);
    transition:opacity .3s ease, transform .3s ease;
    font:500 .82rem/1.5 var(--sans); letter-spacing:.12em; text-transform:uppercase;
    color:var(--akzent); white-space:nowrap }
  .mini__phase.ist-da{ opacity:1; transform:none }
  @media (max-width:700px){
    .mini__kopf{ display:block }
    .mini__phasen{ text-align:left; margin-top:.4em }
    .mini__phase{ right:auto; left:0 }
  }

  .mini__buehne{ display:grid; place-items:center; min-height:0;
    grid-template-columns:minmax(0,1fr); overflow:hidden;
    perspective:1700px; perspective-origin:50% 60% }
  .mini__welt{
    position:relative; width:1200px; height:800px; transform-style:preserve-3d;
    transform:
      scale(var(--zoom,.62))
      rotateX(calc(var(--kipp,0) * 57deg))
      rotateZ(var(--dreh, 0deg));
  }
  /* weicher Grundschatten unter dem ganzen Modell */
  .mini__welt::after{
    content:""; position:absolute; left:2%; top:6%; width:96%; height:92%;
    background:radial-gradient(ellipse at 50% 55%, rgba(25,30,21,.34), rgba(25,30,21,0) 68%);
    transform:translateZ(-16px); filter:blur(30px);
    opacity:calc(var(--kipp,0) * .95); pointer-events:none;
  }
  .mini__grund{ position:absolute; inset:0; transform-style:preserve-3d }
  .mini__grund svg{ position:absolute; inset:0; width:1200px; height:800px;
    overflow:visible; transform:translateZ(23.4px); opacity:calc(var(--linie,1) * .85) }

  .kd,.ks,.sch{ position:absolute; transform-origin:0 0 }
  /* backface-visibility bewusst NICHT auf hidden: nach rotateX(90deg) zeigt
     die Vorderseite nach hinten und die Wand wuerde weggeschnitten. Bei
     einfarbigen Flaechen bringt das Wegschneiden ohnehin nichts. */
  .kd{ box-shadow:0 0 0 1px rgba(25,30,21,.26) inset }
  .ks{ filter:brightness(.80) }
  .ks--b{ filter:brightness(.63) }
  /* Schlagschatten: flach auf dem Boden, in Lichtrichtung versetzt */
  .sch{ background:rgba(30,34,24,.20); box-shadow:none }

  .schild{ position:absolute; transform-origin:50% 100% }
  .schild i{ display:block; position:absolute; left:0; top:0; width:100%;
    transform-origin:50% 100%;
    border-radius:50%; box-shadow:inset -7px -9px 0 rgba(0,0,0,.10), 0 0 0 1.5px rgba(25,30,21,.30) }
  .schild u{ position:absolute; left:50%; bottom:0; border-radius:2px; background:#7d6b51 }
  .wiegt{ animation:wiegen 6s ease-in-out infinite }
  @keyframes wiegen{ 0%,100%{ transform:rotate(-1.4deg) } 50%{ transform:rotate(1.4deg) } }

  .mini__balken{ position:absolute; inset:auto 0 0 0; height:2px; background:rgba(25,30,21,.14) }
  .mini__balken i{ display:block; height:100%; background:var(--akzent); width:calc(var(--p,0)*100%) }

  @media (prefers-reduced-motion: reduce){
    .mini{ height:auto !important }
    .mini__kleber{ position:static; height:auto }
    .wiegt{ animation:none }
  }


/* =========================================================
   Kopf: vier feste Halte, je ein Textbaustein
   Der Clip wird gescrubbt, nicht abgespielt — Steuerung in js/kopf.js
   ========================================================= */
.kopf{
  position:relative; min-height:auto; padding:0; display:block;
  background:var(--tinte); color:var(--papier);
  /* overflow MUSS visible sein: ein Vorfahre mit overflow:hidden macht
     das Kleben des Kindes wirkungslos — es klebt dann an diesem Kasten,
     und der scrollt nicht mit. */
  overflow:visible;
}
.kopf__kleber{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:grid; align-items:end;
  padding:var(--rand); padding-bottom:clamp(40px,7vw,92px);
}
.kopf__film{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; z-index:0; background:var(--tinte);
}
/* Der Flor sichert die Lesbarkeit. Entscheidend ist der Verlauf zur
   SEITE: die Schrift steht links, der Plan ist hell — ein Verlauf nur
   von unten lässt die Überschrift auf 3.1:1 absacken. Gemessen mit
   werkzeug/kontrast.py, Ziel 4.5:1 für Fliesstext. */
.kopf__ersatz{
  /* Nur der <noscript>-Block macht dieses Bild sichtbar. */
  display:none; position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; z-index:0;
}
.kopf__flor{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to right,
      rgba(12,16,10,.78) 0%, rgba(12,16,10,.70) 34%,
      rgba(12,16,10,.30) 58%, rgba(12,16,10,0) 78%),
    linear-gradient(to bottom, rgba(12,16,10,.45), rgba(12,16,10,0) 18%),
    linear-gradient(to top, rgba(12,16,10,.55) 0%, rgba(12,16,10,.14) 42%, rgba(12,16,10,0) 72%);
}
.kopf .marke{ z-index:2 }
.kopf__satz{ position:relative; z-index:2; max-width:min(100%, 54rem) }

/* Die vier Textbausteine liegen übereinander, nur einer ist sichtbar.
   Ein Raster mit einer Zelle hält die Höhe des längsten frei, damit
   der Knopf darunter beim Wechseln nicht springt. */
.kopf__halt{
  grid-area:1 / 1; opacity:0; transform:translateY(14px);
  transition:opacity .45s ease, transform .45s ease;
  pointer-events:none;
}
.kopf__halt.ist-da{ opacity:1; transform:none; pointer-events:auto }
.kopf__satz{ display:grid; grid-template-columns:100% }
.kopf__fuss{ grid-area:2 / 1; margin-top:clamp(20px,3vw,34px) }
.kopf__punkte{ grid-area:3 / 1; list-style:none; margin:clamp(24px,3vw,38px) 0 0;
  padding:0; display:flex; gap:.55em }
.kopf__punkte li{
  width:26px; height:3px; border-radius:2px; background:rgba(244,241,234,.28);
  transition:background .3s ease;
}
.kopf__punkte li.ist-da{ background:var(--akzent) }

.kopf__saison{
  font:500 .82rem/1.5 var(--sans); letter-spacing:.11em; text-transform:uppercase;
  color:#e9b98f; margin:0 0 1.2em;
}
.kopf__liste{
  list-style:none; margin:0 0 1.6em; padding:0;
  display:flex; flex-wrap:wrap; gap:.5em .6em;
}
.kopf__liste li{
  font:400 .95rem/1 var(--sans); padding:.65em 1em; border-radius:100px;
  box-shadow:inset 0 0 0 1px rgba(244,241,234,.28); background:rgba(12,16,10,.35);
}

/* Feste Halte.

   scroll-snap ist ABGESCHALTET. Es sass auf html und damit auf der ganzen
   Seite: der Browser zieht die Scrollposition dann dauernd zum nächsten
   Anker zurück, und das Scrollen fühlt sich zäh an statt fest. Die vier
   Halte funktionieren auch ohne — der Text wechselt an den Schwellen.
   Zum Wiedereinschalten: die beiden auskommentierten Zeilen befreien. */
.kopf__anker{
  position:absolute; left:0; width:1px; height:100svh;
  /* scroll-snap-align:start; */ pointer-events:none;
}
/* html{ scroll-snap-type:y proximity } */

/* Das echte Material direkt nach der Verwandlung */
.kopf__echt{
  position:relative; z-index:2; background:var(--tinte);
  /* Das Feld lag frueher im <header> und erbte dessen helle Schrift.
     Seit es daneben steht, erbt es die dunkle vom Body — dunkel auf dunkel. */
  color:var(--papier);
  display:grid; gap:clamp(28px,5vw,72px); align-items:center;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  padding:clamp(56px,9vw,120px) var(--rand);
  border-top:1px solid rgba(244,241,234,.16);
}
.kopf__echt h2{ margin:0 0 .5em; max-width:14ch }
.kopf__echt .kopf__unter{ color:rgba(244,241,234,.78); margin-bottom:0 }
.kopf__echt__film video{
  width:100%; max-width:420px; aspect-ratio:576/1024; object-fit:cover;
  display:block; border-radius:12px; background:#0d110b; margin-inline:auto;
}

@media (max-width:820px){
  .kopf__kleber{
    display:grid; grid-template-rows:auto minmax(0,1fr); align-items:start;
    padding-top:calc(var(--rand) * 2 + 1.2rem);
  }
  .kopf__film{
    position:static; width:100%; height:auto; aspect-ratio:16/9;
    object-fit:contain; background:var(--papier); border-radius:10px;
  }
  .kopf__flor{ display:none }
  .kopf__satz{ padding-top:clamp(20px,4vw,32px) }
  .kopf .marke{ color:var(--papier) }
  .kopf__echt{ grid-template-columns:1fr }
  .kopf__echt__film video{ max-width:320px }
}

@media (prefers-reduced-motion: reduce){
  .kopf{ height:auto !important }
  .kopf__kleber{ position:static; height:auto; min-height:70svh }
  .kopf__halt{ position:static; opacity:1; transform:none; grid-area:auto }
  html{ scroll-snap-type:none }
}

/* ---------- Knopfreihe ---------- */
.knopfreihe{ display:flex; flex-wrap:wrap; gap:.8em; margin-top:clamp(28px,4vw,48px) }

/* ---------- Streifen: Hochformat-Kacheln ---------- */
.streifen{
  margin-top:clamp(36px,5vw,64px);
  display:grid; grid-auto-flow:column;
  grid-auto-columns:clamp(232px,22vw,340px);
  gap:clamp(10px,1.2vw,18px);
  overflow-x:auto; overscroll-behavior-x:contain;
  padding-inline:var(--rand); padding-bottom:14px;
  scroll-snap-type:x proximity;
}
/* Die Unterschrift steht IM Bild, nicht darunter. Unter dem Bild war sie
   eine dünne graue Zeile ohne Gewicht; im Bild wird die Kachel selbst zur
   Aussage — und ungleich lange Zeilen verschieben nichts mehr. */
.streifen figure{
  margin:0; scroll-snap-align:start;
  position:relative; overflow:hidden; border-radius:12px;
  background:var(--papier-tief);
}
.streifen video{
  width:100%; aspect-ratio:576/1024; object-fit:cover; display:block;
}
.streifen figcaption{
  position:absolute; inset:auto 0 0 0; z-index:1;
  padding:clamp(16px,1.8vw,22px);
  padding-top:clamp(90px,12vw,150px);
  color:var(--papier);
  /* Unten fast deckend — Kachel 6 ist dort helles Sedum und Kies. Und ein
     LANGER Auslauf nach oben: bei kurzem Verlauf zeichnet sich über hellem
     Grund eine sichtbare Kante ab. Gemessen mit werkzeug/kontrast.py. */
  background:linear-gradient(to top,
    rgba(12,16,10,.93) 0%,  rgba(12,16,10,.88) 22%,
    rgba(12,16,10,.68) 46%, rgba(12,16,10,.36) 68%,
    rgba(12,16,10,.12) 86%, rgba(12,16,10,0)   100%);
}
.streifen__nr{
  display:block; margin-bottom:.5em;
  font:500 .72rem/1 var(--sans); letter-spacing:.16em;
  color:var(--corten-hell); font-variant-numeric:tabular-nums;
}
.streifen__satz{
  display:block; font-family:var(--serif); font-weight:400;
  font-size:clamp(1.02rem,1.35vw,1.2rem); line-height:1.24;
  text-wrap:balance;
  /* Zwei Zeilen Mindesthöhe. Ohne sie sässe die einzeilige Unterschrift
     tiefer als die übrigen, und die Ziffern stünden auf fünf Höhen. */
  min-height:2.48em;
}

/* ---------- Karten, vier auf einer Bahn ---------- */
.karten{
  margin-top:clamp(36px,5vw,64px);
  display:grid; gap:1px; background:rgba(244,241,234,.18);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  border-block:1px solid rgba(244,241,234,.18);
}
.karten article{ background:var(--tinte); padding:clamp(26px,3vw,38px) clamp(20px,2vw,30px) }
.karten h3{ margin:0 0 .6em }
.karten p{ margin:0; color:rgba(244,241,234,.72); font-size:.98rem }
.abschnitt:not(.abschnitt--dunkel) .karten{ background:var(--hauch); border-color:var(--hauch) }
.abschnitt:not(.abschnitt--dunkel) .karten article{ background:var(--papier) }
.abschnitt:not(.abschnitt--dunkel) .karten p{ color:var(--tinte-leise) }

/* ---------- Fragen ---------- */
.fragen{ margin-top:clamp(32px,4vw,56px) }
.fragen details{ border-top:1px solid rgba(244,241,234,.18) }
.fragen details:last-child{ border-bottom:1px solid rgba(244,241,234,.18) }
.fragen summary{
  cursor:pointer; list-style:none; padding:clamp(20px,2.4vw,28px) 2.4em clamp(20px,2.4vw,28px) 0;
  font-family:var(--serif); font-size:clamp(18px,1.7vw,23px); position:relative;
}
.fragen summary::-webkit-details-marker{ display:none }
/* Die Frage steht als h3 in der summary: Antwortmaschinen gewichten
   Überschriften höher als Knopftext. Aussehen bleibt das der summary. */
.fragen summary h3{ font:inherit; letter-spacing:inherit; color:inherit; margin:0 }
.fragen summary::after{
  content:"+"; position:absolute; right:.2em; top:50%; transform:translateY(-50%);
  font-family:var(--sans); font-size:1.3rem; color:var(--akzent);
}
.fragen details[open] summary::after{ content:"–" }
.fragen p{ margin:0 0 clamp(22px,2.6vw,30px); max-width:56ch;
  color:rgba(244,241,234,.72); font-size:1rem }


/* =========================================================
   Dachaufbau im Schnitt — Schichtfarben
   Reihenfolge und Benennung nach gaengiger Praxis; der
   tatsaechliche Aufbau muss beim Betrieb bestaetigt werden.
   ========================================================= */
.z--rot{ stroke:var(--corten); stroke-width:2.2; fill:none }
.z--fuehrung{ stroke:var(--tinte); stroke-width:1; opacity:.4; fill:none }
.s--beton{    fill:rgba(25,30,21,.16) }
.s--folie{    fill:rgba(25,30,21,.55) }
.s--daemm{    fill:rgba(167,91,46,.16) }
.s--abdicht{  fill:rgba(25,30,21,.72) }
.s--vlies{    fill:rgba(25,30,21,.10) }
.s--drain{    fill:rgba(85,102,60,.20) }
.s--substrat{ fill:rgba(120,88,54,.34) }
.s--kies{     fill:rgba(25,30,21,.12) }
.s--sedum{    fill:url(#sedumbild) }


/* =========================================================
   Kapitel: gemeinsame Auszeichnung und Trennung
   ========================================================= */
.kapitel{
  font:500 .8rem/1 var(--sans); letter-spacing:.14em; text-transform:uppercase;
  color:var(--akzent); margin:0 0 1.6em;
  display:flex; align-items:center; gap:.9em;
}
.kapitel::after{
  content:""; flex:1; height:1px; background:currentColor; opacity:.3;
}

/* Miniatur: Text links, Modell rechts */
.mini__kleber{
  display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(24px,4vw,64px); align-items:center;
  padding:var(--rand); padding-block:clamp(40px,6vw,80px);
}
.mini__text{ position:relative; display:grid; grid-template-columns:100%;
  grid-template-rows:auto 1fr auto; align-content:center }
.mini__text > .kapitel{ grid-area:1 / 1 }
.mini__halt{
  grid-area:2 / 1; opacity:0; transform:translateY(14px);
  transition:opacity .45s ease, transform .45s ease; pointer-events:none;
}
.mini__halt.ist-da{ opacity:1; transform:none; pointer-events:auto }
.mini__halt h2{ margin:0 0 .5em; max-width:15ch }
.mini__halt .lauf{ margin:0; max-width:42ch }
.mini__punkte{
  grid-area:3 / 1; list-style:none; margin:clamp(26px,3vw,40px) 0 0; padding:0;
  display:flex; gap:.55em;
}
.mini__punkte li{
  width:26px; height:3px; border-radius:2px; background:var(--hauch);
  transition:background .3s ease;
}
.mini__punkte li.ist-da{ background:var(--akzent) }
.mini__kopf{ display:none }

@media (max-width:900px){
  .mini__kleber{ grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr);
    align-items:start; gap:clamp(16px,3vw,28px) }
  .mini__punkte{ margin-top:1.2em }
}

/* Dachaufbau: Text links, Schnitt rechts — wie die Miniatur */
/* Der Schnitt ist 3:1 breit — in einer schmalen Spalte wird er erdrueckt.
   Deshalb Text oben, Zeichnung darunter ueber die ganze Breite. */
.plan__kleber{
  display:grid; grid-template-rows:auto minmax(0,1fr);
  gap:clamp(18px,2.5vw,34px); align-items:start;
  padding:var(--rand); padding-block:clamp(32px,4.5vw,60px);
}
.plan__text{ position:relative; display:grid; grid-template-columns:100%;
  grid-template-rows:auto auto auto; max-width:64rem }
.plan__text > .kapitel{ grid-area:1 / 1 }
.plan__halt{
  grid-area:2 / 1; opacity:0; transform:translateY(14px);
  transition:opacity .45s ease, transform .45s ease; pointer-events:none;
}
.plan__halt.ist-da{ opacity:1; transform:none; pointer-events:auto }
.plan__halt h2{ margin:0 0 .4em; max-width:20ch;
  font-size:clamp(26px,3.4vw,46px) }
.plan__halt .lauf{ margin:0; max-width:60ch }
.plan__halt strong{ font-weight:500; color:var(--akzent) }
.plan__punkte{
  grid-area:3 / 1; list-style:none; margin:clamp(18px,2vw,26px) 0 0; padding:0;
  display:flex; gap:.55em;
}
.plan__punkte li{ width:26px; height:3px; border-radius:2px; background:var(--hauch);
  transition:background .3s ease }
.plan__punkte li.ist-da{ background:var(--akzent) }
.plan__kopf{ display:none }
.plan__blatt{ position:relative; min-height:0; display:grid;
  /* stretch, nicht center: place-items:center laesst das SVG auf
     seine Inhaltsbreite schrumpfen statt die Spalte zu fuellen */
  place-items:stretch }
.plan__blatt svg{ width:100%; height:100%; display:block }



/* Miniatur: Modell etwas grosszuegiger */
.mini__kleber{ grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr) }


/* =========================================================
   Segmentierung: jedes Kapitel bekommt eine sichtbare Grenze
   ========================================================= */
.abschnitt{ position:relative }
.abschnitt + .abschnitt::before,
.mini::before, .plan::before, .gabel::before{
  content:""; position:absolute; left:var(--rand); right:var(--rand); top:0;
  height:1px; background:var(--hauch);
}
.abschnitt--dunkel + .abschnitt::before,
.abschnitt + .abschnitt--dunkel::before{ background:none }
.mini::before, .plan::before{ background:var(--hauch) }

/* Ein Kapitel beginnt mit Luft und endet mit Luft — gleiche Menge,
   damit der Rhythmus stimmt. */
.abschnitt{ padding-block:clamp(72px,10vw,150px) }
.abschnitt--dunkel{ padding-block:clamp(80px,11vw,168px) }

.abschnitt--dunkel .kapitel::after{ background:rgba(244,241,234,.3) }


/* ============================================================
   REDUZIERTE BEWEGUNG — ganz am Schluss.
   Diese Regeln muessen die Einzelregeln weiter oben schlagen. Bei
   gleicher Spezifitaet gewinnt die spaetere Regel: derselbe Block
   weiter oben liess die Haltepunkte stehen, weil .kopf__punkte
   seine eigene display-Regel danach setzt.
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .kopf .marke{ position:static; display:block; margin-bottom:1.6em }
  .kopf__punkte, .mini__punkte, .plan__punkte,
  .gw__balken, .mini__balken{ display:none }
  .kopf__halt, .mini__halt, .plan__halt{
    grid-area:auto; position:static; opacity:1; transform:none;
    pointer-events:auto; margin-bottom:2.4em;
  }
  .kopf__kleber, .mini__kleber, .plan__kleber{ position:static; height:auto }
  .kopf, .mini, .plan{ height:auto }
}



/* =========================================================
   Rechtsseiten und 404 — ruhiger Lesesatz, gleiche Schrift
   ========================================================= */
.recht{ padding-block:clamp(40px,7vw,96px) clamp(56px,8vw,120px) }
.recht h1{ font-size:clamp(34px,4.4vw,56px); margin:.35em 0 .6em }
.recht h2{ font-size:clamp(21px,2vw,26px); margin:2.2em 0 .55em; letter-spacing:-.01em }
.recht p, .recht li, .recht dd{ max-width:62ch; line-height:1.65 }
.recht ul{ padding-left:1.1em; margin:.4em 0 1em }
.recht dl{ display:grid; grid-template-columns:max-content 1fr; gap:.45em 1.6em; margin:0 }
.recht dt{ color:var(--tinte-leise) }
.recht dd{ margin:0 }
.recht .stand{ margin-top:3em; font-size:.9rem; color:var(--tinte-leise) }
@media (max-width:560px){ .recht dl{ grid-template-columns:1fr } .recht dd{ margin-bottom:.6em } }
.recht dl > div{ display:contents }

/* =========================================================
   Ohne JavaScript — dieselbe Standbild-Fassung wie bei reduzierter
   Bewegung (siehe die zwei Blöcke @media prefers-reduced-motion oben),
   dazu ein Bild für die beiden Flächen, die sonst ein Skript füllt.
   ========================================================= */
.kein-js .kopf{ height:auto !important }
.kein-js .kopf__kleber, .kein-js .mini__kleber, .kein-js .plan__kleber{
  position:static; height:auto }
.kein-js .kopf__kleber{ min-height:70svh }
.kein-js .kopf .marke{ position:static; display:block; margin-bottom:1.6em }
.kein-js .kopf__punkte, .kein-js .mini__punkte, .kein-js .plan__punkte,
.kein-js .gw__balken, .kein-js .mini__balken{ display:none }
.kein-js .kopf__halt, .kein-js .mini__halt, .kein-js .plan__halt{
  grid-area:auto; position:static; opacity:1; transform:none;
  pointer-events:auto; margin-bottom:2.4em;
}
.kein-js .mini, .kein-js .plan{ height:auto }
/* Die Leinwand malt sonst das Skript — ohne Skript das Endbild der Verwandlung */
.kein-js .kopf__film{ background:var(--tinte) url(../web/kino-s/k_147.webp) center/cover no-repeat }
@media (min-width:768px){
  .kein-js .kopf__film{ background-image:url(../web/kino/k_147.webp) }
}
/* Die Miniatur baut das Skript — ohne Skript steht der Plan, auf dem sie ruht */
.kein-js .mini__buehne{ background:url(../web/plan-linien-still.svg) center/contain no-repeat; min-height:50svh }

/* Früher Inline-Stile im HTML — hierher verlegt, damit die Seite eine
   Content-Security-Policy ohne 'unsafe-inline' tragen kann. */
.z--halb{ opacity:.45 }
.beschriftung--corten{ fill:var(--corten) }
.gw__balken--hell{ background:rgba(25,30,21,.14) }
.gw__balken--hell i{ background:var(--corten) }

/* =========================================================
   Navigationsleiste
   Standard (auch ohne JavaScript): hell auf Papier. Über dem dunklen
   Kopf der Startseite setzt js/leiste.js "leiste--dunkel"; beim
   Runterscrollen "leiste--weg", beim Hochscrollen kommt sie zurück.
   ========================================================= */
:root{ --leiste:64px }
html{ scroll-padding-top:calc(var(--leiste) + 16px) }
.leiste{
  position:fixed; inset:0 0 auto 0; z-index:60; height:var(--leiste);
  display:flex; align-items:center; gap:clamp(12px,2vw,28px);
  padding:0 var(--rand);
  background:rgba(244,241,234,.94); color:var(--tinte);
  border-bottom:1px solid var(--hauch);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:transform .28s ease, background-color .28s ease, color .28s ease, border-color .28s ease;
}
.leiste a{ color:inherit; text-decoration:none }
.leiste--dunkel{
  /* Gemessen 28.09.2026: mit .55 → 0 lag die Schrift über dem hellen rechten
     Teil des Kopfes bei 4.08:1. Der Verlauf muss auf Schrifthöhe noch tragen. */
  background:linear-gradient(to bottom, rgba(12,16,10,.74) 0%, rgba(12,16,10,.58) 60%, rgba(12,16,10,0) 100%);
  color:var(--papier); border-bottom-color:transparent;
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
.leiste--weg{ transform:translateY(-100%) }
.leiste__marke{
  font:500 1rem/1 var(--sans); letter-spacing:.08em; text-transform:uppercase;
  white-space:nowrap;
}
.leiste__links{
  display:flex; gap:clamp(14px,1.8vw,28px); margin:0 0 0 auto; padding:0; list-style:none;
  font:500 .92rem/1 var(--sans);
}
.leiste__links a{ padding:.5em 0; border-bottom:1.5px solid transparent }
.leiste__links a:hover, .leiste__links a[aria-current="page"]{ border-bottom-color:var(--corten) }
.leiste--dunkel .leiste__links a:hover,
.leiste--dunkel .leiste__links a[aria-current="page"]{ border-bottom-color:var(--corten-hell) }
.leiste__anruf{
  flex:none; font:500 .9rem/1 var(--sans);
  padding:.75em 1.2em; border-radius:100px;
  background:var(--tinte); color:var(--papier) !important;
}
.leiste__anruf:hover{ background:var(--corten) }
.leiste--dunkel .leiste__anruf{ background:var(--papier); color:var(--tinte) !important }
.leiste--dunkel .leiste__anruf:hover{ background:var(--corten); color:var(--papier) !important }

/* Telefon und schmale Fenster: Menü statt Linkreihe. Sechs Punkte brauchen
   rund 1000 px — darunter würde die Reihe überlaufen (gemessen 01.10.2026). */
.leiste__menue{ display:none }
@media (max-width:1080px){
  .leiste__links{ display:none }
  .leiste__anruf{ margin-left:auto }
  .leiste__menue{ display:block; position:static }
  .leiste__menue > summary{
    list-style:none; cursor:pointer; font:500 .9rem/1 var(--sans);
    padding:.75em 1em; border-radius:100px; box-shadow:inset 0 0 0 1.5px currentColor;
  }
  .leiste__menue > summary::-webkit-details-marker{ display:none }
  .leiste__menue > ul{
    position:absolute; left:0; right:0; top:var(--leiste); margin:0;
    list-style:none; padding:12px var(--rand) 24px;
    background:var(--papier); color:var(--tinte);
    border-bottom:1px solid var(--hauch); box-shadow:0 18px 30px rgba(25,30,21,.12);
  }
  .leiste__menue li a{
    display:block; padding:.9em 0; border-bottom:1px solid var(--hauch);
    font:400 1.25rem/1.2 var(--serif);
  }
  .leiste__menue li a[aria-current="page"]{ color:var(--akzent) }
}
@media (max-width:420px){ .leiste__marke{ font-size:.86rem } }
@media (prefers-reduced-motion:reduce){ .leiste{ transition:none } }

/* Seiten ohne dunklen Kopf: Inhalt beginnt unter der Leiste */
.recht{ padding-top:calc(var(--leiste) + clamp(40px,7vw,96px)) }

/* =========================================================
   Unterseiten: Seitenkopf
   ========================================================= */
.seitenkopf{
  background:var(--tinte); color:var(--papier);
  padding:calc(var(--leiste) + clamp(48px,8vw,120px)) 0 clamp(48px,7vw,104px);
}
.seitenkopf h1{ font-size:clamp(38px,5.4vw,78px); max-width:14ch; margin:.3em 0 .45em }
.seitenkopf .lauf{ font-size:clamp(17px,1.6vw,22px); line-height:1.55; max-width:46ch; opacity:.92 }
.pfad{ margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:.5em;
  font:500 .8rem/1 var(--sans); letter-spacing:.11em; text-transform:uppercase; color:var(--corten-hell) }
.pfad li + li::before{ content:"/"; margin-right:.5em; opacity:.6 }
.pfad a{ color:inherit; text-decoration:none }
.pfad a:hover{ text-decoration:underline }
.seitenkopf .tut{ background:var(--papier); color:var(--tinte) }
.seitenkopf .tut:hover{ background:var(--corten); color:var(--papier) }
.seitenkopf .tut--offen{ background:none; color:var(--papier); box-shadow:inset 0 0 0 1.5px rgba(244,241,234,.32) }
.seitenkopf .tut--offen:hover{ background:var(--papier); color:var(--tinte) }

/* =========================================================
   Kontaktformular
   ========================================================= */
.kontakt{ align-items:start }
.anfrage{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 20px;
  font:500 .9rem/1.3 var(--sans);
}
.anfrage label{ display:grid; gap:.5em }
.anfrage__breit{ grid-column:1 / -1 }
.anfrage__frei{ font-weight:400; color:var(--tinte-leise) }
.anfrage input, .anfrage select, .anfrage textarea{
  width:100%; font:400 1rem/1.4 var(--sans); color:var(--tinte);
  background:#fbfaf6; border:1px solid rgba(25,30,21,.22); border-radius:10px;
  padding:.8em .9em;
}
.anfrage textarea{ resize:vertical; min-height:8em }
.anfrage input:focus, .anfrage select:focus, .anfrage textarea:focus{
  outline:2px solid var(--corten); outline-offset:1px; border-color:transparent }
.anfrage__ende{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px }
.anfrage .tut{ border:0; cursor:pointer }
.anfrage__hinweis{ margin:0; font:400 .85rem/1.45 var(--sans); color:var(--tinte-leise); max-width:34ch }
.anfrage__hinweis a{ color:inherit }
@media (max-width:640px){ .anfrage{ grid-template-columns:1fr } }
/* Falle für Maschinen: ausserhalb des Bildes statt display:none —
   manche Programme füllen versteckte Felder bewusst nicht aus. */
.nur-maschinen{ position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden }

/* Fuss mit Betriebsangaben */
.fuss__betrieb{ display:flex; flex-wrap:wrap; gap:.4em 1.4em; align-items:baseline }
.fuss__betrieb b{ color:var(--tinte); font-weight:500 }
.fuss a{ color:inherit }

/* Ohne JavaScript: Dachzeichnung vollständig (die Teile deckt sonst das Skript auf) */
.kein-js [data-art]{ opacity:1 !important; stroke-dashoffset:0 !important; transform:none !important }

/* Agentur-Hinweis in der Fusszeile: eigene Zeile, zurückhaltend */
/* ohne opacity: mit .8 lag die Schrift bei 3.64:1 (Lighthouse 15.10.2026) */
.fuss__macher{ flex-basis:100%; font-size:.82rem }

/* =========================================================
   Fotos des Betriebs
   ========================================================= */
.galerie{
  display:grid; gap:clamp(12px,1.6vw,22px); margin-top:clamp(32px,4vw,56px);
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.galerie--klein{ grid-template-columns:repeat(auto-fit,minmax(240px,1fr)) }
.foto{ margin:0 }
.foto a{ display:block }
.foto img{
  display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
  border-radius:12px; background:var(--papier-tief);
}
.foto--gross{ grid-column:span 2; grid-row:span 2 }
.foto--gross img{ aspect-ratio:auto; height:calc(100% - 2.6em) }
.foto figcaption{ margin-top:.6em; font-size:.92rem; color:var(--tinte-leise) }
.foto figcaption b{ color:var(--tinte); font-weight:500 }
@media (max-width:820px){
  .galerie{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .foto--gross{ grid-column:1 / -1; grid-row:auto }
  .foto--gross img{ height:auto; aspect-ratio:4/3 }
}
@media (max-width:520px){ .galerie{ grid-template-columns:1fr } }


.betrieb{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,420px); gap:clamp(32px,5vw,80px); align-items:start }
.betrieb h2{ max-width:15ch }
.teamfoto{ margin:0 }
.teamfoto img{ display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:12px }
.teamfoto figcaption{ margin-top:.6em; font-size:.92rem; color:var(--tinte-leise) }
@media (max-width:820px){ .betrieb{ grid-template-columns:1fr } }

/* =========================================================
   Vorher/Nachher mit Schieber
   ========================================================= */
.vn{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,600px);
  gap:clamp(36px,6vw,96px); align-items:center }
.vn__text h2{ max-width:12ch }
.vn__hinweis{ margin:1.6em 0 0; font:500 .8rem/1 var(--sans); letter-spacing:.14em;
  text-transform:uppercase; color:var(--corten-hell) }
.vergleich{ margin:0; --pos:50% }
.vergleich__buehne{
  position:relative; overflow:hidden; border-radius:16px; aspect-ratio:4/5;
  background:#0d100b; box-shadow:0 30px 60px rgba(0,0,0,.35);
  touch-action:pan-y; user-select:none; -webkit-user-select:none;
}
.vergleich__buehne img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block }
.vergleich__vorher{ clip-path:inset(0 calc(100% - var(--pos)) 0 0) }
.vergleich__linie{
  position:absolute; top:0; bottom:0; left:var(--pos); width:2px; margin-left:-1px;
  background:var(--papier); box-shadow:0 0 0 1px rgba(0,0,0,.15); pointer-events:none;
}
.vergleich__knopf{
  position:absolute; top:50%; left:50%; width:52px; height:52px; margin:-26px 0 0 -26px;
  border-radius:50%; background:var(--papier); box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.vergleich__knopf::before, .vergleich__knopf::after{
  content:""; position:absolute; top:50%; width:0; height:0; margin-top:-6px;
  border:6px solid transparent;
}
.vergleich__knopf::before{ left:9px;  border-right:8px solid var(--tinte) }
.vergleich__knopf::after { right:9px; border-left:8px solid var(--tinte) }
.vergleich__marke{
  position:absolute; top:16px; padding:.5em .85em; border-radius:100px;
  font:500 .78rem/1 var(--sans); letter-spacing:.12em; text-transform:uppercase;
  background:rgba(12,16,10,.72); color:var(--papier); pointer-events:none;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.vergleich__marke--vorher{ left:16px }
.vergleich__marke--nachher{ right:16px; background:var(--papier); color:var(--tinte) }
/* Der Regler liegt unsichtbar über der ganzen Fläche: überall greifbar */
.vergleich__regler{
  position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0;
  cursor:ew-resize; -webkit-appearance:none; appearance:none; background:none;
}
.vergleich__regler:focus-visible + *, .vergleich__buehne:has(.vergleich__regler:focus-visible){
  outline:3px solid var(--corten-hell); outline-offset:4px }
.vergleich figcaption{ margin-top:.8em; font-size:.92rem; color:rgba(244,241,234,.7) }
@media (max-width:860px){
  .vn{ grid-template-columns:1fr }
  .vn__text h2{ max-width:none }
}
/* Ohne JavaScript: nebeneinander statt Schieber */
.kein-js .vergleich__buehne{ aspect-ratio:auto; display:grid; grid-template-columns:1fr 1fr; gap:10px; background:none; box-shadow:none }
.kein-js .vergleich__buehne img{ position:static; aspect-ratio:4/5; clip-path:none; border-radius:12px }
.kein-js .vergleich__buehne img.vergleich__vorher{ order:-1 }
.kein-js .vergleich__linie, .kein-js .vergleich__regler, .kein-js .vn__hinweis{ display:none }
.kein-js .vergleich__marke--nachher{ right:16px }

/* =========================================================
   Projekte-Seite
   ========================================================= */
.projekte{ display:grid; gap:clamp(56px,8vw,120px) }
.projekt{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(24px,4vw,64px); align-items:center }
.projekt:nth-child(even) .projekt__bilder{ order:2 }
.projekt figure{ margin:0 }
.projekt img{ display:block; width:100%; height:auto; object-fit:cover; border-radius:14px; background:var(--papier-tief) }
.projekt__haupt img{ aspect-ratio:4/3 }
.projekt__reihe{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:10px }
.projekt__reihe img{ aspect-ratio:1/1; border-radius:10px }
.projekt__art{ margin:0 0 .9em; font:500 .78rem/1 var(--sans); letter-spacing:.14em;
  text-transform:uppercase; color:var(--akzent) }
.projekt h2{ font-size:clamp(28px,3.2vw,44px); max-width:14ch; margin:0 0 .5em }
.projekt__liste{ list-style:none; margin:1.4em 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.5em }
.projekt__liste li{ font:500 .85rem/1 var(--sans); padding:.6em .9em; border-radius:100px;
  box-shadow:inset 0 0 0 1px var(--hauch) }
.gemeinden{ font-family:var(--serif); font-size:clamp(22px,2.4vw,32px); line-height:1.4 }
@media (max-width:860px){
  .projekt{ grid-template-columns:1fr }
  .projekt:nth-child(even) .projekt__bilder{ order:0 }
}

/* WhatsApp in der Leiste: auf breiten Schirmen mit Wort, auf dem Telefon nur Zeichen */
.leiste__wa{
  flex:none; display:inline-flex; align-items:center; gap:.45em;
  font:500 .9rem/1 var(--sans); padding:.7em 1em; border-radius:100px;
  box-shadow:inset 0 0 0 1.5px currentColor;
}
.leiste__wa svg{ width:1.15em; height:1.15em }
.leiste__wa:hover{ background:#1f7a3e; color:#fff !important; box-shadow:none }
@media (max-width:1080px){
  .leiste__wa{ margin-left:auto; padding:.7em }
  .leiste__wa-text{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0) }
  .leiste__wa + .leiste__anruf{ margin-left:0 }
}
@media (max-width:380px){ .leiste{ gap:8px } .leiste__marke{ font-size:.8rem } }

/* Projekte: Bildunterschrift bei Zuständen (frisch angelegt / eingewachsen) */
.projekt figcaption{ margin-top:.5em; font:500 .75rem/1 var(--sans); letter-spacing:.12em;
  text-transform:uppercase; color:var(--tinte-leise) }
.werkfilm{ margin:clamp(28px,4vw,48px) 0 0; max-width:960px }
.werkfilm video{ display:block; width:100%; height:auto; aspect-ratio:16/9; border-radius:14px; background:#0d100b }
.werkfilm figcaption{ margin-top:.6em; font-size:.92rem; color:rgba(244,241,234,.7) }