/* ==========================================================================
   Haydari Fahrzeugaufbereitung, Fulda
   Umsetzung: Gabriel Wolf Webdesign

   Aufbau der Datei
   1  Schriften
   2  Farben und Masse
   3  Grundlagen
   4  Typografie
   5  Schaltflaechen
   6  Kopf und Navigation
   7  Handy-Navigation
   8  Hero
   9  Abschnitte und Raster
   10 Bausteine (Karten, Kennzahlen, Wischer, Listen)
   11 Formular
   12 Fuss
   13 Bewegung und Einblendungen
   ========================================================================== */

/* ============================================================ 1 Schriften */
/* Lokal gehostet, kein Google-Fonts-CDN (DSGVO). Beide variabel. */

@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hankengrotesk-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hankengrotesk-var-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Unbounded";
  src: url("../fonts/unbounded-var-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Unbounded";
  src: url("../fonts/unbounded-var-latin-ext.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ===================================================== 2 Farben und Masse */
:root {
  /* Dunkel: der Grundton der Marke, Lack bei Nacht */
  --tinte: #080b10;
  --kohle: #0f141c;
  --kohle-hell: #161e29;
  --linie: #232e3b;
  --linie-hell: #2f3d4d;

  /* Hell: Abschnitte mit viel Text lesen sich hell deutlich besser */
  --papier: #f2f6f7;
  --papier-tief: #e4ebed;
  --papier-linie: #cfd9dd;

  /* CI */
  --ci: #17cfc0;
  --ci-hell: #7bf3e6;
  --ci-blass: #c9fff8;
  --ci-tief: #0b7c73; /* fuer Text auf hellem Grund, Kontrast 4.7:1 */
  --ci-rgb: 23, 207, 192;

  /* Text */
  --text-hell: #eaf2f4;
  --text-gedaempft: #9db0be;
  --text-dunkel: #10161d;
  --text-dunkel-gedaempft: #4e606d;

  /* Masse */
  --breite: 1220px;
  --breite-schmal: 760px;
  --rand: clamp(1.15rem, 4vw, 2.5rem);
  --luft: clamp(4.5rem, 9vw, 8.5rem);
  --luft-klein: clamp(2.75rem, 5vw, 4rem);
  --radius: 14px;
  --radius-gross: 22px;

  --kopf-hoehe: 76px;

  --schatten: 0 18px 50px rgba(4, 8, 12, 0.45);
  --schatten-hell: 0 14px 40px rgba(16, 32, 40, 0.1);

  --tempo: 520ms;
  --kurve: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ========================================================= 3 Grundlagen */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopf-hoehe) + 1.5rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--tinte);
  color: var(--text-hell);
  font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  font-size: clamp(1.02rem, 0.98rem + 0.2vw, 1.12rem);
  line-height: 1.68;
  font-weight: 380;
  -webkit-font-smoothing: antialiased;
  /* Der Seitenrumpf verbirgt waagerechten Ueberlauf. Achtung bei der
     Pruefung: Damit waechst die Dokumentbreite nicht mehr, ein ueber den
     Rand laufendes Element faellt also nur beim Messen pro Element auf. */
  overflow-x: hidden;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

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

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

.sprungmarke {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -140%);
  z-index: 300;
  background: var(--ci);
  color: var(--tinte);
  font-weight: 700;
  padding: 0.75rem 1.4rem;
  border-radius: 0 0 var(--radius) var(--radius);
  transition: transform 220ms var(--kurve);
}
.sprungmarke:focus {
  transform: translate(-50%, 0);
}

/* ======================================================== 4 Typografie */
h1,
h2,
h3,
h4 {
  font-family: "Unbounded", "Hanken Grotesk", sans-serif;
  font-weight: 700;
  line-height: 1.08;
  margin: 0 0 0.6em;
  letter-spacing: -0.005em;
  overflow-wrap: break-word;
  word-break: normal;
  /* Am Desktop KEINE automatische Trennung: Dort ist Platz, und eine
     Trennung wie "mit-ten" sieht in einer Displayschrift nach Versehen
     aus. Stattdessen ausgeglichene Zeilen. */
  hyphens: manual;
  -webkit-hyphens: manual;
  text-wrap: balance;
}

/* Am Handy ist jede Spalte schmaler als ein deutsches Kompositum wie
   "Fahrzeugaufbereitung". Hier wird getrennt, sonst laeuft das Wort aus
   der Spalte. Erst ab zehn Zeichen, damit nicht auch "sauber" zerfaellt. */
@media (max-width: 699px) {
  h1,
  h2,
  h3,
  h4 {
    hyphens: auto;
    -webkit-hyphens: auto;
    text-wrap: pretty;
    hyphenate-limit-chars: 10 4 4;
    -webkit-hyphenate-limit-chars: 10 4 4;
  }
  h1 {
    hyphenate-limit-chars: 12 4 4;
    -webkit-hyphenate-limit-chars: 12 4 4;
  }
}

p,
li,
dd,
dt,
figcaption,
label,
th,
td {
  overflow-wrap: break-word;
}

/* Im Fliesstext hilft die Trennung in schmalen Spalten, am Desktop
   erzeugt sie nur unruhige Raender. */
@media (max-width: 699px) {
  p,
  li,
  dd,
  dt,
  figcaption,
  label,
  th,
  td {
    hyphens: auto;
    -webkit-hyphens: auto;
    hyphenate-limit-chars: 9 4 4;
    -webkit-hyphenate-limit-chars: 9 4 4;
  }
}

h1 {
  font-size: clamp(2.1rem, 1.1rem + 4.4vw, 4.4rem);
  letter-spacing: -0.018em;
}
h2 {
  font-size: clamp(1.68rem, 1.1rem + 2.5vw, 2.9rem);
  letter-spacing: -0.012em;
}
h3 {
  font-size: clamp(1.2rem, 1.02rem + 0.8vw, 1.5rem);
}
h4 {
  font-size: clamp(1.02rem, 0.96rem + 0.34vw, 1.16rem);
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 700;
  letter-spacing: 0;
}

p {
  margin: 0 0 1.15em;
  max-width: 68ch;
}

.vorlauf {
  display: flex;
  width: fit-content;
  align-items: center;
  line-height: 1.2;
  gap: 0.65rem;
  font-size: 0.775rem;
  font-weight: 700;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--ci);
  margin-bottom: 1.35rem;
}
.vorlauf::before {
  content: "";
  width: 30px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--ci));
  flex: none;
}
.hell-auf-dunkel .vorlauf {
  color: var(--ci-tief);
}
.hell-auf-dunkel .vorlauf::before {
  background: linear-gradient(90deg, transparent, var(--ci-tief));
}

.fuehrung {
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.32rem);
  line-height: 1.55;
  color: var(--text-hell);
  font-weight: 420;
  max-width: 54ch;
}
.hell-auf-dunkel .fuehrung {
  color: var(--text-dunkel);
}

.gedaempft {
  color: var(--text-gedaempft);
}
.hell-auf-dunkel .gedaempft {
  color: var(--text-dunkel-gedaempft);
}

.ci-wort {
  color: var(--ci);
}
.hell-auf-dunkel .ci-wort {
  color: var(--ci-tief);
}

/* Textlinks im Fliesstext bekommen eine Unterlaenge, die beim Ueberfahren
   von links nach rechts durchlaeuft, wie ein Wisch */
.textlink {
  color: var(--ci);
  text-decoration: none;
  background-image: linear-gradient(var(--ci), var(--ci));
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 2px;
  transition: background-size 320ms var(--kurve);
}
.textlink:hover {
  background-size: 0% 1px;
  background-position: 100% 100%;
}
.hell-auf-dunkel .textlink {
  color: var(--ci-tief);
  background-image: linear-gradient(var(--ci-tief), var(--ci-tief));
}

/* ==================================================== 5 Schaltflaechen */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.75rem;
  border: 0;
  border-radius: 999px;
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform 260ms var(--kurve), box-shadow 260ms var(--kurve),
    background-color 260ms var(--kurve), color 260ms var(--kurve);
  text-align: center;
}
.knopf:hover {
  transform: translateY(-2px);
}
/* Ohne feste Groesse skaliert ein Inline-SVG auf die Schriftgroesse hoch
   und sprengt den Knopf. */
.knopf svg {
  width: 18px;
  height: 18px;
  flex: none;
}
.knopf span {
  white-space: nowrap;
}
.knopf:active {
  transform: translateY(0);
}

.knopf--haupt {
  background: var(--ci);
  color: #04221f;
  box-shadow: 0 10px 30px rgba(var(--ci-rgb), 0.25);
}
.knopf--haupt:hover {
  box-shadow: 0 16px 40px rgba(var(--ci-rgb), 0.36);
}
/* Lichtreflex umrundet den Knopf, aus der Effekt-Bibliothek */
.knopf--haupt::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    110deg,
    transparent 28%,
    rgba(255, 255, 255, 0.72) 46%,
    transparent 62%
  );
  transform: translateX(-120%);
  transition: transform 0s;
}
.knopf--haupt:hover::after {
  animation: glanz-durchlauf 900ms var(--kurve);
}
@keyframes glanz-durchlauf {
  to {
    transform: translateX(120%);
  }
}

.knopf--rand {
  background: transparent;
  color: var(--text-hell);
  box-shadow: inset 0 0 0 1.5px var(--linie-hell);
}
.knopf--rand:hover {
  box-shadow: inset 0 0 0 1.5px var(--ci);
  color: var(--ci);
}
.hell-auf-dunkel .knopf--rand {
  color: var(--text-dunkel);
  box-shadow: inset 0 0 0 1.5px var(--papier-linie);
}
.hell-auf-dunkel .knopf--rand:hover {
  box-shadow: inset 0 0 0 1.5px var(--ci-tief);
  color: var(--ci-tief);
}

.knopf-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 2rem;
}

/* =============================================== 6 Kopf und Navigation */
.kopf {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--kopf-hoehe);
  display: flex;
  align-items: center;
  transition: background-color 380ms var(--kurve),
    box-shadow 380ms var(--kurve), backdrop-filter 380ms var(--kurve);
}
.kopf.ist-gescrollt {
  background: rgba(8, 11, 16, 0.82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07);
}

.kopf__innen {
  width: min(100% - 2 * var(--rand), var(--breite));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.marke {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  text-decoration: none;
  flex: none;
}
.marke__zeichen {
  width: 32px;
  height: 37px;
  flex: none;
}
.marke__text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.marke__name {
  font-family: "Unbounded", sans-serif;
  font-weight: 700;
  font-size: 1.04rem;
  letter-spacing: 0.03em;
  color: var(--text-hell);
}
.marke__zusatz {
  font-size: 0.56rem;
  letter-spacing: 0.26em;
  font-weight: 600;
  color: var(--ci);
  margin-top: 4px;
}

.navi {
  display: none;
}
.navi__liste {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 1.7vw, 1.9rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.navi__link {
  position: relative;
  text-decoration: none;
  color: var(--text-gedaempft);
  font-size: 0.945rem;
  font-weight: 500;
  padding: 0.4rem 0;
  transition: color 240ms var(--kurve);
  white-space: nowrap;
}
.navi__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--ci);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms var(--kurve);
}
.navi__link:hover,
.navi__link[aria-current="page"] {
  color: var(--text-hell);
}
.navi__link:hover::after,
.navi__link[aria-current="page"]::after {
  transform: scaleX(1);
}

.kopf__aktion {
  display: none;
}

/* Hamburger */
.navi-schalter {
  width: 46px;
  height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  gap: 0;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px var(--linie);
  cursor: pointer;
  padding: 0;
}
.navi-schalter__balken {
  display: block;
  width: 19px;
  height: 2px;
  background: var(--text-hell);
  border-radius: 2px;
  transition: transform 300ms var(--kurve), opacity 200ms var(--kurve);
}
.navi-schalter__balken + .navi-schalter__balken {
  margin-top: 5px;
}

@media (min-width: 1000px) {
  .navi {
    display: block;
  }
  .kopf__aktion {
    display: inline-flex;
  }
  .navi-schalter {
    display: none;
  }
}

/* ============================================= 7 Handy-Navigation */
/* Vollbild, zentriert, mit eigenem Schliessknopf INNERHALB des Overlays.
   Der Hamburger im Kopf liegt unter dem Overlay und waere nicht klickbar. */
.navi-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--tinte);
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 440ms var(--kurve), visibility 0s linear 440ms;
}
.navi-overlay.ist-offen {
  opacity: 1;
  visibility: visible;
  transition: opacity 440ms var(--kurve);
}

/* Schaumperlen steigen im offenen Menue auf, thematisch statt Code-Regen */
.navi-overlay__perlen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 700ms var(--kurve);
}
.navi-overlay.ist-offen .navi-overlay__perlen {
  opacity: 0.85;
}

/* Licht-Sweep, der einmal durch das geoeffnete Menue zieht */
.navi-overlay::before {
  content: "";
  position: absolute;
  inset: -30% -60%;
  background: radial-gradient(
    46% 38% at 50% 50%,
    rgba(var(--ci-rgb), 0.16),
    transparent 70%
  );
  opacity: 0;
  transform: translate3d(-30%, 20%, 0);
  pointer-events: none;
}
.navi-overlay.ist-offen::before {
  animation: menue-sweep 1500ms var(--kurve) 120ms both;
}
@keyframes menue-sweep {
  0% {
    opacity: 0;
    transform: translate3d(-34%, 22%, 0);
  }
  40% {
    opacity: 1;
  }
  100% {
    opacity: 0.55;
    transform: translate3d(12%, -10%, 0);
  }
}

.navi-overlay__schliessen {
  position: absolute;
  top: 15px;
  right: var(--rand);
  z-index: 3;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1px var(--linie);
  color: var(--text-hell);
  cursor: pointer;
  transition: background-color 240ms var(--kurve), color 240ms var(--kurve);
}
.navi-overlay__schliessen:hover {
  background: rgba(var(--ci-rgb), 0.14);
  color: var(--ci);
}
.navi-overlay__schliessen svg {
  width: 19px;
  height: 19px;
}

.navi-overlay__inhalt {
  position: relative;
  z-index: 2;
  text-align: center;
  width: min(100% - 2 * var(--rand), 480px);
  max-height: 100dvh;
  overflow-y: auto;
  padding: calc(var(--kopf-hoehe) + 1rem) 0 2.5rem;
}

.navi-overlay__liste {
  list-style: none;
  margin: 0 0 2.2rem;
  padding: 0;
}
.navi-overlay__liste li {
  opacity: 0;
  transform: translateY(18px);
}
.navi-overlay.ist-offen .navi-overlay__liste li {
  animation: menue-punkt 560ms var(--kurve) forwards;
  animation-delay: 140ms;
}
.navi-overlay.ist-offen .navi-overlay__liste li:nth-child(2) { animation-delay: 202ms; }
.navi-overlay.ist-offen .navi-overlay__liste li:nth-child(3) { animation-delay: 264ms; }
.navi-overlay.ist-offen .navi-overlay__liste li:nth-child(4) { animation-delay: 326ms; }
.navi-overlay.ist-offen .navi-overlay__liste li:nth-child(5) { animation-delay: 388ms; }
.navi-overlay.ist-offen .navi-overlay__liste li:nth-child(6) { animation-delay: 450ms; }
.navi-overlay.ist-offen .navi-overlay__liste li:nth-child(7) { animation-delay: 512ms; }
.navi-overlay.ist-offen .navi-overlay__liste li:nth-child(8) { animation-delay: 574ms; }
.navi-overlay.ist-offen .navi-overlay__liste li:nth-child(n + 9) { animation-delay: 636ms; }
@keyframes menue-punkt {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.navi-overlay__link {
  display: inline-block;
  padding: 0.52rem 0.5rem;
  font-family: "Unbounded", sans-serif;
  font-size: clamp(1.45rem, 6.5vw, 1.95rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--text-hell);
  position: relative;
  transition: color 240ms var(--kurve);
}
.navi-overlay__link[aria-current="page"],
.navi-overlay__link:hover {
  color: var(--ci);
}
.navi-overlay__link::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 2px;
  height: 2px;
  background: var(--ci);
  transition: left 300ms var(--kurve), right 300ms var(--kurve);
}
.navi-overlay__link:hover::after,
.navi-overlay__link[aria-current="page"]::after {
  left: 8px;
  right: 8px;
}

.navi-overlay__fuss {
  border-top: 1px solid var(--linie);
  padding-top: 1.7rem;
  opacity: 0;
}
.navi-overlay.ist-offen .navi-overlay__fuss {
  animation: menue-punkt 620ms var(--kurve) 560ms forwards;
}
.navi-overlay__fuss .knopf {
  width: 100%;
  max-width: 320px;
}
.navi-overlay__zeit {
  margin-top: 1.3rem;
  font-size: 0.9rem;
  color: var(--text-gedaempft);
}

body.navi-offen {
  overflow: hidden;
}

/* ================================================================ 8 Hero */
.hero {
  position: relative;
  min-height: min(96svh, 880px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--tinte);
  padding-top: calc(var(--kopf-hoehe) + 3.5rem);
  padding-bottom: clamp(2.75rem, 6vw, 5rem);
  isolation: isolate;
}
.hero--klein {
  min-height: min(66svh, 580px);
}
/* Kopfbereich fuer reine Textseiten: kein Foto, aber dieselbe Bewegung.
   Ein grossformatiges Bild ueber einem Rechtstext waere aufgesetzt, ein
   statischer Kasten waere ein Bruch in der Seite. */
.hero--text {
  min-height: min(46svh, 400px);
  background: radial-gradient(
      120% 140% at 12% 0%,
      #131c26 0%,
      var(--tinte) 58%
    ),
    var(--tinte);
}
.hero--text .hero__schleier {
  background: linear-gradient(
    to top,
    rgba(8, 11, 16, 0.9) 2%,
    transparent 45%
  );
}
/* Ein feines Raster, das sich nach unten verliert: erinnert an die
   Lackflaeche unter der Pruefleuchte, ohne ein Foto zu brauchen. */
.hero--text::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: linear-gradient(
      rgba(var(--ci-rgb), 0.07) 1px,
      transparent 1px
    ),
    linear-gradient(90deg, rgba(var(--ci-rgb), 0.07) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(120% 100% at 20% 0%, #000 10%, transparent 68%);
  -webkit-mask-image: radial-gradient(
    120% 100% at 20% 0%,
    #000 10%,
    transparent 68%
  );
}

.hero__bild {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Startzustand der Parallaxe, JS uebernimmt danach */
  transform: scale(1.08);
  will-change: transform;
}

/* Abdunkeln, damit Text immer sicher lesbar ist */
.hero__schleier {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(
      to top,
      rgba(8, 11, 16, 0.96) 4%,
      rgba(8, 11, 16, 0.72) 34%,
      rgba(8, 11, 16, 0.34) 66%,
      rgba(8, 11, 16, 0.62) 100%
    ),
    linear-gradient(105deg, rgba(8, 11, 16, 0.78) 0%, transparent 62%);
}

/* Licht-Sweep: eine Pruefleuchte zieht ueber den Lack */
.hero__sweep {
  position: absolute;
  inset: -20% -35%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    102deg,
    transparent 38%,
    rgba(var(--ci-rgb), 0.1) 47%,
    rgba(201, 255, 248, 0.16) 50%,
    rgba(var(--ci-rgb), 0.1) 53%,
    transparent 62%
  );
  transform: translate3d(-42%, 0, 0);
  animation: hero-sweep 9s var(--kurve) 900ms infinite;
  mix-blend-mode: screen;
}
@keyframes hero-sweep {
  0% {
    transform: translate3d(-42%, 0, 0);
    opacity: 0;
  }
  14% {
    opacity: 1;
  }
  46% {
    opacity: 0;
  }
  100% {
    transform: translate3d(38%, 0, 0);
    opacity: 0;
  }
}

/* Feiner Wassernebel */
.hero__nebel {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  width: 100%;
  height: 100%;
  opacity: 0.6;
}

.hero__innen {
  position: relative;
  width: min(100% - 2 * var(--rand), var(--breite));
  margin-inline: auto;
}

.hero__zeile {
  display: block;
  overflow: hidden;
}
.hero h1 {
  max-width: 17ch;
  margin-bottom: 1.35rem;
}

.hero__text {
  max-width: 50ch;
  font-size: clamp(1.06rem, 0.98rem + 0.45vw, 1.28rem);
  color: #cfdde5;
  line-height: 1.6;
}

.hero__marken {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1.5rem;
  margin: 1.9rem 0 0;
  padding: 0;
  list-style: none;
}
.hero__marken li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.92rem;
  color: #b9cbd6;
}
.hero__marken svg {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--ci);
}

.hero__pfeil {
  position: absolute;
  left: 50%;
  bottom: 1.4rem;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  gap: 0.5rem;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-gedaempft);
  text-decoration: none;
  z-index: 2;
}
.hero__pfeil span {
  display: block;
  width: 1px;
  height: 34px;
  background: linear-gradient(var(--ci), transparent);
  animation: pfeil-puls 2.3s var(--kurve) infinite;
}
@keyframes pfeil-puls {
  0%,
  100% {
    transform: scaleY(0.35);
    transform-origin: top;
    opacity: 0.4;
  }
  50% {
    transform: scaleY(1);
    transform-origin: top;
    opacity: 1;
  }
}
@media (max-width: 760px) {
  .hero__pfeil {
    display: none;
  }
}

/* ==================================== 9 Abschnitte und Raster */
.abschnitt {
  padding-block: var(--luft);
  position: relative;
}
.abschnitt--eng {
  padding-block: var(--luft-klein);
}

.hell-auf-dunkel {
  background: var(--papier);
  color: var(--text-dunkel);
}
.hell-auf-dunkel h1,
.hell-auf-dunkel h2,
.hell-auf-dunkel h3,
.hell-auf-dunkel h4 {
  color: var(--text-dunkel);
}

.kohle {
  background: var(--kohle);
}

.innen {
  width: min(100% - 2 * var(--rand), var(--breite));
  margin-inline: auto;
}
.innen--schmal {
  width: min(100% - 2 * var(--rand), var(--breite-schmal));
  margin-inline: auto;
}

.kopfzeile {
  max-width: 58ch;
  margin-bottom: clamp(2.4rem, 4.5vw, 3.8rem);
}
/* Steht die Kopfzeile allein im Abschnitt, braucht sie keinen Abstand
   nach unten. Sonst addiert sich ihr Rand auf das Polster des Abschnitts
   und darunter klafft Luft, die niemand angeordnet hat. */
.kopfzeile:last-child {
  margin-bottom: 0;
}
.kopfzeile--mitte {
  margin-inline: auto;
  text-align: center;
}
.kopfzeile--mitte .vorlauf {
  justify-content: center;
  margin-inline: auto;
}
.kopfzeile--mitte p {
  margin-inline: auto;
}

.raster {
  display: grid;
  gap: clamp(1rem, 2.2vw, 1.6rem);
}
.raster > * {
  min-width: 0;
}
.raster--2 {
  grid-template-columns: 1fr;
}
.raster--3 {
  grid-template-columns: 1fr;
}
.raster--4 {
  grid-template-columns: 1fr;
}
@media (min-width: 620px) {
  .raster--2,
  .raster--3,
  .raster--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 950px) {
  .raster--3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .raster--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

.zweispalter {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.zweispalter > * {
  min-width: 0;
}
/* Zwei Textspalten gehoeren oben buendig. Mittig ausgerichtet starten sie
   bei unterschiedlicher Laenge auf verschiedenen Hoehen, das wirkt wie ein
   Versehen. Fuer Bild und Text bleibt die Zentrierung richtig. */
.zweispalter--oben {
  align-items: start;
}
@media (min-width: 900px) {
  .zweispalter {
    grid-template-columns: 1fr 1fr;
  }
  .zweispalter--versetzt {
    grid-template-columns: 1.05fr 0.95fr;
  }
  .zweispalter--bild-rechts > .zweispalter__bild {
    order: 2;
  }
}

.zweispalter__bild {
  position: relative;
  border-radius: var(--radius-gross);
  overflow: hidden;
}
.zweispalter__bild img {
  width: 100%;
  /* Bilder behalten ihr Seitenverhaeltnis, nichts wird gequetscht */
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.zweispalter__bild--quer img {
  aspect-ratio: 16 / 10;
}

/* ================================================== 10 Bausteine */

/* --- Karte mit Lichtrand, der dem Zeiger folgt --- */
.karte {
  position: relative;
  padding: clamp(1.5rem, 2.6vw, 2rem);
  border-radius: var(--radius-gross);
  background: var(--kohle-hell);
  box-shadow: inset 0 0 0 1px var(--linie);
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  transition: transform 380ms var(--kurve), box-shadow 380ms var(--kurve);
}
.karte::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(
    240px circle at var(--mx, 50%) var(--my, 0%),
    rgba(var(--ci-rgb), 0.3),
    transparent 62%
  );
  opacity: 0;
  transition: opacity 340ms var(--kurve);
}
.karte:hover {
  transform: translateY(-4px);
}
.karte:hover::before {
  opacity: 1;
}
.hell-auf-dunkel .karte {
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--papier-linie), var(--schatten-hell);
}
.hell-auf-dunkel .karte::before {
  background: radial-gradient(
    240px circle at var(--mx, 50%) var(--my, 0%),
    rgba(var(--ci-rgb), 0.22),
    transparent 62%
  );
}

.karte h3 {
  margin-bottom: 0.55rem;
}
.karte p:last-child {
  margin-bottom: 0;
}

.karte__nummer {
  font-family: "Unbounded", sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ci);
  letter-spacing: 0.08em;
  margin-bottom: 1rem;
  display: block;
}
.hell-auf-dunkel .karte__nummer {
  color: var(--ci-tief);
}

.karte__symbol {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: rgba(var(--ci-rgb), 0.12);
  color: var(--ci);
  margin-bottom: 1.25rem;
  flex: none;
}
.karte__symbol svg {
  width: 23px;
  height: 23px;
}
.hell-auf-dunkel .karte__symbol {
  background: rgba(var(--ci-rgb), 0.16);
  color: var(--ci-tief);
}

/* Karte, die zu einer Seite fuehrt */
.karte--verlinkt {
  padding: 0;
  text-decoration: none;
  color: inherit;
}
.karte--verlinkt .karte__bild {
  aspect-ratio: 16 / 11;
  overflow: hidden;
}
.karte--verlinkt .karte__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--kurve);
}
.karte--verlinkt:hover .karte__bild img {
  transform: scale(1.055);
}
.karte--verlinkt .karte__rumpf {
  padding: clamp(1.35rem, 2.4vw, 1.75rem);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.karte__mehr {
  margin-top: auto;
  padding-top: 1.1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 0.93rem;
  color: var(--ci);
}
.hell-auf-dunkel .karte__mehr {
  color: var(--ci-tief);
}
.karte__mehr svg {
  width: 15px;
  height: 15px;
  transition: transform 300ms var(--kurve);
}
.karte--verlinkt:hover .karte__mehr svg {
  transform: translateX(4px);
}

/* --- Kennzahlen --- */
.kennzahlen {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2vw, 2rem);
}
@media (min-width: 900px) {
  .kennzahlen {
    grid-template-columns: repeat(4, 1fr);
  }
}
.kennzahl__wert {
  font-family: "Unbounded", sans-serif;
  font-size: clamp(2.3rem, 1.4rem + 3.2vw, 3.6rem);
  font-weight: 700;
  line-height: 1;
  color: var(--ci);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 0.12em;
}
.kennzahl__einheit {
  font-size: 0.42em;
  font-weight: 600;
}
.kennzahl__name {
  display: block;
  margin-top: 0.75rem;
  font-weight: 700;
  font-size: 1rem;
}
.kennzahl__text {
  margin: 0.35rem 0 0;
  font-size: 0.925rem;
  color: var(--text-gedaempft);
  line-height: 1.5;
  max-width: 30ch;
}
.hell-auf-dunkel .kennzahl__wert {
  color: var(--ci-tief);
}
.hell-auf-dunkel .kennzahl__text {
  color: var(--text-dunkel-gedaempft);
}

/* --- Vorher/Nachher-Wischer, scrollgebunden --- */
.wischer {
  position: relative;
  border-radius: var(--radius-gross);
  overflow: hidden;
  background: var(--kohle);
  aspect-ratio: 16 / 10;
}
@media (max-width: 620px) {
  .wischer {
    aspect-ratio: 4 / 3;
  }
}
.wischer__lage {
  position: absolute;
  inset: 0;
}
.wischer__lage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Die obere Lage wird beim Scrollen von links nach rechts freigelegt.
   Runterscrollen legt frei, hochscrollen nimmt zurueck. */
.wischer__lage--nachher {
  clip-path: inset(0 100% 0 0);
  will-change: clip-path;
}
.wischer__kante {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  margin-left: -1.5px;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--ci-blass) 18%,
    var(--ci) 50%,
    var(--ci-blass) 82%,
    transparent
  );
  box-shadow: 0 0 22px 3px rgba(var(--ci-rgb), 0.5);
  opacity: 0;
  will-change: transform, opacity;
}
.wischer__griff {
  position: absolute;
  top: 50%;
  left: 0;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 50%;
  background: var(--ci);
  color: #04221f;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 24px rgba(var(--ci-rgb), 0.45);
  opacity: 0;
  will-change: transform, opacity;
}
.wischer__griff svg {
  width: 20px;
  height: 20px;
}
.wischer__schild {
  position: absolute;
  top: 1rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.wischer__schild--vorher {
  left: 1rem;
  background: rgba(8, 11, 16, 0.66);
  color: #d5e2ea;
}
.wischer__schild--nachher {
  right: 1rem;
  background: rgba(var(--ci-rgb), 0.9);
  color: #04221f;
}

/* --- Preistafel --- */
.preistafel {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.preistafel--hervor {
  box-shadow: inset 0 0 0 2px var(--ci), 0 20px 50px rgba(var(--ci-rgb), 0.12);
}
.preistafel .haken {
  margin-bottom: 1.6rem;
}
.preistafel > .knopf {
  margin-top: auto;
}
.hell-auf-dunkel .preistafel--hervor {
  box-shadow: inset 0 0 0 2px var(--ci-tief), var(--schatten-hell);
}
/* Die Fahne laeuft im Textfluss mit, statt ueber der Ueberschrift zu
   liegen. Ein Badge, das Text verdeckt, kostet mehr als es bringt. */
.preistafel__fahne {
  align-self: flex-start;
  margin-bottom: 0.9rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--ci);
  color: #04221f;
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
}
.preistafel__preis {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin: 0.35rem 0 0.2rem;
}
.preistafel__ab {
  font-size: 0.88rem;
  color: var(--text-gedaempft);
  font-weight: 600;
}
.hell-auf-dunkel .preistafel__ab {
  color: var(--text-dunkel-gedaempft);
}
.preistafel__zahl {
  font-family: "Unbounded", sans-serif;
  font-size: clamp(2rem, 1.5rem + 1.6vw, 2.7rem);
  font-weight: 700;
  line-height: 1;
  color: var(--text-hell);
}
.hell-auf-dunkel .preistafel__zahl {
  color: var(--text-dunkel);
}
.preistafel__dauer {
  font-size: 0.9rem;
  color: var(--text-gedaempft);
  margin-bottom: 1.4rem;
}
.hell-auf-dunkel .preistafel__dauer {
  color: var(--text-dunkel-gedaempft);
}

/* --- Hakenliste --- */
.haken {
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
  display: grid;
  gap: 0.72rem;
}
.haken li {
  position: relative;
  padding-left: 1.85rem;
  font-size: 0.97rem;
  line-height: 1.52;
}
.haken li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.48em;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--ci);
  border-bottom: 2px solid var(--ci);
  transform: rotate(-45deg);
}
.hell-auf-dunkel .haken li::before {
  border-color: var(--ci-tief);
}

/* --- Ablaufleiste --- */
.ablauf {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 2.75rem);
  position: relative;
}
.ablauf::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 14px;
  bottom: 14px;
  width: 2px;
  background: linear-gradient(
    var(--ci),
    rgba(var(--ci-rgb), 0.3) 60%,
    transparent
  );
}
.ablauf__punkt {
  position: relative;
  padding-left: 62px;
}
.ablauf__nummer {
  position: absolute;
  left: 0;
  top: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: "Unbounded", sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  background: var(--ci);
  color: #04221f;
}
.ablauf__punkt h3 {
  margin-bottom: 0.4rem;
  padding-top: 0.45rem;
}
.ablauf__hinweis {
  margin: 0.8rem 0 0;
  padding: 0.85rem 1.1rem;
  border-left: 2px solid rgba(var(--ci-rgb), 0.45);
  background: rgba(var(--ci-rgb), 0.07);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.945rem;
  color: var(--text-gedaempft);
}
.hell-auf-dunkel .ablauf__hinweis {
  color: var(--text-dunkel-gedaempft);
  background: rgba(var(--ci-rgb), 0.09);
}

/* --- Ortsliste --- */
.ortsliste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
  grid-template-columns: 1fr;
}
@media (min-width: 620px) {
  .ortsliste {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 980px) {
  .ortsliste {
    grid-template-columns: repeat(3, 1fr);
  }
}
.ortsliste li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.15rem;
  border-radius: var(--radius);
  background: var(--kohle-hell);
  box-shadow: inset 0 0 0 1px var(--linie);
  font-size: 0.97rem;
}
.hell-auf-dunkel .ortsliste li {
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--papier-linie);
}
.ortsliste__ort {
  font-weight: 700;
}
.ortsliste__km {
  font-size: 0.84rem;
  color: var(--ci);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex: none;
}
.hell-auf-dunkel .ortsliste__km {
  color: var(--ci-tief);
}
.ortsliste a {
  display: block;
  text-decoration: none;
  /* Das Klickziel deckt die ganze Zeile ab, nicht nur den Schriftzug.
     Vorher waren es 26 px Hoehe, am Handy zu wenig zum Treffen. */
  margin: -0.85rem -1.15rem;
  padding: 0.85rem 1.15rem;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.ortsliste li {
  align-items: center;
}
.ortsliste a:hover .ortsliste__ort {
  color: var(--ci);
}

/* --- Radarkarte des Einsatzgebiets --- */
.radar {
  position: relative;
  aspect-ratio: 1;
  max-width: 480px;
  margin-inline: auto;
  width: 100%;
}
.radar svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.radar__ring {
  fill: none;
  stroke: rgba(var(--ci-rgb), 0.28);
  stroke-width: 1;
}
.radar__flaeche {
  fill: rgba(var(--ci-rgb), 0.07);
  stroke: rgba(var(--ci-rgb), 0.5);
  stroke-width: 1.5;
}
.radar__ort circle {
  fill: var(--ci);
}
.radar__ort text {
  fill: #b9cbd6;
  font-size: 7.6px;
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 500;
}
/* Verbindet einen Ortspunkt mit seiner ausgewichenen Beschriftung */
.radar__faden {
  stroke: rgba(var(--ci-rgb), 0.42);
  stroke-width: 0.7;
}
.radar__ringtext {
  fill: #47596a;
  font-size: 5.6px;
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 600;
}
.hell-auf-dunkel .radar__ringtext {
  fill: #8b9aa5;
}
.hell-auf-dunkel .radar__ort text {
  fill: var(--text-dunkel-gedaempft);
}
.radar__mitte circle {
  fill: var(--ci);
}
.radar__mitte text {
  fill: var(--text-hell);
  font-size: 10px;
  font-weight: 800;
  font-family: "Unbounded", sans-serif;
}
.hell-auf-dunkel .radar__mitte text {
  fill: var(--text-dunkel);
}
.radar__puls {
  fill: none;
  stroke: var(--ci);
  stroke-width: 1.5;
  transform-origin: center;
  animation: radar-puls 3.6s var(--kurve) infinite;
}
@keyframes radar-puls {
  0% {
    r: 8;
    opacity: 0.85;
  }
  100% {
    r: 78;
    opacity: 0;
  }
}

/* --- Aufklapper (FAQ) --- */
.aufklapper {
  border-radius: var(--radius);
  background: var(--kohle-hell);
  box-shadow: inset 0 0 0 1px var(--linie);
  overflow: hidden;
}
.aufklapper + .aufklapper {
  margin-top: 0.7rem;
}
.hell-auf-dunkel .aufklapper {
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--papier-linie);
}
.aufklapper summary {
  list-style: none;
  cursor: pointer;
  padding: 1.15rem 3.2rem 1.15rem 1.35rem;
  font-weight: 700;
  font-size: 1.02rem;
  position: relative;
  line-height: 1.45;
}
.aufklapper summary::-webkit-details-marker {
  display: none;
}
.aufklapper summary::after {
  content: "";
  position: absolute;
  right: 1.35rem;
  top: 1.55rem;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--ci);
  border-bottom: 2px solid var(--ci);
  transform: rotate(45deg);
  transition: transform 300ms var(--kurve);
}
.aufklapper[open] summary::after {
  transform: rotate(-135deg);
  top: 1.75rem;
}
.aufklapper__inhalt {
  padding: 0 1.35rem 1.3rem;
}
.aufklapper__inhalt p:last-child {
  margin-bottom: 0;
}

/* --- Zusatzliste mit Preisen --- */
.zusatz {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}
.zusatz li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.35rem 1.4rem;
  align-items: baseline;
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  background: var(--kohle-hell);
  box-shadow: inset 0 0 0 1px var(--linie);
}
.hell-auf-dunkel .zusatz li {
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--papier-linie);
}
.zusatz__name {
  font-weight: 700;
}
.zusatz li {
  min-width: 0;
}
.zusatz__preis {
  font-family: "Unbounded", sans-serif;
  font-weight: 700;
  color: var(--ci);
  font-size: 1.02rem;
  text-align: right;
  min-width: 0;
  /* Kurze Preise bleiben in einer Zeile, lange Angaben duerfen umbrechen. */
  overflow-wrap: break-word;
  hyphens: none;
}
.zusatz__preis--kurz {
  white-space: nowrap;
}
@media (max-width: 520px) {
  .zusatz li {
    grid-template-columns: 1fr;
  }
  .zusatz__preis {
    text-align: left;
  }
}
.hell-auf-dunkel .zusatz__preis {
  color: var(--ci-tief);
}
.zusatz__text {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.925rem;
  color: var(--text-gedaempft);
  line-height: 1.5;
}
.hell-auf-dunkel .zusatz__text {
  color: var(--text-dunkel-gedaempft);
}

/* --- Aufruf-Band --- */
.band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--tinte);
}
.band__bild {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.42;
}
.band__schleier {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
      90% 120% at 18% 50%,
      rgba(8, 11, 16, 0.94),
      rgba(8, 11, 16, 0.6) 60%,
      rgba(8, 11, 16, 0.86)
    );
}
/* Lichtkegel, der beim Hereinscrollen anspringt */
.band__kegel {
  position: absolute;
  left: 50%;
  top: -12%;
  z-index: -1;
  width: min(120%, 980px);
  height: 130%;
  margin-left: min(-60%, -490px);
  background: conic-gradient(
    from 180deg at 50% 0%,
    transparent 0deg,
    rgba(var(--ci-rgb), 0.14) 9deg,
    rgba(201, 255, 248, 0.2) 15deg,
    rgba(var(--ci-rgb), 0.14) 21deg,
    transparent 30deg
  );
  opacity: 0;
  transform: scaleY(0.4);
  transform-origin: top;
  transition: opacity 1200ms var(--kurve), transform 1400ms var(--kurve);
  pointer-events: none;
}
.band.ist-sichtbar .band__kegel {
  opacity: 1;
  transform: scaleY(1);
}

/* --- Zitat / Leitsatz mit scrollgebundenem Aufleuchten --- */
.leitsatz {
  font-family: "Unbounded", sans-serif;
  font-size: clamp(1.4rem, 0.9rem + 2.4vw, 2.5rem);
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -0.015em;
  max-width: 22ch;
  margin: 0;
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}
.leitsatz__wort {
  color: rgba(234, 242, 244, 0.2);
  transition: color 260ms linear;
}
/* Woerter ueber 14 Zeichen bleiben unzerlegt umbruchfaehig, sonst kann
   ein deutsches Kompositum am Handy nicht mehr umbrechen. */
.leitsatz__wort {
  white-space: nowrap;
}
.leitsatz__wort--lang {
  white-space: normal;
}
.leitsatz__wort.ist-hell {
  color: var(--text-hell);
}
.hell-auf-dunkel .leitsatz__wort {
  color: rgba(16, 22, 29, 0.18);
}
.hell-auf-dunkel .leitsatz__wort.ist-hell {
  color: var(--text-dunkel);
}

/* --- Hinweiskasten --- */
.hinweis {
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  border-radius: var(--radius);
  background: rgba(var(--ci-rgb), 0.08);
  border-left: 3px solid var(--ci);
}
.hinweis h3 {
  margin-bottom: 0.45rem;
}
.hinweis p:last-child {
  margin-bottom: 0;
}
.hell-auf-dunkel .hinweis {
  background: rgba(var(--ci-rgb), 0.1);
  border-left-color: var(--ci-tief);
}

/* --- Beitragskopf --- */
.beitrag__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-size: 0.88rem;
  color: var(--text-gedaempft);
  margin-bottom: 1.5rem;
}
.hell-auf-dunkel .beitrag__meta {
  color: var(--text-dunkel-gedaempft);
}
.beitrag h2 {
  margin-top: clamp(2.4rem, 4vw, 3.2rem);
}
.beitrag h2:first-child {
  margin-top: 0;
}
.beitrag ul {
  padding-left: 1.2rem;
  margin: 0 0 1.3rem;
}
.beitrag li {
  margin-bottom: 0.6rem;
  max-width: 68ch;
}

/* --- Brotkrumen --- */
.krumen {
  font-size: 0.85rem;
  color: var(--text-gedaempft);
  margin-bottom: 1.5rem;
}
.krumen ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
}
.krumen li:not(:last-child)::after {
  content: "›";
  margin-left: 0.4rem;
  opacity: 0.5;
}
.krumen a {
  display: inline-block;
  padding-block: 0.3rem;
  text-decoration: none;
}
.krumen a:hover {
  color: var(--ci);
}

/* =============================================================== 11 Formular */
.formular {
  display: grid;
  gap: 1.15rem;
}
.feld {
  display: grid;
  gap: 0.45rem;
}
.feld--halb {
  grid-column: span 1;
}
@media (min-width: 680px) {
  .formular--zweispaltig {
    grid-template-columns: repeat(2, 1fr);
  }
  .feld--voll {
    grid-column: 1 / -1;
  }
}
.feld label {
  font-size: 0.9rem;
  font-weight: 700;
}
.feld__pflicht {
  color: var(--ci);
}
.hell-auf-dunkel .feld__pflicht {
  color: var(--ci-tief);
}
.feld input,
.feld select,
.feld textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--kohle-hell);
  box-shadow: inset 0 0 0 1px var(--linie);
  color: var(--text-hell);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  transition: box-shadow 240ms var(--kurve);
}
.hell-auf-dunkel .feld input,
.hell-auf-dunkel .feld select,
.hell-auf-dunkel .feld textarea {
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--papier-linie);
  color: var(--text-dunkel);
}
.feld input:focus,
.feld select:focus,
.feld textarea:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--ci);
}
.feld textarea {
  min-height: 150px;
  resize: vertical;
}
.feld__hinweis {
  font-size: 0.84rem;
  color: var(--text-gedaempft);
}
.hell-auf-dunkel .feld__hinweis {
  color: var(--text-dunkel-gedaempft);
}
.feld--wahl {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
}
.feld--wahl input {
  width: 24px;
  height: 24px;
  margin-top: 2px;
  flex: none;
  accent-color: var(--ci);
}
.feld--wahl label {
  font-weight: 400;
  font-size: 0.92rem;
  line-height: 1.55;
}
/* Honigtopf: fuer Menschen unsichtbar, Bots fuellen ihn aus */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.fehlermeldung {
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  background: rgba(255, 106, 106, 0.12);
  border-left: 3px solid #ff6a6a;
  margin-bottom: 1.5rem;
}
.fehlermeldung p {
  margin: 0;
}

/* Kontaktwege */
.wege {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.8rem;
}
.weg {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border-radius: var(--radius);
  background: var(--kohle-hell);
  box-shadow: inset 0 0 0 1px var(--linie);
  text-decoration: none;
  transition: box-shadow 260ms var(--kurve), transform 260ms var(--kurve);
}
.weg:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px var(--ci);
}
.hell-auf-dunkel .weg {
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--papier-linie);
}
.weg__symbol {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(var(--ci-rgb), 0.12);
  color: var(--ci);
}
.hell-auf-dunkel .weg__symbol {
  color: var(--ci-tief);
}
.weg__symbol svg {
  width: 20px;
  height: 20px;
}
.weg__name {
  display: block;
  font-size: 0.8rem;
  color: var(--text-gedaempft);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}
.hell-auf-dunkel .weg__name {
  color: var(--text-dunkel-gedaempft);
}
.weg__wert {
  display: block;
  font-weight: 700;
  font-size: 1.06rem;
  overflow-wrap: anywhere;
}
.weg__zusatz {
  display: block;
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--text-gedaempft);
  line-height: 1.45;
  margin-top: 0.15rem;
}
.hell-auf-dunkel .weg__zusatz {
  color: var(--text-dunkel-gedaempft);
}
/* WhatsApp tritt in seiner eigenen Farbe auf, das erkennt man schneller */
.weg__symbol--wa {
  background: rgba(37, 211, 102, 0.13);
  color: #25d366;
}
.hell-auf-dunkel .weg__symbol--wa {
  color: #1da851;
}

.zeiten {
  margin: 0;
  display: grid;
  gap: 0.55rem;
}
.zeiten div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.15rem 1rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--linie);
  font-size: 0.96rem;
}
/* Bricht lieber die ganze Zeile um, als Tag und Uhrzeit gleichzeitig
   mitten im Wort zu zerlegen. */
.zeiten dt,
.zeiten dd {
  white-space: nowrap;
}
.hell-auf-dunkel .zeiten div {
  border-bottom-color: var(--papier-linie);
}
.zeiten dt {
  font-weight: 600;
}
.zeiten dd {
  margin: 0;
  color: var(--text-gedaempft);
  text-align: right;
}
.hell-auf-dunkel .zeiten dd {
  color: var(--text-dunkel-gedaempft);
}

/* ==================================================================== 12 Fuss */
.fuss {
  background: var(--tinte);
  border-top: 1px solid var(--linie);
  padding-block: clamp(3rem, 6vw, 4.5rem) 0;
}
.fuss__raster {
  display: grid;
  gap: clamp(2.2rem, 4vw, 3rem);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .fuss__raster {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}
@media (min-width: 1000px) {
  .fuss__raster {
    grid-template-columns: 1.6fr 1fr 1fr 1.1fr;
  }
}
.fuss h2,
.fuss h3 {
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--ci);
  font-weight: 700;
  margin-bottom: 1.15rem;
}
.fuss ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}
/* Der Credit ist ausgenommen: Er ist ein eigener Flex-Baustein und wuerde
   von display:inline-block ueberschrieben. In einem Flex-Elternteil wird
   daraus block, Text und Logo stapeln sich dann untereinander. */
.fuss a:not(.credit) {
  display: inline-block;
  text-decoration: none;
  color: var(--text-gedaempft);
  font-size: 0.95rem;
  padding-block: 0.28rem;
  transition: color 220ms var(--kurve);
}
.fuss a:not(.credit):hover {
  color: var(--ci);
}
.fuss p {
  color: var(--text-gedaempft);
  font-size: 0.95rem;
}
.fuss__marke {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1.15rem;
}
.fuss__marke img {
  height: 44px;
  width: auto;
}
/* Ohne feste Groesse faellt ein Inline-SVG im Flex-Container auf null
   zusammen und das Zeichen fehlt im Fuss ersatzlos. */
.fuss__zeichen {
  width: 34px;
  height: 39px;
  flex: none;
}
.fuss__unten {
  margin-top: clamp(2.5rem, 4vw, 3.25rem);
  border-top: 1px solid var(--linie);
  padding-block: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.75rem;
  font-size: 0.875rem;
  color: var(--text-gedaempft);
}
/* Unter 640 px reicht die Breite nicht fuer drei Bloecke nebeneinander.
   Dann untereinander, damit der Credit seine volle Zeile behaelt. */
@media (max-width: 640px) {
  .fuss__unten {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.15rem;
  }
}
.fuss__recht {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

/* Webdesign-Credit: Text, direkt dahinter das Logo, eine Zeile,
   vertikal zentriert. Auf dunklem Grund wird das Logo weiss gedreht. */
/* Immer eine Zeile: Text, direkt dahinter das Logo, vertikal zentriert.
   flex-shrink 0 verhindert, dass der Schriftzug gequetscht wird und das
   Logo dadurch in die naechste Zeile rutscht. */
.credit {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  flex: none;
  padding-block: 0.4rem;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--text-gedaempft);
  font-size: 0.875rem;
  white-space: nowrap;
  transition: opacity 240ms var(--kurve);
}
.credit > span {
  flex: none;
}
.credit:hover {
  opacity: 0.72;
}
.credit img {
  /* Mindestens 22 px, sonst wird der Schriftzug GABRIEL WOLF kleiner als
     das "Webdesign von" daneben und der Credit sieht aus wie ein
     vergessenes Detail. Das Logo ist 5,7 : 1 breit, 24 px Hoehe ergeben
     rund 136 px Breite. */
  height: 24px;
  width: auto;
  flex: none;
  filter: invert(1);
  display: block;
}

/* ================================== 13 Bewegung und Einblendungen */
/* Schwelle an der OBERKANTE, nicht am Mittelpunkt. Ein Block, der hoeher
   ist als der Bildschirm, waere sonst am Handy noch unsichtbar, wenn oben
   laengst die Ueberschrift steht. */
/* Grundzustand ist SICHTBAR. Ausgeblendet wird nur, solange die Klasse js
   am html-Element steht und das Element seine Einblendung noch vor sich
   hat. Faellt das Skript aus, nimmt die Sicherung im Kopf die Klasse nach
   vier Sekunden weg und alles ist da. So kann ein Skriptfehler nie dazu
   fuehren, dass Inhalte unsichtbar bleiben. */
[data-einblenden] {
  transition: opacity 760ms var(--kurve), transform 760ms var(--kurve);
}
html.js [data-einblenden]:not(.ist-sichtbar) {
  opacity: 0;
  transform: translateY(26px);
}
[data-einblenden][data-verzug="1"] {
  transition-delay: 90ms;
}
[data-einblenden][data-verzug="2"] {
  transition-delay: 180ms;
}
[data-einblenden][data-verzug="3"] {
  transition-delay: 270ms;
}
[data-einblenden][data-verzug="4"] {
  transition-delay: 360ms;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  html.js [data-einblenden]:not(.ist-sichtbar) {
    opacity: 1;
    transform: none;
  }
  .hero__bild {
    transform: none;
  }
  .wischer__lage--nachher {
    clip-path: inset(0 50% 0 0);
  }
  .wischer__kante,
  .wischer__griff {
    opacity: 1;
    transform: translateX(50%);
  }
  .leitsatz__wort {
    color: inherit;
  }
}

/* Druck: nur der Inhalt, kein Zierrat */
@media print {
  .kopf,
  .navi-overlay,
  .hero__pfeil,
  .band,
  .fuss__unten {
    display: none !important;
  }
  body {
    background: #fff;
    color: #000;
  }
}


/* ======================================== 14 Hilfsklassen fuer Abstaende
   Diese Klassen ersetzen eingebettete style-Attribute. Die
   Sicherheitsrichtlinie der Seite erlaubt keine eingebetteten Stile
   (style-src 'self' ohne unsafe-inline). Wer hier eine Angabe direkt ins
   HTML schreibt, bekommt sie im Browser stillschweigend verworfen, das
   Layout bricht erst auf dem Server und nicht in der lokalen Vorschau. */
.ohne-rand {
  margin: 0;
}
.voll {
  width: 100%;
}
.voll-breit {
  grid-column: 1 / -1;
  width: 100%;
}
.mitte {
  text-align: center;
}
.links-bündig {
  text-align: left;
}
.zentriert {
  margin-inline: auto;
}
.knopf-reihe--mitte {
  justify-content: center;
}
.klein {
  font-size: 0.93rem;
}
.mittelklein {
  font-size: 0.95rem;
}
.oben-s {
  margin-top: 1.2rem;
}
.oben-m {
  margin-top: 1.4rem;
}
.oben-l {
  margin-top: 1.5rem;
}
.oben-xl {
  margin-top: 1.6rem;
}
.oben-xxl {
  margin-top: 1.8rem;
}
.oben-2 {
  margin-top: 2rem;
}
.oben-25 {
  margin-top: 2.5rem;
}
.oben-gross {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.unten-s {
  margin-bottom: 0.7rem;
}
.unten-m {
  margin-bottom: 0.9rem;
}
.seitenkopf {
  padding-top: calc(var(--kopf-hoehe) + var(--luft));
}
.seitenkopf--klein {
  padding-top: calc(var(--kopf-hoehe) + var(--luft-klein));
}
.symbol-gross {
  margin-inline: auto;
  width: 64px;
  height: 64px;
}
.zwei-spalten {
  grid-template-columns: repeat(2, 1fr);
}
.ortsliste--breit {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* ============================== 15 WhatsApp-Schnellkontakt am Handy
   Kommt als Balken mit Beschriftung herein und zieht sich nach vier
   Sekunden zum runden Zeichen zusammen. Versteckt sich ueber dem Hero,
   dem Aufruf-Band, dem Formular und dem Fuss: Dort stehen die Kontaktwege
   ohnehin schon, und der Knopf wuerde nur den Text verdecken. */
.wa-leiste {
  display: none;
}

@media (max-width: 860px) {
  .wa-leiste {
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 95;
    display: flex;
    justify-content: flex-end;
    padding: 0 var(--rand) calc(1rem + env(safe-area-inset-bottom, 0px));
    transform: translateY(150%);
    opacity: 0;
    pointer-events: none;
    transition: transform 420ms var(--kurve), opacity 340ms ease;
  }
  .wa-leiste.ist-sichtbar {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .wa-knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    height: 54px;
    min-height: 54px;
    padding: 0 1.4rem;
    border-radius: 999px;
    overflow: hidden;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.92rem;
    white-space: nowrap;
    color: var(--text-hell);
    background: rgba(15, 20, 28, 0.93);
    box-shadow: inset 0 0 0 1px rgba(var(--ci-rgb), 0.4),
      0 10px 30px rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transition: width 420ms var(--kurve), padding 420ms var(--kurve),
      gap 420ms var(--kurve), transform 200ms var(--kurve);
  }
  .wa-knopf svg {
    width: 21px;
    height: 21px;
    flex: none;
    color: #25d366;
    transition: width 420ms var(--kurve), height 420ms var(--kurve);
  }
  .wa-knopf__text {
    max-width: 14rem;
    opacity: 1;
    transition: max-width 420ms var(--kurve), opacity 240ms ease;
  }
  /* Zusammengezogen: nur noch das Zeichen, mittig im Kreis. Es wird dabei
     etwas groesser, sonst wirkt der Kreis leer. */
  .wa-leiste.ist-klein .wa-knopf {
    width: 54px;
    padding: 0;
    gap: 0;
  }
  .wa-leiste.ist-klein .wa-knopf svg {
    width: 26px;
    height: 26px;
  }
  .wa-leiste.ist-klein .wa-knopf__text {
    max-width: 0;
    opacity: 0;
  }
  .wa-knopf:active {
    transform: scale(0.95);
  }
  body.navi-offen .wa-leiste {
    opacity: 0 !important;
    transform: translateY(150%) !important;
    pointer-events: none;
  }
}

/* Bild innerhalb einer Textstrecke, bricht aus der schmalen Spalte aus */
.beitrag__bild {
  margin: clamp(2.2rem, 4vw, 3rem) 0;
  border-radius: var(--radius-gross);
  overflow: hidden;
}
.beitrag__bild img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

/* Social-Media-Profile im Fuß */
.fuss__profile {
  margin-top: 0.9rem;
}
.fuss__profil {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.fuss__profil svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--ci);
}

/* ======================= 16 Faktenblock „Auf einen Blick"
   Zitierfähige Eckdaten in einem Zug, für Leser wie für KI-Suchen. */
.eckdaten {
  margin: 0;
  display: grid;
  gap: 0;
}
.eckdaten > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.15rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--linie);
}
.eckdaten > div:first-child {
  border-top: 1px solid var(--linie);
}
@media (min-width: 560px) {
  .eckdaten > div {
    grid-template-columns: 11rem 1fr;
    gap: 1.5rem;
    align-items: baseline;
  }
}
.eckdaten dt {
  font-weight: 700;
  font-size: 0.93rem;
  color: var(--ci);
}
.eckdaten dd {
  margin: 0;
  color: var(--text-gedaempft);
}
.hell-auf-dunkel .eckdaten > div {
  border-bottom-color: var(--papier-linie);
}
.hell-auf-dunkel .eckdaten > div:first-child {
  border-top-color: var(--papier-linie);
}
.hell-auf-dunkel .eckdaten dt {
  color: var(--ci-tief);
}
.hell-auf-dunkel .eckdaten dd {
  color: var(--text-dunkel-gedaempft);
}