/*
  Klarrum Entrümpelung – Stylesheet, mobile-first.
  Farben aus dem Logo: Dunkelblau und Limettengrün.
  Kontraste (WCAG AA, 4,5:1 für Text) sind je Paar vermerkt.
*/

/* ---------- Schrift: Archivo, selbst gehostet ---------- */
/* Zwei variable Dateien in assets/schrift/ (Breite 62–125 %, Stärke 400–900),
   dazu die Lizenz OFL.txt. Nichts wird von fremden Servern geladen, die
   Content-Security-Policy erlaubt Schriften nur von der eigenen Adresse.
   Der Browser holt "latin-ext" nur, wenn ein Zeichen daraus vorkommt. */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("assets/schrift/archivo-latin.woff2") format("woff2");
  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: "Archivo";
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("assets/schrift/archivo-latin-ext.woff2") format("woff2");
  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;
}

:root {
  /* Farben */
  --navy: #081b2a; /* Logo-Dunkelblau, aus dem Logo gemessen; auf Weiß 17,5:1 */
  --navy-hell: #17314a;
  --gruen: #7cb331; /* Logo-Grün, aus dem Logo gemessen; nur Flächen, auf Weiß zu hell für Text */
  --gruen-dunkel: #44731a; /* Grün für Text auf Weiß, 5,7:1 */
  --gruen-hover: #70a32b;
  --text: #081b2a;
  --text-leise: #5a6772; /* auf Weiß 5,8:1 */
  --flaeche: #ffffff;
  --grund: #f2f6fa; /* Seitengrund: kühl statt beige */
  --flaeche-hell: #e6edf4; /* Bandton, blaugrau statt grünbeige */
  --linie: #d8e1ea;
  /* Umrisse von Bedienelementen brauchen 3:1 zur Umgebung (WCAG 1.4.11); auf Weiss 3,7:1 */
  --linie-bedien: #76838f;
  --navy-tief: #030b13;
  --gruen-hell: #a7d95f;
  --gruen-leucht: rgb(124 179 49 / 0.35);

  /* Weiche, blau getönte Schatten in zwei Stufen */
  --schatten-s: 0 1px 2px rgb(8 27 42 / 0.06), 0 4px 12px rgb(8 27 42 / 0.06);
  --schatten-m: 0 2px 4px rgb(8 27 42 / 0.06), 0 14px 32px rgb(8 27 42 / 0.12);
  --schatten-gruen: 0 8px 24px rgb(124 179 49 / 0.35);

  /* Schrift: Systemschriften, keine externen Fonts (schnell und datenschutzfreundlich) */
  --schrift: "Archivo", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --schrift-titel: "Archivo", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --groesse-klein: 0.875rem;
  --groesse-basis: 1rem;
  --groesse-gross: 1.125rem;
  --groesse-h3: 1.125rem;
  --groesse-h2: clamp(1.75rem, 1.2rem + 2.2vw, 3rem);
  --groesse-h1: clamp(2.6rem, 1.6rem + 5vw, 5.5rem);

  /* Abstände */
  --a-1: 0.25rem;
  --a-2: 0.5rem;
  --a-3: 0.75rem;
  --a-4: 1rem;
  --a-5: 1.5rem;
  --a-6: 2rem;
  --a-7: 3rem;
  --a-8: 4.5rem;

  --rand-seite: 1rem;
  --breite: 82rem;
  --radius: 1rem;
  --radius-s: 0.625rem;
  --radius-voll: 999px;

  /* Kopfzeile: Platz, den Sprungziele unter der klebenden Kopfzeile freilassen */
  --freiraum-kopf: 6.75rem;

  /* Bewegung: kurz für Rückmeldung, etwas länger für den Navigationsbalken */
  --dauer-kurz: 0.18s;
  --dauer-balken: 0.35s;
  --kurve: cubic-bezier(0.2, 0.8, 0.2, 1);
}

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

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--freiraum-kopf);
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  font-size: var(--groesse-basis);
  line-height: 1.6;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--schrift-titel);
  line-height: 1.1;
  text-wrap: balance;
}

h1 {
  font-size: var(--groesse-h1);
  font-weight: 800;
  letter-spacing: -0.035em;
}

h2 {
  font-size: var(--groesse-h2);
  font-weight: 800;
  letter-spacing: -0.025em;
}

h3 {
  font-size: var(--groesse-h3);
  font-weight: 700;
}

p {
  margin: 0;
}

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

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

a {
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--gruen-dunkel);
  outline-offset: 3px;
}

.symbole {
  display: none;
}

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

.rahmen {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand-seite);
}

.sprunglink {
  position: absolute;
  left: var(--a-4);
  top: -10rem;
  z-index: 100;
  padding: var(--a-2) var(--a-4);
  background: var(--navy);
  color: var(--flaeche);
  border-radius: var(--radius);
}

.sprunglink:focus {
  top: var(--a-4);
}

.kicker {
  display: flex;
  align-items: center;
  gap: var(--a-3);
  margin-bottom: var(--a-3);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gruen-dunkel);
}

.kicker::before {
  content: "";
  width: 2rem;
  height: 3px;
  border-radius: var(--radius-voll);
  background: var(--gruen);
}

.kicker--hell {
  color: var(--gruen); /* auf Dunkelblau 7,0:1 */
}

/* ---------- Knöpfe ---------- */

.knopfreihe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--a-3);
}

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--a-2);
  min-height: 3rem;
  padding: var(--a-3) var(--a-5);
  border: 2px solid transparent;
  border-radius: var(--radius-voll);
  /* Auch für <button>: Browser-Standards für Hintergrund und Schrift aufheben */
  background: none;
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
  text-decoration: none;
  line-height: 1.2;
  cursor: pointer;
  transition:
    background-color var(--dauer-kurz) ease,
    border-color var(--dauer-kurz) ease,
    color var(--dauer-kurz) ease;
}

.knopf {
  transition:
    background-color var(--dauer-kurz) ease,
    border-color var(--dauer-kurz) ease,
    color var(--dauer-kurz) ease,
    transform var(--dauer-kurz) ease,
    box-shadow var(--dauer-kurz) ease;
}

.knopf:hover {
  transform: translateY(-2px);
}

.knopf:active {
  transform: translateY(0);
}

.knopf--gruen {
  background: linear-gradient(135deg, var(--gruen-hell), var(--gruen));
  color: var(--navy); /* Dunkelblau auf Grün 7,0:1 */
  box-shadow: 0 4px 14px rgb(124 179 49 / 0.25);
}

.knopf--gruen:hover {
  background: linear-gradient(135deg, var(--gruen-hell), var(--gruen-hover));
  box-shadow: var(--schatten-gruen);
}

.knopf--rand {
  border-color: var(--navy);
  color: var(--navy);
}

.knopf--rand:hover {
  background: var(--navy);
  color: var(--flaeche);
}

.knopf--hell {
  border-color: var(--flaeche);
  color: var(--flaeche);
}

.knopf--hell:hover {
  background: var(--flaeche);
  color: var(--navy);
}

.knopf--klein {
  min-height: 2.75rem;
  padding: var(--a-2) var(--a-4);
  font-size: var(--groesse-klein);
}

.knopf--gross {
  width: 100%;
  min-height: 3.5rem;
  font-size: var(--groesse-gross);
}

.nur-breit {
  display: none;
}

/* ---------- Schmale Infoleiste ganz oben ---------- */

.topleiste {
  background: var(--navy);
  color: var(--flaeche);
  font-size: var(--groesse-klein);
}

.topleiste-reihe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--a-3) var(--a-5);
  padding-block: var(--a-2);
}

.topleiste a,
.topleiste span {
  display: inline-flex;
  align-items: center;
  gap: var(--a-2);
  min-height: 2rem;
  text-decoration: none;
}

.topleiste a:hover {
  text-decoration: underline;
}

.topleiste .icon {
  color: var(--gruen);
}

.topleiste :focus-visible {
  outline-color: var(--gruen);
}

/* ---------- Kopfzeile ---------- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 20;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.93), rgb(244 247 242 / 0.87));
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid rgb(8 27 42 / 0.06);
  transition: box-shadow var(--dauer-kurz) ease;
}

/* Beim Scrollen bekommt die Kopfzeile Tiefe (Klasse setzt script.js) */
.kopf--schwebt {
  box-shadow: var(--schatten-s);
}

/* Handy: Logo und Anrufen oben, Navigation als eigene Zeile darunter */
.kopf-reihe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: var(--a-4);
  padding-top: var(--a-3);
}

.marke {
  display: flex;
  align-items: center;
  gap: var(--a-2);
  text-decoration: none;
}

/* Die Logo-Zuschnitte haben einen weißen Grund. Die Kopfzeile ist zwar auch
   hell, aber durchscheinend: über dunklen Abschnitten färbt sie sich leicht
   ein, und das weiße Rechteck des Logos stach als Balken hervor. "multiply"
   lässt Weiß verschwinden und behält Blau und Grün. */
.marke-zeichen,
.marke-schrift {
  mix-blend-mode: multiply;
}

.marke-zeichen {
  width: auto;
  height: clamp(2.5rem, 2.1rem + 1.5vw, 3.25rem);
}

.marke-schrift {
  width: auto;
  height: clamp(1.45rem, 1.15rem + 1.2vw, 2.1rem);
}

.navigation {
  position: relative;
  order: 3;
  display: flex;
  gap: var(--a-5);
  width: 100%;
  margin-top: var(--a-1);
  overflow-x: auto;
  scrollbar-width: none;
}

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

/* ---------- Hinweis, dass die Navigation seitlich weitergeht ----------
   Am Handy ist die Leiste breiter als das Fenster (rund 454 px Inhalt bei
   358 px Sicht). Ohne Hinweis sieht niemand, dass hinter "Referenzen" noch
   "Fragen" und "Kontakt" kommen. Der weiche Rand macht das sichtbar.

   Die Klassen setzt script.js je nach Scrollstand – fest verdrahtet würde
   der Rand auch dann stehen bleiben, wenn man schon am Ende angekommen
   ist, und den letzten Punkt dauerhaft ausblenden. */

.navigation--mehr-rechts {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
}

.navigation--mehr-links {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 2.5rem), transparent);
  mask-image: linear-gradient(to left, #000 calc(100% - 2.5rem), transparent);
}

.navigation--mehr-links.navigation--mehr-rechts {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
  mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
}

.navigation a {
  display: inline-flex;
  flex: none;
  align-items: center;
  min-height: 2.75rem;
  font-size: var(--groesse-klein);
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  color: var(--text-leise);
  transition: color var(--dauer-kurz) ease;
}

.navigation a:hover,
.navigation a[aria-current] {
  color: var(--navy);
}

.navigation a:focus-visible {
  outline-offset: -3px;
}

/* Ein einziger Balken, der per transform unter den aktiven Punkt gleitet.
   Breite 1px, skaliert auf die Linkbreite: animiert nur transform. */
.navigation-balken {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1px;
  height: 3px;
  background: var(--gruen);
  transform-origin: left center;
  opacity: 0;
  pointer-events: none;
}

.navigation-balken.gleitet {
  transition:
    transform var(--dauer-balken) var(--kurve),
    opacity var(--dauer-kurz) ease;
}

/* ---------- Start: bildschirmfüllend mit Foto ---------- */

.start {
  position: relative;
  display: grid;
  align-items: end;
  min-height: min(44rem, 88vh);
  padding-block: var(--a-8) var(--a-7);
  background: var(--navy);
  color: var(--flaeche);
  overflow: hidden;
}

.start-bild {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 0;
}

.start-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

/* Verlauf, damit die Schrift auf dem Foto sicher lesbar bleibt */
.start-bild::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgb(8 27 42 / 0.95) 0%, rgb(8 27 42 / 0.9) 45%, rgb(8 27 42 / 0.45) 100%);
}

.start-raster {
  position: relative;
  z-index: 1;
}

.start-text {
  max-width: 44rem;
}

/* Auf dem dunklen Foto braucht der zweite Knopf helle Kontur */
.start .knopf--rand {
  border-color: var(--flaeche);
  color: var(--flaeche);
}

.start .knopf--rand:hover {
  background: var(--flaeche);
  color: var(--navy);
}

.start :focus-visible {
  outline-color: var(--gruen);
}

.start .kicker {
  color: var(--gruen);
}

.slogan {
  margin-top: var(--a-3);
  font-size: clamp(1.1rem, 0.9rem + 0.8vw, 1.5rem);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gruen);
}

.einleitung {
  margin-block: var(--a-5) var(--a-6);
  max-width: 38rem;
  font-size: var(--groesse-gross);
  color: var(--text-leise);
}

/* Nur im Einstieg hell, weil dort das abgedunkelte Foto dahinterliegt */
.start .einleitung {
  color: #e3e8ee; /* auf dem abgedunkelten Foto mindestens 4,7:1 */
}

/* Zusage zur Antwortzeit, direkt unter den Knöpfen.
   Erscheint nur, wenn reaktion.text in inhalte/seite.json gefüllt ist —
   seo.mjs lässt den Block sonst leer. Der Text steht bewusst hier oben:
   Wer gerade auf „Anfragen" schaut, will wissen, wann Antwort kommt. */
.reaktion {
  display: flex;
  gap: var(--a-2);
  align-items: center;
  margin-top: var(--a-4);
  color: #e3e8ee; /* wie .start .einleitung, auf dem abgedunkelten Foto ≥ 4,7:1 */
  font-size: var(--groesse-klein);
  font-weight: 600;
}

.reaktion .icon {
  width: 1.4rem;
  height: 1.4rem;
  flex: none;
  padding: 0.22rem;
  border-radius: var(--radius-voll);
  background: var(--gruen);
  color: var(--navy);
  stroke-width: 3;
}

/* Vertrauenspunkte als Reihe unter den Knöpfen */
.vertrauen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--a-3) var(--a-5);
  margin-top: var(--a-7);
  padding-top: var(--a-5);
  border-top: 1px solid rgb(255 255 255 / 0.18);
}

.vertrauen li {
  display: flex;
  align-items: center;
  gap: var(--a-2);
  font-size: var(--groesse-klein);
  font-weight: 600;
}

.vertrauen .icon {
  width: 1.4rem;
  height: 1.4rem;
  padding: 0.22rem;
  border-radius: var(--radius-voll);
  background: var(--gruen);
  color: var(--navy);
  stroke-width: 3;
}

/* ---------- Beweis-Band mit echten Zahlen ---------- */

.fakten {
  background: var(--flaeche-hell);
  border-bottom: 1px solid var(--linie);
}

.fakten-reihe {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--a-5);
  padding-block: var(--a-6);
  text-align: center;
}

.fakt-zahl {
  display: block;
  font-size: clamp(1.8rem, 1.2rem + 2vw, 2.75rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--navy);
}

.fakt-text {
  display: block;
  margin-top: var(--a-2);
  font-size: var(--groesse-klein);
  color: var(--text-leise);
}

.fakt-sterne {
  justify-content: center;
  margin-bottom: var(--a-2);
}

.fakten .stern {
  width: 1.1rem;
  height: 1.1rem;
}

/* ---------- Über uns mit Firmenfoto ---------- */

.ueber {
  display: grid;
  gap: var(--a-6);
  align-items: center;
}

.ueber-bild img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
}

.ueber-text p {
  margin-top: var(--a-4);
  font-size: var(--groesse-gross);
  color: var(--text-leise);
}

.ueber-text .knopfreihe {
  margin-top: var(--a-6);
}

/* ---------- Abschnitte ---------- */

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

.abschnitt--hell {
  background: var(--flaeche-hell);
}

.abschnitt--dunkel {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(52rem 28rem at 88% -10%, rgb(124 179 49 / 0.30), transparent 62%),
    radial-gradient(38rem 24rem at 8% 110%, rgb(23 49 74 / 0.85), transparent 68%),
    linear-gradient(165deg, #0b2233 0%, var(--navy) 38%, var(--navy-tief) 100%);
  color: var(--flaeche);
}

.abschnitt-einleitung {
  margin-top: var(--a-3);
  max-width: 36rem;
  color: var(--text-leise);
}

.abschnitt--dunkel .abschnitt-einleitung {
  color: #c9d3dc; /* auf Dunkelblau 11:1 */
}

/* Leistungen */

.leistungen {
  display: grid;
  gap: var(--a-3);
  margin-top: var(--a-6);
}

.leistung {
  display: flex;
  gap: var(--a-3);
  padding: var(--a-4);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
}

.leistung p {
  margin-top: var(--a-1);
  color: var(--text-leise);
}

.icon--haken {
  width: 1.75rem;
  height: 1.75rem;
  padding: 0.3rem;
  border-radius: var(--radius-voll);
  background: var(--gruen);
  color: var(--navy);
  stroke-width: 3;
}

/* Referenzen als Vorher-nachher-Schau */

.nur-fuer-screenreader {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.schau {
  margin-top: var(--a-6);
}

.schau-buehne {
  display: grid;
  gap: var(--a-5);
}

.vergleich {
  position: relative;
  /* Startwert; das Skript setzt --pos und --verhaeltnis (style-Attribute sperrt die CSP) */
  --pos: 50%;
  aspect-ratio: var(--verhaeltnis, 4 / 3);
  max-height: min(32rem, 65vh);
  margin-inline: auto;
  overflow: hidden;
  border-radius: var(--radius) var(--radius) 0 0;
  /* Cursor zeigt: hier lässt sich schieben */
  cursor: ew-resize;
  touch-action: pan-y;
}

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

/* Das Vorher-Bild liegt in voller Größe über dem Nachher-Bild und wird per
   clip-path beschnitten: kein Umbruch, kein Nachskalieren, GPU-freundlich. */
.vergleich-vorher {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
  /* Kurze Glättung folgt dem Zeiger, ohne zu schleppen */
  transition: clip-path 70ms linear;
}

/* Rücklauf in die Mitte und Tastaturschritte gleiten weich */
.vergleich--gleitet .vergleich-vorher,
.vergleich--gleitet .vergleich-griff {
  transition-duration: 0.45s;
  transition-timing-function: var(--kurve);
}

.vergleich-vorher picture,
.vergleich-vorher img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Unten, damit sie nicht auf den ins Foto eingebrannten Beschriftungen liegen */
.vergleich-schild {
  position: absolute;
  bottom: var(--a-3);
  padding: 0.2rem var(--a-3);
  border-radius: var(--radius-voll);
  background: rgb(8 27 42 / 0.85);
  color: var(--flaeche);
  font-size: var(--groesse-klein);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
}

.vergleich-schild--vorher {
  left: var(--a-3);
}

.vergleich-schild--nachher {
  right: var(--a-3);
}

.vergleich-griff {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  margin-left: -1px;
  background: rgb(255 255 255 / 0.9);
  box-shadow: 0 0 0 1px rgb(8 27 42 / 0.2);
  pointer-events: none;
  transition: left 70ms linear;
}

/* Kleiner Griff mit Pfeilen, damit klar ist: hier lässt sich schieben */
.vergleich-griff::after {
  content: "‹ ›";
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  transform: translate(-50%, -50%);
  border-radius: var(--radius-voll);
  background: var(--flaeche);
  color: var(--navy);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1;
  box-shadow: 0 0.2rem 0.6rem rgb(8 27 42 / 0.35);
}

/* Der Regler liegt unsichtbar über dem Bild: Maus, Finger und Tastatur bedienen dasselbe Element. */
.vergleich-regler {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}

.vergleich:has(.vergleich-regler:focus-visible) {
  outline: 3px solid var(--gruen-dunkel);
  outline-offset: 3px;
}

/* Mindestens 44 px hoch (Regel aus dem Skill webseite-neu). Der Text ist
   nur 26 px hoch, deshalb Luft nach oben und unten statt einer größeren
   Schrift – das Aussehen bleibt, die Fläche wächst.
   Der obere Abstand ist um dieselbe Luft verringert, damit der Abstand
   zum Absatz darüber gleich bleibt. */
.folie-gross {
  display: inline-block;
  margin-top: calc(var(--a-3) - 0.68rem);
  padding-block: 0.68rem;
  font-weight: 700;
  color: var(--gruen-dunkel);
  text-underline-offset: 0.2em;
}

.schau-steuerung {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--a-4);
  margin-top: var(--a-5);
}

.schau-knopf {
  width: 3rem;
  height: 3rem;
  border: 2px solid var(--navy);
  border-radius: var(--radius-voll);
  background: none;
  color: var(--navy);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition:
    background-color var(--dauer-kurz) ease,
    color var(--dauer-kurz) ease;
}

.schau-knopf:hover {
  background: var(--navy);
  color: var(--flaeche);
}

.schau-punkte {
  display: flex;
  gap: var(--a-2);
}

.schau-punkt {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  cursor: pointer;
}

.schau-punkt::before {
  content: "";
  width: 0.75rem;
  height: 0.75rem;
  border-radius: var(--radius-voll);
  background: var(--linie);
  transition: background-color var(--dauer-kurz) ease;
}

.schau-punkt[aria-current="true"]::before {
  background: var(--gruen-dunkel);
}

.referenzen {
  display: grid;
  gap: var(--a-5);
  margin-top: var(--a-6);
}

.referenz {
  overflow: hidden;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten-m);
}

.referenz-bild {
  display: block;
  cursor: zoom-in;
}

.referenz-bild img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform var(--dauer-balken) var(--kurve);
}

.referenz-bild:hover img {
  transform: scale(1.02);
}

.referenz-bild:focus-visible {
  outline-offset: -3px;
}

.referenz-text {
  padding: var(--a-4) var(--a-5) var(--a-5);
}

.referenz-text p {
  margin-top: var(--a-1);
  color: var(--text-leise);
}

.referenzen-aufruf {
  display: grid;
  justify-items: start;
  gap: var(--a-4);
  margin-top: var(--a-6);
  padding: var(--a-5);
  border-left: 4px solid var(--gruen);
  background: var(--flaeche);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.referenzen-aufruf p {
  font-size: var(--groesse-gross);
  font-weight: 600;
}

/* Ablauf */

.schritte {
  display: grid;
  gap: var(--a-5);
  margin-top: var(--a-6);
  counter-reset: schritt;
}

.schritt {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--a-4);
  row-gap: var(--a-1);
}

.schritt-nummer {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-voll);
  background: var(--navy);
  color: var(--flaeche);
  font-weight: 800;
}

.schritt p {
  color: var(--text-leise);
}

/* Kontakt */

.kontakt {
  display: grid;
  gap: var(--a-6);
}

.kontakt-wege {
  display: grid;
  gap: var(--a-3);
}

.kontakt-daten {
  display: grid;
  gap: var(--a-3);
  margin-top: var(--a-4);
  padding-top: var(--a-5);
  border-top: 1px solid var(--navy-hell);
}

.kontakt-daten li {
  display: flex;
  align-items: center;
  gap: var(--a-3);
}

.kontakt-daten .icon {
  color: var(--gruen);
}

/* Wie .folie-gross: 26 px Text auf 44 px Trefferfläche bringen. */
.kontakt-daten a {
  display: inline-block;
  padding-block: 0.68rem;
  text-decoration-color: var(--gruen);
  text-underline-offset: 0.2em;
}

.abschnitt--dunkel :focus-visible {
  outline-color: var(--gruen);
}

/* ---------- Fußzeile ---------- */

.fuss {
  padding-block: var(--a-5) calc(var(--a-8) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--linie);
  font-size: var(--groesse-klein);
  color: var(--text-leise);
}

.fuss-reihe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--a-4) var(--a-5);
}

.fuss-marke {
  display: flex;
  align-items: center;
  gap: var(--a-4);
}

.fuss-logo {
  width: auto;
  height: 6rem;
}

.fuss-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--a-2) var(--a-5);
}

/* 0,25 rem reichten nur für 30 px. Mit 0,6 rem sind es 44 px. */
.fuss-links a {
  display: inline-block;
  padding-block: 0.78rem;
}

/* ---------- Rechtstexte ---------- */

.kopf-reihe--einfach {
  padding-bottom: var(--a-3);
}

.rechtstext {
  max-width: 48rem;
}

.rechtstext h1 {
  margin-bottom: var(--a-5);
  font-size: var(--groesse-h2);
}

.rechtstext h2 {
  margin-top: var(--a-7);
  margin-bottom: var(--a-3);
  font-size: 1.35rem;
}

.rechtstext p + p,
.rechtstext p + ul,
.rechtstext ul + p {
  margin-top: var(--a-3);
}

.rechtstext ul {
  padding-left: var(--a-5);
  list-style: disc;
}

.rechtstext li + li {
  margin-top: var(--a-1);
}

.rechtstext a {
  color: var(--gruen-dunkel);
  text-underline-offset: 0.2em;
}

.rechtstext code {
  font-size: var(--groesse-klein);
}

.inhaltsverzeichnis {
  margin-block: var(--a-5);
  padding: var(--a-4) var(--a-5);
  background: var(--flaeche-hell);
  border-radius: var(--radius);
}

.inhaltsverzeichnis ol {
  padding-left: var(--a-5);
  list-style: decimal;
  columns: 2 14rem;
  column-gap: var(--a-6);
}

.inhaltsverzeichnis a {
  display: inline-block;
  padding-block: var(--a-1);
}

.rechtstext-kasten {
  margin-top: var(--a-5);
  padding: var(--a-2) var(--a-5) var(--a-5);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
}

.rechtstext-kasten h2:first-child {
  margin-top: var(--a-4);
}

.rechtstext .formular-zeilen {
  list-style: "– ";
}

.rechtstext-hervorhebung {
  padding: var(--a-3) var(--a-4);
  border-left: 4px solid var(--gruen);
  background: var(--flaeche-hell);
}

.rechtstext .rechtstext-stand {
  margin-top: var(--a-7);
  color: var(--text-leise);
}

/* Entwurfsstand: fehlende Angaben gelb, damit nichts versehentlich online geht */
.entwurf-hinweis {
  margin-bottom: var(--a-5);
  padding: var(--a-3) var(--a-4);
  border-left: 4px solid #b7791f;
  background: #fff8e1; /* Dunkelblau darauf 17:1 */
  font-weight: 600;
}

.platzhalter {
  padding: 0 0.25em;
  border-radius: 0.2em;
  background: #ffe58a; /* Dunkelblau darauf 15:1 */
  outline: 1px dashed #b7791f;
}

.platzhalter::before {
  content: "[";
}

.platzhalter::after {
  content: "]";
}

/* ---------- Vertrauenspunkte unter dem Einstieg ---------- */

.vertrauen {
  display: grid;
  gap: var(--a-2);
  margin-top: var(--a-6);
  padding-top: var(--a-5);
  border-top: 1px solid var(--linie);
}

.vertrauen li {
  display: flex;
  align-items: center;
  gap: var(--a-3);
  font-weight: 600;
}

.vertrauen .icon {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.25rem;
  border-radius: var(--radius-voll);
  background: var(--gruen);
  color: var(--navy);
  stroke-width: 3;
}

/* ---------- Leistungen als Karten ---------- */

.leistungs-karten {
  display: grid;
  gap: var(--a-4);
  margin-top: var(--a-6);
}

.leistung-karte {
  position: relative;
  display: grid;
  gap: var(--a-2);
  padding: var(--a-6) var(--a-5);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--flaeche);
  box-shadow: var(--schatten-s);
  transition:
    border-color var(--dauer-kurz) ease,
    transform 0.25s var(--kurve),
    box-shadow 0.25s ease;
}

.leistung-karte:hover {
  border-color: transparent;
  transform: translateY(-4px);
  box-shadow: var(--schatten-m);
}

.leistung-karte:hover .karte-zeichen {
  transform: scale(1.08) rotate(-6deg);
}

.leistung-karte:has(a:focus-visible) {
  border-color: var(--gruen);
}

.karte-zeichen {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-s);
  background: linear-gradient(135deg, var(--gruen-hell), var(--gruen));
  color: var(--navy);
  box-shadow: 0 4px 12px rgb(124 179 49 / 0.3);
  transition: transform 0.25s var(--kurve);
}

.leistung-karte h3 a {
  text-decoration: none;
}

/* Ganze Karte anklickbar, aber nur ein Link im Tab-Verlauf */
.leistung-karte h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.leistung-karte p {
  color: var(--text-leise);
}

.karte-mehr {
  font-size: var(--groesse-klein);
  font-weight: 700;
  color: var(--gruen-dunkel);
}

.karte-mehr::after {
  content: " →";
}

/* ---------- Sanftes Einblenden beim Scrollen ---------- */
/* Die Klasse setzt nur JavaScript, ohne JS ist alles sofort sichtbar. */

.enthuellen {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.45s ease-out var(--verzug, 0ms),
    transform 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.1) var(--verzug, 0ms);
}

.enthuellen.sichtbar {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .enthuellen {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Bewertungen ---------- */

.bewertungskasten {
  display: grid;
  justify-items: center;
  gap: var(--a-4);
  max-width: 40rem;
  margin-inline: auto;
  text-align: center;
}

.bewertung {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--a-2) var(--a-4);
}

.sterne {
  display: flex;
  gap: 0.15rem;
}

.stern {
  width: 1.75rem;
  height: 1.75rem;
  fill: none;
  stroke: var(--gruen);
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.stern--voll {
  fill: var(--gruen);
}

.bewertung-zahl {
  font-size: var(--groesse-gross);
  font-weight: 800;
}

.bewertung-anzahl,
.bewertung-text {
  color: #c9d3dc; /* auf Dunkelblau 8,5:1 */
}

/* ---------- Einsatzgebiete ---------- */

/* Ohne Orte in der Inhaltsdatei bleibt der Abschnitt aus. */
#gebiete:not(:has(h2)) {
  display: none;
}

.gebiete {
  display: flex;
  flex-wrap: wrap;
  gap: var(--a-3);
  margin-top: var(--a-5);
}

.gebiete li {
  padding: var(--a-2) var(--a-4);
  border-radius: var(--radius-voll);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  font-weight: 600;
}

/* ---------- Anfrage-Rechner ---------- */

/*
  Zwei Hälften: links die Angaben, rechts die fertige Nachricht. Die Nachricht
  entsteht vollständig im Browser; verschickt wird erst, wenn jemand auf
  WhatsApp oder E-Mail klickt. Deshalb braucht der Abschnitt kein <form> —
  das wäre wegen "form-action 'none'" in der CSP ohnehin blockiert.
*/

.rechner {
  display: grid;
  gap: var(--a-5);
  margin-top: var(--a-6);
}

.rechner-felder {
  display: grid;
  gap: var(--a-6);
  padding: var(--a-5);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--flaeche);
  box-shadow: var(--schatten-s);
}

/* fieldset ohne den Browser-Rahmen; min-width verhindert, dass es das Raster sprengt */
.rechner-feld {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.rechner-feld legend,
.rechner-legende {
  display: flex;
  align-items: center;
  gap: var(--a-3);
  margin-bottom: var(--a-4);
  padding: 0;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
}

.rechner-nummer {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-voll);
  background: var(--navy);
  color: var(--flaeche);
  font-size: var(--groesse-klein);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.rechner-freiwillig {
  font-size: var(--groesse-klein);
  font-weight: 500;
  color: var(--text-leise);
}

/* ---------- Auswahl als Chips ---------- */

.wahl {
  display: flex;
  flex-wrap: wrap;
  gap: var(--a-2);
}

.wahl-chip {
  position: relative;
}

/* Das Eingabefeld liegt unsichtbar über dem Chip und bleibt bedienbar */
.wahl-chip input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.wahl-chip span {
  display: block;
  padding: var(--a-3) var(--a-4);
  border: 1px solid var(--linie-bedien);
  border-radius: var(--radius-voll);
  background: var(--flaeche);
  font-weight: 600;
  line-height: 1.2;
  transition:
    background-color var(--dauer-kurz) ease,
    border-color var(--dauer-kurz) ease,
    color var(--dauer-kurz) ease;
}

.wahl-chip input:hover:not(:checked) + span {
  border-color: var(--navy);
}

.wahl-chip input:checked + span {
  border-color: var(--navy);
  background: var(--navy);
  color: var(--flaeche); /* Weiß auf Navy 17,5:1 */
}

.wahl-chip input:focus-visible + span {
  outline: 3px solid var(--gruen-dunkel);
  outline-offset: 2px;
}

/* ---------- Flächenregler ---------- */

.rechner-anzeige {
  margin: 0 0 var(--a-3);
  font-family: var(--schrift-titel);
  font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3rem);
  font-stretch: 108%;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  line-height: 1;
  color: var(--navy);
}

.flaechen-regler {
  width: 100%;
  /* 2,75rem: der Regler selbst waere nur so hoch wie seine Spur und damit
     am Handy kaum zu treffen. Die Spur bleibt duenn und wird zentriert. */
  height: 2.75rem;
  margin: 0;
  appearance: none;
  background: none;
  cursor: ew-resize;
}

.flaechen-regler::-webkit-slider-runnable-track {
  height: 0.5rem;
  border: 1px solid var(--linie-bedien);
  border-radius: var(--radius-voll);
  background: var(--flaeche-hell);
}

.flaechen-regler::-moz-range-track {
  height: 0.5rem;
  border: 1px solid var(--linie-bedien);
  border-radius: var(--radius-voll);
  background: var(--flaeche-hell);
}

.flaechen-regler::-webkit-slider-thumb {
  appearance: none;
  width: 1.75rem;
  height: 1.75rem;
  /* Griff mittig auf der Spur: (Spurhöhe - Griffhöhe) / 2 */
  margin-top: -0.625rem;
  border: 3px solid var(--flaeche);
  border-radius: var(--radius-voll);
  background: var(--gruen-dunkel);
  box-shadow: 0 0.15rem 0.5rem rgb(8 27 42 / 0.3);
}

.flaechen-regler::-moz-range-thumb {
  width: 1.75rem;
  height: 1.75rem;
  border: 3px solid var(--flaeche);
  border-radius: var(--radius-voll);
  background: var(--gruen-dunkel);
  box-shadow: 0 0.15rem 0.5rem rgb(8 27 42 / 0.3);
}

.flaechen-regler:focus-visible {
  outline: none;
}

.flaechen-regler:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px var(--gruen);
}

.flaechen-regler:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 3px var(--gruen);
}

.rechner-skala {
  display: flex;
  justify-content: space-between;
  margin: var(--a-2) 0 0;
  font-size: var(--groesse-klein);
  color: var(--text-leise);
}

/* ---------- Ort ---------- */

.rechner-eingabe {
  width: 100%;
  max-width: 22rem;
  padding: var(--a-3) var(--a-4);
  border: 1px solid var(--linie-bedien);
  border-radius: var(--radius-s);
  background: var(--flaeche);
  color: var(--text);
  /* 1rem verhindert, dass iOS beim Tippen hineinzoomt */
  font: inherit;
}

.rechner-eingabe::placeholder {
  color: var(--text-leise);
}

.rechner-eingabe:focus-visible {
  outline: 3px solid var(--gruen-dunkel);
  outline-offset: 1px;
}

.rechner-notiz {
  margin: var(--a-2) 0 0;
  color: var(--text-leise);
  font-size: var(--groesse-klein);
}

/* ---------- Fertige Nachricht ---------- */

.rechner-ergebnis {
  /* Die Knoepfe richten sich nach der Breite dieser Karte, nicht nach der des
     Fensters: in der schmalen Seitenspalte stehen sie untereinander. */
  container: ergebnis / inline-size;
  display: grid;
  align-content: start;
  gap: var(--a-4);
  padding: var(--a-5);
  border-radius: var(--radius);
  background: var(--navy);
  color: var(--flaeche);
  box-shadow: var(--schatten-m);
}

.rechner-schild {
  margin: 0;
  color: var(--gruen-hell); /* auf Navy 10,9:1 */
  font-size: var(--groesse-klein);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rechner-nachricht {
  min-height: 12rem;
  margin: 0;
  padding: var(--a-4);
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: var(--radius-s);
  background: rgb(255 255 255 / 0.06);
  color: var(--flaeche);
  line-height: 1.6;
  /* Zeilenumbrüche aus der Nachricht übernehmen, ohne <br> im Text */
  white-space: pre-line;
}

.rechner-wege {
  display: grid;
  gap: var(--a-3);
}

.rechner-hinweis {
  margin: 0;
  color: #c9d3dc; /* auf Navy 11,2:1 */
  font-size: var(--groesse-klein);
  line-height: 1.5;
}

/* Hinweis nach „Per E-Mail senden“ – entsteht in script.js. Ohne ihn
   landete man ohne eingerichtetes Mailprogramm im Nichts. */
.rechner-mailhilfe {
  display: grid;
  gap: var(--a-3);
  padding: var(--a-4);
  border: 1px solid rgb(255 255 255 / 0.16);
  border-left: 3px solid var(--gruen);
  border-radius: var(--radius-s);
  background: rgb(255 255 255 / 0.06);
}

/* display: grid schlägt sonst das hidden-Attribut */
.rechner-mailhilfe[hidden] {
  display: none;
}

.rechner-mailhilfe p {
  margin: 0;
  color: #c9d3dc; /* auf Navy 11,2:1 */
  font-size: var(--groesse-klein);
  line-height: 1.5;
}

.rechner-mailhilfe .rechner-mailhilfe-hinweis {
  color: var(--flaeche);
  font-weight: 600;
}

.rechner-mailhilfe a {
  color: var(--flaeche);
  text-underline-offset: 0.2em;
}

.rechner-mailhilfe-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--a-2);
}

.rechner-mailhilfe .rechner-mailhilfe-status {
  color: var(--gruen-hell); /* auf Navy 10,9:1 */
}

.rechner-mailhilfe-status:empty {
  display: none;
}

/* ---------- Anfrage über die Website senden ----------
   Formular unter „Per E-Mail senden“, verschickt über worker/index.js. */

.rechner-versand {
  display: grid;
  gap: var(--a-3);
  padding-top: var(--a-4);
  border-top: 1px solid rgb(255 255 255 / 0.16);
}

.rechner-versand[hidden] {
  display: none;
}

.rechner-versand-titel {
  margin: 0;
  color: var(--flaeche);
  font-weight: 700;
}

.rechner-versand-feld {
  display: grid;
  gap: var(--a-1);
}

.rechner-versand label {
  color: var(--flaeche);
  font-size: var(--groesse-klein);
  font-weight: 600;
}

.rechner-versand .rechner-eingabe {
  max-width: none;
}

.rechner-versand textarea.rechner-eingabe {
  min-height: 5rem;
  resize: vertical;
}

/* Das dunkle Grün der hellen Felder links hebt sich auf Navy kaum ab */
.rechner-versand .rechner-eingabe:focus-visible {
  outline-color: var(--gruen);
}

.rechner-versand .rechner-freiwillig {
  color: #c9d3dc; /* auf Navy 11,2:1 */
}

.rechner-versand .rechner-hinweis a {
  color: var(--flaeche);
  text-underline-offset: 0.2em;
}

.rechner-versand-status {
  margin: 0;
  color: var(--flaeche);
  font-size: var(--groesse-klein);
}

.rechner-versand-status[data-art="fehler"] {
  color: #ffb4a8; /* auf Navy 10,6:1 */
  font-weight: 600;
}

.rechner-versand-status:empty {
  display: none;
}

/* Falle für Spam-Programme: aus dem Blick, aber nicht display: none –
   manche Programme überspringen ausdrücklich versteckte Felder. */
.rechner-honig {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.rechner-erfolg {
  display: grid;
  gap: var(--a-2);
  padding: var(--a-4);
  border-left: 3px solid var(--gruen);
  border-radius: var(--radius-s);
  background: rgb(255 255 255 / 0.08);
}

.rechner-erfolg p {
  margin: 0;
  color: #c9d3dc; /* auf Navy 11,2:1 */
}

.rechner-erfolg .rechner-erfolg-titel {
  color: var(--flaeche);
  font-weight: 700;
}

.rechner-erfolg:focus-visible {
  outline: 3px solid var(--gruen);
  outline-offset: 2px;
}

@container ergebnis (min-width: 36rem) {
  .rechner-wege {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 60rem) {
  .rechner {
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--a-6);
    align-items: start;
  }

  .rechner-felder {
    padding: var(--a-6);
  }

  /* Die Nachricht bleibt beim Ausfüllen im Blick */
  .rechner-ergebnis {
    position: sticky;
    top: var(--freiraum-kopf);
  }
}

/* ---------- Häufige Fragen ---------- */

.fragen {
  display: grid;
  gap: var(--a-3);
  margin-top: var(--a-6);
  max-width: 48rem;
}

.frage {
  border: 1px solid var(--linie);
  border-radius: var(--radius-s);
  background: var(--flaeche);
  box-shadow: var(--schatten-s);
  transition: box-shadow var(--dauer-kurz) ease;
}

.frage[open] {
  box-shadow: var(--schatten-m);
}

.frage summary::after {
  transition: transform 0.25s var(--kurve);
}

.frage[open] summary::after {
  transform: rotate(180deg);
}

.frage summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--a-4);
  min-height: 3.25rem;
  padding: var(--a-3) var(--a-5);
  font-weight: 700;
  cursor: pointer;
}

.frage summary::after {
  content: "+";
  flex: none;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--gruen-dunkel);
}

.frage[open] summary::after {
  content: "–";
}

.frage p {
  padding: 0 var(--a-5) var(--a-5);
  color: var(--text-leise);
}

/* ---------- Aktionsleiste am unteren Rand (Handy) ---------- */

.aktionsleiste {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--linie);
  border-top: 1px solid var(--linie);
}

.aktionsleiste a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--a-1);
  min-height: 3.75rem;
  background: var(--flaeche);
  color: var(--navy);
  font-size: var(--groesse-klein);
  font-weight: 700;
  text-decoration: none;
}

.aktionsleiste .aktionsleiste-haupt {
  background: var(--gruen);
}

.aktionsleiste a:hover {
  background: var(--flaeche-hell);
}

.aktionsleiste .aktionsleiste-haupt:hover {
  background: var(--gruen-hover);
}

/* Platz, damit die Leiste die Fußzeile nicht verdeckt */
body {
  padding-bottom: 4rem;
}

/* ---------- Leistungs-Unterseiten ---------- */

.brotkrumen {
  margin-bottom: var(--a-5);
  font-size: var(--groesse-klein);
  color: var(--text-leise);
}

.brotkrumen ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--a-2);
}

.brotkrumen li + li::before {
  content: "›";
  margin-right: var(--a-2);
  color: var(--linie);
}

.brotkrumen a {
  padding-block: var(--a-1);
}

.leistungsseite {
  max-width: 48rem;
}

.leistungsseite h2 {
  margin-top: var(--a-7);
  margin-bottom: var(--a-4);
  font-size: 1.35rem;
}

.leistungen-punkte {
  display: grid;
  gap: var(--a-3);
}

.leistungen-punkte li {
  padding: var(--a-3) var(--a-4);
  border: 1px solid var(--linie);
  border-left: 4px solid var(--gruen);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.weitere-leistungen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--a-3);
}

.weitere-leistungen a {
  display: inline-block;
  padding: var(--a-2) var(--a-4);
  border: 1px solid var(--linie);
  border-radius: var(--radius-voll);
  font-size: var(--groesse-klein);
  font-weight: 600;
  text-decoration: none;
}

.weitere-leistungen a:hover {
  border-color: var(--navy);
}

/* Auf der Startseite verlinken die Leistungstitel auf ihre Unterseite */
.leistung h3 a {
  text-decoration-color: var(--gruen);
  text-underline-offset: 0.2em;
}

/* ---------- Schwebender WhatsApp-Knopf ---------- */

/* Am Handy übernimmt die Aktionsleiste unten, der schwebende Knopf entfällt. */
.whatsapp-schwebend {
  display: none;
  position: fixed;
  right: var(--a-4);
  bottom: calc(var(--a-4) + env(safe-area-inset-bottom));
  z-index: 30;
  align-items: center;
  gap: var(--a-2);
  min-height: 3.25rem;
  padding: var(--a-3) var(--a-5) var(--a-3) var(--a-4);
  border-radius: var(--radius-voll);
  background: var(--gruen);
  color: var(--navy);
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 0.5rem 1.5rem rgb(8 27 42 / 0.3);
  transition: background-color 0.15s ease;
}

.whatsapp-schwebend:hover {
  background: var(--gruen-hover);
}

.whatsapp-schwebend .icon {
  width: 1.5rem;
  height: 1.5rem;
}

/* ---------- Großansicht ---------- */

.grossansicht {
  width: min(64rem, 100% - 2 * var(--rand-seite));
  max-height: calc(100dvh - 2rem);
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: var(--navy);
  color: var(--flaeche);
}

.grossansicht::backdrop {
  background: rgb(8 27 42 / 0.85);
}

.grossansicht img {
  width: 100%;
  max-height: calc(100dvh - 8rem);
  object-fit: contain;
}

.grossansicht-text {
  padding: var(--a-3) var(--a-4);
}

.grossansicht-schliessen {
  position: absolute;
  top: var(--a-2);
  right: var(--a-2);
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: var(--radius-voll);
  background: var(--flaeche);
  color: var(--navy);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
}

/* ---------- ab Tablet ---------- */

@media (min-width: 40rem) {
  :root {
    --rand-seite: 1.5rem;
  }

  .nur-breit {
    display: inline;
  }

  .nur-schmal {
    display: none;
  }

  .leistungs-karten {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .fakten-reihe {
    grid-template-columns: repeat(4, 1fr);
  }

  .schritte {
    grid-template-columns: repeat(3, 1fr);
  }

  .schritt {
    grid-template-columns: 1fr;
  }

  .schritt-nummer {
    grid-row: auto;
    margin-bottom: var(--a-2);
  }
}

/* ---------- ab Desktop ---------- */

@media (min-width: 60rem) {
  :root {
    --rand-seite: 2rem;
    --freiraum-kopf: 5.5rem;
  }

  .kopf-reihe,
  .kopf-reihe--einfach {
    flex-wrap: nowrap;
    padding-block: 0;
  }

  .marke,
  .kopf-reihe > .knopf {
    margin-block: var(--a-3);
  }

  .navigation {
    order: 0;
    align-self: stretch;
    width: auto;
    margin-top: 0;
    gap: var(--a-6);
    overflow: visible;
  }

  .navigation a {
    min-height: 100%;
    font-size: var(--groesse-basis);
  }

  .start {
    padding-block: var(--a-8);
  }

  .start-raster {
    grid-template-columns: 1fr 1.1fr;
    align-items: center;
    gap: var(--a-7);
  }

  .leistungs-karten {
    grid-template-columns: repeat(3, 1fr);
  }

  .referenzen {
    grid-template-columns: repeat(3, 1fr);
  }

  .start {
    min-height: min(46rem, 90vh);
  }

  .ueber {
    grid-template-columns: 1fr 1fr;
    gap: var(--a-8);
  }

  .ueber--gedreht .ueber-bild {
    order: 2;
  }

  /* Vorher-nachher: Bild und Text nebeneinander, füllt die Breite */
  /* display überschreibt sonst das hidden-Attribut der ausgeblendeten Folien */
  .folie[hidden] {
    display: none;
  }

  .folie {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    align-items: center;
    gap: var(--a-7);
    padding: var(--a-6);
  }

  .vergleich {
    /* Füllt die Spalte: Querformat, der Ausschnitt sitzt mittig */
    aspect-ratio: 4 / 3;
    max-height: none;
    margin-inline: 0;
    border-radius: var(--radius);
  }

  .referenz-text {
    padding: 0;
  }

  .referenz-text h3 {
    font-size: clamp(1.4rem, 1rem + 1vw, 2rem);
  }

  .fragen {
    grid-template-columns: repeat(2, 1fr);
    align-items: start;
    max-width: none;
  }

  .aktionsleiste {
    display: none;
  }

  .whatsapp-schwebend {
    display: inline-flex;
  }

  body {
    padding-bottom: 0;
  }

  .kontakt {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

/* ---------- Sehr breite Schirme ---------- */

@media (min-width: 100rem) {
  :root {
    --rand-seite: 3rem;
    --breite: 96rem;
    --groesse-basis: 1.0625rem;
    --groesse-gross: 1.25rem;
  }
}

/* ======================================================================
   Feinschliff: Ladeanimation, Einstieg, Ablauf, Fußzeile, Schwebeknopf
   ====================================================================== */

/* ---------- Ladeanimation mit Logo ---------- */
/* Verschwindet per CSS von selbst (auch ohne JavaScript); script.js
   blendet sie früher aus, sobald die Seite geladen ist, und überspringt
   sie bei wiederholten Aufrufen in derselben Sitzung. */

.lader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: var(--flaeche);
  animation: lader-weg 0.35s ease-in 2.8s forwards;
}

.lader--fertig {
  animation: lader-weg 0.3s ease-in forwards;
}

.lader-inhalt {
  display: grid;
  justify-items: center;
  gap: var(--a-4);
  animation: lader-auf 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.lader-inhalt img {
  width: auto;
}

.lader-zeichen {
  height: 5.5rem;
}

.lader-schrift {
  height: 2.25rem;
}

.lader-linie {
  width: 10rem;
  height: 3px;
  overflow: hidden;
  border-radius: var(--radius-voll);
  background: var(--linie);
}

.lader-linie::after {
  content: "";
  display: block;
  width: 40%;
  height: 100%;
  border-radius: inherit;
  background: var(--gruen);
  animation: lader-lauf 1.1s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes lader-auf {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes lader-lauf {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(260%);
  }
}

@keyframes lader-weg {
  to {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lader {
    display: none;
  }
}

/* ---------- Einstieg: grünes Leuchten und feiner Verlauf ---------- */

.start-bild::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Deckkraft bewusst niedrig: Weiß bleibt auch an der hellsten Stelle über 5:1 */
  background: radial-gradient(50rem 30rem at 10% 95%, rgb(124 179 49 / 0.16), transparent 65%);
  pointer-events: none;
}

.start-bild::after {
  z-index: 0;
}

.start .knopf--rand {
  backdrop-filter: blur(6px);
  background: rgb(255 255 255 / 0.06);
}

/* ---------- Beweis-Band: Karten auf Weiß ---------- */

.fakten {
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
}

.fakt {
  padding: var(--a-5) var(--a-4);
  border-radius: var(--radius);
  background: var(--flaeche-hell);
}

/* ---------- Ablauf als Zeitstrahl ---------- */

.schritte {
  position: relative;
}

.schritt-nummer {
  background: linear-gradient(135deg, var(--gruen-hell), var(--gruen));
  color: var(--navy);
  box-shadow: 0 6px 16px rgb(124 179 49 / 0.35);
}

@media (min-width: 40rem) {
  /* Verbindungslinie zwischen den Nummern */
  .schritte::before {
    content: "";
    position: absolute;
    top: 1.375rem;
    left: 8%;
    right: 8%;
    height: 2px;
    background: linear-gradient(90deg, var(--gruen), var(--linie));
  }

  .schritt {
    position: relative;
    z-index: 1;
  }

  .schritt-nummer {
    outline: 6px solid var(--flaeche);
  }
}

/* ---------- Bewertungen: Glaskarte ---------- */

.bewertungskasten {
  padding: var(--a-6);
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: var(--radius);
  background: rgb(255 255 255 / 0.05);
  backdrop-filter: blur(8px);
}

/* ---------- Kontaktbereich ---------- */

.kontakt-daten li {
  padding: var(--a-3) var(--a-4);
  border-radius: var(--radius-s);
  background: rgb(255 255 255 / 0.05);
  border: 1px solid rgb(255 255 255 / 0.08);
}

/* ---------- Fußzeile: dunkel, aufgeräumt ---------- */

.fuss {
  background: var(--navy-tief);
  color: #c9d3dc; /* auf Dunkelblau 11:1 */
  border-top: 0;
}

.fuss-logo {
  padding: var(--a-2);
  border-radius: var(--radius-s);
  background: var(--flaeche);
  height: 5rem;
}

.fuss-links a {
  color: #c9d3dc;
  text-decoration-color: rgb(201 211 220 / 0.4);
  text-underline-offset: 0.2em;
}

.fuss-links a:hover {
  color: var(--flaeche);
  text-decoration-color: var(--gruen);
}

.fuss :focus-visible {
  outline-color: var(--gruen);
}

/* ---------- Schwebender WhatsApp-Knopf mit sanftem Puls ---------- */

.whatsapp-schwebend {
  background: linear-gradient(135deg, var(--gruen-hell), var(--gruen));
  box-shadow: 0 0.5rem 1.5rem rgb(8 27 42 / 0.3), 0 0 0 0 var(--gruen-leucht);
  animation: puls 3s ease-out infinite;
}

@keyframes puls {
  0% {
    box-shadow: 0 0.5rem 1.5rem rgb(8 27 42 / 0.3), 0 0 0 0 var(--gruen-leucht);
  }
  60%,
  100% {
    box-shadow: 0 0.5rem 1.5rem rgb(8 27 42 / 0.3), 0 0 0 14px rgb(124 179 49 / 0);
  }
}

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

/* ---------- Vorher-nachher: Griff mit Ring, Karte weicher ---------- */

.vergleich:hover .vergleich-griff::after,
.vergleich:has(.vergleich-regler:focus-visible) .vergleich-griff::after {
  box-shadow: 0 0.2rem 0.6rem rgb(8 27 42 / 0.35), 0 0 0 3px var(--gruen);
}

.schau-knopf,
.schau-punkt {
  transition:
    background-color var(--dauer-kurz) ease,
    color var(--dauer-kurz) ease,
    transform var(--dauer-kurz) ease;
}

.schau-knopf:hover {
  transform: translateY(-2px);
}

/* ---------- Aktionsleiste: Glas ---------- */

.aktionsleiste a {
  background: rgb(255 255 255 / 0.92);
  backdrop-filter: blur(10px);
}

/* ======================================================================
   Randgestaltung: der Bildschirm ist breiter als der Text
   ======================================================================
   Auf großen Schirmen blieben links und rechts große weiße Flächen übrig.
   Zwei Mittel füllen sie, ohne den Text zu bedrängen:
   1. ein fest stehender Grund aus sehr blassen Lichtern in den Logofarben,
   2. ein Punktraster in den Außenrändern, das zur Mitte hin verschwindet.
   Beides liegt hinter dem Inhalt und nimmt keine Klicks an. */

/* ---------- 1. Lebendiger Grund statt reinem Weiß ---------- */
/* Liegt fest im Fenster (nicht im Dokument), damit es beim Scrollen ruhig
   bleibt und die Karte nicht bei jedem Bild neu gezeichnet werden muss.
   Sichtbar nur dort, wo ein Abschnitt keinen eigenen Grund hat. */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(52rem 36rem at 96% -8%, rgb(124 179 49 / 0.20), transparent 60%),
    radial-gradient(46rem 32rem at -8% 34%, rgb(8 27 42 / 0.11), transparent 62%),
    radial-gradient(58rem 40rem at 108% 88%, rgb(124 179 49 / 0.14), transparent 62%),
    radial-gradient(40rem 30rem at 50% 50%, rgb(23 49 74 / 0.05), transparent 70%);
}

/* ---------- 2. Punktraster in den Außenrändern ---------- */
/* Erst ab 90rem, denn vorher gibt es keine Ränder zu füllen. Die Breite
   rechnet sich aus dem, was neben der Inhaltsspalte übrig bleibt. */

@media (min-width: 90rem) {
  .abschnitt {
    position: relative;
  }

  .abschnitt:not(.abschnitt--dunkel)::before,
  .abschnitt:not(.abschnitt--dunkel)::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: max(0px, calc((100% - var(--breite)) / 2 + var(--rand-seite)));
    pointer-events: none;
    background-image: radial-gradient(rgb(8 27 42 / 0.11) 1px, transparent 1.6px);
    background-size: 22px 22px;
  }

  /* Dicht am Bildschirmrand, zur Inhaltsspalte hin ausgeblendet */
  .abschnitt:not(.abschnitt--dunkel)::before {
    left: 0;
    -webkit-mask-image: linear-gradient(to right, #000, transparent 80%);
    mask-image: linear-gradient(to right, #000, transparent 80%);
  }

  .abschnitt:not(.abschnitt--dunkel)::after {
    right: 0;
    -webkit-mask-image: linear-gradient(to left, #000, transparent 80%);
    mask-image: linear-gradient(to left, #000, transparent 80%);
  }
}

/* ---------- Noch breitere Schirme: Inhalt darf mitwachsen ---------- */

@media (min-width: 120rem) {
  :root {
    --breite: 108rem;
    --rand-seite: 4rem;
  }
}


/* ---------- Reine Textseiten bleiben schmal ---------- */
/* Leistungs- und Rechtstexte haben nur eine Spalte. In der breiten
   Inhaltsspalte der Startseite stünden sie einsam am linken Rand, deshalb
   bekommen sie einen eigenen, engeren Rahmen. Das Punktraster rechnet mit
   derselben Variablen und rückt automatisch mit. */

.abschnitt:has(.leistungsseite) {
  --breite: 60rem;
}

/* Rechtstexte begrenzen sich schon selbst auf 48rem, der Rahmen zieht nach,
   damit das Punktraster genau daneben beginnt. */
.abschnitt:has(.rechtstext) {
  --breite: 48rem;
}

/* ======================================================================
   Bewegung: Fortschritt, Einstieg, Kopfzeile, Fragen
   ======================================================================
   Alles hier ist Zugabe. Ohne JavaScript oder bei reduzierter Bewegung
   bleibt die Seite ruhig und vollständig bedienbar. */

/* ---------- Feiner Fortschrittsbalken am oberen Rand ---------- */
/* script.js legt das Element an und setzt den Stand beim Scrollen. */

.fortschritt {
  position: fixed;
  z-index: 30;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--gruen-hell), var(--gruen));
  pointer-events: none;
}

/* ---------- Einstieg: das Foto atmet ---------- */
/* Sehr langsam und sehr wenig: es soll auffallen, dass etwas lebt,
   nicht, dass sich etwas bewegt. */

@media (prefers-reduced-motion: no-preference) {
  .start-bild img {
    animation: start-atem 32s ease-in-out infinite alternate;
  }
}

@keyframes start-atem {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.08);
  }
}

/* ---------- Einstieg: Überschrift baut sich Wort für Wort auf ---------- */
/* script.js zerlegt die Überschrift und verteilt die Verzögerungen.
   Die Klasse "aufbau" kommt erst, wenn die Ladeanimation weg ist.
   Ohne sie steht alles sofort da — der Text ist nie unsichtbar. */

.wort {
  display: inline-block;
}

.start-text.aufbau .wort {
  animation: wort-auf 0.8s var(--kurve) both;
  animation-delay: var(--verzoegerung, 0ms);
}

.start-text.aufbau > *:not(h1) {
  animation: hoch-auf 0.7s var(--kurve) both;
  animation-delay: var(--verzoegerung, 0ms);
}

@keyframes wort-auf {
  from {
    opacity: 0;
    transform: translateY(0.4em);
    filter: blur(8px);
  }

  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}

@keyframes hoch-auf {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Fragen klappen weich auf ---------- */
/* Braucht interpolate-size; wo der Browser das nicht kann, klappt es
   wie bisher sofort auf. Kein JavaScript nötig. */

@supports (interpolate-size: allow-keywords) {
  :root {
    interpolate-size: allow-keywords;
  }

  .frage::details-content {
    block-size: 0;
    overflow: hidden;
    transition:
      block-size 0.35s var(--kurve),
      content-visibility 0.35s allow-discrete;
  }

  .frage[open]::details-content {
    block-size: auto;
  }
}

/* ---------- Kopfzeile wird beim Scrollen schlanker ---------- */
/* Erst ab 60rem: am Handy steht die Navigation in einer eigenen Zeile,
   dort wäre das Schrumpfen unruhig. */

@media (min-width: 60rem) {
  .kopf-reihe .marke,
  .kopf-reihe > .knopf {
    transition: margin-block var(--dauer-balken) var(--kurve);
  }

  .marke-zeichen,
  .marke-schrift {
    transition: height var(--dauer-balken) var(--kurve);
  }

  .kopf--schwebt .marke,
  .kopf--schwebt .kopf-reihe > .knopf {
    margin-block: var(--a-2);
  }

  .kopf--schwebt .marke-zeichen {
    height: 2.4rem;
  }

  .kopf--schwebt .marke-schrift {
    height: 1.35rem;
  }
}

/* ---------- Schrift-Feinheiten ---------- */

/* Gleich breite Ziffern: sonst zappelt die Zahl beim Hochzählen, weil
   "1" schmaler ist als "8". */
.fakt-zahl,
.schritt-nummer {
  font-variant-numeric: tabular-nums;
}

/* Verhindert einzelne Wörter allein in der letzten Zeile. */
p,
li {
  text-wrap: pretty;
}

/* ---------- Überschriften nutzen die Breitenachse ---------- */
/* Archivo ist eine variable Schrift: Breite und Stärke sind stufenlos.
   Etwas breiter gestellt wirken die Überschriften wie gesetzt statt
   wie getippt. Fällt die Schrift aus, greift font-stretch ins Leere
   und die Systemschrift sieht aus wie vorher. */

h1,
h2 {
  font-stretch: 112%;
}

.fakt-zahl,
.schritt-nummer {
  font-stretch: 108%;
}

/* Mittlere Stärke für Beschriftungen: feinere Abstufung als nur 400/700 */
.fakt-text,
.karte-mehr,
.topleiste {
  font-weight: 500;
}

/* ---------- Körnung über der ganzen Seite ---------- */
/* Ein 64×64-Kachelbild mit feinem Rauschen (13 KB, assets/koernung.png).
   Es nimmt den Flächen das Sterile und liegt fest im Fenster, damit beim
   Scrollen nichts neu gezeichnet wird. Unter der Kopfzeile (z-index 20)
   und dem Fortschrittsbalken (30), also stören sie sich nicht.
   Als eigene Datei und nicht als data:-Adresse: die Sicherheitsregel
   erlaubt Bilder nur von der eigenen Adresse. */

body::after {
  content: "";
  position: fixed;
  z-index: 5;
  inset: 0;
  pointer-events: none;
  background-image: url("assets/koernung.png");
  background-repeat: repeat;
  opacity: 0.55;
}

/* Die Karten bleiben reinweiß und heben sich dadurch vom kühlen
   Seitengrund ab – das ersetzt einen Teil der Schatten. */

/* ---------- Helle Karten in dunklen Abschnitten ---------- */
/* Der dunkle Abschnitt vererbt weiße Schrift. Auf den weißen Karten darin
   wäre sie unsichtbar, deshalb dort zurück auf die normale Textfarbe. */

.abschnitt--dunkel .folie,
.abschnitt--dunkel .referenzen-aufruf,
.abschnitt--dunkel .frage {
  color: var(--text);
}

.abschnitt--dunkel .folie h3,
.abschnitt--dunkel .referenzen-aufruf p {
  color: var(--text);
}


/* Lokale Vorschau: ruhiger Rhythmus und ein einmaliger, direkter Einstieg. */
:root { --kurve: cubic-bezier(0.23, 1, 0.32, 1); }
.lader { display: none; }
body::before, body::after,
.abschnitt:not(.abschnitt--dunkel)::before,
.abschnitt:not(.abschnitt--dunkel)::after { display: none; }
.start-bild img { animation: none; }
.start { align-items: center; }
.start h1 { font-weight: 700; letter-spacing: -0.05em; line-height: 1.02; }
.start .slogan { font-weight: 500; font-size: clamp(1.05rem, 1rem + .35vw, 1.4rem); letter-spacing: .015em; text-transform: none; }
.start .einleitung { line-height: 1.75; max-width: 33rem; }
.start .vertrauen { margin-top: 2rem; }
.abschnitt { padding-block: clamp(3.5rem, 6vw, 6.5rem); }
.abschnitt h2 { font-weight: 700; letter-spacing: -.04em; }
.abschnitt-einleitung { line-height: 1.8; }
.leistung-karte { padding: clamp(1.5rem, 2.5vw, 2.5rem); box-shadow: none; border-radius: .65rem; }
.karte-zeichen, .schritt-nummer { box-shadow: none; }
.leistung-karte:hover .karte-zeichen { transform: none; }
.leistung-karte .karte-mehr::after { display: inline-block; transition: transform 180ms var(--kurve); }
.fakt { border-radius: .5rem; }
.enthuellen {
  transform: translateY(18px);
  transition: opacity 600ms var(--kurve) var(--verzug, 0ms), transform 600ms var(--kurve) var(--verzug, 0ms);
}
.enthuellen.sichtbar { transform: none; }
.enthuellen:focus-within { opacity: 1; transform: none; transition: none; }
.start-text.aufbau .wort { animation: elegant-wort 850ms var(--kurve) both; animation-delay: var(--verzoegerung, 0ms); }
.start-text.aufbau > *:not(h1) { animation: elegant-text 700ms var(--kurve) both; animation-delay: var(--verzoegerung, 0ms); }
.start h1 .wort:last-child { position: relative; }
.start h1 .wort:last-child::after {
  content: ""; position: absolute; left: .02em; right: .06em; bottom: -.08em;
  height: 3px; background: var(--gruen); transform-origin: left;
}
@keyframes elegant-wort {
  from { opacity: 0; transform: translateY(.35em); clip-path: inset(0 0 100% 0); }
  to { opacity: 1; transform: none; clip-path: inset(0 0 -10% 0); }
}
@keyframes elegant-text { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes elegant-bild { from { transform: scale(1.045); opacity: .6; } to { transform: scale(1); opacity: 1; } }
@keyframes elegant-linie { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: no-preference) {
  .start--bereit .start-bild img { animation: elegant-bild 1400ms var(--kurve) both; }
  .start-text.aufbau h1 .wort:last-child::after { animation: elegant-linie 850ms var(--kurve) 350ms both; }
}
@media (hover: hover) and (pointer: fine) {
  .leistung-karte.sichtbar:hover { transform: translateY(-3px); }
  .leistung-karte:hover .karte-mehr::after { transform: translateX(4px); }
}
@media (hover: none), (pointer: coarse) {
  .leistung-karte:hover, .knopf:hover { transform: none; }
}
@media (min-width: 60rem) {
  .start { min-height: min(47rem, 86svh); padding-block: 5rem; }
  .kopf-reihe .marke, .kopf-reihe > .knopf, .marke-zeichen, .marke-schrift { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .start-text.aufbau .wort, .start-text.aufbau > *:not(h1), .start-bild img,
  .start h1 .wort:last-child::after { animation: none !important; }
  .enthuellen { opacity: 1; transform: none; }
  .leistung-karte.sichtbar:hover, .leistung-karte:hover .karte-mehr::after { transform: none; }
}

/* Lesbarkeit des feineren Untertitels auch über hellen Bildstellen. */
.start .slogan { color: var(--gruen-hell); margin-top: 1.15rem; }
.start-bild::after { background: linear-gradient(105deg, rgb(8 27 42 / .95) 0%, rgb(8 27 42 / .9) 45%, rgb(8 27 42 / .8) 100%); }
.karte-mehr::after { margin-left: .35em; }

/* Zweite Vorschau: klare Flächen, präzise Raster, unveränderte Markenfarben. */
:root { --grund: #ffffff; --flaeche-hell: #f2f6fa; --breite: 82rem; }
.kopf { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
.kopf-reihe { min-height: 5.8rem; }
.knopf { border-radius: .55rem; font-weight: 600; border-width: 1px; }
.knopf--gruen { background: var(--gruen); box-shadow: none; }
.knopf--gruen:hover { box-shadow: none; }
.start { margin: 1.25rem; border-radius: 1rem; min-height: auto; padding-block: 4rem; }
.start-raster { width: 100%; }
.start-text { max-width: 38rem; }
.start h1 { font-size: clamp(3.1rem, 5.5vw, 6rem); font-stretch: 100%; }
.start .einleitung { max-width: 29rem; font-size: 1.1rem; margin-block: 1.5rem 2rem; }
.start .slogan { font-size: 1.05rem; }
.start .vertrauen { font-size: .8rem; gap: .65rem 1.5rem; max-width: 33rem; }
.start .kicker { color: var(--gruen-hell); }
.fakten { background: #fff; }
.fakten-reihe { gap: 0; padding-block: 1.5rem 2.5rem; }
.fakt { display: grid; grid-template-rows: 1.3rem 3rem auto; align-content: start; justify-items: center; gap: .5rem; background: transparent; border-radius: 0; padding: 1rem; border-right: 1px solid var(--linie); }
.fakt:last-child { border-right: 0; }
.fakt-sterne { grid-row: 1; margin: 0; align-self: center; }
.fakt-zahl { grid-row: 2; align-self: center; font-weight: 650; }
.fakt-text { grid-row: 3; margin: 0; line-height: 1.4; text-wrap: balance; }
.abschnitt { padding-block: clamp(4rem, 7vw, 7rem); }
.abschnitt h2 { max-width: 22ch; font-stretch: 100%; font-weight: 650; }
.ueber { gap: clamp(2rem, 5vw, 5rem); }
.ueber-bild { margin: 0; }
.ueber-bild img { border-radius: .75rem; aspect-ratio: 5/4; }
.ueber-text p { font-size: 1rem; line-height: 1.8; }
.abschnitt--dunkel { background: var(--navy); }
#rezensionen { padding-block: 3.5rem; }
.bewertungskasten { max-width: none; padding: 0; border: 0; background: none; backdrop-filter: none; border-radius: 0; justify-items: start; text-align: left; gap: 1rem; }
.bewertungskasten h2 { font-size: clamp(1.8rem, 3vw, 2.7rem); }
.bewertung { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: center; gap: .65rem 1.2rem; margin: 0; }
.bewertung .sterne { grid-column: 1 / -1; }
.bewertung-zahl, .bewertung-anzahl { line-height: 1.5; }
.bewertung-text { max-width: 40ch; margin: 0; }
.leistungs-karten { counter-reset: leistung; gap: 0 3rem; margin-top: 2.5rem; }
.leistung-karte { counter-increment: leistung; grid-template-columns: 3rem 1fr; column-gap: 1.3rem; row-gap: .75rem; border: 0; border-top: 1px solid var(--linie); border-radius: 0; padding: 2rem 0; background: transparent; box-shadow: none; }
.leistung-karte::before { content: counter(leistung, decimal-leading-zero); grid-column: 1; grid-row: 1 / 4; font-size: .9rem; font-weight: 500; color: var(--gruen-dunkel); padding-top: .15rem; }
.leistung-karte .karte-zeichen { display: none; }
.leistung-karte h3, .leistung-karte p, .leistung-karte .karte-mehr { grid-column: 2; }
.leistung-karte h3 { font-size: 1.25rem; font-weight: 650; }
.leistung-karte p { margin: 0; max-width: 35ch; }
.leistung-karte:hover { box-shadow: none; border-color: var(--linie); }
.rechner-felder { background: #fff; border-radius: .75rem; box-shadow: none; }
.rechner-ergebnis { border-radius: .75rem; box-shadow: none; }
.schritte { gap: 2.5rem; margin-top: 2.5rem; }
.schritte::before { display: none; }
.schritt { border-top: 1px solid var(--linie); padding-top: 1.5rem; }
.schritt-nummer { background: transparent; color: var(--gruen-dunkel); box-shadow: none; outline: none; border-radius: 0; justify-content: start; font-size: 2.5rem; font-weight: 500; }
.frage { border-radius: 0; box-shadow: none; border-width: 0 0 1px; }
.kontakt-daten li { background: none; border-width: 0 0 1px; border-radius: 0; padding-inline: 0; }
.fuss-logo { height: auto; width: 13rem; padding: .75rem; }
.marke-render { display: block; width: 14rem; height: auto; max-height: 4rem; object-fit: contain; }
@media (min-width: 60rem) {
  .start { padding-block: 5.5rem; }
  .start-text { width: 49%; }
  .start-bild { inset: 1.5rem 1.5rem 1.5rem 54%; border-radius: .65rem; overflow: hidden; }
  .start-bild img { object-position: 55% center; }
  .start-bild::before { display: none; }
  .start-bild::after { background: linear-gradient(0deg, rgb(8 27 42 / .25), transparent 60%); }
  .start .vertrauen { display: grid; grid-template-columns: 1fr; }
  .leistungs-karten { grid-template-columns: repeat(2, 1fr); }
  .bewertungskasten { grid-template-columns: 1.2fr 1fr; column-gap: 5rem; }
  .bewertungskasten > .kicker { grid-column: 1; grid-row: 1; }
  .bewertungskasten > h2 { grid-column: 1; grid-row: 2 / 4; }
  .bewertungskasten > .bewertung { grid-column: 2; grid-row: 1 / 3; }
  .bewertungskasten > .bewertung-text { grid-column: 2; grid-row: 3; }
  .bewertungskasten > .knopf { grid-column: 2; grid-row: 4; margin-top: .5rem; }
}
@media (max-width: 59.999rem) {
  .topleiste { display: none; }
  .start { margin: .65rem; padding-block: 3.5rem 2.5rem; }
  .start h1 { max-width: 12ch; }
  .start-bild::after { background: rgb(8 27 42 / .90); }
  .start-bild::before { display: none; }
  .start .vertrauen { display: grid; }
  .start .knopfreihe { gap: .75rem; }
  .start .knopf { min-height: 3.25rem; }
  .marke-render { width: clamp(10rem, 40vw, 14rem); max-height: 3.4rem; }
  .bewertungskasten { gap: 1.25rem; }
  .bewertung { width: 100%; grid-template-columns: auto 1fr; }
  .bewertungskasten .knopf { width: 100%; }
  .bewertung-anzahl { white-space: nowrap; }
}
@media (max-width: 39.999rem) {
  .fakten-reihe { row-gap: 1rem; }
  .fakt:nth-child(2) { border-right: 0; }
  .fakt { padding-inline: .5rem; }
  .leistung-karte { grid-template-columns: 2rem 1fr; gap: .7rem; }
}

/* Kräftiges Markenblau und Weiß wechseln in weit auslaufenden Flächen. */
main:has(.start) { background: #fff; }
.start {
  --auslauf: clamp(12rem, 24vw, 24rem);
  margin: 0; border-radius: 0; background: var(--navy); color: #fff;
  padding-block: clamp(4rem, 7vw, 7rem) calc(var(--auslauf) + 2rem);
}
.start-text { width: 100%; max-width: 42rem; }
.start-bild { inset: 0; border-radius: 0; overflow: hidden; }
.start-bild img { object-position: center 40%; }
.start-bild::before { display: none; }
.start-bild::after {
  background: linear-gradient(105deg, rgb(8 27 42 / .95), rgb(8 27 42 / .88) 48%, rgb(8 27 42 / .65));
}
/* Auslauf vom dunklen Einstieg ins Weiß.
   Die Stopps folgen einer S-Kurve (smoothstep: a = t² · (3 − 2t)) statt
   einer Geraden. Dadurch setzt das Weiß oben sanfter ein und erreicht
   unten die volle Deckung, ohne dass eine Kante sichtbar wird – vorher
   sprang es auf den letzten 18 % von 0,88 auf 1.
   Die vielen Zwischenstopps sind Absicht: Ein Verlauf über 24 rem mit nur
   vier Stopps bildet auf großen Schirmen sichtbare Streifen. */
.start::after {
  content: ""; position: absolute; inset: auto 0 0; height: var(--auslauf);
  background: linear-gradient(
    180deg,
    rgb(255 255 255 / 0) 0%,
    rgb(255 255 255 / 0.028) 10%,
    rgb(255 255 255 / 0.104) 20%,
    rgb(255 255 255 / 0.216) 30%,
    rgb(255 255 255 / 0.352) 40%,
    rgb(255 255 255 / 0.5) 50%,
    rgb(255 255 255 / 0.648) 60%,
    rgb(255 255 255 / 0.784) 70%,
    rgb(255 255 255 / 0.896) 80%,
    rgb(255 255 255 / 0.972) 90%,
    #fff 100%
  );
  pointer-events: none;
}
.start .vertrauen { display: flex; flex-wrap: wrap; max-width: 40rem; }
.start .kicker, .start .slogan { color: var(--gruen-hell); }
.start .einleitung { color: #e3e8ee; }
@media (min-width: 60rem) { .start h1 { max-width: 10ch; } }
@media (max-width: 59.999rem) {
  body > .topleiste { display: none !important; }
  .start { padding-top: 3.5rem; }
  /* Vorher eine flache Fläche mit 88 % Deckung – damit war vom Transporter
     nichts mehr zu sehen, der Einstieg wirkte wie ein dunkler Kasten.
     Jetzt ein Verlauf: oben, wo Kicker und Überschrift stehen, bleibt es
     dicht; nach unten wird es heller und das Fahrzeug kommt durch.
     Untergrenze bewusst 0,72 und nicht weniger: Auf der hellsten Stelle
     des Fotos (weißer Transporter) liegt der Einstiegstext #e3e8ee damit
     noch bei rund 5,9:1, mit Körnung 5,6:1. Bei 0,62 wären es nur 4,3:1
     und damit unter der Grenze. */
  .start-bild::after {
    background: linear-gradient(
      180deg,
      rgb(8 27 42 / 0.92) 0%,
      rgb(8 27 42 / 0.88) 40%,
      rgb(8 27 42 / 0.8) 72%,
      rgb(8 27 42 / 0.72) 100%
    );
  }
  .start .vertrauen { display: grid; }
}
/* Layoutmaße aus der ursprünglichen Cloud-Vorschau. */
:root { --breite: 82rem; --rand-seite: 1rem; }
.kopf-reihe { min-height: 0; }
.start { align-items: end; min-height: min(44rem, 88vh); padding-top: var(--a-8); }
.start-text { max-width: 44rem; }
.start h1 { font-size: var(--groesse-h1); max-width: none; }
.start .einleitung { max-width: 38rem; font-size: var(--groesse-gross); margin-block: var(--a-5) var(--a-6); }
.start .vertrauen { max-width: none; margin-top: var(--a-7); gap: var(--a-3) var(--a-5); }
.abschnitt, #rezensionen { padding-block: var(--a-8); }
.abschnitt h2 { max-width: none; font-size: var(--groesse-h2); }
.ueber { gap: var(--a-6); }
.ueber-bild img { aspect-ratio: 4 / 3; }
.ueber-text p { font-size: var(--groesse-gross); }
.fakten-reihe { gap: var(--a-5); padding-block: var(--a-6); }
.fakt { padding: var(--a-5) var(--a-4); }
.leistungs-karten { grid-template-columns: 1fr; gap: var(--a-4); margin-top: var(--a-6); }
.leistung-karte { padding: var(--a-6) var(--a-5); }
.leistung-karte h3 { font-size: var(--groesse-h3); }
.schritte { gap: var(--a-5); margin-top: var(--a-6); }
.bewertungskasten { max-width: 40rem; padding: var(--a-6); gap: var(--a-4); grid-template-columns: 1fr; justify-items: center; text-align: center; }
.bewertungskasten > .kicker, .bewertungskasten > h2, .bewertungskasten > .bewertung,
.bewertungskasten > .bewertung-text, .bewertungskasten > .knopf { grid-column: auto; grid-row: auto; }
.bewertungskasten .knopf { width: auto; }
.bewertung { justify-content: center; width: auto; }
.bewertung .sterne { justify-content: center; }
@media (min-width: 40rem) {
  :root { --rand-seite: 1.5rem; }
  .leistungs-karten { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 60rem) {
  :root { --rand-seite: 2rem; }
  .start { min-height: min(46rem, 90vh); }
  .ueber { gap: var(--a-8); }
  .leistungs-karten { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 100rem) {
  :root { --breite: 96rem; --rand-seite: 3rem; }
}
@media (min-width: 120rem) {
  :root { --breite: 108rem; --rand-seite: 4rem; }
}
/* ============================================================
   Feinschliff 23.09.2026
   Steht bewusst am Ende der Datei: Darüber liegen inzwischen mehrere
   Überschreibungsebenen. Wer hier etwas ändert, gewinnt zuverlässig,
   ohne dass Selektoren künstlich verschärft werden müssen.
   ============================================================ */

/* --auslauf stand nur auf .start und war für das Faktenband als
   Geschwister-Element damit nicht sichtbar – die negative Verschiebung
   unten wurde stillschweigend verworfen. Derselbe Wert auf der Wurzel,
   damit beide ihn kennen. */
:root {
  --auslauf: clamp(12rem, 24vw, 24rem);
}

/* ---------- Rhythmus im Einstieg ----------
   Die Knöpfe klebten direkt am 24-Stunden-Satz (gemessene 0 px) und
   standen gleichzeitig 48 px von der Linie darunter weg. Das las sich
   falsch herum: Zusage und Knöpfe gehören zusammen, die Vertrauenspunkte
   sind eine eigene Gruppe. Jetzt 24 px darüber, 32 px darunter. */

.start .knopfreihe {
  margin-top: 1.5rem;
}

.start .vertrauen {
  margin-top: 2rem;
}

/* ---------- Das Faktenband überbrückt den Übergang ----------
   Unter den Vertrauenspunkten standen 224 px leerer dunkler Raum – nur
   damit der Verlauf ins Weiß auslaufen kann. Statt diesen Raum zu
   verkleinern, bekommt er eine Aufgabe: Das Faktenband rückt als helle
   Karte hinein und liegt nun halb im Dunkeln, halb im Hellen. Es
   verbindet die beiden Hälften, statt sie durch Leere zu trennen – und
   die vier Zahlen stehen genau dort, wo der Blick nach dem Einstieg
   ohnehin hinwandert.

   Der Verlauf selbst bleibt unverändert und läuft hinter der Karte
   weiter; die Karte liegt per z-index darüber. */

.start {
  padding-bottom: calc(var(--auslauf) * 0.55 + 2rem);
}

.fakten {
  position: relative;
  z-index: 1;
  margin-top: calc(var(--auslauf) * -0.42);
  background: transparent;
  border-bottom: 0;
}

.fakten-reihe {
  border-radius: 1rem;
  background: #fff;
  box-shadow:
    0 0 0 1px rgb(8 27 42 / 0.06),
    0 1.25rem 2.5rem rgb(8 27 42 / 0.14);
  padding-inline: clamp(0.5rem, 2vw, 1.5rem);
}

/* ---------- Anruf-Knopf in der Kopfzeile ----------
   War ein reiner Umriss und ging neben der Navigation unter. Jetzt
   gefüllt in der Markenfarbe. Dunkles Navy auf Limettengrün liegt bei
   7,1:1 und damit deutlich über der Grenze. */

.kopf .knopf--rand {
  border-color: transparent;
  background: var(--gruen);
  color: var(--navy);
}

.kopf .knopf--rand:hover,
.kopf .knopf--rand:focus-visible {
  background: var(--gruen-hover);
  color: var(--navy);
}

/* ---------- Foto auf den Leistungsseiten ----------
   Echte Aufnahme eines abgeschlossenen Auftrags, zwischen Einleitung und
   der Punkteliste. Steht nur dort, wo in leistungen.json ein "bild"
   hinterlegt ist – seit 23.09.2026 bei allen sechs. */

.leistungsbild {
  margin: var(--a-6) 0 var(--a-7);
}

.leistungsbild img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.75rem;
}

.leistungsbild figcaption {
  margin-top: var(--a-3);
  color: var(--text-leise);
  font-size: var(--groesse-klein);
  line-height: 1.5;
}

/* ---------- Leistungen auf dem Handy: Zeilen statt hoher Karten ----------
   Sechs Karten untereinander waren auf 375 px zusammen 1080 px hoch – die
   längste Strecke der ganzen Seite. Wer nur die Telefonnummer sucht,
   scrollt minutenlang daran vorbei. Auf dem Desktop stehen sie
   zweispaltig und sind kurz genug; ab 60 rem bleibt deshalb alles
   unverändert.

   Drei Eingriffe: enger gesetzt, „Mehr erfahren" raus – die ganze Zeile
   ist ohnehin anklickbar, der Pfeil rechts sagt dasselbe auf einem
   Bruchteil der Höhe – und ab der vierten Leistung eingeklappt
   (zweispaltig ab der fünften). */

/* Ohne Handy-Breite gibt es den Knopf nicht. Diese Zeile steht bewusst
   vor der Abfrage: Medienabfragen erhöhen die Spezifität nicht, die
   spätere Regel muss also gewinnen. */
.leistungen-mehr {
  display: none;
}

@media (max-width: 59.999rem) {
  .leistung-karte {
    padding: 1.05rem 1.6rem 1.05rem 0;
    row-gap: 0.3rem;
  }

  .leistung-karte h3 {
    font-size: 1.1rem;
  }

  .leistung-karte p {
    font-size: 0.95rem;
    line-height: 1.5;
  }

  .leistung-karte .karte-mehr {
    display: none;
  }

  /* Ersetzt „Mehr erfahren" und kostet keine eigene Zeile. Liegt unter
     der Klickfläche des Titellinks, ist also nur Schmuck. */
  .leistung-karte::after {
    content: "→";
    position: absolute;
    top: 1.1rem;
    right: 0;
    color: var(--gruen-dunkel);
    font-weight: 700;
  }

  /* Die Klasse setzt script.js. Ohne JavaScript bleiben alle sechs
     sichtbar – eine lange Liste ist besser als ein Knopf, der nichts
     tut.

     Wie viele stehen bleiben, hängt an den Spalten: einspaltig drei,
     zweispaltig (ab 40rem) vier. Drei in zwei Spalten ließen rechts
     neben der dritten Karte ein leeres Feld. */
  .leistungs-karten--zu .leistung-karte:nth-child(n + 5) {
    display: none;
  }

  .leistungen-mehr {
    display: inline-flex;
    width: 100%;
    margin-top: 1.5rem;
  }
}

@media (max-width: 39.999rem) {
  .leistungs-karten--zu .leistung-karte:nth-child(4) {
    display: none;
  }

  /* Anrufen stand am Handy doppelt auf dem Schirm: oben im Kopf und
     unten in der Aktionsleiste, die beim Scrollen immer sichtbar bleibt
     und mit dem Daumen besser erreichbar ist. Der obere Knopf fällt
     deshalb weg; Logo und Menüknopf bekommen den Platz.

     Ab 40rem bleibt er: Dort zeigt er die Nummer selbst, und die steht
     sonst nirgends im Kopf. Nur der Telefonlink ist gemeint – auf den
     Rechtstexten sitzt an derselben Stelle „Zur Startseite". */
  .kopf-reihe > .knopf[href^="tel:"] {
    display: none;
  }
}

/* ---------- Dreistrich-Menü auf schmalen Schirmen ----------
   Die Navigation lag am Handy als zweite Kopfzeile darunter und war
   breiter als das Fenster: „Fragen" und „Kontakt" standen außerhalb des
   Sichtfelds, erreichbar nur durch seitliches Wischen. Ein weicher Rand
   zeigte das an, aber wer ihn nicht deutet, hält die Liste für
   vollständig.

   Jetzt klappt ein Knopf alle sechs Punkte untereinander auf. Die
   Kopfzeile wird dadurch einreihig und rund 40 px flacher – der Gewinn
   gilt auf jedem Bildschirm der Seite, nicht nur oben.

   Die Klasse js-menue setzt script.js auf <html>. Ohne JavaScript bleibt
   die wischbare Leiste von vorher: ein Knopf, der nichts aufklappt, wäre
   schlimmer als eine Leiste, die man schieben muss. */

.menue-knopf {
  /* Grundzustand: kein JavaScript oder breiter Schirm – kein Knopf. */
  display: none;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 0.55rem;
  background: none;
  color: var(--navy);
  cursor: pointer;
}

.menue-strich {
  display: block;
  width: 1.25rem;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition:
    transform 200ms var(--kurve),
    opacity 120ms ease;
}

/* Aus den drei Strichen wird ein Kreuz. Die Striche stehen 7 px
   auseinander (2 px hoch, 5 px Abstand), genau so weit wandern die
   äußeren zur Mitte. */
.kopf--offen .menue-strich:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.kopf--offen .menue-strich:nth-child(2) {
  opacity: 0;
}

.kopf--offen .menue-strich:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 59.999rem) {
  /* Die Kopfzeile ist ohne zweite Reihe flacher; der Abstand, den
     Sprungziele einhalten, schrumpft mit. Sonst stünde jede Überschrift
     nach dem Sprung zu tief. */
  .js-menue {
    --freiraum-kopf: 4.75rem;
  }

  .js-menue .menue-knopf {
    display: inline-flex;
  }

  /* Logo links, Menüknopf rechts; ab 40rem steht die Nummer davor. */
  .js-menue .kopf-reihe {
    flex-wrap: nowrap;
    justify-content: flex-start;
    column-gap: 0.5rem;
    padding-bottom: var(--a-3);
  }

  .js-menue .kopf-reihe .marke {
    margin-right: auto;
  }

  .js-menue .navigation {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 1;
    flex-direction: column;
    gap: 0;
    width: auto;
    margin-top: 0;
    padding: 0.25rem var(--rand-seite) 0.75rem;
    overflow: visible;
    background: var(--flaeche);
    border-bottom: 1px solid rgb(8 27 42 / 0.08);
    box-shadow: 0 1rem 2rem rgb(8 27 42 / 0.14);
    /* Die weichen Ränder der Wischleiste würden das Menü oben und unten
       anschneiden. */
    -webkit-mask-image: none;
    mask-image: none;
    /* Zugeklappt: visibility nimmt die Punkte auch aus dem Tab-Verlauf
       und aus der Vorlesereihenfolge, opacity allein täte das nicht. */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-0.5rem);
  }

  /* Animiert wird erst ab dem zweiten Bild. Sonst wäre schon das
     Zuklappen beim Laden ein Übergang: js-menue kommt per Skript, die
     Leiste steht bis dahin sichtbar da und blendete einmal weg. Dieselbe
     Vorsichtsmaßnahme wie beim gleitenden Balken. */
  .js-menue-bereit .navigation {
    transition:
      opacity 180ms ease,
      transform 180ms var(--kurve),
      visibility 0s linear 180ms;
  }

  .js-menue .kopf--offen .navigation {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }

  .js-menue .navigation a {
    min-height: 3rem;
    font-size: 1.05rem;
    color: var(--navy);
    border-bottom: 1px solid var(--linie);
  }

  .js-menue .navigation a:last-of-type {
    border-bottom: 0;
  }

  /* Der gleitende Balken ergibt in der Senkrechten keinen Sinn; der
     aktuelle Abschnitt steht stattdessen in Grün. */
  .js-menue .navigation-balken {
    display: none;
  }

  .js-menue .navigation a[aria-current] {
    color: var(--gruen-dunkel);
    font-weight: 700;
  }
}

@media (prefers-reduced-motion: reduce) {
  .menue-strich,
  .js-menue-bereit .navigation {
    transition: none;
  }
}

/* ---------- Betriebe aus dem Umfeld, im Fußbereich ----------
   Zwei Logos auf weißen Platten, wie schon das Klarrum-Logo darunter:
   beide Marken bringen eigene Farben mit (Baumotive Orange und Schwarz,
   MyHaus Braun) und gingen auf dem dunklen Grund sonst unter.

   Die Platten sind bewusst klein und stehen über der Fußzeile, nicht
   darin – sie sollen erreichbar sein, aber Klarrums eigenem Logo nicht
   die Aufmerksamkeit nehmen.

   Die beiden Logos haben sehr verschiedene Formate: Baumotive steht
   gestapelt (Haus über Schriftzug, 1,56:1), MyHaus ist ein reiner
   Schriftzug (3,74:1). Gleiche Höhe ließe den MyHaus-Zug riesig und
   Baumotives Schrift winzig wirken, deshalb bekommt jedes Logo seine
   eigene Höhe. */

.partner {
  margin-bottom: var(--a-6);
  padding-bottom: var(--a-6);
  border-bottom: 1px solid rgb(201 211 220 / 0.18);
}

.partner-titel {
  margin: 0 0 var(--a-4);
  font-size: var(--groesse-klein);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c9d3dc;
}

.partner-liste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--a-4) var(--a-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.partner-link {
  display: flex;
  align-items: center;
  gap: var(--a-3);
  text-decoration: none;
  color: #c9d3dc;
  font-size: var(--groesse-klein);
}

.partner-logo {
  display: block;
  /* Gleich hohe Platten, damit die Reihe ruhig steht. Das Logo darin
     wird nicht verzerrt, sondern nach „contain" eingepasst; die Breite
     gibt jedes Logo selbst vor, sonst schwimmt der breite MyHaus-Zug in
     einer viel zu großen Fläche. */
  height: 4rem;
  padding: 0.55rem 0.7rem;
  object-fit: contain;
  border-radius: var(--radius-s);
  background: var(--flaeche);
  transition: transform var(--dauer-kurz) var(--kurve);
}

.partner-logo--baumotive {
  width: 5.25rem;
}

.partner-logo--myhaus {
  width: 8rem;
}

.partner-link:hover .partner-logo,
.partner-link:focus-visible .partner-logo {
  transform: translateY(-2px);
}

.partner-link:hover .partner-fach {
  color: var(--flaeche);
}

@media (prefers-reduced-motion: reduce) {
  .partner-logo {
    transition: none;
  }
}

/* ---------- Unterleiste auf den Leistungsseiten ----------
   Dieselben zwei Betriebe wie im Fußbereich der Startseite, hier aber
   unter den eigenen Leistungen und bewusst leiser: kleine Logos, eine
   Haarlinie darüber, kein Kasten, im Ruhezustand etwas zurückgenommen.
   Sie sollen auffindbar sein, aber nicht mit Klarrums eigenen
   Leistungen um Aufmerksamkeit ringen.

   Anders als im Fußbereich brauchen sie hier keine weiße Platte – der
   Grund ist ohnehin hell.

   Das Logo allein wäre nur 24 bzw. 40 px hoch und damit ein zu kleines
   Ziel für den Daumen; der Link dehnt sich deshalb auf 44 px. */

.nebenbetriebe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--a-2) var(--a-5);
  margin-top: var(--a-6);
  padding-top: var(--a-4);
  border-top: 1px solid var(--linie);
}

.nebenbetriebe-titel {
  margin: 0;
  font-size: var(--groesse-klein);
  color: var(--text-leise);
}

.nebenbetriebe-liste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--a-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nebenbetriebe a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

.nebenbetrieb-logo {
  display: block;
  width: auto;
  object-fit: contain;
  opacity: 0.8;
  transition: opacity var(--dauer-kurz) ease;
}

.nebenbetriebe a:hover .nebenbetrieb-logo,
.nebenbetriebe a:focus-visible .nebenbetrieb-logo {
  opacity: 1;
}

/* Gestapeltes Zeichen gegen reinen Schriftzug: gleiche Höhe ließe den
   einen riesig und den anderen winzig wirken. */
.nebenbetrieb-logo--baumotive {
  height: 2.4rem;
}

.nebenbetrieb-logo--myhaus {
  height: 1.4rem;
}

@media (prefers-reduced-motion: reduce) {
  .nebenbetrieb-logo {
    transition: none;
  }
}