/* ==========================================================================
   Rövekamp Reinigung · Look-Werkstatt · Richtung „Kraftvoll & groß“
   Heinz IT Systeme · Stand 23.09.2026

   Aufbau (für die spätere Übernahme als Fabrik-Haut):
   1  Schriften          @font-face, lokal, OFL
   2  Tokens             :root, nur Custom Properties (Palette, Rollen, Skala, Abstände, Formen)
   3  Flächen            Rollen je Hintergrund: hell, beton, dunkel, tief, signal
   4  Grundlagen         Reset, Text, Links, Fokus, Bewegung
   5  Layout             Rahmen, Abschnitt, Raster, Kopfzeile
   6  Bausteine          Knopf, Piktogramm, Pfeil-Link, Liste mit Haken, Tabelle, Details
   7  Kopf und Fuß       Kopfleiste, Menü, Brotkrume, Fußleiste, Handy-Leiste
   8  Abschnitte         je Modul-Typ (Hero, Fakten, Für wen, Leistungen, Ablauf …)
   9  Hilfen             nur-sr, Sprunglink
   ========================================================================== */

/* 1 Schriften ------------------------------------------------------------ */
@font-face {
  font-family: "Barlow Condensed";
  src: url("/gebaeudereiniger/beispiele/kraftvoll/assets/fonts/barlow-condensed-800.woff2") format("woff2");
  font-weight: var(--fw-display);
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("/gebaeudereiniger/beispiele/kraftvoll/assets/fonts/barlow-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* 2 Tokens --------------------------------------------------------------- */
:root {
  /* 2a Palette (Rohwerte). Nur hier stehen Farbwerte. Kontraste: README.md und kontrast.json */
  --c-anthrazit-950: #0f1215;
  --c-anthrazit-900: #161a1f;
  --c-anthrazit-800: #20252b;
  --c-anthrazit-700: #2c323a;
  --c-anthrazit-600: #3a414a;
  --c-grau-300: #aab3bd;
  --c-grau-700: #4a525b;
  --c-beton-100: #efeee9;
  --c-beton-200: #e2e0d9;
  --c-beton-300: #cfccc3;
  --c-weiss: #ffffff;
  --c-signal: #ffcf1f;
  --c-signal-hell: #ffdb52;
  --c-signal-text: #3b4148;
  --c-fehler: #b42318;
  --c-tuch-rot: #d8403a;
  --c-tuch-gelb: #f4c20d;
  --c-tuch-blau: #2d6bdc;
  --c-tuch-gruen: #2e9a57;

  /* 2b Rollen im Namensraum der Fabrik (wie haut/heinz/tokens.css) plus eigene Akzent-Rollen.
     Komponenten färben nur über diese Namen oder die Flächenrollen --f-* (Abschnitt 3).
     Regel für eine Kundenfarbe: --akzent-auf-dunkel braucht mindestens 4,5 : 1 auf --ink,
     --akzent-text mindestens 4,5 : 1 auf --akzent. Sonst eine aufgehellte Variante nehmen
     oder beim Signalgelb bleiben (README, Abschnitt 2). */
  --bg: var(--c-weiss);
  --bg-alt: var(--c-beton-100);
  --bg-alt-2: var(--c-beton-200);
  --surface: var(--c-weiss);
  --ink: var(--c-anthrazit-900);
  --ink-tief: var(--c-anthrazit-950);
  --ink-2: var(--c-anthrazit-800);
  --ink-3: var(--c-anthrazit-700);
  --border: var(--c-beton-300);
  --border-on-ink: var(--c-anthrazit-600);
  --border-on-akzent: rgb(22 26 31 / 0.28);
  --border-control: var(--c-grau-700);
  --text: var(--c-anthrazit-900);
  --text-2: var(--c-grau-700);
  --text-on-ink: var(--c-weiss);
  --text-on-ink-2: var(--c-grau-300);
  --primary: var(--c-anthrazit-900);
  --primary-hover: var(--c-anthrazit-700);
  --akzent: var(--c-signal);
  --akzent-hover: var(--c-signal-hell);
  --akzent-text: var(--c-anthrazit-900);
  --akzent-text-2: var(--c-signal-text);
  --akzent-auf-dunkel: var(--c-signal);
  --focus: var(--c-anthrazit-900);
  --focus-on-ink: var(--c-signal);
  --err: var(--c-fehler);
  --input-bg: var(--c-weiss);
  --disabled-bg: var(--c-beton-200);
  --disabled-text: var(--c-grau-700);
  --tuch-rand: rgb(22 26 31 / 0.6);

  /* 2c Symbole als Masken: die Farbe kommt aus background-color, nicht aus der Datei */
  --sym-haken: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='square'/%3E%3C/svg%3E");
  --sym-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='square'/%3E%3C/svg%3E");
  --sym-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='square'/%3E%3C/svg%3E");
  --sym-runter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='square'/%3E%3C/svg%3E");

  /* 2d Schriften: zwei Schnitte. Barlow Condensed 800 für Überschriften, Zahlen, Knöpfe,
     Navigation und Etiketten; Barlow 400 für Fließtext. Kein Halbfett, keine Kunstfettung. */
  --font-display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif-condensed, "Helvetica Neue", Arial, sans-serif;
  --font-text: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --fw-display: 800;

  /* Schriftgrößen-Skala (fließend zwischen 360 und 1440 px) */
  --fs-mega: clamp(3rem, 1.4rem + 5.6vw, 6.75rem);
  --fs-h1: clamp(2.75rem, 1.6rem + 4.4vw, 5.75rem);
  --fs-h2: clamp(2.125rem, 1.35rem + 3.1vw, 4.25rem);
  --fs-h3: clamp(1.375rem, 1.22rem + 0.6vw, 1.75rem);
  --fs-zahl: clamp(3.25rem, 2rem + 4.6vw, 5.5rem);
  --fs-lead: clamp(1.125rem, 1.04rem + 0.4vw, 1.375rem);
  --fs-text: 1.0625rem;
  --fs-klein: 1.0625rem;   /* Karten-, Schritt- und Listentext */
  --fs-ui: 1.1875rem;      /* Knöpfe, Navigation, Feldbeschriftungen (Condensed) */
  --fs-hinweis: 0.9375rem; /* nur Hinweiszeilen, Fußleiste, Brotkrume */
  --fs-label: 0.875rem;    /* Etiketten in Versalien (Condensed) */
  --ls-label: 0.1em;
  --lh-eng: 0.92;
  --lh-titel: 1.02;
  --lh-text: 1.6;

  /* Abstände */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --rand: clamp(1rem, 4vw, 3rem);
  --breite: 80rem;
  --abschnitt: clamp(4rem, 2.6rem + 5.6vw, 8rem);

  /* Formen */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;
  --balken: 6px;
  --linie-stark: 3px;
  --schatten-1: 0 1px 2px rgb(15 18 21 / 0.08);
  --schatten-2: 0 22px 44px -24px rgb(15 18 21 / 0.55);
  --dauer: 0.18s;

  /* Handy-Leiste unten und klebender Kopf */
  --leiste-h: 4.375rem;
  --kopf-h: 5rem;
}

@media (max-width: 37.49em) {
  :root { --abschnitt: 2.75rem; }
}
@media (min-width: 60em) {
  :root { --fs-text: 1.125rem; --fs-klein: 1.125rem; --fs-hinweis: 1rem; }
}

/* 3 Flächen: jede Fläche setzt dieselben Rollen -------------------------- */
.f-hell,
.f-beton,
.f-dunkel,
.f-tief,
.f-signal {
  background-color: var(--f-grund);
  color: var(--f-text);
}
.f-hell {
  --f-grund: var(--bg);
  --f-text: var(--text);
  --f-text-2: var(--text-2);
  --f-linie: var(--border);
  --f-linie-stark: var(--ink);
  --f-marke: var(--ink);
  --f-fokus: var(--focus);
  --f-karte: var(--bg-alt);
}
.f-beton {
  --f-grund: var(--bg-alt);
  --f-text: var(--text);
  --f-text-2: var(--text-2);
  --f-linie: var(--border);
  --f-linie-stark: var(--ink);
  --f-marke: var(--ink);
  --f-fokus: var(--focus);
  --f-karte: var(--surface);
}
.f-dunkel,
.f-tief {
  --f-grund: var(--ink);
  --f-text: var(--text-on-ink);
  --f-text-2: var(--text-on-ink-2);
  --f-linie: var(--border-on-ink);
  --f-linie-stark: var(--akzent);
  --f-marke: var(--akzent-auf-dunkel);
  --f-fokus: var(--focus-on-ink);
  --f-karte: var(--ink-2);
}
.f-tief { --f-grund: var(--ink-tief); }
.f-signal {
  --f-grund: var(--akzent);
  --f-text: var(--akzent-text);
  --f-text-2: var(--akzent-text-2);
  --f-linie: var(--border-on-akzent);
  --f-linie-stark: var(--akzent-text);
  --f-marke: var(--akzent-text);
  --f-fokus: var(--akzent-text);
  --f-karte: var(--akzent-hover);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-synthesis: none;
  /* Fokus und Sprungziele nie unter Kopf oder Handy-Leiste (WCAG 2.4.11) */
  scroll-padding-top: 1.5rem;
  scroll-padding-bottom: calc(var(--leiste-h) + 1rem + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 60em) {
  html { scroll-padding-top: calc(var(--kopf-h) + 1.5rem); scroll-padding-bottom: 1.5rem; }
}

body {
  margin: 0;
  background: var(--ink-tief);
  color: var(--text);
  font-family: var(--font-text);
  font-size: var(--fs-text);
  line-height: var(--lh-text);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--leiste-h) + env(safe-area-inset-bottom, 0px));
}
main { display: block; background: var(--surface); }

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

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  line-height: var(--lh-titel);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-eng); }
h2 { font-size: var(--fs-h2); line-height: 0.96; hyphens: manual; }
h3 { font-size: var(--fs-h3); line-height: 1.08; hyphens: auto; hyphenate-limit-chars: 14 6 6; text-wrap: pretty; }

p, ul, ol, dl, table, blockquote, figure { margin: 0; }
/* Silbentrennung nur in schmalen Karten auf dem Handy; Fließtext, Vorspann und alles ab 60em ohne */
p {
  max-width: 62ch; /* Barlow läuft schmal: 62ch sind rund 70 Zeichen */
  hyphens: manual;
  text-wrap: pretty;
}
@media (max-width: 59.99em) {
  .zielgruppe p,
  .leistung p,
  .schritt p,
  .regel p,
  .blatt li,
  .verwaltung li span {
    hyphens: auto;
    hyphenate-limit-chars: 10 4 4;
    -webkit-hyphenate-limit-before: 4;
    -webkit-hyphenate-limit-after: 4;
  }
}
.nw { white-space: nowrap; }
p + p { margin-top: 1em; }
strong, b { font-family: var(--font-display); font-weight: var(--fw-display); font-size: 1.06em; letter-spacing: 0.005em; }

a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 2px; }
a:hover { text-decoration-color: var(--f-marke); }
.f-dunkel a:not([class]),
.f-tief a:not([class]) { text-decoration-color: var(--akzent); }

:focus-visible {
  outline: 3px solid var(--f-fokus, var(--focus));
  outline-offset: 3px;
}

::selection { background: var(--akzent); color: var(--akzent-text); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* 5 Layout --------------------------------------------------------------- */
.rahmen {
  width: min(100% - 2 * var(--rand), var(--breite));
  margin-inline: auto;
}
.abschnitt { padding-block: var(--abschnitt); }
.abschnitt--eng { padding-block: calc(var(--abschnitt) * 0.66); }

.raster { display: grid; gap: var(--s-6); }
@media (min-width: 60em) {
  .raster { gap: var(--s-7) var(--s-6); }
  .raster--seite { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-7) var(--s-8); }
  .raster--seite-um { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-7) var(--s-8); }
}

/* Kopfzeile eines Abschnitts: Markenbalken, H2, Einleitung */
.kopfzeile { display: grid; align-content: start; gap: var(--s-4); margin-bottom: clamp(1.75rem, 1.2rem + 2.4vw, 3.75rem); container-type: inline-size; }
@media (min-width: 37.5em) { .kopfzeile { gap: var(--s-5); } }
.kopfzeile h2 { font-size: min(var(--fs-h2), 14.6cqi); }
.kopfzeile > h2::before,
.balken-titel::before {
  content: "";
  display: block;
  width: 3.5rem;
  height: var(--balken);
  margin-bottom: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
  background: var(--f-marke);
}
.kopfzeile p { color: var(--f-text); font-size: var(--fs-lead); line-height: 1.5; max-width: 52ch; }
@media (min-width: 60em) {
  .kopfzeile--geteilt { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; column-gap: var(--s-8); }
  .kopfzeile--geteilt p { padding-bottom: 0.35em; }
}
.einleitung { color: var(--f-text); font-size: var(--fs-lead); line-height: 1.5; max-width: 56ch; }
.aussage { font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem); line-height: 1.45; color: var(--f-text); max-width: 40ch; hyphens: manual; }
.hinweis { color: var(--f-text-2); font-size: var(--fs-hinweis); }
.stapel > * + * { margin-top: var(--s-5); }
/* Abstands-Hilfen statt style-Attributen (Fabrik-CSP style-src 'self') */
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }

/* 6 Bausteine ------------------------------------------------------------ */

/* Piktogramme: eigene Linien-Familie, 24er Raster, 2 px, eckige Enden */
.pikto {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

/* Knopf */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 3.25rem;
  padding: 0.75rem 1.35rem;
  border: 2px solid transparent;
  border-radius: var(--r-1);
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-ui);
  letter-spacing: 0.01em;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dauer), color var(--dauer), border-color var(--dauer);
}
.knopf .pikto { width: 1.25em; height: 1.25em; transition: transform var(--dauer); }
.knopf:hover .pikto--pfeil { transform: translateX(3px); }
.knopf--signal { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-text); }
.knopf--signal:hover { background: var(--akzent-hover); border-color: var(--akzent-hover); }
.f-hell .knopf--signal,
.f-beton .knopf--signal { border-color: var(--ink); }
.knopf--kontur { background: transparent; border-color: currentColor; color: var(--f-text); }
.knopf--kontur:hover { background: var(--f-text); border-color: var(--f-text); color: var(--f-grund); }
.knopf--dunkel { background: var(--ink); border-color: var(--ink); color: var(--text-on-ink); }
.knopf--dunkel:hover { background: var(--ink-3); border-color: var(--ink-3); }
.knopf--gross { min-height: 3.75rem; padding-inline: 1.75rem; font-size: 1.3125rem; }
.knopf:disabled { background: var(--disabled-bg); border-color: var(--disabled-bg); color: var(--disabled-text); cursor: not-allowed; }
.knopf:disabled .pikto { display: none; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
@media (max-width: 37.49em) {
  .knopfreihe > .knopf { flex: 1 1 100%; }
}

/* Telefonknopf mit großer Nummer */
.knopf--tel { gap: 0.75em; }
.knopf--tel .pikto { width: 1.35em; height: 1.35em; }

/* Pfeil-Link: beschreibender Linktext plus Pfeil */
.pfeil-link {
  display: inline-block;
  min-height: 2.75rem;
  padding-block: 0.6rem;
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: 1.125em;
  letter-spacing: 0.01em;
  line-height: 1.3;
  text-decoration: underline;
  text-decoration-color: var(--f-marke);
  text-decoration-thickness: var(--linie-stark);
  text-underline-offset: 0.38em;
}
.pfeil-link .pikto { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -0.22em; transition: transform var(--dauer); }
.pfeil-link:hover .pikto { transform: translateX(4px); }
.pfeil-links { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); margin-top: var(--s-6); }

/* Liste mit Haken */
.haken { list-style: none; padding: 0; display: grid; gap: var(--s-3); }
.haken li { position: relative; padding-left: 2.25rem; }
/* Haken-Quadrat: Fläche in --akzent, Haken als Maske in --akzent-text (auch für Kurzangaben, Blätter, Nachweise) */
.haken li::before,
.haken li::after,
.kurzangaben li::before,
.kurzangaben li::after,
.nachweise__liste li::before,
.nachweise__liste li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 1.375rem;
  height: 1.375rem;
  background: var(--akzent);
}
.haken li::after,
.kurzangaben li::after,
.nachweise__liste li::after {
  background: var(--akzent-text);
  -webkit-mask: var(--sym-haken) center / 1rem no-repeat;
  mask: var(--sym-haken) center / 1rem no-repeat;
}
.haken--linien li { padding-block: var(--s-3); border-top: 1px solid var(--f-linie); }
.haken--linien li::before,
.haken--linien li::after { top: calc(var(--s-3) + 0.2em); }
@media (min-width: 60em) { .haken--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-7); } }

/* Nummernliste (feste Schritte, Regeln) */
.nummer {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Tabellen */
.tabelle-huelle { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-klein);
  line-height: 1.45;
}
.tabelle caption { text-align: left; }
.tabelle th,
.tabelle td { padding: 0.9rem 1rem 0.9rem 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--f-linie); }
.tabelle thead th {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  border-bottom: var(--linie-stark) solid var(--f-linie-stark);
  padding-top: 0;
}
.tabelle tbody th { font-family: var(--font-display); font-weight: var(--fw-display); font-size: 1.125em; line-height: 1.25; }
.tabelle td:last-child,
.tabelle th:last-child { padding-right: 0; }

/* Tabelle als Karten auf dem Handy (Beschriftung aus data-label) */
@media (max-width: 47.99em) {
  .tabelle--karten thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tabelle--karten tr { display: block; padding: var(--s-4) 0; border-bottom: 1px solid var(--f-linie); }
  .tabelle--karten tbody th,
  .tabelle--karten td { display: block; padding: 0.15rem 0; border: 0; }
  .tabelle--karten tbody th { font-size: 1.375rem; line-height: 1.1; margin-bottom: 0.35rem; }
  .tabelle--karten td::before {
    content: attr(data-label);
    display: block;
    font-family: var(--font-display);
    font-weight: var(--fw-display);
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--f-text-2);
    margin-top: 0.5rem;
  }
}

/* Aufklappliste (FAQ) */
.fragen { border-top: var(--linie-stark) solid var(--f-linie-stark); }
.frage { border-bottom: 1px solid var(--f-linie); }
.frage > summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-5);
  min-height: 3.5rem;
  padding: 1rem 0;
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: clamp(1.25rem, 1.12rem + 0.5vw, 1.5rem);
  line-height: 1.15;
  cursor: pointer;
  list-style: none;
}
.frage > summary::-webkit-details-marker { display: none; }
/* Plus/Minus-Quadrat: echtes Element, Fläche --akzent, Zeichen als Maske in --akzent-text */
.frage__zeichen {
  position: relative;
  flex: none;
  width: 2rem;
  height: 2rem;
  margin-top: -0.2rem;
  background: var(--akzent);
}
.frage__zeichen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--akzent-text);
  -webkit-mask: var(--sym-plus) center / 1.1rem no-repeat;
  mask: var(--sym-plus) center / 1.1rem no-repeat;
}
.frage[open] > summary .frage__zeichen::after { -webkit-mask-image: var(--sym-minus); mask-image: var(--sym-minus); }
.frage > summary:hover .frage__text,
.frage > summary:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.frage__antwort { padding: 0 3rem 1.5rem 0; color: var(--f-text); }
.frage__antwort p { max-width: 62ch; }

/* Bild-Plätze: harte Kanten, Seitenverhältnis je Platz */
.bild { position: relative; overflow: hidden; background: var(--ink-2); }
.bild img { width: 100%; height: 100%; object-fit: cover; }
.bild--43 { aspect-ratio: 4 / 3; }
.bild--32 { aspect-ratio: 3 / 2; }
.bild--45 { aspect-ratio: 3 / 2; }
@media (min-width: 60em) { .bild--45 { aspect-ratio: 4 / 5; } }

/* 7 Kopf und Fuß --------------------------------------------------------- */
.sprung {
  position: absolute;
  left: var(--s-4);
  top: -10rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--akzent);
  color: var(--akzent-text);
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-ui);
  text-decoration: none;
}
.sprung:focus { top: var(--s-2); }

.kopf { position: relative; z-index: 50; border-bottom: 1px solid var(--ink-3); }
.kopf__innen { display: flex; align-items: center; gap: var(--s-4); min-height: 4.25rem; }

.wortmarke {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.2rem;
  padding-left: 0.85rem;
  border-left: var(--balken) solid var(--akzent);
  color: var(--text-on-ink);
  text-decoration: none;
  line-height: 1;
  margin-right: auto;
}
.wortmarke__name {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: 1.625rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.wortmarke__zusatz {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--akzent-auf-dunkel);
}

.kopf__nav,
.kopf__cta { display: none; }

.kopf__nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: var(--s-2); }
.kopf__nav a,
.kopf__nav summary {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  min-height: 2.75rem;
  padding: 0 0.7rem;
  color: var(--text-on-ink);
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: 1.1875rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
}
.kopf__nav a:hover,
.kopf__nav summary:hover { color: var(--akzent-auf-dunkel); }
.kopf__nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--akzent); }

.aufklapp { position: relative; }
.aufklapp > summary { list-style: none; }
.aufklapp > summary::-webkit-details-marker { display: none; }
.aufklapp > summary .pikto { width: 1rem; height: 1rem; transition: transform var(--dauer); }
.aufklapp[open] > summary .pikto { transform: rotate(180deg); }
.aufklapp__liste {
  position: absolute;
  top: calc(100% + 0.9rem);
  left: 0;
  min-width: 19rem;
  padding: var(--s-2) 0 !important;
  display: block !important;
  background: var(--ink-2);
  border-top: 4px solid var(--akzent);
  box-shadow: var(--schatten-2);
}
.aufklapp__liste a { display: flex; width: 100%; padding: 0.55rem 1.25rem; }
.aufklapp__liste a:hover { background: var(--ink-3); }

/* Telefon im Kopf: Handy und Tablet als 44-px-Symbolknopf neben „Menü“, ab 72em mit Nummer */
.kopf__tel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-width: 2.75rem;
  min-height: 2.75rem;
  color: var(--text-on-ink);
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: 1.25rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  border: 2px solid var(--border-on-ink);
  border-radius: var(--r-1);
}
.kopf__tel .pikto { width: 1.25rem; height: 1.25rem; color: var(--akzent-auf-dunkel); }
.kopf__tel:hover { color: var(--akzent-auf-dunkel); }
@media (max-width: 71.99em) {
  .kopf__tel .kopf__tel-nr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* Menü auf Handy und Tablet */
.menue > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0 0.95rem;
  border: 2px solid var(--border-on-ink);
  border-radius: var(--r-1);
  color: var(--text-on-ink);
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: 1.1875rem;
  cursor: pointer;
  list-style: none;
}
.menue > summary::-webkit-details-marker { display: none; }
.menue > summary .pikto { width: 1.25rem; height: 1.25rem; }
.menue .zu,
.menue[open] .auf { display: none; }
.menue[open] .zu { display: inline-flex; align-items: center; gap: 0.5rem; }
.menue .auf { display: inline-flex; align-items: center; gap: 0.5rem; }
.menue__panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  max-height: calc(100vh - 4.25rem);
  min-height: calc(100vh - 4.25rem);
  overflow-y: auto;
  padding: var(--s-5) var(--rand) calc(var(--leiste-h) + var(--s-6));
  background: var(--ink);
  border-top: 1px solid var(--ink-3);
  box-shadow: var(--schatten-2);
}
.menue__panel ul { list-style: none; margin: 0; padding: 0; }
.menue__gruppe {
  margin: 0 0 var(--s-2);
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-on-ink-2);
}
.menue__leistungen { margin-bottom: var(--s-5) !important; }
.menue__leistungen a {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--text-on-ink);
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: 1.25rem;
  text-decoration: none;
  border-bottom: 1px solid var(--ink-3);
}
.menue__haupt a {
  display: flex;
  align-items: center;
  min-height: 3.25rem;
  color: var(--text-on-ink);
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: 1.875rem;
  text-decoration: none;
}
.menue__panel a:hover { color: var(--akzent-auf-dunkel); }

@media (min-width: 60em) {
  .kopf { position: sticky; top: 0; }
  .kopf__innen { min-height: 5rem; gap: var(--s-5); }
  .kopf__nav { display: block; }
  .kopf__tel { border-color: transparent; }
  .kopf__cta { display: inline-flex; min-height: 2.875rem; padding-block: 0.5rem; }
  .menue { display: none; }
}
@media (max-width: 22.49em) {
  .kopf__innen { gap: var(--s-2); }
  .wortmarke__name { font-size: 1.5rem; }
  .menue > summary { padding-inline: 0.7rem; }
}

/* Brotkrume */
.brotkrume { margin-bottom: var(--s-5); font-size: var(--fs-hinweis); }
.brotkrume ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; }
.brotkrume li { display: inline-flex; align-items: center; }
.brotkrume li + li::before { content: "›"; margin-right: 0.5rem; color: var(--f-marke); font-family: var(--font-display); font-weight: var(--fw-display); font-size: 1.25em; line-height: 1; }
.brotkrume a { color: var(--f-text); display: inline-flex; align-items: center; min-height: 2.75rem; }
.brotkrume [aria-current] { color: var(--f-text-2); }

/* Fußleiste */
.fuss { padding-block: clamp(3rem, 2.2rem + 4vw, 6rem) var(--s-5); font-size: var(--fs-hinweis); }
.fuss__oben { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); }
.fuss__oben > div:first-child,
.fuss__oben > div:last-child { grid-column: 1 / -1; }
@media (max-width: 37.49em) {
  .fuss__oben { gap: var(--s-5); }
  .fuss__oben > div:nth-child(2),
  .fuss__oben > div:nth-child(3) { grid-column: 1 / -1; }
  .fuss__oben > div:not(:first-child) ul { display: flex; flex-wrap: wrap; column-gap: var(--s-5); }
  .fuss__oben > div:not(:first-child) li + li { margin-top: 0; }
  .fuss address { line-height: 1.6; }
}
.fuss .wortmarke { margin-bottom: var(--s-5); }
.fuss h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-on-ink-2);
  margin-bottom: var(--s-4);
  line-height: 1.3;
}
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li + li { margin-top: 0.15rem; }
.fuss a { color: var(--text-on-ink); text-decoration: none; display: inline-block; min-height: 2.25rem; padding-block: 0.4rem; line-height: 1.45; }
.fuss a:hover { color: var(--akzent-auf-dunkel); text-decoration: underline; }
.fuss address { font-style: normal; line-height: 1.7; color: var(--text-on-ink-2); }
.fuss address strong { color: var(--text-on-ink); }
.fuss__weitere { color: var(--text-on-ink-2); margin-top: var(--s-2); line-height: 1.5; }
.fuss__unten {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-3) var(--s-6);
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--ink-3);
  color: var(--text-on-ink-2);
}
@media (min-width: 37.5em) {
  .fuss__oben { gap: var(--s-7); }
  .fuss__oben > div:last-child { grid-column: auto; }
}
@media (min-width: 60em) {
  .fuss__oben { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); }
  .fuss__oben > div:first-child { grid-column: auto; }
}

/* Handy-Leiste: Anrufen und Anfrage mit dem Daumen */
.leiste {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--s-2);
  padding: 0.55rem var(--rand) calc(0.55rem + env(safe-area-inset-bottom, 0px));
  background: var(--ink-tief);
  border-top: 1px solid var(--ink-3);
  --f-text: var(--text-on-ink);
  --f-grund: var(--ink-tief);
  --f-fokus: var(--focus-on-ink);
}
.leiste .knopf { min-height: 3.25rem; padding-inline: 0.75rem; }
@media (min-width: 60em) {
  body { padding-bottom: 0; }
  .leiste { display: none; }
}

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

/* Hero (Start, kraftvoll): riesige Zeile, Signalwort, Bild bis an den Rand */
.hero { overflow: clip; padding-top: clamp(2.25rem, 1.4rem + 3.6vw, 5rem); }
.hero__raster { display: grid; gap: var(--s-7); }
.hero__text { container-type: inline-size; }
.hero__titel {
  font-size: var(--fs-mega);
  font-size: min(var(--fs-mega), 14.4cqi);
  line-height: 0.9;
  letter-spacing: -0.015em;
}
/* Signalzeile: eigenes Element nach der H1 (H1 bleibt „Gebäudereinigung in Hamburg“), gleiche Größe */
.hero__signal {
  max-width: none;
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-mega);
  font-size: min(var(--fs-mega), 14.4cqi);
  line-height: 0.9;
  letter-spacing: -0.015em;
  color: var(--akzent-auf-dunkel);
}
/* Für wen: Zielkundschaft schon im ersten Bildschirm */
.hero__fuer {
  margin-top: var(--s-5);
  padding-left: 0.85rem;
  border-left: var(--balken) solid var(--akzent);
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  line-height: 1.15;
  letter-spacing: 0.005em;
  color: var(--f-text);
  max-width: 30ch;
}
@media (min-width: 37.5em) { .hero__fuer { max-width: 44ch; } }
.hero__lead { margin-top: var(--s-5); font-size: var(--fs-lead); line-height: 1.5; color: var(--f-text); max-width: 42ch; }
.hero__lead strong { color: var(--f-text); }
.hero__bild { margin-inline: calc(-1 * var(--rand)); aspect-ratio: 16 / 9; }
.hero__bild img { object-position: 55% 50%; }
@media (min-width: 37.5em) and (max-width: 59.99em) {
  .hero__titel,
  .hero__signal { font-size: 13.6cqi; }
  .hero__lead { max-width: 46ch; }
}
@media (min-width: 60em) {
  .hero__raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); align-items: stretch; }
  .hero__text { padding-bottom: clamp(3rem, 1rem + 4vw, 5.5rem); align-self: center; }
  .hero__bild { aspect-ratio: auto; min-height: 36rem; margin-left: 0; margin-top: calc(-1 * clamp(2.25rem, 1.4rem + 3.6vw, 5rem)); margin-right: calc(-1 * max(var(--rand), (100vw - var(--breite)) / 2)); }
  .hero__bild img { position: absolute; inset: 0; object-position: 58% 50%; }
}

/* Hero der Unterseiten */
.seitenkopf { overflow: clip; padding-top: clamp(1.5rem, 1rem + 2vw, 3rem); }
.seitenkopf__raster { display: grid; gap: var(--s-7); }
.seitenkopf__text { container-type: inline-size; padding-bottom: var(--s-7); }
.seitenkopf h1 { font-size: var(--fs-h1); font-size: min(var(--fs-h1), 13.4cqi); }
.seitenkopf__lead { margin-top: var(--s-5); font-size: var(--fs-lead); line-height: 1.5; color: var(--f-text); max-width: 44ch; }
.seitenkopf__zusatz { margin-top: var(--s-4); color: var(--f-text-2); max-width: 52ch; }
.seitenkopf__bild { margin-inline: calc(-1 * var(--rand)); aspect-ratio: 16 / 10; }
.seitenkopf--ohne-bild .seitenkopf__text { padding-bottom: calc(var(--abschnitt) * 0.75); }
.seitenkopf__bild--oben img { object-position: 50% 35%; }
.seitenkopf--banner .seitenkopf__bild img { object-position: 50% 62%; }
.kurzangaben { list-style: none; padding: 0; margin-top: var(--s-6); display: grid; gap: var(--s-3); }
.kurzangaben li { position: relative; padding-left: 2.25rem; font-family: var(--font-display); font-weight: var(--fw-display); font-size: 1.25rem; line-height: 1.4rem; }
.kurzangaben li::before,
.kurzangaben li::after { top: 0; }
@media (min-width: 60em) {
  .seitenkopf__raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); align-items: stretch; }
  .seitenkopf__text { align-self: center; padding-bottom: clamp(3rem, 1rem + 4vw, 5rem); }
  .seitenkopf__bild { position: relative; aspect-ratio: auto; min-height: 30rem; margin-left: 0; margin-top: calc(-1 * clamp(1.5rem, 1rem + 2vw, 3rem)); margin-right: calc(-1 * max(var(--rand), (100vw - var(--breite)) / 2)); }
  .seitenkopf--banner .seitenkopf__raster { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .seitenkopf--banner .seitenkopf__text { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s-8); align-items: end; padding-bottom: var(--s-7); }
  .seitenkopf--banner .brotkrume,
  .seitenkopf--banner h1,
  .seitenkopf--banner .knopfreihe { grid-column: 1; }
  .seitenkopf--banner .seitenkopf__lead,
  .seitenkopf--banner .pfeil-links { grid-column: 2; }
  .seitenkopf--banner .seitenkopf__lead { grid-row: 1 / span 2; align-self: end; margin: 0 0 0.4rem; }
  .seitenkopf--banner .knopfreihe { grid-row: 3; }
  .seitenkopf--banner .pfeil-links { grid-row: 3; margin-top: var(--s-6); align-self: center; }
  .seitenkopf--banner .seitenkopf__bild { min-height: 0; height: clamp(20rem, 32vw, 28rem); margin-top: 0; aspect-ratio: auto; margin-left: calc(-1 * max(var(--rand), (100vw - var(--breite)) / 2)); }
  .seitenkopf__bild img { position: absolute; inset: 0; }
  .seitenkopf--ohne-bild .seitenkopf__raster { grid-template-columns: minmax(0, 1fr); }
  .seitenkopf--ohne-bild .seitenkopf__text { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s-8); align-items: end; }
  .seitenkopf--ohne-bild .brotkrume,
  .seitenkopf--ohne-bild h1 { grid-column: 1; }
  .seitenkopf--ohne-bild .seitenkopf__lead { grid-column: 2; grid-row: 1 / span 2; margin: 0 0 0.5rem; }
}

/* Fakten-Band: Zahlen als Beweis. Muster je Zahl: kleine Vorzeile, Zahl, Einheit, Erklärung */
.fakten { padding-bottom: clamp(3rem, 2rem + 3vw, 5rem); }
.fakten__liste {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-6) var(--s-5);
  padding-top: var(--s-6);
  border-top: 1px solid var(--f-linie);
}
.fakt { display: grid; grid-template-rows: subgrid; grid-row: span 2; row-gap: var(--s-3); }
.fakt dt { display: flex; flex-direction: column; align-items: flex-start; container-type: inline-size; color: var(--f-text); }
.fakt__vor,
.fakt__einheit {
  display: block;
  min-height: 1.35em;
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: 0.9375rem;
  line-height: 1.35;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.fakt__vor { margin-bottom: 0.35rem; }
.fakt__einheit { margin-top: 0.6rem; }
.fakt__zahl {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-zahl);
  font-size: min(var(--fs-zahl), 44cqi);
  line-height: 0.82;
  letter-spacing: -0.02em;
  color: var(--akzent-auf-dunkel);
  font-variant-numeric: lining-nums;
}
.fakt dd { margin: 0; padding-top: var(--s-3); border-top: 2px solid var(--border-on-ink); color: var(--f-text-2); font-size: var(--fs-hinweis); line-height: 1.4; }
@media (min-width: 48em) {
  .fakten__liste { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--s-6); }
}
/* Nachweise: belegte Angaben als Haken-Zeile unter den Zahlen, Link auf die Angaben zum Betrieb */
.nachweise { display: grid; gap: var(--s-3); margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--f-linie); }
.nachweise__liste { list-style: none; padding: 0; display: grid; gap: var(--s-3) var(--s-6); }
.nachweise__liste li { position: relative; padding-left: 2.1rem; line-height: 1.45; color: var(--f-text); }
.nachweise__liste li::before,
.nachweise__liste li::after { top: 0.05em; }
.nachweise .pfeil-link { justify-self: start; }
@media (max-width: 37.49em) {
  .fakten__liste { row-gap: var(--s-5); padding-top: var(--s-5); }
  .nachweise { margin-top: var(--s-5); padding-top: var(--s-4); gap: var(--s-2); }
  .nachweise__liste { gap: var(--s-2); }
  .nachweise__liste li { font-size: 0.9375rem; line-height: 1.4; padding-left: 1.85rem; }
  .nachweise__liste li::before,
  .nachweise__liste li::after { width: 1.25rem; height: 1.25rem; top: 0; }
  .nachweise__liste li::after { -webkit-mask-size: 0.9rem; mask-size: 0.9rem; }
}
@media (min-width: 60em) {
  .nachweise { grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: var(--s-7); }
  .nachweise__liste { display: flex; flex-wrap: wrap; }
  .nachweise .pfeil-link { padding-top: 0; }
}

/* Für wen: Kacheln mit Tätigkeitsfoto, großer Titel, Linkleiste */
.zielgruppen { display: grid; gap: var(--s-6); }
@media (min-width: 37.5em) { .zielgruppen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 75em) { .zielgruppen { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); } }
.zielgruppe { position: relative; display: flex; flex-direction: column; background: var(--f-karte); }
.zielgruppe .bild { aspect-ratio: 4 / 3; }
.zielgruppe .bild img { transition: transform 0.4s ease; }
.zielgruppe:hover .bild img { transform: scale(1.03); }
.zielgruppe__nr {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  padding: 0.45rem 0.7rem 0.4rem;
  background: var(--akzent);
  color: var(--akzent-text);
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: 1.125rem;
  line-height: 1;
}
.zielgruppe__text { display: flex; flex-direction: column; flex: 1; padding: var(--s-5) var(--s-5) 0; }
.zielgruppe h3 { margin-bottom: var(--s-3); text-wrap: pretty; }
.zielgruppe p { color: var(--f-text); font-size: var(--fs-klein); margin-bottom: var(--s-5); }
@media (max-width: 37.49em) { .zielgruppe .bild { aspect-ratio: 21 / 9; } }
.zielgruppe .pfeil-link {
  display: flex;
  align-items: center;
  gap: 0.5em;
  text-decoration: none;
  margin-top: auto;
  justify-content: space-between;
  width: calc(100% + 2 * var(--s-5));
  margin-inline: calc(-1 * var(--s-5));
  padding: 0.9rem var(--s-5);
  border-bottom: 0;
  border-top: 1px solid var(--f-linie);
  background: transparent;
  transition: background-color var(--dauer), color var(--dauer);
}
.zielgruppe .pfeil-link::after { content: ""; position: absolute; inset: 0; }
@media (min-width: 75em) {
  .zielgruppe h3 { font-size: 1.5rem; }
  .zielgruppe .pfeil-link { min-height: 4.5rem; }
}
.zielgruppe:hover .pfeil-link { background: var(--ink); color: var(--text-on-ink); }
.zielgruppe:hover .pfeil-link .pikto { color: var(--akzent-auf-dunkel); }
/* Handy: Zeilen mit kleinem Vorschaubild statt hoher Bildkacheln. Die ganze Karte ist der Link,
   der Linktext bleibt für Screenreader, sichtbar ist nur der Pfeil oben rechts */
@media (max-width: 37.49em) {
  .zielgruppen { gap: var(--s-3); }
  .zielgruppe { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); column-gap: var(--s-4); padding: var(--s-4); }
  .zielgruppe .bild { aspect-ratio: 1 / 1; align-self: start; }
  .zielgruppe__nr { left: var(--s-4); top: var(--s-4); padding: 0.3rem 0.45rem 0.25rem; font-size: 0.9375rem; }
  .zielgruppe__text { padding: 0; }
  .zielgruppe h3 { font-size: 1.3125rem; margin-bottom: var(--s-2); padding-right: 1.75rem; }
  .zielgruppe p { font-size: 1rem; line-height: 1.5; margin-bottom: 0; }
  .zielgruppe .pfeil-link { position: absolute; inset: 0; width: auto; min-height: 0; margin: 0; padding: 0; border: 0; }
  .zielgruppe .pfeil-link::after { display: none; }
  .zielgruppe .pfeil-link .pikto { position: absolute; top: var(--s-4); right: var(--s-4); width: 1.5rem; height: 1.5rem; }
  .zielgruppe__linktext { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .zielgruppe:hover .pfeil-link { background: transparent; color: inherit; }
  .zielgruppe:hover .pfeil-link .pikto { color: inherit; transform: translateX(3px); }

  .verwaltung { padding: var(--s-5) var(--s-4); }
  .verwaltung__titel { font-size: 1.5rem; margin-bottom: var(--s-4); }
  .verwaltung__liste { gap: var(--s-3); }
  .verwaltung__liste li { padding-top: var(--s-3); }
  .verwaltung__liste strong { font-size: 1.125rem; }
  .verwaltung__liste span { font-size: 1rem; line-height: 1.45; }
}

/* Für Hausverwaltungen mit mehreren Objekten: dunkler Kasten unter den Kacheln */
.verwaltung { margin-top: var(--s-6); padding: var(--s-6) var(--s-5); border-top: var(--balken) solid var(--akzent); }
.verwaltung__titel { font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2.5rem); line-height: 1; margin-bottom: var(--s-5); }
.verwaltung__liste { list-style: none; padding: 0; display: grid; gap: var(--s-4) var(--s-6); }
.verwaltung__liste li { display: grid; align-content: start; gap: var(--s-1); padding-top: var(--s-4); border-top: 1px solid var(--f-linie); }
.verwaltung__liste strong { color: var(--f-marke); font-size: 1.25rem; line-height: 1.2; }
.verwaltung__liste span { color: var(--f-text); font-size: var(--fs-klein); line-height: 1.5; }
@media (min-width: 37.5em) { .verwaltung__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 75em) {
  .verwaltung { padding: var(--s-7) var(--s-7) var(--s-6); }
  .verwaltung__liste { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Leistungen: große Linkliste mit Piktogrammen auf dunkler Fläche */
.leistungen { list-style: none; margin: 0; padding: 0; display: grid; border-top: var(--linie-stark) solid var(--akzent); }
@media (min-width: 60em) { .leistungen { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-7); } }
.leistung {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-2) var(--s-5);
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--f-linie);
}
@media (max-width: 37.49em) {
  .leistung { padding-block: var(--s-4); column-gap: var(--s-4); }
  .leistung__pikto { width: 3rem; height: 3rem; }
  .leistung__pikto .pikto { width: 1.5rem; height: 1.5rem; }
  .leistung p { font-size: 1rem; line-height: 1.5; }
}
@media (max-width: 22.49em) { .leistung h3 { font-size: 1.375rem; } }
@media (min-width: 37.5em) { .leistung { padding-block: var(--s-6); } }
.leistung__pikto {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border: 2px solid var(--border-on-ink);
  color: var(--akzent-auf-dunkel);
  transition: background-color var(--dauer), color var(--dauer), border-color var(--dauer);
}
.leistung__pikto .pikto { width: 1.75rem; height: 1.75rem; }
.leistung h3 { font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.375rem); line-height: 1; hyphens: manual; }
.leistung__link { color: inherit; text-decoration: none; }
.leistung__link::after { content: ""; position: absolute; inset: 0; }
.leistung__link .pikto { display: inline-block; width: 0.8em; height: 0.8em; vertical-align: -0.04em; color: var(--akzent-auf-dunkel); transition: transform var(--dauer); }
.leistung p { color: var(--f-text); font-size: var(--fs-klein); max-width: 46ch; }
.leistung:hover .leistung__pikto { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-text); }
.leistung:hover .leistung__link { color: var(--akzent-auf-dunkel); }
.leistung:hover .leistung__link .pikto { transform: translateX(4px); }
@media (min-width: 37.5em) {
  .leistung__pikto { width: 4.5rem; height: 4.5rem; }
  .leistung__pikto .pikto { width: 2.25rem; height: 2.25rem; }
}

/* Ablauf: Schritte mit Nummernblock, waagerecht ab Desktop */
.schritte { list-style: none; padding: 0; display: grid; gap: 0; }
.schritte--4 { --anzahl: 4; }
.schritte--5 { --anzahl: 5; }
.schritt { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; gap: 0 var(--s-5); padding-bottom: var(--s-6); }
.schritt::before {
  content: "";
  position: absolute;
  left: calc(1.75rem - 1px);
  top: 3.5rem;
  bottom: 0;
  width: 2px;
  background: var(--f-linie-stark);
}
.schritt:last-child::before { display: none; }
.schritt__nr {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  background: var(--ink);
  color: var(--akzent-auf-dunkel);
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: 2rem;
  line-height: 1;
}
.f-dunkel .schritt__nr,
.f-tief .schritt__nr { background: var(--akzent); color: var(--akzent-text); }
.schritt h3 { margin: 0.55rem 0 var(--s-2); }
@media (max-width: 37.49em) {
  .schritt { padding-bottom: var(--s-5); column-gap: var(--s-4); }
  .schritt__nr { width: 3rem; height: 3rem; font-size: 1.75rem; }
  .schritt::before { left: calc(1.5rem - 1px); top: 3rem; }
  .schritt p { font-size: 1rem; line-height: 1.5; }
}
.schritt p { color: var(--f-text); font-size: var(--fs-klein); }
@media (min-width: 60em) {
  .schritte { grid-template-columns: repeat(var(--anzahl, 4), minmax(0, 1fr)); gap: var(--s-6); }
  .schritt { grid-template-columns: minmax(0, 1fr); padding-bottom: 0; }
  .schritt::before { left: 4.25rem; right: calc(-1 * var(--s-6) + 0.75rem); top: calc(2.25rem - 1px); bottom: auto; width: auto; height: 2px; }
  .schritt__nr { width: 4.5rem; height: 4.5rem; font-size: 2.625rem; }
  .schritt h3 { margin: var(--s-5) 0 var(--s-3); }
}

/* Warum: sechs Regeln, links Auszug aus dem Leistungsverzeichnis */
.regeln-raster { display: grid; gap: var(--s-6); }
.regeln { list-style: none; padding: 0; display: grid; gap: 0 var(--s-6); }
.regeln--liste { display: none; }
.regel-klapp > summary { align-items: center; gap: var(--s-3); }
.regel-klapp__nr { flex: none; min-width: 1.75rem; font-family: var(--font-display); font-weight: var(--fw-display); font-size: 0.9375rem; letter-spacing: 0.08em; color: var(--f-text-2); }
.regel-klapp h3 { flex: 1; font-size: inherit; line-height: inherit; }
.regel-klapp .frage__antwort { padding-left: calc(1.75rem + var(--s-3)); }
.blatt--auszug .blatt__etikett { padding: var(--s-4) var(--s-5) 0; font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-2); }
.blatt--auszug h3 { padding-top: var(--s-2); }
.blatt--auszug ul { padding-bottom: var(--s-2); }
.blatt--auszug .pfeil-link { margin: 0 var(--s-5) var(--s-4); }
/* Handy: der Auszug steht als siebter Aufklapper in der Liste (gleicher Inhalt, kein hohes Blatt) */
.regel-klapp--auszug { display: none; }
.regel-klapp--auszug .regel-klapp__nr .pikto { width: 1.25rem; height: 1.25rem; }
.regel-klapp--auszug .frage__text { flex: 1; }
.regel-klapp--auszug .haken { margin-bottom: var(--s-2); }
@media (max-width: 37.49em) {
  .regel-klapp--auszug { display: block; }
  .regeln-seite .blatt--auszug { display: none; }
  .blatt--auszug li { padding-block: 0.55rem; }
  .blatt--auszug li::before,
  .blatt--auszug li::after { top: 0.6rem; }
}
@media (max-width: 59.99em) {
  .regeln-seite { display: contents; }
  .regeln-seite .kopfzeile { order: 1; margin-bottom: 0; }
  .regeln-klapp { order: 2; }
  .blatt--auszug { order: 3; margin-top: var(--s-4); }
}
.regel { padding: var(--s-5) 0 var(--s-6); border-top: var(--linie-stark) solid var(--f-linie-stark); }
.regel__nr {
  display: block;
  margin-bottom: var(--s-3);
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: 0.9375rem;
  letter-spacing: 0.08em;
  color: var(--f-text-2);
}
.regel h3 { margin-bottom: var(--s-3); }
.regel p { color: var(--f-text); font-size: var(--fs-klein); }
@media (min-width: 60em) {
  .regeln--liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .regeln-klapp { display: none; }
  .regeln-raster { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-8); }
  .regeln-seite { position: sticky; top: 7rem; align-self: start; }
}

/* Vergleich: zwei gleich große Spalten, neutral */
.vergleich { font-size: var(--fs-text); }
.vergleich th,
.vergleich td { padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--f-linie); }
.vergleich thead th {
  background: var(--ink);
  color: var(--text-on-ink);
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
  letter-spacing: 0;
  text-transform: none;
  border: 0;
  padding-top: 1rem;
}
.vergleich thead th:first-child { background: transparent; color: var(--f-text-2); font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; vertical-align: bottom; padding-left: 0; }
.vergleich thead th + th { border-left: 4px solid var(--f-grund); }
.vergleich tbody th { padding-left: 0; width: 24%; font-family: var(--font-display); font-weight: var(--fw-display); font-size: 1.25rem; line-height: 1.15; }
.vergleich td { width: 38%; }
.vergleich td + td { border-left: 4px solid var(--f-grund); }
.vergleich tbody td { background: var(--f-karte); }
.vergleich-schluss { margin-top: var(--s-6); font-size: var(--fs-lead); line-height: 1.5; max-width: 60ch; }
@media (max-width: 47.99em) {
  .tabelle-huelle--vergleich { overflow: visible; }
  .vergleich,
  .vergleich tbody { display: block; }
  .vergleich thead { display: block; position: sticky; top: 0; z-index: 2; background: var(--f-grund); padding-top: var(--s-2); }
  .vergleich tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-2); }
  .vergleich thead th { display: flex; align-items: flex-end; padding: 0.6rem 0.75rem; font-size: 1.0625rem; line-height: 1.1; }
  .vergleich thead th:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .vergleich thead th + th { border-left: 0; }
  .vergleich tbody tr { padding: var(--s-3) 0 var(--s-1); border-bottom: 1px solid var(--f-linie); }
  .vergleich tbody th { grid-column: 1 / -1; width: auto; padding: 0 0 var(--s-2); border: 0; font-size: 1.1875rem; }
  .vergleich tbody td { width: auto; border: 0; padding: 0.55rem 0.65rem; font-size: 0.9375rem; line-height: 1.4; }
  .vergleich td + td { border-left: 0; }
}

/* Randloses Bildband: bricht den Takt der Module */
.bildband { position: relative; margin: 0; aspect-ratio: 3 / 2; overflow: hidden; background: var(--ink); }
.bildband img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
@media (min-width: 37.5em) { .bildband { aspect-ratio: 21 / 9; } }
@media (min-width: 60em) { .bildband { aspect-ratio: auto; height: clamp(26rem, 36vw, 36rem); } }

/* Inhaberin mit Zitat */
.inhaberin { display: grid; gap: var(--s-7); }
.inhaberin__text p { color: var(--f-text); max-width: 60ch; }

/* Porträt-Platz: kein fremdes Gesicht mit erfundener Identität (REGELN 11.3). Anthrazit-Fläche
   im Bildformat, Initialen in Signalgelb, Hinweis für den Kunden. Mit Kundenfoto wird daraus .bild */
.portraet-platz {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  background: var(--ink);
  color: var(--text-on-ink-2);
  overflow: hidden;
}
.f-dunkel .portraet-platz,
.direkt .portraet-platz { background: var(--ink-2); }
.portraet-platz::after { content: ""; position: absolute; left: 0; bottom: 0; width: 34%; height: var(--balken); background: var(--akzent); }
.portraet-platz__initialen {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: clamp(4.5rem, 3rem + 7vw, 9rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--akzent-auf-dunkel);
}
.portraet-platz__hinweis {
  position: absolute;
  left: var(--s-4);
  right: var(--s-4);
  bottom: calc(var(--balken) + var(--s-3));
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  line-height: 1.3;
}
.portraet-platz--klein { aspect-ratio: 1 / 1; }
.portraet-platz--klein .portraet-platz__initialen { font-size: 2.25rem; }
.portraet-platz--klein .portraet-platz__hinweis { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.portraet-platz--klein::after { height: 4px; }

/* Startseite, Handy: Porträt-Platz neben der Überschrift (Name ist kurz genug) */
@media (max-width: 37.49em) {
  .inhaberin--kurz { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: var(--s-5); row-gap: 0; }
  .inhaberin--kurz > .portraet-platz { grid-column: 1; grid-row: 1; align-self: start; }
  .inhaberin--kurz .portraet-platz__initialen { font-size: 3.5rem; }
  .inhaberin--kurz .portraet-platz__hinweis { left: var(--s-2); right: var(--s-2); font-size: 0.75rem; letter-spacing: 0.06em; }
  .inhaberin--kurz .inhaberin__text { display: contents; }
  .inhaberin--kurz .kopfzeile { grid-column: 2; grid-row: 1; align-self: end; margin-bottom: 0; }
  .inhaberin--kurz .kopfzeile h2 { font-size: min(var(--fs-h2), 19cqi); }
  .inhaberin--kurz .inhaberin__text > :not(.kopfzeile) { grid-column: 1 / -1; }
  .inhaberin--kurz .inhaberin__text > p:first-of-type { margin-top: var(--s-6); }
}
.zitat { margin-top: var(--s-7); padding-top: var(--s-6); border-top: var(--linie-stark) solid var(--f-linie-stark); }
.zitat blockquote { margin: 0; }
.zitat blockquote p {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: clamp(1.625rem, 1.2rem + 1.7vw, 2.625rem);
  line-height: 1.08;
  color: var(--f-text);
  max-width: 30ch;
  hyphens: manual;
}
.zitat figcaption { margin-top: var(--s-4); color: var(--f-text-2); font-family: var(--font-display); font-weight: var(--fw-display); font-size: 1.125rem; }
.zitat figcaption::before { content: ""; display: inline-block; width: 1.5rem; height: 2px; margin-right: 0.6rem; vertical-align: middle; background: var(--f-marke); }
.inhaberin .pfeil-link { margin-top: var(--s-6); }
@media (max-width: 37.49em) {
  .zitat { margin-top: var(--s-6); padding-top: var(--s-5); }
  .zitat blockquote p { font-size: 1.5rem; }
  .inhaberin .pfeil-link { margin-top: var(--s-4); }
}
@media (min-width: 60em) {
  .inhaberin { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-8); align-items: start; }
  .inhaberin > .portraet-platz { aspect-ratio: 1 / 1; }
}

/* Einsatzgebiet: Tabelle, darunter Link und Grenze */
.gebiet .tabelle tbody th { font-family: var(--font-display); font-weight: var(--fw-display); font-size: 1.1875rem; line-height: 1.15; }
@media (max-width: 47.99em) {
  .gebiet .tabelle--karten td { display: grid; grid-template-columns: 5.75rem minmax(0, 1fr); gap: var(--s-3); align-items: baseline; padding-block: 0.2rem; font-size: 1rem; }
  .gebiet .tabelle--karten tr { padding-block: var(--s-3); }
  .gebiet .tabelle--karten td::before { margin-top: 0; }
}
.gebiet__fuss { display: grid; gap: var(--s-4); margin-top: var(--s-6); align-items: start; }
.gebiet__fuss .pfeil-link { justify-self: start; }
.gebiet__grenze { color: var(--f-text-2); font-size: var(--fs-hinweis); }
@media (min-width: 60em) {
  .gebiet__fuss { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); }
  .gebiet__grenze { padding-top: 0.6rem; }
}
.tabelle-huelle + .gebiet__grenze { margin-top: var(--s-5); }

/* Jobs-Band: Signalfläche, riesige Zeile */
.jobs { overflow: clip; }
.jobs__raster { display: grid; gap: var(--s-6); }
.jobs__raster > div:first-child { container-type: inline-size; }
.jobs h2 { font-size: clamp(3.25rem, 1.6rem + 7vw, 7.5rem); font-size: min(clamp(3.25rem, 1.6rem + 7vw, 7.5rem), 14cqi); line-height: 0.86; letter-spacing: -0.02em; }
.jobs h2::before { background: var(--ink); }
.jobs__text p { font-size: var(--fs-lead); line-height: 1.5; color: var(--f-text); max-width: 46ch; }
.jobs__text .jobs__tel { margin-top: var(--s-5); font-size: var(--fs-text); color: var(--f-text); }
.jobs__tel a { font-family: var(--font-display); font-weight: var(--fw-display); color: var(--f-text); }
/* Jobs-Foto nur ab 60em, als Hochformat-Ausschnitt auf Mopp und Boden (keine Tür, kein Laborbezug) */
.jobs .bild { display: none; background: var(--ink); }
.jobs .bild img { object-position: 85% 60%; }
@media (min-width: 60em) {
  .jobs__raster { grid-template-columns: minmax(0, 9fr) minmax(0, 3fr); grid-template-rows: auto auto; gap: var(--s-5) var(--s-7); align-items: start; }
  .jobs__raster > div:first-child { grid-column: 1; grid-row: 1; }
  .jobs__text { grid-column: 1; grid-row: 2; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); column-gap: var(--s-7); align-items: start; }
  .jobs__text > p:first-child { grid-row: 1 / span 2; }
  .jobs__text .knopfreihe { grid-column: 2; margin-top: 0.35rem; }
  .jobs__text .jobs__tel { grid-column: 2; }
  .jobs .bild { display: block; grid-column: 2; grid-row: 1 / span 2; margin: 0; margin-right: calc(-1 * max(var(--rand), (100vw - var(--breite)) / 2)); aspect-ratio: auto; align-self: stretch; min-height: 26rem; margin-block: calc(-1 * var(--abschnitt)); }
  .jobs .bild img { position: absolute; inset: 0; }
}

/* FAQ: Überschrift links, Fragen rechts */
.faq-raster { display: grid; gap: var(--s-6); }
@media (min-width: 60em) {
  .faq-raster { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-8); }
  .faq-raster .kopfzeile { position: sticky; top: 7rem; align-self: start; }
}

/* Aufruf: zwei große Handlungen */
.aufruf { position: relative; overflow: clip; }
.aufruf__raster { display: grid; gap: var(--s-6); }
.aufruf h2 { font-size: clamp(2.5rem, 1.4rem + 4.8vw, 6rem); line-height: 0.92; max-width: 14ch; }
.aufruf__text > p:first-child { color: var(--f-text); font-size: var(--fs-lead); line-height: 1.5; max-width: 44ch; }
.aufruf .knopfreihe { margin-top: var(--s-6); }
.aufruf__zeit { margin-top: var(--s-5); color: var(--f-text-2); font-size: var(--fs-hinweis); }
@media (min-width: 60em) {
  .aufruf__raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); align-items: start; }
  .aufruf .knopfreihe { flex-direction: column; align-items: stretch; }
}

/* Leistungsseite: Leistungsverzeichnis als Checklisten-Blätter */
.verzeichnis { display: grid; gap: var(--s-5); }
@media (min-width: 60em) { .verzeichnis { grid-template-columns: 1.25fr 1fr 1fr; align-items: start; } }
.blatt { background: var(--surface); box-shadow: var(--schatten-1); border-top: var(--balken) solid var(--ink); }
.blatt h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-5) var(--s-5) var(--s-4);
  border-bottom: 1px solid var(--border);
}
.blatt h3 .pikto { color: var(--text-2); }
.blatt ul { list-style: none; margin: 0; padding: var(--s-2) var(--s-5) var(--s-5); }
.blatt li { position: relative; padding: 0.7rem 0 0.7rem 2.25rem; border-bottom: 1px dashed var(--border); font-size: var(--fs-klein); line-height: 1.45; }
.blatt li:last-child { border-bottom: 0; }
.blatt li::before,
.blatt li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75rem;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--ink);
  background: var(--akzent);
}
.blatt li::after {
  border-color: transparent;
  background: var(--akzent-text);
  -webkit-mask: var(--sym-haken) center / 0.85rem no-repeat;
  mask: var(--sym-haken) center / 0.85rem no-repeat;
}
.verzeichnis-fuss { margin-top: var(--s-6); display: grid; gap: var(--s-3); }

/* Intervalle */
.intervalle { list-style: none; padding: 0; border-top: var(--linie-stark) solid var(--f-linie-stark); }
.intervalle li { display: grid; gap: var(--s-2); padding: var(--s-5) 0; border-bottom: 1px solid var(--f-linie); }
.intervalle strong { font-family: var(--font-display); font-weight: var(--fw-display); font-size: clamp(1.5rem, 1.25rem + 1vw, 2.125rem); line-height: 1.05; }
.intervalle span { color: var(--f-text); }
@media (min-width: 60em) { .intervalle li { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-6); align-items: baseline; } }

/* Tuchfarben: kleines Farbquadrat direkt vor dem Farbwort */
.tuch { display: inline-block; width: 0.9em; height: 0.9em; margin-right: 0.3em; vertical-align: -0.08em; background: var(--tuch); box-shadow: inset 0 0 0 1px var(--tuch-rand); }
.tuch--rot { --tuch: var(--c-tuch-rot); }
.tuch--gelb { --tuch: var(--c-tuch-gelb); }
.tuch--blau { --tuch: var(--c-tuch-blau); }
.tuch--gruen { --tuch: var(--c-tuch-gruen); }

/* Zeitband: Reinigungszeiten zwischen 5 und 22 Uhr */
.zeitband { margin-top: var(--s-6); max-width: 40rem; }
.zeitband__spur { position: relative; height: 3.25rem; background: var(--bg-alt-2); border: 2px solid var(--ink); }
.zeitband__block { position: absolute; top: 0; bottom: 0; left: calc((var(--von) - 5) / 17 * 100%); width: calc((var(--bis) - var(--von)) / 17 * 100%); background: var(--akzent); border-inline: 2px solid var(--ink); display: grid; place-items: center; font-family: var(--font-display); font-weight: var(--fw-display); font-size: 0.9375rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--akzent-text); }
@media (max-width: 37.49em) { .zeitband__block, .zeitband__mitte { font-size: 0.6875rem; letter-spacing: 0.02em; } }
.zeitband__block--morgens { --von: 5; --bis: 8; }
.zeitband__block--abends { --von: 17; --bis: 22; }
.zeitband__block:first-child { border-left: 0; }
.zeitband__block:last-child { border-right: 0; }
.zeitband__mitte { position: absolute; top: 0; bottom: 0; left: calc(3 / 17 * 100%); width: calc(9 / 17 * 100%); display: grid; place-items: center; font-family: var(--font-display); font-weight: var(--fw-display); font-size: 0.875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); }
.zeitband__skala { position: relative; height: 1.75rem; margin-top: 0.35rem; font-family: var(--font-display); font-weight: var(--fw-display); font-size: 0.9375rem; color: var(--text-2); }
.zeitband__skala span { position: absolute; top: 0; left: calc((var(--h) - 5) / 17 * 100%); transform: translateX(-50%); white-space: nowrap; }
.zeitband__marke--5 { --h: 5; }
.zeitband__marke--8 { --h: 8; }
.zeitband__marke--17 { --h: 17; }
.zeitband__marke--22 { --h: 22; }
.zeitband__skala span:first-child { transform: none; }
.zeitband__skala span:last-child { transform: translateX(-100%); }

/* Preisfaktoren: nummerierte Liste mit Trennlinien (keine Kacheln, sie sind nicht klickbar) */
.faktoren { list-style: none; padding: 0; display: grid; gap: 0 var(--s-7); border-top: var(--linie-stark) solid var(--f-linie-stark); }
@media (min-width: 37.5em) { .faktoren { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60em) { .faktoren { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.faktoren li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); align-items: baseline; padding: var(--s-4) 0; border-bottom: 1px solid var(--f-linie); font-size: var(--fs-lead); line-height: 1.35; }
.faktoren__nr { font-family: var(--font-display); font-weight: var(--fw-display); font-size: 1.25rem; color: var(--f-marke); }
.festpreis { margin-top: var(--s-7); padding: var(--s-6); border: var(--linie-stark) solid var(--akzent); max-width: 52rem; }
.festpreis p { font-size: var(--fs-lead); line-height: 1.5; color: var(--f-text); max-width: none; }
.festpreis strong { font-family: var(--font-display); font-weight: var(--fw-display); font-size: 1.15em; letter-spacing: 0.01em; }

/* Linkliste (Passende Leistungen, Leistungen im Ort) */
.linkliste { list-style: none; padding: 0; display: grid; gap: 0 var(--s-6); border-top: var(--linie-stark) solid var(--f-linie-stark); }
@media (min-width: 60em) { .linkliste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.linkliste a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 4.25rem;
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--f-linie);
  font-family: var(--font-display); font-weight: var(--fw-display);
  text-decoration: none;
  line-height: 1.35;
}
.linkliste a .pikto { flex: none; width: 2.25rem; height: 2.25rem; padding: 0.45rem; background: var(--akzent); color: var(--akzent-text); transition: transform var(--dauer); }
.linkliste a:hover .pikto { transform: translateX(4px); }
.linkliste a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.linkliste__ort { margin-top: var(--s-6); }

/* Material: drei Absätze mit Piktogramm */
.material { list-style: none; padding: 0; display: grid; gap: var(--s-6) var(--s-7); }
.material li { padding-top: var(--s-5); border-top: var(--linie-stark) solid var(--f-linie-stark); }
.material .pikto { width: 3.5rem; height: 3.5rem; padding: 0.8rem; margin-bottom: var(--s-4); background: var(--ink); color: var(--akzent-auf-dunkel); }
@media (min-width: 60em) { .material { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Schlüssel-Liste mit Piktogramm */
.pikto-liste { list-style: none; padding: 0; display: grid; gap: var(--s-4) var(--s-7); }
.pikto-liste li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-4); align-items: start; padding-top: var(--s-4); border-top: 1px solid var(--f-linie); }
.pikto-liste .pikto { width: 1.75rem; height: 1.75rem; color: var(--f-marke); margin-top: 0.1rem; }
@media (min-width: 60em) { .pikto-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Ortsseite: große Objektzahl, Objektliste */
.objekte { display: grid; gap: var(--s-7); }
.objekte__zahl { font-family: var(--font-display); font-weight: var(--fw-display); font-size: clamp(7rem, 4rem + 14vw, 15rem); line-height: 0.78; letter-spacing: -0.04em; color: var(--f-text); }
.objekte__zahl-text { display: block; margin-top: var(--s-4); font-family: var(--font-display); font-weight: var(--fw-display); font-size: 1.125rem; line-height: 1.3; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--f-text); }
.objektliste { list-style: none; padding: 0; counter-reset: obj; border-top: var(--linie-stark) solid var(--f-linie-stark); }
.objektliste li { position: relative; padding: var(--s-4) 0 var(--s-4) 3.25rem; border-bottom: 1px solid var(--f-linie); counter-increment: obj; }
.objektliste li::before { content: counter(obj, decimal-leading-zero); position: absolute; left: 0; top: var(--s-4); font-family: var(--font-display); font-weight: var(--fw-display); font-size: 1.25rem; line-height: 1.5; color: var(--f-text-2); }
.objekte__leitung { margin-top: var(--s-6); padding: var(--s-5); background: var(--ink); color: var(--text-on-ink); border-left: var(--balken) solid var(--akzent); font-size: var(--fs-lead); line-height: 1.45; }
@media (min-width: 60em) { .objekte { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-8); } }

/* Praxis-Liste mit fettem Anfang */
.praxis-liste { list-style: none; padding: 0; display: grid; gap: 0; }
.praxis-liste li { padding: var(--s-5) 0; border-top: 1px solid var(--f-linie); color: var(--f-text); }
.praxis-liste li { position: relative; padding-left: 1.75rem; }
.praxis-liste li::before { content: ""; position: absolute; left: 0; top: calc(var(--s-5) + 0.55em); width: 0.75rem; height: var(--balken); background: var(--f-marke); }
.praxis-liste strong { font-family: var(--font-display); font-weight: var(--fw-display); color: var(--f-text); }

/* Anfahrtstabelle bleibt auch auf dem Handy eine Tabelle; bis 360 px enger gesetzt */
@media (max-width: 24.99em) {
  .anfahrt { font-size: 0.9375rem; }
  .anfahrt th,
  .anfahrt td { padding-right: 0.6rem; }
  .anfahrt thead th { letter-spacing: 0.04em; font-size: 0.8125rem; }
  .anfahrt tbody th { font-size: 1.0625em; }
}

/* Entfernungsbalken */
.entfernung { display: grid; gap: 0.4rem; }
.entfernung__balken { display: block; height: 0.625rem; width: calc(var(--km) / 7 * 100%); background: var(--ink); }
.f-dunkel .entfernung__balken { background: var(--akzent); }
.entfernung--3 { --km: 3; }
.entfernung--4 { --km: 4; }
.entfernung--5 { --km: 5; }
.entfernung--6 { --km: 6; }
.entfernung--7 { --km: 7; }

/* Über uns: Zeitleiste der Geschichte */
.geschichte { list-style: none; padding: 0; display: grid; gap: 0; }
.geschichte li { position: relative; display: grid; grid-template-columns: 6.25rem minmax(0, 1fr); align-content: start; gap: var(--s-4); padding: 0 0 var(--s-6); }
.geschichte li::before { content: ""; position: absolute; left: 0.5rem; top: 1.25rem; bottom: 0; width: 2px; background: var(--f-linie-stark); }
.geschichte li:last-child::before { display: none; }
.geschichte__jahr { position: relative; z-index: 1; display: inline-block; align-self: start; padding: 0.2rem 0.5rem 0.1rem; background: var(--ink); color: var(--akzent-auf-dunkel); font-family: var(--font-display); font-weight: var(--fw-display); font-size: 1.625rem; line-height: 1; justify-self: start; }
.geschichte p { color: var(--f-text); padding-top: 0.2rem; }
@media (min-width: 60em) {
  .geschichte { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-5); border-top: var(--linie-stark) solid var(--f-linie-stark); padding-top: var(--s-5); }
  .geschichte li { grid-template-columns: minmax(0, 1fr); padding: 0; }
  .geschichte li::before { display: none; }
  .geschichte__jahr { font-size: 2.75rem; padding: 0.3rem 0.6rem 0.15rem; }
}

/* Über uns: Team in Zahlen */
.team-zahlen { list-style: none; padding: 0; display: grid; gap: 0; border-top: var(--linie-stark) solid var(--f-linie-stark); }
/* Zahl und Text auf gemeinsamer Grundlinie */
.team-zahlen li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--s-4); align-items: baseline; padding: var(--s-4) 0; border-bottom: 1px solid var(--f-linie); }
.team-zahlen .nummer { font-size: clamp(3rem, 2.4rem + 2.4vw, 4.5rem); color: var(--f-marke); line-height: 0.9; }
.team-zahlen .nummer + span { line-height: 1.4; font-size: var(--fs-klein); }
@media (min-width: 60em) { .team-zahlen li { grid-template-columns: 8rem minmax(0, 1fr); } }

/* Datenliste */
.datenliste { display: grid; gap: 0; border-top: var(--linie-stark) solid var(--f-linie-stark); }
.datenliste > div { display: grid; gap: var(--s-1) var(--s-6); padding: var(--s-4) 0; border-bottom: 1px solid var(--f-linie); }
.datenliste dt { font-family: var(--font-display); font-weight: var(--fw-display); font-size: 1.25rem; line-height: 1.2; }
.datenliste dd { margin: 0; color: var(--f-text); }
@media (min-width: 48em) { .datenliste > div { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }

/* Kontakt: Formular */
.kontakt-raster { display: grid; gap: var(--s-7); }
@media (min-width: 60em) { .kontakt-raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); align-items: start; } }
.formular-titel { font-size: clamp(2.125rem, 1.6rem + 2vw, 3.25rem); margin-bottom: var(--s-6); }
.formular { display: grid; gap: var(--s-5); }
.formular__pflicht { color: var(--f-text); font-size: var(--fs-hinweis); }
.formular__vorschau { margin-top: calc(-1 * var(--s-3)); color: var(--f-text-2); font-size: var(--fs-hinweis); }
.feld__hilfe--vorn { margin-top: calc(-1 * var(--s-3)); }
.feld { display: grid; gap: var(--s-2); }
.feld label,
.feld legend,
.gruppe legend { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-ui); letter-spacing: 0.01em; padding: 0; }
.feld .optional,
.gruppe .optional { font-family: var(--font-text); font-weight: 400; font-size: var(--fs-text); letter-spacing: 0; color: var(--f-text-2); }
.feld--kurz { max-width: 16rem; }
.feld input,
.feld select,
.feld textarea {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.75rem 0.9rem;
  border: 2px solid var(--border-control);
  border-radius: var(--r-1);
  background: var(--input-bg);
  color: var(--text);
  font: inherit;
  font-size: max(1rem, var(--fs-text));
}
.feld textarea { min-height: 9rem; resize: vertical; line-height: 1.5; }
.feld select { appearance: none; padding-right: 2.75rem; }
/* Pfeil der Auswahlliste als Maske, Farbe aus --text */
.auswahl { position: relative; display: block; }
.auswahl::after { content: ""; position: absolute; right: 0.9rem; top: 50%; width: 1.1rem; height: 1.1rem; transform: translateY(-50%); background: var(--text); -webkit-mask: var(--sym-runter) center / contain no-repeat; mask: var(--sym-runter) center / contain no-repeat; pointer-events: none; }
.feld input:focus-visible,
.feld select:focus-visible,
.feld textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-color: var(--ink); box-shadow: 0 0 0 6px var(--akzent); }
.feld__hilfe { color: var(--f-text-2); font-size: var(--fs-hinweis); }
.feld__hilfe + .feld__hilfe { margin-top: 0; }
.feld-paar { display: grid; gap: var(--s-5); }
@media (min-width: 37.5em) { .feld-paar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gruppe { border: 0; margin: 0; padding: 0; min-width: 0; }
.gruppe legend { margin-bottom: var(--s-3); }
.kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
@media (max-width: 37.49em) { .kachel:last-child:nth-child(odd) { grid-column: 1 / -1; } .kachel:last-child:nth-child(odd) span { min-height: 4.5rem; } }
@media (min-width: 37.5em) { .kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kachel { position: relative; }
.kachel input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.kachel span {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: 6.5rem;
  height: 100%;
  padding: var(--s-4);
  border: 2px solid var(--border-control);
  border-radius: var(--r-1);
  background: var(--input-bg);
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: 1.125rem;
  line-height: 1.2;
}
.kachel .pikto { width: 1.75rem; height: 1.75rem; }
.kachel input:hover + span { border-color: var(--ink); background: var(--bg-alt); }
.kachel input:checked + span { border-color: var(--ink); background: var(--akzent); box-shadow: inset 0 0 0 2px var(--ink); }
.kachel input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 3px; }
.pillen { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pille { position: relative; }
.pille input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pille span { display: inline-flex; align-items: center; min-height: 2.875rem; padding: 0.5rem 1.1rem; border: 2px solid var(--border-control); border-radius: var(--r-1); font-family: var(--font-display); font-weight: var(--fw-display); font-size: 1.125rem; background: var(--surface); }
.pille input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--text-on-ink); }
.pille input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 3px; }
.mehr-angaben { border-top: var(--linie-stark) solid var(--ink); border-bottom: 1px solid var(--f-linie); }
.mehr-angaben > summary { display: flex; align-items: center; justify-content: space-between; min-height: 3.5rem; font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-ui); cursor: pointer; list-style: none; }
.mehr-angaben > summary::-webkit-details-marker { display: none; }
.mehr-angaben > summary .pikto { transition: transform var(--dauer); }
.mehr-angaben[open] > summary .pikto { transform: rotate(180deg); }
.mehr-angaben__inhalt { display: grid; gap: var(--s-5); padding-bottom: var(--s-6); }
.datenschutz-hinweis { color: var(--f-text-2); font-size: var(--fs-hinweis); max-width: 60ch; }
.formular .knopf { justify-self: start; }
@media (max-width: 37.49em) { .formular .knopf { justify-self: stretch; } }

/* Kontakt: direkte Wege */
.direkt { padding: var(--s-6); background: var(--ink); color: var(--text-on-ink); border-top: var(--balken) solid var(--akzent); --f-grund: var(--ink); --f-text: var(--text-on-ink); --f-text-2: var(--text-on-ink-2); --f-linie: var(--border-on-ink); --f-marke: var(--akzent-auf-dunkel); --f-fokus: var(--focus-on-ink); }
.direkt h2 { font-size: clamp(1.875rem, 1.5rem + 1.4vw, 2.625rem); margin-bottom: var(--s-5); }
.direkt dl { display: grid; gap: 0; }
.direkt dl > div { padding: var(--s-4) 0; border-top: 1px solid var(--border-on-ink); }
.direkt dt { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-on-ink-2); }
.direkt dd { margin: 0.2rem 0 0; font-size: var(--fs-text); }
.direkt dd a { color: var(--text-on-ink); font-family: var(--font-display); font-weight: var(--fw-display); text-decoration-color: var(--akzent); overflow-wrap: anywhere; }
.direkt__tel { font-family: var(--font-display); font-weight: var(--fw-display); font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem) !important; line-height: 1.1; text-decoration: none !important; }
.direkt__jobs { margin-top: var(--s-5); color: var(--text-on-ink-2); font-size: var(--fs-hinweis); }
.direkt__person { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--s-4); align-items: center; margin-bottom: var(--s-5); }
.direkt__person p { color: var(--f-text); line-height: 1.45; }
.direkt__person strong { display: block; margin-bottom: 0.2rem; font-family: var(--font-display); font-weight: var(--fw-display); font-size: 1.375rem; line-height: 1.1; }
.kontakt-anruf { display: grid; justify-items: start; gap: var(--s-3); margin-top: var(--s-6); }
.kontakt-anruf p { color: var(--f-text-2); font-size: var(--fs-hinweis); }
.kontakt-anruf .kontakt-anruf__frage { color: var(--f-text); font-family: var(--font-display); font-weight: var(--fw-display); font-size: 1.375rem; line-height: 1.1; }
@media (max-width: 37.49em) { .kontakt-anruf .knopf { width: 100%; } }
@media (min-width: 60em) { .kontakt-anruf { display: none; } }
.direkt__jobs a { color: var(--text-on-ink); }
@media (min-width: 60em) { .direkt { position: sticky; top: 7rem; } }

/* Platzhalterseiten: Hinweis, dass die Leistungsseite im Kundenbau entsteht */
.folgt { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-4) var(--s-5); align-items: center; padding: var(--s-5); background: var(--f-karte); border-left: var(--balken) solid var(--f-marke); }
.folgt__pikto { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; background: var(--ink); color: var(--akzent-auf-dunkel); }
.folgt__pikto .pikto { width: 1.75rem; height: 1.75rem; }
.folgt__titel { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); line-height: 1.05; }
.folgt .pfeil-link { margin-top: var(--s-2); }
@media (min-width: 37.5em) { .folgt { padding: var(--s-6); } .folgt__pikto { width: 4.5rem; height: 4.5rem; } }

/* 9 Hilfen --------------------------------------------------------------- */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.nur-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}