/*
  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'); }

/* ---------- 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);

  --display: 'Khand', 'Inter', system-ui, sans-serif;
  --body: 'Inter', 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); }

/* ---------- 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;
  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;
}
.nav-main a:hover::after,
.nav-main a:focus-visible::after { width: 100%; }

.head-actions { display: flex; align-items: center; gap: 0.75rem; }

/* 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);
}

.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,
.collage .shot img,
.mag-item img,
.amb-place-shot img {
  transition: transform 1.1s cubic-bezier(.2, .8, .2, 1);
}
.hero-art .photo:hover img,
.collage .shot: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); }

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 34rem;
  margin-top: clamp(3rem, 5vw, 5rem);
  padding-block: 0.9rem;
  border-top: 1.5px solid var(--orange);
  border-bottom: 1.5px solid var(--orange);
}
/* 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 */
}
.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); }

/* 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); }
/* 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); }

/* ---------- 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; }

/* Bild-Collage: zwei überlappende Fotos + schwebendes Wappen */
.collage { position: relative; min-height: 420px; }
@media (min-width: 1024px) { .collage { min-height: 540px; } }
.collage .shot { position: absolute; overflow: hidden; background: var(--navy); }
.collage .shot img { width: 100%; height: 100%; object-fit: cover; }
.collage .shot--main {
  top: 0; right: 0;
  width: 78%; height: 300px;
  box-shadow: 10px 10px 0 var(--orange);
}
.collage .shot--sub {
  bottom: 0; left: 0;
  width: 56%; height: 220px;
  box-shadow: -10px 10px 0 var(--yellow);
  z-index: 2;
}
@media (min-width: 1024px) {
  .collage .shot--main { height: 360px; }
  .collage .shot--sub { height: 260px; }
}
.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);
}

/* 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; }

.amb-track {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.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);
  border: 1.5px dashed rgba(245, 240, 230, 0.5);
}
.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; }
}
.amb-place-shot {
  min-width: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--navy);
  box-shadow: 6px 6px 0 var(--yellow);
}
.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); }

/* 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 { display: flex; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.amb-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 { background: var(--paper); transition: background 0.3s ease, box-shadow 0.3s ease; }
.amb-dot:hover .diamond { background: var(--yellow); }
.amb-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 ---------- */
.invest-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}
/* --paper auf --orange-section ergab 2,95:1 und verfehlte den Grenzwert für große Schrift
   (36 px / weight 700, Grenzwert 3,0:1) knapp. Reines Weiß hebt die Einheiten auf 3,35:1;
   die Fläche bleibt unangetastet, damit der Navy-Text darauf seine 4,71:1 behält. */
.invest-stats .unit { font-size: 0.5em; color: #fff; }
.invest-stats .label { margin-top: 0.5rem; color: var(--navy); }

.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; }

/* ---------- 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: 2px solid var(--orange); padding-left: 1.25rem; }
.person .d-l { color: #fff; margin-top: 0.5rem; }

/* Eine einzelne Ansprechperson (ME-25): kein Raster, sondern eine eigene Karte.
   Ohne den Modifier stünde die eine Person ab 640 px als halbleere Zelle in einem
   Zweispalten-Raster. */
.people--single { grid-template-columns: 1fr; }
.people--single .person {
  border-left-width: 3px;
  padding: 1.5rem;
  background: rgba(245, 240, 230, 0.06);
}
/* Erst wenn Kontaktspalte und Formular nebeneinander stehen, wird die Karte
   begrenzt — darunter läuft sie auf volle Spaltenbreite und fluchtet mit dem
   Formular-Panel, das direkt darunter steht. */
@media (min-width: 1024px) { .people--single { max-width: 30rem; } }
.person-org { margin: 0.35rem 0 0; font-size: 0.9rem; color: rgba(255, 255, 255, 0.82); }

.person-contact { margin-top: 0.75rem; font-size: 0.9rem; }
.person-contact a { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }
.person-contact a:hover { color: var(--yellow); }
.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); }
.contact-panel .btn { width: 100%; justify-content: center; margin-top: 1.75rem; }

/* ---------- 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); }
.foot-crest-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin-top: 1.25rem;
}
@media (min-width: 768px) { .foot-crest-row { grid-template-columns: repeat(7, 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;
}

.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; }
.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; }

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

  .hero-art .photo:hover img,
  .collage .shot: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; }

  /* Der Slider springt, statt zu gleiten. Das Skript setzt zusätzlich behavior: 'auto',
     damit auch der Weg über scrollTo() ohne Animation läuft. */
  .amb-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; }
  .head-actions .btn { padding: 0.55rem 0.85rem; letter-spacing: 0.08em; }
}