@font-face {
  font-family: "League Spartan";
  src: url("fonts/league-spartan-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --grund: #2b2b2b;
  --tief: #222222;
  --feld: #353535;
  --weiss: #f3f1ec;
  --grau: #ababab;
  --gold: #B08D69;
  --gold-hell: #c9a882;
  --beige: #ECDCBE;
  --pill-text: #1c1c1c;
  --linie: rgba(255, 255, 255, .06);
  --schiene: 130px;
  --kopfhoehe: 110px;
  /* Startbild und Kopfbilder der Unterseiten füllen den Bildschirm, alle anderen Abschnitte bleiben kompakt */
  --hero-h: 100svh;
  --innen: min(1120px, calc(100% - 2 * var(--rand)));
  --rand: max(16px, 4vw);
  --abstand: clamp(104px, 11vw, 168px);
  --kopf: "League Spartan", "Trebuchet MS", sans-serif;
  --text: Verdana, "DejaVu Sans", sans-serif;
  --sperr: .3em;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; overflow-x: clip; background: var(--grund); color: var(--weiss); font: 1rem/1.75 var(--text); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
h1, h2, h3 { font-family: var(--kopf); margin: 0; font-weight: 500; line-height: 1.2; }
p { margin: 0; }
ul, ol { list-style: none; margin: 0; padding: 0; }
a { color: inherit; }
address { font-style: normal; }
em { font-style: normal; color: var(--gold); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
::selection { background: var(--gold); color: var(--pill-text); }
.skip { position: absolute; left: 16px; top: -60px; background: var(--weiss); color: var(--pill-text); padding: 10px 16px; z-index: 200; }
.skip:focus { top: 12px; }

/* Senkrechte Rasterlinien im Hintergrund */
.linien { position: fixed; inset: 0 0 0 var(--schiene); display: grid; grid-template-columns: repeat(4, 1fr); pointer-events: none; z-index: 0; }
.linien span { border-left: 1px solid var(--linie); }
main, .fuss { position: relative; z-index: 1; }

/* Pill-Buttons wie in der Vorlage */
.pill {
  display: inline-flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 28px;
  border-radius: 999px; border: 1px solid var(--gold); background: var(--gold); color: var(--pill-text);
  font: 600 0.8125rem/1 var(--kopf); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.pill span { transition: transform .25s var(--ease); }
.pill:hover { background: var(--gold-hell); }
.pill:hover span { transform: translateX(4px); }
.pill:active { transform: translateY(1px); }
.pill-leer { background: transparent; color: var(--weiss); }
.pill-leer:hover { background: var(--gold); color: var(--pill-text); }

/* Kopf: dunkle Logo-Box links, Leiste rechts */
.kopf { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; height: var(--kopfhoehe); transition: height .3s var(--ease); }
.logo-box { width: var(--schiene); flex: none; background: var(--tief); display: grid; place-items: center; }
.logo-box img { width: 104px; }
.kopf-leiste { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 var(--rand) 0 40px; transition: background-color .3s var(--ease); }
.kopf.gescrollt { height: 84px; }
.kopf.gescrollt .kopf-leiste { background: var(--tief); }
.kopf-status { display: flex; align-items: center; gap: 10px; font: 500 0.8125rem/1 var(--kopf); letter-spacing: .14em; }
.kopf-status a { text-decoration: none; color: var(--weiss); }
.kopf-status a:hover { color: var(--gold); }
.status-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--grau); }
.offen .status-punkt { background: var(--gold); }
.nav ul { display: flex; gap: 36px; }
.nav a { white-space: nowrap; font: 500 0.8125rem/1 var(--kopf); letter-spacing: var(--sperr); text-transform: uppercase; text-decoration: none; color: var(--weiss); padding: 10px 0; display: inline-block; transition: color .2s var(--ease); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--gold); }
.nav-schalter { display: none; }

/* Linke Schiene mit Zähler, gehört zum Startbereich */
.schiene { position: absolute; top: var(--kopfhoehe); left: 0; width: var(--schiene); height: calc(var(--hero-h) - var(--kopfhoehe)); background: var(--tief); z-index: 2; display: flex; flex-direction: column; align-items: center; padding-top: 28px; gap: 28px; }
.zaehler { display: flex; align-items: flex-start; gap: 6px; font-family: var(--kopf); }
.zaehler-nr { font-size: 2.75rem; line-height: 1; color: var(--gold); font-weight: 400; }
.zaehler-ges { font-size: 0.8125rem; color: var(--grau); letter-spacing: .1em; padding-top: 4px; }
.kachel-pfeil { background: none; border: 0; color: var(--weiss); cursor: pointer; font: 500 0.8125rem/1 var(--kopf); letter-spacing: .25em; text-transform: uppercase; padding: 8px 4px; transition: color .2s var(--ease); }
.kachel-pfeil:hover { color: var(--gold); }
.schiene-linie { width: 1px; flex: 1; max-height: 120px; background: rgba(255,255,255,.18); }
.schiene-text { writing-mode: vertical-rl; transform: rotate(180deg); font: 500 0.8125rem/1 var(--kopf); letter-spacing: var(--sperr); text-transform: uppercase; color: var(--grau); padding-bottom: 32px; }

/* Startbereich: Bild-Slider mit rechtsbündigem, gesperrtem Titel */
.hero { position: relative; margin-left: var(--schiene); min-height: max(560px, var(--hero-h)); padding-top: var(--kopfhoehe); overflow: hidden; display: flex; align-items: flex-end; justify-content: flex-end; }
.hero-bilder img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s ease; }
.hero-bilder img.aktiv { opacity: 1; }
.hero::after { content: ""; position: absolute; inset: 0; background: rgba(24, 24, 24, .42); }
.hero-inhalt { position: relative; z-index: 1; text-align: right; padding: 0 var(--rand) 96px; max-width: 1240px; display: grid; justify-items: end; }
/* Überschrift trägt den Startbereich; Größe so begrenzt, dass „Innenausbau, Sanierung“ neben der Bildliste auf eine Zeile passt */
.hero h1 { font-size: clamp(2rem, min(4.2vw, calc((96vw - 560px) / 14.5)), 4.5rem); font-weight: 600; letter-spacing: .04em; line-height: 1.08; text-transform: uppercase; text-shadow: 0 2px 24px rgba(0, 0, 0, .35); }
.hero h1 span:last-child { color: var(--gold); }
.hero h1 span { display: block; }
.hero-leit { margin-top: 32px; font: 500 1.125rem/1.4 var(--kopf); color: var(--beige); letter-spacing: .04em; }
.hero-intro { margin-top: 10px; max-width: 46ch; color: var(--weiss); }
.hero-aktionen { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 14px; margin-top: 32px; }
.hero > .bildliste { order: -1; margin: 0 auto 96px 40px; }
/* Direkter Draht: Live-Erreichbarkeit und Telefonnummer, auch wenn die Kopfzeile sie ausblendet */
.erreichbar { display: flex; align-items: center; gap: 12px; margin-top: 26px; font: 500 1rem/1.3 var(--kopf); letter-spacing: .08em; color: var(--beige); }
.erreichbar .status-punkt { width: 10px; height: 10px; }
.erreichbar a { color: var(--weiss); font-weight: 600; font-size: 1.25rem; letter-spacing: .06em; text-decoration: none; }
.erreichbar a:hover { color: var(--gold); }

/* Bildliste: senkrecht, das aktive Bild steht oben, die Liste springt periodisch weiter */
.bildliste { --zeilen: 3; --zeile: 48px; position: relative; z-index: 1; flex: none; width: 320px; }
.bildliste-zaehler { display: flex; align-items: flex-start; gap: 6px; margin-bottom: 18px; font: 400 0.8125rem/1 var(--kopf); letter-spacing: .1em; color: var(--grau); }
.bildliste-zaehler span { font-size: 2.75rem; line-height: 1; color: var(--gold); margin-top: -4px; }
.bildliste-fenster { height: calc(var(--zeilen) * var(--zeile)); overflow: clip; border-left: 1px solid rgba(255, 255, 255, .22); }
.bildliste-spur { transition: transform .6s var(--ease); }
.bildliste li { height: var(--zeile); }
.bildliste button { position: relative; display: flex; align-items: center; gap: 16px; width: 100%; height: 100%; padding: 0 0 0 20px; background: none; border: 0; color: rgba(243, 241, 236, .55); font: 500 0.8125rem/1.2 var(--kopf); letter-spacing: .18em; text-transform: uppercase; text-align: left; cursor: pointer; transition: color .3s var(--ease); }
.bildliste button:hover { color: var(--weiss); }
.bildliste button:focus-visible { outline-offset: -2px; }
.bildliste button[aria-current] { color: var(--weiss); }
.bildliste button[aria-current]::before { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: var(--gold); transform-origin: top; }
.bl-nr { flex: none; min-width: 2ch; color: var(--grau); }
.bildliste button[aria-current] .bl-nr { color: var(--gold); }
.bl-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Abschnittstitel: gesperrt, zweites Wort in Gold */
section { position: relative; overflow-x: clip; }
.titel { text-align: center; font-size: clamp(1.375rem, 2.1vw, 1.875rem); letter-spacing: .32em; text-transform: uppercase; padding-left: .32em; font-weight: 500; }
.riesenwort { position: absolute; top: calc(var(--abstand) - .45em); left: 0; font: 800 clamp(5rem, 14vw, 13rem)/1 var(--kopf); color: rgba(255, 255, 255, .035); letter-spacing: -.02em; pointer-events: none; white-space: nowrap; user-select: none; }
.riesenwort.rechts { left: auto; right: 0; }

/* Über uns */
.ueber { padding: var(--abstand) 0 0 var(--schiene); }
.ueber-raster { width: var(--innen); margin: 88px auto 0; display: grid; grid-template-columns: 1.15fr .85fr 1fr; gap: 56px; align-items: start; }
.ueber-text h3 { font-size: 1.625rem; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; max-width: 16ch; }
.ueber-text p { margin-top: 24px; color: var(--grau); max-width: 62ch; }
.schwerpunkte h3 { font-size: 1.375rem; font-weight: 700; letter-spacing: -.01em; }
.schwerpunkte ul { margin-top: 28px; display: grid; gap: 26px; }
.schwerpunkte li { display: grid; gap: 10px; }
.schwerpunkte svg { width: 40px; height: 32px; fill: none; stroke: var(--gold); stroke-width: 1.4; }
.schwerpunkte span { font: 600 0.8125rem/1 var(--kopf); letter-spacing: .26em; text-transform: uppercase; }
.ueber-bild img { width: 100%; aspect-ratio: 1; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter .6s var(--ease); }
.ueber-bild:hover img { filter: none; }

/* Leistungen als Kachelreihe */
.leistungen { padding-top: var(--abstand); }
.kachel-rahmen { position: relative; margin-top: 72px; }
/* Kachelreihe: kein eigenes Scrollen oder Wischen, damit die Seite immer normal weiterscrollt; geblättert wird nur über die Knöpfe */
.kacheln { display: grid; grid-auto-flow: column; grid-auto-columns: 25%; overflow: hidden; touch-action: pan-y; }
.kachel { position: relative; display: block; height: clamp(380px, 31vw, 480px); overflow: hidden; color: var(--weiss); text-decoration: none; }
.kachel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.48) grayscale(.35); transform: scale(1.02); transition: filter .6s var(--ease), transform .8s var(--ease); }
.kachel:hover img, .kachel:focus-visible img { filter: brightness(.72) grayscale(0); transform: scale(1.06); }
.kachel-titel { position: absolute; top: 32px; left: 32px; right: 24px; font: 500 1rem/1.35 var(--kopf); letter-spacing: .14em; text-transform: uppercase; }
/* Leistungskacheln: der Name der Leistung trägt die Kachel */
.kachel .kachel-titel { font: 600 clamp(1.125rem, 1.45vw, 1.5rem)/1.2 var(--kopf); letter-spacing: .1em; }
.kachel-label { position: absolute; left: 30px; bottom: 32px; writing-mode: vertical-rl; transform: rotate(180deg); font: 500 0.8125rem/1 var(--kopf); letter-spacing: .4em; text-transform: uppercase; color: var(--beige); }
.kachel-knopf { position: absolute; top: 50%; left: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%; background: var(--gold); color: var(--pill-text); display: grid; place-items: center; font: 600 1.375rem/1 var(--kopf); opacity: 0; transform: scale(.7); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.kachel:hover .kachel-knopf, .kachel:focus-visible .kachel-knopf { opacity: 1; transform: none; }
.kachel-pfeil { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; }
.kachel-pfeil.zurueck { left: 28px; }
.kachel-pfeil.weiter { right: 28px; }
.kachel-pfeil[disabled] { opacity: 0; pointer-events: none; }

/* Große Zahl mit Bildfüllung */
.zahl { padding: var(--abstand) var(--rand) 0 calc(var(--schiene) + var(--rand)); }
.zahl-inhalt { display: flex; align-items: flex-end; justify-content: center; gap: 28px; }
.zahl-gross {
  font: 800 clamp(11rem, 24vw, 21rem)/.78 var(--kopf); letter-spacing: -.04em;
  background: url("img/g-prefa-garten.jpg") center 40% / cover; -webkit-background-clip: text; background-clip: text; color: transparent;
}
.zahl-text { display: grid; gap: 8px; padding-bottom: 12px; font-size: clamp(1rem, 1.5vw, 1.25rem); letter-spacing: .14em; text-transform: uppercase; line-height: 1.3; }
.zahl-text span { color: var(--weiss); }

/* Ablauf */
.ablauf { padding: var(--abstand) 0 0 var(--schiene); }
.schritte { width: var(--innen); margin: 80px auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.schritt-nr { display: block; font: 400 2.75rem/1 var(--kopf); color: var(--gold); }
.schritte h3 { margin-top: 22px; font-size: 0.9375rem; letter-spacing: .2em; text-transform: uppercase; }
.schritte p { margin-top: 12px; color: var(--grau); }
.mitte { text-align: center; margin-top: 80px; }

/* Kontakt mit dunklem Formular */
.kontakt { padding: var(--abstand) 0 var(--abstand) var(--schiene); }
.kontakt-raster { width: var(--innen); margin: 80px auto 0; display: grid; grid-template-columns: 1fr 2.2fr; gap: 56px; align-items: start; }
.kontakt-daten { display: grid; gap: 14px; color: var(--grau); }
.kontakt-daten > a:first-child { font: 500 1.5rem/1.2 var(--kopf); letter-spacing: .06em; color: var(--weiss); text-decoration: none; }
.kontakt-daten > a:first-child:hover { color: var(--gold); }
.unterstrichen { color: var(--weiss); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 5px; justify-self: start; }
.formular { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.feld { background: var(--feld); padding: 10px 14px 8px; display: grid; gap: 2px; border: 0; margin: 0; min-width: 0; }
.feld label, .feld legend { font: 500 0.8125rem/1.2 var(--kopf); color: var(--grau); letter-spacing: .04em; }
.feld input, .feld select, .feld[hidden] { display: none; }
.feld textarea { background: transparent; border: 0; color: var(--weiss); font: 0.9375rem/1.4 var(--text); padding: 4px 0; width: 100%; }
.feld select option { background: var(--feld); }
.feld:focus-within { outline: 2px solid var(--gold); outline-offset: -2px; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: none; }
.rueck { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; }
.rueck legend { float: left; width: 100%; padding: 0; }
.rueck label { display: inline-flex; align-items: center; gap: 8px; color: var(--weiss); font: 0.9375rem/1.4 var(--text); }
.rueck input, .einwilligung input { accent-color: var(--gold); width: 16px; height: 16px; margin: 0; }
.breit { grid-column: 1 / -1; }
.feld textarea { resize: vertical; min-height: 120px; }
.einwilligung { grid-column: 1 / -1; display: flex; gap: 10px; align-items: flex-start; color: var(--grau); font-size: 0.875rem; line-height: 1.5; padding-top: 6px; }
.einwilligung input { margin-top: 3px; flex: none; }
.formular-fuss { grid-column: 1 / -1; display: flex; justify-content: flex-end; align-items: center; gap: 20px; margin-top: 10px; }
.formular-meldung { color: var(--beige); font-size: 0.875rem; }
.feld.fehler { outline: 2px solid #d98b6a; outline-offset: -2px; }

/* Fußzeile */
.fuss { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 48px var(--rand) 48px calc(var(--schiene) + var(--rand)); background: var(--grund); flex-wrap: wrap; }
.fuss-logo img { width: 112px; }
.fuss ul { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.fuss nav a { font: 500 0.8125rem/1 var(--kopf); letter-spacing: .22em; text-transform: uppercase; text-decoration: none; color: var(--grau); }
.fuss nav a:hover { color: var(--gold); }
.fuss > p { font-size: 0.8125rem; color: var(--grau); }

/* Projektseite */
.galerie-einleitung { width: var(--innen); margin: 0 auto; padding: 72px 0 48px calc(var(--schiene) / 2); color: var(--grau); text-align: center; max-width: 62ch; }
.galerie { display: grid; grid-template-columns: repeat(4, 1fr); }
.galerie button { position: relative; display: block; width: 100%; height: clamp(320px, 30vw, 460px); padding: 0; border: 0; background: var(--tief); cursor: zoom-in; overflow: hidden; color: var(--weiss); text-align: left; }
.galerie img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.5) grayscale(.35); transition: filter .6s var(--ease), transform .8s var(--ease); }
.galerie button:hover img, .galerie button:focus-visible img { filter: brightness(.85) grayscale(0); transform: scale(1.05); }
.galerie button:hover .kachel-knopf, .galerie button:focus-visible .kachel-knopf { opacity: 1; transform: none; }
.galerie .kachel-knopf { font-size: 1.125rem; }
/* Galerie-Filter nach Leistung */
.filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: var(--innen); margin: 72px auto 40px; padding-left: calc(var(--schiene) / 2); }
.filter button { min-height: 40px; padding: 0 18px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; background: none; color: var(--weiss); font: 500 0.8125rem/1 var(--kopf); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: border-color .2s var(--ease), color .2s var(--ease); }
.filter button:hover { border-color: var(--gold); }
.filter button[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--pill-text); }
.galerie li[hidden] { display: none; }
.mehr { text-align: center; padding: 72px 0 0; }

/* Leistungsseiten */
/* Kopf der Unterseiten: Name links auf dunklem Grund, Bild rechts – klar anders als das Vollbild der Startseite */
.seitenkopf { position: relative; margin-left: var(--schiene); height: var(--hero-h); min-height: 560px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); background: var(--grund); }
.seitenkopf-text { container-type: inline-size; position: relative; z-index: 1; align-self: end; display: grid; justify-items: start; gap: 28px; padding: var(--kopfhoehe) clamp(32px, 5vw, 88px) clamp(56px, 11svh, 120px); }
/* Schriftgröße an der Textspalte: die längste Zeile (Gerüstverleih &) passt immer auf eine Zeile */
.seitenkopf h1 { font-size: clamp(1.75rem, 9.4cqi, 4.5rem); font-weight: 600; letter-spacing: .04em; line-height: 1.05; text-transform: uppercase; }
.seitenkopf h1 span { display: block; }
.seitenkopf h1 span:last-child { color: var(--gold); }
/* Längere Überschriften (Über uns, Kontakt): bis zu 20 Zeichen je Zeile */
.seitenkopf-lang h1 { font-size: clamp(1.625rem, 7.2cqi, 4rem); }
.seitenkopf-leit { max-width: 40ch; font-size: 1.125rem; line-height: 1.6; color: var(--weiss); }
.seitenkopf-aktionen { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
.seitenkopf-bild { position: relative; overflow: hidden; display: flex; align-items: flex-end; padding: 0 0 40px 40px; }
.seitenkopf-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.seitenkopf-bild::after { content: ""; position: absolute; inset: 0; background: rgba(24, 24, 24, .22); }
.seitenkopf .bildliste { --zeilen: 2; z-index: 2; }
.seitenkopf .bildliste-fenster { background: rgba(24, 24, 24, .55); }
.seitenkopf .bildliste-zaehler { display: none; }
.brotkrumen { font: 500 0.8125rem/1 var(--kopf); letter-spacing: .2em; text-transform: uppercase; color: var(--beige); }
.brotkrumen a { color: var(--weiss); text-decoration: none; }
.brotkrumen a:hover { color: var(--gold); }
.leistungs-raster { display: grid; grid-template-columns: repeat(3, 1fr); }
.leistungs-raster .kachel { height: clamp(380px, 32vw, 480px); }
.leistungs-raster .kachel img { filter: brightness(.4) grayscale(.35); }
/* Die drei Schwerpunkte laut Briefing: erste Reihe und Goldkante oben */
.leistungs-raster li:nth-child(-n+3) .kachel::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--gold); z-index: 1; }
.kachel-text { position: absolute; left: 32px; right: 32px; bottom: 32px; padding-left: 36px; font: 500 clamp(1.0625rem, 1.25vw, 1.25rem)/1.45 var(--kopf); color: var(--weiss); max-width: 30ch; }
.leistung { padding: var(--abstand) 0 0 var(--schiene); }
.leistung-aktion { margin-top: 36px; }
.lead-satz { font: 700 1.5rem/1.3 var(--kopf); letter-spacing: -.01em; color: var(--weiss); max-width: 24ch; }
.umfang { gap: 16px !important; }
.umfang li { display: flex; align-items: center; gap: 14px; font: 600 0.875rem/1.3 var(--kopf); letter-spacing: .16em; text-transform: uppercase; }
.umfang li::before { content: ""; width: 24px; height: 2px; background: var(--gold); flex: none; }
.einblicke { padding-top: var(--abstand); }
.einblicke .galerie { margin-top: 72px; }
.cta-band { margin-top: var(--abstand); padding: 120px var(--rand) 128px calc(var(--schiene) + var(--rand)); background: var(--tief); text-align: center; }
.cta-band .riesenwort { top: 40px; }
.cta-text { max-width: 60ch; margin: 36px auto 0; color: var(--grau); }
.cta-aktionen { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 40px; }
.cta-klein { margin-top: 28px; font-size: 0.875rem; color: var(--grau); }
.weitere { padding-bottom: var(--abstand); }

/* Über uns und Kontakt */
.fakten-bereich { padding: var(--abstand) 0 0 var(--schiene); }
.fakten { width: var(--innen); margin: 80px auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.fakten div { border-top: 2px solid var(--gold); padding-top: 20px; }
.fakten dt { font: 500 0.8125rem/1 var(--kopf); letter-spacing: .2em; text-transform: uppercase; color: var(--grau); }
.fakten dd { margin: 14px 0 0; font: 600 1.25rem/1.4 var(--kopf); color: var(--weiss); }
.kontakt-einleitung { max-width: 60ch; margin: 32px auto 0; text-align: center; color: var(--grau); padding: 0 var(--rand); }
.kontakt-daten .erreichbar { margin-top: 0; font-size: 0.9375rem; }
.kontakt-telefon { font: 600 1.75rem/1.2 var(--kopf); letter-spacing: .04em; color: var(--weiss); text-decoration: none; }
.kontakt-telefon:hover { color: var(--gold); }
.feld input[type="file"] { padding: 6px 0; font-size: 0.875rem; color: var(--grau); }
.feld input[type="file"]::file-selector-button { margin-right: 14px; padding: 8px 16px; border: 1px solid var(--gold); border-radius: 999px; background: transparent; color: var(--weiss); font: 500 0.8125rem/1 var(--kopf); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.feld small { font-size: 0.8125rem; color: var(--grau); }
.ablauf:last-child { padding-bottom: var(--abstand); }

/* Rechtsseiten: ruhige Lesespalte, offene Angaben sichtbar markiert */
.rechtsseite { width: min(760px, calc(100% - 2 * var(--rand))); margin: 0 auto; padding: calc(var(--kopfhoehe) + 72px) 0 var(--abstand) calc(var(--schiene) / 2); }
.rechtsseite h1 { font-size: clamp(2.25rem, 5vw, 4rem); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.entwurf-hinweis { margin-top: 32px; padding: 16px 20px; background: var(--feld); border-left: 3px solid var(--gold); font-size: 0.9375rem; color: var(--beige); }
.rechtsseite section { margin-top: 48px; }
.rechtsseite h2 { display: flex; align-items: center; gap: 14px; font: 600 0.9375rem/1.3 var(--kopf); letter-spacing: .16em; text-transform: uppercase; color: var(--weiss); }
.rechtsseite h2::before { content: ""; width: 24px; height: 2px; background: var(--gold); flex: none; }
.rechtsseite p { margin-top: 14px; color: var(--grau); line-height: 1.7; }
.rechtsseite a { color: var(--weiss); text-decoration-color: var(--gold); text-underline-offset: 4px; }
.fehlt { background: rgba(176, 141, 105, .16); color: var(--beige); border: 1px dashed var(--gold); padding: 1px 6px; font-size: 0.875em; }

/* Vollbildansicht */
.vollbild { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(18, 18, 18, .96); color: var(--weiss); }
.vollbild::backdrop { background: rgba(0, 0, 0, .6); }
.vollbild[open] { display: grid; grid-template-rows: 1fr auto; place-items: center; }
.vollbild figure { display: grid; place-items: center; width: 100%; height: 100%; padding: 72px 96px 0; }
.vollbild img { max-width: 100%; max-height: calc(100svh - 170px); object-fit: contain; }
.vollbild-leiste { display: flex; align-items: center; gap: 28px; padding: 22px 16px 28px; }
.vollbild-leiste p { font: 500 0.8125rem/1.3 var(--kopf); letter-spacing: .18em; text-transform: uppercase; color: var(--beige); min-width: 16ch; text-align: center; }
.vollbild-zu { position: absolute; top: 20px; right: 24px; }
.vollbild button { background: none; border: 0; color: var(--weiss); font: 500 0.8125rem/1 var(--kopf); letter-spacing: .25em; text-transform: uppercase; cursor: pointer; padding: 12px; }
.vollbild button:hover { color: var(--gold); }

/* Eintritt */
@media (prefers-reduced-motion: no-preference) {
  .js [data-ein] { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
  .js [data-ein].sichtbar { opacity: 1; transform: none; }
  .hero-bilder img.aktiv { animation: drift 9s ease-out both; }
  .bildliste button[aria-current]::before { animation: fortschritt 7s linear both; }
  .bildliste.pausiert button::before, .bildliste.neu button::before { animation: none; }
  @keyframes fortschritt { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  @keyframes drift { from { transform: scale(1.07); } to { transform: scale(1); } }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-bilder img { transition: none; }
}

/* Tablet */
@media (max-width: 1100px) {
  .nav ul { gap: 22px; }
  .kopf-status { display: none; }
  .ueber-raster { grid-template-columns: 1fr 1fr; }
  .ueber-bild { grid-column: 1 / -1; }
  .ueber-bild img { aspect-ratio: 16 / 9; }
  .ueber-text h3 { max-width: 24ch; }
  .kacheln { grid-auto-columns: 40%; }
  .schritte { grid-template-columns: 1fr 1fr; row-gap: 56px; }
  .fakten { grid-template-columns: 1fr 1fr; row-gap: 48px; }
  .kontakt-raster { grid-template-columns: 1fr; }
  .formular { grid-template-columns: 1fr 1fr; }
  .galerie { grid-template-columns: repeat(2, 1fr); }
  .leistungs-raster { grid-template-columns: 1fr 1fr; }
  .seitenkopf { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  /* Bildliste rückt unter den Text, damit die Überschrift ihre Breite behält */
  .hero { flex-direction: column; align-items: flex-end; justify-content: flex-end; }
  .hero-inhalt { padding-bottom: 36px; }
  .hero h1 { font-size: clamp(1.75rem, min(calc((92vw - 150px) / 14.5), 6svh), 3.75rem); }
  .hero > .bildliste { order: 0; align-self: flex-start; margin: 0 0 40px 40px; --zeilen: 2; }
  .hero .bildliste-zaehler { display: none; }
}

/* Kopfzeile: ab mittlerer Breite Menü statt Linkleiste */
@media (max-width: 1000px) {
  .kopf-leiste { justify-content: flex-end; gap: 12px; }
  .nav { order: 1; }
  .kopf-cta { order: 2; white-space: nowrap; }
  .nav-schalter { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; background: none; border: 0; color: var(--weiss); font: 500 0.8125rem/1 var(--kopf); letter-spacing: .25em; text-transform: uppercase; cursor: pointer; }
  .nav ul { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--tief); flex-direction: column; gap: 0; padding: 8px var(--rand) 24px; }
  .nav.offen ul { display: flex; }
  .nav ul a { font-size: 0.9375rem; padding: 14px 0; }
}

/* Telefon und schmale Tablets: Schiene klappt in den Startbereich */
@media (max-width: 860px) {
  :root { --schiene: 0px; --kopfhoehe: 68px; }
  .linien { grid-template-columns: repeat(2, 1fr); }
  .kopf.gescrollt { height: 68px; }
  .logo-box { width: 104px; }
  .logo-box img { width: 80px; }
  .kopf-leiste { padding: 0 var(--rand) 0 12px; gap: 8px; justify-content: flex-end; }
  .kopf-cta { min-height: 40px; padding: 0 16px; font-size: 0.8125rem; letter-spacing: .1em; white-space: nowrap; }
  .kopf-cta span { display: none; }
  .schiene { display: none; }
  .hero { min-height: 100svh; flex-direction: column; justify-content: flex-end; align-items: stretch; }
  .hero-inhalt { text-align: left; justify-items: start; padding-bottom: 36px; }
  .hero > .bildliste { order: 0; margin: 0 var(--rand) 28px; }
  .bildliste { --zeilen: 2; --zeile: 44px; width: auto; }
  .bildliste-zaehler { display: none; }
  .hero h1 { font-size: clamp(1.75rem, 8.4vw, 2.5rem); letter-spacing: .02em; }
  .erreichbar { margin-top: 20px; }
  .hero > .bildliste { --zeilen: 1; }
  .hero-aktionen { justify-content: flex-start; }
  .titel { letter-spacing: .2em; padding-left: .2em; }
  .ueber-text h3 { max-width: none; }
  .ueber-raster { grid-template-columns: 1fr; gap: 48px; margin-top: 56px; }
  .kacheln { grid-auto-columns: 78%; }
  .kachel { height: 420px; }
  /* Handy: Knöpfe unter der Reihe statt über den Bildern */
  .kachel-rahmen { display: grid; grid-template-columns: 1fr 1fr; }
  .kacheln { grid-column: 1 / -1; }
  .kachel-pfeil { position: static; transform: none; min-height: 48px; padding: 14px var(--rand); }
  .kachel-pfeil.zurueck { justify-self: start; }
  .kachel-pfeil.weiter { justify-self: end; }
  .kachel-pfeil[disabled] { opacity: .3; }
  .zahl { padding-left: var(--rand); }
  .zahl-inhalt { flex-direction: column; align-items: center; text-align: center; gap: 16px; }
  .schritte { grid-template-columns: 1fr; gap: 40px; margin-top: 56px; }
  .fakten { grid-template-columns: 1fr; gap: 28px; margin-top: 56px; }
  .kontakt-telefon { font-size: 1.5rem; }
  .formular { grid-template-columns: 1fr; }
  .formular-fuss { justify-content: space-between; flex-wrap: wrap; }
  .fuss { flex-direction: column; align-items: flex-start; }
  .galerie-einleitung { padding: 72px 0 48px; }
  .galerie { grid-template-columns: 1fr 1fr; }
  .galerie button { height: 300px; }
  .vollbild figure { padding: 64px 12px 0; }
  .seiten-schiene { display: none; }
  .lead-satz { font-size: 1.25rem; max-width: none; }
  .seitenkopf { height: auto; min-height: 100svh; grid-template-columns: 1fr; grid-template-rows: minmax(240px, 1fr) auto; }
  .seitenkopf-bild { order: -1; padding: 0 0 16px var(--rand); }
  .seitenkopf-text { padding: 28px var(--rand) 40px; gap: 18px; }
  .seitenkopf-leit { font-size: 1rem; }
  .seitenkopf .bildliste { --zeilen: 1; }
  .leistungs-raster { grid-template-columns: 1fr; }
  .leistungs-raster .kachel { height: 380px; }
  .cta-band { padding: 96px var(--rand); }
}
/* Niedrige Handys: Einleitungssatz weglassen, damit der Startbereich in den Bildschirm passt */
@media (max-width: 860px) and (max-height: 740px) {
  .hero-intro { display: none; }
}
@media (max-width: 480px) {
  .galerie { grid-template-columns: 1fr; }
  .galerie button { height: 380px; }
}