:root {
  --tb-dunkel: #1b2a4a;
  --tb-mittel: #2d4a7a;
  --tb-akzent: #3d9e9a;
  --tb-akzent-hell: #5dbcb8;
  --tb-akzent-daempf: #e6f5f4;
  --tb-hintergrund: #f0f4f9;
  --tb-weiss: #ffffff;
  --tb-text: #1f2d45;
  --tb-text-leicht: #5a6e8c;
  --tb-rand: #d0dcea;
  --tb-amber: #e8960a;
  --tb-amber-hell: #fdf3de;

  --abstand-xs: 0.375rem;
  --abstand-s: 0.75rem;
  --abstand-m: 1.25rem;
  --abstand-l: 2rem;
  --abstand-xl: 3.5rem;
  --abstand-xxl: 6rem;

  --radius-klein: 4px;
  --radius-mittel: 10px;
  --radius-gross: 20px;

  --schatten-leicht: 0 2px 8px rgba(27, 42, 74, 0.08);
  --schatten-mittel: 0 6px 24px rgba(27, 42, 74, 0.13);

  --schrift-stapel: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Arial, sans-serif;
  --schrift-mono: 'Courier New', Courier, monospace;

  --breite-inhalt: 1160px;
  --breite-eng: 760px;
  --uebergang: 0.22s ease;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--schrift-stapel);
  color: var(--tb-text);
  background: var(--tb-weiss);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, svg {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--tb-akzent);
  text-decoration: none;
  transition: color var(--uebergang);
}

a:hover {
  color: var(--tb-dunkel);
}

a:focus-visible {
  outline: 2px solid var(--tb-akzent);
  outline-offset: 3px;
  border-radius: var(--radius-klein);
}

ul, ol {
  list-style: none;
}

h1, h2, h3, h4 {
  font-family: var(--schrift-stapel);
  color: var(--tb-dunkel);
  line-height: 1.25;
  font-weight: 700;
}

h1 { font-size: clamp(1.75rem, 4vw, 2.8rem); }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
h3 { font-size: clamp(1.1rem, 2vw, 1.35rem); }
h4 { font-size: 1rem; }

p {
  font-size: 1rem;
  color: var(--tb-text-leicht);
  line-height: 1.75;
  max-width: 72ch;
}

strong { color: var(--tb-text); font-weight: 600; }

.inhaltsbreite {
  max-width: var(--breite-inhalt);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--abstand-l);
  padding-right: var(--abstand-l);
}

.enge-breite {
  max-width: var(--breite-eng);
  margin-left: auto;
  margin-right: auto;
}


/* ──────────────────────────────────────────
   KOPFZEILE (HEADER & NAVIGATION)
   ────────────────────────────────────────── */

.kopfzeile {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--tb-weiss);
  border-bottom: 1px solid var(--tb-rand);
  box-shadow: var(--schatten-leicht);
}

.kopfzeile-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  gap: var(--abstand-l);
}

.markenzeichen {
  display: flex;
  align-items: center;
  gap: var(--abstand-s);
  text-decoration: none;
  flex-shrink: 0;
}

.markenzeichen-bild {
  width: 36px;
  height: 36px;
}

.markenzeichen-name {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--tb-dunkel);
  letter-spacing: -0.02em;
}

.markenzeichen-name span {
  color: var(--tb-akzent);
}

.hauptmenu {
  display: flex;
  align-items: center;
  gap: var(--abstand-m);
}

.menuglied {
  font-size: 0.925rem;
  font-weight: 500;
  color: var(--tb-text-leicht);
  text-decoration: none;
  padding: var(--abstand-xs) var(--abstand-s);
  border-radius: var(--radius-klein);
  transition: color var(--uebergang), background var(--uebergang);
  white-space: nowrap;
}

.menuglied:hover {
  color: var(--tb-dunkel);
  background: var(--tb-hintergrund);
}

.menuglied--aktiv {
  color: var(--tb-akzent);
}

.menu-schaltflaeche {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--abstand-xs);
  color: var(--tb-dunkel);
}

.menu-schaltflaeche svg {
  display: block;
  width: 24px;
  height: 24px;
}


/* ──────────────────────────────────────────
   HELD-BEREICH (HERO)
   ────────────────────────────────────────── */

.held-bereich {
  background: linear-gradient(135deg, var(--tb-dunkel) 0%, var(--tb-mittel) 100%);
  padding: var(--abstand-xxl) 0;
  overflow: hidden;
  position: relative;
}

.held-bereich::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 50%, rgba(61, 158, 154, 0.15) 0%, transparent 60%);
  pointer-events: none;
}

.held-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--abstand-xxl);
  align-items: center;
  position: relative;
  z-index: 1;
}

.held-text-bereich {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-l);
}

.held-stempel {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-xs);
  background: rgba(61, 158, 154, 0.18);
  border: 1px solid rgba(61, 158, 154, 0.35);
  color: var(--tb-akzent-hell);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: var(--abstand-xs) var(--abstand-m);
  border-radius: 100px;
  width: fit-content;
}

.held-titel {
  color: var(--tb-weiss);
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.held-titel em {
  color: var(--tb-akzent-hell);
  font-style: normal;
}

.held-beschreibung {
  color: rgba(240, 244, 249, 0.8);
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 50ch;
}

.held-aktionen {
  display: flex;
  align-items: center;
  gap: var(--abstand-m);
  flex-wrap: wrap;
}

.held-grafik-bereich {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.held-grafik-bereich img,
.held-grafik-bereich svg {
  width: 100%;
  max-width: 480px;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.3));
}


/* ──────────────────────────────────────────
   SCHALTFLÄCHEN (BUTTONS)
   ────────────────────────────────────────── */

.schaltflaeche {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--abstand-xs);
  font-family: var(--schrift-stapel);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-mittel);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--uebergang), color var(--uebergang), box-shadow var(--uebergang), transform var(--uebergang);
  border: none;
  white-space: nowrap;
}

.schaltflaeche:focus-visible {
  outline: 2px solid var(--tb-akzent);
  outline-offset: 3px;
}

.schaltflaeche--primaer {
  background: var(--tb-akzent);
  color: var(--tb-weiss);
  box-shadow: 0 4px 14px rgba(61, 158, 154, 0.35);
}

.schaltflaeche--primaer:hover {
  background: var(--tb-akzent-hell);
  color: var(--tb-weiss);
  box-shadow: 0 6px 20px rgba(61, 158, 154, 0.45);
  transform: translateY(-1px);
}

.schaltflaeche--sekundaer {
  background: transparent;
  color: var(--tb-weiss);
  border: 1.5px solid rgba(255,255,255,0.45);
}

.schaltflaeche--sekundaer:hover {
  background: rgba(255,255,255,0.1);
  color: var(--tb-weiss);
  border-color: rgba(255,255,255,0.7);
}

.schaltflaeche--hell {
  background: var(--tb-hintergrund);
  color: var(--tb-dunkel);
  border: 1.5px solid var(--tb-rand);
}

.schaltflaeche--hell:hover {
  background: var(--tb-rand);
  color: var(--tb-dunkel);
}

.schaltflaeche--dunkel {
  background: var(--tb-dunkel);
  color: var(--tb-weiss);
}

.schaltflaeche--dunkel:hover {
  background: var(--tb-mittel);
  color: var(--tb-weiss);
  transform: translateY(-1px);
}

.schaltflaeche--formular {
  background: var(--tb-akzent);
  color: var(--tb-weiss);
  font-size: 1rem;
  padding: 0.85rem 2rem;
  width: 100%;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(61, 158, 154, 0.3);
}

.schaltflaeche--formular:hover {
  background: var(--tb-akzent-hell);
  color: var(--tb-weiss);
  box-shadow: 0 6px 20px rgba(61, 158, 154, 0.4);
}


/* ──────────────────────────────────────────
   ABSCHNITTE (SECTIONS)
   ────────────────────────────────────────── */

.abschnitt {
  padding: var(--abstand-xxl) 0;
}

.abschnitt--grau {
  background: var(--tb-hintergrund);
}

.abschnitt--dunkel {
  background: var(--tb-dunkel);
  color: var(--tb-weiss);
}

.abschnitt--akzent {
  background: var(--tb-akzent-daempf);
}

.abschnitt--schmal {
  padding: var(--abstand-xl) 0;
}

.abschnittskopf {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-m);
  margin-bottom: var(--abstand-xl);
}

.abschnittskopf--zentriert {
  align-items: center;
  text-align: center;
}

.abschnittskopf--zentriert p {
  margin-left: auto;
  margin-right: auto;
}

.abschnittsmarkierung {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tb-akzent);
}

.abschnittsmarkierung::before {
  content: '';
  display: block;
  width: 18px;
  height: 2px;
  background: var(--tb-akzent);
  border-radius: 2px;
}

.abschnittstitel {
  color: var(--tb-dunkel);
}

.abschnitt--dunkel .abschnittstitel,
.abschnitt--dunkel h2,
.abschnitt--dunkel h3 {
  color: var(--tb-weiss);
}

.abschnitt--dunkel p {
  color: rgba(240, 244, 249, 0.75);
}

.abschnitt--dunkel .abschnittsmarkierung {
  color: var(--tb-akzent-hell);
}

.abschnitt--dunkel .abschnittsmarkierung::before {
  background: var(--tb-akzent-hell);
}


/* ──────────────────────────────────────────
   KACHELN (CARDS)
   ────────────────────────────────────────── */

.kachel-reihe {
  display: grid;
  gap: var(--abstand-l);
}

.kachel-reihe--drei {
  grid-template-columns: repeat(3, 1fr);
}

.kachel-reihe--zwei {
  grid-template-columns: repeat(2, 1fr);
}

.kachel-reihe--vier {
  grid-template-columns: repeat(4, 1fr);
}

.kachel {
  background: var(--tb-weiss);
  border: 1px solid var(--tb-rand);
  border-radius: var(--radius-mittel);
  padding: var(--abstand-l);
  display: flex;
  flex-direction: column;
  gap: var(--abstand-m);
  transition: box-shadow var(--uebergang), transform var(--uebergang);
}

.kachel:hover {
  box-shadow: var(--schatten-mittel);
  transform: translateY(-2px);
}

.kachel--akzent-rand {
  border-top: 3px solid var(--tb-akzent);
}

.kachel--schatten {
  box-shadow: var(--schatten-leicht);
  border: none;
}

.kachel--dunkel {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.1);
}

.kachel--dunkel h3 {
  color: var(--tb-weiss);
}

.kachel-symbol {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-mittel);
  background: var(--tb-akzent-daempf);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kachel-symbol svg {
  width: 24px;
  height: 24px;
  color: var(--tb-akzent);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kachel-symbol--amber {
  background: var(--tb-amber-hell);
}

.kachel-symbol--amber svg {
  color: var(--tb-amber);
}

.kachel h3 {
  font-size: 1.1rem;
  line-height: 1.3;
}

.kachel p {
  font-size: 0.93rem;
  margin: 0;
}


/* ──────────────────────────────────────────
   ZWEISPALTIG (TWO-COLUMN SPLIT LAYOUT)
   ────────────────────────────────────────── */

.zweispaltig {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--abstand-xxl);
  align-items: center;
}

.zweispaltig--umgekehrt {
  direction: rtl;
}

.zweispaltig--umgekehrt > * {
  direction: ltr;
}

.zweispaltig--eng {
  gap: var(--abstand-xl);
}

.textspalte {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-l);
}

.textspalte p {
  max-width: 52ch;
}

.bildspalte {
  display: flex;
  align-items: center;
  justify-content: center;
}

.bildspalte img,
.bildspalte svg {
  width: 100%;
  max-width: 440px;
  border-radius: var(--radius-gross);
}


/* ──────────────────────────────────────────
   MERKMALSLISTE (FEATURE LIST)
   ────────────────────────────────────────── */

.merkmalsliste {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-m);
}

.merkmal {
  display: flex;
  gap: var(--abstand-m);
  align-items: flex-start;
}

.merkmal-haken {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--tb-akzent-daempf);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.merkmal-haken svg {
  width: 12px;
  height: 12px;
  stroke: var(--tb-akzent);
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.merkmal-text h4 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--tb-dunkel);
  margin-bottom: 2px;
}

.merkmal-text p {
  font-size: 0.9rem;
  margin: 0;
}


/* ──────────────────────────────────────────
   SCHRITTFOLGE (STEP SEQUENCE)
   ────────────────────────────────────────── */

.schrittfolge {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--abstand-xl);
  position: relative;
}

.schrittfolge::before {
  content: '';
  position: absolute;
  top: 28px;
  left: calc(16.666% + var(--abstand-m));
  right: calc(16.666% + var(--abstand-m));
  height: 2px;
  background: var(--tb-rand);
  z-index: 0;
}

.schritt {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-m);
  align-items: flex-start;
  position: relative;
  z-index: 1;
}

.schritt-nummer {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--tb-weiss);
  border: 2px solid var(--tb-akzent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--tb-akzent);
  flex-shrink: 0;
  box-shadow: 0 0 0 6px var(--tb-hintergrund);
}

.schritt h3 {
  font-size: 1rem;
  margin-top: var(--abstand-xs);
}

.schritt p {
  font-size: 0.9rem;
  margin: 0;
}


/* ──────────────────────────────────────────
   ERKUNDUNGSBEREICH (EXPLORE SECTION)
   ────────────────────────────────────────── */

.erkundungs-reihe {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--abstand-l);
}

.erkundungs-kachel {
  background: var(--tb-weiss);
  border: 1px solid var(--tb-rand);
  border-radius: var(--radius-mittel);
  padding: var(--abstand-l);
  display: flex;
  flex-direction: column;
  gap: var(--abstand-m);
  text-decoration: none;
  transition: box-shadow var(--uebergang), transform var(--uebergang), border-color var(--uebergang);
}

.erkundungs-kachel:hover {
  box-shadow: var(--schatten-mittel);
  transform: translateY(-3px);
  border-color: var(--tb-akzent);
  color: var(--tb-text);
}

.erkundungs-kachel h3 {
  font-size: 1.05rem;
  color: var(--tb-dunkel);
}

.erkundungs-kachel p {
  font-size: 0.9rem;
  margin: 0;
  flex-grow: 1;
}

.erkundungs-pfeil {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--tb-akzent);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: auto;
}

.erkundungs-pfeil::after {
  content: '→';
}


/* ──────────────────────────────────────────
   CTA-BANNER
   ────────────────────────────────────────── */

.cta-banner {
  background: linear-gradient(135deg, var(--tb-dunkel), var(--tb-mittel));
  border-radius: var(--radius-gross);
  padding: var(--abstand-xl) var(--abstand-xxl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-xl);
  overflow: hidden;
  position: relative;
}

.cta-banner::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: rgba(61, 158, 154, 0.12);
  pointer-events: none;
}

.cta-banner-text {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-s);
  z-index: 1;
}

.cta-banner-text h2 {
  color: var(--tb-weiss);
  font-size: 1.6rem;
}

.cta-banner-text p {
  color: rgba(240, 244, 249, 0.75);
  margin: 0;
  max-width: 50ch;
}

.cta-banner-aktionen {
  display: flex;
  gap: var(--abstand-m);
  flex-shrink: 0;
  flex-wrap: wrap;
  z-index: 1;
}


/* ──────────────────────────────────────────
   STATISTIK-LEISTE
   ────────────────────────────────────────── */

.statistik-leiste {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--tb-rand);
  border: 1px solid var(--tb-rand);
  border-radius: var(--radius-mittel);
  overflow: hidden;
}

.statistik-element {
  background: var(--tb-weiss);
  padding: var(--abstand-l);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--abstand-xs);
}

.statistik-wert {
  font-size: 2rem;
  font-weight: 700;
  color: var(--tb-dunkel);
  line-height: 1;
}

.statistik-bezeichnung {
  font-size: 0.85rem;
  color: var(--tb-text-leicht);
}


/* ──────────────────────────────────────────
   SEITENEINFÜHRUNG (PAGE INTRO / NON-HOME HEADER)
   ────────────────────────────────────────── */

.seiteneinfuehrung {
  background: var(--tb-hintergrund);
  padding: var(--abstand-xl) 0;
  border-bottom: 1px solid var(--tb-rand);
}

.seiteneinfuehrung-pfad {
  display: flex;
  align-items: center;
  gap: var(--abstand-xs);
  margin-bottom: var(--abstand-m);
  font-size: 0.82rem;
  color: var(--tb-text-leicht);
}

.seiteneinfuehrung-pfad a {
  color: var(--tb-text-leicht);
}

.seiteneinfuehrung-pfad a:hover {
  color: var(--tb-akzent);
}

.seiteneinfuehrung-pfad span {
  color: var(--tb-rand);
}

.seiteneinfuehrung h1 {
  margin-bottom: var(--abstand-m);
}

.seiteneinfuehrung p {
  max-width: 60ch;
  font-size: 1.05rem;
}


/* ──────────────────────────────────────────
   FAQ
   ────────────────────────────────────────── */

.faq-liste {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--tb-rand);
  border-radius: var(--radius-mittel);
  overflow: hidden;
}

.faq-eintrag {
  border-bottom: 1px solid var(--tb-rand);
}

.faq-eintrag:last-child {
  border-bottom: none;
}

.faq-frage {
  padding: var(--abstand-l);
  font-weight: 600;
  font-size: 0.97rem;
  color: var(--tb-dunkel);
  cursor: default;
  display: flex;
  justify-content: space-between;
  gap: var(--abstand-m);
  align-items: flex-start;
}

.faq-antwort {
  padding: 0 var(--abstand-l) var(--abstand-l);
  font-size: 0.93rem;
  color: var(--tb-text-leicht);
  line-height: 1.7;
}

.faq-antwort p {
  font-size: 0.93rem;
  max-width: none;
  margin: 0;
}

.faq-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--tb-akzent-daempf);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tb-akzent);
  font-size: 1rem;
  line-height: 1;
  margin-top: 1px;
  font-weight: 700;
}


/* ──────────────────────────────────────────
   KONTAKTFORMULAR
   ────────────────────────────────────────── */

.kontakt-layout {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: var(--abstand-xxl);
  align-items: flex-start;
}

.kontaktinfo {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-xl);
  position: sticky;
  top: calc(64px + var(--abstand-l));
}

.kontaktinfo h2 {
  font-size: 1.5rem;
}

.kontaktinfo-detail {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-m);
}

.kontakt-zeile {
  display: flex;
  gap: var(--abstand-m);
  align-items: flex-start;
}

.kontakt-symbol {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-mittel);
  background: var(--tb-akzent-daempf);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kontakt-symbol svg {
  width: 20px;
  height: 20px;
  stroke: var(--tb-akzent);
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kontakt-zeile-inhalt strong {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--tb-text-leicht);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 3px;
}

.kontakt-zeile-inhalt p,
.kontakt-zeile-inhalt a {
  font-size: 0.95rem;
  color: var(--tb-text);
  margin: 0;
  max-width: none;
}

.formular-bereich {
  background: var(--tb-weiss);
  border: 1px solid var(--tb-rand);
  border-radius: var(--radius-gross);
  padding: var(--abstand-xl);
  box-shadow: var(--schatten-leicht);
}

.formular-kopf {
  margin-bottom: var(--abstand-xl);
}

.formular-kopf h2 {
  font-size: 1.4rem;
  margin-bottom: var(--abstand-s);
}

.formular-kopf p {
  font-size: 0.93rem;
  margin: 0;
}

.formular-felder {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-m);
}

.feldgruppe {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.feldgruppe--zwei {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--abstand-m);
}

.feldgruppe label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--tb-dunkel);
}

.pflichtfeld::after {
  content: ' *';
  color: var(--tb-akzent);
}

.feldgruppe input,
.feldgruppe select,
.feldgruppe textarea {
  font-family: var(--schrift-stapel);
  font-size: 0.95rem;
  color: var(--tb-text);
  background: var(--tb-hintergrund);
  border: 1.5px solid var(--tb-rand);
  border-radius: var(--radius-mittel);
  padding: 0.65rem 0.9rem;
  transition: border-color var(--uebergang), box-shadow var(--uebergang);
  width: 100%;
}

.feldgruppe input:focus,
.feldgruppe select:focus,
.feldgruppe textarea:focus {
  outline: none;
  border-color: var(--tb-akzent);
  box-shadow: 0 0 0 3px rgba(61, 158, 154, 0.12);
  background: var(--tb-weiss);
}

.feldgruppe textarea {
  resize: vertical;
  min-height: 130px;
  line-height: 1.6;
}

.formular-hinweis {
  font-size: 0.8rem;
  color: var(--tb-text-leicht);
  margin-top: var(--abstand-s);
}

.formular-hinweis a {
  color: var(--tb-akzent);
}

.kontakt-zeile-inhalt address {
  font-style: normal;
}

.nav-hinweis-text {
  font-size: 0.82rem;
  color: var(--tb-text-leicht);
  margin-bottom: var(--abstand-s);
}

.hervorhebungsbox--abstand-unten {
  margin-bottom: var(--abstand-l);
}

.seitenlinks-leiste--abstand-oben {
  margin-top: var(--abstand-l);
}


/* ──────────────────────────────────────────
   ABLAUF-PANEL (PROCESS PANEL)
   ────────────────────────────────────────── */

.ablauf-panel {
  background: var(--tb-hintergrund);
  border-radius: var(--radius-mittel);
  padding: var(--abstand-l);
  border-left: 4px solid var(--tb-akzent);
}

.ablauf-panel h3 {
  font-size: 0.95rem;
  margin-bottom: var(--abstand-m);
}

.ablauf-schritte {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-m);
}

.ablauf-schritt {
  display: flex;
  gap: var(--abstand-m);
  align-items: flex-start;
}

.ablauf-zahl {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--tb-akzent);
  color: var(--tb-weiss);
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ablauf-schritt p {
  font-size: 0.88rem;
  margin: 0;
  padding-top: 4px;
  max-width: none;
}


/* ──────────────────────────────────────────
   INFORMATIONSBLOCK (INFO BLOCK - various pages)
   ────────────────────────────────────────── */

.infoblock {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-l);
}

.infoblock--zweispaltig {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--abstand-xl);
}

.info-panel {
  background: var(--tb-weiss);
  border: 1px solid var(--tb-rand);
  border-radius: var(--radius-mittel);
  padding: var(--abstand-l);
  display: flex;
  flex-direction: column;
  gap: var(--abstand-m);
}

.info-panel h3 {
  font-size: 1.05rem;
  padding-bottom: var(--abstand-s);
  border-bottom: 1px solid var(--tb-rand);
}

.info-panel p {
  font-size: 0.93rem;
  margin: 0;
}

.hervorhebungsbox {
  background: var(--tb-akzent-daempf);
  border-radius: var(--radius-mittel);
  padding: var(--abstand-l);
  border-left: 4px solid var(--tb-akzent);
}

.hervorhebungsbox p {
  font-size: 0.95rem;
  color: var(--tb-text);
  max-width: none;
  margin: 0;
}

.hinweisbox {
  background: var(--tb-amber-hell);
  border-radius: var(--radius-mittel);
  padding: var(--abstand-l);
  border-left: 4px solid var(--tb-amber);
}

.hinweisbox p {
  font-size: 0.93rem;
  color: var(--tb-text);
  max-width: none;
  margin: 0;
}


/* ──────────────────────────────────────────
   RECHTLICHE SEITEN (LEGAL PAGES)
   ────────────────────────────────────────── */

.rechtsseite-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--abstand-xxl);
  align-items: flex-start;
  padding: var(--abstand-xxl) 0;
}

.rechtsseite-nav {
  position: sticky;
  top: calc(64px + var(--abstand-l));
}

.rechtsseite-nav-titel {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tb-text-leicht);
  margin-bottom: var(--abstand-m);
}

.rechtsseite-nav-liste {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rechtsseite-nav-liste a {
  display: block;
  font-size: 0.88rem;
  color: var(--tb-text-leicht);
  padding: 5px var(--abstand-s);
  border-radius: var(--radius-klein);
  transition: color var(--uebergang), background var(--uebergang);
}

.rechtsseite-nav-liste a:hover {
  color: var(--tb-dunkel);
  background: var(--tb-hintergrund);
}

.rechtsseite-inhalt {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-xl);
}

.rechts-abschnitt {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-m);
}

.rechts-abschnitt h2 {
  font-size: 1.25rem;
  padding-bottom: var(--abstand-s);
  border-bottom: 1px solid var(--tb-rand);
}

.rechts-abschnitt h3 {
  font-size: 1rem;
  margin-top: var(--abstand-s);
}

.rechts-abschnitt p {
  font-size: 0.93rem;
  color: var(--tb-text-leicht);
  max-width: none;
  margin: 0;
}

.rechts-abschnitt ul {
  list-style: disc;
  padding-left: var(--abstand-l);
  display: flex;
  flex-direction: column;
  gap: var(--abstand-xs);
}

.rechts-abschnitt ul li {
  font-size: 0.93rem;
  color: var(--tb-text-leicht);
}

.rechtsseite-kopf {
  background: var(--tb-hintergrund);
  padding: var(--abstand-xl) 0;
  border-bottom: 1px solid var(--tb-rand);
}

.rechtsseite-kopf h1 {
  margin-bottom: var(--abstand-s);
}

.rechtsseite-kopf p {
  font-size: 0.93rem;
}

.seitenlinks-leiste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-s);
  padding-top: var(--abstand-m);
  border-top: 1px solid var(--tb-rand);
}

.seitenlinks-leiste a {
  font-size: 0.88rem;
  color: var(--tb-text-leicht);
}

.seitenlinks-leiste a:hover {
  color: var(--tb-akzent);
}


/* ──────────────────────────────────────────
   FUSSZEILE (FOOTER)
   ────────────────────────────────────────── */

.fusszeile {
  background: var(--tb-dunkel);
  color: rgba(240, 244, 249, 0.7);
  padding: var(--abstand-xxl) 0 var(--abstand-l);
}

.fuss-oberteil {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--abstand-xl);
  padding-bottom: var(--abstand-xl);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: var(--abstand-xl);
}

.fuss-marke {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-m);
}

.fuss-marke-zeile {
  display: flex;
  align-items: center;
  gap: var(--abstand-s);
  text-decoration: none;
  margin-bottom: var(--abstand-xs);
}

.fuss-marke-zeile img,
.fuss-marke-zeile svg {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.fuss-markenname {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--tb-weiss);
}

.fuss-beschreibung {
  font-size: 0.875rem;
  line-height: 1.65;
  max-width: 34ch;
  color: rgba(240, 244, 249, 0.6);
}

.fuss-adresse {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.fuss-adresse p,
.fuss-adresse a {
  font-size: 0.82rem;
  color: rgba(240, 244, 249, 0.55);
  margin: 0;
  max-width: none;
  line-height: 1.5;
}

.fuss-adresse a:hover {
  color: var(--tb-akzent-hell);
}

.fuss-spalte h4 {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(240, 244, 249, 0.5);
  margin-bottom: var(--abstand-m);
}

.fuss-links {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-s);
}

.fuss-links a {
  font-size: 0.875rem;
  color: rgba(240, 244, 249, 0.65);
  transition: color var(--uebergang);
}

.fuss-links a:hover {
  color: var(--tb-akzent-hell);
}

.fuss-unterteil {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-l);
  flex-wrap: wrap;
}

.fuss-copyright {
  font-size: 0.8rem;
  color: rgba(240, 244, 249, 0.4);
}

.fuss-rechtlinks {
  display: flex;
  gap: var(--abstand-l);
}

.fuss-rechtlinks a {
  font-size: 0.8rem;
  color: rgba(240, 244, 249, 0.45);
  transition: color var(--uebergang);
}

.fuss-rechtlinks a:hover {
  color: var(--tb-akzent-hell);
}


/* ──────────────────────────────────────────
   EXTRA-SEITE SPEZIFISCH
   ────────────────────────────────────────── */

.glossar-reihe {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--abstand-l);
}

.glossar-eintrag {
  background: var(--tb-weiss);
  border: 1px solid var(--tb-rand);
  border-radius: var(--radius-mittel);
  padding: var(--abstand-l);
}

.glossar-eintrag dt {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--tb-dunkel);
  margin-bottom: var(--abstand-xs);
  padding-bottom: var(--abstand-xs);
  border-bottom: 1px solid var(--tb-rand);
}

.glossar-eintrag dd {
  font-size: 0.9rem;
  color: var(--tb-text-leicht);
  line-height: 1.65;
  margin: 0;
  padding: 0;
}

.tabelle-wrapper {
  overflow-x: auto;
  border: 1px solid var(--tb-rand);
  border-radius: var(--radius-mittel);
}

.info-tabelle {
  width: 100%;
  border-collapse: collapse;
}

.info-tabelle th {
  background: var(--tb-hintergrund);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tb-text-leicht);
  padding: var(--abstand-m) var(--abstand-l);
  text-align: left;
  border-bottom: 1px solid var(--tb-rand);
}

.info-tabelle td {
  padding: var(--abstand-m) var(--abstand-l);
  font-size: 0.9rem;
  color: var(--tb-text);
  border-bottom: 1px solid var(--tb-rand);
  vertical-align: top;
}

.info-tabelle tr:last-child td {
  border-bottom: none;
}

.info-tabelle td:first-child {
  font-weight: 600;
  color: var(--tb-dunkel);
  white-space: nowrap;
}


/* ──────────────────────────────────────────
   DETAILS-SEITE SPEZIFISCH
   ────────────────────────────────────────── */

.umfang-raster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--abstand-l);
}

.umfang-element {
  border-radius: var(--radius-mittel);
  padding: var(--abstand-l);
  display: flex;
  flex-direction: column;
  gap: var(--abstand-s);
}

.umfang-element--verfuegbar {
  background: var(--tb-akzent-daempf);
  border: 1px solid rgba(61, 158, 154, 0.2);
}

.umfang-element--eingeschraenkt {
  background: var(--tb-amber-hell);
  border: 1px solid rgba(232, 150, 10, 0.2);
}

.umfang-element--ausstehend {
  background: var(--tb-hintergrund);
  border: 1px solid var(--tb-rand);
}

.umfang-status {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 3px 8px;
  border-radius: 100px;
  width: fit-content;
}

.umfang-element--verfuegbar .umfang-status {
  background: rgba(61, 158, 154, 0.2);
  color: var(--tb-akzent);
}

.umfang-element--eingeschraenkt .umfang-status {
  background: rgba(232, 150, 10, 0.2);
  color: var(--tb-amber);
}

.umfang-element--ausstehend .umfang-status {
  background: var(--tb-rand);
  color: var(--tb-text-leicht);
}

.umfang-element h3 {
  font-size: 0.97rem;
}

.umfang-element p {
  font-size: 0.88rem;
  margin: 0;
}


/* ──────────────────────────────────────────
   RESPONSIVE BREAKPOINTS
   ────────────────────────────────────────── */

@media (max-width: 960px) {
  :root {
    --abstand-xxl: 4rem;
    --abstand-xl: 2.5rem;
  }

  .held-layout {
    grid-template-columns: 1fr;
    gap: var(--abstand-xl);
  }

  .held-grafik-bereich {
    justify-content: center;
    order: -1;
  }

  .held-grafik-bereich img,
  .held-grafik-bereich svg {
    max-width: 340px;
  }

  .kachel-reihe--drei {
    grid-template-columns: repeat(2, 1fr);
  }

  .kachel-reihe--vier {
    grid-template-columns: repeat(2, 1fr);
  }

  .zweispaltig {
    grid-template-columns: 1fr;
    gap: var(--abstand-xl);
  }

  .zweispaltig--umgekehrt {
    direction: ltr;
  }

  .schrittfolge {
    grid-template-columns: 1fr;
    gap: var(--abstand-l);
  }

  .schrittfolge::before {
    display: none;
  }

  .erkundungs-reihe {
    grid-template-columns: repeat(2, 1fr);
  }

  .statistik-leiste {
    grid-template-columns: repeat(2, 1fr);
  }

  .cta-banner {
    flex-direction: column;
    padding: var(--abstand-l);
    text-align: center;
    align-items: flex-start;
  }

  .fuss-oberteil {
    grid-template-columns: 1fr 1fr;
    gap: var(--abstand-l);
  }

  .fuss-marke {
    grid-column: 1 / -1;
  }

  .kontakt-layout {
    grid-template-columns: 1fr;
  }

  .kontaktinfo {
    position: static;
  }

  .rechtsseite-layout {
    grid-template-columns: 1fr;
  }

  .rechtsseite-nav {
    position: static;
    display: none;
  }

  .infoblock--zweispaltig {
    grid-template-columns: 1fr;
  }

  .umfang-raster {
    grid-template-columns: repeat(2, 1fr);
  }

  .glossar-reihe {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  :root {
    --abstand-xxl: 3rem;
    --abstand-xl: 2rem;
    --abstand-l: 1.5rem;
  }

  .inhaltsbreite {
    padding-left: var(--abstand-m);
    padding-right: var(--abstand-m);
  }

  .kopfzeile-inner {
    flex-wrap: wrap;
    height: auto;
    padding: var(--abstand-s) 0;
    gap: var(--abstand-s);
  }

  .markenzeichen {
    flex: 1;
  }

  .hauptmenu {
    width: 100%;
    flex-wrap: wrap;
    gap: 4px;
    padding-bottom: var(--abstand-xs);
  }

  .menuglied {
    font-size: 0.82rem;
    padding: 0.45rem 0.7rem;
  }

  .menu-schaltflaeche {
    display: none;
  }

  .kachel-reihe--drei,
  .kachel-reihe--zwei,
  .kachel-reihe--vier {
    grid-template-columns: 1fr;
  }

  .erkundungs-reihe {
    grid-template-columns: 1fr;
  }

  .statistik-leiste {
    grid-template-columns: 1fr 1fr;
  }

  .cta-banner {
    padding: var(--abstand-m);
  }

  .cta-banner-aktionen {
    width: 100%;
  }

  .cta-banner-aktionen .schaltflaeche {
    width: 100%;
    justify-content: center;
  }

  .held-aktionen {
    flex-direction: column;
    align-items: flex-start;
  }

  .held-aktionen .schaltflaeche {
    width: 100%;
    justify-content: center;
  }

  .fuss-oberteil {
    grid-template-columns: 1fr;
  }

  .fuss-unterteil {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--abstand-m);
  }

  .feldgruppe--zwei {
    grid-template-columns: 1fr;
  }

  .formular-bereich {
    padding: var(--abstand-l) var(--abstand-m);
  }

  .umfang-raster {
    grid-template-columns: 1fr;
  }
}