/* ============================================================
   SV MIESENBACH 1919 e.V. — Designsystem
   Fonts: Barlow Condensed (Headlines/Labels), Barlow (Fließtext)
   Präfix: .sv-
   ============================================================ */

/* ---------- 0. Fonts (self-hosted, T09: kein Request an fonts.googleapis.com) ---------- */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/barlow-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/barlow-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/barlow-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/barlow-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/barlow-condensed-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/barlow-condensed-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/barlow-condensed-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../assets/fonts/barlow-condensed-800.woff2') format('woff2');
}

/* ---------- 1. Design-Tokens ---------- */
:root {
  /* Farben */
  --sv-rot:        #a6192e;   /* Primär / Vereinsrot */
  --sv-rot-dunkel: #7d1323;   /* Hover für Textlinks */
  --sv-rot-hover:  #8c1526;   /* Hover für rote Flächen */
  --sv-rot-hell:   #e8323f;   /* Akzent auf dunklem Grund */
  --sv-schwarz:    #141414;   /* Sekundär / dunkle Flächen */
  --sv-weiss:      #fff;
  --sv-grau-bg:    #f6f5f3;   /* Helle Kartenfläche */
  --sv-grau-bg2:   #e9e6e1;   /* Bild-Platzhalterfläche */
  --sv-text:       #141414;
  --sv-text-2:     #444;
  --sv-text-3:     #666;
  --sv-text-4:     #888;
  --sv-text-hell:  #bbb;      /* Fließtext auf dunkel */
  --sv-text-dunkelgrau: #aaa; /* Sekundärtext auf dunkel */
  --sv-linie-dunkel: #2c2c2c; /* Trennlinien auf dunkel */
  --sv-linie-hell:   #eee;    /* Trennlinien auf hell */

  /* Layout */
  --sv-header-h: 78px; /* .sv-header-Höhe; Sidenav-Offsets hängen daran */

  /* Typografie */
  --sv-font:      'Barlow', sans-serif;
  --sv-font-cond: 'Barlow Condensed', sans-serif;

  /* Formen */
  --sv-schraege: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}

/* ---------- 2. Basis ---------- */
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
/* Admin-Seiten landen nach jedem Speichern per 303-Redirect auf einem #block-…-Anker
   (siehe admin/inhalte.php) — mit smooth scroll wäre das bei jedem Save eine sichtbare
   Scroll-Animation. Nur im Adminbereich abschalten, öffentliche Seiten behalten sie. */
html.sv-admin { scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--sv-weiss);
  font-family: var(--sv-font);
  color: var(--sv-text);
  overflow-x: clip;
}
a { color: var(--sv-rot); text-decoration: none;
    transition: color .18s ease, background-color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
a:hover { color: var(--sv-rot-dunkel); }
img { max-width: 100%; }
[id] { scroll-margin-top: 96px; }

/* ---------- 3. Layout ---------- */
.sv-container { max-width: 1360px; margin: 0 auto; box-sizing: border-box; }
.sv-container--schmal { max-width: 1000px; margin: 0 auto; box-sizing: border-box; width: 100%; }
.sv-section { padding: 72px 48px; }
.sv-section--grau  { background: var(--sv-grau-bg); }
.sv-section--dunkel{ background: var(--sv-schwarz); color: var(--sv-weiss); }
.sv-section--rot   { background: var(--sv-rot); color: var(--sv-weiss); }
.sv-pad { padding-left: 48px; padding-right: 48px; }
/* Zweispalter Inhalt + Seitenleiste */
.sv-2col { display: grid; grid-template-columns: 1.5fr 1fr; gap: 52px; }
.sv-2col--breit { grid-template-columns: 1.4fr 1fr; }
/* #verein-Sektion: Timeline braucht mehr Raum als der Standard-Sidebar-Split.
   Eigene Klasse statt Inline-Style, damit die @media-Regel unten (die Inline-
   Styles nicht überschreiben könnte) den Umbruch auf eine Spalte durchsetzt. */
.sv-2col--verein { grid-template-columns: 1fr 1.3fr; }
.sv-sidebar { display: flex; flex-direction: column; gap: 22px; }
.sv-stack   { display: flex; flex-direction: column; gap: 12px; }

/* ---------- 4. Typografie ---------- */
.sv-h1 {
  font: 800 84px/0.95 var(--sv-font-cond);
  text-transform: uppercase; letter-spacing: .01em; margin: 0 0 22px;
}
.sv-h1--mittel { font-size: 72px; }
.sv-h1--klein  { font-size: 60px; margin-bottom: 36px; }
.sv-h2 { font: 800 42px/1 var(--sv-font-cond); text-transform: uppercase; margin: 0; }
.sv-h2--gross { font-size: 56px; line-height: 1; margin-bottom: 18px; }
.sv-h3 { font: 800 24px/1.1 var(--sv-font-cond); text-transform: uppercase; margin: 0 0 16px; }
.sv-lead  { font: 400 18px/1.6 var(--sv-font); color: var(--sv-text-hell); margin: 0; max-width: 48ch; text-wrap: pretty; }
.sv-text  { font: 400 16px/1.7 var(--sv-font); color: var(--sv-text-2); margin: 0; text-wrap: pretty; }
.sv-text--klein { font-size: 14px; line-height: 1.7; }
.sv-hinweis { font: 400 13.5px/1.5 var(--sv-font); color: var(--sv-text-4); }
/* Abschnittstitel mit durchgezogener Linie */
.sv-heading-rule { display: flex; align-items: baseline; gap: 16px; margin-bottom: 28px; }
.sv-heading-rule::after { content: ""; flex: 1; height: 4px; background: var(--sv-schwarz); }
/* Kleines rotes Label (Eyebrow) */
.sv-badge {
  display: inline-block; background: var(--sv-rot); color: var(--sv-weiss);
  font: 700 13px/1 var(--sv-font-cond); letter-spacing: .2em; padding: 7px 12px; text-transform: uppercase;
}
.sv-eyebrow { font: 700 13px/1 var(--sv-font-cond); letter-spacing: .2em; color: var(--sv-rot-hell); text-transform: uppercase; }

/* ---------- 5. Ticker ---------- */
.sv-ticker {
  background: var(--sv-rot); color: var(--sv-weiss);
  font: 700 12px/1 var(--sv-font-cond); letter-spacing: .16em; text-transform: uppercase;
  display: flex; justify-content: center; gap: 40px; padding: 9px 36px;
}

/* ---------- 6. Header & Navigation ---------- */
.sv-header {
  background: var(--sv-schwarz); color: var(--sv-weiss);
  display: flex; align-items: center; gap: 18px;
  padding: 0 48px; height: 78px;
  position: sticky; top: 0; z-index: 20;
}
.sv-brand { display: flex; align-items: center; gap: 18px; color: var(--sv-weiss); }
.sv-brand:hover { color: var(--sv-weiss); }
.sv-brand img { width: 44px; height: 44px; }
.sv-brand-title { font: 800 21px/1 var(--sv-font-cond); letter-spacing: .04em; text-transform: uppercase; }
.sv-brand-title em { font-style: normal; color: var(--sv-rot-hell); }
.sv-nav {
  display: flex; gap: 2px; margin-left: auto; align-items: center;
  font: 700 14px/1 var(--sv-font-cond); letter-spacing: .1em; text-transform: uppercase;
}
.sv-nav-link { padding: 10px 16px; color: var(--sv-weiss); }
.sv-nav-link--aktiv { background: var(--sv-rot); flex-shrink: 0; }
.sv-nav-link--aktiv:hover { color: var(--sv-weiss); }
.sv-nav-logout { display: flex; align-items: center; }
/* Admin-Nav trägt nur 3 Items (E-Mail, Zur-Website, Abmelden) statt der 6 der
   öffentlichen Nav und verträgt daher mehr Abstand; öffentliche Seiten bleiben
   beim engen Template-Gap, sonst bricht der Header früher/schlechter um.
   white-space:nowrap ist Voraussetzung für das Ellipsis im schmalen
   Admin-Header (s. @media max-width:1000px unten) und soll den öffentlichen
   Titel nicht am Schrumpfen hindern. */
.sv-admin .sv-nav { gap: 16px; }
.sv-admin .sv-brand-title { white-space: nowrap; }
/* Unterstreichung wächst von links */
.sv-navlink {
  background-image: linear-gradient(var(--sv-rot), var(--sv-rot));
  background-repeat: no-repeat; background-size: 0% 3px; background-position: 0 100%;
  transition: background-size .25s ease, color .2s ease !important;
}
.sv-navlink:hover { background-size: 100% 3px; color: var(--sv-weiss) !important; }

/* ---------- 7. Buttons ---------- */
.sv-btn {
  display: inline-block;
  font: 700 17px/1 var(--sv-font-cond); letter-spacing: .12em; text-transform: uppercase;
  padding: 17px 32px; cursor: pointer; border: 0;
}
.sv-btn--klein { font-size: 14px; padding: 13px 24px; }
.sv-btn--mini  { font-size: 13px; padding: 11px 20px; }
/* Primär: rot mit schräger Kante + Sweep-Hover */
.sv-btn--primaer { background: var(--sv-rot); color: var(--sv-weiss); clip-path: var(--sv-schraege); }
.sv-btn--primaer:hover { color: var(--sv-weiss); }
/* Sekundär auf rotem Grund: schwarz, Sweep wird weiß */
.sv-btn--dunkel { background: var(--sv-schwarz); color: var(--sv-weiss); clip-path: var(--sv-schraege); padding: 18px 34px; }
/* Ghost: transparente Fläche, Rahmen, füllt sich weiß */
.sv-btn--ghost { background: transparent; border: 1px solid #555; color: var(--sv-weiss); }
.sv-btn--ghost-weiss { border-color: var(--sv-weiss); }
.sv-btn--ghost-soft  { border-color: rgba(255,255,255,.6); }
/* Sweep-Effekt (schräg durchlaufende Fläche) */
.sv-sweep, .sv-ghostbtn {
  position: relative; overflow: hidden; z-index: 0;
  transition: color .22s ease .06s, border-color .22s ease !important;
}
.sv-sweep::before, .sv-ghostbtn::before {
  content: ""; position: absolute; z-index: -1;
  top: -2px; bottom: -2px; left: -25%; right: -25%;
  transform: translateX(-115%) skewX(-14deg);
  transition: transform .38s cubic-bezier(.22,.61,.36,1);
}
.sv-sweep::before   { background: rgba(20,20,20,.28); }
.sv-ghostbtn::before{ background: var(--sv-weiss); }
.sv-sweep:hover::before, .sv-ghostbtn:hover::before { transform: translateX(0) skewX(-14deg); }
.sv-ghostbtn:hover { color: var(--sv-schwarz) !important; border-color: var(--sv-weiss) !important; }
/* Variante auf rotem Grund: Sweep weiß, Text wird dunkel */
.sv-sweep--weiss::before { background: var(--sv-weiss); }
.sv-sweep--weiss:hover   { color: var(--sv-schwarz) !important; }
/* Textlink mit Pfeil und Unterstrich */
.sv-arrowlink {
  font: 700 14px/1 var(--sv-font-cond); letter-spacing: .14em; text-transform: uppercase;
  color: var(--sv-rot); border-bottom: 2px solid var(--sv-rot); padding-bottom: 3px;
  transition: color .2s ease, border-color .2s ease !important;
}
.sv-arrowlink:hover { color: var(--sv-rot-dunkel) !important; border-color: var(--sv-rot-dunkel) !important; }

/* ---------- 8. Hero ---------- */
.sv-hero { background: var(--sv-schwarz); color: var(--sv-weiss); position: relative; overflow: hidden; }
.sv-hero-media {
  position: absolute; right: -80px; top: 0; bottom: 0; width: 48%;
  transform: skewX(-8deg); border-left: 6px solid var(--sv-rot); overflow: hidden;
}
.sv-hero-media img {
  position: absolute; inset: -40px -80px;
  width: calc(100% + 160px); height: calc(100% + 80px); object-fit: cover;
  transform: skewX(8deg); filter: grayscale(25%) contrast(1.05);
  /* Wipe-Kante parallel zum roten border-left: Clip-Koordinaten des Bildes
     landen unverzerrt auf dem Screen, da img-Skew (8deg) und Container-Skew
     (-8deg) sich exakt aufheben. */
  z-index: 0;
  clip-path: polygon(0% 0%, 0% 0%, -14% 100%, 0% 100%);
  transition: clip-path .8s cubic-bezier(.4, 0, .2, 1);
}
.sv-hero-media img.is-active {
  z-index: 2;
  clip-path: polygon(0% 0%, 114% 0%, 100% 100%, 0% 100%);
}
.sv-hero-media img.is-below { z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .sv-hero-media img { transition: none; }
}
.sv-hero-text { position: relative; padding: 84px 48px 92px; max-width: 54%; }
.sv-hero-text .sv-badge { margin-bottom: 22px; }
.sv-hero .sv-h1 em { font-style: normal; color: var(--sv-rot-hell); }
/* Deko: rot schraffierte, schräge Fläche (Unterseiten-Hero) */
.sv-hero-schraffur {
  position: absolute; right: -40px; top: 0; bottom: 0; width: 280px;
  background: repeating-linear-gradient(45deg, transparent, transparent 12px, rgba(166,25,46,.18) 12px, rgba(166,25,46,.18) 24px);
  transform: skewX(-8deg);
}
.sv-btnrow { display: flex; gap: 12px; }

/* ---------- 9. Statistikleiste ---------- */
.sv-stats {
  position: relative; display: flex;
  border-top: 1px solid var(--sv-linie-dunkel);
  background: rgba(20,20,20,.88); backdrop-filter: blur(2px);
}
.sv-stat { flex: 1; padding: 22px 48px; border-right: 1px solid var(--sv-linie-dunkel); display: flex; align-items: baseline; gap: 12px; }
.sv-stat b    { font: 800 34px/1 var(--sv-font-cond); color: var(--sv-rot-hell); }
.sv-stat span { font: 600 13px/1.2 var(--sv-font); color: #999; text-transform: uppercase; letter-spacing: .08em; }

/* ---------- 10. Abteilungsband (rote Kachelreihe) ---------- */
.sv-band { display: grid; grid-template-columns: repeat(4,1fr); background: var(--sv-rot); }
.sv-band-tile {
  display: block; padding: 30px 32px; color: var(--sv-weiss);
  border-right: 1px solid rgba(255,255,255,.18);
  transition: background-color .25s ease !important;
}
.sv-band-tile:hover { background: var(--sv-rot-hover); color: var(--sv-weiss); }
.sv-band-tile > div { transition: transform .25s ease; }
.sv-band-tile:hover > div { transform: translateX(6px); }
.sv-band-tile h3  { font: 800 28px/1 var(--sv-font-cond); text-transform: uppercase; letter-spacing: .03em; margin: 0; }
.sv-band-tile p   { font: 500 13.5px/1.45 var(--sv-font); color: rgba(255,255,255,.78); margin: 9px 0 0; }
.sv-band-tile .sv-band-cta { font: 700 12px/1 var(--sv-font-cond); letter-spacing: .16em; margin-top: 16px; }

/* ---------- 11. Terminzeile ---------- */
.sv-event {
  display: flex; align-items: center; gap: 22px;
  background: var(--sv-grau-bg); padding: 18px 22px;
  border-left: 5px solid var(--sv-rot);
}
.sv-event-datum { flex: none; text-align: center; min-width: 64px; }
.sv-event-datum b   { display: block; font: 800 32px/1 var(--sv-font-cond); color: var(--sv-rot); }
.sv-event-datum span{ display: block; font: 700 11px/1 var(--sv-font-cond); letter-spacing: .15em; color: #777; margin-top: 3px; }
.sv-event-info { flex: 1; }
.sv-event-titel { font: 700 19px/1.2 var(--sv-font-cond); text-transform: uppercase; letter-spacing: .02em; }
.sv-event-text  { font: 400 14px/1.5 var(--sv-font); color: var(--sv-text-3); margin-top: 3px; }
.sv-event-zeit  { font: 700 12px/1 var(--sv-font-cond); letter-spacing: .1em; text-transform: uppercase; color: var(--sv-rot); margin-top: 7px; }
.sv-event-tag {
  flex: none; background: var(--sv-schwarz); color: var(--sv-weiss);
  font: 700 11px/1 var(--sv-font-cond); letter-spacing: .12em; text-transform: uppercase; padding: 6px 10px;
}
/* Variante: Trainingszeit rechts statt Abteilungs-Tag */
.sv-event-uhrzeit { flex: none; font: 800 20px/1 var(--sv-font-cond); color: var(--sv-rot); }

/* ---------- 12. Karten ---------- */
/* Abteilungs-/Trainingskarte mit Foto */
.sv-card {
  display: block; background: var(--sv-weiss); color: var(--sv-text);
  overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.06);
  transition: box-shadow .25s ease !important;
}
.sv-card:hover { box-shadow: 0 8px 22px rgba(0,0,0,.14); color: var(--sv-text); }
.sv-card-media { height: 150px; position: relative; overflow: hidden; }
.sv-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.sv-card:hover .sv-card-media img { transform: scale(1.05); }
.sv-card-media .sv-card-label {
  position: absolute; left: 0; bottom: 0; background: var(--sv-rot); color: var(--sv-weiss);
  font: 700 11px/1 var(--sv-font-cond); letter-spacing: .14em; text-transform: uppercase; padding: 6px 12px;
}
.sv-card-body { padding: 20px 22px; }
.sv-card-cta { font: 700 12px/1 var(--sv-font-cond); letter-spacing: .16em; color: var(--sv-rot); margin-top: 14px; }
.sv-cards { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.sv-cards--2 { grid-template-columns: 1fr 1fr; gap: 16px; }
/* Zeilenliste in Karte (Gruppe | Zeit) */
.sv-zeitliste { display: flex; flex-direction: column; gap: 8px; font: 600 13.5px/1.4 var(--sv-font); }
.sv-zeitliste > div {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px;
  border-bottom: 1px solid var(--sv-linie-hell); padding-bottom: 8px;
}
.sv-zeitliste span:first-child { color: var(--sv-text-3); font-weight: 400; }
.sv-zeitliste span:last-child  { white-space: nowrap; }
/* Kurskarte (grau mit roter Oberkante) */
.sv-kurs { background: var(--sv-grau-bg); border-top: 4px solid var(--sv-rot); padding: 22px 24px; }
.sv-kurs h3 { font: 800 22px/1.1 var(--sv-font-cond); text-transform: uppercase; margin: 0; }
.sv-kurs .sv-kurs-motto { font: 700 11px/1.3 var(--sv-font-cond); letter-spacing: .14em; text-transform: uppercase; color: var(--sv-rot); margin-top: 5px; }
.sv-kurs p { font: 400 13.5px/1.6 var(--sv-font); color: #555; margin: 10px 0 0; }
/* Dunkles Panel mit roter Ecke (Gaststätte, Ansprechpartner) */
.sv-panel-dunkel { background: var(--sv-schwarz); color: var(--sv-weiss); padding: 34px; position: relative; overflow: hidden; }
.sv-panel-dunkel > * { position: relative; }
.sv-panel-dunkel::before {
  content: ""; position: absolute; right: -34px; top: -34px;
  width: 120px; height: 120px; background: var(--sv-rot); transform: rotate(45deg);
}
.sv-panel-dunkel .sv-eyebrow { display: block; margin-bottom: 12px; }
.sv-panel-titel { font: 800 34px/1.05 var(--sv-font-cond); text-transform: uppercase; margin: 0 0 14px; }
.sv-panel-dunkel p { font: 400 14.5px/1.6 var(--sv-font); color: var(--sv-text-dunkelgrau); margin: 0 0 20px; }
/* Rahmenbox (Outline) */
.sv-box { border: 2px solid var(--sv-schwarz); padding: 30px; }
.sv-box h3 { font: 800 26px/1.1 var(--sv-font-cond); text-transform: uppercase; margin: 0; }
.sv-box p  { font: 400 14px/1.55 var(--sv-font); color: var(--sv-text-3); margin: 10px 0 18px; }

/* ---------- 13. Definitionszeilen (Öffnungszeiten, Kontakt) ---------- */
.sv-defliste { display: flex; flex-direction: column; }
.sv-defliste > div {
  display: flex; justify-content: space-between; gap: 16px; padding: 8px 0;
  border-bottom: 1px solid #333; font: 400 13.5px/1.4 var(--sv-font); color: var(--sv-text-dunkelgrau);
}
.sv-defliste b { font-weight: 600; color: var(--sv-weiss); text-align: right; flex: none; }
.sv-defliste .sv-def-akzent { font: 700 12px/1.5 var(--sv-font-cond); letter-spacing: .12em; color: var(--sv-rot-hell); flex: none; }
.sv-kontaktliste { display: flex; flex-direction: column; gap: 6px; font: 400 13.5px/1.4 var(--sv-font); color: #ddd; }
.sv-kontaktliste > div { display: flex; gap: 10px; }
.sv-kontaktliste .sv-kontakt-label { flex: none; width: 110px; color: var(--sv-text-4); }

/* ---------- 14. Timeline (Vereinshistorie) ---------- */
.sv-timeline { display: flex; flex-direction: column; border-left: 2px solid var(--sv-rot); padding-left: 32px; }
.sv-timeline > div { display: flex; gap: 24px; padding: 14px 0; align-items: baseline; }
.sv-timeline b    { font: 800 22px/1 var(--sv-font-cond); color: var(--sv-rot-hell); width: 64px; flex: none; }
.sv-timeline span { font: 400 15px/1.5 var(--sv-font); color: #ccc; }

/* ---------- 15. CTA-Fläche & Beiträge ---------- */
.sv-cta { display: flex; align-items: center; gap: 60px; }
.sv-cta h2 { font: 800 54px/1 var(--sv-font-cond); text-transform: uppercase; margin: 0 0 14px; }
.sv-cta p  { font: 400 17px/1.6 var(--sv-font); color: rgba(255,255,255,.85); margin: 0; max-width: 56ch; }
.sv-beitraege { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: rgba(255,255,255,.25); }
.sv-beitrag { background: var(--sv-rot); padding: 18px 20px; }
.sv-beitrag b { display: block; font: 800 28px/1 var(--sv-font-cond); }
.sv-beitrag .sv-beitrag-kat { font: 600 13.5px/1.3 var(--sv-font); margin-top: 6px; }
.sv-beitrag .sv-beitrag-hinweis { font: 400 12px/1.4 var(--sv-font); color: rgba(255,255,255,.75); margin-top: 2px; }

/* ---------- 16. Personen & Funktionsträger ---------- */
.sv-person { background: var(--sv-grau-bg); border-left: 5px solid var(--sv-rot); padding: 0 0 24px; }
.sv-person-foto { height: 180px; background: var(--sv-grau-bg2); display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.sv-person-body { padding: 20px 22px 0; }
.sv-person-amt  { font: 700 12px/1 var(--sv-font-cond); letter-spacing: .18em; color: var(--sv-rot); text-transform: uppercase; margin-bottom: 8px; }
.sv-person-name { font: 800 25px/1.05 var(--sv-font-cond); text-transform: uppercase; }
.sv-person-kontakt { font: 400 13px/1.6 var(--sv-font); color: var(--sv-text-3); margin-top: 8px; }
.sv-person-kontakt a { color: var(--sv-text-3); word-break: break-all; }
.sv-person-kontakt a:hover { color: var(--sv-rot); }
/* Kompakte Funktionszeile (Bereich | Name | Kontakt) */
.sv-funktion {
  display: flex; align-items: center; gap: 20px;
  background: var(--sv-grau-bg); padding: 15px 20px; border-left: 5px solid var(--sv-rot);
}
.sv-funktion-bereich { flex: none; width: 150px; font: 700 13px/1.2 var(--sv-font-cond); letter-spacing: .1em; text-transform: uppercase; color: var(--sv-rot); }
.sv-funktion-name    { flex: 1; font: 700 17px/1.2 var(--sv-font-cond); text-transform: uppercase; }
.sv-funktion-kontakt { flex: none; font: 400 13px/1.4 var(--sv-font); color: var(--sv-text-3); text-align: right; }
.sv-funktion-kontakt a { color: var(--sv-text-3); word-break: break-all; }
.sv-funktion-kontakt a:hover { color: var(--sv-rot); }
/* Ansprechpartner-Eintrag im dunklen Panel */
.sv-ansprechpartner { border-left: 3px solid var(--sv-rot); padding-left: 14px; }
.sv-ansprechpartner b { display: block; font: 800 22px/1.1 var(--sv-font-cond); text-transform: uppercase; }
.sv-ansprechpartner .sv-rolle { font: 700 11px/1 var(--sv-font-cond); letter-spacing: .14em; text-transform: uppercase; color: var(--sv-rot-hell); margin-top: 4px; }
.sv-ansprechpartner .sv-kontakt { font: 400 13.5px/1.6 var(--sv-font); color: var(--sv-text-dunkelgrau); margin-top: 4px; }
.sv-ansprechpartner .sv-kontakt a { color: #ddd; word-break: break-all; }
.sv-ansprechpartner .sv-kontakt a:hover { color: var(--sv-weiss); }

/* ---------- 17. Textseiten (Impressum, Datenschutz) ---------- */
.sv-absatzbox { background: var(--sv-grau-bg); padding: 26px 28px; }
.sv-absatzbox--akzent { border-left: 5px solid var(--sv-rot); }
.sv-absatzbox h2 { font: 800 22px/1.15 var(--sv-font-cond); text-transform: uppercase; margin: 0 0 14px; }
.sv-absatzbox h3 { font: 700 15px/1.3 var(--sv-font); color: var(--sv-rot); margin: 0 0 6px; }
.sv-absatzbox p, .sv-absatzbox ul { font: 400 14px/1.7 var(--sv-font); color: var(--sv-text-2); margin: 0 0 16px; }
.sv-absatzbox p:last-child, .sv-absatzbox ul:last-child { margin-bottom: 0; }
.sv-absatzbox ul { padding-left: 22px; }
.sv-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; font: 400 14.5px/1.7 var(--sv-font); color: var(--sv-text-2); }
.sv-note {
  font: 400 13.5px/1.65 var(--sv-font); color: #7a4a45;
  background: #fdf0ef; border-left: 4px solid var(--sv-rot); padding: 12px 16px; margin: 0 0 18px;
}
.sv-zitatbox { border-left: 4px solid var(--sv-schwarz); background: var(--sv-weiss); padding: 16px 20px; font: 400 14px/1.7 var(--sv-font); color: var(--sv-text-2); }

/* ---------- 18. Footer ---------- */
.sv-footer { background: var(--sv-schwarz); color: var(--sv-text-4); padding: 52px 48px 28px; }
.sv-footer a { color: var(--sv-text-4); }
.sv-footer a:hover { color: var(--sv-weiss); }
.sv-footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 44px;
  padding-bottom: 36px; border-bottom: 1px solid var(--sv-linie-dunkel);
}
.sv-footer-titel { font: 700 13px/1 var(--sv-font-cond); letter-spacing: .16em; color: var(--sv-weiss); text-transform: uppercase; margin-bottom: 14px; }
.sv-footer-links { display: flex; flex-direction: column; gap: 9px; font: 400 13.5px/1.4 var(--sv-font); }
.sv-oeffnungszeit-zeit { white-space: nowrap; }
.sv-footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.sv-footer-brand img { width: 36px; height: 36px; }
.sv-footer-brand span { font: 800 18px/1 var(--sv-font-cond); color: var(--sv-weiss); text-transform: uppercase; letter-spacing: .04em; }
.sv-footer-meta { display: flex; justify-content: space-between; padding-top: 22px; font: 400 12.5px/1 var(--sv-font); }
.sv-footer-meta nav { display: flex; gap: 18px; }
/* Schmaler Footer (Unterseiten) */
.sv-footer--schmal { display: flex; justify-content: space-between; padding: 28px 48px; font: 400 12.5px/1 var(--sv-font); }
.sv-footer--schmal nav { display: flex; gap: 18px; }

/* ---------- 19. Responsive ---------- */
@media (max-width: 1080px) {
  .sv-2col, .sv-2col--breit, .sv-2col--verein { grid-template-columns: 1fr; }
  .sv-cta { flex-direction: column; align-items: flex-start; gap: 28px; }
  .sv-cta > * { flex: none; width: 100%; box-sizing: border-box; }
  .sv-cta a { width: auto; }
  .sv-cards--abteilungen { grid-template-columns: 1fr 1fr; }
  .sv-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .sv-pad, .sv-section { padding-left: 20px; padding-right: 20px; }
  .sv-header { height: auto; flex-wrap: wrap; gap: 8px 12px; padding: 12px 20px 4px; position: sticky; transition: padding .25s ease; }
  .sv-header .sv-brand img { transition: width .25s ease, height .25s ease; }
  .sv-header .sv-brand-title { transition: font-size .25s ease; }
  .sv-header.sv-scrolled { padding-top: 6px; padding-bottom: 6px; }
  .sv-header.sv-scrolled .sv-brand img { width: 30px; height: 30px; }
  .sv-header.sv-scrolled .sv-brand-title { font-size: 17px; }
  /* Hinweispfeil, wenn Navigation horizontal scrollbar ist */
  .sv-header::after {
    content: "›"; position: absolute; right: 0; bottom: 0; width: 52px; height: 44px;
    background: linear-gradient(90deg, rgba(20,20,20,0), var(--sv-schwarz) 60%);
    pointer-events: none; display: flex; align-items: center; justify-content: flex-end;
    padding-right: 12px; box-sizing: border-box; color: var(--sv-rot-hell);
    font: 700 24px/1 var(--sv-font-cond); transition: opacity .2s;
  }
  .sv-header.sv-navend::after { opacity: 0; }
  .sv-nav { width: 100%; margin-left: 0; gap: 4px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .sv-nav::-webkit-scrollbar { display: none; }
  .sv-nav a { white-space: nowrap; flex: none; }
  .sv-ticker { justify-content: flex-start; gap: 4px 16px; }
  .sv-ticker span:nth-child(n+2) { display: none; }
  .sv-hero-text { max-width: 100%; padding-top: 48px; padding-bottom: 48px; }
  .sv-h1 { font-size: 54px; }
  .sv-hero-media {
    display: block; position: relative; right: auto; top: auto; bottom: auto;
    transform: none; width: 100%; height: 210px;
    border-left: none; border-top: 5px solid var(--sv-rot);
  }
  .sv-hero-media img { position: absolute; transform: none; width: 100%; height: 100%; inset: 0; }
  .sv-stats { flex-wrap: wrap; }
  .sv-stat { flex: 1 1 50%; padding: 14px 20px; box-sizing: border-box; }
  .sv-band { grid-template-columns: 1fr 1fr; }
  .sv-cards--abteilungen { grid-template-columns: 1fr; }
  .sv-footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .sv-beitraege { grid-template-columns: 1fr 1fr; }
  .sv-btnrow { flex-direction: column; align-items: stretch; }
  .sv-btnrow a { text-align: center; }
  .sv-event { flex-wrap: wrap; row-gap: 10px; }
  .sv-funktion, .sv-footer-meta, .sv-footer--schmal, .sv-cols { flex-wrap: wrap; row-gap: 8px; }
  .sv-cols { grid-template-columns: 1fr; }
  h2.sv-h2, .sv-h2 { font-size: clamp(28px, 7vw, 38px); }
  .sv-timeline { padding-left: 20px; }
  .sv-timeline > div { gap: 16px; }
}
@media (max-width: 700px) {
  .sv-cards { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .sv-band { grid-template-columns: 1fr; }
  .sv-h1 { font-size: 42px; }
  .sv-footer-grid, .sv-beitraege { grid-template-columns: 1fr; }
  .sv-stat { flex: 1 1 100%; }
  .sv-hero-media { height: 170px; }
  /* Datum/Text nebeneinander wird bei schmalen Screens zu eng (fixe 64px
     Datumsbreite + Border-Einzug); darum hier gestapelt statt zwei Spalten. */
  .sv-timeline > div { flex-direction: column; gap: 2px; padding: 12px 0; }
  .sv-timeline b { width: auto; }
}

/* ---------- 20. Adminbereich ---------- */
.sv-admin { background: var(--sv-grau-bg); min-height: 100vh; display: flex; flex-direction: column; }
.sv-admin input, .sv-admin select, .sv-admin textarea { font-family: var(--sv-font); color: var(--sv-text); box-sizing: border-box; }
.sv-admin input::placeholder, .sv-admin textarea::placeholder { color: #b3aca2; font-weight: 400; }
.sv-admin button { transition: box-shadow .32s ease, background-color .18s ease, border-color .18s ease, color .18s ease; }
.sv-admin button:disabled { opacity: .4; cursor: default; }
.sv-admin button:not(:disabled):hover { box-shadow: inset 28em 0 0 0 rgba(20,20,20,.14); }
.sv-admin button:not(:disabled):active { box-shadow: inset 28em 0 0 0 rgba(20,20,20,.22); transition-duration: .1s; }
.sv-tag { background: var(--sv-rot); color: #fff; font: 700 12px/1 var(--sv-font-cond); letter-spacing: .18em; padding: 6px 10px; text-transform: uppercase; }
/* Formularelemente */
.sv-feld { display: flex; flex-direction: column; gap: 5px; font: 600 12.5px/1 var(--sv-font); color: #666; }
.sv-feld--klein { font-size: 11.5px; color: #777; gap: 4px; }
.sv-input { border: 1px solid #d5d0c8; padding: 11px 13px; font-size: 14px; background: #fbfaf8; width: 100%; }
.sv-input--weiss { background: #fff; padding: 9px 11px; font-size: 13.5px; }
.sv-select { border: 1px solid #d5d0c8; padding: 9px 8px; font-size: 13.5px; background: #fff; width: 100%; }
.sv-textarea { border: 1px solid #d5d0c8; padding: 11px 13px; font-size: 14px; background: #fbfaf8; width: 100%; resize: vertical; }
.sv-input:disabled, .sv-select:disabled, .sv-textarea:disabled { border: 1px dashed #cfc9c0; background: #eceae5; color: #8f887d; cursor: not-allowed; }
/* Only .sv-input uses :read-only styling (not .sv-select/.sv-textarea): <select> has no
   readonly attribute at all, so it always matches :read-only and would be styled globally
   by mistake. Used by media-picker fields (admin_forms.php) — readonly, not disabled, so
   the value still submits with the form. */
.sv-input:read-only { border: 1px dashed #cfc9c0; background: #eceae5; color: #8f887d; cursor: not-allowed; }
.sv-inputwrap { display: flex; align-items: center; gap: 5px; border: 1px solid #d5d0c8; background: #fff; padding: 0 11px; }
.sv-inputwrap input { border: none; background: none; padding: 9px 0; font-size: 13.5px; width: 100%; min-width: 0; outline: none; }
.sv-inputwrap input[type="number"] { text-align: right; }
.sv-inputwrap span { font: 600 14.5px/1 var(--sv-font); color: #999; flex: none; }
/* Admin-Buttons */
.sv-abtn { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; cursor: pointer; border: none; background: none; font: 700 11px/1 var(--sv-font-cond); letter-spacing: .1em; text-transform: uppercase; padding: 10px 12px; height: 37px; text-decoration: none; }
.sv-abtn--rot { background: var(--sv-rot); color: #fff; }
.sv-abtn--rot:not(:disabled):hover { background: #c11e35; }
.sv-abtn--schwarz { background: var(--sv-schwarz); color: #fff; }
.sv-abtn--schwarz:not(:disabled):hover { background: #000; }
.sv-abtn--outline { border: 1px solid #d5d0c8; color: #666; }
.sv-abtn--outline:not(:disabled):hover { border-color: var(--sv-schwarz); color: var(--sv-schwarz); }
.sv-abtn--outline-rot { border: 1px solid #d5d0c8; color: var(--sv-rot); }
.sv-abtn--outline-rot:not(:disabled):hover { border-color: var(--sv-rot); background: #fdf0ef; }
.sv-abtn--gross { font-size: 13px; letter-spacing: .12em; padding: 12px 22px; height: auto; }
.sv-abtn--mittel { font-size: 12.5px; letter-spacing: .12em; padding: 12px 18px; height: auto; }
/* Meldungen */
.sv-alert { padding: 10px 14px; font: 600 13px/1.4 var(--sv-font); }
.sv-alert--fehler { background: #fdf0ef; border-left: 4px solid var(--sv-rot); color: #7a1323; }
.sv-alert--ok { background: #eef6ee; border-left: 4px solid #2c7a2c; color: #1e5a1e; }
/* Login */
.sv-login-card { background: #fff; border-top: 5px solid var(--sv-rot); box-shadow: 0 2px 12px rgba(0,0,0,.08); padding: 40px; width: 400px; max-width: 100%; box-sizing: border-box; }
.sv-login-card h1 { font: 800 38px/1 var(--sv-font-cond); text-transform: uppercase; margin: 0 0 22px; }
/* Dashboard-Layout */
.sv-dash { flex: 1; display: grid; grid-template-columns: 250px 1fr; max-width: 1320px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.sv-side { padding: 40px 0 40px 28px; }
/* top hängt an --sv-header-h, damit die Sidenav beim Scrollen unter dem
   sticky Header (nicht darunter versteckt) einrastet. */
.sv-sidenav { position: sticky; top: calc(var(--sv-header-h) + 20px); display: flex; flex-direction: column; gap: 2px; }
.sv-sidenav-titel { font: 700 11px/1 var(--sv-font-cond); letter-spacing: .18em; color: #a89f93; text-transform: uppercase; margin: 16px 0 6px; padding-left: 14px; }
.sv-sidenav a { padding: 11px 14px; font: 700 13.5px/1 var(--sv-font-cond); letter-spacing: .08em; text-transform: uppercase; color: var(--sv-schwarz); }
.sv-sidenav a.sub { padding: 9px 14px 9px 28px; font-weight: 600; font-size: 12.5px; color: #666; }
.sv-sidenav a:not(.aktiv):hover { background: var(--sv-grau-bg2); color: var(--sv-schwarz); }
.sv-sidenav a.aktiv { background: var(--sv-rot); color: #fff; }
.sv-sidenav a.aktiv:hover { background: var(--sv-rot-hover); color: #fff; }
/* Nur auf sehr schmalen Screens sichtbar (siehe max-width:560px unten) —
   dann wandern „Zur Website"/„Abmelden" aus dem Header hierher. */
.sv-sidenav-extra { display: none; flex-direction: column; gap: 2px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--sv-linie-hell); }
.sv-sidenav-extra button {
  display: block; width: 100%; text-align: left; background: none; border: 0; cursor: pointer; font-family: inherit;
  padding: 11px 14px; font: 700 13.5px/1 var(--sv-font-cond); letter-spacing: .08em; text-transform: uppercase; color: var(--sv-schwarz);
}
.sv-sidenav-extra button:hover { background: var(--sv-grau-bg2); }
/* Off-Canvas-Navigation (mobil): eigener Toggle-Button + JS-Klasse
   (Komfort-Verhalten), nur auf Mobile sichtbar. Ohne JS bleibt der Toggle
   versteckt und die Nav immer sichtbar (kein Inhalt hängt an JS). */
.sv-nav-toggle { display: none; }
.sv-nav-toggle-current { color: var(--sv-rot); }
.sv-nav-overlay { display: none; }
/* Schmaler Burger-Ersatz für die Sektion-wechseln-Leiste, sobald „Zur
   Website"/„Abmelden" in die Sidenav gewandert sind (siehe max-width:560px). */
.sv-header-menu-toggle {
  display: none; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; flex: none;
  background: transparent; border: 1px solid var(--sv-weiss); color: var(--sv-weiss);
  font-size: 16px; line-height: 1; cursor: pointer;
}
.sv-header-menu-toggle[aria-expanded="true"] { background: rgba(255, 255, 255, .15); }
/* Login: Karte zentriert (Desktop), siehe Mobile-Override unten */
.sv-login-wrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: 60px 20px; box-sizing: border-box; }
.sv-admin-main { padding: 40px 36px 72px; min-width: 0; }
.sv-titelzeile { display: flex; align-items: baseline; gap: 16px; margin-bottom: 6px; flex-wrap: wrap; }
.sv-titelzeile h1 { font: 800 44px/1 var(--sv-font-cond); text-transform: uppercase; margin: 0; }
.sv-titelzeile .linie { flex: 1; height: 4px; background: var(--sv-schwarz); min-width: 40px; }
.sv-titelzeile .info { font: 600 12px/1 var(--sv-font); color: #2c7a2c; flex: none; }
/* Karten */
/* Named query container for the repeatable list rows below (.sv-item--*):
   their breakpoints must react to the card's actual content width, not the
   viewport — the 250px-Sidenav (.sv-dash) means content width and viewport
   width move in opposite directions right around 1000px (sidenav appears),
   which `@media` cannot express. See T04 for the incident this fixes. */
.sv-admin-card { container: sv-card / inline-size; background: #fff; border-top: 4px solid var(--sv-rot); box-shadow: 0 1px 6px rgba(0,0,0,.06); padding: 24px 26px; margin-bottom: 22px; }
.sv-admin-card--schwarz { border-top-color: var(--sv-schwarz); }
.sv-admin-card h2 { font: 800 22px/1.1 var(--sv-font-cond); text-transform: uppercase; margin: 0 0 18px; }
.sv-felder-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
/* Listeneintrag (Grid-Zeile mit Feldern + Aktionen) */
.sv-item { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) max-content; gap: 10px 16px; background: var(--sv-grau-bg); padding: 14px 16px; border-left: 4px solid var(--sv-rot); align-items: end; }
/* Sortierbare Listen (Vorstand, s. 'sortable'=>true in admin_forms.php): der
   Griff steht außerhalb des Grids (absolut positioniert in reserviertem
   Padding), damit er die für .sv-item--kontakt/--abteilungsleiter berechneten
   Spalten-Breakpoints nicht verschiebt. Nur sichtbar, wenn admin-dragsort.js
   den Container aktiviert hat — ohne JS bleiben die ▲/▼-Buttons der einzige
   (und vollständig funktionsfähige) Weg zum Umsortieren. */
.sv-item--sortable { padding-left: 38px; }
.sv-drag-handle {
  display: none; position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0;
  border: none; background: none; color: #a89f93; font-size: 15px; line-height: 1; cursor: grab;
}
.is-dragsort-ready .sv-drag-handle { display: flex; }
.sv-item.is-dragging { opacity: .4; }
/* Grid-Kinder haben per Spezifikation min-width:auto, wodurch sie sich trotz
   fest definierter Spaltenbreite nicht unter ihre Inhaltsgröße verkleinern
   (z. B. native Zeit-Inputs) und über den Container hinausragen können. */
.sv-item > * { min-width: 0; }
.sv-item-actions { display: flex; gap: 8px; }
/* Öffnungszeiten: feste Stufen 4 -> 3 -> 1 Spalten statt organischem Umbruch,
   damit nie zwei Einträge nebeneinander stehen und Felder nicht unschön
   auseinandergezogen werden. Schwellen an der Card-Breite (@container), nicht
   am Viewport — s. Kommentar bei .sv-admin-card. */
.sv-item--zeiten { grid-template-columns: minmax(130px, 200px) minmax(110px, 150px) minmax(110px, 150px) max-content; }
@container sv-card (max-width: 760px) {
  .sv-item--zeiten { grid-template-columns: minmax(130px, 1fr) minmax(110px, 150px) minmax(110px, 150px); }
  .sv-item--zeiten .sv-item-actions { grid-column: 1 / -1; }
}
@container sv-card (max-width: 620px) {
  .sv-item--zeiten { grid-template-columns: 1fr; }
  .sv-item--zeiten .sv-item-actions { grid-column: 1; }
}
/* Historie: feste Stufen 3 -> 2 -> 1 Spalten (Datum, Beschreibung, Aktionen)
   nach demselben Prinzip wie .sv-item--zeiten. */
.sv-item--historie { grid-template-columns: minmax(90px, 140px) 1fr max-content; }
@container sv-card (max-width: 760px) {
  .sv-item--historie { grid-template-columns: minmax(90px, 140px) 1fr; }
  .sv-item--historie .sv-item-actions { grid-column: 1 / -1; }
}
@container sv-card (max-width: 620px) {
  .sv-item--historie { grid-template-columns: 1fr; }
  .sv-item--historie .sv-item-actions { grid-column: 1; }
}
/* Mitgliedsbeiträge: 2 Spalten (Kategorie, Preis) -> 1 Spalte; die Zeile hat kein
   eigenes Aktionen-Feld mehr, das gesamte Beiträge-Formular teilt sich einen
   Speichern-Button (s. admin_render_beitraege_block()). */
.sv-item--beitrag { grid-template-columns: 1fr 124px; }
@container sv-card (max-width: 620px) {
  .sv-item--beitrag { grid-template-columns: 1fr; }
}
/* Vorstand: Ausschuss/Internet & Kommunikation (Name, Telefon, Mail), sortierbar
   (s. .sv-item--sortable) -> der Griff verbraucht 22px extra Padding, Aktionen
   bleiben bei 2 Buttons (Speichern/Entfernen, ~200px, keine ▲/▼-Buttons auf
   Nutzerwunsch). Schwelle: 160+110+160 Felder + ~200 Aktionen + 3x16 Gap +
   58 Row-Padding/Border ≈ 756px -> Aktionen fallen unter ~760px in eine eigene
   Zeile; bei ~520px (Feld-Minima + 2x16 Gap + 58 Row-Padding ≈ 520px) auf 1 Spalte. */
.sv-item--kontakt { grid-template-columns: minmax(160px, 1fr) minmax(110px, 150px) minmax(160px, 220px) max-content; }
@container sv-card (max-width: 760px) {
  .sv-item--kontakt { grid-template-columns: minmax(160px, 1fr) minmax(110px, 150px) minmax(160px, 220px); }
  .sv-item--kontakt .sv-item-actions { grid-column: 1 / -1; }
}
@container sv-card (max-width: 520px) {
  .sv-item--kontakt { grid-template-columns: 1fr; }
  .sv-item--kontakt .sv-item-actions { grid-column: 1; }
}
/* Vorstand: Abteilungs- & Jugendleitung (Bereich, Name, Telefon, Mail) — ein
   Feld mehr als .sv-item--kontakt und ebenfalls sortierbar: 140+160+110+160
   Felder + ~200 Aktionen + 4x16 Gap + 58 Row-Padding/Border ≈ 892px. */
.sv-item--abteilungsleiter { grid-template-columns: minmax(140px, 180px) minmax(160px, 1fr) minmax(110px, 150px) minmax(160px, 200px) max-content; }
@container sv-card (max-width: 900px) {
  .sv-item--abteilungsleiter { grid-template-columns: minmax(140px, 1fr) minmax(140px, 1fr); }
  .sv-item--abteilungsleiter .sv-item-actions { grid-column: 1 / -1; }
}
@container sv-card (max-width: 460px) {
  .sv-item--abteilungsleiter { grid-template-columns: 1fr; }
  .sv-item--abteilungsleiter .sv-item-actions { grid-column: 1; }
}
/* Abteilungsseiten: Ansprechpartner (Name, Beschreibung, Telefon, Mail) — gleiche
   Form wie .sv-item--abteilungsleiter (4 Felder, sortierbar, 2-Button-Aktionen):
   140+160+110+160 Felder + ~200 Aktionen + 4x16 Gap + 58 Row-Padding/Border ≈ 892px. */
.sv-item--ansprechpartner { grid-template-columns: minmax(140px, 200px) minmax(160px, 1fr) minmax(110px, 150px) minmax(160px, 200px) max-content; }
@container sv-card (max-width: 900px) {
  .sv-item--ansprechpartner { grid-template-columns: minmax(140px, 1fr) minmax(140px, 1fr); }
  .sv-item--ansprechpartner .sv-item-actions { grid-column: 1 / -1; }
}
@container sv-card (max-width: 460px) {
  .sv-item--ansprechpartner { grid-template-columns: 1fr; }
  .sv-item--ansprechpartner .sv-item-actions { grid-column: 1; }
}
/* Abteilungsseiten: Trainingszeiten (Titel, Untertitel, Termine), sortierbar, 3
   Felder + 2-Button-Aktionen wie .sv-item--kontakt: 160+160+140 Felder + ~200
   Aktionen + 3x16 Gap + 58 Row-Padding/Border ≈ 766px; 1 Spalte ab Feld-Minima
   + 2x16 Gap + 58 ≈ 550px. */
.sv-item--training { grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr) minmax(140px, 200px) max-content; }
@container sv-card (max-width: 770px) {
  .sv-item--training { grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr) minmax(140px, 200px); }
  .sv-item--training .sv-item-actions { grid-column: 1 / -1; }
}
@container sv-card (max-width: 550px) {
  .sv-item--training { grid-template-columns: 1fr; }
  .sv-item--training .sv-item-actions { grid-column: 1; }
}
/* Abteilungsseiten: Zusatzinformationen/Kurse (Titel, Untertitel nebeneinander;
   Beschreibung ist eine mehrzeilige Textarea und bekommt per Feld-Option
   `full` immer eine eigene volle Zeile, Aktionen ebenso — sortierbar.
   Titel/Untertitel bleiben 2 Spalten bis sie selbst nicht mehr passen:
   160+160 Felder + 16 Gap + 58 Row-Padding/Border ≈ 394px. */
.sv-item--kurs { grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr); }
.sv-item--kurs .sv-item-actions { grid-column: 1 / -1; }
@container sv-card (max-width: 400px) {
  .sv-item--kurs { grid-template-columns: 1fr; }
}
/* Benutzerverwaltung (admin/benutzer.php): Name + E-Mail (disabled) + Aktionen
   (Speichern/Entfernen). Fester Benutzer hat keine Aktionen, bekommt aber
   unsichtbare Platzhalter-Buttons in derselben Spalte, damit seine Felder bei
   jeder Breite genauso breit bleiben wie bei den anderen Zeilen. Schwellen
   nach demselben Prinzip wie .sv-item--kontakt/--kurs. */
.sv-item--benutzer { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr) max-content; gap: 10px; align-items: end; }
@container sv-card (max-width: 620px) {
  .sv-item--benutzer { grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr); }
  .sv-item--benutzer .sv-item-actions { grid-column: 1 / -1; }
}
@container sv-card (max-width: 400px) {
  .sv-item--benutzer { grid-template-columns: 1fr; }
  .sv-item--benutzer .sv-item-actions { grid-column: 1; }
}
.sv-item-titel { font: 700 12px/1 var(--sv-font-cond); letter-spacing: .18em; color: var(--sv-rot); text-transform: uppercase; margin: 14px 0 2px; }
/* Chips (Gruppenzugehörigkeit) */
.sv-chip { cursor: pointer; font: 700 12px/1 var(--sv-font-cond); letter-spacing: .08em; text-transform: uppercase; padding: 8px 12px; border: 1px solid #d5d0c8; background: #fff; color: #666; }
.sv-chip.aktiv { border-color: var(--sv-rot); background: var(--sv-rot); color: #fff; }
.sv-chip:disabled { opacity: .55; cursor: not-allowed; }
/* Chip toggle backed by a real checkbox (admin/benutzer.php Gruppen-Auswahl) — works without JS, same look as the display-only chips above. */
.sv-chip-toggle { display: inline-flex; }
.sv-chip-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sv-chip-toggle input:checked + .sv-chip { border-color: var(--sv-rot); background: var(--sv-rot); color: #fff; }
.sv-chip-toggle input:focus-visible + .sv-chip { outline: 2px solid var(--sv-rot); outline-offset: 2px; }
/* Modal */
.sv-modal-overlay { position: fixed; inset: 0; background: rgba(20,20,20,.55); z-index: 70; display: flex; align-items: center; justify-content: center; padding: 30px; }
.sv-modal { background: #fff; border-top: 5px solid var(--sv-rot); box-shadow: 0 8px 40px rgba(0,0,0,.3); width: 420px; max-width: 100%; padding: 28px; box-sizing: border-box; }
.sv-modal--breit { width: 720px; max-height: 82vh; overflow: auto; padding: 26px 28px; }
.sv-modal h2 { font: 800 26px/1.1 var(--sv-font-cond); text-transform: uppercase; margin: 0 0 10px; }
/* Medien */
.sv-dropzone { display: block; border: 1px dashed #c9c2b8; background: #fbfaf8; padding: 16px; text-align: center; cursor: pointer; font: 600 13px/1.4 var(--sv-font); color: #777; margin-bottom: 18px; }
.sv-dropzone:hover { border-color: var(--sv-rot); color: var(--sv-rot); }
.sv-medien-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.sv-thumb--pdf { display: flex; align-items: center; justify-content: center; background: var(--sv-schwarz); color: #fff; font: 800 20px/1 var(--sv-font-cond); letter-spacing: .2em; }
@media (max-width: 1000px) {
  .sv-dash { grid-template-columns: 1fr; }
  .sv-side { padding: 24px 20px 0; }
  .sv-sidenav { position: static; }
  /* Toggle-Leiste über dem Inhalt, sticky direkt unter dem Header. */
  .sv-nav-toggle.is-collapsible {
    display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer;
    border: 1px solid #d5d0c8; background: #fff; color: var(--sv-schwarz);
    font: 700 13px/1 var(--sv-font-cond); letter-spacing: .1em; text-transform: uppercase;
    padding: 13px 16px; margin: 0 0 20px; box-sizing: border-box;
    position: sticky; top: calc(var(--sv-header-h) + 8px); z-index: 90;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
  }
  /* Sidenav wird zum von links einfahrenden Panel (280px bzw. 82vw breit),
     legt sich über Header und Inhalt (z-index 120 > Overlay 110 > Header 100). */
  .sv-side.is-collapsible {
    position: fixed; top: 0; left: 0; bottom: 0; width: 280px; max-width: 82vw;
    background: #fff; z-index: 120; padding: 14px 20px 28px; overflow-y: auto;
    transform: translateX(-105%); transition: transform .28s ease;
    box-shadow: 8px 0 30px rgba(0, 0, 0, .18);
  }
  .sv-side.is-collapsible.is-open { transform: translateX(0); }
  .sv-nav-overlay.is-collapsible.is-open {
    display: block; position: fixed; inset: 0; z-index: 110;
    background: rgba(20, 20, 20, .5);
  }
  /* Header bleibt bei jeder Breite einzeilig — garantiert per Flexbox, nicht
     per Pixel-Kalibrierung: alle Elemente außer .sv-brand sind flex:none
     (feste Größe), NUR .sv-brand darf schrumpfen (min-width:0 hebt den
     Flexbox-Default auto auf) und der Markentitel zeigt „…" statt
     umzubrechen, falls es doch mal eng wird. clamp() sorgt nur noch dafür,
     dass es dabei gut aussieht — Fehlkalibrierung wäre höchstens ein zu früh
     abgeschnittener Titel, kein Umbruch/Überlauf mehr möglich.
     Überschreibt zugleich gezielt die Regeln aus dem öffentlichen
     @media(max-width:900px)-Block oben (flex-wrap, height, .sv-nav
     width/margin-left), die sonst wegen des gleichen 900px-Bereichs in den
     Admin-Header hineingreifen würden. */
  .sv-admin { --sv-header-h: clamp(52px, 34px + 3vw, 78px); }
  .sv-admin .sv-header {
    flex-wrap: nowrap; height: var(--sv-header-h);
    padding: 0 clamp(14px, 4vw, 40px); gap: clamp(8px, 1.8vw, 18px);
  }
  .sv-admin .sv-header::after { display: none; }
  .sv-admin .sv-brand { flex: 0 1 auto; min-width: 0; gap: clamp(8px, 1.8vw, 18px); }
  .sv-admin .sv-brand img { flex: none; width: clamp(28px, 15px + 2.2vw, 44px); height: auto; aspect-ratio: 1; }
  .sv-admin .sv-brand-title { overflow: hidden; text-overflow: ellipsis; font-size: clamp(15px, 9px + 1.2vw, 21px); }
  .sv-admin .sv-tag { flex: none; }
  .sv-admin .sv-nav {
    flex: none; width: auto; margin-left: auto; overflow-x: visible; flex-wrap: nowrap;
    font-size: clamp(11px, 8px + 0.5vw, 14px); gap: clamp(6px, 1.2vw, 16px);
  }
  .sv-admin .sv-nav-link { padding: 6px clamp(6px, 1.2vw, 16px); }
  .sv-admin .sv-header-email { display: none; } /* nur ein Admin-Konto, rein dekorativ */
}
@media (max-width: 560px) {
  /* Wird eng: „Zur Website"/„Abmelden" wandern aus dem Header in die
     Sidenav (dort als sv-sidenav-extra immer im Markup, aber nur hier
     sichtbar) statt im Header immer weiter zu schrumpfen. Die breite
     „Sektion wechseln"-Leiste weicht dabei einem schlichten Burger-Icon
     rechts im Header — beide Buttons steuern dieselbe Sidenav
     (.sv-menu-toggle-btn in admin-nav.js). */
  .sv-admin .sv-nav-link--website, .sv-admin .sv-nav-logout { display: none; }
  .sv-admin .sv-sidenav-extra { display: flex; }
  .sv-admin .sv-nav-toggle.is-collapsible { display: none; }
  .sv-admin .sv-header-menu-toggle.is-collapsible { display: flex; }
}