/*
  Merseburger Ecke — Kundenseite (Regionalmarke der sieben Kommunen im südlichen Saalekreis).

  Alles first-party: Schriften liegen als .woff2 unter assets/fonts/, es gibt keine externen
  Requests (Contract §3). Der Entwurf stammt aus dem Kunden-Mockup (Tailwind-CDN + Google
  Fonts); beides ist hier durch eigenes CSS und self-hosted Schriften ersetzt.

  Struktur: @font-face → Tokens → Basis/A11y → Layout → Typografie → Header → Buttons
            → Hero → Marquee → Sektionen 01–06 → Footer → Rechtstexte → Motion → Responsive
*/

/* ---------- Schriften (self-hosted, latin) ---------- */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/inter-700.woff2') format('woff2'); }
@font-face { font-family: 'Khand'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/khand-500.woff2') format('woff2'); }
@font-face { font-family: 'Khand'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/khand-600.woff2') format('woff2'); }
@font-face { font-family: 'Khand'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/khand-700.woff2') format('woff2'); }

/* ---------- Metrisch angeglichene Ersatzschriften (ME-41) ----------
   Der Layout-Sprung im Hero kam zu 100 % vom Schriftwechsel: die Ersatzschrift hat
   andere Maße als die Webschrift, beim Tausch verschiebt sich der Umbruch, alles
   darunter rutscht (gemessen CLS 0,03732 bei 1280 px, 0,04175 bei 390 px; mit
   blockierten .woff2 jeweils 0,00000).

   Diese Regeln geben der Ersatzschrift dieselben Maße wie der Webschrift, damit der
   Tausch dimensionslos wird. Alle Werte stammen aus den echten Schriftdateien
   (unitsPerEm, hhea-ascent/descent/lineGap, gewichtete mittlere Vorschubbreite über
   den tatsächlichen Text des ersten Sichtfensters) — nicht geschätzt.

     size-adjust       = mittlere Zeichenbreite(Webschrift) / (der Ersatzschrift)
     ascent-override   = ascent(Webschrift)  / size-adjust
     descent-override  = descent(Webschrift) / size-adjust
     line-gap-override = lineGap(Webschrift) / size-adjust

   Geteilt wird durch size-adjust, weil die *-override-Werte laut CSS Fonts 5 relativ
   zum bereits skalierten Em gelten.

   Drei Gruppen, nach Metrik-Gleichheit zusammengefasst; der Browser nimmt die erste,
   deren local() auf dem Gerät existiert:
     Arial / Liberation Sans -> Windows, macOS (und Linux-Stände mit Liberation)
     Noto Sans               -> verbreiteter Linux-Standard
     DejaVu Sans             -> älterer Linux-Standard
   Alle drei sind hier aus den installierten Dateien nachgemessen. Arial und Liberation
   Sans sind per Design metrik-identisch (nachgemessen: beide ascent 90,53 %, descent
   21,19 %, lineGap 3,27 %), deshalb ein gemeinsamer Wertesatz.

   local() lädt nichts nach — es greift nur auf bereits installierte Schriften zu und
   erzeugt keinen Request. Contract §3 (first-party, keine externen Assets) bleibt
   unberührt. Findet der Browser keine der Familien, fällt er auf system-ui zurück
   wie zuvor; die Regeln sind dann wirkungslos, aber nie schädlich.

   unicode-range ist kein Beiwerk, sondern notwendig: ohne es greift die angeglichene
   Ersatzschrift auch für Zeichen, die der Webschrift FEHLEN. Khand kennt weder → noch ′;
   die rutschten bisher weiter auf Inter bzw. system-ui, wären mit einer offenen
   Ersatzregel aber in der size-adjust-skalierten Ersatzschrift gelandet und dadurch
   schmaler geworden — eine sichtbare Änderung am geladenen Schriftbild, die Kriterium 3
   dieses Tickets ausdrücklich verbietet. Der Bereich ist deshalb exakt die
   Zeichenabdeckung der jeweiligen Webschrift-Datei, aus ihr ausgelesen.

   Erzeugt aus den Schriftdateien; bei einem Schriftwechsel neu ableiten, nicht
   von Hand nachziehen. Methode und Skript stehen im Ticket ME-41. */
/* Arial / Liberation Sans */
@font-face {
  font-family: 'Inter Fallback Arial';
  font-style: normal;
  font-weight: 400;
  src: local('Arial'), local('ArialMT'), local('Liberation Sans');
  size-adjust: 105.03%;
  ascent-override: 92.24%;
  descent-override: 22.97%;
  line-gap-override: 0%;
  unicode-range: U+0, U+20-7E, U+A0-AC, U+AE-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+300-301, U+303-304, U+308-309, U+323, U+2002, U+2009, U+200B, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2191, U+2193, U+2212, U+FEFF, U+FFFF;
}
@font-face {
  font-family: 'Inter Fallback Arial';
  font-style: normal;
  font-weight: 600;
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold');
  size-adjust: 100.88%;
  ascent-override: 96.03%;
  descent-override: 23.91%;
  line-gap-override: 0%;
  unicode-range: U+0, U+20-7E, U+A0-AC, U+AE-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+300-301, U+303-304, U+308-309, U+323, U+2002, U+2009, U+200B, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2191, U+2193, U+2212, U+FEFF, U+FFFF;
}
@font-face {
  font-family: 'Inter Fallback Arial';
  font-style: normal;
  font-weight: 700;
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold');
  size-adjust: 101.9%;
  ascent-override: 95.07%;
  descent-override: 23.67%;
  line-gap-override: 0%;
  unicode-range: U+0, U+20-7E, U+A0-AC, U+AE-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+300-301, U+303-304, U+308-309, U+323, U+2002, U+2009, U+200B, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2191, U+2193, U+2212, U+FEFF, U+FFFF;
}
@font-face {
  font-family: 'Khand Fallback Arial';
  font-style: normal;
  font-weight: 500;
  src: local('Arial'), local('ArialMT'), local('Liberation Sans');
  size-adjust: 78.09%;
  ascent-override: 134.47%;
  descent-override: 61.34%;
  line-gap-override: 0%;
  unicode-range: U+0, U+D, U+20-7E, U+A0-FF, U+131, U+152-153, U+2C6, U+2DA, U+2DC, U+200B, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+2215, U+FFFF;
}
@font-face {
  font-family: 'Khand Fallback Arial';
  font-style: normal;
  font-weight: 600;
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold');
  size-adjust: 74.76%;
  ascent-override: 140.45%;
  descent-override: 64.07%;
  line-gap-override: 0%;
  unicode-range: U+0, U+D, U+20-7E, U+A0-FF, U+131, U+152-153, U+2C6, U+2DA, U+2DC, U+200B, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+2215, U+FFFF;
}
@font-face {
  font-family: 'Khand Fallback Arial';
  font-style: normal;
  font-weight: 700;
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold');
  size-adjust: 76.17%;
  ascent-override: 137.84%;
  descent-override: 62.88%;
  line-gap-override: 0%;
  unicode-range: U+0, U+D, U+20-7E, U+A0-FF, U+131, U+152-153, U+2C6, U+2DA, U+2DC, U+200B, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+2215, U+FFFF;
}

/* Noto Sans */
@font-face {
  font-family: 'Inter Fallback Noto Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Noto Sans Regular'), local('NotoSans-Regular');
  size-adjust: 100.35%;
  ascent-override: 96.53%;
  descent-override: 24.04%;
  line-gap-override: 0%;
  unicode-range: U+0, U+20-7E, U+A0-AC, U+AE-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+300-301, U+303-304, U+308-309, U+323, U+2002, U+2009, U+200B, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2191, U+2193, U+2212, U+FEFF, U+FFFF;
}
@font-face {
  font-family: 'Inter Fallback Noto Sans';
  font-style: normal;
  font-weight: 600;
  src: local('Noto Sans Bold'), local('NotoSans-Bold');
  size-adjust: 97.04%;
  ascent-override: 99.83%;
  descent-override: 24.86%;
  line-gap-override: 0%;
  unicode-range: U+0, U+20-7E, U+A0-AC, U+AE-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+300-301, U+303-304, U+308-309, U+323, U+2002, U+2009, U+200B, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2191, U+2193, U+2212, U+FEFF, U+FFFF;
}
@font-face {
  font-family: 'Inter Fallback Noto Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Noto Sans Bold'), local('NotoSans-Bold');
  size-adjust: 98.01%;
  ascent-override: 98.84%;
  descent-override: 24.61%;
  line-gap-override: 0%;
  unicode-range: U+0, U+20-7E, U+A0-AC, U+AE-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+300-301, U+303-304, U+308-309, U+323, U+2002, U+2009, U+200B, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2191, U+2193, U+2212, U+FEFF, U+FFFF;
}
@font-face {
  font-family: 'Khand Fallback Noto Sans';
  font-style: normal;
  font-weight: 500;
  src: local('Noto Sans Regular'), local('NotoSans-Regular');
  size-adjust: 74.61%;
  ascent-override: 140.73%;
  descent-override: 64.2%;
  line-gap-override: 0%;
  unicode-range: U+0, U+D, U+20-7E, U+A0-FF, U+131, U+152-153, U+2C6, U+2DA, U+2DC, U+200B, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+2215, U+FFFF;
}
@font-face {
  font-family: 'Khand Fallback Noto Sans';
  font-style: normal;
  font-weight: 600;
  src: local('Noto Sans Bold'), local('NotoSans-Bold');
  size-adjust: 71.91%;
  ascent-override: 146.01%;
  descent-override: 66.61%;
  line-gap-override: 0%;
  unicode-range: U+0, U+D, U+20-7E, U+A0-FF, U+131, U+152-153, U+2C6, U+2DA, U+2DC, U+200B, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+2215, U+FFFF;
}
@font-face {
  font-family: 'Khand Fallback Noto Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Noto Sans Bold'), local('NotoSans-Bold');
  size-adjust: 73.27%;
  ascent-override: 143.3%;
  descent-override: 65.37%;
  line-gap-override: 0%;
  unicode-range: U+0, U+D, U+20-7E, U+A0-FF, U+131, U+152-153, U+2C6, U+2DA, U+2DC, U+200B, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+2215, U+FFFF;
}

/* DejaVu Sans */
@font-face {
  font-family: 'Inter Fallback DejaVu Sans';
  font-style: normal;
  font-weight: 400;
  src: local('DejaVu Sans'), local('DejaVuSans');
  size-adjust: 93.37%;
  ascent-override: 103.76%;
  descent-override: 25.83%;
  line-gap-override: 0%;
  unicode-range: U+0, U+20-7E, U+A0-AC, U+AE-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+300-301, U+303-304, U+308-309, U+323, U+2002, U+2009, U+200B, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2191, U+2193, U+2212, U+FEFF, U+FFFF;
}
@font-face {
  font-family: 'Inter Fallback DejaVu Sans';
  font-style: normal;
  font-weight: 600;
  src: local('DejaVu Sans Bold'), local('DejaVuSans-Bold');
  size-adjust: 84.76%;
  ascent-override: 114.29%;
  descent-override: 28.46%;
  line-gap-override: 0%;
  unicode-range: U+0, U+20-7E, U+A0-AC, U+AE-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+300-301, U+303-304, U+308-309, U+323, U+2002, U+2009, U+200B, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2191, U+2193, U+2212, U+FEFF, U+FFFF;
}
@font-face {
  font-family: 'Inter Fallback DejaVu Sans';
  font-style: normal;
  font-weight: 700;
  src: local('DejaVu Sans Bold'), local('DejaVuSans-Bold');
  size-adjust: 85.62%;
  ascent-override: 113.15%;
  descent-override: 28.17%;
  line-gap-override: 0%;
  unicode-range: U+0, U+20-7E, U+A0-AC, U+AE-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+300-301, U+303-304, U+308-309, U+323, U+2002, U+2009, U+200B, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2191, U+2193, U+2212, U+FEFF, U+FFFF;
}
@font-face {
  font-family: 'Khand Fallback DejaVu Sans';
  font-style: normal;
  font-weight: 500;
  src: local('DejaVu Sans'), local('DejaVuSans');
  size-adjust: 69.42%;
  ascent-override: 151.26%;
  descent-override: 69%;
  line-gap-override: 0%;
  unicode-range: U+0, U+D, U+20-7E, U+A0-FF, U+131, U+152-153, U+2C6, U+2DA, U+2DC, U+200B, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+2215, U+FFFF;
}
@font-face {
  font-family: 'Khand Fallback DejaVu Sans';
  font-style: normal;
  font-weight: 600;
  src: local('DejaVu Sans Bold'), local('DejaVuSans-Bold');
  size-adjust: 62.82%;
  ascent-override: 167.16%;
  descent-override: 76.26%;
  line-gap-override: 0%;
  unicode-range: U+0, U+D, U+20-7E, U+A0-FF, U+131, U+152-153, U+2C6, U+2DA, U+2DC, U+200B, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+2215, U+FFFF;
}
@font-face {
  font-family: 'Khand Fallback DejaVu Sans';
  font-style: normal;
  font-weight: 700;
  src: local('DejaVu Sans Bold'), local('DejaVuSans-Bold');
  size-adjust: 64%;
  ascent-override: 164.05%;
  descent-override: 74.84%;
  line-gap-override: 0%;
  unicode-range: U+0, U+D, U+20-7E, U+A0-FF, U+131, U+152-153, U+2C6, U+2DA, U+2DC, U+200B, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+2215, U+FFFF;
}

/* ---------- Design-Tokens ---------- */
:root {
  /* Marke. --orange ist die Grafik-/Flächenfarbe; für TEXT und für Flächen mit Text
     gibt es abgedunkelte Varianten, weil das Marken-Orange sonst unter 4,5:1 bleibt:
     #e05c2b als Text auf --paper = 3,22:1 (durchgefallen), weiß auf #e05c2b = 3,66:1. */
  --navy: #17223b;
  --navy-soft: #2a3752;        /* Fließtext auf hellem Grund — 10,46:1 */
  --orange: #e05c2b;           /* nur Grafik: Rauten, Linien, Schlagschatten */
  --orange-cta: #c04a1d;       /* Button-Fläche, weißer Text — 4,95:1 */
  --orange-text: #b03f17;      /* Orange als Text — 5,18:1 auf paper, 4,70:1 auf warm */
  --orange-section: #e4663a;   /* Sektion 04 Fläche, Navy-Text darauf — 4,71:1 */
  --yellow: #f4c430;           /* Navy darauf = 9,62:1 */
  --green: #16754b;
  --green-bright: #00a97d;     /* auf Navy = 5,25:1 */
  --blue: #0c4c84;
  --aqua: #8acbbb;             /* auf Navy = 8,54:1 */
  --paper: #f5f0e6;
  --paper-warm: #ede5d4;
  --line: rgba(23, 34, 59, 0.14);

  /* Die drei Fallback-Familien stehen VOR 'Inter' und system-ui: sie sind die
     metrisch angeglichenen Fassungen von oben (ME-41). Greift keine, geht es
     unverändert weiter wie bisher. */
  --display: 'Khand', 'Khand Fallback Arial', 'Khand Fallback Noto Sans', 'Khand Fallback DejaVu Sans', 'Inter', system-ui, sans-serif;
  --body: 'Inter', 'Inter Fallback Arial', 'Inter Fallback Noto Sans', 'Inter Fallback DejaVu Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --maxw: 1400px;
  --maxw-prose: 42rem;
  --pad: 1.5rem;
}

@media (min-width: 1024px) {
  :root { --pad: 2.5rem; }
}

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

html {
  scroll-behavior: smooth;
  /* Sticky-Header nicht über Anker-Ziele legen */
  scroll-padding-top: 80px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--navy);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; }
::selection { background: var(--orange-cta); color: #fff; }

/* ---------- A11y ---------- */
:focus-visible {
  outline: 3px solid var(--orange-cta);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--navy);
  color: var(--paper);
  padding: 0.75rem 1.25rem;
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.skip:focus { left: 0; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.section {
  position: relative;
  padding-block: clamp(4rem, 9vw, 9rem);
  overflow: hidden;
}
.section--paper { background: var(--paper); }
.section--warm  { background: var(--paper-warm); }
.section--navy  { background: var(--navy); color: var(--paper); }
.section--orange { background: var(--orange-section); color: var(--navy); }

/* Große, sehr blasse Sektionsnummer im Hintergrund (Grafiksprache des Styleguides) */
.section-num {
  position: absolute;
  top: -2rem;
  right: -1.5rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(11rem, 28vw, 30rem);
  line-height: 0.8;
  letter-spacing: -0.05em;
  color: var(--navy);
  opacity: 0.045;
  pointer-events: none;
  user-select: none;
}
.section-num.light { color: #fff; opacity: 0.06; }
.section-num.on-orange { color: var(--navy); opacity: 0.07; }

/* Kopfzeile einer Sektion: dünne Orange-Linien ober- und unterhalb */
.rules {
  padding-block: 0.9rem;
  border-top: 1.5px solid var(--orange);
  border-bottom: 1.5px solid var(--orange);
}
.rules--navy { border-color: var(--navy); }

.section-head {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
@media (min-width: 768px) {
  .section-head--split {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
  .section-head--split > :last-child { max-width: 26rem; }
}

/* ---------- Typografie ---------- */
.label {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 0.72rem;
}
.label--orange { color: var(--orange-text); }
.label--yellow { color: var(--yellow); }

.d-xxl, .d-xl, .d-l {
  font-family: var(--display);
  font-weight: 700;
  margin: 0;
}
.d-xxl { font-size: clamp(3rem, 9.5vw, 9rem);    line-height: 0.82; letter-spacing: -0.025em; }
.d-xl  { font-size: clamp(2.25rem, 6vw, 5.5rem); line-height: 0.85; letter-spacing: -0.02em; }
.d-l   { font-size: clamp(1.6rem, 3.4vw, 3rem);  line-height: 0.9;  letter-spacing: -0.015em; }

.big-num {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(3.25rem, 8vw, 7rem);
  line-height: 0.82;
  letter-spacing: -0.02em;
}
.big-num--sm { font-size: clamp(2.5rem, 5.5vw, 4.5rem); }

.tagline {
  font-family: var(--display);
  font-weight: 500;
  font-style: italic;
  letter-spacing: -0.005em;
  font-size: clamp(1.5rem, 3vw, 2rem);
}

.lead {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.7;
  color: var(--navy-soft);
  max-width: 38rem;
}
.section--navy .lead,
.section--orange .lead { color: inherit; }
.section--navy .lead { opacity: 0.9; }

.prose-note { color: var(--navy-soft); line-height: 1.7; }
.section--navy .prose-note { color: var(--paper); opacity: 0.85; }

/* Raute — das durchgehende Grafikelement der Marke */
.diamond {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transform: rotate(45deg);
  background: var(--orange);
  display: inline-block;
}
.diamond--green { background: var(--green); }
.diamond--green-bright { background: var(--green-bright); }
.diamond--blue { background: var(--blue); }
.diamond--yellow { background: var(--yellow); }
.diamond--aqua { background: var(--aqua); }
.diamond--navy { background: var(--navy); }

/* ---------- Utilities ----------
   Bewusst als Klassen statt als style="…"-Attribute: die CSP in _headers setzt
   style-src 'self', womit Inline-Styles (auch Attribute) im Browser blockiert würden. */
.m-0  { margin: 0; }
.mt-1 { margin-top: 0.75rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 2rem; }
.mt-4 { margin-top: 2.5rem; }
.mb-head { margin-bottom: clamp(3rem, 6vw, 5rem); }

.c-white  { color: #fff; }
.c-navy   { color: var(--navy); }
.c-yellow { color: var(--yellow); }
.c-orange { color: var(--orange); }

/* ---------- Header ---------- */
.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(245, 240, 230, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1.5px solid var(--orange);
}
.head-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 72px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--navy);
}
.brand-crests { display: flex; gap: 0.25rem; }
/* flex-shrink: 0 ist hier nicht Kosmetik: als Flex-Kinder gaben die beiden Wappen bei
   engem Kopfbereich nach und standen auf schmalen Geräten als 8–20 px breite Farbstreifen
   statt als Wappen da (gemessen 8 px bei 320 px, 20 px bei 390 px Viewport). Ein Bild ist
   keine Füllmasse — es behält seine 26 px, der Platz kommt aus .head-actions (s. ME-30). */
.brand-crests img { width: 26px; height: 26px; flex-shrink: 0; }
.brand-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.nav-main { display: none; }
@media (min-width: 1024px) {
  .nav-main {
    display: flex;
    align-items: center;
    gap: 2rem;
  }
}
.nav-main a {
  position: relative;
  white-space: nowrap;
  padding: 0.25rem 0;
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.9rem;
  color: var(--navy);
  text-decoration: none;
}
.nav-main a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: var(--orange);
  transition: width 0.3s ease;
}
/* Mit dem Menüpunkt „Wochenmarkt" (ME-71) sind es fünf Einträge; zwischen 1024 und
   1279 px brachen „Die Sieben" und „Leben & Arbeiten" sonst zweizeilig um. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .nav-main { gap: 1.1rem; }
  .nav-main a { font-size: 0.82rem; letter-spacing: 0.06em; }
}
.nav-main a:hover::after,
.nav-main a:focus-visible::after { width: 100%; }

.head-actions { display: flex; align-items: center; gap: 0.75rem; }
/* Der Knopf im Kopfbereich bleibt einzeilig, auf jeder Breite. „Gespräch starten" brach
   sonst zwischen 430 px und rund 520 px um und machte die Kopfleiste 63 px statt 38 px
   hoch — ein Knopf, der über zwei Zeilen läuft, liest sich wie ein Layoutfehler. Unter
   390 px weicht er ganz (Regel am Dateiende), dazwischen wird er kompakter gesetzt. */
.head-actions .btn { white-space: nowrap; }

/* Mobile-Menü */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  background: transparent;
  border: 1.5px solid var(--navy);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--navy);
  transition: transform 0.3s ease, opacity 0.2s ease;
}
@media (min-width: 1024px) { .nav-toggle { display: none; } }

/* Offen wird aus dem Burger ein ✕: derselbe Knopf schließt jetzt, und das soll man sehen.
   7px = halbe Balkenhöhe + Abstand + halbe Balkenhöhe, die äußeren Balken landen also
   genau auf der Mitte des mittleren, der ausgeblendet wird. */
.site-head.open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-head.open .nav-toggle span:nth-child(2) { opacity: 0; }
.site-head.open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile {
  display: none;
  border-top: 1px solid var(--line);
  padding-block: 1rem;
}
.site-head.open .nav-mobile { display: block; }
@media (min-width: 1024px) { .site-head.open .nav-mobile { display: none; } }
.nav-mobile a {
  display: block;
  padding: 0.7rem 0;
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.nav-mobile a:last-child { border-bottom: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1.9rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1), background 0.35s, color 0.35s,
              border-color 0.35s, box-shadow 0.35s;
}
.btn--sm { padding: 0.55rem 1.2rem; font-size: 0.85rem; letter-spacing: 0.12em; }

.btn--primary { background: var(--orange-cta); color: #fff; border-color: var(--orange-cta); }
.btn--primary:hover {
  background: var(--navy); border-color: var(--navy);
  transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--orange);
}

.btn--outline { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--outline:hover {
  background: var(--navy); color: #fff;
  transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--yellow);
}

.btn--light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.55); }
.btn--light:hover {
  background: var(--yellow); color: var(--navy); border-color: var(--yellow);
  transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--orange);
}

/* Gelb auf Navy: der stärkste Ruf auf dunkler Fläche (Navy-Text auf Gelb = 9,62:1). */
.btn--yellow { background: var(--yellow); color: var(--navy); border-color: var(--yellow); }
.btn--yellow:hover {
  transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--orange);
}

.btn--navy { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn--navy:hover {
  transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--navy);
  background: transparent; color: var(--navy);
}

/* ---------- Foto-Flächen ----------
   Der langsame Zoom bei Hover gehört zu ALLEN neun Bildflächen der Seite: Hero-Foto,
   die beiden Collage-Bilder in Sektion 03 und die sechs Magazin-Kacheln in Sektion 05.
   In der Vorlage hing das an einer einzigen Klasse (.photo-card); hier steht die Regel
   deshalb ebenfalls genau einmal, statt sie je Komponente zu wiederholen — sonst fehlt
   sie erfahrungsgemäß irgendwo. Voraussetzung ist jeweils overflow: hidden am Rahmen. */
.hero-art .photo img,
.leben-slide img,
.mag-item img,
.amb-place-shot img {
  transition: transform 1.1s cubic-bezier(.2, .8, .2, 1);
}
.hero-art .photo:hover img,
.leben-slide:hover img,
.mag-item:hover img,
.amb-place-shot:hover img {
  transform: scale(1.06);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(4rem, 9vw, 7rem);
  background:
    radial-gradient(circle at 15% 15%, rgba(224, 92, 43, 0.06), transparent 42%),
    radial-gradient(circle at 85% 70%, rgba(0, 169, 125, 0.05), transparent 40%),
    var(--paper);
  overflow: hidden;
}
.hero-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.hero-meta .coords { color: var(--orange-text); }
.hero-meta .sep { opacity: 0.4; margin-inline: 0.5rem; }
/* Deckkraft 0,6 ergab Navy auf --paper nur 4,10:1 (11,5 px, weight 500 = normaler Text,
   Grenzwert 4,5:1). 0,7 hebt die Stelle auf 5,56:1 und lässt sie optisch zurückgenommen. */
.hero-meta .est { display: none; opacity: 0.7; }
@media (min-width: 768px) { .hero-meta .est { display: block; } }

.hero-grid { display: grid; gap: 3rem; }
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: 7fr 5fr; gap: 3.5rem; align-items: start; }
}

.hero-claim { display: flex; align-items: center; gap: 1rem; margin-top: 1.75rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: clamp(2.5rem, 4vw, 3rem); }

/* AKTUELL UNGENUTZT: Die Kennzahlen-Leiste ist im Markup auskommentiert (Kundenwunsch,
   dort sollen später andere Zahlen stehen). Die Regeln bleiben stehen, damit die Leiste
   ohne CSS-Arbeit zurückkommen kann — Begründung und Struktur stehen im Kommentar an der
   auskommentierten Stelle in index.html.

   Zwei Korrekturen an einer Regel, die sich widersprochen hat: `grid-template-columns`
   stand wirkungslos an einem Flex-Container (Grid-Eigenschaft, Flex-Layout) und ist
   entfallen. `flex-wrap: wrap` kam dazu, weil die drei Kennzahlen ohne Umbruch in einer
   einzigen Zeile bleiben — auf schmalen Telefonen drückt „Bestes Chancenprofil" die
   dritte Kennzahl dann bis an den Rand der Inhaltsspalte. Mit Umbruch rutscht sie
   sauber in eine zweite Zeile; auf dem Desktop ändert sich nichts, dort ist Platz. */
.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: clamp(3rem, 5vw, 5rem);
  padding-block: 0.9rem;
  border-top: 1.5px solid var(--orange);
  border-bottom: 1.5px solid var(--orange);
  justify-content: space-between;
}
/* Ebenfalls große Schrift (~44 px) auf --paper → volles Marken-Orange wie in der Vorlage. */
.hero-stats .unit { color: var(--orange); }
.hero-stats .label { margin-top: 0.35rem; opacity: 0.75; }

/* Rauten-Komposition rechts: Bild, Wappen und rotierte Quadrate */
.hero-art {
  position: relative;
  min-height: 430px;
}
@media (min-width: 1024px) { .hero-art { min-height: 620px; } }

.hero-art .dia {
  position: absolute;
  transform: rotate(45deg);
}
.hero-art .dia--navy   { width: 300px; height: 300px; background: var(--navy);  top: 40px; right: -30px; }
.hero-art .dia--green  { width: 78px;  height: 78px;  background: var(--green); top: -6px; left: 16px; }
.hero-art .dia--yellow { width: 34px;  height: 34px;  background: var(--yellow); bottom: 150px; right: 110px; z-index: 4; }

.hero-art .photo {
  position: absolute;
  top: 96px;
  left: 24px;
  width: 250px;
  height: 250px;
  overflow: hidden;
  background: var(--navy);
  box-shadow: 10px 10px 0 var(--orange);
  z-index: 2;
}
.hero-art .photo img { width: 100%; height: 100%; object-fit: cover; }

.hero-art .crest {
  position: absolute;
  z-index: 3;
  background: var(--paper-warm);
  object-fit: cover;   /* randlos wie in der Vorlage, auch falls ein Logo nicht exakt quadratisch ist */
  /* Die Grunddrehung steht hier und nicht nur im Keyframe (ME-42): sonst ist die
     Animation die einzige Quelle der Rautenform, und bei reduzierter Bewegung
     (animation: none) stünden die Wappen als Quadrate zwischen gedrehten .dia. */
  transform: rotate(45deg);
}
.hero-art .crest--a { width: 104px; height: 104px; top: 22px;    right: 30px; box-shadow: 6px 6px 0 var(--yellow); }
.hero-art .crest--b { width: 86px;  height: 86px;  bottom: 96px; right: 6px;  box-shadow: 6px 6px 0 var(--navy); }
.hero-art .crest--c { width: 72px;  height: 72px;  bottom: 24px; left: 6px;   box-shadow: 6px 6px 0 var(--green); }

/* Farbflächen statt Wappen: die drei Hero-Rauten tragen kein Wappen mehr, sondern je eine
   Markenfarbe. Der versetzte Schlagschatten entfällt dabei — er war der Absetzer für die
   hellen Wappenflächen; unter einer satten Vollfläche wirkt er wie ein Druckfehler.
   Als Klassen, nicht als style-Attribut: die CSP (style-src 'self') blockiert Inline-Styles. */
.hero-art .crest--fill        { box-shadow: none; }
.hero-art .crest--fill-yellow { background: var(--yellow); }
.hero-art .crest--fill-green  { background: var(--green); }
.hero-art .crest--fill-navy   { background: var(--navy); }

/* Versatz wie in der Vorlage: ohne ihn wippen alle Elemente im Gleichtakt, was
   mechanisch aussieht. Dort stehen die Werte als inline-style; hier müssen sie in die
   CSS-Datei, weil die CSP (style-src 'self') Inline-Styles blockiert. */
.hero-art .crest--c  { animation-delay: 1s; }
.hero-art .dia--yellow { animation-delay: 2s; }

@media (min-width: 1024px) {
  .hero-art .dia--navy { width: 360px; height: 360px; right: -40px; }
  .hero-art .photo { width: 280px; height: 280px; top: 110px; left: 60px; }
  .hero-art .crest--a { width: 120px; height: 120px; top: 30px; right: 40px; }
  .hero-art .crest--b { width: 96px; height: 96px; bottom: 120px; right: 10px; }
  .hero-art .crest--c { width: 80px; height: 80px; bottom: 40px; left: 10px; }
}

/* Deckkraft 0,5 ergab auf dem Hero-Verlauf nur 3,05:1 (11,5 px, weight 500 = normaler Text,
   Grenzwert 4,5:1). 0,7 ergibt 5,47:1 auf dem grün getönten Verlauf und 5,56:1 auf reinem
   --paper — der zurückgenommene Eindruck bleibt. */
.hero-art .art-num {
  position: absolute;
  right: 0;
  bottom: 0;
  color: var(--navy);
  opacity: 0.7;
}

/* ---------- Marquee (Städteband) ---------- */
.marquee {
  background: var(--navy);
  color: var(--paper);
  padding-block: 1.5rem;
  overflow: hidden;
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 55s linear infinite;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-group { display: flex; align-items: center; }
.marquee-item {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-inline: 1.75rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.5rem, 4vw, 3rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.marquee-item::after {
  content: '';
  width: 18px; height: 18px;
  background: var(--orange);
  transform: rotate(45deg);
  flex-shrink: 0;
}

/* ---------- 01 · Die sieben Ecken ---------- */
.crest-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .crest-grid { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
}

/* Die Kachel hebt sich an, das Wappen dreht sich leicht mit — zwei getrennte Bewegungen
   wie in der Vorlage. Dort liegen .wappen-tile (-10px) und .lift-card (-6px) beide auf
   demselben Element; bei gleicher Spezifität gewinnt die spätere Regel, gerendert werden
   also -6px. Genau der Wert steht hier. */
.crest-card {
  display: flex;
  flex-direction: column;
  transition: transform 0.55s cubic-bezier(.2, .8, .2, 1);
}
.crest-card:hover { transform: translateY(-6px); }
/* Die ganze Kachel ist ein Link auf die Website der Kommune. Ohne diese Regel unterstreicht
   der Browser Überschrift und Beschreibungstext — die Kachel liest sich dann wie ein
   Fließtext-Link statt wie eine Karte. Die Farben stehen weiter in .crest-body/.crest-role,
   deshalb hier nur die Unterstreichung und geerbte Textfarbe. */
.crest-card a {
  text-decoration: none;
  color: inherit;
}
/* Randlos: das Wappen füllt die Kachel vollständig aus. In der Vorlage steckt das Logo
   in einem <svg> mit preserveAspectRatio="xMidYMid slice" — das SVG-Gegenstück zu
   object-fit: cover — und ganz ohne Innenabstand. --paper-warm bleibt nur als Rückfall
   darunter stehen und ist im Normalzustand nie sichtbar. */
.crest-art {
  position: relative;
  background: var(--paper-warm);
  aspect-ratio: 1;
  overflow: hidden;
}
/* Alle sieben Kacheln sind bewusst gleich groß. Die Vorlage hebt Merseburg über zwei
   Rasterzeilen hervor — das funktioniert hier nicht: die Wappen sind flache, farbige
   Quadrate, die sich weder beschneiden (object-fit: cover zerschneidet das Emblem) noch
   strecken lassen, ohne dass eine tote Fläche und eine aus der Reihe fallende
   Überschrift entstehen. Gleich große Kacheln lesen sich sauberer. */
.crest-art img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.55s cubic-bezier(.2,.8,.2,1);
}
/* scale 1.09, nicht 1.06: ein um θ gedrehtes Quadrat deckt sein eigenes Quadrat erst ab
   cos θ + sin θ ab — bei 5° also 1.083. Mit 1.06 blitzten beim Hover die vier Ecken des
   Untergrunds durch, was randlos besonders auffällt. */
.crest-card:hover .crest-art img { transform: rotate(-5deg) scale(1.09); }

/* Die Vorlage blendet hier zusätzlich eine kleine römische Ziffer (I–VII) in die Ecke ein.
   Auf Wunsch entfernt: sie war ohne Kontext eher verwirrend als hilfreich. */
.crest-body { margin-top: 1rem; }
.crest-body .d-l { color: var(--navy); }
.crest-role { margin-top: 0.35rem; color: var(--orange-text); }
.crest-desc { margin: 0.75rem 0 0; font-size: 0.9rem; line-height: 1.65; color: var(--navy-soft); }

/* ---------- Wochenmarkt · Umfrage „Markt mit Mehrwert“ (ME-71) ----------
   Befristeter Kampagnen-Abschnitt ohne Nummer. Nach dem Teilnahmeschluss setzt main.js
   die Klasse .markt-vorbei auf <html>; alles mit data-wochenmarkt verschwindet dann.
   Die Regel steht hier und nicht im Skript, damit kein abgelaufener Aufruf aufblitzt:
   main.js läuft im <head>, die Klasse steht also vor dem ersten Zeichnen. */
.markt-vorbei [data-wochenmarkt] { display: none; }

/* Die Marktstände stehen auf der Unterkante, deshalb kein Innenabstand unten. */
.markt { padding-bottom: 0; }

.markt-cta {
  border: 1.5px solid var(--yellow);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  line-height: 1.7;
}
.markt-cta p { margin: 1rem 0 0; }
.markt-cta .markt-deadline {
  margin-top: 1.25rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  color: var(--yellow);
}
.markt-btn {
  width: 100%;
  justify-content: center;
  margin-top: 1.5rem;
  padding-block: 1.15rem;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  text-align: center;
}
.markt-cta .markt-note {
  margin-top: 1.5rem;
  font-size: 0.95rem;
  opacity: 0.85;
}

.markt-staende {
  margin-top: clamp(3rem, 6vw, 5rem);
  line-height: 0;
}
/* Ab 1920 px wächst die Grafik nicht weiter, sonst würde sie höher als der Text. */
.markt-staende img { display: block; width: 100%; max-width: 1920px; height: auto; margin-inline: auto; }

/* Hinweis im Hero: springt zum Abschnitt. */
.markt-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
  padding: 0.55rem 1rem;
  background: var(--yellow);
  color: var(--navy);
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s;
}
.markt-pill .diamond { width: 9px; height: 9px; }
/* Unter 430 px passt der Hinweis nicht in eine Zeile. Damit der Pfeil nicht allein umbricht
   und die Pille nicht mit leerer Fläche über die ganze Breite läuft, stehen die beiden
   Teile dann untereinander und die Pille ist nur so breit wie die längere Zeile. */
@media (max-width: 429.98px) {
  .markt-pill-text { display: flex; flex-direction: column; }
}
.markt-pill:hover {
  transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--orange);
}

/* ---------- 02 · Standortvorteile ---------- */
.stripe-bg {
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0, transparent 18px,
    rgba(23, 34, 59, 0.04) 18px, rgba(23, 34, 59, 0.04) 19px
  );
}

/* 1px Abstand + Navy-Hintergrund erzeugt die Trennlinien zwischen den Kacheln */
.stat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--navy);
}
/* minmax(0, 1fr) statt 1fr — das ist hier entscheidend: `1fr` bedeutet `minmax(auto, 1fr)`,
   und dessen Untergrenze ist min-content. Da die Kennzahlen bewusst breiter als der
   Innenraum der Kachel sind, würde jede Spalte auf ihre eigene Textbreite aufgehen und die
   vier Kacheln wären unterschiedlich breit (gemessen: 314–369 px statt gleichmäßig 299 px).
   Mit minmax(0, …) darf die Spur unter min-content fallen — die Kacheln bleiben gleich
   breit und die Zahl ragt wie in der Vorlage in den Innenabstand. */
@media (min-width: 640px)  { .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.stat {
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--paper);
  transition: transform 0.5s cubic-bezier(.2, .8, .2, 1);
}
.stat:hover { transform: translateY(-6px); }
.stat--yellow { background: var(--yellow); }
.stat--navy   { background: var(--navy); color: #fff; }
/* Die Vorlage setzt hier clamp(3.5rem, 8.5vw, 7.5rem). Damit ragen ALLE vier Kennzahlen
   über den Innenabstand hinaus, die breiteste („1.300ha") bei 1280 px um 70 px und damit
   auch über die Kachelkante — bewusst gegen die Vorlage abgewählt, weil abgeschnittene
   Zahlen schlechte UX sind.

   Die Größe ist so gewählt, dass die breiteste Zahl in JEDER Spaltenbreite in den
   Inhaltsbereich passt. Bindend ist der Punkt, an dem das vierspaltige Raster einsetzt
   (1024 px): dort bleiben nur ~174 px Inhalt. „1.300ha" ist rund das 2,68-fache der
   Schriftgröße breit, also sind dort höchstens ~65 px möglich → 6vw.
   Die Obergrenze ist nötig, weil der Inhaltsbereich ab 1400 px (max-width des Rasters)
   nicht mehr mitwächst, eine reine vw-Größe aber schon. */
.stat .big-num { font-size: clamp(2.75rem, 6vw, 5.5rem); }
/* Auf hellem Grund das volle Marken-Orange wie in der Vorlage: die Einheit steht hier in
   ~109 px, zählt also als große Schrift (Schwelle 3:1) — #e05c2b auf --paper sind 3,22:1.
   Auf der gelben Kachel bliebe dasselbe Orange bei 2,23:1 und fällt damit auch als große
   Schrift durch; dort deshalb der abgedunkelte Ton (3,58:1). Einzige Abweichung von der
   Vorlage in dieser Reihe, und zwar aus Lesbarkeitsgründen. */
.stat .unit { color: var(--orange); }
.stat--yellow .unit { color: var(--orange-text); }
.stat--navy .unit { color: var(--yellow); }
.stat-title {
  margin-top: 1rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--orange-text);
}
.stat--yellow .stat-title { color: var(--navy); }
.stat--navy .stat-title { color: var(--yellow); }
/* Bewusst .stat-desc statt „.stat p": ein Element-Selektor wie `.stat p` ist spezifischer
   als `.big-num` und würde die Auszeichnungsgröße der Kennzahl überschreiben. */
.stat-desc { margin: 0.75rem 0 0; font-size: 0.9rem; line-height: 1.65; color: var(--navy-soft); }
.stat--yellow .stat-desc { color: var(--navy); }
.stat--navy .stat-desc { color: var(--paper); opacity: 0.85; }

.fact-row {
  display: grid;
  gap: 2rem;
  margin-top: 3rem;
}
@media (min-width: 768px) { .fact-row { grid-template-columns: repeat(3, 1fr); gap: 3rem; } }
.fact { display: flex; gap: 1rem; align-items: flex-start; }
.fact .diamond { margin-top: 0.4rem; }
.fact h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy);
}
.fact p { margin: 0.5rem 0 0; font-size: 0.9rem; line-height: 1.65; color: var(--navy-soft); }

/* ---------- 03 · Leben & Arbeiten ---------- */
.split { display: grid; gap: 3rem; }
@media (min-width: 1024px) { .split { grid-template-columns: 7fr 5fr; gap: 4rem; align-items: start; } }
@media (min-width: 1024px) { .split--even { grid-template-columns: 1fr 1fr; } }

.perks {
  display: grid;
  gap: 2rem;
  margin-top: 3rem;
}
@media (min-width: 640px) { .perks { grid-template-columns: repeat(2, 1fr); gap: 2rem 2.5rem; } }
.perk { display: flex; gap: 1rem; align-items: flex-start; }
.perk .diamond { margin-top: 0.35rem; }
.perk h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
}
.perk p { margin: 0.35rem 0 0; font-size: 0.9rem; line-height: 1.6; opacity: 0.8; }
/* Links im Fließtext dieser Blöcke. Ohne eigene Regel setzt der Browser sein Standardblau
   (#0000EE) ein — auf dem dunkelblauen Grund dieser Sektion ergibt das rund 1,3:1 und ist
   damit praktisch unlesbar. Papierfarbe misst hier 13:1.
   Die Unterstreichung ist nicht Zierde, sondern Pflicht: Farbe allein darf einen Link nicht
   kenntlich machen (WCAG 1.4.1), und in einem Absatz aus hellem Text auf dunklem Grund wäre
   ein andersfarbiges Wort sonst nicht als Link erkennbar.
   Der Unterstrich rückt etwas ab, damit er die Unterlängen von g, p und j nicht durchschneidet. */
.perk a {
  color: var(--paper);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.perk a:hover { color: var(--yellow); }

/* ---- 03 · Bildung & Familie ---- */
.grow { margin-top: clamp(3.5rem, 7vw, 6rem); }
.grow-head { max-width: 44rem; }
.grow-cols { display: grid; gap: 2.5rem; margin-top: clamp(2rem, 4vw, 3rem); }
@media (min-width: 1024px) {
  .grow-cols { grid-template-columns: minmax(0, 1fr) 22rem; gap: 4rem; align-items: start; }
}
.grow-cols .perks { margin-top: 0; }
.grow-media { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.grow-figure img { display: block; width: 100%; height: auto; box-shadow: 10px 10px 0 var(--orange); }
.grow-logo { background: #fff; padding: 0.9rem 1.25rem; align-self: start; }
/* Das Logo verlinkt die AzubMe-Plattform. Ein Bild-Link braucht keine Unterstreichung —
   sie erschiene als Strich unter dem Logo auf dem weißen Chip und sähe nach Fehler aus.
   Erkennbar ist der Link über den Mauszeiger und den Fokusrahmen; als Textlink steht er
   zusätzlich im Absatz „Direkt ins Berufsleben" daneben. */
.grow-logo a { display: block; text-decoration: none; color: inherit; }
.grow-logo img { display: block; width: auto; height: 2.5rem; }

/* Bild-Slideshow: ein Foto nach dem anderen + schwebendes Wappen. Gleiches Prinzip wie
   der Botschafter-Slider weiter unten (Begründung dort): eine Scroll-Snap-Spur, die ohne
   JS per Wischen/Tastatur bedienbar bleibt — das Skript ergänzt nur Pfeile, Punkte, Zähler. */
.collage { position: relative; }

.leben-viewport {
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  background: var(--navy);
  box-shadow: 10px 10px 0 var(--orange);
  height: 300px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
@media (min-width: 1024px) { .leben-viewport { height: 360px; } }
.leben-viewport::-webkit-scrollbar { display: none; }

.leben-track { display: flex; height: 100%; margin: 0; padding: 0; list-style: none; }
.leben-slide { flex: 0 0 100%; min-width: 0; height: 100%; scroll-snap-align: start; overflow: hidden; }
.leben-slide img { width: 100%; height: 100%; object-fit: cover; }

.leben-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 1.25rem; }

.collage .crest-float {
  position: absolute;
  top: 46%; left: 4%;
  width: 92px; height: 92px;
  z-index: 5;
  background: var(--paper-warm);
  box-shadow: 6px 6px 0 var(--yellow);
  /* Grunddrehung wie bei .hero-art .crest — Begründung dort (ME-42). */
  transform: rotate(45deg);
}

/* Botschafter-Slider (Block in Sektion 03) ----------------------------------
   Der Slider ist eine Scroll-Snap-Spur, kein JS-Layout: die Folienbreite ist
   immer 100 % des Sichtfensters, das Blättern macht der Browser.

   Kritisch und der Grund, warum der Vorentwurf an jeder Breite abgeschnitten war:
   JEDE Rasterspur, die Text oder ein Bild trägt, steht als minmax(0, …) bzw. mit
   min-width: 0. Ohne das gilt min-width: auto, die Spur wächst über ihre Spalte
   hinaus und body { overflow-x: hidden } schneidet den Überhang unerreichbar ab.

   Farben: die Fläche ist .section--navy, also gehören die Bedienelemente auf die
   hellen Marken-Token (--paper, --yellow). Navy auf Navy wäre 1:1. */
.ambassadors { margin-top: clamp(3.5rem, 7vw, 6rem); }

.amb-head { max-width: 44rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.amb-title { margin: 0.75rem 0 0; }
.amb-intro { margin: 1rem 0 0; font-size: 0.95rem; }

.amb-viewport {
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  /* Die Leiste ist ausgeblendet, weil Pfeile, Punkte, Wischen und Tastatur die
     Bedienung vollständig abdecken; sichtbar bliebe sie nur als Störkante. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.amb-viewport::-webkit-scrollbar { display: none; }

/* Die Höhe folgt der gerade sichtbaren Folie, statt für alle die höchste zu reservieren.
   Die vier Sehnsuchtsort-Texte sind sehr unterschiedlich lang (196 bis 1513 Zeichen);
   gemessen bei 390 px Breite standen unter der kürzesten Folie 653 px leer, mehr als eine
   Bildschirmhöhe.

   `align-items: start` nimmt den Folien die Streckung auf Containerhöhe — ohne diese Zeile
   bliebe jede Folie so hoch wie die höchste, und das Setzen der Höhe unten liefe ins Leere.
   Die Höhe selbst setzt main.js beim Folienwechsel; ohne JavaScript wächst der Container
   wie bisher auf die höchste Folie, die Seite bleibt also vollständig bedienbar. */
.amb-track {
  display: flex;
  align-items: start;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Nur die Höhe animieren, nicht `all`: die Spur scrollt gleichzeitig seitwärts, und eine
   Transition auf der Scrollposition würde mit dem Scroll-Snap des Browsers kämpfen. */
.amb-viewport { transition: height 0.35s cubic-bezier(.2, .8, .2, 1); }

.amb-slide {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
  display: grid;
  gap: 1.75rem;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  background: rgba(245, 240, 230, 0.05);
  border-top: 1.5px solid var(--orange);
}
@media (min-width: 768px) {
  .amb-slide {
    grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
    gap: 2rem 2.5rem;
  }
  .amb-place { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .amb-slide { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 2.5rem 3rem; }
}

/* Platzhalterfläche im Format aus ME-27 (Hochformat, Beschnitt 3:4) — die echten
   Fotos ersetzen später nur das Innere, das Layout bleibt unverändert. */
.amb-portrait {
  aspect-ratio: 3 / 4;
  width: 100%;
  max-width: 220px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: rgba(245, 240, 230, 0.06);
}

.amb-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.amb-portrait-mark {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  line-height: 0.8;
  letter-spacing: -0.02em;
  color: var(--yellow);
}
.amb-portrait-note {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--paper);
}

.amb-said { min-width: 0; }
.amb-kicker { margin: 0; }
.amb-name {
  margin: 0.6rem 0 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 0.95;
  letter-spacing: -0.015em;
  color: #fff;
}
.amb-role { margin: 0.5rem 0 0; font-size: 0.9rem; color: var(--paper); }

.amb-quote { margin: 1.5rem 0 0; display: flex; gap: 1rem; align-items: flex-start; }
.amb-quote .diamond { margin-top: 0.55rem; }
.amb-quote-text {
  margin: 0;
  min-width: 0;
  /* Zeilenmaß wie bei .lead: ohne Deckel läuft das Zitat bei 1440 px über 870 px breit. */
  max-width: 34rem;
  font-family: var(--display);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  line-height: 1.35;
  color: var(--paper);
}

.amb-place {
  min-width: 0;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(0, 1fr);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(245, 240, 230, 0.22);
}
@media (min-width: 640px) {
  .amb-place { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); align-items: center; gap: 1.5rem; }
  /* Folie, deren Sehnsuchtsort-Foto noch fehlt: Text über die volle Breite statt in die 200-px-Bildspalte. */
  .amb-place--text-only { grid-template-columns: minmax(0, 1fr); }
}
.amb-place-shot {
  min-width: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--navy);
  box-shadow: 6px 6px 0 var(--yellow);
}
/* Hochformat-Aufnahmen: 16/10 würde ein stehendes Foto oben und unten abschneiden.
   Als Modifier, nicht als style-Attribut — die CSP (style-src 'self') blockiert Inline-Styles. */
.amb-place-shot--portrait { aspect-ratio: 3 / 4; }
.amb-place-shot img { width: 100%; height: 100%; object-fit: cover; }
.amb-place-text { min-width: 0; }
.amb-place-label { margin: 0; color: var(--paper); }
.amb-place-note { margin: 0.5rem 0 0; font-size: 0.9rem; color: var(--paper); }
/* Bildnachweis (CC-Lizenz): muss lesbar bleiben, darf aber nicht mit dem Zitat konkurrieren.
   0,72rem statt des früheren xx-small — xx-small landet je nach Browser bei rund 9 px und
   unterschreitet damit die Lesbarkeitsgrenze auf hellem Text vor dunklem Grund. */
.amb-place-credit {
  margin: 0.5rem 0 0;
  font-size: 0.72rem;
  line-height: 1.5;
  color: rgba(245, 240, 230, 0.72);
}

/* Bedienelemente. Die Pfeile sind .btn/.btn--light/.btn--sm — Farbe, Hover-Versatz
   und der 6-px-Schatten kommen damit unverändert aus der Button-Regel. */
.amb-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.75rem;
}
.amb-arrow {
  min-width: 48px;
  min-height: 48px;
  justify-content: center;
  padding: 0.5rem 1rem;
  font-size: 1.1rem;
  letter-spacing: 0;
}

/* .amb-dots (Liste) wird auch von der Foto-Slideshow genutzt (Sektion 03, .leben-dot) —
   .amb-dot selbst bleibt eigenständig, weil sein JS-Handler alle .amb-dot-Knoten
   dokumentweit abfragt; eine geteilte Klasse würde die beiden Punktreihen vermischen. */
.amb-dots { display: flex; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.amb-dot,
.leben-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.amb-dot .diamond,
.leben-dot .diamond { background: var(--paper); transition: background 0.3s ease, box-shadow 0.3s ease; }
.amb-dot:hover .diamond,
.leben-dot:hover .diamond { background: var(--yellow); }
.amb-dot[aria-current="true"] .diamond,
.leben-dot[aria-current="true"] .diamond {
  background: var(--yellow);
  box-shadow: 0 0 0 5px rgba(244, 196, 48, 0.28);
}

.amb-counter {
  margin: 0 0 0 auto;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.16em;
  color: var(--paper);
}
.amb-now { color: var(--yellow); }

/* ---------- 04 · Investieren ---------- */
/* Volle Breite als Statement-Band: Navy-Panel quer über die Sektion, Kennzahl
   maximal ausgezeichnet. Weiß auf --navy trägt hier den Kontrast (>= 12:1). */
.invest-stats {
  margin: 0 0 clamp(2.5rem, 5vw, 4rem);
  padding: clamp(1.75rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3.25rem);
  background: var(--navy);
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 1rem 2.5rem;
}
.invest-stats > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.75rem;
}
.invest-stats .big-num {
  font-size: clamp(4rem, 13vw, 5rem);
  color: #fff;
}
.invest-stats .unit { font-size: 0.4em; color: var(--yellow); }
.invest-stats .label {
  margin: 0;
  color: #fff;
  font-size: clamp(1rem, 2.2vw, 1.5rem);
  letter-spacing: 0.12em;
}

.cards { display: flex; flex-direction: column; gap: 1.25rem; }
.info-card { padding: clamp(1.5rem, 3vw, 2rem); display: flex; gap: 1.25rem; align-items: flex-start; }
.info-card img { width: 56px; height: 56px; flex-shrink: 0; }
.info-card--navy  { background: var(--navy);  color: #fff; }
.info-card--yellow { background: var(--yellow); color: var(--navy); }
.info-card--paper { background: var(--paper); color: var(--navy); }
.info-card .d-l { margin-top: 0.5rem; }
/* .card-desc statt „.info-card p" — sonst gewinnt der Element-Selektor gegen .label. */
.info-card .card-desc { margin: 0.75rem 0 0; font-size: 0.9rem; line-height: 1.65; }
.info-card--navy .card-desc { opacity: 0.85; }
.info-card--yellow .label { color: var(--navy); opacity: 0.75; }
.info-card--paper .label { color: var(--orange-text); }

/* ---------- 05 · Erleben (Magazin-Raster) ---------- */
.mag-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (min-width: 768px) {
  .mag-grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
  .mag-item--lead { grid-column: span 2; grid-row: span 2; }
}

.mag-item {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  aspect-ratio: 4 / 3;
  display: block;
}
.mag-item--lead { aspect-ratio: 16 / 10; box-shadow: 10px 10px 0 var(--orange); }
/* Zoom bei Hover: siehe „Foto-Flächen" weiter oben (gilt für alle neun Bildflächen). */
.mag-item img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.mag-cap {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.25rem;
  background: linear-gradient(to top, rgba(23,34,59,0.88) 0%, rgba(23,34,59,0) 62%);
}
.mag-item--lead .mag-cap { padding: clamp(1.5rem, 3vw, 2.5rem); }
.mag-cap .d-l, .mag-cap .d-xl { color: #fff; margin-top: 0.35rem; }
.mag-cap p { margin: 0.75rem 0 0; max-width: 32rem; color: rgba(255,255,255,0.92); font-size: 0.95rem; line-height: 1.6; }

/* Schmales Raster: die Aufmacher-Kachel wird zur normalen Kachel.
   Oberhalb von 768 px spannt sie zwei Spalten und zwei Zeilen und hat Platz fuer
   den vollen Caption-Stack. Darunter faellt dieser Spann weg, sie ist genauso breit
   wie ihre Nachbarn - behielt aber drei Eigenschaften, die zusammen den Inhalt aus
   der Kachel schoben (gemessen bei 390 px: 82 px nutzbare Innenhoehe, 329 px Inhalt):

     1. `aspect-ratio: 16/10` machte sie NIEDRIGER als die 4/3-Nachbarn (102 statt 122 px)
        - das war zugleich die Ursache des unruhigen Rasters.
     2. Der Titel laeuft als `.d-xl` (min. 2,25rem) statt `.d-l` (min. 1,6rem) und
        umbricht auf 123 px Textbreite in rund vier Zeilen (~104 px allein).
     3. Sie ist die einzige Kachel mit Beschreibungsabsatz (~219 px bei 390 px).

   `.mag-cap` ist `position: absolute; inset: 0` mit `justify-content: flex-end`, der
   Stack waechst also nach OBEN aus der Kachel heraus und wird von `overflow: hidden`
   abgeschnitten - lautlos, ohne Scrollbalken. Deshalb hier alle drei Punkte angleichen. */
@media (max-width: 767.98px) {
  .mag-item--lead { aspect-ratio: 4 / 3; }
  .mag-item--lead .mag-cap { padding: 1.25rem; }
  .mag-item--lead .mag-cap .d-xl { font-size: clamp(1.6rem, 3.4vw, 3rem); line-height: 0.9; letter-spacing: -0.015em; }
  .mag-item--lead .mag-cap p { display: none; }
}

/* ---------- 06 · Kontakt ---------- */
.contact-grid { display: grid; gap: 3rem; }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: 7fr 5fr; gap: 4rem; } }

.people {
  display: grid;
  gap: 2rem;
  margin-top: 3rem;
}
@media (min-width: 640px) { .people { grid-template-columns: repeat(2, 1fr); } }
.person {
  border-left: 3px solid var(--orange);
  padding: 1.5rem;
  background: rgba(245, 240, 230, 0.06);
}
.person .d-l { color: #fff; margin-top: 0.5rem; }
.person-org { margin: 0.35rem 0 0; font-size: 0.9rem; color: rgba(255, 255, 255, 0.82); }

/* Name und Rolle verlinken die MITZ-Website. Die beiden Kontaktzeilen darunter stehen
   bewusst AUSSERHALB dieses Links: ein <a> im <a> ist ungültig, und der Browser löst die
   Verschachtelung auf, indem er die inneren mailto:/tel:-Links aus dem Auftrag nimmt. */
.person-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

/* MITZ-Kurzbeschreibung neben der Ansprechperson: eigenes, gegenüber der Sektion
   aufgehelltes Blau statt der transparenten Person-Karte, damit die Kachel als eigener
   Block liest und nicht als zweite Ansprechperson. Weiß auf #1a3660 misst 11,4:1. */
.person--note {
  border-left-color: var(--yellow);
  background: #1a3660;
  color: #fff;
}
.person--note p { margin: 0; font-size: 0.9rem; line-height: 1.65; }

.person-contact { margin-top: 0.75rem; font-size: 0.9rem; }
/* Trefferflaeche statt Textgroesse: WCAG 2.2 SC 2.5.8 („Target Size (Minimum)", AA)
   verlangt mindestens 24 x 24 px, die beiden Links massen 17 px hoch — und zwar auf
   JEDER Breite, nicht nur auf dem Handy. Gesetzt sind 44 px, die gaengige Empfehlung:
   nach ME-25 sind diese zwei Links der einzige Kontaktweg der Seite.

   `inline-flex` + `align-items: center` vergroessert die Flaeche um den Text herum,
   ohne die Schrift anzufassen; die Flaeche bleibt dabei so breit wie der Text. Eine
   zeilenbreite Flaeche wuerde Taps weit neben dem sichtbaren Link ausloesen — der
   Nutzer traefe etwas, das er nicht sieht. */
.person-contact a {
  color: var(--paper);
  text-decoration: underline;
  text-underline-offset: 3px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.person-contact a:hover { color: var(--yellow); }
/* Kein zusaetzlicher Abstand mehr noetig: die 44-px-Flaechen tragen ihn selbst.
   Die Zeile bleibt trotzdem stehen, damit die Flaechen sich sicher nicht beruehren. */
.person-contact div + div { margin-top: 0.2rem; }

.contact-panel {
  background: var(--paper);
  color: var(--navy);
  padding: clamp(1.75rem, 4vw, 2.5rem);
}
.field { margin-top: 1.25rem; }
.field label { display: block; }
.field input,
.field select,
.field textarea {
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.7rem 0;
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--navy);
  font-family: var(--body);
  font-size: 0.95rem;
  color: var(--navy);
}
.field textarea { resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--orange-cta);
}
.field select { border-radius: 0; }
.form-note { margin: 0.9rem 0 0; font-size: 0.78rem; color: var(--navy-soft); }
/* Die E-Mail-Adresse im Hinweistext ist der Weg ohne JavaScript und darf nicht im
   Browser-Standardblau stehen: --orange-text ist der Ton, der auf --paper 5,9:1 misst und
   damit auch bei dieser kleinen Schrift sicher lesbar bleibt. Unterstrichen, weil ein Link
   in einem Absatz sich nicht allein über die Farbe zu erkennen geben darf (WCAG 1.4.1). */
.form-note a {
  color: var(--orange-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.contact-panel .btn { width: 100%; justify-content: center; margin-top: 1.75rem; text-align: center; }

/* ---------- Footer ---------- */
.site-foot {
  background: var(--paper);
  color: var(--navy);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}
.foot-claim {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-block: 2.5rem;
  border-top: 1.5px solid var(--orange);
  border-bottom: 1.5px solid var(--orange);
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
@media (min-width: 1024px) {
  .foot-claim { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .foot-claim .foot-claim-text { max-width: 24rem; }
}
/* .foot-claim-text statt „.foot-claim p" — der Claim selbst ist ein <p class="d-xxl">. */
.foot-claim .foot-claim-text { margin: 0; font-size: 0.9rem; color: var(--navy-soft); }

.foot-crests { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
/* minmax(0, 1fr) statt 1fr: `1fr` bedeutet `minmax(auto, 1fr)`, die Spalte kann also nicht
   schmaler werden als ihr Inhalt. Hier ist der breiteste Inhalt nicht das Wappen
   (width: 100%), sondern die Bildunterschrift — „Bad Dürrenberg" ist länger als „Leuna"
   und machte seine Spalte breiter. Weil das Wappen die Spaltenbreite füllt, waren die
   Wappen dadurch unterschiedlich groß: gemessen 66 px bis 89 px bei 390 px Viewport, ein
   Unterschied von einem Drittel in einer Reihe, die gleichmäßig wirken soll.
   Mit minmax(0, …) sind alle Spalten exakt gleich breit und damit alle Wappen gleich groß;
   die Unterschriften brechen bei Bedarf um. */
.foot-crest-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1.25rem;
}
@media (min-width: 768px) { .foot-crest-row { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1rem; } }
.foot-crest {
  text-align: center;
  transition: transform 0.5s ease;
}
.foot-crest:hover { transform: translateY(-6px) rotate(-2deg); }
/* Ebenfalls randlos — die Vorlage setzt auch im Footer das volle Wappen ohne Rahmen. */
.foot-crest img {
  width: 100%;
  /* height: auto ist hier PFLICHT: das height="268"-Attribut im Markup wirkt als
     Presentational Hint, die Höhe wäre also nicht `auto` — und aspect-ratio greift nur
     bei automatischer Höhe. Ohne diese Zeile bleiben die Wappen 268 px hoch, werden
     hochkant und object-fit: cover schneidet sie seitlich an. */
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  background: var(--paper-warm);
}
.foot-crest figcaption {
  margin-top: 0.5rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #17223b !important;
}
/* Jedes Footer-Wappen verlinkt die Website seiner Kommune. Ohne diese Regel unterstreicht
   der Browser den Ortsnamen und färbt ihn wie einen Fließtext-Link — die Wappenreihe soll
   aber als Bildreihe lesen. Als Klasse, nicht als style-Attribut: die CSP blockiert Inline-Styles. */
.foot-crest a {
  text-decoration: none;
  color: var(--navy);
}

.foot-nav {
  border-top: 1.5px solid var(--orange);
  padding-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
}
.foot-nav a {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
  text-decoration: none;
}
.foot-nav a:hover { color: var(--orange-text); text-decoration: underline; text-underline-offset: 4px; }

.foot-legal {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1.5px solid var(--orange);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--navy-soft);
}
.foot-legal nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.foot-legal a { color: var(--navy-soft); }

/* ---------- Rechtstexte (Impressum / Datenschutz) ---------- */
.legal { padding-block: clamp(3rem, 6vw, 4.5rem); }
.legal .prose { max-width: var(--maxw-prose); }
.legal h1 { font-family: var(--display); font-weight: 700; font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -0.02em; margin: 0 0 1.5rem; }
.legal h2 { font-family: var(--display); font-weight: 600; font-size: 1.3rem; letter-spacing: 0.02em; margin: 2rem 0 0.75rem; }
.legal p, .legal address { margin: 0 0 1rem; line-height: 1.7; }
/* Kleine Zeile über einer Abschnittsüberschrift („Anbieterkennzeichnung"). Ersetzt vier
   style-Attribute, die den Abstand des folgenden <h2> mit margin-bottom: -2rem negativ
   zurückzogen — die CSP (style-src 'self') hätte sie verworfen und die Abstände wären
   auseinandergefallen. Der Abstand steht jetzt am Paar selbst: der Kicker bringt ihn nach
   oben mit, das <h2> rückt dicht darunter. Kein negativer Rand mehr nötig. */
.legal .legal-kicker { margin: 2.75rem 0 0; color: var(--orange-text); }
.legal h1 + .legal-kicker { margin-top: 0; }
.legal .legal-kicker + h2 { margin-top: 0.35rem; }
.legal address { font-style: normal; }
.legal a { color: var(--orange-text); }

/* Noch offene Kundenangaben — sichtbar markiert, damit nichts versehentlich live geht. */
.ph {
  background: rgba(224, 92, 43, 0.18);
  padding: 0 0.25em;
  border-radius: 3px;
}
.back-home { display: inline-block; margin-top: 1.5rem; }

/* ---------- Motion ---------- */
.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(.2,.8,.2,1);
}
.js .reveal.in { opacity: 1; transform: none; }

.float-a { animation: floatA 7s ease-in-out infinite; }
.float-b { animation: floatB 9s ease-in-out infinite; }
/* Die Reihenfolge der Transform-Funktionen ist hier NICHT beliebig:
   `translateY(…) rotate(45deg)` dreht das Element in seinem eigenen System und verschiebt
   es dann entlang der Y-Achse des ELTERN-Systems — die Raute wippt also senkrecht.
   `rotate(45deg) translateY(…)` würde zuerst das Koordinatensystem drehen und danach
   entlang der GEDREHTEN Achse verschieben — die Raute driftet dann diagonal.
   Die Vorlage wippt senkrecht, deshalb steht rotate() hinten.

   Der Winkel schwankt dabei leicht mit (45° → 47° bzw. 45° → 42°); ohne dieses Wackeln
   wirkt die Bewegung starr. Werte 1:1 aus der Vorlage. */
@keyframes floatA {
  0%, 100% { transform: translateY(0) rotate(45deg); }
  50%      { transform: translateY(-12px) rotate(47deg); }
}
@keyframes floatB {
  0%, 100% { transform: translateY(0) rotate(45deg); }
  50%      { transform: translateY(10px) rotate(42deg); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .marquee-track, .float-a, .float-b { animation: none; }

  /* Die mitwachsende Slider-Höhe springt dann sofort auf den neuen Wert, statt zu gleiten.
     Die Funktion bleibt erhalten, nur die Bewegung entfällt. */
  .amb-viewport { transition: none; }

  /* Alle Hover-Bewegungen still: Foto-Zoom, Kachel-Anheben, Wappen-Drehung, Buttons. */
  .hero-art .photo img,
  .leben-slide img,
  .mag-item img,
  .amb-place-shot img,
  .amb-dot .diamond,
  .leben-dot .diamond,
  .crest-art img,
  .crest-card,
  .foot-crest,
  .stat,
  .btn { transition: none; }

  .hero-art .photo:hover img,
  .leben-slide:hover img,
  .mag-item:hover img,
  .amb-place-shot:hover img,
  .crest-card:hover .crest-art img,
  .crest-card:hover,
  .foot-crest:hover,
  .stat:hover { transform: none; }

  /* Der Burger klappt ohne Animation ins ✕ — der Zustand bleibt sichtbar, die Bewegung nicht. */
  .nav-toggle span { transition: none; }

  /* Die Slider springen, statt zu gleiten. Das Skript setzt zusätzlich behavior: 'auto',
     damit auch der Weg über scrollTo() ohne Animation läuft. */
  .amb-viewport, .leben-viewport { scroll-behavior: auto; }
}

/* ---------- Sehr schmale Viewports (< 390 px) — ME-30 ----------
   Unterhalb von 390 px lief die Seite seitlich über: gemessen 345 px scrollWidth bei
   320 px Viewport, also 25 px, die sich nur durch Wegschieben erreichen ließen.
   Zwei getrennte Verursacher, beide hier und nur hier korrigiert — oberhalb von 389.98 px
   greift kein einziger Wert dieses Blocks, das Layout ab 390 px bleibt unverändert.

   Warum ausgerechnet 390 px als Grenze: das ist die schmalste Breite, bei der das
   bestehende Layout nachweislich passt (gemessen scrollWidth 390 = innerWidth 390).  */
@media (max-width: 389.98px) {
  /* Verursacher 1 (Hauptanteil): .foot-crest-row.
     Das Raster steht auf `repeat(4, 1fr)`, und `1fr` ist `minmax(auto, 1fr)` — die
     Mindestbreite einer Spalte ist also die Mindestbreite ihres Inhalts. Den setzt hier
     nicht das Wappen (width: 100%), sondern die Bildunterschrift: „Bad&nbsp;Dürrenberg"
     ist durch das geschützte Leerzeichen unumbrechbar und misst 89 px. Vier solcher
     Spalten plus Abstände brauchen 321 px, verfügbar sind bei 320 px Viewport aber nur
     272 px — die Differenz schob das Dokument auf 345 px.
     Zwei Spalten geben jeder Unterschrift genug Platz (130 px bei 320, 110 px bei 280),
     ohne die geschützten Leerzeichen anzutasten: die Ortsnamen bleiben ungetrennt. */
  .foot-crest-row { grid-template-columns: repeat(2, 1fr); }

  /* Verursacher 2 (13 px): der Kopfbereich.
     Wortmarke (135 px) und .head-actions (159 px) brauchen zusammen 310 px, verfügbar
     sind 272 px. Der sekundäre Button weicht deshalb unter 390 px; der Weg zum Kontakt
     bleibt über das Burger-Menü und die Fußzeile vollständig erreichbar. */
  .head-actions .btn { display: none; }
}

/* Übergangsband 390–429 px — Folgeeffekt des flex-shrink: 0 an .brand-crests img.
   Bis 389 px weicht der Button ganz (s. o.), ab 430 px ist von Haus aus Platz. Dazwischen
   fehlten nach der Wappen-Korrektur genau 19 px: der Kopfbereich lief in den rechten
   Seitenrand hinein und der Menü-Button stand 5 px vor der Bildschirmkante statt 24 px.
   Die 19 px kommen aus den Abständen und dem Innenabstand des Buttons zurück — der
   Button bleibt damit sichtbar erreichbar, statt auf den häufigsten Telefonbreiten
   (390 px, 412 px) zu verschwinden. Die Tippfläche bleibt 40 px hoch. */
@media (min-width: 390px) and (max-width: 429.98px) {
  .head-bar { gap: 0.5rem; }
  .head-actions { gap: 0.5rem; }
  /* nowrap plus etwas engere Schrift: ohne das brach „Gespräch starten" auf zwei Zeilen um
     und machte den Kopfbereich 63 px statt 38 px hoch — die Zeile wirkte dadurch wie ein
     Fehler, nicht wie ein Knopf. Der Text bleibt unverändert, nur der Umbruch entfällt. */
  .head-actions .btn {
    padding: 0.55rem 0.7rem;
    letter-spacing: 0.04em;
    font-size: 0.68rem;
    white-space: nowrap;
  }
}

/* ---------- Druck ---------- */
/* Ohne diesen Block ist die Druck- und PDF-Ausgabe praktisch leer.
   Gemessen am 28.07.2026 auf der frisch geladenen Seite (1440 px, Druckmedium):
   9 Seiten, 17 von 17 Reveal-Bloecken auf `opacity: 0`, 1 von 4 Botschafter-Folien
   im Sichtfenster. Ursache ist nicht ein Fehler im Reveal-Mechanismus, sondern dass
   beim Drucken niemand scrollt und der IntersectionObserver deshalb nie ausloest. */
@media print {
  /* 1. Reveal-Sperre aufheben. Der Mechanismus selbst bleibt unangetastet -
        im Druck gibt es nichts zu enthuellen, also faellt die Startsperre weg. */
  .js .reveal { opacity: 1; transform: none; transition: none; }

  /* 2. Markenflaechen behalten ihre Farbe. Das ist keine Kosmetik: `.section--navy`
        setzt --paper (#f5f0e6) auf --navy (#17223b). Faellt der dunkle Grund weg,
        steht heller Text auf weissem Papier (Kontrast rund 1,06:1) - zwei komplette
        Sektionen waeren unlesbar, nicht bloss farblos. */
  .hero,
  .section--navy,
  .section--orange,
  .section--warm,
  .stripe-bg {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  /* 3. Botschafter-Slider und Foto-Slideshow untereinander statt nebeneinander. Beide
        Viewports sind horizontale Scroll-Snap-Container; im Druck laesst sich nicht
        blaettern, also laege ohne diese Regel je nur die erste Folie im Sichtfenster
        und der Rest fehlte im PDF. Die Bedienelemente sind auf Papier sinnlos. */
  .amb-viewport, .leben-viewport { overflow: visible; scroll-snap-type: none; height: auto; }
  .amb-track, .leben-track { display: block; }
  .amb-slide, .leben-slide { break-inside: avoid; height: auto; }
  .amb-slide + .amb-slide, .leben-slide + .leben-slide { margin-top: 2.5rem; }
  .leben-slide img { height: auto; }
  .amb-controls, .leben-controls { display: none; }

  /* 4. Reine Bildschirm-Deko entfaellt: die Geister-Ziffern fuellen im Druck ganze
        Seiten, das Laufband ist eine Endlos-Animation ohne Aussage auf Papier. */
  .section-num,
  .marquee { display: none; }
}

/* Hier stand eine globale Regel, die JEDEM Link per !important die Unterstreichung nahm.
   Sie war der Holzhammer zu den style-Attributen im Markup und ist mit ihnen entfallen.

   Warum sie schaden musste: !important schlägt jede spätere Absicht, unabhängig von
   Spezifität. Damit traf sie auch die Links, die eine Unterstreichung brauchen — die
   E-Mail- und Telefonzeile im Kontaktblock (nach ME-25 die einzigen Kontaktwege der Seite)
   und Links im Fließtext. Ein Link, der sich nur durch seine Farbe vom Text abhebt,
   verstößt gegen WCAG 1.4.1: Farbe darf nicht das einzige Unterscheidungsmerkmal sein.

   Wo kein Unterstrich hingehört, steht es jetzt an der jeweiligen Klasse: .btn,
   .crest-card a, .foot-crest a, .foot-nav a, .person-link, .brand, .nav-main a. */