/**
 * Öffentliche Seiten: Kopfzeile, Hero, Kennzahlen, Kacheln, Fußzeile.
 * Farben und Maße nur aus theme.css. Kopf- und Fußzeile sind in beiden Themes dunkel (das weiße Logo braucht dunklen Grund).
 */

.tb-wrap { max-width: 72rem; margin: 0 auto; padding: 0 var(--space-md); }
@media (min-width: 48rem) { .tb-wrap { padding: 0 var(--space-xl); } }


/* ---------------------------------------------------------------- Schwimmbahnleine (Trennlinie) */

/* Wellenkillerleine wie im Wettkampfbecken: durchgehendes Stahlseil, darauf einzelne tonnenförmige Schwimmkörper
   (<i>-Elemente in templates/layout.php) mit kleinen Lücken, in Farbabschnitten zu je zehn Stück.
   Liegt halb über der Kante zur Fußzeile (Wasseroberfläche). Jeder Schwimmkörper hebt und senkt sich leicht versetzt,
   so läuft eine Welle die Leine entlang; bei "Bewegung reduzieren" steht sie still (siehe base.css). */
.tb-rope {
  position: relative; z-index: 1; top: -9px; margin-bottom: -9px;
  display: flex; gap: 4px; height: 18px; padding-left: 2px; overflow: hidden;
}
/* Seil */
.tb-rope::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; transform: translateY(-50%);
  background: color-mix(in srgb, var(--color-black) 75%, var(--color-white));
  box-shadow: 0 6px 8px -3px color-mix(in srgb, var(--color-black) 80%, transparent);
}
/* Schwimmkörper: Grundfarbe Weiß, darüber Rundung (Licht oben, Schatten unten) und Wölbung (Glanz in der Mitte) */
.tb-rope i {
  position: relative; flex: none; width: 16px; height: 18px; border-radius: 4px / 6px;
  background-color: var(--color-white);
  background-image:
    linear-gradient(180deg,
      color-mix(in srgb, var(--color-white) 55%, transparent) 0%,
      color-mix(in srgb, var(--color-white) 8%, transparent) 35%,
      transparent 55%,
      color-mix(in srgb, var(--color-black) 50%, transparent) 100%),
    linear-gradient(90deg,
      color-mix(in srgb, var(--color-black) 30%, transparent) 0%,
      color-mix(in srgb, var(--color-white) 25%, transparent) 30%,
      transparent 55%,
      color-mix(in srgb, var(--color-black) 30%, transparent) 100%);
  animation: tb-rope-wave 2.4s ease-in-out infinite;
}
.tb-rope i:nth-child(40n+1),
.tb-rope i:nth-child(40n+2),
.tb-rope i:nth-child(40n+3),
.tb-rope i:nth-child(40n+4),
.tb-rope i:nth-child(40n+5),
.tb-rope i:nth-child(40n+6),
.tb-rope i:nth-child(40n+7),
.tb-rope i:nth-child(40n+8),
.tb-rope i:nth-child(40n+9),
.tb-rope i:nth-child(40n+10) { background-color: var(--color-primary-light); }
.tb-rope i:nth-child(40n+21),
.tb-rope i:nth-child(40n+22),
.tb-rope i:nth-child(40n+23),
.tb-rope i:nth-child(40n+24),
.tb-rope i:nth-child(40n+25),
.tb-rope i:nth-child(40n+26),
.tb-rope i:nth-child(40n+27),
.tb-rope i:nth-child(40n+28),
.tb-rope i:nth-child(40n+29),
.tb-rope i:nth-child(40n+30) { background-color: var(--color-accent); }
.tb-rope i:nth-child(12n+1) { animation-delay: -0.0s; }
.tb-rope i:nth-child(12n+2) { animation-delay: -0.2s; }
.tb-rope i:nth-child(12n+3) { animation-delay: -0.4s; }
.tb-rope i:nth-child(12n+4) { animation-delay: -0.6s; }
.tb-rope i:nth-child(12n+5) { animation-delay: -0.8s; }
.tb-rope i:nth-child(12n+6) { animation-delay: -1.0s; }
.tb-rope i:nth-child(12n+7) { animation-delay: -1.2s; }
.tb-rope i:nth-child(12n+8) { animation-delay: -1.4s; }
.tb-rope i:nth-child(12n+9) { animation-delay: -1.6s; }
.tb-rope i:nth-child(12n+10) { animation-delay: -1.8s; }
.tb-rope i:nth-child(12n+11) { animation-delay: -2.0s; }
.tb-rope i:nth-child(12n+12) { animation-delay: -2.2s; }
@keyframes tb-rope-wave { 0%, 100% { transform: translateY(-1.5px); } 50% { transform: translateY(1.5px); } }

/* ---------------------------------------------------------------- Kopfzeile */

.tb-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--color-black) 92%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--on-dark-line);
  color: var(--color-white);
}
.tb-header__inner {
  display: flex; align-items: center; gap: var(--space-md);
  max-width: 72rem; margin: 0 auto; padding: 0 var(--space-md); min-height: 4rem;
}
@media (min-width: 48rem) { .tb-header__inner { padding: 0 var(--space-xl); } }

.tb-brand { display: flex; align-items: center; margin-right: auto; }
/* Hinweis bei nicht erreichbarer Datenbank (templates/layout.php), Teil der mitlaufenden Kopfzeile. Volle Warnfarbe mit schwarzer Schrift
   in beiden Designs: eine Mischung mit dem dunklen Grund ergäbe ein schmutziges Braun */
.tb-dbnotice { margin: 0; padding: var(--space-xs) var(--space-md); text-align: center; font-size: 0.85rem; line-height: 1.4; color: var(--color-black); background: var(--color-warning); }
.tb-brand img { height: 3.2rem; width: auto; margin: -0.4rem 0 -0.4rem -0.6rem; }
/* Website-Logo aus der Mediathek (SVG in der Seite, Domain\SiteLogo): Größe aus dem CSS, Farben je Darstellung */
.tb-sitelogo { display: block; width: auto; }
.tb-brand .tb-sitelogo { height: 2.6rem; }
.tb-sitelogo--primary [fill]:not([fill="none"]), .tb-sitelogo--duo [fill]:not([fill="none"]) { fill: var(--color-primary); }
.tb-sitelogo--duo .tb-logo__water { fill: var(--color-accent); }

.tb-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.tb-nav a {
  display: block; padding: 0.5rem 0.9rem; border-radius: var(--radius-full);
  color: var(--on-dark-muted); text-decoration: none; font-weight: 600;
}
.tb-nav a:hover { color: var(--on-dark); background: var(--on-dark-hover); }
.tb-nav a[aria-current="page"] { background: var(--color-white); color: var(--color-black); }
/* Kontakt steht oben im Menü nur im ausklappbaren Menü (Fußzeile und Kontaktseite bleiben) */
@media (min-width: 68.01rem) { .tb-nav__mobile { display: none; } }

/* Konto-Menü in der Kopfzeile (siehe .tb-account weiter unten) */
.tb-header__tools { display: flex; align-items: center; gap: var(--space-sm); margin-left: var(--space-sm); }
.tb-pushswitch { display: flex; align-items: center; gap: var(--space-md); margin: var(--space-md) 0 0; font-weight: 600; }
.tb-pushswitch[hidden] { display: none; }
@media (min-width: 48rem) {   /* Schalter oben rechts neben der Überschrift, nicht unter dem Einleitungstext */
  .tb-page--intro { position: relative; }
  .tb-page--intro > .tb-pushswitch { position: absolute; top: var(--space-page-top); right: var(--space-md); margin: 0; }
}
.tb-switch { position: relative; flex: none; width: 2.5rem; height: 1.5rem; padding: 0; border: 1px solid var(--border-color); border-radius: var(--radius-full); background: var(--bg-secondary); cursor: pointer; transition: background 0.2s; }
.tb-switch__knob { position: absolute; top: 2px; left: 2px; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--text-secondary); transition: transform 0.2s; }
.tb-switch[aria-checked="true"] { background: var(--color-primary); border-color: var(--color-primary); }
.tb-switch[aria-checked="true"] .tb-switch__knob { transform: translateX(1rem); background: var(--color-on-primary); }
.tb-switch:disabled { opacity: 0.6; cursor: progress; }
.tb-iconbtn--badged { position: relative; }
.tb-lockbadge { position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center; width: 1rem; height: 1rem; border-radius: 50%; background: var(--color-black); color: var(--color-white); box-shadow: 0 0 0 1px var(--on-dark-line-strong); }
.tb-lockbadge .tb-icon { width: 0.65rem; height: 0.65rem; }
.tb-admin-link--full .tb-iconbtn { color: var(--color-primary-light); box-shadow: inset 0 0 0 1.5px var(--color-primary); }

.tb-menu-btn {
  display: none;
  min-height: 2.75rem; padding: 0 var(--space-md);
  background: transparent; color: var(--color-white);
  border: 1px solid var(--on-dark-line-strong); border-radius: var(--radius-full);
  font: inherit; font-weight: 600; cursor: pointer;
}

@media (max-width: 68rem) {   /* neun Menüpunkte passen erst ab rund 1090 px in eine Zeile */
  .tb-header__inner { flex-wrap: wrap; }
  .js .tb-menu-btn { display: inline-flex; align-items: center; order: 2; }
  .tb-header__tools { order: 1; }
  .tb-nav { order: 3; }
  .js .tb-nav { display: none; width: 100%; padding-bottom: var(--space-md); }
  .js .tb-nav--open { display: block; }
  .tb-nav { width: 100%; padding-bottom: var(--space-sm); }
  .tb-nav ul { flex-direction: column; }
  .tb-nav a { padding: 0.75rem 0.9rem; }
}

/* ---------------------------------------------------------------- Hero */

.tb-hero {
  position: relative; display: flex; align-items: flex-end;
  min-height: min(58vh, 34rem);
  background: var(--color-black); color: var(--color-white); overflow: hidden;
}
/* Handy hochkant: Titelbild und Kennzahlen (.tb-home-top, pages/home.php) füllen genau den sichtbaren Bildschirm unter dem Kopf
   (4 rem plus 1 px Linie); die Kennzahlen behalten ihre Höhe, das Foto nimmt sich den Rest, mindestens 22 rem. svh: Höhe ohne die
   einblendbaren Browserleisten, ältere Browser nehmen vh. Gilt für jedes Modell, ohne feste Pixelwerte. */
@media (max-width: 47.99rem) and (orientation: portrait) {
  .tb-home-top { display: flex; flex-direction: column; min-height: calc(100vh - 4rem - 1px); min-height: calc(100svh - 4rem - 1px); }
  .tb-home-top > .tb-hero { flex: 1 1 auto; min-height: 18rem; }
}
.tb-hero__photo {
  position: absolute; inset: -4% 0; overflow: hidden; background: var(--color-black);
  animation: tb-surface 2.4s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
/*
 * Zwei Motive (Schwimmerin, Schwimmer) im Wechsel, 18 s je Umlauf: Das zweite liegt oben und wird mit einer weichen, leicht schrägen
 * Kante wie eine Welle über das erste gezogen und wieder zurück (Maske, dreifach breit, Lage animiert). Beide treiben dabei langsam
 * (Ken Burns, gegenläufig), das hereinkommende Bild leuchtet kurz auf. Ohne Bewegung (Systemeinstellung) bleibt das erste Bild stehen.
 */
.tb-hero__slide, .tb-hero__slide img { position: absolute; inset: 0; width: 100%; height: 100%; }
.tb-hero__slide img { object-fit: cover; object-position: 50% 42%; animation: tb-hero-drift 18s ease-in-out infinite alternate; }
.tb-hero__slide + .tb-hero__slide {
  -webkit-mask-image: linear-gradient(100deg, var(--palette-pure-black) 33%, transparent 50%); mask-image: linear-gradient(100deg, var(--palette-pure-black) 33%, transparent 50%);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0; mask-position: 100% 0;
  animation: tb-hero-sweep 18s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.tb-hero__slide + .tb-hero__slide img { object-position: 55% 40%; animation-name: tb-hero-drift-back; }
/* Breite Bildschirme: Motive größer und nach rechts gerückt (Bild breiter als die Fläche, links angelegt), links Platz für die Überschrift */
@media (min-width: 56rem) {
  .tb-hero__slide img { width: 112%; max-width: none; object-position: 0 44%; transform-origin: 70% 45%; }
  .tb-hero__slide + .tb-hero__slide img { width: 130%; object-position: 0 40%; }
}
@keyframes tb-hero-sweep {
  0%, 40% { -webkit-mask-position: 100% 0; mask-position: 100% 0; filter: brightness(1.35); }
  52% { -webkit-mask-position: 0 0; mask-position: 0 0; filter: brightness(1.1); }
  60%, 88% { -webkit-mask-position: 0 0; mask-position: 0 0; filter: none; }
  100% { -webkit-mask-position: 100% 0; mask-position: 100% 0; filter: none; }
}
@keyframes tb-hero-drift { from { transform: scale(1.02) translateX(0); } to { transform: scale(1.1) translateX(-1.5%); } }
@keyframes tb-hero-drift-back { from { transform: scale(1.1) translateX(-1.5%); } to { transform: scale(1.02) translateX(1%); } }
@media (prefers-reduced-motion: reduce) {
  .tb-hero__photo, .tb-hero__slide img { animation: none; }
  .tb-hero__slide + .tb-hero__slide { display: none; }
}
.tb-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--scrim-narrow-mid) 0%, var(--scrim-wide-start) 30%, transparent 55%),
    linear-gradient(180deg, var(--scrim-wide-start) 0%, var(--scrim-wide-mid) 35%, var(--scrim-wide-end) 100%);
}
@media (max-width: 55.99rem) {
  .tb-hero::after { background: linear-gradient(180deg, var(--scrim-narrow-start) 0%, var(--scrim-narrow-mid) 45%, var(--scrim-narrow-end) 100%); }
}
.tb-hero__inner {
  position: relative; z-index: 2; width: 100%; max-width: 72rem; margin: 0 auto;
  padding: var(--space-2xl) var(--space-md);
}
@media (min-width: 48rem) { .tb-hero__inner { padding: 5rem var(--space-xl) 5rem; } }

.tb-hero__title {
  max-width: 11ch; margin: 0; color: var(--color-white);
  font-size: clamp(2.8rem, 8vw, 6rem); line-height: 0.92;
  font-variation-settings: "wdth" 78;
  animation: tb-rise 1s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
/* Auf breiten Bildschirmen steht die Schwimmerin rechts: Headline in drei Zeilen, damit sie nicht überdeckt wird */
@media (min-width: 56rem) { .tb-hero__title { max-width: 5.2em; } }
.tb-hero__lead {
  max-width: 46ch; margin: var(--space-lg) 0 var(--space-lg);
  font-size: clamp(1.05rem, 2vw, 1.35rem); color: var(--on-dark-lead);
  animation: tb-fade 1s 0.6s both;
}
.tb-hero .tb-btn { animation: tb-fade 1s 0.8s both; }

@keyframes tb-surface { from { transform: scale(1.12); filter: brightness(0.4); } to { transform: none; filter: none; } }
@keyframes tb-rise { from { transform: translateY(40%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tb-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------------------------------------------------------------- Kennzahlen */

.tb-facts { background: var(--bg-secondary); border-bottom: 1px solid var(--border-color); }
.tb-facts__list {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg);
  max-width: 72rem; margin: 0 auto; padding: var(--space-xl) var(--space-md);
}
@media (min-width: 48rem) { .tb-facts__list { grid-template-columns: repeat(4, 1fr); padding: var(--space-xl); } }
.tb-fact { display: flex; flex-direction: column; gap: var(--space-xs); }
.tb-fact__value {
  order: -1;   /* Zahl über der Beschriftung, bündig oben (im Markup steht die Beschriftung zuerst) */
  margin: 0; font-family: var(--font-family-heading);
  font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1; font-weight: 700;
  font-variation-settings: "wdth" 78;
}
.tb-fact__label { color: var(--text-secondary); font-size: 0.95rem; }
/* Niedrige Handys hochkant (z. B. iPhone SE): Titelbereich und Kennzahlen kompakter, damit beides zusammen auf den Bildschirm passt */
@media (max-width: 47.99rem) and (orientation: portrait) and (max-height: 760px) {
  .tb-home-top .tb-hero__inner { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
  .tb-home-top .tb-hero__lead { margin: var(--space-sm) 0 var(--space-md); font-size: 1rem; line-height: 1.45; }
  .tb-home-top .tb-facts__list { gap: var(--space-sm) var(--space-md); padding-top: var(--space-md); padding-bottom: var(--space-md); }
  .tb-home-top .tb-fact { gap: 0.15rem; }
  .tb-home-top .tb-fact__value { font-size: 1.9rem; }
  .tb-home-top .tb-fact__label { font-size: 0.85rem; line-height: 1.35; }
}

/* ---------------------------------------------------------------- Abschnitte und Kacheln */

.tb-section { padding: var(--space-2xl) 0; }
@media (min-width: 48rem) { .tb-section { padding: 5rem 0; } }
.tb-section__title { font-size: clamp(2rem, 5vw, 3.4rem); max-width: 26ch; margin-bottom: var(--space-xl); font-variation-settings: "wdth" 78; text-wrap: balance; }

.tb-tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.tb-tile {
  display: flex; flex-direction: column; height: 100%;
  padding: var(--space-lg); text-decoration: none; color: inherit;
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--radius-lg); box-shadow: inset 4px 0 0 var(--color-primary);
  transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}
.tb-tile:hover { transform: translateY(-3px); border-color: var(--color-primary-light); box-shadow: inset 4px 0 0 var(--color-primary-light), var(--shadow-md); }
.tb-tile__title { margin: 0 0 var(--space-sm); font-size: 1.5rem; font-variation-settings: "wdth" 78; }
.tb-tile__text { margin: 0; color: var(--text-secondary); }
.tb-tile__body { display: flex; flex-direction: column; flex: 1; }
/* Kachel mit Bild: Foto oben, Akzentlinie unter dem Bild statt am linken Rand */
.tb-tile--media { padding: 0; overflow: hidden; box-shadow: none; }
.tb-tile--media:hover { box-shadow: var(--shadow-md); }
.tb-tile--media .tb-tile__body { padding: var(--space-lg); }
.tb-tile__img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  border-bottom: 4px solid var(--color-primary); background: var(--bg-secondary);
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tb-tile--media:hover .tb-tile__img { transform: scale(1.04); }
.tb-tile__meta { margin-top: auto; padding-top: var(--space-md); }

/* ---------------------------------------------------------------- Einfache Seiten */

.tb-page { padding-top: var(--space-page-top); padding-bottom: var(--space-2xl); min-height: 50vh; }
@media (min-width: 48rem) { :root { --space-page-top: 2.5rem; } }
.tb-page h1 { font-size: clamp(2.2rem, 6vw, 4rem); font-variation-settings: "wdth" 78; }
.tb-page__lead { font-size: 1.2rem; color: var(--text-secondary); }

/* ---------------------------------------------------------------- Team: Übersicht und Kaderseiten */

/* Seitenkopf mit Kasten rechts: Text oben ausgerichtet (nicht zentriert), sonst rutscht die Überschrift je nach Kastenhöhe unterschiedlich weit nach unten */
.tb-intro { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); padding-top: var(--space-page-top); padding-bottom: var(--space-xl); }
@media (min-width: 60rem) { .tb-intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; align-items: start; padding-bottom: var(--space-2xl); } }
.tb-intro h1 { margin: 0 0 var(--space-md); font-size: clamp(2.6rem, 6vw, 4.4rem); font-variation-settings: "wdth" 78; }
.tb-intro .tb-page__lead { max-width: 52ch; margin: 0; }
.tb-intro__aside { padding: var(--space-md); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); }
@media (min-width: 30rem) { .tb-intro__aside { padding: var(--space-lg); } }
@media (min-width: 60rem) { .tb-intro__aside { padding: var(--space-xl); } }
.tb-intro__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin: 0; }
.tb-intro__title { margin: 0 0 var(--space-lg); font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-variation-settings: "wdth" 78; text-wrap: balance; }
.tb-eyebrow { margin: 0 0 var(--space-sm); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-primary); }
.tb-minifacts { display: flex; flex-wrap: wrap; gap: var(--space-md) clamp(var(--space-md), 4vw, var(--space-xl)); margin: var(--space-xl) 0; padding: var(--space-lg) 0; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); }   /* so viele Kennzahlen nebeneinander, wie Platz ist */
.tb-minifacts div { display: flex; flex-direction: column; }
.tb-minifacts dd { order: -1; margin: 0; font-family: var(--font-family-heading); font-size: clamp(1.8rem, 6vw, 2.2rem); font-weight: 700; line-height: 1; font-variation-settings: "wdth" 78; }
.tb-minifacts dt { margin-top: var(--space-xs); font-size: clamp(0.8rem, 2.6vw, 0.9rem); color: var(--text-secondary); }
.tb-section--alt { background: var(--bg-secondary); }
.tb-section__title--small { font-size: clamp(1.6rem, 4vw, 2.4rem); margin-bottom: var(--space-lg); }
.tb-tile__meta { margin: 0; font-size: 0.9rem; color: var(--text-secondary); }

/* Heimat-Grafik: Kader im Raster aus der Verwaltung (Domain\TeamLayout), darunter die Stammvereine als Basis.
   Position über feste Klassen (Spalte tb-gc-*, Breite tb-gcs-*, Zeile tb-gr-*, Höhe tb-grs-*), höchstens 4 Spalten und 8 Zeilen.
   Ohne gültiges Raster stehen die Kader in Reihenfolge zweispaltig. */
.tb-heimat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-sm); }
.tb-heimat--cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.tb-heimat--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tb-heimat--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tb-heimat--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tb-gc-1 { grid-column-start: 1; }
.tb-gc-2 { grid-column-start: 2; }
.tb-gc-3 { grid-column-start: 3; }
.tb-gc-4 { grid-column-start: 4; }
.tb-gcs-1 { grid-column-end: span 1; }
.tb-gcs-2 { grid-column-end: span 2; }
.tb-gcs-3 { grid-column-end: span 3; }
.tb-gcs-4 { grid-column-end: span 4; }
.tb-gr-1 { grid-row-start: 1; }
.tb-gr-2 { grid-row-start: 2; }
.tb-gr-3 { grid-row-start: 3; }
.tb-gr-4 { grid-row-start: 4; }
.tb-gr-5 { grid-row-start: 5; }
.tb-gr-6 { grid-row-start: 6; }
.tb-gr-7 { grid-row-start: 7; }
.tb-gr-8 { grid-row-start: 8; }
.tb-grs-1 { grid-row-end: span 1; }
.tb-grs-2 { grid-row-end: span 2; }
.tb-grs-3 { grid-row-end: span 3; }
.tb-grs-4 { grid-row-end: span 4; }
.tb-grs-5 { grid-row-end: span 5; }
.tb-grs-6 { grid-row-end: span 6; }
.tb-grs-7 { grid-row-end: span 7; }
.tb-grs-8 { grid-row-end: span 8; }
.tb-heimat__cell {
  display: grid; gap: 2px; align-content: center; justify-items: center; text-align: center;
  min-height: 4.2rem; padding: var(--space-md) var(--space-sm); border-radius: var(--radius-md);
  color: var(--text-primary); text-decoration: none;
  background: color-mix(in srgb, var(--color-accent) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 55%, transparent);
  transition: transform var(--transition-base), border-color var(--transition-base);
}
.tb-heimat__cell:hover { transform: translateY(-2px); border-color: var(--color-primary-light); }
.tb-heimat__cell b { font-family: var(--font-family-heading); font-size: clamp(1rem, 3.6vw, 1.15rem); hyphens: auto; font-variation-settings: "wdth" 78; }
.tb-heimat__cell small { color: var(--text-secondary); }
/* Füllung je Kader (Verwaltung › Team) */
.tb-heimat__cell--fill-primary { background: var(--color-primary); border-color: transparent; color: var(--color-on-primary); }
.tb-heimat__cell--fill-accent { background: var(--color-accent); border-color: transparent; color: var(--color-on-accent); }
.tb-heimat__cell--fill-primary small { color: var(--color-on-primary); opacity: 0.85; }
.tb-heimat__cell--fill-accent small { color: var(--color-on-accent); opacity: 0.8; }
.tb-heimat__base {
  grid-column: 1 / -1; display: grid; gap: 2px; justify-items: center; text-align: center;
  padding: var(--space-md); border: 1px dashed var(--border-color); border-radius: var(--radius-md); background: var(--bg-card);
}
.tb-heimat__base small { color: var(--text-secondary); }
/* Verwaltung: Raster der Strukturgrafik mit Vorschau daneben */
.tb-layouted { display: grid; gap: var(--space-lg); align-items: start; }
@media (min-width: 48rem) { .tb-layouted { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); } }
.tb-layouted__input { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 1.1rem; letter-spacing: 0.2em; }
.tb-layouted__preview { display: grid; gap: var(--space-xs); }
.tb-layouted__label { font-weight: 600; }

/* Kaderseite: Kopfband, Konzept, Fakten, Personen */
.tb-band { position: relative; overflow: hidden; background: var(--color-black); color: var(--on-dark); }
.tb-band__photo {
  position: absolute; inset: 0; opacity: 0.45;
  background: var(--color-black) url("/assets/img/hero/schwimmerin-1920.jpg") center 40% / cover no-repeat;
  background-image: image-set(url("/assets/img/hero/schwimmerin-1920.avif") type("image/avif"), url("/assets/img/hero/schwimmerin-1920.webp") type("image/webp"), url("/assets/img/hero/schwimmerin-1920.jpg") type("image/jpeg"));
}
.tb-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--scrim-wide-end), var(--scrim-wide-start)); }
.tb-band__inner { position: relative; z-index: 2; max-width: 72rem; margin: 0 auto; padding: var(--space-xl) var(--space-md); }
@media (min-width: 48rem) { .tb-band__inner { padding: 4rem var(--space-xl); } }
.tb-band h1 { margin: var(--space-md) 0 var(--space-sm); font-size: clamp(2.6rem, 8vw, 5.6rem); color: var(--on-dark); font-variation-settings: "wdth" 78; }
.tb-band__lead { margin: 0; max-width: 50ch; font-size: 1.15rem; color: var(--on-dark-lead); }
.tb-crumbs { display: flex; gap: var(--space-sm); font-size: 0.9rem; color: var(--on-dark-muted); }
.tb-crumbs a { color: var(--on-dark-muted); }
.tb-crumbs a:hover { color: var(--on-dark); }

.tb-split { display: grid; gap: var(--space-xl); }
@media (min-width: 56rem) { .tb-split { grid-template-columns: 1.5fr 1fr; align-items: start; } }
.tb-prose { max-width: 62ch; font-size: 1.1rem; }
.tb-prose--muted { color: var(--text-secondary); font-size: 1rem; }
.tb-squadfacts { padding: var(--space-lg); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: inset 4px 0 0 var(--color-primary); }
.tb-squadfacts dl { margin: 0; display: grid; gap: var(--space-md); }
.tb-squadfacts dt { font-size: 0.9rem; color: var(--text-secondary); }
.tb-squadfacts dd { margin: 2px 0 0; font-weight: 700; }

.tb-chip--link { text-decoration: none; transition: border-color var(--transition-base), color var(--transition-base); }
.tb-chip--link:hover { border-color: var(--color-primary-light); color: var(--text-primary); }
.tb-chip { display: inline-block; padding: 0 var(--space-sm); border: 1px solid var(--border-color); border-radius: var(--radius-full); font-size: 0.8rem; font-weight: 700; color: var(--text-secondary); }

.tb-people { list-style: none; margin: 0 0 var(--space-md); padding: 0; display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.tb-person { display: flex; gap: var(--space-md); padding: var(--space-md); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); }
.tb-people--compact .tb-person { align-items: center; }
.tb-avatar {
  flex: none; display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 50%;
  background: var(--color-black); color: var(--color-accent);
  font-family: var(--font-family-heading); font-size: 1.2rem; font-weight: 700;
}
.tb-avatar--photo { overflow: hidden; }
.tb-avatar--photo img { width: 100%; height: 100%; object-fit: cover; }
.tb-person__name { margin: 0; font-size: 1.15rem; }
.tb-person__role { margin: 2px 0 var(--space-sm); color: var(--text-secondary); }
.tb-pager { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-md); padding-top: var(--space-xl); padding-bottom: var(--space-2xl); }

/* ---------------------------------------------------------------- Fußzeile */

.tb-footer { background: var(--color-black); color: var(--color-white); }
/* Marke mit Icon-Knöpfen links, Linkgruppen rechts; auf dem Handy untereinander */
.tb-footer__inner {
  display: grid; gap: var(--space-xl); grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 72rem; margin: 0 auto; padding: var(--space-xl) var(--space-md);
}
.tb-footer__brand { grid-column: 1 / -1; display: grid; gap: var(--space-sm); justify-items: start; }
/* ab normaler Handybreite die drei Linkgruppen nebeneinander (spart eine ganze Zeile) */
@media (min-width: 24rem) { .tb-footer__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-md); } }
@media (min-width: 48rem) { .tb-footer__inner { padding: var(--space-xl); column-gap: var(--space-xl); } }
@media (min-width: 60rem) { .tb-footer__inner { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); } .tb-footer__brand { grid-column: auto; } }
.tb-footer__brand img { height: 3.2rem; width: auto; margin-left: -0.4rem; }
.tb-footer__brand .tb-sitelogo { height: 3rem; }
.tb-splash__logo--svg .tb-sitelogo { width: 100%; height: auto; }
.tb-footer__name { display: grid; margin: 0; color: var(--on-dark); font-weight: 700; }
.tb-footer__name small { font-weight: 400; color: var(--on-dark-muted); }
.tb-footer__icons { list-style: none; margin: var(--space-sm) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.tb-footer__title { margin: 0 0 var(--space-sm); font-family: inherit; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-dark-muted); }
.tb-footer__group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
.tb-footer a { color: var(--on-dark-muted); text-decoration: none; }
.tb-footer a:hover, .tb-footer a[aria-current="page"] { color: var(--on-dark); text-decoration: underline; }
/* © ohne eigene Zeile (die Betreuung steht nur auf der Kontaktseite): rechts oben neben dem Logo, ab Desktop unten rechts in der
   letzten Linkspalte (Aktuell, nur zwei Links) auf Höhe der Icon-Knöpfe; in Petrol, aufgehellt für den Kontrast auf Schwarz. Marke und Linkgruppen fest in Zeile 1, damit das © keinen Platz wegnimmt */
.tb-footer__brand { grid-row: 1; }
.tb-footer__copy { grid-row: 1; grid-column: 1 / -1; justify-self: end; align-self: start; margin: 0; font-size: 0.85rem; font-weight: 600; line-height: 3.2rem; color: color-mix(in srgb, var(--color-primary) 70%, var(--on-dark)); white-space: nowrap; }
@media (min-width: 60rem) {
  .tb-footer__group { grid-row: 1; }
  .tb-footer__group:nth-of-type(1) { grid-column: 2; }
  .tb-footer__group:nth-of-type(2) { grid-column: 3; }
  .tb-footer__group:nth-of-type(3) { grid-column: 4; }
  .tb-footer__copy { grid-column: -2 / -1; justify-self: end; align-self: end; line-height: 2.75rem; }
}

/* Runde Icon-Knöpfe (Fußzeile): mindestens 44 px Trefferfläche */
.tb-iconbtn {
  display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border-radius: 50%; cursor: pointer;
  color: var(--on-dark); background: transparent; border: 0; box-shadow: inset 0 0 0 1.5px var(--on-dark-line-strong);   /* Ring statt Rahmen: glatt auf Subpixel-Positionen */
  transition: background var(--transition-base), box-shadow var(--transition-base), color var(--transition-base);
}
.tb-footer a.tb-iconbtn { color: var(--on-dark); }
.tb-iconbtn:hover, .tb-footer a.tb-iconbtn:hover { background: var(--color-primary); box-shadow: none; color: var(--color-on-primary); }
.tb-icon { display: block; }
/* Design-Knopf: im dunklen Design die Sonne (zu hell wechseln), im hellen den Mond */
.tb-iconbtn--theme .tb-icon:last-child { display: none; }
[data-theme="light"] .tb-iconbtn--theme .tb-icon:first-child { display: none; }
[data-theme="light"] .tb-iconbtn--theme .tb-icon:last-child { display: block; }

/* ---------------------------------------------------------------- Willkommensbild (Startseite) */

.tb-splash { display: none; }
.js .tb-splash {
  position: fixed; inset: 0; z-index: 5000; display: grid; place-items: center; padding: var(--space-lg);
  background:
    radial-gradient(60rem 40rem at 50% 38%, color-mix(in srgb, var(--color-primary) 30%, transparent), transparent 70%),
    var(--color-black);
  color: var(--color-white); text-align: center;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.js.tb-splash-seen .tb-splash { display: none; }
.tb-splash--out { opacity: 0; transform: scale(1.04); pointer-events: none; }
.tb-noscroll { overflow: hidden; }
/* Fortschrittslinie bis zum automatischen Ausblenden (Dauer = AUTO_CLOSE_MS in splash.js); bleibt stehen, sobald jemand die Schalter bedient */
.tb-splash__progress {
  position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; transform-origin: left;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  animation: tb-splash-progress 3s linear both;
}
.tb-splash--hold .tb-splash__progress { opacity: 0; transition: opacity 0.3s ease; }
@keyframes tb-splash-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* Kurze Fassung ab dem dritten Besuch (html.tb-returning, theme-init.js): Fortschritt = SHORT_CLOSE_MS in splash.js, Einblendungen gestrafft */
.tb-returning .tb-splash__progress { animation-duration: 1.1s; }
.tb-returning .tb-splash__logo { animation-duration: 0.6s, 5s; animation-delay: 0s, 0.6s; }
.tb-returning .tb-splash__title, .tb-returning .tb-splash__line, .tb-returning .tb-splash__claim, .tb-returning .tb-splash__actions, .tb-returning .tb-splash__tools { animation-duration: 0.4s; animation-delay: 0.1s; }
.tb-returning .tb-splash__line { animation-duration: 0.5s, 3s; animation-delay: 0.1s, 0.6s; }
.tb-returning .tb-hero__photo { animation-duration: 0.9s; }
.tb-returning .tb-hero__title { animation-duration: 0.5s; }
.tb-returning .tb-hero__lead { animation-delay: 0.15s; animation-duration: 0.5s; }
.tb-returning .tb-hero .tb-btn { animation-delay: 0.25s; animation-duration: 0.5s; }

.tb-splash__inner { display: grid; justify-items: center; gap: var(--space-md); max-width: 34rem; }
.tb-splash__logo {
  width: min(70vw, 26rem); height: auto;
  animation: tb-splash-logo 1.6s cubic-bezier(0.2, 0.8, 0.2, 1) both, tb-splash-float 5s 1.6s ease-in-out infinite;
}
.tb-splash__title { margin: 0; font-size: clamp(1.3rem, 4vw, 1.9rem); color: var(--color-white); animation: tb-fade 1s 0.7s both; }
.tb-splash__line {
  width: min(70vw, 20rem); height: 4px; border-radius: 2px; transform-origin: left;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent), var(--color-primary));
  background-size: 200% 100%;
  animation: tb-splash-line 1.2s 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both, tb-splash-wave 3s 1.7s linear infinite;
}
.tb-splash__claim { margin: 0; color: var(--on-dark-lead); animation: tb-fade 1s 1s both; }
.tb-splash__actions { margin: var(--space-sm) 0 0; animation: tb-fade 1s 1.2s both; }
.tb-splash__tools { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm); margin: 0; animation: tb-fade 1s 1.4s both; }
.tb-splash__tool {
  min-height: 2.75rem; padding: 0.5rem 1rem; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--color-white); font: inherit; font-size: 0.9rem;
  border: 1px solid var(--on-dark-line-strong);
}
.tb-splash__tool:hover { background: var(--on-dark-hover); border-color: var(--color-white); }

@keyframes tb-splash-logo { from { opacity: 0; transform: translateY(1.5rem) scale(0.9); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes tb-splash-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.4rem); } }
@keyframes tb-splash-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes tb-splash-wave { to { background-position: -200% 0; } }



/* Kaderseite mit Mannschaftsfoto im Kopfband: Foto füllt das Band, Abdunklung von links und unten für die Lesbarkeit */
.tb-band--photo { min-height: 22rem; display: flex; align-items: flex-end; }
@media (min-width: 48rem) { .tb-band--photo { min-height: 30rem; } }
.tb-band__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
/* Bildausschnitt je Foto: Der Punkt bei p % der Bildhöhe liegt immer bei p % der Bandhöhe, unabhängig von der Bildschirmbreite.
   Wert pro Kader in content/teams.php ('photo_focus'), gerundet auf 5. Klassen statt Inline-Style wegen der CSP. */
.tb-focus-y-0 { object-position: center 0%; }
.tb-focus-y-5 { object-position: center 5%; }
.tb-focus-y-10 { object-position: center 10%; }
.tb-focus-y-15 { object-position: center 15%; }
.tb-focus-y-20 { object-position: center 20%; }
.tb-focus-y-25 { object-position: center 25%; }
.tb-focus-y-30 { object-position: center 30%; }
.tb-focus-y-35 { object-position: center 35%; }
.tb-focus-y-40 { object-position: center 40%; }
.tb-focus-y-45 { object-position: center 45%; }
.tb-focus-y-50 { object-position: center 50%; }
.tb-focus-y-55 { object-position: center 55%; }
.tb-focus-y-60 { object-position: center 60%; }
.tb-focus-y-65 { object-position: center 65%; }
.tb-focus-y-70 { object-position: center 70%; }
.tb-focus-y-75 { object-position: center 75%; }
.tb-focus-y-80 { object-position: center 80%; }
.tb-focus-y-85 { object-position: center 85%; }
.tb-focus-y-90 { object-position: center 90%; }
.tb-focus-y-95 { object-position: center 95%; }
.tb-focus-y-100 { object-position: center 100%; }
.tb-band--photo::after {
  background:
    linear-gradient(0deg, var(--scrim-wide-end) 0%, transparent 55%),
    linear-gradient(90deg, var(--scrim-wide-end) 0%, color-mix(in srgb, var(--color-black) 15%, transparent) 65%);
}
.tb-band--photo .tb-band__inner { width: 100%; }

/* ---------------------------------------------------------------- Trainer */

/* Kaderseite: Trainer kompakt in der Seitenspalte, verlinkt auf das Profil */
.tb-squadfacts__title { margin: var(--space-lg) 0 var(--space-sm); padding-top: var(--space-md); border-top: 1px solid var(--border-color); font-size: 0.9rem; font-family: inherit; font-weight: 400; color: var(--text-secondary); }
.tb-squadfacts__note { margin: var(--space-md) 0 0; }
.tb-coachlines { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
.tb-coachline { display: flex; align-items: center; gap: var(--space-md); margin: 0 calc(-1 * var(--space-sm)); padding: var(--space-sm); border-radius: var(--radius-md); color: inherit; text-decoration: none; transition: background var(--transition-base); }
.tb-coachline:hover { background: var(--bg-secondary); }
.tb-coachline__avatar { flex: none; width: 3rem; height: 3rem; border-radius: 50%; overflow: hidden; }
.tb-coachline__avatar img { width: 100%; height: 100%; object-fit: cover; }
.tb-coachline__text { display: grid; }
.tb-coachline__text small { color: var(--text-secondary); }

/* Porträt oder Platzhalter mit Initialen */
.tb-coach__initials {
  display: grid; place-items: center; width: 100%; height: 100%;
  font-family: var(--font-family-heading); font-weight: 700; font-variation-settings: "wdth" 78;
  color: var(--on-dark);
  background:
    radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--color-primary) 45%, transparent), transparent 60%),
    linear-gradient(160deg, color-mix(in srgb, var(--color-black) 85%, var(--color-white)), var(--color-black));
}
.tb-coach__initials--small { font-size: 1.05rem; }
.tb-coach__initials--large { font-size: clamp(2.6rem, 6vw, 3.6rem); letter-spacing: 0.02em; }

/* Trainerseite: Karten mit Porträt im Format 4:5 */
.tb-coaches { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
@media (min-width: 56rem) { .tb-coaches { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); } }
.tb-coach { display: flex; flex-direction: column; height: 100%; overflow: hidden; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); scroll-margin-top: 6rem; }
/* Angesprungenes Profil (/trainer#slug): kurzes Aufleuchten statt dauerhaftem Rahmen; beim Cheftrainer leuchtet die äußere Karte */
.tb-coach:target { border-color: var(--color-primary); animation: tb-target-glow 2.4s ease-out both; }
.tb-headcoach .tb-coach:target { animation: none; }
.tb-headcoach .tb-coach { scroll-margin-top: 12rem; }   /* Sprung zeigt die ganze Karte samt Überschrift unter der festen Kopfzeile */
.tb-headcoach:has(.tb-coach:target) { border-color: var(--color-primary); animation: tb-target-glow 2.4s ease-out both; }
@keyframes tb-target-glow {
  0%, 35% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 40%, transparent); }
  100% { box-shadow: 0 0 0 4px transparent; }
}
.tb-coach__portrait { aspect-ratio: 1 / 1; border-bottom: 4px solid var(--color-primary); }
.tb-coach__portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.tb-coach__body { display: flex; flex-direction: column; flex: 1; padding: var(--space-lg); }
.tb-coach__name { margin: 0; font-size: 1.35rem; font-variation-settings: "wdth" 78; }
.tb-coach__role { margin: 2px 0 var(--space-md); color: var(--text-secondary); }
.tb-coach__bio { margin: 0 0 var(--space-md); }
.tb-coach__squads { list-style: none; margin: auto 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-xs); }

/* Cheftrainer neben der Einleitung: Porträt links, Text rechts */
.tb-headcoach .tb-eyebrow { margin-bottom: var(--space-md); }
.tb-headcoach .tb-coach { height: auto; border: 0; background: none; border-radius: 0; }
@media (min-width: 30rem) {
  .tb-headcoach .tb-coach { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-lg); }
  .tb-headcoach .tb-coach__portrait { border-radius: var(--radius-md); overflow: hidden; }
  .tb-headcoach .tb-coach__body { padding: 0; }
}
.tb-headcoach .tb-coach__name { font-size: clamp(1.5rem, 3vw, 2rem); }
.tb-section__lead { margin: calc(-1 * var(--space-md)) 0 var(--space-xl); color: var(--text-secondary); }

/* Abschlusssatz als großes Statement */
.tb-statement { padding: var(--space-2xl) 0; background: var(--color-black); color: var(--on-dark); }
@media (min-width: 48rem) { .tb-statement { padding: 5rem 0; } }
.tb-statement__text {
  max-width: 28ch; margin: 0 0 var(--space-xl); text-wrap: balance;
  font-family: var(--font-family-heading); font-size: clamp(1.7rem, 4vw, 2.8rem); line-height: 1.15; font-weight: 700; font-variation-settings: "wdth" 78;
}
.tb-statement__text::before { content: ""; display: block; width: 4rem; height: 4px; margin-bottom: var(--space-lg); border-radius: 2px; background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); }

/* Handy: Trainer in zwei Spalten, damit die Seite nicht zu lang wird; Cheftrainer-Porträt kleiner */
@media (max-width: 55.99rem) {
  .tb-coaches { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
  .tb-coaches .tb-coach__body { padding: var(--space-md); }
  .tb-coaches .tb-coach__name { font-size: 1.1rem; }
  .tb-coaches .tb-coach__initials--large { font-size: 2.2rem; }
}
@media (max-width: 29.99rem) {
  .tb-headcoach .tb-coach__portrait { width: 9rem; margin-bottom: var(--space-md); border-radius: var(--radius-md); overflow: hidden; }
  .tb-headcoach .tb-coach__body { padding: 0; }
  .tb-headcoach .tb-coach__initials--large { font-size: 2.4rem; }
}

/* ---------------------------------------------------------------- Trainingsstätten */

.tb-venues { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-md); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .tb-venues { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .tb-venues { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); } .tb-venues--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.tb-venue { display: flex; flex-direction: column; height: 100%; overflow: hidden; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); scroll-margin-top: 6rem; }
.tb-venue__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 4px solid var(--color-primary); background: var(--color-black); }
@media (min-width: 40rem) { .tb-venue__media { aspect-ratio: 3 / 2; } .tb-venues--two .tb-venue__media { aspect-ratio: 21 / 9; } }
.tb-venue__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tb-venue__kind {
  position: absolute; left: var(--space-md); top: var(--space-md); padding: 2px var(--space-sm); border-radius: var(--radius-full);
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--on-dark); background: color-mix(in srgb, var(--color-black) 65%, transparent);
}
.tb-venue__body { display: flex; flex-direction: column; flex: 1; padding: var(--space-lg); }
.tb-venue__name { margin: 0; font-size: 1.5rem; font-variation-settings: "wdth" 78; }
.tb-venue__full { margin: 0; font-size: 0.9rem; color: var(--text-secondary); }
.tb-venue__text { margin: var(--space-sm) 0 var(--space-md); }
.tb-venue__facts { list-style: none; margin: 0 0 var(--space-md); padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.tb-venue__contact { margin-top: auto; padding-top: var(--space-md); border-top: 1px solid var(--border-color); font-size: 0.95rem; }
.tb-venue__contact p { margin: 0; }
.tb-venue__operator { font-weight: 700; }
.tb-venue__address { margin: 0; font-style: normal; color: var(--text-secondary); }
.tb-venue__phone a { color: var(--text-secondary); text-decoration: none; }
.tb-venue__phone a:hover { color: var(--text-primary); text-decoration: underline; }
.tb-venue__contact .tb-venue__links { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); margin-top: var(--space-sm); font-weight: 700; }

/* Einleitung: stilisiertes 50-m-Becken mit acht Bahnen */
.tb-pool { margin: 0; }
.tb-pool__basin {
  display: grid; grid-auto-rows: 1fr; aspect-ratio: 2 / 1; overflow: hidden;
  border-radius: var(--radius-md); border: 6px solid color-mix(in srgb, var(--color-white) 85%, var(--color-accent));
  background:
    radial-gradient(35% 20% at 25% 35%, color-mix(in srgb, var(--color-white) 14%, transparent), transparent 70%),
    radial-gradient(100% 120% at 85% 0%, color-mix(in srgb, var(--color-accent) 60%, transparent), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--color-accent) 60%, var(--color-black)), color-mix(in srgb, var(--color-accent) 22%, var(--color-black)));
}
.tb-pool__lane { position: relative; display: flex; align-items: center; padding-left: var(--space-sm); }
.tb-pool__lane + .tb-pool__lane::before {   /* Bahnleine: abwechselnd Primär- und Akzentfarbe */
  content: ""; position: absolute; left: 0; right: 0; top: -1.5px; height: 3px;
  background: repeating-linear-gradient(90deg, var(--color-primary) 0 12px, var(--color-white) 12px 24px, var(--color-accent) 24px 36px, var(--color-white) 36px 48px);
  opacity: 0.8;
}
.tb-pool__lane::after {   /* schwarze Bodenlinie in Bahnmitte mit T am Ende */
  content: ""; position: absolute; left: 8%; right: 8%; top: 50%; height: 2px; transform: translateY(-50%);
  background: color-mix(in srgb, var(--color-black) 55%, transparent);
}
.tb-pool__lane b { position: relative; z-index: 1; font-size: 0.75rem; color: var(--on-dark); opacity: 0.8; }
.tb-pool__caption { display: flex; align-items: baseline; gap: var(--space-sm); margin-top: var(--space-md); color: var(--text-secondary); }
.tb-pool__caption b { flex: none; white-space: nowrap; font-family: var(--font-family-heading); font-size: 2.2rem; line-height: 1; color: var(--text-primary); font-variation-settings: "wdth" 78; }

/* ---------------------------------------------------------------- Partner */

.tb-partners { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-md); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .tb-partners { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .tb-partners { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); } }
@media (min-width: 40rem) { .tb-partners--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }   /* vier Partner: 2 × 2 statt vier schmaler Spalten, zwei Partner: nebeneinander statt in zwei schmalen Dritteln */

.tb-partner { display: flex; flex-direction: column; height: 100%; overflow: hidden; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); scroll-margin-top: 6rem; }
.tb-partner:target { border-color: var(--color-primary); animation: tb-target-glow 2.4s ease-out both; }
/* Logo als Wasserzeichen unten rechts: einfarbige Silhouette über den Alphakanal (brightness 0 = schwarz, im dunklen Design
   invertiert = weiß), schwach deckend, damit jedes Logo in beiden Designs ruhig wirkt; Text liegt darüber */
.tb-partner--mark { box-shadow: inset 4px 0 0 var(--color-primary); }
.tb-partner__content { position: relative; isolation: isolate; flex: 1; min-height: 7rem; }   /* Inhalt ohne Links: Bezugsrahmen des Wasserzeichens */
.tb-partner__mark {
  position: absolute; right: 0; bottom: var(--space-sm); z-index: -1; width: 62%; height: calc(100% - var(--space-sm));
  object-fit: contain; object-position: right bottom; filter: brightness(0); opacity: 0.08; pointer-events: none;
  transition: opacity var(--transition-base), transform var(--transition-base);
}
[data-theme="dark"] .tb-partner__mark { filter: brightness(0) invert(1); opacity: 0.1; }
[data-theme="dark"] [data-theme="light"] .tb-partner__mark { filter: brightness(0); opacity: 0.08; }   /* helle Vorschau in dunkler Seite */
.tb-partner--mark:hover .tb-partner__mark { opacity: 0.14; transform: translate(-2%, -2%); }
@media (prefers-reduced-motion: reduce) { .tb-partner--mark:hover .tb-partner__mark { transform: none; } }
.tb-partner--text { box-shadow: inset 4px 0 0 var(--color-primary); }
.tb-partner__body { display: flex; flex-direction: column; flex: 1; padding: var(--space-lg); }
.tb-partner__role { margin: 0 0 var(--space-xs); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-primary); }
.tb-partner__name { margin: 0 0 var(--space-sm); font-size: 1.35rem; font-variation-settings: "wdth" 78; }
.tb-partner__text { margin: 0 0 var(--space-md); color: var(--text-secondary); }
.tb-partner__links { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); margin: auto 0 0; padding-top: var(--space-md); border-top: 1px solid var(--border-color); font-weight: 700; }

/* Hervorgehobener Partner neben der Einleitung: Zitat-Karte */
.tb-featured__quote { position: relative; margin: 0 0 var(--space-lg); padding-left: var(--space-lg); border-left: 4px solid var(--color-primary); }
.tb-featured__quote p { margin: 0; font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.6; }
.tb-featured__name { display: grid; margin: 0; }
.tb-featured__name b { font-family: var(--font-family-heading); font-size: 1.4rem; font-variation-settings: "wdth" 78; }
.tb-featured__name small { color: var(--text-secondary); }

/* ---------------------------------------------------------------- Wer wir sind */

.tb-intro .tb-prose { margin: var(--space-md) 0 0; color: var(--text-secondary); }
.tb-goal {
  margin: var(--space-lg) 0 0; padding-left: var(--space-md); border-left: 4px solid var(--color-primary);
  font-weight: 700; max-width: 52ch;
}

/* Steckbrief neben der Einleitung */
.tb-profile .tb-eyebrow { margin-bottom: var(--space-md); }
.tb-profile__list { margin: 0; display: grid; }
.tb-profile__list div { display: grid; gap: 2px; padding: var(--space-sm) 0; border-top: 1px solid var(--border-color); }
.tb-profile__list div:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 30rem) { .tb-profile__list div { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-md); } }
.tb-profile__list dt { font-size: 0.9rem; color: var(--text-secondary); }
.tb-profile__list dd { margin: 0; font-weight: 700; }

/* Was uns ausmacht: nummerierte Abschnitte, auf breiten Bildschirmen Titel links, Text rechts */
.tb-values__lead {
  max-width: 40ch; margin: calc(-1 * var(--space-md)) 0 var(--space-2xl); text-wrap: balance;
  font-family: var(--font-family-heading); font-size: clamp(1.3rem, 2.4vw, 1.7rem); line-height: 1.3; font-weight: 700;
  font-variation-settings: "wdth" 78;
}
.tb-values { list-style: none; margin: 0; padding: 0; counter-reset: tb-value; }
.tb-value { counter-increment: tb-value; display: grid; gap: var(--space-sm) var(--space-xl); padding: var(--space-xl) 0; border-top: 1px solid var(--border-color); }
@media (min-width: 56rem) { .tb-value { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } }
.tb-value__title { margin: 0; font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-variation-settings: "wdth" 78; text-wrap: balance; }
.tb-value__title::before {
  content: counter(tb-value, decimal-leading-zero); display: block; margin-bottom: var(--space-xs);
  font-size: 0.9rem; letter-spacing: 0.15em; color: var(--color-primary);
}
.tb-value__body p { margin: 0 0 var(--space-md); max-width: 62ch; }
.tb-value__body .tb-value__link { margin: 0; font-weight: 700; }

/* Ein TEAM, sechs Kader: Bildleiste aus den Mannschaftsfotos */
.tb-mosaic { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 48rem) { .tb-mosaic { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); } }
.tb-mosaic__item { position: relative; display: block; overflow: hidden; border-radius: var(--radius-lg); color: var(--on-dark); text-decoration: none; background: var(--color-black); }
.tb-mosaic__item img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease; }
.tb-mosaic__item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--scrim-wide-end) 0%, transparent 55%); }
.tb-mosaic__label {
  position: absolute; left: var(--space-md); bottom: var(--space-sm); z-index: 1;
  font-family: var(--font-family-heading); font-weight: 700; font-size: clamp(1rem, 2vw, 1.3rem); font-variation-settings: "wdth" 78;
}
.tb-mosaic__item:hover img { transform: scale(1.05); }

.tb-statement__eyebrow { margin-bottom: var(--space-md); }
/* Längere Statements (mehr als zwei Sätze): kleinere Schrift, breitere Zeilen */
.tb-statement__text--long { max-width: 44ch; font-size: clamp(1.35rem, 2.6vw, 2rem); line-height: 1.25; }

/* ---------------------------------------------------------------- Kontakt */


.tb-contact__org { display: grid; margin: 0 0 var(--space-lg); }
.tb-contact__org b { font-family: var(--font-family-heading); font-size: 1.6rem; font-variation-settings: "wdth" 78; }
.tb-contact__org small { color: var(--color-primary); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.8rem; }
.tb-contact__list { margin: 0; display: grid; }
.tb-contact__list div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--space-md); padding: var(--space-sm) 0; border-top: 1px solid var(--border-color); }
.tb-contact__list dt { color: var(--text-secondary); }
.tb-contact__list dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }

.tb-persons { list-style: none; margin: 0 0 var(--space-lg); padding: 0; display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.tb-personcard { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); }
.tb-personcard__avatar { flex: none; width: 4.5rem; height: 4.5rem; border-radius: 50%; overflow: hidden; }
.tb-personcard__avatar img { width: 100%; height: 100%; object-fit: cover; }
.tb-personcard__text { display: grid; gap: 2px; }
.tb-personcard__text b { font-size: 1.1rem; }
.tb-personcard__text small { color: var(--text-secondary); }
.tb-personcard__link { margin-top: var(--space-xs); font-size: 0.9rem; font-weight: 700; }


/* Funktionsteam (Wer wir sind): Namen mit Initialen */
.tb-staff__title { margin: var(--space-lg) 0 var(--space-sm); font-size: 0.85rem; font-family: inherit; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-primary); }
.tb-staff { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
.tb-staff__item { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md) var(--space-sm) var(--space-sm); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-full); font-weight: 700; }
.tb-staff__avatar {
  flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; font-size: 0.85rem;
  color: var(--on-dark); background: linear-gradient(160deg, color-mix(in srgb, var(--color-primary) 55%, var(--color-black)), var(--color-black));
}

/* ---------------------------------------------------------------- News */

.tb-section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-xl); }
.tb-section__head .tb-section__title { margin: 0; }

.tb-newslist { list-style: none; margin: 0 0 var(--space-lg); padding: 0; display: grid; gap: var(--space-lg); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48rem) { .tb-newslist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Wettkampf-Hinweis über den News (Startseite): Primary-getönte Karte mit Bahnleine links, Knöpfe rechts ab Tablet */
.tb-spotlights { list-style: none; margin: 0 0 var(--space-lg); padding: 0; display: grid; gap: var(--space-md); }
.tb-spotlight {
  display: grid; gap: var(--space-xs) var(--space-lg); padding: var(--space-lg) var(--space-xl);
  background: color-mix(in srgb, var(--color-primary) 12%, var(--bg-card)); border: 1px solid color-mix(in srgb, var(--color-primary) 35%, var(--border-color));
  border-left: 6px solid var(--color-primary); border-radius: var(--radius-lg);
}
.tb-spotlight__kicker { display: flex; align-items: center; gap: var(--space-xs); margin: 0; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-primary); }
/* läuft gerade: pulsierender Punkt wie ein Live-Signal */
.tb-spotlight--running .tb-spotlight__kicker::before { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--color-primary); animation: tb-spotlight-pulse 1.6s ease-in-out infinite; }
@keyframes tb-spotlight-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.75); } }
@media (prefers-reduced-motion: reduce) { .tb-spotlight--running .tb-spotlight__kicker::before { animation: none; } }
.tb-spotlight__title { margin: 0; font-family: var(--font-family-heading); font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.15; font-variation-settings: "wdth" 78; }
.tb-spotlight__team { display: block; font-size: 0.6em; font-weight: 700; color: var(--text-secondary); }
.tb-spotlight__title a { color: inherit; text-decoration: none; }
.tb-spotlight__title a:hover { color: var(--color-primary); }
.tb-spotlight__meta { margin: 0; color: var(--text-secondary); }
.tb-spotlight__meta a { color: inherit; }
.tb-spotlight__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin: var(--space-sm) 0 0; }
@media (min-width: 56rem) {
  .tb-spotlight { grid-template-columns: minmax(0, 1fr) auto; }
  .tb-spotlight__actions { grid-column: 2; grid-row: 1 / span 3; align-self: center; justify-content: flex-end; margin: 0; }
}

.tb-newscard { height: 100%; }
.tb-newscard__link {
  display: flex; flex-direction: column; height: 100%; overflow: hidden; color: inherit; text-decoration: none;
  background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.tb-newscard__link:hover { transform: translateY(-3px); border-color: var(--color-primary-light); box-shadow: var(--shadow-md); }
.tb-newscard__img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: center 30%; border-bottom: 4px solid var(--color-primary); }
.tb-newscard__img--default { object-position: center; }   /* Standardbild: Logo steht mittig */
.tb-newscard__body { display: flex; flex-direction: column; flex: 1; gap: var(--space-sm); padding: var(--space-lg); }
.tb-newscard__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-sm); font-size: 0.85rem; color: var(--text-secondary); }
.tb-newscard__cat { font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-primary); }
.tb-newscard__title { margin: 0; font-size: 1.35rem; line-height: 1.2; font-variation-settings: "wdth" 78; text-wrap: balance; }
.tb-newscard__teaser { color: var(--text-secondary); }
.tb-newscard__more { margin-top: auto; padding-top: var(--space-sm); font-weight: 700; color: var(--color-primary); }
.tb-newscard__link:hover .tb-newscard__more { text-decoration: underline; }

/* Instagram auf der News-Seite: quadratische Kacheln, Bilder vom eigenen Server, Link öffnet instagram.com */
.tb-insta__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-md); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 48rem) { .tb-insta__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tb-insta__item {
  display: flex; flex-direction: column; height: 100%; overflow: hidden; color: inherit; text-decoration: none;
  background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.tb-insta__item:hover, .tb-insta__item:focus-visible { transform: translateY(-3px); border-color: var(--color-primary-light); box-shadow: var(--shadow-md); }
.tb-insta__media { position: relative; display: block; }
.tb-insta__media img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.tb-insta__badge { position: absolute; top: var(--space-sm); right: var(--space-sm); padding: 0.15rem 0.55rem; border-radius: var(--radius-full); font-size: 0.72rem; font-weight: 800; color: var(--color-on-primary); background: var(--color-primary); }
.tb-insta__body { display: grid; gap: var(--space-xs); padding: var(--space-sm) var(--space-md) var(--space-md); }
.tb-insta__date { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; color: var(--text-secondary); }
.tb-insta { scroll-margin-top: 5rem; }   /* Sprung landet mit Überschrift unter der festen Kopfzeile */
@media (prefers-reduced-motion: no-preference) { html:has(.tb-instajump) { scroll-behavior: smooth; } }

/* Sprungmarke im Seitenkopf: Stapel der drei neuesten Bilder, Text, Pfeil; Rand im Verlauf der Marke */
.tb-instajump {
  display: inline-flex; align-items: center; gap: var(--space-md); margin-top: var(--space-lg); max-width: 100%;
  padding: 0.45rem 1.1rem 0.45rem 0.5rem; border-radius: var(--radius-full); color: inherit; text-decoration: none;
  background: linear-gradient(var(--bg-card), var(--bg-card)) padding-box, var(--gradient-primary) border-box;
  border: 2px solid transparent; box-shadow: var(--shadow-md);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.tb-instajump:hover, .tb-instajump:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 28px color-mix(in srgb, var(--color-primary) 30%, transparent); }
.tb-instajump__stack { display: flex; flex: none; }
.tb-instajump__stack img {
  width: 2.5rem; height: 2.5rem; border-radius: 50%; object-fit: cover; background: var(--bg-card);
  box-shadow: 0 0 0 2px var(--bg-card), inset 0 0 0 1px var(--border-color);
}
.tb-instajump__stack img + img { margin-left: -0.85rem; }
.tb-instajump__text { display: grid; min-width: 0; line-height: 1.2; }
.tb-instajump__label { font-weight: 800; letter-spacing: 0.01em; }
.tb-instajump__sub { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 0.8rem; color: var(--text-secondary); }
.tb-instajump__arrow { flex: none; width: 1.25rem; height: 1.25rem; color: var(--color-primary); }
@media (prefers-reduced-motion: no-preference) {
  .tb-instajump__arrow { animation: tb-instajump-nudge 2.4s ease-in-out infinite; }
  .tb-instajump:hover .tb-instajump__arrow { animation-duration: 0.9s; }
}
@keyframes tb-instajump-nudge { 0%, 60%, 100% { transform: translateY(0); } 75% { transform: translateY(4px); } }
.tb-insta__caption { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; font-size: 0.9rem; line-height: 1.45; }

/* Übersicht: der neueste Beitrag groß über die ganze Breite, Bild links, Text rechts */
@media (min-width: 64rem) {
  .tb-newslist__lead { grid-column: 1 / -1; }
  .tb-newslist__lead .tb-newscard__link { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .tb-newslist__lead .tb-newscard__img { height: 100%; aspect-ratio: auto; border-bottom: 0; border-right: 4px solid var(--color-primary); }
  .tb-newslist__lead .tb-newscard__body { padding: var(--space-xl); justify-content: center; }
  .tb-newslist__lead .tb-newscard__title { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
}

/* Beitragsseite */
.tb-article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin: var(--space-md) 0 0; color: var(--on-dark-lead); }
.tb-chip--on-dark { color: var(--on-dark); border-color: var(--on-dark-line-strong); }
.tb-band h1.tb-article__title { max-width: 22ch; font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1.05; text-wrap: balance; }
.tb-article__body { max-width: 48rem; padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }
.tb-article__body > p { font-size: 1.1rem; line-height: 1.7; margin: 0 0 var(--space-md); }
.tb-article__body > p.tb-article__lead { font-size: clamp(1.2rem, 2vw, 1.4rem); line-height: 1.5; font-weight: 700; margin-bottom: var(--space-lg); }
.tb-article__body h2 { margin: var(--space-xl) 0 var(--space-sm); font-size: clamp(1.4rem, 2.6vw, 1.8rem); font-variation-settings: "wdth" 78; }
.tb-article__quote { margin: var(--space-xl) 0; padding: var(--space-lg) var(--space-lg) var(--space-lg) var(--space-xl); border-left: 4px solid var(--color-primary); background: var(--bg-secondary); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
.tb-article__quote blockquote { margin: 0; }
.tb-article__quote p { margin: 0 0 var(--space-sm); font-family: var(--font-family-heading); font-size: clamp(1.3rem, 2.4vw, 1.7rem); line-height: 1.3; font-weight: 700; font-variation-settings: "wdth" 78; }
.tb-article__quote figcaption { color: var(--text-secondary); }
/* Nachweise am Ende: abgesetzt durch eine Linie, Beschriftung klein darüber */
.tb-article__credits { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-xl); margin: var(--space-xl) 0 0; padding-top: var(--space-md); border-top: 1px solid var(--border-color); font-size: 0.95rem; }
.tb-article__credits dt { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); }
.tb-article__credits dd { margin: 2px 0 0; color: var(--text-primary); }
.tb-article__body > p.tb-article__links { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }
/* Einleitung ohne Mindesthöhe (News-Übersicht) */
.tb-page--intro { min-height: 0; padding-bottom: 0; }
/* Abschnitt direkt unter einer Seiteneinleitung (Termine, News): kein voller Abschnittsabstand, die Einleitung gehört dazu */
.tb-page--intro + .tb-section--tight { padding-top: var(--space-lg); }
@media (min-width: 48rem) { .tb-page--intro + .tb-section--tight { padding-top: var(--space-xl); } }
/* Startseite: acht Kacheln auf breiten Bildschirmen in vier Spalten */
@media (min-width: 64rem) { .tb-tiles--four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------- Wettkampfkalender */

.tb-events { display: grid; gap: var(--space-2xl); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 64rem) { .tb-events { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; } }
.tb-events__past { margin-top: var(--space-xl); }

/* Monatsansicht */
.tb-cal { padding: var(--space-md); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); scroll-margin-top: 6rem; }
@media (min-width: 40rem) { .tb-cal { padding: var(--space-lg); } }
.tb-cal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-md); }
.tb-cal__title { margin: 0; font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-variation-settings: "wdth" 78; }
.tb-iconbtn--plain { color: var(--text-primary); border-color: var(--border-color); font-size: 1.5rem; line-height: 1; text-decoration: none; }
.tb-iconbtn--plain:hover { color: var(--color-on-primary); }


.tb-cal__grid { width: 100%; border-collapse: separate; border-spacing: 0 4px; table-layout: fixed; }
.tb-cal__grid th { padding: 0 0 2px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); text-align: center; }
.tb-cal__grid th:nth-child(n+6) { color: var(--color-accent-text); }

/* Tag als kompakte Kachel: Zahl oben links, Wettkampfname daneben, Trainingsbahnen unten.
   Die Fläche liegt in ::before (2px Abstand), so verschmelzen Wettkampftage zu einem durchgehenden Band. */
.tb-cal__day { position: relative; height: 3.1rem; padding: 0; vertical-align: top; text-align: left; }
@media (min-width: 40rem) { .tb-cal__day { height: 4.3rem; } }
.tb-cal__day::before {
  content: ""; position: absolute; inset: 0 2px; border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--text-primary) 4%, transparent); border: 1px solid transparent;
  transition: border-color var(--transition-base), background var(--transition-base);
}
.tb-cal__day:nth-child(n+6)::before { background: color-mix(in srgb, var(--color-accent) 6%, transparent); }
.tb-cal__day--out { opacity: 0.4; }
.tb-cal__day.tb-cal__day--out::before { background: transparent; border: 1px dashed var(--border-color); }
.tb-cal__day > .tb-cal__num { position: relative; z-index: 1; }
.tb-cal__num {
  display: inline-grid; place-items: center; min-width: 1.45rem; height: 1.45rem; margin: 4px 0 0 6px; padding: 0 3px; border-radius: var(--radius-full);
  font-weight: 700; font-size: 0.8rem; font-variant-numeric: tabular-nums;
}
@media (min-width: 40rem) { .tb-cal__num { min-width: 1.6rem; height: 1.6rem; margin: 5px 0 0 7px; font-size: 0.85rem; } }

/* heute: Kachel mit Akzentrahmen, Zahl gefüllt (Akzent als Textfarbe: im hellen Theme dunkel genug für weiße Schrift) */
.tb-cal__day.tb-cal__day--today::before { border-color: color-mix(in srgb, var(--text-primary) 55%, transparent); background: color-mix(in srgb, var(--text-primary) 7%, transparent); }
/* heute: Zahl mit Ring statt gefüllt (gefüllt = Wettkampftag), dazu ab Tablet die Beschriftung "Heute"; Ring als inset-Schatten, nie als border */
.tb-cal__day--today .tb-cal__num { box-shadow: inset 0 0 0 2px var(--text-primary); color: var(--text-primary); }
.tb-cal__day--today.tb-cal__day--event .tb-cal__num { background: var(--color-primary); color: var(--color-on-primary); box-shadow: 0 0 0 2px var(--text-primary); }
@media (min-width: 40rem) {
  /* unter der Zahl, wo sonst der Wettkampfname steht; an Wettkampftagen steht dort der Name, dann reicht der Ring */
  .tb-cal__day--today:not(.tb-cal__day--event)::after {
    content: "Heute"; position: absolute; top: 2.15rem; left: 9px; z-index: 1; pointer-events: none;
    font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-primary);
  }
}

/* Wettkampftage: ein Band über alle Tage (auch über das Wochenende), oben und unten mit feiner Kante, an Anfang und Ende abgerundet */
.tb-cal__day.tb-cal__day--event::before {
  inset: 0; border-radius: 0; border: 0; border-block: 1px solid color-mix(in srgb, var(--color-primary) 55%, transparent);
  background: color-mix(in srgb, var(--color-primary) 26%, var(--bg-card));
}
.tb-cal__day.tb-cal__day--start::before { left: 2px; border-left: 1px solid color-mix(in srgb, var(--color-primary) 55%, transparent); border-top-left-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); }
.tb-cal__day.tb-cal__day--end::before { right: 2px; border-right: 1px solid color-mix(in srgb, var(--color-primary) 55%, transparent); border-top-right-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); }
.tb-cal__day--event .tb-cal__num { background: var(--color-primary); color: var(--color-on-primary); }
.tb-cal__day.tb-cal__day--event:hover::before { background: color-mix(in srgb, var(--color-primary) 36%, var(--bg-card)); }
.tb-cal__link { position: absolute; inset: 0; display: block; color: inherit; text-decoration: none; border-radius: var(--radius-md); }
.tb-cal__link:hover .tb-cal__num { background: var(--color-primary-dark); }
.tb-cal__name {
  position: absolute; left: 8px; top: 2.05rem; z-index: 2; display: none; max-width: calc(200% - 16px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-family-heading); font-size: 0.8rem; font-weight: 600; font-variation-settings: "wdth" 85; letter-spacing: 0.01em; line-height: 1; color: var(--text-primary);
}
@media (min-width: 40rem) { .tb-cal__name { display: block; } }
.tb-cal__name--narrow { max-width: calc(100% - 12px); }
/* weitere Wettkämpfe am selben Tag: je eine Namenszeile darunter (die Woche wird dafür höher), als eigene Links; auf dem Handy nur "+1" */
a.tb-cal__name { z-index: 3; text-decoration: none; }
a.tb-cal__name:hover, .tb-cal__link:hover .tb-cal__name { text-decoration: underline; }
.tb-cal__name--row1 { top: 2.95rem; }
.tb-cal__name--row2 { top: 3.85rem; }
.tb-cal__morecount { position: absolute; top: 5px; right: 5px; z-index: 2; padding: 0 4px; border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-on-primary); font-size: 0.65rem; font-weight: 700; line-height: 1.4; pointer-events: none; }
@media (min-width: 40rem) {
  .tb-cal__morecount { display: none; }
  .tb-cal__week--rows2 .tb-cal__day { height: 5.5rem; }
  .tb-cal__week--rows3 .tb-cal__day { height: 6.6rem; }
  /* überlappende Wettkämpfe (wie im Terminkalender): kein gemeinsames Band, sondern je Wettkampf ein eigener Balken
     in eigener Farbe über seine Tage, mit dem Namen darin; die Tage bleiben normale Kacheln, nur die Zahl zeigt den Wettkampftag */
  .tb-cal__week--rows2 .tb-cal__day.tb-cal__day--event::before, .tb-cal__week--rows3 .tb-cal__day.tb-cal__day--event::before {
    inset: 0 2px; border: 1px solid transparent; border-radius: var(--radius-md); background: color-mix(in srgb, var(--text-primary) 4%, transparent);
  }
  .tb-cal__week--rows2 .tb-cal__day.tb-cal__day--event:nth-child(n+6)::before, .tb-cal__week--rows3 .tb-cal__day.tb-cal__day--event:nth-child(n+6)::before { background: color-mix(in srgb, var(--color-accent) 6%, transparent); }
  .tb-cal__week--rows2 .tb-cal__day.tb-cal__day--event:hover::before, .tb-cal__week--rows3 .tb-cal__day.tb-cal__day--event:hover::before { background: color-mix(in srgb, var(--text-primary) 8%, transparent); }
  .tb-cal__lane { position: absolute; left: -2px; right: -2px; z-index: 1; height: 1.05rem; pointer-events: none; background: var(--color-primary); }
  .tb-cal__lane--s0 { top: 2rem; }
  .tb-cal__lane--s1 { top: 3.15rem; background: var(--color-accent-text); }
  .tb-cal__lane--s2 { top: 4.3rem; background: color-mix(in srgb, var(--color-accent-text) 45%, var(--color-primary)); }
  .tb-cal__lane--start { left: 3px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; }
  .tb-cal__lane--end { right: 3px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; }
  .tb-cal__week--rows2 .tb-cal__name, .tb-cal__week--rows3 .tb-cal__name { top: 2.13rem; color: var(--color-on-primary); }
  .tb-cal__week--rows2 .tb-cal__name--row1, .tb-cal__week--rows3 .tb-cal__name--row1 { top: 3.28rem; color: var(--text-inverse); }
  .tb-cal__week--rows3 .tb-cal__name--row2 { top: 4.43rem; }
}

/* Training: drei Bahnen am unteren Rand (früh, mittags, spät), angedeutet als dünne Linien; jede Einheit ein Abschnitt in Kaderfarbe */
.tb-cal__train {
  position: absolute; left: 6px; right: 6px; bottom: 5px; z-index: 1; display: grid; grid-template-rows: repeat(3, 3px); row-gap: 2px; pointer-events: none;
}
@media (min-width: 40rem) { .tb-cal__train { left: 8px; right: 8px; bottom: 6px; row-gap: 3px; } }
.tb-cal__band { display: flex; gap: 2px; border-radius: var(--radius-full); background: color-mix(in srgb, var(--text-primary) 9%, transparent); }
.tb-cal__band .tb-cal__mark { display: block; flex: 1 1 0; max-width: 1.5rem; height: 100%; border-radius: var(--radius-full); }
.tb-cal__day--event .tb-cal__band { background: color-mix(in srgb, var(--text-primary) 16%, transparent); }

/* Legende als ruhige Chips */
.tb-cal__legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-md); margin: var(--space-sm) 0 0; padding-top: var(--space-sm); border-top: 1px solid var(--border-color); font-size: 0.8rem; color: var(--text-secondary); }
.tb-cal__today { margin-left: auto; }   /* "Heute"-Knopf (tb-btn--ghost tb-btn--small) unten rechts in der Legendenzeile */
.tb-cal__legenditem { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.tb-cal__swatch { display: inline-block; width: 0.9rem; height: 0.9rem; border-radius: 4px; background: var(--color-primary); }
.tb-cal__swatch--train { width: 1.1rem; height: 4px; border-radius: var(--radius-full); }
.tb-cal__lanes { display: inline-grid; grid-template-rows: repeat(3, 3px); row-gap: 2px; width: 1.1rem; }
.tb-cal__lanes i { border-radius: var(--radius-full); background: color-mix(in srgb, var(--text-primary) 22%, transparent); }
.tb-cal__mark--primary { background: var(--color-squad-primary); }
.tb-cal__mark--accent { background: var(--color-squad-accent); }
.tb-cal__mark--amber { background: var(--color-squad-amber); }
.tb-cal__mark--green { background: var(--color-squad-green); }
.tb-cal__mark--violet { background: var(--color-squad-violet); }
.tb-cal__mark--orange { background: var(--color-squad-orange); }

/* Kaderauswahl über dem Kalender: Chips mit Kaderfarbe, mehrere wählbar (Adresse ?kader=a,b), "Alle Kader" setzt zurück */
.tb-squadpick { margin-bottom: var(--space-lg); }
.tb-squadpick__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs) var(--space-md); margin-bottom: var(--space-sm); }
.tb-squadpick__title { margin: 0; font-family: inherit; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-primary); }
.tb-squadpick__hint { margin: 0; font-size: 0.85rem; color: var(--text-secondary); }
.tb-squadpick__list { list-style: none; margin: 0; padding: 0 0 4px; display: flex; gap: var(--space-xs); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; }
@media (min-width: 48rem) { .tb-squadpick__list { flex-wrap: wrap; overflow: visible; } }
.tb-squadpick__list li { flex: none; scroll-snap-align: start; }
.tb-squadchip {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.5rem; padding: 0.35rem 0.9rem; border-radius: var(--radius-full);
  border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-primary); text-decoration: none; font-weight: 700; font-size: 0.9rem; white-space: nowrap;
  transition: border-color var(--transition-base), background var(--transition-base), transform var(--transition-base);
}
.tb-squadchip:hover { border-color: var(--color-primary-light); transform: translateY(-1px); }
.tb-squadchip__dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; flex: none; }
.tb-squadchip__note { font-size: 0.75rem; font-weight: 400; color: var(--text-secondary); }
.tb-squadchip--on { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 16%, var(--bg-card)); }
.tb-squadchip--on .tb-squadchip__dot { box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 3px currentColor; }
.tb-squadchip--all.tb-squadchip--on { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }

/* Terminliste */
.tb-eventlist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.tb-eventcard {
  display: flex; gap: var(--space-md); align-items: stretch; padding: var(--space-md); color: inherit; text-decoration: none;
  background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg);
  transition: border-color var(--transition-base), transform var(--transition-base);
}
.tb-eventcard:hover { border-color: var(--color-primary-light); transform: translateY(-2px); }
.tb-eventcard--past { opacity: 0.75; }
.tb-eventcard__date {
  flex: none; display: grid; place-content: center; text-align: center; width: 5.2rem; padding: var(--space-sm);
  border-radius: var(--radius-md); background: var(--color-primary); color: var(--color-on-primary);
}
.tb-eventcard__date b { font-family: var(--font-family-heading); font-size: 1.5rem; line-height: 1; font-variation-settings: "wdth" 78; }
.tb-eventcard__date small { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.tb-eventcard__body { display: grid; gap: 2px; align-content: center; min-width: 0; }   /* min-width: 0, damit … greift */
/* Kategorie eine Zeile, Titel höchstens zwei, Ort eine Zeile: alle Karten bleiben gleich kompakt */
.tb-eventcard__meta { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--space-xs); min-width: 0; }
.tb-eventcard__meta .tb-chip { flex: none; }
.tb-eventcard__cat { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-primary); }
/* Titelbereich immer genau zwei Titelzeilen hoch (alle Karten gleich hoch): einzeiliger Titel zeigt darunter die Zusatzzeile,
   ein zweizeiliger schiebt sie aus dem Bereich */
.tb-eventcard__head { display: block; height: 3rem; overflow: hidden; }
.tb-eventcard__title {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  font-family: var(--font-family-heading); font-weight: 700; font-size: 1.25rem; line-height: 1.5rem; font-variation-settings: "wdth" 78;
}
.tb-eventcard__extra { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 0.9rem; line-height: 1.5rem; color: var(--text-secondary); }
.tb-eventcard__place { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 0.9rem; color: var(--text-secondary); }
.tb-eventcard__date { min-height: 4.6rem; }

/* Blättern (ui/paginate.js): Einträge nach der ersten Seite sind schon vor dem Skript verborgen, ohne Skript sichtbar */
.js .tb-paged-later { display: none; }
.tb-eventlist { align-content: start; grid-template-columns: minmax(0, 1fr); }
.tb-eventlist__empty { padding: var(--space-lg); text-align: center; color: var(--text-secondary); border: 1px dashed var(--border-color); border-radius: var(--radius-lg); }

/* Reiter (ui/tabs.js) neben dem Kalender: Wettkämpfe (Nächste, Vergangene) oder je gewähltem Kader. Ohne Skript alle Bereiche untereinander. */
.tb-tabs__list { display: none; }
/* Karteikarten-Reiter: eine Grundlinie, der aktive Reiter hat die Farbe des Inhalts darunter (geht nahtlos über), eine Akzentlinie oben
   und steht vorn; die übrigen liegen dahinter. Reiter behalten ihre Breite (Beschriftung nie überlagert); passen sie nicht, wischt man
   die Leiste. Keine sichtbare Scrollleiste, stattdessen ein Verlauf an dem Rand, hinter dem noch Reiter liegen (data-more, ui/tabs.js). */
.js .tb-tabs__list { display: flex; align-items: flex-end; gap: 2px; margin: 0; padding: 0 0 0 4px; border-bottom: 1px solid var(--border-color);
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; scroll-padding-inline: 2rem; }
.js .tb-tabs__list::-webkit-scrollbar { display: none; }
.tb-tabs__list[data-more="end"] { -webkit-mask-image: linear-gradient(90deg, var(--palette-pure-black) calc(100% - 2.5rem), transparent); mask-image: linear-gradient(90deg, var(--palette-pure-black) calc(100% - 2.5rem), transparent); }
.tb-tabs__list[data-more="start"] { -webkit-mask-image: linear-gradient(90deg, transparent, var(--palette-pure-black) 2.5rem); mask-image: linear-gradient(90deg, transparent, var(--palette-pure-black) 2.5rem); }
.tb-tabs__list[data-more="both"] { -webkit-mask-image: linear-gradient(90deg, transparent, var(--palette-pure-black) 2.5rem calc(100% - 2.5rem), transparent); mask-image: linear-gradient(90deg, transparent, var(--palette-pure-black) 2.5rem calc(100% - 2.5rem), transparent); }
.tb-tabs__tab {
  position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-height: 2.5rem;
  margin-bottom: -1px; padding: 0 0.85rem; border: 1px solid transparent; border-bottom: 0; border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: color-mix(in srgb, var(--text-primary) 6%, transparent); color: var(--text-secondary); font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: background var(--transition-base), color var(--transition-base);
}
.tb-tabs__tab:hover { color: var(--text-primary); background: color-mix(in srgb, var(--text-primary) 10%, transparent); }
.tb-tabs__tab[aria-selected="true"] {
  z-index: 1; color: var(--text-primary); background: var(--bg-card); border-color: var(--border-color);
  box-shadow: inset 0 3px 0 var(--squad-tone);
}
/* Kaderreiter und Kaderkarte in der Farbe des Kaders (wie Punkt, Chip und Kalenderstriche) */
.tb-squadtone--primary { --squad-tone: var(--color-squad-primary); }
.tb-squadtone--accent { --squad-tone: var(--color-squad-accent); }
.tb-squadtone--amber { --squad-tone: var(--color-squad-amber); }
.tb-squadtone--green { --squad-tone: var(--color-squad-green); }
.tb-squadtone--violet { --squad-tone: var(--color-squad-violet); }
.tb-squadtone--orange { --squad-tone: var(--color-squad-orange); }
.tb-tabs .tb-trainplan[class*="tb-squadtone--"] { box-shadow: inset 4px 0 0 var(--squad-tone); }
.tb-tabs__tab:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.tb-tabs__tab[hidden] { display: none; }
/* Reiter als Links (Seiteninhalte: Seitentexte, Orte, Partner): aktive Seite wie der gewählte Reiter */
.tb-tabs__tab[aria-current="page"] { z-index: 1; color: var(--text-primary); background: var(--bg-card); border-color: var(--border-color); box-shadow: inset 0 3px 0 var(--color-primary); }
a.tb-tabs__tab { text-decoration: none; }
/* Seiteninhalte: Knöpfe Orte und Partner mit Abstand zu den Seitentexten darunter */
.tb-admin .tb-contentlinks { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin: 0 0 var(--space-xl); }
.tb-tabs__count { padding: 0 0.45rem; border-radius: var(--radius-full); font-size: 0.75rem; background: color-mix(in srgb, currentColor 16%, transparent); }
.js .tb-tabs__panel--later { display: none; }
.tb-tabs__panel + .tb-tabs__panel { margin-top: var(--space-lg); }
.js .tb-tabs__panel + .tb-tabs__panel { margin-top: 0; }
/* Inhalt schließt an die Reiter an: oben ohne Rand und Rundung */
.js .tb-tabs .tb-eventlist, .js .tb-tabs .tb-trainplan { border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
.js .tb-tabs .tb-tabs__panel > .tb-prose { margin: 0; padding: var(--space-md); border: 1px solid var(--border-color); border-top: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); background: var(--bg-card); }

/* Kaderkarte im Reiter: kompakt, damit sie neben den Kalender passt (Trainer zweispaltig und klein, Tabelle enger) */
.tb-tabs .tb-trainplan { padding: var(--space-md) var(--space-lg); }
.tb-tabs .tb-trainplan .tb-section__title { margin: 0 0 var(--space-sm); font-size: 1.5rem; }
.tb-tabs .tb-coachlines { grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); gap: 6px; }
.tb-tabs .tb-coachline { gap: 0.55rem; padding: 0.35rem 0.5rem; border-radius: var(--radius-md); }
.tb-tabs .tb-coachline:hover { transform: none; }
.tb-tabs .tb-coachline__avatar { width: 2rem; height: 2rem; }
.tb-tabs .tb-coachline__text { min-width: 0; }
.tb-tabs .tb-coachline__text b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 0.9rem; }
.tb-tabs .tb-coachline__text small { font-size: 0.75rem; }
.tb-tabs .tb-trainplan__head { margin: var(--space-md) 0 var(--space-xs); font-size: 0.85rem; }
.tb-tabs .tb-trainplan__table { margin-bottom: 0; }
.tb-tabs .tb-trainplan__table th, .tb-tabs .tb-trainplan__table td { padding: 0.3rem 0; }

/* Kopf der Wettkampfliste */
.tb-events__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-md); }
.tb-events__head .tb-section__title { margin: 0; }
.tb-eventcard__short { display: none; }
/* Kompakte Listenansicht (ui/event-view.js): eine Zeile je Wettkampf, nur Datum und Titel */
.tb-events--compact .tb-eventlist { gap: 0; border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: var(--bg-card); overflow: hidden; }
.tb-events--compact .tb-eventlist > li + li { border-top: 1px solid var(--border-color); }
.tb-events--compact .tb-eventcard { gap: var(--space-md); align-items: center; padding: 0.6rem var(--space-md); border: 0; border-radius: 0; background: none; }
.tb-events--compact .tb-eventcard:hover { transform: none; background: var(--bg-secondary); }
.tb-events--compact .tb-eventcard__date, .tb-events--compact .tb-eventcard__meta, .tb-events--compact .tb-eventcard__extra { display: none; }
.tb-events--compact .tb-eventcard__short { display: block; flex: none; width: 8.5rem; font-size: 0.85rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-primary); }
.tb-events--compact .tb-eventcard__body { display: block; flex: 1 1 auto; min-width: 0; }
.tb-events--compact .tb-eventcard__head { height: auto; }
.tb-events--compact .tb-eventcard__title { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 1rem; line-height: 1.5rem; }
.tb-events--compact .tb-eventcard__place { display: none; }
.tb-events--compact .tb-eventlist__empty { border: 0; }
.tb-listpager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); margin-top: var(--space-sm); }
/* Sortierbare Spaltenköpfe (TB.paginate.rows): Knopf im Kopf, Pfeil nach aria-sort */
.tb-sort { all: unset; display: inline-flex; align-items: center; gap: 0.3rem; cursor: pointer; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; border-radius: var(--radius-sm, 4px); }
.tb-sort::after { content: "↕"; font-size: 0.85em; opacity: 0.35; transition: opacity var(--transition-base); }
.tb-sort:hover::after, .tb-sort:focus-visible::after { opacity: 0.8; }
.tb-sort:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
[aria-sort] > .tb-sort { color: var(--color-primary); }
[aria-sort="ascending"] > .tb-sort::after { content: "↑"; opacity: 1; }
[aria-sort="descending"] > .tb-sort::after { content: "↓"; opacity: 1; }
.tb-listpager__btn {
  min-width: 2.5rem; height: 2.5rem; padding: 0 var(--space-sm); border-radius: var(--radius-full); cursor: pointer;
  font: inherit; font-weight: 700; color: var(--text-primary); background: var(--bg-card); border: 1px solid var(--border-color);
  transition: border-color var(--transition-base), background var(--transition-base);
}
.tb-listpager__btn:hover:not(:disabled) { border-color: var(--color-primary-light); }
.tb-listpager__btn[aria-current="page"] { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.tb-listpager__btn:disabled { opacity: 0.4; cursor: default; }
.tb-listpager__btn--step { font-size: 1.3rem; line-height: 1; }
.tb-listpager__gap { padding: 0 var(--space-xs); color: var(--text-secondary); }
.tb-listpager__range { margin-left: auto; font-size: 0.85rem; color: var(--text-secondary); }
.tb-listpager__size { width: auto; min-height: 0; padding: 0.2rem 0.5rem; font-size: 0.85rem; margin-right: var(--space-xs); }
.tb-listpager--admin { margin: var(--space-md) 0; }   /* Verwaltungslisten (TB.paginate.rows) */
.tb-listpager[hidden] { display: none; }

/* Wettkampfseite: Unterlagen */
.tb-docs { list-style: none; margin: 0 0 var(--space-lg); padding: 0; display: grid; gap: var(--space-sm); grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
.tb-docs__item > a, .tb-docs__item > span {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: var(--space-sm);
  padding: var(--space-md); border-radius: var(--radius-md); border: 1px solid var(--border-color); background: var(--bg-card); color: inherit; text-decoration: none;
}
.tb-docs__item > a:hover { border-color: var(--color-primary); }
.tb-docs__item b { grid-column: 1; }
.tb-docs__item span span, .tb-docs__item > a > span { grid-column: 1; font-size: 0.85rem; color: var(--text-secondary); }
.tb-docs__item .tb-icon { grid-column: 2; grid-row: 1 / 3; align-self: center; color: var(--color-primary); }
.tb-docs__item--pending > span { border-style: dashed; color: var(--text-secondary); }
.tb-event__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.tb-event__venue { font-style: normal; font-weight: 700; }
.tb-event__map { margin: var(--space-md) 0 0; font-weight: 700; }
.tb-split .tb-prose + .tb-section__title { margin-top: var(--space-xl); }
.tb-event__subtitle { margin: var(--space-sm) 0 0; max-width: 46ch; font-size: 1.1rem; color: var(--on-dark-lead); }

/* Wochenplan Training */
.tb-trainplan { margin-top: var(--space-xl); padding: var(--space-lg); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: inset 4px 0 0 var(--color-accent); }
.tb-trainplan .tb-section__title { margin-bottom: var(--space-sm); }
.tb-trainplan__note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); margin: 0 0 var(--space-md); font-size: 0.9rem; color: var(--text-secondary); }
.tb-trainplan__table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-md); }
.tb-trainplan__table th, .tb-trainplan__table td { padding: var(--space-xs) 0; border-top: 1px solid var(--border-color); text-align: left; vertical-align: top; }
.tb-trainplan__table th { width: 7.5rem; font-weight: 400; color: var(--text-secondary); }
.tb-trainplan__table td { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); font-weight: 700; font-variant-numeric: tabular-nums; }
.tb-trainplan__free td { font-weight: 400; color: var(--text-secondary); }
.tb-trainplan p:last-child { margin: 0; font-weight: 700; }

/* Kaderseite: Trainingszeiten in der Faktenbox */
.tb-squadfacts__slot { display: block; font-variant-numeric: tabular-nums; }
.tb-squadfacts__slot--next { margin-top: var(--space-xs); color: var(--text-secondary); font-size: 0.9rem; }
.tb-squadfacts__more { display: inline-block; margin-top: var(--space-xs); font-size: 0.9rem; }
.tb-squadfacts dt .tb-chip { margin-left: var(--space-xs); }
/* Aufzählungen im News-Beitrag (z. B. Staffelmedaillen, Teilnehmerliste) */
.tb-article__list { margin: 0 0 var(--space-lg); padding: 0; list-style: none; display: grid; gap: var(--space-xs); }
.tb-article__list li { position: relative; padding: var(--space-sm) var(--space-md) var(--space-sm) var(--space-xl); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); line-height: 1.5; }
.tb-article__list li::before { content: ""; position: absolute; left: var(--space-md); top: 1.05em; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--color-primary); }
.tb-article__list--ordered { counter-reset: tb-item; }
.tb-article__list--ordered li { counter-increment: tb-item; }
.tb-article__list--ordered li::before { content: counter(tb-item); top: 0.75em; width: 1.5rem; height: 1.5rem; display: grid; place-items: center; font-size: 0.8rem; font-weight: 700; color: var(--on-dark); }
.tb-article__list--ordered li { padding-left: calc(var(--space-md) + 2rem); }
.tb-article__pull { margin: var(--space-lg) 0; padding: var(--space-sm) var(--space-lg); border-left: 4px solid var(--color-primary); }
.tb-article__pull p { margin: 0; font-size: 1.2rem; line-height: 1.5; font-style: italic; }
.tb-article__body a:not(.tb-btn) { color: var(--color-accent-text); text-decoration: underline; text-underline-offset: 0.15em; }
/* News-Übersicht: bleibt unter dem Aufmacher eine Karte allein in der letzten Reihe, wird sie breit (Bild links, Text rechts) */
@media (min-width: 48rem) {
  .tb-newslist:not(.tb-newslist--compact) > li:not(.tb-newslist__lead):last-child:nth-child(even) { grid-column: 1 / -1; }
  .tb-newslist:not(.tb-newslist--compact) > li:not(.tb-newslist__lead):last-child:nth-child(even) .tb-newscard__link { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tb-newslist:not(.tb-newslist--compact) > li:not(.tb-newslist__lead):last-child:nth-child(even) .tb-newscard__img { height: 100%; aspect-ratio: auto; border-bottom: 0; border-right: 4px solid var(--color-primary); }
}

/* Kalender: Kaderauswahl als Mini-Karten (auf dem Handy waagerecht wischbar) */

/* Detailkarte des gewählten Kaders */
.tb-trainplan__short { margin: 0 0 var(--space-md); color: var(--text-secondary); }
.tb-trainplan__head { margin: var(--space-md) 0 var(--space-sm); font-size: 1rem; font-family: inherit; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); }
.tb-trainplan__more { margin: var(--space-md) 0 0; font-weight: 700; }
.tb-trainplan + .tb-section__title { margin-top: var(--space-xl); }
.tb-events__list > .tb-trainplan:first-child { margin-top: 0; }

/* Kennzahlen zählen hoch (ui/counters.js): feste Ziffernbreite, am Ende kurzes Einschnappen */
.tb-count { display: inline-block; font-variant-numeric: tabular-nums; }
.tb-count--done .tb-count { animation: tb-count-pop 0.45s cubic-bezier(0.2, 0.8, 0.2, 1.4); }
@keyframes tb-count-pop { 0% { transform: scale(1); } 45% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* Kalender mit gewählten Kadern: die Reiter daneben sind genau so hoch wie der Kalender. Die Spalte zählt für die Zeilenhöhe nicht mit
   (contain: size), der Kalender bestimmt sie und bleibt oben stehen; ist eine Karte länger, scrollt sie in sich. */
@media (min-width: 64rem) {
  .tb-events--training { align-items: stretch; }
  .tb-events--training > .tb-cal { align-self: start; }
  .tb-events--training .tb-events__list { display: flex; flex-direction: column; min-height: 0; contain: size; }
  .tb-events--training .tb-tabs { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .tb-events--training .tb-tabs__list { flex: none; }
  .tb-events--training .tb-trainplan { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; scrollbar-width: none; }
  .tb-events--training .tb-trainplan::-webkit-scrollbar { display: none; }
  .tb-events--training .tb-trainplan .tb-trainplan__more { margin-top: auto; padding-top: var(--space-md); }   /* stärker als ".tb-trainplan p:last-child" */
}
.tb-tabs .tb-trainplan { margin-top: 0; }

/* Startseite: Startblock mit Bahnnummer als Hintergrundmotiv der Kacheln (Bahn 1 bis 8) */
.tb-tile--lane { position: relative; overflow: hidden; isolation: isolate; }
.tb-tile__block {
  position: absolute; right: -0.4rem; bottom: -1.1rem; z-index: -1; width: 9rem; height: 9rem;
  color: var(--color-primary-light); opacity: 0.16; pointer-events: none;
  transition: opacity var(--transition-base), transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tb-tile__blockart { width: 100%; height: 100%; stroke-width: 0.9; }
/* Bahnnummer auf der Vorderseite des Sockels */
.tb-tile__block b {
  position: absolute; left: 30%; top: 50%; width: 47%; text-align: center;
  font-family: var(--font-family-heading); font-weight: 800; font-size: 2.5rem; line-height: 1;
  font-variation-settings: "wdth" 78; color: var(--text-primary); font-size: 3rem;
}
.tb-tile--lane:hover .tb-tile__block, .tb-tile--lane:focus-visible .tb-tile__block { opacity: 0.42; transform: translate(-0.3rem, -0.4rem) rotate(-3deg); }
.tb-tile--lane:hover .tb-tile__block b, .tb-tile--lane:focus-visible .tb-tile__block b { color: var(--color-primary-light); }
/* Text-Kennzahl ohne Zahl (z. B. "LSP Bochum") gleitet beim Sichtbarwerden ein */
[data-tb-reveal] { opacity: 0; transform: translateY(0.4em); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
[data-tb-reveal].tb-reveal--in { opacity: 1; transform: none; }

/* Impressum und Datenschutz */
.tb-legal__body { max-width: 62ch; }
/* Breite Fenster: Inhaltsverzeichnis als feste Spalte links, Text bis ca. 80 Zeichen je Zeile (gut lesbar), die Seite wird kürzer; schmal bleibt alles einspaltig */
.tb-legal__toc { display: none; }
@media (min-width: 64rem) {
  .tb-legal__layout--toc { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: var(--space-2xl, 3rem); align-items: start; }
  .tb-legal__layout--toc .tb-legal__body { max-width: 80ch; }
  .tb-legal__layout--toc .tb-legal__body h2:first-child { margin-top: 0; }
  .tb-legal__toc { display: block; position: sticky; top: 6rem; padding: var(--space-md); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); }
  .tb-legal__toc-title { margin: 0 0 var(--space-sm); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); }
  .tb-legal__toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
  .tb-legal__toc a { display: block; padding: 0.3rem 0.5rem; border-radius: var(--radius-sm, 6px); font-size: 0.92rem; line-height: 1.3; color: var(--text-primary); text-decoration: none; }
  .tb-legal__toc a:hover, .tb-legal__toc a:focus-visible { background: color-mix(in srgb, var(--color-primary) 14%, transparent); color: var(--color-accent-text); }
  .tb-legal__body h2 { scroll-margin-top: 6rem; }
}
.tb-legal__body h2 { margin-top: var(--space-xl); font-size: 1.3rem; }
.tb-legal__body table { width: 100%; border-collapse: collapse; margin: var(--space-md) 0; }
.tb-legal__body th, .tb-legal__body td { text-align: left; padding: var(--space-sm); border-bottom: 1px solid var(--border-color); vertical-align: top; }
.tb-legal__body code { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-sm, 4px); padding: 0 0.3em; }
.tb-legal__draft { max-width: 62ch; padding: var(--space-md); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: inset 4px 0 0 var(--color-warning); }

/* Entwicklungshilfe: Farbwähler (nur lokal sichtbar) */
.tb-dialog--live { align-items: flex-end; justify-content: flex-end; pointer-events: none; }
.tb-dialog--live .tb-dialog__backdrop { background: transparent; backdrop-filter: none; }
.tb-dialog--live .tb-dialog__panel { pointer-events: auto; max-width: 22rem; box-shadow: var(--shadow-md); }
.tb-colordebug__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-xs) 0; }
.tb-colordebug__row input { width: 3rem; height: 2rem; padding: 0; border: 1px solid var(--border-color); border-radius: var(--radius-sm, 4px); background: transparent; cursor: pointer; }
.tb-colordebug__hint { margin: 0 0 var(--space-sm); color: var(--text-secondary); font-size: 0.875rem; }
.tb-colordebug__family { padding: var(--space-xs) 0 var(--space-sm); border-bottom: 1px solid var(--border-color); }
.tb-colordebug__shifts { display: flex; align-items: center; gap: var(--space-md); }
.tb-colordebug__shift { display: flex; align-items: center; gap: var(--space-xs); color: var(--text-secondary); font-size: 0.875rem; }
.tb-colordebug__shift input { width: 4.5rem; cursor: text; }
.tb-colordebug__ratio { margin-left: auto; font-size: 0.875rem; font-variant-numeric: tabular-nums; color: var(--color-success); }
.tb-colordebug__ratio--low { color: var(--color-error); }
.tb-colordebug__toggle { margin-top: var(--space-sm); }
.tb-colordebug__adv { margin-top: var(--space-sm); }
.tb-colordebug__adv summary { cursor: pointer; color: var(--text-secondary); }

/* Verwaltungsbereich: Anmeldung */
.tb-admin__form { display: grid; gap: var(--space-md); max-width: 28rem; }
.tb-field { display: grid; align-content: start; gap: var(--space-xs); font-weight: 600; }   /* oben ausrichten: neben einem Feld mit Hinweis wird das Eingabefeld nicht höher */
.tb-field input { min-height: 2.75rem; padding: 0 var(--space-md); font: inherit; font-weight: 400; color: var(--text-primary); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md, 8px); }
.tb-field input:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.tb-admin__error { margin: 0; color: var(--color-error); font-weight: 600; }
.tb-admin__notice { max-width: 40rem; padding: var(--space-md); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: inset 4px 0 0 var(--color-warning); }

/* Verwaltungsbereich: Navigation, Tabellen, Formulare */
/* Konto-Menü ganz rechts in der Kopfzeile (nur mit angemeldetem Gerät) */
.tb-account { position: relative; z-index: 120; }
.tb-account[data-state="loading"], .tb-account[data-state="out"][data-admin-page="0"]:not([data-standalone]) { display: none; }
/* auf der Website (installierte App) nur das Symbol, ohne Text */
.tb-account[data-admin-page="0"] .tb-account__login .tb-account__who { display: none; }
.tb-account__btn, .tb-account__login {
  display: inline-flex; align-items: center; gap: 0.65rem; min-height: 2.9rem; padding: 0.25rem 0.9rem 0.25rem 0.3rem; cursor: pointer;
  background: color-mix(in srgb, var(--bg-card) 82%, transparent); backdrop-filter: blur(10px); color: var(--text-primary);
  border: 1px solid var(--border-color); border-radius: var(--radius-full); font: inherit; text-decoration: none; text-align: left;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.tb-account__btn:hover, .tb-account__login:hover, .tb-account__btn[aria-expanded="true"] { border-color: var(--color-primary); box-shadow: var(--glow-primary); }
.tb-account__avatar {
  position: relative; flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: color-mix(in srgb, var(--text-primary) 10%, var(--bg-card)); color: var(--text-primary);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text-primary) 22%, transparent);
  font-family: var(--font-family-heading); font-weight: 700; font-size: 1rem; letter-spacing: 0.02em;
}
.tb-account__avatar--out { background: transparent; color: var(--text-secondary); box-shadow: inset 0 0 0 2px var(--border-color); }
.tb-account__avatar--out .tb-icon { width: 1.2rem; height: 1.2rem; }
/* Nur das Symbol (Website, oder schmales Fenster): der Knopf selbst ist der Kreis, das Symbol ohne eigenen Ring (sonst Kreis im Kreis) */
.tb-account[data-admin-page="0"] .tb-account__login { justify-content: center; width: 2.9rem; padding: 0; }
.tb-account[data-admin-page="0"] .tb-account__login .tb-account__avatar--out { box-shadow: none; }
@media (max-width: 47.99rem) {
  .tb-account .tb-account__login { justify-content: center; width: 2.9rem; padding: 0; }
  .tb-account .tb-account__login .tb-account__avatar--out { box-shadow: none; }
}
.tb-account__avatar--big { width: 4.4rem; height: 4.4rem; font-size: 1.7rem; }
.tb-account__dot { position: absolute; right: -1px; bottom: -1px; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: var(--color-success); box-shadow: 0 0 0 2px var(--bg-card), 0 0 8px var(--color-success); }
.tb-account__avatar--big .tb-account__dot { width: 1.05rem; height: 1.05rem; right: 0; bottom: 0; }
.tb-account__who { display: grid; line-height: 1.15; min-width: 0; }
.tb-account__who b { font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 12rem; }
.tb-account__who small { font-size: 0.75rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 12rem; }
.tb-account__chev { color: var(--text-secondary); transition: transform 0.15s ease; }
.tb-account__btn[aria-expanded="true"] .tb-account__chev { transform: rotate(180deg); }
.tb-account__btn[hidden], .tb-account__login[hidden], .tb-account__panel[hidden] { display: none; }
.tb-account__badge { margin-left: auto; display: inline-flex; align-items: center; gap: 0.25rem; padding: 0 0.5rem; border: 1px dashed var(--border-color); border-radius: var(--radius-full); font-size: 0.7rem; font-weight: 700; color: var(--text-secondary); }
.tb-account__badge .tb-icon { width: 0.75rem; height: 0.75rem; }
/* Das Menü hängt in der Kopfzeile, die im hellen Modus dunkel ist: ohne eigene Schriftfarbe erben Name und Rolle deren helle Schrift (hell auf hell) */
.tb-account__panel {
  color: var(--text-primary);
  position: absolute; right: 0; top: calc(100% + 0.6rem); width: min(19rem, calc(100vw - 2rem)); overflow: hidden;
  background: color-mix(in srgb, var(--bg-card) 97%, transparent); backdrop-filter: blur(16px);
  border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: var(--shadow-md), var(--glow-primary);
  animation: tb-account-pop 0.16s ease-out;
}
@keyframes tb-account-pop { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: none; } }
.tb-account__card { display: grid; justify-items: center; gap: 0.2rem; padding: var(--space-lg) var(--space-md) var(--space-md); text-align: center; background: linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 22%, transparent), transparent 70%); }
.tb-account__card p { margin: 0; }
.tb-account__hello { margin-top: var(--space-sm); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); }
.tb-account__name { font-family: var(--font-family-heading); font-size: 1.35rem; font-weight: 700; color: var(--text-primary); }
.tb-account__roles { list-style: none; margin: var(--space-xs) 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xs); }
.tb-account__role { padding: 0.1rem 0.7rem; border-radius: var(--radius-full); font-size: 0.8rem; font-weight: 700; background: color-mix(in srgb, var(--color-primary) 18%, transparent); border: 1px solid color-mix(in srgb, var(--color-primary) 55%, transparent); }
.tb-account__device { font-size: 0.78rem; color: var(--text-secondary); max-width: 16rem; }
.tb-account__links { list-style: none; margin: 0; padding: var(--space-xs); border-top: 1px solid var(--border-color); }
.tb-account__links:not(:has(> li:not([hidden]))) { display: none; }   /* Gruppe ohne sichtbaren Eintrag (z. B. Athlet ohne Verwaltung): samt Linie weg */
.tb-account__version { margin: 0; padding: 0.4rem var(--space-md) 0.6rem; border-top: 1px solid var(--border-color); font-size: 0.72rem; color: var(--text-secondary); text-align: center; font-variant-numeric: tabular-nums; }   /* Stand der App, klein unter dem Menü */
.tb-account__links a, .tb-account__out, .tb-account__tool {
  display: flex; align-items: center; gap: 0.7rem; width: 100%; padding: 0.6rem 0.8rem; border: 0; border-radius: var(--radius-md, 10px);
  background: transparent; color: var(--text-primary); font: inherit; font-weight: 600; text-decoration: none; text-align: left; cursor: pointer;
}
.tb-account__links a:hover, .tb-account__out:hover, .tb-account__tool:hover { background: var(--border-color); }
/* Schalter im Konto-Menü: Beschriftung links, Schalter rechts (Aussehen wie .tb-switch, Zustand am Knopf) */
.tb-account__toggle > span:not(.tb-switch) { flex: 1; }
.tb-account__toggle .tb-switch { pointer-events: none; }
.tb-account__toggle[aria-checked="true"] .tb-switch { background: var(--color-primary); border-color: var(--color-primary); }
.tb-account__toggle[aria-checked="true"] .tb-switch__knob { transform: translateX(1rem); background: var(--color-on-primary); }
.tb-account__out { color: var(--color-error); }
.tb-account__links .tb-icon { width: 1.15rem; height: 1.15rem; flex: none; }
@media (max-width: 47.99rem) { .tb-account__who { display: none; } .tb-account__btn, .tb-account__login { padding-right: 0.5rem; } }
@media (prefers-reduced-motion: reduce) { .tb-account__panel { animation: none; } }
/* Handy: rechts vom Konto-Knopf steht noch "Menü", rechtsbündig am Knopf ragte das Fenster links über den Rand. Hier hängt es an der
   Kopfleiste (.tb-account ohne Positionierung, die Kopfleiste ist sticky): rechtsbündig mit Randabstand, auch neben der Notch. */
@media (max-width: 47.99rem) {
  .tb-header .tb-account, .tb-header .tb-feed { position: static; }
  .tb-header .tb-account__panel, .tb-header .tb-feed__panel { right: max(var(--space-sm), env(safe-area-inset-right)); top: calc(100% + 0.4rem); width: min(21rem, calc(100vw - 2 * var(--space-sm))); }
}


.tb-tablewrap { overflow-x: auto; }
.tb-table { width: 100%; border-collapse: collapse; }
.tb-table th, .tb-table td { text-align: left; padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--border-color); vertical-align: middle; }
.tb-table th { font-size: 0.85rem; color: var(--text-secondary); }
.tb-chip--ok { background: var(--color-success); color: var(--color-black); }
.tb-admin__form--wide { max-width: 48rem; }
.tb-changes__pre { margin: var(--space-xs) 0 0; max-width: 46rem; white-space: pre-wrap; word-break: break-word; font-size: 0.85rem; font-family: monospace; }
.tb-athletes__thumb--empty { border-radius: 50%; background: var(--bg-card); color: var(--text-secondary); fill: currentColor; opacity: 0.8; }
/* Logo im Partner-Editor: Karte wie das Formular, Vorschau hell und dunkel nebeneinander */
.tb-admin .tb-logoedit { margin-top: var(--space-lg); padding: var(--space-lg); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.tb-logoedit .tb-section__title { margin: 0; }
.tb-logoedit__previews { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-md); }
.tb-logoedit__preview { padding: var(--space-sm); background: var(--bg-primary); border-radius: var(--radius-lg); color: var(--text-primary); }
.tb-logoedit__preview .tb-partner { min-height: 9rem; }
.tb-logoedit__preview .tb-partner__body { padding: var(--space-md); }
.tb-logoedit__preview .tb-partner__name { margin: 0; }
.tb-logoedit .tb-ri__drop { margin: 0; min-height: 6rem; }
/* Logo in der Partnerliste wie auf der Website: einfarbige Silhouette (dunkel im hellen, hell im dunklen Design), so ist jedes Logo
   sichtbar, auch weiß auf transparentem Grund */
.tb-partnerthumb { display: grid; place-items: center; width: 4.5rem; height: 2.5rem; padding: 0.3rem; border-radius: var(--radius-md); background: var(--bg-primary); box-shadow: inset 0 0 0 1px var(--border-color); }
.tb-partnerthumb img { max-width: 100%; max-height: 100%; object-fit: contain; filter: brightness(0); opacity: 0.75; }
[data-theme="dark"] .tb-partnerthumb img { filter: brightness(0) invert(1); opacity: 0.85; }
.tb-partnerthumb--empty { background: transparent; box-shadow: none; border: 1px dashed var(--border-color); color: var(--text-secondary); font-size: 0.65rem; font-weight: 600; text-align: center; line-height: 1.1; }
.tb-admin__focuspreview { width: 100%; aspect-ratio: 16 / 5; object-fit: cover; border-radius: var(--radius-lg); }
.tb-training__row { align-items: center; padding: var(--space-sm) 0; border-bottom: 1px solid var(--border-color); }
.tb-training__days { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.tb-training__times { display: flex; align-items: center; gap: var(--space-sm); }
.tb-admin__row { display: grid; gap: var(--space-md); }
@media (min-width: 48rem) { .tb-admin__row { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); } }
.tb-admin__fieldset { margin: 0; padding: var(--space-md); border: 1px solid var(--border-color); border-radius: var(--radius-lg); }
.tb-admin__fieldset legend { padding: 0 var(--space-xs); font-weight: 600; }
.tb-admin__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin: 0; }
.tb-admin__rowactions { white-space: nowrap; }
.tb-appbuild { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tb-appbuild--old { color: var(--color-warning); }   /* Gerät hat das letzte Update noch nicht geladen */
.tb-admin__rowactions .tb-btn + .tb-btn { margin-left: var(--space-xs); }
.tb-btn--danger-text { color: var(--color-error); }
.tb-field textarea, .tb-field select { padding: var(--space-sm) var(--space-md); font: inherit; font-weight: 400; color: var(--text-primary); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md, 8px); }
.tb-field textarea { resize: vertical; line-height: 1.5; }
.tb-field select { min-height: 2.75rem; }
.tb-field textarea:focus-visible, .tb-field select:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.tb-field__hint { font-weight: 400; color: var(--text-secondary); }

/* ---------- Auswahllisten: überall gleich, Farben nur aus dem Theme. Pfeil aus zwei Verläufen (folgt Theme und Modus ohne Bilddatei);
   wo der Browser es kann (appearance: base-select, Chrome/Edge ab 135), ist auch die aufgeklappte Liste gestaltet, sonst die native im passenden Modus */
select:not([multiple]):not([size]) {
  -webkit-appearance: none; appearance: none; padding-right: 2.4rem; cursor: pointer; text-overflow: ellipsis;
  background-image: linear-gradient(45deg, transparent 40%, var(--select-icon) 40% 60%, transparent 60%), linear-gradient(-45deg, transparent 40%, var(--select-icon) 40% 60%, transparent 60%);
  background-size: 0.42rem 0.42rem; background-position: calc(100% - 1.25rem) 55%, calc(100% - 0.83rem) 55%; background-repeat: no-repeat;
}
select option { color: var(--text-primary); background-color: var(--bg-card); }
@supports (appearance: base-select) {
  select:not([multiple]):not([size]), select:not([multiple]):not([size])::picker(select) { appearance: base-select; }
  select:not([multiple]):not([size]) { display: inline-flex; align-items: center; padding-right: 0.9rem; background-image: none; }
  select:not([multiple]):not([size])::picker-icon {
    content: ''; flex: none; width: 0.42rem; height: 0.42rem; margin-inline-start: auto; padding: 0; border-right: 2px solid var(--select-icon); border-bottom: 2px solid var(--select-icon);
    rotate: 45deg; translate: 0 -0.12rem; transition: rotate var(--transition-base), translate var(--transition-base);
  }
  select:not([multiple]):not([size]):open::picker-icon { rotate: 225deg; translate: 0 0.12rem; }
  select:not([multiple]):not([size])::picker(select) {
    margin-block: 0.35rem; padding: 0.3rem; max-height: min(22rem, 60vh); overflow-y: auto; color: var(--text-primary); background: var(--bg-card);
    border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  }
  select:not([multiple]):not([size]) option { gap: 0.6rem; padding: 0.5rem 0.75rem; border-radius: var(--radius-sm); background-color: transparent; }
  select:not([multiple]):not([size]) option:is(:hover, :focus-visible) { outline: none; background-color: color-mix(in srgb, var(--color-primary) 12%, transparent); }
  select:not([multiple]):not([size]) option:checked { font-weight: 600; }
  select:not([multiple]):not([size]) option::checkmark { order: 1; margin-inline-start: auto; color: var(--color-primary); }
  select:not([multiple]):not([size]) option:disabled { opacity: 0.5; }
}
.tb-field__error { font-weight: 600; color: var(--color-error); }

/* Bearbeiten-Knopf auf öffentlichen Seiten (nur für angemeldete Verwaltungsgeräte, vom Skript eingefügt) */
[data-tb-edit] { position: relative; }
.tb-editlink {
  position: absolute; top: var(--space-sm); right: var(--space-sm); z-index: 5;
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  color: var(--color-on-primary); background: var(--color-primary); border: 0; box-shadow: inset 0 0 0 2px var(--color-white), var(--shadow-md);   /* Ring statt Rahmen */
}
.tb-editlink:hover { background: var(--color-primary-dark); }
/* Kalender: Stift an die Ecke gehängt, damit er die Monatsnavigation nicht verdeckt; Kaderleiste: neben der Überschrift */
.tb-cal > .tb-editlink { top: -0.9rem; right: -0.9rem; }
/* Monatswechsel ohne Neuladen (ui/calendar-nav.js): kurz gedimmt, bis der neue Monat da ist */
.tb-cal__grid, .tb-cal__title { transition: opacity var(--transition-base); }
.tb-cal--loading .tb-cal__grid, .tb-cal--loading .tb-cal__title { opacity: 0.5; }
.tb-squadpick:has(> .tb-editlink) { padding-right: 3.25rem; }
.tb-squadpick > .tb-editlink { top: -0.4rem; right: 0; }
/* Stifte ausgeblendet (Konto-Menü "Inline-Bearbeitung") */
.tb-edit-off .tb-editlink { display: none; }
.tb-edit-off .tb-squadpick:has(> .tb-editlink) { padding-right: 0; }
/* Wettkampflisten: kleiner Stift; in der kompakten Liste mittig in der Zeile, der Titel macht ihm Platz */
/* Kleine Stifte in ganzen Pixeln (keine halben Pixel durch rem oder translate, sonst verschwimmen Ring und Strich), Strich etwas kräftiger */
.tb-eventlist [data-tb-edit] > .tb-editlink { width: 32px; height: 32px; top: 8px; right: 8px; }
.tb-eventlist [data-tb-edit] > .tb-editlink svg { width: 16px; height: 16px; stroke-width: 2.1; }
.tb-events--compact .tb-eventlist [data-tb-edit] > .tb-editlink { width: 28px; height: 28px; top: 0; bottom: 0; right: 8px; margin: auto 0; box-shadow: none; }
.tb-events--compact .tb-eventlist [data-tb-edit] > .tb-editlink svg { width: 14px; height: 14px; stroke-width: 2.3; }
html:not(.tb-edit-off) .tb-events--compact .tb-eventlist [data-tb-edit]:has(> .tb-editlink) .tb-eventcard { padding-right: 2.6rem; }

/* Verwaltungsbereich: Mediathek */
.tb-mediagrid { list-style: none; margin: var(--space-lg) 0 0; padding: 0; display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.tb-mediagrid__item a { display: grid; gap: var(--space-xs); height: 100%; padding: var(--space-sm); color: inherit; text-decoration: none; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); }
.tb-mediagrid__item a:hover { border-color: var(--color-primary); }
.tb-mediagrid__item img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-md, 8px); }
.tb-mediagrid__title { font-weight: 700; }
.tb-mediagrid__credit, .tb-mediagrid__license { font-size: 0.85rem; color: var(--text-secondary); }
/* Grafiken mit Transparenz (PNG, SVG) in der Mediathek: ganz und mittig zeigen, auf mittelgrauem Karomuster (schwarze, blaue und weiße Logos bleiben in beiden Themes sichtbar) */
img.tb-media--graphic, .tb-admin .tb-mediagrid__item img.tb-media--graphic { object-fit: contain; object-position: center; background: repeating-conic-gradient(var(--palette-mist) 0 25%, var(--palette-slate) 0 50%) 0 0 / 16px 16px; }
.tb-admin__preview { display: block; max-width: 100%; max-height: 22rem; height: auto; border-radius: var(--radius-lg); border: 1px solid var(--border-color); }
.tb-admin__upload { margin: 0 0 var(--space-lg); }
.tb-admin__upload > summary { display: inline-flex; cursor: pointer; list-style: none; }
.tb-admin__upload > summary::-webkit-details-marker { display: none; }
.tb-check { display: flex; align-items: center; gap: var(--space-sm); font-weight: 600; }
.tb-check input { width: 1.25rem; height: 1.25rem; accent-color: var(--color-primary); }

/* Verwaltungsbereich: Benutzer, Einmalcode */
.tb-admin__section { margin-top: var(--space-xl); }
.tb-check--block { display: flex; align-items: flex-start; margin-bottom: var(--space-sm); }
.tb-check--block input { margin-top: 0.2rem; }
.tb-codebox { display: grid; gap: var(--space-md); justify-items: center; text-align: center; }
.tb-codebox__steps { margin: 0; padding-left: 1.4rem; text-align: left; justify-self: stretch; display: grid; gap: var(--space-xs); }
.tb-codebox__code { margin: 0; font-size: 1.8rem; font-weight: 800; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; word-break: break-all; }
/* Unsichtbares Formular zum Sichern im Passwort-Manager (ui/my-devices.js): nicht display:none, sonst übergehen Browser die Felder */
.tb-vaultform { position: fixed; left: -100vw; top: 0; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.tb-logincard__recover { margin-top: var(--space-lg); text-align: left; }
.tb-logincard__recover summary { cursor: pointer; font-weight: 700; color: var(--text-secondary); }
.tb-logincard__recover[open] summary { margin-bottom: var(--space-md); color: var(--text-primary); }
.tb-admin__qr { padding: var(--space-sm); background: var(--color-qr-bg); border-radius: var(--radius-md, 8px); line-height: 0; }

/* Qualifikationen auf der Trainerkarte */
.tb-chip--qual { background: transparent; border: 1px solid var(--border-color); }

/* Athleten-Verwaltung */
.tb-athletes__filters { display: grid; gap: var(--space-md); margin: var(--space-md) 0; align-items: end; }
@media (min-width: 48rem) { .tb-athletes__filters { grid-template-columns: 2fr 1.2fr 1.2fr auto auto; } }
.tb-athletes__summary { margin: 0 0 var(--space-md); font-weight: 600; }
.tb-athletes__thumb { display: block; width: 3rem; height: 3rem; object-fit: cover; object-position: center 20%; border-radius: 50%; }
.tb-table__inactive { opacity: 0.6; }

/* Bildauswahl aus der Mediathek (Suche, Vorschau, Raster oder Liste) */
.tb-picker { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); }
.tb-picker__thumb { flex: none; width: 3.5rem; height: 3.5rem; object-fit: cover; object-position: center 20%; border-radius: var(--radius-md, 8px); border: 1px solid var(--border-color); }
.tb-picker__label { flex: 1 1 12rem; min-width: 0; font-weight: 400; overflow-wrap: anywhere; }
.tb-dialog--wide .tb-dialog__panel { max-width: 60rem; }
.tb-picker__bar { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.tb-picker__set { flex: 0 1 14rem; min-height: 2.75rem; }
.tb-picker__search { flex: 1 1 14rem; min-height: 2.75rem; padding: 0 var(--space-md); font: inherit; color: var(--text-primary); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md, 8px); }
.tb-picker__search:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.tb-picker__views { display: flex; gap: var(--space-xs); }
.tb-picker__views .tb-btn[aria-pressed="true"] { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.tb-picker__results { list-style: none; margin: 0; padding: 0; max-height: 55vh; overflow: auto; display: grid; gap: var(--space-sm); }
.tb-picker__results--grid { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
.tb-picker__item { display: grid; gap: 2px; width: 100%; padding: var(--space-xs); text-align: left; font: inherit; color: inherit; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md, 8px); cursor: pointer; }
.tb-picker__item:hover, .tb-picker__item:focus-visible { border-color: var(--color-primary); }
.tb-picker__item--on { border-color: var(--color-primary); box-shadow: inset 0 0 0 2px var(--color-primary); }
.tb-picker__item img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: center 20%; border-radius: var(--radius-sm, 4px); }
.tb-picker__title { font-weight: 700; font-size: 0.9rem; }
.tb-picker__credit { font-size: 0.8rem; color: var(--text-secondary); }
.tb-picker__results--list .tb-picker__item { grid-template-columns: 3rem 1fr auto; align-items: center; gap: var(--space-md); }
.tb-picker__results--list .tb-picker__item img { width: 3rem; height: 3rem; aspect-ratio: 1; border-radius: 50%; }

/* Knopf "Nach oben" */
/* ---------------------------------------------------------------- Zum Aktualisieren herunterziehen (ui/pull-refresh.js, installierte App)
   Ein dunkler Tropfen gleitet unter dem Kopf hervor (--ptr-top = Unterkante des Kopfs, --ptr-pull = Zugweg) und füllt sich mit Wasser
   (--ptr-fill 0..1); ab der Schwelle leuchtet er, beim Neuladen dreht sich ein Ring. Die App selbst federt oben nicht nach (nur der Tropfen). */
html.tb-ptr-on { overscroll-behavior-y: none; }
.tb-ptr {
  position: fixed; left: 50%; top: var(--ptr-top, 0px); z-index: 99; width: 2.75rem; height: 2.75rem; border-radius: 50%; overflow: hidden;
  background: var(--color-black); color: var(--color-white);
  box-shadow: inset 0 0 0 1px var(--on-dark-line-strong), var(--shadow-md);
  transform: translate(-50%, calc(var(--ptr-pull, 0px) - 3.25rem)) scale(calc(0.7 + 0.3 * var(--ptr-fill, 0)));
  opacity: 0; pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s ease, box-shadow 0.25s ease;
}
.tb-ptr--active { opacity: 1; }
.tb-ptr--drag { transition: opacity 0.25s ease, box-shadow 0.25s ease; }   /* beim Ziehen folgt der Tropfen dem Finger ohne Verzögerung */
/* Wasser: steigt mit dem Zugweg, die Oberfläche schwappt (zwei gegeneinander laufende Wellen) */
.tb-ptr__water {
  position: absolute; left: -50%; right: -50%; bottom: 0; height: 100%;
  background: linear-gradient(180deg, var(--color-accent), var(--color-primary));
  transform: translateY(calc((1 - var(--ptr-fill, 0)) * 100%));
  border-radius: 42% 46% 0 0 / 18% 22% 0 0;
  animation: tb-ptr-slosh 2.4s ease-in-out infinite alternate;
}
.tb-ptr--drag .tb-ptr__water, .tb-ptr--loading .tb-ptr__water { transition: none; }
.tb-ptr__drop { position: absolute; inset: 0.55rem; width: auto; height: auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; filter: drop-shadow(0 0 2px var(--color-black)); }
/* Schwelle erreicht: Leuchten und ein kleiner Hüpfer */
.tb-ptr--ready { box-shadow: inset 0 0 0 1px var(--color-accent), var(--glow-primary); }
.tb-ptr--ready .tb-ptr__drop { animation: tb-ptr-pop 0.3s ease-out; }
/* Neu laden: Ring dreht sich um den vollen Tropfen, dazu eine Welle nach außen */
.tb-ptr__ring { position: absolute; inset: 0; border-radius: 50%; opacity: 0; }
.tb-ptr--loading { transform: translate(-50%, calc(var(--ptr-pull, 0px) - 3.25rem)) scale(1); }
.tb-ptr--loading .tb-ptr__ring {
  opacity: 1;
  background: conic-gradient(from 0deg, transparent 0 55%, var(--color-white) 100%);
  -webkit-mask: radial-gradient(circle, transparent 0 60%, var(--palette-pure-black) 62%); mask: radial-gradient(circle, transparent 0 60%, var(--palette-pure-black) 62%);
  animation: tb-ptr-spin 0.8s linear infinite;
}
.tb-ptr--loading::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 var(--color-accent);
  animation: tb-ptr-ripple 1s ease-out infinite;
}
@keyframes tb-ptr-slosh { from { border-radius: 42% 46% 0 0 / 18% 22% 0 0; margin-left: -6%; } to { border-radius: 48% 40% 0 0 / 24% 16% 0 0; margin-left: 6%; } }
@keyframes tb-ptr-pop { 0% { transform: scale(1); } 50% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes tb-ptr-spin { to { transform: rotate(360deg); } }
@keyframes tb-ptr-ripple { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 60%, transparent); } to { box-shadow: 0 0 0 1.4rem transparent; } }
@media (prefers-reduced-motion: reduce) {
  .tb-ptr, .tb-ptr__water { transition: none; }
  .tb-ptr__water, .tb-ptr--ready .tb-ptr__drop, .tb-ptr--loading::after { animation: none; }
  .tb-ptr--loading .tb-ptr__ring { animation-duration: 2s; }
}

.tb-totop {
  position: fixed; right: max(var(--space-md), env(safe-area-inset-right)); bottom: max(var(--space-md), env(safe-area-inset-bottom)); z-index: 90;
  display: grid; place-items: center; width: 3rem; height: 3rem; padding: 0; cursor: pointer;
  background: var(--color-primary); color: var(--color-on-primary); border: 0; border-radius: 50%; box-shadow: var(--shadow-md), var(--glow-primary);
  transition: transform 0.15s ease, background 0.15s ease;
}
.tb-totop[hidden] { display: none; }
.tb-totop:hover { background: var(--color-primary-light); transform: translateY(-2px); }
.tb-totop .tb-icon { width: 1.4rem; height: 1.4rem; stroke-width: 2.2; }
@media (prefers-reduced-motion: reduce) { .tb-totop { transition: none; } .tb-totop:hover { transform: none; } }

/* Fehlerseiten (404, 403, 405, 500) */
.tb-error { text-align: center; }
.tb-error__code { margin: 0; font-family: var(--font-family-heading); font-size: clamp(5rem, 22vw, 12rem); font-weight: 800; line-height: 1; background: var(--gradient-primary); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tb-error .tb-page__lead { max-width: 46ch; margin: 0 auto var(--space-lg); }
.tb-error__actions { margin: 0 0 var(--space-xl); }
.tb-error__navtitle { font-size: 0.8rem; margin: 0 0 var(--space-md); color: var(--text-secondary); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
.tb-error__nav { margin-bottom: var(--space-xl); }
.tb-error__nav ul { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xs); max-width: 46rem; }
/* Wege als Chips wie die Kaderauswahl im Kalender: gefüllt, gleich hoch, ruhige Kante */
.tb-error__nav a {
  display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0.35rem 1.05rem; border-radius: var(--radius-full);
  border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-primary); text-decoration: none; font-weight: 700; font-size: 0.92rem; line-height: 1.2;
  transition: border-color var(--transition-base), background var(--transition-base), transform var(--transition-base);
}
.tb-error__nav a:hover, .tb-error__nav a:focus-visible { border-color: var(--color-primary-light); background: color-mix(in srgb, var(--color-primary) 12%, var(--bg-card)); transform: translateY(-1px); }

/* =====================================================================================================
   Verwaltungsbereich: Seitenleiste, Kopf, Karten, Formulare, Tabellen, Übersicht, Anmeldung
   Farben ausschließlich über die Rollen aus theme.css, damit helles und dunkles Design funktionieren.
   ===================================================================================================== */

/* ---------- Layout: Seitenleiste links (ab 64rem), Inhalt rechts. Die Leiste läuft beim Scrollen mit. */
.tb-admin { max-width: 86rem; padding-top: var(--space-page-top); }
.tb-admin > * { min-width: 0; }
@media (min-width: 64rem) {
  .tb-admin:has(> .tb-adminnav) { display: grid; grid-template-columns: 14.5rem minmax(0, 1fr); column-gap: clamp(var(--space-lg), 3vw, var(--space-2xl)); align-items: start; }
  .tb-admin:has(> .tb-adminnav) > * { grid-column: 2; }
  .tb-admin > .tb-adminnav { grid-column: 1; grid-row: 1 / span 60; position: sticky; top: 5.25rem; max-height: calc(100vh - 6.5rem); overflow-y: auto; margin: 0; }
}

/* ---------- Kopf jeder Verwaltungsseite: kleinere Überschrift, Augenbraue als Bereichskennung */
.tb-admin > .tb-eyebrow { margin: 0 0 0.35rem; font-size: 0.72rem; }
.tb-admin > h1 { margin: 0 0 var(--space-lg); font-size: clamp(1.9rem, 3.2vw, 2.6rem); line-height: 1.08; letter-spacing: -0.01em; }
.tb-admin > .tb-field__hint, .tb-admin > p > .tb-field__hint { max-width: 62ch; }
.tb-admin > .tb-field__hint.tb-field__hint--wide { max-width: none; }   /* Einleitung über die volle Breite (Seiten mit breiten Tabellen) */
/* Hauptaktion (z. B. „Neuer Beitrag“) mit Plus-Zeichen */
.tb-admin a.tb-btn--primary[href$="/neu"]::before { content: "+"; margin-right: 0.45rem; font-size: 1.25em; font-weight: 700; line-height: 1; }

/* ---------- Seitenleiste */
.tb-adminnav {
  padding: var(--space-sm); border: 1px solid var(--border-color); border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--bg-card) 70%, transparent); backdrop-filter: blur(10px);
}
.tb-adminnav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.tb-adminnav li[hidden], .tb-adminnav__group[hidden] { display: none; }
.tb-adminnav a {
  position: relative; display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.75rem; border-radius: var(--radius-md);
  color: var(--text-secondary); text-decoration: none; font-weight: 600; white-space: nowrap;
  transition: background var(--transition-base), color var(--transition-base);
}
.tb-adminnav a .tb-icon { width: 1.15rem; height: 1.15rem; flex: none; transition: color var(--transition-base), transform var(--transition-base); }
.tb-adminnav a:hover { color: var(--text-primary); background: color-mix(in srgb, var(--text-primary) 7%, transparent); }
.tb-adminnav a:hover .tb-icon { transform: scale(1.08); }
.tb-adminnav a[aria-current="page"] { color: var(--text-primary); background: color-mix(in srgb, var(--color-primary) 17%, transparent); }
.tb-adminnav a[aria-current="page"] .tb-icon { color: var(--color-primary-light); }
.tb-adminnav a[aria-current="page"]::before {
  content: ""; position: absolute; left: calc(-1 * var(--space-sm) - 1px); top: 22%; bottom: 22%; width: 3px; border-radius: 0 3px 3px 0;
  background: var(--gradient-primary); box-shadow: var(--glow-primary);
}
.tb-adminnav__group--locked a[aria-current="page"] { background: color-mix(in srgb, var(--color-accent) 15%, transparent); }
.tb-adminnav__group--locked a[aria-current="page"] .tb-icon { color: var(--color-accent-text); }
.tb-adminnav__group--locked a[aria-current="page"]::before { background: var(--color-accent); box-shadow: none; }
.tb-adminnav__home { margin-bottom: var(--space-xs); }
.tb-adminnav__group { margin-top: var(--space-md); }
.tb-adminnav__title {
  display: flex; align-items: center; gap: 0.35rem; margin: 0 0 0.3rem; padding: 0 0.75rem;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-secondary);
}
.tb-adminnav__lock { display: inline-flex; opacity: 0.8; }
.tb-adminnav__lock .tb-icon { width: 0.85rem; height: 0.85rem; }

/* kleine Bildschirme: wischbare Leiste, Gruppen flach, Titel ausgeblendet */
@media (max-width: 63.99rem) {
  .tb-adminnav {
    display: flex; gap: 0.35rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none;
    margin: 0 calc(-1 * var(--space-md)) var(--space-lg); padding: 0.4rem var(--space-md); border-width: 1px 0; border-radius: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, var(--color-black) var(--space-md), var(--color-black) calc(100% - 2.5rem), transparent);
    mask-image: linear-gradient(90deg, transparent, var(--color-black) var(--space-md), var(--color-black) calc(100% - 2.5rem), transparent);
  }
  .tb-adminnav::-webkit-scrollbar { display: none; }
  .tb-adminnav__group, .tb-adminnav ul { display: contents; }
  .tb-adminnav__group { margin: 0; }
  .tb-adminnav__title { display: none; }
  .tb-adminnav a, .tb-adminnav__home { scroll-snap-align: start; padding: 0.5rem 0.8rem; border: 1px solid var(--border-color); border-radius: var(--radius-full); }
  .tb-adminnav a[aria-current="page"]::before { display: none; }
  .tb-adminnav a[aria-current="page"] { border-color: var(--color-primary); }
  .tb-adminnav__group--locked a .tb-icon { color: var(--color-accent-text); }
  .tb-adminnav__home { margin: 0; }
}
/* Pfeile an der Leiste: nur mit Maus (hover) und nur, wenn sie überläuft; klebend an den Enden, statt der Ausblendung am Rand */
.tb-adminnav__scroll { display: none; }
@media (max-width: 63.99rem) and (hover: hover) and (pointer: fine) {
  .tb-adminnav--overflow { -webkit-mask-image: none; mask-image: none; }
  .tb-adminnav--overflow .tb-adminnav__scroll {
    display: inline-grid; place-items: center; position: sticky; z-index: 1; flex: none; align-self: center; width: 2.2rem; height: 2.2rem; padding: 0;
    border: 0; border-radius: 50%; background: var(--bg-card); color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--border-color), 0 0 0.9rem 0.5rem var(--bg-primary); cursor: pointer;
  }
  .tb-adminnav__scroll--prev { left: 0; }
  .tb-adminnav__scroll--next { right: 0; margin-left: auto; }
  .tb-adminnav__scroll:hover { color: var(--color-primary-light); box-shadow: inset 0 0 0 1px var(--color-primary), 0 0 0.9rem 0.5rem var(--bg-primary); }
  .tb-adminnav__scroll .tb-icon { width: 1.1rem; height: 1.1rem; }
  .tb-adminnav--overflow .tb-adminnav__scroll--off { visibility: hidden; }
}
@media (min-width: 48rem) and (max-width: 63.99rem) { .tb-adminnav { margin-left: calc(-1 * var(--space-xl)); margin-right: calc(-1 * var(--space-xl)); padding-left: var(--space-xl); padding-right: var(--space-xl); } }

/* ---------- Hinweise und Status */
.tb-admin__notice { position: relative; padding-left: calc(var(--space-md) + 4px); border-color: var(--border-color); box-shadow: inset 4px 0 0 var(--color-accent); }
.tb-admin .tb-legal__draft { box-shadow: inset 4px 0 0 var(--color-warning); }
.tb-chip { white-space: nowrap; line-height: 1.6; }
.tb-chip--ok { background: color-mix(in srgb, var(--color-success) 16%, transparent); border-color: color-mix(in srgb, var(--color-success) 55%, transparent); color: var(--text-primary); }
.tb-chip--warn { background: var(--tint-warning); border-color: color-mix(in srgb, var(--color-warning) 55%, transparent); color: var(--text-primary); }
.tb-chip--danger { background: color-mix(in srgb, var(--color-error) 14%, transparent); border-color: color-mix(in srgb, var(--color-error) 50%, transparent); color: var(--text-primary); }
.tb-chip--ok::before, .tb-chip--warn::before, .tb-chip--danger::before {
  content: ""; display: inline-block; width: 0.45rem; height: 0.45rem; margin-right: 0.35rem; border-radius: 50%; vertical-align: 0.08em; background: var(--color-success);
}
.tb-chip--warn::before { background: var(--color-warning); }
.tb-chip--danger::before { background: var(--color-error); }

/* ---------- Tabellen als Karte, ganze Zeile anklickbar */
.tb-admin .tb-tablewrap { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.tb-admin .tb-table th {
  padding-top: 0.8rem; padding-bottom: 0.8rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-secondary); background: color-mix(in srgb, var(--text-primary) 3%, transparent); white-space: nowrap;
}
.tb-admin .tb-table td { padding-top: 0.7rem; padding-bottom: 0.7rem; }
.tb-admin .tb-table tbody tr:last-child td { border-bottom: 0; }
.tb-admin .tb-table tbody tr { transition: background var(--transition-base); }
.tb-admin .tb-table tbody tr:has(a[href]) { cursor: pointer; }
.tb-admin .tb-table tbody tr:hover { background: color-mix(in srgb, var(--color-primary) 7%, transparent); }
.tb-admin .tb-table td a { color: var(--text-primary); font-weight: 700; text-decoration: none; }
.tb-admin .tb-table tbody tr:hover td a:first-of-type, .tb-admin .tb-table td a:focus-visible { color: var(--color-primary-light); }
.tb-admin .tb-table td a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 4px; }
.tb-admin .tb-table img.tb-athletes__thumb { box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 3px var(--border-color); }
.tb-admin .tb-table time, .tb-admin .tb-table td:nth-child(n) { font-variant-numeric: tabular-nums; }

/* ---------- Formulare als Karte, Felder einheitlich, Aktionen kleben unten */
.tb-admin form.tb-admin__form {
  padding: var(--space-lg); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.tb-admin__form--wide { max-width: 54rem; }
.tb-admin .tb-field > span:first-child { font-size: 0.88rem; }
.tb-admin input:is([type="text"], [type="search"], [type="url"], [type="tel"], [type="email"], [type="number"], [type="date"], [type="time"]),
.tb-admin select, .tb-admin textarea {
  min-height: 2.75rem; padding: 0 0.9rem; font: inherit; font-weight: 400; color: var(--text-primary);
  background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--radius-md);
  transition: border-color var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);
}
.tb-admin textarea { padding: 0.7rem 0.9rem; line-height: 1.55; }
.tb-admin input:is([type="text"], [type="search"], [type="url"], [type="tel"], [type="email"], [type="number"], [type="date"], [type="time"]):hover,
.tb-admin select:hover, .tb-admin textarea:hover { border-color: color-mix(in srgb, var(--text-primary) 35%, transparent); }
.tb-admin input:is([type="text"], [type="search"], [type="url"], [type="tel"], [type="email"], [type="number"], [type="date"], [type="time"]):focus-visible,
.tb-admin select:focus-visible, .tb-admin textarea:focus-visible {
  outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 28%, transparent);
}
.tb-admin input::placeholder, .tb-admin textarea::placeholder { color: color-mix(in srgb, var(--text-secondary) 75%, transparent); }
.tb-admin .tb-field--invalid input, .tb-admin .tb-field--invalid select, .tb-admin .tb-field--invalid textarea { border-color: var(--color-error); }
.tb-admin .tb-field--invalid.tb-admin__fieldset { border-color: var(--color-error); }
.tb-admin__fieldset { background: color-mix(in srgb, var(--text-primary) 2%, transparent); }
.tb-admin__fieldset legend { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); }
.tb-admin .tb-check input { accent-color: var(--color-primary); }
.tb-admin__error { padding: 0.6rem 0.9rem; border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-error) 12%, transparent); }

/* Aktionsleiste unten im Formular: klebt am unteren Rand, solange das Formular länger als der Bildschirm ist (--sticky: dieselbe Leiste außerhalb eines Formulars, z. B. DMS-Aufstellung) */
.tb-admin form > .tb-admin__actions, .tb-admin .tb-admin__actions--sticky {
  position: sticky; bottom: 0; z-index: 5; align-items: center;
  margin: var(--space-sm) calc(-1 * var(--space-lg)) calc(-1 * var(--space-lg)); padding: 0.8rem var(--space-lg);
  background: color-mix(in srgb, var(--bg-card) 88%, transparent); backdrop-filter: blur(12px);
  border-top: 1px solid var(--border-color); border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.tb-admin form > .tb-admin__actions .tb-btn--danger-text { margin-left: auto; }
.tb-admin form > .tb-admin__actions--card { position: static; }   /* kurze Formulare (z. B. Strukturgrafik): fester Kartenfuß statt mitlaufender Leiste */
.tb-btn--danger-text:hover, .tb-btn--danger-text:focus-visible { border-color: var(--color-error); background: color-mix(in srgb, var(--color-error) 10%, transparent); color: var(--color-error); }   /* Löschen: rot statt der Primary-Füllung der Ghost-Knöpfe */
.tb-btn--add::before { content: "+"; margin-right: 0.45rem; font-size: 1.2em; line-height: 1; }

/* ---------- Aufklapper (z. B. Sammel-Freigabe, Hochladen) als Karte */
.tb-admin details.tb-admin__upload { margin: 0 0 var(--space-lg); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); }
.tb-admin .tb-admin__upload > summary {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.95rem var(--space-lg); font-weight: 700; border-radius: var(--radius-lg);
  transition: background var(--transition-base);
}
/* Der helle Ton gilt nur für schlichte Aufklapper; ein farbiger Knopf (tb-btn--primary, weiße Schrift) behält seine eigene Hover-Farbe, sonst steht weiße Schrift auf hellem Grund */
.tb-admin .tb-admin__upload > summary:not(.tb-btn--primary):hover { background: color-mix(in srgb, var(--text-primary) 4%, transparent); }
.tb-admin .tb-admin__upload > summary::after {
  content: ""; margin-left: auto; width: 0.55rem; height: 0.55rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--transition-base); opacity: 0.7;
}
.tb-admin .tb-admin__upload[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.tb-admin .tb-admin__upload > :not(summary) { margin: 0; padding: 0 var(--space-lg) var(--space-lg); }
.tb-admin .tb-admin__upload form.tb-admin__form { padding: 0 var(--space-lg) var(--space-lg); background: none; border: 0; box-shadow: none; }
.tb-admin .tb-admin__upload form > .tb-admin__actions { position: static; margin: 0; padding: 0; background: none; border: 0; backdrop-filter: none; }

/* ---------- Filterleiste (Athleten, Änderungen) */
.tb-admin .tb-athletes__filters { padding: var(--space-md) var(--space-lg); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); }
.tb-admin .tb-athletes__summary { font-weight: 500; color: var(--text-secondary); }

/* ---------- Protokoll-Import (admin/results-import.js) */
.tb-ri__drop {
  display: grid; place-items: center; min-height: 8rem; margin: var(--space-md) 0; padding: var(--space-lg); text-align: center; cursor: pointer;
  border: 2px dashed var(--border-color); border-radius: var(--radius-lg); background: var(--bg-card); transition: border-color var(--transition-base), background var(--transition-base);
}
.tb-ri__drop:hover, .tb-ri__drop--over { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 6%, var(--bg-card)); }
.tb-ri__drop:focus-within { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.tb-ri__drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.tb-ri__droptext { display: grid; gap: 4px; }
.tb-ri__droptext small { color: var(--text-secondary); }
.tb-ri__drop--busy { opacity: 0.6; cursor: progress; }
.tb-ri__meet { margin-bottom: var(--space-md); }
.tb-ri__filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: var(--space-sm) var(--space-md); margin: var(--space-lg) 0 var(--space-sm); }
.tb-ri__filters .tb-field { margin: 0; }
.tb-ri__filters input, .tb-ri__filters select { width: 100%; min-width: 0; }
.tb-ri__count { margin: 0 0 var(--space-sm); font-size: 0.9rem; color: var(--text-secondary); }
.tb-ri__table td, .tb-ri__table th { font-size: 0.9rem; vertical-align: top; }
.tb-ri__sort { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: inherit; cursor: pointer; text-transform: inherit; letter-spacing: inherit; }
.tb-ri__sort[aria-sort="ascending"]::after { content: " ▲"; }
.tb-ri__sort[aria-sort="descending"]::after { content: " ▼"; }
.tb-ri__sub { display: block; font-size: 0.78rem; color: var(--text-secondary); }
.tb-ri__time { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tb-ri__club { white-space: nowrap; }
.tb-ri__surcharge { display: block; width: fit-content; margin-top: 2px; padding: 0 0.4rem; border-radius: var(--radius-full); font-size: 0.72rem; font-weight: 700; color: var(--color-warning); border: 1px solid var(--color-warning); }
.tb-ri__note { font-size: 0.8rem; color: var(--text-secondary); }
.tb-ri__row--status td { color: var(--text-secondary); }
.tb-ri__place { display: inline-grid; place-items: center; min-width: 1.8rem; height: 1.8rem; padding: 0 0.3rem; border-radius: var(--radius-full); font-weight: 800; border: 0; box-shadow: inset 0 0 0 1px var(--border-color); }
.tb-ri__place--1 { box-shadow: inset 0 0 0 1px var(--color-warning); background: var(--tint-warning); }
.tb-ri__place--2 { box-shadow: inset 0 0 0 1px var(--text-secondary); background: color-mix(in srgb, var(--text-secondary) 18%, transparent); }
.tb-ri__place--3 { box-shadow: inset 0 0 0 1px var(--color-squad-orange); background: color-mix(in srgb, var(--color-squad-orange) 18%, transparent); }
.tb-ri__sum td { font-weight: 800; }
.tb-ri__enm { max-width: 18rem; margin: 0 0 var(--space-md); }
.tb-ri__relays-title { margin-top: var(--space-xl); }

/* ---------- Wochenplan der Trainingsplanung (admin/training-week.js): Tage × Kader */
.tb-admin--wide { max-width: none; }
.tb-wk__bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-md); }
.tb-wk__bar .tb-field__hint { flex: 1 1 28rem; margin: 0; }
.tb-wk__controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-md); }
.tb-wk__date { flex: none; margin: 0; }
.tb-wk__squad--none .tb-wk__squadname { color: var(--text-secondary); }
.tb-wk__dayshort { display: none; }
.tb-wk__pick { margin: var(--space-md) 0 0; }
.tb-wk__issues { list-style: none; margin: var(--space-md) 0; padding: 0; display: grid; gap: 4px; }
.tb-wk__issue { padding: 0.45rem 0.8rem; border-radius: var(--radius-md); font-size: 0.9rem; border-left: 4px solid var(--border-color); background: var(--bg-card); }
.tb-wk__issue--error { border-left-color: var(--color-error); }
.tb-wk__issue--warn { border-left-color: var(--color-warning); }
.tb-wk__issue--info { border-left-color: var(--color-info); color: var(--text-secondary); }
.tb-wk__issue--ok { border-left-color: var(--color-success); }
.tb-wk__issue { display: block; }
a.tb-wk__issue--link { color: inherit; text-decoration: none; transition: box-shadow var(--transition-base); }
a.tb-wk__issue--link::after { content: " ›"; color: var(--text-secondary); }
a.tb-wk__issue--link:hover, a.tb-wk__issue--link:focus-visible { box-shadow: inset 0 0 0 1px var(--color-primary); }
.tb-wk__legend { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-md); margin: 0 0 var(--space-sm); padding: 0; font-size: 0.85rem; color: var(--text-secondary); }
.tb-wk__legend li { display: inline-flex; align-items: center; gap: 0.4rem; }
.tb-wk__swatch { width: 14px; height: 14px; border-radius: 4px; }
.tb-wk__scroll { overflow-x: auto; overscroll-behavior-x: contain; border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: var(--bg-card); }
.tb-wk { display: grid; min-width: calc(7rem + var(--wk-cols) * 11rem); }
.tb-wk__row { display: grid; grid-template-columns: 7rem repeat(var(--wk-cols), minmax(11rem, 1fr)); border-top: 1px solid var(--border-color); }
/* Schmale Bildschirme: Tage abgekürzt (Mo, Di), schmalere Tagesspalte, mehr Platz für die Einheiten */
@media (max-width: 40rem) {
  .tb-wk { min-width: calc(2.75rem + var(--wk-cols) * 10rem); }
  .tb-wk__row { grid-template-columns: 2.75rem repeat(var(--wk-cols), minmax(10rem, 1fr)); }
  .tb-wk__day { padding: var(--space-sm) 0; text-align: center; }
  .tb-wk__daylong { display: none; }
  .tb-wk__dayshort { display: inline; }
}
.tb-wk__row--head { position: sticky; top: 0; z-index: 2; border-top: 0; background: var(--bg-secondary); }
.tb-wk__day { position: sticky; left: 0; z-index: 1; padding: var(--space-sm); font-weight: 700; background: var(--bg-secondary); border-right: 1px solid var(--border-color); }
.tb-wk__corner { position: sticky; left: 0; background: var(--bg-secondary); border-right: 1px solid var(--border-color); }
.tb-wk__squad { display: grid; gap: 4px; align-content: start; padding: var(--space-sm); border-left: 1px solid var(--border-color); }
.tb-wk__squadname { font-weight: 800; color: var(--text-primary); text-decoration: none; }
.tb-wk__squadname:hover { color: var(--color-primary); }
.tb-wk__plan, .tb-wk__hours { font-size: 0.75rem; color: var(--text-secondary); }
.tb-wk__stats { display: flex; flex-wrap: wrap; gap: 4px; }
.tb-wk__stat { padding: 1px 6px; border-radius: var(--radius-full); font-size: 0.75rem; border: 1px solid var(--border-color); color: var(--text-secondary); }
.tb-wk__stat b { color: var(--text-primary); }
.tb-wk__stat--ok { border-color: color-mix(in srgb, var(--color-success) 60%, transparent); }
.tb-wk__stat--low { border-color: var(--color-warning); background: var(--tint-warning); }
.tb-wk__cell { display: grid; gap: 4px; align-content: start; padding: 6px; min-height: 3rem; border-left: 1px solid var(--border-color); }
.tb-wk__unit { display: grid; gap: 1px; padding: 4px 8px; border-radius: 6px; text-decoration: none; color: var(--text-primary); font-size: 0.8rem; line-height: 1.3;
  border-left: 4px solid var(--border-color); background: var(--bg-secondary); transition: transform var(--transition-base); }
.tb-wk__unit:hover { transform: translateX(2px); }
.tb-wk__time { font-weight: 800; font-variant-numeric: tabular-nums; }
.tb-wk__meta, .tb-wk__who { color: var(--text-secondary); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* Arten: Wasser in der Akzentfarbe, Kraft in der Markenfarbe, Athletik neutral, Theorie gestrichelt; Frühtraining mit Ring */
.tb-wk__unit--wasser { border-left-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 12%, var(--bg-secondary)); }
.tb-wk__unit--kraft { border-left-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 10%, var(--bg-secondary)); }
.tb-wk__unit--athletik { border-left-color: var(--text-secondary); }
.tb-wk__unit--theorie { border-left-style: dashed; }
.tb-wk__unit--early .tb-wk__time::after { content: " früh"; font-weight: 600; color: var(--text-secondary); }
.tb-wk__swatch.tb-wk__unit--wasser { background: var(--color-accent); }
.tb-wk__swatch.tb-wk__unit--kraft { background: var(--color-primary); }
.tb-wk__swatch.tb-wk__unit--athletik { background: var(--text-secondary); }
.tb-wk__swatch.tb-wk__unit--theorie { border: 2px dashed var(--text-secondary); }

/* ---------- Trainingsplan: Einheiten als Karten, Wochentage als Pillen */
.tb-training__row {
  display: grid; gap: var(--space-md); padding: var(--space-md); margin-bottom: var(--space-sm);
  background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--radius-lg); border-bottom-width: 1px;
  animation: tb-admin-in 0.22s ease-out both; transition: opacity 0.18s ease, transform 0.18s ease;
}
.tb-training__row--out { opacity: 0; transform: scale(0.98); }
.tb-training__head { display: flex; align-items: center; gap: var(--space-sm); }
.tb-training__head select { flex: 1 1 9rem; min-width: 0; max-width: 16rem; }   /* feste Basis: Breite folgt nicht der gewählten Option */
.tb-training__head .tb-training__lanes { width: 6.5rem; }
.tb-training__head > :last-child { margin-left: auto; }
.tb-training__more { display: grid; gap: var(--space-sm); }
.tb-training__coaches { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.tb-daypill--wide span { width: auto; padding: 0 0.7rem; }
/* Art der Einheit als Linie links: Wasser Akzent, Land neutral, Theorie gestrichelt */
.tb-training__row--wasser { box-shadow: inset 4px 0 0 var(--color-accent); }
.tb-training__row--kraft, .tb-training__row--athletik { box-shadow: inset 4px 0 0 var(--text-secondary); }
.tb-training__row--theorie { box-shadow: inset 4px 0 0 var(--border-color); }
.tb-training__body { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); }
.tb-training__days { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.tb-training__times { display: inline-flex; align-items: center; gap: var(--space-sm); color: var(--text-secondary); font-weight: 600; }
.tb-training__times input { width: 7.5rem; }
.tb-daypill { position: relative; display: inline-flex; cursor: pointer; }
.tb-daypill input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.tb-daypill span {
  display: inline-grid; place-items: center; min-width: 2.6rem; height: 2.4rem; padding: 0 0.55rem; border-radius: var(--radius-full);
  border: 1px solid var(--border-color); font-size: 0.85rem; font-weight: 700; color: var(--text-secondary); user-select: none;
  transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base), transform 0.12s ease;
}
.tb-daypill:hover span { border-color: var(--color-primary); color: var(--text-primary); }
.tb-daypill:active span { transform: scale(0.94); }
.tb-daypill input:checked + span { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); box-shadow: var(--glow-primary); }
.tb-daypill input:focus-visible + span { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.tb-iconbtn--danger { width: 2.5rem; height: 2.5rem; flex: none; color: var(--text-secondary); border-color: var(--border-color); }
.tb-iconbtn--danger:hover { color: var(--color-error); background: color-mix(in srgb, var(--color-error) 12%, transparent); border-color: var(--color-error); }

/* ---------- Medien: Karten mit Zoom beim Überfahren */
.tb-admin .tb-mediagrid__item a { position: relative; overflow: hidden; border-radius: var(--radius-lg); transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base); }
.tb-admin .tb-mediagrid__item a:hover { transform: translateY(-3px); box-shadow: var(--shadow-md), var(--glow-primary); }
.tb-admin .tb-mediagrid__item img { transition: transform 0.4s ease; background: var(--bg-primary); }
.tb-admin .tb-mediagrid__item a:hover img { transform: scale(1.04); }
.tb-admin .tb-mediagrid__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tb-admin .tb-mediagrid__credit, .tb-admin .tb-mediagrid__license { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Übersicht: Begrüßung, Gruppen, Kacheln mit Symbol */
.tb-admin--home > h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.tb-admin__hello { position: relative; margin: 0 0 var(--space-xl); padding: var(--space-xl) var(--space-lg); overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--border-color); background: var(--bg-card); }
.tb-admin__greeting { margin: 0 0 0.35rem; font-family: var(--font-family-heading); font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 700; line-height: 1.05; }
.tb-admin__hint { margin: 0 0 var(--space-md); max-width: 58ch; color: var(--text-secondary); }
.tb-admingroup { margin: 0 0 var(--space-xl); }
.tb-admingroup[hidden] { display: none; }
.tb-admingroup__title { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 var(--space-md); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-secondary); }
.tb-admintiles { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); }
.tb-admintiles li[hidden] { display: none; }
.tb-admintile {
  position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; column-gap: var(--space-md); row-gap: 0.2rem; height: 100%;
  padding: var(--space-md) var(--space-lg) var(--space-md) var(--space-md); overflow: hidden; text-decoration: none; color: var(--text-primary);
  background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg);
  transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}
.tb-admintile::after { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 120% at 0% 0%, color-mix(in srgb, var(--color-primary) 14%, transparent), transparent 60%); opacity: 0; transition: opacity var(--transition-base); pointer-events: none; }
.tb-admintile:hover, .tb-admintile:focus-visible { transform: translateY(-3px); border-color: var(--color-primary); box-shadow: var(--shadow-md), var(--glow-primary); }
.tb-admintile:hover::after, .tb-admintile:focus-visible::after { opacity: 1; }
.tb-admintile__icon {
  grid-row: 1 / span 2; display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: var(--radius-md);
  color: var(--color-on-primary); background: var(--gradient-primary); box-shadow: var(--glow-primary);
}
.tb-admintile__icon .tb-icon { width: 1.4rem; height: 1.4rem; }
.tb-admintile--locked .tb-admintile__icon { color: var(--text-primary); background: color-mix(in srgb, var(--color-accent) 22%, transparent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.tb-admintile--locked:hover { border-color: var(--color-accent); box-shadow: var(--shadow-md); }
.tb-admintile__title { font-family: var(--font-family-heading); font-size: 1.25rem; font-weight: 700; line-height: 1.2; }
.tb-admintile__text { font-size: 0.86rem; line-height: 1.45; color: var(--text-secondary); }
.tb-admin__signin { max-width: 32rem; margin: var(--space-xl) auto; padding: var(--space-xl); text-align: center; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); }
.tb-admin__signin h2 { margin: var(--space-md) 0 var(--space-sm); font-size: 1.5rem; }
.tb-admin__signin-icon { display: inline-grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; color: var(--color-on-primary); background: var(--gradient-primary); box-shadow: var(--glow-primary); }
.tb-admin__signin-icon .tb-icon { width: 1.6rem; height: 1.6rem; }

/* ---------- Anmeldung: zentrierte Karte */
.tb-admin--login { display: grid; place-items: center; min-height: 70vh; }
.tb-logincard {
  position: relative; width: min(100%, 28rem); padding: var(--space-2xl) var(--space-xl) var(--space-xl); text-align: center;
  background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--color-primary) 22%, transparent), transparent 60%), var(--bg-card);
  border: 1px solid var(--border-color); border-radius: calc(var(--radius-lg) * 1.5); box-shadow: var(--shadow-md);
}
.tb-logincard__icon { display: inline-grid; place-items: center; width: 4rem; height: 4rem; margin-bottom: var(--space-md); border-radius: 50%; color: var(--color-on-primary); background: var(--gradient-primary); box-shadow: var(--glow-primary); }
.tb-logincard__icon .tb-icon { width: 1.8rem; height: 1.8rem; }
.tb-logincard h1 { margin: 0 0 var(--space-sm); font-size: clamp(1.9rem, 5vw, 2.4rem); }
.tb-logincard__lead { margin: 0 auto var(--space-lg); max-width: 36ch; color: var(--text-secondary); }
.tb-admin form.tb-logincard__form { max-width: none; padding: 0; text-align: left; background: none; border: 0; box-shadow: none; }
.tb-logincard__code { font-family: ui-monospace, monospace; font-size: 1.15rem; letter-spacing: 0.08em; text-transform: uppercase; text-align: center; }
.tb-logincard__foot { display: flex; align-items: center; justify-content: center; gap: 0.4rem; margin: var(--space-lg) 0 0; font-size: 0.8rem; color: var(--text-secondary); }
.tb-logincard__foot .tb-icon { width: 0.9rem; height: 0.9rem; flex: none; }
.tb-logincard__scan { margin-bottom: var(--space-sm); }
.tb-logincard__scan .tb-icon { width: 1.2rem; height: 1.2rem; }
.tb-logincard__or { margin: 0 0 var(--space-md); font-size: 0.85rem; color: var(--text-secondary); text-align: center; }

/* QR-Code scannen (ui/qr-scan.js): Kamerabild quadratisch, Rahmen als Zielhilfe, Umgebung abgedunkelt */
.tb-qrscan { display: grid; gap: var(--space-sm); width: min(22rem, 100%); margin-inline: auto; }
.tb-qrscan__view { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-md); background: var(--palette-pure-black); }
.tb-qrscan__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.tb-qrscan__frame { position: absolute; inset: 15%; border-radius: var(--radius-md); box-shadow: inset 0 0 0 3px var(--color-primary), 0 0 0 100vmax color-mix(in srgb, var(--palette-pure-black) 40%, transparent); pointer-events: none; }
.tb-qrscan__status { margin: 0; min-height: 2.6em; font-size: 0.9rem; color: var(--text-secondary); text-align: center; }
.tb-qrscan__alt { margin: 0; text-align: center; }
.tb-qrscan__file { display: none; }

/* ---------- sanftes Einblenden der Inhalte */
@keyframes tb-admin-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.tb-admin > :not(.tb-adminnav), .tb-admintiles > li, .tb-admin__hello { animation: tb-admin-in 0.32s ease-out both; }
.tb-admintiles > li:nth-child(2) { animation-delay: 40ms; }
.tb-admintiles > li:nth-child(3) { animation-delay: 80ms; }
.tb-admintiles > li:nth-child(4) { animation-delay: 120ms; }
.tb-admintiles > li:nth-child(5) { animation-delay: 160ms; }
.tb-admintiles > li:nth-child(6) { animation-delay: 200ms; }
@media (prefers-reduced-motion: reduce) {
  .tb-admin > :not(.tb-adminnav), .tb-admintiles > li, .tb-admin__hello, .tb-training__row { animation: none; }
  .tb-admintile, .tb-adminnav a .tb-icon, .tb-admin .tb-mediagrid__item a, .tb-admin .tb-mediagrid__item img, .tb-daypill span { transition: none; }
  .tb-admintile:hover, .tb-admin .tb-mediagrid__item a:hover { transform: none; }
  .tb-admin .tb-mediagrid__item a:hover img { transform: none; }
}

/* ---------- Kopf- und Fußzeile im Verwaltungsbereich so breit wie der Inhalt, damit Logo und Seitenleiste fluchten */
body:has(.tb-admin:not(.tb-admin--login)) .tb-header__inner,
body:has(.tb-admin:not(.tb-admin--login)) .tb-footer__inner { max-width: 86rem; }

/* ---------- Tabellen: Namen nicht umbrechen, Zahlen gleich breit */
.tb-admin .tb-table td a { white-space: nowrap; }

/* ---------- Änderungsprotokoll */
.tb-changes__time, .tb-changes__nowrap { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tb-changes__time { color: var(--text-secondary); font-size: 0.88rem; }
.tb-changes__table { padding: 0.1rem 0.45rem; border-radius: var(--radius-sm); font-size: 0.82rem; background: color-mix(in srgb, var(--text-primary) 7%, transparent); }
.tb-changes__ref { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-changes__src { display: inline-flex; align-items: baseline; gap: 0.4rem; font-family: ui-monospace, monospace; font-size: 0.8rem; color: var(--text-secondary); word-break: break-all; }
.tb-changes__method { flex: none; padding: 0 0.35rem; border-radius: var(--radius-sm); font-weight: 700; font-size: 0.7rem; color: var(--text-primary); border: 1px solid var(--border-color); }
.tb-changes__toggle {
  display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.7rem; white-space: nowrap; cursor: pointer;
  font: inherit; font-size: 0.82rem; font-weight: 700; color: var(--text-primary); background: transparent; border: 1px solid var(--border-color); border-radius: var(--radius-full);
}
.tb-changes__toggle::after { content: ""; width: 0.4rem; height: 0.4rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform var(--transition-base); }
.tb-changes__toggle[aria-expanded="true"] { border-color: var(--color-primary); }
.tb-changes__toggle[aria-expanded="true"]::after { transform: rotate(-135deg) translate(-1px, -1px); }
.tb-changes__detail td { padding-top: 0; background: color-mix(in srgb, var(--color-primary) 5%, transparent); }
.tb-changes__detail .tb-changes__pre { max-width: none; margin: 0; padding: var(--space-md); border-radius: var(--radius-md); background: var(--bg-primary); border: 1px solid var(--border-color); }
.tb-admin .tb-table tbody tr.tb-changes__detail:hover { background: color-mix(in srgb, var(--color-primary) 5%, transparent); }

/* ---------- Schieberegler (Bildausschnitt) in Markenfarbe */
.tb-admin input[type="range"] { width: 100%; accent-color: var(--color-primary); }

/* ---------- Tabellenzellen: Titel mit Ellipse (nimmt den freien Platz, kürzt lange Titel), größeres Vorschaubild, Aktionssymbol */
.tb-admin .tb-table td.tb-cell--title { width: 100%; max-width: 0; }
.tb-admin .tb-cell--title a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-cell__sub { display: block; margin-top: 0.15rem; font-size: 0.8rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-admin .tb-table td.tb-cell--thumb { width: 10rem; min-width: 10rem; padding-right: 0; }
.tb-news__thumb { display: block; object-fit: cover; max-width: none; width: 9rem; height: 6rem; border-radius: var(--radius-md); box-shadow: 0 0 0 1px var(--border-color); transition: transform var(--transition-base), box-shadow var(--transition-base); }
.tb-admin .tb-table tbody tr:hover .tb-news__thumb { transform: scale(1.03); box-shadow: 0 0 0 1px var(--color-primary), var(--glow-primary); }
.tb-news__thumb--default { position: relative; display: block; overflow: hidden; width: 9rem; height: 6rem; border-radius: var(--radius-md); box-shadow: 0 0 0 1px var(--border-color); }
.tb-news__thumb--default img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tb-news__thumb--default span, .tb-newsedit__default span { position: absolute; left: 0.3rem; bottom: 0.3rem; padding: 0.05rem 0.4rem; border-radius: var(--radius-sm, 4px); background: var(--color-warning); color: var(--palette-black); font-size: 0.7rem; font-weight: 700; }
.tb-newsedit__default { position: relative; display: inline-block; margin-top: var(--space-xs); }
.tb-newsedit__default img { display: block; width: 12rem; height: auto; border-radius: var(--radius-md); box-shadow: 0 0 0 1px var(--border-color); }
.tb-news__thumb--empty { display: grid; place-items: center; background: var(--bg-primary); color: var(--text-secondary); font-size: 0.75rem; font-weight: 600; border: 1px dashed var(--border-color); box-shadow: none; }
.tb-cell__action { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; color: var(--text-secondary); border: 0; box-shadow: inset 0 0 0 1px var(--border-color); transition: color var(--transition-base), box-shadow var(--transition-base); }   /* Ring statt Rahmen: glatt */
.tb-admin .tb-table td a.tb-cell__action:hover { color: var(--color-primary-light); box-shadow: inset 0 0 0 1px var(--color-primary); }
/* Gesperrter Knopf (z. B. Zugang für Athleten fremder Kader): blass, Titel erklärt warum */
.tb-cell__action:disabled { opacity: 0.35; cursor: not-allowed; }
/* Leistungsprofil in der Athletenliste: grün wie "Öffentlich", ohne DSV-ID gedämpft */
.tb-admin .tb-table td a.tb-cell__action--perf { color: var(--color-success); box-shadow: inset 0 0 0 1.5px var(--color-success); }
.tb-admin .tb-table td a.tb-cell__action--perf:hover, .tb-admin .tb-table td a.tb-cell__action--perf:focus-visible { color: var(--color-success); background: color-mix(in srgb, var(--color-success) 18%, transparent); box-shadow: inset 0 0 0 2.5px var(--color-success); }
.tb-admin .tb-table td a.tb-cell__action--muted { color: var(--text-secondary); box-shadow: inset 0 0 0 1px var(--border-color); opacity: 0.8; }
.tb-admin .tb-table td a.tb-cell__action--muted:hover, .tb-admin .tb-table td a.tb-cell__action--muted:focus-visible { color: var(--color-primary-light); background: transparent; box-shadow: inset 0 0 0 1px var(--color-primary); }
/* Statuschips mit Symbol (Sichtbarkeit, Veröffentlicht, Entwurf): Symbol statt Punkt */
.tb-chip--status { display: inline-flex; align-items: center; gap: 0.35rem; }
.tb-chip--status::before { display: none; }
.tb-chip--status .tb-icon { width: 0.95rem; height: 0.95rem; flex: none; }
.tb-chip--ok .tb-icon { color: var(--color-success); }
.tb-chip--warn .tb-icon { color: var(--color-warning); }
/* Athletenliste: kompakt, damit die Tabelle ohne Seitwärtsrollen passt */
.tb-admin .tb-table--athletes th, .tb-admin .tb-table--athletes td { padding-left: 0.55rem; padding-right: 0.55rem; }
.tb-athletes__note { display: block; max-width: 7.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Athletenliste: Sichtbarkeit nur als Symbol, Namen mit Auslassungspunkten */
.tb-chip--icononly { padding: 0; width: 1.9rem; height: 1.9rem; justify-content: center; border: 0; border-radius: 50%; }   /* runder Knopf: Fläche statt Rahmen */
.tb-chip--icononly .tb-icon { width: 1.05rem; height: 1.05rem; }
.tb-admin .tb-table--athletes td.tb-cell__actions { text-align: left; width: 1%; }
.tb-admin .tb-table--athletes td.tb-athletes__name a { display: block; max-width: 13rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Knopf in Tabellenzellen (Zugang): wie der Link, ohne Browser-Hintergrund */
button.tb-cell__action { padding: 0; background: transparent; cursor: pointer; font: inherit; }
.tb-admin .tb-table td button.tb-cell__action:hover, .tb-admin .tb-table td button.tb-cell__action:focus-visible { color: var(--color-primary-light); box-shadow: inset 0 0 0 1px var(--color-primary); }
/* Athletenliste auf dem Handy: Karte je Person (Foto, Name, Team und Sichtbarkeit, Knöpfe rechts), Details in der Bearbeitung */
@media (max-width: 47.99rem) {
  .tb-admin .tb-table--athletes thead { display: none; }
  .tb-admin .tb-table--athletes tr { display: grid; grid-template-columns: 3rem auto minmax(0, 1fr) auto; column-gap: 0.6rem; row-gap: 0.2rem; align-items: center; padding: 0.7rem 0.75rem; border-bottom: 1px solid var(--border-color); }
  .tb-admin .tb-table--athletes td { padding: 0; border: 0; }
  .tb-admin .tb-table--athletes td:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
  .tb-admin .tb-table--athletes td.tb-athletes__name { grid-column: 2 / span 2; grid-row: 1; min-width: 0; }
  .tb-admin .tb-table--athletes td.tb-athletes__name a { max-width: none; }
  .tb-admin .tb-table--athletes td:nth-child(6) { grid-column: 2; grid-row: 2; font-size: 0.85rem; color: var(--text-secondary); }
  .tb-admin .tb-table--athletes td:nth-child(7) { grid-column: 3; grid-row: 2; }
  .tb-admin .tb-table--athletes td:nth-child(7) .tb-chip--icononly { width: 1.5rem; height: 1.5rem; }
  .tb-admin .tb-table--athletes td:nth-child(7) .tb-chip--icononly .tb-icon { width: 0.85rem; height: 0.85rem; }
  .tb-admin .tb-table--athletes td:nth-child(4), .tb-admin .tb-table--athletes td:nth-child(5), .tb-admin .tb-table--athletes td:nth-child(8) { display: none; }
  .tb-admin .tb-table--athletes td.tb-cell__actions { grid-column: 4; grid-row: 1 / span 2; }
}
.tb-athletes__photo { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; }
.tb-athletes__photo .tb-icon { width: 1.2rem; height: 1.2rem; stroke-width: 2.2; }
.tb-athletes__photo--ok { color: var(--color-success); }
.tb-athletes__photo--warn { color: var(--color-warning); }
.tb-athletes__photo--danger { color: var(--color-error); }
/* Bildstatus als Abzeichen unten rechts am Porträt (Foto fehlt, Bildnachweis offen) */
.tb-athletes__pic { position: relative; display: inline-block; vertical-align: middle; }
.tb-athletes__pic .tb-athletes__photo { position: absolute; right: -0.3rem; bottom: -0.2rem; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--bg-card); box-shadow: inset 0 0 0 1.5px currentColor; }
.tb-athletes__pic .tb-athletes__photo .tb-icon { width: 0.8rem; height: 0.8rem; stroke-width: 2.6; }
@media (prefers-reduced-motion: reduce) { .tb-admin .tb-table tbody tr:hover .tb-news__thumb { transform: none; } }

/* ---------- Änderungsprotokoll: Herkunft einzeilig mit Ellipse */
.tb-changes__src { display: inline-flex; max-width: 13rem; white-space: nowrap; word-break: normal; overflow: hidden; }
.tb-changes__src > span:last-child { overflow: hidden; text-overflow: ellipsis; }

/* ---------- Übersicht: flachere Kacheln */
.tb-admintile { padding: 0.75rem var(--space-lg) 0.75rem 0.85rem; column-gap: 0.85rem; row-gap: 0.1rem; align-items: center; }
.tb-admintile__icon { width: 2.4rem; height: 2.4rem; }
.tb-admintile__icon .tb-icon { width: 1.2rem; height: 1.2rem; }
.tb-admintile__title { font-size: 1.1rem; }
.tb-admintile__text { font-size: 0.82rem; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.tb-admin__hello { padding: var(--space-lg); margin-bottom: var(--space-lg); }
.tb-admingroup { margin-bottom: var(--space-lg); }
.tb-admingroup__title { margin-bottom: var(--space-sm); }
.tb-admintiles { gap: var(--space-sm); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }

/* ---------- Rollenfarben: Punkte an den Kacheln und Legende */
.tb-roledot { display: inline-block; flex: none; width: 0.6rem; height: 0.6rem; border-radius: 50%; box-shadow: 0 0 0 2px var(--bg-card); }
.tb-roledot--full_admin { background: var(--color-role-full-admin); }
.tb-roledot--content_admin { background: var(--color-role-content-admin); }
.tb-roledot--news_admin { background: var(--color-role-news-admin); }
.tb-roledot--calendar_admin { background: var(--color-role-calendar-admin); }
.tb-roledot--user_trainer_admin { background: var(--color-role-user-trainer-admin); }
.tb-roledot--user_squad_admin { background: var(--color-role-user-squad-admin); }
.tb-roledot--athlete { background: var(--color-role-athlete); }
.tb-rolelegend { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0; padding: 0; }
.tb-rolelegend__item {
  display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.15rem 0.7rem; border-radius: var(--radius-full);
  font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); border: 1px solid var(--border-color);
}
.tb-rolelegend__item .tb-roledot { box-shadow: none; }
.tb-rolelegend__item--mine { color: var(--text-primary); border-color: color-mix(in srgb, var(--text-primary) 40%, transparent); background: color-mix(in srgb, var(--text-primary) 8%, transparent); }
.tb-rolelegend__item--mine::after { content: "du"; margin-left: 0.15rem; padding: 0 0.35rem; border-radius: var(--radius-full); font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-on-primary); background: var(--color-primary); }

/* ---------- Anleitung im Dialog */
.tb-help { display: grid; gap: var(--space-md); }
.tb-help__tabs { display: flex; flex-wrap: wrap; gap: var(--space-xs); padding-bottom: var(--space-sm); border-bottom: 1px solid var(--border-color); }
.tb-help__tab {
  display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.85rem; cursor: pointer; font: inherit; font-size: 0.88rem; font-weight: 700;
  color: var(--text-secondary); background: transparent; border: 0; border-radius: var(--radius-full); box-shadow: inset 0 0 0 1px var(--border-color);
}
.tb-help__tab:hover { color: var(--text-primary); }
.tb-help__tab[aria-selected="true"] { color: var(--color-on-primary); background: var(--color-primary); box-shadow: var(--glow-primary); }
.tb-help__tab[aria-selected="true"] .tb-roledot { box-shadow: 0 0 0 2px var(--color-on-primary); }
.tb-help__tab .tb-roledot { box-shadow: none; }
.tb-help__body { max-height: 58vh; overflow: auto; padding-right: var(--space-sm); line-height: 1.6; }
.tb-help__body h1 { margin: 0 0 var(--space-sm); font-size: 1.6rem; }
.tb-help__body h2 { margin: var(--space-lg) 0 var(--space-xs); font-size: 1.1rem; }
.tb-help__body ul { padding-left: 1.2rem; }
.tb-help__body li { margin-bottom: 0.3rem; }
.tb-help__body blockquote { margin: 0 0 var(--space-md); padding: 0.6rem 0.9rem; border-radius: var(--radius-md); background: var(--tint-warning); box-shadow: inset 3px 0 0 var(--color-warning); }
.tb-help__body blockquote p { margin: 0; }
.tb-help__body code { padding: 0 0.3rem; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--text-primary) 8%, transparent); font-size: 0.9em; }

.tb-lockbadge { box-shadow: 0 0 0 1.5px var(--on-dark-line-strong); }
.tb-iconbtn--danger { box-shadow: inset 0 0 0 1.5px var(--border-color); }
.tb-iconbtn--danger:hover { box-shadow: inset 0 0 0 1.5px var(--color-error); }

/* ---------- Kaderseite: Athleten in der linken Spalte unter dem Konzept, Faktenbox rechts läuft mit (kein leerer Raum) */
.tb-squadathletes { margin-top: var(--space-xl); }
.tb-squadathletes .tb-people { grid-template-columns: repeat(auto-fill, minmax(min(100%, 14.5rem), 1fr)); gap: var(--space-sm); }
.tb-squadathletes .tb-person { padding: 0.6rem 0.75rem; }
.tb-squadathletes .tb-person__name { font-size: 1rem; }
.tb-squadathletes .tb-person__role { margin: 0; font-size: 0.85rem; }
@media (min-width: 56rem) {
  .tb-split--squad { grid-template-columns: minmax(0, 1.7fr) minmax(18rem, 1fr); }
  .tb-split--squad > .tb-squadfacts { position: sticky; top: 5.5rem; }
}

/* ---------- Ruhiger: Konto-Avatar und Begrüßung in neutralen Grautönen, ohne Verlauf und Leuchten */
.tb-account__dot { width: 0.6rem; height: 0.6rem; box-shadow: 0 0 0 2px var(--bg-card); }
.tb-account__avatar--big .tb-account__dot { width: 0.8rem; height: 0.8rem; }
.tb-account__btn:hover, .tb-account__login:hover, .tb-account__btn[aria-expanded="true"] { border-color: color-mix(in srgb, var(--text-primary) 35%, transparent); box-shadow: none; }
.tb-account__panel { box-shadow: var(--shadow-md); }
.tb-account__card { background: none; border-bottom: 0; }
.tb-account__role { background: color-mix(in srgb, var(--text-primary) 8%, transparent); border-color: var(--border-color); }

.tb-rolelegend__item--mine::after { color: var(--text-primary); background: color-mix(in srgb, var(--text-primary) 14%, transparent); }

/* ---------- Kacheln: Rollen-Punkte rechts in der Titelzeile statt über dem Text */
.tb-admintile { grid-template-columns: auto minmax(0, 1fr) auto; }
.tb-admintile__icon { grid-column: 1; grid-row: 1 / span 2; }
.tb-admintile__title { grid-column: 2; grid-row: 1; }
.tb-admintile__text { grid-column: 2 / span 2; grid-row: 2; }
.tb-roledots { display: flex; gap: 0.25rem; grid-column: 3; grid-row: 1; align-self: center; }

/* ---------- Hilfe: dunkle Bildlaufleiste */


/* ---------- Kaderseite: anklickbare Personenkarten und Detailkarte im Dialog */
.tb-person--open {
  width: 100%; height: 100%; align-items: center; text-align: left; cursor: pointer; font: inherit; color: inherit;
  transition: border-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
}
.tb-person--open:hover, .tb-person--open:focus-visible { border-color: var(--color-primary); transform: translateY(-2px); box-shadow: var(--shadow-md); outline: none; }
.tb-person--open:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 35%, transparent); }
.tb-person__text { display: grid; min-width: 0; }
.tb-person--open .tb-person__name { font-family: var(--font-family-heading); font-weight: 700; }
.tb-person--open .tb-person__role { color: var(--text-secondary); }
/* Bildschutz: Fotos lassen sich nicht markieren oder ziehen; eine leere Fläche liegt über dem Bild */
[data-tb-protect] { position: relative; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
[data-tb-protect]::after { content: ""; position: absolute; inset: 0; }
[data-tb-protect] img { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .tb-person--open { transition: none; } .tb-person--open:hover { transform: none; } }

.tb-dialog__panel--athlete { max-width: 44rem; }
.tb-athcard { display: grid; gap: var(--space-lg); }
@media (min-width: 36rem) { .tb-athcard { grid-template-columns: minmax(0, 15rem) 1fr; align-items: start; } }
.tb-athcard__media { overflow: hidden; border-radius: var(--radius-lg); background: var(--bg-primary); box-shadow: inset 0 0 0 1px var(--border-color); aspect-ratio: 5 / 7; }
.tb-athcard__photo { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 0.3s ease; }
.tb-athcard__photo--ready { opacity: 1; }
.tb-athcard__media--empty { display: grid; place-items: center; font-family: var(--font-family-heading); font-size: 3rem; font-weight: 700; color: var(--text-secondary); }
.tb-athcard__info { display: grid; gap: var(--space-md); align-content: start; }
.tb-athcard__squad { margin: 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-primary-light); }
.tb-athcard__facts { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: var(--space-md) var(--space-xl); margin: 0; }
.tb-athcard__facts dt { font-size: 0.8rem; color: var(--text-secondary); }
.tb-athcard__facts dd { margin: 0.1rem 0 0; font-family: var(--font-family-heading); font-size: 1.4rem; font-weight: 700; }
.tb-athcard__soon { padding: var(--space-md); border-radius: var(--radius-md); border: 1px dashed var(--border-color); color: var(--text-secondary); font-size: 0.9rem; }
.tb-athcard__soon p { margin: 0; }
.tb-athcard__soon .tb-athcard__soonhead { margin-bottom: 0.25rem; font-weight: 700; color: var(--text-primary); }
@media (prefers-reduced-motion: reduce) { .tb-athcard__photo { transition: none; } }

/* Mediathek: Ausschnitt oben ausrichten, damit bei Hochkant-Porträts die Köpfe sichtbar bleiben */
.tb-mediagrid__item img { object-position: center 12%; }

/* ---------- Trainer als Karten wie die Athleten (Kaderseite, Termine), Klick öffnet die Detailkarte */
.tb-coachlines { gap: var(--space-sm); }
.tb-coachline {
  margin: 0; padding: 0.6rem 0.75rem; text-decoration: none; color: inherit;
  background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--radius-lg);
  transition: border-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
}
.tb-coachline:hover, .tb-coachline:focus-visible { background: var(--bg-primary); border-color: var(--color-primary); transform: translateY(-2px); box-shadow: var(--shadow-md); outline: none; }
.tb-coachline:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 35%, transparent); }
.tb-coachline__text b { font-family: var(--font-family-heading); }
@media (prefers-reduced-motion: reduce) { .tb-coachline { transition: none; } .tb-coachline:hover { transform: none; } }

/* Detailkarte: quadratisches Porträt, Kader und Qualifikationen als Etiketten, Steckbrief */
.tb-athcard__media--square { aspect-ratio: 1 / 1; }
.tb-athcard__facts--wide { grid-template-columns: 1fr; }
.tb-athcard__chips { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0.2rem 0 0; padding: 0; }
.tb-athcard__facts .tb-athcard__chips .tb-chip { font-family: inherit; font-size: 0.8rem; }
.tb-athcard__bio { margin: 0; line-height: 1.6; }
.tb-athcard__label { margin: 0 0 0.3rem; font-size: 0.8rem; color: var(--text-secondary); }
.tb-athcard__muted { margin: 0; color: var(--text-secondary); }
.tb-athcard__more { margin: 0; }
.tb-athcard__more a { font-weight: 700; color: var(--color-accent-text); }

/* ---------- Kaderseite: Knopf „Ganzes Foto“ im Kopfband und Vollansicht im Dialog */
.tb-band__zoom {
  position: absolute; right: max(var(--space-md), calc((100% - 72rem) / 2 + var(--space-md))); bottom: var(--space-md); z-index: 3;
  display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.5rem; padding: 0 0.9rem; cursor: pointer;
  font: inherit; font-size: 0.88rem; font-weight: 700; color: var(--on-dark);
  background: color-mix(in srgb, var(--color-black) 55%, transparent); backdrop-filter: blur(8px);
  border: 0; border-radius: var(--radius-full); box-shadow: inset 0 0 0 1.5px var(--on-dark-line-strong);
  transition: background var(--transition-base), box-shadow var(--transition-base);
}
.tb-band__zoom .tb-icon { width: 1.05rem; height: 1.05rem; }
.tb-band__zoom:hover, .tb-band__zoom:focus-visible { background: color-mix(in srgb, var(--color-black) 75%, transparent); box-shadow: inset 0 0 0 1.5px var(--on-dark); outline: none; }
@media (max-width: 40rem) { .tb-band__zoom span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .tb-band__zoom { padding: 0 0.7rem; } }
.tb-band__img { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

.tb-dialog__panel--photo { max-width: min(94vw, 80rem); }
.tb-photoview { display: grid; justify-items: center; gap: var(--space-sm); margin: 0; }
.tb-photoview__frame { display: grid; place-items: center; width: 100%; min-height: 12rem; border-radius: var(--radius-md); background: var(--bg-primary); overflow: hidden; }
.tb-photoview__canvas { display: block; max-width: 100%; max-height: min(64vh, calc(90vh - 12rem)); width: auto; height: auto; opacity: 0; transition: opacity 0.3s ease; }
.tb-photoview__canvas.tb-athcard__photo--ready { opacity: 1; }
.tb-photoview__credit { justify-self: start; font-size: 0.82rem; color: var(--text-secondary); }
@media (prefers-reduced-motion: reduce) { .tb-photoview__canvas { transition: none; } }

/* Eingabefeld mit Knopf daneben (z. B. Datum mit "Heute") */
.tb-field__inline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }


/* Mediathek: Filter und Ansichtswahl, Vorschau in der Listenansicht */
.tb-media__filters { display: grid; gap: var(--space-md); margin: var(--space-md) 0 var(--space-sm); align-items: end; padding: var(--space-md) var(--space-lg); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); }
/* umbrechend statt festem Raster: Suche breiter, Auswahlfelder gleich breit, Häkchen und Ansicht so schmal wie nötig, nie über den Rand */
@media (min-width: 48rem) { .tb-media__filters { display: flex; flex-wrap: wrap; } }
.tb-media__filters > .tb-field { flex: 1 1 11rem; min-width: 0; }
.tb-media__filters > .tb-field:first-child { flex: 2 1 13rem; }
.tb-media__filters select, .tb-media__filters input[type="search"] { width: 100%; min-width: 0; }   /* lange Optionen dürfen das Feld nicht verbreitern */
.tb-media__filters > .tb-check { flex: none; align-self: center; white-space: nowrap; }
.tb-media__filters > .tb-viewtoggle { flex: none; margin-left: auto; }
/* Ansicht: kompakter Umschalter wie die Reiter (Kacheln | Liste) */
.tb-viewtoggle { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius-full); border: 1px solid var(--border-color); background: var(--bg-primary); }
.tb-viewtoggle .tb-btn { min-height: 2.3rem; padding: 0.3rem 0.95rem; border: 0; font-size: 0.88rem; }
.tb-viewtoggle .tb-btn[aria-pressed="true"] { background: var(--color-primary); color: var(--color-on-primary); }
.tb-media__thumb { display: block; width: 6rem; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-sm, 4px); }

/* Verwaltungsbereich: Reiter innerhalb eines Bereichs (z. B. Termine: Wettkämpfe | Trainingszeiten) */
.tb-admintabs { display: inline-flex; gap: 4px; margin: 0 0 var(--space-lg); padding: 4px; border-radius: var(--radius-full); background: var(--bg-card); border: 1px solid var(--border-color); }
.tb-admintabs__tab { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 1rem; border-radius: var(--radius-full); color: var(--text-secondary); text-decoration: none; font-weight: 700; font-size: 0.92rem; }
.tb-admintabs__tab .tb-icon { width: 18px; height: 18px; }
.tb-admintabs__tab:hover { color: var(--text-primary); background: color-mix(in srgb, var(--text-primary) 6%, transparent); }
.tb-admintabs__tab[aria-current="page"] { background: var(--color-primary); color: var(--color-on-primary); }

/* Stift in kompakten Elementen (Personenliste, Kaderkacheln): kleiner, damit er den Inhalt nicht verdeckt */
.tb-people [data-tb-edit] > .tb-editlink, .tb-tiles [data-tb-edit] > .tb-editlink { width: 32px; height: 32px; top: 6px; right: 6px; }
.tb-people [data-tb-edit] > .tb-editlink .tb-icon, .tb-people [data-tb-edit] > .tb-editlink svg, .tb-tiles [data-tb-edit] > .tb-editlink svg { width: 16px; height: 16px; stroke-width: 2.1; }

.tb-account { display: flex; align-items: center; gap: var(--space-xs); }

/* ---------- Systemseite: gleich aufgebaute Karten (Kopf mit Symbol, Titel, Erklärung und Status; Kennzahlen; Aktionen; Testbereich) */
.tb-system { display: grid; gap: var(--space-lg); max-width: 58rem; }
.tb-system__error { grid-column: 1 / -1; margin: 0; }
.tb-mydev:not([hidden]) { display: grid; gap: var(--space-lg); }   /* Meine Geräte: Karten untereinander */
/* Geräteliste am Handy als Karten: Name oben, Angaben mit Beschriftung (data-label), Knöpfe darunter; abgemeldete gedämpft */
.tb-mydev__off td:not(.tb-admin__rowactions) { color: var(--text-secondary); }
@media (max-width: 39.99rem) {
  .tb-mydev__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tb-mydev__table, .tb-mydev__table tbody, .tb-mydev__table tr, .tb-mydev__table td { display: block; width: 100%; }
  .tb-mydev__table tr { padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--border-color); }
  .tb-admin .tb-mydev__table td { padding: 0.15rem 0; border: 0; }
  .tb-mydev__table td[data-label]:not(:first-child)::before { content: attr(data-label) ": "; color: var(--text-secondary); font-size: 0.85rem; }
  .tb-mydev__table .tb-admin__rowactions { padding-top: var(--space-xs); white-space: normal; }
}
/* Meine Athleten: Hinzufügen (Suche und Knopf in einer Zeile), Liste mit Name, Angaben und Entfernen */
[data-tb-my-athletes-ui]:not([hidden]) { display: grid; gap: var(--space-lg); }
.tb-myath__add { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-sm); }
.tb-myath__add .tb-field { flex: 1 1 16rem; margin: 0; }
.tb-myath__field { position: relative; }
.tb-myath__suggest { position: absolute; top: 100%; left: 0; right: 0; z-index: 5; max-height: 18rem; overflow-y: auto; }
.tb-myath__list { display: grid; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.tb-myath__item { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-sm) 0; border-bottom: 1px solid var(--border-color); }
.tb-myath__item:last-child { border-bottom: 0; }
.tb-myath__who { display: grid; gap: 0.1rem; min-width: 0; flex: 1 1 auto; }
.tb-myath__icon { display: inline-grid; place-items: center; flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%; color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 35%, transparent); }   /* Ring per box-shadow, nicht border (Kreise fransen sonst aus) */
.tb-myath__who a { font-weight: 700; color: var(--text-primary); }
/* Schützlinge in der Benutzerbearbeitung: Namen als Chips mit Entfernen-Knopf */
.tb-wards { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0 0 var(--space-sm); padding: 0; list-style: none; }
.tb-wards:empty { display: none; }
.tb-wards__item { display: inline-flex; align-items: center; gap: 0.3rem; padding-right: 0.2rem; color: var(--text-primary); }
.tb-wards__remove { display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-secondary); font: inherit; line-height: 1; cursor: pointer; }
.tb-wards__remove:hover, .tb-wards__remove:focus-visible { color: var(--color-error); background: color-mix(in srgb, var(--color-error) 15%, transparent); }
.tb-perf__follow { display: flex; align-items: center; gap: var(--space-sm); margin: 0 0 var(--space-md); }
.tb-syscard { display: grid; gap: var(--space-md); padding: var(--space-lg); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); }
/* Kopf: Symbol, Titel und Status in einer Zeile, die Erklärung darunter über die volle Breite (spart Höhe) */
.tb-syscard__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-sm) var(--space-md); align-items: center; }
.tb-syscard__head > div { display: contents; }
.tb-syscard__head .tb-syscard__title { grid-column: 2; grid-row: 1; margin: 0; }
.tb-syscard__head .tb-statuspill { grid-column: 3; grid-row: 1; }
.tb-syscard__head .tb-syscard__lead { grid-column: 1 / -1; grid-row: 2; }
.tb-syscard__icon { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: var(--radius-md); color: var(--text-primary); background: color-mix(in srgb, var(--text-primary) 7%, transparent); }
.tb-syscard__title { margin: 0 0 0.2rem; font-size: 1.2rem; }
.tb-syscard__lead { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--text-secondary); }
.tb-syscard__status { margin: 0; font-size: 0.9rem; }
.tb-syscard__warning { margin: 0; }
.tb-syscard__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin: 0; }
.tb-syscard__test { display: grid; gap: var(--space-sm); padding: var(--space-md); border: 1px dashed var(--border-color); border-radius: var(--radius-md); }
.tb-syscard__testlabel { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); }
.tb-syscard__testlabel .tb-icon { width: 14px; height: 14px; }
.tb-statuspill { padding: 0.2rem 0.7rem; border-radius: var(--radius-full); font-size: 0.75rem; font-weight: 800; white-space: nowrap; border: 1px solid var(--border-color); color: var(--text-secondary); }
.tb-statuspill--on { color: var(--color-on-primary); background: var(--color-primary); border-color: var(--color-primary); }
.tb-sysstats { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 36rem) { .tb-sysstats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tb-sysstats__item { display: grid; gap: 2px; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); background: color-mix(in srgb, var(--text-primary) 5%, transparent); }
.tb-sysstats__item b { font-family: var(--font-family-heading); font-size: 1.5rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tb-sysstats__item span { font-size: 0.78rem; color: var(--text-secondary); }
.tb-sysstats__item--zero b { color: var(--text-secondary); }
.tb-sysstats__item--incomplete:not(.tb-sysstats__item--zero) b { color: var(--color-primary); }
.tb-syscard .tb-btn { min-height: 2.5rem; padding: 0.45rem 1.1rem; font-size: 0.9rem; }
/* Kacheln mit Text statt Zahlen (Instagram: Konto, Daten, letzter Fehler) */
@media (min-width: 36rem) { .tb-sysstats--text { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tb-sysstats--text .tb-sysstats__item b { font-size: 1rem; overflow-wrap: anywhere; }
.tb-sysstats__item--error { grid-column: 1 / -1; }
.tb-sysstats__item--error b { color: var(--color-error); font-family: inherit; font-weight: 600; }

/* Notabschaltung: Stufen als Auswahlkarten */
.tb-killpick { display: grid; gap: var(--space-xs); margin: 0; padding: 0; border: 0; }
@media (min-width: 48rem) { .tb-killpick { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tb-killpick__opt { display: flex; gap: var(--space-sm); align-items: flex-start; padding: var(--space-sm) var(--space-md); border: 1px solid var(--border-color); border-radius: var(--radius-md); cursor: pointer; }
.tb-killpick__opt input { margin-top: 0.3rem; accent-color: var(--color-primary); }
.tb-killpick__opt span { display: grid; gap: 2px; }
.tb-killpick__opt small { font-size: 0.8rem; line-height: 1.4; color: var(--text-secondary); }
.tb-killpick__opt:has(input:checked) { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 10%, transparent); }
.tb-killpick__opt--danger:has(input:checked) { border-color: var(--color-error); background: color-mix(in srgb, var(--color-error) 12%, transparent); }

.tb-account__storage--warn { color: var(--color-warning); }

/* ---------- Statistik: Zeitraum, Kennzahlen, Diagramme (Farben aus theme.css: --chart-1 Aufrufe, --chart-2 Besucher) */
.tb-stats { display: grid; gap: var(--space-lg); max-width: 64rem; }
.tb-stats__range { display: inline-flex; gap: 2px; padding: 3px; justify-self: start; border-radius: var(--radius-full); border: 1px solid var(--border-color); background: var(--bg-primary); }
.tb-stats__range .tb-btn { min-height: 2.3rem; padding: 0.3rem 1rem; border: 0; font-size: 0.88rem; }
.tb-stats__range .tb-btn[aria-pressed="true"] { background: var(--color-primary); color: var(--color-on-primary); }
/* Statistik: Ladezeiten je Seite (Zielwerte verletzt: neutrale Hinweisfläche, Warnfarbe nur als Linie) */
.tb-loadtime__controls { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); }
.tb-loadtime__table { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tb-loadtime__table th, .tb-loadtime__table td { padding: var(--space-xs) var(--space-sm); }
.tb-loadtime__table td:not(:first-child), .tb-loadtime__table th:not(:first-child) { text-align: right; }
.tb-loadtime__warn { background: var(--tint-warning); box-shadow: inset 0 -2px 0 var(--color-warning); font-weight: 600; }
.tb-loadtime__legend { display: grid; gap: var(--space-xs); margin: 0; padding-left: 1.1rem; }
.tb-chart { position: relative; }
.tb-chart__svg { display: block; width: 100%; height: auto; overflow: visible; }
.tb-chart__grid { stroke: var(--chart-grid); stroke-width: 1; }
.tb-chart__tick { fill: var(--text-secondary); font-size: 11px; font-variant-numeric: tabular-nums; }
.tb-chart__col { fill: var(--chart-1); }
.tb-chart__line { fill: none; stroke: var(--chart-2); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.tb-chart__dot { fill: var(--chart-2); stroke: var(--bg-card); stroke-width: 2; }
.tb-chart__guide { stroke: var(--text-secondary); stroke-width: 1; }
.tb-chart__hit { fill: transparent; }
.tb-chart__legend { display: flex; flex-wrap: wrap; gap: var(--space-md); list-style: none; margin: 0; padding: 0; font-size: 0.85rem; color: var(--text-secondary); }
.tb-chart__legend li, .tb-chart__tip span { display: inline-flex; align-items: center; gap: 0.4rem; }
.tb-chart__key { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 3px; background: var(--chart-1); }
.tb-chart__key--line { height: 3px; width: 1rem; border-radius: var(--radius-full); background: var(--chart-2); }
.tb-chart__tip {
  position: absolute; top: 0; z-index: 2; display: grid; gap: 2px; min-width: 9rem; padding: 0.5rem 0.7rem; pointer-events: none;
  font-size: 0.82rem; color: var(--text-primary); background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: var(--shadow-md);
}
.tb-chart__tip--right { transform: translateX(12px); }
.tb-chart__tip--left { transform: translateX(calc(-100% - 12px)); }
.tb-chart__table summary { cursor: pointer; font-size: 0.85rem; color: var(--text-secondary); }
.tb-toppages { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.tb-toppages__item { display: grid; grid-template-columns: minmax(8rem, 16rem) minmax(0, 1fr) 4rem; gap: var(--space-md); align-items: center; }
.tb-toppages__path { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9rem; color: var(--text-primary); }
.tb-toppages__bar { display: block; width: 100%; height: 8px; }
.tb-toppages__track { fill: var(--chart-grid); }
.tb-toppages__fill { fill: var(--chart-1); }
.tb-toppages__value { text-align: right; font-variant-numeric: tabular-nums; font-size: 0.9rem; }

/* Benachrichtigungen für News (öffentliche News-Seite) */
.tb-pushcard { margin-top: var(--space-lg); max-width: 54rem; }

/* ---------- Mehrfach-Upload der Mediathek: Kacheln mit Vorschau und Stand je Foto */
.tb-bulk__tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: var(--space-sm); margin: var(--space-md) 0; padding: 0; list-style: none; }
.tb-bulk__tile { position: relative; display: grid; gap: 4px; padding: 6px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); font-size: 0.8rem; }
.tb-bulk__tile img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-sm); background: var(--bg-secondary); }
.tb-bulk__name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--text-secondary); }
.tb-bulk__state { font-weight: 600; }
.tb-bulk__tile--done { border-color: color-mix(in srgb, var(--color-success) 60%, transparent); }
.tb-bulk__tile--done .tb-bulk__state { color: var(--color-success); }
.tb-bulk__tile--error { border-color: var(--color-error); }
.tb-bulk__tile--error .tb-bulk__state { color: var(--color-error); }
.tb-bulk__remove { position: absolute; top: 2px; right: 2px; width: 1.75rem; height: 1.75rem; border: 0; border-radius: 50%; font-size: 1.1rem; line-height: 1; color: var(--text-primary); background: var(--bg-card); cursor: pointer; }
.tb-bulk__progress { min-height: 1.5em; font-weight: 600; }

/* ---------- Fotos im Beitrag: Bilder-Baustein (großes Bild, Paar, Mosaik), Erfolge-Leiste, Galerie (Vorlagen partials/news-*.php) */
.tb-photo { display: block; height: 100%; overflow: hidden; border-radius: var(--radius-lg); background: var(--bg-secondary); }
.tb-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease-out; }
.tb-photo:hover img, .tb-photo:focus-visible img { transform: scale(1.03); }
.tb-photo:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
.tb-photos { display: grid; gap: var(--space-sm); margin: var(--space-xl) 0; }
.tb-photos__item { display: grid; gap: 6px; margin: 0; min-height: 0; }
.tb-photos__item figcaption { font-size: 0.85rem; line-height: 1.4; color: var(--text-secondary); }
/* großes Bild, Erfolge-Leiste und Galerie ragen seitlich über die Textspalte hinaus (bis 72 rem) */
.tb-photos--single, .tb-podium, .tb-gallery { margin-inline: calc((100% - min(72rem, 100vw - 3rem)) / 2); }
.tb-photos--single .tb-photo { box-shadow: var(--shadow-md); }
.tb-photos--single .tb-photos__item--tall .tb-photo { max-height: 85vh; }
.tb-photos--single .tb-photos__item--tall img { object-fit: contain; background: var(--bg-secondary); }
.tb-photos--pair .tb-photo { aspect-ratio: 4 / 3; }
@media (min-width: 40rem) {
  .tb-photos--pair { grid-template-columns: 1fr 1fr; }
  .tb-photos--pair .tb-photos__item--tall .tb-photo { aspect-ratio: 4 / 5; }
  .tb-photos--pair:has(.tb-photos__item--tall) .tb-photo { aspect-ratio: 4 / 5; }
}
.tb-photos--mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 9rem; }
.tb-photos--mosaic .tb-photos__item { grid-template-rows: minmax(0, 1fr); }
.tb-photos--mosaic figcaption { display: none; }   /* im Mosaik steht der Nachweis in der Vollbildansicht */
/* Mosaik mit festen Mustern je Anzahl (tb-photos--n3 bis --n5), damit keine Lücke bleibt; Hochformate werden mittig zugeschnitten */
.tb-photos--mosaic .tb-photos__item--lead { grid-column: span 2; grid-row: span 2; }
.tb-photos--n4 .tb-photos__item:nth-child(4) { grid-column: span 2; }
@media (min-width: 40rem) {
  .tb-photos--mosaic { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 11rem; }
  .tb-photos--n4 .tb-photos__item:nth-child(4) { grid-column: span 3; }
  .tb-photos--n5 .tb-photos__item:nth-child(5) { grid-column: span 2; }
}

.tb-podium { margin-block: var(--space-2xl); }
.tb-podium__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-sm) var(--space-md); margin-bottom: var(--space-md); }
.tb-article__body .tb-podium__title { margin: 0; }
.tb-podium__sum { margin: 0; font-weight: 700; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.tb-podium__list { display: grid; grid-auto-flow: column; grid-auto-columns: min(78%, 18rem); gap: var(--space-md); margin: 0; padding: 0 0 var(--space-xs); list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.tb-podium__list::-webkit-scrollbar { display: none; }
@media (min-width: 48rem) {
  .tb-podium__list { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(12rem, 15rem)); justify-content: center; overflow: visible; }
  .tb-podium__head { justify-content: center; text-align: center; flex-direction: column; align-items: center; }
}
.tb-podium__card { position: relative; scroll-snap-align: start; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.tb-podium__card .tb-photo { aspect-ratio: 4 / 5; border-top: 4px solid var(--medal-tone); }
.tb-podium__card--1 { --medal-tone: var(--medal-gold); }
.tb-podium__card--2 { --medal-tone: var(--medal-silver); }
.tb-podium__card--3 { --medal-tone: var(--medal-bronze); }
.tb-podium__medal { position: absolute; top: var(--space-sm); left: var(--space-sm); display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  font-family: var(--font-family-heading); font-size: 1.3rem; font-weight: 800; color: var(--color-black); background: var(--medal-tone);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--medal-tone) 35%, transparent), var(--shadow-md); pointer-events: none; }
.tb-podium__info { position: absolute; inset: auto 0 0 0; display: grid; gap: 2px; padding: var(--space-xl) var(--space-md) var(--space-md); border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  color: var(--color-white); background: linear-gradient(to top, color-mix(in srgb, var(--color-black) 88%, transparent), transparent); pointer-events: none; }
.tb-podium__info b { font-family: var(--font-family-heading); font-size: 1.15rem; line-height: 1.15; font-variation-settings: "wdth" 78; }
.tb-podium__info span { font-size: 0.9rem; }
.tb-podium__credit { position: absolute; top: var(--space-sm); right: var(--space-sm); padding: 1px 6px; border-radius: var(--radius-full); font-size: 0.7rem;
  color: var(--color-white); background: color-mix(in srgb, var(--color-black) 55%, transparent); pointer-events: none; }

.tb-gallery { margin-block: var(--space-2xl); }
/* Mauerwerk in Spalten: jedes Foto in seinem Format, keine Lücken am Ende */
.tb-gallery__grid { columns: 2 9rem; column-gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
@media (min-width: 48rem) { .tb-gallery__grid { columns: 4 12rem; column-gap: var(--space-sm); } }
/* Bis 3 Fotos: in der Textspalte bleiben und je Foto eine Spalte (sonst stünden sie links in einem halb leeren Raster) */
.tb-gallery[data-few] { margin-inline: 0; }
.tb-gallery[data-few="1"] .tb-gallery__grid { columns: 1; }
@media (min-width: 48rem) {
  .tb-gallery[data-few="2"] .tb-gallery__grid { columns: 2; }
  .tb-gallery[data-few="3"] .tb-gallery__grid { columns: 3; }
}
.tb-gallery__item { break-inside: avoid; margin-bottom: var(--space-xs); }
@media (min-width: 48rem) { .tb-gallery__item { margin-bottom: var(--space-sm); } }
.tb-gallery__item .tb-photo { height: auto; border-radius: var(--radius-md); }
.tb-gallery__item .tb-photo img { height: auto; }
.tb-gallery__more { margin: var(--space-md) 0 0; text-align: center; }
.tb-article__body > .tb-gallery .tb-gallery__credit, .tb-gallery__credit { margin: var(--space-sm) 0 0; font-size: 0.85rem; color: var(--text-secondary); }

/* ---------- News-Editor: Beitragstext als Kartenfolge (admin/news-blocks.js) */
.tb-cards__fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.tb-cards__fieldset > legend { padding: 0; margin-bottom: var(--space-xs); font-weight: 600; font-size: 0.88rem; }
.tb-cards { display: grid; gap: 0; margin: var(--space-sm) 0 0; padding: 0; list-style: none; }
.tb-cards__slot { display: flex; justify-content: center; padding: var(--space-xs) 0; }
.tb-cards__add { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; opacity: 0.55; transition: opacity var(--transition-base); }
.tb-cards__add:hover, .tb-cards__add:focus-within, .tb-cards__slot:last-child .tb-cards__add { opacity: 1; }
.tb-cards__addlabel { font-size: 0.8rem; font-weight: 700; color: var(--text-secondary); }
.tb-cards__card { display: grid; gap: var(--space-sm); padding: var(--space-md); background: var(--bg-primary); border: 1px solid var(--border-color); border-left: 4px solid var(--border-color); border-radius: var(--radius-lg); }
.tb-cards__card--images { border-left-color: var(--color-accent); }
.tb-cards__card--podium { border-left-color: var(--medal-gold); }
.tb-cards__card--gallery { border-left-color: var(--color-primary); }
.tb-cards__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.tb-cards__type { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); }
.tb-cards__tools { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.tb-cards__card textarea { width: 100%; min-height: 9rem; }
.tb-cards__layout { max-width: 22rem; }
.tb-cards__photos { display: grid; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.tb-cards__photo { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 4px var(--space-sm); align-items: center; padding: 6px; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-card); }
.tb-cards__photo img, .tb-cards__nothumb { grid-row: span 2; width: 72px; height: 54px; object-fit: cover; border-radius: var(--radius-sm); background: var(--bg-secondary); }
.tb-cards__nothumb { display: grid; place-items: center; font-size: 0.75rem; color: var(--text-secondary); }
.tb-cards__phototitle { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; font-size: 0.85rem; font-weight: 600; }
.tb-cards__fields { display: flex; flex-wrap: wrap; gap: 6px; grid-column: 2; }
.tb-cards__fields input { flex: 1 1 10rem; min-width: 0; }
.tb-cards__fields select { flex: 0 0 8rem; }
.tb-cards__photo .tb-cards__tools { grid-column: 1 / -1; justify-content: flex-end; }
@media (min-width: 48rem) {
  .tb-cards__photo { grid-template-columns: 72px minmax(0, 1fr) auto; }
  .tb-cards__photo .tb-cards__tools { grid-column: 3; grid-row: 1 / span 2; }
}
.tb-cards__count { margin: 0; font-size: 0.85rem; color: var(--text-secondary); }
.tb-cards__summary { margin: 0; color: var(--text-primary); }
.tb-cards__explain { display: block; margin-top: 2px; font-size: 0.85rem; font-style: italic; color: var(--text-secondary); }   /* Erklärung zu den Werten, kein Inhalt */
.tb-cards__choose { justify-self: start; }
/* Seitentexte: Listen im allgemeinen Editor (admin/page-texts.js), Karten wie im News-Editor */
.tb-pagelists { display: grid; gap: var(--space-xl); margin-top: var(--space-lg); }
.tb-pagelists__list legend { margin-bottom: var(--space-sm); }
.tb-pagelists__list .tb-cards { gap: var(--space-sm); }
.tb-pagelists__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); margin: var(--space-sm) 0 0; }
/* kleine Knöpfe in den Karten (Verschieben, Löschen, Baustein einfügen); Trefferfläche bleibt mit 2.25 rem ausreichend */
.tb-btn.tb-btn--small { min-height: 2.25rem; min-width: 2.25rem; padding: 0 0.7rem; font-size: 0.85rem; }

/* Mehrfachauswahl: Nummer der Reihenfolge am gewählten Foto; Freigabe-Hinweis im News-Editor */
.tb-picker__item { position: relative; }
.tb-picker__order { position: absolute; top: 6px; left: 6px; display: grid; place-items: center; min-width: 1.75rem; height: 1.75rem; padding: 0 4px; border-radius: var(--radius-full);
  font-weight: 800; color: var(--color-on-primary); background: var(--color-primary); box-shadow: var(--shadow-md); }
.tb-picker__credit .tb-chip { margin-left: 4px; }
.tb-news__photonote { padding: var(--space-md); border: 1px solid var(--color-warning); border-left-width: 4px; border-radius: var(--radius-md); background: var(--tint-warning); }
.tb-news__photonote p { margin: 0 0 var(--space-xs); }
.tb-news__photonote ul { margin: 0; padding-left: var(--space-lg); }

/* ---------- Vollbildansicht für Fotos im Beitrag (ui/lightbox.js) */
html.tb-lightbox-open { overflow: hidden; }
.tb-lightbox { position: fixed; inset: 0; z-index: 9500; display: grid; grid-template-rows: minmax(0, 1fr) auto; background: color-mix(in srgb, var(--color-black) 94%, transparent); color: var(--color-white); animation: tb-lightbox-in 180ms ease-out; }
@keyframes tb-lightbox-in { from { opacity: 0; } to { opacity: 1; } }
.tb-lightbox__stage { display: grid; place-items: center; min-height: 0; padding: var(--space-xl) var(--space-md) var(--space-sm); touch-action: pan-y; }
.tb-lightbox__img { max-width: 100%; max-height: calc(100vh - 9rem); max-height: calc(100dvh - 9rem); object-fit: contain; border-radius: var(--radius-md); box-shadow: 0 10px 40px color-mix(in srgb, var(--color-black) 60%, transparent); user-select: none; -webkit-user-drag: none; }
.tb-lightbox__bar { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: var(--space-xs) var(--space-md); padding: var(--space-sm) var(--space-md) max(var(--space-md), env(safe-area-inset-bottom)); text-align: center; }
.tb-lightbox__count { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; }
.tb-lightbox__caption { margin: 0; color: color-mix(in srgb, var(--color-white) 75%, transparent); }
.tb-lightbox__close, .tb-lightbox__nav { position: absolute; display: grid; place-items: center; width: 3rem; height: 3rem; border: 0; border-radius: 50%; font-size: 2rem; line-height: 1; color: var(--color-white);
  background: color-mix(in srgb, var(--color-white) 12%, transparent); cursor: pointer; transition: background var(--transition-base); }
.tb-lightbox__close:hover, .tb-lightbox__nav:hover { background: color-mix(in srgb, var(--color-white) 24%, transparent); }
.tb-lightbox__close:focus-visible, .tb-lightbox__nav:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.tb-lightbox__close { top: max(var(--space-sm), env(safe-area-inset-top)); right: var(--space-sm); }
.tb-lightbox__nav { top: 50%; transform: translateY(-50%); }
.tb-lightbox__nav--prev { left: var(--space-sm); }
.tb-lightbox__nav--next { right: var(--space-sm); }
@media (max-width: 40rem) { .tb-lightbox__nav { top: auto; bottom: max(3.5rem, calc(env(safe-area-inset-bottom) + 3rem)); transform: none; } }
@media (prefers-reduced-motion: reduce) { .tb-lightbox { animation: none; } .tb-photo img { transition: none; } }
.tb-picker__sort { display: inline-flex; gap: 4px; }
.tb-picker__sort [aria-pressed="true"] { border-color: var(--color-primary); color: var(--text-primary); }

/* ---------- Bildausschnitt auf der Beitragsseite (ui/photo-focus.js): unauffälliger Knopf am Foto, nur für Verwaltungsgeräte */
.tb-focushost { position: relative; }
.tb-focusedit { position: absolute; top: 8px; right: 8px; z-index: 2; display: grid; place-items: center; width: 2rem; height: 2rem; border: 0; border-radius: 50%;
  font-size: 1rem; color: var(--color-white); background: color-mix(in srgb, var(--color-black) 55%, transparent); cursor: pointer; opacity: 0; transition: opacity var(--transition-base); }
.tb-focushost:hover .tb-focusedit, .tb-focusedit:focus-visible { opacity: 1; }
@media (hover: none) { .tb-focusedit { opacity: 0.7; } }
.tb-podium__card .tb-focusedit { top: auto; bottom: 8px; }
/* Leiste unten am Bildschirm: das bearbeitete Foto bleibt beim Schieben ganz sichtbar und ist hervorgehoben */
.tb-focuspanel { position: fixed; left: 50%; bottom: max(var(--space-md), env(safe-area-inset-bottom)); z-index: 9000; transform: translateX(-50%); width: min(42rem, calc(100vw - 2rem));
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--space-sm); padding: var(--space-sm) var(--space-md);
  color: var(--text-primary); background: var(--bg-card); border: 1px solid var(--border-color); border-left: 4px solid var(--color-primary); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.tb-focushost--active { outline: 3px solid var(--color-primary); outline-offset: 3px; border-radius: var(--radius-lg); }
.tb-focushost--active .tb-focusedit { opacity: 1; }
.tb-focuspanel input[type="range"] { flex: 1 1 8rem; accent-color: var(--color-primary); }
.tb-focuspanel__title { font-weight: 700; }
.tb-focuspanel__ends, .tb-focuspanel__value { font-size: 0.8rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.tb-edit-off .tb-focusedit, .tb-edit-off .tb-focuspanel { display: none; }
/* Protokoll-Import, Reiter Sportler: Filter nach Stammverein, Zeile für Staffeln und Pauschale */
.tb-ri__athletebar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-sm) var(--space-lg); margin-bottom: var(--space-sm); }
.tb-ri__athletebar .tb-field { flex: 0 1 18rem; margin: 0; }
.tb-ri__athletebar .tb-field__hint { flex: 1 1 18rem; margin: 0; }
.tb-ri__row--rest td { font-style: italic; color: var(--text-secondary); }
.tb-ri__filecell { min-width: 16rem; }
.tb-ri__row { cursor: pointer; }
.tb-ri__row:hover, .tb-ri__row:focus-visible { background: var(--bg-secondary); outline: none; }
.tb-ri__filecell .tb-ri__sub { word-break: break-all; }

/* Protokoll-Import: Knopf Content Creator oben rechts in der Karte der Veranstaltung, Dialog mit Vereins-Chips und Zahlen */
.tb-ri__meethead { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-sm); }
.tb-ri__creator { display: grid; gap: var(--space-md); }
.tb-chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.tb-chip--toggle { cursor: pointer; font: inherit; font-size: 0.9rem; font-weight: 700; padding: 0.35rem 0.9rem; background: transparent; }
.tb-chip--toggle[aria-pressed="true"] { color: var(--color-on-primary); background: var(--color-primary); border-color: var(--color-primary); }
.tb-chip--toggle:disabled { opacity: 0.45; cursor: not-allowed; }   /* nicht wählbar (z. B. Content Creator: nur Team Bochum) */
.tb-ri__creatorstats { margin: 0; }
.tb-ri__creatortitle { margin: 0; font-weight: 700; }
.tb-ri__clubcell { min-width: 10rem; }
.tb-ri__athletebar .tb-field__hint { min-width: 0; }
/* Protokoll-Import: breite Tabellen scrollen in ihrem Rahmen, die Seite selbst bleibt in der Breite */
[data-tb-results-import] .tb-syscard, [data-tb-results-import] .tb-tabs, [data-tb-results-import] .tb-tabs__panel { min-width: 0; max-width: 100%; }
.tb-ri__similar { color: var(--color-warning); font-weight: 600; }

/* Vorschau eines Entwurfs: Leiste über dem Beitrag */
.tb-previewbar { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: baseline; padding: 0.6rem 1.25rem; background: var(--color-warning); color: var(--palette-ink); font-size: 0.9rem; }

/* Gestaltungsleiste über dem Textfeld eines Textbausteins */
.tb-format { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-xs); }
.tb-format__btn { padding: 0.25rem 0.6rem; font: inherit; font-size: 0.85rem; color: var(--text-primary); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); cursor: pointer; }
.tb-format__btn:hover, .tb-format__btn:focus-visible { border-color: var(--color-primary); }
.tb-format__btn--bold { font-weight: 800; }
.tb-format__btn--italic { font-style: italic; }

/* Drehsymbol: Knopf im Wartezustand, schwebende Upload-Anzeige, Foto im Versand */
@keyframes tb-spin { to { transform: rotate(360deg); } }
.tb-btn.is-busy::before, .tb-bulk__progress--busy::before, .tb-bulk__tile--sending .tb-bulk__state::before { content: ""; display: inline-block; width: 1em; height: 1em; margin-right: 0.5em; vertical-align: -0.15em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: tb-spin 0.8s linear infinite; }
.tb-bulk__progress--busy { position: fixed; left: 50%; bottom: var(--space-lg); transform: translateX(-50%); z-index: 50; max-width: calc(100vw - 2rem); padding: var(--space-sm) var(--space-lg); color: var(--text-primary); background: var(--bg-card); border: 1px solid var(--color-primary); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
@media (prefers-reduced-motion: reduce) { .tb-btn.is-busy::before, .tb-bulk__progress--busy::before, .tb-bulk__tile--sending .tb-bulk__state::before { animation-duration: 2.4s; } }

/* Bildvorschau beim Überfahren in der Bildauswahl */
.tb-imgpreview { position: fixed; z-index: 10000; display: grid; gap: var(--space-xs); padding: var(--space-xs); max-width: min(30rem, 90vw); pointer-events: none; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.tb-imgpreview[hidden] { display: none; }
.tb-imgpreview img { display: block; max-width: 100%; max-height: 22rem; width: auto; height: auto; border-radius: var(--radius-sm); }
.tb-imgpreview__caption { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); }

/* Erwähnte Athleten im Beitragstext */
.tb-mention { font-weight: 800; color: var(--text-primary); }
.tb-mention__year { color: var(--text-secondary); font-size: 0.9em; white-space: nowrap; }

/* Auswahl beim Erwähnen eines Athleten im Textfeld */
.tb-mentions { margin: var(--space-xs) 0 0; padding: var(--space-xs); list-style: none; display: grid; gap: 2px; background: var(--bg-card); border: 1px solid var(--color-primary); border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.tb-mentions[hidden] { display: none; }
.tb-mentions__item { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm); padding: 0.4rem 0.6rem; border-radius: var(--radius-sm); cursor: pointer; }
.tb-mentions__item--on, .tb-mentions__item:hover { background: var(--bg-secondary); }
.tb-mentions__meta { font-size: 0.8rem; color: var(--text-secondary); }

/* Verweise unter dem Beitrag: Auswahl der Seite und Beschriftung je Zeile */
.tb-linkedit__list { margin: var(--space-xs) 0; padding: 0; list-style: none; display: grid; gap: var(--space-xs); }
.tb-linkedit__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: var(--space-xs); align-items: center; }
@media (max-width: 40rem) { .tb-linkedit__row { grid-template-columns: 1fr auto; } .tb-linkedit__row select { grid-column: 1 / -1; } }

.tb-news__authors { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-md); }

/* News-Liste der Verwaltung: Suche, Filter und Seiten */
.tb-newsfilter { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; margin: var(--space-md) 0; }
.tb-newsfilter[hidden] { display: none; }
.tb-newsfilter .tb-field { margin: 0; }
.tb-newsfilter__search { flex: 1 1 14rem; }
.tb-newsfilter__count { margin-left: auto; color: var(--text-secondary); font-size: 0.9rem; }

/* Glocke mit Nachrichten-Feed in der Kopfzeile */
.tb-feed { position: relative; }
.tb-feed[hidden] { display: none; }
.tb-feed__btn { position: relative; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--on-dark); cursor: pointer; box-shadow: inset 0 0 0 1.5px var(--on-dark-line-strong); transition: background var(--transition-base), box-shadow var(--transition-base), color var(--transition-base); }   /* Ring statt Rahmen: glatt auf Subpixel-Positionen */
.tb-feed__btn:hover, .tb-feed__btn[aria-expanded="true"] { background: var(--color-primary); box-shadow: none; color: var(--color-on-primary); }
/* Glocke durchgestrichen, solange auf diesem Gerät keine Benachrichtigungen ankommen (ui/feed.js setzt tb-feed--muted) */
.tb-feed__on, .tb-feed__mute { display: contents; }
.tb-feed__mute, .tb-feed--muted .tb-feed__on { display: none; }
.tb-feed--muted .tb-feed__mute { display: contents; }
.tb-feed--muted .tb-feed__btn:not(:hover):not([aria-expanded="true"]) { color: var(--on-dark-muted); }
.tb-feed__off { margin: 0 0 var(--space-sm); padding: var(--space-sm); border-radius: var(--radius-md); font-size: 0.85rem; color: var(--text-secondary); background: var(--bg-secondary); }
.tb-feed__off[hidden] { display: none; }
.tb-feed__btn .tb-icon { width: 1.3rem; height: 1.3rem; }
.tb-feed__badge { position: absolute; top: -0.3rem; right: -0.3rem; min-width: 1.2rem; height: 1.2rem; padding: 0 0.3rem; display: grid; place-items: center; border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-on-primary); font-size: 0.7rem; font-weight: 800; line-height: 1; }
.tb-feed__badge[hidden] { display: none; }
.tb-feed__panel { position: absolute; right: 0; top: calc(100% + 0.6rem); z-index: 60; width: min(24rem, calc(100vw - 2rem)); color: var(--text-primary); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; }
.tb-feed__panel[hidden] { display: none; }
.tb-feed__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--border-color); }
.tb-feed__actions { display: flex; gap: var(--space-sm); }
.tb-feed__link { padding: 0.2rem 0.4rem; border: 0; background: transparent; color: var(--color-accent-text); font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
.tb-feed__link:disabled { color: var(--text-secondary); cursor: default; opacity: 0.6; }
.tb-feed__list { margin: 0; padding: 0; list-style: none; max-height: min(26rem, 60vh); overflow-y: auto; }
.tb-feed__item { display: flex; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); color: inherit; text-decoration: none; border-bottom: 1px solid var(--border-color); }
.tb-feed__item:hover { background: var(--bg-secondary); }
.tb-feed__dot { flex: none; width: 0.6rem; height: 0.6rem; margin-top: 0.4rem; border-radius: 50%; background: transparent; }
.tb-feed__item--new .tb-feed__dot { background: var(--color-primary); }
.tb-feed__text { display: grid; gap: 0.15rem; min-width: 0; }
.tb-feed__item:not(.tb-feed__item--new) .tb-feed__text b { font-weight: 600; color: var(--text-secondary); }
.tb-feed__text small { color: var(--text-secondary); }
.tb-feed__empty { margin: 0; padding: var(--space-md); color: var(--text-secondary); }
.tb-feed__empty[hidden] { display: none; }

/* Bildauswahl: "Liste neu laden" unten links im Dialog (Ring statt Rahmen) */
.tb-picker__reload { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-right: auto; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-primary); cursor: pointer; box-shadow: inset 0 0 0 1.5px var(--border-color); transition: background var(--transition-base), box-shadow var(--transition-base), color var(--transition-base); }
.tb-picker__reload:hover, .tb-picker__reload:focus-visible { background: var(--color-primary); box-shadow: none; color: var(--color-on-primary); outline: none; }
.tb-picker__reload--busy .tb-icon { animation: tb-spin 0.8s linear infinite; }
@media (prefers-reduced-motion: reduce) { .tb-picker__reload--busy .tb-icon { animation-duration: 2.4s; } }

/* Rollen und Rechte als Schaubild (/admin/rollen): drei Spalten, Linien als SVG dahinter */
.tb-flow { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg) clamp(2rem, 7vw, 6rem); margin: var(--space-lg) 0; }
.tb-flow__lines { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.tb-flow__col { position: relative; min-width: 0; }
.tb-flow__title { margin: 0 0 var(--space-sm); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); }
.tb-flow__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-xs); }
.tb-flow__node { display: flex; align-items: center; gap: var(--space-sm); width: 100%; padding: 0.5rem 0.75rem; text-align: left; font: inherit; color: var(--text-primary); text-decoration: none; background: var(--bg-card); border: 0; border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--border-color); transition: box-shadow var(--transition-base), opacity var(--transition-base), background var(--transition-base); }
.tb-flow__node--role { cursor: pointer; }
.tb-flow__label { display: grid; min-width: 0; }
.tb-flow__label b { font-size: 0.92rem; }
.tb-flow__label small { color: var(--text-secondary); font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; }
.tb-flow__line { fill: none; stroke: var(--border-color); stroke-width: 1.2; opacity: 0.55; transition: opacity var(--transition-base), stroke-width var(--transition-base); }
.tb-flow__line--full_admin { stroke: var(--color-role-full-admin); opacity: 0.18; }
.tb-flow__line--content_admin { stroke: var(--color-role-content-admin); }
.tb-flow__line--news_admin { stroke: var(--color-role-news-admin); }
.tb-flow__line--calendar_admin { stroke: var(--color-role-calendar-admin); }
.tb-flow__line--user_trainer_admin { stroke: var(--color-role-user-trainer-admin); }
.tb-flow__line--user_squad_admin { stroke: var(--color-role-user-squad-admin); }
.tb-flow__line--area { stroke: var(--text-secondary); opacity: 0.35; }
.tb-flow--focus .tb-flow__line { opacity: 0.06; }
.tb-flow--focus .tb-flow__line--on { opacity: 1; stroke-width: 2; }
.tb-flow--focus .tb-flow__node { opacity: 0.4; }
.tb-flow--focus .tb-flow__node--on { opacity: 1; box-shadow: inset 0 0 0 1.5px var(--color-primary); }
.tb-flow__rules { margin: 0; padding-left: 1.2rem; display: grid; gap: var(--space-xs); }
.tb-flow__matrixrole { white-space: nowrap; }
.tb-flow__matrixrole .tb-roledot { margin-right: 0.35rem; box-shadow: none; }
.tb-flow__cell { text-align: center; font-weight: 800; color: var(--color-success); }
@media (max-width: 48rem) { .tb-flow { grid-template-columns: 1fr; } .tb-flow__lines { display: none; } }

/* Datenfluss und Funktionen (/admin/datenfluss): vier Spalten, Pfeile je Quellspalte gefärbt, darunter Karten je Baustein */
.tb-dataflow { display: grid; gap: var(--space-md); }
.tb-dataflow > .tb-flow { margin: var(--space-sm) 0 var(--space-lg); }
.tb-flow--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(1.75rem, 4vw, 4rem); }
.tb-flow__node--data { cursor: pointer; }
.tb-flow__node--source { box-shadow: inset 3px 0 0 var(--color-accent), inset 0 0 0 1px var(--border-color); }
.tb-flow__node--base { box-shadow: inset 3px 0 0 var(--color-info), inset 0 0 0 1px var(--border-color); }
.tb-flow__node--content { box-shadow: inset 3px 0 0 var(--color-primary), inset 0 0 0 1px var(--border-color); }
.tb-flow__node--output { box-shadow: inset 3px 0 0 var(--color-success), inset 0 0 0 1px var(--border-color); }
.tb-flow--4 .tb-flow__line { stroke-width: 1.6; opacity: 0.7; }
.tb-flow__line--source { stroke: var(--color-accent); }
.tb-flow__line--base { stroke: var(--color-info); }
.tb-flow__line--content { stroke: var(--color-primary); }
.tb-flow__arrow { stroke: none; opacity: 0.85; transition: opacity var(--transition-base); }
.tb-flow__arrow--source { fill: var(--color-accent); }
.tb-flow__arrow--base { fill: var(--color-info); }
.tb-flow__arrow--content { fill: var(--color-primary); }
.tb-flow--focus .tb-flow__arrow { opacity: 0.08; }
.tb-flow--focus .tb-flow__arrow.tb-flow__line--on { opacity: 1; stroke-width: 0; }
.tb-flow--4.tb-flow--focus .tb-flow__line { opacity: 0.07; }
.tb-flow--4.tb-flow--focus .tb-flow__line--on { opacity: 1; stroke-width: 2.4; }
.tb-flow--4 .tb-flow__title { min-height: 2.6em; display: flex; align-items: flex-end; }   /* lange Spaltentitel: alle Spalten beginnen auf einer Höhe */
.tb-flow--focus .tb-flow__node--data { opacity: 1; }   /* deckend bleiben, damit Linien über mehrere Spalten nicht durchscheinen */
.tb-flow--focus .tb-flow__node--data .tb-flow__label { opacity: 0.35; transition: opacity var(--transition-base); }
.tb-flow--focus .tb-flow__node--data.tb-flow__node--on .tb-flow__label { opacity: 1; }
.tb-flow--focus .tb-flow__node--data.tb-flow__node--on { box-shadow: inset 0 0 0 1.5px var(--text-secondary); }
.tb-flow--focus .tb-flow__node--data.tb-flow__node--current { box-shadow: inset 0 0 0 2px var(--color-primary); }
.tb-dataflow__heading { margin: var(--space-md) 0 0; }
.tb-dataflow__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: var(--space-md); align-items: start; }
.tb-dataflow__card { gap: var(--space-sm); padding: var(--space-md) var(--space-lg); border-left-width: 4px; }
.tb-dataflow__card--source { border-left-color: var(--color-accent); }
.tb-dataflow__card--base { border-left-color: var(--color-info); }
.tb-dataflow__card--content { border-left-color: var(--color-primary); }
.tb-dataflow__card--output { border-left-color: var(--color-success); }
.tb-dataflow__card .tb-syscard__title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-sm); margin: 0; }
.tb-dataflow__card .tb-syscard__title small { display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); }
.tb-dataflow__go { font-size: 0.85rem; font-weight: 600; color: var(--color-accent-text); }
.tb-dataflow__io { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem var(--space-md); margin: 0; padding-top: var(--space-sm); border-top: 1px solid var(--border-color); font-size: 0.85rem; }
.tb-dataflow__io dt { font-weight: 700; color: var(--text-secondary); }
.tb-dataflow__io dd { margin: 0; }
@media (max-width: 56rem) { .tb-flow--4 { grid-template-columns: 1fr; } }

/* Gespeicherte Protokolle: Teile eines Wettkampfs (Protokoll, Ausschreibung) als Punkte */
.tb-ri__parts { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; margin-top: 0.2rem; }
.tb-ri__part { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; color: var(--text-secondary); }
.tb-ri__part i { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--border-color); }
.tb-ri__part--ok { color: var(--text-primary); }
.tb-ri__part--ok i { background: var(--color-success); }

/* Leistungsprofil (Bestzeiten, Kurve, Wettkämpfe, Meldegeld) */
.tb-perf__tiles { margin-bottom: var(--space-lg); }
.tb-perf__row { cursor: pointer; }
.tb-perf__row:hover, .tb-perf__row:focus-visible { background: var(--bg-secondary); outline: none; }
.tb-perf__time { font-variant-numeric: tabular-nums; font-size: 1.05rem; }
.tb-perf__sub { display: block; color: var(--text-secondary); font-size: 0.78rem; }
.tb-perf__recent { box-shadow: inset 3px 0 0 var(--color-success); }
.tb-perf__none { color: var(--text-secondary); }
.tb-perf__controls { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-sm) var(--space-lg); margin-bottom: var(--space-md); }
.tb-perf__controls .tb-field { margin: 0; }
.tb-perf__chart { position: relative; height: clamp(18rem, 45vh, 28rem); margin: var(--space-md) 0; padding: var(--space-sm); background: var(--bg-card); border-radius: var(--radius-lg); box-shadow: inset 0 0 0 1px var(--border-color); }
.tb-perf__kpis { margin: 0; }
.tb-perf__pb { margin-left: 0.4rem; font-size: 0.7rem; }
.tb-perf__meet { margin-bottom: var(--space-sm); padding: var(--space-sm) var(--space-md); background: var(--bg-card); border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--border-color); }
.tb-perf__meet summary { cursor: pointer; display: grid; gap: 0.1rem; }
.tb-perf__splits { font-size: 0.8rem; color: var(--text-secondary); }
.tb-perf__sort { padding: 0; border: 0; background: transparent; font: inherit; font-weight: 700; color: inherit; cursor: pointer; }
.tb-perf__sort--on::after { content: " ↕"; color: var(--color-primary); }
.tb-perf__news { margin: 0; padding-left: 1.1rem; display: grid; gap: var(--space-sm); }
.tb-perf__legs { margin: 0; padding-left: 1.4rem; display: grid; gap: 0.1rem; font-size: 0.9rem; }
/* Staffeln: der Wettkampfname darf nie die anderen Spalten verdrängen (eine Zeile, gekürzt, voller Name im Tooltip); die Besetzung bekommt den Rest */
.tb-perf__relays td:not(:last-child) { white-space: nowrap; vertical-align: top; }
.tb-perf__relays .tb-perf__meetname { max-width: 11rem; overflow: hidden; text-overflow: ellipsis; }
.tb-perf__relays td:last-child { min-width: 15rem; }
@media (max-width: 40rem) {
  /* schmale Bildschirme: jede Staffel als Karte, Beschriftung vor jedem Wert */
  .tb-perf__relays thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tb-perf__relays, .tb-perf__relays tbody, .tb-perf__relays tr, .tb-perf__relays td { display: block; width: 100%; }
  .tb-perf__relays tr { padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--border-color); }
  .tb-perf__relays td, .tb-perf__relays td:not(:last-child) { display: flex; gap: var(--space-sm); padding: 0.15rem 0; border: 0; white-space: normal; }
  .tb-perf__relays td::before { content: attr(data-label); flex: 0 0 5.5rem; color: var(--text-secondary); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; }
  .tb-perf__relays .tb-perf__meetname { max-width: none; }
  .tb-perf__relays td:last-child { min-width: 0; }
}
.tb-perf__data { margin-top: var(--space-md); }
/* Bestzeiten: je Zelle Zeit und eine Zeile Beschreibung (Datum, Wettkampf), der Rest mit Auslassungspunkten (voller Text im Tooltip) */
.tb-perf__best { table-layout: fixed; width: 100%; }
.tb-perf__best th:first-child { width: 11rem; }
.tb-admin .tb-perf__best td, .tb-admin .tb-perf__best th { padding-top: 0.4rem; padding-bottom: 0.4rem; line-height: 1.3; }
.tb-perf__best .tb-perf__time, .tb-perf__best .tb-perf__sub { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* Handy hochkant: Streckenspalte schmal und umbrechend, Zeit nie gekürzt, Punkte dürfen in die nächste Zeile */
@media (max-width: 39.99rem) {
  .tb-perf__best th:first-child { width: 5.6rem; }
  .tb-admin .tb-perf__best td, .tb-admin .tb-perf__best th { padding-left: 0.55rem; padding-right: 0.55rem; }
  .tb-admin .tb-perf__best tbody th { white-space: normal; letter-spacing: 0.03em; line-height: 1.25; }
  .tb-perf__best .tb-perf__time { overflow: visible; }
  .tb-perf__best .tb-perf__points { white-space: normal; }
}

/* Protokoll-Import: Prüfansicht vor dem Hochladen, Meldegeld von Hand, Spinner beim Prüfen */
.tb-ri__busy::before { content: ""; display: inline-block; width: 1em; height: 1em; margin-right: 0.5em; vertical-align: -0.15em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: tb-spin 0.8s linear infinite; }
.tb-ri__busy { font-weight: 600; }
.tb-ri__reviewmeet { display: grid; gap: 0.15rem; margin: 0 0 var(--space-sm); font-size: 1.1rem; }
.tb-ri__reviewfiles { margin: 0 0 var(--space-md); padding: 0; list-style: none; display: grid; gap: var(--space-xs); }
.tb-ri__reviewfiles .tb-ri__sub { margin-left: 0.4rem; }
.tb-ri__manualfees { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--space-sm); margin-bottom: var(--space-sm); }
.tb-ri__manualfees .tb-field { margin: 0; }
.tb-ri__distfees .tb-ri__manualfees { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); }
@media (prefers-reduced-motion: reduce) { .tb-ri__busy::before { animation-duration: 2.4s; } }
.tb-ri__meta { display: grid; grid-template-columns: max-content 1fr; gap: 0.2rem var(--space-md); margin: 0 0 var(--space-md); font-size: 0.92rem; }
.tb-ri__meta dt { color: var(--text-secondary); }
.tb-ri__meta dd { margin: 0; font-weight: 600; }
.tb-ri__meetactions { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.tb-ri__sourcebar { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--space-sm); align-items: end; margin-bottom: var(--space-xs); }
.tb-ri__sourcebar .tb-field, .tb-ri__sourcebar .tb-check { margin: 0; }
.tb-ri__source { max-height: calc(100vh - 22rem); min-height: 10rem; overflow: auto; }
.tb-ri__source .tb-table td, .tb-ri__source .tb-table th { white-space: nowrap; }
.tb-ri__raw { margin: 0; font-size: 0.8rem; white-space: pre; }
.tb-ri__source .tb-table th, .tb-ri__source .tb-table td { padding: var(--space-xs) var(--space-sm); font-size: 0.85rem; }
.tb-ri__sourcefile { margin: 0; overflow-wrap: anywhere; }
.tb-ri__subtitle { margin: var(--space-md) 0 var(--space-xs); font-size: 1rem; }
/* Neue Protokolle von DSV: unter dem Upload-Feld, je Wettkampf eine Zeile mit Aktionen */
.tb-ri__dsv { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--border-color); }
.tb-ri__dsvlist { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-sm); }
.tb-ri__dsvlist > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs) var(--space-md); }
.tb-ri__dsvactions { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.tb-ri__manualfees input { width: 100%; min-width: 0; }

/* Team-Seite: Saison in Zahlen (partials/team-season.php), nur Team Bochum, nur Summen */
/* Kennzahlen der Team-Seite: Gruppen mit kleiner Überschrift (Kaderstruktur, Saison) in einem Block, gleiche Optik wie .tb-minifacts */
.tb-factblock { display: grid; gap: var(--space-lg); margin: var(--space-xl) 0; padding: var(--space-lg) 0; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); }
.tb-factgroup__title { margin: 0 0 var(--space-sm); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-primary); }
.tb-minifacts--group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; border: 0; }
@media (min-width: 30rem) { .tb-minifacts--group { grid-template-columns: repeat(4, minmax(max-content, 1fr)); column-gap: var(--space-lg); } }   /* gleiche Spalten in allen Gruppen (soweit die Beschriftung passt), Zahlen stehen untereinander */
.tb-minifacts--group small { display: block; font-size: 0.75rem; opacity: 0.8; }

.tb-board { position: relative; }
.tb-board__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
@media (min-width: 52rem) { .tb-board__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tb-board__card--wide { grid-column: 1 / -1; } }
.tb-board__card { position: relative; display: flex; flex-direction: column; padding: var(--space-lg); border-radius: var(--radius-lg); background: var(--bg-card); box-shadow: inset 0 0 0 1px var(--border-color); overflow: hidden; }
.tb-board__card--hero { background: linear-gradient(160deg, color-mix(in srgb, var(--color-primary) 22%, var(--bg-card)) 0%, var(--bg-card) 70%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 40%, var(--border-color)), var(--glow-primary); }
.tb-board__label { margin: 0 0 var(--space-xs); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); }
.tb-board__hero { margin: 0; font-family: var(--font-family-heading); font-size: clamp(3.4rem, 9vw, 5.2rem); font-weight: 800; line-height: 0.95; font-variation-settings: "wdth" 75; background: var(--gradient-primary); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tb-board__hero span { font-size: 0.45em; }
.tb-board__big { margin: 0; font-family: var(--font-family-heading); font-size: clamp(1.6rem, 3.4vw, 2.1rem); font-weight: 800; line-height: 1.1; font-variation-settings: "wdth" 78; }
.tb-board__text { margin: var(--space-sm) 0 var(--space-md); color: var(--text-secondary); }
.tb-board__waves { width: 100%; height: 3.5rem; margin-top: auto; }
.tb-board__waves path { fill: none; stroke: var(--color-accent); stroke-width: 2; opacity: 0.6; vector-effect: non-scaling-stroke; }
.tb-board__waves path + path { stroke: var(--color-primary); opacity: 0.45; }
.tb-board__note { margin: 0; font-size: 0.85rem; color: var(--text-secondary); }

.tb-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.tb-bars__row { display: grid; grid-template-columns: minmax(7.5rem, 9.5rem) minmax(0, 1fr) 3.2rem; align-items: center; gap: var(--space-sm); font-size: 0.9rem; }
.tb-bars__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-bars__value { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.tb-bars__bar { width: 100%; height: 0.6rem; overflow: visible; }
.tb-bars__track { fill: var(--chart-grid); }
.tb-bars__fill { fill: var(--color-accent); transform-origin: left center; transform-box: fill-box; animation: tb-bar-grow 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.tb-bars__row--top .tb-bars__fill { fill: var(--color-primary); }
.tb-bars__row--top .tb-bars__name { font-weight: 700; }
@keyframes tb-bar-grow { from { transform: scaleX(0); } to { transform: none; } }

.tb-timeline { list-style: none; margin: 0; padding: 0 0 var(--space-xs); display: grid; grid-auto-flow: column; grid-auto-columns: minmax(6.5rem, 1fr); gap: var(--space-sm); overflow-x: auto; }
.tb-timeline__item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* Säule je Wettkampf: Balken unten ausgerichtet, Höhe als Attribut am SVG (CSP: keine Inline-Styles); darüber Platz für den Stern */
.tb-timeline__col { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 8rem; margin-bottom: var(--space-xs); }
.tb-timeline__bar { display: block; flex: none; width: 100%; }
.tb-timeline__starts { fill: color-mix(in srgb, var(--color-accent) 45%, transparent); transform-origin: center bottom; transform-box: fill-box; animation: tb-col-grow 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.tb-timeline__podium { fill: var(--color-primary); transform-origin: center bottom; transform-box: fill-box; animation: tb-col-grow 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes tb-col-grow { from { transform: scaleY(0); } to { transform: none; } }
.tb-timeline__value { font-family: var(--font-family-heading); font-size: 1.3rem; line-height: 1; font-variant-numeric: tabular-nums; }
.tb-timeline__date { font-size: 0.8rem; font-weight: 700; color: var(--color-accent-text); }
.tb-timeline__name { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }   /* lange Wörter mit Silbentrennung (lang="de"), notfalls hart umbrechen; die Auslassungspunkte greifen */
.tb-board__legend { display: flex; align-items: center; gap: var(--space-xs); margin: var(--space-md) 0 0; font-size: 0.8rem; color: var(--text-secondary); }
.tb-board__key { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 3px; }
.tb-board__key + .tb-board__key, .tb-board__legend .tb-board__key--podium { margin-left: var(--space-sm); }
.tb-board__key--starts { background: color-mix(in srgb, var(--color-accent) 45%, transparent); }
.tb-board__key--podium { background: var(--color-primary); }
@media (prefers-reduced-motion: reduce) { .tb-bars__fill, .tb-timeline__starts, .tb-timeline__podium { animation: none; } }
/* Protokoll-Import: Auswertung eines Wettkampfs als bildschirmfüllendes Dialogfenster (unter den Dialogen, über der Kopfzeile) */
.tb-ri__sheet { position: fixed; inset: 0; z-index: 9000; overflow-y: auto; overscroll-behavior: contain; background: var(--bg-primary); }
.tb-ri__sheetbar { position: sticky; top: 0; z-index: 2; padding: var(--space-sm) var(--space-lg); background: color-mix(in srgb, var(--bg-primary) 92%, transparent); backdrop-filter: blur(6px); box-shadow: 0 1px 0 var(--border-color); }
.tb-ri__sheetbody { max-width: 90rem; margin: 0 auto; padding: var(--space-md) var(--space-lg) var(--space-2xl); }
/* Wettkampf-Klammer im Protokoll-Import: Termin-Auswahl, Termin-Zeile, nächster Schritt */
.tb-ri__event { margin: var(--space-md) 0; padding: var(--space-md); border-radius: var(--radius-md); background: var(--bg-secondary); }
.tb-ri__event .tb-ri__subtitle { margin-top: 0; }
.tb-ri__eventline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); margin: var(--space-xs) 0 var(--space-md); }
.tb-ri__next { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); }
button.tb-chip { cursor: pointer; font: inherit; }
/* Verwaltungs-Übersicht: To-do-Liste rund um die Wettkämpfe und Zuordnungs-Assistent */
.tb-todo { margin: 0 0 var(--space-xl); padding: var(--space-lg); border-radius: var(--radius-lg); background: var(--bg-card); box-shadow: inset 0 0 0 1px var(--border-color); }
.tb-todo__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.tb-todo__head .tb-admingroup__title { margin: 0; }
.tb-todo__notices li { display: flex; align-items: center; gap: var(--space-sm); }
.tb-todo__notices { list-style: none; margin: var(--space-md) 0 0; padding: 0; display: grid; gap: var(--space-xs); font-weight: 600; }
.tb-todo__notices[hidden] { display: none; }
.tb-todo__list { list-style: none; margin: var(--space-md) 0 0; padding: 0; display: grid; gap: var(--space-xs); }
.tb-todo__item { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--space-sm) var(--space-md); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-md); background: var(--bg-secondary); }
/* Spaltenköpfe Termin · Protokoll-Import · News; in den Zellen derselbe Name nur schmal (eine Spalte) */
.tb-todo__item--head { background: transparent; padding-block: 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-secondary); }
.tb-todo__cell { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); min-width: 0; }
.tb-todo__area { display: none; }
.tb-todo__none { color: var(--text-secondary); font-size: 0.8rem; }
.tb-todo__done { display: inline-flex; align-items: center; gap: 0.25rem; margin-right: 0.4rem; font-size: 0.8rem; color: var(--text-secondary); }
.tb-todo__done::before { content: "\2713"; font-weight: 700; color: var(--color-success); }
.tb-todo__done--off::before { content: "\2013"; color: var(--text-secondary); }   /* als "nicht nötig" ausgeblendet */
a.tb-todo__done--link { color: var(--text-primary); text-decoration: underline; text-decoration-color: var(--border-color); text-underline-offset: 0.2em; }
a.tb-todo__done--link:hover, a.tb-todo__done--link:focus-visible { color: var(--color-accent-text); text-decoration-color: currentColor; }
/* kleiner runder Icon-Knopf (Ausblenden, Rückgängig): dezenter Ring, beim Überfahren wie jeder Icon-Knopf in Primary gefüllt */
.tb-iconbtn--mini { width: 1.6rem; height: 1.6rem; flex: none; color: var(--text-secondary); box-shadow: inset 0 0 0 1px var(--border-color); }
.tb-iconbtn--mini .tb-icon { width: 14px; height: 14px; }
.tb-iconbtn--mini:focus-visible { background: var(--color-primary); box-shadow: none; color: var(--color-on-primary); }
.tb-todo__action { display: inline-flex; align-items: center; padding: 0.2rem 0.6rem; border-radius: var(--radius-full); font: inherit; font-size: 0.8rem; font-weight: 600; color: var(--text-primary); background: var(--bg-card); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-warning) 60%, transparent); text-decoration: none; cursor: pointer; border: 0; }
.tb-todo__action:hover, .tb-todo__action:focus-visible { box-shadow: inset 0 0 0 1px var(--color-primary); color: var(--color-primary); }
.tb-todo__text { display: flex; flex-direction: column; min-width: 0; }
.tb-todo__event { font-weight: 700; color: var(--text-primary); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-todo__event:hover { text-decoration: underline; }
.tb-todo__text small { color: var(--text-secondary); }
.tb-assign__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-sm) var(--space-md); align-items: start; padding: var(--space-sm) 0; box-shadow: 0 1px 0 var(--border-color); }
.tb-assign__what { display: flex; flex-direction: column; min-width: 0; }
.tb-assign__what small { color: var(--text-secondary); }
.tb-assign__how { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }
.tb-assign__how select, .tb-assign__how input[type="text"] { min-width: 0; max-width: 100%; }
.tb-assign__create { display: flex; flex-wrap: wrap; gap: var(--space-xs); width: 100%; }
/* gleich breite Auswahl (Offene Stellen klären): Spalten fest, jede Auswahl füllt ihre Spalte */
.tb-assign--even .tb-assign__row { grid-template-columns: minmax(0, 1fr) 12rem; align-items: center; }
.tb-assign--even .tb-assign__what small + small { margin-top: 0.1rem; }
.tb-dialog--medium .tb-dialog__panel { max-width: 40rem; }
.tb-assign--even .tb-assign__how select { width: 100%; }
@media (max-width: 40rem) { .tb-assign__row, .tb-assign--even .tb-assign__row { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 52rem) {
  .tb-todo__item { grid-template-columns: minmax(0, 1fr); }
  .tb-todo__item--head { display: none !important; }
  .tb-todo__area { display: inline-block; min-width: 7.5rem; font-weight: 700; color: var(--text-secondary); }
}
/* News-Editor: Wettkampf über die ganze Zeile, daneben die Art des Beitrags */
@media (min-width: 40rem) { .tb-newsevent { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); } }
.tb-newsevent .tb-field { margin-bottom: 0; }
.tb-newsevent__hint { grid-column: 1 / -1; margin-top: calc(-1 * var(--space-sm)); }
.tb-newsevent__event:has(+ [hidden]) { grid-column: 1 / -1; }   /* ohne Wettkampf: Auswahl über die ganze Zeile */
.tb-eventlinked { margin: 0 0 var(--space-md); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); background: var(--bg-secondary); font-size: 0.9rem; }
.tb-eventlinked p { margin: 0.2rem 0; }
.tb-dialog--full .tb-dialog__panel { max-width: min(96vw, 90rem); }   /* Zuordnen: ganze Breite */
/* Terminverwaltung: langer Titel mit Auslassung (voller Name im Tooltip), Zeitraum in einer Zeile */
.tb-eventadmin__title a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-eventadmin__title { width: 100%; max-width: 0; min-width: 9rem; }   /* Titel füllt den Rest, gekürzt mit Ellipse, voller Titel im Tooltip */
.tb-cell__actions { white-space: nowrap; text-align: right; }
.tb-cell__actions .tb-cell__action + .tb-cell__action { margin-left: 0.35rem; }
.tb-eventadmin__date { white-space: nowrap; }
/* Stand in drei Spalten (Links, Protokoll, News): kleine Chips, grau gestrichelt = fehlt */
.tb-eventadmin__state .tb-chips { gap: 0.25rem; flex-wrap: nowrap; }
.tb-eventadmin__none { color: var(--text-secondary); }
.tb-chip--small { font-size: 0.72rem; padding: 0 0.45rem; }
.tb-chip--small::before { display: none; }   /* klein ohne Punkt: die Farbe sagt es schon */
.tb-chip--missing { border-style: dashed; color: var(--text-secondary); opacity: 0.8; }

/* Verwaltung Team: Zusammenfassung unter der Tabelle (Kader, Athleten) */
.tb-squads__summary { margin: var(--space-sm) 0 var(--space-xl); font-weight: 600; }

/* Rückweg im Editor (z. B. aus dem Content Creator zurück zum Protokoll) */
.tb-admin__back { margin: 0 0 var(--space-xs); font-size: 0.9rem; }
.tb-admin__back a { color: var(--color-accent-text); }

/* Termin anlegen: Hinweis auf die Vorjahresausgabe unter dem Titel */
.tb-eventtpl { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); margin: calc(-1 * var(--space-xs)) 0 var(--space-md); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-primary) 10%, transparent); font-size: 0.9rem; }
.tb-eventtpl[hidden] { display: none; }

/* Protokoll-Import › Ausschreibung: Unterpunkte eine Ebene tiefer */
.tb-ri__subtitle--minor { margin-top: var(--space-sm); font-size: 0.9rem; color: var(--text-secondary); }

/* News: Daten-Bausteine "Die Zahlen" (Kacheln wie die Kennzahlen der Team-Seite) und "Teilnehmer" (Liste in Spalten) */
.tb-newsstats, .tb-newspeople { margin: var(--space-xl) 0; padding: var(--space-lg); border-radius: var(--radius-lg); background: var(--bg-card); box-shadow: inset 0 0 0 1px var(--border-color); }
.tb-newsstats__title, .tb-newspeople__title { margin: 0 0 var(--space-md); font-size: 1.1rem; }
.tb-newspeople__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--space-xs) var(--space-lg); }
.tb-newspeople__item { display: flex; flex-direction: column; padding: var(--space-xs) 0; border-bottom: 1px solid var(--border-color); }
.tb-newspeople__item span { font-size: 0.85rem; color: var(--text-secondary); }
.tb-article__body .tb-newsstats__title, .tb-article__body .tb-newspeople__title { margin: 0 0 var(--space-md); }   /* gegen den Abstand der Zwischenüberschriften im Beitrag */
.tb-article__body .tb-newsstats__facts { margin: 0; }

/* Trainerbereich: Referenzdaten (admin/reference.js) */
.tb-ref__since { display: block; font-size: 0.8rem; font-weight: 400; color: var(--text-secondary); }
.tb-ref__count { text-align: center; }
.tb-ref__nowrap { white-space: nowrap; }
.tb-ref td.tb-cell__actions { text-align: right; white-space: nowrap; }
.tb-ref button.tb-cell__action { padding: 0; background: transparent; cursor: pointer; font: inherit; }
.tb-ref button.tb-cell__action:hover, .tb-ref button.tb-cell__action:focus-visible { color: var(--color-primary-light); box-shadow: inset 0 0 0 1px var(--color-primary); }
/* Knopf "Datei einspielen": ein Label mit verstecktem Dateifeld, nimmt auch gezogene Dateien an */
.tb-ref__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-md); }
.tb-ref__filebtn { position: relative; cursor: pointer; }
.tb-ref__fileinput { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.tb-ref__filebtn:focus-within { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.tb-ref__filebtn.tb-ri__drop--over { box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 35%, transparent); }
.tb-ref__filebtn.tb-ri__drop--busy { pointer-events: none; }
/* Detailseite: Karten wie auf der Systemseite */
.tb-ref__cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
.tb-ref__cards > .tb-syscard { grid-template-columns: minmax(0, 1fr); min-width: 0; }   /* breite Tabellen (Rudolph) scrollen in ihrer Karte statt die Seite zu verbreitern */
.tb-ref__chips { grid-column: 3; grid-row: 1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-xs); }
.tb-ref__src { overflow-wrap: anywhere; color: var(--text-secondary); }
.tb-ref__src a { color: inherit; }
.tb-ref__eq { font-family: var(--font-family-heading); font-size: 1.05rem; font-weight: 800; color: var(--text-primary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tb-ref__calc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm) var(--space-md); align-items: end; }
@media (min-width: 48rem) { .tb-ref__calc { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(13rem, 1.6fr); } }
.tb-ref__calc .tb-field { margin: 0; min-width: 0; }
.tb-ref__calc input, .tb-ref__calc select { width: 100%; min-width: 0; }
.tb-ref__resultbox { grid-column: 1 / -1; }
@media (min-width: 48rem) { .tb-ref__resultbox { grid-column: auto; } }
.tb-ref__result { display: flex; align-items: center; min-height: 2.75rem; padding: 0 var(--space-md); border-radius: var(--radius-md); background: color-mix(in srgb, var(--text-primary) 5%, transparent); font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.tb-ref__pick { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); margin-bottom: var(--space-sm); }
.tb-ref__pick .tb-field { min-width: 10rem; }
/* Tabelle für einen Schwimmer (Rudolph): Strecken x Stufen, erste Spalte beim Scrollen stehen */
.tb-ref__swpick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm) var(--space-md); margin-bottom: var(--space-sm); }
@media (min-width: 48rem) { .tb-ref__swpick { grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); } }
.tb-ref__swpick .tb-field { margin: 0; min-width: 0; }
.tb-ref__swpick input, .tb-ref__swpick select { width: 100%; min-width: 0; }
.tb-ref__sw th.tb-ref__sw-first { position: sticky; left: 0; z-index: 1; background: var(--bg-card); text-align: left; box-shadow: 1px 0 0 var(--border-color); }
.tb-ref__sw th.tb-ref__sw-first { text-transform: none; letter-spacing: 0; white-space: normal; min-width: 7.5rem; max-width: 9rem; }
.tb-ref__sw-name { display: block; font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); }
.tb-ref__sw-best { display: block; font-weight: 800; font-size: 1rem; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.tb-ref__sw-ok { background: color-mix(in srgb, var(--color-primary) 14%, transparent); }
.tb-ref__sw-hit { background: var(--color-primary); color: var(--color-on-primary); font-weight: 700; }
.tb-ref__sw-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-sm); margin: var(--space-sm) 0 0; font-size: 0.85rem; color: var(--text-secondary); }
.tb-ref__sw-key { display: inline-block; width: 1.1rem; height: 0.8rem; border-radius: var(--radius-sm); }
.tb-ref__sw-key--hit { background: var(--color-primary); }
.tb-ref__sw-key--ok { background: color-mix(in srgb, var(--color-primary) 14%, transparent); box-shadow: inset 0 0 0 1px var(--border-color); }
.tb-ref__sw-leg { display: inline-flex; align-items: center; gap: var(--space-xs); margin-right: var(--space-sm); }
.tb-ref__swcheck { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-sm); margin-bottom: var(--space-sm); cursor: pointer; }
.tb-ref__sw-bahn { margin-left: var(--space-xs); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.04em; color: var(--text-secondary); }
.tb-ref__sw-nokey { font-weight: 700; }
.tb-ref__table th, .tb-ref__table td { padding-top: 0.35rem; padding-bottom: 0.35rem; font-size: 0.9rem; }
.tb-ref__table--grid th, .tb-ref__table--grid td { padding-left: 0.5rem; padding-right: 0.5rem; white-space: nowrap; text-align: right; }
.tb-ref__table--grid th:first-child { text-align: left; }
.tb-ref__time { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* statistisch nicht gesicherte Spalten: gedämpft und kursiv statt Farbfläche (getönter Warnton wirkt im Dunkelmodus braun) */
.tb-ref__unsure { color: var(--text-secondary); font-style: italic; }
th.tb-ref__unsure { color: var(--color-warning); }
.tb-ref__notable td { background: var(--tint-warning); }
.tb-ref__notable td:first-child { box-shadow: inset 3px 0 0 var(--color-warning); }
.tb-ref__notable td:first-child { box-shadow: inset 3px 0 0 var(--color-warning); }
.tb-ref__sub { margin: var(--space-lg) 0 var(--space-sm); font-size: 1rem; }
.tb-ref__summary { margin: 0 0 var(--space-sm); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-sm); }
.tb-ref__list { margin: var(--space-sm) 0; }
.tb-ref__list summary, .tb-ref__warn summary { cursor: pointer; font-weight: 600; }
.tb-ref__list ul, .tb-ref__warn ul { margin: var(--space-xs) 0 0; padding-left: 1.25rem; }
/* Historie als Tabelle: gültige Fassung mit Randstrich, angezeigte Fassung hinterlegt, ganze Zeile anklickbar */
.tb-ref__hrow { cursor: pointer; }
.tb-ref__hrow--current td:first-child { box-shadow: inset 3px 0 0 var(--color-success); }
.tb-ref__hrow--shown td { background: color-mix(in srgb, var(--color-primary) 8%, transparent); }
.tb-ref__verbtn { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--text-primary); text-align: left; cursor: pointer; }
.tb-ref__verbtn:hover, .tb-ref__verbtn:focus-visible { color: var(--color-primary-light); text-decoration: underline; }
.tb-ref__nowchip { margin-left: var(--space-xs); }
.tb-ref__history .tb-ref__since { margin-top: 2px; }
/* Einspiel-Dialog: Einleitung, eine Zeile je Fassung, gesammelte Hinweise */
.tb-ref__preview { display: grid; gap: var(--space-md); }
.tb-ref__lead { margin: 0; color: var(--text-secondary); }
.tb-ref__rows { display: grid; gap: var(--space-sm); }
.tb-ref__row { padding: var(--space-sm) var(--space-md); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); transition: opacity var(--transition-base); }
.tb-ref__row--off { opacity: 0.7; }
.tb-ref__rowhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs) var(--space-md); }
.tb-ref__rowmain { flex: 1 1 18rem; min-width: 0; }
.tb-ref__rowtitle { margin: 0; font-size: 1rem; }
.tb-ref__rowmeta, .tb-ref__rowhint { margin: 2px 0 0; font-size: 0.85rem; color: var(--text-secondary); }
.tb-ref__rowhint { color: var(--text-primary); }
.tb-ref__rowchip { flex: none; }
.tb-ref__more { margin-top: var(--space-xs); }
.tb-ref__more > summary { cursor: pointer; font-size: 0.85rem; font-weight: 600; color: var(--color-primary-light); }
.tb-ref__moreinner { padding-top: var(--space-sm); }
.tb-ref__valuebox { max-height: 22rem; overflow: auto; }
.tb-ref__skip { margin-top: var(--space-md); font-size: 0.85rem; font-weight: 400; color: var(--text-secondary); }
.tb-ref__skip input { width: 1rem; height: 1rem; }
.tb-ref__warn { margin: 0; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); font-size: 0.9rem; background: var(--tint-warning); box-shadow: inset 3px 0 0 var(--color-warning); }
.tb-ref__err { color: var(--color-error); font-weight: 600; }
.tb-chip--danger .tb-icon { color: var(--color-error); }
.tb-ref__pdf { display: grid; gap: var(--space-md); max-height: 70vh; overflow: auto; padding: var(--space-sm); background: color-mix(in srgb, var(--text-secondary) 12%, var(--bg-card)); border-radius: var(--radius-md); justify-items: center; }
.tb-ref__page { display: block; max-width: 100%; height: auto; background: var(--color-white); box-shadow: var(--shadow-md); }   /* Papierweiß: das PDF bleibt in beiden Designs lesbar */

/* ---------- Trainerbereich: Kaderübersicht (admin/squad-matrix.js). Lagen zugeklappt, damit die Tabelle bei 1024 px ohne Querscrollen passt.
   Farbstufen nur aus der Primärfarbe (color-mix), im Dunkelmodus ohne warme Töne. */
.tb-sqm__tabs { margin-top: var(--space-sm); }
.tb-sqm .tb-tabs__tab { --squad-tone: var(--color-primary); }
.tb-sqm__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin: var(--space-md) 0; }
.tb-sqm__compare { margin-left: auto; }
/* Pfeile über breiten Verwaltungstabellen (TB.admin.scrollArrows): rund, Ring per box-shadow (border franst bei Kreisen aus) */
.tb-scrollnav { display: flex; justify-content: flex-end; gap: var(--space-xs); margin: 0 0 var(--space-xs); }
.tb-scrollnav[hidden] { display: none; }
.tb-scrollnav__btn { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; padding: 0; border: 0; border-radius: 50%; background: var(--bg-card); color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--border-color); cursor: pointer; transition: color var(--transition-base), box-shadow var(--transition-base); }
.tb-scrollnav__btn:hover:not(:disabled) { color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); }
.tb-scrollnav__btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.tb-scrollnav__btn:disabled { opacity: 0.35; cursor: default; }
.tb-admin .tb-sqm__table td { padding: 0.45rem 0.3rem; font-size: 0.9rem; }
.tb-admin .tb-sqm__table thead th { padding: 0.55rem 0.3rem; letter-spacing: 0.05em; }
.tb-admin .tb-sqm__table tbody tr { cursor: default; }
.tb-sqm__table thead th { vertical-align: bottom; }
.tb-admin .tb-sqm__table tbody th { padding: 0.45rem 0.3rem; font-size: 0.9rem; letter-spacing: normal; text-transform: none; white-space: normal; background: none; color: var(--text-primary); font-weight: 600; }
.tb-sqm__num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tb-sqm__table th.tb-sqm__num, .tb-sqm__table td.tb-sqm__num { text-align: right; }
.tb-sqm__namecol { text-align: left; }
.tb-sqm__namecol .tb-sqm__sub { white-space: normal; }
.tb-sqm__namecol a { color: var(--text-primary); text-decoration: none; }
.tb-sqm__namecol a:hover, .tb-sqm__namecol a:focus-visible { color: var(--color-primary); text-decoration: underline; }
.tb-sqm__sub { display: block; font-size: 0.74rem; font-weight: 400; font-style: normal; color: var(--text-secondary); white-space: nowrap; }
.tb-sqm__pickcol { width: 1.6rem; padding-right: 0; }
/* Häkchen und Name bleiben beim seitlichen Scrollen stehen (deckender Hintergrund, Linie rechts); Häkchenspalte 1,6 rem + 0,6 rem Abstand */
.tb-admin .tb-sqm__table .tb-sqm__pickcol, .tb-admin .tb-sqm__table .tb-sqm__namecol { position: sticky; z-index: 1; background-color: var(--bg-card); }
.tb-admin .tb-sqm__table thead .tb-sqm__pickcol, .tb-admin .tb-sqm__table thead .tb-sqm__namecol { z-index: 2; background-image: linear-gradient(color-mix(in srgb, var(--text-primary) 3%, transparent), color-mix(in srgb, var(--text-primary) 3%, transparent)); }
.tb-sqm__table .tb-sqm__pickcol { left: 0; min-width: 2.2rem; }
.tb-sqm__table .tb-sqm__namecol { left: 2.2rem; box-shadow: inset -1px 0 0 var(--border-color); }
.tb-sqm__cmp .tb-sqm__namecol { left: 0; }
@media (max-width: 39.99rem) { .tb-sqm__table .tb-sqm__namecol { max-width: 9.5rem; } .tb-admin .tb-sqm__table tbody th.tb-sqm__namecol a { hyphens: auto; overflow-wrap: break-word; } }
.tb-admin .tb-sqm__table .tb-sqm__pickcol { padding-right: 0; padding-left: 0.6rem; }
.tb-sqm__pickcol input { width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--color-primary); vertical-align: middle; }
.tb-sqm__row--picked > td:first-child { box-shadow: inset 3px 0 0 var(--color-primary); }
.tb-sqm__empty { color: color-mix(in srgb, var(--text-secondary) 55%, transparent); }
.tb-sqm__best { font-weight: 800; }
.tb-sqm__hand { margin-left: 0.15rem; font-size: 0.68rem; font-weight: 600; color: var(--text-secondary); }
.tb-sqm__lvl--1 { background: color-mix(in srgb, var(--color-primary) 7%, transparent); }
.tb-sqm__lvl--2 { background: color-mix(in srgb, var(--color-primary) 15%, transparent); }
.tb-sqm__lvl--3 { background: color-mix(in srgb, var(--color-primary) 25%, transparent); }
.tb-sqm__lvl--4 { background: color-mix(in srgb, var(--color-primary) 37%, transparent); }
.tb-sqm__lvl--5 { background: color-mix(in srgb, var(--color-primary) 52%, transparent); font-weight: 700; }
.tb-sqm__unsure { color: var(--text-secondary); font-style: italic; }
.tb-sqm__group { text-align: center; white-space: nowrap; box-shadow: inset 0 -2px 0 var(--color-primary); }
.tb-sqm__stroke { white-space: nowrap; }
/* zugeklappte Lage: Name (sortiert) oben, Aufklapp-Knopf darunter, damit die Spalte nicht breiter wird als der Name */
.tb-sqm__head { display: flex; flex-direction: column; align-items: flex-end; gap: 0.2rem; }
.tb-sqm__group .tb-sqm__head { flex-direction: row; justify-content: center; align-items: center; }
/* Lage auf- und zuklappen: runder Knopf mit Ring (box-shadow statt Rahmen) */
.tb-sqm__toggle {
  display: inline-flex; align-items: center; justify-content: center; width: 1.35rem; height: 1.35rem; margin-left: 0.25rem; padding: 0; border: 0; border-radius: 50%;
  background: transparent; box-shadow: inset 0 0 0 1.5px var(--border-color); color: var(--text-secondary); font: inherit; font-weight: 700; line-height: 1; cursor: pointer; vertical-align: middle;
  transition: box-shadow var(--transition-base), color var(--transition-base), background var(--transition-base);
}
.tb-sqm__toggle:hover { color: var(--color-primary); box-shadow: inset 0 0 0 1.5px var(--color-primary); }
.tb-sqm__toggle:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.tb-sqm__toggle[aria-expanded="true"] { background: var(--color-primary); color: var(--color-on-primary); box-shadow: none; }
/* deutlicher: "+" zugeklappt mit farbigem Ring, "−" aufgeklappt gefüllt; aufgeklappte Lage als getöntes Band mit Linien links und rechts */
.tb-sqm__toggle { width: 1.6rem; height: 1.6rem; font-size: 1.05rem; color: var(--color-primary); box-shadow: inset 0 0 0 2px var(--color-primary); }
.tb-sqm__toggle:hover { background: color-mix(in srgb, var(--color-primary) 15%, transparent); }
.tb-sqm__toggle[aria-expanded="true"]:hover { background: var(--color-primary-dark); }
.tb-sqm__group, .tb-sqm__dist { background: color-mix(in srgb, var(--color-primary) 14%, transparent); }
.tb-sqm__in--first { box-shadow: inset 2px 0 0 var(--color-primary); }
.tb-sqm__in--last { box-shadow: inset -2px 0 0 var(--color-primary); }
.tb-sqm__group { box-shadow: inset 0 -2px 0 var(--color-primary), inset 2px 0 0 var(--color-primary), inset -2px 0 0 var(--color-primary); }
.tb-sqm__legend { margin-top: var(--space-sm); }
.tb-sqm__full { margin: calc(-1 * var(--space-sm)) 0 var(--space-md); }
/* Vergleich: Chips der Auswahl, Tabelle mit allen Strecken (Namensspalte bleibt beim Querscrollen stehen), Ring um den Besten je Strecke */
.tb-sqm__chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-sm); margin-bottom: var(--space-md); }
.tb-sqm__chip {
  display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2rem; padding: 0 0.3rem 0 0.75rem; border: 0; border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-primary) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 45%, transparent);
  color: var(--text-primary); font: inherit; font-size: 0.85rem; font-weight: 700;
}
.tb-sqm__unpick {
  display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; padding: 0; border: 0; border-radius: 50%;
  background: transparent; box-shadow: inset 0 0 0 1.5px var(--border-color); color: var(--text-secondary); font: inherit; font-size: 0.7rem; line-height: 1; cursor: pointer;
  transition: box-shadow var(--transition-base), color var(--transition-base);
}
.tb-sqm__unpick:hover { color: var(--color-error); box-shadow: inset 0 0 0 1.5px var(--color-error); }
.tb-sqm__unpick:focus-visible, .tb-sqm__add:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.tb-sqm__add { padding: 0 0.85rem; background: transparent; box-shadow: inset 0 0 0 1px var(--border-color); color: var(--text-secondary); cursor: pointer; transition: box-shadow var(--transition-base), color var(--transition-base); }
.tb-sqm__add:hover { color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); }
.tb-sqm__cmp .tb-sqm__namecol { position: sticky; left: 0; z-index: 1; min-width: 10rem; padding-left: 0.75rem; background: var(--bg-card); box-shadow: inset -1px 0 0 var(--border-color); }
.tb-admin .tb-sqm__cmp thead .tb-sqm__namecol { background: color-mix(in srgb, var(--text-primary) 3%, var(--bg-card)); }
.tb-admin .tb-sqm__cmp tbody th.tb-sqm__namecol { background: var(--bg-card); }
.tb-admin .tb-sqm__cmp tbody tr:hover th.tb-sqm__namecol { background: color-mix(in srgb, var(--color-primary) 7%, var(--bg-card)); }
.tb-admin .tb-sqm__cmp th.tb-sqm__group { text-align: center; }
.tb-sqm__cmp .tb-sqm__gstart { border-left: 1px solid var(--border-color); }
.tb-sqm__cmp .tb-sqm__dist { min-width: 3.4rem; }
.tb-sqm__cmp .tb-sqm__val { position: relative; padding-left: 0.65rem; padding-right: 0.65rem; }   /* relative: hält den versteckten Text „Bester der Auswahl“ in der Zelle (sonst wird die Seite breiter) */
.tb-sqm__cmp .tb-sqm__sub { font-variant-numeric: tabular-nums; }
/* Ring 2 px innerhalb der Zelle (Abstand zum Nachbarring, letzte Spalte nicht abgeschnitten) */
.tb-sqm__top { outline: 2px solid var(--color-accent-text); outline-offset: -4px; border-radius: var(--radius-md); font-weight: 800; }
/* Platzhalter für spätere Erweiterungen: sichtbar, aber ohne Funktion */
.tb-sqm__addons { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--space-md); margin-top: var(--space-lg); }
.tb-sqm__addon { display: grid; gap: var(--space-xs); align-content: start; justify-items: start; padding: var(--space-md) var(--space-lg); border: 1px dashed var(--border-color); border-radius: var(--radius-lg); color: var(--text-secondary); }
.tb-sqm__addon-title { margin: 0; font-size: 1rem; color: var(--text-secondary); }
.tb-sqm__addon-text { margin: 0; font-size: 0.9rem; }

/* ---------- DMS-Aufstellung (Trainerbereich) */
.tb-dms__ui:not([hidden]) { display: grid; gap: var(--space-lg); }
.tb-dms__settings { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); align-items: end; }
.tb-dms__settings .tb-dms__squads, .tb-dms__settings .tb-check, .tb-dms__settings .tb-admin__actions { grid-column: 1 / -1; }
.tb-dms__squads { border: 0; padding: 0; margin: 0; }
.tb-dms__squads > div { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); }
.tb-dms__saved { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-sm); }
.tb-dms__saved > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs) var(--space-md); }
.tb-dms__time { max-width: 8rem; }
.tb-dms__total { margin: 0; font-weight: 700; font-size: 1.1rem; }
.tb-dms__warnings { margin: 0; padding-left: 1.2rem; }
.tb-dms__section th { text-align: left; background: var(--bg-card); }
.tb-dms__warn td { background: var(--tint-warning); }
.tb-dms__reserves { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); }
/* Aktionsleiste der offenen Aufstellung: Aussehen wie die Formularleisten (tb-admin__actions--sticky), hier als eigene Karte unter den Abschnitten */
.tb-dms__bar.tb-admin__actions { margin: 0; border: 1px solid var(--border-color); border-radius: var(--radius-lg); }
.tb-dms__barend { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-left: auto; }
.tb-dms__print { display: none; }
/* Meldebogen: Sobald eine Aufstellung da ist, baut dms.js den Bogen mit; gedruckt wird dann nur er (ohne Kopf, Seitenleiste, Fuß) */
@media print {
  body:has(.tb-dms__print:not(:empty)) { background: var(--palette-white); }
  body:has(.tb-dms__print:not(:empty)) > *:not(main), .tb-dms:has(.tb-dms__print:not(:empty)) > *:not(.tb-dms__print) { display: none !important; }
  .tb-dms:has(.tb-dms__print:not(:empty)) { display: block; max-width: none; padding: 0; margin: 0; }
  .tb-dms__print:not(:empty) { display: block; color: var(--palette-black); background: var(--palette-white); }
  .tb-dms__print h1, .tb-dms__print h2, .tb-dms__print h3 { color: var(--palette-black); }
  .tb-dms__print table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
  .tb-dms__print h2 ~ h2 { break-before: page; }   /* Abschnitt 2 auf eigener Seite */
  .tb-dms__print th, .tb-dms__print td { border: 1px solid var(--palette-black); padding: 2px 6px; text-align: left; font-size: 10pt; }
}

/* Saison in Zahlen: Kopf mit Saisonwechsel (Links auf /team?saison=…#saison) und Saisonverlauf als Karussell (ui/scroller.js) */
.tb-board__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-xl); }
.tb-board__head .tb-section__title { margin-bottom: 0; }
.tb-board__seasons { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.tb-board__cardhead { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); min-height: 2.5rem; }
.tb-board__cardhead .tb-board__label { margin: 0; }
.tb-board__arrows { display: flex; gap: var(--space-xs); }
.tb-board__arrow { width: 2.5rem; height: 2.5rem; flex: none; color: var(--text-primary); box-shadow: inset 0 0 0 1.5px var(--border-color); }
.tb-board__arrow:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; background: var(--color-primary); box-shadow: none; color: var(--color-on-primary); }
.tb-board__arrow:disabled, .tb-board__arrow:disabled:hover { opacity: 0.35; cursor: default; background: transparent; box-shadow: inset 0 0 0 1.5px var(--border-color); color: var(--text-primary); }
.tb-timeline { scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--border-color) transparent;
  grid-auto-columns: minmax(calc((100% - 2 * var(--space-sm)) / 3), 1fr); }   /* ganze Einträge je Ansicht (3, 5, 8): Anfang und Ende schließen bündig ab */
@media (min-width: 40rem) { .tb-timeline { grid-auto-columns: minmax(calc((100% - 4 * var(--space-sm)) / 5), 1fr); } }
@media (min-width: 64rem) { .tb-timeline { grid-auto-columns: minmax(calc((100% - 7 * var(--space-sm)) / 8), 1fr); } }
.tb-timeline:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 4px; border-radius: var(--radius-sm); }
.tb-timeline__item { scroll-snap-align: start; }
/* Saisonhighlight: Stern über dem Balken (Häkchen am Termin), Platz dafür nur, wenn die Saison Highlights hat */
.tb-timeline--stars .tb-timeline__col { height: 9.9rem; }
.tb-timeline__star { flex: none; width: 1.5rem; height: 1.5rem; margin-bottom: 0.4rem; }
.tb-timeline__star path, .tb-board__key--star path { fill: var(--color-accent); stroke: var(--color-accent-text); stroke-width: 1.5; stroke-linejoin: round; }
.tb-board__key--star { width: 0.95rem; height: 0.95rem; margin-left: var(--space-sm); border-radius: 0; }

/* ---------- Trainingsplanung: Kalender der Kaderwoche (/admin/trainingsplanung) */
/* Reiter: auf schmalen Bildschirmen umbrechen statt seitlich verstecken (alle fünf bleiben sichtbar) */
.tb-plan__tabs { display: flex; flex-wrap: wrap; width: fit-content; max-width: 100%; }
.tb-plan__tabs .tb-admintabs__tab { flex: none; }
@media (max-width: 40rem) {
  .tb-plan__tabs { border-radius: var(--radius-lg); }
  .tb-plan__tabs .tb-admintabs__tab { padding: 0.4rem 0.75rem; }
}
.tb-plan__pick { margin-bottom: var(--space-md); }
.tb-plan__bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-sm) var(--space-md); margin-bottom: var(--space-md); }
.tb-plan__nav { display: flex; align-items: center; gap: var(--space-sm); }
.tb-plan__step { padding: 0 0.6rem; }
.tb-plan__range { margin: 0; min-width: 12rem; text-align: center; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.tb-plan__jump { display: flex; align-items: flex-end; gap: var(--space-sm); }
.tb-plan__date input { min-height: 2.75rem; }
.tb-plan__issues { list-style: none; margin: 0 0 var(--space-md); padding: var(--space-sm) var(--space-md); display: grid; gap: var(--space-xs); font-size: 0.9rem;
  border-radius: var(--radius-md); background: var(--tint-warning); box-shadow: inset 4px 0 0 var(--color-warning); }
/* Sieben Tagesspalten, unter 720 px eine Liste je Tag */
.tb-plan__week { display: grid; gap: var(--space-sm); grid-template-columns: minmax(0, 1fr); }
.tb-plan__week[aria-busy="true"] { opacity: 0.6; }
@media (min-width: 45rem) { .tb-plan__week { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; } }
.tb-plan__day { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: var(--space-sm); border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-card); }
.tb-plan__day--today { border-color: var(--color-primary); box-shadow: inset 0 3px 0 var(--color-primary); }
.tb-plan__dayhead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-xs); margin: 0; font-family: inherit; font-size: 0.95rem; font-weight: 800; }
.tb-plan__todaymark { font-size: 0.75rem; font-weight: 700; color: var(--color-primary); }
.tb-plan__units { display: grid; gap: 6px; }
.tb-plan__none { margin: 0; font-size: 0.8rem; color: var(--text-secondary); }
.tb-plan__unit { gap: 3px; padding: 6px 8px; }
.tb-plan__unit:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.tb-plan__unithead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--space-xs); }
.tb-plan__kind { font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); }
.tb-plan__chips { display: flex; flex-wrap: wrap; gap: 4px; }
.tb-plan__chips .tb-chip { font-size: 0.72rem; }
.tb-plan__note { font-size: 0.75rem; color: var(--text-secondary); }
.tb-plan__counts { font-size: 0.75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.tb-plan__unit--cancelled { opacity: 0.7; }
.tb-plan__unit--cancelled .tb-wk__time { text-decoration: line-through; }
.tb-plan__unit--outdated { box-shadow: inset 0 0 0 1px var(--color-warning); }
.tb-plan__add { margin-top: auto; width: 100%; justify-content: center; gap: 0.35rem; white-space: normal; text-align: center; }
.tb-plan__add .tb-icon { width: 1rem; height: 1rem; flex: none; }
@media (min-width: 45rem) { .tb-btn.tb-plan__add { min-height: 2rem; padding: 0.25rem 0.4rem; border-radius: var(--radius-md); font-size: 0.75rem; line-height: 1.2; } }
/* Dialog „Einheit hinzufügen“ */
.tb-plan__form { display: grid; gap: var(--space-sm); }
.tb-plan__form .tb-field__hint { margin: 0; }
.tb-plan__times { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }

/* ---------- Trainingsplanung: Einheit planen (/admin/trainingsplanung/einheit/{id}) */
.tb-planunit .tb-btn .tb-icon, .tb-plansetup .tb-btn .tb-icon { width: 1rem; height: 1rem; flex: none; }
.tb-planunit .tb-btn--small, .tb-plansetup .tb-btn--small { gap: 0.35rem; }
.tb-plan__conflict { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); margin: 0 0 var(--space-md); padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md); background: var(--tint-warning); box-shadow: inset 4px 0 0 var(--color-warning); }
.tb-plan__conflict p { flex: 1 1 16rem; margin: 0; }
.tb-plan__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-sm) var(--space-md); margin: 0 0 var(--space-md); }
.tb-plan__headmain { display: grid; gap: 4px; min-width: 0; }
.tb-plan__when { margin: 0; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.tb-plan__meta { margin: 0; color: var(--text-secondary); }
.tb-plan__headactions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.tb-admin form.tb-plan__unitform { max-width: 64rem; gap: var(--space-sm); }
.tb-plan__errors p, .tb-plan__errors ul { margin: 0; }
.tb-plan__errors ul { padding-left: 1.2rem; }
.tb-plan__hint { margin: 0 0 var(--space-sm); font-size: 0.88rem; color: var(--text-secondary); }
.tb-plan__muted { font-size: 0.8rem; color: var(--text-secondary); }
/* Reiter der Fassungen (Kaderplan, Varianten) */
.tb-plan__vtabbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 var(--space-md); padding-bottom: var(--space-sm); border-bottom: 1px solid var(--border-color); }
.tb-plan__vtabs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tb-plan__anykind { margin-top: var(--space-xs); font-size: 0.85rem; font-weight: 400; }
.tb-plan__vtab { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.25rem; padding: 0.3rem 0.9rem; border: 0; border-radius: var(--radius-full); cursor: pointer;
  background: transparent; color: var(--text-secondary); box-shadow: inset 0 0 0 1px var(--border-color); font: inherit; font-size: 0.9rem; font-weight: 700; }
.tb-plan__vtab:hover { color: var(--text-primary); background: color-mix(in srgb, var(--text-primary) 6%, transparent); }
.tb-plan__vtab--on, .tb-plan__vtab--on:hover { background: var(--color-primary); color: var(--color-on-primary); box-shadow: none; }
.tb-plan__vtab--invalid { box-shadow: inset 0 0 0 2px var(--color-error); }
.tb-plan__vtab:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.tb-plan__vtabnote { font-size: 0.72rem; font-weight: 600; opacity: 0.85; }
.tb-plan__vhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.tb-plan__vtitle { margin: 0; font-weight: 800; }
/* Blöcke */
.tb-plan__blocks { display: grid; gap: var(--space-md); margin-bottom: var(--space-md); }
.tb-plan__block { display: grid; gap: var(--space-sm); padding: var(--space-md); border: 1px solid var(--border-color); border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--text-primary) 2%, transparent); }
.tb-plan__block--invalid { border-color: var(--color-error); }
.tb-plan__blockhead { display: grid; grid-template-columns: minmax(0, 1fr) 6.5rem auto; align-items: end; gap: var(--space-sm); }
.tb-plan__blockhead .tb-field > span:first-child { font-size: 0.78rem; color: var(--text-secondary); }
.tb-plan__tools { display: flex; align-items: center; gap: 4px; }
.tb-plan__blockhead .tb-plan__tools { padding-bottom: 0.6rem; }
.tb-planunit .tb-iconbtn--mini:hover, .tb-plansetup .tb-iconbtn--mini:hover:not(:disabled) { background: var(--color-primary); color: var(--color-on-primary); box-shadow: none; }
.tb-planunit .tb-iconbtn--mini.tb-plan__danger:hover, .tb-planunit .tb-iconbtn--mini.tb-plan__danger:focus-visible,
.tb-plansetup .tb-iconbtn--mini.tb-plan__danger:hover:not(:disabled), .tb-plansetup .tb-iconbtn--mini.tb-plan__danger:focus-visible { background: color-mix(in srgb, var(--color-error) 12%, transparent); color: var(--color-error); box-shadow: inset 0 0 0 1px var(--color-error); }
.tb-plan__variable { font-size: 0.9rem; }
.tb-plan__relation { max-width: 28rem; }
.tb-plan__relation > span:first-child { font-size: 0.78rem; color: var(--text-secondary); }
/* Zeilen: Textfeld, Meter, Werkzeuge; Felder nur an der aktiven Zeile */
.tb-plan__lines { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.tb-plan__line { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 4px; border-radius: var(--radius-md); }
.tb-plan__line--active { background: color-mix(in srgb, var(--color-primary) 6%, transparent); box-shadow: inset 3px 0 0 var(--color-primary); }
.tb-plan__linemain { display: flex; align-items: center; gap: var(--space-xs); }
.tb-plan__raw, .tb-plan__field input, .tb-plan__field select {
  min-height: 2.5rem; padding: 0 0.6rem; font: inherit; font-weight: 400; color: var(--text-primary); background: var(--bg-card);
  border: 1px solid var(--border-color); border-radius: var(--radius-md);
}
.tb-plan__raw { flex: 1 1 auto; min-width: 0; font-family: ui-monospace, "Cascadia Mono", monospace; font-size: 0.95rem; }
.tb-plan__raw:focus-visible, .tb-plan__field input:focus-visible, .tb-plan__field select:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.tb-plan__field input[aria-invalid="true"] { border-color: var(--color-error); }
.tb-plan__metres { flex: none; min-width: 4.2rem; text-align: right; font-size: 0.85rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.tb-plan__free { justify-self: start; padding: 0 var(--space-sm); border-radius: var(--radius-full); font-size: 0.75rem; font-weight: 600; color: var(--text-secondary);
  background: var(--tint-warning); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-warning) 45%, transparent); }
.tb-plan__fields { display: none; flex-wrap: wrap; align-items: end; gap: var(--space-xs) var(--space-sm); padding: 2px 0 4px; }
.tb-plan__line--active .tb-plan__fields { display: flex; }
.tb-plan__field { display: grid; gap: 2px; font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); }
.tb-plan__field .tb-plan__num { width: 4.6rem; font-variant-numeric: tabular-nums; }
.tb-plan__field select { max-width: 13rem; padding-right: 1.6rem; white-space: nowrap; text-overflow: ellipsis; }
.tb-plan__field--wide { flex: 1 1 14rem; }
.tb-plan__field--wide input { width: 100%; }
.tb-plan__equip { display: flex; flex-wrap: wrap; gap: 4px; }
.tb-plan__chip { min-height: 2rem; padding: 0 0.6rem; border: 0; border-radius: var(--radius-full); cursor: pointer; font: inherit; font-size: 0.8rem; font-weight: 700;
  background: transparent; color: var(--text-secondary); box-shadow: inset 0 0 0 1px var(--border-color); }
.tb-plan__chip[aria-pressed="true"] { background: var(--color-primary); color: var(--color-on-primary); box-shadow: none; }
.tb-plan__chip:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.tb-plan__blockfoot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.tb-plan__totals { margin: 0; font-size: 0.85rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.tb-plan__blockactions { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.tb-plan__snippetlines { margin: 0; padding-left: 1.2rem; max-height: 12rem; overflow-y: auto; font-family: ui-monospace, "Cascadia Mono", monospace; font-size: 0.85rem; }
/* Teilnehmer */
.tb-plan__people { margin-top: var(--space-xl); max-width: 64rem; }
.tb-plan__peoplehead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.tb-plan__peoplehead h2 { margin: 0; }
.tb-plan__ptable td, .tb-plan__ptable th { vertical-align: top; }
.tb-admin .tb-plan__ptable tbody th { padding-top: var(--space-sm); padding-bottom: var(--space-sm); font-size: inherit; letter-spacing: 0; text-transform: none; color: var(--text-primary); background: none; white-space: normal; }
.tb-plan__ptable td.tb-plan__num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tb-plan__absent th, .tb-plan__absent td:not(:last-child) { opacity: 0.6; }
.tb-plan__conflictnote { display: block; margin-top: 2px; font-size: 0.78rem; color: var(--text-secondary); }
.tb-plan__conflictnote::before { content: "! "; font-weight: 800; color: var(--color-warning); }
.tb-plan__presence { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-sm); }
.tb-plan__switch { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: 0.85rem; }
.tb-plan__zones { display: grid; gap: 3px; min-width: 9rem; }
.tb-plan__zonebar { display: flex; height: 0.6rem; overflow: hidden; border-radius: var(--radius-full); background: var(--chart-grid); }
.tb-plan__seg { display: block; height: 100%; }
.tb-plan__zonetext { font-size: 0.75rem; color: var(--text-secondary); }
.tb-plan__seg--z0 { background: var(--chart-1); }
.tb-plan__seg--z1 { background: var(--chart-2); }
.tb-plan__seg--z2 { background: var(--color-squad-violet); }
.tb-plan__seg--z3 { background: var(--color-squad-green); }
.tb-plan__seg--z4 { background: var(--color-accent-text); }
.tb-plan__seg--z5 { background: var(--text-secondary); }
.tb-plan__seg--none { background: color-mix(in srgb, var(--text-primary) 28%, transparent); }
.tb-plan__legend { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); margin: var(--space-sm) 0 0; padding: 0; list-style: none; font-size: 0.8rem; color: var(--text-secondary); }
.tb-plan__legend li { display: inline-flex; align-items: center; gap: 0.35rem; }
.tb-plan__swatch { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 3px; }
/* Dialoge: Zuweisen, Fand nicht statt */
.tb-plan__assign .tb-admin__fieldset { display: grid; gap: 6px; max-height: 16rem; overflow-y: auto; }
.tb-plan__stalenote { flex-basis: 100%; margin-left: 2rem; font-size: 0.75rem; font-weight: 400; color: var(--text-secondary); }
.tb-plan__assign .tb-check { flex-wrap: wrap; }
.tb-plan__cancel .tb-admin__fieldset { display: grid; gap: 6px; }
.tb-plan__sub { margin-left: 2rem; font-weight: 400; }
.tb-plan__sub select { min-height: 2.5rem; max-width: 100%; padding: 0 0.6rem; font: inherit; color: var(--text-primary); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); }
.tb-plan__sub select:disabled { opacity: 0.6; }
.tb-plan__newdate { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs); margin-top: var(--space-xs); }
.tb-plan__newdate input { min-width: 0; }
.tb-plan__previewbox { padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); background: color-mix(in srgb, var(--text-primary) 4%, transparent); }
.tb-plan__previewtitle { margin: 0 0 4px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); }
.tb-plan__preview { margin: 0; padding-left: 1.2rem; font-variant-numeric: tabular-nums; }
.tb-plan__preview[aria-busy="true"] { opacity: 0.6; }
@media (max-width: 40rem) {
  .tb-plan__blockhead { grid-template-columns: minmax(0, 1fr) 5.5rem; }
  .tb-plan__blockhead .tb-plan__tools { grid-column: 1 / -1; justify-content: flex-end; padding-bottom: 0; }
  .tb-plan__block { padding: var(--space-sm); }
  .tb-plan__newdate { grid-template-columns: 1fr 1fr; }
  .tb-plan__newdate .tb-field:first-child { grid-column: 1 / -1; }
  /* Teilnehmer als Karten statt Tabelle */
  .tb-plan__ptable thead { display: none; }
  .tb-plan__ptable tr { display: grid; grid-template-columns: 1fr auto; gap: 4px var(--space-sm); padding: var(--space-sm) 0; border-bottom: 1px solid var(--border-color); }
  .tb-plan__ptable th, .tb-plan__ptable td, .tb-admin .tb-plan__ptable tbody th { display: block; padding: 0; border: 0; }
  .tb-plan__ptable td:nth-child(4), .tb-plan__ptable td:nth-child(5) { grid-column: 1 / -1; }
}

/* ---------- Trainingsplanung: Gruppen, Bausteine, Verpasst, Listen (/admin/trainingsplanung/gruppen|bausteine|verpasst|listen) */
.tb-plan__intro { max-width: 52rem; }
.tb-plan__listhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); margin: 0 0 var(--space-sm); }
.tb-plan__listhead h2, .tb-plan__setupui > h2 { margin: 0 0 var(--space-sm); }
.tb-plan__listhead h2 { margin: 0; }
.tb-plan__stable { max-width: 64rem; }
.tb-plan__stable td, .tb-plan__stable th { vertical-align: middle; }
.tb-admin .tb-plan__stable tbody th { font-size: inherit; letter-spacing: 0; text-transform: none; color: var(--text-primary); background: none; white-space: normal; }
.tb-plan__memberline { max-width: 32rem; white-space: normal; }
.tb-plan__numcell { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.tb-plan__actionscell { width: 1%; white-space: nowrap; }
.tb-plan__rowactions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.tb-plansetup .tb-iconbtn--mini:disabled { opacity: 0.4; cursor: not-allowed; }
.tb-plan__setupform { margin-top: var(--space-lg); }
.tb-plan__formtitle { margin: 0; font-size: 1.15rem; }
/* Gruppen: Mitglieder als Ankreuzliste mit Hinweis zur Hauptlage */
.tb-plan__memberlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 6px var(--space-md); }
.tb-plan__member { flex-wrap: wrap; align-items: flex-start; align-content: flex-start; gap: 0 var(--space-sm); font-weight: 600; }
.tb-plan__member input { margin-top: 0.1rem; }
.tb-plan__membername { flex: 1 1 auto; min-width: 0; }
.tb-plan__memberhint { flex-basis: 100%; margin-left: calc(1.25rem + var(--space-sm)); font-size: 0.75rem; font-weight: 400; color: var(--text-secondary); }
/* Bausteine: Titel und Art nebeneinander, Zeilen wie auf „Einheit planen“ */
.tb-plan__snippethead { display: grid; grid-template-columns: minmax(0, 1fr) 10rem; gap: var(--space-sm); }
/* Listen: Tabellen mit Eingabefeldern je Eintrag */
.tb-admin form.tb-plan__lists { max-width: 64rem; }
.tb-plan__list { display: grid; gap: var(--space-sm); }
.tb-plan__list .tb-field__hint, .tb-plan__list .tb-field__error { margin: 0; }
.tb-plan__ltable td { vertical-align: top; }
.tb-plan__ltable input[type="text"] { width: 100%; min-width: 0; }
.tb-plan__codein { max-width: 7.5rem; text-transform: uppercase; font-family: ui-monospace, "Cascadia Mono", monospace; }
.tb-plan__codein:disabled { opacity: 0.75; }
.tb-plan__rpein { width: 5rem; }
.tb-plan__activecheck { min-height: 2.75rem; font-weight: 400; font-size: 0.9rem; }
.tb-plan__ltable .tb-plan__rowactions { padding-top: 0.55rem; }
.tb-plan__usednote { display: block; margin-top: 2px; font-size: 0.72rem; color: var(--text-secondary); }
.tb-plan__ltable .tb-field__error { display: block; margin-top: 2px; }
.tb-plan__lrow--invalid input[type="text"] { border-color: var(--color-error); }
@media (max-width: 40rem) {
  .tb-plan__snippethead { grid-template-columns: 1fr; }
  /* Tabellen als Karten: Name oben, Angaben und Aktionen darunter */
  .tb-plan__stable thead { display: none; }
  .tb-plan__stable tr { display: grid; grid-template-columns: repeat(3, max-content); gap: 4px var(--space-md); padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--border-color); }
  .tb-admin .tb-plan__stable th, .tb-admin .tb-plan__stable td { display: block; width: auto; padding: 0; border: 0; text-align: left; }
  .tb-admin .tb-plan__stable tbody th, .tb-plan__stable .tb-plan__wide { grid-column: 1 / -1; }
  .tb-plan__stable .tb-plan__actionscell { grid-column: 1 / -1; }
  .tb-plan__rowactions { flex-wrap: wrap; justify-content: flex-start; }
  .tb-plan__ltable thead { display: none; }
  .tb-plan__ltable tr { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 4px var(--space-sm); padding: var(--space-sm) 0; border-bottom: 1px solid var(--border-color); }
  .tb-plan__ltable td { display: block; padding: 0; border: 0; }
  .tb-plan__ltable .tb-plan__actionscell { grid-column: 1 / -1; width: auto; }
}
.tb-plan__setupform > *, .tb-plan__snippethead > * { min-width: 0; }
.tb-plan__setupform > .tb-field > input, .tb-plan__snippethead input, .tb-plan__snippethead select { min-width: 0; width: 100%; }
.tb-plan__setupform .tb-field { grid-template-columns: minmax(0, 1fr); }

/* ---------- Kontaktformular (Kontaktseite, partials/contact-form) */
.tb-contactform { display: grid; gap: var(--space-md); max-width: 44rem; }
.tb-contactform__row { display: grid; gap: var(--space-md); }
@media (min-width: 40rem) { .tb-contactform__row { grid-template-columns: 1fr 1fr; } }
.tb-contactform .tb-check { align-items: flex-start; font-weight: 400; }
.tb-contactform .tb-check input { margin-top: 0.3rem; flex: none; }
.tb-contactform .tb-check a { color: var(--color-accent-text); }
.tb-contactform__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }   /* Fangfeld: nicht sichtbar, nicht per display:none (manche Robots lassen solche Felder aus) */
.tb-contactform__done { max-width: 44rem; padding: var(--space-md) var(--space-lg); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--color-success) 14%, var(--bg-card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-success) 45%, transparent); font-weight: 600; }
.tb-contactform--preview :disabled { opacity: 0.55; cursor: not-allowed; }   /* Vorschau: nur das Anliegen ist wählbar */

/* ---------- Mein Training (/mein-training, ui/my-training.js): Plan des Athleten, mobil zuerst */
.tb-mytr__ui { display: grid; gap: var(--space-lg); max-width: 44rem; }
.tb-mytr__notice { display: grid; justify-items: start; gap: var(--space-sm); padding: var(--space-md); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: inset 4px 0 0 var(--color-primary); }
.tb-mytr__notice p, .tb-mytr__about p { margin: 0; }
.tb-mytr__about summary { display: flex; align-items: center; min-height: var(--touch-target-min); cursor: pointer; font-weight: 600; color: var(--text-secondary); }
.tb-mytr__about p { padding-bottom: var(--space-sm); color: var(--text-secondary); }
.tb-mytr__section { display: grid; gap: var(--space-sm); }
.tb-mytr__section h2 { margin: 0; font-size: 1.3rem; }
.tb-mytr__cards { display: grid; gap: var(--space-sm); }
.tb-mytr__unit { min-width: 0; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); }
.tb-mytr__unit--open { display: grid; gap: var(--space-sm); padding: var(--space-md); }
.tb-mytr__unit > div.tb-mytr__head { padding: var(--space-sm) var(--space-md); }
.tb-mytr__unit--open > div.tb-mytr__head { padding: 0; }
.tb-mytr__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px var(--space-sm); align-items: baseline; }
summary.tb-mytr__head { position: relative; min-height: var(--touch-target-min); padding: var(--space-sm) calc(var(--space-md) + 1.25rem) var(--space-sm) var(--space-md); cursor: pointer; list-style: none; border-radius: var(--radius-md); }
summary.tb-mytr__head::-webkit-details-marker { display: none; }
summary.tb-mytr__head::after { content: ''; position: absolute; right: var(--space-md); top: 1.15rem; width: 0.5rem; height: 0.5rem; border-right: 2px solid var(--text-secondary); border-bottom: 2px solid var(--text-secondary); transform: rotate(45deg); transition: transform var(--transition-base); }
details[open] > summary.tb-mytr__head::after { transform: rotate(-135deg); top: 1.35rem; }
summary.tb-mytr__head:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.tb-mytr__time { font-weight: 700; font-variant-numeric: tabular-nums; }
.tb-mytr__meta { display: grid; min-width: 0; }
.tb-mytr__meta small { color: var(--text-secondary); }
.tb-mytr__badges { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; }
.tb-mytr__badges .tb-chip { white-space: normal; }
.tb-mytr__unit--off .tb-mytr__time, .tb-mytr__unit--off .tb-mytr__meta b { color: var(--text-secondary); text-decoration: line-through; }
.tb-mytr__badges .tb-mytr__chip--off { border-color: color-mix(in srgb, var(--color-error) 50%, transparent); background: color-mix(in srgb, var(--color-error) 10%, transparent); color: var(--text-primary); }
.tb-mytr__unit > .tb-mytr__body, .tb-mytr__unit > p { margin: 0; padding: 0 var(--space-md) var(--space-md); }
.tb-mytr__unit--open > .tb-mytr__body, .tb-mytr__unit--open > p { padding: 0; }
.tb-mytr__body { display: grid; gap: var(--space-sm); }
.tb-mytr__block { display: grid; gap: 2px; padding-top: var(--space-sm); border-top: 1px solid var(--border-color); }
.tb-mytr__blocktitle { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs) var(--space-sm); margin: 0; font-size: 0.95rem; }
.tb-mytr__blocktitle small { font-weight: 400; color: var(--text-secondary); }
.tb-mytr__lines { margin: 0; padding: 0; list-style: none; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tb-mytr__lines li { padding: 2px 0; }
.tb-mytr__total { margin: 0; font-weight: 700; }
.tb-mytr__weekhead { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.tb-mytr__weekhead h2 { margin-right: auto; }
.tb-mytr__weeknav { display: flex; align-items: center; gap: var(--space-xs); }
.tb-mytr__step { min-width: var(--touch-target-min); min-height: var(--touch-target-min); padding: 0 0.6rem; }
.tb-mytr__range { min-width: 9.5rem; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.tb-mytr__week { display: grid; gap: var(--space-md); margin: 0; padding: 0; list-style: none; }
.tb-mytr__day { display: grid; gap: var(--space-xs); }
.tb-mytr__dayname { display: flex; align-items: baseline; gap: var(--space-sm); margin: 0; font-size: 1rem; }
.tb-mytr__dayname small { font-size: 0.85rem; font-weight: 700; color: var(--color-primary); }
.tb-mytr__units { display: grid; gap: var(--space-xs); }
.tb-mytr__day--today .tb-mytr__unit { box-shadow: inset 3px 0 0 var(--color-primary); }
.tb-mytr__free, .tb-mytr__empty { margin: 0; font-size: 0.9rem; color: var(--text-secondary); }
/* Rückmeldung: Anstrengung 0–10 und Befinden mit Gesichtern; runde Knöpfe mit Ring per box-shadow, gewählt und beim Überfahren gefüllt */
.tb-mytr__fb { display: grid; gap: var(--space-sm); min-width: 0; padding: var(--space-md); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); }
.tb-mytr__fb[aria-busy="true"] { opacity: 0.85; }
.tb-mytr__fb p { margin: 0; }
.tb-mytr__fbnote { padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--color-info) 12%, transparent); font-size: 0.9rem; }
.tb-mytr__fbwhen { font-weight: 700; }
.tb-mytr__fbq { margin: 0; font-size: 1.05rem; }
.tb-mytr__scale { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-xs); justify-items: center; }
@media (min-width: 40rem) { .tb-mytr__scale { grid-template-columns: repeat(11, minmax(0, 1fr)); } }
.tb-mytr__dot, .tb-mytr__face {
  display: inline-grid; place-items: center; width: 100%; max-width: 3.25rem; aspect-ratio: 1; min-height: 2.9rem; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  font: inherit; font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; color: var(--text-primary); background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--border-color); transition: background var(--transition-base), box-shadow var(--transition-base), color var(--transition-base);
}
.tb-mytr__dot:hover, .tb-mytr__face:hover, .tb-mytr__dot[aria-checked="true"], .tb-mytr__face[aria-checked="true"] { background: var(--color-primary); color: var(--color-on-primary); box-shadow: none; }
.tb-mytr__dot:focus-visible, .tb-mytr__face:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.tb-mytr__face .tb-icon { width: 1.9rem; height: 1.9rem; }
.tb-mytr__rpelabel { min-height: 1.5em; font-weight: 700; color: var(--color-primary); }
.tb-mytr__fbactions, .tb-mytr__reasons, .tb-mytr__savedbtns, .tb-mytr__flags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-sm); }
.tb-mytr__reasons[hidden] { display: none; }
.tb-mytr__fb .tb-btn--small { min-height: 2.75rem; }
.tb-mytr__fb .tb-btn[aria-pressed="true"] { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.tb-mytr__saved { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs) var(--space-sm); padding-top: var(--space-sm); border-top: 1px solid var(--border-color); font-size: 0.9rem; color: var(--text-secondary); }
.tb-mytr__wrow { display: grid; gap: var(--space-xs); padding-top: var(--space-sm); border-top: 1px solid var(--border-color); }
.tb-mytr__wq { font-weight: 600; }
.tb-mytr__faces { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-xs); justify-items: center; max-width: 20rem; }
.tb-mytr__ends { display: flex; justify-content: space-between; max-width: 20rem; font-size: 0.8rem; color: var(--text-secondary); }
.tb-mytr__comment summary { display: flex; align-items: center; min-height: var(--touch-target-min); cursor: pointer; font-weight: 600; color: var(--color-accent-text); }
.tb-mytr__comment textarea { width: 100%; }