@import url("fonts.css");

/* ============================================================
   ZIMMEREI BRINKGERD — Holzbau und Dachdeckerei, Meppen

   Gestaltungsidee: das Massband.
   Eine Zimmerei verkauft Mass. Aufgemessen, abgebunden, beschriftet,
   montiert. Deshalb traegt die Seite ein Lineal: die Bauzeitachse ist
   kein Schmuckband mit 01/02/03, sondern ein echter Massstab — die
   Balken sind so breit, wie die Arbeit Werktage dauert. Der helle
   Teil eines Balkens ist Puffer, der satte ist fest eingeplant.

   Grundhaltung: dunkel, kuehl, Foto zuerst. Der Grund ist gruen-
   schwarz, nie braun — das unterscheidet uns von der Reifekammer
   des Steakhauses im Nachbarordner. Text tritt hinter die Bilder
   zurueck und sitzt entweder auf einer gerechneten Abdunkelung
   oder auf einer massiven Platte.

   Zwei Akzente mit Arbeitsteilung:
   LAERCHE     = Holz und Handlung. Knoepfe, Notdienst, gebaute Zeit.
   SAEGEBLATT  = Mass und Zahl. Teilstriche, Kennzahlen, Marken.
   ============================================================ */

/* --- Token ------------------------------------------------------
   Jede Farbe steht hier genau einmal. Alle Abstufungen entstehen
   per color-mix. Kontraste gemessen gegen --tannenschwarz.
   ---------------------------------------------------------------- */
:root {
  color-scheme: dark;

  --tannenschwarz: #101613;  /* Seitengrund, kuehl-gruen */
  --tiefe:         #0A0F0C;  /* abgesetzte Bloecke und Platten */
  --nebel:         #E8E6E0;  /* 14,4:1 — Lesetext */
  --rauch:         #98A29B;  /*  6,8:1 — leiser Text, haelt 4,5:1 */
  --laerche:       #D08A45;  /*  6,3:1 — Hauptakzent, Holz */
  --saegeblatt:    #8FA69B;  /*  6,9:1 — Masse, Zahlen, Teilstriche */

  --linie:       color-mix(in srgb, var(--nebel) 13%, transparent);
  --linie-hell:  color-mix(in srgb, var(--nebel) 26%, transparent);
  --flaeche:     color-mix(in srgb, var(--nebel) 4%, var(--tannenschwarz));
  --feld:        color-mix(in srgb, var(--tiefe) 72%, var(--tannenschwarz));
  --schleier:    color-mix(in srgb, var(--tannenschwarz) 46%, transparent);

  --display: "Bricolage Grotesque", "Arial Narrow", sans-serif;
  --lauf:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --breite: 74rem;
  --rand:  clamp(1.15rem, 5vw, 4rem);
  --luft:  clamp(3.75rem, 8vw, 7.5rem);
  --zeit:  320ms;
  --bogen: cubic-bezier(.2, .7, .3, 1);
}

/* --- Kurz-Reset -------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, p, ul, ol, li, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
:where(p, li, dd, dt, blockquote, address, figcaption) { overflow-wrap: break-word; }

/* --- Grundsatz --------------------------------------------------- */
body {
  background: var(--tannenschwarz);
  color: var(--nebel);
  font-family: var(--lauf);
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-x: hidden;
}
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.02; }
h1 { font-size: clamp(2.4rem, 8.4vw, 6rem); font-weight: 800; letter-spacing: -.035em; }
h2 { font-size: clamp(1.9rem, 5vw, 3.5rem); letter-spacing: -.03em; }
h3 { font-size: clamp(1.1rem, 2vw, 1.4rem); letter-spacing: -.015em; line-height: 1.15; }
b, strong { font-weight: 600; }
:target { scroll-margin-top: 6.5rem; }

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

/* Kleinschrift-Marke: kehrt an vielen Stellen wieder */
.oben {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--saegeblatt);
}
.oben--dunkel { color: var(--tiefe); opacity: .82; }

.sprung {
  position: absolute;
  left: -100vw;
  z-index: 20;
  padding: .9rem 1.4rem;
  background: var(--laerche);
  color: var(--tiefe);
  font-weight: 600;
  text-decoration: none;
}
.sprung:focus { left: .5rem; top: .5rem; }

/* --- Demoband (im Fluss, ueber dem Kopf) ------------------------- */
.demoband {
  padding: .7rem var(--rand);
  background: var(--tiefe);
  border-bottom: 1px solid var(--linie);
  color: var(--rauch);
  font-size: .82rem;
  text-align: center;
}
.demoband a { color: var(--laerche); text-underline-offset: 3px; }

/* --- Kopf -------------------------------------------------------- */
.kopf {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem clamp(1rem, 3vw, 2.5rem);
  padding: .7rem var(--rand);
  background: var(--tiefe);
  border-bottom: 1px solid var(--linie);
}
.marke { flex: 0 0 auto; text-decoration: none; line-height: 1.1; }
.marke__name {
  display: block;
  font-family: var(--display);
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -.03em;
}
.marke__zusatz {
  display: block;
  margin-top: .1rem;
  color: var(--rauch);
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.nav {
  flex: 1 1 12rem;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav__liste { display: flex; gap: .2rem; }
.nav__liste a {
  display: block;
  padding: .8rem .75rem;
  color: var(--nebel);
  font-size: .93rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color var(--zeit) var(--bogen), border-color var(--zeit) var(--bogen);
}
.nav__liste a:hover,
.nav__liste [aria-current] { color: var(--laerche); border-bottom-color: var(--laerche); }

.kopf__not {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 44px;
  padding: .35rem 1rem;
  background: var(--laerche);
  color: var(--tiefe);
  line-height: 1.15;
  text-decoration: none;
}
.kopf__not-wort { font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.kopf__not-nr { font-family: var(--display); font-size: 1.05rem; font-weight: 700; }

/* --- Knoepfe ----------------------------------------------------- */
.aktionen { display: flex; flex-wrap: wrap; gap: .75rem; }
.knopf {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: .65rem 1.6rem;
  border: 1px solid var(--linie-hell);
  color: var(--nebel);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--zeit) var(--bogen), color var(--zeit) var(--bogen);
}
.knopf:hover { background: var(--flaeche); }
.knopf--haupt {
  background: var(--laerche);
  border-color: var(--laerche);
  color: var(--tiefe);
}
.knopf--haupt:hover { background: color-mix(in srgb, var(--laerche) 84%, var(--nebel)); }

/* --- Hero: ganzflaechiges Foto ----------------------------------
   Die Abdunkelung ist gerechnet, nicht geschaetzt: 46 % Grundschleier
   plus ein Verlauf von unten. Unter der Ueberschrift liegen damit
   mindestens 78 % Deckung — selbst gegen einen reinweissen Bildpunkt
   ergibt Nebel dort 7,3:1, an der Augenbrauenzeile noch 5,6:1.
   ---------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: min(88vh, 54rem);
  padding-top: 6rem;
  isolation: isolate;
}
.hero__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.7) contrast(1.05);
  z-index: -2;
}
.hero__schleier {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top,
      var(--tannenschwarz) 0%,
      color-mix(in srgb, var(--tannenschwarz) 78%, transparent) 38%,
      color-mix(in srgb, var(--tannenschwarz) 42%, transparent) 66%,
      transparent 92%),
    var(--schleier);
}
.hero__text {
  width: 100%;
  max-width: var(--breite);
  margin: 0 auto;
  padding: 0 var(--rand) clamp(2rem, 5vw, 3.5rem);
}
.hero__titel { margin: .9rem 0 1.1rem; max-width: 16ch; }
.hero__satz {
  max-width: 46ch;
  margin-bottom: 1.9rem;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
}
.hero__zahlen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  max-width: var(--breite);
  margin: 0 auto;
  padding: 0 var(--rand);
  border-top: 1px solid var(--linie);
}
.hero__zahlen li {
  min-width: 0;
  padding: 1rem 0;
  border-bottom: 1px solid var(--linie);
}
.hero__zahlen b {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 700;
  color: var(--saegeblatt);
  letter-spacing: -.02em;
}
.hero__zahlen span { font-size: .8rem; color: var(--rauch); }

/* --- Notdienst: laut, direkt unter dem Hero ---------------------- */
.alarm { background: var(--laerche); color: var(--tiefe); }
.alarm__innen {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  max-width: var(--breite);
  margin: 0 auto;
  padding: clamp(2rem, 4.5vw, 3.25rem) var(--rand);
}
.alarm__wort { min-width: 0; }
.alarm__titel { margin: .5rem 0 .7rem; font-size: clamp(1.7rem, 4vw, 2.8rem); }
.alarm__text { max-width: 54ch; font-weight: 500; }
.alarm__ruf { min-width: 0; align-self: center; }
.alarm__nr {
  display: block;
  font-family: var(--display);
  font-size: clamp(2.1rem, 6vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
  text-decoration: none;
  border-bottom: 3px solid currentColor;
}
.alarm__zusatz {
  display: block;
  margin-top: .5rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* --- Abschnitte -------------------------------------------------- */
.teil { padding: var(--luft) var(--rand); }
.teil > * { max-width: var(--breite); margin-inline: auto; }
.teil--tief { background: var(--tiefe); }
.teil__kopf { margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.titel { margin: .7rem 0 0; max-width: 20ch; }
.vorlauf { max-width: 58ch; margin-top: 1.1rem; color: var(--rauch); }

/* --- Leistungen: Zeilen, keine Kaertchen ------------------------- */
.liste { border-top: 1px solid var(--linie); }
.liste__punkt {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .4rem 3rem;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--linie);
}
.liste__punkt p { color: var(--rauch); max-width: 62ch; min-width: 0; }
.liste__titel { min-width: 0; }

/* --- Bildband: Foto ueber die volle Breite, Platte darauf -------- */
.band { position: relative; }
.band__foto { width: 100%; height: clamp(15rem, 46vw, 32rem); object-fit: cover; }
.band__wort {
  display: block;
  max-width: var(--breite);
  margin: 0 auto;
  padding: 1.4rem clamp(1.15rem, 4vw, 2.5rem);
  background: var(--tiefe);
  border-left: 4px solid var(--laerche);
}
.band__gross {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.6vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -.02em;
}
.band__klein { display: block; margin-top: .25rem; color: var(--rauch); font-size: .93rem; }

/* --- Bauzeitachse: das Massband ---------------------------------
   Dreizehn Teilstriche, ein Werktag je Strich. Die Spur ist der
   Massstab, der Balken die Arbeit: satt = fest eingeplant,
   durchscheinend = Puffer bis zum spaetesten Termin.
   ---------------------------------------------------------------- */
.achse__lineal {
  display: flex;
  justify-content: space-between;
  padding-bottom: .5rem;
  color: var(--saegeblatt);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.achse__folge { border-top: 1px solid var(--linie-hell); }
.achse__stufe {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .3rem 2.5rem;
  padding: 1.5rem 0 1.7rem;
  border-bottom: 1px solid var(--linie);
}
.achse__titel { min-width: 0; }
.achse__dauer {
  min-width: 0;
  color: var(--saegeblatt);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.achse__text { min-width: 0; color: var(--rauch); max-width: 60ch; }
.achse__spur {
  position: relative;
  grid-column: 1 / -1;
  height: 2.5rem;
  margin: .7rem 0 .9rem;
  background-image: repeating-linear-gradient(to right,
    var(--linie-hell) 0 1px, transparent 1px 7.6923%);
  border-bottom: 1px solid var(--linie-hell);
}
.achse__balken {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--ab);
  width: var(--anteil);
  background: color-mix(in srgb, var(--laerche) 34%, transparent);
  border-left: 2px solid var(--laerche);
}
.achse__balken::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--sicher);
  background: var(--laerche);
}
.achse__spur--aufmass   { --ab: 0%;      --anteil: 7.692%;  --sicher: 100%; }
.achse__spur--abbund    { --ab: 7.692%;  --anteil: 61.538%; --sicher: 62.5%; }
.achse__spur--montage   { --ab: 69.231%; --anteil: 23.077%; --sicher: 66.667%; }
.achse__spur--richtfest { --ab: 92.308%; --anteil: 7.692%;  --sicher: 100%; }

.achse__summe {
  display: grid;
  gap: .3rem 1.5rem;
  padding-top: 1.5rem;
}
.achse__summe b {
  min-width: 0;
  font-family: var(--display);
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  font-weight: 800;
  color: var(--saegeblatt);
  letter-spacing: -.03em;
  line-height: 1;
}
.achse__summe span { min-width: 0; color: var(--rauch); max-width: 46ch; }

/* --- Vorher/Nachher ---------------------------------------------
   Ohne JavaScript stehen beide Fotos nebeneinander (Grundzustand).
   Erst mit .js werden sie uebereinandergelegt und der Regler
   schneidet das Nachher-Bild frei.
   ---------------------------------------------------------------- */
.schieber__buehne { display: grid; gap: .5rem; }
.schieber__bild { position: relative; margin: 0; min-width: 0; }
.schieber__bild img { width: 100%; height: clamp(14rem, 44vw, 30rem); object-fit: cover; }
.schieber__marke {
  position: absolute;
  bottom: .7rem;
  left: .7rem;
  padding: .35rem .8rem;
  background: var(--tiefe);
  color: var(--saegeblatt);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.schieber__marke--rechts { left: auto; right: .7rem; }
.schieber__eingabe { width: 100%; margin: .9rem 0 0; }
.schieber__hinweis { margin-top: .8rem; color: var(--rauch); font-size: .9rem; }
.schieber__stand {
  display: inline-block;
  margin: 0 .3rem;
  padding: 0 .5rem;
  background: var(--flaeche);
  color: var(--saegeblatt);
  font-weight: 600;
}
.js .schieber__buehne {
  position: relative;
  display: block;
  --teilung: 50%;
}
.js .schieber__bild--nachher {
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 0 var(--teilung));
}
.js .schieber__eingabe {
  position: relative;
  z-index: 2;
  margin-top: -1.55rem;
}

/* Sichtbarer Regler: Spur als Teilstrich, Griff als Holzklotz */
.schieber__eingabe {
  -webkit-appearance: none;
  appearance: none;
  height: 44px;
  background: transparent;
  cursor: ew-resize;
}
.schieber__eingabe::-webkit-slider-runnable-track {
  height: 4px;
  background: var(--saegeblatt);
}
.schieber__eingabe::-moz-range-track { height: 4px; background: var(--saegeblatt); }
.schieber__eingabe::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 44px;
  margin-top: -20px;
  background: var(--laerche);
  border: 2px solid var(--tiefe);
}
.schieber__eingabe::-moz-range-thumb {
  width: 26px;
  height: 44px;
  border-radius: 0;
  background: var(--laerche);
  border: 2px solid var(--tiefe);
}

/* --- Projekte: grosse Bilder ------------------------------------- */
.werke { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
.werk { min-width: 0; }
.werk__foto { width: 100%; height: clamp(13rem, 38vw, 26rem); object-fit: cover; }
.werk__ort {
  margin-top: 1.1rem;
  color: var(--saegeblatt);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.werk__titel { margin: .4rem 0 .6rem; }
.werk__text { color: var(--rauch); max-width: 46ch; }
.werk__zahl {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  margin-top: 1rem;
  padding-top: .8rem;
  border-top: 1px solid var(--linie);
}
.werk__zahl b {
  font-family: var(--display);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--laerche);
  letter-spacing: -.02em;
}
.werk__zahl span { color: var(--rauch); font-size: .85rem; }

/* --- Zwei Spalten (Betrieb, Kontakt) ----------------------------- */
.paar { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
.fliess, .mannschaft, .formular, .daten { min-width: 0; }
.fliess p { margin-bottom: 1.1rem; color: var(--rauch); max-width: 60ch; }
.belege { margin-top: 2rem; border-top: 1px solid var(--linie); }
.belege li { padding: .9rem 0; border-bottom: 1px solid var(--linie); }
.belege b { display: block; }
.belege span { display: block; color: var(--rauch); font-size: .88rem; }

.koepfe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.kopf-bild { min-width: 0; }
.kopf-bild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.kopf-bild figcaption {
  margin-top: .6rem;
  font-weight: 600;
  font-size: .92rem;
}
.kopf-bild span { display: block; color: var(--rauch); font-weight: 400; font-size: .82rem; }

.leute { margin-top: 1.8rem; border-top: 1px solid var(--linie); }
.leute li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 1rem;
  padding: .8rem 0;
  border-bottom: 1px solid var(--linie);
}
.leute b { min-width: 0; }
.leute em {
  min-width: 0;
  color: var(--saegeblatt);
  font-style: normal;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.leute span { grid-column: 1 / -1; min-width: 0; color: var(--rauch); font-size: .88rem; }

/* --- Stimmen ----------------------------------------------------- */
.stimmen { display: grid; gap: 1.5rem; }
.stimme {
  min-width: 0;
  padding: 1.6rem;
  background: var(--flaeche);
  border-top: 3px solid var(--saegeblatt);
}
.stimme blockquote {
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -.015em;
}
.stimme figcaption { margin-top: 1rem; color: var(--rauch); font-size: .84rem; }

/* --- Formular ---------------------------------------------------- */
.formular {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
}
.formular__hinweis {
  grid-column: 1 / -1;
  padding: .8rem 1rem;
  background: var(--flaeche);
  border-left: 3px solid var(--laerche);
  font-size: .88rem;
}
.feld { min-width: 0; display: flex; flex-direction: column; gap: .35rem; }
.feld--breit { grid-column: 1 / -1; }
.feld label { font-size: .84rem; font-weight: 600; letter-spacing: .04em; }
.feld small { color: var(--rauch); font-size: .78rem; }
.feld input, .feld select, .feld textarea {
  min-width: 0;
  min-height: 48px;
  padding: .6rem .8rem;
  background: var(--feld);
  border: 1px solid var(--linie-hell);
  border-radius: 0;
}
.feld textarea { min-height: 8rem; resize: vertical; }
.feld input:focus, .feld select:focus, .feld textarea:focus { border-color: var(--laerche); }

/* --- Adresse und Zeiten ------------------------------------------ */
.adresse { font-style: normal; line-height: 1.7; }
.adresse a { color: var(--laerche); text-underline-offset: 3px; }
.daten__titel { margin: 2rem 0 .7rem; }
.daten p { color: var(--rauch); max-width: 46ch; }
.zeiten { border-top: 1px solid var(--linie); }
.zeiten div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .2rem 1rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--linie);
}
.zeiten dt { min-width: 0; color: var(--rauch); }
.zeiten dd { min-width: 0; font-variant-numeric: tabular-nums; color: var(--saegeblatt); font-weight: 600; }

/* --- Fuss -------------------------------------------------------- */
.fuss {
  padding: var(--luft) var(--rand) 2.5rem;
  background: var(--tiefe);
  border-top: 1px solid var(--linie);
}
.fuss__raster {
  display: grid;
  gap: 2rem;
  max-width: var(--breite);
  margin: 0 auto;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--linie);
}
.fuss__raster > div { min-width: 0; }
.fuss__raster p { color: var(--rauch); font-size: .92rem; }
.fuss__marke {
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -.03em;
}
.fuss__titel { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--saegeblatt); }
.fuss__liste { margin-top: .7rem; }
.fuss__liste a { display: inline-block; padding: .5rem 0; color: var(--nebel); text-underline-offset: 3px; }
.fuss a { color: var(--laerche); }
.fuss__zeile {
  max-width: var(--breite);
  margin: 1.5rem auto 0;
  color: var(--rauch);
  font-size: .82rem;
}
.fuss__marke, .fuss__titel { color: var(--nebel); }
.fuss__titel { color: var(--saegeblatt); }

/* --- Bewegung: nur Einblenden -----------------------------------
   Der Startzustand steht ausschliesslich unter .js. Ohne Skript
   ist also nie etwas unsichtbar. Das Zeitschloss in main.js holt
   liegengebliebene Stuecke nach.
   ---------------------------------------------------------------- */
.js .zeig {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 420ms var(--bogen), transform 420ms var(--bogen);
}
.js .ist-sichtbar { opacity: 1; transform: none; }

/* --- Ab 46rem ---------------------------------------------------- */
@media (min-width: 46rem) {
  .hero__zahlen { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .liste__punkt { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); }
  .achse__stufe { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); }
  .achse__dauer { text-align: right; }
  .achse__summe { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
  .stimmen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fuss__raster { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .band__wort {
    position: relative;
    margin-top: -4.5rem;
    max-width: calc(var(--breite) - 8rem);
  }
}

/* --- Ab 62rem ---------------------------------------------------- */
@media (min-width: 62rem) {
  .alarm__innen { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: center; }
  .paar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .werke { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .werk--gross { grid-column: 1 / -1; }
  .werk--gross .werk__foto { height: clamp(20rem, 42vw, 34rem); }
  .werk--gross .werk__text { max-width: 62ch; }
  .achse__dauer { align-self: baseline; }
}

/* --- Bewegung abbestellt ----------------------------------------
   Endzustand sofort. JS legt bei reduce ohnehin keine Beobachter an.
   ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .js .zeig {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}