/* ===========================================================================
 * Ski-Gilde Jülich — Komponenten
 * Gestaltungsrichtung „Vereinsblatt" — siehe Kopf von tokens.css.
 * Namenskonvention: sg-<block>__<element>--<modifier>.
 * Farben kommen ausnahmslos aus dem Sektionskontext in tokens.css.
 * ======================================================================== */

/* ---------------------------------------------------------------------------
 * Buttons (7.3)
 * Mindesthöhe 48px, Innenabstand 24px. Nie zwei gleichrangige nebeneinander.
 * Hover ändert immer mindestens zwei Eigenschaften (4.6).
 * ------------------------------------------------------------------------ */
.sg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  min-height: 48px;
  padding: var(--sp-3) var(--sp-5);
  border: 1.5px solid transparent;
  border-radius: var(--radius-md);
  font-weight: 650;
  font-size: var(--sg-fs-body);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t-schnell), border-color var(--t-schnell),
              color var(--t-schnell), transform var(--t-schnell);
}
.sg-btn__pfeil { transition: transform var(--t-schnell) var(--ease-aus); }
.sg-btn:hover .sg-btn__pfeil { transform: translateX(3px); }

.sg-btn--primaer {
  background: var(--sg-blue-700);       /* Weiß darauf: 9.92:1 */
  color: var(--sg-white);
}
.sg-btn--primaer:hover { background: var(--sg-blue-600); border-color: var(--sg-blue-800); }

/* „Mitglied werden". In dieser Richtung ohne Signalorange — der Akzent liegt
   in der Fläche, nicht in der Farbe: weiß auf Blau in der Kopfzeile, Blau auf
   Weiß im Inhalt. Damit kommt die Seite mit einer Farbachse aus. */
.sg-btn--akzent { background: var(--sg-blue-700); color: var(--sg-white); }
.sg-btn--akzent:hover { background: var(--sg-blue-600); border-color: var(--sg-blue-800); }
.sg-header .sg-btn--akzent { background: var(--sg-white); color: var(--sg-blue-700); border-color: var(--sg-white); }
.sg-header .sg-btn--akzent:hover { background: var(--sg-blue-100); border-color: var(--sg-blue-100); }

.sg-btn--sekundaer {
  background: transparent;
  color: var(--sg-blue-700);
  border-color: var(--sg-blue-700);
}
.sg-btn--sekundaer:hover { background: var(--sg-blue-50); border-color: var(--sg-blue-600); }

.sg-btn--auf-dunkel { background: var(--sg-white); color: var(--sg-blue-900); }
.sg-btn--auf-dunkel:hover { background: var(--sg-blue-100); }

.sg-btn--text {
  min-height: 44px;
  padding: var(--sp-2) 0;
  background: none;
  border: 0;
  color: var(--sg-link);
  font-weight: 650;
  text-decoration: none;
}
.sg-btn--text:hover { text-decoration: underline; text-decoration-thickness: .1em; }

.sg-btn--breit { width: 100%; }
@media (max-width: 599px) { .sg-btn { width: 100%; } .sg-btn--text { width: auto; } }

/* ---------------------------------------------------------------------------
 * Badge (Termin-Art, Status)
 * ------------------------------------------------------------------------ */
.sg-badge {
  display: inline-block;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-sm);
  background: var(--sg-blue-100);
  color: var(--sg-blue-700);
  font-size: var(--sg-fs-meta);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.sg-badge--signal { background: var(--sg-blue-700); color: var(--sg-white); }   /* 9.92:1 */
.sg-badge--gelaufen { background: var(--sg-firn); color: var(--sg-slate-600); }
.sg-footer .sg-badge { background: var(--sg-blue-800); color: var(--sg-blue-200); }

/* ---------------------------------------------------------------------------
 * Kopfbereich / Navigation (5.3)
 * ------------------------------------------------------------------------ */
.sg-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--sg-blue-700);
  color: var(--sg-white);
  --sg-fokus: var(--sg-blue-200);
  transition: background-color var(--t-normal), padding var(--t-normal);
}
/*
 * Konzept 5.3 sieht einen zunächst transparenten Header über dem Hero vor.
 * Das setzt einen DUNKLEN Hero voraus — Block 1 der Startseite ist aber nach
 * 6.1 hell („Off-Piste-Split, hell"). Weiße Navigation auf `snow` erreicht
 * 1.06:1 und ist damit nach 4.2 unzulässig. Der Header bleibt deshalb
 * durchgehend blue-900; die Verkleinerung beim Scrollen bleibt erhalten.
 * Protokolliert als Abweichung A-10 in docs/PLATTFORM-MAPPING.md.
 */
.sg-header.ist-gescrollt { background: var(--sg-blue-800); box-shadow: 0 2px 0 var(--sg-blue-900); }

.sg-header__innen {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  min-height: var(--sg-header-h);
  max-width: var(--w-wide);
  margin-inline: auto;
  padding-inline: var(--sg-rand);
}
.sg-header.ist-gescrollt .sg-header__innen { min-height: 68px; }

.sg-marke { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; color: inherit; margin-right: auto; }
.sg-marke__logo { width: auto; height: 56px; transition: height var(--t-normal); }
.sg-header.ist-gescrollt .sg-marke__logo { height: 40px; }
.sg-marke { flex: 0 0 auto; }
.sg-marke__text { font-weight: 750; font-stretch: 105%; line-height: 1.1; font-size: 1.0625rem; white-space: nowrap; }
.sg-marke__zusatz { display: block; font-size: .8125rem; font-weight: 500; color: var(--sg-blue-200); letter-spacing: .04em; }

.sg-nav { display: none; }
@media (min-width: 1080px) { .sg-nav { display: block; } }
.sg-nav__liste { display: flex; align-items: center; gap: 2px; list-style: none; }
.sg-nav__punkt { position: relative; }
.sg-nav__link {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 48px;
  padding: 0 var(--sp-3);
  color: var(--sg-white);
  text-decoration: none;
  font-weight: 600;
  position: relative;
  /* Ein umgebrochener Menüpunkt zerlegt die Kopfzeile — lieber schmaler. */
  white-space: nowrap;
}
.sg-nav__link::after {
  content: "";
  position: absolute;
  left: var(--sp-3);
  right: var(--sp-3);
  bottom: 14px;
  height: 3px;
  background: var(--sg-white);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-normal) var(--ease-aus);
}
.sg-nav__link:hover::after,
.sg-nav__link[aria-current="page"]::after,
.sg-nav__punkt--aktuell > .sg-nav__link::after { transform: scaleX(1); }

/* Einspaltiges Dropdown, kein Mega-Menü (5.3). */
.sg-nav__unter {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 15rem;
  margin: 0;
  padding: var(--sp-2);
  list-style: none;
  background: var(--sg-blue-800);
  border: 1px solid var(--sg-border-dark);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-overlay);
  display: none;
}
.sg-nav__punkt:hover > .sg-nav__unter,
.sg-nav__punkt:focus-within > .sg-nav__unter,
.sg-nav__schalter[aria-expanded="true"] + .sg-nav__unter { display: block; }
.sg-nav__unter a {
  display: block;
  min-height: 48px;
  padding: var(--sp-3);
  color: var(--sg-white);
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.sg-nav__unter a:hover { background: var(--sg-blue-700); }

.sg-nav__schalter {
  background: none; border: 0; padding: 0 var(--sp-1);
  color: inherit; cursor: pointer; display: inline-flex; align-items: center;
  min-height: 48px; min-width: 32px;
}
.sg-nav__schalter svg { transition: transform var(--t-schnell); }
.sg-nav__schalter[aria-expanded="true"] svg { transform: rotate(180deg); }

.sg-header__aktionen { display: flex; align-items: center; gap: var(--sp-3); }
/* Zurückgenommen — richtet sich an Zielgruppe B, nicht an Erstbesucher (5.3). */
.sg-header__login {
  display: none;
  color: var(--sg-blue-200);
  font-size: var(--sg-fs-meta);
  text-decoration: none;
  padding: var(--sp-2);
  min-height: 44px;
  align-items: center;
}
.sg-header__login:hover { color: var(--sg-white); text-decoration: underline; }
@media (min-width: 1320px) { .sg-header__login { display: inline-flex; } }
@media (max-width: 1079px) { .sg-header__aktionen .sg-btn { display: none; } }
@media (min-width: 1080px) and (max-width: 1319px) {
  /* Eng, aber vollständig: Login-Link weicht, der CTA bleibt. */
  .sg-header__login { display: none; }
  .sg-nav__link { padding: 0 var(--sp-2); font-size: 1.0625rem; }
}

/* Vollbild-Overlay-Menü mobil (5.3). */
.sg-burger {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-width: 48px; min-height: 48px;
  background: none; border: 1.5px solid var(--sg-border-dark);
  border-radius: var(--radius-md); color: inherit; cursor: pointer;
  padding: 0 var(--sp-3); font-weight: 600; font-size: var(--sg-fs-meta);
  text-transform: uppercase; letter-spacing: .06em;
}
@media (min-width: 1080px) { .sg-burger { display: none; } }

.sg-mobilmenue {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--sg-blue-950);
  color: var(--sg-white);
  --sg-fokus: var(--sg-blue-400);
  display: flex;
  flex-direction: column;
  padding: var(--sp-5) var(--sg-rand) var(--sp-9);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--t-normal) var(--ease-aus);
}
.sg-mobilmenue[hidden] { display: none; }
.sg-mobilmenue.ist-offen { transform: none; }
.sg-mobilmenue__kopf { display: flex; justify-content: flex-end; margin-bottom: var(--sp-6); }
.sg-mobilmenue__liste { list-style: none; }
.sg-mobilmenue__liste a {
  display: block;
  padding: var(--sp-4) 0;
  color: var(--sg-white);
  text-decoration: none;
  font-size: var(--sg-fs-display-l);
  font-weight: 700;
  font-stretch: 96%;
  line-height: 1.1;
  border-bottom: 1px solid var(--sg-border-dark);
}
.sg-mobilmenue__liste .sg-mobilmenue__unter a { font-size: var(--sg-fs-body-l); font-weight: 500; padding-left: var(--sp-4); }
.sg-mobilmenue__unter { list-style: none; }
/* CTA steht als ERSTES Element, nicht als letztes (5.3). */
.sg-mobilmenue__cta { margin-bottom: var(--sp-6); }

/* ---------------------------------------------------------------------------
 * Breadcrumb (5.3)
 * ------------------------------------------------------------------------ */
.sg-brotkrumen { padding-block: var(--sp-4); font-size: var(--sg-fs-meta); color: var(--sg-slate-600); }
.sg-brotkrumen ol { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; }
.sg-brotkrumen li { display: flex; align-items: center; gap: var(--sp-2); }
.sg-brotkrumen li + li::before { content: "›"; color: var(--sg-slate-500); }
.sg-brotkrumen a { color: var(--sg-blue-700); }

/* ---------------------------------------------------------------------------
 * Split-Hero (6.1 Block 1)
 * Kein zentrierter Standard-Hero — asymmetrisch, Bild bricht aus dem Raster.
 * ------------------------------------------------------------------------ */
.sg-hero { padding-block: clamp(40px, 6vw, 88px) clamp(48px, 7vw, 104px); }
/* Text und Bild stehen auf einer Höhe und teilen sich die Fläche zur Hälfte —
   ein oben angeschlagenes, kleineres Bild lässt darunter ein Loch. */
.sg-hero .sg-raster { align-items: center; }
.sg-hero__text { display: flex; flex-direction: column; gap: var(--sp-5); }
/*
 * Die Skala aus 4.3 (display-xl bis 6rem) gilt für volle Breite. Im
 * Split-Hero steht die Headline in einer 7-von-12-Spalte, also rund 620px —
 * dort ergäben 96px vier Zeichen pro Zeile. Eigene Obergrenze, gleiche
 * Achsen und gleiche Anmutung.
 */
.sg-hero__titel {
  margin-bottom: var(--sp-6);
  font-size: clamp(2.5rem, 1.4rem + 3.6vw, 4.5rem);
}
.sg-hero__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5); margin-top: var(--sp-3); }
.sg-hero__bild { position: relative; }
/* Meta-Label über dem Bild: signalisiert „echtes Foto, kein Stock" (6.1). */
.sg-hero__bildmarke {
  position: absolute;
  left: 0;
  bottom: var(--sp-5);
  background: var(--sg-blue-900);
  color: var(--sg-white);
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--sg-fs-meta);
  font-weight: 550;
  letter-spacing: var(--sg-ls-meta);
  text-transform: uppercase;
}
@media (max-width: 859px) {
  .sg-hero .sg-hero__bild { order: -1; margin-inline: calc(var(--sg-rand) * -1); }
  .sg-hero__bild .sg-img { aspect-ratio: 16 / 9; }
  .sg-hero__bildmarke { left: var(--sg-rand); }
}
/* Vereinsblatt: das Bild bleibt in der Spalte und bekommt denselben kräftigen
   Rahmen wie die Karten — kein Ausbruch über den Viewport-Rand. */
.sg-hero__bild .sg-img { border: var(--border-karte); }

/* Seitenkopf der Unterseiten */
.sg-seitenkopf { padding-block: clamp(40px, 6vw, 88px) clamp(32px, 4vw, 64px); }
.sg-seitenkopf__einleitung { max-width: var(--w-text); margin-top: var(--sp-6); font-size: var(--sg-fs-body-l); color: var(--sg-text-kraeftig); }

/* ---------------------------------------------------------------------------
 * Saisonband ⭐ (7.2) — das gestalterische Kernstück
 * Zwölf Monate September–August als horizontale Achse.
 * Ohne JavaScript eine semantische, horizontal gelegte <ol>.
 * ------------------------------------------------------------------------ */
/* ---------------------------------------------------------------------------
 * Kartenraster — symmetrisch.
 *
 * Das versetzte 2-1-1-Muster war der Kern des „Off-Piste-Grids" (Konzept 3.5)
 * und steht in der Anti-Slop-Tabelle 3.1 ausdrücklich gegen gleich große
 * Kacheln. Das Vereinsblatt entscheidet sich bewusst anders: gleich große,
 * gleich schwere Karten sind schneller zu erfassen — und genau das ist für
 * eine Terminliste die richtige Eigenschaft.
 *
 * Die Modifier-Klassen bleiben erhalten, damit die Vorlagen unverändert
 * bleiben; sie unterscheiden sich nur noch in der Spaltenzahl.
 * ------------------------------------------------------------------------ */
.sg-rhythmus { display: grid; gap: var(--sp-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) {
  .sg-rhythmus { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .sg-rhythmus { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sg-rhythmus--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sg-rhythmus--eins { grid-template-columns: minmax(0, 1fr); }
}
.sg-rhythmus > * { grid-column: auto; }

/* ---------------------------------------------------------------------------
 * Karten allgemein — kein Schatten, Absetzung über Fläche und Haarlinie (4.5)
 * ------------------------------------------------------------------------ */
.sg-karte {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--sg-karte);
  border: var(--border-karte);
  border-radius: var(--radius-0);
  transition: background-color var(--t-normal), border-color var(--t-normal);
}
.sg-karte__koerper { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); flex: 1; }
/* Hover ändert Fläche UND Rahmen — zwei Eigenschaften, wie 4.6 verlangt.
   Kein Anheben: in einem rechtwinkligen System wirkt Schweben fehl am Platz. */
.sg-karte:hover, .sg-karte:focus-within { background: var(--sg-blue-50); border-color: var(--sg-blue-800); }

/* Ganze Karte klickbar über ein aufgespanntes Pseudoelement auf dem
   Titel-Link — kein div onclick, kein verschachtelter Link (7.2). */
.sg-karte__link { color: inherit; text-decoration: none; }
.sg-karte__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.sg-karte__link:hover { text-decoration: underline; text-decoration-thickness: .08em; }
/* Telefonnummer liegt über der Klickfläche und bleibt separat wählbar (7.2). */
.sg-karte__tel { position: relative; z-index: 2; }

/* ---------------------------------------------------------------------------
 * TerminKarte (7.2)
 * Das Datum ist die primäre Information, nicht der Titel.
 * ------------------------------------------------------------------------ */
.sg-termin__datum {
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.125rem);
  font-weight: 750;
  font-stretch: 104%;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--sg-text);
}
.sg-termin__titel { font-size: var(--sg-fs-h3); font-weight: 650; line-height: 1.25; }
.sg-termin__ort { font-size: var(--sg-fs-meta); color: var(--sg-text-leise); }
.sg-termin__kurz { color: var(--sg-text-kraeftig); }
.sg-termin__fuss {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  align-items: baseline;
  margin-top: auto; padding-top: var(--sp-4);
  font-size: var(--sg-fs-meta);
  color: var(--sg-text-leise);
}
.sg-termin__fuss a { color: var(--sg-link); font-weight: 600; }

/* Vergangene Termine: Deckkraft 0.7, keine Hover-Anhebung (7.2). */
.sg-karte--gelaufen { opacity: .7; }
.sg-karte--gelaufen:hover { transform: none; }

/* Terminliste als Zeilen (6.2) */
.sg-terminliste { list-style: none; }
.sg-terminliste__monat { position: sticky; top: var(--sg-header-h); z-index: 5; background: var(--sg-flaeche); padding: var(--sp-4) 0 var(--sp-2); }
.sg-terminzeile {
  position: relative;
  display: grid;
  gap: var(--sp-2) var(--sp-5);
  grid-template-columns: minmax(0, 1fr);
  padding: var(--sp-5) 0;
  border-bottom: var(--border-hair);
}
@media (min-width: 720px) {
  /* Die Datumsspalte misst sich am längsten Datum (max-content) statt an einem
     geratenen Wert. Bei 10rem brach „12.12.–19.12.2026" mitten im Zeitraum um,
     und jede feste Breite wäre für einzelne Tage zu breit. Das Datum selbst
     darf nie umbrechen — ein Zeitraum ist eine Angabe, keine zwei. */
  .sg-terminzeile { grid-template-columns: max-content minmax(0, 1fr) auto; align-items: baseline; }
  .sg-terminzeile__datum { white-space: nowrap; padding-right: var(--sp-5); }
}
.sg-terminzeile:hover { background: var(--sg-blue-50); }
.sg-footer .sg-terminzeile:hover { background: rgb(255 255 255 / .04); }
.sg-terminzeile__datum { font-weight: 700; font-size: var(--sg-fs-body-l); }
.sg-terminzeile__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-size: var(--sg-fs-meta); color: var(--sg-text-leise); margin-top: var(--sp-2); }

.sg-gelaufen { margin-top: var(--sp-8); }
.sg-gelaufen > summary {
  cursor: pointer;
  padding: var(--sp-4) 0;
  font-weight: 650;
  color: var(--sg-slate-500);
  border-top: var(--border-hair);
  min-height: 48px;
  display: flex; align-items: center; gap: var(--sp-3);
}
.sg-gelaufen[open] > summary { color: var(--sg-text-kraeftig); }
.sg-gelaufen .sg-terminzeile { opacity: .7; }

/* Dieselbe Terminliste auf der Akzentfläche der Startseite. Die ist seit der
   Richtung „Vereinsblatt" selbst blue-50 — der Standard-Hover wäre dort
   unsichtbar, weil er genau dieselbe Farbe setzt. */
.sg-sektion--akzent .sg-terminzeile:hover { background: var(--sg-white); }

/* Info-Spalte am Einzeltermin (6.3) */
.sg-infospalte { position: sticky; top: calc(var(--sg-header-h) + var(--sp-5)); background: var(--sg-white); border: var(--border-hair); padding: var(--sp-5); }
.sg-sektion--firn .sg-infospalte { background: var(--sg-white); }
.sg-infospalte dl { display: grid; gap: var(--sp-4); }
.sg-infospalte dt { font-size: var(--sg-fs-meta); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--sg-slate-600); }
.sg-infospalte dd { margin: var(--sp-1) 0 0; }

/* ---------------------------------------------------------------------------
 * Aktivitäts- und Berichtskarten
 * ------------------------------------------------------------------------ */
.sg-aktivitaet__icon { color: var(--sg-blue-600); }
.sg-footer .sg-aktivitaet__icon { color: var(--sg-blue-300); }

.sg-bericht__meta { font-size: var(--sg-fs-meta); color: var(--sg-text-leise); }

/* ---------------------------------------------------------------------------
 * PersonenKarte (6.6)
 * Porträt 1:1 mit radius-full — die einzige Ausnahme im Radius-System (4.5).
 * ------------------------------------------------------------------------ */
.sg-personen { display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.sg-person { display: flex; flex-direction: column; gap: var(--sp-4); align-items: flex-start; }
.sg-person__portraet { width: 128px; aspect-ratio: 1; border-radius: var(--radius-full); overflow: hidden; }
.sg-person__portraet .sg-img { border-radius: var(--radius-full); height: 100%; }
/* Kein Foto: Initialen auf blue-700 mit Höhenlinien-Textur — konsistent für
   ALLE, niemals gemischt Foto/Platzhalter (6.6). */
.sg-person__initialen {
  width: 128px; aspect-ratio: 1;
  border-radius: var(--radius-full);
  background: var(--sg-blue-700);
  color: var(--sg-white);
  display: grid; place-items: center;
  font-size: 2.25rem; font-weight: 750; font-stretch: 104%;
  letter-spacing: .02em;
  position: relative; overflow: hidden; isolation: isolate;
}
.sg-person__name { font-size: var(--sg-fs-h3); font-weight: 700; }
.sg-person__amt { font-size: var(--sg-fs-meta); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--sg-blue-700); }
.sg-footer .sg-person__amt { color: var(--sg-blue-300); }
.sg-person__kontakt { font-size: var(--sg-fs-meta); }
.sg-person__kontakt a { display: inline-flex; align-items: center; min-height: 44px; }
.sg-person--hervor { border-left: 4px solid var(--sg-blue-700); padding-left: var(--sp-5); }
/* Vakante Stelle wird nicht versteckt, sondern als Einladung gezeigt (6.6). */
.sg-person--offen { border: 1.5px dashed var(--sg-border-strong); padding: var(--sp-5); }

/* ---------------------------------------------------------------------------
 * Kennzahlen, Zeitleiste, Schritte, Beitragstabelle
 * ------------------------------------------------------------------------ */
.sg-kennzahlen { display: grid; gap: var(--sp-6); }
.sg-kennzahl__wert { font-size: clamp(2.5rem, 2rem + 2.4vw, 3.75rem); font-weight: 800; font-stretch: 108%; line-height: 1; letter-spacing: -.03em; }
.sg-kennzahl__label { font-size: var(--sg-fs-meta); font-weight: 550; letter-spacing: var(--sg-ls-meta); text-transform: uppercase; color: var(--sg-text-leise); margin-top: var(--sp-2); }
.sg-kennzahl + .sg-kennzahl { padding-top: var(--sp-6); border-top: var(--border-hair); }

.sg-zeitleiste { list-style: none; position: relative; padding-left: var(--sp-8); }
.sg-zeitleiste::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--sg-linie); }
.sg-zeitleiste__punkt { position: relative; padding-bottom: var(--sp-7); }
.sg-zeitleiste__punkt::before {
  content: ""; position: absolute; left: calc(var(--sp-8) * -1); top: 6px;
  width: 16px; height: 16px; border-radius: var(--radius-full);
  background: var(--sg-flaeche); border: 3px solid var(--sg-blue-700);
}
.sg-footer .sg-zeitleiste__punkt::before { border-color: var(--sg-blue-300); }
.sg-zeitleiste__jahr { font-weight: 750; font-size: var(--sg-fs-h3); }

.sg-schritte { list-style: none; counter-reset: sg-schritt; display: grid; gap: var(--sp-6); }
.sg-schritt { counter-increment: sg-schritt; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
.sg-schritt::before {
  content: counter(sg-schritt);
  font-size: 2rem; font-weight: 800; font-stretch: 106%; line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--sg-blue-700);
  min-width: 2ch;
}
.sg-footer .sg-schritt::before { color: var(--sg-blue-300); }

/* Gesetzte Liste mit Signal-Kante als Aufzählungszeichen (6.5 Punkt 2).
   Keine Feature-Kacheln mit Icons im Kreis. */
.sg-vorteile { list-style: none; display: grid; gap: var(--sp-5); }
.sg-vorteile li { position: relative; padding-left: var(--sp-7); }
.sg-vorteile li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: 20px; height: 3px;
  background: var(--sg-blue-700);
}


/* ---------------------------------------------------------------------------
 * Zitat (Nachtabfahrt-Block)
 * ------------------------------------------------------------------------ */
.sg-zitat { position: relative; padding-left: var(--sp-6); border-left: 4px solid var(--sg-blue-700); max-width: 40ch; }
.sg-zitat__quelle { display: block; margin-top: var(--sp-5); font-family: var(--sg-font-ui); font-size: var(--sg-fs-meta); font-style: normal; font-weight: 550; letter-spacing: var(--sg-ls-meta); text-transform: uppercase; color: var(--sg-text-leise); }

/* ---------------------------------------------------------------------------
 * Accordion / FAQ
 * ------------------------------------------------------------------------ */
.sg-accordion { border-top: var(--border-hair); }
.sg-accordion details { border-bottom: var(--border-hair); }
.sg-accordion summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  min-height: 56px; padding: var(--sp-4) 0;
  cursor: pointer; font-weight: 650; font-size: var(--sg-fs-body-l);
  list-style: none;
}
.sg-accordion summary::-webkit-details-marker { display: none; }
.sg-accordion summary::after { content: "+"; font-size: 1.6rem; font-weight: 400; line-height: 1; color: var(--sg-blue-700); flex: 0 0 auto; }
.sg-accordion details[open] summary::after { content: "–"; }
.sg-accordion__inhalt { padding-bottom: var(--sp-5); max-width: var(--w-text); }

/* ---------------------------------------------------------------------------
 * Galerie und Lightbox (6.8)
 * ------------------------------------------------------------------------ */
.sg-galerie { columns: 3 220px; column-gap: var(--sp-4); }
.sg-galerie > * { break-inside: avoid; margin-bottom: var(--sp-4); }
.sg-galerie button { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }

.sg-bildstreifen { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sp-3); }
.sg-bildstreifen > :nth-child(3n+1) { grid-row: span 2; }

.sg-lightbox { width: min(96vw, 1400px); max-width: none; max-height: 96vh; padding: 0; border: 0; background: var(--sg-blue-950); color: var(--sg-white); }
.sg-lightbox::backdrop { background: rgb(4 27 46 / .92); }
.sg-lightbox__bild { display: grid; place-items: center; max-height: 82vh; overflow: hidden; }
.sg-lightbox__bild img { max-height: 82vh; width: auto; object-fit: contain; }
.sg-lightbox__leiste { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-4); border-top: 1px solid var(--sg-border-dark); }
.sg-lightbox__zaehler { font-variant-numeric: tabular-nums; color: var(--sg-blue-200); font-size: var(--sg-fs-meta); }
.sg-lightbox button { min-width: 48px; min-height: 48px; background: none; border: 1.5px solid var(--sg-border-dark); border-radius: var(--radius-md); color: var(--sg-white); cursor: pointer; }
.sg-lightbox button:hover { background: var(--sg-blue-800); }
@media (prefers-reduced-motion: no-preference) {
  .sg-lightbox[open] { animation: sg-oeffnen 250ms var(--ease-aus); }
  @keyframes sg-oeffnen { from { opacity: 0; transform: scale(.96); } }
}

/* ---------------------------------------------------------------------------
 * LeerZustand (7.2) — jede Liste MUSS einen haben
 * ------------------------------------------------------------------------ */
.sg-leer {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4);
  padding: var(--sp-8) var(--sp-6);
  border: 2px dashed var(--sg-border-strong);
  background: var(--sg-karte);
  max-width: 46rem;
}
.sg-footer .sg-leer { border-color: var(--sg-border-dark); background: rgb(255 255 255 / .03); }
.sg-leer__titel { font-size: var(--sg-fs-h3); font-weight: 700; }
.sg-leer__text { color: var(--sg-text-kraeftig); }

/* HinweisStreifen (vergangener Termin, Wartung) */
.sg-hinweis {
  display: flex; align-items: flex-start; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--sg-blue-50);
  border-left: 4px solid var(--sg-blue-700);
}
.sg-hinweis--warn { background: #FBEADA; border-left-color: #B44008; }
.sg-footer .sg-hinweis { background: rgb(255 255 255 / .06); border-left-color: var(--sg-blue-300); }

/* Ein Zitat aus dem Editor sieht aus wie ein Hinweisstreifen. Auf den
   Rechtsseiten tragen diese Kästen die offenen Punkte („Noch zu ergänzen") —
   die müssen beim Überfliegen auffallen, sonst geht eine unfertige
   Datenschutzerklärung live. */
.sg-text-spalte > .wp-block-quote,
.sg-editorial > .wp-block-quote {
  padding: var(--sp-4) var(--sp-5);
  background: var(--sg-blue-50);
  border-left: 4px solid var(--sg-blue-700);
  margin-block: var(--sp-6);
}
.wp-block-quote > p:first-child { margin-top: 0; }
.wp-block-quote > p:last-child { margin-bottom: 0; }

/* Redaktionshinweis für fehlende Inhalte — im Frontend nur für Angemeldete. */
.sg-redaktion {
  border: 1.5px dashed var(--sg-warning);
  background: #FFF8EF;
  color: #6B3D02;
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--sg-fs-meta);
}

/* Bearbeitungsstand (9.4) */
.sg-stand { font-size: var(--sg-fs-meta); color: var(--sg-text-leise); }

/* ---------------------------------------------------------------------------
 * Downloads
 * ------------------------------------------------------------------------ */
.sg-downloads { list-style: none; display: grid; gap: var(--sp-3); }
.sg-download {
  display: flex; align-items: center; gap: var(--sp-4);
  min-height: 56px; padding: var(--sp-3) var(--sp-4);
  border: var(--border-hair); background: var(--sg-karte);
  color: inherit; text-decoration: none;
}
.sg-download:hover { border-color: var(--sg-border-strong); background: var(--sg-blue-50); }
.sg-download__typ { font-size: var(--sg-fs-meta); font-weight: 700; color: var(--sg-blue-700); min-width: 3.2em; }
.sg-download__groesse { margin-left: auto; font-size: var(--sg-fs-meta); color: var(--sg-text-leise); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------------
 * Kontaktblock
 * ------------------------------------------------------------------------ */
.sg-kontaktdaten { font-style: normal; font-size: var(--sg-fs-body-l); display: grid; gap: var(--sp-4); }
.sg-kontaktdaten a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 650; }

/* ---------------------------------------------------------------------------
 * Formulare des Plugins einbetten (Konzept 6.9: Theme liefert Styling)
 * ------------------------------------------------------------------------ */
.sg-formular { max-width: 44rem; }
.sg-formular p { margin-bottom: var(--sp-5); }
.sg-formular input[type="submit"], .sg-formular button[type="submit"] {
  min-height: 48px; padding: var(--sp-3) var(--sp-5);
  background: var(--sg-blue-700); color: var(--sg-white);
  border: 0; border-radius: var(--radius-md);
  font-weight: 650; cursor: pointer; width: auto;
}
.sg-formular input[type="submit"]:hover, .sg-formular button[type="submit"]:hover { background: var(--sg-blue-600); }

/* ---------------------------------------------------------------------------
 * Footer (6.1 Block 8)
 * ------------------------------------------------------------------------ */
.sg-footer { background: var(--sg-flaeche); color: var(--sg-text); }
.sg-footer__raster { display: grid; gap: var(--sp-8); grid-template-columns: minmax(0, 1fr); padding-block: var(--sp-10) var(--sp-8); }
@media (min-width: 720px) { .sg-footer__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .sg-footer__raster { grid-template-columns: 1.4fr 1fr 1fr; } }
.sg-footer h2 { font-size: var(--sg-fs-meta); font-weight: 550; letter-spacing: var(--sg-ls-meta); text-transform: uppercase; color: var(--sg-blue-300); margin-bottom: var(--sp-4); }
.sg-footer ul { list-style: none; display: grid; gap: var(--sp-1); }
/* :not(.sg-btn) ist zwingend — sonst gewinnt diese Regel (0,1,1) gegen
   .sg-btn--auf-dunkel (0,1,0) und der Button steht weiß auf weiß. */
.sg-footer a:not(.sg-btn) { color: var(--sg-white); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.sg-footer a:not(.sg-btn):hover { text-decoration: underline; text-decoration-thickness: .08em; }
.sg-footer a { overflow-wrap: anywhere; }
.sg-footer__unten {
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6);
  justify-content: space-between;
  padding-block: var(--sp-5) var(--sp-7);
  border-top: 1px solid var(--sg-border-dark);
  font-size: var(--sg-fs-meta);
  color: var(--sg-blue-200);
}
.sg-footer__unten a { min-height: 0; font-size: inherit; }

/* ---------------------------------------------------------------------------
 * Ausgabe des Personen-Moduls (.contact-people) an das Designsystem angleichen.
 * Das Markup kommt aus vereins-core; das Theme liefert nur das Aussehen (8.1).
 * ------------------------------------------------------------------------ */
.contact-people { display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.contact-people.cols-1 { grid-template-columns: minmax(0, 1fr); }
.contact-people .person { display: flex; flex-direction: column; gap: var(--sp-2); }
.contact-people .person-foto img { border-radius: var(--radius-full); }
.contact-people .person-rolle {
  font-size: var(--sg-fs-meta); font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--sg-blue-700);
}
.sg-footer .contact-people .person-rolle { color: var(--sg-blue-300); }
.contact-people .person h3 { font-size: var(--sg-fs-h3); font-weight: 700; }
.contact-people .person p { font-size: var(--sg-fs-meta); color: var(--sg-text-kraeftig); margin: 0; }
.contact-people .person a { overflow-wrap: anywhere; display: inline-flex; align-items: center; min-height: 44px; }

/* Klickziele: mindestens 44px Höhe (Konzept 4.6 verlangt 48, Text-Links in
   Fließtext sind davon ausgenommen — hier geht es um eigenständige Ziele). */
.sg-marke { min-height: 48px; }
.sg-brotkrumen a, .sg-brotkrumen span { display: inline-flex; align-items: center; min-height: 44px; }
.sg-person__kontakt a { min-height: 44px; }