/* 21consult · Leitregion 21 · Kartenblatt der Postleitzahlregion 21
   Raster: 8 Kartenquadrate (A bis H) auf 1344 px, Quadrat 168 x 112.
   Farbgesetz (Phase 6, Richtung „Gezeiten“):
   1. Steuerbordgrün ist die einzige Knopffarbe und heißt immer „hier anfragen“
      (Anfrageknöpfe, angekreuzte Auswahl, Fokus der Anfrage).
   2. Tonnengelb markiert nur, wo du gerade bist oder was zählt (Sitz Buxtehude,
      aktiver Reiter, erreichte Ablaufnummer, Ortsmarken, der Claim). Gelb ist nie
      anklickbar und steht nur auf dunklem Grund oder mit Rand in Flutkante.
   3. Backbordrot nur für Fehler.
   4. Flächen tragen keine Bedeutung, sie geben den Takt: Watt, Seegras, Flutkante, Priel. */

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

:root {
  /* Farben */
  --flut: #13211D;            /* Flutkante: Region 21, Text, dunkle Abschnitte */
  --steuerbord: #1F6E4F;      /* einzige Knopffarbe, heißt: hier anfragen (5,74:1 auf Wattlicht, 4,90:1 auf Seegras) */
  --steuerbord-hell: #4E9877; /* Anfrageknopf auf Dunkel (4,82:1 auf Flutkante) */
  --watt: #F6F7F4;            /* Wattlicht: Kartengrund */
  --watt-2: #E7EAE6;          /* getönte Fläche (Fragen, Fußzeile) */
  --seegras: #DCE8E0;         /* getönte Fläche der Leistungen, Grün aus der Marke statt neuem Farbton.
                                 Flutkante darauf 13,19:1, Schlick 4,65:1, Steuerbord 4,90:1 */
  --seegras-linie: #B9C9BE;   /* Trennlinien auf Seegras, nur Linie, kein Text */
  --priel: #2F5546;           /* mittlere Grünstufe, Fläche Über mich: Tiefe ohne neue Farbfamilie.
                                 Wattlicht darauf 7,78:1, Linie 5,53:1, Tonnengelb 4,55:1 */
  --gelb: #E8B931;            /* Tonnengelb der Kardinaltonnen: markiert nur, nie klickbar.
                                 9,04:1 auf Flutkante, 4,55:1 auf Priel; auf Wattlicht nur mit
                                 Flutkanten-Rand, allein dort nur 1,71:1 */
  --linie: #CDD4CC;           /* Leitzonengrenzen, Kartenrand; Nebentext auf Dunkel (10,99:1) */
  --grau: #8E978E;            /* Nebentext auf Dunkel (5,52:1), nie auf Hell */
  --schlick: #5E675F;         /* Nebentext und Feldränder auf Hell (5,45:1) */
  --backbord: #A6402C;        /* nur Fehlermeldungen (5,76:1) */

  /* Abstände */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --rand: 48px;               /* Seitenabstand, Handy 16 */
  --abschnitt: var(--abschnitt-weit); /* Abstand oben und unten je Abschnitt, Handy siehe unten */
  --kopf-hoehe: 72px;
  --radius-s: 4px; --radius-m: 8px; --radius-l: 12px;

  /* Schrift */
  --font: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --h1: 56px; --h1-zeile: 60px;
  --h2: 40px; --h2-zeile: 48px;

  /* Bewegung */
  --aus: cubic-bezier(.16, 1, .3, 1);

  /* Regler (Phase 6) */
  --einstieg-oben: 20px;      /* Luft zwischen Kopf und Kartenrand */
  --abschnitt-weit: var(--s9); /* Abstand oben und unten je Abschnitt ab Tablet hoch */
  --abschnitt-eng: var(--s8);  /* derselbe Abstand auf dem Handy */
  --zahl-groesse: 383px;      /* Größe der 21, in Karteneinheiten (1440 breit) */
  --zahl-x: -14px;            /* Lage der 21, verschiebt nur die Ziffern, der Schnitt bleibt an der Grenze */
  --zahl-y: -3px;
  --zahl-groesse-m: 200px;    /* Größe der 21 auf dem Handy */
  --zahl-groesse-q: 228px;    /* Tablet quer, Karteneinheiten (1024 breit) */
  --zahl-groesse-h: 250px;    /* Tablet hoch, Karteneinheiten (768 breit) */
  --kante-hoehe-m: 164px;     /* Höhe der Nordkante auf dem Handy */
  --einblend-weg: 16px;       /* wie weit Referenzbilder und Porträt beim Einblenden hochgleiten */
  --einblend-dauer: 350ms;    /* Dauer der Einblendung, 200 bis 350 ms */

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--kopf-hoehe) + var(--s4));
  scroll-padding-bottom: 80px; /* wirkt global auf jeden Sprung und Fokuswechsel (nicht nur im Formular): Ziele bleiben 80 px über dem unteren Fensterrand, damit sie nicht unter der Browserleiste liegen */
  scrollbar-color: var(--linie) var(--watt);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--watt);
  color: var(--flut);
  font: 500 16px/26px var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  caret-color: var(--steuerbord);
  overflow-x: clip;
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, ol, figure, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--flut); color: var(--watt); }
.region ::selection, .ablauf ::selection, .anfrage-text ::selection { background: var(--watt); color: var(--flut); }

:focus-visible { outline: 2px solid var(--flut); outline-offset: 3px; border-radius: var(--radius-s); }
.region :focus-visible, .ablauf :focus-visible, .anfrage-text :focus-visible { outline-color: var(--watt); }
main:focus { outline: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.symbole { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon {
  flex: none; width: 24px; height: 24px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.icon .voll, symbol .voll { fill: currentColor; stroke: none; }
.plz, .ziffern, .halt-nummer, .karte-svg text { font-variant-numeric: tabular-nums; }

.skip {
  position: absolute; left: var(--rand); top: -64px; z-index: 50;
  background: var(--flut); color: var(--watt);
  padding: var(--s3) var(--s4); border-radius: var(--radius-m);
  font-weight: 700; text-decoration: none;
}
.skip:focus { top: var(--s4); }

.innen {
  width: 100%;
  max-width: calc(1344px + 2 * var(--rand));
  margin: 0 auto;
  padding: 0 var(--rand);
}

/* Knöpfe */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 48px; padding: 0 20px;
  border: 2px solid transparent; border-radius: var(--radius-m);
  font: 700 16px/24px var(--font); text-decoration: none; white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s var(--aus), color .2s var(--aus), border-color .2s var(--aus), transform .1s var(--aus);
}
.knopf:active { transform: translateY(1px); }
.knopf .icon { width: 20px; height: 20px; }
.knopf.anfragen { background: var(--steuerbord); border-color: var(--steuerbord); color: var(--watt); }
.knopf.anfragen:hover { background: var(--flut); border-color: var(--flut); }
.knopf.anfragen:focus-visible { outline-color: var(--steuerbord); }
.knopf.neben { background: transparent; border-color: var(--flut); color: var(--flut); padding: 0 var(--s4); }
.knopf.neben:hover { background: var(--flut); color: var(--watt); }
.knopf[disabled] { cursor: progress; opacity: .72; }

/* auf dunklem Grund */
.ablauf .knopf.anfragen { background: var(--steuerbord-hell); border-color: var(--steuerbord-hell); color: var(--flut); }
.ablauf .knopf.anfragen:hover { background: var(--watt); border-color: var(--watt); }
.ablauf .knopf.anfragen:focus-visible { outline-color: var(--steuerbord-hell); }

/* Kopf */
.kopf {
  position: sticky; top: 0; z-index: 30;
  background: var(--watt);
  border-bottom: 2px solid transparent;
  transition: border-color .2s var(--aus);
}
.kopf.gerollt { border-bottom-color: var(--linie); }
.kopf-innen {
  display: flex; align-items: center; gap: var(--s6);
  max-width: calc(1344px + 2 * var(--rand)); margin: 0 auto; padding: 0 var(--rand);
  height: var(--kopf-hoehe);
}
.marke { display: block; flex: none; line-height: 0; margin-right: auto; border-radius: var(--radius-s); }
.marke img { height: 41.4px; width: auto; margin: -6.7px; }
.hauptnav ul { display: flex; gap: var(--s6); }
.hauptnav a {
  display: inline-block; padding: var(--s2) 0;
  text-decoration: none; font-weight: 500;
  text-decoration-thickness: 2px; text-underline-offset: 6px;
}
.hauptnav a:hover { text-decoration-line: underline; text-decoration-color: var(--linie); }
.kopf-knopf { min-height: 40px; flex: none; }
.menue-knopf {
  display: none; width: 44px; height: 44px; padding: 0; margin-right: -10px;
  background: none; border: 0; border-radius: var(--radius-m); cursor: pointer;
  align-items: center; justify-content: center;
}
.menue-linien { display: grid; gap: 5px; width: 22px; }
.menue-linien span {
  display: block; height: 2px; border-radius: 2px; background: var(--flut);
  transition: transform .25s var(--aus), opacity .2s var(--aus);
}
.menue-knopf[aria-expanded="true"] .menue-linien span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menue-knopf[aria-expanded="true"] .menue-linien span:nth-child(2) { opacity: 0; }
.menue-knopf[aria-expanded="true"] .menue-linien span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===================== Einstieg: Kartenblatt ===================== */

.einstieg { padding-top: var(--einstieg-oben); }
.blatt { position: relative; margin: 0 auto; }

.karte-svg .rahmen { fill: none; stroke: var(--linie); stroke-width: 2; }
.karte-svg .ticks, .karte-svg .nachbar path {
  fill: none; stroke: var(--linie); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.karte-svg text { font-family: var(--font); }
.karte-svg .quadrat text { font-size: 13px; font-weight: 700; letter-spacing: .08em; fill: var(--flut); text-anchor: middle; }
.karte-svg .zone text { font-size: 15px; font-weight: 700; fill: var(--schlick); text-anchor: middle; }
.karte-svg .vermerk { font-size: 12px; font-weight: 500; fill: var(--schlick); text-anchor: end; }
.grenze, .grenze-m { fill: var(--flut); stroke: var(--flut); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.zahl {
  font-family: var(--font); font-weight: 800; letter-spacing: -.04em;
  font-size: var(--zahl-groesse);
  transform: translate(var(--zahl-x), var(--zahl-y));
}
.zahl-aussen { fill: var(--flut); }
.zahl-innen { fill: var(--watt); }
.kante-oben .zahl { font-size: var(--zahl-groesse-m); transform: none; }

/* Orte */
.ort {
  position: absolute; display: flex; align-items: center; gap: var(--s2);
  padding: var(--s1) var(--s2) var(--s1) 0;
  --punkt: 10px;
  transform: translate(calc(var(--punkt) / -2), -50%);
  font-size: 14px; line-height: 20px; color: var(--linie); white-space: nowrap;
  cursor: default;
}
.ort.links { flex-direction: row-reverse; padding: var(--s1) 0 var(--s1) var(--s2); transform: translate(calc(100% * -1 + var(--punkt) / 2), -50%); }
.ort.sitz { --punkt: 20px; }
.ort .plz { color: var(--watt); font-weight: 700; }
.punkt {
  position: relative; flex: none; width: var(--punkt); height: var(--punkt); border-radius: 50%;
  background: var(--watt);
  transition: box-shadow .2s var(--aus), transform .2s var(--aus);
}
/* Sitz Buxtehude: Ring in Tonnengelb auf Flutkante */
.sitz .punkt { background: transparent; box-shadow: inset 0 0 0 2px var(--gelb); }
.sitz .punkt::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--gelb); }
.plz-gross {
  position: absolute; bottom: calc(100% + var(--s1)); left: calc(var(--punkt) / 2 - 12px);
  padding: 0 var(--s2); border-radius: var(--radius-s);
  background: var(--watt); color: var(--flut);
  font: 800 20px/28px var(--font); font-variant-numeric: tabular-nums; letter-spacing: .02em;
  opacity: 0; transform: translateY(4px); pointer-events: none;
  transition: opacity .2s var(--aus), transform .2s var(--aus);
}
.ort.links .plz-gross { left: auto; right: calc(var(--punkt) / 2 - 12px); }
.ort:hover .plz-gross { opacity: 1; transform: none; }
.ort:hover .punkt { transform: scale(1.6); }
.sitz:hover .punkt { transform: none; }

.titel { color: var(--watt); }
h1 {
  font-size: var(--h1); line-height: var(--h1-zeile); font-weight: 800; letter-spacing: -.02em;
  text-wrap: balance;
}
.unterzeile { margin-top: var(--s5); max-width: 600px; font-size: 20px; line-height: 30px; color: var(--linie); }

/* Auswahl „Worum geht es?“ */
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
.auswahl legend { font-size: 24px; line-height: 32px; font-weight: 800; letter-spacing: -.01em; margin-bottom: var(--s3); }
.wahl {
  display: flex; align-items: center; gap: var(--s3);
  min-height: 44px; padding: var(--s2) 0;
  border-top: 2px solid var(--linie); cursor: pointer; line-height: 24px;
}
.wahl:last-of-type { border-bottom: 2px solid var(--linie); }
.wahlen .wahl:last-of-type { border-bottom: 0; }
.wahl input {
  appearance: none; -webkit-appearance: none; margin: 0; flex: none;
  width: 24px; height: 24px; border: 2px solid var(--flut); border-radius: var(--radius-s);
  background: var(--watt) center / 20px no-repeat; cursor: pointer;
  transition: background-color .15s var(--aus), border-color .15s var(--aus);
}
.wahl:hover input { background-color: var(--watt-2); }
.wahl input:checked {
  background-color: var(--steuerbord); border-color: var(--steuerbord);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='%23F6F7F4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.wahl input:focus-visible { outline: 2px solid var(--steuerbord); outline-offset: 3px; }
.wahl input:checked + span { font-weight: 700; }
.hinweis { margin-top: var(--s3); font-size: 14px; line-height: 20px; color: var(--schlick); }
.aktion { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
.aktion .anfragen { flex: 1 1 auto; }

/* Kartenblätter: weit (ab 1280), quer (1024 bis 1279), hoch (768 bis 1023); Handy ohne Blatt */
.karte-svg { display: none; }
@media (min-width: 768px) {
  .blatt { container-type: inline-size; }
  .quadratleiste, .kante-oben, .kante-unten { display: none; }
  .region { display: contents; }
  .orte { position: static; }
  .titel { position: absolute; }
  .karte-quer .zahl { font-size: var(--zahl-groesse-q); transform: none; }
  .karte-hoch .zahl { font-size: var(--zahl-groesse-h); transform: none; }
}

/* Desktop: das Kartenblatt trägt alles */
@media (min-width: 1280px) {
  .blatt { max-width: 1440px; aspect-ratio: 1440 / 712; }
  .karte-weit { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .ort { left: calc(var(--x) * 1cqw / 14.4); top: calc(var(--y) * 1cqw / 14.4); }
  /* H1 bleibt links der 21 (vier Zeilen), die Unterzeile läuft unter der Grundlinie breiter */
  .titel {
    left: calc(216 * 1cqw / 14.4);
    bottom: calc(32 * 1cqw / 14.4);
    width: calc(640 * 1cqw / 14.4);
  }
  .titel .unterzeile { margin-top: var(--s4); }
  .titel h1 { max-width: calc(450 * 1cqw / 14.4); }
  /* Auswahl in G und H, Oberkante auf der Höhe, an der die Grenze die 21 schneidet */
  .auswahl {
    position: absolute;
    left: calc(1088 * 1cqw / 14.4);
    top: calc(232 * 1cqw / 14.4);
    width: calc(296 * 1cqw / 14.4);
    background: var(--watt);
  }
}
@media (min-width: 1280px) and (max-width: 1359px) {
  :root { --h1: 48px; --h1-zeile: 52px; --h2: 32px; --h2-zeile: 40px; }
  .unterzeile { font-size: 16px; line-height: 26px; max-width: 520px; }
  .auswahl legend { font-size: 20px; line-height: 28px; }
  .wahl { min-height: 40px; padding: 6px 0; font-size: 14px; line-height: 20px; }
  .aktion .knopf { min-height: 44px; }
}

/* Tablet quer: Region links in A bis E, die 21 auf der Reihenlinie 2, Auswahl in F bis H darunter */
@media (min-width: 1024px) and (max-width: 1279px) {
  :root { --rand: 32px; --h1: 40px; --h1-zeile: 44px; }
  .blatt { aspect-ratio: 1024 / 632; }
  .karte-quer { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .ort { left: calc(var(--qx) * 1cqw / 10.24); top: calc(var(--qy) * 1cqw / 10.24); }
  .titel {
    left: calc(96 * 1cqw / 10.24);
    bottom: calc(56 * 1cqw / 10.24);
    width: calc(500 * 1cqw / 10.24);
  }
  .titel .unterzeile { margin-top: var(--s4); }
  /* Titel wächst mit dem Blatt und bricht wie auf dem Desktop in vier Zeilen; er steht
     unten verankert und wächst so nach oben an die Orte heran, ohne leeres Feld darunter */
  .titel h1 { font-size: calc(44 * 1cqw / 10.24); line-height: calc(48 * 1cqw / 10.24); max-width: calc(363 * 1cqw / 10.24); }
  .titel .unterzeile { font-size: calc(16 * 1cqw / 10.24); line-height: calc(26 * 1cqw / 10.24); }
  /* Unterkante wie beim Titel verankert (56 Karteneinheiten über dem Blattrand, die Kartenkante
     liegt bei 600 von 632): die Knöpfe stehen bündig mit der Unterzeile, ihr Abstand zur Kartenkante
     beträgt 24 Karteneinheiten, also 24 px bei 1024 px und 30 px bei 1279 px Breite */
  .auswahl {
    position: absolute;
    left: calc(648 * 1cqw / 10.24);
    bottom: calc(56 * 1cqw / 10.24);
    width: calc(336 * 1cqw / 10.24);
    background: var(--watt);
  }
  .auswahl legend { font-size: 20px; line-height: 28px; margin-bottom: var(--s2); }
  /* Auswahlzeilen 44 px für Tippen; damit die Knöpfe im Blatt bleiben, rücken sie 4 px
     näher und sind wie von 1280 bis 1359 44 px hoch */
  .wahl { min-height: 44px; padding: 6px 0; }
  .aktion { flex-wrap: nowrap; gap: var(--s2); margin-top: var(--s3); }
  .aktion .knopf { min-height: 44px; }
  .aktion .knopf.anfragen { padding: 0 var(--s4); }
}

/* Tablet hoch: Blatt über die volle Breite, Auswahl darunter auf Kartengrund */
@media (min-width: 768px) and (max-width: 1023px) {
  :root { --rand: 32px; --h1: 48px; --h1-zeile: 52px; }
  .karte-hoch { display: block; position: relative; width: 100%; height: auto; overflow: visible; }
  .ort { left: calc(var(--hx) * 1cqw / 7.68); top: calc(var(--hy) * 1cqw / 7.68); }
  /* Titel hängt an der Unterkante des tiefsten Orts (Neu Wulmstorf, Karteneinheit 260)
     mit festem Abstand wie auf dem Desktop; er wächst mit dem Blatt und bricht wie dort
     in vier Zeilen, damit unter ihm kein leeres Feld klafft */
  .titel {
    left: calc(96 * 1cqw / 7.68);
    top: calc(260 * 1cqw / 7.68 + 44px);
    width: calc(600 * 1cqw / 7.68);
  }
  .titel h1 { font-size: calc(48 * 1cqw / 7.68); line-height: calc(52 * 1cqw / 7.68); max-width: calc(400 * 1cqw / 7.68); }
  .auswahl { padding: var(--s5) var(--rand) 0; }
  .auswahl fieldset { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s6); border-bottom: 2px solid var(--linie); }
  .auswahl .wahl:last-of-type { border-bottom: 0; }
  .aktion { margin-top: var(--s4); }
}

/* Handy: die Region füllt den ersten Bildschirm über die volle Breite */
@media (max-width: 767px) {
  .quadratleiste {
    display: grid; grid-template-columns: repeat(8, 1fr);
    margin: 0 var(--rand); padding-top: var(--s2);
    font-size: 12px; line-height: 24px; font-weight: 700; letter-spacing: .08em; text-align: center;
  }
  .quadratleiste li + li { box-shadow: inset 2px 0 0 var(--linie); }
  .kante-oben { width: 100%; height: var(--kante-hoehe-m); }
  .kante-unten { width: 100%; height: 56px; margin-top: -2px; }
  .kante-unten path { fill: var(--flut); }
  .region { background: var(--flut); margin-top: -2px; padding: var(--s2) var(--rand) var(--s5); }
  .orte { position: relative; height: 96px; margin: 0 calc(var(--rand) * -1); }
  .ort { left: calc(var(--mx) * 1%); top: calc(var(--my) * 1px + 12px); }
  .ort.nur-weit { display: none; }
  .titel { padding-top: var(--s2); }
  .auswahl { padding: var(--s6) var(--rand) 0; max-width: 640px; }
  .aktion { flex-direction: column; }
  .aktion .knopf { width: 100%; }
  .wahl { min-height: 48px; }
  /* „21614 Buxtehude“ soll links mindestens 16 px vom Rand stehen. Der Text beginnt bei
     Sitzanker (--mx in % der Breite) minus 136,2 px (gemessen: Textbreite, Abstand und halber
     Punkt), die Grenze liegt also bei 16 px + 136,2 px = 152,2 px. Darunter (unter etwa 331 px
     Breite) rückt der Sitz um die fehlenden Pixel nach rechts, darüber bleibt alles wie es ist. */
  .ort.links.sitz { --sitz-breite: 152.2px; transform: translate(calc(100% * -1 + var(--punkt) / 2 + max(0px, var(--sitz-breite) - var(--mx) * 1vw)), -50%); }
}
@media (max-width: 767px) {
  :root {
    --rand: 16px; --abschnitt: var(--abschnitt-eng); --kopf-hoehe: 64px;
    --h1: 32px; --h1-zeile: 36px; --h2: 32px; --h2-zeile: 40px;
  }
  .unterzeile { font-size: 16px; line-height: 26px; margin-top: var(--s4); }
}

/* Anschnitt-Bewegung: Grenze zeichnet sich einmal nach, dann füllt sich die Region */
@media (prefers-reduced-motion: no-preference) {
  .grenze, .grenze-m {
    stroke-dasharray: 1;
    animation: zeichnen 1.2s var(--aus) both, fuellen .6s var(--aus) .45s both;
  }
  .zahl-innen, .orte, .titel {
    animation: auftauchen .6s var(--aus) .5s both;
  }
}
@keyframes zeichnen { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes fuellen { from { fill-opacity: 0; } to { fill-opacity: 1; } }
@keyframes auftauchen { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  .region { animation: auftauchen-flaeche .6s var(--aus) .45s both; }
  .kante-unten path { animation: fuellen .6s var(--aus) .45s both; }
}
@keyframes auftauchen-flaeche { from { background-color: rgba(19, 33, 29, 0); } to { background-color: var(--flut); } }

/* ===================== Abschnitte allgemein ===================== */

section[id] { padding: var(--abschnitt) 0; }
p { text-wrap: pretty; }
h2 { font-size: var(--h2); line-height: var(--h2-zeile); font-weight: 800; letter-spacing: -.02em; text-wrap: balance; }
h3 { font-size: 24px; line-height: 32px; font-weight: 800; letter-spacing: -.01em; }
.abschnittskopf { max-width: 840px; margin-bottom: var(--s7); }
.einleitung { margin-top: var(--s4); font-size: 20px; line-height: 30px; max-width: 62ch; }

/* ===================== Leistungen: Reiter als Kartenlegende ===================== */

/* H2 und Reiterreihe stehen noch auf dem Kartenblatt, die getönte Fläche beginnt unter den Reitern */
.leistungen { padding-top: var(--s7) !important; padding-bottom: 0 !important; }
.leistungen .abschnittskopf { margin-bottom: var(--s5); }
.tafelflaeche {
  background: var(--seegras);
  box-shadow: 0 0 0 100vmax var(--seegras);
  clip-path: inset(0 -100vmax);
  padding-bottom: var(--abschnitt);
}
.reiter.als-zeilen .tafelflaeche { padding-top: var(--s5); }
.reiterleiste { display: none; }
.js .reiter:not(.als-zeilen) .reiterleiste { display: grid; grid-template-columns: repeat(4, 1fr); }
.reiterleiste button {
  display: flex; align-items: flex-start; gap: var(--s3);
  min-height: 64px; padding: var(--s4) var(--s5) var(--s4) 0;
  background: none; border: 0; border-top: 2px solid var(--linie); border-radius: 0;
  font-weight: 500; text-align: left; cursor: pointer;
  transition: border-color .2s var(--aus);
  position: relative; white-space: nowrap;
}
.reiterleiste button:hover { border-top-color: var(--schlick); }
.reiterleiste button[aria-selected="true"] { border-top-color: var(--flut); font-weight: 700; }
/* Aktiver Reiter: gerades Kardinalband, oben Flutkante, darunter Tonnengelb.
   Das Flutband trägt den Kontrast zum Wattlicht. */
.reiterleiste button[aria-selected="true"]::before {
  content: ""; position: absolute; left: 0; right: var(--s5); top: -2px; height: 4px;
  background: var(--gelb); border-top: 4px solid var(--flut); box-sizing: content-box;
  transform-origin: left;
}
@media (prefers-reduced-motion: no-preference) {
  .reiterleiste button[aria-selected="true"]::before { animation: band .3s var(--aus) both; }
}
@keyframes band { from { transform: scaleX(0); } to { transform: none; } }
@media (max-width: 1279px) { .reiterleiste button { padding-right: var(--s4); gap: var(--s2); } }
@media (max-width: 1023px) { .js .reiter:not(.als-zeilen) .reiterleiste { grid-template-columns: repeat(2, 1fr); } }
.reiterleiste button:focus-visible { outline-offset: 3px; z-index: 1; }

.tafel { display: grid; grid-template-columns: repeat(8, 1fr); padding-top: var(--s7); }
.tafel + .tafel { margin-top: var(--s7); }
.js .reiter:not(.als-zeilen) .tafel + .tafel { margin-top: 0; }
.tafel[hidden] { display: none; }
.js .reiter:not(.als-zeilen) .tafelflaeche { display: grid; }
.js .reiter:not(.als-zeilen) .tafel { grid-area: 1 / 1; }
.tafel[data-inaktiv] { visibility: hidden; }
.tafel-text { grid-column: 1 / span 4; padding-right: var(--s7); }
.tafel h3 { display: flex; align-items: center; gap: var(--s3); }
.vorne { margin-top: var(--s5); font-size: 24px; line-height: 34px; max-width: 30ch; }
.detail p { margin-top: var(--s4); max-width: 56ch; }
.detail .knopf { margin-top: var(--s6); }
.tafel > .legende-liste, .legende-block { grid-column: 5 / span 4; }
.tafel > .legende-liste li, .legende-block li { font-size: 20px; line-height: 30px; }
.legende-kopf { font-size: 14px; line-height: 20px; font-weight: 700; color: var(--schlick); padding-bottom: var(--s3); }
.legende-liste li {
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: var(--s4) 0; border-top: 2px solid var(--linie);
}
.legende-liste li:last-child { border-bottom: 2px solid var(--linie); }
.tafelflaeche .legende-liste li { border-color: var(--seegras-linie); }
.legende-liste .icon { margin-top: 1px; }

@media (min-width: 1280px) {
  .leistungen .abschnittskopf { max-width: none; display: flex; align-items: flex-start; gap: var(--s7); margin-bottom: var(--s1); }
  .leistungen h2 { flex: none; white-space: nowrap; }
  .leistungen .einleitung { flex: 1; margin: 0; padding-top: var(--s1); font-size: 16px; line-height: 24px; max-width: none; }
  .js .reiter:not(.als-zeilen) .reiterleiste button { padding-top: var(--s3); }
}
@media (min-width: 1280px) and (max-width: 1359px) {
  .leistungen .einleitung { font-size: 14px; line-height: 20px; }
  .js .reiter:not(.als-zeilen) .reiterleiste button { padding-top: var(--s2); }
}
@media (min-width: 1024px) {
  .referenz.klein .bilder { grid-column: 1 / span 4; }
  .referenz.klein .referenz-text { grid-column: 5 / span 4; padding-left: var(--s8); }
}

/* Handy: aufklappbare Zeilen, vorne der Satz, darunter das Detail */
.reiter.als-zeilen .tafel { display: block; padding: 0; margin: 0; border-top: 2px solid var(--seegras-linie); }
.reiter.als-zeilen .tafel:last-child { border-bottom: 2px solid var(--seegras-linie); }
.reiter.als-zeilen .tafel-text { padding: 0; }
.reiter.als-zeilen h3 { font-size: 20px; line-height: 28px; }
.zeile {
  display: flex; align-items: center; gap: var(--s3); width: 100%;
  min-height: 56px; padding: var(--s4) 0 0; margin: 0;
  background: none; border: 0; text-align: left; font: inherit; cursor: pointer;
}
.zeile .plus { margin-left: auto; }
.zeile .hoch { transition: transform .25s var(--aus); transform-origin: center; }
.zeile[aria-expanded="true"] .hoch { transform: scaleY(0); }
.reiter.als-zeilen .vorne { margin-top: var(--s2); padding-bottom: var(--s4); font-size: 16px; line-height: 26px; }
.reiter.als-zeilen .tafel:not(.offen) .detail,
.reiter.als-zeilen .tafel:not(.offen) [data-zum-detail] { display: none; }
.reiter.als-zeilen .detail [data-zum-detail] { margin: var(--s4) 0 0; }
.reiter.als-zeilen .detail p { margin-top: 0; }
.reiter.als-zeilen .detail p + p { margin-top: var(--s4); }
.reiter.als-zeilen [data-zum-detail] { margin-top: var(--s4); }
.reiter.als-zeilen .detail .knopf { margin: var(--s5) 0 var(--s5); width: 100%; }
.reiter.als-zeilen .legende-liste li:last-child { border-bottom: 0; }
.reiter.als-zeilen .legende-liste li { font-size: 16px; line-height: 26px; }

/* ===================== Ablauf: Strecke mit vier Halten ===================== */

.ablauf { background: var(--flut); color: var(--watt); }
.ablauf .einleitung { color: var(--linie); }
.strecke { position: relative; margin-top: var(--s8); }
.strecke-linie { position: absolute; left: 0; top: 0; width: 100%; height: 480px; overflow: visible; }
.strecke-linie path { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.js .strecke-linie path { vector-effect: none; }
.weg { stroke: var(--grau); stroke-dasharray: 2 10; }
.weg-gefahren { stroke: var(--watt); }
.halte { position: relative; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: 240px auto; }
.halt { position: relative; padding: 0 var(--s5) var(--s5) var(--s6); }
.halt:nth-child(1) { grid-column: 1 / span 2; grid-row: 1; }
.halt:nth-child(2) { grid-column: 3 / span 2; grid-row: 2; }
.halt:nth-child(3) { grid-column: 5 / span 2; grid-row: 1; }
.halt:nth-child(4) { grid-column: 7 / span 2; grid-row: 2; }
.halt-punkt {
  position: absolute; left: -8px; top: 16px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--flut); box-shadow: inset 0 0 0 2px var(--watt);
  transition: background-color .3s var(--aus);
}
.ziel .halt-punkt { left: -14px; top: 10px; width: 28px; height: 28px; }
.ziel .halt-punkt::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--gelb); }
/* Erreichte Halte in Tonnengelb (9,04:1 auf Flutkante), das Ziel mit gelbem Kern */
.halt.erreicht .halt-punkt { background: var(--gelb); box-shadow: inset 0 0 0 2px var(--gelb); }
.ziel.erreicht .halt-punkt { background: var(--flut); }
.halt-nummer { display: block; font-size: 72px; line-height: 64px; font-weight: 800; letter-spacing: -.04em; color: var(--gelb); }
.halt h3 { margin-top: var(--s4); text-wrap: balance; }
.halt p { margin-top: var(--s2); color: var(--linie); max-width: 30ch; }
.ziel .knopf { margin-top: var(--s5); }
.strecke-senkrecht { display: none; }

/* Noch nicht erreichte Halte: nur Nummer und Punkt treten zurück, Text bleibt voll lesbar.
   Ohne Bewegung oder ohne JS sind alle Nummern gelb. */
.js .strecke.bewegt .halt .halt-nummer { color: var(--grau); transition: color .3s var(--aus); }
.js .strecke.bewegt .halt.erreicht .halt-nummer { color: var(--gelb); }

/* Tablet quer: etwas mehr Satzbreite je Halt, damit „Du schreibst mir“ auf einer Zeile bleibt */
@media (min-width: 1024px) and (max-width: 1279px) {
  .halt { padding-right: var(--s2); }
  .halt h3 { font-size: 22px; line-height: 30px; }
}

@media (max-width: 1023px) {
  .strecke-linie { display: none; }
  .halte { display: block; }
  .halt { padding: 0 0 var(--s7) var(--s7); }
  .halt:last-child { padding-bottom: 0; }
  .halt-punkt { left: 8px; top: 20px; }
  .ziel .halt-punkt { left: 2px; top: 14px; }
  .halt-nummer { font-size: 56px; line-height: 56px; }
  .strecke-senkrecht {
    display: block; position: absolute; left: 15px; top: 28px; bottom: 120px; width: 2px;
  }
  .strecke-senkrecht svg { position: absolute; inset: 0; width: 2px; height: 100%; overflow: visible; }
  .strecke-senkrecht line { stroke: var(--grau); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 2 10; vector-effect: non-scaling-stroke; }
  .strecke-senkrecht span { position: relative; }
  .strecke-senkrecht span { display: block; height: 100%; background: var(--watt); transform-origin: top; transform: scaleY(var(--fortschritt, 1)); }
}
/* Tablet hoch: Kopf links und mitlaufend, die senkrechte Strecke rechts daneben,
   statt einer schmalen Strecke mit leerer rechter Hälfte */
@media (min-width: 768px) and (max-width: 1023px) {
  .ablauf .innen { display: grid; grid-template-columns: minmax(312px, 5fr) minmax(0, 7fr); column-gap: var(--s6); align-items: start; }
  .ablauf .abschnittskopf { margin-bottom: 0; position: sticky; top: calc(var(--kopf-hoehe) + var(--s7)); }
  .ablauf .einleitung { font-size: 18px; line-height: 28px; }
  .strecke { margin-top: var(--s2); }
}

/* ===================== Referenzen ===================== */

.referenz { display: grid; grid-template-columns: repeat(8, 1fr); align-items: center; }
.referenz + .referenz { margin-top: var(--s9); }
.bilder { grid-column: 1 / span 5; grid-row: 1; position: relative; padding: 0 var(--s7) var(--s7) 0; }
.referenz-text { grid-column: 6 / span 3; grid-row: 1; padding-left: var(--s7); }
.referenz.gespiegelt .bilder { grid-column: 4 / span 5; padding: 0 0 var(--s7) var(--s7); }
.referenz.gespiegelt .referenz-text { grid-column: 1 / span 3; padding: 0 var(--s7) 0 0; }
.bild-desktop img {
  width: 100%; border: 2px solid var(--flut); border-radius: var(--radius-m);
  box-shadow: 0 24px 48px -24px rgba(19, 33, 29, .45);
}
.bild-mobil { position: absolute; right: 0; bottom: 0; width: 23%; }
.gespiegelt .bild-mobil { right: auto; left: 0; }
.bild-mobil img {
  width: 100%; border: 2px solid var(--flut); border-radius: var(--radius-l);
  box-shadow: 0 24px 40px -16px rgba(19, 33, 29, .5);
}
.ortsmarke { display: flex; align-items: center; gap: var(--s2); font-size: 14px; line-height: 20px; color: var(--schlick); }
/* Ortsmarke: Punkt in Tonnengelb, der Flutkanten-Rand trägt den Kontrast zum Wattlicht */
.ortsmarke .punkt { --punkt: 12px; background: var(--gelb); box-shadow: 0 0 0 2px var(--flut); }
.ortsmarke .plz { color: var(--flut); }
.referenz .ortsmarke { margin-top: var(--s2); }
.referenz h3 { font-size: 32px; line-height: 40px; letter-spacing: -.02em; }
.referenz-zeile { margin-top: var(--s4); font-size: 20px; line-height: 30px; font-weight: 700; }
.referenz-text > p:not(.ortsmarke):not(.referenz-zeile) { margin-top: var(--s4); max-width: 46ch; }
.textlink {
  display: inline-flex; align-items: center; gap: var(--s2); margin-top: var(--s5);
  font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px;
  text-decoration-color: var(--linie); transition: text-decoration-color .2s var(--aus);
}
.textlink:hover { text-decoration-color: var(--flut); }
.textlink .icon { width: 20px; height: 20px; }

/* ===================== Über mich ===================== */

/* Fläche Priel: Wattlicht 7,78:1, Linie 5,53:1 */
.ueber { background: var(--priel); color: var(--watt); }
.ueber ::selection { background: var(--watt); color: var(--flut); }
.ueber :focus-visible { outline-color: var(--watt); }
.ueber .innen { display: grid; grid-template-columns: repeat(8, 1fr); align-items: start; }
.portrait { grid-column: 1 / span 2; }
.portrait img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 2px solid var(--flut); border-radius: var(--radius-m); }
.ueber .portrait img { border-color: var(--watt); }
.ueber-text { grid-column: 4 / span 5; }
.ueber-text p { margin-top: var(--s4); max-width: 62ch; color: var(--linie); }
.ueber-text .ueber-erster { margin-top: var(--s5); font-size: 20px; line-height: 30px; color: var(--watt); }
/* Claim: die eine Haltung der Seite, groß in Tonnengelb auf Priel (4,55:1) */
.claim { display: block; margin-top: var(--s6); font-size: 40px; line-height: 48px; font-weight: 800; letter-spacing: -.02em; color: var(--gelb); }

/* ===================== Fragen ===================== */

.fragen { background: var(--watt-2); }
.fragen .innen { display: grid; grid-template-columns: repeat(8, 1fr); align-items: start; }
.fragen .abschnittskopf { grid-column: 1 / span 3; padding-right: var(--s7); position: sticky; top: calc(var(--kopf-hoehe) + var(--s7)); }
.fragenliste { grid-column: 4 / span 5; }
.frage { border-top: 2px solid var(--linie); }
.frage:last-child { border-bottom: 2px solid var(--linie); }
.frage summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s5);
  padding: var(--s5) 0; cursor: pointer; list-style: none;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary h3 { font-size: 20px; line-height: 28px; font-weight: 700; }
.frage summary:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--linie); }
.frage summary .icon { margin-top: 2px; }
.frage .hoch { transition: transform .25s var(--aus); transform-origin: center; transform-box: fill-box; }
.frage[open] .hoch { transform: scaleY(0); }
.frage p { padding: 0 var(--s7) var(--s5) 0; max-width: 66ch; }

/* ===================== Anfrage ===================== */

.anfrage { background: var(--flut); color: var(--watt); padding-bottom: calc(var(--abschnitt) + var(--s6)) !important; }
.anfrage .innen { display: grid; grid-template-columns: repeat(8, 1fr); align-items: start; }
.anfrage-text { grid-column: 1 / span 3; grid-row: 1 / span 2; padding-right: var(--s7); position: sticky; top: calc(var(--kopf-hoehe) + var(--s7)); }
.anfrage-text p { margin-top: var(--s4); color: var(--linie); }
.anfrage-text h3 { margin-top: var(--s7); font-size: 20px; line-height: 28px; }
.direkt { margin-top: var(--s4); display: grid; gap: var(--s3); }
.direkt a {
  display: flex; align-items: center; gap: var(--s3); padding: var(--s2) 0;
  font-size: 20px; line-height: 28px; font-weight: 700; text-decoration: none;
}
.direkt-wert { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--grau); transition: text-decoration-color .2s var(--aus); }
.direkt a:hover .direkt-wert { text-decoration-color: var(--watt); }
.direkt-art { display: block; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--grau); }
.direkt a > span { display: block; }

.bogen {
  grid-column: 4 / span 5; grid-row: 2;
  background: var(--watt); color: var(--flut);
  border-radius: var(--radius-l); padding: var(--s7);
  box-shadow: 0 32px 64px -32px rgba(0, 0, 0, .55);
}
#anfrage-formular { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5) var(--s6); }
.feld-breit, .form-fehler { grid-column: 1 / -1; }
.feld label, .feld legend { display: block; margin-bottom: var(--s2); font-weight: 700; line-height: 24px; }
.optional { font-weight: 500; color: var(--schlick); white-space: nowrap; }
.feld label { text-wrap: balance; }
.feld input, .feld textarea, .feld select {
  display: block; width: 100%; min-height: 48px; padding: var(--s3) var(--s4);
  background: var(--watt); border: 2px solid var(--schlick); border-radius: var(--radius-m);
  font-size: 16px; line-height: 20px;
  transition: border-color .15s var(--aus);
}
.feld .wahl { display: flex; margin: 0; font-weight: 500; }
.feld .wahl input { width: 24px; min-height: 0; padding: 0; border-color: var(--flut); border-radius: var(--radius-s); }
.feld textarea { min-height: 160px; line-height: 24px; resize: vertical; }
.feld input:hover, .feld textarea:hover, .feld select:hover { border-color: var(--flut); }
.feld input:focus, .feld textarea:focus, .feld select:focus { outline: 2px solid var(--steuerbord); outline-offset: 3px; border-color: var(--steuerbord); }
.auswahlliste { position: relative; }
.auswahlliste::after {
  content: ""; position: absolute; right: 16px; top: 50%; width: 10px; height: 10px; margin-top: -7px;
  border-right: 2px solid var(--flut); border-bottom: 2px solid var(--flut); transform: rotate(45deg); pointer-events: none;
}
.feld select { appearance: none; -webkit-appearance: none; padding-right: var(--s7); cursor: pointer; }
.feld select:invalid { color: var(--schlick); }
.wahlen { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s6); border-bottom: 2px solid var(--linie); }
.feld-hinweis { margin-top: var(--s2); font-size: 14px; line-height: 20px; color: var(--schlick); }
.feld-fehler { display: none; margin-top: var(--s2); font-size: 14px; line-height: 20px; font-weight: 700; color: var(--backbord); }
.hat-fehler .feld-fehler, .ist-geprueft .feld-fehler { display: block; }
.ist-geprueft .feld-fehler { min-height: 20px; }
/* Meldungen, die zweizeilig werden können, reservieren zwei Zeilen */
.ist-geprueft #mail-fehler, .ist-geprueft #telefon-fehler, .ist-geprueft #bereich-fehler { min-height: 40px; }
.hat-fehler input:not([type="checkbox"]), .hat-fehler textarea { border-color: var(--backbord); }
.hat-fehler .wahl input { border-color: var(--backbord); }
.form-fehler {
  padding: var(--s3) var(--s4); border: 2px solid var(--backbord); border-radius: var(--radius-m);
  color: var(--backbord); font-weight: 700;
}
.form-fehler[hidden] { display: none; }
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.absenden { display: grid; gap: var(--s4); justify-items: start; }
.datenschutz-hinweis { font-size: 14px; line-height: 20px; color: var(--schlick); max-width: 60ch; }
.datenschutz-hinweis a { text-decoration-thickness: 2px; text-underline-offset: 4px; }
.absenden .knopf { min-width: 220px; }
.form-status { font-size: 14px; line-height: 20px; }
.form-status:empty { display: none; }
.form-status.ist-fehler { color: var(--backbord); font-weight: 700; }
.form-status a { color: inherit; }
.bestaetigung { padding: var(--s5) 0; }
.bestaetigung:focus { outline: none; }
.bestaetigung-marke {
  position: relative; display: block; width: 40px; height: 40px; border-radius: 50%;
  box-shadow: inset 0 0 0 3px var(--steuerbord);
}
.bestaetigung-marke::after { content: ""; position: absolute; inset: 12px; border-radius: 50%; background: var(--steuerbord); }
.bestaetigung h3 { margin-top: var(--s5); font-size: 32px; line-height: 40px; }
.bestaetigung p { margin-top: var(--s4); font-size: 20px; line-height: 30px; max-width: 46ch; }
#form-wrap.ist-gesendet form { display: none; }

/* Kartenblatt läuft weiter: Randleiste, Planquadrat, Bogenrand */
.quadratleiste.leiste-abschnitt, .quadratleiste.leiste-fuss {
  display: grid; grid-template-columns: repeat(8, 1fr); margin: 0 0 var(--s7); padding: 0;
  font-size: 12px; line-height: 24px; font-weight: 700; letter-spacing: .08em; text-align: center; color: var(--schlick);
  border-bottom: 2px solid var(--linie);
}
.leiste-abschnitt li + li, .leiste-fuss li + li { box-shadow: inset 2px 0 0 var(--linie); }
.fragen .leiste-abschnitt { grid-column: 1 / -1; }
.leiste-fuss { flex: 1 0 100%; margin-bottom: var(--s5) !important; }
.portrait { position: relative; }
.planquadrat {
  position: absolute; left: var(--s3); top: var(--s3); z-index: 1;
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: var(--s1) var(--s2); border-radius: var(--radius-s);
  background: var(--watt); border: 2px solid var(--flut);
  font-size: 14px; line-height: 20px; font-weight: 800; letter-spacing: .04em; font-variant-numeric: tabular-nums;
}
.planquadrat .punkt { --punkt: 8px; background: var(--flut); }
.ueber .planquadrat { color: var(--flut); }
.bogen-rand {
  grid-column: 4 / span 5; grid-row: 1; display: grid; grid-template-columns: repeat(5, 1fr);
  margin: 0; padding: 0 0 var(--s2); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .08em;
  text-align: center; color: var(--grau);
}
.bogen-rand li { position: relative; }
.bogen-rand li + li::before { content: ""; position: absolute; left: 0; bottom: -8px; width: 2px; height: 8px; border-radius: 2px; background: var(--grau); }

/* ===================== Fußzeile ===================== */

.fuss { background: var(--watt-2); padding: var(--s7) 0; font-size: 14px; line-height: 20px; }
.fuss .innen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s6); }
.fuss-wer { display: flex; align-items: center; gap: var(--s4); margin-right: auto; }
.fuss-logo { height: 29.6px; width: auto; margin: -4.8px; }
.fuss-links { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }
.fuss-links a { display: inline-block; padding: var(--s2) 0; text-decoration: none; }
.fuss-links a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.fuss-recht { color: var(--schlick); }

/* ===================== Unterseiten (Impressum, Datenschutz) ===================== */

body:has(.rechtstext) { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
body:has(.rechtstext) .rechtstext { flex: 1 0 auto; }
.rechtstext { padding: var(--s9) 0; }
.rechtstext .leiste-abschnitt { display: none; }
.rechtstext .innen > * { max-width: 66ch; }
.rechtstext h1 { color: var(--flut); }
.rechtstext p { margin-top: var(--s5); font-size: 20px; line-height: 30px; }
.rechtstext address { margin-top: var(--s5); font-style: normal; font-size: 20px; line-height: 30px; }
.rechtstext .zurueck { display: inline-block; margin-top: var(--s7); font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 6px; }
/* Abschnitte der Rechtstexte: Zwischentitel in der Größe von h3, Aufzählung mit Punkten */
.rechtstext h2 { margin-top: var(--s7); font-size: 24px; line-height: 32px; letter-spacing: -.01em; }
.rechtstext h2 + p, .rechtstext h2 + address { margin-top: var(--s3); }
.rechtstext ul { margin-top: var(--s3); padding-left: 1.25em; list-style: disc; font-size: 20px; line-height: 30px; }
.rechtstext li + li { margin-top: var(--s2); }
.rechtstext .stand { margin-top: var(--s7); color: var(--schlick); }

/* ===================== Umbrüche ===================== */

@media (max-width: 1099px) {
  .hauptnav { display: none; }
  .js .menue-knopf { display: inline-flex; }
  .js .hauptnav.offen {
    display: block; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--watt); padding: var(--s2) var(--rand) var(--s5);
    box-shadow: 0 24px 32px -24px rgba(19, 33, 29, .35);
  }
  .js .hauptnav.offen ul { display: block; }
  .js .hauptnav.offen a { display: block; padding: var(--s3) 0; font-size: 20px; line-height: 28px; border-top: 2px solid var(--linie); }
  html:not(.js) .kopf-innen { flex-wrap: wrap; height: auto; min-height: var(--kopf-hoehe); padding-top: var(--s3); padding-bottom: var(--s3); row-gap: var(--s2); }
  html:not(.js) .hauptnav { display: block; order: 3; flex: 1 0 100%; }
  html:not(.js) .hauptnav ul { flex-wrap: wrap; gap: 0 var(--s5); }
  .kopf-innen { gap: var(--s4); }
}
@media (max-width: 1023px) {
  .tafel-text { grid-column: 1 / -1; padding: 0; }
  .tafel > .legende-liste, .legende-block { grid-column: 1 / -1; margin-top: var(--s6); }
  .referenz, .referenz.gespiegelt { display: block; }
  .referenz .bilder, .referenz.gespiegelt .bilder { padding: 0 0 var(--s6) 0; margin-right: var(--s6); }
  .referenz.gespiegelt .bilder { margin: 0 0 0 var(--s6); }
  .bild-mobil { right: calc(var(--s6) * -1); width: 26%; }
  .gespiegelt .bild-mobil { left: calc(var(--s6) * -1); }
  .referenz-text, .referenz.gespiegelt .referenz-text { padding: var(--s5) 0 0; }
  .ueber .innen { grid-template-columns: 1fr; }
  .portrait { grid-column: 1; width: min(240px, 60%); }
  .ueber-text { grid-column: 1; margin-top: var(--s6); }
  .fragen .innen { display: block; }
  .fragen .abschnittskopf { position: static; padding: 0; }
  .anfrage .innen { display: block; }
  .anfrage-text { padding: 0; position: static; }
  .bogen-rand { margin-top: var(--s7); }
}
@media (max-width: 767px) {
  .kopf-innen { gap: var(--s2); }
  .marke img { height: 32.5px; margin: -5.3px; }
  .kopf-knopf { min-height: 40px; padding: 0 var(--s3); font-size: 14px; }
  .vorne { font-size: 20px; line-height: 30px; }
  .claim { font-size: 32px; line-height: 40px; }
  .referenz h3 { font-size: 24px; line-height: 32px; }
  .bogen { padding: var(--s5) var(--s4); margin-left: calc(var(--rand) * -1 + 8px); margin-right: calc(var(--rand) * -1 + 8px); }
  #anfrage-formular { grid-template-columns: 1fr; }
  .wahlen { grid-template-columns: 1fr; }
  .absenden .knopf { width: 100%; }
  .frage p { padding-right: 0; }
  .fuss .innen { display: grid; }
}
@media (max-width: 374px) {
  .kopf-knopf { display: none; }
}
/* Schmale Handys: lange Wörter passen auf die Satzbreite (100vw minus 2 x 16 px Rand), jeweils nur
   unterhalb der Breite, ab der das Wort in voller Größe passt. Teiler = Wortbreite in em plus kleine Reserve:
   H1 „Datenschutzerklärung“ 10,64 em (340,4 px bei 32 px), passt ab 373 px, Teiler 10,8;
   H2 „Verbraucherstreitbeilegung“ 13,5 em (324 px bei 24 px), passt ab 356 px, Teiler 13,7;
   Claim „Agenturgeschwafel.“ 9,65 em (308,8 px bei 32 px), passt ab 341 px, Teiler 9,7. */
@media (max-width: 372px) {
  .rechtstext h1 { font-size: min(var(--h1), calc((100vw - 32px) / 10.8)); overflow-wrap: break-word; }
}
@media (max-width: 359px) {
  .rechtstext h2 { font-size: min(24px, calc((100vw - 32px) / 13.7)); overflow-wrap: break-word; }
}
@media (max-width: 344px) {
  .claim { font-size: min(32px, calc((100vw - 32px) / 9.7)); }
}
/* Tablet quer: Fragenkopf mit etwas mehr Satzbreite, im Formular steht die längste
   Auswahl über beide Spalten, damit „KI Beratung und Automatisierung“ nicht bricht */
@media (min-width: 1024px) and (max-width: 1279px) {
  .fragen .abschnittskopf { padding-right: var(--s5); }
  .wahlen .wahl:first-of-type { grid-column: 1 / -1; }
}

/* Tippflächen bis 1024 px: jedes Bedienelement mindestens 44 px hoch. Wo das Bild
   gleich bleiben soll, wächst nur die Trefferfläche (Innenabstand, durch negativen
   Außenabstand ausgeglichen). */
@media (max-width: 1024px) {
  .marke { display: flex; align-items: center; min-height: 44px; }
  .kopf-knopf { min-height: 44px; }
  html:not(.js) .hauptnav a { padding: 9px 0; }
  /* -9px gleicht das Innenabstand-Plus aus; gekoppelt an den Grundabstand (--s5, ca. Zeile 639). */
  .textlink { padding: 9px 0; margin-top: calc(var(--s5) - 9px); margin-bottom: -9px; }
  /* Negativer Außenabstand setzt einen Abstand von mindestens 12 px (--s4) zum Absendeknopf voraus. */
  .datenschutz-hinweis a { display: inline-block; padding: 12px 0; margin: -12px 0; }
  .fuss-links a { padding: 12px 0; margin: -4px 0; }
  /* -9px gekoppelt an den Grundabstand (--s7, ca. Zeile 811). */
  .rechtstext .zurueck { padding: 9px 0; margin-top: calc(var(--s7) - 9px); margin-bottom: -9px; }
}

/* Ruhige Einblendung der Referenzbilder und des Porträts. Die Klassen setzt nur main.js,
   und nur ohne reduzierte Bewegung; ohne JS ist alles sofort sichtbar. */
@media (prefers-reduced-motion: no-preference) {
  .einblend-warten { opacity: 0; transform: translateY(var(--einblend-weg)); }
  .einblend-da {
    opacity: 1; transform: none;
    transition: opacity var(--einblend-dauer) var(--aus), transform var(--einblend-dauer) var(--aus);
  }
}
@media print { .einblend-warten { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation: none !important; }
}

/* Übergangshinweis cloudchris: nur bei ?von=cloudchris, main.js nimmt hidden weg.
   Aufgelegte Karte in Flutkante (Handy und Tablet hoch unten, ab 1024 oben rechts), liegt über dem Blatt und schiebt
   nichts. Der Sitzring aus der Karte markiert, ein 2 px Strich in Tonnengelb
   streicht den alten Namen. Gelb markiert nur, auf Flutkante 9,04:1. */
.uebergang {
  position: fixed; right: var(--rand); bottom: var(--s5); z-index: 40;
  width: min(400px, calc(100vw - 2 * var(--rand)));
  display: grid; grid-template-columns: 1fr auto; column-gap: var(--s3);
  padding: var(--s5);
  background: var(--flut); color: var(--watt);
  border-radius: var(--radius-l);
  box-shadow: 0 24px 48px -24px rgba(19, 33, 29, .45);
}
.uebergang[hidden] { display: none; }
.uebergang :focus-visible { outline-color: var(--watt); }
.uebergang ::selection { background: var(--watt); color: var(--flut); }
.uebergang-marke {
  grid-column: 1; grid-row: 1; align-self: center;
  display: flex; align-items: center; gap: var(--s2);
  font: 700 14px/20px var(--font); color: var(--linie);
}
.uebergang-sitz {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--gelb); background: var(--gelb);
  box-shadow: inset 0 0 0 4px var(--flut);
}
.uebergang-titel {
  grid-column: 1 / -1; grid-row: 2; margin-top: var(--s3);
  font: 800 24px/32px var(--font); letter-spacing: -0.01em; text-wrap: balance;
}
.uebergang-alt { position: relative; color: var(--grau); white-space: nowrap; }
.uebergang-alt::after {
  content: ""; position: absolute; left: -2px; right: -2px; top: 54%;
  height: 2px; border-radius: 1px; background: var(--gelb);
  transform-origin: left center;
}
.uebergang-text { grid-column: 1 / -1; grid-row: 3; margin-top: var(--s2); color: var(--linie); }
.uebergang-zu {
  grid-column: 2; grid-row: 1; position: relative;
  width: 44px; height: 44px; margin: -10px -10px 0 0; padding: 0;
  border: 2px solid transparent; border-radius: var(--radius-m);
  background: transparent; color: var(--watt); cursor: pointer;
  transition: background-color .2s var(--aus), border-color .2s var(--aus);
}
.uebergang-zu:hover { background: var(--priel); border-color: var(--priel); }
.uebergang-zu span::before, .uebergang-zu span::after {
  content: ""; position: absolute; left: 11px; top: 19px;
  width: 18px; height: 2px; border-radius: 1px; background: currentColor;
}
.uebergang-zu span::before { transform: rotate(45deg); }
.uebergang-zu span::after { transform: rotate(-45deg); }
@media (max-width: 767px) {
  .uebergang { left: var(--s4); right: var(--s4); bottom: var(--s4); width: auto; padding: var(--s4) var(--s5) var(--s5); }
  .uebergang-titel { font-size: 20px; line-height: 28px; }
}
/* Ab Tablet quer oben rechts unter dem Kopf: unten rechts läge die Karte auf dem
   Anfrageknopf der Auswahl, oben im Quadrat G/H ist das Blatt leer. */
@media (min-width: 1024px) {
  .uebergang { top: calc(var(--kopf-hoehe) + var(--s4)); bottom: auto; --uebergang-weg: calc(-1 * var(--einblend-weg)); }
}
@media (prefers-reduced-motion: no-preference) {
  .uebergang { animation: uebergang-rein var(--einblend-dauer) var(--aus) both; }
  .uebergang-alt::after { animation: uebergang-strich .6s var(--aus) .45s both; }
  .uebergang.geht { animation: uebergang-raus .25s var(--aus) forwards; }
}
@keyframes uebergang-rein { from { opacity: 0; transform: translateY(var(--uebergang-weg, var(--einblend-weg))); } to { opacity: 1; transform: none; } }
@keyframes uebergang-raus { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(var(--uebergang-weg, var(--einblend-weg))); } }
@keyframes uebergang-strich { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media print { .uebergang { display: none; } }