/* Dachbau Strunkhoff, Entwurf
   Palette nach dem Bergischen Dreiklang, Grün durch das Rot vom Bus ersetzt */
:root {
  --kalk: #EEF0EF;
  --papier: #F7F8F8;
  --zink: #D9DEDF;
  --schiefer: #23282C;
  --schiefer-2: #545C62;
  --nacht: #1E2327;
  --nacht-text: #E4E8E7;
  --nacht-leise: #A9B2B6;
  --dachrot: #8B1E24;   /* vorläufig, echte Werte aus dem Logo-PDF übernehmen */
  --dachrot-tief: #721820;


  --kurve-raus: cubic-bezier(.17, .94, .27, 1);
  --kurve-gleit: cubic-bezier(.72, 0, .21, 1);

  --nav-h: 72px;
  --gutter: max(clamp(16px, 4vw, 56px), env(safe-area-inset-left, 0px));
  --spalt: clamp(14px, 2vw, 28px);
  --abstand: clamp(80px, 10vw, 152px);

  /* Fasenbreite, je Bild überschrieben */
  --fb: clamp(52px, 11vw, 196px);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}
html:has(dialog[open]) { overflow: hidden; }

body {
  margin: 0;
  background: var(--kalk);
  color: var(--schiefer);
  font: 400 1.0625rem/1.6 "Switzer", "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: "ss01";
  hyphens: auto;
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }
img, video { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
a { color: inherit; }
h1, h2, h3, h4 {
  margin: 0;
  font-family: "Cabinet Grotesk", "Switzer", sans-serif;
  text-wrap: balance;
  hyphens: manual;
}
h2 {
  font-size: clamp(2rem, 1.25rem + 2.3vw, 3.3rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.022em;
}
h3 {
  font-size: clamp(1.2rem, 1.08rem + .45vw, 1.45rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.008em;
}
p { margin: 0; text-wrap: pretty; }

:focus-visible { outline: 2px solid var(--dachrot); outline-offset: 3px; }

.nur-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.sprung {
  position: absolute; left: 16px; top: -60px; z-index: 50;
  background: var(--schiefer); color: var(--kalk);
  padding: 10px 16px; text-decoration: none; border-radius: 2px;
}
.sprung:focus { top: 12px; }

/* Raster: Rand | 12 Spalten | Rand. Spaltenlinie n+1 = Beginn Spalte n */
.raster {
  display: grid;
  grid-template-columns: [rand-l] minmax(calc(var(--gutter) - var(--spalt)), 1fr) repeat(12, minmax(0, 86px)) minmax(calc(var(--gutter) - var(--spalt)), 1fr) [rand-r];
  column-gap: var(--spalt);
}
.raster > * { grid-column: 2 / 14; }

/* Signature: die Dachschräge in 38 Grad, immer oben links. Höhe = Breite * tan(38°) */
.fase {
  --fh: calc(var(--fb) * .7813);
  clip-path: polygon(var(--fb) 0, 100% 0, 100% 100%, 0 100%, 0 var(--fh));
}

/* Knöpfe */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 52px; padding: .8em 1.45em;
  border: 0; border-radius: 2px;
  background: var(--dachrot); color: #fff;
  font: 600 1rem/1.1 "Switzer", sans-serif; letter-spacing: .005em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
  transition: transform 140ms var(--kurve-raus), background-color 180ms ease, box-shadow 180ms ease;
}
.knopf:active { transform: scale(.97); }
.knopf i { font-size: .9em; }
.knopf--leise {
  background: transparent; color: var(--schiefer);
  box-shadow: inset 0 0 0 1.5px rgba(35, 40, 44, .3);
}
.knopf--klein { min-height: 42px; padding: .6em 1.1em; font-size: .9375rem; }
.knopf--gross { min-height: 64px; padding: .9em 1.6em; font-size: 1.125rem; }
.knopf-zusatz {
  margin-left: .5em; padding-left: .9em;
  box-shadow: inset 1.5px 0 0 rgba(255, 255, 255, .35);
  font-weight: 500; font-variant-numeric: tabular-nums;
}

@media (hover: hover) and (pointer: fine) {
  .knopf:hover { background: var(--dachrot-tief); }
  .knopf--leise:hover { background: rgba(35, 40, 44, .06); }
  .nav a:hover, .fuss-links a:hover, .kopf-tel:hover { color: var(--dachrot); }
  .menue-links a:hover { color: var(--dachrot); }
}

/* Kopf */
.kopf-marke { position: absolute; top: 0; left: 0; width: 1px; height: 4px; }
.kopf {
  position: sticky; top: 0; z-index: 30;
  height: var(--nav-h);
  align-items: center;
  background: var(--kalk);
  transition: box-shadow 220ms ease;
}
.kopf.ist-gerollt { box-shadow: 0 1px 0 rgba(35, 40, 44, .07), 0 12px 28px -20px rgba(35, 40, 44, .45); }
.wortmarke { grid-column: 2 / 6; display: inline-flex; align-items: center; gap: 12px; text-decoration: none; justify-self: start; }
.wortmarke-fase {
  width: 26px; height: 26px; background: var(--dachrot);
  clip-path: polygon(9px 0, 100% 0, 100% 100%, 0 100%, 0 7px);
}
.wortmarke-text {
  font: 700 1.25rem/1 "Cabinet Grotesk", sans-serif; letter-spacing: -.01em;
  white-space: nowrap;
}
.wortmarke-text b { font-weight: 800; }

.nav { grid-column: 6 / 10; justify-self: center; }
.nav ul { display: flex; gap: clamp(18px, 2.2vw, 34px); margin: 0; padding: 0; list-style: none; }
.nav a {
  font-weight: 500; font-size: .9688rem; text-decoration: none;
  padding: 10px 0; transition: color 160ms ease;
  text-decoration-thickness: 2px; text-underline-offset: 8px;
}
.nav a[aria-current] { color: var(--dachrot); text-decoration-line: underline; }
.kopf-aktion { grid-column: 10 / 14; justify-self: end; display: flex; align-items: center; gap: 22px; }
.kopf-tel {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: .9375rem; text-decoration: none; white-space: nowrap;
  font-variant-numeric: tabular-nums; transition: color 160ms ease;
}
.kopf-tel i { color: var(--dachrot); font-size: .85em; }
.menue-auf, .menue-zu {
  display: none; width: 44px; height: 44px; place-items: center;
  border: 0; border-radius: 2px; background: transparent; color: var(--schiefer);
  font-size: 1.25rem; cursor: pointer; touch-action: manipulation;
  transition: transform 140ms var(--kurve-raus);
}
.menue-auf:active, .menue-zu:active { transform: scale(.94); }

/* Mobiles Menü als dialog */
.menue {
  position: fixed; inset: 0; width: 100%; height: 100dvh; max-width: none; max-height: none;
  margin: 0; border: 0; padding: 0 var(--gutter) calc(24px + env(safe-area-inset-bottom, 0px));
  background: var(--kalk); color: var(--schiefer);
  flex-direction: column;
  opacity: 0; transform: translateY(-8px);
  transition: opacity 160ms ease, transform 160ms var(--kurve-raus), overlay 160ms allow-discrete, display 160ms allow-discrete;
}
.menue[open] {
  display: flex; opacity: 1; transform: none;
  transition-duration: 240ms;
}
@starting-style {
  .menue[open] { opacity: 0; transform: translateY(-8px); }
}
.menue::backdrop { background: transparent; }
.menue-kopf { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); }
.menue-zu { display: grid; margin-right: -10px; }
.menue-links { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 4px; }
.menue-links a {
  display: block; padding: 10px 0;
  font: 800 clamp(1.9rem, 8vw, 2.6rem)/1.1 "Cabinet Grotesk", sans-serif; letter-spacing: -.02em;
  text-decoration: none; transition: color 160ms ease;
}
.menue-fuss { margin-top: auto; display: grid; gap: 12px; }

/* Hero: Titel über die volle Breite, darunter das Fenster mit der großen Dachschräge */
.hero {
  min-height: clamp(600px, calc(100svh - var(--nav-h)), 960px);
  grid-template-rows: auto 1fr;
  row-gap: clamp(28px, 3.4vw, 52px);
  padding-top: clamp(24px, 3.6vw, 56px);
}
.hero-titel {
  grid-column: 2 / 14; grid-row: 1;
  /* das D steht sonst sichtbar rechts vom Raster */
  margin-left: -.05em;
  font-size: clamp(2.6rem, .4rem + 10vw, 10.4rem);
  font-weight: 800;
  line-height: .93;
  letter-spacing: -.042em;
}
.hero-titel .zeile { display: block; }
.hero-text { grid-column: 2 / 6; grid-row: 2; align-self: start; padding-bottom: 56px; }
.hero-sub {
  max-width: 34ch;
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  line-height: 1.5; color: var(--schiefer-2);
}
.hero-aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: clamp(28px, 3vw, 40px); }
.hero-tel {
  padding-block: 12px;
  color: var(--schiefer-2); font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: color 160ms ease;
}
.hero-tel b { color: var(--schiefer); font-weight: 600; font-variant-numeric: tabular-nums; transition: color 160ms ease; }

.hero-fenster {
  --fb: clamp(96px, 27vw, 480px);
  grid-column: 7 / -1; grid-row: 2;
  position: relative; overflow: hidden;
  min-height: 340px;
  background: #3a4247;
}
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-knopf {
  position: absolute; right: 16px; bottom: 16px;
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; border-radius: 2px;
  background: rgba(30, 35, 39, .6); color: var(--nacht-text);
  cursor: pointer; touch-action: manipulation;
  transition: transform 140ms var(--kurve-raus), background-color 180ms ease;
}
.video-knopf:active { transform: scale(.94); }
.video-knopf:focus-visible { outline-color: var(--kalk); }

/* Eindecken: das Fenster wächst von der Traufe nach oben, die Schräge legt sich zuletzt */
@keyframes eindecken {
  from { clip-path: polygon(var(--fb) 100%, 100% 100%, 100% 100%, 0 100%, 0 100%); }
  to   { clip-path: polygon(var(--fb) 0, 100% 0, 100% 100%, 0 100%, 0 var(--fh)); }
}
@keyframes setzen {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}
@keyframes steigen {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
/* nur das Fenster bewegt sich, der Text steht vom ersten Bild an */
html.js .hero-fenster { animation: eindecken 1100ms var(--kurve-raus) 120ms both; }
html.js .hero-video { animation: setzen 1500ms var(--kurve-raus) 120ms both; }

/* Leistungen: Sanierung als Hauptsache, der Ablauf gehört dazu */
.leistungen { padding-block: var(--abstand) calc(var(--abstand) * .7); row-gap: clamp(64px, 8vw, 128px); }
.leistung-bild { --fb: clamp(60px, 9vw, 150px); grid-column: 2 / 7; grid-row: 1; }
.leistung-bild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 60% 60%; }
.leistung-gross { grid-column: 8 / 14; grid-row: 1; align-self: center; }
.leistung-gross h2 {
  font-size: clamp(2.4rem, 1rem + 3.9vw, 5rem);
  line-height: .98; letter-spacing: -.036em;
  hyphens: manual;
}
.leistung-gross p { margin-top: clamp(20px, 2.2vw, 30px); max-width: 54ch; }
.inklusive { margin: 24px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.inklusive li { position: relative; padding-left: 26px; }
.inklusive li::before {
  content: ""; position: absolute; left: 0; top: .72em;
  width: 12px; height: 2px; background: var(--dachrot);
}

.ablauf { grid-column: 2 / 14; grid-row: 2; }
.ablauf-kopf h3 { font-size: clamp(1.45rem, 1.15rem + 1vw, 2.05rem); font-weight: 800; letter-spacing: -.02em; }
.schritte {
  position: relative;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--spalt);
  margin: clamp(36px, 4vw, 56px) 0 0; padding: 40px 0 0; list-style: none;
}
/* die Linie zieht sich einmal durch, wenn der Ablauf ins Bild kommt */
.schritte::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--dachrot);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1000ms var(--kurve-gleit) 150ms;
}
.schritte.ist-da::before, html:not(.js) .schritte::before { clip-path: inset(0); }
.schritt-nr {
  display: block; margin-bottom: 14px;
  font: 800 2.4rem/1 "Cabinet Grotesk", sans-serif; color: var(--dachrot);
  font-variant-numeric: tabular-nums;
}
.schritt h4 { font-size: 1.1875rem; font-weight: 700; line-height: 1.2; }
.schritt p { margin-top: 8px; font-size: .9688rem; color: var(--schiefer-2); }

/* Weitere Leistungen als ruhiges Verzeichnis */
.weitere { padding-block: calc(var(--abstand) * .5) var(--abstand); align-items: start; }
.weitere-titel {
  grid-column: 2 / 6; grid-row: 1;
  position: sticky; top: calc(var(--nav-h) + 32px);
  font-size: clamp(1.9rem, 1.2rem + 1.6vw, 2.7rem);
}
.index { grid-column: 7 / 14; grid-row: 1; display: grid; gap: clamp(32px, 3.6vw, 52px); }
.index-eintrag {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: var(--spalt); align-items: baseline;
}
.index-eintrag h3 { font-size: clamp(1.45rem, 1.1rem + 1vw, 2.1rem); font-weight: 800; letter-spacing: -.022em; line-height: 1.1; }
.index-eintrag p { color: var(--schiefer-2); max-width: 46ch; }

/* Sturm: das einzige dunkle Kapitel */
.sturm { background: var(--nacht); color: var(--nacht-text); }
.sturm :focus-visible { outline-color: var(--nacht-text); }
.sturm-bild { --fb: clamp(80px, 16vw, 280px); grid-column: 1 / 8; grid-row: 1; position: relative; min-height: 100%; background: #2b3236; }
.sturm-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sturm-text { grid-column: 9 / 14; grid-row: 1; padding-block: var(--abstand); }
.sturm-intro { margin-top: 20px; color: var(--nacht-leise); max-width: 48ch; }
.sofort { margin: 36px 0 40px; padding: 0; list-style: none; display: grid; gap: 18px; }
.sofort li { display: grid; grid-template-columns: 34px 1fr; gap: 16px; align-items: start; line-height: 1.5; }
.sofort-nr {
  display: grid; place-items: center; width: 34px; height: 34px;
  background: var(--dachrot); color: #fff; border-radius: 2px;
  font: 800 1.05rem/1 "Cabinet Grotesk", sans-serif;
}

/* Betrieb */
.betrieb { padding-block: var(--abstand) calc(var(--abstand) + 40px); align-items: center; }
.betrieb-text { grid-column: 2 / 7; grid-row: 1; }
.betrieb-text h2 { font-size: clamp(2.2rem, 1.1rem + 3vw, 4.2rem); line-height: 1; letter-spacing: -.034em; }
.betrieb-text p { margin-top: 18px; max-width: 54ch; }
.betrieb-text p + p { color: var(--schiefer-2); }
.betrieb-text .bewertung {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 18px;
  margin-top: clamp(40px, 4.4vw, 64px); color: var(--schiefer);
}
.bewertung-zahl {
  margin-left: -.04em;
  font: 800 clamp(4.4rem, 2.6rem + 5vw, 8.4rem)/.8 "Cabinet Grotesk", sans-serif;
  letter-spacing: -.05em;
}
.bewertung-text { font-weight: 500; line-height: 1.35; color: var(--schiefer-2); }
.betrieb-collage { grid-column: 8 / 14; grid-row: 1; position: relative; }
.betrieb-hof { --fb: clamp(48px, 7vw, 120px); width: 80%; margin-left: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.betrieb-schiefer {
  position: absolute; left: 0; bottom: -56px;
  width: 44%; aspect-ratio: 1; object-fit: cover;
  box-shadow: 0 26px 50px -24px rgba(35, 40, 44, .55);
}

/* Hausverwaltungen: Zusagen in einer Zeile, darunter das Flachdach randlos */
.verwaltung { padding-top: var(--abstand); row-gap: clamp(36px, 4vw, 56px); }
.verwaltung-kopf { grid-column: 2 / 7; grid-row: 1; align-self: start; }
.verwaltung-kopf h2 { font-size: clamp(2.2rem, 1.1rem + 3vw, 4.2rem); line-height: 1; letter-spacing: -.034em; hyphens: manual; }
.verwaltung-kopf .knopf { margin-top: clamp(28px, 3vw, 40px); }
/* Zusagen als ruhige Liste neben dem Titel, keine Spaltenleiste */
.zusagen { grid-column: 8 / 14; grid-row: 1; display: grid; gap: clamp(24px, 2.6vw, 36px); margin: 0; }
.zusagen dt { font: 800 clamp(1.3rem, 1.1rem + .6vw, 1.6rem)/1.15 "Cabinet Grotesk", sans-serif; letter-spacing: -.016em; }
.zusagen dd { margin: 6px 0 0; color: var(--schiefer-2); max-width: 44ch; }
.verwaltung-bild { --fb: clamp(80px, 20vw, 360px); grid-column: 1 / -1; margin-top: clamp(16px, 3vw, 48px); }
.verwaltung-bild img { width: 100%; aspect-ratio: 21 / 8; max-height: 78svh; object-fit: cover; object-position: 50% 62%; }

/* Karriere: flach und typografisch, Bild läuft rechts aus */
.karriere { padding-block: var(--abstand); align-items: start; }
.karriere-text { grid-column: 2 / 8; grid-row: 1; }
.karriere-intro { margin-top: 18px; color: var(--schiefer-2); max-width: 50ch; }
.stelle { margin-top: clamp(36px, 4vw, 52px); }
.stelle h3 { font-size: clamp(1.35rem, 1.1rem + .8vw, 1.75rem); font-weight: 800; letter-spacing: -.016em; }
.stelle p { margin-top: 10px; max-width: 52ch; }
.stelle .stelle-fakten { font-size: .9688rem; font-weight: 600; color: var(--schiefer-2); }
.karriere-text > .knopf { margin-top: clamp(36px, 4vw, 52px); }
.karriere-bild { --fb: clamp(56px, 9vw, 160px); grid-column: 9 / -1; grid-row: 1; }
.karriere-bild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 55% 50%; }

/* Kontakt: die Telefonnummer ist hier die Schlagzeile */
.kontakt { background: var(--zink); padding-block: var(--abstand); align-items: start; }
.kontakt-info { grid-column: 2 / 7; grid-row: 1; }
.kontakt-info > p { margin-top: 18px; max-width: 44ch; }
.tel-gross {
  display: inline-block; margin-top: 22px; padding-block: 6px;
  font: 800 clamp(2rem, .6rem + 4.2vw, 5.4rem)/1 "Cabinet Grotesk", sans-serif;
  letter-spacing: -.03em; white-space: nowrap; text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: color 160ms ease;
}
.kontakt-daten { margin-top: 24px; font-style: normal; line-height: 1.7; overflow-wrap: anywhere; }
.gebiet { margin-top: 44px; }
.gebiet h3 { font-size: 1.125rem; }
.gebiet p { margin-top: 8px; color: var(--schiefer-2); max-width: 48ch; }

/* Formular steht direkt auf der Zinkfläche, ohne eigene Karte */
.formular-box { grid-column: 8 / 14; grid-row: 1; padding-top: 6px; }
.formular { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 18px; }
.feld { display: grid; gap: 6px; align-content: start; min-width: 0; }
.feld--breit { grid-column: 1 / -1; }
.feld label { font-weight: 600; font-size: .9375rem; }
.pflicht { color: var(--dachrot); }
.feld input, .feld select, .feld textarea {
  width: 100%; min-height: 52px; padding: 12px 14px;
  border: 0; border-radius: 2px;
  background: #fff; color: var(--schiefer);
  font: 400 16px/1.4 "Switzer", sans-serif;
  box-shadow: inset 0 0 0 1px rgba(35, 40, 44, .26);
  transition: box-shadow 160ms ease;
}
.feld textarea { resize: vertical; min-height: 132px; }
.feld input:focus, .feld select:focus, .feld textarea:focus {
  outline: none; box-shadow: inset 0 0 0 2px var(--dachrot);
}
.feld [aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--dachrot); background: #fdf6f6; }
.auswahl { position: relative; }
.auswahl select { appearance: none; padding-right: 44px; cursor: pointer; }
.auswahl i { position: absolute; right: 16px; top: 50%; translate: 0 -50%; font-size: .8rem; color: var(--schiefer-2); pointer-events: none; }
.feld-fehler { min-height: 0; font-size: .875rem; font-weight: 500; color: var(--dachrot); }
.feld-fehler:empty { display: none; }
.formular-fuss { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 6px; }
.formular-hinweis { font-size: .875rem; color: var(--schiefer-2); }
.formular .knopf[aria-busy="true"] { opacity: .75; cursor: progress; }

.formular-danke { text-align: left; padding-block: 24px; }
.formular-danke:focus { outline: none; }
.formular-danke > i { font-size: 2.2rem; color: var(--dachrot); }
.formular-danke h3 { margin-top: 18px; font-size: 1.75rem; font-weight: 800; }
.formular-danke p { margin: 10px 0 28px; color: var(--schiefer-2); }
.formular-danke:not([hidden]) { animation: steigen 420ms var(--kurve-raus) both; }

/* Fuß */
.fuss { padding-block: 64px calc(32px + env(safe-area-inset-bottom, 0px)); row-gap: 32px; font-size: .9688rem; }
.fuss-marke { grid-column: 2 / 6; }
.fuss-marke p { margin-top: 10px; color: var(--schiefer-2); max-width: 30ch; }
.fuss-adresse { grid-column: 7 / 10; font-style: normal; line-height: 1.7; }
.fuss-adresse a { text-decoration: none; font-weight: 600; }
.fuss-links { grid-column: 11 / 14; list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; align-content: start; }
.fuss-links a { text-decoration: none; transition: color 160ms ease; display: inline-flex; align-items: center; gap: 8px; padding-block: 4px; }
.fuss-zeile { grid-column: 2 / 14; color: var(--schiefer-2); font-size: .875rem; }

@media (hover: hover) and (pointer: fine) {
  .hero-tel:hover, .hero-tel:hover b, .tel-gross:hover { color: var(--dachrot); }
}

/* Tablet und kleiner: gestapelt */
@media (max-width: 1100px) {
  .nav { display: none; }
  .kopf-tel span { display: none; }
  .kopf-tel { width: 44px; height: 44px; justify-content: center; }
  .menue-auf { display: grid; }
  .wortmarke { grid-column: 2 / 8; }
  .kopf-aktion { grid-column: 8 / 14; gap: 6px; }
  .hero-text { grid-column: 2 / 7; }
  .hero-fenster { grid-column: 8 / -1; }
}

@media (max-width: 960px) {
  .raster > * { grid-column: 2 / 14; grid-row: auto; }
  .kopf > .wortmarke { grid-column: 2 / 8; grid-row: 1; }
  .kopf > .kopf-aktion { grid-column: 8 / 14; grid-row: 1; }

  .hero { min-height: 0; grid-template-rows: none; row-gap: 0; padding-top: 28px; }
  .hero-text { padding-block: 24px 32px; }
  .hero-fenster { --fb: clamp(72px, 26vw, 220px); grid-column: 1 / -1; min-height: 0; aspect-ratio: 4 / 3; max-height: 62svh; }

  .leistungen { row-gap: 48px; }
  .leistung-bild img { aspect-ratio: 4 / 3; }
  .schritte { grid-template-columns: 1fr; gap: 28px; padding: 0 0 0 36px; }
  .schritte::before { left: 0; right: auto; top: 0; bottom: 0; width: 2px; height: auto; clip-path: inset(0 0 100% 0); }
  .schritt { display: grid; grid-template-columns: 52px 1fr; column-gap: 8px; }
  .schritt-nr { grid-row: 1 / 3; margin: 0; font-size: 2rem; }
  .schritt p { grid-column: 2; }

  .weitere { row-gap: 36px; }
  .weitere-titel { position: static; }

  .sturm-bild { grid-column: 1 / -1; min-height: 0; aspect-ratio: 16 / 10; }
  .sturm-text { padding-block: 48px 72px; }

  .betrieb { padding-bottom: calc(var(--abstand) + 56px); row-gap: 48px; }
  .betrieb-collage { max-width: 560px; }

  .verwaltung-bild { grid-column: 1 / -1; }
  .verwaltung-bild img { aspect-ratio: 16 / 10; }

  .verwaltung-kopf, .zusagen { grid-row: auto; }
  .karriere { row-gap: 48px; }
  .karriere-bild { grid-column: 1 / -1; }
  .karriere-bild img { aspect-ratio: 4 / 3; }

  .kontakt { row-gap: 44px; }

  .fuss-marke, .fuss-adresse, .fuss-links, .fuss-zeile { grid-column: 2 / 14; }
}

@media (max-width: 600px) {
  :root { --spalt: 12px; }
  /* Anfragen steht direkt im Hero und im Menü, oben wird es sonst zu eng */
  .kopf-aktion .knopf--klein { display: none; }
  /* Kopf als Zeile statt Raster, sonst stößt die Wortmarke ans Telefon */
  .kopf { display: flex; justify-content: space-between; gap: 8px; padding-inline: var(--gutter); }
  .kopf-aktion { flex-shrink: 0; margin-right: -10px; }
  .hero-titel { margin-left: -.04em; line-height: .98; }
  .hero-titel .zeile { display: inline; }
  .hero-aktion .knopf { flex: 1 1 100%; }
  .index-eintrag { grid-template-columns: 1fr; row-gap: 8px; }

  .formular { grid-template-columns: 1fr; }
  .formular-fuss .knopf { width: 100%; }
  .knopf--gross { width: 100%; }
  .knopf-zusatz { font-size: .95rem; }
}

@media (max-width: 380px) {
  .wortmarke { gap: 9px; }
  .wortmarke-fase { width: 22px; height: 22px; }
  .kopf .wortmarke-text { font-size: 1.0625rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .hero-fenster, html.js .hero-video { animation: none; }
  .schritte::before { transition: none; clip-path: inset(0); }
  .knopf:active, .menue-auf:active, .menue-zu:active, .video-knopf:active { transform: none; }
  .menue, .menue[open] { transform: none; }
  @starting-style { .menue[open] { transform: none; } }
  .formular-danke:not([hidden]) { animation: none; }
}