/* =====================================================================
   Frisch & klar · Look-Werkstatt Heinz IT Systeme
   Aufbau: 1 Schrift · 2 Tokens · 3 Grundlagen · 4 Raster · 5 Bausteine
   (je Abschnittstyp) · 6 Seitenleiste Handy · 7 Bewegung
   Übernahme als Fabrik-Haut: Abschnitt 2 ist die Haut (tokens.css),
   Abschnitte 3 bis 6 sind die Komponenten.
   ===================================================================== */

/* 1 · Schrift (Albert Sans, OFL, variable Achse 300 bis 700, nur Latin) */
@font-face {
  font-family: "Albert Sans";
  src: url("/gebaeudereiniger/beispiele/frisch/assets/schriften/albert-sans-latin-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* 2 · Tokens (Haut) */
:root {
  /* Farben: Kontraste in README.md */
  --c-weiss: #ffffff;
  --c-tinte: #0f2530;         /* Text, 15,8:1 auf Weiß */
  --c-tinte-2: #46606b;       /* Nebentext, 6,7:1 auf Weiß, 6,1:1 auf Himmel */
  --c-primaer: #0a6e93;       /* Handlung, Links, Zahlen, 5,7:1 auf Weiß */
  --c-primaer-tief: #07506c;  /* Hover, 8,9:1 auf Weiß */
  --c-primaer-text: #e8f6fa;  /* Text auf Primär, 5,2:1 */
  --c-himmel: #eef6f8;        /* helle Fläche */
  --c-himmel-2: #d6e9ef;      /* Linie und Fläche auf Himmel */
  --c-linie: #dbe7ec;         /* Haarlinien auf Weiß */
  --c-rand: #6f8a95;          /* Feldränder, 3,7:1 auf Weiß */
  --c-minze: #9be6c6;         /* Akzentfläche, Tinte darauf 10,9:1 */
  --c-minze-hell: #e4f7ef;    /* helle Akzentfläche */
  --c-nacht: #0b3a4f;         /* Fuß */
  --c-nacht-text: #a9cbd8;    /* Nebentext im Fuß, 7,1:1 */
  --c-nacht-hell: #dcebf0;    /* Text im Fuß, 10,4:1 */
  --c-fokus: #0a6e93;

  /* Fotos: eine gemeinsame Lichtstimmung für den ganzen Fundus (etwas heller, Wärme leicht zurück) */
  --foto-filter: brightness(1.04) saturate(0.86) contrast(0.97);

  /* Schrift */
  --f-sans: "Albert Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --t-xs: 0.8125rem;
  --t-s: 0.9375rem;
  --t-m: 1.0625rem;
  --t-l: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --t-xl: clamp(1.1875rem, 1.1rem + 0.4vw, 1.4375rem);
  --t-2xl: clamp(1.8125rem, 1.35rem + 1.9vw, 2.875rem);
  --t-3xl: clamp(2.125rem, 1.15rem + 4.1vw, 4.625rem);
  --t-h1-sub: clamp(2.125rem, 1.35rem + 3.1vw, 3.75rem);
  --t-zahl: clamp(2.25rem, 1.8rem + 1.6vw, 3.125rem);
  --w-licht: 300;
  --w-normal: 400;
  --w-mittel: 500;
  --w-fett: 620;

  /* 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: 4rem;
  --abschnitt: clamp(3.5rem, 2rem + 5.5vw, 7rem);
  --rand: clamp(1rem, 0.55rem + 2.2vw, 2.5rem);
  --rand-flaeche: clamp(0.5rem, 0.2rem + 1.2vw, 1.5rem);
  --huelle: 76rem;
  --huelle-breit: 86rem;
  --huelle-flaeche: 90rem;

  /* Radien */
  --r-1: 0.5rem;
  --r-2: 0.875rem;
  --r-3: 1.375rem;
  --r-4: clamp(1.25rem, 0.9rem + 1vw, 1.75rem);
  --r-5: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  --r-rund: 999px;

  /* Schatten */
  --s-1: 0 1px 2px rgb(15 37 48 / 0.06);
  --s-2: 0 1px 2px rgb(15 37 48 / 0.05), 0 18px 40px -22px rgb(15 37 48 / 0.32);
}

/* 3 · Grundlagen */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--f-sans);
  font-size: var(--t-m);
  font-weight: var(--w-normal);
  line-height: 1.6;
  color: var(--c-tinte);
  background: var(--c-weiss);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: lining-nums;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3 {
  margin: 0;
  color: var(--c-tinte);
  font-weight: var(--w-normal);
  line-height: 1.14;
  letter-spacing: -0.018em;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1-sub); font-weight: var(--w-licht); letter-spacing: -0.032em; line-height: 1.05; }
/* H2 durchgehend Leicht; Halbfett (.betont) nur auf dem tragenden Wort, höchstens zweimal je Seite */
h2 { font-size: var(--t-2xl); font-weight: var(--w-licht); letter-spacing: -0.024em; }
h3 { font-size: var(--t-xl); font-weight: var(--w-fett); letter-spacing: -0.012em; line-height: 1.25; }
.betont { font-weight: var(--w-fett); }
p { margin: 0; text-wrap: pretty; }
p, li, dd, td, th, h3, summary { overflow-wrap: break-word; }
/* Silbentrennung nur auf schmalen Bildschirmen und nur für lange Wörter (ab 16 Zeichen),
   nie im Vorspann und in Links; kurze Komposita wie „Kundenverkehr“ bleiben ganz */
@media (max-width: 47.99rem) {
  p, li, dd, td, th, h3, summary { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 16 7 7; }
  .lead, a, .knopf { -webkit-hyphens: manual; hyphens: manual; }
}
figure img { filter: var(--foto-filter); }
.nobr { white-space: nowrap; }
p + p { margin-top: 1em; }
ul, ol { margin: 0; padding: 0; }
a[href^="mailto:"] { -webkit-hyphens: none; hyphens: none; }
a { color: var(--c-primaer); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--c-primaer-tief); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--c-fokus); outline-offset: 3px; border-radius: 4px; }
[id] { scroll-margin-top: 1.5rem; }
address { font-style: normal; }
figure { margin: 0; }
strong, b { font-weight: var(--w-fett); }
.lead { font-size: var(--t-l); line-height: 1.55; color: var(--c-tinte-2); }
.ic { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pikto { width: 3rem; height: 3rem; flex: none; fill: none; stroke: var(--c-primaer); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pikto .pikto__f { fill: var(--c-minze); stroke: none; }
.sprung {
  position: absolute; left: var(--a-4); top: -4rem; z-index: 100;
  background: var(--c-tinte); color: #fff; padding: var(--a-3) var(--a-4); border-radius: var(--r-1);
  font-weight: var(--w-fett); text-decoration: none;
}
.sprung:focus { top: var(--a-3); color: #fff; }

/* Knöpfe */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 3.125rem; padding: 0.75rem 1.4rem;
  border: 1.5px solid transparent; border-radius: var(--r-rund);
  font: inherit; font-size: var(--t-m); font-weight: var(--w-fett); line-height: 1.2;
  text-decoration: none; cursor: pointer; text-align: center;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.knopf:hover { text-decoration: none; }
.knopf .ic { width: 1.2em; height: 1.2em; }
.knopf--primaer { background: var(--c-primaer); color: #fff; }
.knopf--primaer:hover { background: var(--c-primaer-tief); color: #fff; }
.knopf--kontur { border-color: var(--c-tinte); color: var(--c-tinte); background: var(--c-weiss); }
.knopf--kontur:hover { background: var(--c-himmel); color: var(--c-tinte); }
.knopf--hell { background: #fff; color: var(--c-primaer-tief); }
.knopf--hell:hover { background: var(--c-minze-hell); color: var(--c-primaer-tief); }
.knopf--rand-hell { border-color: rgb(255 255 255 / 0.75); color: #fff; }
.knopf--rand-hell:hover { background: rgb(255 255 255 / 0.12); color: #fff; }
.knopf--dunkel { background: var(--c-tinte); color: #fff; }
.knopf--dunkel:hover { background: #1d3a47; color: #fff; }
.knopf--klein { min-height: 2.75rem; padding: 0.55rem 1.15rem; font-size: var(--t-s); }
.knopf--gross { min-height: 3.5rem; padding-inline: 2rem; }
.knopf--tel { padding-left: 0.5rem; }
.kreis {
  display: grid; place-items: center; width: 2.125rem; height: 2.125rem; border-radius: 50%;
  background: var(--c-minze); color: var(--c-tinte);
}
.kreis .ic { width: 1.1rem; height: 1.1rem; }
.knoepfe { display: flex; flex-wrap: wrap; gap: var(--a-3); margin-top: var(--a-6); }
/* Textlink: Pfeil läuft als letztes Zeichen mit, auch wenn der Linktext umbricht */
.textlink {
  display: inline-block; padding-block: 0.35rem;
  font-weight: var(--w-fett); color: var(--c-primaer); text-decoration: none;
}
.textlink .ic, .kachel__link .ic { display: inline-block; vertical-align: -0.24em; margin-left: 0.4rem; transition: transform 0.2s; }
.textlink:hover { color: var(--c-primaer-tief); text-decoration: underline; text-decoration-thickness: 1px; }
.textlink:hover .ic { transform: translateX(3px); }
.linkreihe { list-style: none; display: flex; flex-wrap: wrap; gap: var(--a-2) var(--a-6); margin-top: var(--a-5); }

/* Häkchenliste */
.haken { list-style: none; display: grid; gap: var(--a-3); }
.haken li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: 0.6rem; align-items: start; }
.haken .ic { width: 1.3rem; height: 1.3rem; margin-top: 0.2rem; color: var(--c-primaer); stroke-width: 2.3; }

/* 4 · Raster und Flächen */
.huelle { width: min(100% - 2 * var(--rand), var(--huelle)); margin-inline: auto; }
.huelle--breit { width: min(100% - 2 * var(--rand), var(--huelle-breit)); }
.abschnitt { padding-block: calc(var(--abschnitt) * 0.5); }
.abschnitt--eng { padding-block: calc(var(--abschnitt) * 0.35); }
.flaeche {
  width: min(100% - 2 * var(--rand-flaeche), var(--huelle-flaeche));
  margin-inline: auto;
  background: var(--c-himmel);
  border-radius: var(--r-5);
}
.abschnitt.flaeche { padding-block: calc(var(--abschnitt) * 0.8); margin-block: calc(var(--abschnitt) * 0.5); }
.flaeche .huelle { width: min(100% - 2 * (var(--rand) - var(--rand-flaeche) + 0.25rem), var(--huelle)); }
.flaeche--minze { background: var(--c-minze-hell); }
.abschnitt__titel { margin-bottom: clamp(1.75rem, 1rem + 2.5vw, 3rem); max-width: 44rem; }

/* 5 · Bausteine ------------------------------------------------------ */

/* 5.1 Kopf */
.kopf { position: relative; z-index: 40; background: var(--c-weiss); border-bottom: 1px solid var(--c-linie); }
.kopf__zeile {
  width: min(100% - 2 * var(--rand), var(--huelle-breit)); margin-inline: auto;
  display: flex; align-items: center; gap: var(--a-3); min-height: 4.25rem;
}
.marke {
  margin-right: auto; display: inline-flex; flex-direction: column; align-items: flex-start;
  font-size: 1.1875rem; letter-spacing: -0.025em; line-height: 1.02; color: var(--c-tinte); text-decoration: none;
  padding-block: 0.55rem;
}
.marke:hover { color: var(--c-tinte); text-decoration: none; }
.marke__name { display: flex; flex-direction: column; }
.marke__zusatz { display: none; }
.marke__eins { font-weight: 660; }
.marke__zwei { font-weight: var(--w-licht); color: var(--c-primaer); }
.nav, .kopf__tel, .kopf__angebot { display: none; }
.kopf__anrufen {
  display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.75rem; padding: 0.45rem 0.95rem 0.45rem 0.55rem;
  border-radius: var(--r-rund); background: var(--c-minze-hell); color: var(--c-tinte);
  font-weight: var(--w-fett); font-size: var(--t-s); text-decoration: none;
}
.kopf__anrufen .ic { width: 1.7rem; height: 1.7rem; padding: 0.3rem; border-radius: 50%; background: var(--c-minze); stroke-width: 2; }
.kopf__anrufen:hover { color: var(--c-tinte); background: var(--c-minze); }
.menue { position: static; }
.menue__knopf {
  list-style: none; display: inline-grid; align-items: center; justify-items: center; min-height: 2.75rem; padding: 0.45rem 0.9rem;
  border: 1.5px solid var(--c-tinte); border-radius: var(--r-rund); cursor: pointer;
  font-weight: var(--w-fett); font-size: var(--t-s); user-select: none;
}
.menue__knopf::-webkit-details-marker { display: none; }
/* Beide Beschriftungen liegen in derselben Rasterzelle: Der Knopf ist immer so breit wie „Menü“,
   offen zeigt er nur das Kreuz (das Wort „Schließen“ bleibt für Screenreader). So springt beim Öffnen
   nichts, und die Kopfzeile wird auf keiner Handybreite zu breit. */
.menue__auf, .menue__zu { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 0.4rem; }
.menue__zu { visibility: hidden; }
.menue[open] .menue__auf { visibility: hidden; }
.menue[open] .menue__zu { visibility: visible; }
.menue__wort { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.menue__tafel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--c-weiss); border-bottom: 1px solid var(--c-linie); box-shadow: var(--s-2);
  padding: var(--a-4) var(--rand) var(--a-6); max-height: calc(100vh - 5rem); overflow-y: auto;
}
.menue__gruppe { font-size: var(--t-xs); font-weight: var(--w-fett); color: var(--c-tinte-2); letter-spacing: 0.04em; margin: var(--a-2) 0 var(--a-1); }
.menue__leistungen, .menue__haupt { list-style: none; }
.menue__leistungen { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--a-4); padding-bottom: var(--a-3); border-bottom: 1px solid var(--c-linie); }
.menue__leistungen a, .menue__haupt a {
  display: flex; align-items: center; min-height: 2.9rem; color: var(--c-tinte); text-decoration: none; font-weight: var(--w-mittel);
}
.menue__haupt a { font-size: 1.1875rem; min-height: 3.1rem; border-bottom: 1px solid var(--c-linie); }
.menue a[aria-current="page"] { color: var(--c-primaer); font-weight: var(--w-fett); }
.menue__angebot { width: 100%; margin-top: var(--a-5); }
/* Sehr schmale Handys (bis 360 px): Kopf enger setzen, damit Wortmarke, „Anrufen“ und „Menü“ in eine Zeile passen (WCAG 1.4.10) */
@media (max-width: 22.5rem) {
  .kopf__zeile { gap: 0.4rem; }
  .marke { font-size: 1.0625rem; }
  .kopf__anrufen { padding: 0.4rem 0.7rem 0.4rem 0.4rem; }
  .menue__knopf { padding-inline: 0.7rem; }
  .kopf__anrufen, .menue__auf, .menue__zu { gap: 0.35rem; }
}

/* 5.2 Brotkrume */
.brotkrume { font-size: var(--t-s); color: var(--c-tinte-2); margin-bottom: var(--a-5); }
.brotkrume ol { list-style: none; display: flex; flex-wrap: wrap; }
.brotkrume li + li::before { content: "›"; margin: 0 0.55rem; color: var(--c-rand); }
.brotkrume a { color: var(--c-tinte-2); display: inline-block; padding-block: 0.2rem; }
.brotkrume a:hover { color: var(--c-primaer); }

/* 5.3 Held der Startseite mit Fensterband */
.held { padding-top: clamp(2rem, 1rem + 4vw, 4.75rem); }
.held__kopf { display: grid; gap: var(--a-5); width: min(100% - 2 * var(--rand), var(--huelle-breit)); }
.held__titel { font-size: var(--t-3xl); line-height: 1.02; letter-spacing: -0.036em; }
.held__titel .z { display: block; }
.held__titel .z--fett { font-weight: 600; letter-spacing: -0.034em; }
.held__text { max-width: 34rem; }
.held .knoepfe { margin-top: var(--a-5); }
.fenster {
  margin-top: clamp(2rem, 1rem + 3.5vw, 4rem);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.52fr);
  gap: clamp(0.4rem, 0.2rem + 0.8vw, 0.875rem);
  height: clamp(15.5rem, 7rem + 34vw, 37rem);
}
.fenster__scheibe { overflow: hidden; border-radius: var(--r-4); background: var(--c-himmel); }
.fenster__scheibe img { width: 100%; height: 100%; object-fit: cover; }
/* Rechte Scheibe: die blaue Tür (links im Motiv) bleibt immer außerhalb des Ausschnitts.
   Handy: schmale, hohe Scheibe, Ausschnitt ab etwa 45 % der Bildbreite. Ab Tablet ist das Bild
   168 % so breit wie die Scheibe und rechtsbündig, sichtbar sind höchstens die rechten 60 %. */
.fenster__scheibe--schmal img { object-position: 66% 50%; }
@media (min-width: 44rem) {
  .fenster__scheibe--schmal img { width: 168%; max-width: none; margin-left: -68%; object-position: 100% 58%; }
}

/* 5.4 Faktenleiste, überlappt das Fensterband */
.fakten { position: relative; z-index: 2; margin-top: calc(-1 * clamp(1.75rem, 1rem + 3vw, 4.25rem)); }
.fakten__liste {
  list-style: none;
  width: min(100% - 2 * var(--rand) - 2 * clamp(0.75rem, 3vw, 3rem), 74rem); margin-inline: auto;
  background: var(--c-weiss); border-radius: var(--r-3); box-shadow: var(--s-2);
  padding: var(--a-2) clamp(1.1rem, 0.6rem + 2vw, 2.5rem);
  display: grid;
}
.fakten__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--a-5); }
.fakt { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.3rem; align-content: start; padding: 0.95rem 0; }
.fakt:nth-child(n + 3) { border-top: 1px solid var(--c-linie); }
.fakt:nth-child(4) { order: 5; grid-column: 1 / -1; }
/* Ein Muster für alle Fakten: Zahl oder Wort groß, Vorwort und Einheit halbfett auf derselben Grundlinie,
   Erklärung darunter. Handy: Einheit einheitlich in eigener Zeile, Wertblock überall gleich hoch. */
.fakt__wert { display: flex; flex-wrap: wrap; align-items: baseline; align-content: flex-start; column-gap: 0.3em; row-gap: 0.15rem; font-weight: var(--w-normal); line-height: 1.05; min-height: 3.7rem; }
.fakt__einheit { flex-basis: 100%; }
@media (max-width: 43.99rem) { .fakt:nth-child(4) .fakt__wert { min-height: 0; } }
@media (min-width: 44rem) {
  .fakt__einheit { flex-basis: auto; }
  .fakt__wert { min-height: 0; }
}
.fakt__zahl { font-size: var(--t-zahl); font-weight: var(--w-licht); color: var(--c-primaer); letter-spacing: -0.035em; font-variant-numeric: lining-nums tabular-nums; }
.fakt__klein { font-size: 1rem; font-weight: var(--w-fett); color: var(--c-tinte); }
.fakt__wort { font-size: clamp(1.375rem, 0.95rem + 0.95vw, 1.8125rem); font-weight: var(--w-mittel); color: var(--c-primaer); letter-spacing: -0.025em; white-space: nowrap; }
.fakt__text { display: block; font-size: var(--t-s); line-height: 1.4; color: var(--c-tinte-2); }

/* 5.5 Zielgruppen */
.zielgruppen { padding-top: calc(var(--abschnitt) * 0.8); }
.zielgruppen__raster { display: grid; gap: var(--a-6); }
.zielgruppen__kopf .lead { margin-top: var(--a-4); max-width: 30rem; }
.zielgruppen__liste { list-style: none; display: grid; gap: var(--a-3); }
.zielgruppe {
  position: relative; display: flex; flex-direction: column; gap: var(--a-3); align-items: flex-start;
  padding: clamp(1.25rem, 1rem + 1vw, 1.9rem); border-radius: var(--r-3); background: var(--c-himmel);
  transition: background-color 0.15s;
}
.zielgruppe h3 { font-size: var(--t-l); margin-top: var(--a-2); }
.zielgruppe p { color: var(--c-tinte-2); }
.zielgruppe .textlink { margin-top: auto; }
/* Ganze Karte klickbar */
.zielgruppe .textlink::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-3); }
.zielgruppe .textlink:focus-visible { outline: none; }
.zielgruppe .textlink:focus-visible::after { outline: 3px solid var(--c-fokus); outline-offset: 3px; }
.zielgruppe:hover { background: var(--c-himmel-2); }
.zielgruppe:hover .textlink { color: var(--c-primaer-tief); text-decoration: underline; }
/* Handy: 2 × 2 kompakte Kacheln nur mit Piktogramm und Titel, Pfeil als Hinweis auf den Link */
@media (max-width: 39.99rem) {
  .zielgruppen__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  .zielgruppe { gap: 0.55rem; min-height: 8.75rem; padding: 0.95rem 0.95rem 2.6rem; }
  .zielgruppe .pikto { width: 2.5rem; height: 2.5rem; }
  .zielgruppe h3 { font-size: 0.9375rem; line-height: 1.25; margin-top: 0.15rem; text-wrap: wrap; }
  .zielgruppe p { display: none; }
  .zielgruppe .textlink { width: 1px; height: 1px; padding: 0; margin: 0; overflow: hidden; white-space: nowrap; }
  .zielgruppe::after {
    content: ""; position: absolute; right: 0.9rem; bottom: 0.85rem; width: 1.25rem; height: 1.25rem; pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a6e93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13.5M13 6.5l5.5 5.5-5.5 5.5'/%3E%3C/svg%3E") no-repeat center / contain;
  }
}

/* 5.6 Leistungskacheln mit Aussparung */
.kacheln { list-style: none; display: grid; gap: var(--a-3); }
.kachel { position: relative; display: grid; }
.kachel__bild { grid-area: bild; overflow: hidden; background: var(--c-himmel-2); }
.kachel__bild img { width: 100%; height: 100%; object-fit: cover; }
.kachel__titel { grid-area: bild; text-wrap: wrap; }
.kachel__text { grid-area: text; font-size: var(--t-m); line-height: 1.55; color: var(--c-tinte-2); }
.kachel__link {
  grid-area: link; align-self: end; justify-self: start; display: block; padding-block: 0.25rem;
  font-size: var(--t-m); font-weight: var(--w-fett); color: var(--c-primaer); text-decoration: none;
}
.kachel__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-4); }
/* Handy: zweispaltiges Raster aus Fotokacheln 4:5, Titel in der ausgesparten Ecke, ganze Kachel klickbar.
   Beschreibung und Linkzeile stehen auf der Leistungsseite; der Link bleibt für Screenreader im Code. */
@media (max-width: 43.99rem) {
  .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
  .kachel { grid-template-areas: "bild"; }
  .kachel__bild { aspect-ratio: 4 / 5; border-radius: var(--r-3); }
  .kachel__titel {
    align-self: end; justify-self: start; position: relative; z-index: 1;
    max-width: calc(100% - 2.5rem); margin: 0; padding: 0.6rem 0.75rem 0 0;
    font-size: 0.9375rem; line-height: 1.22; background: var(--c-himmel); border-top-right-radius: var(--r-2);
  }
  .kachel__titel::before, .kachel__titel::after {
    content: ""; position: absolute; width: var(--r-2); height: var(--r-2);
    background: radial-gradient(circle at 100% 0, transparent calc(var(--r-2) - 0.5px), var(--c-himmel) var(--r-2));
  }
  .kachel__titel::before { left: 0; bottom: 100%; }
  .kachel__titel::after { left: 100%; bottom: 0; }
  .kachel__text { display: none; }
  .kachel__link { grid-area: bild; align-self: start; width: 1px; height: 1px; padding: 0; overflow: hidden; white-space: nowrap; }
  .kachel__link::after { border-radius: var(--r-3); }
}
.kachel__link:focus-visible { outline: none; }
.kachel__link:focus-visible::after { outline: 3px solid var(--c-fokus); outline-offset: 3px; }
.kachel:hover .kachel__link { color: var(--c-primaer-tief); text-decoration: underline; }
.kachel .ic { transition: transform 0.2s; }
.kachel:hover .ic { transform: translateX(3px); }

/* 5.7 Ablauf (Schritte) */
.schritte { list-style: none; display: grid; gap: 0; }
.schritt { position: relative; display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: var(--a-4); padding-bottom: var(--a-6); }
.schritt:last-child { padding-bottom: 0; }
.schritt::before { content: ""; position: absolute; left: 1.5rem; top: 3.25rem; bottom: 0.25rem; width: 1px; background: var(--c-himmel-2); }
.schritt:last-child::before { display: none; }
.schritt__nr {
  grid-row: span 2; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--c-minze); color: var(--c-tinte); font-weight: var(--w-fett); font-size: var(--t-s); letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.schritt h3 { font-size: var(--t-l); padding-top: 0.6rem; }
.schritt p { color: var(--c-tinte-2); margin-top: var(--a-2); }

/* 5.8 Regeln */
.regeln__raster { display: grid; gap: var(--a-6); }
.regeln__bild { margin-top: var(--a-5); aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-4); }
.regeln__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
.regeln__liste { list-style: none; display: grid; gap: var(--a-5) var(--a-7); }
.regel { position: relative; padding-top: var(--a-5); border-top: 1px solid var(--c-himmel-2); }
.regel::before { content: ""; position: absolute; left: 0; top: -1px; width: 2.25rem; height: 3px; border-radius: 2px; background: var(--c-primaer); }
.regel h3 { font-size: var(--t-l); }
.regel p { margin-top: var(--a-2); color: var(--c-tinte-2); }
.regeln__zusatz {
  display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0.9rem; align-items: start; margin-top: var(--a-6);
  padding: 1.1rem 1.25rem; background: var(--c-weiss); border-radius: var(--r-3); color: var(--c-tinte);
}
.regeln__zusatz .pikto { width: 2.5rem; height: 2.5rem; }

/* 5.9 Tabellen: Karte und Stapel-Tabelle (auf dem Handy je Zeile ein Block) */
.tabelle-karte { background: var(--c-weiss); border: 1px solid var(--c-linie); border-radius: var(--r-3); overflow: hidden; }
.stapeltabelle, .wege { width: 100%; border-collapse: collapse; font-size: var(--t-s); line-height: 1.5; }
.stapeltabelle th, .stapeltabelle td, .wege th, .wege td { text-align: left; vertical-align: top; padding: 1rem 1.25rem; }
.stapeltabelle thead th, .wege thead th { background: var(--c-himmel); font-size: var(--t-xs); font-weight: var(--w-fett); color: var(--c-tinte); letter-spacing: 0.02em; }
.stapeltabelle tbody th, .wege tbody th { font-weight: var(--w-fett); color: var(--c-tinte); }
.stapeltabelle tbody td { color: var(--c-tinte-2); }
.stapeltabelle tbody tr + tr, .wege tbody tr + tr { border-top: 1px solid var(--c-linie); }
@media (max-width: 47.99rem) {
  .stapeltabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .stapeltabelle tr { display: block; padding: 1rem 1.15rem; }
  .stapeltabelle tbody tr + tr { border-top: 1px solid var(--c-linie); }
  .stapeltabelle th, .stapeltabelle td { display: block; padding: 0; }
  .stapeltabelle tbody th { font-size: var(--t-m); margin-bottom: 0.35rem; }
  .stapeltabelle td + td { margin-top: 0.6rem; }
  .stapeltabelle td::before { content: attr(data-spalte); display: block; font-size: var(--t-xs); font-weight: var(--w-fett); color: var(--c-primaer); margin-bottom: 0.1rem; }
}

/* 5.10 Vergleich */
.vergleich__kopf { max-width: 48rem; margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.vergleich__kopf .lead { margin-top: var(--a-4); }
.vergleich__schluss { margin-top: var(--a-5); max-width: 48rem; color: var(--c-tinte-2); }

/* 5.11 Person und Zitat */
.person__raster { display: grid; gap: var(--a-6); align-items: center; }
/* Kennkarte der Inhaberin statt Porträtfoto (kein fremdes Gesicht mit erfundener Identität).
   Fabrik-Standard ohne Foto: .kennkarte ohne .kennkarte__bildplatz. Mit Kundenfoto: Bild in den Bildplatz. */
.kennkarte {
  display: grid; gap: var(--a-4); align-content: start; width: 100%; max-width: 30rem;
  padding: clamp(1.25rem, 0.9rem + 1.5vw, 2rem); background: var(--c-himmel); border-radius: var(--r-4);
}
.flaeche .kennkarte { background: var(--c-weiss); }
.kennkarte__bildplatz {
  display: grid; place-items: center; align-content: center; gap: 0.35rem; aspect-ratio: 16 / 9;
  border: 1.5px dashed var(--c-himmel-2); border-radius: var(--r-3); background: var(--c-weiss);
}
.flaeche .kennkarte__bildplatz { background: var(--c-himmel); border-color: var(--c-himmel-2); }
.kennkarte__initialen {
  display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: 50%;
  background: var(--c-minze-hell); color: var(--c-primaer-tief); font-size: 1.625rem; font-weight: var(--w-licht); letter-spacing: 0.02em;
}
.kennkarte__hinweis { font-size: var(--t-xs); font-weight: var(--w-mittel); color: var(--c-tinte-2); }
.kennkarte__name { margin-top: var(--a-2); font-size: var(--t-xl); font-weight: var(--w-fett); letter-spacing: -0.015em; line-height: 1.2; }
.kennkarte__rolle { margin-top: -0.6rem; color: var(--c-tinte-2); }
.kennkarte__daten { margin: 0; border-top: 1px solid var(--c-himmel-2); }
.flaeche .kennkarte__daten { border-color: var(--c-linie); }
.kennkarte__daten div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--a-4); padding: 0.7rem 0; border-bottom: 1px solid var(--c-himmel-2); }
.flaeche .kennkarte__daten div { border-color: var(--c-linie); }
.kennkarte__daten dt { font-size: var(--t-s); color: var(--c-tinte-2); }
.kennkarte__daten dd { margin: 0; font-weight: var(--w-fett); text-align: right; }
/* Handy und Tablet: Überschrift und Text zuerst, die Kennkarte folgt als kompakte Visitenkarte */
@media (max-width: 59.99rem) {
  .kennkarte { order: 2; }
  .kennkarte__bildplatz { aspect-ratio: auto; display: flex; justify-content: flex-start; gap: 0.9rem; padding: 0.75rem; }
  .kennkarte__initialen { width: 3.5rem; height: 3.5rem; font-size: 1.25rem; }
}
.person__text > p { margin-top: var(--a-4); max-width: 36rem; font-size: var(--t-l); line-height: 1.55; color: var(--c-tinte); }
.zitat { margin: var(--a-6) 0 var(--a-4); max-width: 38rem; padding-left: var(--a-5); border-left: 3px solid var(--c-minze); }
.zitat blockquote { margin: 0; }
.zitat blockquote p { font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem); font-weight: var(--w-licht); line-height: 1.42; letter-spacing: -0.012em; color: var(--c-tinte); }
.zitat figcaption { margin-top: var(--a-3); font-size: var(--t-s); font-weight: var(--w-fett); color: var(--c-tinte); }

/* 5.12 Einsatzgebiet und Skizze */
.gebiet__raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--a-6); align-items: center; }
.gebiet__text .lead { margin-top: var(--a-4); }
.gebiet__tabelle { margin-top: var(--a-5); background: var(--c-weiss); border-radius: var(--r-3); overflow: hidden; }
.gebiet__tabelle thead th { background: var(--c-himmel-2); }
.gebiet__knopf { margin-top: var(--a-5); text-align: left; }
.gebiet__grenze { margin-top: var(--a-4); font-size: var(--t-s); color: var(--c-tinte-2); max-width: 36rem; }
.skizze { max-width: 30rem; width: 100%; justify-self: center; }
.skizze svg { width: 100%; height: auto; overflow: hidden; }
.skizze figcaption { margin-top: var(--a-2); font-size: var(--t-xs); color: var(--c-tinte-2); text-align: center; }
.skizze__elbe { fill: none; stroke: var(--c-himmel-2); stroke-width: 24; stroke-linecap: round; }
.gebiet--kurz .skizze__elbe, .flaeche .skizze__elbe { stroke: #c7e0e8; }
.skizze__umland { fill: none; stroke: var(--c-primaer); stroke-width: 1.5; stroke-dasharray: 4 6; }
.skizze__bezirk { fill: var(--c-weiss); stroke: var(--c-primaer); stroke-width: 1.5; }
.skizze__bezirk--sitz { fill: var(--c-minze-hell); }
.skizze__name { font: 600 17px var(--f-sans); fill: var(--c-tinte); letter-spacing: -0.01em; }
.skizze__klein { font: 500 14px var(--f-sans); fill: var(--c-tinte-2); }
.skizze__klein--sitz { font-weight: 650; fill: var(--c-primaer-tief); }
.skizze__elbname { font: 500 14px var(--f-sans); fill: var(--c-tinte-2); letter-spacing: 0.04em; }
/* Die Skizze wird auf dem Handy auf rund 60 % verkleinert: Schrift in SVG-Einheiten anheben */
@media (max-width: 40rem) {
  .skizze__name { font-size: 19px; }
  .skizze__klein, .skizze__elbname { font-size: 17.5px; }
}
.skizze__punkt { fill: var(--c-primaer); }
.skizze__punkt-ring { fill: var(--c-primaer); fill-opacity: 0.18; }

/* 5.13 Jobs-Band */
.jobs__band {
  display: grid; gap: var(--a-5); padding: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  background: var(--c-minze-hell); border-radius: var(--r-5);
}
.jobs__text > p { color: var(--c-tinte); max-width: 42rem; }
.jobs__handlung { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-3) var(--a-5); margin-top: var(--a-5); }
.jobs__handlung p { color: var(--c-tinte-2); font-size: var(--t-s); }

/* 5.14 Häufige Fragen */
.fragen__raster { display: grid; gap: var(--a-5); }
.fragen__liste { border-top: 1px solid var(--c-linie); }
.frage { border-bottom: 1px solid var(--c-linie); }
.frage summary, .mehr summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--a-4);
  min-height: 3.5rem; padding: 1.05rem 0; cursor: pointer;
  font-size: var(--t-l); font-weight: var(--w-mittel); line-height: 1.35; letter-spacing: -0.01em;
}
.frage summary::-webkit-details-marker, .mehr summary::-webkit-details-marker { display: none; }
.frage summary:hover { color: var(--c-primaer-tief); }
.frage__zeichen {
  flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--c-himmel); color: var(--c-primaer); transition: transform 0.2s, background-color 0.2s;
}
.frage__zeichen .ic { width: 1.15rem; height: 1.15rem; stroke-width: 2.2; }
.frage[open] .frage__zeichen, .mehr[open] .frage__zeichen { transform: rotate(45deg); background: var(--c-minze); color: var(--c-tinte); }
.frage p { padding: 0 3.25rem 1.4rem 0; color: var(--c-tinte-2); max-width: 44rem; }

/* 5.15 Handlungsaufforderung */
.aufruf { padding-block: calc(var(--abschnitt) * 0.5); }
.aufruf__tafel {
  position: relative; overflow: hidden;
  width: min(100% - 2 * var(--rand-flaeche), var(--huelle-flaeche)); margin-inline: auto;
  display: grid; gap: var(--a-6);
  padding: clamp(2.25rem, 1rem + 5vw, 5.5rem) max(var(--rand), calc((100% - var(--huelle)) / 2 - var(--rand-flaeche)));
  background: var(--c-primaer); color: var(--c-primaer-text); border-radius: var(--r-5);
}
/* Die Elbe-Linie aus der Bezirksskizze läuft als ruhiges Band im unteren Rand der Tafel.
   Deckkraft 6 %: auch wo sie hinter Text liegt, bleibt Primär-Text auf der Tafel über 4,5 : 1 */
.aufruf__tafel::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: clamp(4rem, 2rem + 6vw, 8rem); pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 220' preserveAspectRatio='none'%3E%3Cpath d='M-40 204 C 300 184, 600 198, 900 172 S 1250 132, 1440 122' fill='none' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='24' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat center bottom / 100% 100%;
}
.aufruf__text, .aufruf__handlung { position: relative; }
.aufruf h2 { color: #fff; font-weight: var(--w-licht); font-size: clamp(2rem, 1.3rem + 2.6vw, 3.375rem); letter-spacing: -0.03em; }
.aufruf__text p { margin-top: var(--a-4); max-width: 34rem; }
.aufruf .knoepfe { margin-top: 0; display: grid; grid-template-columns: minmax(0, 23rem); }
.aufruf .knoepfe .knopf { width: 100%; }
.aufruf :focus-visible { outline-color: #fff; }
.aufruf__zeit { display: flex; align-items: center; gap: 0.5rem; margin-top: var(--a-4); font-size: var(--t-s); }

/* 5.16 Seitenkopf der Unterseiten */
.seitenkopf { padding-top: clamp(1.25rem, 0.8rem + 2vw, 3rem); padding-bottom: calc(var(--abschnitt) * 0.5); }
.seitenkopf__raster { display: grid; gap: var(--a-6); align-items: center; }
.seitenkopf h1 .betont { font-weight: 600; }
.seitenkopf .lead { margin-top: var(--a-5); max-width: 36rem; }
.seitenkopf__bild { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-4); background: var(--c-himmel); }
.seitenkopf__bild img { width: 100%; height: 100%; object-fit: cover; }
.seitenkopf--schmal { padding-bottom: var(--a-6); }
.seitenkopf__lead { max-width: 44rem; }
/* Hinweiskarte der Platzhalter-Leistungsseiten (Werkstatt): Seite folgt im Kundenbau */
.folgt__karte {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--a-4) var(--a-5); align-items: start;
  max-width: 48rem; padding: clamp(1.25rem, 0.9rem + 1.6vw, 2.25rem);
  background: var(--c-himmel); border-radius: var(--r-4);
}
.folgt__pikto { width: 2.75rem; height: 2.75rem; }
.folgt h2 { font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem); line-height: 1.2; }
.folgt .textlink { margin-top: var(--a-3); }
.kurzpunkte { list-style: none; display: flex; flex-wrap: wrap; gap: var(--a-2); margin-top: var(--a-6); }
.kurzpunkte li {
  display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 0.95rem 0.5rem 0.7rem;
  border-radius: var(--r-rund); background: var(--c-minze-hell); font-size: var(--t-s); font-weight: var(--w-mittel);
}
.kurzpunkte .ic { color: var(--c-primaer); stroke-width: 2.4; width: 1.1rem; height: 1.1rem; }

/* 5.17 Zweispalter, Zwilling */
.spalt__raster { display: grid; gap: var(--a-5); }
.spalt__text .textlink { margin-top: var(--a-3); }
.spalt__text > p:not(.lead) { color: var(--c-tinte-2); }
.zwilling { display: grid; gap: var(--a-7); }
.zwilling > section > h2, .zwilling > section > p { max-width: 36rem; }
.zwilling h2 { font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem); margin-bottom: var(--a-4); }
.zwilling p { color: var(--c-tinte-2); }
.zwilling .haken { margin-block: var(--a-4); }

/* 5.18 Leistungsverzeichnis als Checklisten-Karten */
.verzeichnis__kopf { max-width: 46rem; margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.verzeichnis__kopf .lead { margin-top: var(--a-4); }
.verzeichnis__karten { display: grid; gap: var(--a-3); }
.liste-karte { background: var(--c-weiss); border-radius: var(--r-3); padding: clamp(1.25rem, 1rem + 1vw, 2rem); }
.liste-karte h3 { font-size: var(--t-l); margin: var(--a-3) 0 var(--a-4); }
.liste-karte .haken { font-size: var(--t-s); line-height: 1.5; gap: 0.7rem; }
.takt { display: inline-flex; align-items: center; gap: 5px; }
.takt i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--c-primaer); }
.takt i.an { background: var(--c-primaer); }
/* Im Leistungsverzeichnis: fünf Werktage mit Legende „Mo Di Mi Do Fr“ unter der ersten Reihe */
.liste-karte__takt { display: grid; gap: 0.3rem; align-content: start; min-height: 1.9rem; }
.liste-karte__takt .takt, .takt__legende { display: grid; grid-template-columns: repeat(5, 1.625rem); justify-items: center; gap: 0; }
.takt__legende { font-size: var(--t-xs); font-weight: var(--w-mittel); line-height: 1; color: var(--c-tinte-2); }
/* Monat: vier Wochen als Balken, einer gefüllt */
.liste-karte__takt .takt--wochen { grid-template-columns: repeat(4, 2.03rem); }
.takt--wochen i { width: 1.625rem; height: 10px; border-radius: 5px; }
.verzeichnis__fuss { margin-top: var(--a-6); display: grid; gap: var(--a-3); }
.verzeichnis__fuss p { color: var(--c-tinte-2); max-width: 44rem; }
.verzeichnis__fuss .linkreihe { margin-top: 0; }

/* 5.19 Intervalle */
.intervalle__liste { list-style: none; margin-block: var(--a-5); border-top: 1px solid var(--c-linie); }
.intervalle__liste li { display: grid; grid-template-columns: 5.25rem minmax(0, 1fr); gap: var(--a-4); padding: 1rem 0; border-bottom: 1px solid var(--c-linie); align-items: baseline; }
.intervalle__liste p { color: var(--c-tinte); }

/* 5.20 Tuchfarben */
.arbeitsweise__raster { display: grid; gap: var(--a-6); align-items: center; }
.arbeitsweise__text h2 { margin-bottom: var(--a-5); }
.arbeitsweise__text p { color: var(--c-tinte); max-width: 36rem; }
.tuecher { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a-3); }
.tuch {
  display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 0.15rem; align-items: center; align-content: start;
  padding: 1rem; background: var(--c-weiss); border-radius: var(--r-3);
}
/* Tuch-Piktogramm aus der eigenen Familie: Linie Petrol, Tuchfarbe gedämpft als Füllung */
.tuch__farbe { width: 2.5rem; height: 2.5rem; margin-bottom: 0.5rem; }
.tuch__farbe .tuch__f { fill: var(--tuch); stroke: none; }
.tuch--rot { --tuch: #f0b3ab; }
.tuch--gelb { --tuch: #f4d98b; }
.tuch--blau { --tuch: #aac4ec; }
.tuch--gruen { --tuch: #a9dcbd; }
.tuch__name { font-weight: var(--w-fett); line-height: 1.2; }
.tuch__wo { font-size: var(--t-s); color: var(--c-tinte-2); line-height: 1.3; }

/* 5.21 Schlüssel */
.schluessel__raster { display: grid; gap: var(--a-6); }
.schluessel__zeichen { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--c-weiss); color: var(--c-primaer); margin-bottom: var(--a-5); }
.schluessel__zeichen .ic { width: 2.25rem; height: 2.25rem; stroke-width: 1.5; }
.schluessel__kopf .lead { margin-top: var(--a-4); max-width: 30rem; color: var(--c-tinte); }
.schluessel .haken { gap: 0; align-content: start; }
.schluessel .haken li { padding-block: var(--a-4); border-top: 1px solid var(--c-himmel-2); }
@media (min-width: 48rem) {
  .schluessel .haken { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--a-6); }
}
@media (min-width: 60rem) {
  .schluessel__zeichen { width: 7rem; height: 7rem; }
  .schluessel__zeichen .ic { width: 3.5rem; height: 3.5rem; stroke-width: 1.2; }
}

/* 5.23 Tagesleiste Reinigungszeiten */
.zeiten__raster { display: grid; gap: var(--a-6); align-items: center; }
.zeiten__raster p { color: var(--c-tinte-2); max-width: 38rem; }
.zeiten__raster h2 { margin-bottom: var(--a-4); }
.tag { padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); background: var(--c-himmel); border-radius: var(--r-4); }
.tag__marken { position: relative; height: 1.5rem; margin-bottom: 0.4rem; }
.tag__marken span { position: absolute; left: calc((var(--von) + var(--bis)) / 2 / 24 * 100%); transform: translateX(-50%); font-size: var(--t-xs); font-weight: var(--w-fett); color: var(--c-primaer-tief); white-space: nowrap; }
.tag__leiste { position: relative; height: 3rem; background: var(--c-weiss); border-radius: var(--r-rund); overflow: hidden; }
.tag__teams, .tag__fenster { position: absolute; top: 0; bottom: 0; left: calc(var(--von) / 24 * 100%); width: calc((var(--bis) - var(--von)) / 24 * 100%); }
.tag__teams { background: var(--c-himmel-2); }
.tag__fenster { background: var(--c-primaer); }
.tag__wunsch {
  position: absolute; top: 0; bottom: 0; left: calc(8 / 24 * 100%); width: calc(9 / 24 * 100%);
  display: grid; place-items: center; padding-inline: 0.3rem; text-align: center;
  font-size: 0.75rem; font-weight: var(--w-mittel); line-height: 1.1; color: var(--c-tinte-2);
}
.tag__skala { position: relative; height: 1.5rem; margin-top: 0.5rem; }
.tag__skala span { position: absolute; left: calc(var(--bei) / 24 * 100%); transform: translateX(-50%); font-size: var(--t-xs); color: var(--c-tinte-2); white-space: nowrap; }
.tag__skala span:first-child { transform: none; }
@media (min-width: 60rem) {
  .tag__wunsch { font-size: var(--t-xs); }
  .tag__skala span, .tag__marken span { font-size: var(--t-s); }
}

/* 5.24 Material: Zweispalter aus Text und kurzer Haken-Liste */
.material__raster { display: grid; gap: var(--a-5) var(--a-8); align-items: start; }
.material__raster h2 { margin-bottom: var(--a-4); }
.material__raster .lead { color: var(--c-tinte); max-width: 30rem; }
.material__liste { gap: 0; }
.material__liste li { padding-block: var(--a-4); border-top: 1px solid var(--c-linie); }
.material__liste li:last-child { border-bottom: 1px solid var(--c-linie); }

/* 5.25 Preis: Handy als ruhige Liste mit Haarlinien und Minzpunkt, ab Tablet als Pillen */
.preis__liste { list-style: none; margin-block: var(--a-2) var(--a-5); border-top: 1px solid var(--c-linie); }
.preis__liste li { position: relative; padding: 0.8rem 0 0.8rem 1.5rem; border-bottom: 1px solid var(--c-linie); color: var(--c-tinte); }
.preis__liste li::before { content: ""; position: absolute; left: 0.15rem; top: 1.3rem; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--c-minze); box-shadow: 0 0 0 3px var(--c-minze-hell); }
@media (min-width: 40rem) {
  .preis__liste { display: flex; flex-wrap: wrap; gap: var(--a-2); border-top: 0; }
  .preis__liste li { padding: 0.5rem 0.95rem; border: 1px solid var(--c-himmel-2); border-radius: var(--r-rund); background: var(--c-himmel); font-size: var(--t-s); white-space: nowrap; }
  .preis__liste li::before { display: none; }
}
.zwilling .preis__fest { padding: 1.25rem 1.5rem; background: var(--c-minze-hell); border-radius: var(--r-3); color: var(--c-tinte); max-width: none; }

/* 5.26 Weiterführende Links als Karten */
.linkkarten { list-style: none; display: grid; gap: var(--a-3); }
.linkkarten a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--a-4); min-height: 4.5rem; height: 100%;
  padding: 1.1rem 1.4rem; background: var(--c-weiss); border-radius: var(--r-3);
  color: var(--c-tinte); font-weight: var(--w-mittel); line-height: 1.4; text-decoration: none;
}
.linkkarten a .ic { color: var(--c-primaer); transition: transform 0.2s; }
.linkkarten a:hover { color: var(--c-primaer-tief); }
.linkkarten a:hover .ic { transform: translateX(3px); }
.weitere__gebiet { display: flex; align-items: center; gap: 0.6rem; margin-top: var(--a-5); color: var(--c-tinte-2); }
.weitere__gebiet .ic { color: var(--c-primaer); }

/* 5.27 Ortsseite */
.objekte__raster { display: grid; gap: var(--a-6); }
.objekte__kopf .lead { margin-top: var(--a-4); }
.zustaendig {
  display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: 0.9rem; align-items: center; margin-top: var(--a-5);
  padding: 1rem 1.25rem; background: var(--c-minze-hell); border-radius: var(--r-3); font-size: var(--t-s); color: var(--c-tinte);
}
.zustaendig .ic { width: 2.75rem; height: 2.75rem; padding: 0.6rem; border-radius: 50%; background: var(--c-weiss); color: var(--c-primaer); stroke-width: 1.7; }
.objekte__liste { list-style: none; border-top: 1px solid var(--c-linie); }
.objekte__liste li { position: relative; padding: 1.1rem 0 1.1rem 1.9rem; border-bottom: 1px solid var(--c-linie); }
.objekte__liste li::before { content: ""; position: absolute; left: 0.2rem; top: 1.65rem; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--c-minze); box-shadow: 0 0 0 3px var(--c-minze-hell); }
.bezirk__raster { display: grid; gap: var(--a-5); }
.bezirk__text { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-weight: var(--w-licht); line-height: 1.45; letter-spacing: -0.01em; color: var(--c-tinte); }
.stadtteile__raster { display: grid; gap: var(--a-5); }
.stadtteile__bild { aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-4); }
.stadtteile__bild img { width: 100%; height: 100%; object-fit: cover; }
.stadtteile__grenze { margin-top: var(--a-4); font-size: var(--t-s); color: var(--c-tinte-2); }
.hinweiskarten { list-style: none; display: grid; gap: var(--a-3); }
.hinweiskarten li { padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); background: var(--c-weiss); border-radius: var(--r-3); }
.hinweiskarten p { color: var(--c-tinte-2); }
.hinweiskarten strong { color: var(--c-tinte); }
.anfahrt__raster { display: grid; gap: var(--a-6); align-items: start; }
.anfahrt__raster h2 { margin-bottom: var(--a-4); }
.anfahrt__raster p { color: var(--c-tinte-2); }
.wege td { color: var(--c-tinte-2); }
.wege td:nth-child(2) { min-width: 6.5rem; }
.wege__balken { display: block; width: calc(var(--km) / 7 * 100%); height: 0.375rem; margin-top: 0.4rem; border-radius: var(--r-rund); background: var(--c-minze); }
.wege td { white-space: nowrap; }
/* Handy: Stapeltabelle wie die übrigen Tabellen, je Stadtteil ein Block mit zwei Werten nebeneinander */
@media (max-width: 39.99rem) {
  .wege thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .wege tr { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); column-gap: var(--a-4); row-gap: 0.4rem; padding: 0.95rem 1.15rem; }
  .wege th, .wege td { display: block; padding: 0; }
  .wege tbody th { grid-column: 1 / -1; font-size: var(--t-m); }
  .wege td::before { content: attr(data-spalte); display: block; font-size: var(--t-xs); font-weight: var(--w-fett); color: var(--c-primaer); white-space: normal; line-height: 1.3; margin-bottom: 0.1rem; }
  .wege td:nth-child(2) { min-width: 0; }
}

/* 5.28 Über uns */
.jahre { list-style: none; display: grid; gap: 0; }
.jahr { position: relative; padding: 0 0 var(--a-6) 2.25rem; }
.jahr::before { content: ""; position: absolute; left: 0.3rem; top: 0.9rem; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: var(--c-primaer); box-shadow: 0 0 0 4px var(--c-weiss), 0 0 0 5px var(--c-himmel-2); }
.jahr::after { content: ""; position: absolute; left: 0.69rem; top: 2rem; bottom: 0; width: 1px; background: var(--c-himmel-2); }
.jahr:last-child { padding-bottom: 0; }
.jahr:last-child::after { display: none; }
.jahr--heute::before { background: var(--c-minze); }
.jahr__zahl { display: block; font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); font-weight: var(--w-licht); color: var(--c-primaer); letter-spacing: -0.03em; line-height: 1.2; margin-bottom: 0.35rem; }
.jahr--heute .jahr__zahl { font-weight: 600; color: var(--c-tinte); }
.jahr p { color: var(--c-tinte-2); }
.team__kopf { display: grid; gap: var(--a-4); margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.team__zahlen { list-style: none; display: grid; gap: var(--a-3); }
/* Ab 360 px zweispaltig, die Karte mit den beiden Objektleitungen über die volle Breite */
@media (min-width: 22.5rem) and (max-width: 59.99rem) {
  .team__zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team__eintrag--breit { grid-column: 1 / -1; }
}
@media (min-width: 22.5rem) and (max-width: 39.99rem) {
  .team__eintrag { padding: 1rem 1.05rem 1.1rem; }
  .team__was { font-size: var(--t-s); line-height: 1.45; }
}
.team__eintrag { display: flex; flex-direction: column; gap: 0.35rem; padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); background: var(--c-himmel); border-radius: var(--r-3); }
.team__zahl { font-size: clamp(2.5rem, 2rem + 2vw, 3.75rem); font-weight: var(--w-licht); line-height: 1; color: var(--c-primaer); letter-spacing: -0.04em; }
.team__was { color: var(--c-tinte); }
.team__schluss { margin-top: var(--a-5); color: var(--c-tinte-2); max-width: 48rem; }
.angaben__raster { display: grid; gap: var(--a-5); }
.angaben__liste { margin: 0; border-top: 1px solid var(--c-linie); }
.angaben__liste div { display: grid; gap: 0.2rem; padding: 1rem 0; border-bottom: 1px solid var(--c-linie); }
.angaben__liste dt { font-weight: var(--w-fett); }
.angaben__liste dd { margin: 0; color: var(--c-tinte-2); }

/* 5.29 Kontakt und Formular */
.kontakt__raster { display: grid; gap: var(--a-5); padding-bottom: calc(var(--abschnitt) * 0.5); }
.formular-karte { padding: clamp(1.25rem, 0.9rem + 2vw, 2.75rem); border: 1px solid var(--c-linie); border-radius: var(--r-4); box-shadow: var(--s-2); background: var(--c-weiss); }
.formular-karte h2 { font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem); margin-bottom: var(--a-5); }
.formular { display: grid; gap: 1.35rem; }
.feld label, .kacheln-wahl legend, .pillen-wahl legend { display: block; margin-bottom: 0.45rem; font-weight: var(--w-fett); line-height: 1.35; }
.optional { font-weight: var(--w-normal); color: var(--c-tinte-2); }
.feld input, .feld select, .feld textarea {
  display: block; width: 100%; min-height: 3.125rem; padding: 0.75rem 1rem;
  font: inherit; font-size: var(--t-m); color: var(--c-tinte); background: var(--c-weiss);
  border: 1.5px solid var(--c-rand); border-radius: 0.8rem;
}
.feld textarea { min-height: 8.5rem; resize: vertical; line-height: 1.5; }
.feld select {
  appearance: none; padding-right: 2.75rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f2530' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.9rem center; background-size: 1.25rem;
}
.feld input:hover, .feld select:hover, .feld textarea:hover { border-color: var(--c-tinte-2); }
.feld input:focus-visible, .feld select:focus-visible, .feld textarea:focus-visible { border-color: var(--c-primaer); outline-offset: 1px; border-radius: 0.8rem; }
.feld--kurz input { max-width: 12rem; }
.feld__hilfe { margin-top: 0.4rem; font-size: var(--t-s); color: var(--c-tinte-2); }
.feldpaar { display: grid; gap: 1.1rem; }
.feldpaar__hilfe { margin-top: -0.6rem; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
.kacheln-wahl__reihe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.wahl { position: relative; display: block; }
.wahl:last-child { grid-column: 1 / -1; }
.wahl:last-child .wahl__flaeche { flex-direction: row; align-items: center; justify-content: flex-start; min-height: 3.5rem; }
.wahl input, .pille-wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wahl__flaeche {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 0.6rem; height: 100%; min-height: 6rem;
  padding: 0.85rem 0.95rem; border: 1.5px solid var(--c-rand); border-radius: 1rem; cursor: pointer; background: var(--c-weiss);
  font-size: var(--t-s); font-weight: var(--w-mittel); line-height: 1.3;
  transition: border-color 0.15s, background-color 0.15s;
}
.wahl__flaeche .pikto { width: 2.25rem; height: 2.25rem; }
.wahl:hover .wahl__flaeche { border-color: var(--c-tinte-2); }
.wahl input:checked + .wahl__flaeche { border-color: var(--c-primaer); background: var(--c-minze-hell); box-shadow: inset 0 0 0 1px var(--c-primaer); }
.wahl input:focus-visible + .wahl__flaeche, .pille-wahl input:focus-visible + span { outline: 3px solid var(--c-fokus); outline-offset: 3px; }
.mehr { border-block: 1px solid var(--c-linie); }
.mehr summary { font-size: var(--t-m); font-weight: var(--w-fett); min-height: 3.25rem; padding: 0.75rem 0; }
.mehr__inhalt { display: grid; gap: 1.35rem; padding: var(--a-2) 0 var(--a-5); }
.pillen-wahl__reihe { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pille-wahl { position: relative; }
.pille-wahl span {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.5rem 1.15rem; cursor: pointer;
  border: 1.5px solid var(--c-rand); border-radius: var(--r-rund); font-size: var(--t-s); font-weight: var(--w-mittel);
}
.pille-wahl input:checked + span { background: var(--c-primaer); border-color: var(--c-primaer); color: #fff; }
.formular__hinweis { font-size: var(--t-s); color: var(--c-tinte-2); max-width: 40rem; }
.formular .knopf { justify-self: start; }
.kontakt__seite { display: grid; gap: var(--a-4); align-content: start; }
.direkt-karte { padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); background: var(--c-himmel); border-radius: var(--r-4); }
.direkt-karte h2, .anfahrt-karte h2 { font-size: clamp(1.5rem, 1.25rem + 0.9vw, 1.875rem); margin-bottom: var(--a-4); }
.direkt { margin: 0; display: grid; }
.direkt__zeile { padding: 0.85rem 0; border-top: 1px solid var(--c-himmel-2); }
.direkt__zeile:first-child { border-top: 0; padding-top: 0; }
.direkt dt { display: flex; align-items: center; gap: 0.5rem; font-size: var(--t-s); font-weight: var(--w-mittel); color: var(--c-tinte-2); }
.direkt dt .ic { color: var(--c-primaer); width: 1.1rem; height: 1.1rem; }
.direkt dd { margin: 0.2rem 0 0 1.6rem; font-weight: var(--w-mittel); overflow-wrap: anywhere; }
.direkt__nummer { display: inline-block; font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem); font-weight: 600; letter-spacing: -0.02em; text-decoration: none; padding-block: 0.1rem; }
.direkt__jobs { margin-top: var(--a-4); font-size: var(--t-s); color: var(--c-tinte-2); overflow-wrap: anywhere; }
.anfahrt-karte { padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); border: 1px solid var(--c-linie); border-radius: var(--r-4); }
.anfahrt-karte p { color: var(--c-tinte-2); }
.anfahrt-karte .textlink { margin-top: var(--a-3); }
.anfahrt-karte__hinweis { margin-top: var(--a-2); font-size: var(--t-s); }

/* 5.30 Fuß */
.fuss {
  margin-top: calc(var(--abschnitt) * 0.25); padding-top: clamp(3rem, 2rem + 3vw, 5rem);
  background: var(--c-nacht); color: var(--c-nacht-hell); border-radius: var(--r-5) var(--r-5) 0 0;
  font-size: var(--t-s); line-height: 1.7;
}
.fuss a { color: #fff; text-decoration-color: rgb(255 255 255 / 0.4); }
.fuss a:hover { color: #fff; text-decoration-color: #fff; }
.fuss :focus-visible { outline-color: var(--c-minze); }
.fuss__raster { display: grid; gap: var(--a-6); }
.fuss__marke { display: flex; gap: 0.28em; align-items: baseline; font-size: 1.375rem; color: #fff; letter-spacing: -0.025em; margin-bottom: var(--a-4); }
.fuss__marke .marke__eins { font-weight: 660; }
.fuss__marke .marke__zwei { color: var(--c-minze); font-weight: var(--w-licht); }
.fuss__zeit { margin-top: var(--a-3); color: var(--c-nacht-text); }
.fuss__titel { font-size: var(--t-xs); font-weight: var(--w-fett); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-nacht-text); margin-bottom: var(--a-3); }
.fuss__liste { list-style: none; display: grid; gap: 0.15rem; }
.fuss__liste a { display: inline-block; padding-block: 0.2rem; text-decoration: none; }
.fuss__liste a:hover { text-decoration: underline; }
.fuss__notiz { color: var(--c-nacht-text); padding-top: 0.3rem; }
.fuss__schluss {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--a-2) var(--a-6);
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); padding: var(--a-5) 0 var(--a-6);
  border-top: 1px solid rgb(255 255 255 / 0.14); color: var(--c-nacht-text); font-size: var(--t-xs);
}
.fuss__schluss p + p { margin-top: 0; }

/* 6 · Daumenleiste Handy (Anrufen und Anfrage) */
.daumen {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 0.6rem;
  padding: 0.6rem var(--rand) calc(0.6rem + env(safe-area-inset-bottom));
  background: rgb(255 255 255 / 0.97); border-top: 1px solid var(--c-linie); box-shadow: 0 -10px 28px -18px rgb(15 37 48 / 0.35);
}
.daumen .knopf { min-height: 3rem; padding-inline: 0.9rem; }
/* Platz für die Leiste: der dunkle Fuß läuft unter ihr weiter, kein weißer Streifen am Seitenende */
.fuss { padding-bottom: calc(4.25rem + env(safe-area-inset-bottom)); }

/* ---------- Breakpoints ---------- */
@media (max-width: 32.49rem) {
  .knoepfe { flex-direction: column; align-items: stretch; }
  .knoepfe .knopf { width: 100%; }
}
@media (min-width: 30rem) {
  .menue__leistungen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kacheln-wahl__reihe { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wahl:last-child { grid-column: auto; }
  .wahl:last-child .wahl__flaeche { flex-direction: column; align-items: flex-start; justify-content: space-between; min-height: 6rem; }
}
@media (min-width: 40rem) {
  .zielgruppen__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .regeln__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .linkkarten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hinweiskarten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feldpaar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feldpaar__hilfe { grid-column: 1 / -1; }
  .fuss__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .angaben__liste div { grid-template-columns: 12rem minmax(0, 1fr); gap: var(--a-4); }
  .fakten__liste { column-gap: var(--a-6); }
}
@media (min-width: 44rem) {
  .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a-7) var(--a-5); }
  .kachel { grid-template-columns: minmax(0, 1fr); grid-template-areas: "bild" "text" "link"; grid-template-rows: auto auto 1fr; }
  .kachel__bild { align-self: stretch; aspect-ratio: 4 / 3; border-radius: var(--r-4); }
  .kachel__titel {
    grid-area: bild; align-self: end; justify-self: start; position: relative; z-index: 1;
    max-width: calc(100% - 3rem); margin: 0; padding: 0.95rem 1.35rem 0 0;
    font-size: var(--t-xl); background: var(--c-himmel); border-top-right-radius: var(--r-3);
  }
  .kachel__titel::before, .kachel__titel::after {
    content: ""; position: absolute; width: var(--r-3); height: var(--r-3);
    background: radial-gradient(circle at 100% 0, transparent calc(var(--r-3) - 0.5px), var(--c-himmel) var(--r-3));
  }
  .kachel__titel::before { left: 0; bottom: 100%; }
  .kachel__titel::after { left: 100%; bottom: 0; }
  .kachel__text { margin-top: 0.7rem; }
  .kachel__link { margin-top: 0.75rem; }
  .jobs__band { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--a-6); align-items: start; }
  .verzeichnis__karten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .verzeichnis__karten .liste-karte:first-child { grid-row: span 2; }
}
@media (min-width: 48rem) {
  .stapeltabelle tbody th { width: 24%; }
  .vergleich__tabelle td { width: 38%; }
  .stapeltabelle th, .stapeltabelle td { padding: 1.1rem 1.5rem; }
  .gebiet__tabelle th, .gebiet__tabelle td { padding: 0.95rem 1.2rem; }
  .schritte--quer { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a-6) var(--a-6); }
  .schritte--quer .schritt { padding-bottom: 0; }
  .schritte--quer .schritt::before { display: none; }
  .schritte--fuenf { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tuecher { gap: var(--a-4); }
  .tuch { grid-template-columns: auto minmax(0, 1fr); column-gap: 0.9rem; padding: 1.25rem; }
  .tuch__farbe { grid-row: span 2; width: 2.75rem; height: 2.75rem; margin-bottom: 0; }
}
@media (min-width: 60rem) {
  /* Erster Bildschirm am Desktop: Überschrift, Fensterband und Faktenkarte zusammen,
     auch auf dem Notebook mit 1366 × 768. Das Band richtet seine Höhe nach der Fensterhöhe. */
  .held { padding-top: clamp(2rem, 0.5rem + 3vw, 3.5rem); }
  .held__titel { font-size: clamp(2.125rem, 1.15rem + 3.6vw, 4.25rem); }
  .held__kopf { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--a-7); align-items: end; }
  .held__text { padding-bottom: 0.35rem; }
  .held .knoepfe { margin-top: var(--a-5); }
  .fenster {
    margin-top: clamp(1.5rem, 0.5rem + 2.5vw, 3rem);
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.38fr);
    height: min(clamp(15.5rem, 7rem + 34vw, 37rem), max(16rem, calc(100vh - 30.5rem)));
  }
  .zielgruppen__raster { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--a-7); align-items: start; }
  .zielgruppen__kopf { position: sticky; top: 7rem; }
  .schritte--quer { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--a-5); }
  .schritte--quer .schritt { display: block; }
  .schritte--quer .schritt::before { display: block; left: 3.75rem; right: -0.5rem; top: 1.5rem; bottom: auto; width: auto; height: 1px; }
  .schritte--quer .schritt:last-child::before { display: none; }
  .schritte--quer .schritt h3 { padding-top: var(--a-5); }
  .schritte--fuenf { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--a-5); }
  .regeln__raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--a-8); align-items: start; }
  .regeln__kopf { position: sticky; top: 7rem; }
  .regeln__bild { aspect-ratio: 4 / 5; max-height: 30rem; }
  .person__raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--a-8); }
  .gebiet__raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--a-8); }
  .fragen__raster { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--a-7); align-items: start; }
  .fragen__raster > h2 { position: sticky; top: 7rem; }
  .aufruf__tafel { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; column-gap: var(--a-7); }
  .seitenkopf__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--a-8); }
  .seitenkopf__raster--hoch { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .seitenkopf__bild--hoch { aspect-ratio: 4 / 5; max-height: 36rem; justify-self: end; width: 100%; }
  .spalt__raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--a-8); }
  .verzeichnis__karten { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a-4); }
  .verzeichnis__karten .liste-karte:first-child { grid-row: auto; }
  .verzeichnis__fuss { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--a-6); }
  .zwilling { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a-8); align-items: start; }
  .arbeitsweise__raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--a-8); }
  .schluessel__raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--a-8); align-items: start; }
  .zeiten__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--a-8); }
  .material__raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--a-8); }
  .objekte__raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--a-8); align-items: start; }
  .objekte__kopf { position: sticky; top: 7rem; }
  .bezirk__raster { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--a-7); }
  .stadtteile__raster { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--a-6); align-items: start; }
  .stadtteile__bild { aspect-ratio: 3 / 4; position: sticky; top: 7rem; }
  .anfahrt__raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--a-8); }
  .jahre { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--a-5); }
  .jahr { padding: 2.25rem 0 0; }
  .jahr::before { left: 0; top: 0; }
  .jahr::after { left: 1.6rem; right: calc(-1 * var(--a-5)); top: 0.4rem; bottom: auto; width: auto; height: 1px; }
  .team__kopf { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--a-8); align-items: end; }
  .team__zahlen { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--a-4); }
  .team__eintrag { grid-column: span 2; }
  .team__eintrag:nth-child(4), .team__eintrag:nth-child(5) { grid-column: span 3; }
  .angaben__raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--a-8); }
  .kontakt__raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--a-6); align-items: start; }
  .kontakt__seite { position: sticky; top: 7rem; }
  .fuss__raster { grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 68rem) {
  .kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a-7) var(--a-5); }
  .linkkarten--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hinweiskarten { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .hinweiskarten li { grid-column: span 2; }
  .hinweiskarten li:nth-child(4), .hinweiskarten li:nth-child(5) { grid-column: span 3; }
  /* Desktop-Kopf */
  .kopf { position: sticky; top: 0; }
  [id] { scroll-margin-top: 6.5rem; }
  .kopf__zeile { min-height: 5rem; gap: var(--a-5); }
  .marke { font-size: 1.4375rem; line-height: 1; }
  .marke__name { flex-direction: row; align-items: baseline; gap: 0.28em; }
  .nav { display: block; margin-left: auto; }
  .nav__liste { list-style: none; display: flex; gap: 0.25rem; }
  .nav__punkt { position: relative; }
  .nav__link {
    display: inline-flex; align-items: center; gap: 0.25rem; min-height: 2.75rem; padding: 0.5rem 0.85rem; border-radius: var(--r-rund);
    color: var(--c-tinte); font-weight: var(--w-mittel); text-decoration: none;
  }
  .nav__link:hover, .nav__punkt--unter:focus-within > .nav__link, .nav__punkt--unter:hover > .nav__link { background: var(--c-himmel); color: var(--c-tinte); text-decoration: none; }
  .nav__link[aria-current="page"], .nav__link[data-aktiv] { color: var(--c-primaer); box-shadow: inset 0 -2px 0 var(--c-primaer); border-radius: 0; }
  .nav__link .ic { width: 1rem; height: 1rem; }
  .nav__unter {
    display: none; position: absolute; left: -0.5rem; top: 100%; min-width: 17rem; list-style: none;
    padding: 0.6rem; background: var(--c-weiss); border: 1px solid var(--c-linie); border-radius: var(--r-3); box-shadow: var(--s-2);
  }
  .nav__punkt--unter:hover .nav__unter, .nav__punkt--unter:focus-within .nav__unter { display: block; }
  .nav__unter a { display: block; padding: 0.6rem 0.85rem; border-radius: var(--r-2); color: var(--c-tinte); text-decoration: none; font-weight: var(--w-mittel); }
  .nav__unter a:hover { background: var(--c-himmel); }
  .nav__unter a[aria-current="page"] { color: var(--c-primaer); }
  .kopf__tel {
    display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.75rem; padding-inline: 0.25rem;
    color: var(--c-tinte); font-weight: var(--w-fett); text-decoration: none; white-space: nowrap;
  }
  .kopf__tel .ic { color: var(--c-primaer); }
  .kopf__tel:hover { color: var(--c-primaer-tief); }
  .kopf__angebot { display: inline-flex; }
  .kopf__anrufen, .menue { display: none; }
  .daumen { display: none; }
  .fuss { padding-bottom: 0; }
}
/* Faktenleiste Tablet und kleiner Desktop: drei plus zwei (Meisterbetrieb über zwei Spalten) */
@media (min-width: 44rem) and (max-width: 79.99rem) {
  .fakten__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--a-6); padding-block: var(--a-3); }
  .fakt:nth-child(n + 3) { border-top: 0; }
  .fakt:nth-child(n + 4) { border-top: 1px solid var(--c-linie); }
  .fakt:nth-child(4) { grid-column: 2 / -1; }
}
/* Kopf zwischen 68 und 80 rem: enger setzen, damit nichts umbricht */
@media (min-width: 68rem) and (max-width: 79.99rem) {
  .kopf__zeile { gap: var(--a-3); }
  .nav__liste { gap: 0; }
  .nav__link { padding-inline: 0.6rem; }
}
@media (min-width: 68rem) {
  .nav__link, .kopf__angebot, .kopf__tel { white-space: nowrap; }
}
@media (min-width: 80rem) {
  .fakten__liste { grid-template-columns: repeat(5, minmax(0, auto)); justify-content: space-between; padding: 1.6rem clamp(1.5rem, 2.5vw, 2.75rem); column-gap: 0; }
  .fakt { padding: 0 clamp(0.9rem, 1.6vw, 2rem); border: 0; }
  .fakt:nth-child(n + 3) { border-top: 0; }
  .fakt + .fakt { border-left: 1px solid var(--c-linie); }
  .fakt:first-child { padding-left: 0; }
  .fakt:nth-child(4) { order: 0; grid-column: auto; }
  .fakt:last-child { padding-right: 0; }
  .fakt__wert { min-height: 3.4rem; align-content: flex-end; }
  .fakt__text { max-width: 13.5rem; }
}
@media (min-width: 78rem) {
  /* Zusatzzeile unter der Wortmarke, nur wenn der Kopf Platz hat */
  .marke { gap: 0.4rem; }
  .marke__zusatz { display: block; font-size: var(--t-xs); font-weight: var(--w-mittel); letter-spacing: 0.005em; line-height: 1.2; color: var(--c-tinte-2); }
}
@media (min-width: 90rem) {
  .kacheln-wahl__reihe { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* 7 · Bewegung: Daumenleiste erscheint erst nach dem ersten Bildschirm (nur wo unterstützt) */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) and (max-width: 67.99rem) {
    .daumen { animation: daumen-ein linear both; animation-timeline: scroll(root); animation-range: 0 32rem; }
  }
}
@keyframes daumen-ein {
  0%, 55% { transform: translateY(115%); visibility: hidden; }
  100% { transform: none; visibility: visible; }
}
@media (prefers-reduced-motion: no-preference) {
  .kachel__bild img { transition: transform 0.5s ease; }
  .kachel:hover .kachel__bild img { transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}