/* ==========================================================================
   Ungermann Systemkälte — site.css
   Konzept „Zwei Temperaturen" · Tokens verbindlich aus bau-brief.md §3
   ========================================================================== */

@import url("../fonts/fonts.css");

/* ---------- Tokens ---------------------------------------------------- */
:root {
  /* Bühne — hue-neutrales Tiefkühl-Graphit (KEIN Navy, Abgrenzung Bodensee) */
  --frost-900: #0b0d0e;
  --frost-850: #0f1315;
  --frost-800: #14181b;
  --frost-700: #1d2429;
  --frost-600: #2a3238;

  /* Kunden-Logo, exakt gesampelt (§0e-14b) */
  --blau-500: #0072bc;
  --blau-400: #2a90d6;
  --blau-300: #8fc4e8;

  /* warme Gegenfarbe „Kruste" — < 8 % Fläche */
  --kruste-500: #c87a28;
  --kruste-400: #dd9945;
  --kruste-700: #8d5316;

  /* Schrift */
  --mehl-100: #edebe6;
  --mehl-300: #c3c6c7;
  --mehl-400: #9aa0a2;
  --mehl-500: #868d90;

  --hair-1: rgba(237, 235, 230, 0.1);
  --hair-2: rgba(237, 235, 230, 0.18);
  --hair-3: rgba(237, 235, 230, 0.34);

  /* „Der Frostansatz" — schneller Ansatz, langes Ausschwingen. Eigener Wert
     seit 08.09.2026 (der alte war byte-gleich mit Mothor „Havelbogen"). */
  --ease-frost: cubic-bezier(0.22, 0.86, 0.28, 1);

  --shell: min(92vw, 1560px);
  --gutter: clamp(1.25rem, 4vw, 4rem);

  --f-display-xl: clamp(3.4rem, 9.8vw, 9.5rem);
  --f-display-l: clamp(2.6rem, 6.4vw, 6.5rem);
  --f-display-m: clamp(2rem, 3.9vw, 3.4rem);
  --f-h3: clamp(1.25rem, 1.7vw, 1.6rem);
  --f-lead: clamp(1.15rem, 1.45vw, 1.45rem);
  --f-data: clamp(2.4rem, 5vw, 4.2rem);
  --f-note: clamp(3.4rem, 7vw, 5.6rem);

  /* Themenfeste Lichtfarben (GESETZ Kap. 11) — NIE vom Hell-Thema
     überschrieben. Alles, was über Video/Bühne/Bild liegt, benutzt nur sie. */
  --kalk-fest: #f2f4f3;
  --meta-fest: #c8cfd1;
  --karte-fest: rgba(29, 36, 41, 0.92);
  --rand-fest: rgba(242, 244, 243, 0.16);
  /* Grundton der Medienfläche im Kopf ([CHRONIK §0e-135c]): bis zum ersten
     Video-Frame darf dort kein helles Loch stehen — im Hell-Thema wäre
     --frost-900 sonst #f2f1ed und der Kopf blitzte weiß auf. */
  --grund-fest: #0b0d0e;
}

/* ---------- Hell-Thema (Schalter, Start bleibt dunkel) ------------------ */
[data-thema="hell"] {
  --frost-900: #f2f1ed;
  --frost-850: #eeece6;
  --frost-800: #eae8e2;
  --frost-700: #e1dfd7;
  --frost-600: #cfccc2;

  --mehl-100: #12171a;
  --mehl-300: #3b4348;
  --mehl-400: #5a6367;
  --mehl-500: #6b7477;

  --blau-300: #00588f;
  --kruste-400: #8d5316;

  --hair-1: rgba(18, 23, 26, 0.1);
  --hair-2: rgba(18, 23, 26, 0.18);
  --hair-3: rgba(18, 23, 26, 0.34);
}

/* ---------- Reset / Basis --------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  background: var(--frost-900);
  color: var(--mehl-100);
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  font-size: 1.125rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img,
video,
svg {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
::selection {
  background: var(--blau-500);
  color: #fff;
}
:focus-visible {
  outline: 2px solid var(--blau-400);
  outline-offset: 3px;
}

h1,
h2,
h3,
h4 {
  font-family: "Chivo", system-ui, sans-serif;
  font-weight: 900;
  text-wrap: balance;
}

.d-xl {
  font-size: var(--f-display-xl);
  line-height: 0.88;
  letter-spacing: -0.035em;
}
.d-l {
  font-size: var(--f-display-l);
  line-height: 0.92;
  letter-spacing: -0.03em;
}
.d-m {
  font-size: var(--f-display-m);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
h3,
.h3 {
  font-size: var(--f-h3);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.lead {
  font-size: var(--f-lead);
  line-height: 1.55;
  color: var(--mehl-300);
}
.mess {
  max-width: 62ch;
}

/* Label — Versalien + Sperrung statt Monospace (§0e-30/42) */
.label {
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--mehl-400);
}
.data {
  font-family: "Chivo", sans-serif;
  font-weight: 700;
  font-size: var(--f-data);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.02em;
}

.shell {
  width: var(--shell);
  margin-inline: auto;
}
.kruste {
  color: var(--kruste-400);
}
.blau {
  color: var(--blau-300);
}

/* ---------- ⭐ Device: Temperatur-Plakette ------------------------------ */
.plakette {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.34em 0.9em 0.36em;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 700;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--blau-300);
  white-space: nowrap;
}
.plakette::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  flex: none;
}
.plakette--warm {
  color: var(--kruste-400);
}

/* ---------- Kopf ------------------------------------------------------- */
.kopf {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.9rem var(--gutter);
  background: linear-gradient(
    to bottom,
    rgba(11, 13, 14, 0.92),
    rgba(11, 13, 14, 0)
  );
  transition: background 0.4s var(--ease-frost);
}
.kopf.ist-fest {
  background: rgba(11, 13, 14, 0.94);
  border-bottom: 1px solid var(--hair-1);
  backdrop-filter: blur(10px);
}
/* HELLE LEISTE BEIM SCROLLEN (Hamada, 08.09.2026: „auf der hellen Version sieht
   man die Leiste oben kaum … lass es weiss auch beim Runterscrollen auf dem PC").
   Die gescrollte Leiste behielt im Hell-Thema den dunklen Grund — dunkle Leiste
   auf heller Seite, und die Schrift darin verschwand fast. Im Hell-Thema traegt
   sie jetzt Papierweiss und ihre Schrift folgt diesem echten Untergrund
   (GESETZ Kap. 11: Kopfleisten-Schrift folgt ihrem Untergrund). */
[data-thema="hell"] .kopf.ist-fest {
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid rgba(18, 23, 26, 0.14);
  box-shadow: 0 1px 18px rgba(18, 23, 26, 0.07);
}
[data-thema="hell"] .kopf.ist-fest,
[data-thema="hell"] .kopf.ist-fest .nav a,
[data-thema="hell"] .kopf.ist-fest .nav__schalter,
[data-thema="hell"] .kopf.ist-fest .kopf__meta {
  color: #12171a;
}
[data-thema="hell"] .kopf.ist-fest .nav a:hover,
[data-thema="hell"] .kopf.ist-fest .nav a[aria-current="page"] {
  color: #00588f;
}
/* Logo bleibt unangetastet (§0e-24) — heller Träger statt Umfärben */
.kopf__logo {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.85rem;
  background: var(--mehl-100);
  flex: none;
}
.kopf__logo img {
  height: 40px;
  width: auto;
}
@media (min-width: 900px) {
  .kopf__logo img {
    height: 46px;
  }
}
.nav {
  display: none;
  gap: clamp(0.9rem, 1.6vw, 2rem);
  align-items: center;
}
@media (min-width: 1080px) {
  .nav {
    display: flex;
  }
}
.nav a {
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mehl-300);
  padding-block: 0.4rem;
  position: relative;
  transition: color 0.3s var(--ease-frost);
}
.nav a:hover {
  color: var(--mehl-100);
}
.nav a[aria-current="page"] {
  color: var(--mehl-100);
}
.nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--blau-500);
}
.kopf__cta {
  display: none;
  padding: 0.72rem 1.3rem;
  background: var(--kruste-500);
  color: #12100c;
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: background 0.3s var(--ease-frost);
}
.kopf__cta:hover {
  background: var(--kruste-400);
}
@media (min-width: 1080px) {
  .kopf__cta {
    display: inline-block;
  }
}

.burger {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  padding: 0.8rem;
  margin-right: -0.8rem;
}
@media (min-width: 1080px) {
  .burger {
    display: none;
  }
}
.burger span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--mehl-100);
  transition:
    transform 0.35s var(--ease-frost),
    opacity 0.2s;
}
body.menue-auf .burger span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
body.menue-auf .burger span:nth-child(2) {
  opacity: 0;
}
body.menue-auf .burger span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.menue {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: var(--frost-900);
  padding: 6.5rem var(--gutter) 3rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  transform: translateY(-100%);
  transition: transform 0.55s var(--ease-frost);
  overflow-y: auto;
}
body.menue-auf .menue {
  transform: translateY(0);
}
.menue a {
  font-family: "Chivo", sans-serif;
  font-weight: 900;
  font-size: clamp(1.8rem, 7vw, 3rem);
  letter-spacing: -0.03em;
  padding-block: 0.35rem;
  border-bottom: 1px solid var(--hair-1);
}
.menue a:last-of-type {
  border-bottom: 0;
}

/* ---------- Hero ------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}
.hero--sub {
  min-height: 76svh;
}
/* Video füllt die KOMPLETTE Hero-Fläche (§0e-31) */
.hero__video,
.hero__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  background: var(--grund-fest);
}
.hero__schleier {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      to top,
      rgba(11, 13, 14, 0.95) 0%,
      rgba(11, 13, 14, 0.55) 34%,
      rgba(11, 13, 14, 0.12) 62%,
      rgba(11, 13, 14, 0.55) 100%
    ),
    linear-gradient(to right, rgba(11, 13, 14, 0.7) 0%, rgba(11, 13, 14, 0) 55%);
}
.hero__inhalt {
  position: relative;
  width: var(--shell);
  margin-inline: auto;
  padding-block: clamp(3rem, 8vh, 7rem);
}
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  align-items: center;
  margin-bottom: 1.6rem;
}
.hero h1 {
  max-width: 15ch;
}
.hero__unten {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-top: clamp(1.6rem, 3vw, 2.6rem);
}
.hero__lead {
  max-width: 46ch;
}

/* ---------- Knöpfe ----------------------------------------------------- */
.knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1.05rem 1.9rem;
  background: var(--kruste-500);
  color: #12100c;
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition:
    background 0.3s var(--ease-frost),
    transform 0.3s var(--ease-frost);
}
.knopf:hover {
  background: var(--kruste-400);
  transform: translateX(4px);
}
.knopf--linie {
  background: none;
  color: var(--mehl-100);
  border: 1px solid var(--hair-3);
  padding-inline: 1.6rem;
}
.knopf--linie:hover {
  background: rgba(237, 235, 230, 0.06);
  border-color: var(--mehl-100);
}
.knopf__pfeil {
  width: 1em;
  height: 1em;
  flex: none;
}

/* ---------- Karte (DSGVO Klick-to-Load) -------------------------------- */
.mapwrap {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--hair-2);
  aspect-ratio: 4/3;
  background: #0f1315;
}
.map-consent {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1rem;
  padding: 2rem;
}
.map-consent p {
  font-size: 0.92rem;
  color: var(--mehl-400);
  max-width: 32ch;
}
.mapwrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ---------- Sektionen -------------------------------------------------- */
section {
  position: relative;
}
.buehne {
  position: relative;
  overflow: clip;
}
.buehne--warm {
  background: #100c07;
}

/* ---------- Vollbild-Bühne mit echtem Foto -----------------------------
   Die echten Kundenfotos sind helle Tageslicht-Aufnahmen. Damit sie in der
   Tiefkühl-Bühne bestehen UND Text darauf lesbar bleibt (§0d b + §0e-5),
   bekommen sie eine kalte Absenkung statt nur eines Verlaufs.          */
.bleed {
  position: relative;
  overflow: clip;
  isolation: isolate;
  background: var(--frost-900);
  display: flex;
  align-items: flex-end;
}
.bleed > picture {
  display: contents;
}
.bleed > img,
.bleed > picture > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 112%;
  top: -6%;
  object-fit: cover;
  z-index: -2;
  filter: brightness(0.52) contrast(1.12) saturate(0.72);
}
.bleed::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      to top,
      rgba(11, 13, 14, 0.97) 2%,
      rgba(11, 13, 14, 0.82) 30%,
      rgba(11, 13, 14, 0.42) 66%,
      rgba(11, 13, 14, 0.2) 100%
    ),
    linear-gradient(
      to right,
      rgba(11, 13, 14, 0.72) 0%,
      rgba(11, 13, 14, 0.1) 62%,
      rgba(11, 13, 14, 0) 100%
    ),
    linear-gradient(rgba(0, 114, 188, 0.07), rgba(0, 114, 188, 0.07));
}
.bleed > .shell {
  position: relative;
  z-index: 1;
}
.buehne--stahl {
  background: var(--frost-800);
}

/* Material: Reif-Textur (§0b-6) */
.reif {
  position: absolute;
  pointer-events: none;
  background-image: var(--reif-url);
  background-size: cover;
  background-position: center;
  mix-blend-mode: screen;
  opacity: 0.5;
}
/* Material: harter gerichteter Lichtkeil — KEIN radialer Glow */
.lichtkeil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    104deg,
    rgba(200, 122, 40, 0) 44%,
    rgba(200, 122, 40, 0.16) 58%,
    rgba(221, 153, 69, 0.05) 66%,
    rgba(200, 122, 40, 0) 74%
  );
}
/* Material: Mehlstaub — NUR auf warmen Bühnen */
.mehlstaub::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
}

.kapitel {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  margin-bottom: clamp(1.6rem, 3vw, 2.8rem);
  flex-wrap: wrap;
}

/* Hairline-Liste (Alternative zum Card-Grid) */
.hairliste {
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--hair-1);
}
.hairliste > li {
  border-bottom: 1px solid var(--hair-1);
  padding-block: clamp(1.4rem, 2.6vw, 2.4rem);
  display: grid;
  gap: 0.6rem 3rem;
}
@media (min-width: 900px) {
  .hairliste > li {
    grid-template-columns: minmax(0, 7rem) minmax(0, 20rem) minmax(0, 1fr);
    align-items: start;
  }
}
.hairliste .plakette {
  align-self: start;
}

/* gestaffelte Ebenen (statt Card-Grid) */
.staffel {
  display: grid;
  gap: clamp(1rem, 2vw, 1.6rem);
}
@media (min-width: 900px) {
  .staffel {
    grid-template-columns: repeat(3, 1fr);
    align-items: end;
  }
}
.staffel__feld {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(1.3rem, 2.2vw, 2rem);
  background: var(--frost-800);
  border: 1px solid var(--hair-1);
  overflow: hidden;
  min-height: 46vh;
  isolation: isolate;
  transition: border-color 0.4s var(--ease-frost);
}
.staffel__feld:hover {
  border-color: var(--blau-500);
}
@media (min-width: 900px) {
  .staffel__feld:nth-child(1) {
    min-height: 72vh;
  }
  .staffel__feld:nth-child(2) {
    min-height: 54vh;
  }
  .staffel__feld:nth-child(3) {
    min-height: 86vh;
  }
}
.staffel__bild {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-frost);
}
.staffel__feld:hover .staffel__bild {
  transform: scale(1.04);
}
.staffel__feld::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgba(11, 13, 14, 0.94) 4%,
    rgba(11, 13, 14, 0.62) 34%,
    rgba(11, 13, 14, 0.14) 72%,
    rgba(11, 13, 14, 0.02) 100%
  );
}

/* Das EINE Card-Grid des Builds (klima-industrie.html) — explizite Spalten */
.karten {
  display: grid;
  gap: 1px;
  background: var(--hair-1);
  border: 1px solid var(--hair-1);
}
@media (min-width: 760px) {
  .karten {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 1180px) {
  .karten {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
.karte {
  background: var(--frost-850);
  padding: clamp(1.5rem, 2.4vw, 2.3rem);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  transition: background 0.35s var(--ease-frost);
}
.karte:hover {
  background: var(--frost-800);
}

/* Datenband */
.datenband {
  display: grid;
  gap: 1px;
  background: var(--hair-1);
  border-block: 1px solid var(--hair-1);
}
@media (min-width: 720px) {
  .datenband {
    grid-template-columns: repeat(4, 1fr);
  }
}
.datenband > div {
  background: var(--frost-900);
  padding: clamp(1.4rem, 2.4vw, 2.2rem) clamp(1.1rem, 2vw, 1.8rem);
}
.datenband .data {
  display: block;
  margin-bottom: 0.4rem;
}

/* ---------- ⭐ Die Gärkurve -------------------------------------------- */
.kurve {
  position: relative;
}
.kurve__flaeche {
  position: relative;
  width: 100%;
}
.kurve svg {
  width: 100%;
  height: auto;
  overflow: visible;
}
.kurve__linie {
  fill: none;
  stroke: var(--blau-500);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.kurve__gezogen {
  fill: none;
  stroke: var(--blau-300);
  stroke-width: 3;
  stroke-linecap: round;
}
.kurve__raster line {
  stroke: var(--hair-1);
  stroke-width: 1;
}
.kurve__kopf {
  fill: var(--kruste-400);
}
.kurve__kopf-ring {
  fill: none;
  stroke: var(--kruste-400);
  stroke-width: 1.5;
  opacity: 0.5;
}
.kurve__station {
  fill: var(--frost-900);
  stroke: var(--blau-500);
  stroke-width: 2.5;
}
.kurve__station.ist-aktiv {
  fill: var(--kruste-400);
  stroke: var(--kruste-400);
}
.kurve__achse {
  fill: var(--mehl-500);
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.kurve__stationen {
  display: grid;
  gap: 1px;
  background: var(--hair-1);
  border-block: 1px solid var(--hair-1);
  margin-top: clamp(1.6rem, 3vw, 2.6rem);
}
@media (min-width: 860px) {
  .kurve__stationen {
    grid-template-columns: repeat(4, 1fr);
  }
}
.kurve__station-text {
  background: var(--frost-900);
  padding: clamp(1.2rem, 2vw, 1.8rem);
  transition:
    background 0.4s var(--ease-frost),
    color 0.4s var(--ease-frost);
}
.kurve__station-text.ist-aktiv {
  background: var(--frost-800);
}
.kurve__station-text.ist-aktiv .label {
  color: var(--kruste-400);
}

/* ---------- Formular --------------------------------------------------- */
.feld {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.feld label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--mehl-400);
}
.feld input,
.feld select,
.feld textarea {
  font: inherit;
  font-size: 1rem;
  color: var(--mehl-100);
  background: var(--frost-850);
  border: 1px solid var(--hair-2);
  padding: 0.95rem 1.1rem;
  border-radius: 0;
  transition: border-color 0.3s var(--ease-frost);
  width: 100%;
}
.feld input:focus,
.feld select:focus,
.feld textarea:focus {
  border-color: var(--blau-500);
}
/* Kein "outline: none" im Formular: Auf dem wichtigsten Formular der Seite war
   der Fokus vorher am schwächsten sichtbar (1px Rand, 2,26:1 zum Ruhezustand).
   Der site-weite Ring gilt jetzt auch hier. */
.feld input:focus-visible,
.feld select:focus-visible,
.feld textarea:focus-visible {
  outline: 2px solid var(--blau-300);
  outline-offset: 2px;
}
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.zustimmung {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  font-size: 0.92rem;
  color: var(--mehl-400);
}
.zustimmung input {
  margin-top: 0.35rem;
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
  accent-color: var(--blau-500);
}
.erfolg {
  display: none;
  border: 1px solid var(--blau-500);
  background: rgba(0, 114, 188, 0.09);
  padding: clamp(1.6rem, 3vw, 2.6rem);
}
.erfolg.ist-da {
  display: block;
}

/* ---------- Fixer Kontakt-FAB (§0e-12: IMMER sichtbar) ----------------- */
.fab {
  position: fixed;
  right: clamp(1rem, 2.5vw, 2rem);
  bottom: clamp(1rem, 2.5vw, 2rem);
  z-index: 70;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.fab a {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.9rem 1.15rem;
  background: var(--kruste-500);
  color: #12100c;
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55);
  transition: background 0.3s var(--ease-frost);
}
.fab a:hover {
  background: var(--kruste-400);
}
.fab a.fab--kalt {
  background: var(--frost-700);
  color: var(--mehl-100);
  border: 1px solid var(--hair-2);
}
.fab a.fab--kalt:hover {
  background: var(--frost-600);
}
.fab svg {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}
.fab__text {
  display: none;
}
@media (min-width: 760px) {
  .fab__text {
    display: inline;
  }
}
body {
  padding-bottom: 0;
}
.fuss {
  padding-bottom: clamp(7rem, 12vw, 9rem);
}

/* ---------- Fuß -------------------------------------------------------- */
.fuss {
  background: var(--frost-850);
  border-top: 1px solid var(--hair-1);
  padding-top: clamp(3.5rem, 6vw, 6rem);
}
.fuss__raster {
  display: grid;
  gap: 2.4rem;
}
@media (min-width: 900px) {
  .fuss__raster {
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  }
}
.fuss__logo {
  display: inline-flex;
  padding: 0.8rem 1.2rem;
  background: var(--mehl-100);
  margin-bottom: 1.4rem;
}
.fuss__logo img {
  height: 54px;
  width: auto;
}
.fuss a:hover {
  color: var(--blau-300);
}
.fuss ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  font-size: 0.98rem;
  color: var(--mehl-400);
}
.fuss__legal {
  margin-top: clamp(2.4rem, 4vw, 3.6rem);
  border-top: 1px solid var(--hair-1);
  padding-block: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  justify-content: space-between;
  font-size: 0.86rem;
  color: var(--mehl-500);
}

/* ---------- Reveal-Zustände ------------------------------------------- */
/* ⚠ Der Clip liegt auf dem KIND, nie auf dem beobachteten Element selbst:
   Chrome meldet für ein per clip-path selbst-geclipptes Element
   intersectionRatio 0 — ein IntersectionObserver darauf feuert NIE.
   (Gemessen 06.08.2026, Ungermann-Build.) */
.js .r-frost > * {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.9s var(--ease-frost);
}
.js .r-frost.ist-da > * {
  clip-path: inset(0 0 0% 0);
}
.js .r-zeile > * {
  opacity: 0;
  transform: translateY(0.7em);
  transition:
    opacity 0.75s var(--ease-frost),
    transform 0.75s var(--ease-frost);
}
.js .r-zeile.ist-da > * {
  opacity: 1;
  transform: none;
}
.js .r-zeile > *:nth-child(2) {
  transition-delay: 0.08s;
}
.js .r-zeile > *:nth-child(3) {
  transition-delay: 0.16s;
}
.js .r-zeile > *:nth-child(4) {
  transition-delay: 0.24s;
}
.js .r-zeile > *:nth-child(5) {
  transition-delay: 0.32s;
}
.js .r-zeile > *:nth-child(6) {
  transition-delay: 0.4s;
}

/* Rechtsseiten */
.recht {
  padding-top: clamp(8rem, 14vw, 12rem);
}
.recht h2 {
  font-size: var(--f-h3);
  margin-top: 2.4rem;
  margin-bottom: 0.7rem;
}
.recht p,
.recht li {
  color: var(--mehl-300);
  max-width: 74ch;
}
.recht ul {
  padding-left: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .js .r-frost > * {
    clip-path: none;
  }
  .js .r-zeile > * {
    opacity: 1;
    transform: none;
  }
}

/* warme Ergebnis-Bühne — Wärme ist hier die Aussage, nicht ein Fehler */
.bleed--warm {
  background: #100c07;
}
.bleed--warm > picture > img,
.bleed--warm > img {
  filter: brightness(0.72) contrast(1.06) saturate(0.95);
}
.bleed--warm::before {
  background:
    linear-gradient(
      to top,
      rgba(16, 12, 7, 0.97) 3%,
      rgba(16, 12, 7, 0.8) 32%,
      rgba(16, 12, 7, 0.36) 70%,
      rgba(16, 12, 7, 0.12) 100%
    ),
    linear-gradient(
      to right,
      rgba(16, 12, 7, 0.7) 0%,
      rgba(16, 12, 7, 0.08) 60%,
      rgba(16, 12, 7, 0) 100%
    );
}

/* verschachtelte Hairline-Liste in einer schmalen Spalte: nicht 3-spaltig zwingen */
@media (min-width: 900px) {
  .hairliste--schmal > li {
    grid-template-columns: minmax(0, 8rem) minmax(0, 1fr);
  }
  .hairliste--schmal > li > p {
    grid-column: 2;
  }
}

/* Geschlossenes Menü ist wirklich weg — nicht nur verschoben.
   (Sonst taucht es bei sehr hohem Viewport wieder auf und bleibt
   für Tastatur und Screenreader erreichbar.) */
.menue {
  visibility: hidden;
  opacity: 0;
  transition:
    transform 0.55s var(--ease-frost),
    opacity 0.3s var(--ease-frost),
    visibility 0s linear 0.55s;
}
body.menue-auf .menue {
  visibility: visible;
  opacity: 1;
  transition:
    transform 0.55s var(--ease-frost),
    opacity 0.3s var(--ease-frost),
    visibility 0s;
}

/* Inline-Fotos in dieselbe Bildwelt ziehen (§0d b) — die echten Aufnahmen
   sind helles Tageslicht, die Bühne ist Tiefkühl-Graphit. */
.foto {
  position: relative;
  isolation: isolate;
  background: var(--frost-900);
}
.foto img {
  filter: brightness(0.68) contrast(1.1) saturate(0.7);
  width: 100%;
  height: auto;
}
.foto::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(160deg, rgba(11, 13, 14, 0.42) 0%, rgba(11, 13, 14, 0) 46%),
    linear-gradient(rgba(0, 114, 188, 0.09), rgba(0, 114, 188, 0.09));
}
.foto figcaption {
  position: relative;
  z-index: 1;
}

/* Sub-Heads: Inhalt muss den fixen Kopf freihalten (er ist kürzer als der Start-Hero) */
.hero--sub {
  min-height: min(86svh, 46rem);
}
.hero--sub .hero__inhalt {
  padding-block: clamp(7.5rem, 14vh, 10rem) clamp(2.5rem, 7vh, 5rem);
}

/* ⭐ Gärkurve — feste Höhe statt viewBox-Seitenverhältnis, sonst ist sie
   auf 390 px nur noch ein Strich (§0e-54: „mobil ist es ein Fleck"). */
.kurve svg {
  width: 100%;
  height: clamp(240px, 26vw, 380px);
}
.kurve__linie,
.kurve__gezogen,
.kurve__raster line {
  vector-effect: non-scaling-stroke;
}
.kurve__station,
.kurve__kopf,
.kurve__kopf-ring {
  vector-effect: non-scaling-stroke;
}
.kurve__achse {
  font-size: 15px;
}
@media (max-width: 760px) {
  .kurve__achse {
    font-size: 26px;
  }
}

/* ============ Korrekturen Härtetest Runde 1 ============================ */

/* B1 · Der fixe Kontakt-Chip ist eine dauerhafte Sperrzone unten rechts.
   Kein CTA, kein Absenden-Knopf darf hineinragen (§0e-12). */
.hero__unten {
  max-width: min(100%, 1040px);
}
@media (max-width: 760px) {
  .hero__unten {
    padding-bottom: 4.5rem;
  }
}

/* G6 · Nav-Logo eine Stufe größer (§0e-18/24) */
.kopf__logo img {
  height: 46px;
}
@media (min-width: 900px) {
  .kopf__logo img {
    height: 64px;
  }
}
.kopf__logo {
  padding: 0.55rem 1rem;
}

/* G7 · Plakette bleibt auch auf hellen Fotos lesbar */
.plakette {
  background: rgba(11, 13, 14, 0.66);
}
.plakette--auf-foto {
  background: rgba(11, 13, 14, 0.86);
  color: var(--mehl-100);
  border-color: rgba(237, 235, 230, 0.4);
}
.plakette--auf-foto::before {
  background: var(--blau-300);
}

/* G8 · Staffel-Bilder in dieselbe Bildwelt ziehen (§0d b) */
.staffel__bild {
  filter: brightness(0.6) contrast(1.12) saturate(0.68);
}
.staffel__feld:hover .staffel__bild {
  filter: brightness(0.72) contrast(1.12) saturate(0.75);
}
/* K14 · Oberkanten versetzen, damit es keine Kartenreihe wird */
@media (min-width: 900px) {
  .staffel {
    align-items: start;
  }
  .staffel__feld:nth-child(1) {
    margin-top: 6rem;
  }
  .staffel__feld:nth-child(2) {
    margin-top: 14rem;
  }
  .staffel__feld:nth-child(3) {
    margin-top: 0;
  }
}

/* B4 · ⭐ Gärkurve steht jetzt auf einer echten Material-Bühne (§0e-13) */
.kurve-buehne {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
.kurve-buehne > picture {
  display: contents;
}
.kurve-buehne > img,
.kurve-buehne > picture > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  filter: brightness(0.34) contrast(1.2) saturate(0.4);
}
.kurve-buehne::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      104deg,
      rgba(200, 122, 40, 0) 52%,
      rgba(200, 122, 40, 0.13) 66%,
      rgba(200, 122, 40, 0) 82%
    ),
    linear-gradient(
      to bottom,
      rgba(11, 13, 14, 0.86) 0%,
      rgba(11, 13, 14, 0.62) 42%,
      rgba(11, 13, 14, 0.9) 100%
    );
}
.kurve__linie {
  stroke-width: 6;
  opacity: 0.34;
}
.kurve__gezogen {
  stroke-width: 6;
}
.kurve__station {
  stroke-width: 3;
}
.kurve__stationen {
  background: rgba(237, 235, 230, 0.14);
}
.kurve__station-text {
  background: rgba(11, 13, 14, 0.78);
  backdrop-filter: blur(3px);
}
.kurve__station-text.ist-aktiv {
  background: rgba(29, 36, 41, 0.9);
}

/* Auszeichnungen mit Urkunden-Beleg */
.ausz {
  display: grid;
  gap: clamp(2rem, 4vw, 3.4rem);
}
@media (min-width: 1000px) {
  .ausz {
    grid-template-columns: 1fr minmax(0, 20rem);
    align-items: start;
  }
  .ausz__beleg {
    position: sticky;
    top: 8rem;
  }
}
/* K20 · Menü liegt über dem Kontakt-Chip, nicht darunter */
.menue {
  z-index: 80;
}
body.menue-auf .fab {
  display: none;
}

/* ============ Korrekturen Härtetest Runde 2 ============================ */

/* Kopf: einzeilig und flacher — der Kopf steht auf jeder Seite ganz oben */
.kopf {
  padding-block: 0.7rem;
}
.kopf__logo {
  padding: 0.45rem 0.85rem;
}
.kopf__logo img {
  height: 38px;
}
@media (min-width: 900px) {
  .kopf__logo img {
    height: 50px;
  }
}
.nav a,
.kopf__cta {
  white-space: nowrap;
}
.nav {
  gap: clamp(0.7rem, 1.25vw, 1.5rem);
}
.nav a {
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}
.kopf__cta {
  padding: 0.66rem 1.1rem;
  font-size: 0.78rem;
}

/* Plakette darf in Rasterspalten nicht gestreckt werden (Text lief in den Rand) */
.plakette {
  justify-self: start;
  width: max-content;
  max-width: 100%;
}

/* ⭐ Gärkurve: Material MUSS sichtbar sein */
.kurve-buehne > picture {
  display: contents;
}
.kurve-buehne > img,
.kurve-buehne > picture > img {
  filter: brightness(0.58) contrast(1.14) saturate(0.5);
}
.kurve-buehne::before {
  background:
    linear-gradient(
      104deg,
      rgba(200, 122, 40, 0) 50%,
      rgba(200, 122, 40, 0.16) 64%,
      rgba(200, 122, 40, 0) 80%
    ),
    linear-gradient(
      to bottom,
      rgba(11, 13, 14, 0.72) 0%,
      rgba(11, 13, 14, 0.4) 40%,
      rgba(11, 13, 14, 0.78) 100%
    );
}

/* Der Techniker ist der eine warme Ort — nicht in Graphit tauchen */
.foto--warm img {
  filter: brightness(0.9) contrast(1.04) saturate(1);
}
.foto--warm::after {
  background: linear-gradient(
    160deg,
    rgba(11, 13, 14, 0.24) 0%,
    rgba(11, 13, 14, 0) 52%
  );
}

/* Formular: Select und Checkbox nicht als Browser-Default stehen lassen */
.feld select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--mehl-400) 50%),
    linear-gradient(135deg, var(--mehl-400) 50%, transparent 50%);
  background-position:
    calc(100% - 1.35rem) 1.35rem,
    calc(100% - 1rem) 1.35rem;
  background-size:
    6px 6px,
    6px 6px;
  background-repeat: no-repeat;
  padding-right: 3rem;
}
.zustimmung input[type="checkbox"] {
  appearance: none;
  border: 1px solid var(--hair-3);
  background: var(--frost-850);
  display: grid;
  place-content: center;
}
.zustimmung input[type="checkbox"]::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  background: var(--blau-500);
  transform: scale(0);
  transition: transform 0.18s var(--ease-frost);
}
.zustimmung input[type="checkbox"]:checked::before {
  transform: scale(1);
}

/* Mobiler Kontakt-Chip verdeckt keinen Fließtext mehr */
@media (max-width: 760px) {
  .fab {
    transition:
      transform 0.35s var(--ease-frost),
      opacity 0.25s var(--ease-frost);
  }
  body.fab-weg .fab {
    transform: translateY(140%);
    opacity: 0;
    pointer-events: none;
  }
}

/* Der FAB bleibt beim ersten Laden sichtbar (kein Scroll nötig, um ihn
   auszublenden) — gemessen 08.09.2026, QA-Runde 1: sein Kasten
   [319,727,55,101] auf 390 px liegt direkt über Fließtext, u.a. „…ein
   Zeitpunkt: 05:30 Uhr." und „…flache Strukturen". Statt auf Scroll-
   Verhalten zu vertrauen, bekommt die Textspalte unten rechts dauerhaft
   eine freie Zone in FAB-Breite + Sicherheitsabstand. */
@media (max-width: 759px) {
  .shell,
  .hero__inhalt {
    padding-right: clamp(4.75rem, 20vw, 5.5rem);
  }
}

/* Deutsche Komposita sprengen sonst die Display-Zeile auf 390 px (§0e-19) */
.d-xl,
.d-l,
.d-m,
h1,
h2,
h3 {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Produkt-Freisteller: der weiße Bildhintergrund verschmilzt mit dem Träger */
.produkt__traeger img {
  mix-blend-mode: multiply;
}

/* §0e-12: Wo der Kontakt-Chip etwas überdecken würde, wird PLATZ GESCHAFFEN.
   Auf der Kontaktseite reicht die rechte Spalte sonst bis unter den Chip. */
@media (min-width: 1100px) {
  .kontaktraster > div:last-child {
    padding-right: clamp(0px, 12vw, 11rem);
  }
}
@media (max-width: 760px) {
  .kontaktraster > div:last-child,
  form[data-anfrage] {
    padding-bottom: 5.5rem;
  }
}

/* Footer-Legalzeile und die Staffel-Felder laufen sonst unter den Kontakt-Chip.
   §0e-12: Platz schaffen, nicht den Knopf verstecken. */
.fuss__legal {
  padding-right: clamp(0px, 13vw, 12rem);
}
@media (min-width: 900px) {
  .staffel__feld:last-child {
    padding-right: clamp(1.3rem, 2.2vw, 2rem);
    padding-bottom: clamp(4.5rem, 7vw, 6rem);
  }
}
@media (max-width: 899px) {
  .staffel__feld {
    padding-bottom: clamp(1.3rem, 4vw, 2rem);
  }
  .staffel__feld:last-child {
    padding-bottom: 6rem;
  }
}

/* ============ Korrekturen Härtetest Runde 3 ============================ */

/* 🔴1 Nav erst zeigen, wenn sie WIRKLICH passt (Logo+Nav+CTA ≈ 1260 px).
   Darunter Burger — betrifft jeden 1366/1440-Laptop bei 125 % Skalierung. */
@media (min-width: 1080px) and (max-width: 1259px) {
  .nav,
  .kopf__cta {
    display: none;
  }
  .burger {
    display: inline-flex;
  }
}

/* 🔴2 Der Kopf MUSS über dem Menü-Overlay liegen, sonst ist der Burger tot */
.kopf {
  z-index: 90;
}
.menue {
  z-index: 80;
}

/* 🔴3 Kontakt-Chip blendet auch auf dem Desktop beim Runterscrollen aus */
.fab {
  transition:
    transform 0.35s var(--ease-frost),
    opacity 0.25s var(--ease-frost);
}
body.fab-weg .fab {
  transform: translateY(150%);
  opacity: 0;
  pointer-events: none;
}

/* 🔴4 Auto-Trennung NUR auf schmalen Viewporten — auf dem Desktop
   zerlegte sie 90-px-Display-Zeilen („Famili-enbetrieb"). */
.d-xl,
.d-l,
.d-m,
h1,
h2,
h3 {
  hyphens: manual;
}
@media (max-width: 760px) {
  /* Display-Zeilen bleiben auf JEDER Breite bei manueller Trennung — die
     automatische zerriss auf 390 die groesste Schrift der Seite
     ("Tempera-tur", "dersel-ben"). Wer trennen will, setzt &shy;.
     (QA Runde 2, 08.09.2026.) */
  .d-xl,
  .d-l,
  .d-m {
    hyphens: manual;
  }
  h1,
  h2,
  h3 {
    hyphens: auto;
  }
}

/* ⭐ Kurve: Achsen als HTML, damit sie nicht mitverzerrt werden */
.kurve__flaeche {
  position: relative;
  padding-left: clamp(3.6rem, 6vw, 5.5rem);
}
.kurve__achsen span {
  position: absolute;
  left: 0;
  transform: translateY(-50%);
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  color: var(--mehl-500);
  white-space: nowrap;
}

/* easyLogger-Panel im Seitendesign statt Geräte-Stock-Mockup */
.panel {
  background: var(--frost-900);
  border: 1px solid var(--hair-2);
}
.panel__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem clamp(1.1rem, 2vw, 1.6rem);
  border-bottom: 1px solid var(--hair-1);
}
.panel__punkt {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--blau-300);
}
.panel__punkt::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--blau-500);
}
.panel__zeilen {
  list-style: none;
  padding: 0;
  margin: 0;
}
.panel__zeilen li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem clamp(1.1rem, 2vw, 1.6rem);
  border-bottom: 1px solid var(--hair-1);
  font-size: 0.98rem;
  color: var(--mehl-400);
}
.panel__zeilen b {
  font-family: "Chivo", sans-serif;
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.panel__zeilen li.ist-warn {
  background: rgba(200, 122, 40, 0.09);
  color: var(--mehl-300);
}
.panel__zeilen li.ist-warn b {
  color: var(--kruste-400);
  font-size: 0.95rem;
}
.panel__fuss {
  padding: 1rem clamp(1.1rem, 2vw, 1.6rem);
  font-size: 0.88rem;
  color: var(--mehl-500);
}

/* Temperatur-Skala statt dritter Hairline-Liste (Grammatik-Bruch) */
.skala {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1px;
  background: var(--hair-1);
  border: 1px solid var(--hair-1);
}
@media (min-width: 760px) {
  .skala {
    grid-template-columns: 1fr 1fr;
  }
}
.skala li {
  background: var(--frost-900);
  padding: clamp(1.3rem, 2.2vw, 2rem);
  display: grid;
  gap: 0.5rem;
  position: relative;
}
.skala li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(
    to bottom,
    var(--blau-500),
    rgba(0, 114, 188, 0.12)
  );
}
.skala li:nth-child(5)::before,
.skala li:nth-child(6)::before {
  background: linear-gradient(
    to bottom,
    var(--kruste-500),
    rgba(200, 122, 40, 0.12)
  );
}
.skala__wert {
  font-family: "Chivo", sans-serif;
  font-weight: 700;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--mehl-100);
}
.skala p {
  color: var(--mehl-400);
  font-size: 0.98rem;
}

/* Plakette auf sehr schmalen Geräten nicht über die halbe Zeile */
@media (max-width: 400px) {
  .plakette {
    font-size: 0.68rem;
    letter-spacing: 0.1em;
  }
}

/* §0e-12 · Rechts unten bleibt frei — auch auf den Rechtsseiten und im Formular.
   Der Chip wird nicht versteckt, der Inhalt weicht aus. */
@media (max-width: 1320px) {
  .recht .shell {
    padding-right: clamp(0px, 14vw, 9rem);
  }
}
@media (max-width: 1099px) {
  .kontaktraster > div:last-child,
  form[data-anfrage] {
    padding-bottom: 5.5rem;
  }
}
.fuss__raster > div:last-child {
  padding-right: clamp(0px, 11vw, 8rem);
}

/* §0e-12 · rechte Spalten weichen dem Chip aus (statt ihn zu verstecken) */
@media (min-width: 761px) and (max-width: 1500px) {
  .zweispalt > *:last-child,
  .kontaktraster > div:last-child {
    padding-right: clamp(0px, 9vw, 7.5rem);
  }
}
@media (max-width: 1099px) {
  .fuss ul,
  .recht ul {
    padding-right: clamp(0px, 12vw, 7rem);
  }
}

/* Formular auf mittleren Breiten: der Chip darf kein Feld anschneiden */
@media (max-width: 1099px) {
  form[data-anfrage] {
    padding-right: clamp(0px, 13vw, 8rem);
  }
}

/* .zweispalt global definieren — stand bisher nur in einzelnen Seiten-Stilen,
   auf kundendienst.html fiel die zweite Spalte deshalb nach unten. */
@media (min-width: 980px) {
  .zweispalt {
    grid-template-columns: 1fr 1fr;
  }
}
/* Plakettenspalte breit genug für „STROM & DRUCK" */
@media (min-width: 900px) {
  .hairliste--schmal > li {
    grid-template-columns: minmax(0, 11.5rem) minmax(0, 1fr);
  }
  .hairliste > li {
    grid-template-columns: minmax(0, 11.5rem) minmax(0, 20rem) minmax(0, 1fr);
  }
}

/* Kontakt-Chip kompakter: die Telefonnummer bleibt lesbar, der zweite Knopf
   wird zum Symbol. Kleinere Fläche = weniger überlagerter Inhalt (§0e-12). */
@media (min-width: 761px) {
  .fab a.fab--kalt .fab__text {
    display: none;
  }
  .fab a.fab--kalt {
    padding: 0.8rem;
    align-self: flex-end;
  }
  .fab a {
    padding: 0.78rem 1rem;
    font-size: 0.82rem;
  }
}

/* Auf Tablet-Breiten beginnt der Formularblock sonst noch im ersten Bildschirm,
   direkt unter dem Kontakt-Chip. */
@media (max-width: 1099px) {
  .kontaktraster {
    padding-top: clamp(1rem, 6vh, 4rem);
  }
}

/* §0e-12 · Unter 1300 px reicht die Hero-Zeile bis in die Chip-Zone.
   Der CTA rutscht dann unter den Lead und bleibt linksbündig frei. */
@media (max-width: 1299px) {
  .hero__unten {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.6rem;
    max-width: min(100%, 42rem);
  }
}

/* Display-Zeilen dürfen nicht mitten im Wort brechen — nur wenn es sein muss */
.d-xl,
.d-l,
.d-m {
  overflow-wrap: normal;
  word-break: keep-all;
}
@media (max-width: 760px) {
  /* break-word riss "Stange baut." zu "Stange ba / ut." — ohne Trennstrich,
     weil ein &nbsp; das Paar zusammenhielt. anywhere/break-word nur als
     letzte Not: break-word bricht erst, wenn ein Wort ALLEIN nicht passt. */
  .d-xl,
  .d-l,
  .d-m {
    overflow-wrap: break-word;
    word-break: normal;
  }
}

.plakette--warm.plakette--auf-foto::before {
  background: var(--kruste-400);
}

/* Meta-Zeile im Hero liegt über hellen Bildstellen — lesbar halten */
.hero__meta .label {
  color: var(--mehl-100);
  text-shadow:
    0 1px 14px rgba(11, 13, 14, 0.95),
    0 0 3px rgba(11, 13, 14, 0.8);
}

/* ============ Hamada 07.08.2026: „Das Logo transparent machen" ==========
   Der helle Träger war meine §0e-24-Lösung für den dunklen Grund. Hamada
   will das Logo frei stehen — das Logo selbst bleibt dabei unangetastet
   (gleiche Farbe, gleiche Proportionen), nur die Platte fällt weg. */
.kopf__logo,
.fuss__logo {
  background: none;
  padding: 0;
}
.kopf__logo img,
.fuss__logo img {
  filter: none;
}

/* ============ Formular: Fehlermeldung des echten Endpunkts ==============
   Der Versand läuft seit dem Auftrag über /api/anfrage (Cloudflare Pages
   Function + Turnstile + Resend). Schlägt er fehl, braucht der Besucher
   eine sichtbare Antwort — und die Telefonnummer als Ausweg. */
.formfehler {
  margin: 0;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--kruste-500);
  border-left-width: 3px;
  background: color-mix(in oklch, var(--kruste-700) 22%, transparent);
  color: var(--mehl-100);
  font-size: 1rem;
}
.formfehler[hidden] {
  display: none;
}

/* Turnstile läuft im Modus "interaction-only": im Normalfall unsichtbar, es
   erscheint nur, wenn Cloudflare wirklich nachfragen muss. Deshalb KEIN
   min-height — das würde ein totes Loch in den 1,4rem-Rhythmus des Formulars
   reißen und die Einwilligungszeile vom Absenden-Knopf abhängen. */
.turnstile:empty {
  display: none;
}

/* ============ Fließtext-Links: Farbe allein reicht nicht =================
   WCAG 1.4.1: Ein Link mitten im Text muss sich auch ohne Farbe vom Umtext
   unterscheiden. Der Blauton hatte nur 1,08–1,41:1 zum Fließtext — gefordert
   sind 3:1. Deshalb bekommen Inline-Links einen Unterstrich. Knöpfe, Navigation,
   Fußzeilen-Spalten und Listen-Links sind ausgenommen: dort ist der Link durch
   Position und Form bereits erkennbar. */
.recht p a,
.recht li a,
main p a:not(.knopf),
.zustimmung a,
.panel__fuss a {
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
.recht p a:hover,
main p a:not(.knopf):hover,
.zustimmung a:hover {
  text-decoration-thickness: 2px;
}

/* ==========================================================================
   /premium-Update 08.09.2026 — Hell/Dunkel, H1-Zeile 1, Bewertungen,
   Bewerten-Weiche, Conversion-Nachschärfung (bau-brief.md §2–8)
   ========================================================================== */

/* ---------- Themenfeste Flächen (GESETZ Kap. 11) -----------------------
   Gescopet auf die Bühnen-Klassen, nicht Selektor für Selektor (BEM-Falle,
   Petersen 02.09.). Alles über Video/Bühne/Bild bleibt hell, egal welches
   Thema gerade aktiv ist. */
:is(
  .hero,
  .bleed,
  .kurve-buehne,
  .staffel__feld,
  .bewerten-cta__karte,
  .kopf:not(.ist-fest)
) {
  color: var(--kalk-fest);
}
:is(
    .hero,
    .bleed,
    .kurve-buehne,
    .staffel__feld,
    .bewerten-cta__karte,
    .kopf:not(.ist-fest)
  )
  :is(.label, .lead, .plakette) {
  color: var(--meta-fest);
}
.kopf:not(.ist-fest) .nav a {
  color: var(--meta-fest);
}
.kopf:not(.ist-fest) .nav a:hover,
.kopf:not(.ist-fest) .nav a[aria-current="page"] {
  color: var(--kalk-fest);
}
.hero__meta .label {
  color: var(--meta-fest) !important;
}

/* ---------- Hell/Dunkel-Schalter ---------------------------------------- */
.thema-schalter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  /* Der Schalter folgt dem ECHTEN Untergrund, nicht dem Seitenthema (GESETZ Kap. 11).
     Vorher erbte er per color:inherit die themenfeste Lichtfarbe und stand im
     Hellmodus mit gemessenen 1,02:1 auf hellem Grund — praktisch unsichtbar,
     und damit war der Weg zurueck nach Dunkel nicht mehr zu finden.
     (QA Runde 2, 08.09.2026. WCAG 1.4.11 verlangt 3:1.) */
  color: var(--kalk-fest);
  border: 1px solid rgba(242, 244, 243, 0.38);
  background: rgba(11, 13, 14, 0.5);
  cursor: pointer;
  transition:
    background 0.2s var(--ease-frost),
    transform 0.16s var(--ease-frost);
}
.thema-schalter:active {
  transform: scale(0.94);
}
.thema-schalter svg {
  width: 18px;
  height: 18px;
}
.thema-schalter__sonne {
  display: none;
}
[data-thema="hell"] .thema-schalter__mond {
  display: none;
}
[data-thema="hell"] .thema-schalter__sonne {
  display: block;
}
[data-thema="hell"] .kopf.ist-fest .thema-schalter {
  color: #12171a;
  border-color: rgba(18, 23, 26, 0.3);
  background: rgba(18, 23, 26, 0.07);
}
@media (hover: hover) and (pointer: fine) {
  .thema-schalter:hover {
    background: rgba(11, 13, 14, 0.72);
  }
  [data-thema="hell"] .kopf.ist-fest .thema-schalter:hover {
    background: rgba(18, 23, 26, 0.14);
  }
}

/* ---------- H1-Zeile 1 (GESETZ Kap. 3 — Betrieb + Leistung + Ort) ------- */
.h1-zeile1 {
  display: block;
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(0.92rem, 1.05vw, 1.06rem);
  letter-spacing: 0.04em;
  line-height: 1.45;
  max-width: 46ch;
  color: var(--meta-fest);
  margin-bottom: 1.1rem;
  text-transform: none;
}

/* ---------- FAB: Verb trägt, Nummer wird zweite Zeile ------------------- */
.fab__text {
  display: none;
  flex-direction: column;
  line-height: 1.25;
}
.fab__text strong {
  font-weight: 700;
}
.fab__text small {
  display: block;
  font-size: 0.78em;
  font-weight: 500;
  opacity: 0.85;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 760px) {
  .fab__text {
    display: flex;
  }
}

/* ---------- Datenwert (Fakten-Leiste) — keine Tabellenziffern ----------- */
.skala__wert,
.fakten__wert {
  font-variant-numeric: lining-nums;
}

/* ---------- Bewertungs-Register (Sektion #8) ---------------------------- */
.bewertungen {
  position: relative;
}
.bewertungen__kopf {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--hair-2);
}
.bewertungen__note-block {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  flex-wrap: wrap;
}
.bewertungen__note {
  font-family: "Chivo", sans-serif;
  font-weight: 700;
  font-size: var(--f-note);
  line-height: 1;
  color: var(--mehl-100);
}
.bewertungen__sterne {
  display: inline-flex;
  gap: 0.15em;
  color: var(--kruste-500);
}
.bewertungen__sterne svg {
  width: clamp(1.1rem, 2vw, 1.5rem);
  height: auto;
  fill: currentColor;
}
.bewertungen__label {
  display: block;
  margin-top: 0.5rem;
  color: var(--mehl-400);
  font-size: 0.95rem;
}
.bewertungen__link {
  color: var(--blau-300);
  font-weight: 700;
  font-size: 0.92rem;
  white-space: nowrap;
}
.bewertungen__register {
  display: grid;
  gap: 0;
  margin-top: 0;
}
@media (min-width: 1080px) {
  .bewertungen__register {
    grid-template-columns: repeat(3, 1fr);
    gap: 0 clamp(2rem, 4vw, 3.5rem);
  }
}
.bewertungen__zitat {
  padding: clamp(1.6rem, 3vw, 2.2rem) 0;
  border-bottom: 1px solid var(--hair-1);
}
@media (min-width: 1080px) {
  .bewertungen__zitat {
    border-bottom: none;
    padding-bottom: 0;
  }
}
.bewertungen__zitat p {
  font-size: 1.15rem;
  color: var(--mehl-100);
}
.bewertungen__zitat-sterne {
  display: inline-flex;
  gap: 0.1em;
  color: var(--kruste-500);
  margin-bottom: 0.8rem;
}
.bewertungen__zitat-sterne svg {
  width: 0.9rem;
  height: auto;
  fill: currentColor;
}
.bewertungen__marke {
  display: block;
  margin-top: 1rem;
  color: var(--mehl-400);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.bewertungen__fuss {
  margin-top: clamp(2rem, 4vw, 3rem);
  color: var(--mehl-500);
  font-size: 0.85rem;
}
.bewertungen__fuss p + p {
  margin-top: 0.3rem;
}

/* ---------- Bewerten-Aufruf (Sektion #9, full-bleed Bühne) -------------- */
.bewerten-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.bewerten-cta__buehne {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.bewerten-cta__buehne img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bewerten-cta__buehne::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(11, 13, 14, 0.55),
    rgba(11, 13, 14, 0.88)
  );
}
.bewerten-cta__karte {
  max-width: 34rem;
  margin-inline: auto;
  text-align: center;
  padding: clamp(2rem, 5vw, 3.25rem) clamp(1.5rem, 4vw, 3rem);
  background: var(--karte-fest);
  border: 1px solid var(--rand-fest);
  border-radius: 0;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.7);
}
.bewerten-cta__sterne {
  display: flex;
  gap: 0.4rem;
  justify-content: center;
  margin: 1.25rem 0 1rem;
  color: var(--kruste-500);
}
.bewerten-cta__sterne svg {
  width: clamp(1.5rem, 4vw, 2rem);
  height: auto;
  fill: currentColor;
}
.bewerten-cta__text {
  margin-bottom: 1.75rem;
}
.bewerten-cta__google {
  display: inline-block;
  margin-top: 1.2rem;
  color: var(--kalk-fest);
  font-size: 0.9rem;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* ---------- bewerten.html — Sterne-Weiche ------------------------------- */
.bewerten-seite {
  max-width: 40rem;
  margin-inline: auto;
  padding: clamp(3rem, 8vw, 6rem) var(--gutter);
  text-align: center;
}
.bewerten-seite__lead {
  margin-top: 0.75rem;
  color: var(--mehl-300);
}
.bewerten-sterne {
  border: 0;
  padding: 0;
  margin: 2.5rem 0 0;
}
.bewerten-sterne__legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.bewerten-sterne__reihe {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}
.stern-knopf {
  background: none;
  border: 1px solid var(--hair-2);
  cursor: pointer;
  width: clamp(2.6rem, 8vw, 3.4rem);
  height: clamp(2.6rem, 8vw, 3.4rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mehl-400);
  transition:
    color 0.15s var(--ease-frost),
    border-color 0.15s var(--ease-frost),
    transform 0.16s var(--ease-frost);
}
.stern-knopf svg {
  width: 1.4rem;
  height: 1.4rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}
.stern-knopf:active {
  transform: scale(0.95);
}
.stern-knopf.an,
.stern-knopf:hover,
.stern-knopf:focus-visible {
  color: var(--kruste-500);
  border-color: var(--kruste-500);
}
.stern-knopf.an svg {
  fill: currentColor;
}
.stern-knopf:focus-visible {
  outline: 2px solid var(--blau-400);
  outline-offset: 2px;
}
.bewerten-hinweis {
  margin-top: 0.9rem;
  color: var(--mehl-400);
  font-size: 0.9rem;
}
.bewerten-stufe[hidden] {
  display: none;
}
.bewerten-stufe {
  margin-top: 2.4rem;
  text-align: left;
}
.bewerten-stufe--zentriert {
  text-align: center;
}
.bewerten-fein {
  margin-top: 1.25rem;
  color: var(--mehl-400);
  font-size: 0.9rem;
}
.bewerten-form {
  display: grid;
  gap: 1.4rem;
  margin-top: 1.5rem;
}

/* ---------- Formularfelder: Wunschtermin/-uhrzeit ----------------------- */
input[type="date"],
input[type="time"] {
  color-scheme: dark;
}
[data-thema="hell"] input[type="date"],
[data-thema="hell"] input[type="time"] {
  color-scheme: light;
}


/* ══════════════════════════════════════════════════════════════════════
   BEWERTUNGS-DIASHOW (GESETZ Kap. 9, gebaut 08.09.2026 auf Hamadas Wort:
   „mach alle 7 als Diashow"). Ab sechs Bewertungen zieht die Reihe
   automatisch nach links; die Bahn ist dupliziert, damit der Umlauf ohne
   sichtbaren Sprung schliesst. Pause bei Hover, bei Tastatur-Fokus und
   bei Beruehrung. Wer Bewegung reduziert hat, bekommt ein ruhiges Raster
   ohne Duplikat-Spur — nicht eine angehaltene Endlosschleife.
   ══════════════════════════════════════════════════════════════════════ */
.bewertungen__spur {
  display: flex;
  gap: clamp(1rem, 2vw, 1.75rem);
  overflow: hidden;
  mask-image: linear-gradient(
    to right,
    transparent,
    #000 5%,
    #000 95%,
    transparent
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    #000 5%,
    #000 95%,
    transparent
  );
}
.bewertungen__bahn {
  display: flex;
  gap: clamp(1rem, 2vw, 1.75rem);
  flex: none;
  animation: bewertungen-zieht 46s linear infinite;
  will-change: transform;
}
.bewertungen__spur:hover .bewertungen__bahn,
.bewertungen__spur:focus-within .bewertungen__bahn {
  animation-play-state: paused;
}
@keyframes bewertungen-zieht {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    /* eine volle Bahn plus der Abstand dahinter */
    transform: translate3d(calc(-100% - clamp(1rem, 2vw, 1.75rem)), 0, 0);
  }
}
.bewertungen__spur .bewertungen__zitat {
  flex: 0 0 clamp(17rem, 26vw, 23rem);
}
.bewertungen__zitat--knapp {
  justify-content: flex-start;
}
.bewertungen__ohne-text {
  font-style: normal;
  opacity: 0.62;
}

@media (prefers-reduced-motion: reduce) {
  .bewertungen__spur {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    overflow: visible;
    mask-image: none;
    -webkit-mask-image: none;
  }
  .bewertungen__bahn {
    display: contents;
    animation: none;
  }
  /* Das Duplikat waere hier eine Doppelung ohne Zweck */
  .bewertungen__bahn[aria-hidden="true"] {
    display: none;
  }
}