/* =========================================================================
   Lorschiedter – Stylesheet
   Grundlage: stilanalyse/themeearth.com-roofs/stilprofil.md
   ========================================================================= */

/* ---------- Schriften (lokal, keine Verbindung zu Google) ---------- */

@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/jost-latin.woff2?v=235d8f89") format("woff2");
}

@font-face {
  font-family: "Kumbh Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/kumbh-sans-latin.woff2?v=adedef4c") format("woff2");
}

/* ---------- Tokens ---------- */

:root {
  /* Farben – Palette aus der Stellenanzeige der Lorschiedter GmbH
     (stilanalyse/anzeige-lorschiedter/farbpalette.md) */
  --farbe-grund: #ffffff;
  --farbe-grund-wechsel: #f4f4f4;    /* zartes Grau: Hintergrund abgesetzter Sektionen */
  --farbe-primaer: #1b1b1b;          /* Schwarz der Anzeige: Schrift, Kopf- und Fußzeile – keine Sektionsflächen */
  --farbe-akzent: #d11b1d;           /* Markenrot: Fläche, Buttons, Hervorhebung */
  --farbe-akzent-dunkel: #a81517;
  --farbe-akzent-auf-dunkel: #f04a4c;
  --farbe-hero: #2a2c2f;             /* Anthrazit des Hero; Rot übernimmt dort die Akzente */
  --farbe-rot-hauch: #fbeded;
  --farbe-haken: #1f8a3b;            /* Grün der Häkchen: 4,4 : 1 auf Weiß, 4,0 : 1 auf #f4f4f4 */
  --farbe-titel: #1b1b1b;
  --farbe-text: #555555;
  --farbe-text-hell: #ffffff;
  --farbe-text-hell-gedaempft: rgba(255, 255, 255, 0.8);
  --farbe-linie: #e0e0e0;
  --farbe-linie-feld: #dcdcdc;
  --farbe-rand-feld: #858585;        /* Rand der Formularfelder: 3,7 : 1 auf Weiß, 3,4 : 1 auf #f4f4f4 (WCAG 1.4.11) */
  --farbe-linie-dunkel: rgba(255, 255, 255, 0.2);

  /* Bildplatzhalter: graue Verläufe */
  --platzhalter-1: linear-gradient(135deg, #e6e6e6 0%, #a8a8a8 100%);
  --platzhalter-2: linear-gradient(160deg, #d6d6d6 0%, #8e8e8e 100%);
  --platzhalter-3: linear-gradient(115deg, #eeeeee 0%, #bbbbbb 55%, #959595 100%);
  --platzhalter-4: linear-gradient(200deg, #cccccc 0%, #808080 100%);

  /* Schriften */
  --schrift-titel: "Jost", Futura, "Century Gothic", system-ui, sans-serif;
  --schrift-text: "Kumbh Sans", "Segoe UI", system-ui, sans-serif;

  /* Stufen */
  --stufe-display: clamp(2.375rem, 5.2vw, 4.6875rem);
  --stufe-titel: clamp(2rem, 3.4vw, 3rem);
  --stufe-karte-gross: 1.6875rem;
  --stufe-karte: 1.5rem;
  --stufe-frage: 1.25rem;
  --stufe-overline: 1.125rem;
  --stufe-overline-hero: 0.875rem;
  --stufe-text: 1rem;
  --stufe-meta: 0.875rem;
  --laufweite-titel: -0.04em;

  /* Layout */
  --container: 1317px;
  --container-innen: 12px;
  --spaltenabstand: 24px;
  --abschnitt-abstand: 120px;
  --kopfzeile-hoehe: 104px;
  --logo-leiste: 72px;               /* Logohöhe in der festen Leiste, main.js liest den Wert */

  /* Formen */
  --radius-pille: 50px;
  --schatten-karte: 0 10px 30px rgba(0, 0, 0, 0.07);
  --schatten-karte-weit: 0 10px 60px rgba(0, 0, 0, 0.07);
  --schatten-klein: 0 0 18px 3px rgba(0, 0, 0, 0.05);

  --uebergang: 0.25s ease;
}

/* ---------- Grundlagen ---------- */

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

/* kein Nachfedern (Gummiband) am Anfang und Ende der Seite */
html,
body {
  overscroll-behavior: none;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--farbe-grund);
  color: var(--farbe-text);
  font-family: var(--schrift-text);
  font-size: var(--stufe-text);
  line-height: 2;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.menue-offen {
  overflow: hidden;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--farbe-titel);
  font-family: var(--schrift-titel);
  font-weight: 600;
  letter-spacing: var(--laufweite-titel);
  text-wrap: balance;
  /* lange Wörter („Fassadenverkleidungen“) brechen nur dann um, wenn sie allein nicht in die Zeile passen */
  overflow-wrap: anywhere;
}

p {
  margin: 0 0 1em;
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
svg {
  display: block;
}

[hidden] {
  display: none !important;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

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

.dunkel :focus-visible,
.kopfzeile :focus-visible,
.footer :focus-visible {
  outline-color: var(--farbe-text-hell);
}

/* zusammengehörige Angaben nicht trennen, etwa „Spiesen-Elversberg“ am Bindestrich: Als Inline-Block
   rückt die Angabe geschlossen in die nächste Zeile. Nur wenn sie allein breiter ist als die Zeile
   (große Schrift, eigene Textabstände), bricht sie doch um, statt über den Rand zu ragen. */
.ohne-umbruch {
  display: inline-block;
  max-width: 100%;
}

.nur-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sprunglink {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 200;
  padding: 10px 20px;
  background: var(--farbe-akzent);
  color: #fff;
  font-weight: 600;
  border-radius: var(--radius-pille);
  transition: top var(--uebergang);
}

.sprunglink:focus {
  top: 16px;
}

.icon {
  width: 1em;
  height: 1em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Markenlogos sind gefüllte Flächen, keine Linien */
.icon--marke {
  fill: currentColor;
  stroke: none;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--container-innen);
}

.abschnitt {
  padding-block: var(--abschnitt-abstand);
}

/* Unterseite ohne Seitenkopf: Platz für die darüberliegende Kopfzeile lassen */
.abschnitt--seitenanfang {
  padding-top: calc(var(--kopfzeile-hoehe) + var(--abschnitt-abstand));
}

.abschnitt--wechsel {
  background: var(--farbe-grund-wechsel);
}

.dunkel {
  background: var(--farbe-primaer);
  color: var(--farbe-text-hell-gedaempft);
}

.dunkel h1,
.dunkel h2,
.dunkel h3 {
  color: var(--farbe-text-hell);
}

/* ---------- Bildplatzhalter ---------- */

.platzhalter {
  position: relative;
  background: var(--platzhalter-1);
  overflow: hidden;
}

.platzhalter--2 { background: var(--platzhalter-2); }
.platzhalter--3 { background: var(--platzhalter-3); }
.platzhalter--4 { background: var(--platzhalter-4); }

/* leichter Lichtschein, damit die Fläche nicht tot wirkt */
.platzhalter::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 75% 20%, rgba(255, 255, 255, 0.35), transparent 55%);
  pointer-events: none;
}

/* ---------- Abschnittskopf: Overline + Titel ---------- */

.overline {
  display: block;
  margin-bottom: 14px;
  color: var(--farbe-akzent);
  font-family: var(--schrift-text);
  font-size: var(--stufe-overline);
  font-weight: 700;
  line-height: 28px;
  letter-spacing: 4px;
  text-transform: uppercase;
}

.dunkel .overline,
.overline--hell {
  color: var(--farbe-akzent-auf-dunkel);
}

.titel {
  font-size: var(--stufe-titel);
  line-height: 1.2;
}

.kopf {
  max-width: 640px;
  margin-bottom: 56px;
}

.kopf--mitte {
  margin-inline: auto;
  text-align: center;
}

.kopf p {
  margin-top: 20px;
}

/* ---------- Buttons ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 31px;
  border: 1px solid var(--farbe-akzent);
  border-radius: var(--radius-pille);
  background: var(--farbe-akzent);
  color: var(--farbe-text-hell);
  font-family: var(--schrift-text);
  font-size: 1rem;
  font-weight: 600;
  line-height: 32px;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--uebergang), color var(--uebergang), border-color var(--uebergang);
}

.button .icon {
  font-size: 1.125rem;
}

.button:hover {
  background: var(--farbe-akzent-dunkel);
  border-color: var(--farbe-akzent-dunkel);
}

.button--rahmen {
  background: transparent;
  color: var(--farbe-primaer);
}

.button--rahmen:hover {
  background: var(--farbe-akzent);
  border-color: var(--farbe-akzent);
  color: var(--farbe-text-hell);
}

.dunkel .button--rahmen,
.button--rahmen-hell {
  color: var(--farbe-text-hell);
}

.button--weiss {
  background: var(--farbe-grund);
  border-color: var(--farbe-grund);
  color: var(--farbe-primaer);
}

.button--weiss:hover {
  background: var(--farbe-primaer);
  border-color: var(--farbe-primaer);
  color: var(--farbe-text-hell);
}

.button--rahmen-weiss {
  background: transparent;
  border-color: var(--farbe-text-hell);
  color: var(--farbe-text-hell);
}

.button--rahmen-weiss:hover {
  background: var(--farbe-text-hell);
  border-color: var(--farbe-text-hell);
  color: var(--farbe-akzent);
}

.button--breit {
  width: 100%;
  padding-inline: 10px;
}

.buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

/* runde Pfeiltasten (Slider) */
.pfeiltaste {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  border: 0;
  border-radius: 50%;
  background: var(--farbe-grund);
  color: var(--farbe-akzent);
  font-size: 1.25rem;
  cursor: pointer;
  transition: background-color var(--uebergang), color var(--uebergang);
}

.pfeiltaste:hover {
  background: var(--farbe-akzent);
  color: var(--farbe-text-hell);
}

.pfeiltaste:disabled {
  opacity: 0.45;
  cursor: default;
}

.pfeiltaste:disabled:hover {
  background: var(--farbe-grund);
  color: var(--farbe-akzent);
}

/* ---------- Häkchenliste ---------- */

.haken {
  display: grid;
  gap: 0;
  margin: 20px 0 28px;
}

.haken li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.haken .icon {
  font-size: 1rem;
}

/* Häkchen überall gleich: Grün, kräftiger Strich (Leistungen, Team, Dachwartung, Karriere) */
.icon:has(> use[href="#i-haken"]) {
  color: var(--farbe-haken);
  stroke-width: 3;
}

/* =========================================================================
   Topbar und Kopfzeile
   ========================================================================= */

.topbar {
  background: var(--farbe-akzent);
  color: var(--farbe-text-hell);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 24px;
}

.topbar .container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  min-height: 48px;
}

.topbar ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 32px;
}

.topbar li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.topbar .icon {
  font-size: 0.9375rem;
}

.kopfzeile {
  position: absolute;
  inset: auto 0 auto 0;
  z-index: 50;
  color: var(--farbe-text-hell);
}

.kopfzeile .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  height: var(--kopfzeile-hoehe);
}

.kopfzeile.ist-fixiert {
  position: fixed;
  top: 0;
  background: var(--farbe-primaer);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  animation: einblenden 0.35s ease;
}

.kopfzeile.ist-fixiert .container {
  height: 100px;
}

@keyframes einblenden {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}

/* Logo: eingebettet als Symbol, Farben je Untergrund
   heller Grund: Rot + Schwarz · dunkler Grund: Rot + Weiß · roter Grund: ganz Weiß */
.logo {
  --logo-dach: var(--farbe-akzent);
  --logo-text: var(--farbe-titel);
  display: inline-block;
  flex: none;
}

.logo__bild {
  display: block;
  width: auto;
  height: 80px;
  aspect-ratio: 597 / 385;
}

.kopfzeile .logo,
.footer .logo {
  --logo-text: var(--farbe-text-hell);
}

.kopfzeile--auf-rot:not(.ist-fixiert) .logo {
  --logo-dach: var(--farbe-akzent);
}

.kopfzeile.ist-fixiert .logo__bild {
  height: var(--logo-leiste);
}

/* Startseite, Desktop: Kopfzeile von Anfang an fest, das große Logo im Hero
   schrumpft beim Scrollen in die Leiste (Schwelle in main.js) */
@media (min-width: 992px) {
  .kopfzeile--auf-rot {
    position: fixed;
    top: 0;
    transition: background-color 0.35s ease, box-shadow 0.35s ease;
  }

  .kopfzeile--auf-rot.ist-fixiert {
    animation: none;
  }

  .kopfzeile--auf-rot .container {
    transition: height 0.35s ease;
  }

  .kopfzeile--auf-rot .logo {
    align-self: flex-start;
    margin-top: 52px;
    transition: margin-top 0.35s ease;
  }

  .kopfzeile--auf-rot .logo__bild {
    height: 200px;
    transition: height 0.35s ease;
  }

  /* in der Leiste mittig: (100 px − 72 px) / 2 */
  .kopfzeile--auf-rot.ist-fixiert .logo {
    margin-top: 14px;
  }
}

/* Unterseiten: ohne Hero steht die Leiste von Anfang an dunkel da */
.kopfzeile--dunkel {
  background: var(--farbe-primaer);
}

/* Menüpunkte rechts vor der Aktionsgruppe; in der festen Leiste gleiten sie zur Mitte (main.js) */
.navigation {
  display: flex;
  align-items: center;
  margin-left: auto;
}

/* Stellenanzeige und Anrufen als Gruppe, durch eine feine Linie von den Menüpunkten abgesetzt */
.kopf-aktionen {
  display: flex;
  flex: none;
  align-items: center;
  gap: 12px;
  padding-left: 32px;
  border-left: 1px solid rgba(255, 255, 255, 0.25);
}

.navigation__liste {
  display: flex;
  gap: 36px;
  transition: transform 0.45s ease;
}

/* feste Leiste: Menüpunkte gleiten zur Mitte, Versatz berechnet main.js */
.kopfzeile.ist-fixiert .navigation__liste {
  transform: translateX(var(--nav-versatz, 0px));
}

.navigation__liste a {
  position: relative;
  display: block;
  padding-block: 8px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 24px;
}

.navigation__liste a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--farbe-akzent);
  transition: right var(--uebergang);
}

/* auf dem roten Hero wäre Rot unsichtbar, dort bleibt die Linie weiß */
.kopfzeile--auf-rot:not(.ist-fixiert) .navigation__liste a::after {
  background: var(--farbe-akzent);
}

.navigation__liste a:hover::after,
.navigation__liste a[aria-current]::after {
  right: 0;
}

.menue-knopf {
  display: none;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-right: -10px;
  border: 0;
  background: none;
  color: var(--farbe-titel);
  font-size: 1.875rem;
  cursor: pointer;
}

.menue-knopf .icon {
  stroke-width: 1.5;
}

/* ---------- Mobilmenü (Schublade von links, wie der Menüknopf) ---------- */

.schublade {
  position: fixed;
  inset: 0;
  z-index: 100;
  visibility: hidden;
}

.schublade__abdeckung {
  position: absolute;
  inset: 0;
  background: rgba(27, 27, 27, 0.6);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.schublade__inhalt {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(360px, 90vw);
  padding: 40px 40px 48px;
  overflow-y: auto;
  background: var(--farbe-grund);
  color: var(--farbe-titel);
  transform: translateX(-100%);
  transition: transform 0.35s ease;
}

.schublade.ist-offen {
  visibility: visible;
}

.schublade.ist-offen .schublade__abdeckung {
  opacity: 1;
}

.schublade.ist-offen .schublade__inhalt {
  transform: none;
}

.schublade__schliessen {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 0;
  background: var(--farbe-akzent);
  color: var(--farbe-text-hell);
  font-size: 1.375rem;
  cursor: pointer;
}

.schublade .logo {
  margin-bottom: 40px;
}

.schublade .logo__bild {
  height: 96px;
}

.schublade__liste a {
  display: block;
  padding: 12px 0;
  border-bottom: 1px solid var(--farbe-linie);
  font-family: var(--schrift-titel);
  font-size: 1.125rem;
  font-weight: 600;
}

.schublade__liste a[aria-current] {
  color: var(--farbe-akzent);
}

/* kleines rotes Etikett hinter einem Menüpunkt („Wir suchen!“ bei Karriere) */
.tag-pille {
  display: inline-block;
  margin-left: 10px;
  padding: 3px 10px;
  border-radius: var(--radius-pille);
  background: var(--farbe-akzent);
  color: var(--farbe-text-hell);
  font-family: var(--schrift-text);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
  vertical-align: 2px;
}

.schublade__kontakt {
  margin-top: 40px;
}

.schublade__kontakt h2 {
  margin-bottom: 16px;
  font-size: 1.625rem;
}

.schublade__kontakt li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--farbe-text);
}

/* Icon auf Höhe der ersten Zeile, auch wenn die Adresse umbricht */
.schublade__kontakt .icon {
  flex: none;
  margin-top: calc((1lh - 1em) / 2);
  color: var(--farbe-akzent);
}

.schublade .button {
  margin-top: 28px;
}

/* Rechtliches klein und zurückhaltend unter dem Kontaktblock, nicht auf Höhe der Hauptpunkte */
.schublade__rechtliches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--farbe-linie);
  font-size: 0.875rem;
  line-height: 1.6;
}

.schublade__rechtliches a {
  color: var(--farbe-text);
}

.schublade__rechtliches a:hover,
.schublade__rechtliches a[aria-current] {
  color: var(--farbe-akzent);
}

/* =========================================================================
   Startseite
   ========================================================================= */

/* ---------- Hero ---------- */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 860px;
  padding-top: var(--kopfzeile-hoehe);
  overflow: hidden;
  background: var(--farbe-hero);
}

/* Desktop: Hero-Text rückt nach unten, damit er Abstand zum großen Logo hält */
@media (min-width: 992px) {
  .hero {
    padding-top: calc(var(--kopfzeile-hoehe) + 120px);
  }
}

/* Platzhalter für das rot eingefärbte Dachfoto links */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--platzhalter-2);
  opacity: 0.22;
  mix-blend-mode: multiply;
}

/* Hero in Anthrazit: Rot übernimmt die Akzente – Dach im Logo, Überzeile, Unterstrich im Menü, Hauptbutton */
.hero .button--weiss {
  border-color: var(--farbe-akzent);
  background: var(--farbe-akzent);
  color: var(--farbe-text-hell);
}

.hero .button--weiss:hover {
  border-color: var(--farbe-akzent-dunkel);
  background: var(--farbe-akzent-dunkel);
}

/* Die Schräge richtet sich nach dem Inhaltsrand, nicht nach der Fensterbreite:
   unten beginnt sie 560 px rechts vom Textanfang, oben 220 px weiter rechts.
   So bleibt neben der Headline auf jedem Bildschirm genug Rot. */
.hero__bild {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: calc(max((100% - var(--container)) / 2, 0px) + var(--container-innen) + 560px);
  clip-path: polygon(220px 0, 100% 0, 100% 100%, 0 100%);
  /* Foto: Hände und Ziegel liegen im linken Drittel, deshalb von links ausgerichtet */
  background: #5f5f5f url("../img/hero/hero-dach-1600.jpg?v=63764442") 25% center / cover no-repeat;
  background-image: image-set(url("../img/hero/hero-dach-1600.webp?v=56d079c9") type("image/webp"), url("../img/hero/hero-dach-1600.jpg?v=63764442") type("image/jpeg"));
}

@media (min-width: 1441px) {
  .hero__bild {
    background-image: url("../img/hero/hero-dach-2400.jpg?v=aab5b0cd");
    background-image: image-set(url("../img/hero/hero-dach-2400.webp?v=919d6835") type("image/webp"), url("../img/hero/hero-dach-2400.jpg?v=aab5b0cd") type("image/jpeg"));
  }
}

/* Abdunkelung oben, damit die Navigation auf jedem Foto lesbar bleibt */
.hero__bild::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 1;
  height: 240px;
  background: linear-gradient(rgba(27, 27, 27, 0.55), rgba(27, 27, 27, 0));
}

.hero__inhalt {
  position: relative;
  z-index: 1;
  width: 100%;
}

.hero__text {
  max-width: 640px;
}

.hero__overline {
  display: block;
  margin-bottom: 20px;
  color: var(--farbe-akzent);
  font-family: var(--schrift-titel);
  font-size: var(--stufe-overline-hero);
  font-weight: 700;
  line-height: 26px;
  letter-spacing: 2px;
  text-transform: uppercase;
}



.hero h1 {
  margin-bottom: 24px;
  color: var(--farbe-text-hell);
  /* gedeckelt, damit „Dachdeckerbetrieb“ und der Ortsname in der roten Fläche bleiben */
  font-size: min(var(--stufe-display), 3.75rem);
  line-height: 1.13;
}

/* zweite Zeile: „in Spiesen-Elversberg“ */
.hero__zeile {
  display: block;
}

.hero__einleitung {
  max-width: 480px;
  margin-bottom: 40px;
  color: rgba(255, 255, 255, 0.92);
}

/* ---------- Ablauf: vier Karten mit roter Oberkante ---------- */

.raster {
  display: grid;
  gap: var(--spaltenabstand);
}

.raster--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.raster--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.raster--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.schrittkarte {
  padding: 30px 30px 36px;
  border-top: 5px solid transparent;
  background: var(--farbe-grund);
  box-shadow: var(--schatten-karte-weit);
  text-align: center;
  transition: border-color var(--uebergang);
}

/* Kartenlinie oben: unsichtbar (Platz bleibt reserviert, nichts springt), beim Darüberfahren
   oder Tastaturfokus in der Karte rot */
.schrittkarte:hover,
.schrittkarte.ist-im-blick,
.leistungen__raster > .fotokarte:hover,
.leistungen__raster > .fotokarte.ist-im-blick,
.leistungen__raster > .fotokarte:focus-within {
  border-top-color: var(--farbe-akzent);
}

/* Kacheltitel färbt sich mit der Linie rot */
.schrittkarte h3,
.leistungen__raster > .fotokarte h3 {
  transition: color var(--uebergang);
}

.schrittkarte:hover h3,
.leistungen__raster > .fotokarte:hover h3,
.leistungen__raster > .fotokarte:focus-within h3 {
  color: var(--farbe-akzent);
}

.icon-kreis {
  display: grid;
  place-items: center;
  width: 130px;
  height: 130px;
  margin: 0 auto 28px;
  border-radius: 50%;
  background: var(--farbe-grund-wechsel);
  color: var(--farbe-akzent);
  font-size: 3.5rem;
}

.icon-kreis .icon {
  stroke-width: 1.4;
}

.schrittkarte h3 {
  margin-bottom: 10px;
  font-size: var(--stufe-karte);
  line-height: 1.4;
}

.schrittkarte__nummer {
  display: block;
  margin-bottom: 4px;
  color: var(--farbe-akzent);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 2px;
}

/* ---------- Über uns: Bildcollage ---------- */

.zweispalter {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 70px;
  align-items: center;
}

.collage {
  position: relative;
  height: 600px;
}

.collage__gross {
  position: absolute;
  top: 0;
  left: 0;
  width: 68%;
  height: 76%;
}

.collage__klein {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 68%;
  height: 46%;
  outline: 10px solid var(--farbe-grund);
}

.collage__box {
  position: absolute;
  top: 40px;
  left: 60%;
  z-index: 2;
  display: grid;
  place-items: center;
  align-content: center;
  width: 205px;
  height: 190px;
  padding: 16px;
  background: var(--farbe-akzent);
  color: var(--farbe-text-hell);
  text-align: center;
  line-height: 1.4;
}

.collage__box strong {
  font-family: var(--schrift-titel);
  font-size: 3rem;
  font-weight: 600;
  letter-spacing: var(--laufweite-titel);
  line-height: 1.1;
}

/* Firmenlogo statt Collage (vorübergehend): anthrazitfarbene Fläche wie der Hero, rote Kontur
   versetzt dahinter wie beim Kontaktbild, sanfter Lichtschein und die Dachstreifen des Logos als Muster */
.markenbild {
  position: relative;
  padding: 40px 0 0 40px;
}

.markenbild::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 85%;
  height: 85%;
  border: 1px solid var(--farbe-akzent);
}

.markenbild__flaeche {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 520 / 560;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.09), transparent 62%),
    repeating-linear-gradient(-38deg, transparent 0 46px, rgba(255, 255, 255, 0.025) 46px 58px),
    var(--farbe-hero);
  box-shadow: var(--schatten-karte-weit);
}

/* roter Streifen unten wie die Linie über den Karten */
.markenbild__flaeche::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 6px;
  background: var(--farbe-akzent);
}

.markenbild__logo {
  --logo-dach: var(--farbe-akzent);
  --logo-text: var(--farbe-text-hell);
  width: 66%;
  height: auto;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.35));
}

/* ---------- Leistungen: Fotokarten auf Marineblau-Band ---------- */

.leistungen {
  padding-bottom: 0;
}

.leistungen__band {
  position: relative;
  padding-bottom: var(--abschnitt-abstand);
}

.leistungen__band::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 200px;   /* knapp unter der Bildkante der Karten */
  bottom: 0;
  background: var(--farbe-grund-wechsel);
}

.leistungen__band .container {
  position: relative;
}

/* höchstens vier Karten pro Reihe, eine unvollständige letzte Reihe beginnt links.
   grid-auto-rows: 1fr macht alle Reihen so hoch wie die höchste – alle Kacheln gleich hoch */
.leistungen__raster {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: var(--spaltenabstand);
}

/* Textteil füllt die Kachel, „Mehr erfahren“ steht in allen Kacheln auf derselben Höhe unten */
.leistungen__raster > .fotokarte {
  display: flex;
  flex-direction: column;
  cursor: pointer;      /* ganze Kachel öffnet das Pop-up (main.js) */
  border-top: 5px solid transparent;
  transition: border-color var(--uebergang);
}

.leistungen__raster .fotokarte__text {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.leistungen__raster .fotokarte__link {
  align-self: center;
  margin-top: auto;
}

.fotokarte__bild {
  aspect-ratio: 415 / 240;
}

/* Fotos füllen ihre Fläche im festen Seitenverhältnis (Kachel und Pop-up) */
picture:is(.fotokarte__bild, .popup__bild) {
  display: block;
  overflow: hidden;
}

:is(.fotokarte__bild, .popup__bild) img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fotokarte__text {
  padding: 32px 24px 36px;
  background: var(--farbe-grund);
  text-align: center;
}


.fotokarte h3 {
  margin-bottom: 12px;
  font-size: var(--stufe-karte);
  line-height: 1.4;
}

.fotokarte__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 1rem;
  cursor: pointer;
  color: var(--farbe-primaer);
  font-weight: 600;
}

.fotokarte__link .icon {
  color: var(--farbe-akzent);
}

/* ---------- Versprechen: Text + Kreisverlauf ---------- */

.versprechen {
  overflow: hidden;
}

.versprechen .zweispalter {
  gap: 40px;
}

.versprechen p {
  max-width: 500px;
  margin-block: 24px 36px;
}

.kreisbild {
  position: relative;
  width: min(470px, 100%);
  aspect-ratio: 1;
  margin-inline: auto;
}

.kreisbild__kreis {
  position: absolute;
  inset: 0;
  overflow: hidden;   /* schneidet den Schatten auf die Kreisfläche zu */
  border-radius: 50%;
  background: linear-gradient(270deg, #d11b1d 0%, rgba(209, 27, 29, 0) 100%);
}

/* Modell und Schatten liegen deckungsgleich; der Kreis hat dieselbe Fläche wie .kreisbild */
.kreisbild__objekt,
.kreisbild__schatten {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 104%;
  height: auto;
  /* nach links versetzt: das Modell ragt links über den Kreis hinaus */
  transform: translate(var(--kreisbild-x, -60%), -54%);
}

/* Schatten: Umriss des Modells, schwarz, weichgezeichnet, nach rechts unten versetzt */
.kreisbild__schatten {
  filter: brightness(0) blur(18px);
  opacity: 0.25;
  transform: translate(calc(var(--kreisbild-x, -60%) + 22px), calc(-54% + 30px));
}

/* schmal: weniger Überstand, damit das Modell nicht am Bildschirmrand angeschnitten wird */
@media (max-width: 767px) {
  .kreisbild {
    --kreisbild-x: -51%;
  }
}

/* ---------- Kennzahlen: rotes Vollband ---------- */

/* hellgraues Band direkt unter dem roten Hero */
.kennzahlen {
  padding-block: 80px;
  background: var(--farbe-grund-wechsel);
  color: var(--farbe-titel);
}

.kennzahlen__liste {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.kennzahl {
  padding: 4px 16px;
  text-align: center;
}

.kennzahl + .kennzahl {
  border-left: 1px solid var(--farbe-linie-feld);
}

.kennzahl .icon {
  margin: 0 auto 18px;
  color: var(--farbe-akzent);
  font-size: 3.625rem;
  stroke-width: 1.4;
}

.kennzahl strong {
  display: block;
  font-family: var(--schrift-titel);
  font-size: 3rem;
  font-weight: 600;
  letter-spacing: var(--laufweite-titel);
  line-height: 1.1;
}

.kennzahl span {
  color: var(--farbe-text);
  font-family: var(--schrift-titel);
  font-size: 1rem;
}

/* ---------- Wartungspakete ---------- */

/* Text und Bild links, das eine Wartungspaket rechts daneben */
.pakete {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 70px;
  align-items: center;
}

.pakete__intro {
  padding-right: 24px;
}

.pakete__intro p {
  margin-top: 24px;
}

.pakete__bild {
  display: block;
  height: 280px;
  margin-top: 48px;
  overflow: hidden;
}

/* Breitformat-Ausschnitt: unteres Bilddrittel, damit die Dachfläche statt des Himmels im Bild ist */
.pakete__bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 75%;
}

.paketkarte {
  background: var(--farbe-grund);
  box-shadow: var(--schatten-karte-weit);
}

.paketkarte__kopf {
  padding: 28px 24px;
  border-bottom: 1px solid var(--farbe-linie);
  text-align: center;
}

.paketkarte__kopf h3 {
  font-size: var(--stufe-karte-gross);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.paketkarte__koerper {
  padding: 32px 40px 40px;
}

.paketliste {
  margin-bottom: 32px;
  padding: 16px 24px;
  border-radius: 4px;
  background: var(--farbe-grund-wechsel);
}

.paketliste li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 4px;
  color: var(--farbe-titel);
  font-family: var(--schrift-titel);
  font-size: 1.125rem;
  letter-spacing: -0.02em;
}

.paketliste .icon {
  font-size: 1.25rem;
}

.paketliste .nicht {
  color: var(--farbe-text);
}

/* ---------- Projekte: Vorher-Nachher-Vergleich ---------- */

/* Pfeile links und rechts, dazwischen ein Fenster, in dem die Projekte seitlich wechseln */
.vergleich {
  --pfeil: 66px;
  --pfeil-abstand: 30px;
  container-type: inline-size;
  display: grid;
  grid-template-columns: var(--pfeil) minmax(0, 1fr) var(--pfeil);
  grid-template-areas:
    "zurueck fenster weiter"
    ".       zaehler .";
  column-gap: var(--pfeil-abstand);
}

.vergleich__pfeil {
  width: var(--pfeil);
  height: var(--pfeil);
  align-self: start;
  /* senkrecht mittig zum 16:9-Bild, nicht zum ganzen Projekt mit Text */
  margin-top: calc(((100cqw - 2 * var(--pfeil) - 2 * var(--pfeil-abstand)) * 9 / 16 - var(--pfeil)) / 2);
  background: var(--farbe-grund-wechsel);
}

.vergleich__pfeil--zurueck { grid-area: zurueck; }
.vergleich__pfeil--weiter { grid-area: weiter; }

.vergleich__fenster {
  grid-area: fenster;
  overflow: hidden;
}

.vergleich__spur {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.vergleich__dia {
  flex: 0 0 100%;
  margin: 0;
}

/* Vorher liegt oben und wird bis zur Reglerposition angezeigt */
.vergleich__bild {
  --position: 50%;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  cursor: ew-resize;
  touch-action: pan-y;
  user-select: none;
}

.vergleich__ebene {
  position: absolute;
  inset: 0;
}

.vergleich__ebene--vorher {
  clip-path: inset(0 calc(100% - var(--position)) 0 0);
}

.vergleich__marke {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 1;
  padding: 8px 16px;
  background: var(--farbe-primaer);
  color: var(--farbe-text-hell);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 1.4;
  text-transform: uppercase;
}

.vergleich__marke--nachher {
  left: auto;
  right: 24px;
  background: var(--farbe-akzent);
}

.vergleich__griff {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--position);
  z-index: 2;
  width: 3px;
  background: var(--farbe-grund);
  transform: translateX(-50%);
  pointer-events: none;
}

.vergleich__knopf {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--farbe-grund);
  color: var(--farbe-akzent);
  font-size: 1.375rem;
  box-shadow: var(--schatten-karte);
  transform: translate(-50%, -50%);
  transition: background-color var(--uebergang), color var(--uebergang);
}

.vergleich__bild:hover .vergleich__knopf,
.vergleich__bild.ist-gezogen .vergleich__knopf {
  background: var(--farbe-akzent);
  color: var(--farbe-text-hell);
}

/* der Regler ist unsichtbar, bedient wird er per Tastatur; der Fokus zeigt sich am Griff */
.vergleich__regler {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.vergleich__bild:has(.vergleich__regler:focus-visible) .vergleich__knopf {
  outline: 2px solid var(--farbe-akzent);
  outline-offset: 3px;
}

.vergleich__text {
  display: block;
  max-width: 760px;
  margin-top: 32px;
}

.vergleich__text small {
  display: block;
  margin-bottom: 6px;
  color: var(--farbe-akzent);
  font-size: 0.875rem;
  font-weight: 600;
}

.vergleich__titel {
  display: block;
  color: var(--farbe-titel);
  font-family: var(--schrift-titel);
  font-size: 1.625rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.3;
}

.vergleich__beschreibung {
  display: block;
  margin-top: 10px;
}

.vergleich__zaehler {
  grid-area: zaehler;
  justify-self: end;
  margin: -28px 0 0;
  color: var(--farbe-text);
  font-family: var(--schrift-titel);
  font-size: 1.125rem;
  font-variant-numeric: tabular-nums;
}

.vergleich__aktuell {
  color: var(--farbe-titel);
  font-weight: 600;
}

/* ---------- Partner: Logoleiste ---------- */

.partner__liste {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
}

/* weiße Kacheln, Logos in Originalfarben; die Höhe gleicht die sehr
   unterschiedlichen Seitenverhältnisse optisch aus */
.partner__logo {
  display: grid;
  place-items: center;
  height: 150px;
  padding: 24px 32px;
  background: var(--farbe-grund);
  box-shadow: var(--schatten-karte);
}

.partner__logo img {
  display: block;
  width: auto;
  max-width: 100%;
  height: var(--logo-hoehe, 56px);
  /* zurückhaltend in Grau, Originalfarben erst beim Darüberfahren */
  filter: grayscale(1);
  opacity: 0.6;
  transition: filter var(--uebergang), opacity var(--uebergang);
}

.partner__logo:hover img,
.partner.ist-im-blick .partner__logo img {
  filter: none;
  opacity: 1;
}

/* mobil (ohne Hover) färben sich die Logos nacheinander, sobald die Leiste im Bild ist (main.js) */
.partner.ist-im-blick .partner__logo:nth-child(2) img { transition-delay: 0.1s; }
.partner.ist-im-blick .partner__logo:nth-child(3) img { transition-delay: 0.2s; }
.partner.ist-im-blick .partner__logo:nth-child(4) img { transition-delay: 0.3s; }

.partner__logo--velux { --logo-hoehe: 52px; }
.partner__logo--wuerth { --logo-hoehe: 42px; }
.partner__logo--raab-karcher { --logo-hoehe: 30px; }
.partner__logo--robert-roehlinger { --logo-hoehe: 66px; }

/* ---------- FAQ ---------- */

/* Desktop: links Kopf und Button untereinander, rechts die Fragen über beide Zeilen.
   Mobil (einspaltig) folgt der Button in der Quellreihenfolge erst nach den Fragen. */
.faq-bereich {
  grid-template-rows: auto 1fr;
  align-items: start;
  row-gap: 0;
}

.faq-bereich__kopf p {
  margin-block: 24px 36px;
}

.faq-bereich .faq {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.faq-bereich__aktion {
  grid-column: 1;
  grid-row: 2;
}

.faq {
  display: grid;
  gap: 20px;
}

.faq details {
  border: 1px solid var(--farbe-linie);
  background: var(--farbe-grund);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 30px;
  color: var(--farbe-titel);
  font-family: var(--schrift-titel);
  font-size: var(--stufe-frage);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.6;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary .icon {
  color: var(--farbe-akzent);
  font-size: 1.25rem;
  transition: transform var(--uebergang);
}

.faq details[open] {
  border-color: transparent;
}

.faq details[open] summary {
  border: 1px solid var(--farbe-linie);
  margin: -1px;
}

.faq details[open] summary .icon {
  transform: rotate(90deg);
}

.faq__antwort {
  padding: 20px 20px 4px;
}

/* ---------- Stimmen (Testimonials) ---------- */

/* oben grau, unten (Kartenende, Google-Button und Abstand zur nächsten Sektion) weiß */
.stimmen {
  position: relative;
  background: linear-gradient(var(--farbe-grund-wechsel) 0, var(--farbe-grund-wechsel) calc(100% - 270px - var(--abschnitt-abstand)), var(--farbe-grund) calc(100% - 270px - var(--abschnitt-abstand)));
}

.stimmen__kopf {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 64px;
}

.stimmen__kopf .kopf {
  margin-bottom: 0;
}

.stimmen__pfeile {
  display: flex;
  gap: 20px;
}

.stimmen__spur {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * 30px) / 3);
  gap: 30px;
  padding-bottom: 48px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.stimmen__spur::-webkit-scrollbar {
  display: none;
}

.stimme {
  margin: 0;
  scroll-snap-align: start;
}

.stimme__person {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 36px;
}

/* Initialen statt Foto */
.stimme__avatar {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: 50%;
  background: var(--farbe-akzent);
  color: var(--farbe-text-hell);
  font-family: var(--schrift-titel);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.stimme__name {
  display: block;
  color: var(--farbe-titel);
  font-family: var(--schrift-titel);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.stimme__ort {
  color: var(--farbe-text);
  line-height: 1.6;
}

.stimme__karte {
  position: relative;
  height: calc(100% - 92px);
  margin: 0;
  padding: 40px 40px 44px;
  background: var(--farbe-grund);
  color: var(--farbe-text);
  box-shadow: var(--schatten-karte);
}

/* Sprechblasen-Zeiger: senkrechte Kante unter der Mitte des Avatars, Schräge nach rechts unten */
.stimme__karte::before {
  content: "";
  position: absolute;
  left: 28px;
  /* 1 px in die Karte hinein, sonst bleibt bei krummen Pixelwerten eine Haarlinie */
  bottom: calc(100% - 1px);
  width: 28px;
  height: 21px;
  background: var(--farbe-grund);
  clip-path: polygon(0 0, 0 100%, 100% 100%);
}

.sterne {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  color: var(--farbe-akzent);
  font-size: 1.125rem;
}

.sterne .icon {
  fill: currentColor;
  stroke: none;
}

/* lange Rezensionen: gekürzt mit Ausblendung, per Button aufklappbar */
.stimme__text {
  position: relative;
  max-height: 288px;
  overflow: hidden;
}

.stimme__text p {
  margin-bottom: 0.75em;
}

.stimme__text.ist-gekuerzt::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 96px;
  background: linear-gradient(rgba(255, 255, 255, 0), var(--farbe-grund));
}

.stimme__text.ist-offen {
  max-height: none;
}

.stimme__text.ist-offen::after {
  content: none;
}

.stimme__aufklappen {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--farbe-akzent);
  font-weight: 600;
  cursor: pointer;
}

.stimme__aufklappen:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Pop-up (Rezension, Leistung): natives <dialog> */
.popup {
  width: min(680px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  padding: 0;
  border: 0;
  border-top: 5px solid var(--farbe-akzent);
  background: var(--farbe-grund);
  color: var(--farbe-text);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.popup[open] {
  display: flex;
  flex-direction: column;
  animation: dialog-ein 0.25s ease;
}

.popup::backdrop {
  background: rgba(27, 27, 27, 0.7);
}

@keyframes dialog-ein {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

.popup__schliessen {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 0;
  background: var(--farbe-akzent);
  color: var(--farbe-text-hell);
  font-size: 1.375rem;
  cursor: pointer;
  transition: background-color var(--uebergang);
}

.popup__schliessen:hover {
  background: var(--farbe-akzent-dunkel);
}

.popup__inhalt {
  padding: 44px 48px 40px;
  overflow-y: auto;
}

.popup__inhalt p {
  margin-bottom: 0.75em;
}

/* Leistung: Bild oben, Text darunter, beides scrollt gemeinsam */
.popup--leistung {
  width: min(760px, calc(100vw - 32px));
}

.popup__rahmen {
  overflow-y: auto;
}

.popup--leistung .popup__inhalt {
  overflow: visible;
}

.popup__bild {
  aspect-ratio: 16 / 7;
}

.popup__titel {
  margin-bottom: 16px;
  font-size: 2.25rem;
  line-height: 1.2;
}

.popup--leistung .haken {
  margin: 8px 0 28px;
}

.popup--leistung .haken li {
  align-items: flex-start;
}

.popup--leistung .haken .icon {
  margin-top: 0.5em;
}

/* Person im Pop-up auf hellem Grund */
.popup--rezension .stimme__person {
  margin-bottom: 24px;
  padding-right: 48px;
}

/* Link zum Google-Profil im weißen Teil des Abschnitts */
.stimmen__mehr {
  margin: 0;
  text-align: center;
}

/* ---------- Kontakt ---------- */

.rahmenbild {
  position: relative;
  padding: 40px 0 0 40px;
}

.rahmenbild::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 85%;
  height: 85%;
  border: 1px solid var(--farbe-akzent);
}

.rahmenbild .platzhalter,
.rahmenbild__bild {
  position: relative;
  display: block;
  aspect-ratio: 520 / 700;
}

.rahmenbild__bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.formular {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 40px;
}

.feld {
  display: grid;
  gap: 10px;
}

.feld--voll {
  grid-column: 1 / -1;
}

/* PLZ und Ort teilen sich eine Spalte, die PLZ ist schmal */
.feld-gruppe {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 5fr);
  gap: 16px;
}

/* fünf Ziffern müssen auch in der schmalen Spalte ganz sichtbar sein */
#f-plz {
  padding-inline: 14px;
}

.feld__optional {
  color: var(--farbe-text);
  font-family: var(--schrift-text);
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0;
}

.feld label {
  color: var(--farbe-titel);
  font-family: var(--schrift-titel);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.3;
}

.feld input,
.feld select,
.feld textarea {
  width: 100%;
  min-height: 60px;
  padding: 12px 20px;
  border: 1px solid var(--farbe-rand-feld);
  border-radius: 0;
  background: var(--farbe-grund);
  color: var(--farbe-titel);
  font-size: 1rem;
  line-height: 1.6;
  transition: border-color var(--uebergang);
}

.feld select {
  appearance: none;
  padding-right: 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 18px;
}

.feld textarea {
  min-height: 140px;
  resize: vertical;
}

.feld input::placeholder,
.feld textarea::placeholder {
  color: #767676;
}

.feld input:focus,
.feld select:focus,
.feld textarea:focus {
  border-color: var(--farbe-akzent);
  /* liegt genau auf dem 1-px-Rand: ein einziger, 2 px kräftiger roter Rahmen */
  outline: 2px solid var(--farbe-akzent);
  outline-offset: -1px;
}

/* ---------- Auswahlfeld (Anliegen, Quelle): echte Checkboxen bzw. Radios in einem Aufklappfeld ---------- */

.auswahl {
  position: relative;
  display: grid;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Überschrift wie die übrigen Feldbeschriftungen */
.auswahl legend {
  float: left;          /* sonst lässt sich die Legende nicht ins Raster einfügen */
  width: 100%;
  padding: 0;
  color: var(--farbe-titel);
  font-family: var(--schrift-titel);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.3;
}

/* Knopf: sieht aus wie ein Eingabefeld mit Pfeil, zeigt die aktuelle Auswahl */
.auswahl__knopf {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 60px;
  padding: 12px 48px 12px 20px;
  border: 1px solid var(--farbe-rand-feld);
  border-radius: 0;
  background: var(--farbe-grund) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 18px center / 18px;
  color: var(--farbe-titel);
  font-size: 1rem;
  line-height: 1.6;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--uebergang);
}

.auswahl__knopf[aria-expanded="true"] {
  border-color: var(--farbe-akzent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d11b1d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E");
}

.auswahl__knopf:focus-visible {
  border-color: var(--farbe-akzent);
  outline: 2px solid var(--farbe-akzent);
  outline-offset: -1px;
}

.auswahl__wert {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auswahl__wert--leer {
  color: #767676;
}

/* Liste: ohne JavaScript offen und im Fluss, als Aufklappfeld unter dem Knopf schwebend */
.auswahl__liste {
  display: grid;
  padding-block: 8px;
  border: 1px solid var(--farbe-rand-feld);
  background: var(--farbe-grund);
}

.auswahl--aufklappbar .auswahl__liste {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 340px;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}

.auswahl__liste[hidden] {
  display: none;
}

.auswahl__option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 20px;
  color: var(--farbe-titel);
  font-size: 1rem;
  line-height: 1.5;
  cursor: pointer;
  transition: background-color var(--uebergang);
}

.auswahl__option:hover {
  background: var(--farbe-grund-wechsel);
}

/* Kästchen bzw. Kreis im Stil der Seite: gewählt rot gefüllt mit weißem Haken bzw. Punkt */
.feld .auswahl__option input {
  appearance: none;
  display: grid;
  flex: none;
  place-content: center;
  width: 20px;
  height: 20px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 1.5px solid var(--farbe-rand-feld);
  border-radius: 0;
  background: var(--farbe-grund);
  cursor: pointer;
}

.feld .auswahl__option input[type="radio"] {
  border-radius: 50%;
}

.feld .auswahl__option input:checked {
  border-color: var(--farbe-akzent);
  background: var(--farbe-akzent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center / 14px;
}

.feld .auswahl__option input[type="radio"]:checked {
  background: var(--farbe-akzent);
  box-shadow: inset 0 0 0 4px var(--farbe-grund);
}

.feld .auswahl__option input:focus {
  outline: none;
}

.feld .auswahl__option input:focus-visible {
  outline: 2px solid var(--farbe-akzent);
  outline-offset: 2px;
}

.auswahl__option:has(input:checked) {
  font-weight: 600;
}

.formular__hinweis {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.7;
}

.formular__hinweis a {
  color: var(--farbe-primaer);
  text-decoration: underline;
}

.formular__absenden {
  grid-column: 1 / -1;
}

.formular__meldung {
  grid-column: 1 / -1;
  margin: 0;
  padding: 14px 20px;
  border-left: 4px solid var(--farbe-akzent);
  background: var(--farbe-rot-hauch);
  color: var(--farbe-titel);
  line-height: 1.6;
}

.formular__meldung--erfolg {
  border-left-color: var(--farbe-haken);
  background: #eaf5ec;
}

/* Pflichtfeld-Stern in der Beschriftung */
.feld__pflicht {
  color: var(--farbe-akzent);
}

/* Fangfeld für Bots: aus dem Bild geschoben, für Screenreader per aria-hidden ausgeblendet */
.formular__falle {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Karriere: Stellenanzeige als Karte ---------- */

.karriere__kopf {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 70px;
  align-items: end;
  margin-bottom: 56px;
}

.stelle {
  background: var(--farbe-grund);
  box-shadow: var(--schatten-karte);
}

/* Kopf wie das rote Feld der Anzeige */
.stelle__kopf {
  padding: 44px 48px 40px;
  background: var(--farbe-akzent);
  color: var(--farbe-text-hell);
}

.stelle__suche {
  display: block;
  margin-bottom: 6px;
  font-size: var(--stufe-overline-hero);
  font-weight: 700;
  letter-spacing: 4px;
  line-height: 28px;
  text-transform: uppercase;
}

.stelle__kopf h2 {
  color: var(--farbe-text-hell);
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  line-height: 1.15;
}

.stelle__eckdaten {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.stelle__eckdaten li {
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
}

/* das erste Merkmal (Vollzeit) schwarz hinterlegt wie das Band der Anzeige */
.stelle__eckdaten li:first-child {
  border-color: var(--farbe-primaer);
  background: var(--farbe-primaer);
}

.stelle__spalten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 48px;
  padding: 48px;
}

.stelle__rubrik {
  margin-bottom: 18px;
  color: var(--farbe-akzent);
  font-size: 1.25rem;
  line-height: 1.3;
}

.stelle__liste {
  display: grid;
  gap: 10px;
}

.stelle__liste li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  line-height: 1.6;
}

.stelle__liste .icon {
  flex: none;
  margin-top: 0.3em;
  font-size: 1.125rem;
}

.stelle__fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  margin-inline: 48px;
  padding-block: 32px 44px;
  border-top: 1px solid var(--farbe-linie);
}

.stelle__fuss p {
  margin: 0;
  color: var(--farbe-titel);
  font-family: var(--schrift-titel);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.4;
}

.stelle__fuss strong {
  color: var(--farbe-akzent);
}

.stelle__fuss p a {
  color: var(--farbe-akzent);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.stelle__wege {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* =========================================================================
   CTA-Band und Footer
   ========================================================================= */

.cta {
  --cta-ueberlappung: 160px;
  position: relative;
  z-index: 2;
  margin-bottom: calc(-1 * var(--cta-ueberlappung));
}

/* Startseite: das Grau der Kontakt-Sektion läuft hinter dem Band bis zum Footer weiter */
.cta--auf-grau {
  background: linear-gradient(var(--farbe-grund-wechsel) calc(100% - var(--cta-ueberlappung)), transparent 0);
}

/* Links Überschrift (eine Zeile) mit den Buttons darunter, rechts das Dachmodell */
.cta__band {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  min-height: 260px;
  padding: 40px 56px;
  background: var(--farbe-akzent);
  color: var(--farbe-text-hell);
}

/* Freigestelltes Dachmodell (wie bei „Unser Versprechen“): senkrecht mittig, ragt oben, unten und
   rechts über das Band hinaus. Negative Ränder, damit es weder Bandhöhe noch Textplatz bestimmt. */
.cta__modell {
  display: block;
  flex: none;
  width: 480px;
  margin-block: -120px;
  margin-right: -106px; /* 56 px Innenabstand + 50 px Überstand */
}

.cta__modell img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.3));
}

@media (max-width: 1399px) {
  .cta__band {
    gap: 28px;
    padding-inline: 40px;
  }

  .cta__modell {
    width: 410px;
    margin-right: -48px;  /* neben dem Band ist hier kaum Rand: nur 8 px Überstand */
  }
}

.cta__text {
  display: grid;
  flex: 1;
  gap: 28px;
  min-width: 0;
}

.cta__band h2 {
  color: var(--farbe-text-hell);
  font-size: var(--stufe-titel);
  line-height: 1.3;
}

.cta__band .buttons {
  flex: none;
  gap: 14px;
}

/* Desktop: Überschrift in einer Zeile */
@media (min-width: 1200px) {
  .cta__band h2 {
    white-space: nowrap;
  }
}

.footer {
  position: relative;
  padding-top: 240px;
  background: var(--farbe-primaer);
  color: var(--farbe-text-hell);
}

/* Seiten ohne rotes Band: kein Platz für die Überlappung nötig */
.footer.footer--ohne-cta {
  padding-top: var(--abschnitt-abstand);
}

/* Platzhalter für das eingefärbte Footer-Foto */
.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--platzhalter-4);
  opacity: 0.12;
  pointer-events: none;
}

.footer > * {
  position: relative;
}

.footer__raster {
  display: grid;
  grid-template-columns: 1.1fr 1.15fr 1.1fr 0.9fr 0.9fr;
  gap: 40px;
  padding-bottom: 90px;
}

.footer h2 {
  margin-bottom: 28px;
  color: var(--farbe-text-hell);
  font-size: var(--stufe-karte);
  line-height: 1.4;
}

/* Logo steht allein in der ersten Spalte: kein Abstand nach unten, den regelt das Raster */
.footer .logo {
  vertical-align: top;
}

.footer .logo__bild {
  height: 130px;
}

.footer__liste li ~ li { /* ~ statt +: zurückgestellte Einträge (<template>) dazwischen */
  margin-top: 9px;
}

.footer__liste a,
.footer__liste span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  line-height: 1.6;
}

.footer__liste .icon {
  color: var(--farbe-akzent-auf-dunkel);
  font-size: 1rem;
}

.footer__liste .footer__adresse {
  align-items: flex-start;
}

.footer__adresse .icon {
  margin-top: 0.3em;
}

.footer__liste a:hover {
  color: var(--farbe-akzent-auf-dunkel);
}

.footer__sozial {
  display: flex;
  gap: 12px;
  margin-top: 0;
}

.footer__sozial a {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--farbe-linie-dunkel);
  border-radius: 50%;
  font-size: 1.125rem;
  transition: background-color var(--uebergang), border-color var(--uebergang);
}

.footer__sozial a:hover {
  border-color: var(--farbe-akzent);
  background: var(--farbe-akzent);
}

.footer__unten {
  border-top: 1px solid var(--farbe-linie-dunkel);
}

.footer__unten .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 40px;
  min-height: 74px;
  padding-block: 16px;
}

.footer__unten ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 48px;
}

.footer__unten a:hover {
  color: var(--farbe-akzent-auf-dunkel);
}

/* Urheberhinweis: Text und Logo immer auf einer Zeile. Unter 400 px Breite schrumpfen Schrift,
   Abstand und Logo mit, damit die Zeile auch auf 320 px passt */
.footer__urheber {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px min(12px, 2.5vw);
  margin: 0;
  font-size: min(1rem, 4vw);
  white-space: nowrap;
}

.footer__urheber a {
  display: block;
  opacity: .85;
  transition: opacity .2s;
}

.footer__urheber a:hover,
.footer__urheber a:focus-visible {
  opacity: 1;
}

.footer__urheber img {
  display: block;
  width: auto;
  height: min(20px, 5vw);
}

/* ---------- Zum Seitenanfang ---------- */

/* erscheint erst nach etwa einem Bildschirm Scrollen (main.js) */
.nach-oben {
  position: fixed;
  right: 24px;
  bottom: calc(24px + var(--fuss-anheben, 0px));   /* am Seitenende über der Footer-Unterzeile (main.js) */
  z-index: 40;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  background: var(--farbe-akzent);
  color: var(--farbe-text-hell);
  font-size: 1.25rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--uebergang), transform var(--uebergang), visibility var(--uebergang), background-color var(--uebergang);
}

.nach-oben.ist-sichtbar {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.nach-oben:hover {
  background: var(--farbe-akzent-dunkel);
}

/* =========================================================================
   Unterseiten
   ========================================================================= */

/* reine Textseiten (Impressum, Datenschutz) */
.textseite {
  max-width: 850px;
  margin-inline: auto;
}

.textseite__titel {
  margin-bottom: 40px;
}

.textseite h2 {
  margin: 48px 0 14px;
  font-size: var(--stufe-karte);
  line-height: 1.4;
}

.textseite h2:first-child {
  margin-top: 0;
}

.textseite h3 {
  margin: 28px 0 8px;
  font-size: var(--stufe-frage);
  font-weight: 500;
  line-height: 1.5;
}

.textseite h4 {
  margin: 20px 0 6px;
  font-size: var(--stufe-text);
  font-weight: 500;
  line-height: 1.5;
}

/* Aufzählungen in Rechtstexten: kleine rote Quadrate, passend zur eckigen Formensprache */
.textseite ul {
  margin: 0 0 16px;
}

.textseite li {
  position: relative;
  padding-left: 22px;
}

.textseite li + li {
  margin-top: 8px;
}

.textseite li::before {
  content: "";
  position: absolute;
  top: .7em;
  left: 2px;
  width: 6px;
  height: 6px;
  background: var(--farbe-akzent);
}

.textseite a {
  color: var(--farbe-akzent);
  text-decoration: underline;
}

.textseite address {
  font-style: normal;
}

.hinweisbox {
  margin-bottom: 48px;
  padding: 20px 28px;
  border-top: 5px solid var(--farbe-akzent);
  background: var(--farbe-grund-wechsel);
  color: var(--farbe-titel);
  line-height: 1.8;
}

/* =========================================================================
   Responsiv
   ========================================================================= */

@media (max-width: 1199px) {
  :root {
    --abschnitt-abstand: 100px;
  }

  .navigation__liste {
    gap: 24px;
  }

  .kopf-aktionen .button {
    display: none;
  }

  .raster--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .leistungen__raster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .leistungen__band::before {
    top: 300px;
  }

  .pakete {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
  }

  .pakete__intro {
    padding-right: 0;
  }

  .pakete__bild {
    display: none;
  }

  .stimmen__spur {
    grid-auto-columns: calc((100% - 30px) / 2);
  }

  .cta__band {
    padding-inline: 44px;
  }

  .cta__modell {
    display: none;
  }

  .footer__raster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Logo in eigener Zeile, darunter die vier Spalten als 2 × 2 */
  .footer__raster > :first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 991px) {
  :root {
    --abschnitt-abstand: 80px;
    --kopfzeile-hoehe: 80px;
  }

  .topbar {
    display: none;
  }

  /* mobil: dunkle Leiste wie auf dem Desktop, im Fluss oben angeheftet */
  .kopfzeile,
  .kopfzeile.ist-fixiert {
    position: sticky;
    top: 0;
    background: var(--farbe-primaer);
    color: var(--farbe-text-hell);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    animation: none;
  }

  .kopfzeile.ist-fixiert .container {
    height: var(--kopfzeile-hoehe);
  }

  /* mobil liegt die Kopfzeile im Fluss */
  .abschnitt--seitenanfang {
    padding-top: var(--abschnitt-abstand);
  }

  /* dunkle Leiste: Logo rot und weiß, Menüknopf weiß */
  .kopfzeile .logo {
    --logo-dach: var(--farbe-akzent);
    --logo-text: var(--farbe-text-hell);
  }

  .menue-knopf {
    color: var(--farbe-text-hell);
  }

  .kopfzeile .logo__bild,
  .kopfzeile.ist-fixiert .logo__bild {
    height: 60px;
  }

  .navigation {
    display: none;
  }

  .menue-knopf {
    display: grid;
  }

  /* mobil: Text oben, darunter das Foto mit schräger Oberkante (gleiche Richtung wie die
     Desktop-Schräge); die Buttons sitzen unten im Foto auf den Ziegeln. Dafür lösen sich
     Container und Textblock auf (display: contents), damit Foto und Buttons dieselbe
     Rasterzelle teilen können. */
  /* genau eine Bildschirmhöhe (svh: ohne die ein- und ausfahrende Browserleiste);
     das Foto füllt den Rest unter dem Text, die Buttons stehen damit immer im Bild */
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto minmax(250px, 1fr);
    align-items: stretch;
    min-height: 100vh;
    min-height: 100svh;
    padding: 110px var(--container-innen) 0;
    text-align: center;
  }

  .hero__inhalt,
  .hero__text {
    display: contents;
  }

  /* über der leichten Abdunkelung des Hero-Grunds (.hero::before) */
  .hero__overline,
  .hero h1,
  .hero__einleitung {
    position: relative;
    z-index: 1;
  }

  .hero__bild {
    position: relative;
    inset: auto;
    grid-row: 4;
    grid-column: 1;
    margin: 40px calc(-1 * var(--container-innen)) 0;
    clip-path: polygon(0 18%, 100% 0, 100% 100%, 0 100%);
    background-position: 30% 35%;
  }

  /* unten abgedunkelt, damit die Buttons auf dem Foto gut stehen */
  .hero__bild::before {
    inset: auto 0 0 0;
    height: 55%;
    background: linear-gradient(rgba(27, 27, 27, 0), rgba(27, 27, 27, 0.55));
  }

  .hero .buttons {
    position: relative;
    z-index: 2;
    grid-row: 4;
    grid-column: 1;
    align-self: end;
    padding-bottom: 32px;
  }

  .hero__text {
    margin-inline: auto;
  }

  .hero h1 {
    letter-spacing: -0.02em;
  }

  .hero__einleitung {
    margin-inline: auto;
  }

  .hero .buttons {
    justify-content: center;
  }

  .zweispalter {
    grid-template-columns: minmax(0, 1fr);
    gap: 56px;
  }

  .formular__absenden {
    text-align: center;
  }

  /* die Abstände regeln Absatz und Button selbst, nicht der Zweispalter-Abstand */
  .faq-bereich {
    row-gap: 0;
  }

  .faq-bereich .faq,
  .faq-bereich__aktion {
    grid-column: auto;
    grid-row: auto;
  }

  .faq-bereich__kopf {
    text-align: center;
  }

  .faq-bereich__kopf p {
    margin-bottom: 32px;
  }

  /* Kontakt: Überzeile und Titel mittig, das Formular bleibt linksbündig */
  #kontakt .overline,
  #kontakt-titel {
    text-align: center;
  }

  .faq-bereich__aktion {
    margin-top: 40px;
    text-align: center;
  }

  .partner__liste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .partner__logo {
    height: 110px;
    padding: 16px 20px;
  }

  /* Kundenstimmen: mobil nur wischen, keine Pfeiltasten */
  .stimmen__pfeile {
    display: none;
  }

  /* Versprechen einspaltig: Text mittig über dem Kreisbild */
  .versprechen .zweispalter > div:first-child {
    text-align: center;
  }

  .versprechen p {
    margin-inline: auto;
  }

  .collage {
    height: 520px;
  }

  .raster--3 {
    grid-template-columns: minmax(0, 1fr);
    max-width: 560px;
    margin-inline: auto;
  }

  .leistungen__band::before {
    top: 200px;
  }


  /* Pfeile wandern unter das Bild, der Zähler steht zwischen ihnen */
  .vergleich {
    --pfeil: 52px;
    grid-template-columns: var(--pfeil) minmax(0, 1fr) var(--pfeil);
    grid-template-areas:
      "fenster fenster fenster"
      "zurueck zaehler weiter";
    row-gap: 24px;
    column-gap: 16px;
  }

  .vergleich__pfeil {
    align-self: center;
    margin-top: 0;
    font-size: 1.125rem;
  }

  .vergleich__zaehler {
    align-self: center;
    justify-self: center;
    margin: 0;
  }

  .vergleich__titel {
    font-size: 1.375rem;
  }

  .stimmen__kopf {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .karriere__kopf {
    grid-template-columns: minmax(0, 1fr);
  }

  .stelle__spalten {
    grid-template-columns: minmax(0, 1fr);
  }

}

@media (max-width: 767px) {
  /* zwei Buttons im Pop-up (Wartungsarbeiten): untereinander und gleich breit */
  .popup__inhalt .buttons .button {
    flex: 1 1 100%;
  }

  /* Hero-Buttons enden über dem Knopf „Darstellung anpassen“ unten links (46 px + 16 px Rand) */
  .hero .buttons {
    padding-bottom: calc(var(--bf-groesse, 46px) + 32px);
  }

  .vergleich__marke {
    top: 12px;
    left: 12px;
    padding: 6px 10px;
    font-size: 0.75rem;
    letter-spacing: 1.5px;
  }

  .vergleich__marke--nachher {
    left: auto;
    right: 12px;
  }

  .vergleich__bild {
    aspect-ratio: 4 / 3;
  }

  .vergleich__knopf {
    width: 46px;
    height: 46px;
    font-size: 1.125rem;
  }

  .raster--4,
  .raster--2,
  .pakete {
    grid-template-columns: minmax(0, 1fr);
  }

  .leistungen__raster {
    grid-template-columns: minmax(0, 1fr);
  }

  .stelle__kopf {
    padding: 32px 24px 28px;
  }

  .stelle__spalten {
    padding: 36px 24px;
  }

  .stelle__fuss {
    margin-inline: 24px;
    padding-block: 28px 32px;
  }

  .collage {
    height: 440px;
  }

  .collage__box {
    top: auto;
    bottom: 47%;
    left: auto;
    right: 0;
    width: 150px;
    height: 140px;
  }

  .collage__box strong {
    font-size: 2.5rem;
  }

  .paketkarte__koerper {
    padding: 28px 24px 32px;
  }

  .stimmen {
    background: linear-gradient(var(--farbe-grund-wechsel) 0, var(--farbe-grund-wechsel) calc(100% - 210px - var(--abschnitt-abstand)), var(--farbe-grund) calc(100% - 210px - var(--abschnitt-abstand)));
  }

  .stimmen__spur {
    grid-auto-columns: 88%;
    gap: 16px;
  }

  .stimme__karte {
    padding: 32px 28px 36px;
  }

  .popup__inhalt {
    padding: 36px 24px 28px;
  }

  .popup__titel {
    font-size: 1.75rem;
  }

  .popup__bild {
    aspect-ratio: 16 / 9;
  }

  .formular {
    grid-template-columns: minmax(0, 1fr);
  }

  .cta {
    --cta-ueberlappung: 120px;
  }

  .cta__band {
    flex-direction: column;
    gap: 28px;
    padding: 44px 28px;
    text-align: center;
  }

  .cta__band .buttons {
    justify-content: center;
  }

  /* drei Buttons untereinander, gleich breit */
  .cta__band .buttons {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 340px;
    margin-inline: auto;
  }

  .footer {
    padding-top: 200px;
  }

  .footer__raster {
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: 60px;
    text-align: center;
  }

  .footer__raster p {
    max-width: 360px;
    margin-inline: auto;
  }

  .footer__sozial {
    justify-content: center;
  }

  /* Adresse als Block mittig, die beiden Zeilen bündig neben dem Icon */
  .footer__adresse > span {
    text-align: left;
  }

  .footer__unten .container {
    justify-content: center;
    text-align: center;
  }

  .footer__unten ul {
    justify-content: center;
    gap: 8px 28px;
  }

  .faq summary {
    padding: 16px 20px;
  }
}

@media (max-width: 479px) {
  /* drei Kennzahlen bleiben auch auf schmalen Handys nebeneinander */
  .kennzahl {
    padding-inline: 6px;
  }

  .kennzahl .icon {
    margin-bottom: 12px;
    font-size: 2.5rem;
  }

  .kennzahl strong {
    font-size: 2.125rem;
  }

  .kennzahl span {
    display: block;
    font-size: 0.875rem;
    line-height: 1.4;
  }

  .nach-oben {
    right: 16px;
    bottom: calc(16px + var(--fuss-anheben, 0px));
    width: 46px;
    height: 46px;
    font-size: 1.125rem;
  }

  .hero h1 {
    font-size: 2rem;
  }

  .stimmen__mehr .button {
    padding-inline: 22px;
  }

  .buttons {
    gap: 16px;
  }

  .hero .buttons .button {
    flex: 1 1 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* html ohne Übergang: sonst „wandert“ die Grundschrift beim Umschalten der Textgröße (darstellung.css) */
  html {
    scroll-behavior: auto;
    transition: none !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Startseite mobil: großes weißes Logo mittig über dem roten Hero, das beim Scrollen in die
   weiße Leiste gleitet (Schwelle in main.js). Steht am Dateiende, damit es die allgemeinen
   Mobilregeln der Kopfzeile überschreibt. */
@media (max-width: 991px) {
  .kopfzeile--auf-rot,
  .kopfzeile--auf-rot.ist-fixiert {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    transition: background-color 0.35s ease, box-shadow 0.35s ease;
  }

  .kopfzeile--auf-rot:not(.ist-fixiert) {
    background: transparent;
    box-shadow: none;
    color: var(--farbe-text-hell);
  }

  .kopfzeile--auf-rot:not(.ist-fixiert) .logo {
    --logo-dach: var(--farbe-akzent);
    --logo-text: var(--farbe-text-hell);
  }

  .kopfzeile--auf-rot:not(.ist-fixiert) :focus-visible {
    outline-color: var(--farbe-text-hell);
  }

  /* großes Logo (130 px) mittig über dem Hero, gleitet beim Scrollen kleiner an seinen Platz
     in der Leiste – die Mitte bleibt (Lage der Kopfzeilen-Elemente am Dateiende) */
  .kopfzeile--auf-rot .logo {
    transition: top 0.35s ease;
  }

  .kopfzeile--auf-rot:not(.ist-fixiert) .logo {
    top: 28px;
  }

  /* ohne Spaltenabstand passt der Menüknopf auch auf 320 px noch neben das mittige Logo;
     nach rechts schiebt ihn ohnehin margin-left: auto */
  .kopfzeile--auf-rot .container {
    column-gap: 0;
  }

  .kopfzeile--auf-rot .logo__bild {
    transition: height 0.35s ease;
  }

  .kopfzeile--auf-rot:not(.ist-fixiert) .logo__bild {
    height: 130px;
  }

  /* über dem Hero: Menü- und Stellen-Knopf auf Höhe der Logo-Oberkante */
  .kopfzeile--auf-rot:not(.ist-fixiert) .menue-knopf {
    top: 16px;
    translate: none;
  }

  /* Kopfzeile liegt über dem Hero: Platz für das große Logo */
  .hero {
    padding-top: 210px;
  }
}

/* Startseite mobil auf niedrigen Bildschirmen (z. B. iPhone SE): Logo und Abstände kompakter,
   damit der Hero samt Buttons in eine Bildschirmhöhe passt. 96 px Logo = 148,8 px breit. */
@media (max-width: 991px) and (max-height: 760px) {
  .kopfzeile--auf-rot:not(.ist-fixiert) .logo {
    top: 18px;
  }

  .kopfzeile--auf-rot:not(.ist-fixiert) .logo__bild {
    height: 96px;
  }

  .hero {
    grid-template-rows: auto auto auto minmax(220px, 1fr);
    padding-top: 140px;
  }

  .hero__overline {
    margin-bottom: 12px;
  }

  .hero h1 {
    margin-bottom: 16px;
  }

  .hero__bild {
    margin-top: 24px;
  }
}


/* Einzeilige Buttons dürfen auf dem Handy umbrechen, wenn ihr Text nicht in die Zeile passt
   (große Schrift, eigene Textabstände nach WCAG 1.4.12), statt über den Rand zu ragen */
@media (max-width: 767px) {
  .button {
    white-space: normal;
    text-wrap: balance;
    text-align: center;
  }
}

/* Große Schrift auf dem Desktop: Die Kopfzeile behält ihre Grundgröße, sonst stößt die Navigation an das
   Logo; Inhalte wachsen weiter. Der Hero-Text beginnt fest unter dem großen Logo statt mittig zu stehen. */
@media (min-width: 992px) {
  html[data-bf-text] :is(.navigation__liste a, .kopf-aktionen .button) {
    font-size: 16px;
  }

  html[data-bf-text] .hero {
    align-items: flex-start;
    padding-top: calc(var(--kopfzeile-hoehe) + 200px);
    padding-bottom: 100px;
  }
}

/* Große Schrift oder mehr Abstand: auch zusammengehörige Angaben („Spiesen-Elversberg“) dürfen umbrechen */
html:is(.bf-abstand, [data-bf-text]) .stelle__fuss p a {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Der Menüknopf hat eine feste Fläche (48 px); sein Symbol wächst nicht mit der Textgröße */
html[data-bf-text] .menue-knopf {
  font-size: 30px;
}

/* KI-generierte Bilder (KI-Verordnung Art. 50): kleines Etikett unten rechts. Der Text ist für
   Screenreader ausgeblendet („/ ''“), dort steht der Hinweis im Alternativtext. Nachweis im Impressum. */
[data-ki] {
  position: relative;
}

[data-ki]::after {
  content: "KI-Symbolbild" / "";
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 2;
  padding: 2px 8px;
  border-radius: 2px;
  background: rgba(27, 27, 27, 0.72);
  color: #ffffff;
  font-family: var(--schrift-text);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.02em;
  pointer-events: none;
  opacity: 0.5;
  transition: opacity var(--uebergang);
}

/* voll sichtbar beim Darüberfahren über Bild oder Kachel bzw. bei Tastaturfokus in der Kachel */
[data-ki]:hover::after,
.fotokarte:is(:hover, :focus-within, .ist-im-blick) [data-ki]::after {
  opacity: 1;
}

/* =========================================================================
   Stellenanzeige: Pop-up beim ersten Besuch und Knopf in der Kopfzeile
   ========================================================================= */

.popup--stelle {
  width: min(620px, calc(100vw - 32px));
}

/* beim Auf- und Zuklappen über den Knopf übernimmt main.js die Bewegung */
.popup--stelle.ist-im-flug {
  animation: none;
}

.popup--stelle .stelle__kopf {
  padding: 40px 48px 34px;
}

.popup--stelle .popup__schliessen {
  background: rgba(27, 27, 27, 0.28);
}

.popup--stelle .popup__schliessen:hover {
  background: var(--farbe-primaer);
}

.popup--stelle .popup__inhalt {
  padding: 32px 48px 40px;
}

.popup--stelle .buttons {
  gap: 16px;
  margin-top: 24px;
}

/* Knopf links neben dem Telefon-Button: Aktentasche im Kreis, roter Punkt als Hinweis */
.stellen-knopf {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 60px;
  height: 60px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  color: var(--farbe-text-hell);
  font-size: 1.5rem;
  transition: background-color var(--uebergang), color var(--uebergang), border-color var(--uebergang), opacity 0.3s ease, visibility 0.3s;
}

.stellen-knopf .icon {
  stroke-width: 1.6;
}

.stellen-knopf:hover {
  border-color: var(--farbe-text-hell);
  background: var(--farbe-text-hell);
  color: var(--farbe-akzent);
}

/* Startseite beim ersten Besuch: Platz bleibt frei, der Knopf erscheint, wenn das Pop-up schließt */
.stellen-knopf[data-erst-nach-popup]:not(.ist-bereit) {
  visibility: hidden;
  opacity: 0;
}

.stellen-knopf__punkt {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--farbe-akzent);
  box-shadow: 0 0 0 2px var(--farbe-text-hell);
  animation: stellen-puls 2.4s ease-out infinite;
}

@keyframes stellen-puls {
  0% { box-shadow: 0 0 0 2px var(--farbe-text-hell), 0 0 0 2px rgba(255, 255, 255, 0.6); }
  70%, 100% { box-shadow: 0 0 0 2px var(--farbe-text-hell), 0 0 0 12px rgba(255, 255, 255, 0); }
}

/* Hinweis beim Darüberfahren bzw. Tastaturfokus */
.stellen-knopf__tipp {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  padding: 6px 12px;
  background: var(--farbe-grund);
  color: var(--farbe-titel);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--uebergang);
}

.stellen-knopf:is(:hover, :focus-visible) .stellen-knopf__tipp {
  opacity: 1;
}

.bf-ruhig .stellen-knopf__punkt {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .stellen-knopf__punkt {
    animation: none;
  }
}

/* mobil auf allen Seiten: Menüknopf links, Logo mittig, Stellen-Knopf rechts – auch in der festen Leiste */
@media (max-width: 991px) {
  .kopfzeile .container {
    position: relative;
  }

  /* mobil keine Gruppe: der Telefon-Button steckt im Menü, der Stellen-Knopf sitzt frei */
  .kopf-aktionen {
    display: contents;
  }

  .kopfzeile .logo {
    position: absolute;
    top: calc((var(--kopfzeile-hoehe) - 60px) / 2);
    left: 50%;
    margin: 0;
    translate: -50% 0;
  }

  .menue-knopf {
    position: absolute;
    top: 50%;
    left: calc(var(--container-innen) - 10px);   /* Symbol bündig mit dem Seitenrand */
    margin: 0;
    translate: 0 -50%;
  }

  .stellen-knopf {
    position: absolute;
    top: 50%;
    right: var(--container-innen);
    width: 44px;
    height: 44px;
    margin: 0;
    font-size: 1.25rem;
    translate: 0 -50%;
  }

  .kopfzeile--auf-rot:not(.ist-fixiert) .stellen-knopf {
    top: 18px;
    translate: none;
  }

  .stellen-knopf__tipp {
    display: none;
  }

  .popup--stelle .stelle__kopf {
    padding: 32px 24px 26px;
  }

  .popup--stelle .popup__inhalt {
    padding: 26px 24px 30px;
  }
}