/* Denk und Werk – Seitenstile v1.0 (Referenzseite "Superlative").
   Mobile first, Breakpoints 40em / 64em / 80em. Werte aus tokens.css.
   Bewegung: Scroll-Animationen laufen nativ (animation-timeline) und fallen sonst auf IntersectionObserver (site.js) zurück.
   Mit prefers-reduced-motion: reduce steht alles statisch im Endzustand. */

/* ---------- Animierbare Fortschrittswerte (0 = Start, 1 = fertig; Standard 1 = sichtbar ohne Bewegung) ---------- */
@property --w { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --h { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --s { syntax: "<number>"; inherits: true; initial-value: 0; }

:root { color-scheme: light dark; }
/* ---------- Dunkelmodus (automatisch, geprüfte Kontraste; bewusst hier und nicht in tokens.css, damit der Admin-Bereich hell bleibt) ----------
   text 14.41 | text-leise 8.33 | link 9.44 | kante 5.66 (auf --bg), auf Flächen jeweils >= 4.84 */
@media (prefers-color-scheme: dark) {
  :root {
    --c-nacht:         #080F13;
    --c-nacht-flaeche: #121F26;
    --c-linie:         #2F4752;
    --bg:            #0F1C22;
    --bg-flaeche:    #172A33;
    --bg-eingabe:    #0F1C22;
    --text:          #ECEAE2;
    --text-leise:    #A9B6B9;
    --link:          #8EC5F2;
    --link-hover:    #BFE0FA;
    --btn-bg:        var(--c-gelb);
    --btn-text:      var(--c-tinte);
    --btn-bg-hover:  #FFFFFF;
    --kante:         #7F97A2;
    --fokus:         #8EC5F2;
    --stanz:         #000000;
    --fehler:        #FFA89E;
    --ok:            #8FE0A8;
    --tag-bg:        #223742;
    --tag-text:      #ECEAE2;
    --kopf-bg:       color-mix(in srgb, #0F1C22 88%, transparent);
    --sek-papier:    #0F1C22;
    --sek-flaeche:   #172A33;
    --sek-nacht:     #080F13;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf-h) + 1rem); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  position: relative; margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-text); font-size: var(--fs-0); font-weight: var(--fw-text);
  line-height: var(--lh-text); font-synthesis: none; -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
p { max-width: var(--mass); text-wrap: pretty; }
a { color: var(--link); text-decoration-thickness: 2px; text-underline-offset: 0.2em; transition: color var(--t-schnell) var(--ease); }
a:hover { color: var(--link-hover); }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; border-radius: var(--r-1); }
main:focus { outline: none; }
[hidden] { display: none !important; }
[id] { scroll-margin-top: calc(var(--kopf-h) + 1rem); }
h1, h2, h3 { font-family: var(--font-display); font-weight: var(--fw-display); letter-spacing: var(--ls-display); text-wrap: balance; }
h2 { font-size: var(--fs-4); line-height: var(--lh-eng); }
h3 { font-size: var(--fs-2); line-height: var(--lh-mittel); }
.lead { font-size: var(--fs-1); line-height: 1.4; }
.klein { font-size: var(--fs--1); color: var(--text-leise); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: calc(var(--breite) + 2 * var(--rand)); margin-inline: auto; padding-inline: var(--rand); }
.abschnitt { padding-block: var(--abschnitt); }
.abschnitt--flaeche { background: var(--sek-flaeche); }
.abschnitt__kopf { display: grid; gap: var(--sp-4); margin-bottom: var(--sp-7); }

.skip {
  position: absolute; left: var(--sp-4); top: -6rem; z-index: 50;
  background: var(--c-tinte); color: var(--c-papier); padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-2); font-weight: var(--fw-text-fett);
}
.skip:focus { top: var(--sp-4); color: var(--c-papier); outline-color: var(--c-gelb); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--touch-min); padding: var(--sp-3) var(--sp-5);
  background: var(--btn-bg); color: var(--btn-text); border: 2px solid var(--btn-bg); border-radius: var(--r-2);
  font-family: var(--font-text); font-weight: var(--fw-text-fett); font-size: var(--fs-0); line-height: 1.2;
  text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color var(--t-schnell) var(--ease), border-color var(--t-schnell) var(--ease), box-shadow var(--t-schnell) var(--ease), transform var(--t-schnell) var(--ease);
}
.btn:hover { background: var(--btn-bg-hover); border-color: var(--btn-bg-hover); color: var(--btn-text); box-shadow: var(--sh-versatz-klein); transform: translate(-1px, -1px); }
.btn:active { transform: translate(1px, 1px); box-shadow: none; transition-duration: 40ms; }
.btn--zweit { background: transparent; color: var(--link); border-color: var(--link); }
.btn--zweit:hover { background: var(--bg-flaeche); color: var(--link-hover); border-color: var(--link-hover); }
.btn--klein { padding: var(--sp-2) var(--sp-4); font-size: 1rem; }
.btn[aria-disabled="true"] { opacity: 0.7; cursor: progress; pointer-events: none; }

/* ---------- Kopfzeile (sticky, Blur) ---------- */
.kopf {
  z-index: 20; min-height: var(--kopf-h); display: flex; align-items: center;
  background: var(--kopf-bg);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  view-transition-name: kopf;
}
.kopf::after { content: ""; position: absolute; inset: auto 0 0 0; height: 2px; background: var(--linie); opacity: var(--s); pointer-events: none; }
@media (min-width: 64em) { .kopf { position: sticky; top: 0; } }
.js .kopf { position: sticky; top: 0; }
.kopf__in { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-4); }
.marke { display: block; line-height: 0; margin-right: auto; }
.marke img { width: 9.5rem; height: auto; transform-origin: left center; scale: calc(1 - 0.08 * var(--s)); }
.kopf__nav { order: 3; flex-basis: 100%; }
.nav__links { display: flex; flex-wrap: wrap; gap: 0 var(--sp-3); }
.nav__links a {
  position: relative; display: inline-flex; align-items: center; min-height: var(--touch-min);
  color: var(--text); font-weight: var(--fw-text-fett); font-size: 0.9375rem; text-decoration: none;
}
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.45rem; height: 2px; background: var(--link); transform: scaleX(0); transform-origin: left; transition: transform var(--t-mittel) var(--ease); }
.nav__links a:hover::after, .nav__links a[aria-current="true"]::after { transform: scaleX(1); }
.nav__links a:hover { color: var(--text); }
.kopf__zurueck { font-weight: var(--fw-text-fett); display: inline-flex; align-items: center; min-height: var(--touch-min); }
.menue { display: none; }

/* Mobile Navigation: nur mit JS eingeklappt, ohne JS bleibt sie als Zeile sichtbar */
@media (max-width: 63.99em) {
  .js .menue {
    display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--touch-min); padding: 0 var(--sp-4);
    background: transparent; color: var(--text); border: 2px solid var(--kante); border-radius: var(--r-2);
    font: inherit; font-weight: var(--fw-text-fett); font-size: 1rem; cursor: pointer;
  }
  .menue__icon { width: 1.125rem; height: 0.875rem; background:
    linear-gradient(var(--text), var(--text)) 0 0 / 100% 2px no-repeat,
    linear-gradient(var(--text), var(--text)) 0 50% / 100% 2px no-repeat,
    linear-gradient(var(--text), var(--text)) 0 100% / 100% 2px no-repeat; }
  .js .kopf__nav {
    position: absolute; left: 0; right: 0; top: 100%; order: 0; flex-basis: auto;
    background: var(--bg); border-bottom: 2px solid var(--linie); padding: var(--sp-2) var(--rand) var(--sp-5);
    visibility: hidden; opacity: 0; transform: translateY(-0.5rem);
    transition: opacity var(--t-mittel) var(--ease), transform var(--t-mittel) var(--ease), visibility 0s linear var(--t-mittel);
  }
  .js .kopf[data-offen] .kopf__nav { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .js .nav__links { flex-direction: column; max-width: var(--breite); margin-inline: auto; }
  .js .nav__links a { font-size: var(--fs-1); font-family: var(--font-display); }
}
.nav__kontakt { display: none; }
@media (max-width: 39.99em) { .js .kopf__kontakt { display: none; } .js .nav__kontakt { display: list-item; } }

/* ---------- Leiterbahn am Seitenrand (wächst mit dem Scrollen) ---------- */
:root { --bahn-x: max(9px, min(calc(max(var(--rand), (100% - var(--breite)) / 2) / 2), 5rem)); --spur: color-mix(in srgb, #7C8F96 45%, transparent); }
.bahn { position: absolute; z-index: 1; top: 0; bottom: 0; left: var(--bahn-x); width: 2px; pointer-events: none; container-type: size; background: var(--spur); }
.bahn__fuell { position: absolute; inset: 0; background: var(--c-bahn); transform-origin: top; transform: scaleY(var(--p, 1)); }
.bahn__kopf { display: none; position: absolute; top: 0; left: -6px; width: 14px; height: 14px; border-radius: 50%; background: var(--c-gelb); border: 2px solid var(--c-tinte); translate: 0 calc(var(--p, 0) * (100cqh - 14px)); }

/* Abschnittsknoten: Lötpunkt, der aufleuchtet, wenn die Bahn ankommt */
.sek { position: relative; }
.sek::before {
  content: ""; position: absolute; z-index: 2; left: calc(var(--bahn-x) + 1px - 8px);
  top: calc(var(--abschnitt) + var(--fs-4) * 0.56 - 8px); width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--text); background: color-mix(in srgb, var(--akzent) calc(var(--w) * 100%), var(--bg)); scale: calc(0.7 + 0.3 * var(--w));
}

/* ---------- Hero ---------- */
.hero { padding-block: var(--sp-6) var(--sp-7); }
.hero__in { display: grid; gap: var(--sp-7); }
.hero__text { translate: 0 calc(var(--h) * -1.5rem); }
.hero__titel { font-size: var(--fs-5); line-height: var(--lh-eng); }
.hero__titel span { display: block; }
.hero__lead { margin-top: var(--sp-5); max-width: 28ch; }
.hero__aktionen { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-4); margin-top: var(--sp-6); }
.hero__klein { margin-top: var(--sp-4); max-width: 40ch; }

.leiter {
  position: relative; width: 100%; max-width: 32rem; aspect-ratio: 6 / 5; border-radius: var(--r-2);
  background-image: var(--motiv-raster); background-size: var(--raster) var(--raster);
  background-position: calc(50% + var(--px, 0) * 6px) calc(50% + var(--py, 0) * 6px);
  translate: 0 calc(var(--h) * -3rem);
}
.leiter svg { width: 100%; height: 100%; overflow: visible; }
.ebene { translate: calc(var(--px, 0) * var(--tiefe) * 1px) calc(var(--py, 0) * var(--tiefe) * 1px); transition: translate 120ms linear; }
.ebene--1 { --tiefe: 8; }
.ebene--2 { --tiefe: 14; }
.ebene--3 { --tiefe: 24; }
.zug { stroke-dasharray: 1 1; }
.puls { fill: var(--c-gelb); stroke: var(--c-tinte); stroke-width: 2; }
.ring-nabe { stroke: var(--text); }
.mutter { fill: var(--c-gelb); stroke: var(--text); }
.knoten-fest { fill: var(--text); }
.knoten-gelb { fill: var(--c-gelb); stroke: var(--text); stroke-width: 3; }
.endquadrat { fill: var(--text); }
.spur-blau { stroke: var(--c-bahn); }
.spur-fein { stroke: var(--linie); }

/* ---------- Übergangsbänder Papier → Nacht ---------- */
.uebergang { position: relative; height: clamp(5rem, 11vw, 9rem); background: linear-gradient(to bottom, var(--von), var(--nach)); }
.uebergang::after {
  content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at center, var(--c-linie-nacht) 1px, transparent 1.5px); background-size: var(--raster) var(--raster);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000); mask-image: linear-gradient(to bottom, transparent, #000);
}
.uebergang--runter::after { -webkit-mask-image: linear-gradient(to bottom, #000, transparent); mask-image: linear-gradient(to bottom, #000, transparent); }
.u-flaeche-nacht { --von: var(--sek-flaeche); --nach: var(--sek-nacht); }
.u-nacht-papier  { --von: var(--sek-nacht); --nach: var(--sek-papier); }

/* ---------- Leistungen ---------- */
.kacheln { display: grid; gap: var(--sp-5); }
.kachel {
  position: relative; display: flex; flex-direction: column; gap: var(--sp-4);
  background: var(--bg-flaeche); border-radius: var(--r-2); padding: var(--sp-5); overflow: hidden;
  transition: box-shadow var(--t-mittel) var(--ease), transform var(--t-mittel) var(--ease);
}
.kachel::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--c-bahn); transform: scaleX(var(--w)); transform-origin: left; }
.kachel:hover, .kachel:focus-within { box-shadow: var(--sh-versatz); transform: translate(-2px, -2px); }
.kachel__icon { width: 2.5rem; height: 2.5rem; fill: none; stroke: var(--text); stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; }
.draw { stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - var(--w)); }
.kachel__sub { font-weight: var(--fw-text-fett); }
.kachel__text { font-size: 1rem; }
.punkte { display: grid; gap: var(--sp-2); font-size: 1rem; }
.punkte li { position: relative; padding-left: var(--sp-5); }
.punkte li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 8px; height: 8px; background: var(--c-bahn); }
.kachel__fuss { margin-top: auto; padding-top: var(--sp-4); border-top: 2px solid var(--linie); display: grid; gap: var(--sp-1); justify-items: start; }
.kachel__preis { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-1); line-height: var(--lh-mittel); }
.kachel__link { display: inline-flex; align-items: center; min-height: var(--touch-min); font-weight: var(--fw-text-fett); }
.hinweise { margin-top: var(--sp-6); display: grid; gap: var(--sp-1); }

/* ---------- So arbeite ich ---------- */
.schritte { position: relative; display: grid; gap: var(--sp-7); }
.schritte::before { content: ""; position: absolute; left: calc(1.25rem - 1px); top: 1.25rem; bottom: 0; width: var(--linie-d); background: var(--c-bahn); transform: scaleY(var(--w)); transform-origin: top; }
.schritt { position: relative; padding-left: 4rem; display: grid; gap: var(--sp-2); align-content: start; }
.schritt__nr {
  position: absolute; left: 0; top: 0; width: 2.5rem; height: 2.5rem; display: grid; place-items: center;
  border-radius: 50%; background: color-mix(in srgb, var(--c-gelb) calc(var(--w) * 100%), var(--bg-flaeche)); color: var(--c-tinte); border: 2px solid var(--text);
  font-family: var(--font-display); font-weight: var(--fw-display); font-size: 1.25rem; line-height: 1;
}
.schritt h3 { padding-top: 0.25rem; }
.schritt p { font-size: 1rem; }

.garantie {
  position: relative; margin-top: var(--sp-6); display: grid; gap: var(--sp-4);
  background: var(--c-gelb); color: var(--c-tinte); border-radius: var(--r-2);
  padding: var(--sp-6) var(--sp-5);
  box-shadow: calc(var(--w) * 4px) calc(var(--w) * 4px) 0 var(--c-tinte);
  transform: translate(calc((1 - var(--w)) * 3px), calc((1 - var(--w)) * 3px));
}
.garantie::before { content: ""; position: absolute; left: calc(1.25rem - 1px); top: calc(-1 * var(--sp-6)); width: var(--linie-d); height: var(--sp-6); background: var(--c-bahn); }
.garantie::after { content: ""; position: absolute; left: calc(1.25rem - 7px); top: -7px; width: 14px; height: 14px; background: var(--c-tinte); }
.garantie__titel { font-size: var(--fs-3); line-height: var(--lh-eng); }
.garantie p { font-size: var(--fs-1); line-height: 1.4; max-width: 40ch; }
.garantie a { color: var(--c-tinte); }

/* ---------- Offen und ehrlich (Nacht) ---------- */
.zusagen { display: grid; gap: var(--sp-6); }
.zusage { position: relative; padding-left: var(--sp-5); display: grid; gap: var(--sp-2); align-content: start; }
.zusage::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--linie-d); background: var(--link); transform: scaleY(var(--w)); transform-origin: top; }
.zusage h3 { font-size: var(--fs-1); }
.zusage p { font-size: 1rem; }

/* ---------- Projekte ---------- */
.projekte { display: grid; gap: var(--sp-5); }
.projekt {
  position: relative; background: var(--bg-flaeche); border-radius: var(--r-2); overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow var(--t-mittel) var(--ease), transform var(--t-mittel) var(--ease);
}
.projekt:hover { box-shadow: var(--sh-versatz); transform: translate(-2px, -2px); }
.projekt:has(a:focus-visible) { outline: 3px solid var(--fokus); outline-offset: 2px; }
.projekt__bild {
  aspect-ratio: 16 / 10; display: block; background-color: var(--bg);
  background-image: var(--motiv-raster); background-size: var(--raster) var(--raster); background-position: center;
}
.projekt__bild svg { width: 100%; height: 100%; }
.projekt__bild .teil { transition: translate var(--t-mittel) var(--ease); }
.projekt:hover .teil { translate: 0 -3px; }
.projekt__inhalt { padding: var(--sp-5); display: grid; gap: var(--sp-3); justify-items: start; align-content: start; flex: 1; }
.projekt__inhalt h3 { font-size: var(--fs-1); }
.projekt__inhalt p { font-size: 1rem; }
.tag { display: inline-block; background: var(--tag-bg); color: var(--tag-text); border-radius: var(--r-1); padding: 2px var(--sp-2); font-size: var(--fs--1); font-weight: var(--fw-text-fett); line-height: 1.5; }
.projekt__link { display: inline-flex; align-items: center; min-height: var(--touch-min); font-weight: var(--fw-text-fett); margin-top: auto; }
.projekt__link::after { content: ""; position: absolute; inset: 0; }
.projekt__link:focus-visible { outline: none; }
.projekte-zeile { margin-top: var(--sp-6); }
.l-ld { stroke: var(--text); fill: none; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; }
.l-blau { stroke: var(--c-bahn); fill: none; stroke-width: 3; stroke-linejoin: miter; }
.f-gelb { fill: var(--c-gelb); stroke: var(--text); stroke-width: 2; }
.f-flaeche { fill: var(--bg-flaeche); stroke: var(--text); stroke-width: 2; }
.f-text { fill: var(--text); }
.led { animation: none; }
.projekt:hover .led { animation: blinken 900ms steps(2, jump-none) infinite; }
@keyframes blinken { 50% { opacity: 0.25; } }

/* ---------- Wer dahintersteckt ---------- */
.ueber { display: grid; gap: var(--sp-6); }
.ueber__text { display: grid; gap: var(--sp-4); }
.ueber__einzel { border-left: var(--linie-d) solid var(--c-bahn); padding-left: var(--sp-4); }
.ueber__name { font-family: var(--font-display); font-weight: var(--fw-display-mittel); font-size: var(--fs-1); }

/* ---------- Kontakt ---------- */
.kontakt { padding-block: var(--abschnitt); }
.kontakt__in { display: grid; gap: var(--sp-7); }
.kontakt__kopf { display: grid; gap: var(--sp-4); align-content: start; }
.kontakt__zeilen { position: relative; display: grid; gap: var(--sp-4); margin-top: var(--sp-4); border-left: var(--linie-d) solid var(--linie); padding-left: var(--sp-6); }
.kontakt__zeile { position: relative; display: grid; gap: var(--sp-1); justify-items: start; }
.kontakt__zeile::before { content: ""; position: absolute; left: calc(-1 * var(--sp-6) - 6px); top: calc(var(--touch-min) / 2 - 5px); width: 10px; height: 10px; border-radius: 50%; background: var(--akzent); }
.kontakt__gross {
  display: inline-flex; align-items: center; min-height: var(--touch-min); overflow-wrap: anywhere;
  font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-2); line-height: var(--lh-mittel);
  color: var(--text); text-decoration: underline; text-decoration-color: var(--akzent); text-decoration-thickness: 3px; text-underline-offset: 0.25em;
  transition: text-decoration-thickness var(--t-schnell) var(--ease);
}
.kontakt__gross:hover { color: var(--text); text-decoration-thickness: 6px; }
.kontakt__ort { font-family: var(--font-display); font-weight: var(--fw-display-mittel); font-size: var(--fs-1); }

/* Formular */
.formular { position: relative; background: var(--bg-flaeche); border: 2px solid var(--linie); border-radius: var(--r-2); padding: var(--sp-5); }
.formular__felder { display: grid; gap: var(--sp-5); }
.feld { display: grid; gap: var(--sp-1); }
.feld label, .feld .label { font-weight: var(--fw-text-fett); font-size: 1rem; }
.feld .hilfe { font-weight: var(--fw-text); color: var(--text-leise); }
.eingabe {
  width: 100%; min-height: 3rem; padding: var(--sp-3) var(--sp-4); background: var(--bg-eingabe); color: var(--text);
  border: 2px solid var(--kante); border-radius: var(--r-1); font: inherit; font-size: 1rem; line-height: 1.4;
  transition: border-color var(--t-schnell) var(--ease), box-shadow var(--t-schnell) var(--ease);
}
select.eingabe { appearance: none; -webkit-appearance: none; padding-right: 2.75rem; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--text) 50%), linear-gradient(135deg, var(--text) 50%, transparent 50%);
  background-position: calc(100% - 1.4rem) 50%, calc(100% - 1.05rem) 50%; background-size: 0.45rem 0.45rem; background-repeat: no-repeat; }
textarea.eingabe { min-height: 9rem; resize: vertical; }
.eingabe:hover { border-color: var(--text); }
.eingabe:focus { border-color: var(--akzent); box-shadow: 0 0 0 3px var(--bg-flaeche), 0 0 0 6px var(--fokus); outline: none; }
.eingabe[aria-invalid="true"] { border-color: var(--fehler); }
.zaehler { justify-self: end; font-size: var(--fs--1); color: var(--text-leise); font-variant-numeric: tabular-nums; }
.zaehler[data-knapp] { color: var(--fehler); font-weight: var(--fw-text-fett); }
.fehlertext { display: flex; gap: var(--sp-2); align-items: flex-start; color: var(--fehler); font-size: 1rem; font-weight: var(--fw-text-fett); max-width: none; }
.fehlertext[hidden] { display: none; }
.fehlertext::before { content: "!"; flex: none; display: grid; place-items: center; width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; border-radius: 50%; background: var(--fehler); color: var(--bg-flaeche); font-size: 0.8125rem; line-height: 1; }
.haken { position: relative; display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3); align-items: start; }
.haken input { appearance: none; -webkit-appearance: none; width: 1.75rem; height: 1.75rem; margin: 0.1rem 0 0; background: var(--bg-eingabe); border: 2px solid var(--kante); border-radius: var(--r-1); cursor: pointer; display: grid; place-items: center; transition: background-color var(--t-schnell) var(--ease), border-color var(--t-schnell) var(--ease); }
.haken input::after { content: ""; width: 0.9rem; height: 0.5rem; border-left: 3px solid var(--c-tinte); border-bottom: 3px solid var(--c-tinte); rotate: -45deg; translate: 0 -2px; scale: 0; transition: scale var(--t-schnell) var(--ease-stanz); }
.haken input:checked { background: var(--akzent); border-color: var(--akzent); }
.haken input:checked::after { scale: 1; }
.haken input:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; }
.haken input[aria-invalid="true"] { border-color: var(--fehler); }
.haken label { font-weight: var(--fw-text); font-size: 1rem; cursor: pointer; padding-block: 0.1rem; }
.haken .fehlertext { grid-column: 1 / -1; }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.formular__fuss { display: grid; gap: var(--sp-4); justify-items: start; }
.formular__fuss .btn { width: 100%; }

.status {
  display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows var(--t-mittel) var(--ease), opacity var(--t-mittel) var(--ease);
}
.status > div { overflow: hidden; }
.status[data-art] { grid-template-rows: 1fr; opacity: 1; margin-top: var(--sp-2); }
.status__box { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-4); border-radius: var(--r-2); border: 2px solid var(--linie); background: var(--bg); font-size: 1rem; line-height: 1.45; }
.status__box p { max-width: none; }
.status__icon { flex: none; width: 1.75rem; height: 1.75rem; }
.status__icon * { fill: none; stroke: var(--text); stroke-width: 3; stroke-linecap: square; stroke-linejoin: miter; }
.status[data-art="ok"] .status__box { border-color: var(--ok); }
.status[data-art="ok"] .status__icon * { stroke: var(--ok); stroke-dasharray: 1 1; animation: zeichnen 600ms var(--ease) backwards; }
.status[data-art="fehler"] .status__box, .status[data-art="offline"] .status__box { border-color: var(--fehler); }
.status[data-art="fehler"] .status__icon *, .status[data-art="offline"] .status__icon * { stroke: var(--fehler); }
.status[data-art="lade"] .status__icon circle { stroke-dasharray: 20 60; transform-box: fill-box; transform-origin: center; animation: drehen 900ms linear infinite; }
.status:focus { outline: none; }
.status:focus-visible .status__box { outline: 3px solid var(--fokus); outline-offset: 2px; }
@keyframes drehen { to { rotate: 360deg; } }
@keyframes zeichnen { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.formular__neu { margin-top: var(--sp-3); }
.kontakt__datenschutz { max-width: 46ch; }

/* ---------- Footer ---------- */
.fuss { padding-block: var(--sp-7); border-top: 2px solid var(--linie); font-size: var(--fs--1); }
.fuss__in { display: grid; gap: var(--sp-5); justify-items: start; }
.fuss__marke img { width: 10rem; height: auto; }
.fuss a { color: var(--text); }
.fuss a:hover { color: var(--link); }
.fuss__links { display: flex; flex-direction: column; }
.fuss__links a { display: inline-flex; align-items: center; min-height: var(--touch-min); }
.fuss p { max-width: none; color: var(--text-leise); }
.fuss__ort { color: var(--text); }
.fuss__klein { grid-column: 1 / -1; display: grid; gap: var(--sp-1); }

/* ---------- Datenschutz-Hinweis (lokal gebaut, nichts abzulehnen) ---------- */
.hinweis {
  position: fixed; z-index: 30; left: var(--sp-4); right: var(--sp-4); bottom: var(--sp-4); max-width: 27rem;
  display: grid; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-radius: var(--r-2);
  background: var(--c-tinte); color: var(--c-papier); box-shadow: 4px 4px 0 var(--c-gelb);
  view-transition-name: hinweis;
}
.hinweis[hidden] { display: none; }
.hinweis p { max-width: none; font-size: 0.9375rem; line-height: 1.5; }
.hinweis__knoepfe { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); }
.hinweis .btn { --btn-bg: var(--c-gelb); --btn-text: var(--c-tinte); --btn-bg-hover: var(--c-papier); --stanz: var(--c-gelb); min-height: var(--touch-min); padding: var(--sp-2) var(--sp-4); font-size: 1rem; }
.hinweis .btn--zweit { background: transparent; color: var(--c-papier); border-color: var(--c-papier); }
.hinweis .btn--zweit:hover { background: var(--c-papier); color: var(--c-tinte); }
.hinweis :focus-visible { outline-color: var(--c-gelb); }
@media (prefers-reduced-motion: no-preference) {
  .hinweis { transition: opacity var(--t-lang) var(--ease), translate var(--t-lang) var(--ease-stanz); }
  .hinweis:not(.sichtbar) { opacity: 0; translate: 0 1.5rem; }
}

/* ---------- Rechtsseiten, Meldungsseiten ---------- */
.legal { padding-block: var(--sp-7) var(--abschnitt); max-width: calc(var(--breite-text) + 2 * var(--rand)); overflow-wrap: anywhere; }
.legal h1 { font-size: var(--fs-4); line-height: var(--lh-eng); }
.legal h2 { font-size: var(--fs-1); line-height: var(--lh-mittel); margin-top: var(--sp-6); }
.legal p, .legal ul, .legal address { margin-top: var(--sp-4); font-style: normal; }
.legal ul { list-style: disc; padding-left: var(--sp-5); display: grid; gap: var(--sp-2); }
.entwurf { margin-top: var(--sp-5); background: var(--bg-flaeche); color: var(--text); border-left: 4px solid var(--text); border-radius: var(--r-2); padding: var(--sp-4) var(--sp-5); font-weight: var(--fw-text-fett); }
.seite-fehler { padding-block: var(--abschnitt); display: grid; gap: var(--sp-5); justify-items: start; }
.seite-fehler__aktionen { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-4); }
.meldung-icon { width: 5rem; height: 5rem; }
.meldung-icon * { fill: none; stroke: var(--text); stroke-width: 4; stroke-linecap: square; stroke-linejoin: miter; }
.meldung-icon .gelb { stroke: none; fill: var(--c-gelb); }

/* ---------- Breakpoint m: ab 40em ---------- */
@media (min-width: 40em) {
  .kacheln, .projekte, .zusagen { grid-template-columns: repeat(2, 1fr); }
  .kacheln > :last-child, .projekte > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .kachel { padding: var(--sp-6); }
  .nav__links { gap: 0 var(--sp-5); }
  .nav__links a { font-size: var(--fs-0); }
  .fuss__in { grid-template-columns: 1fr auto; align-items: start; }
  .formular { padding: var(--sp-6); }
  .formular__fuss .btn { width: auto; }
  .hinweis { left: var(--sp-5); bottom: var(--sp-5); right: auto; }
}

/* ---------- Breakpoint l: ab 64em ---------- */
@media (min-width: 64em) {
  .kopf__nav { order: 2; flex-basis: auto; }
  .kopf__kontakt { order: 3; }
  .marke img { width: 10.5rem; }
  .hero { padding-top: var(--sp-8); }
  .hero__in { grid-template-columns: 7fr 5fr; align-items: center; }
  .hero__lead { max-width: 24ch; }
  .kacheln { grid-template-columns: repeat(3, 1fr); }
  .kacheln > :last-child { grid-column: auto; }
  .projekte { grid-template-columns: repeat(2, 1fr); }
  .projekte > :last-child:nth-child(odd) { grid-column: auto; }
  .zusagen { grid-template-columns: repeat(2, 1fr); gap: var(--sp-7) var(--sp-8); }
  .schritte { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
  .schritte::before { left: 1.25rem; right: 0; top: calc(1.25rem - 1px); bottom: auto; width: auto; height: var(--linie-d); transform: scaleX(var(--w)); transform-origin: left; }
  .schritte::after { content: ""; position: absolute; right: 0; top: calc(1.25rem - 7px); width: 14px; height: 14px; background: var(--text); }
  .schritt { padding-left: 0; padding-top: 4rem; }
  .schritt h3 { padding-top: 0; }
  .garantie { grid-template-columns: 1fr 1fr; align-items: center; gap: var(--sp-7); padding: var(--sp-7); margin-top: var(--sp-7); }
  .garantie::before, .garantie::after { display: none; }
  .ueber { grid-template-columns: 5fr 7fr; gap: var(--sp-8); }
  .kontakt__in { grid-template-columns: 5fr 6fr; gap: var(--sp-8); align-items: start; }
  .fuss__in { grid-template-columns: 1fr auto 1fr; align-items: center; }
  .fuss__links { flex-direction: row; gap: var(--sp-5); justify-self: end; }
  .fuss__ort { justify-self: center; }
}
@media (min-width: 80em) {
  .hero { padding-top: var(--sp-9); }
  .kachel { padding: var(--sp-7) var(--sp-6); }
}

/* ---------- Scroll-Dramaturgie (nativ) ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .vt, .sek { animation: w-auf linear both; animation-timeline: view(); animation-range: entry 5% cover 40%; }
    .sek { animation-range: cover 20% cover 45%; }
    .schritte { animation-range: entry 10% cover 55%; }
    .hero__text, .leiter { animation: h-weg linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
    .kopf { animation: s-auf linear both; animation-timeline: scroll(root block); animation-range: 0 140px; }
    .bahn__fuell { animation: bahn-f linear both; animation-timeline: scroll(root block); }
    .bahn__kopf { display: block; animation: bahn-k linear both; animation-timeline: scroll(root block); }
    @keyframes w-auf { from { --w: 0; } to { --w: 1; } }
    @keyframes h-weg { from { --h: 0; } to { --h: 1; } }
    @keyframes s-auf { from { --s: 0; } to { --s: 1; } }
    @keyframes bahn-f { from { transform: scaleY(0); } to { transform: scaleY(1); } }
    @keyframes bahn-k { from { translate: 0 0; } to { translate: 0 calc(100cqh - 14px); } }
  }
}

/* ---------- Scroll-Dramaturgie (Fallback ohne animation-timeline, gesteuert von site.js) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .ohne-tl .vt, .ohne-tl .sek { --w: 0; transition: --w 800ms var(--ease); }
  .ohne-tl .vt.an, .ohne-tl .sek.an { --w: 1; }
  .ohne-tl .kopf { transition: --s 200ms linear; }
  .ohne-tl .kopf.ist-gescrollt { --s: 1; }
  .ohne-tl .bahn__kopf { display: block; }
  .ohne-tl .bahn__fuell, .ohne-tl .bahn__kopf { transition: none; }
}

/* ---------- Einmalige Inszenierung beim Laden ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero__titel span { animation: zeile 700ms var(--ease) backwards; }
  .hero__titel span:nth-child(2) { animation-delay: 120ms; }
  .zug { animation: zeichnen 900ms var(--ease) backwards; }
  .zug--2 { animation-delay: 500ms; }
  .zug--3 { animation-delay: 800ms; }
  .ebene--3 .knoten-gelb, .ebene--3 .mutter { animation: pop 500ms var(--ease-stanz) 1100ms backwards; transform-box: fill-box; transform-origin: center; }
  @keyframes zeile { from { transform: translateY(0.35em); } }
  @keyframes pop { from { scale: 0; } }
  /* Seitenwechsel: Cross-document View Transitions (Chrome/Edge/Safari 18.2+); andere Browser wechseln einfach hart */
  @view-transition { navigation: auto; }
  ::view-transition-old(seite) { animation: 160ms ease-in both vt-aus; }
  ::view-transition-new(seite) { animation: 380ms var(--ease) both vt-ein; }
  @keyframes vt-aus { to { opacity: 0; transform: translateY(-8px); } }
  @keyframes vt-ein { from { opacity: 0; transform: translateY(14px); } }
}
main { view-transition-name: seite; }
@media (prefers-reduced-motion: reduce) {
  .puls { display: none; }
}