/* =============================================================================
   Dachdeckerei Nordgiebel - Musterseite Handwerk
   Entwurf & Eigentum von Webatelier Nord. Ein Stylesheet, keine Fremdbibliothek,
   keine externen Schriftserver.

   Gestaltungsregel dieser Seite: Werkzeug, nicht Wellness. Kanten statt
   Rundungen (Radius hoechstens 4 px), hoher Kontrast, grosse Flaechen,
   breite Schaltflaechen. Alles muss mit dicken Fingern und in der Sonne
   bedienbar bleiben.
   ========================================================================== */

:root {
  /* Flaechen */
  --schiefer:   #14181b;
  --schiefer-2: #1b2126;
  --schiefer-3: #262e35;
  --schiefer-4: #333d45;
  --zink:       #8f9aa2;
  --zink-2:     #b6bfc5;
  --sand:       #efe8dc;
  --sand-2:     #ded3c1;
  --papier:     #f7f3ec;

  /* Signal */
  --signal:     #ee5a1c;
  --signal-2:   #ff7c3f;
  --ziegel:     #b0432a;
  --gruen:      #4a8f5c;

  /* Schrift */
  --text:       #1a1f23;
  --text-2:     #4c565e;
  --auf-dunkel:   #e7e2d8;
  --auf-dunkel-2: #a6b0b7;

  --linie:      rgba(20, 24, 27, .16);
  --linie-hell: rgba(231, 226, 216, .17);

  --cond: "Archivo Narrow", "Roboto Condensed", "Barlow Condensed",
          "Arial Narrow", "Segoe UI", system-ui, sans-serif;
  --sans: "Archivo", "Segoe UI", system-ui, -apple-system,
          "Helvetica Neue", Arial, sans-serif;

  --r:    3px;
  --ease: cubic-bezier(.22, .68, .16, 1);
  --pad:  clamp(18px, 4.6vw, 76px);
  --max:  1320px;

  /* Zwei Paare, bewusst getrennt:
     --h-* ist die Mindesthoehe im Entwurf und geht in min-height.
     --l-* ist die tatsaechlich gemessene Hoehe und wird fuers Positionieren
     und scroll-padding benutzt. Wuerde man nur eine Variable fuehren, wuerde
     min-height den gemessenen Wert festhalten und die Kopfzeile nach dem
     Oeffnen des Menues nie wieder schrumpfen. */
  --h-notdienst: 40px;
  --h-header:    68px;
  --l-notdienst: 40px;
  --l-header:    68px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--l-notdienst) + var(--l-header) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--sans);
  background: var(--schiefer);
  color: var(--text);
  line-height: 1.6;
  font-size: 17px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a   { color: inherit; }

::selection { background: var(--signal); color: #fff; }

:focus-visible {
  outline: 3px solid var(--signal-2);
  outline-offset: 3px;
  border-radius: 1px;
}

/* --- Typografie ----------------------------------------------------------- */
h1, h2, h3, .cond {
  font-family: var(--cond);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .012em;
  line-height: .96;
  text-wrap: balance;
}

h2 { font-size: clamp(2rem, 4.6vw, 3.9rem); }
h3 { font-size: clamp(1.22rem, 1.9vw, 1.55rem); line-height: 1.06; }

p { text-wrap: pretty; }

.lead {
  font-size: clamp(1.06rem, 1.55vw, 1.32rem);
  line-height: 1.55;
  max-width: 62ch;
}

.klein  { font-size: .82rem; line-height: 1.5; }
.muted  { color: var(--text-2); }
.muted-d{ color: var(--auf-dunkel-2); }

/* Kleiner Abschnittsstempel ueber jeder Ueberschrift */
.stempel {
  font-family: var(--cond);
  text-transform: uppercase;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .22em;
  color: var(--signal);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.stempel::before {
  content: ""; width: 34px; height: 3px; background: var(--signal); flex: none;
}

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

section { position: relative; }
.abschnitt { padding-block: clamp(60px, 8vw, 128px); }
.hell  { background: var(--sand);      color: var(--text); }
.papier{ background: var(--papier);    color: var(--text); }
.dunkel{ background: var(--schiefer);  color: var(--auf-dunkel); }
.dunkel-2 { background: var(--schiefer-2); color: var(--auf-dunkel); }
.dunkel h2, .dunkel-2 h2, .dunkel h3, .dunkel-2 h3 { color: var(--sand); }

/* Sichtbares Raster im Hintergrund dunkler Abschnitte - wirkt wie Millimeter-
   papier auf dem Werkstatttisch, nicht wie Zierde. */
.gitter::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background:
    linear-gradient(var(--linie-hell) 1px, transparent 1px) 0 0 / 100% 64px,
    linear-gradient(90deg, var(--linie-hell) 1px, transparent 1px) 0 0 / 64px 100%;
  mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
}
.gitter > * { position: relative; }

/* --- Schaltflaechen ------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 28px;
  font-family: var(--cond); font-size: 1.06rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  border: 2px solid transparent; border-radius: var(--r);
  text-decoration: none; cursor: pointer; background: none;
  transition: background .18s var(--ease), color .18s var(--ease),
              transform .09s var(--ease), border-color .18s var(--ease);
}
.btn:active { transform: translateY(2px); }

.btn-signal { background: var(--signal); color: #fff; }
.btn-signal:hover { background: var(--signal-2); }

.btn-dunkel { background: var(--schiefer); color: var(--sand); }
.btn-dunkel:hover { background: var(--schiefer-3); }

.btn-linie { border-color: currentColor; }
.dunkel .btn-linie, .dunkel-2 .btn-linie, .hero .btn-linie { color: var(--sand); }
.btn-linie:hover { background: var(--signal); border-color: var(--signal); color: #fff; }

.btn-breit { width: 100%; }

/* =============================================================================
   1. Notdienst-Leiste
   ========================================================================== */
.notdienst {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  min-height: var(--h-notdienst);
  background: var(--ziegel); color: #fff;
  /* Genau zwei Flex-Kinder: Punkt und Text. Waeren die Textstuecke direkte
     Kinder, wuerde jedes zu einem eigenen Flex-Element und die Zeile braeche
     an voellig willkuerlichen Stellen um. */
  display: flex; align-items: center; justify-content: center;
  font-family: var(--cond); font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; font-size: .93rem; line-height: 1.3;
  padding: 7px var(--pad);
  text-align: center;
  transform: translateY(-100%);
  transition: transform .45s var(--ease);
}
.notdienst.da { transform: none; }
.notdienst b { font-variant-numeric: tabular-nums; letter-spacing: .04em; white-space: nowrap; }
.notdienst .nd-kurz { display: none; }
.notdienst .nd-text { min-width: 0; }
.notdienst .punkt {
  width: 10px; height: 10px; border-radius: 50%; background: #ffd9c8;
  margin-right: 11px; flex: none;
  animation: puls 2.1s var(--ease) infinite;
}
@keyframes puls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 217, 200, .8); opacity: 1; }
  70%      { box-shadow: 0 0 0 9px rgba(255, 217, 200, 0); opacity: .75; }
}

/* =============================================================================
   2. Kopfzeile
   ========================================================================== */
.kopf {
  position: fixed; left: 0; right: 0; top: 0; z-index: 55;
  min-height: var(--h-header);
  display: flex; align-items: center;
  background: rgba(20, 24, 27, .93);
  border-bottom: 1px solid var(--linie-hell);
  transition: top .45s var(--ease), background .3s var(--ease);
}
@supports (backdrop-filter: blur(1px)) {
  .kopf { background: rgba(20, 24, 27, .82); backdrop-filter: saturate(150%) blur(14px); }
}
.notdienst.da ~ .kopf, body.leiste-da .kopf { top: var(--l-notdienst); }

.kopf .wrap { display: flex; align-items: center; gap: 18px; }

.marke {
  display: flex; align-items: center; gap: 11px;
  text-decoration: none; color: var(--sand); flex: none;
}
.marke svg { width: 30px; height: 30px; flex: none; }
.marke .name {
  font-family: var(--cond); font-weight: 700; text-transform: uppercase;
  line-height: .95; font-size: 1.24rem; letter-spacing: .015em;
}
.marke .name span { display: block; font-size: .62rem; letter-spacing: .26em; color: var(--signal); }

.badge {
  font-family: var(--cond); text-transform: uppercase; font-weight: 700;
  font-size: .68rem; letter-spacing: .16em;
  border: 1.5px solid var(--signal); color: var(--signal);
  padding: 4px 9px; border-radius: var(--r); flex: none; white-space: nowrap;
}

.nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.nav a {
  font-family: var(--cond); text-transform: uppercase; font-weight: 700;
  font-size: .93rem; letter-spacing: .06em; color: var(--auf-dunkel);
  text-decoration: none; padding: 10px 13px; border-radius: var(--r);
  transition: color .18s var(--ease), background .18s var(--ease);
}
.nav a:hover { color: var(--signal-2); background: rgba(255, 255, 255, .05); }
.kopf .btn { min-height: 44px; padding: 0 20px; font-size: .93rem; flex: none; }

.burger {
  display: none; margin-left: auto;
  width: 48px; height: 48px; background: none; border: 1.5px solid var(--linie-hell);
  border-radius: var(--r); cursor: pointer; position: relative;
}
.burger span {
  position: absolute; left: 12px; right: 12px; height: 2px; background: var(--sand);
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.burger span:nth-child(1) { top: 16px; }
.burger span:nth-child(2) { top: 23px; }
.burger span:nth-child(3) { top: 30px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =============================================================================
   3. Hero mit dreilagiger Parallaxe
   ========================================================================== */
.hero {
  position: relative; min-height: min(94svh, 860px);
  display: flex; align-items: flex-end;
  padding-top: calc(var(--l-notdienst) + var(--l-header) + 40px);
  padding-bottom: clamp(44px, 7vw, 96px);
  overflow: hidden; background: var(--schiefer);
  color: var(--sand);
}
.hero-lage { position: absolute; inset: -8% 0 -8% 0; will-change: transform; }
.hero-lage img { width: 100%; height: 100%; object-fit: cover; }

/* Ebene 1: Himmel - ein ruhiger Verlauf, bewegt sich am langsamsten */
.lage-himmel {
  background: linear-gradient(178deg, #39434b 0%, #4b555d 42%, #2b3238 100%);
}
/* Ebene 2: Dachlandschaft im Dunst - traegt die linke Seite hinter dem Text */
.lage-dach { opacity: .62; filter: grayscale(.35) contrast(.86); }
.lage-dach::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20, 24, 27, .55), rgba(20, 24, 27, .9));
}

/* Ebene 3: Vordergrund - das Arbeitsmotiv.
   Wichtig: die Ebene wird nach links ausmaskiert. Ein vollflaechig deckendes
   Foto wuerde die beiden Ebenen darunter verdecken, und die dreilagige
   Parallaxe waere nicht zu sehen. So liegt der Text auf der Dachlandschaft,
   das Arbeitsmotiv steht rechts daneben. */
.lage-vorn {
  -webkit-mask-image: linear-gradient(96deg, transparent 20%, #000 52%, #000 100%);
          mask-image: linear-gradient(96deg, transparent 20%, #000 52%, #000 100%);
}
.lage-vorn::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(96deg, rgba(20, 24, 27, .85) 12%, rgba(20, 24, 27, .34) 46%,
                    rgba(20, 24, 27, .04) 66%, rgba(20, 24, 27, .3) 100%),
    linear-gradient(0deg, rgba(20, 24, 27, .88) 0%, rgba(20, 24, 27, .3) 20%,
                    rgba(20, 24, 27, 0) 48%);
}

.hero .wrap { position: relative; z-index: 2; }
/* Breite in px, nicht in ch: ch rechnet gegen die Body-Groesse, nicht gegen
   die Headline - sonst faellt die H1 auf eine Wortspalte zusammen. */
.hero-text { max-width: min(780px, 100%); }
.hero h1 .h1-ort {
  display: block; margin-bottom: 16px;
  font-size: clamp(.78rem, 1.15vw, .92rem); letter-spacing: .2em;
  color: var(--signal-2); text-shadow: none;
}
.hero h1 {
  font-size: clamp(2.4rem, 5.6vw, 5.4rem);
  line-height: .9; color: #fff;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .45);
}
.hero h1 em { font-style: normal; color: var(--signal-2); }
.hero .lead { margin-top: 22px; color: var(--auf-dunkel); max-width: 46ch; }
.hero-tasten { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.hero-fuss {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  border-top: 1px solid var(--linie-hell);
  background: rgba(20, 24, 27, .55);
  font-family: var(--cond); text-transform: uppercase; font-weight: 700;
  letter-spacing: .1em; font-size: .78rem; color: var(--auf-dunkel-2);
}
.hero-fuss .wrap { display: flex; flex-wrap: wrap; gap: 8px 30px; padding-block: 12px; }
.hero-fuss span { display: flex; align-items: center; gap: 8px; }
.hero-fuss span::before {
  content: ""; width: 7px; height: 7px; background: var(--signal); flex: none;
}

/* =============================================================================
   4. Beweisleiste
   ========================================================================== */
.beweis { background: var(--signal); color: #fff; }
.beweis .wrap {
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding-block: clamp(30px, 4vw, 52px);
}
.beweis .zelle { padding: 6px clamp(8px, 2vw, 26px); }
.beweis .zelle + .zelle { border-left: 1px solid rgba(255, 255, 255, .3); }
.beweis .zahl {
  font-family: var(--cond); font-weight: 700; line-height: .88;
  font-size: clamp(2.1rem, 5.2vw, 4.1rem);
  font-variant-numeric: tabular-nums; display: block;
}
.beweis .zahl small { font-size: .48em; margin-left: 2px; }
.beweis .was {
  font-family: var(--cond); text-transform: uppercase; font-weight: 700;
  letter-spacing: .1em; font-size: clamp(.68rem, 1.1vw, .82rem);
  margin-top: 10px; opacity: .92;
}

/* =============================================================================
   5. Laufband
   ========================================================================== */
.laufband {
  background: var(--schiefer-2); border-block: 1px solid var(--linie-hell);
  overflow: hidden; padding-block: 15px;
}
.laufband-spur { display: flex; width: max-content; animation: laufen 42s linear infinite; }
.laufband:hover .laufband-spur, .laufband:focus-within .laufband-spur { animation-play-state: paused; }
.laufband-satz { display: flex; flex: none; }
.laufband b {
  font-family: var(--cond); font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; font-size: clamp(1rem, 1.7vw, 1.35rem);
  color: var(--auf-dunkel); padding-inline: 26px;
  display: flex; align-items: center; gap: 26px; white-space: nowrap;
}
.laufband b::after {
  content: ""; width: 8px; height: 8px; background: var(--signal);
  transform: rotate(45deg); flex: none;
}
@keyframes laufen { from { transform: none; } to { transform: translate3d(-50%, 0, 0); } }

/* =============================================================================
   6. Leistungen
   ========================================================================== */
.kopfzeile { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 26px; margin-bottom: clamp(30px, 4vw, 54px); }
.kopfzeile > div:first-child { flex: 1 1 420px; }
.kopfzeile p.lead { margin-top: 16px; }

.leistungen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--linie); }
.leistung {
  background: var(--papier); display: flex; flex-direction: column;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.leistung:hover { transform: translateY(-4px) rotate(-.35deg); box-shadow: 0 22px 40px -28px rgba(20, 24, 27, .7); z-index: 2; }
.leistung-bild { aspect-ratio: 4 / 3; overflow: hidden; background: var(--schiefer-3); }
.leistung-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.leistung:hover .leistung-bild img { transform: scale(1.045); }
.leistung-text { padding: clamp(20px, 2.4vw, 30px); display: flex; flex-direction: column; flex: 1; }
/* Jede Leistungskarte ist ein <article> und traegt deshalb ihre eigene
   <h2> - gueltige Gliederung und je Leistung ein Ortsbezug. */
.leistung h2 { font-size: clamp(1.22rem, 1.9vw, 1.5rem); line-height: 1.06; margin-bottom: 10px; }
.leistung p { font-size: .96rem; color: var(--text-2); }
.leistung .preis {
  margin-top: auto; padding-top: 18px; border-top: 1px solid var(--linie);
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
}
.leistung .preis b {
  font-family: var(--cond); font-size: 1.3rem; color: var(--ziegel);
  text-transform: uppercase; letter-spacing: .02em;
}
.leistung .preis .hinweis {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .12em;
  font-size: .64rem; color: var(--text-2);
  border: 1px solid var(--linie); padding: 2px 7px; border-radius: var(--r);
}

/* =============================================================================
   7. Referenzen - waagerechte Galerie mit Vorher/Nachher-Reglern
   ========================================================================== */
.galerie-buehne { position: relative; }
.galerie-klebe {
  position: sticky; top: calc(var(--l-notdienst) + var(--l-header));
  height: calc(100svh - var(--l-notdienst) - var(--l-header));
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden;
}
.galerie-kopf { padding-inline: var(--pad); max-width: var(--max); margin-inline: auto; width: 100%; }
.galerie-kopf .stempel { margin-bottom: 10px; }
.galerie-kopf h2 { font-size: clamp(1.7rem, 3.4vw, 2.9rem); }

.spur {
  display: flex; gap: clamp(14px, 1.8vw, 26px);
  padding-inline: var(--pad); margin-top: clamp(16px, 2.4vw, 30px);
  will-change: transform;
}
.projekt {
  flex: none; width: min(74vw, 460px);
  background: var(--schiefer-2); border: 1px solid var(--linie-hell);
  border-radius: var(--r); overflow: hidden;
  display: flex; flex-direction: column;
}
.projekt-meta { padding: 15px clamp(14px, 1.6vw, 20px) 17px; }
.projekt-meta h3 { color: var(--sand); font-size: 1.12rem; }
.projekt-meta .zeile {
  display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 9px;
  font-family: var(--cond); text-transform: uppercase; font-weight: 700;
  letter-spacing: .1em; font-size: .7rem; color: var(--auf-dunkel-2);
}
.projekt-meta .zeile b { color: var(--signal-2); font-weight: 700; }

/* Fortschritt der waagerechten Fahrt */
.spur-leiste {
  height: 3px; background: var(--linie-hell); margin: clamp(16px, 2vw, 26px) var(--pad) 0;
  max-width: calc(var(--max) - 2 * var(--pad)); margin-inline: auto; width: 100%;
}
.spur-leiste i { display: block; height: 100%; width: 0; background: var(--signal); transition: width .1s linear; }
.spur-hinweis {
  margin: 10px var(--pad) 0; max-width: var(--max); margin-inline: auto; width: 100%;
  padding-inline: var(--pad);
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .14em;
  font-size: .7rem; color: var(--auf-dunkel-2);
}

/* --- Der Vergleichsregler ------------------------------------------------- */
.vergleich {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden;
  background: var(--schiefer-3); cursor: ew-resize;
  user-select: none; -webkit-user-select: none;
  /* Bewusst KEIN touch-action: pan-y. Damit haette der Browser jede leicht
     schraege Wischbewegung fuer sich beansprucht, die Geste per
     pointercancel abgebrochen und der Trenner waere auf halbem Weg stehen
     geblieben. Im Bild scrollt und wischt der Finger deshalb ganz normal;
     gezogen wird am Knopf, der seinerseits touch-action: none traegt. */
  touch-action: auto;
}
.vergleich img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vergleich .oben { clip-path: inset(0 0 0 var(--pos, 50%)); }
.vergleich .fahne {
  position: absolute; top: 12px; z-index: 3;
  font-family: var(--cond); text-transform: uppercase; font-weight: 700;
  letter-spacing: .14em; font-size: .68rem; color: #fff;
  background: rgba(20, 24, 27, .82); padding: 5px 10px; border-radius: var(--r);
  pointer-events: none;
}
.vergleich .fahne-v { left: 12px; }
.vergleich .fahne-n { right: 12px; background: var(--signal); }

.vergleich .trenner {
  position: absolute; top: 0; bottom: 0; left: var(--pos, 50%);
  width: 3px; background: #fff; transform: translateX(-50%); z-index: 4;
  box-shadow: 0 0 0 1px rgba(20, 24, 27, .35);
  pointer-events: none;
}
.vergleich .griff {
  position: absolute; top: 50%; left: var(--pos, 50%);
  width: 56px; height: 56px; margin: -28px 0 0 -28px; z-index: 5;
  background: #fff; border: 3px solid var(--signal); border-radius: 50%;
  display: grid; place-items: center; cursor: grab;
  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, .7);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
  /* Der Knopf gibt die Geste nie ans Scrollen ab - nur so laeuft der Zug
     auf dem Handy bis zum Loslassen durch. */
  touch-action: none;
}
.vergleich .griff::before {
  content: "\25C0\00A0\25B6"; font-size: 13px; color: var(--schiefer);
  letter-spacing: -1px; line-height: 1;
}
.vergleich .griff:hover, .vergleich .griff:focus-visible { transform: scale(1.08); }
/* Grosszuegige Greifflaeche fuer den Daumen, ohne den Kreis zu vergroessern:
   aus 56 px sichtbar werden rund 96 px anfassbar. */
.vergleich .griff::after { content: ""; position: absolute; inset: -20px; }

/* Waehrend des Ziehens: Trenner und Knopf folgen ohne Nachlauf. */
.vergleich.zieht { cursor: grabbing; }
.vergleich.zieht .griff { cursor: grabbing; transform: scale(1.06); box-shadow: 0 10px 28px -8px rgba(0, 0, 0, .8); }
.vergleich.zieht img { will-change: clip-path; }

/* Lupe: Karte gross ansehen */
.projekt .gross {
  margin: 0 clamp(14px, 1.6vw, 20px) 16px; min-height: 46px; font-size: .88rem;
}

dialog.lupe {
  border: none; padding: 0; background: none; max-width: min(96vw, 1100px); width: 100%;
  color: var(--auf-dunkel);
}
dialog.lupe::backdrop { background: rgba(12, 15, 17, .9); }
dialog.lupe .kasten { background: var(--schiefer-2); border: 1px solid var(--linie-hell); border-radius: var(--r); }
dialog.lupe .vergleich { aspect-ratio: 4 / 3; }
dialog.lupe .leiste {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px clamp(14px, 2vw, 22px);
}
dialog.lupe .leiste h3 { color: var(--sand); font-size: 1.1rem; margin-right: auto; }
dialog.lupe .zu { min-height: 44px; padding: 0 18px; }

/* =============================================================================
   8. Kostenschaetzer
   ========================================================================== */
.rechner {
  background: var(--papier); border: 1px solid var(--linie); border-radius: var(--r);
  overflow: hidden; max-width: 880px; margin-inline: auto;
  box-shadow: 0 40px 80px -60px rgba(20, 24, 27, .9);
}
.rechner-kopf {
  background: var(--schiefer); color: var(--sand);
  padding: 18px clamp(18px, 2.4vw, 30px); display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.rechner-kopf .titel { font-family: var(--cond); text-transform: uppercase; font-weight: 700; font-size: 1.15rem; }
.rechner-punkte { display: flex; gap: 7px; margin-left: auto; }
.rechner-punkte i {
  width: 30px; height: 5px; background: var(--schiefer-4); border-radius: 2px;
  transition: background .3s var(--ease);
}
.rechner-punkte i.aktiv { background: var(--signal); }
.rechner-punkte i.fertig { background: var(--zink); }

.rechner-buehne { position: relative; }
.schritt { padding: clamp(22px, 3vw, 38px); display: none; }
.schritt.da { display: block; animation: rein .42s var(--ease) both; }
@keyframes rein { from { opacity: 0; transform: translate3d(0, 16px, 0); } to { opacity: 1; transform: none; } }
.schritt > .frage {
  font-family: var(--cond); text-transform: uppercase; font-weight: 700;
  font-size: clamp(1.25rem, 2.2vw, 1.7rem); line-height: 1.02; margin-bottom: 6px;
}
.schritt > .frage + p { color: var(--text-2); font-size: .95rem; margin-bottom: 22px; }

.wahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.wahl label {
  position: relative; display: flex; flex-direction: column; gap: 5px;
  min-height: 92px; padding: 16px 18px; cursor: pointer;
  border: 2px solid var(--linie); border-radius: var(--r); background: #fff;
  transition: border-color .18s var(--ease), background .18s var(--ease), transform .09s var(--ease);
}
.wahl label:hover { border-color: var(--schiefer-4); }
.wahl label:active { transform: translateY(2px); }
.wahl input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.wahl label b { font-family: var(--cond); text-transform: uppercase; font-size: 1.1rem; }
.wahl label span { font-size: .85rem; color: var(--text-2); line-height: 1.4; }
.wahl input:checked + b { color: var(--signal); }
.wahl label:has(input:checked) { border-color: var(--signal); background: #fff6f1; }
.wahl label:has(input:focus-visible) { outline: 3px solid var(--signal-2); outline-offset: 2px; }

.regler-zeile { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 4px; }
.regler-wert {
  font-family: var(--cond); font-weight: 700; font-size: clamp(2.4rem, 6vw, 3.6rem);
  line-height: 1; color: var(--signal); font-variant-numeric: tabular-nums;
}
.regler-wert small { font-size: .38em; color: var(--text-2); margin-left: 4px; }

input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 46px;
  background: none; cursor: pointer; margin-top: 6px;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 10px; background: var(--sand-2); border-radius: 2px;
  border: 1px solid var(--linie);
}
input[type="range"]::-moz-range-track {
  height: 10px; background: var(--sand-2); border-radius: 2px; border: 1px solid var(--linie);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 34px; height: 34px; margin-top: -13px;
  background: var(--signal); border: 3px solid #fff; border-radius: 50%;
  box-shadow: 0 3px 10px -2px rgba(20, 24, 27, .6);
}
input[type="range"]::-moz-range-thumb {
  width: 30px; height: 30px; background: var(--signal); border: 3px solid #fff;
  border-radius: 50%; box-shadow: 0 3px 10px -2px rgba(20, 24, 27, .6);
}
.regler-skala {
  display: flex; justify-content: space-between;
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .1em;
  font-size: .7rem; color: var(--text-2);
}

/* Live-Vorschau der Flaeche als Dachfigur */
.flaeche-bild { margin-top: 24px; background: var(--sand); border: 1px solid var(--linie); border-radius: var(--r); padding: 16px; }
.flaeche-bild svg { width: 100%; height: auto; display: block; }
.flaeche-bild .dachflaeche { fill: var(--signal); opacity: .85; transition: none; }
.flaeche-bild text { font-family: var(--cond); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; fill: var(--text-2); }

.zusatz { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-top: 20px; }
.zusatz label {
  display: flex; align-items: center; gap: 13px; min-height: 62px; padding: 12px 16px;
  border: 2px solid var(--linie); border-radius: var(--r); background: #fff; cursor: pointer;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.zusatz label:has(input:checked) { border-color: var(--signal); background: #fff6f1; }
.zusatz input[type="checkbox"] { width: 24px; height: 24px; accent-color: var(--signal); flex: none; cursor: pointer; }
.zusatz .txt b { display: block; font-family: var(--cond); text-transform: uppercase; font-size: 1.02rem; }
.zusatz .txt span { font-size: .82rem; color: var(--text-2); }

.rechner-fuss {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
  padding: 0 clamp(22px, 3vw, 38px) clamp(22px, 3vw, 38px);
}
.rechner-fuss .zurueck { margin-right: auto; }

.ergebnis-zahl {
  font-family: var(--cond); font-weight: 700; line-height: .95;
  font-size: clamp(2rem, 5.6vw, 3.7rem); color: var(--schiefer);
  font-variant-numeric: tabular-nums; margin: 4px 0 6px;
}
.ergebnis-zahl span { color: var(--signal); }
.ergebnis-liste { list-style: none; margin: 20px 0 0; border-top: 1px solid var(--linie); }
.ergebnis-liste li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 11px 0; border-bottom: 1px solid var(--linie); font-size: .93rem;
}
.ergebnis-liste li b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ergebnis-liste li.summe { font-family: var(--cond); text-transform: uppercase; font-size: 1.05rem; }

.merker {
  margin-top: 22px; padding: 15px 18px; border-left: 4px solid var(--signal);
  background: var(--sand); font-size: .9rem; line-height: 1.55;
}
.merker b { font-family: var(--cond); text-transform: uppercase; letter-spacing: .06em; }

/* =============================================================================
   9. Ablauf
   ========================================================================== */
.ablauf { position: relative; display: grid; gap: 0; }
.ablauf::before {
  content: ""; position: absolute; left: 27px; top: 12px; bottom: 12px;
  width: 3px; background: var(--linie-hell);
}
.ablauf .fuellung {
  position: absolute; left: 27px; top: 12px; width: 3px; height: 0;
  background: var(--signal); transition: height .16s linear; z-index: 1;
}
.stufe { position: relative; display: flex; gap: clamp(18px, 2.4vw, 32px); padding-block: clamp(16px, 2vw, 26px); z-index: 2; }
.stufe .nr {
  flex: none; width: 56px; height: 56px; border-radius: 50%;
  background: var(--schiefer-2); border: 3px solid var(--schiefer-4);
  display: grid; place-items: center;
  font-family: var(--cond); font-weight: 700; font-size: 1.35rem; color: var(--auf-dunkel-2);
  transition: background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
}
.stufe.erreicht .nr { background: var(--signal); border-color: var(--signal); color: #fff; }
.stufe h3 { color: var(--sand); margin-bottom: 7px; }
.stufe p { color: var(--auf-dunkel-2); font-size: .97rem; max-width: 56ch; }
.stufe .dauer {
  display: inline-block; margin-top: 9px;
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .12em; font-size: .68rem;
  color: var(--signal-2); border: 1px solid var(--linie-hell); padding: 3px 9px; border-radius: var(--r);
}

/* =============================================================================
   10. Team
   ========================================================================== */
.team-bild { border-radius: var(--r); overflow: hidden; border: 1px solid var(--linie); }
.team-raster { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(22px, 3vw, 48px); align-items: center; }
.team-liste { list-style: none; display: grid; gap: 2px; }
.team-liste li {
  display: flex; align-items: baseline; gap: 14px; padding: 13px 0;
  border-bottom: 1px solid var(--linie);
}
.team-liste b { font-family: var(--cond); text-transform: uppercase; font-size: 1.08rem; flex: none; }
.team-liste span { color: var(--text-2); font-size: .9rem; margin-left: auto; text-align: right; }

/* =============================================================================
   11. Kundenstimmen
   ========================================================================== */
.stimmen { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.8vw, 24px); }
.stimme {
  background: var(--schiefer-2); border: 1px solid var(--linie-hell);
  border-radius: var(--r); padding: clamp(20px, 2.4vw, 30px);
  display: flex; flex-direction: column; gap: 16px;
}
.stimme .marke-bsp {
  align-self: flex-start;
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .16em; font-size: .62rem;
  color: var(--signal); border: 1px solid var(--signal); padding: 3px 8px; border-radius: var(--r);
}
.stimme blockquote { font-size: 1.02rem; color: var(--auf-dunkel); line-height: 1.62; }
.stimme blockquote::before { content: "\201E"; color: var(--signal); font-size: 2.2rem; line-height: 0; vertical-align: -.35em; margin-right: 2px; }
.stimme figcaption {
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--linie-hell);
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .08em; font-size: .8rem;
  color: var(--auf-dunkel-2);
}
.stimme figcaption b { color: var(--sand); }

/* =============================================================================
   12. Einsatzgebiet
   ========================================================================== */
.gebiet-raster { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(24px, 3.4vw, 56px); align-items: center; }
.karte { background: var(--schiefer-2); border: 1px solid var(--linie-hell); border-radius: var(--r); padding: clamp(14px, 2vw, 24px); }
.karte svg { width: 100%; height: auto; display: block; }
.karte .flaeche { fill: rgba(238, 90, 28, .09); stroke: var(--signal); stroke-width: 1.6; stroke-dasharray: 7 5; }
.karte .wasser { fill: rgba(143, 154, 162, .17); }
.karte .ort { fill: var(--zink-2); }
.karte .ort.mitte { fill: var(--signal); }
.karte text { font-family: var(--cond); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; fill: var(--auf-dunkel-2); }
.karte text.stark { fill: var(--sand); font-size: 14px; }
.karte .legende { fill: var(--auf-dunkel-2); font-size: 11px; letter-spacing: .14em; }
.gebiet-text p + p { margin-top: 15px; }
.gebiet-text .lead { color: var(--auf-dunkel); }
.gebiet-text p { color: var(--auf-dunkel-2); }

/* =============================================================================
   13. Fragen
   ========================================================================== */
.fragen { max-width: 900px; }
.frage-block { border-bottom: 1px solid var(--linie); }
.frage-block summary {
  list-style: none; cursor: pointer; padding: 22px 46px 22px 0; position: relative;
  font-family: var(--cond); text-transform: uppercase; font-weight: 700;
  font-size: clamp(1.05rem, 1.7vw, 1.32rem); line-height: 1.15;
}
.frage-block summary::-webkit-details-marker { display: none; }
.frage-block summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 15px; height: 3px;
  background: var(--signal); transition: transform .3s var(--ease);
}
.frage-block summary::before {
  content: ""; position: absolute; right: 12px; top: 50%; width: 3px; height: 15px;
  margin-top: -6px; background: var(--signal); transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.frage-block[open] summary::before { transform: rotate(90deg); opacity: 0; }
.frage-block .antwort { padding-bottom: 24px; color: var(--text-2); max-width: 72ch; }
.frage-block[open] .antwort { animation: rein .34s var(--ease) both; }

/* =============================================================================
   14. Kontakt
   ========================================================================== */
.kontakt-raster { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 3.4vw, 56px); align-items: start; }

.formular { display: grid; gap: 14px; }
.feld { display: grid; gap: 6px; }
.feld > label, .fieldset-titel {
  font-family: var(--cond); text-transform: uppercase; font-weight: 700;
  letter-spacing: .1em; font-size: .76rem; color: var(--auf-dunkel-2);
}
.feld input, .feld select, .feld textarea {
  font: inherit; font-size: 1rem; color: var(--sand);
  background: var(--schiefer-2); border: 2px solid var(--schiefer-4);
  border-radius: var(--r); padding: 14px 15px; min-height: 56px; width: 100%;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.feld textarea { min-height: 128px; resize: vertical; line-height: 1.55; }
.feld input:hover, .feld select:hover, .feld textarea:hover { border-color: var(--zink); }
.feld input:focus, .feld select:focus, .feld textarea:focus { border-color: var(--signal); outline: none; background: var(--schiefer-3); }
.feld input::placeholder, .feld textarea::placeholder { color: #7d878e; }
.feld-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.upload {
  display: flex; align-items: center; gap: 14px; min-height: 68px;
  border: 2px dashed var(--schiefer-4); border-radius: var(--r);
  padding: 12px 16px; cursor: pointer;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.upload:hover { border-color: var(--signal); background: var(--schiefer-2); }
.upload svg { width: 26px; height: 26px; flex: none; color: var(--signal); }
.upload b { display: block; font-family: var(--cond); text-transform: uppercase; font-size: .98rem; color: var(--sand); }
.upload span { font-size: .8rem; color: var(--auf-dunkel-2); }
.upload input { position: absolute; width: 1px; height: 1px; opacity: 0; }

.hinweis-kasten {
  border-left: 4px solid var(--signal); background: var(--schiefer-2);
  padding: 15px 18px; font-size: .89rem; color: var(--auf-dunkel-2); line-height: 1.55;
}
.hinweis-kasten b { color: var(--sand); font-family: var(--cond); text-transform: uppercase; letter-spacing: .06em; }

.kontakt-daten { display: grid; gap: 2px; }
.kontakt-daten .satz { padding: 17px 0; border-bottom: 1px solid var(--linie-hell); }
.kontakt-daten .satz:first-child { border-top: 1px solid var(--linie-hell); }
.kontakt-daten dt {
  font-family: var(--cond); text-transform: uppercase; font-weight: 700;
  letter-spacing: .12em; font-size: .72rem; color: var(--signal); margin-bottom: 5px;
}
.kontakt-daten dd { color: var(--sand); font-size: 1.04rem; }
.kontakt-daten dd small { display: block; color: var(--auf-dunkel-2); font-size: .82rem; margin-top: 3px; }
.kontakt-daten .nummer { font-family: var(--cond); font-size: 1.85rem; font-weight: 700; letter-spacing: .01em; }

/* Bestaetigung nach dem Absenden */
.gesendet {
  border: 2px solid var(--signal); border-radius: var(--r); padding: clamp(20px, 2.6vw, 32px);
  background: var(--schiefer-2); display: none;
}
.gesendet.da { display: block; animation: rein .4s var(--ease) both; }
.gesendet h3 { color: var(--sand); margin-bottom: 10px; }
.gesendet p { color: var(--auf-dunkel-2); }

/* =============================================================================
   15. Fusszeile
   ========================================================================== */
.fuss { background: #0f1214; color: var(--auf-dunkel-2); padding-block: clamp(40px, 5vw, 70px) 0; }
.fuss-oben { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: clamp(24px, 3vw, 50px); }
.fuss h4 {
  font-family: var(--cond); text-transform: uppercase; font-weight: 700;
  letter-spacing: .12em; font-size: .78rem; color: var(--signal); margin-bottom: 14px;
}
.fuss ul { list-style: none; display: grid; gap: 9px; }
.fuss a { text-decoration: none; transition: color .18s var(--ease); }
.fuss a:hover { color: var(--signal-2); }
.fuss .marke .name { color: var(--sand); }
.fuss-unten {
  margin-top: clamp(30px, 4vw, 52px); border-top: 1px solid var(--linie-hell);
  padding-block: 24px 100px; display: grid; gap: 14px;
}
.entwurf-hinweis {
  font-size: .88rem; line-height: 1.6; color: var(--auf-dunkel-2); max-width: 88ch;
  border-left: 3px solid var(--signal); padding-left: 15px;
}
.entwurf-hinweis a { color: var(--signal-2); font-weight: 600; }
.fuss-rechts { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: .84rem; }

/* =============================================================================
   16. Feste Daumenleiste auf dem Handy
   ========================================================================== */
.daumen {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 58;
  display: none; gap: 2px;
  background: var(--schiefer); border-top: 1px solid var(--linie-hell);
  padding-bottom: env(safe-area-inset-bottom, 0);
  transform: translateY(110%); transition: transform .4s var(--ease);
}
.daumen.da { transform: none; }
.daumen button, .daumen a {
  flex: 1; min-height: 60px; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--cond); text-transform: uppercase; font-weight: 700;
  font-size: 1.02rem; letter-spacing: .05em; text-decoration: none;
  transition: filter .15s var(--ease), transform .09s var(--ease);
}
.daumen button:active, .daumen a:active { transform: translateY(2px); }
.daumen .anruf   { background: var(--signal); color: #fff; }
.daumen .rueckruf{ background: var(--schiefer-3); color: var(--sand); }
.daumen svg { width: 19px; height: 19px; flex: none; }

/* Musterhinweis-Fenster */
dialog.muster {
  border: 2px solid var(--signal); border-radius: var(--r); padding: 0;
  background: var(--schiefer-2); color: var(--auf-dunkel);
  max-width: min(92vw, 460px); width: 100%;
}
dialog.muster::backdrop { background: rgba(12, 15, 17, .86); }
dialog.muster .inhalt { padding: clamp(22px, 3vw, 32px); }
dialog.muster h3 { color: var(--sand); margin-bottom: 12px; }
dialog.muster p { color: var(--auf-dunkel-2); font-size: .96rem; }
dialog.muster p + p { margin-top: 10px; }
dialog.muster .btn { margin-top: 22px; }
dialog[open] { animation: rein .26s var(--ease) both; }

/* =============================================================================
   17. Einblenden beim Scrollen
   ========================================================================== */
/* Nur wenn JS laeuft, darf etwas unsichtbar starten. Ohne Skript - oder wenn
   der IntersectionObserver nie meldet - steht die Seite vollstaendig da. */
html.js .rein { opacity: 0; transform: translate3d(0, 32px, 0); }
/* Spezifitaet muss html.js .rein schlagen, sonst blendet nichts ein. */
html.js .rein.sichtbar {
  opacity: 1; transform: none;
  transition: opacity .72s var(--ease), transform .72s var(--ease);
  transition-delay: var(--verzug, 0ms);
}

/* Hier stand content-visibility: auto. Bewusst wieder entfernt: der
   IntersectionObserver sieht nicht in einen uebersprungenen Teilbaum, die
   Reveals starten dadurch erst, wenn der Abschnitt schon im Bild steht, und
   die Dokumenthoehe stimmt nicht (Scrollbalken springt). Die Bilder tragen
   die Ladelast ohnehin ueber loading="lazy". Die Klasse bleibt als Haken
   fuer spaetere Messungen stehen. */
.spaet { contain: layout style; }

/* =============================================================================
   18. Unterseiten (Impressum, Datenschutz)
   ========================================================================== */
.rechtstext { max-width: 78ch; }
.rechtstext h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin: 40px 0 12px; }
.rechtstext h2:first-child { margin-top: 0; }
.rechtstext p, .rechtstext li { color: var(--text-2); }
.rechtstext p + p { margin-top: 12px; }
.rechtstext ul { margin: 12px 0 0 20px; display: grid; gap: 7px; }
.rechtstext address { font-style: normal; margin-top: 10px; line-height: 1.75; }
.muster-band {
  background: var(--ziegel); color: #fff; border-radius: var(--r);
  padding: 15px 20px; margin-bottom: 34px;
  font-family: var(--cond); text-transform: uppercase; font-weight: 700;
  letter-spacing: .07em; font-size: .95rem;
}

/* =============================================================================
   19. Haltepunkte
   ========================================================================== */
@media (max-width: 1200px) {
  .leistungen { grid-template-columns: repeat(2, 1fr); }
  .stimmen    { grid-template-columns: repeat(2, 1fr); }
  .fuss-oben  { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  :root { --h-header: 62px; }
  .nav, .kopf .btn { display: none; }
  .burger { display: block; flex: none; }

  /* Der Schriftzug darf den Menue-Knopf nicht aus der Zeile draengen. */
  .kopf .wrap { gap: 10px; }
  .marke { min-width: 0; overflow: hidden; }
  .marke svg { width: 26px; height: 26px; }
  .marke .name { font-size: 1.05rem; }
  .badge { font-size: .6rem; letter-spacing: .12em; padding: 3px 7px; }

  /* Umbrechen muss der .wrap, nicht der Header - der hat nur ein Kind. */
  .kopf.offen { align-items: stretch; }
  .kopf.offen .wrap {
    flex-wrap: wrap; align-content: flex-start; padding-block: 11px;
    max-height: calc(100svh - var(--l-notdienst)); overflow-y: auto;
  }
  .kopf.offen .marke, .kopf.offen .badge, .kopf.offen .burger { align-self: center; }
  .kopf.offen .nav {
    display: grid; width: 100%; order: 3; margin: 8px 0 0; padding: 10px 0 14px;
    border-top: 1px solid var(--linie-hell);
  }
  .kopf.offen .nav a { padding: 15px 4px; font-size: 1.1rem; }
  .kopf.offen .btn { display: inline-flex; width: 100%; order: 4; margin-bottom: 8px; }

  .team-raster, .gebiet-raster, .kontakt-raster { grid-template-columns: 1fr; }
  .stimmen { grid-template-columns: 1fr; }
  .daumen  { display: flex; }
  .fuss-unten { padding-bottom: 96px; }

  .beweis .wrap { grid-template-columns: 1fr 1fr; gap: 22px 0; }
  .beweis .zelle:nth-child(odd)  { border-left: none; padding-left: 0; }
  .beweis .zelle:nth-child(3), .beweis .zelle:nth-child(4) { border-top: 1px solid rgba(255,255,255,.3); padding-top: 22px; }

  /* Waagerechte Galerie wird zum Wischband - kein Scroll-Hijack auf dem Handy */
  .galerie-buehne { height: auto !important; }
  .galerie-klebe  { position: static; height: auto; padding-block: clamp(40px, 7vw, 80px); }
  .spur {
    transform: none !important;
    overflow-x: auto; scroll-snap-type: x mandatory;
    padding-block: 4px 18px; -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .projekt { scroll-snap-align: center; width: min(84vw, 420px); }
  .spur-leiste { display: none; }
}

@media (max-width: 768px) {
  body { font-size: 16px; }

  /* Die Vertrauensleiste stand absolut am Hero-Fuss und lag dort ueber den
     Schaltflaechen, sobald diese auf volle Breite umbrechen. Hochkant laeuft
     sie deshalb im Fluss mit. */
  .hero { display: block; padding-bottom: 0; }
  .hero .wrap { padding-bottom: clamp(28px, 6vw, 48px); }
  .hero-fuss { position: static; background: rgba(20, 24, 27, .8); }
  .hero-fuss .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }

  /* Hochkant reicht die Breite fuer die seitliche Maske nicht - das Motiv
     wandert nach unten, der Text bleibt oben auf der Dachlandschaft. */
  .lage-vorn {
    -webkit-mask-image: linear-gradient(180deg, transparent 8%, #000 42%, #000 100%);
            mask-image: linear-gradient(180deg, transparent 8%, #000 42%, #000 100%);
  }
  .lage-vorn::after {
    background: linear-gradient(0deg, rgba(20, 24, 27, .94) 6%, rgba(20, 24, 27, .5) 34%,
                                rgba(20, 24, 27, .12) 62%, rgba(20, 24, 27, .55) 100%);
  }
  .leistungen { grid-template-columns: 1fr; }
  .fuss-oben  { grid-template-columns: 1fr; }
  .feld-paar  { grid-template-columns: 1fr; }
  .hero-text  { max-width: none; }
  .hero-tasten .btn { flex: 1 1 100%; }

  /* Rechner auf dem Handy: jeder Schritt fuellt den Bildschirm */
  .schritt { min-height: 56svh; display: none; }
  .schritt.da { display: flex; flex-direction: column; }
  .rechner-fuss .btn { flex: 1 1 45%; }
}

@media (max-width: 600px) {
  /* Kurzfassung, damit die Leiste hoechstens zwei Zeilen braucht. Die
     tatsaechliche Hoehe misst main.js und schreibt sie nach --h-notdienst. */
  .notdienst .nd-lang { display: none; }
  .notdienst .nd-kurz { display: inline; }
}

@media (max-width: 480px) {
  :root { --h-notdienst: 40px; }
  .notdienst { font-size: .78rem; letter-spacing: .04em; padding-block: 8px; }
  .marke .name { font-size: .95rem; }
  .marke .name span { font-size: .54rem; letter-spacing: .18em; }
  .hero-fuss .wrap { grid-template-columns: 1fr; }
  .notdienst { font-size: .82rem; line-height: 1.35; }
  .beweis .wrap { grid-template-columns: 1fr 1fr; }
  .wahl { grid-template-columns: 1fr; }
  .projekt { width: 86vw; }
  .vergleich .griff { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
  .vergleich .griff::after { inset: -24px; }
}

/* =============================================================================
   20. Weniger Bewegung
   Die Seite schaltet nichts ab: Handwerk verkauft ueber Praesenz. Sie wird nur
   kuerzer, verzichtet auf Parallaxe und gibt das Scrollen nie ab.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html:not(.voll-bewegung) { scroll-behavior: auto; }
  html.js:not(.voll-bewegung) .rein.sichtbar { transition-duration: .3s; transition-delay: 0ms; }
  html.js:not(.voll-bewegung) .rein:not(.sichtbar) { transform: translate3d(0, 14px, 0); }
  html:not(.voll-bewegung) .hero-lage { transform: none !important; }
  html:not(.voll-bewegung) .laufband-spur { animation-duration: 90s; }

  /* Kein Scroll-Hijack: die Galerie wird zum normalen Wischband */
  html:not(.voll-bewegung) .galerie-buehne { height: auto !important; }
  html:not(.voll-bewegung) .galerie-klebe  { position: static; height: auto; padding-block: clamp(40px, 7vw, 80px); }
  html:not(.voll-bewegung) .spur {
    transform: none !important;
    overflow-x: auto; scroll-snap-type: x mandatory; padding-block: 4px 18px;
  }
  html:not(.voll-bewegung) .projekt { scroll-snap-align: center; }
  html:not(.voll-bewegung) .spur-leiste { display: none; }

  html:not(.voll-bewegung) .leistung:hover { transform: none; }
  html:not(.voll-bewegung) .notdienst, html:not(.voll-bewegung) .kopf, html:not(.voll-bewegung) .daumen { transition-duration: .2s; }
  html:not(.voll-bewegung) dialog[open], html:not(.voll-bewegung) .schritt.da, html:not(.voll-bewegung) .frage-block[open] .antwort { animation-duration: .2s; }
}

/* Erzwungene ruhige Fassung ueber ?bewegung=kurz - dieselben Regeln wie oben,
   nur ohne Abhaengigkeit von der Systemeinstellung. */
html.js.kurz-bewegung .rein.sichtbar { transition-duration: .3s; transition-delay: 0ms; }
html.kurz-bewegung .hero-lage { transform: none !important; }
html.kurz-bewegung .laufband-spur { animation-duration: 90s; }
html.kurz-bewegung .galerie-buehne { height: auto !important; }
html.kurz-bewegung .galerie-klebe { position: static; height: auto; padding-block: clamp(40px, 7vw, 80px); }
html.kurz-bewegung .spur {
  transform: none !important; overflow-x: auto; scroll-snap-type: x mandatory; padding-block: 4px 18px;
}
html.kurz-bewegung .projekt { scroll-snap-align: center; }
html.kurz-bewegung .spur-leiste { display: none; }