/* ==========================================================================
   may-finanz.de — Stylesheet
   Reines CSS, keine externen Ressourcen. Schriften lokal (DSGVO).
   Gestaltungsprinzip: Pictet — Weißraum, Haarlinien, ruhiger Satz.
   Basis übernommen aus swiss-konto, wärmer/regionaler ergänzt.
   ========================================================================== */

/* ---------- Schriften (lokal, kein Google-Fonts-Aufruf) ---------- */

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

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

/* ---------- Design-Tokens ---------- */
:root {
  --navy:  #0D1B2A;
  --blue:  #4A90D9;
  --gold:  #C9A84C;
  --creme: #F7F5F0;
  --white: #FFFFFF;
  --grey:  #6B6B6B;

  --serif: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --sans:  'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --wrap: 1100px;
  --wrap-narrow: 720px;
  --pad: clamp(1.25rem, 5vw, 3rem);

  --fs-lead:      clamp(1.15rem, 2vw, 1.35rem);
  --fs-body:      1.0625rem;
  --fs-small:     0.875rem;
  --fs-label:     0.75rem;
  --fs-button:    0.8rem;
  --fs-nav:       0.9rem;

  --lh-tight:  1.5;
  --lh-normal: 1.65;
  --lh-loose:  1.75;
}

/* ---------- Reset / Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--navy);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.01em;
  margin: 0 0 0.6em;
}
h1 { font-size: clamp(2rem, 5.2vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
p { margin: 0 0 1.25em; }
p:last-child { margin-bottom: 0; }

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

.section { padding-block: clamp(3.5rem, 9vw, 7rem); }
.section--white { background: var(--white); }
.section--creme { background: var(--creme); }
.section--navy  { background: var(--navy); color: var(--creme); }
.section--navy h1, .section--navy h2, .section--navy h3 { color: var(--white); }

/* Kicker — Versalien, klein, gold, Sperrung */
.kicker {
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--fs-label);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.4rem;
  display: block;
}

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-normal);
  color: var(--grey);
  font-weight: 300;
}
.section--navy .lead { color: rgba(247,245,240,0.85); }

/* Haarlinie */
.hairline { border: 0; border-top: 1px solid rgba(201,168,76,0.55); margin: 0; }

/* ---------- Buttons / CTA ---------- */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--fs-button);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1rem 2rem;
  border: 1px solid var(--gold);
  color: var(--navy);
  background: var(--gold);
  transition: background-color .2s ease, color .2s ease;
  cursor: pointer;
}
.btn:hover, .btn:focus-visible { background: transparent; color: var(--gold); }
.section--navy .btn:hover, .section--navy .btn:focus-visible { color: var(--gold); }

.btn--ghost { background: transparent; color: var(--navy); }
.section--navy .btn--ghost { color: var(--creme); border-color: var(--gold); }
.btn--ghost:hover, .btn--ghost:focus-visible { background: var(--gold); color: var(--navy); }

.btn--lg { padding: 1.15rem 2.75rem; letter-spacing: 0.14em; }

/* Textlink in Gold mit Pfeil */
.arrow-link {
  display: inline-block; margin-top: 0.9rem;
  font-size: var(--fs-nav); font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--navy);
  text-decoration: none; border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
}
.arrow-link:hover, .arrow-link:focus-visible { color: var(--blue); }
.section--navy .arrow-link { color: var(--creme); }
.section--navy .arrow-link:hover { color: var(--gold); }

/* ---------- Kopfzeile / Navigation ---------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(1.1) blur(6px);
  border-bottom: 1px solid rgba(13,27,42,0.08);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding-block: 1rem;
}
.brand {
  font-family: var(--serif); font-size: 1.4rem; color: var(--navy);
  text-decoration: none; letter-spacing: 0.01em; white-space: nowrap;
}
.nav-wrap { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.25rem); }
.nav { display: flex; gap: clamp(1rem, 2.6vw, 2rem); }
.nav a {
  text-decoration: none; color: var(--navy); font-size: var(--fs-nav);
  font-weight: 500; letter-spacing: 0.02em; padding-block: 0.25rem;
  border-bottom: 1px solid transparent; transition: border-color .2s ease;
  white-space: nowrap;
}
.nav a:hover, .nav a:focus-visible, .nav a[aria-current="page"] { border-bottom-color: var(--gold); }

/* Aufklappmenü (reines CSS, kein JavaScript) — öffnet bei Hover UND Tastatur-Fokus */
.nav-item { position: relative; }
.nav-sub {
  display: none;
  position: absolute; top: 100%; left: 0; z-index: 5;
  background: var(--white); border-top: 1px solid rgba(201,168,76,0.55);
  padding: 0.6rem 0; min-width: max-content;
}
.nav-item:hover > .nav-sub, .nav-item:focus-within > .nav-sub { display: block; }
.nav-sub a { display: block; border-bottom: 0; padding: 0.45rem 1.25rem; }
.nav-sub a:hover, .nav-sub a:focus-visible { color: var(--gold); }

.nav-cta {
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-label);
  letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
  padding: 0.65rem 1.3rem; border: 1px solid var(--gold);
  color: var(--navy); background: var(--gold); white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}
.nav-cta:hover, .nav-cta:focus-visible { background: transparent; color: var(--navy); }

/* Dezenter Login-Button — heller Rahmen, kein Gold */
.nav-login {
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-label);
  letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
  padding: 0.65rem 1.3rem; border: 1px solid rgba(13,27,42,0.25);
  color: var(--navy); background: transparent; white-space: nowrap;
  transition: border-color .2s ease, color .2s ease;
}
.nav-login:hover, .nav-login:focus-visible { border-color: var(--navy); color: var(--navy); }

/* CSS-only Burger (kein JavaScript) */
.nav-toggle { display: none; }
.burger { display: none; }

@media (max-width: 860px) {
  .burger {
    display: inline-flex; flex-direction: column; justify-content: center;
    gap: 5px; width: 44px; height: 44px; padding: 10px; cursor: pointer;
    margin: -10px -10px -10px 0;
  }
  .burger span { display: block; height: 2px; background: var(--navy); transition: transform .25s ease, opacity .2s ease; }
  .nav-wrap {
    position: fixed; inset: 0 0 0 auto; width: min(78vw, 320px);
    flex-direction: column; align-items: flex-start; justify-content: flex-start;
    gap: 1.75rem; background: var(--white);
    padding: 5.5rem var(--pad) 2rem; z-index: 30;
    transform: translateX(100%); transition: transform .28s ease;
    box-shadow: -20px 0 60px rgba(13,27,42,0.12);
  }
  .nav { flex-direction: column; gap: 1.25rem; }
  .nav a { font-size: 1.05rem; }
  /* Untermenü im mobilen Menü dauerhaft eingerückt anzeigen, kein Aufklappen */
  .nav-item { position: static; }
  .nav-sub { display: block; position: static; border-top: 0; padding: 0.5rem 0 0 1.25rem; }
  .nav-sub a { padding: 0.35rem 0; }
  .nav-toggle:checked ~ .nav-wrap { transform: translateX(0); }
  .nav-toggle:checked ~ .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle:checked ~ .burger span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked ~ .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .burger { z-index: 40; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: min(84vh, 760px);
  display: flex; align-items: center;
  color: var(--white);
  background: var(--navy);
  overflow: hidden;
}
.hero__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  object-position: center bottom;
  filter: brightness(0.72) saturate(0.9);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: rgba(9,20,31,0.46);
}
.hero__inner { position: relative; z-index: 2; padding-block: clamp(4rem, 12vw, 8rem); }
.hero h1, .hero .lead, .hero__note { text-shadow: 0 2px 16px rgba(9,20,31,0.7), 0 1px 3px rgba(9,20,31,0.55); }
.hero h1 { color: var(--white); max-width: 20ch; }
.hero .lead { color: rgba(255,255,255,0.9); max-width: 48ch; margin-bottom: 2.25rem; }
.hero__note { font-size: var(--fs-body); color: rgba(255,255,255,0.7); max-width: 46ch; margin: -0.75rem 0 2.25rem; }
.hero .lead.statement { color: var(--white); font-weight: 600; }

/* ---------- Freistehender Zwischensatz / Positionierung ---------- */
.statement-section { padding-block: clamp(3.5rem, 8vw, 6rem); }
.statement {
  max-width: none; margin: 0; text-align: left;
  font-family: var(--sans); font-weight: 300;
  font-size: var(--fs-lead); line-height: var(--lh-normal); color: var(--navy);
}
.statement strong { font-weight: 600; }

/* ---------- Kernaussage (schmaler, freistehender Zwischenabschnitt) ---------- */
.kernaussage-section { padding-block: clamp(4rem, 10vw, 7rem); text-align: center; }
.kernaussage {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.5rem, 3.2vw, 2.1rem); line-height: 1.4;
  color: var(--white); max-width: 26ch; margin: 0 auto;
}

/* ---------- Drei Themen (Haarlinien, Überschrift + Text + Link) ---------- */
.themes {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(201,168,76,0.55); margin-top: 2.5rem;
}
.themes--two { grid-template-columns: repeat(2, 1fr); }
.theme {
  padding: clamp(1.75rem, 3vw, 2.5rem) 0;
  border-bottom: 1px solid rgba(201,168,76,0.55);
}
.theme + .theme { border-left: 1px solid rgba(201,168,76,0.55); padding-left: clamp(1.5rem, 3vw, 2.5rem); }
.theme:not(:first-child) { padding-left: clamp(1.5rem, 3vw, 2.5rem); }
.theme { padding-right: clamp(1.5rem, 3vw, 2.5rem); }
.theme h3 { margin: 0 0 0.6rem; }
.theme p { color: var(--grey); font-size: var(--fs-body); margin: 0 0 1rem; }

/* ---------- Text/Bild nebeneinander ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: stretch; }
.split--media-left .split__media { order: -1; }
.split__body { align-self: center; }
.split__media { position: relative; margin: 0; min-height: clamp(380px, 40vw, 560px); }
.split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Vier Punkte mit goldenen Ziffern ---------- */
.reasons {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(2rem, 5vw, 3.5rem); margin-top: 2.5rem;
}
.reason { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: start; }
.reason__num {
  font-family: var(--serif); font-size: 2rem; line-height: 1;
  color: var(--gold); min-width: 1.5em;
}
.reason h3 { margin: 0 0 0.4rem; }
.reason p { margin: 0; color: var(--grey); font-size: var(--fs-body); }

/* ---------- Städte-Kacheln (Standorte / Depot-Verteiler) ---------- */
.city-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(201,168,76,0.55);
  border-left: 1px solid rgba(201,168,76,0.55);
  margin-top: 2.5rem;
}
.city {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-right: 1px solid rgba(201,168,76,0.55);
  border-bottom: 1px solid rgba(201,168,76,0.55);
  transition: background-color .2s ease;
}
.city:hover, .city:focus-visible { background: var(--creme); }
.city__name { font-family: var(--serif); font-size: 1.4rem; margin: 0 0 0.15rem; }
.city__meta { font-size: var(--fs-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); margin: 0 0 0.75rem; }
.city p { font-size: var(--fs-body); color: var(--grey); margin: 0 0 1rem; }
.city__more { margin-top: auto; font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy); border-bottom: 1px solid var(--gold); padding-bottom: 2px; align-self: flex-start; }
.city:hover .city__name { color: var(--blue); }

/* ---------- Rechenbeispiel-/Zahlen-Tabelle ---------- */
.facts { border-top: 1px solid rgba(201,168,76,0.55); margin-top: 2.5rem; max-width: 680px; }
.fact {
  display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: baseline;
  padding-block: 1.1rem; border-bottom: 1px solid rgba(201,168,76,0.55);
}
.fact__label { color: var(--grey); font-size: var(--fs-body); }
.fact__val { font-family: var(--serif); font-size: 1.3rem; color: var(--navy); text-align: right; }
.facts + .note { margin-top: 1.5rem; }
@media (max-width: 560px) {
  .fact { grid-template-columns: 1fr; gap: 0.2rem; }
  .fact__val { text-align: left; }
}

/* ---------- Nummerierte Schritt-Liste (goldene Ziffern, Haarlinien) ---------- */
.steps { border-top: 1px solid rgba(201,168,76,0.55); margin-top: 2.5rem; }
.step {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(1rem, 4vw, 2.5rem);
  padding-block: clamp(1.75rem, 4vw, 2.5rem);
  border-bottom: 1px solid rgba(201,168,76,0.55);
}
.step__num { font-family: var(--serif); font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1; color: var(--gold); }
.step h3 { margin: 0 0 0.4rem; }
.step p { margin: 0; color: var(--grey); }
.section--creme .step p { color: var(--grey); }
.step__cred { font-size: var(--fs-label); letter-spacing: 0.02em; color: var(--gold); margin: 0 0 0.6rem; }
.step p + .step__cred { margin-top: 1rem; }
.step-list { list-style: none; margin: 0; padding: 0; }
.step-list li { padding: 0.2rem 0; color: var(--grey); }

/* ---------- Haarlinien-Liste ohne Ziffern (Überschrift + Text) ---------- */
.hlist { border-top: 1px solid rgba(201,168,76,0.55); margin-top: 2.5rem; }
.hlist > li, .hlist > div {
  list-style: none; padding-block: clamp(1.25rem, 3vw, 1.75rem);
  border-bottom: 1px solid rgba(201,168,76,0.55);
}
.hlist { margin-left: 0; padding-left: 0; }
.hlist h3 { margin: 0 0 0.35rem; }
.hlist p { margin: 0; color: var(--grey); }
.hlist h3 a { color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--gold); padding-bottom: 2px; }
.hlist h3 a:hover, .hlist h3 a:focus-visible { color: var(--blue); }
.hlist a { color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--gold); padding-bottom: 1px; }
.hlist a:hover, .hlist a:focus-visible { color: var(--blue); }

/* Zwei-Wege-Block (Kontakt): eine Haarlinie in der Mitte, keine Kästen */
.two-ways { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); margin-top: 2.5rem; align-items: start; }
.two-ways > * + * { border-left: 1px solid rgba(201,168,76,0.55); padding-left: clamp(2rem, 5vw, 4rem); }
.two-ways h3 { margin: 0 0 0.6rem; }
.two-ways p { color: var(--grey); margin: 0 0 1.25rem; }
@media (max-width: 760px) {
  .two-ways { grid-template-columns: 1fr; }
  .two-ways > * + * { border-left: 0; padding-left: 0; border-top: 1px solid rgba(201,168,76,0.55); padding-top: 2.5rem; }
}

/* Dezenter Zusammenarbeit-Block (kleinere Überschrift, gedämpft, wenig Fläche) */
.section--tight { padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.partner-block h2 { font-size: clamp(1.15rem, 2vw, 1.4rem); margin-bottom: 0.6rem; }
.partner-block p { font-size: var(--fs-body); color: var(--grey); }
.partner-block a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.partner-block a:hover { color: var(--gold); }

/* ---------- Blog-Beitrag ---------- */
.post-head { padding-block: clamp(2.5rem, 6vw, 4rem) clamp(1.25rem, 3vw, 1.75rem); }
.post-head h1 { margin-bottom: 0.5rem; max-width: 22ch; }
.post-date { font-size: var(--fs-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey); }
/* Beitragsbild auf Textbreite: gleiche max-Breite, linke Kante und Padding wie
   der Fließtext (.wrap-narrow .prose = 68ch), damit Bild und Text auf einer Achse
   stehen. Kein Vollbild mehr. */
.post-figure { max-width: 68ch; margin: 0 auto clamp(2rem, 5vw, 3rem); padding-inline: var(--pad); }
/* Beitragsbild vollständig zeigen: natürliches Seitenverhältnis, kein Beschnitt.
   Diese Bilder enthalten Text – feste Höhe/object-fit würden ihn abschneiden.
   max-width statt width: das Bild wird nie über seine natürliche Breite
   hochgerechnet (würde sonst unscharf), passt sich aber schmaleren Spalten an. */
.post-figure img { max-width: 100%; height: auto; }
.post-body h2 { margin-top: 2em; }
.post-body ul { margin: 0 0 1.25em; padding-left: 1.25em; }
.post-body li { margin-bottom: 0.45em; }
.post-body li::marker { color: var(--gold); }
.post-links { margin-top: 2.75rem; padding-top: 1.5rem; border-top: 1px solid rgba(201,168,76,0.55); display: grid; gap: 0.65rem; }
.post-links a { font-weight: 600; font-size: var(--fs-nav); letter-spacing: 0.02em; color: var(--navy); text-decoration: none; }
.post-links a::before { content: "→ "; color: var(--gold); }
.post-links a:hover, .post-links a:focus-visible { color: var(--blue); }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.25rem); margin-top: 2.5rem; }
.blog-card { display: flex; flex-direction: column; }
.blog-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.blog-card__meta { margin-top: 0.9rem; font-size: var(--fs-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey); }
.blog-card h2 { font-size: 1.15rem; margin: 0.4rem 0 0.5rem; line-height: 1.32; }
.blog-card h2 a { color: var(--navy); text-decoration: none; }
.blog-card h2 a:hover { color: var(--blue); }
.blog-card p { font-size: var(--fs-body); line-height: var(--lh-loose); color: var(--grey); margin: 0; }
@media (max-width: 900px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .blog-grid { grid-template-columns: 1fr; } }
.post-body h3 { margin-top: 1.7em; margin-bottom: 0.3em; font-size: 1.15rem; }
.post-body h4 { margin-top: 1.4em; margin-bottom: 0.3em; font-size: var(--fs-body); }
.error-page { padding-block: clamp(3rem, 9vw, 6rem); text-align: center; }
.error-links { margin-top: 2.5rem; max-width: 20rem; margin-inline: auto; }
.error-links a { display: block; padding: 0.85rem 0; border-top: 1px solid rgba(107,107,107,0.25); font-weight: 600; color: var(--navy); text-decoration: none; }
.error-links a:last-child { border-bottom: 1px solid rgba(107,107,107,0.25); }
.error-links a:hover { color: var(--blue); }
.post-body table { width: 100%; border-collapse: collapse; margin: 0 0 1.25em; font-size: var(--fs-body); }
.post-body th, .post-body td { text-align: left; padding: 0.55rem 0.75rem; border-bottom: 1px solid rgba(107,107,107,0.25); vertical-align: top; }
.post-body thead th { border-bottom: 2px solid var(--gold); font-weight: 600; }
.post-note { margin-top: 2.25rem; font-size: var(--fs-small); line-height: var(--lh-normal); color: var(--grey); }
.ki-note { margin-top: 1.75rem; font-size: var(--fs-small); line-height: var(--lh-normal); font-style: italic; color: var(--grey); }

/* Freistehender Adress-Streifen (Haarlinien oben/unten, größer gesetzt) */
.contact-band {
  margin-top: 2.5rem; padding-block: clamp(1.75rem, 4vw, 2.5rem);
  border-top: 1px solid rgba(201,168,76,0.55);
  border-bottom: 1px solid rgba(201,168,76,0.55);
  font-family: var(--serif); font-size: var(--fs-lead);
  line-height: var(--lh-normal); color: var(--navy);
}
.contact-band a { color: inherit; text-decoration: none; }
.contact-band a:hover, .contact-band a:focus-visible { color: var(--blue); }

/* ---------- Textpfad (Breadcrumb) ---------- */
.breadcrumb { padding-block: clamp(1.25rem, 3vw, 1.75rem); }
.breadcrumb p { margin: 0; font-size: var(--fs-label); letter-spacing: 0.06em; color: var(--grey); }
.breadcrumb a { color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--gold); padding-bottom: 1px; }
.breadcrumb a:hover, .breadcrumb a:focus-visible { color: var(--blue); }

/* ---------- Hero mit Video-Platzhalter (Zugpferd) ---------- */
.hero-video { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.hero-video__text .lead { margin-bottom: 2rem; }
/* Platzhalter: 16:9-Rahmen. Später wird nur der Inhalt gegen <video> getauscht,
   das Seitenverhältnis und damit das Layout bleiben gleich. */
.video-ph { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid rgba(201,168,76,0.45); background: #0a141f; }
.video-ph__poster { width: 100%; height: 100%; object-fit: cover; opacity: 0.45; }
.video-ph__label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: var(--fs-label); letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }

/* ---------- Förder-Zahlenreihe (Zahl links, Beschreibung rechts) ---------- */
.figures { border-top: 1px solid rgba(201,168,76,0.55); margin-top: 2.5rem; }
.figure { display: grid; grid-template-columns: minmax(140px, 230px) 1fr; gap: clamp(1.5rem, 4vw, 3rem); padding-block: clamp(1.5rem, 3.5vw, 2.25rem); border-bottom: 1px solid rgba(201,168,76,0.55); }
.figure__num { font-family: var(--serif); font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.1; color: var(--navy); }
.figure__body h3 { margin: 0 0 0.35rem; }
.figure__body p { margin: 0; color: var(--grey); }
.note { font-size: var(--fs-small); line-height: var(--lh-normal); color: var(--grey); }

@media (max-width: 760px) {
  .hero-video { grid-template-columns: 1fr; }
  .figure { grid-template-columns: 1fr; gap: 0.5rem; }
}

/* ---------- Prosa ---------- */
.prose { max-width: 68ch; }
.prose h2 { margin-top: 2.2em; }
.prose h2:first-child { margin-top: 0; }
.prose a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--gold); }

/* ---------- Partner-Zeile ---------- */
.partner-line { padding-block: clamp(2rem, 4vw, 2.75rem); }
.partner-line p { font-size: var(--fs-body); color: var(--grey); margin: 0; }
.partner-line a { color: var(--navy); border-bottom: 1px solid var(--gold); text-decoration: none; padding-bottom: 1px; }
.partner-line a:hover { color: var(--blue); }

/* ---------- Fußzeile ---------- */
.site-footer { background: var(--navy); color: rgba(247,245,240,0.8); padding-block: clamp(3rem, 7vw, 4.5rem); }
.site-footer a { color: rgba(247,245,240,0.8); text-decoration: none; }
.site-footer a:hover { color: var(--gold); }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(2rem, 6vw, 4rem); }
.footer-brand { font-family: var(--serif); font-size: 1.5rem; color: var(--white); margin-bottom: 0.5rem; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 1.5rem 0; font-size: var(--fs-nav); }
.footer-contact { font-size: var(--fs-body); }
.footer-contact strong { color: var(--white); font-weight: 600; }
.footer-legal { margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid rgba(247,245,240,0.14); font-size: var(--fs-label); line-height: 1.7; }
.footer-legal .wordmark { color: var(--gold); letter-spacing: 0.22em; font-size: var(--fs-label); margin-top: 1.25rem; }
.footer-towns { margin-top: 2rem; font-size: var(--fs-small); letter-spacing: 0.03em; line-height: var(--lh-normal); color: rgba(247,245,240,0.65); }
.footer-risk { background: #0a141f; color: rgba(247,245,240,0.55); font-size: var(--fs-small); line-height: var(--lh-normal); padding-block: 1.5rem; }

/* ---------- Utility ---------- */
.mt-cta { margin-top: 2.25rem; }
.center { text-align: center; }

/* ---------- Responsiv ---------- */
@media (max-width: 860px) {
  .themes { grid-template-columns: 1fr; }
  .theme + .theme, .theme:not(:first-child) { border-left: 0; padding-left: 0; }
  .theme { padding-right: 0; }
  .city-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .reasons { grid-template-columns: 1fr; gap: 1.75rem; }
  .footer-grid { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .split--media-left .split__media { order: 0; }
  .split__media { position: static; margin: 0; min-height: 0; }
  .split__media img { position: static; height: auto; }
}
@media (max-width: 560px) {
  .city-grid { grid-template-columns: 1fr; }
}