/* ==========================================================================
   B Media Agency, Relaunch 2026
   Akzentfarbe: Messing #B87333.

   Haltung: Kanzlei, nicht Startup. Dunkle Flächen führen, helle Bänder geben
   Luft. Typografie trägt die Autorität: Fraunces für die Überschriften, die
   Grotesk für Fließtext und für die gesperrten Versalien der Kennzeilen.
   Haarlinien statt Rahmen, Messing nur als Akzent.
   Bewegung ist knapp und immer begründet.
   ========================================================================== */

@font-face {
  font-family: 'Fraunces';
  src: url('/fonts/fraunces.woff2') format('woff2-variations');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2') format('woff2-variations');
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  /* Tiefe Flächen: Abendlicht im Eckbüro, nicht Marineblau. */
  --ink: #10151C;
  --ink-hell: #1A222D;
  --ink-tief: #06090D;

  /* Helle Flächen: Aktenpapier, nicht Sandstrand. */
  --sand: #F2EEE7;
  --sand-100: #FAF8F4;
  --sand-200: #E2DCD1;

  /* Ein einziges Messing, überall. René hat am 30.08.2026 entschieden, nicht
     mit abgeleiteten Kontrasttönen zu arbeiten. Die beiden Aliasse zeigen
     deshalb auf denselben Wert und bleiben nur bestehen, damit die Regeln
     unten lesbar bleiben. --messing-dunkel ist kein Kontrastton, sondern
     die Hover-Stufe. */
  --messing: #B87333;
  --messing-dunkel: #96591F;
  --messing-text: #B87333;
  --messing-hell: #B87333;

  --stone-400: #8A8578;
  --stone-600: #46443F;
  --stone-800: #26241F;

  --serif: 'Fraunces', 'Times New Roman', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Fraunces variabel: Weichzeichnung und Eigenwilligkeit auf null. Macht aus
     der freundlichen Serife eine strenge, der Unterschied zwischen Café-Menü
     und Kanzlei-Briefkopf. Fehlende Achsen werden schlicht ignoriert. */
  --serif-streng: 'SOFT' 0, 'WONK' 0;

  --band: clamp(76px, 9vw, 136px);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --haarlinie: 1px solid rgba(184,115,51,.28);

  /* Höhe der fixierten Kopfleiste. Mobilmenü und Mega-Panel hängen darunter
     und lesen den Wert hier ab. Das Skript misst die Leiste beim Laden und
     bei Größenänderung und schreibt das Ergebnis hierher. Der Startwert gilt
     nur, bis das Skript läuft, und entspricht der Leiste in Normalgröße. */
  --nav-h: 75px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }

body {
  margin: 0;
  background: var(--sand);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
::selection { background: var(--ink); color: var(--sand); }
a { color: inherit; text-decoration: none; }
img, svg, video { max-width: 100%; height: auto; display: block; }
button { font: inherit; }

.skip-link { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.skip-link:focus {
  position: fixed; left: 16px; top: 16px; width: auto; height: auto; z-index: 300;
  background: var(--ink); color: var(--sand); padding: 12px 18px;
}

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 56px; }
.wrap-schmal { max-width: 920px; margin: 0 auto; padding: 0 56px; }
@media (max-width: 720px) { .wrap, .wrap-schmal { padding: 0 22px; } }

/* --------------------------------------------------------------------------
   Typografie
   -------------------------------------------------------------------------- */
/* Kennzeile: gesperrte Versalien mit Messinglinie beidseitig. Das Vorbild ist
   der Firmenname auf der Glaswand, nicht das Blog-Label.

   In der Grotesk, nicht in Fraunces. René hat das am 30.08.2026 entschieden:
   Fraunces ist eine weiche Serife mit schräger Achse, und bei 11 bis 12px mit
   dieser Sperrung dominieren die Rundungen, weil die Sperrung die Wortgestalt
   auflöst. Das Ergebnis liest sich kursiv, obwohl weder `font-style: italic`
   noch die WONK-Achse aktiv sind. Alle sechs Elemente dieser Rolle (.eyebrow,
   .plakette, .hero-marke, .mobil-titel, .mega-titel, .mandat-num) tragen
   deshalb die Grotesk. Die Überschriften bleiben Fraunces. */
.eyebrow {
  font-family: var(--sans);
  font-size: 12.5px; font-weight: 600; letter-spacing: .26em;
  text-transform: uppercase; color: var(--messing-text);
  display: inline-flex; align-items: center; gap: 14px; margin-bottom: 22px;
}
.eyebrow::before, .eyebrow::after {
  content: ""; width: 26px; height: 1px; background: var(--messing); flex-shrink: 0;
}
.eyebrow::after { width: 12px; opacity: .45; }

h1, h2, h3, h4 {
  font-family: var(--serif); font-weight: 500; letter-spacing: -.022em;
  font-variation-settings: var(--serif-streng);
  color: var(--ink); line-height: 1.1; margin: 0; text-wrap: balance;
}
h1 { font-size: clamp(38px, 5.6vw, 70px); line-height: 1.02; letter-spacing: -.028em; }
h2 { font-size: clamp(29px, 4vw, 50px); }
h3 { font-size: 22px; letter-spacing: -.012em; }
h1 em, h2 em, h3 em { font-style: italic; color: var(--messing-text); }
.band--dunkel h1 em, .band--dunkel h2 em, .hero h1 em { color: var(--messing-hell); }

/* Plakette: der gravierte Namenszug. Für Marken- und Abschnittsmarken. */
.plakette {
  font-family: var(--sans);
  font-size: 11.5px; font-weight: 600; letter-spacing: .34em;
  text-transform: uppercase; color: var(--messing-hell);
  display: inline-block; padding: 9px 0 10px;
  border-top: 1px solid rgba(184,115,51,.55);
  border-bottom: 1px solid rgba(184,115,51,.55);
}

/* Haarlinie als Abschnittstrenner statt Kasten. */
.linie { height: 1px; background: var(--sand-200); margin: 0; border: 0; }
.band--dunkel .linie { background: rgba(242,238,231,.14); }
p { margin: 0; color: var(--stone-600); }
.lead { font-size: 20px; line-height: 1.58; max-width: 640px; margin-top: 26px; }
.gross { font-size: 18px; line-height: 1.7; max-width: 64ch; margin-top: 20px; }
.hinweis { font-size: 14.5px; color: var(--stone-400); margin-top: 12px; }

.icon { flex-shrink: 0; }

/* --------------------------------------------------------------------------
   Bewegung: Scroll-Reveal. Eine Geste, konsequent angewandt.
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(22px); }
.reveal.sichtbar {
  opacity: 1; transform: none;
  transition: opacity .75s var(--ease), transform .75s var(--ease);
}
.reveal.sichtbar[data-verzoegerung="1"] { transition-delay: .09s; }
.reveal.sichtbar[data-verzoegerung="2"] { transition-delay: .18s; }
.reveal.sichtbar[data-verzoegerung="3"] { transition-delay: .27s; }
.reveal.sichtbar[data-verzoegerung="4"] { transition-delay: .36s; }

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */
nav.top {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  background: rgba(242,238,231,0);
  border-bottom: 1px solid transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s;
}
nav.top.geheftet {
  background: rgba(242,238,231,.9);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: rgba(226,220,209,.8);
}
/* Nur der eigene Container der Kopfleiste, deshalb der Kindselektor. Das
   Mega-Panel liegt innerhalb von nav.top und seine Innenhülle trägt ebenfalls
   `wrap`. Als Nachfahrenselektor (`nav.top .wrap`) hat diese Regel höhere
   Spezifität als `.mega-raster` und hat dort Grid durch Flex ersetzt: die
   Spalten wurden dann gegeneinander zentriert statt oben ausgerichtet, und das
   Panel erbte zusätzlich die 16px Innenabstand der Leiste. */
nav.top > .wrap {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 16px; padding-bottom: 16px;
}
.nav-brand { position: relative; display: block; }
.nav-brand img { height: 30px; width: auto; transition: opacity .3s var(--ease); }
.nav-brand .logo-dunkel { position: absolute; inset: 0; opacity: 0; }
/* Bei offenem Mobilmenü trägt die Leiste denselben hellen Ton wie das Menü.
   Sonst stünde das dunkle Schließkreuz auf dem dunklen Hero. */
nav.top.mega-offen .nav-brand .logo-hell,
nav.top.menue-auf .nav-brand .logo-hell,
nav.top.geheftet .nav-brand .logo-hell { opacity: 0; }
nav.top.mega-offen .nav-brand .logo-dunkel,
nav.top.menue-auf .nav-brand .logo-dunkel,
nav.top.geheftet .nav-brand .logo-dunkel { opacity: 1; }
.nav-links { display: flex; gap: 2px; align-items: center; }
/* Über dem dunklen Hero hell, nach dem Scrollen dunkel. */
.nav-item {
  font-size: 14px; font-weight: 500; color: rgba(242,238,231,.78);
  padding: 9px 13px; position: relative; transition: color .2s;
}
.nav-item:hover, .nav-item.is-current { color: var(--sand); }
nav.top.mega-offen .nav-item,
nav.top.geheftet .nav-item { color: var(--stone-600); }
nav.top.mega-offen .nav-item:hover, nav.top.mega-offen .nav-item.is-current,
nav.top.geheftet .nav-item:hover,
nav.top.geheftet .nav-item.is-current { color: var(--ink); }
.nav-item::after {
  content: ""; position: absolute; bottom: 3px; left: 50%; right: 50%;
  height: 1.5px; background: var(--messing); transition: left .3s var(--ease), right .3s var(--ease);
}
.nav-item:hover::after, .nav-item.is-current::after { left: 13px; right: 13px; }
.nav-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--messing); color: #fff;
  padding: 11px 20px; font-size: 13px; font-weight: 600;
  margin-left: 12px; transition: background .2s, color .2s, gap .2s;
}
.nav-cta:hover { background: var(--messing-dunkel); color: var(--sand-100); gap: 12px; }
nav.top.mega-offen .nav-cta,
nav.top.geheftet .nav-cta { background: var(--ink); color: var(--sand); }
nav.top.geheftet .nav-cta:hover { background: var(--ink-hell); }
.nav-cta .icon { width: 15px; height: 15px; }

.nav-burger { display: none; background: none; border: 0; cursor: pointer; width: 44px; height: 44px; padding: 12px; }
.nav-burger span { display: block; height: 1.5px; background: var(--sand); margin: 5px 0; transition: transform .28s var(--ease), opacity .2s; }
nav.top.geheftet .nav-burger span { background: var(--ink); }
.nav-burger[aria-expanded="true"] span { background: var(--ink) !important; }
.nav-burger[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

/* Mobilmenü. Hängt unter der Kopfleiste und darf höchstens den Rest des
   Bildschirms füllen, sonst rutschen die unteren Punkte bei aufgeklappten
   Bereichen unerreichbar aus dem Bild. Deshalb eigener Scrollbereich mit
   `overscroll-behavior`, damit das Wischen am Ende nicht die Seite darunter
   mitzieht. `dvh` rechnet die eingeblendete Browserleiste heraus. */
.mobil-menue {
  position: fixed; left: 0; right: 0; top: var(--nav-h); z-index: 99;
  max-height: calc(100vh - var(--nav-h));
  max-height: calc(100dvh - var(--nav-h));
  overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--sand-100); border-bottom: 1px solid var(--sand-200);
  padding: 6px 22px 26px; flex-direction: column;
}
.mobil-menue[hidden] { display: none !important; }

/* Zeile mit Aufklapper: der Name führt auf die Seite, das Plus öffnet die
   Übersicht. Beides getrennt, damit niemand die Seite verpasst, nur weil
   er den Bereich aufklappen wollte. */
.mobil-zeile { display: flex; align-items: center; border-bottom: 1px solid var(--sand-200); }
.mobil-zeile > a { flex: 1; }
.mobil-menue a { display: block; padding: 16px 0; font-size: 17px; font-weight: 500; }
.mobil-direkt { border-bottom: 1px solid var(--sand-200); }
.mobil-auf {
  background: none; border: 0; cursor: pointer;
  width: 46px; height: 46px; margin-right: -8px; flex-shrink: 0;
  display: grid; place-items: center; color: var(--messing-text);
}
.mobil-auf::before, .mobil-auf::after {
  content: ""; grid-area: 1 / 1; width: 13px; height: 1.5px; background: currentColor;
  transition: transform .26s var(--ease);
}
.mobil-auf::after { transform: rotate(90deg); }
.mobil-auf[aria-expanded="true"]::after { transform: rotate(0deg); }
.mobil-auf:focus-visible { outline: 2px solid var(--messing-text); outline-offset: -4px; }

.mobil-unter { padding: 16px 0 20px; border-bottom: 1px solid var(--sand-200); }
.mobil-unter[hidden] { display: none; }
.mobil-unter > p { font-size: 14.5px; line-height: 1.6; margin-bottom: 18px; }
.mobil-titel {
  display: block; font-family: var(--sans);
  font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--stone-400); margin-bottom: 4px;
}
.mobil-unter ul { list-style: none; margin: 0 0 18px; padding: 0; }
.mobil-unter ul:last-of-type { margin-bottom: 0; }
.mobil-unter li a { font-size: 15.5px; font-weight: 400; color: var(--stone-600); padding: 9px 0; }

.mobil-menue .mobil-cta {
  margin-top: 20px; background: var(--ink); color: var(--sand);
  text-align: center; border: 0; padding: 17px; font-size: 14px; font-weight: 600;
}
/* Solange das Menü offen ist, steht die Seite darunter still. Ohne das
   scrollt beim Wischen der Hintergrund und das Menü wandert scheinbar. */
body.menue-offen { overflow: hidden; }

@media (max-width: 1040px) {
  .nav-links { display: none; }
  .nav-burger { display: block; }
  .mobil-menue:not([hidden]) { display: flex; }
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: inherit; font-size: 14.5px; font-weight: 600;
  padding: 16px 28px; border: 1.5px solid transparent; cursor: pointer;
  transition: background .22s var(--ease), color .22s, border-color .22s, gap .22s, transform .22s;
  text-align: left;
}
.btn .icon { width: 17px; height: 17px; transition: transform .22s var(--ease); }
.btn:hover .icon { transform: translateX(3px); }
.btn-primaer { background: var(--messing); color: #fff; }
.btn-primaer:hover { background: var(--messing-dunkel); color: var(--sand-100); }
.btn-ghost { border-color: var(--ink); color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--sand); }
/* Auf dunklem Grund kehrt sich der Ghost-Button um, sonst Ink auf Ink. */
.band--dunkel .btn-ghost, .hero .btn-ghost {
  border-color: rgba(242,238,231,.45); color: var(--sand);
}
.band--dunkel .btn-ghost:hover, .hero .btn-ghost:hover {
  background: var(--sand); color: var(--ink); border-color: var(--sand);
}
.btn-hell { border-color: rgba(242,238,231,.45); color: var(--sand); }
.btn-hell:hover { background: var(--sand); color: var(--ink); border-color: var(--sand); }
.btn-marke { background: var(--ink); color: var(--sand); }
.btn-marke:hover { background: var(--ink-hell); }
.btn:focus-visible { outline: 2px solid var(--messing-text); outline-offset: 3px; }
.btn-zusatz { display: block; font-size: 12px; font-weight: 500; opacity: .72; margin-top: 2px; }
.btn-stapel { display: flex; flex-direction: column; align-items: flex-start; }

.cta-reihe { display: flex; flex-wrap: wrap; gap: 14px; align-items: stretch; margin-top: 38px; }
.cta-reihe--zentriert { justify-content: center; margin-top: 48px; }

.textlink {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14.5px; font-weight: 600; color: var(--messing-text);
  border-bottom: 1.5px solid transparent; padding-bottom: 2px;
  transition: border-color .22s, gap .22s;
}
.textlink:hover { border-bottom-color: var(--messing); gap: 12px; }
.textlink .icon { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   Hero: Bild als Atmosphäre, nicht als Deko
   -------------------------------------------------------------------------- */
.hero {
  position: relative; background: var(--ink); color: var(--sand);
  padding: calc(var(--band) + 74px) 0 var(--band); overflow: hidden;
}
.hero-bild {
  position: absolute; inset: 0; z-index: 0;
}
.hero-bild img { width: 100%; height: 100%; object-fit: cover; opacity: .62; }
.hero-bild::after {
  content: ""; position: absolute; inset: 0;
  /* Helles Motiv: links dicht genug fuer weisse Schrift, rechts offen,
     damit vom Bild etwas uebrig bleibt. */
  background:
    linear-gradient(100deg, var(--ink) 12%, rgba(16,21,28,.9) 40%, rgba(16,21,28,.42) 100%),
    linear-gradient(to top, var(--ink) 1%, transparent 34%),
    radial-gradient(110% 75% at 80% 20%, rgba(184,115,51,.16), transparent 60%);
}
.hero .wrap, .hero .wrap-schmal { position: relative; z-index: 1; }
.hero h1, .hero h2 { color: var(--sand); }
.hero .lead { color: rgba(242,238,231,.82); }
.hero .eyebrow { color: var(--messing-hell); }
.hero .eyebrow::before { background: var(--messing); }

/* Hero ohne Werkzeug: einspaltig, Textbreite begrenzt, damit die Schlagzeile
   nicht über die volle Seitenbreite läuft. Der Förder-Check sitzt jetzt in
   einem eigenen Abschnitt nach der Problemstellung. */
.hero-text { max-width: 820px; }
.hero-marke {
  font-family: var(--sans);
  font-size: 11.5px; font-weight: 600; letter-spacing: .34em; text-transform: uppercase;
  color: var(--messing-hell); margin-bottom: 30px; display: inline-block;
  padding: 9px 0 10px;
  border-top: 1px solid rgba(184,115,51,.55);
  border-bottom: 1px solid rgba(184,115,51,.55);
}
/* Messinglinie unter der Schlagzeile: der Strich unter der Aussage. */
.hero h1::after {
  content: ""; display: block; width: 76px; height: 2px;
  background: var(--messing); margin-top: 30px;
}
.hero-belege {
  display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 42px;
  padding-top: 26px; border-top: 1px solid rgba(242,238,231,.18);
}
.hero-beleg {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13.5px; color: rgba(242,238,231,.74);
}
.hero-beleg .icon { width: 17px; height: 17px; color: var(--messing-hell); }

/* --------------------------------------------------------------------------
   Förder-Check
   -------------------------------------------------------------------------- */
.check {
  background: var(--sand-100); color: var(--ink);
  padding: 34px; position: relative;
  box-shadow: 0 26px 60px -28px rgba(6,9,13,.65);
}
.check::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--messing);
}
.check-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 6px; }
.check-titel { font-family: var(--serif); font-size: 21px; font-weight: 500; }
.check-zaehler { font-size: 12.5px; color: var(--stone-400); font-variant-numeric: tabular-nums; white-space: nowrap; }
.check-balken { height: 2px; background: var(--sand-200); margin: 16px 0 24px; overflow: hidden; }
.check-balken span {
  display: block; height: 100%; width: 0; background: var(--messing);
  transition: width .45s var(--ease);
}
.check-frage { font-family: var(--serif); font-size: 23px; font-weight: 500; line-height: 1.25; margin-bottom: 6px; }
.check-hilfe { font-size: 14px; color: var(--stone-400); margin-bottom: 20px; }
.check-optionen { display: grid; gap: 9px; }
.check-option {
  display: flex; align-items: center; gap: 13px; width: 100%;
  padding: 15px 17px; background: #fff; border: 1.5px solid var(--sand-200);
  cursor: pointer; text-align: left; font-size: 15.5px; color: var(--ink);
  transition: border-color .2s, background .2s, transform .2s var(--ease);
}
.check-option:hover { border-color: var(--messing); background: rgba(184,115,51,.05); transform: translateX(3px); }
.check-option:focus-visible { outline: 2px solid var(--messing-text); outline-offset: 2px; }
.check-option .icon { width: 19px; height: 19px; color: var(--messing-text); }
.check-option-pfeil { margin-left: auto; opacity: 0; transition: opacity .2s, transform .2s; }
.check-option:hover .check-option-pfeil { opacity: .6; }
.check-zurueck {
  background: none; border: 0; cursor: pointer; margin-top: 18px; padding: 4px 0;
  font-size: 13.5px; color: var(--stone-400);
  display: inline-flex; align-items: center; gap: 7px; transition: color .2s;
}
.check-zurueck:hover { color: var(--ink); }
.check-zurueck .icon { width: 15px; height: 15px; }
.check-schritt { animation: einblenden .4s var(--ease) both; }
@keyframes einblenden { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Ergebnis */
.check-ergebnis-marke {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: #fff; background: var(--messing-text);
  padding: 5px 10px; margin-bottom: 14px;
}
.check-ergebnis h3 { font-size: 24px; margin-bottom: 12px; }
.check-ergebnis p { font-size: 15px; line-height: 1.65; }
.check-punkte { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.check-punkte li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--stone-600); }
.check-punkte .icon { width: 17px; height: 17px; color: var(--messing); margin-top: 2px; }
.check-warn {
  margin-top: 16px; padding: 12px 15px; background: var(--sand-200);
  border-left: 2px solid var(--stone-400); font-size: 13.5px; color: var(--stone-600);
}
.check-formular { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--sand-200); display: grid; gap: 11px; }
.check-formular label { font-size: 12.5px; font-weight: 600; color: var(--stone-600); display: block; margin-bottom: 5px; }
.check-formular input {
  width: 100%; font-family: inherit; font-size: 15px; padding: 12px 14px;
  background: #fff; border: 1.5px solid var(--sand-200); color: var(--ink);
  transition: border-color .2s;
}
.check-formular input:focus { outline: none; border-color: var(--messing); }
.check-zustimmung { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; line-height: 1.55; color: var(--stone-600); }
.check-zustimmung a { color: var(--messing-text); text-decoration: underline; }
.check-status { font-size: 14px; min-height: 1.2em; }
.check-status.ok { color: #2E6B3E; }
.check-status.fehler { color: #B3261E; }
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --------------------------------------------------------------------------
   Bänder
   -------------------------------------------------------------------------- */
.band { padding: var(--band) 0; position: relative; }
.band--hell { background: var(--sand-100); }
.band--dunkel { background: var(--ink); color: var(--sand); }
.band--dunkel h2, .band--dunkel h3 { color: var(--sand); }
.band--dunkel p { color: rgba(242,238,231,.76); }
.band--dunkel .eyebrow { color: var(--messing-hell); }
.band--abschluss { text-align: center; background: var(--ink-tief); }
.band--abschluss .gross { margin-inline: auto; }

.kopf-block { max-width: 760px; margin-bottom: 58px; }
.kopf-block--zentriert { margin-inline: auto; text-align: center; }
.kopf-block--zentriert .eyebrow { justify-content: center; }
.kopf-block--zentriert .gross { margin-inline: auto; }

/* --------------------------------------------------------------------------
   Problem-Karten
   -------------------------------------------------------------------------- */
.problem-liste { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 56px; }
.problem-karte { padding: 0 34px; border-left: 1px solid rgba(242,238,231,.16); }
.problem-karte:first-child { border-left: 0; padding-left: 0; }
.problem-karte:last-child { padding-right: 0; }
.problem-icon {
  width: 46px; height: 46px; display: grid; place-items: center;
  border: 1.5px solid rgba(184,115,51,.5); color: var(--messing-hell); margin-bottom: 22px;
}
.problem-karte h3 { font-size: 19px; margin-bottom: 11px; }
.problem-karte p { font-size: 15px; line-height: 1.68; }

/* --------------------------------------------------------------------------
   Bereichs-Karten mit Bild
   -------------------------------------------------------------------------- */
.bereiche { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 56px; }
.bereich {
  background: var(--sand-100); display: flex; flex-direction: column;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.bereich:hover { transform: translateY(-5px); box-shadow: 0 22px 48px -26px rgba(16,21,28,.42); }
.bereich-bild { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sand-200); }
.bereich-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.bereich:hover .bereich-bild img { transform: scale(1.04); }
.bereich-num {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  background: var(--ink); color: var(--sand);
  font-family: var(--serif); font-style: italic; font-size: 15px;
  padding: 7px 14px;
}
.bereich-inhalt { padding: 28px 26px 30px; display: flex; flex-direction: column; flex: 1; }
.bereich-kennzeichen {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--messing-text); background: rgba(184,115,51,.12); padding: 5px 9px; margin-bottom: 14px;
}
.bereich-kennzeichen .icon { width: 14px; height: 14px; }
.bereich h3 { margin-bottom: 11px; }
.bereich p { font-size: 15px; line-height: 1.68; }
.marken-liste { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 7px; }
.marken-liste li { font-size: 14px; display: flex; gap: 8px; }
.marken-liste .vorsatz { color: var(--stone-400); }
.marken-liste strong { color: var(--ink); font-weight: 600; }
.bereich .textlink { margin-top: auto; padding-top: 24px; align-self: flex-start; }

/* --------------------------------------------------------------------------
   Förder-Säulen
   -------------------------------------------------------------------------- */
.saeulen { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-top: 52px; }
.saeule {
  border: 1.5px solid var(--sand-200); background: var(--sand);
  padding: 32px 30px; position: relative; overflow: hidden;
  transition: border-color .3s var(--ease);
}
.saeule:hover { border-color: var(--messing); }
.saeule-kuerzel {
  font-family: var(--serif); font-size: 42px; color: var(--messing);
  line-height: 1; margin-bottom: 4px;
}
.saeule-titel { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--stone-400); margin-bottom: 16px; }
.saeule p { font-size: 15px; line-height: 1.68; }
.saeule .icon { position: absolute; right: 26px; top: 28px; width: 30px; height: 30px; color: var(--sand-200); }

.trust-leiste {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin-top: 56px; border-top: 1px solid var(--sand-200); padding-top: 36px;
}
.trust-punkt { padding: 0 26px; border-left: 1px solid var(--sand-200); display: flex; flex-direction: column; gap: 9px; }
.trust-punkt:first-child { border-left: 0; padding-left: 0; }
.trust-zahl { font-family: var(--serif); font-size: 30px; color: var(--messing-text); line-height: 1; }
.trust-text { font-size: 13.5px; color: var(--stone-600); }
.trust-siegel img { height: 60px; width: auto; }
.trust-punkt.ist-offen .trust-zahl { color: var(--stone-400); }

/* --------------------------------------------------------------------------
   Ablauf
   -------------------------------------------------------------------------- */
.ablauf { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 56px; position: relative; }
.ablauf::before {
  content: ""; position: absolute; top: 23px; left: 8%; right: 8%; height: 1px;
  background: rgba(242,238,231,.2);
}
.ablauf-schritt { padding: 0 24px; position: relative; }
.ablauf-schritt:first-child { padding-left: 0; }
.ablauf-schritt:last-child { padding-right: 0; }
.ablauf-marke {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); border: 1.5px solid var(--messing);
  color: var(--messing-hell); margin-bottom: 22px; position: relative; z-index: 1;
}
.ablauf-schritt h3 { font-size: 18px; margin-bottom: 10px; }
.ablauf-schritt p { font-size: 14.5px; line-height: 1.65; }

/* --------------------------------------------------------------------------
   Einwände / FAQ
   -------------------------------------------------------------------------- */
.faq { max-width: 880px; margin-inline: auto; margin-top: 48px; }
.faq details { border-top: 1px solid var(--sand-200); }
.faq details:last-of-type { border-bottom: 1px solid var(--sand-200); }
.faq summary {
  list-style: none; cursor: pointer; padding: 24px 48px 24px 0; position: relative;
  font-family: var(--serif); font-size: 20px; font-weight: 500; color: var(--ink);
  transition: color .2s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--messing-text); }
.faq summary:focus-visible { outline: 2px solid var(--messing-text); outline-offset: 2px; }
.faq summary::after,
.faq summary::before {
  content: ""; position: absolute; right: 8px; top: 50%; background: var(--messing);
  transition: transform .3s var(--ease), opacity .3s;
}
.faq summary::after { width: 13px; height: 1.5px; margin-top: -.75px; }
.faq summary::before { width: 1.5px; height: 13px; margin-top: -6.5px; right: 13.75px; }
.faq details[open] summary::before { transform: rotate(90deg); opacity: 0; }
.faq details p { padding: 0 60px 26px 0; font-size: 16px; line-height: 1.72; color: var(--stone-600); }

/* --------------------------------------------------------------------------
   Teaser
   -------------------------------------------------------------------------- */
.teaser { display: grid; grid-template-columns: 340px 1fr; gap: 62px; align-items: center; }
.teaser-foto { position: relative; }
.teaser-foto img { width: 100%; position: relative; z-index: 1; }
.teaser-foto::after {
  content: ""; position: absolute; inset: 18px -18px -18px 18px;
  border: 1px solid var(--messing); z-index: 0; pointer-events: none;
}
.band--dunkel .teaser-foto img { filter: contrast(1.04) saturate(.9); }

/* --------------------------------------------------------------------------
   Offene Angaben
   -------------------------------------------------------------------------- */
.offen {
  margin-top: 18px; padding: 13px 17px; background: rgba(184,115,51,.09);
  border: 1px dashed var(--messing); display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap;
}
.offen-label {
  font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: #fff; background: var(--messing-text); padding: 3px 8px; flex-shrink: 0;
}
.offen-text { font-size: 14px; color: var(--stone-600); }
.band--dunkel .offen-text { color: rgba(242,238,231,.8); }
.offen-block { margin-top: 26px; }
.offen-block-titel { font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--stone-400); }

/* --------------------------------------------------------------------------
   Restliche Seiten (Bildung / Beratung / Agentur / Über uns / Kontakt)
   -------------------------------------------------------------------------- */
.hero--seite { padding-bottom: calc(var(--band) * .72); }
.hero--seite .hero-bild img { opacity: .22; }

.karten-2 { display: grid; grid-template-columns: repeat(2, 1fr); }
.karte { padding: 40px; border-left: 1px solid var(--sand-200); transition: background .25s; }
.karten-2 .karte:nth-child(odd) { border-left: 0; padding-left: 0; }
.karten-2 .karte:nth-child(n+3) { border-top: 1px solid var(--sand-200); }
.karte:hover { background: rgba(184,115,51,.05); }
.karte-num { font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--stone-400); display: block; margin-bottom: 16px; }
.karte h3 { margin-bottom: 12px; }
.karte p { font-size: 15px; line-height: 1.68; }

.schritte { list-style: none; margin: 0; padding: 0; display: grid; }
.schritte--3 { grid-template-columns: repeat(3, 1fr); }
.schritte--4 { grid-template-columns: repeat(4, 1fr); margin-top: 44px; }
.schritt { padding: 0 30px; border-left: 1px solid var(--sand-200); }
.schritt:first-child { border-left: 0; padding-left: 0; }
.schritt-num { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; color: var(--messing-text); display: block; margin-bottom: 14px; }
.schritt h3 { font-size: 18px; margin-bottom: 10px; }
.schritt p { font-size: 14.5px; line-height: 1.65; }

.marken-karte { padding: 40px; border-left: 1px solid var(--sand-200); }
.marken-karte:first-child { border-left: 0; padding-left: 0; }
.marken-name { font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; display: block; margin-bottom: 15px; }
.marken-karte--gp .marken-name { color: #009EDE; }
.marken-karte--kp .marken-name { color: var(--messing-text); }
.marken-karte h3 { margin-bottom: 13px; }
.marken-karte p { font-size: 15px; }
.marken-karte .btn { margin-top: 24px; }
.marken-hinweis {
  margin-top: 16px; font-size: 13.5px; padding: 12px 15px;
  background: var(--sand-200); color: var(--stone-600); border-left: 2px solid var(--stone-400);
}
.extern { font-size: .85em; }

.levers, .zwei-spalten { display: grid; grid-template-columns: 1fr 1.2fr; gap: 52px; align-items: start; }
/* --------------------------------------------------------------------------
   Zertifizierungssiegel. AZAV liegt quer, BAFA ist quadratisch. Deshalb
   bemisst sich beides über die Höhe: bei gleicher Breite wirkte das runde
   BAFA-Siegel um ein Drittel schwerer als das andere.
   -------------------------------------------------------------------------- */
.siegel-reihe { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; }
.siegel-reihe img { height: 82px; width: auto; }

.zwei-spalten--siegel { grid-template-columns: 1.4fr auto; align-items: center; }
.siegel-block { display: flex; flex-wrap: wrap; gap: 26px 30px; align-items: flex-start; }
.siegel-figur { margin: 0; display: grid; gap: 12px; justify-items: center; text-align: center; max-width: 172px; }
.siegel-figur img { height: 104px; width: auto; }
.siegel-figur figcaption {
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--stone-400); line-height: 1.4;
}
.band--dunkel .siegel-figur figcaption { color: rgba(242,238,231,.55); }

/* Förderabschnitt der Beratungsseite: Aussage links, Nachweis rechts. */
.kopf-block--siegel { display: grid; grid-template-columns: 1fr auto; gap: 40px 54px; align-items: start; }
.kopf-block--siegel > div:first-child { max-width: 64ch; }
.haken-liste { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 11px; }
.haken-liste li { padding-left: 22px; position: relative; font-size: 16px; color: var(--stone-600); }
.haken-liste li::before { content: ""; position: absolute; left: 0; top: .7em; width: 10px; height: 1.5px; background: var(--messing); }

.leistungs-liste { display: grid; grid-template-columns: repeat(2, 1fr); }
.leistung { padding: 38px; border-left: 1px solid var(--sand-200); }
.leistung:nth-child(odd) { border-left: 0; padding-left: 0; }
.leistung:nth-child(n+3) { border-top: 1px solid var(--sand-200); }
.leistung h3 { margin-bottom: 12px; }
.leistung p { font-size: 15px; }

.abschnitt { margin-bottom: 68px; max-width: 800px; }
.abschnitt--foto { display: grid; grid-template-columns: 290px 1fr; gap: 46px; align-items: start; max-width: none; }
.abschnitt h2 { margin-bottom: 16px; }
.rolle { font-size: 14.5px; color: var(--messing-text); font-weight: 600; margin-bottom: 8px; }

.kontakt-raster { display: grid; grid-template-columns: 1fr 1.15fr; gap: 58px 70px; align-items: start; }
.kontakt-block--daten { grid-column: 1 / -1; border-top: 1px solid var(--sand-200); padding-top: 44px; }
.kontakt-block h2 { font-size: 28px; margin-bottom: 12px; }
.firmendaten { margin-top: 16px; font-size: 16px; line-height: 1.75; }
.firmendaten a { color: var(--messing-text); border-bottom: 1px solid transparent; }
.firmendaten a:hover { border-bottom-color: var(--messing); }
.firmendaten.klein { font-size: 14px; color: var(--stone-400); }
.kontakt-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 26px; }
.feld { display: flex; flex-direction: column; gap: 7px; }
.feld--breit { grid-column: 1 / -1; }
.feld label { font-size: 12.5px; font-weight: 600; letter-spacing: .04em; color: var(--stone-600); }
.feld label span { color: var(--messing-text); margin-left: 2px; }
.feld input, .feld select, .feld textarea {
  font-family: inherit; font-size: 16px; color: var(--ink);
  background: var(--sand-100); border: 1.5px solid var(--sand-200); padding: 13px 15px; transition: border-color .2s;
}
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: none; border-color: var(--messing); }
.feld input:user-invalid, .feld textarea:user-invalid { border-color: #B3261E; }
.zustimmung { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; font-size: 14px; line-height: 1.6; }
.zustimmung input { margin-top: 3px; flex-shrink: 0; }
.zustimmung a { color: var(--messing-text); text-decoration: underline; }
.kontakt-form .btn { grid-column: 1 / -1; justify-self: start; }
.form-status { grid-column: 1 / -1; font-size: 15px; }
.form-status.ok { color: #2E6B3E; }
.form-status.fehler { color: #B3261E; }
.calendly-einbettung { margin-top: 22px; min-height: 600px; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--ink); color: var(--sand); padding: 82px 0 34px; }
.footer-oben { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 46px; }
.footer-marke img { height: 34px; width: auto; margin-bottom: 20px; }
.footer-slogan { font-family: var(--serif); font-size: 19px; color: var(--sand); }
.footer-descr { font-size: 13.5px; color: rgba(242,238,231,.58); margin-top: 6px; }

/* Zertifizierungssiegel im Footer. Helle Platte, weil das Siegel dunkle
   Schrift trägt und auf dem Ink-Grund sonst nicht lesbar wäre. */
.footer-siegel { margin-top: 26px; }
.footer-spalte h3 {
  font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--messing-hell); margin-bottom: 17px;
}
.footer-spalte a { display: block; font-size: 15px; color: rgba(242,238,231,.8); padding: 6px 0; transition: color .2s; }
.footer-spalte a:hover { color: var(--sand); }
.datei-hinweis {
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  color: var(--messing-hell); border: 1px solid rgba(184,115,51,.5);
  padding: 1px 5px; margin-left: 6px; vertical-align: 1px;
}
.footer-unten {
  margin-top: 60px; padding-top: 26px; border-top: 1px solid rgba(242,238,231,.16);
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
  font-size: 12.5px; color: rgba(242,238,231,.55);
}

/* --------------------------------------------------------------------------
   Zitat: der typografische Moment. Eine Aussage, sonst nichts.
   -------------------------------------------------------------------------- */
.band--zitat { padding: calc(var(--band) * .82) 0; background: var(--ink-tief); }
.zitat { max-width: 940px; margin-inline: auto; text-align: center; }
.zitat blockquote {
  margin: 26px 0 0; font-family: var(--serif);
  font-variation-settings: var(--serif-streng);
  font-size: clamp(27px, 3.7vw, 46px); line-height: 1.18; letter-spacing: -.024em;
  color: var(--sand); text-wrap: balance;
}
.zitat blockquote em { font-style: italic; color: var(--messing-hell); }
.zitat-quelle {
  margin-top: 26px; font-size: 12.5px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(242,238,231,.5);
}

/* --------------------------------------------------------------------------
   Mandat: was am Ende auf dem Tisch liegt.
   Aktenregister-Optik: Nummer, Haarlinie, Gegenstand.
   -------------------------------------------------------------------------- */
.mandat { margin-top: 52px; border-top: 1px solid var(--sand-200); }
.mandat-zeile {
  display: grid; grid-template-columns: 84px 1fr 1.35fr; gap: 30px; align-items: baseline;
  padding: 28px 0; border-bottom: 1px solid var(--sand-200);
  transition: background .25s var(--ease), padding-left .25s var(--ease);
}
.mandat-zeile:hover { background: rgba(184,115,51,.05); padding-left: 12px; }
.mandat-num {
  font-family: var(--sans);
  font-size: 12px; font-weight: 600; letter-spacing: .18em;
  color: var(--messing-text); font-variant-numeric: tabular-nums;
}
.mandat-zeile h3 { font-size: 20px; }
.mandat-zeile p { font-size: 15px; line-height: 1.65; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1040px) {
  .bereiche, .problem-liste, .ablauf, .schritte--3, .schritte--4, .trust-leiste { grid-template-columns: repeat(2, 1fr); }
  .ablauf::before { display: none; }
  .footer-oben { grid-template-columns: 1fr 1fr; gap: 38px; }
  .zwei-spalten, .levers { grid-template-columns: 1fr; gap: 24px; }
  .teaser { grid-template-columns: 250px 1fr; gap: 40px; }
  .abschnitt--foto { grid-template-columns: 230px 1fr; gap: 34px; }
  .kontakt-raster { gap: 46px 44px; }
}

/* Mandatszeile: die dritte Spalte fällt zuerst weg, die Nummer bleibt als
   Marke am Rand. Ohne diese Stufe zwingen 84px + zwei Textspalten die Seite
   auf rund 490px Mindestbreite und die ganze Startseite läuft seitlich über. */
@media (max-width: 900px) {
  .mandat-zeile { grid-template-columns: 68px 1fr; gap: 7px 16px; align-items: start; }
  .mandat-num { grid-row: 1 / span 2; padding-top: 6px; }
}

@media (max-width: 720px) {
  body { font-size: 16.5px; }

  /* Deutsche Komposita sprengen auf dem Handy jede Schlagzeile:
     "Mittelstandsberatung" braucht bei 38px rund 359px und hat 331.
     Ohne Trennung schneidet der Überlaufschutz das Wort einfach ab, ohne
     dass eine Breitenmessung anschlägt. Trennung nur hier, auf großen
     Schirmen sollen die Zeilen ungetrennt stehen. */
  h1, h2, h3 { hyphens: auto; -webkit-hyphens: auto; }

  .lead { font-size: 18.5px; margin-top: 22px; }
  .gross { font-size: 17px; }
  .hero { padding-top: calc(var(--band) + 56px); }
  .hero-belege { gap: 12px 22px; margin-top: 34px; padding-top: 22px; }
  .check { padding: 24px 20px; }
  .check-frage { font-size: 20px; }
  .check-option { padding: 15px 16px; }

  /* Nummer über den Gegenstand, eine Spalte. Der Zeilen-Hover entfällt,
     weil es auf dem Touchscreen keinen Zeiger gibt, der ihn auslöst. */
  .mandat-zeile { grid-template-columns: 1fr; gap: 9px; padding: 24px 0; }
  .mandat-num { grid-row: auto; padding-top: 0; }
  .mandat-zeile:hover { background: transparent; padding-left: 0; }
  .register-liste li:hover { padding-left: 0; }
  .mandat-zeile h3 { font-size: 19px; }

  .bereiche, .problem-liste, .ablauf, .schritte--3, .schritte--4,
  .trust-leiste, .karten-2, .leistungs-liste, .kontakt-raster,
  .kontakt-form, .footer-oben, .saeulen { grid-template-columns: 1fr; }

  .problem-karte, .schritt, .karte, .marken-karte, .leistung, .trust-punkt, .ablauf-schritt {
    border-left: 0; padding-inline: 0;
    border-top: 1px solid var(--sand-200); padding-top: 30px; margin-top: 30px;
  }
  .band--dunkel .problem-karte, .band--dunkel .ablauf-schritt { border-top-color: rgba(242,238,231,.16); }
  .problem-karte:first-child, .schritt:first-child, .karte:first-child,
  .marken-karte:first-child, .leistung:first-child, .trust-punkt:first-child,
  .ablauf-schritt:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
  .karten-2 .karte:nth-child(n+3), .leistung:nth-child(n+3) { border-top: 1px solid var(--sand-200); }

  .teaser, .abschnitt--foto { grid-template-columns: 1fr; gap: 26px; }
  .teaser-foto { max-width: 270px; }
  .teaser-foto::after { display: none; }
  .zwei-spalten--siegel { grid-template-columns: 1fr; }
  .kopf-block--siegel { grid-template-columns: 1fr; gap: 34px; }
  .siegel-block { gap: 22px 24px; }
  .siegel-figur { max-width: 144px; gap: 10px; }
  .siegel-figur img { height: 84px; }
  .siegel-figur figcaption { font-size: 10.5px; letter-spacing: .06em; }
  .siegel-reihe img { height: 70px; }
  .cta-reihe { margin-top: 30px; gap: 12px; }
  .cta-reihe .btn { width: 100%; justify-content: center; text-align: center; }
  .btn-stapel { align-items: center; }
  .faq summary { font-size: 18px; padding-right: 40px; }
  .faq details p { padding-right: 20px; }

  .footer-oben { gap: 34px; }
  .footer-spalte a { padding: 9px 0; }
  .footer-unten { margin-top: 44px; gap: 8px; }
  .abschnitt { margin-bottom: 52px; }
  .abschnitt--foto .portrait, .teaser-foto { max-width: 240px; }
  .kontakt-raster { gap: 44px; }
  .rechtstext h2 { font-size: 22px; margin-top: 40px; }
  .rechtstext p, .rechtstext li { font-size: 16px; }
}

/* Kleine Geräte. Hier zählt jeder Punkt Laufweite: die gesperrten Versalien
   der Kennzeile und der Plakette brauchen sonst mehr Platz, als die Zeile
   hergibt, und brechen mitten im Wort um. */
@media (max-width: 480px) {
  h1 { font-size: 34px; }
  h2 { font-size: 27px; }
  .eyebrow { font-size: 11.5px; letter-spacing: .2em; gap: 10px; margin-bottom: 18px; }
  .eyebrow::before { width: 18px; }
  .hero-marke, .plakette { font-size: 10.5px; letter-spacing: .26em; }
  .hero-marke { margin-bottom: 24px; }
  .zitat blockquote { font-size: 25px; }
  .zitat-quelle { letter-spacing: .14em; font-size: 11.5px; }
  .check-kopf { flex-wrap: wrap; gap: 4px 16px; }
  .footer-unten { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}


/* --------------------------------------------------------------------------
   Rechtstexte. Lange Fließtexte, deshalb schmalere Spalte und ruhigere
   Abstände als in den Verkaufsabschnitten.
   -------------------------------------------------------------------------- */
.hero--recht { padding-bottom: calc(var(--band) * .5); }
.rechtstext { max-width: 68ch; }
.rechtstext h2 {
  font-size: 25px; margin: 52px 0 14px;
  padding-top: 22px; border-top: 1px solid var(--sand-200);
}
.rechtstext h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.rechtstext p { font-size: 16.5px; line-height: 1.75; margin-bottom: 15px; }
.rechtstext ul { margin: 0 0 18px; padding-left: 20px; }
.rechtstext li { font-size: 16.5px; line-height: 1.7; color: var(--stone-600); margin-bottom: 7px; }
.rechtstext strong { color: var(--ink); font-weight: 600; }
.rechtstext em { color: var(--stone-400); font-style: normal; font-size: 14.5px; }
.rechtstext a { color: var(--messing-text); border-bottom: 1px solid rgba(184,115,51,.4); }
.rechtstext a:hover { border-bottom-color: var(--messing); }

/* --------------------------------------------------------------------------
   Register: zwei Spalten, links das Was, rechts das Wie.
   Bewusst als Liste mit Haarlinien statt als Kartenraster. Das liest sich
   wie ein Inhaltsverzeichnis und nicht wie ein Produktkatalog.
   -------------------------------------------------------------------------- */
.register { display: grid; grid-template-columns: 1fr 1fr; gap: 62px; }
.register-spalte h2 { font-size: clamp(26px, 3vw, 34px); }
.register-unterzeile {
  font-size: 11.5px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--stone-400); margin-top: 10px;
}
.register-liste { list-style: none; margin: 34px 0 0; padding: 0; }
.register-liste li {
  padding: 20px 0; border-top: 1px solid var(--sand-200);
  transition: padding-left .25s var(--ease);
}
.register-liste li:first-child { border-top: 0; padding-top: 0; }
.register-liste li:hover { padding-left: 10px; }
.register-liste h3 {
  font-size: 19px; margin-bottom: 7px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.register-liste p { font-size: 15px; line-height: 1.6; }
.register-marke {
  font-family: var(--sans); font-size: 9.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--messing); border: 1px solid rgba(184,115,51,.45);
  padding: 2px 6px;
}
.band--dunkel .register-liste li { border-top-color: rgba(242,238,231,.14); }
.band--dunkel .register-unterzeile { color: rgba(242,238,231,.5); }

@media (max-width: 860px) {
  .register { grid-template-columns: 1fr; gap: 54px; }
  .register-liste li:hover { padding-left: 0; }
}


/* Förder-Check als eigener Abschnitt. Mittig gesetzt und in der Breite
   begrenzt, damit er als Werkzeug wirkt und nicht als Formularwand. */
.band--check .kopf-block { margin-bottom: 44px; }
.check-buehne { max-width: 640px; margin-inline: auto; }
.band--check .check { box-shadow: 0 22px 54px -30px rgba(6,9,13,.28); }

/* --------------------------------------------------------------------------
   Mega-Menü. Volle Breite unter der Navigation, Inhalt aus den Seiten selbst.
   Öffnet bei Hover und bei Tastaturfokus, schließt mit Escape.
   -------------------------------------------------------------------------- */
/* Bei offenem Panel trägt die Kopfleiste denselben Ton wie das Panel,
   damit zwischen beiden keine Kante sichtbar wird. */
nav.top.mega-offen, nav.top.menue-auf {
  background: var(--sand-100);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}
.nav-punkt { position: relative; }
.nav-pfeil {
  display: inline-block; width: 5px; height: 5px; margin-left: 7px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .25s var(--ease); opacity: .6;
}
.nav-punkt.mega-auf .nav-pfeil { transform: rotate(225deg) translateY(-2px); opacity: 1; }

.mega {
  position: fixed; left: 0; right: 0; top: var(--nav-h);
  background: var(--sand-100);
  border-top: 1px solid var(--sand-200);
  border-bottom: 1px solid var(--sand-200);
  box-shadow: 0 26px 60px -34px rgba(6,9,13,.4);
  padding: 44px 0 48px;
  animation: megaAuf .22s var(--ease) both;
}
.mega[hidden] { display: none; }
@keyframes megaAuf { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

.mega-raster { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 54px; align-items: start; }
.mega-intro { max-width: 34ch; }
/* Als `inline-flex` (Normalfall der Kennzeile) säße sie in einer Textzeile und
   bekäme deren halben Durchschuss über sich: gut 9px, um die sie tiefer stünde
   als die Spaltentitel daneben, die Blöcke sind. Hier deshalb block-level,
   damit die drei Spaltenköpfe auf derselben Schriftoberkante sitzen. Optisch
   ändert sich sonst nichts, die Messinglinien behalten ihre festen Breiten. */
.mega-intro .eyebrow { display: flex; margin-bottom: 14px; }
.mega-intro p { font-size: 15px; line-height: 1.6; margin-bottom: 18px; }

.mega-titel {
  font-family: var(--sans);
  font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--stone-400); display: block; margin-bottom: 16px;
  padding-bottom: 12px; border-bottom: 1px solid var(--sand-200);
}
.mega-spalte ul { list-style: none; margin: 0; padding: 0; }
.mega-spalte li a {
  display: block; padding: 7px 0; font-size: 15px; color: var(--ink);
  border-bottom: 1px solid transparent; transition: color .2s, padding-left .2s var(--ease);
}
.mega-spalte li a:hover { color: var(--messing-text); padding-left: 6px; }

@media (max-width: 1040px) { .mega { display: none !important; } }