/* ===== DPSG Balingen – Stylesheet ==============================

   UMBRUCHPUNKTE – es gibt genau zwei, überall dieselben:

     900px   Desktop -> Mobil
             Navigation wird zum Klappmenü, das zweispaltige Layout
             wird einspaltig (Seitenleiste rutscht unter den Text),
             Hero und Seitenheader stapeln, Stufenwähler wird Liste.

     640px   schmales Handy
             Gruppenstunden-Tabelle stapelt, Programmband wird
             Wischstreifen, Fußzeile einspaltig, Markenzusatz weg.

   Neue Regeln bitte an eine dieser beiden Stufen hängen. Passt etwas
   nur dazwischen, ist meist eine fließende Angabe (clamp) die
   bessere Antwort als eine dritte Stufe – siehe Stufenwähler.
   ================================================================ */
@font-face {
  font-family: "Barlow Semi Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/barlow-semi-condensed-600.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Semi Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/barlow-semi-condensed-700.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/source-sans-3.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/source-sans-3-italic.woff2") format("woff2");
}
:root {
  /* Logofarben: Navy · Sand · Rot */
  --brand: #2a3d7c;
  --brand-dark: #1f2e60;
  --brand-darker: #162148;
  --navy: #2a3d7c;
  --navy-dark: #1e2c5f;
  --sand: #c3a878;
  --sand-bg: #f5efe2;
  --sand-line: #e6dcc6;
  --sand-dark: #8a6c38;
  --red: #c62128;
  --red-dark: #a71a20;
  --ink: #22262f;
  --muted: #66697a;
  --line: #e3e2ec;
  --stufe-woelflinge: #f39200;
  --stufe-jungpfadfinder: #0f6fb5;
  --stufe-pfadfinder: #2f8a3e;
  --stufe-rover: #d42e1e;
  --stufe-leiter: #969696;
  --stufe-altrover: #000000;
  /* Vertiefte Fassungen – nur für Schrift auf Weiß. Orange, Grün und
     Grau sind in der Originalfassung als Text zu hell (2,4 / 4,3 / 2,9
     statt der nötigen 4,5). Flächen, Bänder und Kanten behalten überall
     die kräftigen Farben von oben. */
  --stufe-woelflinge-tief: #8f5600;
  --stufe-pfadfinder-tief: #26702f;
  --stufe-leiter-tief: #6b6b6b;
  --paper: #ffffff;
  --bg: #f4f3ef;
  --radius: 12px;
  --shadow: 0 2px 8px rgba(30, 40, 70, 0.08);
  --shadow-lg: 0 10px 30px rgba(20, 30, 70, 0.14);
  --wrap: 1160px;
  --sans: "Source Sans 3", system-ui, sans-serif;
  --head: "Barlow Semi Condensed", "Source Sans 3", sans-serif;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  /* Die Seite lässt sich nie seitlich schieben. Bewusst "clip" und
     nicht "hidden": hidden würde hier einen Scroll-Container aufmachen
     und damit die klebende Kopfzeile und die klebende Seitenleiste
     lahmlegen. */
  overflow-x: clip;
}
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
}
img {
  max-width: 100%;
  display: block;
}
.container {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 22px;
}
a {
  color: var(--brand-dark);
  text-decoration: none;
}
a:hover {
  color: var(--brand);
  text-decoration: underline;
}
h1,
h2,
h3,
h4 {
  font-family: var(--head);
  line-height: 1.12;
  color: var(--navy-dark);
  margin: 0 0 0.5em;
  letter-spacing: 0.2px;
}
h1 {
  font-size: 2.4rem;
}
h2 {
  font-size: 1.7rem;
}
h3 {
  font-size: 1.25rem;
}
p {
  margin: 0 0 1rem;
  text-wrap: pretty;
}
.muted {
  color: var(--muted);
}
/* Text, der nur für Screenreader da ist – sichtbar ist er nirgends,
   vorgelesen wird er trotzdem. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ===== Ankündigungs-Banner ===== */
.ankuendigung {
  background: var(--sand-bg);
  color: var(--sand-dark);
  border-bottom: 1px solid var(--sand-line);
  padding: 10px 22px;
  font-size: 0.92rem;
  font-weight: 600;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.ankuendigung-link {
  color: var(--brand-dark);
  font-weight: 700;
  white-space: nowrap;
}

/* ===== Header / Nav ===== */
.site-header {
  background: var(--brand);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 74px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
}
.brand:hover {
  color: #fff;
  text-decoration: none;
}
.brand img {
  height: 44px;
  width: auto;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}
.brand-text strong {
  font-family: var(--head);
  font-size: 1.28rem;
  letter-spacing: 0.4px;
}
.brand-text small {
  font-size: 0.8rem;
  opacity: 0.9;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.site-nav > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 2px;
}
.site-nav li {
  position: relative;
}
.site-nav a {
  color: #fff;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 12px 14px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.98rem;
}
.site-nav a:hover {
  background: rgba(255, 255, 255, 0.14);
  text-decoration: none;
}
.site-nav a.active {
  background: var(--brand-darker);
}
.caret {
  transition: transform 0.2s;
  opacity: 0.85;
}
.submenu {
  list-style: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: #fff;
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  padding: 8px;
  display: none;
  flex-direction: column;
  gap: 2px;
}
/* Das letzte Menü steht am rechten Rand des Fensters. Ein Untermenü,
   das von dort aus nach rechts aufgeht, ragt aus dem Fenster heraus –
   es wird abgeschnitten und schiebt die Seite seitlich. Deshalb klappt
   es nach links auf, seine rechte Kante bündig mit dem Elternpunkt. */
.site-nav > ul > li:last-child > .submenu {
  left: auto;
  right: 0;
}
.submenu li {
  width: 100%;
}
.submenu a {
  color: var(--ink);
  padding: 10px 12px;
  border-radius: 7px;
  font-weight: 600;
}
.submenu a:hover {
  background: var(--sand-bg);
  color: var(--brand-dark);
}
.submenu a.active {
  background: var(--brand);
  color: #fff;
}
@media (hover: hover) and (min-width: 901px) {
  .nav-item.has-children:hover > .submenu {
    display: flex;
  }
  .nav-item.has-children:hover .caret {
    transform: rotate(180deg);
  }
}
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 10px;
}
.nav-toggle span {
  width: 26px;
  height: 3px;
  background: #fff;
  border-radius: 2px;
  transition: 0.2s;
}

/* ===== Hero ===== */
.hero {
  background: linear-gradient(
    160deg,
    var(--navy) 0%,
    var(--navy-dark) 60%,
    #182450 100%
  );
  color: #fff;
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 82% 18%,
    rgba(199, 177, 132, 0.28),
    transparent 45%
  );
  pointer-events: none;
}
.hero-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 52px 22px;
  display: flex;
  align-items: center;
  gap: 38px;
}
.hero-logo {
  height: 150px;
  width: auto;
  flex: none;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.35));
}
.hero h1 {
  color: #fff;
  font-size: 2.9rem;
  margin-bottom: 0.15em;
}
.hero-sub {
  font-size: 1.15rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--sand);
  margin: 0;
  font-weight: 600;
}

/* ===== Seitenheader (Kopfbild mit Überschrift) =====
   Sitzt oben in der Inhaltskarte, dort wo sonst die Überschrift steht.
   Die negativen Ränder heben die Polsterung von .content auf, damit das
   Bild bis an die Kartenkanten reicht. Bild, Schleier und Text liegen
   übereinander. */
.seitenheader {
  position: relative;
  overflow: hidden;
  background: var(--navy-dark);
  display: flex;
  align-items: flex-end;
  min-height: 260px;
  margin: -38px -44px 30px;
  border-radius: var(--radius) var(--radius) 0 0;
}
.seitenheader picture,
.seitenheader img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
.seitenheader img {
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.seitenheader:hover img {
  transform: scale(1.04);
}
/* Zwei Verläufe übereinander: ein kräftiger Keil von unten links, wo der
   Text steht, und darunter ein sanfter Grundverlauf von unten nach oben.
   Oben rechts bleibt das Foto dadurch nahezu unangetastet. */
.sh-schleier {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      125% 105% at 0% 100%,
      rgba(19, 29, 63, 0.9) 0%,
      rgba(19, 29, 63, 0.62) 32%,
      rgba(19, 29, 63, 0.15) 62%,
      rgba(19, 29, 63, 0) 80%
    ),
    linear-gradient(
      0deg,
      rgba(19, 29, 63, 0.55) 0%,
      rgba(19, 29, 63, 0.22) 52%,
      rgba(19, 29, 63, 0) 88%
    );
}
.sh-text {
  position: relative;
  width: 100%;
  padding: 0 30px 24px;
  color: #fff;
  /* Sicherheitsnetz für sehr helle Fotos */
  text-shadow: 0 1px 10px rgba(19, 29, 63, 0.45);
}
.sh-motto {
  font-family: var(--head);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: 0.82rem;
  color: var(--sand);
  margin: 0 0 4px;
}
.seitenheader h1 {
  color: #fff;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.05;
  margin: 0;
  text-wrap: balance;
}
.sh-alter {
  margin: 5px 0 0;
  color: #c6cdea;
  font-size: 1rem;
}
@media (max-width: 900px) {
  /* Polsterung von .content ist hier 26px/20px, Ränder entsprechend. */
  .seitenheader {
    min-height: 200px;
    margin: -26px -20px 24px;
  }
  .sh-text {
    padding: 0 20px 18px;
  }
  /* Auf schmalen Bildschirmen fällt zuerst das Motto weg. */
  .sh-motto {
    display: none;
  }
}

/* ===== Layout ===== */
.site-main {
  padding: 44px 0 10px;
}
.layout {
  display: grid;
  /* minmax(0, 1fr) statt 1fr: ein 1fr-Track schrumpft nicht unter
     seinen Mindestinhalt. Breite Inhalte wie die Gruppenstunden-Tabelle
     lassen ihn dann über seinen Anteil hinauswachsen und schieben die
     Seitenleiste aus dem Fenster. Mit 0 als Untergrenze bleibt die
     Spalte in ihrem Anteil und der Inhalt bricht um. */
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 40px;
  align-items: start;
}
.content {
  background: var(--paper);
  /* Seitliche Polsterung wächst mit: knapp über 900px steht neben der
     Seitenleiste sonst zu wenig Platz für den Textbereich. */
  padding: 38px clamp(24px, 3.4vw, 44px);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.page-title {
  border-bottom: 4px solid var(--red);
  padding-bottom: 0.25em;
  margin-bottom: 0.7em;
}

/* ===== Prose ===== */
.prose h2 {
  margin-top: 1.6em;
  color: var(--brand-dark);
}
.prose h3 {
  margin-top: 1.4em;
}
.prose ul,
.prose ol {
  margin: 0 0 1rem;
  padding-left: 1.3em;
}
.prose li {
  margin: 0.3em 0;
}
.prose a {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.prose blockquote {
  border-left: 4px solid var(--sand);
  margin: 1.2em 0;
  padding: 0.4em 1.2em;
  color: var(--muted);
  background: var(--sand-bg);
  border-radius: 0 8px 8px 0;
}
.lead {
  font-size: 1.22rem;
  color: var(--muted);
}

/* ===== Eingebettete Inhalte (Cloud, Karten, Videos) =====
   Der Rahmen sitzt auf der <figure>, nicht auf dem iframe: nur so
   greifen abgerundete Ecken auch am eingebetteten Inhalt. */
.einbettung {
  margin: 1.7em 0 1.4em;
  border-top: 5px solid var(--sand);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--sand-bg);
}
.einbettung iframe {
  display: block;
  width: 100%;
  /* Die Cloud-Oberfläche braucht Höhe für Passwortfeld und Dateiliste,
     soll aber auf kleinen Bildschirmen nicht die ganze Seite füllen. */
  height: clamp(360px, 60vh, 560px);
  border: 0;
}
.einbettung figcaption {
  padding: 12px clamp(14px, 2vw, 18px);
  border-top: 1px solid var(--sand-line);
  background: var(--paper);
  font-size: 0.9rem;
  color: var(--muted);
}
/* Rückfallebene für eingebettete Inhalte ohne <figure>-Rahmen. */
.prose iframe {
  max-width: 100%;
}
.eyebrow {
  font-family: var(--head);
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--sand);
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 0.2em;
}

/* ===== Sidebar ===== */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: sticky;
  top: 96px;
}
.card {
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 22px;
  border-top: 5px solid var(--sand);
}
.card h2 {
  font-size: 1.25rem;
  margin-bottom: 0.7em;
}
.gs-entry + .gs-entry {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.gs-name {
  font-family: var(--head);
  font-weight: 700;
  color: var(--navy-dark);
  margin-bottom: 0.3em;
}
.mini-events {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mini-events li {
  display: flex;
  flex-direction: column;
  padding-left: 14px;
  border-left: 3px solid var(--sand);
  gap: 2px;
}
.me-date {
  font-size: 0.82rem;
  color: var(--sand-dark);
  font-weight: 700;
  letter-spacing: 0.3px;
}
.me-title {
  font-weight: 600;
}
.sidebar .btn {
  background: var(--sand-dark);
}
.sidebar .btn:hover {
  background: var(--sand-dark);
  filter: brightness(0.9);
}

/* ===== Buttons ===== */
a.btn {
  display: inline-block;
  background: var(--brand);
  color: #fff;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 700;
  font-family: var(--head);
  letter-spacing: 0.4px;
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: 0.15s;
}
.btn:hover {
  background: var(--brand-dark);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}
.btn-sm {
  padding: 9px 16px;
  font-size: 0.92rem;
}
.btn-outline {
  background: transparent;
  border: 2px solid var(--brand);
  color: var(--brand-dark);
}
.btn-outline:hover {
  background: var(--brand);
  color: #fff;
}
.btn-navy {
  background: var(--navy);
}
.btn-navy:hover {
  background: var(--navy-dark);
}
.btn-red {
  background: var(--red);
}
.btn-red:hover {
  background: var(--red-dark);
}
.btn-outline {
  border-color: var(--navy);
}
.btn-outline:hover {
  background: var(--navy);
}

/* ===== Tables (Gruppenstunden) ===== */
.table-wrap {
  overflow-x: auto;
  margin: 1.4em 0;
}
table {
  border-collapse: collapse;
  width: 100%;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
th,
td {
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
thead th {
  background: var(--brand);
  color: #fff;
  font-family: var(--head);
  letter-spacing: 0.5px;
}
tbody tr:last-child td {
  border-bottom: 0;
}
tbody tr:nth-child(even) {
  background: var(--sand-bg);
}

/* ===== Gruppenstunden: kompakte Zeilenliste ===== */
.gs-list {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  margin: 1.5em 0;
}
.gs-row {
  display: grid;
  /* Die Untergrenzen sind bewusst knapp: zusammen mit Abständen und
     Polsterung bestimmen sie, ab welcher Breite die Zeile aus ihrer
     Karte läuft. Mit 150/130/180 passte sie neben der Seitenleiste
     unterhalb von etwa 960px nicht mehr und wurde abgeschnitten. */
  grid-template-columns: minmax(120px, 1.1fr) minmax(100px, 0.9fr) minmax(110px, 1.6fr);
  align-items: start;
  gap: 10px 18px;
  padding: 16px 20px;
  background: #fff;
  border-left: 4px solid var(--stufe, var(--brand));
}
.gs-row:nth-child(even) {
  background: var(--sand-bg);
}
.gs-row + .gs-row {
  border-top: 1px solid var(--line);
}
.gs-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.gs-row h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  color: var(--stufe, var(--navy-dark));
}
.gs-age {
  color: var(--muted);
  font-size: 0.85rem;
}
.gs-when {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.92rem;
}
.gs-day {
  font-weight: 700;
  color: var(--brand-darker);
}
.gs-time {
  color: var(--brand-darker);
}
.gs-leiter {
  font-size: 0.9rem;
}
.gs-leiter strong {
  display: block;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 1px;
}
.gs-details {
  display: contents;
}
@media (max-width: 640px) {
  .gs-row {
    grid-template-columns: 1fr;
    gap: 3px;
    padding: 12px 16px;
  }
  .gs-group {
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
  }
  .gs-details {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 6px;
    row-gap: 2px;
    font-size: 0.88rem;
  }
  .gs-when {
    flex-direction: row;
    gap: 5px;
  }
  .gs-day::after {
    content: "·";
    margin-left: 5px;
    color: var(--muted);
    font-weight: 400;
  }
  .gs-leiter {
    display: flex;
    align-items: baseline;
    gap: 4px;
  }
  .gs-leiter::before {
    content: "·";
    color: var(--muted);
  }
  .gs-leiter strong {
    display: inline;
    margin-bottom: 0;
  }
  .gs-leiter strong::after {
    content: ":";
  }
}

/* ===== Stufenwähler (Startseite) ==============================
   Sechs Reiter nebeneinander, darunter ein Panel mit den Angaben
   zur gewählten Stufe. Unter 900px wird daraus eine Liste, bei der
   das Panel direkt unter der angetippten Zeile aufgeht.

   Der Wähler ist eine Radiogruppe, kein Skript. Reihenfolge im HTML
   ist immer: label (mit dem Radio darin) -> panel. Genau darauf baut
   ".sw-reiter:has(.sw-schalter:checked) + .sw-panel" auf – wird
   zwischen die beiden etwas eingefügt, klappt nichts mehr auf.

   DAS RADIO STEHT IM LABEL. Außerhalb landete es in der Ecke des
   Rasters, und der Browser scrollte beim Antippen einer der unteren
   Stufen dorthin zurück, weil er das fokussierte Feld ins Bild holt –
   daher sprang der Wähler. Siehe unten bei .sw-schalter.

   Die Stufenfarbe erscheint nur als Form, nie als Hintergrund von
   Text. Schrift steht immer dunkel auf Weiß.

   NICHTS DARF BEIM WECHSELN SPRINGEN. Dafür sorgen zwei Kniffe,
   siehe unten bei --sw-hub und bei .sw-panel: der gewählte Reiter
   wächst aus der Zeile heraus statt sie höher zu machen, und alle
   sechs Panels liegen im selben Feld übereinander, sodass dessen
   Höhe vom längsten bestimmt wird. */
.stufenwaehler {
  /* Wie weit der gewählte Reiter nach oben wächst. Der Platz dafür
     steckt oben im Rand, damit die Zeile darüber ruhig bleibt. */
  --sw-hub: 19px;
  border: 0;
  padding: 0;
  margin: calc(1.4em + var(--sw-hub)) 0 1.4em;
  min-width: 0; /* sonst weigert sich das fieldset zu schrumpfen */
}
.stufenwaehler > .sw-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr) repeat(2, 0.86fr);
  /* Fließend statt gestuft: sechs Reiter müssen von 901px bis zur
     vollen Breite nebeneinander passen. Ein eigener Umbruchpunkt
     dafür würde die Seite um eine dritte Stufe reicher machen. */
  column-gap: clamp(5px, 0.55vw, 7px);
  row-gap: 0; /* Reiter und Panel müssen sich berühren */
  align-items: end;
}

/* Das Radio selbst ist unsichtbar, aber bedienbar: Fokus und
   Pfeiltasten kommen von ihm, sichtbar wird das am Reiter drumherum.

   Es sitzt IM Reiter und ist an dessen Ecke geheftet (".sw-reiter" ist
   dafür "position: relative"). Läge es außerhalb, säße es in der Ecke
   des ganzen Rasters – und der Browser scrollte beim Antippen einer
   weiter unten stehenden Stufe dorthin zurück, weil er das fokussierte
   Feld ins Bild holt. Genau das ließ den Wähler springen. */
.sw-schalter {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.sw-reiter {
  grid-row: 1;
  position: relative;
  display: block;
  padding: 15px clamp(9px, 0.9vw, 13px) 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-bottom: none;
  border-radius: 5px 5px 0 0;
  cursor: pointer;
  /* Polsterung und Rand laufen gemeinsam und heben sich exakt auf –
     deshalb dieselbe Dauer und Kurve für beide. */
  transition: padding 0.15s, margin 0.15s;
}
/* Die Lücke trennt die Stufen mit wöchentlicher Gruppenstunde von
   denen ohne. Sie steht vor "Leiter". */
.sw-trenner {
  margin-left: clamp(14px, 1.7vw, 22px);
}
.sw-name {
  display: block;
  font-family: var(--head);
  font-weight: 700;
  font-size: clamp(0.94rem, 0.72rem + 0.42vw, 1.02rem);
  line-height: 1.15;
  color: var(--ink);
}
.sw-alter {
  display: block;
  font-size: 0.79rem;
  color: var(--muted);
  margin-top: 2px;
}

/* Halstuch, gefaltet: schmales blasses Band über dem Reiter.

   Die blassen Töne stehen fest und werden NICHT über Deckkraft aus
   der Stufenfarbe gerechnet. Bei einer Palette von Orange bis
   Schwarz ergibt ein und dieselbe Deckkraft völlig verschiedene
   Helligkeiten: Leiter wäre so hell, dass Band und Sandrahmen zu
   einer breiigen Doppelkante verschmelzen, Altrover so dunkel, dass
   das Band als schwere Schiene liest und die Karte daran zu hängen
   scheint. Die Werte unten liegen alle bei etwa gleicher
   Helligkeit. */
.sw-reiter::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  border-radius: 4px 4px 0 0;
  background: var(--stufe-blass);
}
/* Beim Überfahren wächst das Band, statt nachzudunkeln. Nachdunkeln
   hätte dasselbe Problem wie oben: bei Altrover wäre es fast
   schwarz, bei Wölflinge blassorange. Die Höhe wirkt bei allen
   sechs gleich. */
.sw-reiter:hover::before {
  height: 7px;
}

/* Halstuch, offen: das Band wird kräftig, die Spitze fällt in den
   Reiter, und der Reiter wächst nach oben ins Panel hinein.
   Die Auswahl hängt damit nicht an der Farbe allein. */
.sw-reiter:has(.sw-schalter:checked) {
  padding-top: calc(15px + var(--sw-hub));
  /* Die untere Polsterung bleibt wie bei den anderen: jeder Millimeter
     mehr würde die Zeile beim Wechseln wachsen lassen. */
  /* Der negative Rand nimmt exakt zurück, was die Polsterung oben
     dazugibt: der Reiter wächst sichtbar nach oben, sein Platzbedarf
     in der Zeile bleibt aber gleich. Sonst würde die Zeile während
     des Wechsels kurz einsacken und die ganze Seite mitziehen. */
  margin-top: calc(-1 * var(--sw-hub));
  /* liegt über der oberen Kante des Panels, sonst trennt sie beide */
  z-index: 1;
  box-shadow: 0 -3px 12px rgba(30, 40, 70, 0.07);
}
.sw-reiter:has(.sw-schalter:checked)::before {
  background: var(--stufe);
  opacity: 1;
  height: 28px;
  clip-path: polygon(0 0, 100% 0, 100% 10px, 60% 10px, 50% 28px, 40% 10px, 0 10px);
}
.sw-reiter:has(.sw-schalter:checked) .sw-name {
  color: var(--stufe-text, var(--stufe));
}
.sw-reiter:has(.sw-schalter:focus-visible) {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}

/* Alle sechs Panels liegen im selben Feld übereinander. Damit ist
   die Höhe des Felds die des längsten Teasers und ändert sich beim
   Wechseln nicht – sonst würde alles darunter auf- und abhüpfen.
   "visibility: hidden" statt "display: none": die verdeckten Panels
   belegen weiter Platz, sind aber weder sichtbar noch anklickbar
   noch für Screenreader vorhanden. */
.sw-panel {
  grid-column: 1 / -1;
  grid-row: 2;
  /* Das Feld ist so hoch wie das längste Panel. Ohne diese Zeile
     würde das Panel dem "align-items: end" des Containers folgen,
     unten im Feld kleben und den Rest als Lücke zwischen Reiter und
     Karte stehen lassen – am deutlichsten bei Leiter und Altrover,
     die ohne Fakten-Zeile die kürzesten sind. */
  align-self: stretch;
  visibility: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 0 5px 5px 5px;
  padding: 20px 22px 18px;
  margin-top: -1px;
}
.sw-reiter:has(.sw-schalter:checked) + .sw-panel {
  visibility: visible;
  /* Ein Aufgehen als Übergang gibt es nicht: das Panel wechselt zwischen
     "display: none" und "block", dazwischen lässt sich nichts rechnen.
     Eine Animation läuft dagegen los, sobald das Panel da ist – sie
     blendet es kurz ein, statt es hart erscheinen zu lassen. Wer
     reduzierte Bewegung eingestellt hat, sieht sie nicht (siehe ganz
     unten bei prefers-reduced-motion). */
  animation: sw-aufgehen 0.18s ease-out;
}
@keyframes sw-aufgehen {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
}
.sw-motto {
  font-family: var(--head);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 8px;
  color: var(--stufe-text, var(--stufe));
}
.sw-teaser {
  margin: 0 0 13px;
  line-height: 1.55;
  max-width: 62ch;
}
/* Eine Zeile je Gruppe. Die meisten Stufen haben genau eine, manche
   mehrere – dann stehen sie als enger Block untereinander. */
.sw-fakten {
  font-family: var(--head);
  font-weight: 600;
  font-size: 1rem;
  margin: 0 0 14px;
}
.sw-fakten + .sw-fakten {
  margin-top: -10px;
}
.sw-punkt {
  color: var(--muted);
  padding: 0 6px;
}
/* Gruppenname und Alter stehen nur da, wo eine Stufe mehrere Gruppen hat.
   Beide sind Beiwerk zur Zeit und treten deshalb zurück. */
.sw-gruppe {
  display: inline-block;
  min-width: 11em;
  padding-right: 10px;
  font-weight: 700;
  color: var(--stufe-text, var(--stufe));
}
.sw-gruppe-alter {
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--muted);
  padding-left: 10px;
}
.prose a.sw-mehr {
  display: inline-block;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--stufe-text, var(--stufe));
  text-decoration: none;
  border-bottom: 2px solid currentColor;
  padding-bottom: 1px;
}

/* Altrover: schwarzes Halstuch mit schmalem rotem Rand, wie auf der
   Altrover-Seite. Das rote Dreieck liegt etwas größer darunter. */
.sw-reiter:has(.sw-schalter:checked)[data-stufe="altrover"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 32px;
  z-index: 0;
  background: var(--red);
  border-radius: 5px 5px 0 0;
  clip-path: polygon(0 0, 100% 0, 100% 12px, 62% 12px, 50% 32px, 38% 12px, 0 12px);
}
.sw-reiter:has(.sw-schalter:checked)[data-stufe="altrover"]::before {
  z-index: 1;
}
/* Name und Alter liegen über dem roten Dreieck. Der Schalter ist
   ausgenommen: er muss absolut positioniert bleiben, sonst steht sein
   1px im Textfluss und macht die Zeile eine Zeilenhöhe höher. */
.sw-reiter[data-stufe="altrover"] > :not(.sw-schalter) {
  position: relative;
  z-index: 2;
}

/* Stufenfarben. --stufe ist die kräftige Farbe für Bänder und
   Kanten, --stufe-text die auf Weiß lesbare Fassung für Schrift. */
.sw-reiter[data-stufe="woelflinge"],
.sw-panel[data-stufe="woelflinge"] {
  --stufe: var(--stufe-woelflinge);
  --stufe-blass: #fbdaa8;
  --stufe-text: var(--stufe-woelflinge-tief);
}
.sw-reiter[data-stufe="jungpfadfinder"],
.sw-panel[data-stufe="jungpfadfinder"] {
  --stufe: var(--stufe-jungpfadfinder);
  --stufe-blass: #adcee6;
}
.sw-reiter[data-stufe="pfadfinder"],
.sw-panel[data-stufe="pfadfinder"] {
  --stufe: var(--stufe-pfadfinder);
  --stufe-blass: #b8d7bd;
  --stufe-text: var(--stufe-pfadfinder-tief);
}
.sw-reiter[data-stufe="rover"],
.sw-panel[data-stufe="rover"] {
  --stufe: var(--stufe-rover);
  --stufe-blass: #f0b8b2;
}
.sw-reiter[data-stufe="leiter"],
.sw-panel[data-stufe="leiter"] {
  --stufe: var(--stufe-leiter);
  --stufe-blass: #cccccc;
  --stufe-text: var(--stufe-leiter-tief);
}
.sw-reiter[data-stufe="altrover"],
.sw-panel[data-stufe="altrover"] {
  --stufe: var(--stufe-altrover);
  /* Warmer Stich aus dem roten Halstuchrand: hebt Altrover von
     Leiters Neutralgrau ab und nimmt dem Band die Schwere. */
  --stufe-blass: #c6bebe;
}

/* Schmale Fenster: aus den Reitern wird eine Liste, das Panel geht
   direkt unter der angetippten Zeile auf. Das Halstuch kippt um 90
   Grad - gefaltet an der linken Kante, offen mit Spitze in die Zeile.

   Der Umbruch liegt hoeher als die uebrigen 900px der Seite: darunter
   bricht "ab 18 Jahren" im Leiter-Reiter um und zieht ihn schief. */
@media (max-width: 900px) {
  /* Kein Hub nach oben: hier wächst der gewählte Reiter nicht, das
     Panel geht ja direkt unter ihm auf. */
  .stufenwaehler {
    --sw-hub: 0px;
    margin: 1.4em 0;
  }
  .stufenwaehler > .sw-grid {
    grid-template-columns: 1fr;
    row-gap: 7px;
    align-items: stretch;
  }
  .sw-reiter {
    grid-row: auto;
    padding: 12px 14px 12px 23px;
    border: 1px solid var(--line);
    border-radius: 5px;
    overflow: hidden;
  }
  /* Das Halstuch liegt hier hochkant an der linken Kante. Beim Überfahren
     wächst es deshalb in die Breite – die Regel für breite Fenster lässt
     es in die Höhe wachsen und würde den Strich hier auf 7px
     zusammenschrumpfen lassen, also fast wegblenden. */
  .sw-reiter:hover::before {
    height: auto;
    width: 8px;
  }
  /* Der Abstand vor "Leiter" darf nicht verschwinden, sobald Leiter
     gewählt ist. Die Regel für den gewählten Reiter setzt weiter oben
     margin-top auf -(--sw-hub), das ist hier 0 – und hebt damit die
     Gruppierung auf. Derselbe Wert wie bei .sw-trenner. */
  .sw-trenner:has(.sw-schalter:checked) {
    margin-top: 20px;
  }
  /* Mehrere Gruppen: der Name steht auf dem Handy über der Zeit, nicht
     davor – nebeneinander bliebe für die Uhrzeit zu wenig Platz. */
  .sw-gruppe {
    display: block;
    min-width: 0;
    padding-right: 0;
    font-size: 0.92rem;
  }
  /* In der Liste stehen die Panels wieder untereinander statt
     übereinander – die Höhe darf hier mitwachsen, so gehört sich
     das für eine Liste, die aufklappt. */
  .sw-panel {
    display: none;
    visibility: visible;
    grid-column: auto;
    grid-row: auto;
  }
  /* Die Gruppierung trennt hier derselbe Weißraum wie auf dem Desktop.
     Ein Strich säße als Rahmen in der Karte und ließe sie defekt
     aussehen. */
  .sw-trenner {
    margin-left: 0;
    margin-top: 20px;
  }
  .sw-reiter::before {
    right: auto;
    bottom: 0;
    width: 5px;
    height: auto;
    border-radius: 0;
  }
  .sw-reiter:has(.sw-schalter:checked) {
    padding: 13px 14px 15px 35px;
    border-radius: 5px 5px 0 0;
    border-bottom: none;
    box-shadow: none;
  }
  .sw-reiter:has(.sw-schalter:checked)::before {
    height: auto;
    width: 26px;
    clip-path: polygon(0 0, 11px 0, 11px 42%, 26px 50%, 11px 58%, 11px 100%, 0 100%);
  }
  .sw-reiter:has(.sw-schalter:checked)[data-stufe="altrover"]::after {
    right: auto;
    bottom: 0;
    height: auto;
    width: 29px;
    border-radius: 0;
    clip-path: polygon(0 0, 13px 0, 13px 40%, 29px 50%, 13px 60%, 13px 100%, 0 100%);
  }
  .sw-reiter:has(.sw-schalter:checked) + .sw-panel {
    display: block;
    /* hebt die Zeilenlücke auf, damit das Panel an seiner Zeile klebt */
    margin-top: -7px;
    border-radius: 0 0 5px 5px;
    padding: 16px 16px 15px;
  }
}

/* ===== Bilderband zum Jahresprogramm (Startseite) =====
   Alle Bilder stehen schmal nebeneinander. Das angesteuerte wächst,
   sein Titel wechselt von hochkant auf quer.

   Wichtig gegen Flackern: .pb-quer hat eine FESTE Breite. Sonst
   würde der Text bei jeder Zwischenbreite neu umbrechen, während
   die Kachel aufgeht. */
.programm-band {
  display: flex;
  gap: 4px;
  height: 330px;
  margin: 1.6em 0 0.4em;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.pb-item {
  position: relative;
  flex: 1 1 0%;
  min-width: 0;
  overflow: hidden;
  transition: flex-grow 0.55s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.pb-item picture,
.pb-item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Sobald ein Bild angesteuert wird, schrumpfen die anderen. */
.programm-band:hover .pb-item,
.programm-band:focus-within .pb-item {
  flex-grow: 0.55;
}
.programm-band .pb-item:hover,
.programm-band .pb-item:focus-within {
  flex-grow: 4;
}
.pb-schleier {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      125% 105% at 0% 100%,
      rgba(19, 29, 63, 0.9) 0%,
      rgba(19, 29, 63, 0.62) 32%,
      rgba(19, 29, 63, 0.15) 62%,
      rgba(19, 29, 63, 0) 80%
    ),
    linear-gradient(
      0deg,
      rgba(19, 29, 63, 0.55) 0%,
      rgba(19, 29, 63, 0.22) 52%,
      rgba(19, 29, 63, 0) 88%
    );
}
/* Titel hochkant, solange das Bild schmal ist.
   Wichtig: Die Drehung sitzt auf dem INNEREN span. Läge sie auf dem
   äußeren, würde sie den Innenabstand mitdrehen - padding-bottom
   landete optisch oben und die Schrift klebte am unteren Rand. */
.pb-hoch {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 0 0 26px 12px;
  pointer-events: none;
  transition: opacity 0.28s ease;
}
.pb-hoch > span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: #fff;
  font-family: var(--head);
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-shadow: 0 1px 10px rgba(19, 29, 63, 0.55);
}
/* Titel quer, sobald das Bild breit ist. Feste Breite = fester Umbruch. */
.pb-quer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 340px;
  padding: 0 24px 30px;
  color: #fff;
  opacity: 0;
  text-shadow: 0 1px 10px rgba(19, 29, 63, 0.5);
  transition: opacity 0.38s ease 0.12s;
}
.pb-quer b {
  display: block;
  font-family: var(--head);
  font-weight: 700;
  font-size: 1.55rem;
  line-height: 1.08;
}
.pb-quer span {
  display: block;
  font-size: 0.92rem;
  color: #cfd6ef;
  margin-top: 2px;
}
.pb-item:hover .pb-hoch,
.pb-item:focus-within .pb-hoch {
  opacity: 0;
}
.pb-item:hover .pb-quer,
.pb-item:focus-within .pb-quer {
  opacity: 1;
}
.pb-item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--sand);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.pb-item:hover::after,
.pb-item:focus-within::after {
  transform: scaleX(1);
}

/* Ohne Maus (Handy, Tablet) gibt es kein Hover: aus dem Band wird
   ein Streifen zum Wischen, bei dem jedes Bild einrastet. */
@media (hover: none), (max-width: 640px) {
  .programm-band {
    height: auto;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-radius: 0;
    box-shadow: none;
    padding-bottom: 4px;
  }
  .programm-band::-webkit-scrollbar {
    display: none;
  }
  .pb-item {
    flex: 0 0 84%;
    height: 230px;
    border-radius: var(--radius);
    scroll-snap-align: center;
    box-shadow: var(--shadow);
  }
  .pb-hoch {
    display: none;
  }
  .pb-quer {
    opacity: 1;
    width: 100%;
    padding: 0 20px 22px;
  }
  .pb-quer b {
    font-size: 1.4rem;
  }
  .pb-item::after {
    display: none;
  }
}

/* ===== Kalender full list ===== */
.cal-month {
  margin: 1.8em 0 0.6em;
  font-size: 1.35rem;
  color: var(--brand-dark);
  border-bottom: 2px solid var(--sand-line);
  padding-bottom: 0.2em;
}
.cal-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cal-item {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 16px;
  background: #fff;
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 16px 20px;
  border-left: 4px solid var(--brand);
}
.cal-when {
  font-weight: 700;
  color: var(--brand-dark);
  font-family: var(--head);
  letter-spacing: 0.3px;
}
.cal-title {
  font-weight: 600;
}
.cal-loc {
  color: var(--muted);
  font-size: 0.9rem;
  margin-top: 2px;
}

/* ===== Contact ===== */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
  margin: 1.3em 0;
}
.person {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  border-top: 4px solid var(--navy);
}
.person .role {
  color: var(--muted);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
}
.person .name {
  font-family: var(--head);
  font-size: 1.3rem;
  color: var(--navy-dark);
  margin: 0.1em 0 0.5em;
}

/* ===== 404 ===== */
.notfound {
  text-align: center;
  padding: 56px 40px;
}
.notfound-compass {
  width: 110px;
  height: 110px;
  color: var(--navy);
  margin: 0 auto 22px;
}
.notfound h1 {
  font-size: 1.9rem;
  text-wrap: balance;
  margin: 0 0 0.5em;
}
.notfound .lead {
  max-width: 42ch;
  margin: 0 auto 1.6em;
}
.notfound-tips {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 28px;
}
.notfound-tips a {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--paper);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  padding: 10px 16px;
  font-family: var(--head);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--navy-dark);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.notfound-tips a:hover {
  text-decoration: none;
  color: var(--brand-dark);
}
.notfound-tips svg {
  width: 15px;
  height: 15px;
  color: var(--red);
  flex: none;
}

/* ===== Footer ===== */
.site-footer {
  background: var(--brand-darker);
  color: #e7e6ef;
  margin-top: 56px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 32px;
  padding: 46px 22px 34px;
}
.site-footer h3 {
  color: #fff;
  font-size: 1.05rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.site-footer a {
  color: #cdd3e6;
}
.site-footer a:hover {
  color: #fff;
}
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.footer-bottom {
  background: rgba(0, 0, 0, 0.22);
  font-size: 0.88rem;
  padding: 14px 0;
  color: #b6bcd2;
}
.footer-bottom a {
  color: #d4d9ea;
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
  body {
    font-size: 17px;
  }
  h1 {
    font-size: 2rem;
  }
  .hero h1 {
    font-size: 2.1rem;
  }
  .nav-toggle {
    display: flex;
  }
  .site-nav {
    position: fixed;
    inset: 74px 0 0 auto;
    width: min(320px, 86vw);
    background: var(--brand-dark);
    transform: translateX(100%);
    transition: transform 0.25s;
    overflow-y: auto;
    padding: 10px;
  }
  .site-nav.open {
    transform: translateX(0);
    box-shadow: -6px 0 30px rgba(0, 0, 0, 0.3);
  }
  .site-nav > ul {
    flex-direction: column;
    gap: 2px;
  }
  .site-nav a {
    padding: 14px 16px;
  }
  .submenu {
    position: static;
    display: none;
    box-shadow: none;
    background: rgba(0, 0, 0, 0.18);
    border-radius: 8px;
    margin: 2px 0 6px;
  }
  .submenu a {
    color: #eaf2e8;
  }
  .submenu a:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
  }
  .nav-item.has-children.open > .submenu {
    display: flex;
  }
  .nav-item.has-children.open .caret {
    transform: rotate(180deg);
  }
  .layout {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .sidebar {
    position: static;
    flex-direction: column;
  }
  .content {
    padding: 26px 20px;
  }
  .hero-inner {
    flex-direction: column;
    text-align: center;
    gap: 22px;
    padding: 38px 22px;
  }
  .hero-logo {
    height: 120px;
  }
  .cal-item {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 26px;
  }
  .termine-card {
    display: none;
  }
}
@media (max-width: 640px) {
  .brand-text small {
    display: none;
  }
  .footer-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== TWEAKS: Leitfarbe (welche Logofarbe führt) ===== */
html {
  transition: none;
}
html[data-mood="rot"] {
  --brand: #c62128;
  --brand-dark: #a71a20;
  --brand-darker: #7d1519;
  --bg: #f7efe4;
}
html[data-mood="sand"] {
  --brand: #9a7b45;
  --brand-dark: #7f6236;
  --brand-darker: #5d4826;
  --bg: #f6f0e1;
}
html[data-mood="rot"] .hero::after {
  background: radial-gradient(
    circle at 80% 15%,
    rgba(198, 33, 40, 0.4),
    transparent 52%
  );
}
html[data-mood="sand"] .hero::after {
  background: radial-gradient(
    circle at 80% 15%,
    rgba(195, 168, 120, 0.45),
    transparent 50%
  );
}

/* ===== TWEAKS: Stufenfarbe auf den zugehörigen Gruppenseiten ===== */
html[data-stufe="woelflinge"] {
  --stufe: var(--stufe-woelflinge);
}
html[data-stufe="jungpfadfinder"] {
  --stufe: var(--stufe-jungpfadfinder);
}
html[data-stufe="pfadfinder"] {
  --stufe: var(--stufe-pfadfinder);
}
html[data-stufe="rover"] {
  --stufe: var(--stufe-rover);
}
html[data-stufe="leiter"] {
  --stufe: var(--stufe-leiter);
}
html[data-stufe="altrover"] {
  --stufe: var(--stufe-altrover);
}
.gs-row[data-stufe="woelflinge"] {
  --stufe: var(--stufe-woelflinge);
}
.gs-row[data-stufe="jungpfadfinder"] {
  --stufe: var(--stufe-jungpfadfinder);
}
.gs-row[data-stufe="pfadfinder"] {
  --stufe: var(--stufe-pfadfinder);
}
.gs-row[data-stufe="rover"] {
  --stufe: var(--stufe-rover);
}
html[data-stufe] .page-title {
  border-bottom-color: var(--stufe);
}
html[data-stufe] .eyebrow {
  color: var(--stufe);
}
html[data-stufe] .prose h2,
html[data-stufe] .prose h3 {
  color: var(--stufe);
}
html[data-stufe] .sidebar .card {
  border-top-color: var(--stufe);
}
html[data-stufe] .mini-events li {
  border-left-color: var(--stufe);
}
html[data-stufe] .gs-name {
  color: var(--stufe);
}
html[data-stufe] .btn {
  background: var(--stufe);
}
html[data-stufe] .btn:hover {
  background: var(--stufe);
  filter: brightness(0.9);
}

/* ===== TWEAKS: Stufenfarbe im Seitenkopf =====
   Der Schleier über dem Kopfbild ist sonst durchgehend navy. Auf den
   Stufenseiten bekommt der Keil unten links – dort, wo Motto, Name und
   Alter stehen – die Stufenfarbe beigemischt. Der flache Grundverlauf
   bleibt navy, damit die obere Bildhälfte unangetastet bleibt.

   Die Regel steht bewusst NACH der Grundregel von .sh-schleier: Browser
   ohne color-mix() verwerfen sie und behalten den navyfarbenen Schleier.
   Der Text bleibt damit in jedem Fall lesbar.

   Geometrie und Deckkraft sind dieselben wie im Grundschleier, der Keil
   sitzt also auf schmalen Bildschirmen genauso richtig – dort ist nur
   das Motto ausgeblendet, die Farbe wirkt weiter. */
html[data-stufe] .sh-schleier {
  background:
    radial-gradient(
      125% 105% at 0% 100%,
      color-mix(in srgb, var(--stufe) 62%, rgba(19, 29, 63, 0.92)) 0%,
      color-mix(in srgb, var(--stufe) 40%, rgba(19, 29, 63, 0.66)) 32%,
      rgba(19, 29, 63, 0.15) 62%,
      rgba(19, 29, 63, 0) 80%
    ),
    linear-gradient(
      0deg,
      rgba(19, 29, 63, 0.55) 0%,
      rgba(19, 29, 63, 0.22) 52%,
      rgba(19, 29, 63, 0) 88%
    );
}
/* Sand auf getöntem Grund wird matschig – das Motto geht auf Weiß. */
html[data-stufe] .sh-motto {
  color: #fff;
}

/* ===== TWEAKS: Altrover-Halstuch (schwarz, dünner roter Streifen) =====
   Das Altrover-Halstuch ist schwarz mit schmalem rotem Rand. Der
   Rahmen/Balken bleibt darum in voller Breite schwarz (Stufenfarbe),
   direkt daneben liegt ein dünner roter Streifen.

   Der Streifen ist ein Hintergrund-Verlauf mit `padding-box`: er
   beginnt exakt an der Innenkante des Rahmens, egal wie breit der
   gerade ist. Kein Spalt, keine doppelte Breitenangabe. */
html[data-stufe="altrover"] .page-title {
  background: linear-gradient(var(--red), var(--red)) bottom / 100% 2px no-repeat padding-box;
}
html[data-stufe="altrover"] .sidebar .card {
  background: linear-gradient(var(--red), var(--red)) top / 100% 2px no-repeat padding-box,
    var(--paper);
}
html[data-stufe="altrover"] .mini-events li {
  background: linear-gradient(var(--red), var(--red)) left / 1px 100% no-repeat padding-box;
}

/* ===== TWEAKS: Formsprache = Stempel (kantig, Badge-Charme) ===== */
html[data-form="stamp"] {
  --radius: 3px;
  --shadow: 0 0 0 1.5px var(--sand-line);
  --shadow-lg: 0 8px 0 rgba(30, 40, 70, 0.1), 0 0 0 1.5px var(--sand-line);
}
html[data-form="stamp"] .card,
html[data-form="stamp"] .gs-list,
html[data-form="stamp"] .person {
  border-radius: 3px;
}
html[data-form="stamp"] .cal-item {
  border-radius: 3px;
  border: 1px solid var(--sand-line);
  border-left-width: 6px;
  border-left-style: solid;
}
html[data-form="stamp"] .sw-reiter,
html[data-form="stamp"] .sw-panel {
  border-color: var(--sand-line);
}
html[data-form="stamp"] .sw-reiter {
  border-radius: 3px 3px 0 0;
}
html[data-form="stamp"] .sw-panel {
  border-radius: 0 3px 3px 3px;
}
html[data-form="stamp"] .sw-reiter::before {
  border-radius: 3px 3px 0 0;
}
html[data-form="stamp"] .content {
  border-radius: 3px;
  border: 1.5px solid var(--sand-line);
}
html[data-form="stamp"] table {
  border-radius: 3px;
}
html[data-form="stamp"] .btn {
  border-radius: 3px;
}
html[data-form="stamp"] .card h2 {
  text-transform: uppercase;
  letter-spacing: 1.2px;
}
html[data-form="stamp"] .btn {
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* ===== Bewegung reduzieren =====
   Wer im Betriebssystem "weniger Animationen" eingestellt hat,
   bekommt Zoom und Verschiebungen nicht zu sehen. */
@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;
  }
  .seitenheader:hover img {
    transform: none;
  }
  /* Das Aufgehen im Programm-Band bleibt, nur ohne Übergang -
     sonst wäre der Titel nicht mehr lesbar. */
  .pb-item {
    transition: none;
  }
}