/* ============================================================
   LVL_Programm — Oberflaechen-Styling
   Die Farben und Radien hier SPIEGELN die Konstanten aus
   static/js/design.js (DESIGN). Bei Aenderungen dort dieselben
   Werte hier nachziehen, damit Oberflaeche und erzeugte Dateien
   (PDF/JPEG) identisch wirken. design.js bleibt die Design-Quelle.
   ============================================================ */
:root {
  --navy: #1B2A6B;
  --blue: #2E4FB8;
  --yellow: #F5C400;
  --gray: #5B6472;
  --red: #C0392B;
  --text-dark: #1F2937;
  /* Kräftigere Rahmen und ein etwas dunklerer Seitenhintergrund: Kacheln,
     Felder und Buttons heben sich deutlicher ab (nur Oberfläche). */
  --card-border: #6F7789;
  --placeholder-bg: #E1E6F2;

  /* Einheitliche Textfeld-Optik: leicht durchscheinendes Milchglas statt
     deckendem Weiss, damit auch die Eingabefelder in den Vorlagen-/Editor-
     Fenstern zum Glas-Look passen. Der Untergrund schimmert dezent durch;
     beim Fokus wird das Feld nahezu weiss mit kräftigem Rahmen (gut lesbar). */
  --field-bg: rgba(255, 255, 255, 0.45);
  --field-border: rgba(27, 42, 107, 0.18);
  /* Deckendere Feld-/Zeilen-Flächen OHNE backdrop-filter. In Tabellen können
     hunderte bis tausende Eingabefelder und Zeilen erscheinen (v. a. Ewige
     Bestenliste). Ein backdrop-filter pro Element ist dort nicht bezahlbar –
     jede solche Fläche ist eine eigene GPU-Ebene, die den Hintergrund neu
     weichzeichnet. Diese soliden Töne sehen praktisch gleich aus, kosten aber
     nichts, weil sie auf dem ohnehin frostigen Panel liegen. */
  --field-bg-solid: rgba(255, 255, 255, 0.82);
  --row-bg-solid: rgba(255, 255, 255, 0.58);

  --card-radius: 18px;
  --img-radius: 24px;

  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;

  --page-bg: #E7EAF1;
  --panel-bg: #FFFFFF;
  --muted: #5B6472;

  /* ------------------------------------------------------------
     Modernes Erscheinungsbild — nur die Browser-Oberfläche.
     Diese Tokens betreffen NICHT die erzeugten Dateien: PDFs werden
     über Playwright mit eigenem HTML gerendert, Instagram-JPEGs über
     Canvas (design.js). Farbschema/Aufbau bleiben gleich; hier kommen
     nur Verläufe, Milchglas (frosted glass), Schatten und Animation
     dazu. Das Farbschema stammt weiterhin aus den Werten oben.
     ------------------------------------------------------------ */
  --grad-primary: linear-gradient(135deg, #2E4FB8 0%, #1B2A6B 100%);
  --grad-primary-hover: linear-gradient(135deg, #3A5FCE 0%, #23347F 100%);
  --grad-accent: linear-gradient(135deg, #2E4FB8 0%, #1B2A6B 55%, #F5C400 200%);

  /* Milchglas-Flächen (Glassmorphism / „Liquid Glass“): stark
     halbtransparentes Weiss + kräftiger Weichzeichner. Bewusst deutlich
     durchsichtiger als zuvor, damit der Aurora-Verlauf und das
     Sport-Hintergrundbild klar hindurchschimmern und die Flächen wie echtes
     Milchglas wirken, durch das man leicht durchsieht. Drei Stufen — Kacheln
     (strong) heben sich stärker ab als grosse Panels; solid nur für
     Dialoge/Menüs, die gut lesbar bleiben müssen. */
  --glass-bg: rgba(255, 255, 255, 0.30);
  --glass-bg-strong: rgba(255, 255, 255, 0.42);
  --glass-bg-solid: rgba(255, 255, 255, 0.74);
  --glass-border: rgba(255, 255, 255, 0.75);
  --glass-blur: 30px;

  /* Diagonaler Glanz („sheen“): ein zartes Licht, das von oben links über die
     Glasfläche läuft — lässt die Kacheln gewölbt/poliert wirken. Wird als
     erste Hintergrund-Ebene VOR die Milchglas-Farbe gelegt, sodass Verlauf +
     Glas zwei sichtbare Glas-Schichten ergeben. */
  --glass-sheen: linear-gradient(150deg,
                   rgba(255, 255, 255, 0.55) 0%,
                   rgba(255, 255, 255, 0.14) 34%,
                   rgba(255, 255, 255, 0) 60%);
  --glass-sheen-soft: linear-gradient(150deg,
                   rgba(255, 255, 255, 0.38) 0%,
                   rgba(255, 255, 255, 0.08) 42%,
                   rgba(255, 255, 255, 0) 68%);

  /* „Liquid Glass“-Kante à la Apple: mehrere übereinanderliegende Licht- und
     Schattenkanten erzeugen den Eindruck von mehreren Glas-Schichten mit Tiefe.
     Von innen nach aussen:
       1. heller Lichtkant ganz oben (Politur),
       2. dünne innere Glaswand ringsum,
       3. weiches Licht, das sich unten sammelt (Brechung),
       4. feine Schattenlinie unten (3D-Absatz),
       5. feine Navy-Haarlinie aussen (hält den Rand auch über hellem Grund). */
  --glass-highlight: inset 0 1px 1px rgba(255, 255, 255, 0.92),
                     inset 0 0 0 1px rgba(255, 255, 255, 0.28),
                     inset 0 -12px 24px rgba(255, 255, 255, 0.16),
                     inset 0 -1px 3px rgba(27, 42, 107, 0.12),
                     0 0 0 1px rgba(27, 42, 107, 0.07);

  /* Weiche, gestaffelte Schatten in Navy-Ton für Tiefe ohne Härte. */
  --shadow-sm: 0 1px 2px rgba(27, 42, 107, 0.05), 0 3px 10px rgba(27, 42, 107, 0.05);
  --shadow-md: 0 6px 22px rgba(27, 42, 107, 0.10), 0 2px 6px rgba(27, 42, 107, 0.06);
  --shadow-lg: 0 22px 55px rgba(27, 42, 107, 0.20), 0 6px 16px rgba(27, 42, 107, 0.10);
  --ring: 0 0 0 3px rgba(46, 79, 184, 0.20);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font);
  color: var(--text-dark);
  position: relative;
  background-color: var(--page-bg);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Ruhiger, neutraler Seitengrund — KEINE farbigen Verlaufs-Tupfer / „Flow“ mehr
   (auf Wunsch entfernt). Nur ein sehr dezenter, kühler Hell-Verlauf, durch den
   die Milchglas-Flächen weiterhin gut lesbar wirken.
   WICHTIG: Der Verlauf liegt auf einer FIXIERTEN Ebene (position: fixed) statt
   auf `background-attachment: fixed` des body. Letzteres zwingt den Browser,
   bei jedem Scroll-Frame den gesamten Seitenhintergrund neu zu zeichnen (starkes
   Ruckeln auf langen Listen). Eine fixierte Ebene wird einmal zusammengesetzt
   und beim Scrollen nur verschoben – ruhig stehender Verlauf, kein Neuzeichnen. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: linear-gradient(160deg, #EDEFF4 0%, #E6E9F1 52%, #E2E6EE 100%);
}

/* Leicht transparentes Sport-Hintergrundbild (dieselben Silhouetten wie in den
   Instagram-Bildern) als feine Textur über dem gesamten Programm. Ebenfalls
   fixiert und sehr dezent, damit es die Milchglas-Kacheln unterlegt, ohne die
   Lesbarkeit zu stören. Liegt hinter allen Inhalten (z-index -1, also VOR dem
   Aurora-Verlauf bei -2), sodass die backdrop-Filter der Glasflächen es
   weichzeichnen. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: url("/assets/hintergrund.png");
  background-size: 760px auto;
  background-repeat: repeat;
  background-position: center top;
  opacity: 0.04;
  pointer-events: none;
}

/* Farbverlauf-Balken oben — folgt DESIGN.gradientHold (0.34):
   links/rechts laenger einfarbig, Mischung erst gegen die Mitte. */
.topbar {
  height: 16px;
  background: linear-gradient(90deg,
    var(--navy) 0%, var(--navy) 34%,
    var(--yellow) 66%, var(--yellow) 100%);
  position: relative;
}
/* Feiner Glanz auf dem Farbbalken — verleiht Tiefe, ändert die Farben nicht. */
.topbar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,255,255,0) 55%);
  pointer-events: none;
}

/* ---------- Kopfzeile ---------- */
/* Milchglas-Kopf. Bewusst NICHT sticky: eine fixierte Fläche mit
   backdrop-filter erzeugt in Chromium Paint-Fehler beim Scrollen (der Kopf
   „springt“ und lässt eine Lücke). Statisch bleibt der Frost-Effekt erhalten
   (über dem Farbverlauf des Seitenhintergrunds) und das Scrollverhalten ist
   wie zuvor. */
.appheader {
  position: relative;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 28px;
  background: var(--glass-sheen-soft), var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  border-bottom: 1px solid rgba(27, 42, 107, 0.10);
  box-shadow: 0 6px 24px rgba(27, 42, 107, 0.07);
}
.appheader img.logo {
  height: 44px; width: auto; display: block; cursor: pointer;
  transition: transform 0.25s var(--ease);
}
.appheader img.logo:hover { transform: scale(1.05) rotate(-2deg); }
/* Im Dunkelmodus das offizielle weisse Logo zeigen (Blau auf Dunkel wäre kaum lesbar). */
:root[data-theme="dark"] .appheader img.logo { content: url("/assets/logo_weiss.png"); }
/* Navigationspfad (Ordnerstruktur wie in einer Dateiablage).
   Anklickbare Glieder für jede übergeordnete Ebene, getrennt durch ein
   Chevron «›». Das letzte Glied ist die aktuelle Ebene und ist hervorgehoben. */
.appheader .breadcrumb {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.appheader .breadcrumb::-webkit-scrollbar { display: none; }
.appheader .crumb {
  flex: none;
  font-weight: 700;
  font-size: 15px;
  color: var(--navy);
  cursor: pointer;
  letter-spacing: 0.2px;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(27, 42, 107, 0.14);
  border-radius: 12px;
  padding: 8px 16px;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease),
              transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.appheader .crumb:hover {
  background: #fff;
  border-color: var(--navy);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
/* Aktuelle Ebene: gefüllte Navy-Pille, damit klar ist, wo man gerade ist. */
.appheader .crumb-current {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.appheader .crumb-current:hover {
  background: var(--navy);
  color: #fff;
  filter: brightness(1.12);
}
.appheader .crumb-sep {
  flex: none;
  color: var(--navy);
  opacity: 0.45;
  font-size: 16px;
  font-weight: 600;
  user-select: none;
  padding: 0 1px;
}
.appheader .spacer { flex: 1; }

/* Design-Knopf rechts im Titelbalken */
.appheader .design-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 14px; color: var(--navy);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(27, 42, 107, 0.14);
  border-radius: 12px; padding: 8px 16px; cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease),
              transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.appheader .design-btn:hover {
  background: var(--panel-bg); border-color: var(--navy);
  transform: translateY(-1px); box-shadow: var(--shadow-sm);
}
/* Sonne/Mond-Symbol im Erscheinungsbild-Knopf */
.theme-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; flex: none; color: inherit;
}
.theme-icon svg { display: block; }

/* Fehlerhinweis in der Admin-Passwortabfrage (erst nach Fehleingabe sichtbar). */
.pw-fehler { display: none; color: #c0392b; }
.pw-fehler.sichtbar { display: block; }
:root[data-theme="dark"] .pw-fehler { color: #ff8a80; }

/* Design-Menue (Popover unter dem Knopf) */
.design-menu {
  position: absolute; z-index: 400; min-width: 240px;
  display: flex; flex-direction: column; gap: 18px;
  padding: 18px;
  background: var(--glass-sheen), var(--glass-bg-solid);
  -webkit-backdrop-filter: blur(28px) saturate(1.5); backdrop-filter: blur(28px) saturate(1.5);
  border: 1px solid var(--glass-border); border-radius: 16px;
  box-shadow: var(--shadow-lg), var(--glass-highlight);
  animation: lvlPop 0.18s var(--ease) both;
}
.design-gruppe { display: flex; flex-direction: column; gap: 8px; }
.design-titel {
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--gray);
}
.design-hint { font-size: 12px; color: var(--muted); margin-top: -4px; }
.design-seg {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  padding: 4px; border-radius: 12px;
  background: rgba(27, 42, 107, 0.06);
}
.design-seg-btn {
  padding: 9px 12px; border: none; border-radius: 9px; cursor: pointer;
  font-weight: 700; font-size: 13px; color: var(--muted); background: transparent;
  transition: background 0.18s var(--ease), color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.design-seg-btn:hover { color: var(--navy); }
.design-seg-btn.active {
  background: var(--grad-primary); color: #fff;
  box-shadow: 0 3px 10px rgba(27, 42, 107, 0.28);
}

/* ---------- Buttons ---------- */
button {
  font-family: var(--font);
  font-size: 14px;
  cursor: pointer;
}
.btn {
  border: 1px solid rgba(27, 42, 107, 0.16);
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--text-dark);
  padding: 9px 16px;
  border-radius: 12px;
  font-weight: 600;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease),
              transform 0.15s var(--ease), box-shadow 0.2s var(--ease), color 0.2s var(--ease);
}
.btn:hover {
  border-color: var(--blue);
  background: #fff;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.btn:active { transform: translateY(0); box-shadow: none; }
.btn-primary {
  background: var(--grad-primary);
  border-color: transparent;
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(27, 42, 107, 0.28);
}
.btn-primary:hover {
  background: var(--grad-primary-hover);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 22px rgba(27, 42, 107, 0.34);
}

/* ---------- Hauptbereich ---------- */
.main {
  max-width: 1040px;
  margin: 0 auto;
  padding: 28px;
}

.view-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 4px;
}
.view-sub { color: var(--muted); margin: 0 0 22px; }

/* ---------- Startbildschirm: fuenf Kacheln ---------- */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}
/* Feste Kachelzahl: die Kacheln werden gleichmaessig ueber die volle Breite
   (gleiche Breite wie die Bildbuehne darunter) gestreckt. */
.tiles.tiles-2 { grid-template-columns: repeat(2, 1fr); }
.tiles.tiles-3 { grid-template-columns: repeat(3, 1fr); }
/* Trennstrich über die volle Breite: erzwingt einen Zeilenumbruch und trennt
   so eine Kachelgruppe sichtbar von der nächsten (z. B. Jahresbulletin:
   saison-basierte Themen von den Rekord-Themen). */
.tiles .tiles-trenner {
  grid-column: 1 / -1;
  height: 1px;
  background: var(--navy);
  margin: 6px 0;
}
@media (max-width: 640px) {
  .tiles.tiles-2, .tiles.tiles-3 { grid-template-columns: 1fr; }
}
.tile {
  position: relative;
  background: var(--glass-sheen), var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
  border: 1px solid var(--glass-border);
  border-radius: var(--card-radius);
  padding: 26px 22px;
  min-height: 132px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  cursor: pointer;
  box-shadow: var(--shadow-md), var(--glass-highlight);
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease),
              box-shadow 0.25s var(--ease);
  overflow: hidden;
}
.tile::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 8px;
  background: var(--grad-primary);
  transition: width 0.25s var(--ease);
}
/* Sanfter Lichtschimmer, der beim Überfahren über die Kachel wandert. */
.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.45) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.7s var(--ease);
  pointer-events: none;
}
.tile:hover {
  border-color: rgba(46, 79, 184, 0.45);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg), var(--glass-highlight);
}
.tile:hover::before { width: 12px; }
.tile:hover::after { transform: translateX(120%); }
.tile .tile-name { font-size: 19px; font-weight: 800; color: var(--navy); position: relative; }
.tile .tile-desc { color: var(--muted); font-size: 13px; margin-top: 4px; position: relative; }
.tile.disabled {
  cursor: default;
  opacity: 0.6;
}
.tile.disabled::before { background: var(--gray); }
.tile.disabled::after { display: none; }
.tile.disabled:hover { border-color: var(--glass-border); transform: none; box-shadow: var(--shadow-sm); }
.tile .badge {
  position: absolute;
  top: 14px; right: 14px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gray);
  background: var(--placeholder-bg);
  padding: 3px 8px;
  border-radius: 999px;
}

/* ---------- Abschnitte auf dem Startbildschirm ---------- */
/* Startseiten-Slideshow: schlichte, sanft überblendende Sportfotos. */
.start-slideshow { margin-top: 30px; }
.slideshow-buehne {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 7;
  border-radius: var(--img-radius);
  overflow: hidden;
  background: var(--placeholder-bg);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--glass-border);
}
.slideshow-bild {
  position: absolute;
  inset: 0;
  background: center/cover no-repeat;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.slideshow-bild.aktiv { opacity: 1; }

.section { margin-top: 34px; }
.section h2 {
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--gray);
  margin: 0 0 12px;
}
.leer-hinweis {
  color: var(--muted);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px dashed var(--card-border);
  border-radius: var(--card-radius);
  padding: 22px;
  text-align: center;
}

/* ---------- Statuszeile ---------- */
.statuszeile {
  margin-top: 34px;
  padding-top: 16px;
  border-top: 1px solid var(--card-border);
  color: var(--muted);
  font-size: 13px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}
.statuszeile b { color: var(--text-dark); font-weight: 700; }

/* ---------- Platzhalter-Ansicht (Bereiche folgen etappenweise) ---------- */
.platzhalter {
  background: var(--glass-sheen), var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4); backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  border: 1px solid var(--glass-border);
  border-radius: var(--card-radius);
  padding: 40px;
  text-align: center;
  color: var(--muted);
  box-shadow: var(--shadow-md), var(--glass-highlight);
}
.platzhalter .gross { font-size: 40px; margin-bottom: 8px; color: var(--navy); }

/* ============================================================
   Etappe 2 — Datenbank (Athlet:innen und Wettkaempfe)
   ============================================================ */

.btn-ghost { border-color: transparent; background: transparent; color: var(--muted); padding-left: 4px; }
.btn-ghost:hover { color: var(--navy); border-color: transparent; }
.btn-remove {
  border: 1px solid var(--card-border); background: #fff; color: var(--red);
  border-radius: 8px; padding: 4px 9px; font-weight: 700; line-height: 1;
}
.btn-remove:hover { border-color: var(--red); }
.btn-link { border: none; background: none; color: var(--blue); font-weight: 600; padding: 6px 2px; }
.btn-link:hover { text-decoration: underline; }
.btn-icon { border: 1px solid var(--card-border); background: #fff; border-radius: 8px; padding: 4px 8px; }
.btn-schloss {
  border: 1px solid var(--card-border); background: #fff; color: var(--muted);
  border-radius: 8px; padding: 4px 9px; font-size: 12px; white-space: nowrap;
}
.btn-schloss.aktiv { color: var(--navy); border-color: var(--navy); font-weight: 700; }

/* Kopf mit Zurueck + Reiter */
.db-kopf { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.tabbar { display: flex; gap: 6px; }
.tab {
  border: 1px solid rgba(27, 42, 107, 0.16); background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--text-dark);
  padding: 8px 18px; border-radius: 999px; font-weight: 600;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease),
              color 0.2s var(--ease), transform 0.15s var(--ease), box-shadow 0.2s var(--ease);
}
.tab:hover { transform: translateY(-1px); border-color: var(--blue); box-shadow: var(--shadow-sm); }
.tab.active {
  background: var(--grad-primary); border-color: transparent; color: #fff;
  box-shadow: 0 4px 14px rgba(27, 42, 107, 0.28);
}
.profil-titel { font-size: 20px; font-weight: 800; color: var(--navy); }
.profil-titel-wrap { display: flex; flex-direction: column; gap: 2px; }
.profil-stand { font-size: 12px; color: var(--grau, #6B7280); font-weight: 500; }

/* Listen */
.listen-kopf { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.such { flex: 1; min-width: 180px; }
.liste { display: flex; flex-direction: column; gap: 8px; }
.gruppe-titel {
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--gray); margin: 14px 0 4px;
}
.listen-row { display: flex; gap: 8px; align-items: stretch; }
.listen-open {
  flex: 1; text-align: left; border: 1px solid rgba(27, 42, 107, 0.12);
  background: var(--glass-sheen-soft), var(--glass-bg-strong);
  border-radius: 14px; padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; cursor: pointer;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4); backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  box-shadow: var(--shadow-sm), var(--glass-highlight);
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.listen-open:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: var(--shadow-md), var(--glass-highlight); }
.listen-name { font-weight: 700; color: var(--navy); display: flex; align-items: center; gap: 8px; }
.listen-meta { color: var(--muted); font-size: 13px; }

/* Drag-Griff zum Umsortieren (Wettkampfdatenbank). Bewusst ohne backdrop-filter,
   weil in der Liste viele Zeilen vorkommen. */
.wk-drag {
  display: flex; align-items: center; justify-content: center;
  width: 34px; border: 1px solid var(--card-border); background: #fff;
  border-radius: 10px; color: var(--muted); font-size: 18px; line-height: 1;
  cursor: grab; user-select: none; flex: none; touch-action: none;
}
.wk-drag:hover { border-color: var(--blue); color: var(--navy); }
.wk-drag:active { cursor: grabbing; }
.listen-row.dragging { opacity: 0.5; }
:root[data-theme="dark"] .wk-drag { background: rgba(255, 255, 255, 0.06); }

/* Vollstaendigkeits-Punkt neben dem Namen */
.punkt { width: 11px; height: 11px; border-radius: 50%; flex: none; display: inline-block; }
.punkt-gruen { background: #2E9E5B; }
.punkt-gelb { background: #F0A500; }
.punkt-rot { background: var(--red); }

/* Suchfilter-Knopf (aktiv) + Filterfenster */
.btn-filter-aktiv { border-color: var(--navy); color: var(--navy); font-weight: 700; }
.filter-kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 6px; }
.filter-kopf .modal-titel { margin: 0; }
.filter-kopf-actions { display: flex; gap: 10px; }
.filter-spalten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 10px; }
.filter-spalte { display: flex; flex-direction: column; gap: 9px; }
.filter-spalte-titel {
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--gray); border-bottom: 1px solid var(--card-border); padding-bottom: 6px;
}
.filter-spalte .chk-label { font-weight: 600; }

/* Chips + Tags */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.chip {
  border: 1px solid rgba(27, 42, 107, 0.16); background: rgba(255, 255, 255, 0.7); color: var(--text-dark);
  padding: 5px 13px; border-radius: 999px; font-size: 13px; font-weight: 600;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease),
              color 0.2s var(--ease), transform 0.15s var(--ease), box-shadow 0.2s var(--ease);
}
.chip:hover { transform: translateY(-1px); border-color: var(--blue); box-shadow: var(--shadow-sm); }
.chip.active {
  background: var(--grad-primary); border-color: transparent; color: #fff;
  box-shadow: 0 4px 12px rgba(46, 79, 184, 0.3);
}
.tag {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px;
  padding: 2px 7px; border-radius: 999px;
}
.tag-m { background: var(--navy); color: #fff; }
.tag-i { background: var(--red); color: #fff; }

/* Formularfelder */
.fld { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; flex: 1; }
.fld > label { font-size: 12px; font-weight: 700; color: var(--gray); text-transform: uppercase; letter-spacing: 0.4px; }
.fld-hint { font-size: 12px; color: var(--muted); }
.inp {
  font-family: var(--font); font-size: 14px; color: var(--text-dark);
  border: 1px solid var(--field-border); border-radius: 10px; padding: 8px 10px; background: var(--field-bg); width: 100%;
  -webkit-backdrop-filter: blur(8px) saturate(1.2); backdrop-filter: blur(8px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.inp:hover { border-color: rgba(46,79,184,0.4); }
.inp:focus { outline: none; border-color: var(--blue); background: rgba(255,255,255,0.92); box-shadow: var(--ring), inset 0 1px 0 rgba(255,255,255,0.6); }
.form-row { display: flex; gap: 12px; flex-wrap: wrap; }
.form-row > .fld { min-width: 130px; }

/* Profil */
.profil { display: grid; grid-template-columns: 260px 1fr; gap: 26px; align-items: start; }
.profil-fotos { display: flex; flex-direction: column; gap: 16px; }
.profil-daten > .sub, .editor > .sub {
  font-size: 15px; font-weight: 800; color: var(--navy); margin: 20px 0 8px;
  border-top: 1px solid var(--card-border); padding-top: 14px;
}
.unter { font-size: 12px; font-weight: 700; color: var(--gray); margin: 8px 0 4px; }
.status-chks { display: flex; gap: 18px; flex-wrap: wrap; padding: 6px 0; }
.chk-label { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; cursor: pointer; }
.chk-label .chk { width: 17px; height: 17px; cursor: pointer; accent-color: var(--navy); }
.abgeleitet { color: var(--navy); font-weight: 600; margin: -4px 0 12px; }
.profil-actions { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }

/* Sticky Profilkopf: Titel + Aktionen bleiben beim Scrollen oben sichtbar */
.profil-kopf-sticky {
  position: sticky; top: 0; z-index: 30;
  /* Bewusst OHNE backdrop-filter: ein fixiertes Milchglas erzeugt beim Scrollen
     Paint-Fehler. Nahezu deckender Hintergrund verdeckt den durchlaufenden
     Inhalt sauber. */
  background: rgba(233, 237, 245, 0.97);
  padding: 12px 0; margin-bottom: 14px; border-bottom: 1px solid var(--card-border);
}
.profil-kopf-actions { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }

/* Foto-Feld */
.foto-box { display: flex; flex-direction: column; gap: 6px; }
.foto-titel { font-size: 12px; font-weight: 700; color: var(--gray); text-transform: uppercase; letter-spacing: 0.4px; }
.foto-bild {
  aspect-ratio: 1 / 1; border: 2px dashed var(--card-border); border-radius: var(--img-radius);
  background: var(--placeholder-bg) center/cover no-repeat; display: flex; align-items: center;
  justify-content: center; cursor: pointer; text-align: center; color: var(--muted); overflow: hidden;
}
.foto-bild.gefuellt { border-style: solid; }
.foto-bild.drag { border-color: var(--blue); background-color: #dde6fb; }
.foto-hinweis { font-size: 13px; padding: 12px; }
.foto-credit { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.foto-credit .chk-label { font-size: 13px; }
.foto-credit .inp { margin: 0; }

/* Leistungstabellen (PB/SB) */
.ltab { margin-bottom: 10px; }
.ltab-kopf, .ltab-row {
  display: grid; grid-template-columns: 1.4fr 1fr 0.7fr 1fr 1fr 1.4fr auto; gap: 6px; align-items: center;
}
.ltab-kopf { font-size: 11px; font-weight: 700; color: var(--gray); text-transform: uppercase; padding: 0 2px 4px; }
.ltab-row { margin-bottom: 6px; }
.ltab-row .inp { padding: 6px 8px; font-size: 13px; }
.ltab-tools { display: flex; gap: 4px; }

/* Editor Wettkampf */
.editor-aktionen {
  position: sticky; top: 0; z-index: 20;
  /* OHNE backdrop-filter (siehe .profil-kopf-sticky): sonst Paint-Fehler beim
     Scrollen. Fast deckender Hintergrund. */
  background: rgba(233, 237, 245, 0.97);
  display: flex; gap: 10px; justify-content: flex-end; padding: 10px 0; margin-bottom: 8px;
  border-bottom: 1px solid var(--card-border);
}
.editor { display: block; }
.urls { margin: 10px 0; }
.urls summary { cursor: pointer; font-weight: 600; color: var(--blue); }

/* Zeitplan-Block */
.zp-liste { display: flex; flex-direction: column; gap: 12px; }
.zp-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
/* OHNE backdrop-filter: eine Karte je Disziplin im Zeitplan – oft viele. */
.zp-disc { border: 1px solid var(--glass-border); border-radius: 12px; padding: 12px; background: var(--glass-sheen-soft), var(--glass-bg-strong); box-shadow: var(--shadow-sm), var(--glass-highlight); }
.zp-disc-kopf { display: grid; grid-template-columns: 1.6fr 1fr 0.7fr auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.zp-runden { display: flex; flex-direction: column; gap: 6px; }
.zp-runde-row { display: grid; grid-template-columns: 1.2fr 0.7fr 1.1fr 0.8fr auto; gap: 6px; align-items: center; }
.zp-runde-row .inp, .zp-disc-kopf .inp { padding: 6px 8px; font-size: 13px; }

/* Limiten-Block */
.lim-kopf, .lim-row {
  display: grid; grid-template-columns: 1fr 0.6fr 1.4fr 1fr 1fr 1.4fr auto; gap: 6px; align-items: center;
}
.lim-kopf { font-size: 11px; font-weight: 700; color: var(--gray); text-transform: uppercase; padding: 6px 2px 4px; }
.lim-row { margin-bottom: 6px; }
.lim-row .inp { padding: 6px 8px; font-size: 13px; }
.lim-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* Spaltenkonfiguration des Limitenbulletins (unter «Saison», nur Meisterschaft) */
.spk.hidden { display: none; }
.spk-body { display: flex; flex-direction: column; gap: 6px; }
.spk-row { display: grid; grid-template-columns: 220px 1fr; gap: 12px; align-items: center; }
.spk-row .chk-label { font-weight: 700; font-size: 13px; }
.spk-row .inp { padding: 6px 8px; font-size: 13px; }

/* Dokumente */
.dok-liste { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.dok-row { display: flex; gap: 10px; align-items: center; }
.dok-typ { font-size: 12px; color: var(--muted); text-transform: uppercase; }
.dz-pdf { aspect-ratio: auto; min-height: 90px; }
.dz-pdf.gefuellt-text { border-style: solid; color: var(--navy); }
.import-status { font-size: 13px; color: var(--muted); min-height: 18px; margin-top: 6px; }

/* Struktur-Import («Automatisch hinzufügen») */
.import-struktur { max-width: 640px; }
.import-tools { justify-content: flex-start; margin: 4px 0 10px; }
.imp-paste { margin: 6px 0 4px; }
.imp-paste > label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.imp-paste textarea.inp { width: 100%; min-height: 84px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; resize: vertical; }
.imp-paste-actions { display: flex; justify-content: flex-end; margin-top: 6px; }
.imp-oder { text-align: center; font-size: 12px; color: var(--muted); text-transform: uppercase;
  letter-spacing: .5px; margin: 8px 0 4px; }
.import-diff { max-height: 40vh; overflow-y: auto; margin-top: 10px; }
.imp-datei { border: 1px solid var(--card-border); border-radius: 12px;
  padding: 12px 14px; margin: 10px 0; }
.imp-datei.imp-fehler { border-color: var(--red); }
.imp-datei-kopf { font-size: 14px; margin-bottom: 8px; word-break: break-all; }
.imp-fehlerliste { margin: 0; padding-left: 18px; color: var(--red); font-size: 13px; }
.imp-fehler-text { color: var(--red); font-size: 13px; min-height: 0; }
.imp-warn { color: var(--red); font-size: 13px; margin: 2px 0; }
.imp-hinweis { color: var(--muted); font-size: 13px; margin: 2px 0; }
.imp-abschnitt { margin-top: 10px; }
.imp-abschnitt-kopf { display: flex; align-items: center; gap: 8px; margin: 6px 0 4px; }
.imp-count { font-size: 12px; color: var(--muted); }
.imp-badge { font-size: 11px; font-weight: 600; letter-spacing: .3px;
  border-radius: 6px; padding: 2px 7px; }
.imp-badge.b-neu { background: rgba(39, 174, 96, .18); color: #1e8449; }
.imp-badge.b-ge { background: rgba(46, 79, 184, .18); color: var(--navy); }
.imp-badge.b-un { background: rgba(91, 100, 114, .16); color: var(--muted); }
.imp-badge.b-lock { background: rgba(192, 57, 43, .16); color: var(--red); }
.imp-row { display: flex; align-items: baseline; gap: 8px; padding: 3px 0;
  font-size: 13px; border-top: 1px solid var(--card-border); }
.imp-row.imp-info { color: var(--muted); }
.imp-row .chk-label { margin: 0; }
.imp-disc { min-width: 180px; font-weight: 500; color: var(--text-dark); }
.imp-wert { color: var(--muted); }
:root[data-theme="dark"] .imp-badge.b-neu { color: #5dd48f; }

/* Anleitung-Fenster */
.anleitung-modal { max-width: 640px; }
.anleitung-inhalt { max-height: 56vh; overflow-y: auto; font-size: 14px; line-height: 1.55;
  color: var(--text-dark); margin: 4px 0 14px; }
.anleitung-inhalt h4 { margin: 16px 0 6px; font-size: 15px; }
.anleitung-inhalt .anl-lead { color: var(--muted); margin: 0 0 8px; }
.anleitung-inhalt ol.anl-schritte { padding-left: 20px; margin: 0; }
.anleitung-inhalt ol.anl-schritte li { margin: 7px 0; }
.anleitung-inhalt ol.anl-schritte ul { padding-left: 18px; margin: 4px 0; }
.anleitung-inhalt ol.anl-schritte ul li { margin: 3px 0; }
.anleitung-inhalt code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: rgba(127, 127, 127, .16); padding: .1em .35em; border-radius: 4px; font-size: 12.5px; }
.anleitung-inhalt .anl-box { border: 1px solid var(--card-border); border-radius: 10px;
  padding: 10px 12px; margin: 14px 0 2px; background: rgba(127, 127, 127, .06); }
.anleitung-inhalt .anl-box p { margin: 4px 0 0; color: var(--muted); }

/* Modal */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(20, 30, 74, 0.34);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px;
  animation: lvlFadeIn 0.2s var(--ease) both;
}
.modal-box {
  background: var(--glass-sheen), var(--glass-bg-solid);
  -webkit-backdrop-filter: blur(28px) saturate(1.5); backdrop-filter: blur(28px) saturate(1.5);
  border: 1px solid var(--glass-border);
  border-radius: var(--card-radius); padding: 24px; max-width: 520px; width: 100%;
  box-shadow: var(--shadow-lg), var(--glass-highlight); max-height: 90vh; overflow: auto;
  animation: lvlPop 0.28s var(--ease) both;
}
.modal-box:has(.pdf-preview-modal) { max-width: 940px; padding: 20px; }
.modal-box:has(.filter-modal) { max-width: 720px; }
.modal-box:has(.sponsor-picker) { max-width: 640px; }

/* Auswahl gespeicherter Sponsorenlogos (Modal). */
.sponsor-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 4px;
}
.sponsor-picker-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 10px;
  background: var(--field-bg, rgba(255,255,255,0.6));
  border: 1px solid var(--border, rgba(27,42,107,0.18));
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s;
}
.sponsor-picker-item:hover {
  border-color: var(--navy);
  background: rgba(255,255,255,0.9);
  transform: translateY(-1px);
}
.sponsor-picker-logo {
  width: 100%;
  height: 72px;
  object-fit: contain;
}
.sponsor-picker-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  text-align: center;
  line-height: 1.25;
}
.modal-titel { margin: 0 0 14px; font-size: 18px; font-weight: 800; color: var(--navy); }
.modal-message { color: var(--text-dark); margin: 0 0 16px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }

/* Toast */
.toast {
  position: fixed; right: 20px; bottom: 20px; background: var(--grad-primary); color: #fff;
  padding: 12px 18px; border-radius: 12px; box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255,255,255,0.14);
  opacity: 0; transform: translateY(10px); transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); z-index: 200;
}
.toast.show { opacity: 1; transform: translateY(0); }

@media (max-width: 720px) {
  .profil { grid-template-columns: 1fr; }
  .ltab-kopf, .lim-kopf { display: none; }
  .ltab-row, .lim-row, .zp-runde-row, .zp-disc-kopf { grid-template-columns: 1fr 1fr; }
  .filter-spalten { grid-template-columns: 1fr 1fr; }
  .filter-kopf { flex-wrap: wrap; }
}

/* ============================================================
   Etappe 3 — Leistungen (Fortschritt, Verknuepfung, Suche)
   ============================================================ */
.prog-track {
  height: 12px; background: var(--placeholder-bg); border-radius: 999px;
  overflow: hidden; margin: 6px 0 10px;
}
.prog-bar {
  height: 100%; width: 4%; background: linear-gradient(90deg, var(--navy), var(--blue));
  border-radius: 999px; transition: width 0.3s;
}
.prog-label { color: var(--muted); font-size: 13px; }

.link-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0 4px; font-size: 13px; }
.link-ok { color: #15803d; font-weight: 700; }
.link-none { color: var(--muted); }
.link-a { color: var(--blue); }

.such-ergebnis { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; max-height: 320px; overflow: auto; }
.such-row {
  text-align: left; border: 1px solid var(--glass-border);
  /* OHNE backdrop-filter: Trefferlisten können lang werden. */
  background: var(--glass-sheen-soft), var(--row-bg-solid);
  border-radius: 10px; box-shadow: var(--shadow-sm), var(--glass-highlight);
  padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; cursor: pointer;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.such-row:hover { border-color: var(--blue); transform: translateY(-1px); box-shadow: var(--shadow-md), var(--glass-highlight); }

/* ============================================================
   Etappe 4 — Limitenbulletin
   ============================================================ */
.saison-reiter { flex-wrap: wrap; }
.tab-plus { font-weight: 800; padding: 8px 14px; }

/* «Weitere Saison»-Knopf (Reiter/Chip): dezent abgesetzt, mit Pfeil. Wird per
   JS (UI.einzeiligeReiter) nur eingeblendet, wenn die Saisons nicht auf eine
   Zeile passen. */
.tab-weiter, .chip-weiter { font-weight: 700; }
.chip-weiter { margin-left: auto; }

/* Fenster «Weitere Saison»: zwei Spalten (Outdoor links, Indoor rechts), je
   Zeile das gleiche Jahr. */
.saison-modal { min-width: min(440px, 82vw); }
.saison-modal-grid { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 4px; }
.saison-modal-kopf {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--gray); padding: 0 4px 6px;
  border-bottom: 1px solid var(--card-border); margin-bottom: 2px;
}
.saison-modal-kopf span { text-align: center; }
.saison-modal-zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.saison-modal-liste { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 4px; }
.saison-modal-zelle {
  border: 1px solid rgba(27, 42, 107, 0.16); background: rgba(255, 255, 255, 0.7);
  color: var(--text-dark); padding: 8px 14px; border-radius: 12px;
  font-weight: 600; text-align: center;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease),
              color 0.2s var(--ease), transform 0.15s var(--ease), box-shadow 0.2s var(--ease);
}
.saison-modal-zelle:hover:not(.leer) {
  transform: translateY(-1px); border-color: var(--blue); box-shadow: var(--shadow-sm);
}
.saison-modal-zelle.active {
  background: var(--grad-primary); border-color: transparent; color: #fff;
  box-shadow: 0 4px 12px rgba(46, 79, 184, 0.3);
}
.saison-modal-zelle.leer {
  background: transparent; border-style: dashed; border-color: var(--card-border);
  cursor: default; opacity: 0.5;
}
:root[data-theme="dark"] .saison-modal-zelle {
  background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.16);
}

.lb-toolbar {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  flex-wrap: wrap; margin-bottom: 18px;
}
.lb-stand { color: var(--muted); font-size: 13px; }
.lb-stand b { color: var(--text-dark); }
.lb-buttons { display: flex; gap: 8px; flex-wrap: wrap; }

.lb-sektionen { display: flex; flex-direction: column; }
/* Aktuell angezeigte Saison — ganz oben, damit man die Saison auch dann erkennt,
   wenn ihr Reiter im «Weitere Saison»-Fenster steckt. */
.lb-saison-titel {
  font-weight: 900; font-size: 15px; letter-spacing: 0.4px; text-transform: uppercase;
  color: var(--blue); margin: 4px 0 10px;
}
/* Sektionskopf wie im PDF: Titel mit farbiger Trennlinie, darunter zwei Stat-Karten. */
.lb-sektion-kopf { margin: 22px 0 12px; }
.lb-stitel {
  font-weight: 800; font-size: 22px; letter-spacing: -0.3px;
  padding-bottom: 12px; margin-bottom: 16px; border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, var(--navy) 0%, var(--blue) 45%, var(--yellow) 120%) 1;
}
/* Internationale Meisterschaften: Trennlinie durchgehend rot (in allen Saisons). */
.lb-stitel.international {
  border-image: none;
  border-bottom-color: var(--red);
}
.lb-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.lb-stat {
  border: 1px solid var(--glass-border); border-radius: 16px;
  /* OHNE backdrop-filter: zwei Stat-Karten je Sektion, in Summe viele. */
  background: var(--glass-sheen), var(--glass-bg-strong);
  padding: 16px 20px; position: relative; overflow: hidden;
  box-shadow: var(--shadow-sm), var(--glass-highlight);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.lb-stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-md), var(--glass-highlight); }
.lb-stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--grad-primary); }
.lb-stat.rot::before { background: linear-gradient(135deg, #E05545, var(--red)); }
.lb-stat-num {
  font-size: 32px; font-weight: 800; line-height: 1;
  background: var(--grad-primary); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lb-stat.rot .lb-stat-num { background: linear-gradient(135deg, #E05545, var(--red)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lb-stat-lbl { font-size: 10px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--gray); font-weight: 700; margin-top: 6px; }

/* Meisterschaftskarte wie im PDF: getöntes Kopfband, linker Akzentbalken. */
.lb-kachel {
  border: 1px solid var(--glass-border); border-left: 5px solid var(--navy);
  /* OHNE backdrop-filter: eine Kachel je Meisterschaft, in Summe viele. */
  border-radius: 16px; background: var(--glass-sheen-soft), var(--glass-bg-strong);
  padding: 0; margin-bottom: 18px; overflow: hidden;
  box-shadow: var(--shadow-sm), var(--glass-highlight);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.lb-kachel:hover { transform: translateY(-2px); box-shadow: var(--shadow-md), var(--glass-highlight); }
.lb-kachel.international { border-left-color: var(--red); }
.lb-kachel-kopf {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 12px 18px; background: linear-gradient(135deg, rgba(238,241,251,0.9), rgba(224,230,248,0.75));
}
.lb-kachel.international .lb-kachel-kopf { background: #FBEBEA; }
.lb-kname { font-weight: 700; color: var(--navy); font-size: 16px; }
.lb-kort { font-weight: 700; color: var(--navy); }
.lb-kachel.international .lb-kname, .lb-kachel.international .lb-kort { color: var(--red); }
.lb-kanzahl { color: var(--muted); font-size: 13px; font-weight: 700; white-space: nowrap; }
.lb-kmeta { color: var(--muted); font-size: 12px; margin: 3px 0 0; padding: 0 18px; }
.lb-kachel.international .lb-kmeta { background: #FBEBEA; }
.lb-kachel-kopf + .lb-kmeta { margin-top: -2px; padding-top: 4px; background: #EEF1FB; }
.lb-kachel.international .lb-kachel-kopf + .lb-kmeta { background: #FBEBEA; }
.lb-kachel-body { padding: 4px 18px 10px; }
.lb-leer { color: var(--muted); font-style: italic; font-size: 13px; padding: 4px 0; }
/* Fusszeile jeder Meisterschafts-Kachel: «＋ Eintrag» für einen manuellen Eintrag. */
.lb-kachel-fuss { padding: 6px 18px 10px; border-top: 1px solid #EEF0F4;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* Geschlechter-Band navy mit weisser Schrift (wie im PDF). */
.lb-subhead {
  font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: #fff; background: var(--navy); padding: 8px 18px; margin: 8px -18px 0;
}
.lb-eintrag { border-bottom: 1px solid #EEF0F4; }
.lb-eintrag:last-child { border-bottom: none; }
.lb-row { display: grid; gap: 6px; align-items: center; padding: 3px 0; }
.lb-kachel-body.cols6 .lb-row { grid-template-columns: 1.8fr 0.5fr 1.3fr 1fr 1fr 1fr auto; }
.lb-kachel-body.cols5 .lb-row { grid-template-columns: 1.8fr 0.5fr 1.3fr 1fr 1fr auto; }
.lb-head { font-size: 11px; font-weight: 700; color: var(--gray); text-transform: uppercase; padding-bottom: 4px; border-bottom: 1px solid var(--card-border); }
/* OHNE backdrop-filter (siehe .jb-inp) – viele Felder pro Meisterschaft. */
.lb-inp { border: 1px solid var(--field-border); background: var(--field-bg-solid); border-radius: 6px; padding: 5px 7px; font-size: 13px; font-family: var(--font); color: var(--text-dark); width: 100%; box-shadow: inset 0 1px 0 rgba(255,255,255,0.55); }
.lb-inp:hover { border-color: rgba(46,79,184,0.4); }
.lb-inp:focus { outline: none; border-color: var(--blue); background: rgba(255,255,255,0.92); }
.lb-inp.wert { font-weight: 700; color: var(--navy); }
.lb-inp.name { font-weight: 600; }
/* Kennzeichnung nach dem Aktualisieren: neue Einträge gelb, geänderte blau.
   Nur zur Kontrolle in der Oberfläche — im gedruckten PDF nicht sichtbar
   (das PDF wird separat gerendert, zusätzlich @media print unten). */
.lb-row.neu { background: #FFF7E0; border-radius: 8px; }
.lb-row.geaendert { background: #E6F0FF; border-radius: 8px; }
.lb-row.manuell .lb-inp.name::after { content: " (manuell)"; }
.lb-row.weggefallen { opacity: 0.45; }
.lb-row.weggefallen .lb-inp { text-decoration: line-through; }
@media print {
  .lb-row.neu, .lb-row.geaendert { background: transparent !important; }
}
.lb-vorschlag { font-size: 12px; color: var(--red); padding: 0 0 6px 8px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.lb-vorschlag:empty { display: none; }

/* PDF-Vorschaufenster */
.pdf-preview-modal { display: flex; flex-direction: column; width: min(92vw, 900px); height: 84vh; }
.pdf-preview-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.pdf-preview-head .modal-titel { margin: 0; }
.pdf-preview-frame { flex: 1; width: 100%; border: 1px solid var(--card-border); border-radius: 10px; background: #fff; }

/* Aktualisieren-Vorschau */
.vs-modal { max-width: 640px; }
.vs-tabs { display: flex; gap: 8px; margin-bottom: 14px; border-bottom: 1px solid var(--card-border); }
.vs-tab { padding: 8px 14px; border: none; background: none; font-size: 13px; font-weight: 700; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.vs-tab:hover { color: var(--navy); }
.vs-tab.active { color: var(--navy); border-bottom-color: var(--navy); }
.vs-panel.hidden { display: none; }
.vs-saison { margin-bottom: 10px; font-size: 13px; color: var(--muted); }
.vs-saison b { color: var(--navy); }
.vs-leer { color: var(--muted); font-size: 13px; padding: 10px 2px; }
.vs-zahlen { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; color: var(--muted); }
.vs-zahlen b { color: var(--navy); }
.vs-block { margin-bottom: 14px; }
.vs-block h4 { margin: 0 0 6px; color: var(--navy); font-size: 14px; }
.vs-liste { display: flex; flex-direction: column; gap: 3px; max-height: 220px; overflow: auto; }
.vs-row { font-size: 12px; color: var(--text-dark); padding: 3px 8px; background: var(--page-bg); border-radius: 6px; }

/* Automatisch-generieren-Modal (Preview aus Limitenbulletin) — gleicher Stil
   wie die Vorlage «Limitenbulletin»: Saison-Reiter oben, Meisterschafts- und
   Athleten-Karten im Glas-Look des Programms. */
.modal-box:has(.auto-modal) { max-width: 620px; }
.auto-hint { color: var(--muted); font-size: 13px; margin: 4px 0 12px; }
.auto-meisterschaft { font-weight: 800; color: var(--navy); font-size: 15px; margin: 2px 0 10px; }

/* ---------- Schritt 1: Saison-Reiter + Meisterschaftsliste ---------- */
.auto-modal .lbp-saisons { margin-bottom: 14px; }
.auto-modal .lbp-auswahl { display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow: auto; padding: 2px; }
.auto-modal .lbp-item {
  position: relative;
  flex: none;
  text-align: left;
  border: 1.5px solid var(--card-border);
  background: var(--panel-bg);
  box-shadow: var(--shadow-sm);
  border-radius: 12px;
  padding: 11px 44px 11px 14px;
  display: flex; flex-direction: column; gap: 2px;
  cursor: pointer;
  transition: border-color .15s, transform .15s, box-shadow .15s, background .15s;
}
.auto-modal .lbp-item:hover { border-color: var(--blue); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.auto-modal .lbp-item .lbp-name { font-weight: 800; color: var(--navy); }
.auto-modal .lbp-item.intl .lbp-name { color: var(--red); }
.auto-modal .lbp-item .lbp-meta { color: var(--muted); font-size: 13px; }
/* Klar markierte Auswahl: kräftiger Rahmen, getönter Grund und ✓-Kreis rechts. */
.auto-modal .lbp-item.active {
  border-color: var(--navy);
  border-width: 2px;
  background: color-mix(in srgb, var(--navy) 10%, var(--panel-bg));
  box-shadow: var(--shadow-md);
}
.auto-modal .lbp-item.intl.active {
  border-color: var(--red);
  background: color-mix(in srgb, var(--red) 10%, var(--panel-bg));
}
.auto-modal .lbp-item.active::after {
  content: "✓";
  position: absolute; top: 50%; right: 12px; transform: translateY(-50%);
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--navy); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; line-height: 1;
}
.auto-modal .lbp-item.intl.active::after { background: var(--red); }

/* ---------- Schritt 2: Athleten- und Disziplinenliste ---------- */
.auto-select-actions { display: flex; gap: 8px; margin: 0 0 10px; }
.btn-small { padding: 4px 10px; font-size: 12px; }
.auto-liste { display: flex; flex-direction: column; gap: 8px; max-height: 46vh; overflow: auto; padding: 2px; }
/* Eine Karte pro Athlet:in (Kopf + eingerückte Disziplinen). */
.auto-athlet {
  flex: none;
  border: 1.5px solid var(--card-border);
  border-radius: 12px;
  background: var(--panel-bg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.auto-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; }
.auto-item input[type="checkbox"] { width: 17px; height: 17px; flex: none; accent-color: var(--navy); cursor: pointer; }
.auto-name { font-weight: 800; color: var(--navy); flex: 1; }
.auto-anzahl { color: var(--muted); font-size: 12px; font-weight: 600; }
.auto-athlet-head { background: color-mix(in srgb, var(--navy) 6%, var(--panel-bg)); border-bottom: 1px solid var(--card-border); }
.auto-disz-liste { display: flex; flex-direction: column; padding: 4px 0; }
.auto-disz-item { padding: 6px 12px 6px 34px; }
.auto-disz-item:hover { background: var(--placeholder-bg); }
.auto-disz-name { color: var(--text-dark); font-size: 14px; }
.auto-leer { color: var(--muted); font-style: italic; padding: 10px; }

/* Mini-Menü (Export) */
.mini-menu { position: absolute; z-index: 300; background: var(--glass-bg-solid); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid var(--glass-border); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 4px; display: flex; flex-direction: column; min-width: 120px; animation: lvlPop 0.18s var(--ease) both; }
.mini-item { text-align: left; border: none; background: none; padding: 8px 12px; border-radius: 8px; }
.mini-item:hover { background: var(--placeholder-bg); }

@media (max-width: 820px) {
  .lb-head { display: none; }
  .lb-row { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   Etappe 6 — Jahresbulletin
   ============================================================ */
.jb-kopf { gap: 14px; }
.jb-jahr { display: flex; align-items: flex-end; gap: 8px; }
.jb-jahr .fld { margin-bottom: 0; min-width: 90px; }
.jb-reiter { flex-wrap: wrap; margin-bottom: 18px; }

.jb-werkzeug { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.jb-export { display: inline-flex; gap: 6px; }
.jb-hinweis { color: var(--muted); font-size: 13px; margin: 0 0 12px; }
.jb-filter { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.jb-filter .such { max-width: 260px; }

.jb-gender { font-size: 16px; font-weight: 800; color: var(--navy); margin: 22px 0 6px; border-bottom: 2px solid var(--card-border); padding-bottom: 6px; }
/* Aktuell angezeigte Saison (Bestenliste nach Saison) — ganz oben, damit die
   Saison auch bei einem Reiter aus dem «Weitere Saison»-Fenster erkennbar ist. */
.jb-saison-titel {
  font-weight: 900; font-size: 15px; letter-spacing: 0.4px; text-transform: uppercase;
  color: var(--blue); margin: 4px 0 10px;
}
.jb-gruppe-titel { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: var(--gray); margin: 14px 0 4px; }

.jb-disc {
  border: 1px solid var(--glass-border); border-radius: 14px;
  /* OHNE backdrop-filter: pro Disziplin ein Block, in Summe sehr viele. */
  background: var(--glass-sheen-soft), var(--row-bg-solid);
  padding: 8px 12px; margin-bottom: 10px; box-shadow: var(--shadow-sm), var(--glass-highlight);
}
.jb-disc-kopf { font-weight: 800; color: var(--navy); font-size: 14px; margin: 8px 0 4px; }
/* Block-Kopf mit Sammel-Einfrieren-Schalter rechts (Titel links, Knopf rechts). */
.jb-disc-kopf-zeile { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 8px 0 4px; }
.jb-disc-kopf-zeile .jb-disc-kopf { margin: 0; }
/* Sammel-Einfrieren je Block: dezent, wie der Zeilen-Schalter (btn-schloss). */
.btn-frost-block {
  border: 1px solid var(--card-border); background: #fff; color: var(--muted);
  border-radius: 8px; padding: 3px 10px; font-size: 12px; font-weight: 600;
  white-space: nowrap; cursor: pointer;
}
.btn-frost-block:hover { color: var(--navy); border-color: var(--navy); }
/* «Ganze Saison / Jahr einfrieren» — in der oberen Werkzeugzeile. */
.btn-frost-alle { white-space: nowrap; }
:root[data-theme="dark"] .btn-frost-block { background: transparent; }
.jb-disc-body { display: flex; flex-direction: column; gap: 2px; }
.jb-row { display: grid; grid-template-columns: 0.5fr 1.6fr 0.6fr 0.7fr 0.9fr 1fr 0.9fr auto; gap: 6px; align-items: center; }
/* OHNE backdrop-filter: in Tabellen erscheinen sehr viele dieser Felder; ein
   Blur pro Feld liess die Bestenliste ruckeln und die Ewige Bestenliste
   abstürzen. Solider Feldton statt Milchglas – sieht auf dem Panel gleich aus. */
.jb-inp { border: 1px solid var(--field-border); background: var(--field-bg-solid); border-radius: 6px; padding: 5px 7px; font-size: 13px; font-family: var(--font); color: var(--text-dark); width: 100%; box-shadow: inset 0 1px 0 rgba(255,255,255,0.55); }
.jb-inp:hover { border-color: rgba(46,79,184,0.4); }
.jb-inp:focus { outline: none; border-color: var(--blue); background: rgba(255,255,255,0.92); }
.jb-inp.wert { font-weight: 700; color: var(--navy); }
.jb-inp.name { font-weight: 600; }
.jb-inp.rang { text-align: center; }
.jb-namewrap { display: flex; align-items: center; gap: 2px; }
.jb-profil { border: none; background: none; color: var(--blue); font-weight: 800; padding: 2px 6px; cursor: pointer; }

.jb-tabelle { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
.jb-thead { font-size: 11px; font-weight: 700; color: var(--gray); text-transform: uppercase; padding: 0 2px 4px; }
.jb-tabelle .jb-inp { border: 1px solid var(--card-border); }

.jb-protokoll { margin-top: 16px; }
.jb-protokoll h4 { margin: 0 0 6px; color: var(--navy); font-size: 14px; }
.jb-prot-row { font-size: 12px; color: var(--muted); padding: 2px 8px; }

@media (max-width: 900px) {
  .jb-row { grid-template-columns: 1fr 1fr; }
  .jb-thead { display: none; }
}

/* ============================================================
   Etappe 7 — Automatische Entwuerfe auf dem Startbildschirm
   ============================================================ */
.entwuerfe-liste { display: flex; flex-direction: column; gap: 8px; }
.entwurf-row { display: flex; gap: 8px; align-items: stretch; }
.entwurf-open {
  flex: 1; text-align: left; border: 1px solid rgba(27, 42, 107, 0.12);
  /* OHNE backdrop-filter: Entwurfsliste kann viele Einträge haben. */
  background: var(--glass-sheen-soft), var(--glass-bg-strong);
  border-radius: 14px; padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; cursor: pointer;
  box-shadow: var(--shadow-sm), var(--glass-highlight);
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.entwurf-open:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.entwurf-name { font-weight: 700; color: var(--navy); }
.entwurf-meta { color: var(--muted); font-size: 13px; }

/* ============================================================
   Sponsoren (Datenbank-Reiter)
   ============================================================ */
.sp-hinweis { flex: 1; min-width: 200px; margin: 0; color: var(--muted); font-size: 13px; }
.sp-inhalt { display: flex; flex-direction: column; gap: 18px; }
.sp-drop {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 120px; border: 2px dashed var(--card-border); border-radius: 12px;
  background: #FAFBFD; color: var(--muted); cursor: pointer; text-align: center; padding: 16px;
  transition: border-color .15s, background-color .15s;
}
.sp-drop:hover, .sp-drop.dragging { border-color: var(--navy); background: var(--placeholder-bg); }
.sp-drop-hint { pointer-events: none; font-size: 14px; }
.sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.sp-tile {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px;
  /* OHNE backdrop-filter: Sponsoren-Raster kann viele Kacheln enthalten. */
  background: var(--glass-sheen), var(--glass-bg-strong);
  border: 1px solid var(--glass-border); border-radius: 14px; padding: 16px 12px;
  box-shadow: var(--shadow-sm), var(--glass-highlight);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.sp-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md), var(--glass-highlight); }
.sp-logo { max-width: 100%; max-height: 74px; object-fit: contain; }
.sp-name { font-size: 12px; color: var(--muted); text-align: center; word-break: break-word; }
.sp-del {
  position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; line-height: 1;
  border: none; border-radius: 50%; background: var(--red); color: #fff; font-weight: 700; cursor: pointer;
}
.sp-del:hover { filter: brightness(.92); }

/* Sponsorenliste (untereinander) + Profil */
.sp-open { flex-direction: row !important; align-items: center; gap: 14px; }
.sp-open-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sp-logo-mini { width: 64px; height: 44px; object-fit: contain; flex: none; }
.sp-profil-logo {
  display: flex; align-items: center; justify-content: center;
  min-height: 110px; background: #fff; border: 1px solid var(--card-border);
  border-radius: 12px; padding: 14px; margin-bottom: 6px;
}
.sp-profil-logo img { max-width: 100%; max-height: 90px; object-fit: contain; }
.sp-profil-logo-img { max-width: 100%; max-height: 90px; object-fit: contain; }
.sp-kategorien { display: flex; gap: 22px; flex-wrap: wrap; padding: 4px 0; }
.modal-actions-split { display: flex; align-items: center; gap: 10px; }
.modal-actions-split .spacer { flex: 1; }
.btn-danger { background: var(--red); color: #fff; border-color: var(--red); }
.btn-danger:hover { filter: brightness(.93); }

/* ============================================================
   Jahresbulletin — Neuaufbau (6 Kacheln)
   ============================================================ */
.jb-h2 { font-size: 22px; font-weight: 900; color: var(--navy); margin: 4px 0 16px; }
.jb-kachel-kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.jb-kachel-titel { font-size: 20px; font-weight: 900; color: var(--navy); margin: 0; }
.jb-saison-chips { margin-bottom: 10px; }
.jb-neue-saison { font-weight: 800; }
.jb-wert { font-weight: 700; color: var(--navy); }

/* Grid-Spalten der Kachel-Tabellen (thead + rows teilen sich die Klasse) */
.jb-bl-grid  { display: grid; grid-template-columns: 0.5fr 1.6fr 0.5fr 0.6fr 0.9fr 1.4fr 0.9fr 0.9fr; gap: 6px; align-items: center; }
.jb-sm-grid  { display: grid; grid-template-columns: 0.5fr 1.5fr 0.7fr 1.1fr 0.9fr 1.6fr 0.9fr 0.9fr; gap: 6px; align-items: center; }
.jb-rek-grid { display: grid; grid-template-columns: 1.4fr 1.6fr 0.9fr 0.6fr; gap: 6px; align-items: center; }
.jb-ew-grid  { display: grid; grid-template-columns: 0.5fr 0.9fr 1.6fr 0.6fr; gap: 6px; align-items: center; }
.jb-row.jb-bl-grid span, .jb-row.jb-sm-grid span,
.jb-row.jb-rek-grid span, .jb-row.jb-ew-grid span {
  /* Nie abschneiden («…»): zu langer Text bricht auf mehrere Zeilen um.
     min-width:0 löst die Grid-Zelle aus ihrer Mindestbreite, damit der
     Umbruch überhaupt greifen kann. */
  font-size: 14px; min-width: 0; overflow-wrap: anywhere;
}
.jb-row.jb-bl-grid, .jb-row.jb-sm-grid, .jb-row.jb-rek-grid, .jb-row.jb-ew-grid {
  padding: 5px 6px; border-radius: 8px; border: 1px solid var(--glass-border);
  /* OHNE backdrop-filter: eine Tabelle hat viele Zeilen; ein Blur pro Zeile war
     die Hauptursache für Ruckeln/Absturz. Solider, leicht transparenter Ton. */
  background: var(--glass-sheen-soft), var(--row-bg-solid);
  box-shadow: var(--shadow-sm), var(--glass-highlight);
}

/* Grid-Spalten der BEARBEITBAREN Kachel-Tabellen (mit ✕-Spalte am Ende) */
.jb-bl-egrid  { display: grid; grid-template-columns: 0.5fr 1.6fr 0.5fr 0.6fr 0.9fr 1.4fr 0.9fr 0.9fr auto; gap: 6px; align-items: center; }
.jb-sm-egrid  { display: grid; grid-template-columns: 0.5fr 1.5fr 0.7fr 1.1fr 0.9fr 1.6fr 0.9fr 0.9fr auto; gap: 6px; align-items: center; }
.jb-rek-egrid { display: grid; grid-template-columns: 1.4fr 1.6fr 0.9fr 0.6fr auto; gap: 6px; align-items: center; }
.jb-ew-egrid  { display: grid; grid-template-columns: 0.5fr 0.9fr 1.6fr 0.6fr auto; gap: 6px; align-items: center; }
/* Gruppierte Bereiche (International, Mille): Rang·Athlet·Jg·Kat·Disziplin·
   Resultat·Wettkampf·Ort·Bemerkung·✕ */
.jb-grp-egrid { display: grid; gap: 6px; align-items: center;
  grid-template-columns: 0.5fr 1.5fr 0.5fr 0.7fr 1.1fr 0.9fr 1.4fr 1fr 1.2fr auto; }
/* Kids-Cup-Blöcke: nur Rang / Athlet:in bzw. Team / Kategorie. */
.jb-kc-egrid { display: grid; gap: 6px; align-items: center;
  grid-template-columns: 0.5fr 1.8fr 0.9fr auto; }
/* Alle Platzierungen (Schweizermeisterschaften): Rang · Disziplin · Leistung · ✕ */
.jb-sma-egrid { display: grid; gap: 6px; align-items: center;
  grid-template-columns: 0.5fr 2fr 1fr auto; }
.jb-row.jb-bl-egrid, .jb-row.jb-sm-egrid, .jb-row.jb-sma-egrid, .jb-row.jb-rek-egrid, .jb-row.jb-ew-egrid,
.jb-row.jb-grp-egrid, .jb-row.jb-kc-egrid {
  padding: 4px 6px; border-radius: 8px; border: 1px solid var(--glass-border);
  /* OHNE backdrop-filter (siehe schreibgeschützte Zeilen oben). */
  background: var(--glass-sheen-soft), var(--row-bg-solid);
  box-shadow: var(--shadow-sm), var(--glass-highlight);
}
.jb-thead.jb-bl-egrid span, .jb-thead.jb-sm-egrid span, .jb-thead.jb-sma-egrid span,
.jb-thead.jb-rek-egrid span, .jb-thead.jb-ew-egrid span,
.jb-thead.jb-grp-egrid span, .jb-thead.jb-kc-egrid span { align-self: end; }

/* Athlet:innen-Block je Meisterschaft (Alle Platzierungen) */
.jb-sma-meister { margin-bottom: 10px; }
.jb-sma-block { margin: 6px 0 10px; padding: 8px 10px; border-radius: 10px;
  border: 1px solid var(--glass-border); background: var(--row-bg-solid);
  box-shadow: var(--shadow-sm); }
.jb-sma-kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.jb-sma-name { font-weight: 800; color: var(--navy); font-size: 15px; }
.jb-sma-jg { color: var(--gray); font-size: 13px; }
.jb-sma-kopf .jb-inp.name { flex: 1; font-weight: 700; }
.jb-sma-jginp { max-width: 90px; }
.jb-sma-kat { font-weight: 800; color: var(--navy); }
.jb-sma-meta { color: var(--gray); font-weight: 600; font-size: 13px; }

/* Standings — Rang · Name · Anzahl Wettkämpfe · (▾ Detail) · Werkzeuge */
.standings-suchleiste { margin: 6px 0 10px; }
.standings-suche { width: 100%; box-sizing: border-box; padding: 8px 12px;
  border-radius: 10px; border: 1px solid var(--glass-border);
  background: var(--row-bg-solid); color: inherit; font-size: 14px; }
.standings-suche::placeholder { color: var(--gray); }
.standings-suche:focus { outline: none; border-color: var(--navy); }
.standings-grid { display: grid; gap: 6px; align-items: center;
  grid-template-columns: 0.6fr 1.8fr 0.7fr 0.9fr auto auto; }
.standings-grid.ro { grid-template-columns: 0.6fr 1.8fr 0.7fr 0.9fr auto; }
.jb-row.standings-grid { padding: 4px 6px; border-radius: 8px; border: 1px solid var(--glass-border);
  background: var(--glass-sheen-soft), var(--row-bg-solid);
  box-shadow: var(--shadow-sm), var(--glass-highlight); }
.jb-thead.standings-grid span { align-self: end; }
.standings-rang { font-weight: 700; color: var(--gray); padding-left: 4px; }
.jb-row.jb-gold .standings-rang, .jb-row.jb-silber .standings-rang,
.jb-row.jb-bronze .standings-rang { font-weight: 900; color: var(--navy); }
.standings-mehr { justify-self: center; padding: 0 4px; }
/* Aufklappbare Wettkampf-Detailliste einer Person */
.standings-detail { margin: 2px 0 8px; padding: 8px 10px; border-radius: 8px;
  border: 1px dashed var(--card-border); background: var(--row-bg-solid); font-size: 13px; }
.standings-detail-kopf { font-weight: 700; color: var(--gray); margin-bottom: 6px;
  text-transform: uppercase; font-size: 11px; letter-spacing: .02em; }
.standings-detail-row { display: grid; grid-template-columns: 5.5em 1fr 1fr; gap: 8px;
  padding: 2px 0; border-top: 1px solid var(--card-border); }
.standings-detail-row .d { color: var(--gray); }
.standings-detail-row .o { color: var(--gray); }
.standings-fehler { margin-top: 10px; font-size: 13px; color: var(--gray); }
.standings-fehler summary { cursor: pointer; }

/* Werkzeug-Zelle am Zeilenende (Löschen ✕ + Einfrieren) — belegt die eine
   auto-Spalte, damit die Raster unverändert bleiben. */
.zeilen-tools { display: flex; gap: 4px; align-items: center; justify-content: flex-end; }

/* Eingefrorene (finale) Zeilen: dezenter Navy-Balken links; werden beim
   Aktualisieren nicht überschrieben. */
.jb-row.eingefroren { border-color: var(--navy); box-shadow: inset 3px 0 0 var(--navy), var(--shadow-sm); }
.lb-row.eingefroren { background: #EAF2FB; border-radius: 8px; box-shadow: inset 3px 0 0 var(--navy); }
/* Blocktitel als Link auf die Wettkampf-Website. */
.jb-disc-link { color: var(--navy); text-decoration: none; }
.jb-disc-link:hover { text-decoration: underline; }

/* SM Top 8 — Medaillenfarben */
.jb-row.jb-gold   { background: #FCF3D0; border-color: #E6C84B; }
.jb-row.jb-silber { background: #EEF1F4; border-color: #C4CBD3; }
.jb-row.jb-bronze { background: #F5E7D8; border-color: #D9A878; }
.jb-row.jb-gold .jb-rang, .jb-row.jb-silber .jb-rang, .jb-row.jb-bronze .jb-rang { font-weight: 900; color: var(--navy); }
/* Unsichere Zeilen (aus PDF-Ranglisten) — zur Prüfung markiert */
.jb-row.jb-unsicher { background: #FFF7E0; border-color: #E6B800; border-left: 3px solid #E6B800; }
/* Vereinsrekord im laufenden Jahr erzielt — ganze Zeile markiert */
.jb-row.jb-aktuell { background: #E7F6EC; border-color: #66BB6A; border-left: 3px solid #2E9E4F; }

/* Auto-Speichern-Status im Kachel-Kopf (kein «Speichern»-Knopf mehr) */
.jb-save-status { font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.jb-save-status.speichert { color: var(--muted); }
.jb-save-status.ok { color: #2E7D32; }
.jb-save-status.fehler { color: var(--red); }

/* Generischer Auto-Speichern-Status (programmweit: Athleten, Wettkämpfe, Sponsoren) */
.save-status { font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.save-status.speichert { color: var(--muted); }
.save-status.ok { color: #2E7D32; }
.save-status.fehler { color: var(--red); }
:root[data-theme="dark"] .save-status.ok { color: #7BD693; }

/* Segmentierte Umschalter (Vereinsrekorde) — Optik wie Instagram National/International */
.jb-seg-stack { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; max-width: 360px; }
.jb-seg { display: flex; gap: 10px; }
.jb-seg-btn {
  flex: 1; padding: 12px; font: inherit; font-weight: 700; cursor: pointer;
  border: 2px solid var(--navy); border-radius: 12px; background: rgba(255,255,255,0.75); color: var(--navy);
  transition: background 0.2s var(--ease), color 0.2s var(--ease),
              transform 0.15s var(--ease), box-shadow 0.2s var(--ease);
}
.jb-seg-btn:hover { background: #F2F4FB; transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.jb-seg-btn.active { background: var(--grad-primary); border-color: transparent; color: #fff; box-shadow: 0 4px 14px rgba(27,42,107,0.28); }

.jb-edit-leiste { margin-top: 12px; }

/* Export-Dialog */
.jb-export-modal { min-width: 280px; }
.jb-export-formate { display: flex; gap: 10px; margin: 10px 0 4px; }

/* Checkbox mit Beschriftung (Wettkampf-Editor: International / Meisterschaft). */
.chk-label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 14px; color: var(--text-dark); }
.chk-label .chk { width: 18px; height: 18px; accent-color: var(--blue); margin: 0; }
.form-checks { gap: 28px; align-items: center; }
/* «Bearbeiten»-Chip (Saisons anlegen/umbenennen) rechts in der Chip-Zeile. */
.chip-edit { margin-left: auto; }
.saison-edit-row { align-items: center; }
.saison-edit-liste { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
/* Saison-Verwaltung: je Saison eine Karte mit Anzeigename + Details. */
.saison-verwalten { min-width: 460px; }
.saison-card {
  border: 1px solid var(--rand, #D1D5DB); border-radius: 12px;
  padding: 12px 14px; background: rgba(0,0,0,0.015);
}
.saison-card-head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;
}
.saison-key {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px;
  color: var(--grau, #6B7280); background: rgba(0,0,0,0.05);
  padding: 3px 8px; border-radius: 6px;
}
.saison-name-row, .saison-key-row { align-items: center; gap: 8px; }
.saison-name-row .text-input, .saison-name-row input { flex: 1; }
.saison-advanced { margin-top: 8px; }
.saison-advanced > summary {
  cursor: pointer; font-size: 13px; color: var(--grau, #6B7280); user-select: none;
}
.saison-advanced[open] > summary { margin-bottom: 6px; }

/* ============================================================
   Bewegung — schlichte, moderne Animationen (nur Oberfläche)
   Betrifft ausschliesslich die Browser-Darstellung, nicht die
   erzeugten PDFs/JPEGs. Am Ende wird «prefers-reduced-motion»
   respektiert: dann laufen keine Animationen.
   ============================================================ */
@keyframes lvlFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes lvlFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes lvlPop {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

/* Seitenübergang: Beim Wechsel bauen sich die Blöcke sanft von unten auf.
   Die Klasse .view-enter wird bei jeder Navigation neu gesetzt (app.js). */
#view.view-enter > *:not(.tiles) { animation: lvlFadeUp 0.42s var(--ease) both; }
#view.view-enter > *:nth-child(2) { animation-delay: 0.04s; }
#view.view-enter > *:nth-child(3) { animation-delay: 0.08s; }
#view.view-enter > *:nth-child(4) { animation-delay: 0.12s; }
#view.view-enter > *:nth-child(n+5) { animation-delay: 0.16s; }

/* Startkacheln kaskadieren einzeln herein. */
#view.view-enter .tiles { animation: lvlFadeIn 0.3s var(--ease) both; }
.tiles .tile { animation: lvlFadeUp 0.5s var(--ease) both; }
.tiles .tile:nth-child(1) { animation-delay: 0.05s; }
.tiles .tile:nth-child(2) { animation-delay: 0.11s; }
.tiles .tile:nth-child(3) { animation-delay: 0.17s; }
.tiles .tile:nth-child(4) { animation-delay: 0.23s; }
.tiles .tile:nth-child(5) { animation-delay: 0.29s; }
.tiles .tile:nth-child(n+6) { animation-delay: 0.33s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Dunkles Erscheinungsbild (Design-Menue: «Dunkel»)
   Betrifft NUR die Browser-Oberflaeche. Die erzeugten Dateien
   (PDF ueber Playwright, Instagram-JPEGs ueber Canvas) bleiben hell
   und unveraendert — sie werden getrennt gerendert.

   Aufbau: Zuerst werden die zentralen Design-Tokens umgedreht, wodurch
   praktisch alle Milchglas-Flaechen, Felder, Schatten und Texte automatisch
   dunkel werden (die Oberflaeche ist durchgaengig ueber diese Tokens gebaut).
   Danach folgen gezielte Korrekturen fuer die wenigen Stellen, die Farben
   fest verdrahtet haben (weisse Pillen, navyfarbene Baender u. Ae.).
   ============================================================ */
:root[data-theme="dark"] {
  --navy: #9DB0F2;   /* Ueberschriften/Links/Akzente – aufgehellt fuer dunklen Grund */
  --blue: #7E9BEF;
  --yellow: #F5C400;
  --gray: #9AA3B8;
  --red: #F0685A;
  --text-dark: #E7EAF3;
  --card-border: #3B4356;
  --placeholder-bg: #2A3142;

  --field-bg: rgba(255, 255, 255, 0.06);
  --field-border: rgba(255, 255, 255, 0.15);
  --field-bg-solid: rgba(255, 255, 255, 0.09);
  --row-bg-solid: rgba(255, 255, 255, 0.06);

  --page-bg: #10131C;
  --panel-bg: #1A1F2C;
  --muted: #9AA3B8;

  --grad-primary: linear-gradient(135deg, #3A5FCE 0%, #24347F 100%);
  --grad-primary-hover: linear-gradient(135deg, #4A6FDE 0%, #2C3E93 100%);
  --grad-accent: linear-gradient(135deg, #7E9BEF 0%, #3A5FCE 55%, #F5C400 200%);

  /* Milchglas jetzt aus dunklem, halbtransparentem Ton – der Weichzeichner
     verwischt den dunklen Seitengrund statt Weiss. */
  --glass-bg: rgba(30, 37, 54, 0.44);
  --glass-bg-strong: rgba(36, 44, 63, 0.58);
  --glass-bg-solid: rgba(24, 30, 44, 0.88);
  --glass-border: rgba(255, 255, 255, 0.10);

  --glass-sheen: linear-gradient(150deg,
                   rgba(255, 255, 255, 0.10) 0%,
                   rgba(255, 255, 255, 0.03) 34%,
                   rgba(255, 255, 255, 0) 60%);
  --glass-sheen-soft: linear-gradient(150deg,
                   rgba(255, 255, 255, 0.07) 0%,
                   rgba(255, 255, 255, 0.02) 42%,
                   rgba(255, 255, 255, 0) 68%);

  --glass-highlight: inset 0 1px 1px rgba(255, 255, 255, 0.10),
                     inset 0 0 0 1px rgba(255, 255, 255, 0.05),
                     inset 0 -12px 24px rgba(0, 0, 0, 0.14),
                     inset 0 -1px 3px rgba(0, 0, 0, 0.30),
                     0 0 0 1px rgba(0, 0, 0, 0.35);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30), 0 3px 10px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 6px 22px rgba(0, 0, 0, 0.42), 0 2px 6px rgba(0, 0, 0, 0.30);
  --shadow-lg: 0 22px 55px rgba(0, 0, 0, 0.58), 0 6px 16px rgba(0, 0, 0, 0.42);
  --ring: 0 0 0 3px rgba(126, 155, 239, 0.35);
}

/* Seitengrund: ruhiger dunkler Verlauf statt des hellen. */
:root[data-theme="dark"] body::before {
  background: linear-gradient(160deg, #131824 0%, #10131C 52%, #0C0F17 100%);
}
/* Sport-Textur nur ganz dezent aufhellen, damit sie auf Dunkel sichtbar bleibt. */
:root[data-theme="dark"] body::after { opacity: 0.05; }

/* Kopf-/Pfad-Knoepfe: statt weisser Pille eine helle Glasfoliekante. */
:root[data-theme="dark"] .appheader .crumb,
:root[data-theme="dark"] .appheader .design-btn {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--text);
}
:root[data-theme="dark"] .appheader .crumb:hover,
:root[data-theme="dark"] .appheader .design-btn:hover {
  background: rgba(255, 255, 255, 0.13);
}
:root[data-theme="dark"] .appheader .crumb-sep {
  color: var(--text);
}
/* Aktuelle Ebene im Dunkelmodus: helle, gefüllte Pille zur klaren Abhebung. */
:root[data-theme="dark"] .appheader .crumb-current {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.92);
  color: var(--navy);
}
:root[data-theme="dark"] .appheader .crumb-current:hover {
  background: #fff;
  color: var(--navy);
}

/* Standard-Knoepfe, Reiter, Chips: helle Pillen -> dunkle Glaspillen. */
:root[data-theme="dark"] .btn,
:root[data-theme="dark"] .tab,
:root[data-theme="dark"] .chip {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--text-dark);
}
:root[data-theme="dark"] .btn:hover,
:root[data-theme="dark"] .tab:hover,
:root[data-theme="dark"] .chip:hover { background: rgba(255, 255, 255, 0.13); }
:root[data-theme="dark"] .btn-remove,
:root[data-theme="dark"] .btn-icon,
:root[data-theme="dark"] .btn-schloss {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--card-border);
}

/* Segment-Umschalter (Vereinsrekorde) */
:root[data-theme="dark"] .jb-seg-btn { background: rgba(255, 255, 255, 0.06); }
:root[data-theme="dark"] .jb-seg-btn:hover { background: rgba(255, 255, 255, 0.13); }
/* Der aktive Umschalter braucht im Dark-Mode eine eigene Regel: die obige
   .jb-seg-btn-Regel ist spezifischer als «.jb-seg-btn.active» und würde sonst
   den Verlauf überdecken – der gewählte Knopf sähe dann aus wie ein inaktiver,
   sodass ein Wechsel scheinbar «nichts tut». */
:root[data-theme="dark"] .jb-seg-btn.active {
  background: var(--grad-primary); border-color: transparent; color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}
:root[data-theme="dark"] .design-seg { background: rgba(255, 255, 255, 0.05); }

/* Eingabefelder: Fokuszustand nicht Weiss, sondern helle Glasflaeche. */
:root[data-theme="dark"] .inp:focus,
:root[data-theme="dark"] .lb-inp:focus,
:root[data-theme="dark"] .jb-inp:focus { background: rgba(255, 255, 255, 0.14); }
:root[data-theme="dark"] .foto-bild.drag { background-color: rgba(126, 155, 239, 0.18); }

/* Sticky-Koepfe (Profil/Editor): fast deckender dunkler Ton statt Hellgrau. */
:root[data-theme="dark"] .profil-kopf-sticky,
:root[data-theme="dark"] .editor-aktionen { background: rgba(16, 19, 28, 0.97); }

/* Farbige Baender/Pillen mit fest gesetzter weisser Schrift auf gefuelltem Navy:
   in Dunkel als getoenter Chip mit heller Schrift. */
:root[data-theme="dark"] .lb-subhead {
  background: rgba(126, 155, 239, 0.16); color: var(--text-dark);
}
:root[data-theme="dark"] .tag-m {
  background: rgba(126, 155, 239, 0.20); color: var(--navy);
}
:root[data-theme="dark"] .tag-i {
  background: rgba(240, 104, 90, 0.22); color: #F7A79C;
}

/* Limitenbulletin-Kacheln: getoente Kopfbaender statt heller Flaechen. */
:root[data-theme="dark"] .lb-kachel-kopf {
  background: linear-gradient(135deg, rgba(126, 155, 239, 0.14), rgba(126, 155, 239, 0.07));
}
:root[data-theme="dark"] .lb-kachel.international .lb-kachel-kopf,
:root[data-theme="dark"] .lb-kachel.international .lb-kmeta,
:root[data-theme="dark"] .lb-kachel.international .lb-kachel-kopf + .lb-kmeta {
  background: rgba(240, 104, 90, 0.12);
}
:root[data-theme="dark"] .lb-kachel-kopf + .lb-kmeta { background: rgba(126, 155, 239, 0.10); }
:root[data-theme="dark"] .lb-kachel-fuss,
:root[data-theme="dark"] .lb-eintrag { border-color: var(--card-border); }
:root[data-theme="dark"] .lb-row.neu { background: rgba(245, 196, 0, 0.12); }
:root[data-theme="dark"] .lb-row.geaendert { background: rgba(126, 155, 239, 0.14); }
:root[data-theme="dark"] .lb-row.eingefroren { background: rgba(126, 155, 239, 0.16); box-shadow: inset 3px 0 0 rgba(126, 155, 239, 0.85); }
:root[data-theme="dark"] .jb-row.eingefroren { border-color: rgba(126, 155, 239, 0.7); box-shadow: inset 3px 0 0 rgba(126, 155, 239, 0.85); }

/* Jahresbulletin: Medaillen-/Markierungszeilen getoent statt hell. */
:root[data-theme="dark"] .jb-row.jb-gold { background: rgba(230, 200, 75, 0.14); border-color: rgba(230, 200, 75, 0.40); }
:root[data-theme="dark"] .jb-row.jb-silber { background: rgba(196, 203, 211, 0.12); border-color: rgba(196, 203, 211, 0.34); }
:root[data-theme="dark"] .jb-row.jb-bronze { background: rgba(217, 168, 120, 0.15); border-color: rgba(217, 168, 120, 0.40); }
:root[data-theme="dark"] .jb-row.jb-unsicher { background: rgba(230, 184, 0, 0.12); border-color: rgba(230, 184, 0, 0.5); border-left-color: rgba(230, 184, 0, 0.8); }
:root[data-theme="dark"] .jb-row.jb-aktuell { background: rgba(46, 158, 79, 0.16); border-color: rgba(102, 187, 106, 0.45); border-left-color: rgba(102, 187, 106, 0.85); }
:root[data-theme="dark"] .jb-save-status.ok { color: #7BD693; }

/* Sponsoren-Ablage/Logokarten: helle Flaechen -> dunkle Glasflaechen. */
:root[data-theme="dark"] .sp-drop { background: rgba(255, 255, 255, 0.04); }
:root[data-theme="dark"] .sp-profil-logo { background: rgba(255, 255, 255, 0.06); }

/* Saison-Verwaltung: die schwarzen Aufhell-Toene auf dunklem Grund invertieren. */
:root[data-theme="dark"] .saison-card { background: rgba(255, 255, 255, 0.04); }
:root[data-theme="dark"] .saison-key { background: rgba(255, 255, 255, 0.08); }

/* «Verknuepft»-Status gruen aufhellen. */
:root[data-theme="dark"] .link-ok { color: #4ADE80; }

/* ============================================================
   Visitor-Modus — nur betrachten, nichts bearbeiten
   ============================================================ */
/* Der Visitor-Modus wird ohne eigenen Kopf-Knopf gesteuert: er ist im
   Startseiten-Bereich «Leistungen» automatisch aktiv (siehe views/start.js). */

/* Schreibgeschützte Zellen (Visitor-Modus): reine Textdarstellung statt
   Eingabefeld. Gleiche Ausrichtung/Grösse wie die Eingabefelder, damit die
   Spalten der Kachel-Tabellen sauber stehen. */
.jb-val, .lb-val {
  font-size: 13px; padding: 5px 7px; color: var(--text-dark);
  /* Nie abschneiden («…»): zu langer Text (Meisterschaftsname, Disziplin …)
     bricht um statt mit «…» zu enden. min-width:0 + overflow-wrap lassen die
     Grid-Zelle schmaler werden und den Umbruch greifen. */
  min-width: 0; overflow-wrap: anywhere;
}
.jb-val.wert, .lb-val.wert { font-weight: 700; color: var(--navy); }
.jb-val.name, .lb-val.name { font-weight: 600; }
.jb-val.rang, .lb-val.rang { text-align: center; }
:root[data-theme="dark"] .jb-val.wert, :root[data-theme="dark"] .lb-val.wert { color: var(--text-dark); }

/* Visitor-Kachel (Jahresbulletin): je Disziplin/Meisterschaft/Block eine Kachel
   im Stil der Instagram-«Wettkampf»-Kachel (Gradient-Glas, Titel mit Navy-Linie).
   OHNE backdrop-filter: pro Ansicht entstehen viele solche Kacheln (siehe
   Liquid-Glass-Performance) — solider, leicht transparenter Glaston. */
.jb-vk {
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: 16px 16px 14px;
  margin-bottom: 16px;
  background:
    linear-gradient(160deg, rgba(46, 79, 184, 0.10) 0%, rgba(255, 255, 255, 0) 55%),
    var(--glass-bg-strong);
  box-shadow: var(--shadow-md), var(--glass-highlight);
}
.jb-vk-titel {
  font-weight: 800; font-size: 13px; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--navy);
  padding-bottom: 8px; margin-bottom: 12px;
  border-bottom: 2px solid var(--navy);
}
.jb-vk-titel .jb-disc-link { color: var(--navy); }
/* Die Tabelle sitzt bündig in der Kachel (kein doppelter Abstand unten). */
.jb-vk .jb-tabelle { margin-bottom: 0; }
:root[data-theme="dark"] .jb-vk {
  background:
    linear-gradient(160deg, rgba(126, 155, 239, 0.12) 0%, rgba(255, 255, 255, 0) 55%),
    var(--glass-bg-strong);
}
:root[data-theme="dark"] .jb-vk-titel { border-bottom-color: rgba(126, 155, 239, 0.7); }

/* Visitor-Modus: die Meisterschaftskarten des Limitenbulletins etwas näher an
   den Jahresbulletin-Kachel-Look bringen — ruhiger, weichere Ecken, Titel in
   Grossbuchstaben mit dezenter Sperrung. Nur im Visitor-Modus (reines
   Betrachten); die Bearbeitungsansicht bleibt unverändert. */
:root[data-visitor="1"] .lb-kachel { border-radius: 20px; }
:root[data-visitor="1"] .lb-kname { text-transform: uppercase; letter-spacing: 1px; font-size: 14px; }
:root[data-visitor="1"] .lb-kachel-kopf { padding: 14px 18px; }