/* ==========================================================================
   AUSBILDER SCHMIDT — Design-System
   Stack: reines CSS, kein Build-Schritt. Mobile first.
   Breakpoints (Briefing): Tablet 768px / Desktop 1200px / Wide 1600px
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. SCHRIFTEN — lokal gehostet (assets/fonts/), KEIN Google-Fonts-CDN.
   Abweichung vom Briefing aus Datenschutzgründen (LG München I, 2022):
   gleiche Schriften, gleiche Optik, keine IP-Übertragung an Google.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Oswald";
  src: url("assets/fonts/oswald-variable-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("assets/fonts/barlow-condensed-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("assets/fonts/barlow-condensed-600-latin.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("assets/fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Farben (Briefing 4.1) */
  --color-primary:    #4a5240;
  --color-black:      #0d0d0d;
  --color-sand:       #c8b99a;
  --color-signal-red: #cc2200;
  --color-warning:    #f5c400;
  --color-white:      #f0ede8;

  --bg-base:    #0d0d0d;
  --bg-surface: #1a1c18;
  --bg-card:    #222620;

  --rand-sand:  rgba(200, 185, 154, 0.2);

  /* Typografie */
  --font-headline: "Oswald", "Barlow Condensed", sans-serif;
  --font-body:     "Barlow Condensed", sans-serif;
  --font-mono:     "IBM Plex Mono", "Courier New", monospace;

  /* Breakpoint-Referenz (in Media Queries als Festwert verwenden,
     CSS-Variablen funktionieren dort nicht):
     --bp-tablet:  768px;
     --bp-desktop: 1200px;
     --bp-wide:    1600px;                                            */

  /* Raum */
  --abschnitt-y: clamp(4rem, 9vw, 7.5rem);
  --inhalt-breite: 1200px;
  --header-hoehe: 64px;

  /* Papier-Noise für Dienstakten-Karten und Hintergründe */
  --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
  /* Feinere, leicht waagerechte Papierfaser (Akten-„Griffigkeit") */
  --papier-faser: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.012 0.5' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23f)' opacity='0.5'/></svg>");

  /* Gestapelte Blätter hinter einer Akte (dunkler werdend nach hinten) */
  --akte-blatt-2: #1d211b;
  --akte-blatt-3: #181b16;

  /* Aktendeckel/Mappe (Khaki) — deutlich heller als das fast-schwarze Blatt,
     damit Mappe und Akte klar voneinander abgesetzt sind. */
  --akte-mappe:       #6f6643;
  --akte-mappe-licht: #877c52;
  --akte-mappe-rand:  #14150d;
}

/* --------------------------------------------------------------------------
   3. BASIS
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg-base);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--color-sand); }
a:hover, a:focus-visible { color: var(--color-white); }

h1, h2, h3 {
  font-family: var(--font-headline);
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.05;
  margin: 0;
}

::selection { background: var(--color-signal-red); color: var(--color-white); }

:focus-visible {
  outline: 2px solid var(--color-warning);
  outline-offset: 2px;
}

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

.skip-link {
  position: absolute;
  left: -200vw;
  top: 0;
  z-index: 200;
  background: var(--color-signal-red);
  color: var(--color-white);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  text-transform: uppercase;
  padding: 0.6rem 1rem;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   4. KOMPONENTEN
   -------------------------------------------------------------------------- */

/* ---- Buttons: Stencil-Optik, scharfe Kanten, gesperrte CAPS ---- */
.btn {
  display: inline-block;
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-decoration: none;
  text-align: center;
  padding: 0.85em 1.8em;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease,
              border-color 0.15s ease, transform 0.15s ease;
}
.btn-cta {
  background: var(--color-signal-red);
  color: var(--color-white);
  border-color: var(--color-signal-red);
}
.btn-cta:hover, .btn-cta:focus-visible {
  background: #e02f0c;
  border-color: #e02f0c;
  color: var(--color-white);
  transform: translateY(-2px);
}
.btn-sekundaer {
  background: transparent;
  color: var(--color-sand);
  border-color: var(--color-sand);
}
.btn-sekundaer:hover, .btn-sekundaer:focus-visible {
  color: var(--color-black);
  background: var(--color-sand);
}
.btn-gross {
  font-size: 1.25rem;
  padding: 1em 2.4em;
}
/* Pulsierender Signalrot-Rand (Hero-CTA) */
.btn-puls { animation: puls 2s ease-out infinite; }
@keyframes puls {
  0%   { box-shadow: 0 0 0 0 rgba(204, 34, 0, 0.65); }
  70%  { box-shadow: 0 0 0 14px rgba(204, 34, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(204, 34, 0, 0); }
}

/* ---- Stempel: roter Rand, CAPS, leichte Rotation, Gummistempel-Grunge ---- */
.stempel {
  display: inline-block;
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-signal-red);
  border: 3px solid var(--color-signal-red);
  border-radius: 3px;
  padding: 0.3em 0.8em 0.25em;
  rotate: var(--stempel-rotation, -3deg);
  opacity: 0.92;
  /* Noise-Maske = abgenutzte Stempelfarbe */
  -webkit-mask-image: var(--noise), linear-gradient(rgba(0,0,0,0.88), rgba(0,0,0,0.88));
  -webkit-mask-composite: source-over;
  mask-image: var(--noise), linear-gradient(rgba(0,0,0,0.88), rgba(0,0,0,0.88));
  mask-composite: add;
  user-select: none;
  pointer-events: none;
}

/* ---- Badges (Typ-Kennzeichnung Termine) ---- */
.badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.25em 0.6em;
  border: 1px solid var(--color-sand);
  color: var(--color-sand);
  white-space: nowrap;
  vertical-align: middle;
}
.badge-solo {
  background: var(--color-signal-red);
  border-color: var(--color-signal-red);
  color: var(--color-white);
  font-weight: 700;
}

/* ---- Dienstakten-Karte ---- */
.akte {
  position: relative;
  background-color: var(--bg-card);
  /* Echte Akten-Anmutung: griffige Papierfaser + feines Korn, dazu eine sanfte
     Lichtkante oben und ein Schatten unten (gewölbtes Blatt), plus ein Hauch
     Papierwärme — bewusst dunkel gehalten, nicht weiß, nicht grell. */
  background-image:
    var(--papier-faser),
    var(--noise),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 14%,
                    transparent 86%, rgba(0, 0, 0, 0.12) 100%),
    radial-gradient(135% 80% at 50% -12%, rgba(200, 185, 154, 0.06), transparent 55%);
  background-size: 200px 200px, 160px 160px, 100% 100%, 100% 100%;
  background-blend-mode: overlay, overlay, normal, normal;
  border: 1px solid var(--rand-sand);
  padding: 2rem 1.5rem 2rem 2.5rem;
  /* Ein angedeutetes zweites Blatt dahinter + weicher Raumschatten. */
  box-shadow:
    3px 4px 0 0 var(--akte-blatt-2),
    13px 15px 26px rgba(0, 0, 0, 0.5);
}

/* ===========================================================================
   AKTEN-MAPPE — Dokument-Karten sehen aus wie ein Blatt in einer aufgeschlagenen
   Geheimakte: dunkler Aktendeckel mit Reiter-Lasche ringsum + große Büroklammer.
   Gilt NICHT für die Programm-Karte (Foto) und die Merch-Kiste.
   =========================================================================== */
.akte:not(.programm-karte):not(.merch-karte) {
  margin-top: 1.9rem;                 /* Platz für die Reiter-Lasche oben */
  padding-top: 4rem;                  /* Platz für die Büroklammer über dem Titel */
  /* MAPPE = Element-Hintergrund (liegt immer ganz hinten, unabhängig vom
     Stacking Context von .reveah). Heller Khaki + helle Lasche oben. */
  background-color: var(--akte-mappe);
  background-image:
    linear-gradient(180deg, var(--akte-mappe-licht) 0 18px, transparent 18px),
    var(--papier-faser);
  background-size: 100% 100%, 200px 200px;
  background-blend-mode: normal, overlay;
  border: 1px solid var(--akte-mappe-rand);
  /* Reiter-Lasche oben links */
  clip-path: polygon(
    0 18px, 14% 18px, 17% 0, 47% 0, 50% 18px, 100% 18px,
    100% 100%, 0 100%
  );
  box-shadow: 13px 15px 26px rgba(0, 0, 0, 0.5);
}

/* BLATT = ::before, eingerückt auf der Mappe. Negativer z-index legt es im
   Element ÜBER den Mappen-Hintergrund, aber UNTER den Text — das gilt in
   jedem Stacking Context, daher robust gegen .reveal. */
.akte:not(.programm-karte):not(.merch-karte)::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 26px;
  left: 13px;
  right: 13px;
  bottom: 13px;
  background-color: var(--bg-card);
  background-image:
    var(--papier-faser),
    var(--noise),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 14%,
                    transparent 86%, rgba(0, 0, 0, 0.12) 100%);
  background-size: 200px 200px, 160px 160px, 100% 100%;
  background-blend-mode: overlay, overlay, normal;
  border: 1px solid var(--rand-sand);
  box-shadow: 3px 4px 0 0 var(--akte-blatt-2); /* angedeutetes zweites Blatt */
  pointer-events: none;
}

/* (Keine Büroklammer mehr auf den Akten-Mappen — die einzige Klammer sitzt
   am Foto in der Personalakte, siehe .akte-foto-clip.) */

.akte-titel {
  font-size: 0.95rem;
  letter-spacing: 0.2em;
  color: var(--color-sand);
  border-bottom: 1px solid var(--rand-sand);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}
.akte-titel + .akte-titel,
ul + .akte-titel, dl + .akte-titel { margin-top: 2rem; }

.akte-liste { margin: 0; }
.akte-felder, .akte-liste {
  display: grid;
  gap: 0.85rem;
}
.akte-feld { margin: 0; }
.akte-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.69rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-sand);
  margin-bottom: 0.15rem;
}
.akte-wert {
  display: block;
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  font-family: var(--font-body);
  color: var(--color-white);
}
.akte-wert a { color: var(--color-white); text-decoration-color: var(--color-sand); }
.akte-klein {
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--color-sand);
}

/* ---- Warnstreifen-Trenner (max. 2x pro Seite) ---- */
.warnstreifen {
  height: 8px;
  background: repeating-linear-gradient(
    -45deg,
    var(--color-warning) 0 16px,
    var(--color-black) 16px 32px
  );
}

/* --------------------------------------------------------------------------
   5. HEADER / NAVIGATION
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}
.site-header.ist-gescrollt {
  background: var(--bg-surface);
  box-shadow: 0 2px 0 var(--rand-sand);
}
.site-header-inner {
  max-width: var(--inhalt-breite);
  margin: 0 auto;
  padding: 0.6rem 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 1.5rem;
}
.marke {
  text-decoration: none;
  line-height: 1.1;
}
.marke-name {
  display: block;
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.12em;
  color: var(--color-white);
}
.marke-zusatz {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.3em;
  color: var(--color-sand);
}
.hauptnav {
  display: flex;
  gap: 0 0.25rem;
}
.hauptnav a {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-sand);
  padding: 0.55rem 0.7rem;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.hauptnav a:hover, .hauptnav a:focus-visible {
  color: var(--color-white);
  border-bottom-color: var(--color-signal-red);
}

/* ---- Burger-Menü (nur Mobil) ---- */
.nav-burger { display: none; }
@media (max-width: 767px) {
  .nav-burger {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    background: transparent;
    border: 1px solid var(--rand-sand);
    cursor: pointer;
    padding: 0;
  }
  .burger-balken,
  .burger-balken::before,
  .burger-balken::after {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--color-white);
    transition: translate 0.2s ease, rotate 0.2s ease, opacity 0.2s ease;
  }
  .burger-balken { position: relative; }
  .burger-balken::before, .burger-balken::after {
    content: "";
    position: absolute;
    left: 0;
  }
  .burger-balken::before { top: -6px; }
  .burger-balken::after { top: 6px; }
  .menue-offen .burger-balken { background: transparent; }
  .menue-offen .burger-balken::before { translate: 0 6px; rotate: 45deg; }
  .menue-offen .burger-balken::after { translate: 0 -6px; rotate: -45deg; }

  .hauptnav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--bg-surface);
    border-bottom: 2px solid var(--color-signal-red);
    padding: 0.5rem 1rem 1rem;
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.5);
  }
  .site-header { position: sticky; }
  .site-header.menue-offen { background: var(--bg-surface); }
  .site-header.menue-offen .hauptnav { display: flex; }
  .hauptnav a {
    font-size: 1.05rem;
    padding: 0.85rem 0.25rem;
    border-bottom: 1px solid var(--rand-sand);
  }
  .hauptnav a:last-child { border-bottom-color: transparent; }

  /* Ohne JavaScript: kein Burger, Links einfach umbrechend anzeigen */
  .no-js .nav-burger { display: none; }
  .no-js .hauptnav {
    display: flex;
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
  }
}

/* --------------------------------------------------------------------------
   6. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  padding: calc(var(--header-hoehe) + 1.5rem) clamp(1rem, 3vw, 2.5rem) 0;
  margin-top: calc(-1 * (var(--header-hoehe) + 8px)); /* unter den sticky Header schieben */
  overflow: hidden;
  /* Kasernenhof: Asphalt-Schraffur + Olivgrün-Vignette + Noise */
  background-color: var(--bg-base);
  background-image:
    var(--noise),
    radial-gradient(ellipse 90% 70% at 50% 38%, rgba(74, 82, 64, 0.55), transparent 70%),
    repeating-linear-gradient(83deg, rgba(240, 237, 232, 0.022) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(-7deg, rgba(13, 13, 13, 0.5) 0 3px, transparent 3px 9px);
}
.hero::after { /* Abdunklung zum Rand */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(ellipse 120% 90% at 50% 45%, transparent 40%, rgba(13, 13, 13, 0.85) 100%);
  pointer-events: none;
}

/* --- Militärelemente: feines Gitter über dem ganzen Hintergrund + großes
   Aktenzeichen in Schablonenschrift (sichtbar gedämpft, ~9–12 %) --- */
.hero-deko {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(200, 185, 154, 0.09) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, rgba(200, 185, 154, 0.09) 0 1px, transparent 1px 46px);
}
/* Sitzt im zentrierten Container (.hero-buehne) → bleibt auf großen Screens
   nah am Content statt an den Bildschirmrand zu rutschen. */
.hero-aktenzeichen-gross {
  position: absolute;
  z-index: -1;
  left: 52%;            /* startet an der Container-Mitte, sitzt unter dem Text */
  bottom: 9%;
  transform-origin: left bottom;
  transform: rotate(-3deg);
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: clamp(2rem, 4.6vw, 4.6rem);
  letter-spacing: 0.12em;
  white-space: nowrap;
  color: var(--color-sand);
  opacity: 0.16;
}

/* --- Zentrierter Content-Container (max 1500): Figur + Text als Gruppe mittig --- */
.hero-buehne {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(0.5rem, 1.5vw, 2rem);
}

/* --- Figur: unten verankert, sitzt auf dem Warnband auf --- */
.hero-figur-buehne {
  position: relative;
  align-self: flex-end;
  flex: 0 0 auto;
  height: clamp(510px, 95vh, 1120px);  /* Vollfigur groß — füllt die Hero-Höhe */
  pointer-events: none;
  user-select: none;
  animation: figur-auftritt 0.6s ease-out 0.2s backwards;
}
/* Dunkle radiale Vignette hinter der FIGUR (linke Bildhälfte) → löst sie vom
   Hintergrund. Der dramatische Schatten ist bereits Teil des Bildes. */
.hero-figur-buehne::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 30%;
  bottom: 6%;
  width: 95%;
  aspect-ratio: 1 / 1.15;
  transform: translateX(-50%);
  background: radial-gradient(closest-side,
    rgba(0, 0, 0, 0.62), rgba(13, 13, 13, 0.34) 44%, transparent 70%);
}
.hero-figur {
  position: relative;
  z-index: 1;             /* über dem selbstgebauten Schatten */
  height: 100%;
  width: auto;
  display: block;
  filter: drop-shadow(8px 12px 10px rgba(0, 0, 0, 0.5));
}
/* Selbst gebauter Wandschatten: schwarze, vergrößerte, geneigte Kopie der
   Figur dahinter — sitzt an den Füßen, läuft nach rechts oben weg. */
.hero-figur-schatten {
  position: absolute;
  z-index: 0;
  left: 0;
  bottom: 0;
  height: 110%;
  width: auto;
  transform-origin: bottom left;
  transform: translateX(30%) skewX(-16deg) scaleY(1.02);
  filter: brightness(0) blur(4px);
  opacity: 0.5;
  pointer-events: none;
  user-select: none;
}
@keyframes figur-auftritt { from { opacity: 0; translate: -18px 12px; } }

/* --- Textblock rechts der Mitte, mit Innenabstand --- */
.hero-inhalt {
  position: relative;
  z-index: 1;             /* Text liegt über dem Wandschatten der Figur */
  flex: 0 1 540px;
  align-self: center;
  margin-left: clamp(-6rem, -3.5vw, -1.5rem); /* dichter an die Figur, Schatten wandert dahinter */
  padding-right: clamp(0.5rem, 2vw, 2.5rem);
}
.hero-text {
  display: grid;
  gap: 1.4rem;
  justify-items: start;
  text-align: left;
}
.hero-stempel {
  justify-self: start;
  --stempel-rotation: -9deg;
  margin: 0 0 0.4rem;
  font-size: 1.45rem;
  letter-spacing: 0.18em;
  color: #e62a0a;             /* satteres, kräftiges Rot */
  border-color: #e62a0a;
  border-width: 3px;
  opacity: 1;
  -webkit-mask-image: none;   /* klarer Behördenstempel statt abgenutzt */
  mask-image: none;
  animation: stempel-druck 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.55s backwards;
}
@keyframes stempel-druck {
  from { opacity: 0; scale: 1.7; }
  to   { opacity: 1; scale: 1; }
}
.hero-titel {
  font-weight: 700;
  font-size: clamp(2.5rem, 5.2vw, 5rem);
  color: var(--color-white);
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.85);
  display: grid;
}
.hero-zeile {
  display: block;
  letter-spacing: 0.06em;
  animation: sperren 0.4s ease-out backwards;
}
.hero-zeile-2 {
  color: var(--color-signal-red);
  animation-delay: 0.15s;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.9);
}
@keyframes sperren {
  from { letter-spacing: 0; opacity: 0; }
  to   { letter-spacing: 0.06em; opacity: 1; }
}
.hero-subtext {
  font-family: var(--font-mono);
  font-size: clamp(0.8rem, 1.4vw, 1rem);
  letter-spacing: 0.08em;
  color: var(--color-sand);
  margin: 0;
  animation: einblenden 0.5s ease-out 0.4s backwards;
}
.hero .btn-cta {
  animation: einblenden 0.5s ease-out 0.6s backwards;
}
@keyframes einblenden {
  from { opacity: 0; translate: 0 14px; }
  to   { opacity: 1; translate: 0 0; }
}
.hero-scrollhinweis {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  translate: -50% 0;
  z-index: 2;
  color: var(--color-sand);
  font-size: 0.8rem;
  opacity: 0.6;
  animation: nicken 1.6s ease-in-out infinite;
}
@keyframes nicken {
  0%, 100% { translate: -50% 0; }
  50%      { translate: -50% 6px; }
}

/* --- Mobil: Text oben, Figur unten auf dem Warnband --- */
@media (max-width: 767px) {
  .hero-buehne {
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
  }
  .hero-inhalt {
    order: 0;
    flex: 0 0 auto;
    width: 100%;
    margin-left: 0; /* negativen Desktop-Versatz zurücknehmen → mobil zentriert */
    padding: 0.5rem 0 0;
  }
  .hero-text { justify-items: center; text-align: center; }
  .hero-stempel { justify-self: center; }
  .hero-figur-buehne {
    order: 1;
    align-self: center;
    height: 42vh;
  }
  .hero-aktenzeichen-gross {
    right: auto;
    bottom: auto;
    left: 50%;
    top: 40%;
    transform: translateX(-50%) rotate(-3deg);
    transform-origin: center;
    font-size: clamp(2rem, 13vw, 4.5rem);
  }
}

/* --------------------------------------------------------------------------
   7. ABSCHNITTE (gemeinsames Layout)
   -------------------------------------------------------------------------- */
.abschnitt {
  padding: var(--abschnitt-y) 1rem;
  scroll-margin-top: 120px; /* Mobil: Header ist zweizeilig */
}
@media (min-width: 768px) {
  .abschnitt { scroll-margin-top: var(--header-hoehe); }
}
.abschnitt:nth-of-type(even) { background: var(--bg-surface); }
.abschnitt-inner {
  max-width: var(--inhalt-breite);
  margin: 0 auto;
}
.abschnitt-kopf { margin-bottom: 2.5rem; }
.abschnitt-kicker {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-sand);
  margin: 0 0 0.6rem;
}
.abschnitt-titel {
  font-size: clamp(2.2rem, 6vw, 3.8rem);
  letter-spacing: 0.05em;
  color: var(--color-white);
}
.abschnitt-titel::after {
  content: "";
  display: block;
  width: 72px;
  height: 4px;
  margin-top: 0.7rem;
  background: var(--color-signal-red);
}
.abschnitt-vorwort {
  font-size: 1.2rem;
  color: var(--color-sand);
  margin: 1rem 0 0;
}

/* --------------------------------------------------------------------------
   8. TERMINE (DIENSTPLAN)
   -------------------------------------------------------------------------- */
/* .filter-toggle wird (nach Wegfall der Termin-Filter) nur noch vom
   „Erneut antreten"-Button im Fehlerzustand des Dienstplans verwendet. */
.filter-toggle {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-sand);
  background: transparent;
  border: 1px solid var(--rand-sand);
  padding: 0.45em 0.9em;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.filter-toggle:hover { border-color: var(--color-sand); color: var(--color-white); }
.filter-toggle[aria-pressed="true"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.termine-status {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  color: var(--color-sand);
  padding: 1.5rem;
  border: 1px dashed var(--rand-sand);
  margin-bottom: 1rem;
}
.termine-status:empty { display: none; }
.lade-anzeige { animation: funken 1.2s steps(2) infinite; }
@keyframes funken { 50% { opacity: 0.45; } }

.termine-noscript {
  font-family: var(--font-mono);
  color: var(--color-warning);
  border: 1px dashed var(--color-warning);
  padding: 1.25rem;
}

/* ---- Tabelle (Desktop) ---- */
.dienstplan-tabelle {
  width: 100%;
  border-collapse: collapse;
}
.dienstplan-tabelle thead th {
  font-family: var(--font-mono);
  font-size: 0.69rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: left;
  color: var(--color-sand);
  border-bottom: 2px solid var(--color-primary);
  padding: 0.6rem 0.75rem;
}
.dienstplan-tabelle tbody tr {
  border-bottom: 1px solid var(--rand-sand);
  transition: background-color 0.15s ease;
}
.dienstplan-tabelle tbody tr:hover { background: rgba(74, 82, 64, 0.25); }
.dienstplan-tabelle td {
  padding: 1rem 0.75rem;
  vertical-align: top;
}
/* "Alle Termine anzeigen" — sitzt unter der Tabelle, zentriert */
.termine-mehr {
  margin-top: 1.75rem;
  text-align: center;
}
.btn-mehr {
  font-size: 0.85rem;
  letter-spacing: 0.16em;
}

/* Solo-Termine: klar abgesetzt, IMMER sichtbar (kein Hover nötig) */
.dienstplan-tabelle tr.ist-solo {
  background: linear-gradient(90deg, rgba(204, 34, 0, 0.1), transparent 55%);
}
.dienstplan-tabelle tr.ist-solo td:first-child {
  box-shadow: inset 4px 0 0 var(--color-signal-red);
}

.termin-datum { white-space: nowrap; }
.termin-tag {
  display: block;
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.1;
}
.termin-wochentag-zeit {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--color-sand);
}
.termin-stadt {
  display: block;
  font-weight: 600;
  font-size: 1.25rem;
}
.termin-venue, .termin-land, .termin-adresse {
  display: block;
  font-size: 0.95rem;
  color: var(--color-sand);
}
.termin-venue a { color: inherit; }
/* Anschrift als Google-Maps-Link */
.termin-adresse {
  text-decoration: none;
  color: var(--color-sand);
  text-decoration-line: underline;
  text-decoration-color: var(--rand-sand);
  text-underline-offset: 3px;
  width: fit-content;
}
.termin-adresse::before { content: "⚐ "; color: var(--color-signal-red); }
.termin-adresse:hover, .termin-adresse:focus-visible {
  color: var(--color-white);
  text-decoration-color: var(--color-signal-red);
}
.termin-programm-name {
  display: block;
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 0.3rem;
}
.termin-karten { text-align: right; white-space: nowrap; vertical-align: middle; }
/* Einheitliche Größe für alle Karten-Buttons (online / Veranstalter / Telefon).
   min == max → feste Breite; zu lange Labels werden abgeschnitten statt in die
   danebenliegende Lagekarte zu ragen. */
.btn-karte {
  position: relative;
  overflow: hidden;
  font-size: 0.8rem;
  padding: 0.6em 1.1em;
  min-width: 15.5rem;
  max-width: 15.5rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
}
/* Kleiner Panzer, der bei Hover unten von links nach rechts durchfährt.
   Silhouette als Maske → nimmt die Textfarbe des Buttons an. */
.btn-karte::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 3px;
  width: 26px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 16'%3E%3Crect x='1' y='11' width='23' height='4' rx='2' fill='%23000'/%3E%3Ccircle cx='4' cy='13' r='1.6' fill='%23000'/%3E%3Ccircle cx='8.5' cy='13' r='1.6' fill='%23000'/%3E%3Ccircle cx='13' cy='13' r='1.6' fill='%23000'/%3E%3Ccircle cx='17.5' cy='13' r='1.6' fill='%23000'/%3E%3Ccircle cx='22' cy='13' r='1.6' fill='%23000'/%3E%3Cpath d='M3 11 L3 8 L18 8 L21 11 Z' fill='%23000'/%3E%3Crect x='8' y='4.5' width='7' height='3.5' fill='%23000'/%3E%3Crect x='14' y='5.3' width='13' height='1.4' fill='%23000'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 16'%3E%3Crect x='1' y='11' width='23' height='4' rx='2' fill='%23000'/%3E%3Ccircle cx='4' cy='13' r='1.6' fill='%23000'/%3E%3Ccircle cx='8.5' cy='13' r='1.6' fill='%23000'/%3E%3Ccircle cx='13' cy='13' r='1.6' fill='%23000'/%3E%3Ccircle cx='17.5' cy='13' r='1.6' fill='%23000'/%3E%3Ccircle cx='22' cy='13' r='1.6' fill='%23000'/%3E%3Cpath d='M3 11 L3 8 L18 8 L21 11 Z' fill='%23000'/%3E%3Crect x='8' y='4.5' width='7' height='3.5' fill='%23000'/%3E%3Crect x='14' y='5.3' width='13' height='1.4' fill='%23000'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0;
  transform: translateX(-34px);
  pointer-events: none;
}
@media (hover: hover) {
  .btn-karte:hover::after {
    opacity: 0.9;
    animation: panzer-fahrt 1.6s linear infinite;
  }
}
@keyframes panzer-fahrt {
  0%   { transform: translateX(-34px); opacity: 0; }
  10%  { opacity: 0.9; }
  90%  { opacity: 0.9; }
  100% { transform: translateX(380px); opacity: 0; }
}
.termin-hinweis {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--color-sand);
}

/* Sitzt im gleichen Slot wie die Ticket-Buttons (15.5rem, rechtsbündig),
   damit die Zeile ruhig bleibt und der Stempel wie über das Ticketfeld
   gedrückt wirkt — statt klein oben rechts zu schweben. */
.stempel-ausverkauft {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 15.5rem;
  max-width: 15.5rem;
  padding: 0.5em 0.8em;
  font-size: 0.95rem;
  letter-spacing: 0.3em;
  text-indent: 0.3em; /* letter-spacing rechts ausgleichen → optisch mittig */
  border-width: 2px;
  --stempel-rotation: -3deg;
}

/* ---- Lagekarte: Deutschlandkarte mit Solo-Terminen.
   NUR auf breiten Desktops (>=1440px) — auf allen anderen Geräten steht
   dieselbe Information vollständig in der Tabelle (Touch-Regel 4.4). ---- */
.dienstplan-karte { display: none; }
@media (min-width: 1440px) {
  .termine-layout:has(.dienstplan-karte:not([hidden])) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 2.5rem;
    align-items: start;
  }
  .dienstplan-karte:not([hidden]) {
    display: block;
    position: sticky;
    top: calc(var(--header-hoehe) + 24px);
  }
}
.karte-titel {
  font-family: var(--font-mono);
  font-size: 0.69rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-sand);
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: 0.6rem;
  margin: 0 0 0.55rem;
}
.karte-untertitel {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-sand);
  opacity: 0.7;
  margin: 0 0 1rem;
}
.karte-wrap {
  position: relative;
  /* dezentes Planquadrat-Raster wie auf einer Stabskarte */
  background-image:
    repeating-linear-gradient(0deg, rgba(200, 185, 154, 0.05) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(200, 185, 154, 0.05) 0 1px, transparent 1px 34px);
}
.karte-svg {
  display: block;
  width: 100%;
  height: auto;
  cursor: crosshair; /* Fadenkreuz beim Anvisieren */
}
.karte-umriss {
  fill: rgba(74, 82, 64, 0.22);
  stroke: var(--color-sand);
  stroke-width: 1.2;
  stroke-linejoin: round;
}
.karte-punkt {
  fill: var(--color-signal-red);
  stroke: var(--color-black);
  stroke-width: 1.5;
  cursor: crosshair;
  transition: r 0.15s ease, fill 0.15s ease;
}
.karte-punkt:hover, .karte-punkt:focus-visible {
  r: 9;
  fill: #e8350f;
  outline: none;
}
/* Angeklicktes (festgehaltenes) Ziel */
.karte-punkt.ist-angepinnt {
  r: 9;
  stroke: var(--color-white);
  stroke-width: 2;
}
/* Befehls-Panel: fester Block unter der Karte (kein schwebender Tooltip) */
.karte-tooltip {
  background: var(--bg-card);
  border: 1px solid var(--color-sand);
  padding: 0.85rem 0.9rem;
  margin-top: 0.75rem;
  min-height: 104px;
}
.karte-tooltip.ist-leer {
  border-style: dashed;
  border-color: var(--rand-sand);
  display: grid;
  place-items: center;
}
.karte-tooltip-leer {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-sand);
  opacity: 0.6;
  margin: 0;
}
/* Hierarchie im Befehls-Panel: das DATUM ist die Hauptinformation,
   der Ort nur die kleine Einordnung darüber */
.karte-tooltip-ort {
  font-family: var(--font-mono);
  font-size: 0.69rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-sand);
  margin: 0 0 0.35rem;
}
/* Trennstrich zwischen mehreren Terminen am selben Kartenpunkt */
.karte-tooltip-block + .karte-tooltip-block {
  border-top: 1px solid var(--rand-sand);
  padding-top: 0.7rem;
  margin-top: 0.7rem;
}
.karte-tooltip-zeile {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
/* Mehrere Termine innerhalb einer Gruppe (Doppeltermin): Abstand, aber KEIN
   Trennstrich und keine erneute Location-Nennung. */
.karte-tooltip-zeile + .karte-tooltip-zeile { margin-top: 0.7rem; }
.karte-tooltip-zeile .btn-karte { align-self: start; }
.karte-tooltip-datum {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 1.45rem;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-white);
}
.karte-hinweis {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-sand);
  opacity: 0.7;
  margin: 0.75rem 0 0;
}

/* ---- Mobil: Tabelle wird zu gestapelten Dienstakten-Karten ---- */
@media (max-width: 767px) {
  .dienstplan-tabelle, .dienstplan-tabelle tbody { display: block; }
  .dienstplan-tabelle thead { display: none; }
  .dienstplan-tabelle tbody tr {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem 1.25rem;
    background-color: var(--bg-card);
    background-image: var(--noise);
    background-blend-mode: overlay;
    border: 1px solid var(--rand-sand);
    border-left: 4px solid var(--color-primary);
    padding: 1rem;
    margin-bottom: 0.85rem;
  }
  .dienstplan-tabelle tr.ist-solo {
    border-left-color: var(--color-signal-red);
    background-image: var(--noise); /* rote Fläche kommt über border, nicht über Verlauf */
  }
  .dienstplan-tabelle tr.ist-solo td:first-child { box-shadow: none; }
  .dienstplan-tabelle td { display: block; padding: 0; border: 0; }
  .termin-datum { grid-row: 1 / 3; }
  .termin-karten { grid-column: 1 / -1; text-align: left; margin-top: 0.6rem; }
}

/* --------------------------------------------------------------------------
   9. DAS PROGRAMM
   -------------------------------------------------------------------------- */
.programm-karte {
  max-width: 860px;
  padding-top: 3rem;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
/* Stempel statisch sichtbar (FIX: Mobil/Touch), Hover hebt nur an */
.stempel-programm {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  --stempel-rotation: 5deg;
  font-size: 0.85rem;
}
@media (hover: hover) {
  .programm-karte:hover {
    transform: translateY(-4px);
    border-color: var(--color-signal-red);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
  }
}
.programm-karte .akte-felder {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-bottom: 1.5rem;
}
.programm-text p { margin: 0 0 1em; max-width: 62ch; }
.programm-aktionen { margin-top: 1.5rem; }

/* ---- Programm: Tourplakat als Blickfang neben der Programm-Karte ---- */
.programm-layout { display: grid; gap: 2rem; }
.programm-plakat { margin: 0; }
.programm-plakat img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.55);
}
@media (min-width: 768px) {
  .programm-layout {
    grid-template-columns: minmax(0, 400px) 1fr;
    align-items: center;
    gap: 3rem;
  }
}

/* ---- Aktenfoto in der Personalakte, mit Büroklammer angeheftet
   (die einzige Büroklammer der Seite) ---- */
.akte-foto-clip {
  position: relative;
  margin: 0 0 1.75rem;
  max-width: 280px;
  rotate: -1.5deg;
}
.akte-foto-clip img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rand-sand);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
}
.akte-foto-clip figcaption {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-sand);
  opacity: 0.7;
  margin-top: 0.4rem;
}
/* Metall-Büroklammer klemmt über die obere Kante des Fotos */
.akte-foto-clip::after {
  content: "";
  position: absolute;
  z-index: 4;
  top: -22px;
  right: 28px;
  width: 28px;
  height: 60px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 130'%3E%3Cdefs%3E%3ClinearGradient id='m' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%238b8472'/%3E%3Cstop offset='0.35' stop-color='%23efeade'/%3E%3Cstop offset='0.6' stop-color='%23c7c1b1'/%3E%3Cstop offset='1' stop-color='%237d7765'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform='rotate(-6 30 65)'%3E%3Cpath d='M38 20 L38 95 A14 14 0 0 1 10 95 L10 38 A8.5 8.5 0 0 1 27 38 L27 86' fill='none' stroke='%2315150f' stroke-width='10' stroke-linecap='round'/%3E%3Cpath d='M38 20 L38 95 A14 14 0 0 1 10 95 L10 38 A8.5 8.5 0 0 1 27 38 L27 86' fill='none' stroke='url(%23m)' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M35.5 24 L35.5 92' fill='none' stroke='%23ffffff' stroke-width='1.4' stroke-linecap='round' opacity='0.5'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
  filter: drop-shadow(1px 3px 2px rgba(0, 0, 0, 0.5));
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   10. DER AUSBILDER
   -------------------------------------------------------------------------- */
/* Große Personalakte: innen zweispaltig — Daten links, Foto + Chronik rechts */
.personalakte-raster {
  display: grid;
  gap: 2rem;
}
.personalakte-haupt, .personalakte-seite { min-width: 0; }
.stempel-akte {
  position: absolute;
  top: 1.85rem;            /* unterhalb der Mappen-Lasche, sitzt auf dem Blatt */
  right: 1.1rem;
  font-size: 0.72rem;
  --stempel-rotation: -4deg;
}
.eckdaten, .auszeichnungen {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}
.eckdaten li, .auszeichnungen li { padding-left: 1.1rem; position: relative; }
.eckdaten li::before, .auszeichnungen li::before {
  content: "▸";
  position: absolute;
  left: 0;
  color: var(--color-signal-red);
}
.eckdaten strong { color: var(--color-white); }
.jahr {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--color-sand);
  margin-right: 0.5rem;
}

/* ---- Einsatzchronik: vertikale Timeline ---- */
.personalakte-seite .akte-titel { margin-top: 2rem; }
.zeitachse {
  list-style: none;
  margin: 0;
  padding: 0 0 0 1.6rem;
  position: relative;
  display: grid;
  gap: 1.1rem;
}
.zeitachse::before { /* vertikale Linie links */
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--color-primary);
}
.zeitachse li {
  position: relative;
  font-size: 1.15rem;
  font-weight: 600;
}
.zeitachse li::before { /* Punkt-Marker */
  content: "";
  position: absolute;
  left: -1.6rem;
  top: 0.45em;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bg-base);
  border: 2px solid var(--color-sand);
}
.zeitachse li.aktuell { color: var(--color-white); font-size: 1.3rem; }
.zeitachse li.aktuell::before {
  background: var(--color-signal-red);
  border-color: var(--color-signal-red);
  box-shadow: 0 0 0 4px rgba(204, 34, 0, 0.25);
}
.zeitachse .badge-solo { margin-left: 0.5rem; }

@media (min-width: 768px) {
  .personalakte-raster {
    grid-template-columns: 1.7fr 1fr;
    gap: 2.5rem 3rem;
    align-items: start;
  }
}

/* --------------------------------------------------------------------------
   11. MEDIA (LAGEZENTRUM)
   -------------------------------------------------------------------------- */
.video-raster {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 768px)  { .video-raster { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .video-raster { grid-template-columns: repeat(3, 1fr); } }

.video-karte {
  background: var(--bg-card);
  border: 1px solid var(--rand-sand);
  display: flex;
  flex-direction: column;
}
.video-trigger {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--color-black);
  cursor: pointer;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  text-decoration: none;
}
.video-trigger img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.82;
  transition: opacity 0.2s ease, transform 0.3s ease;
}
.video-trigger:hover img, .video-trigger:focus-visible img {
  opacity: 1;
  transform: scale(1.03);
}
.video-play { /* Megafon statt Standard-Dreieck */
  position: absolute;
  inset: 0;
  margin: auto;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  background: var(--color-signal-red);
  color: var(--color-white);
  border-radius: 50%;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55);
  transition: scale 0.15s ease;
}
.video-trigger:hover .video-play, .video-trigger:focus-visible .video-play { scale: 1.1; }
.video-titel-overlay {
  position: absolute;
  bottom: 0.6rem;
  left: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-white);
  background: rgba(13, 13, 13, 0.7);
  padding: 0.3em 0.7em;
}
.video-titel {
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  padding: 0.9rem 1rem 0.25rem;
}
.video-hinweis {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  line-height: 1.5;
  color: var(--color-sand);
  opacity: 0.7;
  margin: 0;
  padding: 0 1rem 0.9rem;
}
.video-kanal {
  border-style: dashed;
  background: transparent;
}
.kanal-link {
  flex: 1;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1.25rem;
  padding: 2.5rem 1rem;
  text-align: center;
  text-decoration: none;
  min-height: 220px;
}
.kanal-text {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-sand);
}

/* --------------------------------------------------------------------------
   12. MERCH (VERSORGUNGSAUSGABE)
   -------------------------------------------------------------------------- */
/* Zweispaltig: links die große Kistengrafik, rechts die Karte (Aktenblatt). */
.merch-layout {
  display: grid;
  gap: 2rem;
}
/* Grafik außerhalb der Karte, links bündig mit dem Abschnittstitel. */
.merch-grafik-box {
  display: grid;
  align-content: center;
  justify-items: start;
}
.merch-grafik {
  width: 100%;
  max-width: 440px;
  height: auto;
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.45));
}
/* Foto-Collage der Shop-Artikel (freigestellt) — gleiche Maximalbreite wie die
   frühere Grafik, eigene weiche Schatten stecken schon im Bild. */
.merch-collage {
  display: block;
  width: 100%;
  max-width: 440px;
  height: auto;
}
/* Merch-Kopf: Versorgungskiste als Emblem neben der Überschrift „Ausrüstung"
   (thematisch die „Versorgungsausgabe"). Ab Tablet zweispaltig. */
.merch-kopf-grafik { margin-top: 1.25rem; }
.merch-kopf-grafik .merch-grafik { max-width: 260px; }
@media (min-width: 768px) {
  .merch-kopf {
    display: flex;              /* Titel und Kiste links gruppiert */
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3.5rem);
  }
  .merch-kopf-grafik { margin-top: 0; }
  .merch-kopf-grafik .merch-grafik { max-width: clamp(320px, 30vw, 400px); }
}
.merch-karte {
  display: grid;
  gap: 1.75rem;
  align-content: center;
  justify-items: start;
}
.merch-text p { margin: 0 0 0.75em; max-width: 54ch; font-size: 1.2rem; }
.merch-hinweis {
  font-family: var(--font-mono);
  font-size: 0.72rem !important;
  letter-spacing: 0.08em;
  color: var(--color-sand);
}
@media (min-width: 768px) {
  .merch-layout {
    /* Collage links, Textkarte schmaler daneben (nicht mehr über die ganze Breite) */
    grid-template-columns: minmax(0, 440px) minmax(0, 540px);
    align-items: center;
    gap: 2.5rem 3.5rem;
  }
}

/* --------------------------------------------------------------------------
   13. PRESSE & VERANSTALTER
   -------------------------------------------------------------------------- */
.presse-raster {
  display: grid;
  gap: 2.75rem 3rem; /* großzügiger Abstand, damit die Akten-Mappen Luft haben */
}
@media (min-width: 768px)  { .presse-raster { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .presse-raster { grid-template-columns: repeat(3, 1fr); } }
/* Zweispaltige Gruppen (Pressebereich nach Themen) */
@media (min-width: 768px) {
  .presse-zweispaltig { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Zwischenüberschriften der Presse-Gruppen */
.presse-gruppe-titel {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-sand);
  margin: 2.75rem 0 1rem;
}
.presse-gruppe-titel::before {
  content: "// ";
  color: var(--color-signal-red);
}
.abschnitt-kopf + .presse-gruppe-titel { margin-top: 0; }

.presse-block { padding: 1.75rem 1.5rem 1.75rem 2.5rem; }
.credit-hinweis {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.6;
  color: var(--color-warning);
  margin: -0.25rem 0 1rem;
}
.download-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}
.download-liste a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  text-decoration: none;
  padding: 0.5rem 0.6rem;
  border: 1px solid transparent;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.download-liste a:hover, .download-liste a:focus-visible {
  border-color: var(--rand-sand);
  background: rgba(74, 82, 64, 0.25);
}
.dl-name { font-weight: 600; font-size: 1.05rem; color: var(--color-white); }
.dl-name::before { content: "⤓ "; color: var(--color-signal-red); }
.dl-meta {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: var(--color-sand);
  white-space: nowrap;
}
/* Presse-Kacheln im Polaroid-Look: heller Papierrahmen (unten breiter),
   Bildunterschrift auf dem Rand. Fotos zeigen ein Vorschaubild, PDFs das
   Akte-Icon (.presse-doc). */
.presse-galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 1.1rem;
  margin: 0.4rem 0 0;
}
.presse-foto {
  display: flex;
  flex-direction: column;
  margin: 0;
  text-decoration: none;
  background: #ece6d6;                 /* Polaroid-Papier */
  padding: 0.5rem 0.5rem 0;            /* Rahmen oben/seitlich */
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.5);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.presse-foto-bild {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 2;                 /* einheitliches Format, skaliert mit der Kachelbreite */
  background: #17140f;
  overflow: hidden;
}
/* Foto füllt den Rahmen komplett – kein Innenrand, notfalls beschnitten */
.presse-foto-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.presse-doc .presse-foto-bild { background: #2b2a22; }   /* Dokument-Kachel: dezenter Grund */
.presse-doc .presse-foto-bild img { width: 62%; height: auto; object-fit: contain; }  /* Icon zentriert, nicht beschneiden */
.presse-foto-info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.55rem 0.15rem 0.7rem;     /* Polaroid-Unterrand (breiter) */
}
.presse-foto-info .dl-name { color: #201d16; font-size: 0.98rem; }   /* dunkler Text auf Papier */
.presse-foto-info .dl-meta { color: #6d6450; white-space: normal; }
@media (hover: hover) {
  .presse-foto:hover, .presse-foto:focus-visible {
    transform: translateY(-4px) rotate(-1deg);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.55);
  }
}
/* Plakat: eine Vorschau links, Download-Buttons rechts daneben
   (eigene Zeile unter dem Pressetext). */
.plakat-preview .dl-name::before { content: none; }
.plakat-block {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  margin: 1.25rem 0 0;
}
.plakat-block .plakat-preview {
  flex: 1 1 100%;                       /* Tablet/Mobil: volle Spaltenbreite wie die Fotos */
  width: auto;
}
.plakat-block .plakat-preview .presse-foto-bild { aspect-ratio: 370 / 520; }  /* Plakat-Format, Bild füllt komplett */
.plakat-downloads {
  flex: 1 1 100%;                       /* Buttons rutschen darunter */
}
/* Ab Desktop: Plakat schmal links, Buttons rechts daneben */
@media (min-width: 1024px) {
  .plakat-block { flex-wrap: nowrap; align-items: stretch; }
  .plakat-block .plakat-preview { flex: 0 0 190px; }
  .plakat-downloads { flex: 1 1 auto; min-width: 0; align-self: center; }
}
.plakat-downloads-titel {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-sand);
  margin: 0 0 0.7rem;
}
.plakat-groessen {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0;
}
.plakat-groessen a {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--color-sand);
  text-decoration: none;
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--rand-sand);
  transition: border-color 0.15s ease, color 0.15s ease;
}
.plakat-groessen a::before { content: "⤓ "; color: var(--color-signal-red); }
.plakat-groessen .pl-format { font-weight: 600; letter-spacing: 0.1em; color: var(--color-white); }
.plakat-groessen .pl-size { margin-left: auto; color: var(--color-sand); white-space: nowrap; }
.plakat-groessen a:hover, .plakat-groessen a:focus-visible {
  border-color: var(--color-signal-red);
  color: var(--color-white);
}
/* ---- Ansprechpartner: zwei gleichberechtigte Kontakt-Karten ---- */
.presse-kontakt {
  border-color: var(--color-primary);
}
.kontakt-layout {
  display: grid;
  gap: 1.5rem;
  justify-items: center;
  margin-top: 1.25rem;
}
.kontakt-logo {
  display: grid;
  place-items: center;
  background: #ffffff; /* Logo liegt auf weißem Grund vor */
  padding: 1.5rem 1.75rem;
  border: 1px solid var(--rand-sand);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.kontakt-logo:hover, .kontakt-logo:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
}
.kontakt-logo img {
  width: auto;
  height: auto;
  max-width: 200px;
  max-height: 90px;
}
.kontakt-daten {
  display: grid;
  gap: 0.4rem;
  justify-items: center;
  text-align: center;
}
/* Firmenname ist die Hauptzeile (groß), darunter Person und Kontaktdaten kleiner */
.kontakt-name {
  margin: 0;
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.05;
  color: var(--color-white);
}
.kontakt-person {
  margin: 0.1rem 0 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-sand);
}
.kontakt-zeile {
  margin: 0;
  font-size: 1.05rem;
  overflow-wrap: anywhere; /* lange E-Mail-Adressen in schmalen Karten */
}
.kontakt-zeile a {
  color: var(--color-white);
  text-decoration-color: var(--color-signal-red);
  text-underline-offset: 4px;
}
.kontakt-zeile a:hover, .kontakt-zeile a:focus-visible { color: var(--color-sand); }
@media (min-width: 768px) {
  .kontakt-layout { justify-items: start; }
  .kontakt-daten { justify-items: start; text-align: left; }
}

/* --------------------------------------------------------------------------
   14. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--bg-surface);
  border-top: 1px solid var(--rand-sand);
  padding: 2.5rem 1rem;
}
.footer-inner {
  max-width: var(--inhalt-breite);
  margin: 0 auto;
  display: grid;
  gap: 1.5rem;
  justify-items: center;
  text-align: center;
}
.footer-links { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; }
.footer-links a {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}
.footer-mitte {
  margin: 0;
  font-size: 1rem;
  color: var(--color-sand);
}
.footer-witz {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  opacity: 0.8;
}
.footer-social { display: flex; gap: 1.1rem; }
.footer-social a {
  color: var(--color-sand);
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--rand-sand);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.footer-social a:hover, .footer-social a:focus-visible {
  color: var(--color-white);
  border-color: var(--color-signal-red);
}
@media (min-width: 768px) {
  .footer-inner {
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }
  .footer-links { justify-content: flex-start; justify-self: start; }
  .footer-social { justify-self: end; }
}

/* --------------------------------------------------------------------------
   15. SCROLL-REVEAL
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  translate: 0 22px;
  transition: opacity 0.5s ease-out, translate 0.5s ease-out;
}
.reveal.ist-sichtbar {
  opacity: 1;
  translate: 0 0;
}
/* Ohne JS bzw. mit reduzierter Bewegung: alles sofort sichtbar */
.no-js .reveal { opacity: 1; translate: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; translate: none; }
}

/* --------------------------------------------------------------------------
   17. UNTERSEITEN (Impressum / Datenschutz)
   -------------------------------------------------------------------------- */
.unterseite {
  max-width: 780px;
  margin: 0 auto;
  padding: 3rem 1rem 5rem;
}
.unterseite h1 {
  font-size: clamp(2rem, 6vw, 3rem);
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}
.unterseite h1::after {
  content: "";
  display: block;
  width: 72px;
  height: 4px;
  margin-top: 0.7rem;
  background: var(--color-signal-red);
}
.unterseite h2 {
  font-size: 1.3rem;
  letter-spacing: 0.08em;
  color: var(--color-sand);
  margin: 2.25rem 0 0.75rem;
}
.unterseite p, .unterseite li { color: var(--color-white); }
.unterseite .platzhalter {
  background: rgba(245, 196, 0, 0.12);
  border: 1px dashed var(--color-warning);
  color: var(--color-warning);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  padding: 0.1em 0.4em;
}
.zurueck-link {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 2.5rem;
}