/* ==========================================================
   FARBSCHEMA – zentral anpassbar
   Vereinsfarben: Weiß + Rot #f40a12
   ========================================================== */
:root {
  --c-primary:  #f40a12;
  --c-accent:   #f40a12;
  --c-accent-d: #c50810;
  --c-bg:       #f7f5f4;
  --c-card:     #ffffff;
  --c-border:   #e7e3e1;
  --c-text:     #23201f;
  --c-muted:    #6f6a68;
  --radius:     14px;

  /* ---- Vereinsfarben, gesetzt von marke_style() in lib/branding.php ----
     Die Hauptfarbe steht hier doppelt: einmal als #rrggbb fuer alles, was
     eine ganze Flaeche einfaerbt, und einmal als „r,g,b" fuer rgba(). Ohne
     die zweite Fassung stuenden Schatten und zarte Toenungen weiter als
     feste Zahlen im Stylesheet - und ein Verein mit blauem Logo bekaeme
     blaue Knoepfe mit rotem Schein darunter. Genau das war der Fehler. */
  --c-primary-rgb:   244,10,18;
  --c-primary-hell:  #fee7e8;   /* Hauptfarbe als zarte Flaeche */
  --c-auf-primary:   #ffffff;   /* lesbare Schrift AUF der Hauptfarbe */

  /* Der Schatten ist eine stark abgedunkelte Fassung der Hauptfarbe: der
     Farbton bleibt, die Helligkeit nicht. Ein gelber Schatten waere sonst
     unsichtbar, ein hellblauer saehe aus wie ein Fehler. */
  --c-schatten-rgb:  84,3,6;

  /* Zweite Farbe fuer alles Ruhige - Knoepfe ohne Fokus, Reiter, Rahmen.
     Nicht eingestellt = die bisherigen neutralen Werte. */
  --c-secondary:          #23201f;
  --c-secondary-rgb:      35,32,31;
  --c-secondary-rand:     #e7e3e1;
  --c-secondary-flaeche:  #ffffff;
  --c-auf-secondary:      #ffffff;

  --logo-hoehe: 42px;

  --shadow:     0 1px 2px rgba(var(--c-schatten-rgb),.06), 0 4px 14px rgba(var(--c-schatten-rgb),.08);
  --shadow-lg:  0 4px 10px rgba(var(--c-schatten-rgb),.10), 0 12px 28px rgba(var(--c-schatten-rgb),.13);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--c-bg);
  color: var(--c-text);
  line-height: 1.65;
  font-size: 15.5px;
}
a { color: var(--c-accent); }
a:hover { color: var(--c-accent-d); }

/* ---------- Kopfzeile (rot, weiße Schrift, Pill-Navigation) ---------- */
.site-header {
  background: #fff !important;
  color: #1a1a1a !important;
  padding: 16px 20px;
  border-bottom: 1px solid #e8e8e8;
}
.header-inner {
  max-width: 1080px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  gap: 20px; text-align: left;
}
.header-text { flex: 0 1 auto; min-width: 0; }
.site-logo {
  flex: 0 0 auto;
  display: inline-block;
  padding: 0;
  transition: opacity .15s ease;
}
.site-logo:hover { opacity: .8; }
.site-logo img { height: var(--logo-hoehe,42px); width: auto; display: block; }

/* Clean, minimalistisch: dunkler Text auf weiß, roter Akzent nur bei
   Links. !important schützt gegen fremde CSS-Overrides (WordPress-
   Einbettung), damit die Textfarben nicht durch Theme-Styles verdreht
   werden. */
.site-header h1 {
  margin: 0 0 2px; font-size: 22px; font-weight: 700;
  color: #1a1a1a !important; letter-spacing: -.2px;
}
.site-header p { margin: 0; font-size: 13.5px; color: #6b6b6b !important; }
.site-header p a {
  color: var(--c-primary) !important;
  text-decoration: none;
  font-weight: 500;
}
.site-header p a:hover { text-decoration: underline; }

/* Konto-Toolbar oben rechts – dezent, dunkler Text auf weißem Header.
   !important schützt gegen fremde CSS-Overrides. */
.header-account {
  flex: 0 0 auto; margin-left: auto;
  display: flex; align-items: center; gap: 14px;
}
.header-account-link,
.header-account-logout {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 0; background: transparent !important; border: 0;
  font-size: 14px; font-weight: 500;
  color: #1a1a1a !important;
  text-decoration: none !important;
  transition: color .15s;
}
.header-account-link:hover { color: var(--c-primary) !important; }
.header-account-logout {
  font-size: 13px;
  color: #6b6b6b !important;
  padding-left: 14px;
  border-left: 1px solid #e0e0e0;
}
.header-account-logout:hover { color: var(--c-primary) !important; }
.header-account-icon { font-size: 16px; line-height: 1; }

.container { max-width: 1080px; margin: 20px 40px 70px; padding: 0; }
.container.wide { max-width: 1180px; }

/* ---------- Karten ---------- */
.card {
  background: var(--c-card,#fff);
  border: 1px solid var(--c-border,#ececea);
  border-radius: 14px;
  /* Innenabstand als Variable, damit .card-img ihn exakt zuruecknehmen
     kann - auch am Handy, wo er kleiner ist (Paket 80). */
  --card-py: 26px; --card-px: 28px;
  padding: var(--card-py) var(--card-px);
  margin-bottom: 20px;
  box-shadow: 0 1px 2px rgba(var(--c-schatten-rgb),0.03);
}
.card h2 { margin: 0 0 12px; font-size: 20px; letter-spacing: -.2px; }
.course-card { transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.course-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: rgba(var(--c-primary-rgb),.32); }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.card-head h2 { font-size: 21px; }
.card-head h2 a { color: inherit; text-decoration: none; }
.card-head h2 a:hover { color: var(--c-accent); }
.card-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }

.eyebrow {
  display: inline-block; font-size: 11.5px; font-weight: 800;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--c-accent); margin-bottom: 3px;
}
.price { font-size: 19px; font-weight: 800; color: var(--c-primary); white-space: nowrap; }
.meta { color: var(--c-muted); font-size: 14px; margin: 4px 0 10px; }
.empty { text-align: center; color: var(--c-muted); padding: 36px 0; }
.error {
  background: #fdecec; border: 1px solid #f2b8b5; color: #8c1d18;
  padding: 12px 16px; border-radius: 10px; margin-bottom: 16px;
}
.notice { background: #fff6f6; border-color: #f6d3d4; }
/* Hinweis „Veranstaltung abgesagt" (Detailseite) */
.notice-cancelled { border-left: 4px solid #d33a34; }
/* Abgesagte Veranstaltung in der Liste optisch zurücknehmen */
.course-cancelled { opacity: .72; }
.course-cancelled h2 a { text-decoration: line-through; }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600;
  padding: 4px 12px; border-radius: 999px;
}
.badge-free    { background: #e5f5e8; color: #1b6b2e; }
.badge-free::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #2e9e46; }
.badge-full    { background: #fdecec; color: #8c1d18; }
.badge-full::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #d33a34; }
.badge-neutral { background: #efedec; color: #5b5654; }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.tab {
  padding: 8px 18px; border: 1px solid var(--c-secondary-rand); border-radius: 999px;
  background: var(--c-secondary-flaeche); color: var(--c-secondary); text-decoration: none;
  font-size: 14px; font-weight: 600;
  transition: border-color .15s, color .15s, box-shadow .15s;
}
.tab:hover { border-color: var(--c-accent); color: var(--c-accent); box-shadow: var(--shadow); }
.tab-active { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-auf-primary); box-shadow: 0 3px 10px rgba(var(--c-primary-rgb),.30); }
.tab-active:hover { color: #fff; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; padding: 10px 20px;
  border: 1px solid var(--c-secondary-rand); border-radius: 10px;
  background: var(--c-secondary-flaeche); color: var(--c-secondary);
  font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: background .15s, transform .1s, box-shadow .15s, border-color .15s;
}
.btn:hover { background: rgba(var(--c-secondary-rgb),.06); border-color: rgba(var(--c-secondary-rgb),.38); }
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--c-primary); border-color: var(--c-primary); color: var(--c-auf-primary);
  box-shadow: 0 3px 10px rgba(var(--c-primary-rgb),.28);
}
.btn-primary:hover { background: var(--c-accent-d); border-color: var(--c-accent-d); color: var(--c-auf-primary); }
.btn-danger { color: #a1221d; border-color: #ecc2c0; }
.btn-danger:hover { background: #fdf0ef; border-color: #dfa3a0; }
.btn-sm { padding: 5px 12px; font-size: 13px; border-radius: 8px; font-weight: 500; }
.btn-big { padding: 15px 34px; font-size: 17px; border-radius: 12px; }
.btn-disabled { background: #efedec; color: #9a9492; border-color: var(--c-border); cursor: not-allowed; box-shadow: none; }

/* ---------- Einheitliche Höhe für Buttons und Formularfelder ----------
   Filter-Toolbars mischen Inputs, Selects, Suchfelder und Buttons in einer Zeile.
   Damit die Zeile sauber wirkt, geben wir allen Elementen dieselbe Basishöhe (42 px)
   und vertikal denselben Rhythmus. Wichtig: box-sizing:border-box, sonst wirken
   1 px vs. 1.5 px Border sichtbar unterschiedlich. */
.btn, .btn-primary, .btn-danger {
  box-sizing: border-box; min-height: 42px; line-height: 20px;
  padding: 10px 20px;
}
.btn-sm { min-height: 30px; line-height: 18px; padding: 5px 12px; }
.btn-big { min-height: 56px; }
.form input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]):not([type=image]):not([type=range]):not([type=color]):not([type=file]),
.form select {
  box-sizing: border-box; min-height: 42px; line-height: 20px;
}
/* Suchfelder außerhalb von .form (z. B. in Journal-Toolbar) auch normalisieren */
input[type=search], input[type=text].toolbar-input, input[type=date].toolbar-input,
select.toolbar-input {
  box-sizing: border-box; min-height: 42px;
}

/* ---------- Filter-/Aktionsleisten ----------
   Verwendbar als Wrapper um eine Reihe von Inputs, Selects und Buttons.
   flex-Layout mit end-Ausrichtung, damit Buttons ohne <label> und Inputs mit
   <label>-Text darüber am selben Baseline enden. */
/* Ein Knopf, der wie ein Link aussehen soll.
   23 Dateien benutzen diese Klasse - definiert war sie nie. Ueberall dort, wo
   im Quelltext "loeschen", "freigeben" oder "erneut einreichen" als Link
   gemeint war, stand deshalb ein grauer Browser-Knopf mitten im Text. Ein
   Formular braucht nun einmal einen <button>, wenn es etwas veraendern soll -
   aussehen muss er deswegen nicht danach. */
.link-button {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: var(--c-primary, #0b5fa5);
  cursor: pointer; text-decoration: none; vertical-align: baseline;
}
.link-button:hover, .link-button:focus-visible { text-decoration: underline; }

.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.toolbar > .btn, .toolbar > .btn-primary { align-self: flex-end; }

/* --- Filterleisten, die ein <form class="form toolbar"> sind ------------- */
/* Nur diese Variante bekommt Feldbreiten. Die vielen <div class="toolbar">
   im Projekt (teils mit eigenem Grid-Layout) bleiben unveraendert. */
.form.toolbar { gap: 10px 12px; }
.form.toolbar > label { min-width: 0; }

/* Ein Auswahlfeld wird so breit wie sein laengster Eintrag. Bei "Barkonto
   (Kasse) (Bargeld)" sind das schnell 380 px - die Zeile brach dann mitten
   zwischen den Feldern um, und die Knoepfe landeten neben dem letzten Feld
   statt am Ende. Deshalb bekommen die Felder in einer Leiste eine Obergrenze;
   das Feld selbst fuellt sein Label weiterhin zu 100 %. */
.form.toolbar > label:has(> select)             { max-width: 280px; }
.form.toolbar > label:has(> input[type=date])   { width: 172px; }
.form.toolbar > label:has(> input[type=number]) { width: 130px; }
.form.toolbar > label:has(> input[type=search]) { min-width: 200px; flex: 1 1 200px; }

/* Zusammengehoerende Felder bleiben beieinander: "Von" und "Bis" sind ein
   Zeitraum und sollen nicht auf zwei Zeilen auseinanderfallen. */
.tb-paar { display: flex; gap: 10px; align-items: flex-end; }
/* Genauer als ".form label { margin-bottom: 15px }" weiter unten - sonst
   gewinnt die spaetere Regel und das Paar wird 15 px hoeher als die Felder
   daneben. */
.toolbar .tb-paar > label, .form .tb-paar > label { margin: 0; }

/* Aktionen (Export, Drucken) rechts - und beim Umbruch als ein Block, nicht
   einzeln ueber zwei Zeilen verteilt. */
.toolbar-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-left: auto; }
@media (max-width: 760px) {
  .toolbar-actions { margin-left: 0; width: 100%; }
  .form.toolbar > label:has(> select) { max-width: 100%; flex: 1 1 220px; }
}


/* Kategorien-Tabelle: Widget-Code-Zeile dockt an die Kategorie-Zeile an */
.kat-table .kat-code td { border-top: 0; padding-top: 0; }
.kat-table .kat-code details { margin: 0; }
.kat-table .kat-code summary { padding: 2px 0; }


/* ---------- Zeit & Ort Infobox ---------- */
.infobox-title {
  display: inline-block; border-bottom: 3px solid var(--c-primary);
  padding-bottom: 6px; margin-bottom: 6px !important;
}
.inforow { display: flex; gap: 16px; padding: 9px 0; border-bottom: 1px solid #f3f0ef; }
.inforow:last-child { border-bottom: none; }
.infolabel { flex: 0 0 96px; font-weight: 700; color: var(--c-primary); }

/* ---------- Freitext ---------- */
.hero-img {
  display: block; width: 100%; max-height: 380px; object-fit: cover;
  border-radius: var(--radius); margin-bottom: 20px;
  box-shadow: var(--shadow); border: 1px solid var(--c-border);
}
.card-img {
  /* Bild randlos bis zur Kartenkante: den Innenabstand der Karte genau
     zuruecknehmen. Vorher waren hier feste 24/26 px eingetragen, die
     Karte hat aber 26/28 - und am Handy 18/16. Dort ragte das Bild dann
     ueber die Karte hinaus und die runden Ecken gingen verloren. */
  display: block;
  width: calc(100% + 2 * var(--card-px, 28px));
  margin: calc(-1 * var(--card-py, 26px)) calc(-1 * var(--card-px, 28px)) 16px;
  height: 180px; object-fit: cover;
  border-top-left-radius: inherit; border-top-right-radius: inherit;
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}

.content-text { font-size: 16.5px; }
.content-text p { margin: 0 0 14px; }
.content-text img { max-width: 100%; height: auto; border-radius: 10px; box-shadow: var(--shadow); }
.content-text ul, .content-text ol { padding-left: 24px; }

.cta-box { text-align: center; padding: 10px 0 34px; }
.cta-box .meta { margin-bottom: 12px; }

/* ---------- Tarife ---------- */
.tariff-list { margin-bottom: 20px; }
.tariff {
  display: flex; align-items: center; gap: 12px;
  border: 1.5px solid var(--c-border); border-radius: 10px;
  padding: 12px 16px; margin-bottom: 10px; cursor: pointer; font-weight: 400;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.tariff:hover { border-color: rgba(var(--c-primary-rgb),.42); box-shadow: var(--shadow); }
.tariff:has(input:checked) { border-color: var(--c-primary); background: rgba(var(--c-primary-rgb),.05); box-shadow: 0 0 0 1px var(--c-primary) inset; }
.tariff input { accent-color: var(--c-primary); width: 17px; height: 17px; }
.tariff-name { flex: 1; }
.tariff-price { font-weight: 800; color: var(--c-primary); }

/* ---------- Formulare ---------- */
.form label { display: block; margin-bottom: 15px; font-size: 14px; font-weight: 600; color: #3b3634; }
/* In Toolbar-Zeilen keinen vertikalen Abstand — das übernimmt der Toolbar-Gap */
.toolbar > label, .form.toolbar > label { margin: 0; }
/* Bewusst als Ausschlussliste: Aufgezaehlt wurden frueher die erlaubten
   Typen, und jeder neue Typ fiel durchs Raster - url, time, month und week
   standen deshalb unformatiert und einzeilig neben ihrem Beschriftungstext.
   Ausgenommen bleibt nur, was von sich aus richtig aussieht. */
.form input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]):not([type=image]):not([type=range]):not([type=color]),
.form textarea, .form select {
  display: block; width: 100%; margin-top: 5px;
  padding: 10px 13px;
  border: 1.5px solid var(--c-border); border-radius: 10px;
  font: inherit; font-weight: 400; background: #fff; color: var(--c-text);
  transition: border-color .15s, box-shadow .15s;
}
.form input:hover, .form textarea:hover, .form select:hover { border-color: #d3cecb; }
.form input:focus, .form textarea:focus, .form select:focus {
  outline: none; border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(var(--c-primary-rgb),.14);
}
.form .checkbox { font-weight: 400; }
.form .checkbox input { margin-right: 7px; width: auto; display: inline; accent-color: var(--c-primary); }
.form h2 { margin-top: 24px; }
.form button { margin-top: 6px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }

/* ---------- Tabellen ---------- */
.table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: #fff; border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px; overflow: hidden; font-size: 14px;
  box-shadow: 0 1px 2px rgba(var(--c-schatten-rgb),0.03);
}
.table th, .table td { padding: 8px 12px; text-align: left; border-bottom: 1px solid #f0eeec; vertical-align: middle; }
.table th {
  background: #f7f5f3; font-weight: 700; color: #55524f;
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px;
  padding: 10px 12px; border-bottom: 1px solid rgba(0,0,0,0.08);
}
.table tbody tr { transition: background .12s; }
.table tbody tr:hover { background: #faf9f8; }
.table tr:last-child td { border-bottom: none; }
.table .actions { white-space: normal; min-width: 150px; }
.table .actions > form { display: flex; flex-direction: column; align-items: stretch; gap: 5px; }
.table .actions .btn { margin: 0; padding: 5px 10px; font-size: 12.5px; width: 100%; text-align: center; }
.table .actions details { margin-top: 6px; }
.table .actions details .btn { width: auto; }
.table .actions > a.btn { display: block; margin-top: 6px; text-align: center; }
.row-cancelled td { color: #aba5a2; }
.row-cancelled td:not(.actions) { text-decoration: line-through; }

.rte {
  border: 1.5px solid var(--c-border); border-radius: 10px;
  background: #fff; overflow: hidden; margin-bottom: 6px;
}
.rte-toolbar {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 8px; background: #faf8f7; border-bottom: 1px solid var(--c-border);
}
.rte-toolbar button {
  border: 1px solid var(--c-border); background: #fff; border-radius: 6px;
  padding: 4px 10px; font-size: 13px; cursor: pointer; color: var(--c-text);
}
.rte-toolbar button:hover { border-color: var(--c-accent); color: var(--c-accent); }
.rte-area {
  min-height: 220px; padding: 12px 14px; outline: none; font-weight: 400; font-size: 15px;
}
.rte-area:focus { box-shadow: inset 0 0 0 2px rgba(var(--c-primary-rgb),.14); }
.rte-area h3 { margin: 10px 0 6px; }
.rte-area img { max-width: 100%; height: auto; }
/* Zwei Klassen, nicht eine: `.form textarea` weiter oben ist spezifischer als
   ein einzelnes `.rte-source` und hat das display:none ueberstimmt - der
   Quelltext stand dann UNTER dem Editor, beide gleichzeitig sichtbar. Das ist
   eine Nebenwirkung der Umstellung auf die Ausschlussliste bei den
   Formularfeldern; betroffen war jeder Editor innerhalb eines <form
   class="form">. Das Umschalten per JavaScript setzt display direkt am
   Element und gewinnt weiterhin. */
.rte .rte-source {
  display: none; width: 100%; border: 0; padding: 12px 14px; min-height: 220px;
  font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 13px; outline: none;
}

.stat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px; margin-bottom: 18px;
}
.stat-card {
  background: #fff; border: 1px solid var(--c-border); border-radius: 12px;
  padding: 16px 18px; box-shadow: var(--shadow);
}
.stat-card.stat-accent { border-color: var(--c-primary); background: #fff6f6; }
.stat-label { font-size: 13px; color: #666; margin-bottom: 6px; }
.stat-value { font-size: 26px; font-weight: 800; color: var(--c-text); letter-spacing: -.5px; }
.stat-sub { font-size: 12px; color: #999; margin-top: 3px; }
.filter-row {
  display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end;
}
.filter-row label { margin: 0; }
.filter-row select, .filter-row input { min-width: 150px; }
.filter-actions { display: flex; gap: 8px; align-items: flex-end; }

.checkbox-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 4px 16px; margin: 4px 0 6px;
  max-height: 280px; overflow-y: auto;
  padding: 10px 12px; border: 1px solid var(--c-border); border-radius: 8px; background: #fafafa;
}
.checkbox-grid .checkbox { margin: 0; font-weight: 400; }
.extra-person {
  border: 1px solid var(--c-border); border-radius: 10px;
  padding: 14px 16px; margin: 12px 0; background: #fafafa;
}
.extra-person-head {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;
}
#add-person { margin-top: 6px; }

.series-box {
  border: 1px solid var(--c-border); border-radius: 8px;
  padding: 12px 14px; margin: 4px 0 6px; background: #fafafa;
}

.codebox {
  display: block; background: #faf8f7; border: 1px solid var(--c-border);
  border-radius: 8px; padding: 9px 11px; font-size: 12px; margin-top: 5px;
  word-break: break-all; font-family: ui-monospace, "SF Mono", Consolas, monospace;
}
.thumb { width: 120px; height: 80px; object-fit: cover; border-radius: 8px; border: 1px solid var(--c-border); box-shadow: var(--shadow); }

/* ---------- Fußzeile ---------- */
.site-footer {
  text-align: center; font-size: 13.5px; padding: 26px 18px;
  background: #fff; color: var(--c-muted);
  border-top: 3px solid var(--c-primary); margin-top: 50px;
}
.site-footer a { color: var(--c-accent); font-weight: 600; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  body { font-size: 15px; }
  .site-header { padding: 12px 14px; }
  .site-header h1 { font-size: 19px; margin-bottom: 3px; }
  .site-header p { font-size: 13px; }
  .header-inner { gap: 12px; }
  .site-logo { padding: 5px 8px 3px; border-radius: 10px; }
  .site-logo img { height: 34px; }
  .card { --card-py: 18px; --card-px: 16px; padding: 18px 16px; }
  .card-head { flex-direction: column; align-items: flex-start; }
  .grid2 { grid-template-columns: 1fr; }
  .table { display: block; overflow-x: auto; }

  /* Zeit & Ort: Label links (feste Breite), Wert rechts daneben */
  .inforow { flex-direction: row; gap: 10px; padding: 8px 0; }
  .infolabel { flex: 0 0 82px; font-size: 13.5px; }

  .btn-big { display: block; width: 100%; text-align: center; }
  /* 16px verhindert den Auto-Zoom von iOS beim Antippen von Feldern */
  .form input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]),
  .form textarea, .form select { font-size: 16px; }
}


/* ===== Veranstaltungs-Ansicht mit Seitenleiste (Dienstleister-Stil) ===== */
.course-shell { max-width: 1400px; margin: 0 auto; padding: 0 16px 40px; }

.course-bar {
  background: #fff; border: 1px solid var(--c-border); border-radius: 12px;
  box-shadow: var(--shadow); margin: 18px 0 16px;
}
.course-bar-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 20px; flex-wrap: wrap;
}
.course-bar-title h2 { margin: 0 0 3px; font-size: 21px; letter-spacing: -.3px; }
.course-bar-title p { margin: 0; font-size: 13.5px; color: #666; }
.course-bar-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.course-layout { display: grid; grid-template-columns: 250px 1fr; gap: 18px; align-items: start; }

.course-side {
  background: #fff; border: 1px solid var(--c-border); border-radius: 12px;
  box-shadow: var(--shadow); overflow: hidden; position: sticky; top: 14px;
}
.course-side-item {
  display: block; padding: 12px 16px; font-size: 14.5px;
  color: var(--c-text); text-decoration: none;
  border-left: 3px solid transparent; border-bottom: 1px solid #f1f1f1;
  transition: background .12s ease, color .12s ease;
}
.course-side-item:last-child { border-bottom: 0; }
.course-side-item:hover { background: #fafafa; color: var(--c-primary); }
.course-side-item.is-active {
  background: #fff5f5; color: var(--c-primary); font-weight: 700;
  border-left-color: var(--c-primary);
}
.course-content { min-width: 0; }
.course-content .card:first-child { margin-top: 0; }

/* Tabs innerhalb eines Bereichs */
.subtabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.subtab {
  padding: 8px 16px; border-radius: 8px 8px 0 0; text-decoration: none;
  background: #ececec; color: #444; font-size: 14px; font-weight: 600;
}
.subtab.is-active { background: #fff; color: var(--c-primary); box-shadow: var(--shadow); }

@media (max-width: 860px) {
  .course-layout { grid-template-columns: 1fr; }
  .course-side { position: static; display: flex; overflow-x: auto; }
  .course-side-item {
    white-space: nowrap; border-bottom: 0; border-left: 0;
    border-bottom: 3px solid transparent;
  }
  .course-side-item.is-active { border-left: 0; border-bottom-color: var(--c-primary); }
}


/* ===== Mitglieder-Prüfung & Nur-Mitglieder-Tarife (Frontend) ===== */
.member-warning {
  margin: 10px 0 4px; padding: 11px 14px; border-radius: 8px; font-size: 14px; line-height: 1.45;
}
.member-warning.is-warn { background: #fff4e5; border: 1px solid #ffcf8f; color: #8a4b00; }
.member-warning.is-ok   { background: #eafaef; border: 1px solid #9fdcb3; color: #1c7a3d; }

.tariff-badge {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  font-size: 11px; font-weight: 700; vertical-align: middle;
  background: #eee; color: #666;
}
.tariff-locked {
  opacity: .5; filter: grayscale(1);
}
.tariff-locked .tariff-badge { background: var(--c-primary); color: #fff; }

/* ==========================================================================
   Admin-Sidebar (hell, aufgeräumt)
   ========================================================================== */
.admin-side {
  position: fixed; top: 0; left: 0; bottom: 0; width: 260px;
  background: #fff;
  color: #1d1d1f; padding: 22px 0 0; overflow-y: auto;
  display: flex; flex-direction: column; z-index: 100;
  border-right: 1px solid #eceae8;
}
body:has(.admin-side) {
  padding-left: 260px;
  background: #f7f5f3;
}

.admin-side .admin-brand {
  display: flex; align-items: center; padding: 0 22px 22px;
  margin-bottom: 6px;
}
.admin-side .admin-brand img { max-width: 100%; max-height: var(--logo-hoehe,42px); width: auto; height: auto; border-radius: 8px; }
.admin-side .admin-brand span { color: #1d1d1f; font-weight: 700; font-size: 15px; letter-spacing: -.01em; }

.side-nav { flex: 1; padding: 0 12px; }

/* Gruppen-Header: klickbar, klappt Sub-Items auf/zu */
.side-group { margin: 2px 0; }
.side-btn {
  width: 100%; background: transparent; border: 0; color: #2a2a2c;
  font-size: 14px; font-weight: 600; font-family: inherit;
  padding: 10px 12px; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  text-align: left; border-radius: 8px;
  transition: background .12s;
}
.side-btn:hover { background: #f0ede9; }
.side-group.open .side-btn { color: #1d1d1f; }
.side-caret {
  font-size: 10px; color: #8e8a87; transition: transform .18s;
}
.side-group.open .side-caret { transform: rotate(90deg); color: #1d1d1f; }

/* Aufklappen ohne feste Höhe: Ein max-height-Wert schneidet lange Gruppen ab,
   sobald ein Menüpunkt dazukommt (die Mitglieder-/Kunden-Gruppe hat 16). Mit
   grid-template-rows 0fr -> 1fr animiert der Browser auf die echte Höhe. */
.side-sub {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .2s ease;
  padding: 0 6px;
}
.side-sub-in {
  min-height: 0; overflow: hidden;
  display: flex; flex-direction: column;
}
.side-group.open .side-sub {
  grid-template-rows: 1fr;
  padding: 2px 6px 6px;
}
.side-sub a {
  display: block; padding: 7px 12px 7px 22px; margin: 1px 0;
  color: #55524f; font-size: 13.5px; font-weight: 500; text-decoration: none;
  border-radius: 6px; transition: background .12s, color .12s;
  overflow-wrap: anywhere; word-break: break-word; line-height: 1.3;
}
.side-sub a:hover { background: #f0ede9; color: #1d1d1f; }
.side-sub a.active {
  background: #1d1d1f; color: #fff; font-weight: 600;
}

.side-account {
  border-top: 1px solid #eceae8;
  padding: 14px 22px 18px; margin-top: 10px;
}
.side-user {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em;
  color: #a9a5a2; margin-bottom: 6px; font-weight: 700;
}
.side-account a {
  display: block; color: #55524f; font-size: 13.5px; font-weight: 500;
  padding: 5px 0; text-decoration: none;
}
.side-account a:hover { color: #1d1d1f; }

/* Content-Header - großzügig */
.admin-top {
  display: flex; align-items: center; gap: 14px;
  padding: 36px 40px 18px;
}
.admin-top h1 {
  margin: 0; font-size: 32px; font-weight: 700; letter-spacing: -0.02em; color: #1d1d1f;
}
.admin-burger {
  display: none; background: #fff; border: 1px solid var(--c-border);
  color: #17181a; font-size: 20px; cursor: pointer;
  padding: 6px 12px; border-radius: 8px;
}
.admin-operator-note {
  background: #17181a; color: #fff; text-align: center;
  padding: 8px 12px; font-size: 13px;
}
.admin-operator-note a { color: #ff8a8a; }

/* Mobile: Sidebar wird zu Overlay */
@media (max-width: 820px) {
  body:has(.admin-side) { padding-left: 0; }
  .admin-side {
    transform: translateX(-100%); transition: transform .2s ease;
    box-shadow: 8px 0 24px rgba(var(--c-schatten-rgb),0.25);
  }
  .admin-side.show { transform: translateX(0); }
  .admin-burger { display: block; }
  .admin-top { padding: 20px 20px 10px; }
  .admin-top h1 { font-size: 24px; }
}

/* Alte Top-Bar-Elemente niemals rendern (falls irgendwo residual) */
.admin-bar, .admin-title { display: none !important; }

/* ==========================================================================
   [alte Top-Bar CSS — bleibt für Rückwärtskompatibilität, wird nicht mehr genutzt]
   ========================================================================== */
.admin-bar {
  background: linear-gradient(180deg, var(--c-primary) 0%, var(--c-accent-d, #c50810) 100%);
  position: sticky; top: 0; z-index: 100;
  box-shadow: 0 1px 0 rgba(var(--c-schatten-rgb),0.08);
}
.admin-bar-inner {
  max-width: 1180px; margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; gap: 8px; height: 56px;
}
.admin-brand { display: flex; align-items: center; margin-right: 10px; flex: none; }
.admin-brand img { height: 34px; width: auto; border-radius: 7px; background: #fff; padding: 2px; }
.admin-brand span { color: #fff; font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }

.admin-menu { display: flex; align-items: center; gap: 2px; flex: 1; }

.nav-group { position: relative; }
.nav-btn {
  background: transparent; border: 0; color: #fff; cursor: pointer;
  font-size: 15px; font-family: inherit; padding: 8px 14px; border-radius: 8px;
  display: flex; align-items: center; gap: 5px; transition: background .15s ease;
  opacity: 0.95;
}
.nav-btn:hover { background: rgba(255,255,255,0.15); opacity: 1; }
.nav-group.open .nav-btn { background: rgba(255,255,255,0.2); opacity: 1; }
.nav-caret { font-size: 10px; opacity: 0.8; margin-top: 1px; }
.nav-badge { display:inline-block; background:#fff; color:var(--c-primary,#f40a12); font-size:11px;
  font-weight:700; border-radius:9px; padding:0 6px; margin-left:5px; vertical-align:middle; }

.nav-menu {
  position: absolute; top: calc(100% + 6px); left: 0;
  background: #fff; border-radius: 12px; padding: 6px;
  box-shadow: 0 12px 32px -8px rgba(var(--c-schatten-rgb),0.28), 0 2px 6px rgba(var(--c-schatten-rgb),0.08);
  min-width: 210px; opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  border: 1px solid rgba(0,0,0,0.05);
}
.nav-group.open .nav-menu { opacity: 1; visibility: visible; transform: none; }
.nav-menu a {
  display: block; padding: 9px 13px; border-radius: 8px;
  color: #1d1d1f; font-size: 14.5px; text-decoration: none; transition: background .12s ease;
}
.nav-menu a:hover { background: var(--c-primary); color: #fff; }
.nav-menu-right { right: 0; left: auto; }

.nav-right { margin-left: auto; flex: none; }

.admin-burger {
  display: none; background: transparent; border: 0; color: #fff;
  font-size: 22px; cursor: pointer; padding: 6px 10px; margin-left: auto;
}

/* Seitentitel-Zeile unter der Leiste */
.admin-title {
  background: var(--c-primary);
  background: linear-gradient(180deg, var(--c-accent-d, #c50810) 0%, #a10008 100%);
  padding: 22px 20px 26px;
}
.admin-title h1 {
  max-width: 1180px; margin: 0 auto; color: #fff;
  font-size: 26px; font-weight: 700; letter-spacing: -0.02em;
}

/* Mobil: Burger-Menü, Gruppen untereinander */
@media (max-width: 820px) {
  .admin-menu {
    display: none; position: absolute; top: 56px; left: 0; right: 0;
    background: #fff; flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px; box-shadow: 0 12px 24px rgba(var(--c-schatten-rgb),0.2);
  }
  .admin-menu.show { display: flex; }
  .nav-btn { color: #1d1d1f; width: 100%; justify-content: space-between; }
  .nav-btn:hover, .nav-group.open .nav-btn { background: #f2f2f4; }
  .nav-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; padding: 0 0 6px 12px; min-width: 0;
    max-height: 0; overflow: hidden; transition: max-height .2s ease;
  }
  .nav-group.open .nav-menu { max-height: 500px; }
  .nav-right { margin-left: 0; }
  .admin-burger { display: block; }
}

/* ==========================================================================
   Aufgeräumte Filterzone (Veranstaltungsübersicht)
   ========================================================================== */
.filter-zone {
  background: #fff; border: 1px solid rgba(0,0,0,0.07); border-radius: 14px;
  padding: 14px 18px; margin-bottom: 12px;
  display: flex; flex-direction: column; gap: 12px;
}
.filter-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.filter-label {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  color: #8a8a8e; min-width: 62px;
}
/* Segmented control für Ansicht (Aktuell/Archiv) */
.seg { display: inline-flex; background: #f0f0f2; border-radius: 10px; padding: 3px; gap: 2px; }
.seg-item {
  padding: 7px 16px; border-radius: 8px; font-size: 14px; text-decoration: none;
  color: #555; transition: all .15s ease; font-weight: 500;
}
.seg-item:hover { color: #1d1d1f; }
.seg-active { background: var(--c-primary); color: var(--c-auf-primary) !important; box-shadow: 0 1px 3px rgba(var(--c-schatten-rgb),0.15); }
/* Status-Pills */
.pill-row { display: flex; gap: 8px; flex-wrap: wrap; }
.fpill {
  padding: 6px 15px; border-radius: 999px; font-size: 14px; text-decoration: none;
  border: 1px solid #ddd; color: #555; transition: all .15s ease;
}
.fpill:hover { border-color: var(--c-primary); color: var(--c-primary); }
.fpill-active {
  background: var(--c-primary); border-color: var(--c-primary); color: #fff !important; font-weight: 600;
}
@media (max-width: 640px) {
  .filter-label { min-width: 0; width: 100%; margin-bottom: -4px; }
  .seg { width: 100%; }
  .seg-item { flex: 1; text-align: center; }
}

/* ==========================================================================
   Feinschliff: ruhiger, aufgeräumter, mehr Weißraum
   ========================================================================== */
/* Karten: weicher, luftiger */
.card {
  border-color: var(--c-border,#ececea);
  border-radius: 16px;
  --card-py: 26px; --card-px: 28px; padding: 26px 28px;
  margin-bottom: 22px;
  box-shadow: 0 1px 2px rgba(var(--c-schatten-rgb),0.04), 0 8px 24px -16px rgba(var(--c-schatten-rgb),0.12);
}
.card h2 { font-size: 19px; font-weight: 650; margin-bottom: 14px; }

/* „Eyebrow"-Label dezenter statt schreiend */
.eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.6px;
  color: var(--c-muted); text-transform: uppercase;
}

/* Tabellen: ruhiger Kopf, mehr Luft, dezente Trennlinien */
.table th {
  background: transparent; color: #9a9a9e;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  border-bottom: 1px solid rgba(0,0,0,0.08); padding: 10px 14px;
}
.table td { padding: 13px 14px; border-bottom: 1px solid rgba(0,0,0,0.05); }
.table tbody tr:hover { background: rgba(0,0,0,0.015); }

/* Meta-Hinweistexte: dezenter, mehr Abstand */
.meta { color: #86868b; font-size: 13.5px; line-height: 1.5; }

/* Filterzone: leichter, ohne schweren Rahmen */
.filter-zone {
  background: transparent; border: 0; padding: 0; margin-bottom: 18px;
}

/* Buttons: etwas weicher */
.btn { border-radius: 9px; }
.btn-sm { border-radius: 8px; }

/* Titelzeile etwas kompakter, ruhiger Verlauf */
.admin-title { padding: 20px 20px 24px; }
.admin-title h1 { font-size: 24px; font-weight: 680; }

/* Mehr Ruhe zwischen Abschnitten */
.container { margin-top: 26px; }
.container.wide { margin-top: 26px; }

/* ==========================================================================
   ============  APPLE-LOOK: ruhiges Design-Fundament  ======================
   Überschreibt die obigen Werte. Viel Weißraum, neutrale Grautöne,
   System-Schrift, Rot NUR als sparsamer Akzent (Buttons/Links), nie als Fläche.
   ========================================================================== */
:root {
  /* Neutrale Apple-Grautöne statt warmem Beige */
  --c-bg:       #f5f5f7;   /* Apple-Hellgrau */
  --c-card:     #ffffff;
  --c-border:   #e5e5ea;   /* sehr dezenter Rand */
  --c-text:     #1d1d1f;   /* Apple-Fast-Schwarz */
  --c-muted:    #86868b;   /* Apple-Grau für Sekundärtext */
  --radius:     18px;      /* großzügigere Rundungen */
  /* Subtilere, weichere Schatten.
     ACHTUNG: Dieser zweite :root-Block ueberschreibt den oben. Genau hier
     stand der Schatten noch als festes Schwarz - und weil er spaeter kommt,
     gewann er. Zwoelf Regeln mit box-shadow:var(--shadow) blieben deshalb
     grau, obwohl oben alles auf die Vereinsfarbe umgestellt war. Die
     Karte der Veranstaltungsuebersicht beim Ueberfahren war eine davon. */
  --shadow:     0 1px 3px rgba(var(--c-schatten-rgb),.05);
  --shadow-lg:  0 8px 30px -12px rgba(var(--c-schatten-rgb),.18);
}

body {
  line-height: 1.6;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.01em;
}

/* --- Karten: luftig, fast randlos, weicher Schatten --- */
.card {
  border: 1px solid var(--c-border,#ececea);
  border-radius: var(--radius);
  --card-py: 28px; --card-px: 30px; padding: 28px 30px;
  margin-bottom: 20px;
  box-shadow: var(--shadow);
}
.card h2 { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 16px; }

/* --- Menüleiste: hell & ruhig statt roter Farbverlauf --- */
.admin-bar {
  background: rgba(255,255,255,0.8);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0,0,0,0.08);
  box-shadow: none;
}
.admin-brand span { color: var(--c-text); font-weight: 600; }
.nav-btn { color: #1d1d1f; opacity: 0.85; }
.nav-btn:hover { background: rgba(0,0,0,0.05); opacity: 1; }
.nav-group.open .nav-btn { background: rgba(0,0,0,0.06); opacity: 1; }

/* --- Titelzeile: schlicht hell statt roter Fläche --- */
.admin-title {
  background: transparent;
  padding: 32px 20px 8px;
}
.admin-title h1 {
  color: var(--c-text);
  font-size: 32px; font-weight: 700; letter-spacing: -0.03em;
}

/* --- Buttons: Apple-Stil, Rot nur beim Primär-Button --- */
.btn {
  border-radius: 980px;              /* Apple-Pillenform */
  font-weight: 500; font-size: 14px;
  padding: 8px 18px; border: 1px solid rgba(0,0,0,0.1);
  background: #fff; color: var(--c-text);
  transition: all .18s ease;
}
.btn:hover { background: #f5f5f7; }
.btn-primary {
  background: var(--c-primary); color: #fff; border-color: transparent;
}
.btn-primary:hover { filter: brightness(0.92); background: var(--c-primary); }
.btn-sm { padding: 5px 13px; font-size: 13px; }
.btn-danger { background: #fff; color: #ff3b30; border-color: rgba(255,59,48,0.3); }
.btn-danger:hover { background: #fff5f5; }

/* --- Tabellen: sehr ruhig, viel Luft, kaum Linien --- */
.table th {
  background: transparent; color: var(--c-muted);
  font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none;
  border-bottom: 1px solid rgba(0,0,0,0.08); padding: 12px 16px;
}
.table td { padding: 15px 16px; border-bottom: 1px solid rgba(0,0,0,0.04); }
.table tbody tr:hover { background: rgba(0,0,0,0.02); }

/* --- Formularfelder: Apple-Stil, weiche Rundung, ruhiger Fokus --- */
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=datetime-local], input[type=search], select, textarea {
  border: 1px solid rgba(0,0,0,0.12); border-radius: 12px;
  padding: 11px 14px; font-size: 15px; background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--c-primary);
  box-shadow: 0 0 0 4px rgba(var(--c-primary-rgb),0.1);
}

/* --- Links: Rot als Akzent, dezent --- */
a { color: var(--c-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- Badges: ruhige, gefüllte Apple-Kapseln --- */
.badge {
  border-radius: 980px; font-size: 12px; font-weight: 500;
  padding: 3px 10px; border: 0;
}
.badge-free { background: #e3f9e5; color: #1d7a2e; }
.badge-full { background: #f0f0f2; color: #6e6e73; }

/* --- Filter-Pills im Apple-Stil --- */
.fpill {
  border: 1px solid rgba(0,0,0,0.1); border-radius: 980px;
  padding: 6px 16px; color: var(--c-text); font-weight: 450;
}
.fpill:hover { border-color: var(--c-primary); color: var(--c-primary); text-decoration: none; }
.fpill-active {
  background: var(--c-primary); border-color: var(--c-primary);
  color: #fff !important; font-weight: 500;
}

/* --- Mehr Weißraum insgesamt --- */
.container { margin-top: 8px; margin-bottom: 80px; }
.meta { color: var(--c-muted); font-size: 13.5px; line-height: 1.55; }

/* --- Kurs-Seitenleiste (course_shell) ebenfalls ruhig --- */
.course-side-item { border-radius: 10px; }
.course-side-item.is-active { background: var(--c-primary); color: #fff; }

/* --- Mobil: Menü passt sich an helle Leiste an --- */
@media (max-width: 820px) {
  .nav-btn { color: #1d1d1f; }
}

/* Logo & Menüdetails auf heller Apple-Leiste */
.admin-brand img { background: transparent; padding: 0; border-radius: 8px; }
.nav-caret { color: var(--c-muted); opacity: 0.7; }
.admin-burger { color: var(--c-text); }

/* ==========================================================================
   ============  APPLE-LOOK für ÖFFENTLICHE SEITEN  =========================
   Bringt Kursseite, Anmeldung, Widget-Umfeld auf denselben ruhigen Stil
   wie das Backend: heller Header statt roter Fläche, viel Weißraum,
   fast-schwarze Schrift, Rot nur als Akzent (Buttons/Links).
   Überschreibt bewusst die älteren öffentlichen Regeln oben.
   ========================================================================== */

/* Heller, dezenter Kopf mit Blur – wie die Admin-Bar, nicht mehr rote Fläche */
.site-header {
  background: rgba(255,255,255,0.8);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--c-border, #e5e5ea);
  color: var(--c-text, #1d1d1f);
  padding: 16px 20px;
  position: sticky; top: 0; z-index: 100;
}
.header-inner { justify-content: flex-start; gap: 16px; }
.site-header h1 {
  color: var(--c-text, #1d1d1f);
  font-size: 21px; font-weight: 680; letter-spacing: -.02em;
  text-shadow: none; margin: 0;
}
.site-header p { color: var(--c-muted, #86868b); font-size: 14px; margin: 2px 0 0; }
.site-logo {
  background: transparent; box-shadow: none; padding: 0; border-radius: 10px;
}
.site-logo img { height: var(--logo-hoehe,42px); border-radius: 8px; }

/* Container: mehr Luft, wie im Backend */
.container { max-width: 780px; margin: 32px auto; padding: 0 20px; }

/* Karten: luftig, weiche Schatten (identisch zum Backend-Feinschliff) */
.card {
  border: 1px solid var(--c-border,#ececea); border-radius: 18px;
  --card-py: 24px; --card-px: 26px; padding: 24px 26px; margin-bottom: 20px;
  box-shadow: 0 1px 2px rgba(var(--c-schatten-rgb),0.04), 0 8px 24px -16px rgba(var(--c-schatten-rgb),0.12);
  background: var(--c-card,#fff);
}

/* Infobox „Wann & Wo": ruhiger, ohne kräftige Farbflächen */
.infobox-title, .infobox-title.eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: var(--c-muted, #86868b); margin-bottom: 12px;
}
.inforow {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,0.05);
}
.inforow:last-child { border-bottom: 0; }
.infolabel { color: var(--c-muted, #86868b); font-size: 14px; }

/* Freitext luftiger */
.content-text { line-height: 1.6; color: #333; }
.content-text p { margin: 0 0 12px; }

/* Anmelde-Box: weiß & ruhig statt grauer Block */
.cta-box {
  background: #fff; border: 1px solid rgba(0,0,0,0.06); border-radius: 18px;
  padding: 22px 24px; margin-bottom: 20px; text-align: center;
  box-shadow: 0 1px 2px rgba(var(--c-schatten-rgb),0.04), 0 8px 24px -16px rgba(var(--c-schatten-rgb),0.12);
}

/* Buttons: weiche Rundung wie Backend; primär = roter Akzent */
.btn { border-radius: 10px; font-weight: 600; }
.btn-big { padding: 13px 26px; font-size: 16px; }
.btn-primary {
  background: var(--c-primary, #f40a12); color: #fff; border: 0;
  box-shadow: 0 1px 2px rgba(var(--c-primary-rgb),0.2);
}
.btn-primary:hover { filter: brightness(0.94); transform: translateY(-1px); }

/* Tarife: als ruhige, anklickbare Karten */
.tariff-list { display: flex; flex-direction: column; gap: 10px; }
.tariff {
  border: 1px solid var(--c-border, #e5e5ea); border-radius: 14px;
  padding: 14px 16px; display: flex; justify-content: space-between; align-items: center;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.tariff:hover { border-color: #d0d0d5; box-shadow: 0 4px 14px -8px rgba(var(--c-schatten-rgb),0.15); }
.tariff-name { font-weight: 600; color: var(--c-text, #1d1d1f); }
.tariff-price { font-weight: 700; color: var(--c-text, #1d1d1f); }
.tariff-badge {
  display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px;
  border-radius: 8px; background: #f0f0f2; color: #6e6e73; margin-left: 8px;
}

/* Formulare: Apple-Felder */
.form label { font-size: 13px; color: #6e6e73; }
.form input, .form select, .form textarea {
  border: 1px solid #d6d6da; border-radius: 10px; padding: 11px 13px; font-size: 15px;
}
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none; border-color: var(--c-primary, #f40a12);
  box-shadow: 0 0 0 3px rgba(var(--c-primary-rgb),0.12);
}

/* Fußzeile: dezent, luftig */
.site-footer {
  text-align: center; color: var(--c-muted, #86868b); font-size: 13px;
  padding: 28px 20px; border-top: 1px solid var(--c-border, #e5e5ea); margin-top: 40px;
}
.site-footer a { color: var(--c-muted, #86868b); }
.site-footer a:hover { color: var(--c-primary, #f40a12); }

/* Mobil: Header kompakt */
@media (max-width: 600px) {
  .site-header h1 { font-size: 18px; }
  .container { margin: 20px auto; }
  .card, .cta-box { --card-py: 18px; --card-px: 18px; padding: 18px 18px; }
}

/* ==========================================================================
   MOBILE-FEINSCHLIFF (konsolidiert, ganz am Ende → gewinnt die Kaskade)
   Behebt: zu breite Tabellen, überlaufende Buttons, gequetschte Karten,
   Aktions-/Panel-/Dialog-Layout auf schmalen Geräten.
   ========================================================================== */
@media (max-width: 820px) {
  .course-shell { padding: 0 12px 32px; }
  .course-bar-inner { padding: 12px 14px; }
  .course-bar-title h2 { font-size: 19px; }
  .course-layout { grid-template-columns: 1fr; gap: 14px; }
}

@media (max-width: 640px) {
  /* Kein horizontales Überlaufen der ganzen Seite */
  html, body { max-width: 100%; overflow-x: hidden; }

  /* Karten luftig, aber schmal */
  .card, .cta-box { --card-py: 16px; --card-px: 14px; padding: 16px 14px !important; border-radius: 14px !important; margin-bottom: 16px; }
  .card h2, .card-head h2 { font-size: 18px; }
  .admin-top h1 { font-size: 22px; }
  h3 { font-size: 16px; }

  /* Tabellen werden am Handy zu gestapelten Karten (kein Seitwärts-Scrollen) */
  .table { display: block; width: 100%; overflow: visible; }
  .table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table tbody, .table tr, .table td { display: block; width: auto; }
  .table tr {
    background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: 12px;
    padding: 6px 12px; margin-bottom: 10px; box-shadow: 0 1px 2px rgba(var(--c-schatten-rgb),0.04);
  }
  .table tbody tr:hover { background: #fff; }
  .table td {
    border: 0; border-bottom: 1px solid #f2f2f4; padding: 8px 0;
    display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: right;
  }
  .table tr td:last-child { border-bottom: 0; }
  .table td::before {
    content: attr(data-label); font-weight: 600; color: #6a6a6e; font-size: 12.5px;
    text-align: left; flex: 0 0 42%; text-transform: none;
  }
  .table td:not([data-label])::before { content: ""; flex: 0; }
  /* Aktionszelle (Paket 86): "Verwalten" volle Breite, die einzelnen Formulare
     (Bestaetigung, Rechnung, Ticket) zu zweit nebeneinander statt fuenf Zeilen. */
  /* Raster statt Flex: zwei gleich breite Spalten, jede Kachel oben ausgerichtet,
     "Verwalten" ueber die volle Breite. Vorher zentrierte die allgemeine
     td-Regel (align-items:center) die Kacheln vertikal - dadurch sass
     "Bestaetigung" tiefer als "Rechnung", und die einzelne "Ticket"-Kachel
     wanderte in die Mitte. */
  .table .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-items: start;
                    justify-items: stretch; text-align: center; }
  .table .actions::before { display: none; }
  .table .actions > .btn-primary { grid-column: 1 / -1; width: 100%; }
  .table .actions > form { width: 100%; margin-top: 0 !important; display: flex; flex-direction: column;
                           gap: 4px; align-items: stretch; }
  .table .actions > form .btn { width: 100%; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
  .table .actions > form small { font-size: 11.5px; line-height: 1.3; }
  .table .actions > a.meta, .table .actions > small { grid-column: 1 / -1; font-size: 12px; }

  /* Zellen (Paket 86): Label darf schrumpfen, Inhalt darf umbrechen - dann passt
     ein Kennzeichen ("geprueft") neben sein Label statt eine Zeile tiefer. */
  .table td { flex-wrap: wrap; overflow-wrap: normal; word-break: normal; }
  .table td::before { flex: 0 1 42%; min-width: 70px; }
  .table td .badge { max-width: 100%; }
  /* Name + Gruppen-Kennzeichen: Name in der Zeile, Kennzeichen bei Platzmangel darunter rechts */
  .table td .badge + .badge, .table td br + .badge { margin-top: 4px; }
  /* Kontakt: E-Mail und Telefon untereinander, rechtsbuendig, lange Adressen brechen */
  .table td.tn-kontakt { display: block; text-align: right; }
  .table td.tn-kontakt::before { display: block; text-align: left; margin-bottom: 2px; }
  .table td.tn-kontakt .tn-mail, .table td.tn-kontakt .tn-tel { display: block; overflow-wrap: anywhere; }
  .table td.tn-kontakt br { display: none; }
  /* Zahlung: Betrag, Zahlart und Hinweise untereinander statt in einer Zeile gequetscht */
  .table td.tn-zahlung { display: block; text-align: right; line-height: 1.35; }
  .table td.tn-zahlung::before { display: block; text-align: left; margin-bottom: 2px; }
  .table td.tn-zahlung small, .table td.tn-zahlung .badge { display: block; margin-top: 2px; }
  .table td.tn-zahlung .badge { display: inline-block; margin-top: 4px; }
  .table td.tn-zahlung br { display: none; }
  /* Haken-Zelle (Auswahl fuer Mail): kompakt, ohne Trennlinie; leere Zellen weg */
  .table td:has(> input.tn-sel) { padding: 4px 0; border-bottom: 0; }
  .table td:has(> input.tn-sel)::before { content: "Auswählen"; flex: 1; }
  .table td:empty { display: none; }

  /* Buttons: bequeme Tap-Größe, nichts läuft über */
  .btn { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
  .btn-sm { min-height: 34px; padding: 6px 12px; }
  .btn-big, .btn-block { display: block; width: 100%; text-align: center; }

  /* Aktions-Buttonreihe auf der Buchungsseite: zwei pro Reihe */
  .bd-actions { gap: 8px; }
  .bd-actions > .btn, .bd-actions > a.btn { flex: 1 1 calc(50% - 8px); min-width: calc(50% - 8px); text-align: center; }
  .bd-actions form { flex: 1 1 100%; display: flex; gap: 8px; }
  .bd-actions form .btn { flex: 1; }
  .bd-panel { max-width: 100%; padding: 14px; }

  /* Formularfelder immer volle Breite */
  .form input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]):not([type=image]):not([type=range]):not([type=color]),
  .form select, .form textarea,
  input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]):not([type=image]):not([type=range]):not([type=color]),
  select, textarea {
    width: 100%; max-width: 100%; box-sizing: border-box;
  }

  /* Kopier-Dialog (Veranstaltung) */
  .cp-overlay { padding: 12px; }
  .cp-box { padding: 18px; border-radius: 14px; }

  /* ⋯-Menü in der Veranstaltungsübersicht: nicht über den rechten Rand */
  .actions .act-wrap { flex-wrap: wrap; justify-content: flex-start; gap: 6px; }
  /* Position setzt actPlace() per JS (position:fixed) – hier nur die Breite. */
  .act-drop { min-width: 160px; max-width: calc(100vw - 16px); }

  /* Tarif-/Options-Auswahl (Storno etc.) volle Breite */
  .tariff-list .tariff { padding: 12px; }

  /* Filterzone kompakter */
  .filter-zone { padding: 12px 14px; }

  /* Burger sauber links, sichtbar (behebt das „komische“ Symbol oben rechts) */
  .admin-burger {
    display: inline-flex !important; align-items: center; justify-content: center;
    margin-left: 0 !important; margin-right: 4px;
    background: #fff !important; border: 1px solid var(--c-border) !important;
    color: #1d1d1f !important; border-radius: 10px; padding: 8px 12px; font-size: 20px;
    order: -1;
  }
  .admin-top { padding: 18px 16px 10px; gap: 12px; }
  .admin-top h1 { font-size: 22px; }

  /* Kurs-Unternavigation als Ausklappmenü */
  .course-side { position: static; display: block; overflow: visible; border-radius: 12px;
    border: 1px solid var(--c-border); }
  .course-side-toggle {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    background: #fff; border: 0; padding: 14px 16px; font-size: 15px; font-weight: 600;
    color: #1d1d1f; cursor: pointer; font-family: inherit; border-radius: 12px;
  }
  .course-side-caret { transition: transform .2s ease; color: var(--c-muted); font-size: 13px; }
  .course-side.open .course-side-caret { transform: rotate(180deg); }
  /* Eingeklappt: nur der Umschalt-Button. Aufgeklappt: alle Punkte. */
  .course-side .course-side-item { display: none; }
  .course-side.open .course-side-item { display: block; border-top: 1px solid #f1f1f1; border-radius: 0; }
  .course-side.open .course-side-item.is-active { background: var(--c-primary); color: #fff; }
}

/* Umschalt-Button nur am Handy zeigen (ab 641px ausblenden) */
@media (min-width: 641px) {
  .course-side-toggle { display: none; }
}

/* Sehr schmale Geräte: Aktions-Buttons einspaltig */
@media (max-width: 400px) {
  .bd-actions > .btn, .bd-actions > a.btn, .bd-actions form { flex: 1 1 100%; min-width: 100%; }
}

/* ==========================================================================
   MOBILE-FEINSCHLIFF II — allgemeine Verbesserungen (ganz am Ende)
   ========================================================================== */
@media (max-width: 640px) {
  /* Etwas größere, angenehmere Grundschrift & ruhigere Abstände */
  body { font-size: 15px; }
  .admin-content, .course-content { }

  /* Größere Tap-Flächen bei kleinen Buttons */
  .btn-sm { min-height: 38px; padding: 9px 14px; font-size: 14px; }
  .btn { min-height: 44px; }

  /* Filter-/Suchzeilen: alles volle Breite, nichts erzwingt Überbreite */
  .filter-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .filter-row label { width: 100%; }
  .filter-row select, .filter-row input,
  .filter-row .filter-select, .hw-search { min-width: 0 !important; width: 100%; box-sizing: border-box; }
  .pill-row { gap: 6px; }
  .fpill { padding: 8px 14px; }

  /* Kurs-Kopfleiste: Titel oben, Aktionen darunter in voller Breite */
  .course-bar-inner { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px; }
  .course-bar-actions { width: 100%; }
  .course-bar-actions .btn { flex: 1; text-align: center; }
  .course-bar-title h2 { font-size: 18px; }

  /* Karten-Kopf (Titel + Aktion) sauber stapeln */
  .card-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .card-foot { flex-direction: column; align-items: stretch; gap: 10px; }
  .card-foot .btn { width: 100%; text-align: center; }

  /* Meta-Zeilen (z. B. „Excel-Export · CSV-Export · Belegung“) umbrechen lassen */
  .meta { line-height: 1.6; }

  /* Formular-Buttons am Zeilenende volle Breite */
  .form .btn, .form button[type=submit] { width: 100%; }
  .form-actions { display: flex; flex-direction: column; gap: 8px; }

  /* Überschriften der Seite nicht zu wuchtig */
  .admin-top h1 { font-size: 21px; }
  h2 { font-size: 19px; }

  /* Hilfe-Widget: mehr Platz, sauber am Rand */
  #hw-panel { right: 12px; left: 12px; width: auto; max-width: none; bottom: 80px;
              max-height: calc(100vh - 110px); }
  #hw-launch, .hw-launch { right: 14px; bottom: 14px; }

  /* Modale/Dialoge: etwas Luft zum Rand */
  .cp-overlay { padding: 12px; }
  .cp-box { max-height: calc(100vh - 40px); overflow-y: auto; }

  /* Badges/Pills in Karten nicht überlaufen */
  .badge { white-space: nowrap; }

  /* Tabellen-Karten: aktive/hover-Zeile ruhig, letzter Wert ohne Trennlinie */
  .table td { min-height: 20px; }
  .table td[data-label=""]::before { display: none; }
}

/* Sehr kleine Geräte */
@media (max-width: 380px) {
  .card, .cta-box { --card-py: 14px; --card-px: 12px; padding: 14px 12px !important; }
  .btn-sm { font-size: 13.5px; }
  .course-bar-title h2 { font-size: 17px; }
}

/* Volle-Breite-Buttons am Handy einheitlich zentriert */
@media (max-width: 640px) {
  .bd-actions > .btn, .bd-actions > a.btn, .bd-actions form .btn,
  .card-foot .btn, .form .btn, .course-bar-actions .btn { text-align: center; justify-content: center; }
}

/* Breite Tabellen (z. B. Teilnehmerliste): am Desktop horizontal scrollbar
   halten, statt die Seite zu sprengen. Am Handy übernimmt die Karten-Ansicht,
   dort ist kein horizontaler Scroll nötig. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 10px; }
.table-scroll > .table { min-width: 760px; }
/* Breite Listen (Paket 79): dichter setzen und umbrechen lassen, damit sie
   in den Rahmen passen, statt seitlich zu ueberlaufen. E-Mail-Adressen und
   lange Namen brechen an jeder Stelle, nicht erst am Bindestrich. */
.table-scroll > .table td, .table-scroll > .table th { padding: 7px 10px; }
.table-scroll > .table { font-size: 13.5px; }
@media (min-width: 641px) { .table td { overflow-wrap: anywhere; } }
.table-scroll > .table .actions { min-width: 0; }
/* Erste Textspalte (Name) bleibt beim Seitwaertsscrollen stehen, damit man
   weiss, zu wem die Zahlen gehoeren. */
.table-scroll > .table.spalte-fest th:nth-child(2), .table-scroll > .table.spalte-fest td:nth-child(2) {
  position: sticky; left: 0; z-index: 1; background: #fff;
  box-shadow: 1px 0 0 rgba(0,0,0,0.06);
}
.table-scroll > .table.spalte-fest th:nth-child(2) { background: #f7f5f3; }
.table-scroll > .table.spalte-fest tbody tr:hover td:nth-child(2) { background: #faf9f8; }
@media (max-width: 640px) {
  /* Karten-Ansicht: kein erzwungenes min-width, kein Scrollbalken */
  .table-scroll { overflow-x: visible; }
  .table-scroll > .table { min-width: 0; }
  .table-scroll > .table.spalte-fest th:nth-child(2), .table-scroll > .table.spalte-fest td:nth-child(2) {
    position: static; box-shadow: none;
  }
}

/* Listen-Seiten bekommen mehr Platz (Paket 79/80). Erster Versuch war die
   volle Bildschirmbreite - eine leere Tabelle ueber 1500 px sah aber
   genauso falsch aus wie die enge Spalte. Und die Veranstaltung sprang je
   Reiter zwischen zwei Breiten. Jetzt: EINE Breite fuer alle Reiter einer
   Veranstaltung (1400 px), dieselbe fuer die Mitgliederliste. Der Inhalt
   neben der Seitenleiste hat damit ~1130 px statt ~950. */
.container.breit { max-width: 1400px; }
.course-shell { max-width: 1400px; }
.course-shell.breit { max-width: 1400px; }

/* ---------- Abteilungs-Leiste (Schema 114) ---------------------------------
   Sitzt unter der Titelzeile und sagt, in welcher Abteilung gerade gearbeitet
   wird. Zurueckhaltend, aber nicht zu uebersehen: Wer nicht merkt, dass er im
   Kontext „Ski" steht, sucht Mitglieder, die dort nie waren.                */
.abt-leiste {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 8px 14px;
  background: #fff8e6; border: 1px solid #f0dfae; border-radius: 9px;
  font-size: 13px; color: #6b5a25;
}
.abt-punkt {
  width: 8px; height: 8px; border-radius: 50%; background: #d9a219; flex: 0 0 8px;
}
.abt-form { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.abt-form select {
  height: 30px; padding: 2px 8px; font-size: 13px; border-radius: 7px;
  border: 1px solid #e0cf9e; background: #fff; color: inherit; width: auto;
}
@media (max-width: 700px) { .abt-leiste { margin-left: 0; margin-right: 0; } }

/* ---------------------------------------------------------------------------
   Verbuchen-Dialog in der Buchungskontrolle
   Ein <dialog> statt einer eigenen Seite: Der Umsatz bleibt in der Liste
   sichtbar, und nach dem Abbrechen steht man wieder da, wo man war.
   --------------------------------------------------------------------------- */
.vb-dialog {
  width: min(560px, calc(100vw - 32px));
  border: none; border-radius: 16px; padding: 22px;
  box-shadow: 0 24px 60px rgba(var(--c-schatten-rgb),.22);
  color: var(--c-text, #1d1d1f); background: #fff;
}
.vb-dialog::backdrop { background: rgba(0,0,0,.35); }
.vb-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; font-size: 18px; }
.vb-kopf .vb-zu {
  margin-left: auto; border: none; background: none; cursor: pointer;
  font-size: 24px; line-height: 1; color: #86868b; padding: 0 4px;
}
.vb-art {
  display: flex; gap: 18px; flex-wrap: wrap;
  padding: 10px 12px; margin-bottom: 14px;
  background: #faf8f6; border: 1px solid var(--c-border, #e5e5ea); border-radius: 10px;
}
.vb-fuss { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
@media (max-width: 560px) {
  .vb-dialog { padding: 16px; }
  .vb-fuss { flex-direction: column-reverse; }
  .vb-fuss .btn { width: 100%; }
}

/* ---------------------------------------------------------------------------
   Banksuche auf der FinTS-Seite
   --------------------------------------------------------------------------- */
.bk-liste {
  margin: -10px 0 15px; border: 1.5px solid var(--c-border, #e5e5ea); border-radius: 10px;
  overflow: hidden; background: #fff; max-height: 320px; overflow-y: auto;
}
.bk-treffer {
  display: block; width: 100%; text-align: left; cursor: pointer;
  border: none; border-bottom: 1px solid var(--c-border, #e5e5ea);
  background: #fff; padding: 9px 13px; font: inherit; color: inherit;
}
.bk-treffer:last-child { border-bottom: none; }
.bk-treffer:hover, .bk-treffer:focus { background: #faf8f6; outline: none; }
.bk-treffer strong { display: block; font-size: 14px; font-weight: 600; }
.bk-treffer span   { display: block; font-size: 12px; color: #86868b; margin-top: 1px; }
.bk-treffer.bk-weg { opacity: .6; }

/* ---------------------------------------------------------------------------
   Bank & Kasse: Kontenspalte links, Bewegungen rechts
   --------------------------------------------------------------------------- */
.bk-raum { display: grid; grid-template-columns: 280px 1fr; gap: 16px; align-items: start; }
.bk-spalte {
  background: #fff; border: 1px solid var(--c-border, #e5e5ea); border-radius: 14px;
  overflow: hidden auto; position: sticky; top: 16px; max-height: calc(100vh - 32px);
}
.bk-spalte-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 14px; border-bottom: 1px solid var(--c-border, #e5e5ea); background: #faf8f6;
}
.bk-konto {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 10px;
  padding: 11px 14px; border-bottom: 1px solid var(--c-border, #e5e5ea);
  text-decoration: none; color: inherit; border-left: 3px solid transparent;
}
.bk-konto, .bk-konto:hover, .bk-konto span { text-decoration: none; }
.bk-konto:hover { background: #faf8f6; }
.bk-konto.bk-aktiv { background: #fff8e1; border-left-color: var(--c-primary, #f40a12); }
.bk-konto-name  { font-weight: 600; font-size: 14px; }
.bk-konto-saldo { font-weight: 600; font-size: 14px; text-align: right; white-space: nowrap; }
.bk-konto-meta  { font-size: 11.5px; color: #86868b; }
.bk-konto-diff  { font-size: 11.5px; color: #b05213; text-align: right; white-space: nowrap; }
.bk-summe {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 11px 14px; background: #faf8f6; font-size: 14px;
}
.bk-haupt > .card:first-child { margin-top: 0; }
.bk-zahlen {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; margin-top: 12px;
}
.bk-zahlen > div { display: flex; flex-direction: column; gap: 2px; }
.bk-zahlen strong { font-size: 20px; }
@media (max-width: 820px) {
  .bk-raum { grid-template-columns: 1fr; }
  .bk-spalte { position: static; }
}

/* ============================================================
   Erklärungen als Info-Punkt  (assets/style.css)
   ------------------------------------------------------------
   Lange Erläuterungstexte werden nicht mehr ausgeschrieben,
   sondern hinter ein kleines „i" gelegt: Mit der Maus darüber
   zeigt es sich, ein Klick heftet es fest. Gefaltet wird per
   JavaScript (hinweis_script() in lib/functions.php) - deshalb
   steht hier nur das Aussehen.
   ============================================================ */
.hint-wrap { display:inline; }
.hint {
  display:inline-flex; align-items:center; justify-content:center;
  width:17px; height:17px; padding:0; margin:0 0 0 6px;
  border:1px solid var(--c-border,#e7e3e1); border-radius:999px;
  background:#fff; color:var(--c-muted,#6f6a68);
  font:600 11px/1 ui-sans-serif,system-ui,sans-serif; font-style:italic;
  cursor:help; vertical-align:middle; flex:0 0 auto;
  transition:border-color .12s ease, color .12s ease, background .12s ease;
}
.hint:hover, .hint:focus-visible, .hint[aria-expanded="true"] {
  border-color:var(--c-primary,#f40a12); color:var(--c-primary,#f40a12);
  background:#fff; outline:none;
}
.hint:focus-visible { box-shadow:0 0 0 3px rgba(var(--c-primary-rgb),.18); }
/* Freistehende Erklärung: braucht ein Wort dazu, sonst rät man */
.hint-block { display:block; margin:2px 0 12px; }
.hint-block .hint {
  width:auto; height:22px; margin:0; padding:0 10px 0 8px; gap:5px;
  border-radius:999px; font-style:normal; font-size:12px; letter-spacing:.01em;
}
.hint-block .hint::before {
  content:"i"; font-style:italic; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center;
  width:14px; height:14px; border-radius:999px;
  border:1px solid currentColor; font-size:9.5px; line-height:1;
}
.hint-text { display:none; }
/* Die schwebende Sprechblase - einmal im <body>, wird umgesetzt */
#hint-pop {
  position:fixed; z-index:10000; max-width:min(360px, calc(100vw - 24px));
  padding:12px 14px; border:1px solid var(--c-border,#e7e3e1); border-radius:12px;
  background:#fff; color:var(--c-text,#23201f);
  font-size:13.5px; line-height:1.55;
  box-shadow:0 10px 30px rgba(var(--c-schatten-rgb),.13); opacity:0; visibility:hidden;
  transform:translateY(-3px); transition:opacity .12s ease, transform .12s ease;
}
#hint-pop.an { opacity:1; visibility:visible; transform:translateY(0); }
#hint-pop p { margin:0 0 8px; }
#hint-pop p:last-child { margin-bottom:0; }
#hint-pop code { background:#f4f2f1; border-radius:4px; padding:1px 4px; font-size:12.5px; }
#hint-pop strong { font-weight:650; }
#hint-pop .hint-zu {
  display:none; margin-top:10px; border:0; background:none; padding:0;
  color:var(--c-muted,#6f6a68); font-size:12.5px; cursor:pointer; text-decoration:underline;
}
#hint-pop.fest .hint-zu { display:inline; }
@media (hover:none) {           /* Touch: Tippen ist der einzige Weg */
  .hint { width:20px; height:20px; cursor:pointer; }
  .hint-block .hint { height:26px; }
}
@media print {                  /* Auf Papier gehört der Text wieder hin */
  .hint { display:none; }
  .hint-text { display:block !important; color:#555; font-size:12px; }
}

/* ============================================================
   Branding-Einstellungen: Raster und Vorschau
   ============================================================ */
.br-raster {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:18px; margin:6px 0 18px;
}
.br-raster > label { margin:0; }
.br-raster input[type=color] { height:44px; width:80px; padding:4px; display:block; }
.br-raster input[type=range] { width:100%; margin-top:8px; }
.br-an { float:right; font-size:13px; font-weight:400; color:var(--c-muted,#6f6a68); }
.br-an input { margin-right:4px; vertical-align:-1px; }

.br-probe { border:1px solid var(--c-border,#e7e3e1); border-radius:12px; overflow:hidden; margin:0 0 18px; }
.br-probe-kopf {
  padding:8px 14px; font-size:12.5px; font-weight:600; letter-spacing:.03em;
  text-transform:uppercase; color:var(--c-muted,#6f6a68); background:#faf8f7;
  border-bottom:1px solid var(--c-border,#e7e3e1);
}
.br-probe-flaeche { padding:24px; background:var(--p-bg,#f7f5f4); transition:background .15s ease; }
.br-probe-karte {
  background:var(--p-card,#fff); border:1px solid var(--p-rand,#e7e3e1);
  border-radius:14px; padding:18px 20px; max-width:420px;
  box-shadow:0 1px 2px rgba(var(--p-schatten,84,3,6),.06), 0 6px 18px rgba(var(--p-schatten,84,3,6),.11);
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.br-probe-btn {
  display:inline-block; padding:9px 18px; border-radius:9px; font-size:14px;
  font-weight:600; border:1px solid; margin-right:8px;
}
.br-probe-btn1 {
  background:var(--p-primary,#f40a12); border-color:var(--p-primary,#f40a12);
  color:var(--p-auf-primary,#fff);
  box-shadow:0 3px 10px rgba(var(--p-primary-rgb,244,10,18),.28);
}
.br-probe-btn2 {
  background:var(--p-sec-flaeche,#fff); border-color:var(--p-sec-rand,#e7e3e1);
  color:var(--p-sec,#23201f);
}

/* ---------- Breite Tabellen: eigener Scroll-Rahmen ---------- */
/* Ohne den hier schob eine Liste mit vielen Spalten die ganze Seite samt
   Menü zur Seite. Jetzt scrollt nur die Tabelle, und die Namensspalte
   bleibt beim Scrollen stehen. Angehängt wird der Rahmen von
   assets/tabellen.js - nur dann, wenn die Tabelle wirklich zu breit ist. */
.bb-tab-scroll {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  border-radius: 10px;
  scrollbar-width: thin;
}
.bb-tab-scroll.ist-aus { overflow-x: visible; }
/* Rahmen, den die Seite selbst mitbringt: Wir hängen nur die haftenden
   Spalten und den Schattenhinweis dran, sein Scrollverhalten bleibt seins. */
.bb-tab-scroll.ist-fremd { overflow-x: auto; border-radius: 0; }
/* .table bringt selbst "overflow:hidden" mit (für die runden Ecken). Das
   macht die Tabelle zu einem eigenen Scroll-Container - die haftenden Zellen
   klebten dann an der Tabelle statt am Rahmen und wanderten mit hinaus.
   Im Scroll-Rahmen übernimmt er die Ecken, die Tabelle gibt sie ab. */
.bb-tab-scroll > .table { border-radius: 0; overflow: visible; }

/* Ein zarter Schatten am rechten Rand sagt: hier geht es noch weiter. */
.bb-tab-scroll.ist-breit {
  background:
    linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left center,
    linear-gradient(to left,  #fff 30%, rgba(255,255,255,0)) right center,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.11), rgba(0,0,0,0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.11), rgba(0,0,0,0)) right center;
  background-repeat: no-repeat;
  background-size: 28px 100%, 28px 100%, 12px 100%, 12px 100%;
  background-attachment: local, local, scroll, scroll;
}

/* Die stehenbleibende(n) Spalte(n). Der eigene Hintergrund ist Pflicht -
   sonst scrollt der Rest sichtbar darunter durch. */
.bb-tab-scroll .table th.bb-haft,
.bb-tab-scroll .table td.bb-haft {
  position: sticky;
  z-index: 2;
  background: #fff;
}
.bb-tab-scroll .table th.bb-haft { background: #f7f5f3; z-index: 3; }
.bb-tab-scroll .table tbody tr:hover td.bb-haft { background: #faf9f8; }
.bb-tab-scroll .table th.bb-haft-rand,
.bb-tab-scroll .table td.bb-haft-rand { box-shadow: 1px 0 0 rgba(0,0,0,0.06); }

/* Am Handy stapelt das CSS die Tabelle zu Karten - dort wäre beides falsch. */
@media (max-width: 760px) {
  .bb-tab-scroll { overflow-x: visible; }
  .bb-tab-scroll .table th.bb-haft,
  .bb-tab-scroll .table td.bb-haft { position: static; box-shadow: none; }
}

/* ---------- Hinweis-Leiste (Paket 77) ---------- */
/* Ersetzt die weissen "Keine Berechtigung"-Seiten: Der Hinweis erscheint auf
   der Seite, auf der man ohnehin steht - kein Zwischenhalt, kein Extra-Klick. */
.bb-hinweis-leiste {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 11px 16px; font-size: 14px; line-height: 1.5;
  border-bottom: 1px solid rgba(0,0,0,.06);
  animation: bb-hinweis-ein .18s ease-out;
}
@keyframes bb-hinweis-ein { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.bb-hinweis-leiste .bb-hinweis-text { flex: 1; }
.bb-hinweis-leiste.ist-fehler { background: #fdecea; color: #8a1c1c; border-bottom-color: #f3c9c4; }
.bb-hinweis-leiste.ist-ok     { background: #e9f5ec; color: #1c6b34; border-bottom-color: #cbe5d3; }
.bb-hinweis-leiste.ist-info   { background: #fff8e1; color: #6b5314; border-bottom-color: #f0e2b6; }
.bb-hinweis-zu {
  border: 0; background: none; cursor: pointer; font-size: 20px; line-height: 1;
  color: inherit; opacity: .55; padding: 0 2px;
}
.bb-hinweis-zu:hover { opacity: 1; }
.bb-hinweis-karte { border-left: 4px solid var(--c-primary, #f40a12); }