/* ==========================================================================
   LSGS – Basis-Stylesheet
   Farben und Schriften entsprechen dem bisherigen Auftritt:
   Blau #013d86, Akzentgelb #f8b333, Montserrat für Überschriften,
   Source Sans 3 für Fließtext.
   ========================================================================== */

:root {
  --blau:        #013d86;
  --blau-hell:   #1257ad;
  --blau-dunkel: #012a5c;
  --gold:        #f8b333;
  --gold-dunkel: #d9930f;

  --text:      #334155;
  --headline:  #1e293b;
  --gedaempft: #64748b;

  --grau-50:  #f9fafb;
  --grau-100: #f1f5f9;
  --grau-200: #e2e8f0;
  --grau-300: #cbd5e1;
  --grau-400: #94a3b8;
  --weiss:    #ffffff;

  --rot:      #b3261e;
  --gruen:    #15803d;

  --schrift-kopf: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --schrift-text: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --radius:       10px;
  --radius-gross: 16px;
  --schatten:     0 1px 2px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .06);
  --schatten-tief: 0 12px 40px rgba(15, 23, 42, .16);

  --breite:        1180px;
  --breite-schmal: 760px;
  /* Traegt das Logo (58px) mit gleichmaessiger Luft darueber und darunter.
     Wird auch fuer scroll-padding-top und fuer klebende Elemente genutzt. */
  --kopfhoehe:     84px;
}

/* --------------------------------------------------------------- Grundlagen */

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

/* Das hidden-Attribut muss gewinnen – sonst bleiben Elemente mit eigenem
   display (z. B. .btn, Leisten mit flex) trotz hidden sichtbar. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  /* Sprungziele nicht unter dem fixierten Kopf verstecken */
  scroll-padding-top: calc(var(--kopfhoehe) + 1rem);
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--schrift-text);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--weiss);
  overflow-wrap: break-word;
}

h1, h2, h3, h4, .seitenkopf__titel {
  font-family: var(--schrift-kopf);
  font-weight: 600;
  color: var(--headline);
  line-height: 1.2;
  margin: 0 0 .6em;
  letter-spacing: -.01em;
  /* Lange deutsche Komposita ("Luftsportgemeinschaft") sollen auf schmalen
     Bildschirmen umbrechen dürfen statt die Seite zu verbreitern. */
  hyphens: auto;
}

h1, .seitenkopf__titel { font-size: clamp(1.55rem, 1rem + 2.4vw, 3rem); }
h2 { font-size: clamp(1.4rem, 1.05rem + 1.6vw, 2.25rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + .7vw, 1.5rem); }
h4 { font-size: 1.0625rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--blau); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--blau-hell); }

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

ul, ol { padding-left: 1.3em; }

::selection { background: var(--gold); color: var(--blau-dunkel); }

:focus-visible {
  /* Zwei Ringe, damit der Fokus auf hellem UND dunklem Grund die geforderten
     3:1 erreicht (WCAG 1.4.11): innen dunkelblau gegen helle Flaechen,
     aussen gold gegen die blauen Bild- und Fussbereiche. */
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--blau-dunkel);
  border-radius: 3px;
}

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

.skip-link {
  position: absolute;
  left: 1rem; top: -100px;
  z-index: 200;
  background: var(--blau);
  color: #fff;
  padding: .7rem 1.1rem;
  border-radius: 0 0 var(--radius) var(--radius);
  text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: 0; color: #fff; }

/* ------------------------------------------------------------------ Raster */

.wrap {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: 1.25rem;
}
.wrap--schmal { max-width: var(--breite-schmal); }

.section { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }
.section--grau { background: var(--grau-50); }
.section--intro { padding-top: clamp(2.5rem, 2rem + 3vw, 4.5rem); }

.section__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: 2.25rem;
}
.section__kopf h2 { margin-bottom: 0; }

.grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 1rem + 4vw, 3.5rem);
  align-items: start;
}
@media (min-width: 900px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-2--karte { grid-template-columns: 1fr 1.15fr; }
}

.text-zentriert { text-align: center; }
.text-zentriert .btn + .btn { margin-left: .5rem; }

/* -------------------------------------------------------------- Typografie */

.kicker {
  font-family: var(--schrift-kopf);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blau);
  margin-bottom: .6rem;
}
.kicker a { text-decoration: none; }

.lead { font-size: 1.2rem; color: var(--headline); }
.lead--breit { max-width: 62ch; }

.prosa > * + * { margin-top: 1.1em; }
.prosa h2 { margin-top: 1.8em; }
.prosa h3 { margin-top: 1.6em; margin-bottom: .4em; }
.prosa h2:first-child, .prosa h3:first-child { margin-top: 0; }
.prosa li + li { margin-top: .35em; }
.prosa--recht { font-size: 1rem; }
.prosa--recht h2 { font-size: 1.3rem; }
.prosa .stand { color: var(--gedaempft); font-size: .95rem; }

.prose-figure { margin: 2rem 0; }
.prose-figure img { border-radius: var(--radius); width: 100%; }
.prose-figure figcaption {
  font-size: .9rem;
  color: var(--gedaempft);
  margin-top: .5rem;
}

blockquote {
  margin: 1.6rem 0;
  padding: .2rem 0 .2rem 1.25rem;
  border-left: 1px solid var(--grau-300);
  color: var(--headline);
  font-size: 1.1rem;
}

.link-mehr {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  font-family: var(--schrift-kopf);
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  white-space: nowrap;
}
.link-mehr::after {
  content: '';
  width: .5em; height: .5em;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .15s ease;
}
.link-mehr:hover::after { transform: rotate(45deg) translate(2px, -2px); }

.hinweis-box {
  margin-top: 2rem;
  padding: 1rem 1.25rem;
  background: var(--grau-50);
  border: 1px solid var(--grau-300);
  border-radius: var(--radius);
  font-size: .98rem;
}

.leer-hinweis {
  padding: 2.5rem 1.25rem;
  text-align: center;
  color: var(--gedaempft);
  background: var(--grau-50);
  border: 1px dashed var(--grau-300);
  border-radius: var(--radius);
}

.badge {
  display: inline-block;
  font-family: var(--schrift-kopf);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .2em .6em;
  border-radius: 999px;
  background: var(--grau-200);
  color: var(--headline);
  vertical-align: middle;
}
.badge--members { background: var(--gold); color: #3d2a00; }

/* --------------------------------------------------------------- Schaltflächen */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  font-family: var(--schrift-kopf);
  font-weight: 600;
  font-size: .98rem;
  line-height: 1.2;
  padding: .8em 1.5em;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}
.btn:active { transform: translateY(1px); }
.btn--small { padding: .55em 1.1em; font-size: .9rem; }
/* Auf Touchgeräten auch die kleinen Schaltflächen auf 44px Tippfläche */
@media (pointer: coarse) {
  .btn--small { min-height: 2.75rem; }
}
.btn--block { width: 100%; }

.btn--primary { background: var(--blau); color: #fff; border-color: var(--blau); }
.btn--primary:hover { background: var(--blau-hell); border-color: var(--blau-hell); color: #fff; }

.btn--accent { background: var(--gold); color: #3d2a00; border-color: var(--gold); }
.btn--accent:hover { background: var(--gold-dunkel); border-color: var(--gold-dunkel); color: #2b1e00; }

.btn--ghost { background: transparent; color: var(--blau); border-color: var(--grau-300); }
.btn--ghost:hover { border-color: var(--blau); background: var(--grau-50); color: var(--blau); }

.btn--ghost-light { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.65); }
.btn--ghost-light:hover { background: #fff; color: var(--blau); border-color: #fff; }

.btn--gefahr { background: var(--rot); color: #fff; border-color: var(--rot); }
.btn--gefahr:hover { background: #8e1e17; border-color: #8e1e17; color: #fff; }

/* -------------------------------------------------------------------- Kopf */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--grau-200);
  /* Bewusst ohne backdrop-filter: das erzeugt einen Bezugsrahmen für
     position:fixed und würde die mobile Menüschublade auf Kopfhöhe stutzen. */
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: var(--kopfhoehe);
}

.brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  text-decoration: none;
  color: var(--headline);
  margin-right: auto;
  min-width: 0;
}
.brand__logo { width: auto; height: 58px; }
.brand__text {
  display: flex;
  flex-direction: column;
  font-family: var(--schrift-kopf);
  line-height: 1.15;
  min-width: 0;
}
/* Nie umbrechen: sonst springt der Kopf, solange Montserrat noch lädt. */
.brand__text strong,
.brand__text span { white-space: nowrap; }
.brand__text strong { font-size: .95rem; font-weight: 600; color: var(--blau); }
.brand__text span { font-size: .8rem; color: var(--gedaempft); }

@media (max-width: 480px) {
  .brand__text strong { font-size: .78rem; }
  .brand__text span { font-size: .7rem; }
  .brand__logo { height: 46px; }
  /* Platz für den langen Vereinsnamen: Beschriftung weg, Symbol bleibt */
  .nav-toggle__label { display: none; }
  .nav-toggle { padding: .6rem .7rem; }
}
@media (max-width: 360px) {
  .brand__text strong { font-size: .72rem; }
  .brand__text span { font-size: .66rem; }
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: none;
  border: 1px solid var(--grau-300);
  border-radius: var(--radius);
  padding: .55rem .85rem;
  /* Mindestens 44px Tippfläche, auch wenn nur das Symbol sichtbar ist */
  min-height: 2.75rem;
  min-width: 2.75rem;
  justify-content: center;
  font-family: var(--schrift-kopf);
  font-weight: 600;
  font-size: .9rem;
  color: var(--headline);
  cursor: pointer;
}
.nav-toggle__bars {
  position: relative;
  width: 18px; height: 2px;
  background: currentColor;
  display: block;
}
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: '';
  position: absolute;
  left: 0; width: 18px; height: 2px;
  background: currentColor;
  transition: transform .18s ease, top .18s ease;
}
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after  { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { top: 0; transform: rotate(-45deg); }

.site-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: .25rem;
}

.site-nav__item { position: relative; }

.site-nav__link {
  display: inline-block;
  font-family: var(--schrift-kopf);
  font-weight: 600;
  font-size: .95rem;
  color: var(--headline);
  text-decoration: none;
  padding: .6rem .8rem;
  border-radius: var(--radius);
}
.site-nav__link:hover { background: var(--grau-100); color: var(--blau); }
.site-nav__link.is-active { color: var(--blau); }
.site-nav__link.is-active::after {
  content: '';
  display: block;
  height: 2px;
  background: var(--gold);
  margin-top: 2px;
}
.site-nav__link--login {
  border: 2px solid var(--blau);
  padding: .45rem 1.1rem;
  border-radius: 999px;
  margin-left: .35rem;
}
.site-nav__link--login:hover { background: var(--blau); color: #fff; }

.site-nav__more {
  background: none;
  border: 0;
  cursor: pointer;
  /* Mindestens 24x24 als Zielflaeche (WCAG 2.5.8); der Pfeil selbst bleibt klein. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  min-height: 1.75rem;
  padding: 0;
  margin-left: -.35rem;
  color: var(--gedaempft);
}
.site-nav__more::after {
  content: '';
  display: block;
  width: .45em; height: .45em;
  border-bottom: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
}
.site-nav__more[aria-expanded="true"]::after { transform: rotate(-135deg) translate(-2px, -2px); }

.site-nav__sub {
  list-style: none;
  margin: 0;
  padding: .4rem;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 250px;
  background: #fff;
  border: 1px solid var(--grau-200);
  border-radius: var(--radius);
  box-shadow: var(--schatten-tief);
  display: none;
  z-index: 10;
}
.site-nav__item:hover > .site-nav__sub,
.site-nav__item:focus-within > .site-nav__sub,
.site-nav__more[aria-expanded="true"] + .site-nav__sub { display: block; }

.site-nav__sub a {
  display: block;
  padding: .5rem .75rem;
  border-radius: 6px;
  font-size: .95rem;
  text-decoration: none;
  color: var(--text);
}
.site-nav__sub a:hover { background: var(--grau-100); color: var(--blau); }

.site-nav__user {
  padding: .5rem .75rem;
  font-size: .8rem;
  color: var(--gedaempft);
  border-bottom: 1px solid var(--grau-200);
  margin-bottom: .3rem;
}
.site-nav__logout button {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  font: inherit;
  font-size: .95rem;
  color: var(--rot);
  padding: .5rem .75rem;
  border-radius: 6px;
  cursor: pointer;
}
.site-nav__logout button:hover { background: #fdf0ef; }

/* Mobile Navigation */
@media (max-width: 1023px) {
  /* Geschlossen per display:none – so erzeugt die Schublade keinen
     horizontalen Überlauf und bleibt für Screenreader und Tastatur
     zuverlässig ausgeblendet. */
  .site-nav {
    display: none;
    position: fixed;
    inset: var(--kopfhoehe) 0 0 auto;
    width: min(22rem, 88vw);
    background: #fff;
    border-left: 1px solid var(--grau-200);
    box-shadow: var(--schatten-tief);
    padding: 1rem 1.25rem 3rem;
    overflow-y: auto;
  }
  .site-nav.ist-offen {
    display: block;
    animation: nav-einblenden .2s ease-out;
  }
  @keyframes nav-einblenden {
    from { transform: translateX(100%); }
    to   { transform: none; }
  }

  .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav__item { border-bottom: 1px solid var(--grau-100); }
  .site-nav__item.has-sub,
  .site-nav__item--account { display: grid; grid-template-columns: 1fr auto; align-items: center; }
  .site-nav__link { padding: .9rem .25rem; font-size: 1.05rem; }
  .site-nav__link.is-active::after { display: none; }
  .site-nav__link--login {
    margin: 1rem 0 0;
    text-align: center;
    grid-column: 1 / -1;
  }
  .site-nav__more { padding: .8rem; margin: 0; }
  .site-nav__sub {
    position: static;
    display: none;
    grid-column: 1 / -1;
    border: 0;
    box-shadow: none;
    padding: 0 0 .75rem .75rem;
    min-width: 0;
  }
  .site-nav__item:hover > .site-nav__sub,
  .site-nav__item:focus-within > .site-nav__sub { display: none; }
  .site-nav__more[aria-expanded="true"] + .site-nav__sub { display: block; }
}

@media (min-width: 1024px) {
  .nav-toggle { display: none; }
  .site-nav { display: block !important; margin-left: auto; }
  /* Menüpunkt und Pfeil bleiben zusammen; sonst rutscht der Pfeil unter die
     Beschriftung, sobald es eng wird (angemeldet steht dort das längere
     "Mitgliederbereich" statt "Login"). */
  .site-nav__item { display: flex; align-items: center; white-space: nowrap; flex-shrink: 0; }
  .brand { flex-shrink: 0; }
}
/* Zwischen 1024 und 1199 px knapp: etwas weniger Innenabstand, damit auch
   vor dem Laden der Schrift (breitere Ersatzschrift) Reserve bleibt. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .site-nav__list { gap: 0; }
  .site-nav__link { padding-inline: .5rem; font-size: .9rem; }
  .site-nav__link--login { padding-inline: .9rem; }
}

/* ------------------------------------------------------------------- Hero */

.hero {
  position: relative;
  display: grid;
  /* minmax(0, …) verhindert, dass ein langes Wort die Spalte aufbläht */
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  min-height: clamp(26rem, 60vh, 38rem);
  color: #fff;
  isolation: isolate;
}
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(1,42,92,.88) 0%, rgba(1,61,134,.68) 48%, rgba(1,61,134,.28) 100%);
  z-index: -1;
}
.hero__inner { padding-block: clamp(3rem, 8vh, 5rem); max-width: 46rem; }
.hero__kicker {
  font-family: var(--schrift-kopf);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .9rem;
}
.hero__titel {
  color: #fff;
  margin-bottom: .6em;
  /* eigene Staffelung, damit "Luftsportgemeinschaft" auch bei 320px passt */
  font-size: clamp(1.5rem, .9rem + 2.8vw, 3rem);
}
.hero__titel span { display: block; }
.hero__text { font-size: 1.2rem; color: rgba(255,255,255,.93); max-width: 38rem; }
.hero__aktionen { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

/* ------------------------------------------------------------- Seitenkopf */

.seitenkopf {
  background: var(--grau-50);
  border-bottom: 1px solid var(--grau-200);
  padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem);
}
.seitenkopf__inner { max-width: 48rem; }
.seitenkopf h1, .seitenkopf__titel { margin-bottom: .4em; }
/* Alle Fassungen im selben Rasterfeld: Höhe = längste, sichtbar ist nur die erste */
.seitenkopf__stapel { display: grid; }
.seitenkopf__stapel > * { grid-area: 1 / 1; }
.seitenkopf__platzhalter { visibility: hidden; }
.seitenkopf__intro { font-size: 1.15rem; color: var(--gedaempft); margin-bottom: 0; }

.seitenkopf--bild {
  position: relative;
  background: var(--blau-dunkel);
  border-bottom: 0;
  color: #fff;
  isolation: isolate;
  padding-block: clamp(3.5rem, 3rem + 4vw, 6rem);
}
.seitenkopf__bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
}
.seitenkopf__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(1,42,92,.9) 10%, rgba(1,61,134,.6) 100%);
  z-index: -1;
}
.seitenkopf--bild h1 { color: #fff; }
.seitenkopf--bild .kicker { color: var(--gold); }
.seitenkopf--bild .seitenkopf__intro { color: rgba(255,255,255,.92); }

/* ----------------------------------------------------------------- Fakten */

.fakten {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.fakten li {
  background: var(--grau-50);
  border: 1px solid var(--grau-200);
  border-radius: var(--radius-gross);
  padding: 1.5rem 1.25rem;
  text-align: center;
}
.fakten strong {
  display: block;
  font-family: var(--schrift-kopf);
  font-size: 2rem;
  color: var(--blau);
  line-height: 1.1;
}
.fakten span { font-size: .92rem; color: var(--gedaempft); }

/* ------------------------------------------------------------------- News */

.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: 1.75rem;
}

/* Die Karte ist selbst kein Link mehr (seit 01.11.2026 keine Beitragsseite);
   ein optionaler Link steht unten im Text. */
.news-karte {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--grau-200);
  border-radius: var(--radius-gross);
  overflow: hidden;
}

.news-karte__bild { aspect-ratio: 16 / 9; background: var(--grau-100); overflow: hidden; }
.news-karte__bild img { width: 100%; height: 100%; object-fit: cover; }
.news-karte__platzhalter {
  display: block; width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--blau) 0%, var(--blau-hell) 100%);
}

.news-karte__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.35rem 1.35rem 1.6rem;
}
.news-karte__datum {
  display: block;
  font-size: .85rem;
  color: var(--gedaempft);
  margin-bottom: .35rem;
}
.news-karte .badge { margin-bottom: .5rem; }
.news-karte__titel { font-size: 1.2rem; margin-bottom: .5rem; }
.news-karte__absatz { color: var(--text); font-size: .98rem; margin-bottom: .75rem; }
.news-karte__absatz:last-child { margin-bottom: 0; }
/* margin-top: auto setzt den Link in einer Kartenreihe auf dieselbe Höhe */
.news-karte__mehr {
  margin-top: auto;
  padding-top: .5rem;
  font-size: .92rem;
  white-space: normal;
}
.news-karte__mehr:hover { text-decoration: underline; }


/* ------------------------------------------------------------ Flotte-Strip */

.flotte-strip {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 1.25rem;
}
.flotte-strip a {
  display: block;
  text-decoration: none;
  color: inherit;
  text-align: center;
}
.flotte-strip img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-gross);
  margin-bottom: .75rem;
  transition: transform .18s ease;
}
.flotte-strip a:hover img { transform: scale(1.02); }
.flotte-strip__kennung {
  display: block;
  font-family: var(--schrift-kopf);
  font-weight: 600;
  color: var(--blau);
}
.flotte-strip__typ { display: block; font-size: .9rem; color: var(--gedaempft); }

/* ---------------------------------------------------------------- Flugzeug */

.flugzeug__kopf { margin-bottom: 2rem; }
.flugzeug__kopf h2 { margin-bottom: 0; }
.flugzeug__kopf h2 span { color: var(--gedaempft); font-weight: 600; }

.flugzeug__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}
@media (min-width: 900px) {
  .flugzeug__body { grid-template-columns: 1fr 1.1fr; }
}

.datenliste { margin: 0; }
.datenliste > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--grau-200);
}
.datenliste dt { color: var(--gedaempft); }
.datenliste dd { margin: 0; font-weight: 600; color: var(--headline); text-align: right; }

.flugzeug__bilder {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .85rem;
}
.flugzeug__bilder img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
}
.flugzeug__bilder li:only-child { grid-column: 1 / -1; }
.flugzeug__bilder li:only-child img { aspect-ratio: 16 / 9; }

/* ------------------------------------------------------------- Mini-Karten */

.karten-liste { display: grid; gap: 1rem; }
.karten-liste--quer { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); margin-top: 2rem; }

.mini-karte {
  display: block;
  padding: 1.35rem 1.4rem;
  background: #fff;
  border: 1px solid var(--grau-200);
  border-radius: var(--radius-gross);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.mini-karte:hover { border-color: var(--blau); box-shadow: var(--schatten); }
.mini-karte h2 { font-size: 1.1rem; margin-bottom: .3rem; color: var(--blau); }
.mini-karte p { font-size: .95rem; color: var(--gedaempft); margin: 0; }
.mini-karte--admin { border-color: var(--gold); }

/* ---------------------------------------------------------------- Vorteile */

.vorteile {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 2rem;
  margin-top: 2.5rem;
}
.vorteile h3 { color: var(--blau); }

/* --------------------------------------------------------------- Bildreihe */

.bildreihe {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1.25rem;
}
.bildreihe img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }

.bild-hochkant img, .bild-quer img { width: 100%; border-radius: var(--radius-gross); }
.bild-hochkant { margin: 0; max-width: 24rem; }
.bild-quer { margin: 0; }

/* Die Lizenzmuster sind Dokumente, keine Bildmotive: kleiner gehalten, mit
   Unterschrift, damit sie den Fliesstext daneben nicht erschlagen.
   Der kleine Versatz oben setzt die Bildkante auf die Versalhoehe der
   Ueberschrift statt auf deren Zeilenkasten. */
.bild-dokument { margin: .35rem 0 0; max-width: 17rem; }
.bild-dokument img {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--grau-200);
  box-shadow: 0 2px 4px rgba(15, 23, 42, .05), 0 10px 28px rgba(15, 23, 42, .08);
}
.bild-dokument figcaption {
  margin-top: .7rem;
  font-size: .85rem;
  color: var(--gedaempft);
}
@media (min-width: 900px) {
  /* Das Dokument sitzt in einer eigenen, schmaleren Spalte – der Fliesstext
     behaelt dadurch ein lesbares Mass statt auf halbe Breite zu schrumpfen. */
  .grid-2--dokument { grid-template-columns: minmax(0, 1fr) minmax(0, 17rem); }
}

/* ---------------------------------------------------------------- Chronik */

.chronik { list-style: none; margin: 2.5rem 0 0; padding: 0; }
.chronik__eintrag {
  display: grid;
  grid-template-columns: 1fr;
  gap: .4rem 2rem;
  padding: 0 0 2.25rem 1.75rem;
  border-left: 2px solid var(--grau-200);
  position: relative;
}
.chronik__eintrag::before {
  content: '';
  position: absolute;
  left: -.5rem; top: .35rem;
  width: .875rem; height: .875rem;
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid #fff;
}
.chronik__eintrag:last-child { padding-bottom: 0; border-left-color: transparent; }
.chronik__jahr {
  font-family: var(--schrift-kopf);
  font-weight: 600;
  color: var(--blau);
  letter-spacing: .04em;
}
.chronik__inhalt h3 { font-size: 1.2rem; margin-bottom: .35rem; }
@media (min-width: 720px) {
  .chronik__eintrag { grid-template-columns: 9rem 1fr; }
}

/* --------------------------------------------------------------- Lizenzen */

/* Mitlaufendes Verzeichnis neben den Ausbildungsabschnitten.
   Auf schmalen Schirmen eine waagerechte Leiste aus Sprunglinks, ab 1200px
   eine senkrechte Liste, die beim Scrollen stehen bleibt und den gerade
   gelesenen Abschnitt markiert. Ohne JavaScript bleiben es Sprunglinks. */
.ausbildung-layout { display: grid; gap: 2rem; }
@media (min-width: 1200px) {
  .ausbildung-layout {
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: clamp(2.5rem, 1rem + 3vw, 4rem);
    align-items: start;
  }
}

.ausbildung-nav__titel {
  margin: 0 0 .7rem;
  font-family: var(--schrift-kopf);
  font-size: .95rem;
  font-weight: 600;
  color: var(--headline);
}
.ausbildung-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.ausbildung-nav a {
  display: block;
  padding: .45rem .9rem;
  border: 1px solid var(--grau-200);
  border-radius: 999px;
  background: var(--weiss);
  font-size: .92rem;
  text-decoration: none;
}
.ausbildung-nav a:hover { border-color: var(--blau); }

@media (min-width: 1200px) {
  .ausbildung-nav {
    position: sticky;
    /* Fixierter Seitenkopf plus etwas Luft. */
    top: calc(var(--kopfhoehe) + 1.5rem);
  }
  .ausbildung-nav ul {
    display: block;
    padding-left: 1rem;
    border-left: 1px solid var(--grau-200);
  }
  .ausbildung-nav a {
    position: relative;
    padding: .5rem 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--gedaempft);
    line-height: 1.35;
  }
  .ausbildung-nav a:hover { color: var(--blau); }
  /* Punkt auf der Leitlinie statt farbiger Seitenkante – die waere genau das
     Akzentstreifen-Muster, das wir ueberall sonst entfernt haben. */
  .ausbildung-nav a::before {
    content: '';
    position: absolute;
    left: -1.25rem;
    top: 50%;
    width: 7px; height: 7px;
    margin-top: -3.5px;
    border-radius: 50%;
    background: var(--gold);
    opacity: 0;
    transition: opacity .15s ease;
  }
  .ausbildung-nav a[aria-current="true"] {
    color: var(--blau);
    font-weight: 600;
  }
  .ausbildung-nav a[aria-current="true"]::before { opacity: 1; }
}

.ausbildung-intro .lead { margin: 0; max-width: 62ch; }
.ausbildung-intro h2 { margin-bottom: .5em; }

.ausbildung-teil {
  margin-top: clamp(2.25rem, 1.5rem + 2vw, 3.25rem);
  padding-top: clamp(2.25rem, 1.5rem + 2vw, 3.25rem);
  border-top: 1px solid var(--grau-200);
}
.ausbildung-teil .prosa h2 { margin-top: 0; }

/* ---------------------------------------------------------------- Personen */

.personen__gruppe { margin-top: 2.5rem; font-size: 1.15rem; color: var(--blau); }
.personen__gruppe:first-of-type { margin-top: 1.5rem; }

.personen {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: 1rem;
}
.person {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: .9rem;
  align-items: center;
  padding: .9rem 1rem;
  background: #fff;
  border: 1px solid var(--grau-200);
  border-radius: var(--radius);
}
.person__initialen {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  background: var(--blau);
  color: #fff;
  font-family: var(--schrift-kopf);
  font-weight: 600;
  font-size: .95rem;
}
.person__name { font-family: var(--schrift-kopf); font-weight: 600; color: var(--headline); }
.person__rolle { font-size: .88rem; color: var(--gedaempft); }

/* ----------------------------------------------------------------- Tarife */

.tarife {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1.75rem;
  margin-top: 2.5rem;
}
.tarif {
  background: #fff;
  border: 1px solid var(--grau-200);
  border-radius: var(--radius-gross);
  padding: 1.75rem 1.6rem;
}
.tarif--hervorgehoben { border-color: var(--blau); box-shadow: var(--schatten); }
.tarif h3 {
  font-size: 1.35rem;
  color: var(--blau);
  padding-bottom: .6rem;
  border-bottom: 2px solid var(--gold);
}
.tarif h4 {
  margin: 1.5rem 0 .5rem;
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gedaempft);
}
.tarif h4 span { text-transform: none; letter-spacing: 0; font-weight: 400; }

.preis-tabelle { width: 100%; border-collapse: collapse; font-size: .95rem; }
.preis-tabelle th,
.preis-tabelle td {
  text-align: left;
  padding: .5rem 0;
  border-bottom: 1px solid var(--grau-100);
  font-weight: 400;
  vertical-align: top;
}
.preis-tabelle td { text-align: right; white-space: nowrap; font-weight: 600; color: var(--headline); }
.preis-tabelle tr:last-child th, .preis-tabelle tr:last-child td { border-bottom: 0; }

.preis-tabelle--breit { margin: 1rem 0 1.5rem; }
.preis-tabelle--breit thead th {
  font-family: var(--schrift-kopf);
  font-weight: 600;
  color: var(--headline);
  border-bottom: 2px solid var(--grau-300);
}
.preis-tabelle--breit td { text-align: left; white-space: normal; font-weight: 400; }

.hinweise { margin-top: 2.5rem; font-size: .96rem; }

/* --------------------------------------------------------------- Galerien */

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 2rem;
  margin-top: 2.5rem;
}
.video { margin: 0; }
.video video {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius);
}
.video figcaption {
  margin-top: .7rem;
  font-family: var(--schrift-kopf);
  font-weight: 600;
  font-size: .98rem;
  color: var(--headline);
}

.galerie { margin-top: 3rem; }
.galerie:first-of-type { margin-top: 2rem; }
.galerie__titel {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .75rem;
  font-size: 1.25rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--grau-200);
}
.galerie__anzahl { font-family: var(--schrift-text); font-size: .9rem; font-weight: 400; color: var(--gedaempft); }

.galerie__grid {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(45%, 9.5rem), 1fr));
  gap: .6rem;
}
.galerie__grid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 6px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.galerie__grid a { display: block; }
.galerie__grid a:hover img { transform: scale(1.03); box-shadow: var(--schatten); }
.galerie__mehr { margin-top: 1.25rem; }

/* --------------------------------------------------------------- Lightbox */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(2, 16, 34, .94);
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 1rem;
}
.lightbox[hidden] { display: none; }
.lightbox__bild {
  justify-self: center;
  align-self: center;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
}
.lightbox__leiste {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: rgba(255,255,255,.8);
  font-size: .9rem;
}
.lightbox button {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
  font: inherit;
  font-size: 1rem;
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  cursor: pointer;
}
.lightbox button:hover { background: rgba(255,255,255,.25); }
.lightbox__nav { display: flex; gap: .5rem; }

/* ------------------------------------------------------------------ Karte */

.karte__frame {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--grau-300);
  border-radius: var(--radius-gross);
}
.karte__quelle { font-size: .82rem; color: var(--gedaempft); margin-top: .5rem; }

/* --------------------------------------------------------------- Standort */
/* Anschrift und Karte als eine Einheit. Die Karte beantwortet die Frage
   "wo ist das?" und bekommt deshalb die groessere Flaeche; die Anschrift
   steht ruhig daneben und ist vertikal zentriert, damit die Spalte nicht
   unten ausfranst. Beide Haelften stossen randlos aneinander. */
.standort {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--weiss);
  border: 1px solid var(--grau-200);
  border-radius: var(--radius-gross);
  box-shadow: var(--schatten);
  overflow: hidden;
}
@media (min-width: 860px) {
  .standort { grid-template-columns: minmax(0, 23rem) minmax(0, 1fr); }
}

.standort__info {
  display: grid;
  align-content: center;
  gap: 1.1rem;
  padding: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem);
}
.standort__info h2, .standort__info h3 { margin: 0; font-size: 1.25rem; }
.standort__zusatz { margin: 0; font-size: .88rem; color: var(--gedaempft); }
/* Wegbeschreibung unter der Anschrift – der Abstand kommt vom Raster-gap. */
.standort__weg { margin: 0; font-size: .95rem; }
.standort__aktion { margin: 0; }

/* Die Anschrift verliert im Panel ihre eigene Kartenhuelle – verschachtelte
   Kaesten waeren hier nur Dekoration. Das Symbol wandert ueber die Zeilen,
   damit der lange Vereinsname die volle Spaltenbreite behaelt und nicht
   dreimal umbricht. */
.standort .adresskarte {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: .9rem;
}

.standort__karte { min-height: 17rem; display: grid; }
@media (min-width: 860px) { .standort__karte { min-height: 21rem; } }

.standort__karte .karte { display: flex; flex-direction: column; min-height: 100%; }
.standort__karte .karte__frame {
  flex: 1 1 auto;
  aspect-ratio: auto;
  min-height: 17rem;
  border: 0;
  border-radius: 0;
}
.standort__karte .karte__quelle {
  margin: 0;
  padding: .5rem clamp(.9rem, .6rem + 1vw, 1.25rem);
  background: var(--grau-50);
  border-top: 1px solid var(--grau-200);
}
.standort__karte .karte__statisch img { border: 0; border-radius: 0; }
.standort__karte .karte__statisch figcaption,
.standort__karte .karte__consent {
  padding-inline: clamp(.9rem, .6rem + 1vw, 1.25rem);
}
.standort__karte .karte__consent {
  margin: 0;
  padding-block: 1rem;
  border: 0;
  border-top: 1px solid var(--grau-200);
  border-radius: 0;
}
@media (min-width: 860px) {
  /* Oben links ist die Panelkante schon gerundet – die Trennlinie sitzt
     stattdessen senkrecht zwischen den beiden Haelften. */
  .standort__karte { border-top: 0; border-left: 1px solid var(--grau-200); }
}

.karte__statisch { margin: 0; }
.karte__statisch img { width: 100%; border-radius: var(--radius-gross); border: 1px solid var(--grau-200); }
.karte__statisch figcaption { font-size: .85rem; color: var(--gedaempft); margin-top: .5rem; }

.karte__consent {
  margin-top: 1rem;
  padding: 1rem 1.25rem;
  background: var(--grau-50);
  border: 1px solid var(--grau-200);
  border-radius: var(--radius);
  font-size: .92rem;
}
.karte__consent p { margin-bottom: .75rem; }
.karte__alt { margin: .75rem 0 0; color: var(--gedaempft); }

/* -------------------------------------------------------------------- CTA */

.cta {
  position: relative;
  isolation: isolate;
  color: #fff;
  padding-block: clamp(3.5rem, 3rem + 4vw, 6rem);
  text-align: center;
}
.cta__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
}
.cta__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(1,42,92,.93), rgba(1,61,134,.85));
  z-index: -1;
}
.cta h2 { color: #fff; }
.cta p { max-width: 44rem; margin-inline: auto; color: rgba(255,255,255,.92); }
.cta__aktionen { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: 2rem; }

.section--cta-schmal { background: var(--blau); color: #fff; }
.section--cta-schmal h2 { color: #fff; }
.section--cta-schmal p { color: rgba(255,255,255,.9); }
.section--cta-schmal .btn--primary { background: var(--gold); border-color: var(--gold); color: #3d2a00; }
.section--cta-schmal .btn--primary:hover { background: var(--gold-dunkel); border-color: var(--gold-dunkel); }
.section--cta-schmal .btn--ghost { color: #fff; border-color: rgba(255,255,255,.6); }
.section--cta-schmal .btn--ghost:hover { background: #fff; color: var(--blau); }

/* --------------------------------------------------------------- Formulare */

.formular, .kontaktform { margin-top: 1.5rem; }

.field { display: block; margin-bottom: 1.25rem; }
.field > label,
.field legend {
  display: block;
  font-family: var(--schrift-kopf);
  font-weight: 600;
  font-size: .92rem;
  color: var(--headline);
  margin-bottom: .35rem;
}
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="password"],
.field input[type="datetime-local"],
.field input[type="date"],
.field input[type="number"],
.field input[type="file"],
.field select,
.field textarea {
  width: 100%;
  font: inherit;
  color: var(--text);
  padding: .65rem .8rem;
  border: 1px solid var(--grau-300);
  border-radius: var(--radius);
  background: #fff;
}
.field textarea { resize: vertical; min-height: 7rem; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blau); }
/* Fehlerfarbe erst, nachdem jemand das Feld wirklich bearbeitet hat –
   nicht schon beim Laden eines leeren Pflichtfelds. */
.field input:user-invalid,
.field select:user-invalid,
.field textarea:user-invalid { border-color: var(--rot); }

.field__hinweis { display: block; font-size: .85rem; color: var(--gedaempft); margin-top: .35rem; }
.field__prefix { font-size: .9rem; color: var(--gedaempft); }

.field--choices { border: 0; margin: 0 0 1.25rem; padding: 0; }
.field--choices legend { padding: 0; }

.choice {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .6rem;
  align-items: start;
  font-size: .98rem;
  margin-bottom: .45rem;
  cursor: pointer;
}
.choice input { margin-top: .3rem; width: 1.1rem; height: 1.1rem; accent-color: var(--blau); }
.choice strong { display: block; font-family: var(--schrift-kopf); }
.choice--fest { cursor: default; color: var(--gedaempft); }

.field--consent { font-size: .95rem; }
.field--consent .choice span { color: var(--gedaempft); }

.kontaktform__row { display: grid; grid-template-columns: 1fr; gap: 0 1.25rem; }
@media (min-width: 640px) { .kontaktform__row { grid-template-columns: 1fr 1fr; } }

.kontaktform__submit { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.kontaktform__hint { font-size: .85rem; color: var(--gedaempft); }

/* Honeypot – für Menschen unsichtbar, aber nicht display:none (Bots prüfen das) */
.hp {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.flash-area { margin-top: 1.5rem; }
.flash {
  padding: .9rem 1.2rem;
  border-radius: var(--radius);
  border: 1px solid;
  margin-bottom: .75rem;
  font-size: .98rem;
}
.flash--success { background: #f0fdf4; border-color: #bbf7d0; color: #14532d; }
.flash--error   { background: #fef2f2; border-color: #fecaca; color: #7f1d1d; }
.flash--info    { background: #eff6ff; border-color: #bfdbfe; color: #1e3a8a; }
.flash p { margin: 0; }

/* ------------------------------------------------------------------ Login */

.login-seite { background: var(--grau-50); min-height: 70vh; display: grid; align-items: center; }
.login-karte {
  max-width: 26rem;
  margin-inline: auto;
  background: #fff;
  border: 1px solid var(--grau-200);
  border-radius: var(--radius-gross);
  box-shadow: var(--schatten);
  padding: 2.25rem 2rem;
}
.login-karte h1 { font-size: 1.6rem; }
.login-karte__intro { font-size: .95rem; color: var(--gedaempft); }
.login-karte__hilfe {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--grau-200);
  font-size: .9rem;
  color: var(--gedaempft);
}

.platzhalter {
  padding: 2.5rem 2rem;
  background: var(--grau-50);
  border: 1px dashed var(--grau-300);
  border-radius: var(--radius-gross);
  text-align: center;
}
.platzhalter h2 { font-size: 1.3rem; }

.datenliste--konto > div { border-bottom: 1px solid var(--grau-200); }

/* -------------------------------------------------------------- Fehlerseite */

.fehlerseite { padding-block: clamp(4rem, 10vh, 7rem); }
.fehlerseite__code {
  font-family: var(--schrift-kopf);
  font-size: clamp(4rem, 12vw, 7rem);
  font-weight: 600;
  line-height: 1;
  color: var(--grau-200);
  margin-bottom: .5rem;
}

/* ------------------------------------------------------------ Cookie-Banner */

.cookie-banner {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 250;
  background: #fff;
  border-top: 3px solid var(--blau);
  box-shadow: 0 -8px 32px rgba(15, 23, 42, .18);
  padding: 1.5rem 1.25rem;
  max-height: 85vh;
  overflow-y: auto;
}
.cookie-banner__inner { max-width: var(--breite-schmal); margin-inline: auto; }
.cookie-banner h2 { font-size: 1.2rem; margin-bottom: .6rem; }
.cookie-banner p { font-size: .95rem; margin-bottom: .7rem; }
.cookie-banner__note { color: var(--gedaempft); font-size: .88rem; }
.cookie-banner__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  margin-top: 1.1rem;
}
.cookie-banner__link { font-size: .92rem; }

.cookie-form__gruppe {
  border: 1px solid var(--grau-200);
  border-radius: var(--radius-gross);
  padding: 1.25rem 1.4rem;
  margin: 0 0 1.25rem;
}
.cookie-form__gruppe legend {
  font-family: var(--schrift-kopf);
  font-weight: 600;
  color: var(--blau);
  padding-inline: .4rem;
}
.cookie-form__status { font-size: .9rem; color: var(--gedaempft); }
.cookie-form__aktionen { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ------------------------------------------------------------------- Fuß */

.site-footer {
  background: var(--blau-dunkel);
  color: rgba(255,255,255,.82);
  padding-top: clamp(3rem, 2rem + 3vw, 4.5rem);
  font-size: .96rem;
}
.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 2.5rem;
  padding-bottom: 2.5rem;
}
.site-footer h2 {
  color: #fff;
  font-size: .85rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { color: var(--gold); text-decoration: underline; }
.site-footer__logo {
  height: 64px; width: auto;
  background: #fff;
  border-radius: var(--radius);
  padding: .5rem .75rem;
  margin-bottom: 1rem;
}
.site-footer__claim { max-width: 22rem; }
.site-footer address { font-style: normal; line-height: 1.8; margin-bottom: 1rem; }
.site-footer__links { list-style: none; margin: 0; padding: 0; }
.site-footer__links li + li { margin-top: .5rem; }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.15);
  font-size: .88rem;
}
.site-footer__bottom p { margin: 0; }
.site-footer__legal { list-style: none; display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 0; padding: 0; }

/* -------------------------------------------------------------- Druckansicht */

@media print {
  .site-header, .site-footer, .cookie-banner, .hero__aktionen, .cta, .skip-link { display: none !important; }
  body { font-size: 11pt; color: #000; }
  a { color: #000; text-decoration: underline; }
  .section { padding-block: 1rem; }
}