:root {
  --bg:#eef3f7;
  --bg-2:#e4edf2;
  --bg-elev:#fff;
  --bg-surface:#f8fbfc;
  --bg-surface-2:#f1f6f9;
  --petrol-900:#052131;--petrol-800:#0a3250;--petrol-700:#10466a;--petrol-600:#175d85;
  --aqua-600:#0090ac;--aqua-500:#1ba8c4;--aqua-300:#7cd2e2;--aqua-100:#d7eff4;--aqua-50:#eff8fb;
  --ink-900:#0c1f2e;--ink-700:#2b4356;--ink-500:#4c6577;--ink-400:#7a8f9e;--ink-300:#a2b3bf;
  --line:#d8e2e9;--line-soft:#eaf0f4;
  --akzent:#e85d4b;--akzent-soft:#fde8e4;
  --rot-dis:#c24530;--rot-dis-bg:#fdecea;
  --gold:#d8a83a;--gold-2:#f4c560;
  --silber:#a0adb5;--silber-2:#c8d2d9;
  --bronze:#bc7a4b;--bronze-2:#dba074;

  --schatten-xs:0 1px 2px rgba(5,33,49,.06);
  --schatten-s:0 2px 4px rgba(5,33,49,.06),0 1px 2px rgba(5,33,49,.04);
  --schatten-m:0 10px 25px -8px rgba(5,33,49,.15),0 4px 10px -2px rgba(5,33,49,.08),0 1px 2px rgba(5,33,49,.04);
  --schatten-l:0 20px 40px -12px rgba(5,33,49,.22),0 8px 16px -4px rgba(5,33,49,.1);
  --schatten-eingepraegt:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -1px 0 rgba(5,33,49,.04);
  --schatten-innen:inset 0 2px 4px rgba(5,33,49,.08);

  --radius-s:8px;--radius-m:14px;--radius-l:22px;
  --font-display:'Bricolage Grotesque',system-ui,serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%}

body{
  font-family:var(--font-body);color:var(--ink-900);
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(27,168,196,.10), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(10,50,80,.08), transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  background-attachment:fixed;line-height:1.55;-webkit-font-smoothing:antialiased;
}
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.4;
  background-image:radial-gradient(circle at 1px 1px, rgba(5,33,49,.04) 1px, transparent 0);
  background-size:24px 24px;
}
.app-header,.app-main,.app-footer{position:relative;z-index:1}

/* HEADER */
.app-header{
  background:
    radial-gradient(ellipse at top left,rgba(27,168,196,.25),transparent 60%),
    radial-gradient(ellipse at bottom right,rgba(232,93,75,.08),transparent 55%),
    linear-gradient(180deg,var(--petrol-900),var(--petrol-800));
  color:#fff;padding:.9rem 1.25rem;position:sticky;top:0;z-index:100;
  box-shadow:var(--schatten-m),inset 0 -1px 0 rgba(255,255,255,.08);
}
.app-header-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center}
.logo{display:flex;align-items:center;gap:.55rem;font-family:var(--font-display);font-weight:800;font-size:1rem;letter-spacing:-.01em;color:#fff;text-decoration:none}
.logo-icon{font-size:1.3rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}

/* STATUS */
.status{max-width:1200px;margin:.8rem auto 0;padding:.7rem 1rem;background:var(--aqua-100);color:var(--petrol-700);border-radius:var(--radius-m);font-size:.92rem;border:1px solid var(--aqua-300);box-shadow:var(--schatten-xs)}
.status.fehler{background:var(--akzent-soft);color:#a03d2d;border-color:#f3bfb6}

/* MAIN */
.app-main{max-width:1200px;margin:0 auto;padding:0 0 3rem}

/* HERO */
.gruppe-hero,.schwimmer-hero{
  position:relative;
  background:
    radial-gradient(ellipse at top right,rgba(27,168,196,.4),transparent 55%),
    radial-gradient(ellipse at bottom left,rgba(232,93,75,.15),transparent 60%),
    linear-gradient(160deg,var(--petrol-900) 0%,var(--petrol-800) 35%,var(--petrol-700) 70%,var(--aqua-600) 120%);
  color:#fff;padding:2.25rem 1.5rem 3rem;margin:0 0 -1.25rem;overflow:hidden;
  box-shadow:inset 0 -40px 60px -40px rgba(0,0,0,.3);
}
.gruppe-hero::before,.schwimmer-hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(135deg, rgba(255,255,255,.06) 0%, transparent 40%, transparent 60%, rgba(0,0,0,.08) 100%);
}
.hero-welle{position:absolute;left:0;right:0;bottom:-1px;height:70px;color:var(--bg);pointer-events:none}
.hero-welle svg{width:100%;height:100%;display:block}
.hero-inhalt{max-width:1100px;margin:0 auto;position:relative;z-index:1}
.verein-tag{
  display:inline-block;margin:0 0 .5rem;padding:.3rem .8rem;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.22);
  border-radius:999px;font-size:.78rem;font-weight:500;letter-spacing:.04em;
  text-transform:uppercase;color:rgba(255,255,255,.95);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 4px 12px rgba(0,0,0,.1);
}
.gruppe-hero h1,.schwimmer-hero h1{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(2rem,7vw,3.2rem);letter-spacing:-.025em;line-height:1;
  margin:.25rem 0 .5rem;color:#fff;
  text-shadow:0 2px 20px rgba(0,0,0,.2),0 1px 2px rgba(0,0,0,.1);
}
.trainer-zeile{margin:.9rem 0 0;font-size:.95rem;color:rgba(255,255,255,.88)}
.trainer-label{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;opacity:.7;margin-right:.5rem}
.trainer-namen{font-weight:500}
.schwimmer-hero .subtitel{color:rgba(255,255,255,.85);margin:.25rem 0 0;font-size:.95rem}
.schwimmer-id-badge{font-family:var(--font-mono);font-size:.65em;font-weight:400;background:rgba(255,255,255,.15);padding:.15rem .5rem;border-radius:4px;vertical-align:middle;margin-left:.3rem;box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.zurueck{
  display:inline-block;margin-bottom:.75rem;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);
  color:#fff;padding:.4rem .85rem;border-radius:999px;font-size:.85rem;
  cursor:pointer;transition:all .18s;font-family:var(--font-body);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 2px 6px rgba(0,0,0,.12);
}
.zurueck:hover{background:rgba(255,255,255,.25);transform:translateY(-1px);box-shadow:0 4px 10px rgba(0,0,0,.15)}

/* ========== GESCHLECHT-SYMBOL ==========
   Das Unicode ♀ / ♂ hat in den meisten Fonts eine sehr tiefe Baseline,
   darum rendern die Symbole immer etwas weiter unten als daneben stehender Text.
   Wir wrappen das Zeichen in ein eigenes inline-flex-Element mit line-height:1
   und justieren mit translateY. Weiblich braucht dabei etwas mehr Korrektur
   als männlich, weil das Kreuz unten weiter nach unten ragt. */
.sym-gender{
  display:inline-flex;align-items:center;justify-content:center;
  line-height:1;
  font-size:1em;
  font-family:system-ui, -apple-system, 'Segoe UI Symbol', sans-serif;
  vertical-align:middle;
}
.sym-gender.sym-weiblich{transform:translateY(-0.08em)}
.sym-gender.sym-maennlich{transform:translateY(-0.02em)}
/* In Filter-Buttons und an anderen Stellen etwas größer */
.fbtn .sym-gender{font-size:1.05em}

/* =================== KENNZAHLEN =================== */
.kennzahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.75rem;max-width:1100px;margin:1.5rem auto 2rem;padding:0 1rem}
.kennzahl{
  background:linear-gradient(180deg, var(--bg-elev) 0%, var(--bg-surface) 100%);
  border:1px solid var(--line);border-radius:var(--radius-m);
  padding:.9rem 1rem;display:flex;flex-direction:column;gap:.1rem;
  box-shadow:var(--schatten-s),var(--schatten-eingepraegt);
  position:relative;overflow:hidden;
  transition:transform .2s,box-shadow .2s;
}
.kennzahl:hover{transform:translateY(-2px);box-shadow:var(--schatten-m),var(--schatten-eingepraegt)}
.kennzahl::before{content:'';position:absolute;top:0;right:0;width:80px;height:80px;background:radial-gradient(circle at top right,var(--aqua-100),transparent 70%);opacity:.6;pointer-events:none}
.kennzahl::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--aqua-300),transparent);opacity:.4}

/* Highlight-Kachel = dunkel mit Glow (Ø WA Gruppe in Gruppen-View, Ø WA in Schwimmer-View) */
.kennzahl-highlight{
  background:radial-gradient(ellipse at top right, rgba(27,168,196,.4), transparent 60%),linear-gradient(160deg,var(--petrol-900),var(--petrol-700));
  border-color:var(--petrol-700);color:#fff;
  box-shadow:var(--schatten-m),inset 0 1px 0 rgba(255,255,255,.1);
}
.kennzahl-highlight::before{background:radial-gradient(circle at top right,rgba(27,168,196,.6),transparent 70%);opacity:1;width:100px;height:100px}
.kennzahl-highlight::after{background:linear-gradient(90deg,transparent,rgba(124,210,226,.6),transparent);opacity:.8}
.kennzahl-highlight:hover{box-shadow:var(--schatten-l),inset 0 1px 0 rgba(255,255,255,.1)}

/* Goldige Medaillen-Kachel */
.kennzahl-medaillen{background:linear-gradient(180deg,#fffaed 0%, #fff5df 100%);border-color:#ecd89a}
.kennzahl-medaillen::before{background:radial-gradient(circle at top right, rgba(216,168,58,.25),transparent 70%);opacity:.9}
.kennzahl-medaillen::after{background:linear-gradient(90deg,transparent,var(--gold-2),transparent);opacity:.6}

.kennzahl-wert{font-family:var(--font-display);font-weight:900;font-size:2rem;letter-spacing:-.03em;line-height:1;color:var(--petrol-900)}
.kennzahl-highlight .kennzahl-wert{color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.2)}
.kennzahl-label{font-size:.72rem;color:var(--ink-500);text-transform:uppercase;letter-spacing:.06em;font-weight:600;margin-top:.3rem;line-height:1.3;display:inline-flex;align-items:center;flex-wrap:wrap;gap:.25rem}
.kennzahl-highlight .kennzahl-label{color:rgba(255,255,255,.85)}
.kennzahl-detail{display:block;font-size:.68rem;font-weight:400;text-transform:none;letter-spacing:0;color:var(--ink-400);margin-top:.1rem;width:100%}
.kennzahl-highlight .kennzahl-detail{color:rgba(255,255,255,.7)}

/* Medaillen-Badges IN der Kachel */
.kennzahl-wert-medaillen{font-size:1rem;line-height:1.2}
/* Trainings-Kachel: Wochentag-Text statt Zahl → kompaktere Schriftgröße */
.kennzahl-training{background:linear-gradient(180deg,#eefaf1 0%, #e4f3e9 100%);border-color:#b7d9c2}
.kennzahl-training::before{background:radial-gradient(circle at top right, rgba(74,170,93,.22),transparent 70%);opacity:.9}
.kennzahl-wert-training{font-size:1.25rem;letter-spacing:-.01em;line-height:1.15}
.med-badges{display:flex;gap:.3rem;flex-wrap:wrap}
.med-badge{
  display:inline-flex;align-items:center;gap:.15rem;
  padding:.25rem .45rem;border-radius:999px;
  font-family:var(--font-mono);font-weight:700;font-size:.78rem;
  box-shadow:var(--schatten-xs),inset 0 1px 0 rgba(255,255,255,.5);
}
.med-badge-gold{background:linear-gradient(180deg,#fff4d1,#f4cf75);color:#6f4a0c;border:1px solid #e4b74e}
.med-badge-silber{background:linear-gradient(180deg,#f6f8fa,#d4dde3);color:#4b5862;border:1px solid #b4c0c8}
.med-badge-bronze{background:linear-gradient(180deg,#f6dfc8,#d99e74);color:#6e3f1e;border:1px solid #c38252}

/* =================== INFO-ICON & POPOVER =================== */
.info-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;margin-left:.25rem;padding:0;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.35);
  border-radius:50%;
  color:inherit;opacity:.85;cursor:pointer;transition:all .15s;
  vertical-align:middle;
  box-shadow:var(--schatten-xs);
  flex-shrink:0;
}
.info-icon:hover,.info-icon:focus{opacity:1;transform:scale(1.1);background:rgba(255,255,255,.3);outline:none}
.info-icon svg{display:block}
/* Helle Kacheln: dunkles Icon */
.kennzahl:not(.kennzahl-highlight) .info-icon{
  background:var(--aqua-50);border-color:var(--aqua-300);color:var(--aqua-600);
}
.kennzahl:not(.kennzahl-highlight) .info-icon:hover{background:var(--aqua-100)}

.info-popover{
  position:absolute;z-index:1000;
  max-width:min(360px, calc(100vw - 16px));
  background:linear-gradient(180deg, #fff, var(--bg-surface));
  border:1px solid var(--line);border-radius:var(--radius-m);
  box-shadow:var(--schatten-l);
  padding:0;animation:popover-in .18s ease-out;
}
@keyframes popover-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.info-popover[hidden]{display:none}
.info-popover-inhalt{padding:1rem 1.1rem .9rem}
.info-popover h4{margin:0 0 .6rem;font-family:var(--font-display);font-weight:800;font-size:1rem;color:var(--petrol-900)}
.info-popover p{margin:.4rem 0;font-size:.88rem;line-height:1.5;color:var(--ink-700)}
.info-popover ul{margin:.4rem 0 .6rem;padding-left:1.2rem}
.info-popover li{font-size:.86rem;line-height:1.5;color:var(--ink-700);margin-bottom:.2rem}
.info-popover code{font-family:var(--font-mono);font-size:.78rem;background:var(--aqua-50);color:var(--aqua-600);padding:.08rem .35rem;border-radius:3px;border:1px solid var(--aqua-100)}
.info-popover-close{
  display:block;margin-left:auto;margin-top:.5rem;padding:.3rem .9rem;border-radius:999px;
  background:linear-gradient(180deg,var(--petrol-700),var(--petrol-800));
  color:#fff;border:none;font-family:var(--font-body);font-size:.82rem;font-weight:600;cursor:pointer;
  box-shadow:var(--schatten-s),inset 0 1px 0 rgba(255,255,255,.1);
}
.info-popover-close:hover{transform:translateY(-1px)}

/* H2 */
h2{font-family:var(--font-display);font-weight:800;font-size:1.35rem;letter-spacing:-.015em;color:var(--petrol-900);margin:2rem 0 1rem;display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
h2 .h2-num{font-size:.7rem;font-weight:600;font-family:var(--font-mono);color:var(--aqua-600);letter-spacing:.05em;background:linear-gradient(180deg,var(--aqua-50),#e1f2f6);border:1px solid var(--aqua-300);border-radius:6px;padding:.2rem .45rem;position:relative;top:-.15em;box-shadow:var(--schatten-eingepraegt)}
h3{font-family:var(--font-display);font-weight:700;font-size:1rem;margin:0 0 .9rem;color:var(--ink-900)}
h3 small{font-weight:400;color:var(--ink-500);font-size:.8rem;margin-left:.3rem}

/* MEDAILLEN klein */
.med{font-size:.95rem;margin-right:.2rem;white-space:nowrap}
.med-zeile{display:flex;gap:.15rem;margin-top:.2rem;flex-wrap:wrap}
.med-none{color:var(--ink-300);font-size:.8rem}
.med-inline{font-size:1rem}

/* =================== RANKING =================== */
.gruppenranking{max-width:1100px;margin:0 auto 2rem}

/* Ranking-Kopf */
.ranking-kopf{display:flex;justify-content:space-between;align-items:center;gap:.75rem;flex-wrap:wrap;margin:2rem 0 1rem}
.ranking-kopf h2.ranking-titel{margin:0}

.ranking-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.ranking-eintrag{
  display:grid;grid-template-columns:2.6rem 1fr auto;
  gap:.9rem;align-items:center;padding:.9rem 1.1rem;
  background:linear-gradient(180deg, var(--bg-elev) 0%, var(--bg-surface) 100%);
  border-radius:var(--radius-m);
  box-shadow:var(--schatten-s),var(--schatten-eingepraegt);
  border:1px solid var(--line);border-left:4px solid transparent;
  cursor:pointer;
  transition:transform .18s cubic-bezier(.3,.8,.4,1),box-shadow .18s,border-color .18s;
  position:relative;overflow:hidden;
}
.ranking-eintrag::before{content:'';position:absolute;left:0;top:0;bottom:0;width:60px;background:radial-gradient(circle at left, rgba(27,168,196,.08), transparent 70%);pointer-events:none}
.ranking-eintrag:hover{transform:translateX(4px) translateY(-1px);box-shadow:var(--schatten-m);border-color:var(--aqua-300);border-left-color:var(--aqua-500)}
.ranking-eintrag[data-platz="1"]{border-left-color:var(--gold)}
.ranking-eintrag[data-platz="1"]::before{background:radial-gradient(circle at left, rgba(216,168,58,.15),transparent 70%)}
.ranking-eintrag[data-platz="2"]{border-left-color:var(--silber)}
.ranking-eintrag[data-platz="2"]::before{background:radial-gradient(circle at left, rgba(160,173,181,.14),transparent 70%)}
.ranking-eintrag[data-platz="3"]{border-left-color:var(--bronze)}
.ranking-eintrag[data-platz="3"]::before{background:radial-gradient(circle at left, rgba(188,122,75,.14),transparent 70%)}

.platz{font-family:var(--font-display);font-size:1.5rem;font-weight:900;color:var(--ink-300);text-align:center;position:relative;z-index:1}
.ranking-eintrag[data-platz="1"] .platz{color:var(--gold);text-shadow:0 2px 8px rgba(216,168,58,.3)}
.ranking-eintrag[data-platz="2"] .platz{color:var(--silber);text-shadow:0 2px 6px rgba(160,173,181,.3)}
.ranking-eintrag[data-platz="3"] .platz{color:var(--bronze);text-shadow:0 2px 6px rgba(188,122,75,.3)}

/* Alphabetische Übersicht (Schwimmerübersicht): ohne Platz-Spalte und
   ohne Gold/Silber/Bronze-Farbakzente - neutral und weniger kompetitiv. */
.ranking-liste-alpha .ranking-eintrag{
  grid-template-columns:1fr auto;
}
.ranking-liste-alpha .ranking-eintrag,
.ranking-liste-alpha .ranking-eintrag[data-platz="1"],
.ranking-liste-alpha .ranking-eintrag[data-platz="2"],
.ranking-liste-alpha .ranking-eintrag[data-platz="3"]{
  border-left-color:transparent;
}
.ranking-liste-alpha .ranking-eintrag:hover{
  border-left-color:var(--aqua-500);
}

.schwimmer-info{min-width:0;display:flex;flex-direction:column;position:relative;z-index:1}
.schwimmer-name{font-weight:600;color:var(--ink-900);font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.schwimmer-meta{font-size:.78rem;color:var(--ink-500);margin-top:.1rem;display:inline-flex;align-items:center;gap:.3rem;flex-wrap:wrap}

.punkte-grid{display:grid;grid-template-columns:repeat(3,auto);gap:.5rem;position:relative;z-index:1}
.punkte-kachel{
  background:linear-gradient(180deg, var(--bg-surface), var(--bg-surface-2));
  border:1px solid var(--line-soft);border-radius:var(--radius-s);
  padding:.45rem .7rem;display:flex;flex-direction:column;align-items:center;min-width:3rem;
  box-shadow:var(--schatten-xs),inset 0 1px 0 rgba(255,255,255,.7);
}
.punkte-primaer{
  background:linear-gradient(180deg,var(--petrol-700),var(--petrol-800));
  border-color:var(--petrol-800);
  box-shadow:var(--schatten-s),inset 0 1px 0 rgba(255,255,255,.1);
}
.punkte-primaer .punkte-wert{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.2)}
.punkte-primaer .punkte-label{color:rgba(255,255,255,.8)}
.punkte-wert{font-family:var(--font-mono);font-weight:700;font-size:1rem;color:var(--petrol-900);line-height:1}
.punkte-wert small{font-family:var(--font-body);font-size:.65rem;font-weight:400;color:var(--ink-400)}
.punkte-primaer .punkte-wert small{color:rgba(255,255,255,.65)}
.punkte-label{font-size:.62rem;color:var(--ink-400);text-transform:uppercase;letter-spacing:.05em;margin-top:.2rem;text-align:center;font-weight:600}
.beste-lage .punkte-wert{font-size:.9rem}

/* FILTER BAR */
.filter-bar{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;margin-bottom:.9rem}
.filter-group{display:flex;gap:.25rem;flex-wrap:wrap;background:var(--bg-elev);border:1px solid var(--line);border-radius:999px;padding:.15rem;box-shadow:var(--schatten-xs),var(--schatten-innen)}
.fbtn{
  background:transparent;color:var(--ink-500);border:none;
  padding:.35rem .8rem;border-radius:999px;font-size:.82rem;
  cursor:pointer;font-family:var(--font-body);transition:all .15s;font-weight:500;
  display:inline-flex;align-items:center;justify-content:center;gap:.2rem;
}
.fbtn:hover{color:var(--aqua-600)}
.fbtn.aktiv{background:linear-gradient(180deg,var(--petrol-700),var(--petrol-800));color:#fff;box-shadow:var(--schatten-s),inset 0 1px 0 rgba(255,255,255,.1)}

/* SWITCH */
.switch-label{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--ink-700);cursor:pointer;user-select:none;padding:.3rem .5rem;background:var(--bg-elev);border:1px solid var(--line);border-radius:999px;box-shadow:var(--schatten-xs)}
.switch-cb{display:none}
.switch-slider{width:36px;height:20px;background:var(--line);border-radius:10px;position:relative;transition:background .2s;flex-shrink:0;box-shadow:var(--schatten-innen)}
.switch-slider::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;background:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.switch-cb:checked+.switch-slider{background:linear-gradient(180deg,var(--aqua-500),var(--aqua-600))}
.switch-cb:checked+.switch-slider::after{transform:translateX(16px)}

/* ==================== MATRIX — KRITISCHER STICKY-FIX ==================== */
.matrix-section{max-width:1100px;margin:0 auto 2rem}
.matrix-legende{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:.8rem;font-size:.8rem;color:var(--ink-500)}
.legend-item{display:inline-flex;align-items:center;gap:.4rem}
.legend-box{display:inline-block;width:14px;height:14px;border-radius:3px;border:1px solid var(--line)}
.zeit-box{background:var(--aqua-100)}
.noch-nicht-box{background:var(--bg-surface);border-style:dashed}
.gesperrt-box{background:repeating-linear-gradient(45deg,var(--line-soft),var(--line-soft) 3px,transparent 3px,transparent 6px)}

.matrix-scroll{
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  background:var(--bg-elev);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  box-shadow:var(--schatten-m);
  max-height:min(75vh,640px);
  overscroll-behavior:contain;
  isolation:isolate;
  position:relative;
}

.matrix-tabelle{border-collapse:separate;border-spacing:0;width:100%;font-size:.82rem}

/* Thead */
.matrix-tabelle thead th{
  background:linear-gradient(180deg,var(--petrol-700),var(--petrol-800));
  color:#fff;font-weight:600;font-size:.72rem;
  padding:.6rem .4rem;
  position:sticky;top:0;z-index:3;
  border-bottom:1px solid var(--petrol-600);
  white-space:nowrap;line-height:1.2;
  box-shadow:0 2px 4px -2px rgba(0,0,0,.15);
  background-clip:padding-box;
}
.matrix-tabelle thead th.sprint-spalte{
  background:linear-gradient(180deg,var(--petrol-600),var(--petrol-700));
  font-style:italic;background-clip:padding-box;
}

/* Sticky erste Spalte: padding:0 auf der <td>, inneres Div übernimmt alles */
.matrix-tabelle .sticky-col{
  position:sticky;
  left:0;
  min-width:8rem;max-width:11rem;
  text-align:left;
  padding:0;
}
.matrix-tabelle thead th.sticky-corner{z-index:4}

/* Tbody sticky-col mit !important gegen Zebra-Overwrite */
.matrix-tabelle tbody td.sticky-col{
  position:sticky !important;
  left:0 !important;
  z-index:2;
  background:var(--bg-elev) !important;
  color:var(--ink-900);
  cursor:pointer;
  background-clip:padding-box;
  box-shadow:6px 0 8px -4px rgba(5,33,49,.12);
}

/* Inner-Container: hier findet Layout statt */
.sticky-inner{
  padding:.5rem .85rem;
  display:block;
}
.matrix-tabelle thead th.sticky-corner .sticky-inner{
  padding:.6rem .85rem;color:#fff;
}
.schwimmer-zelle{
  display:grid;
  grid-template-columns:1fr auto;
  gap:.4rem;align-items:baseline;min-width:0;
}
.schwimmer-zelle .zeilen-platz{font-family:var(--font-display);font-weight:700;font-size:1rem;color:var(--ink-400)}
tr[data-platz="1"] .zeilen-platz{color:var(--gold)}
tr[data-platz="2"] .zeilen-platz{color:var(--silber)}
tr[data-platz="3"] .zeilen-platz{color:var(--bronze)}
.zeilen-name{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.zeilen-jg{font-family:var(--font-mono);font-size:.72rem;color:var(--ink-400)}

/* Zebra-Streifen */
.matrix-tabelle tbody tr:nth-child(even) td:not(.sticky-col){background:var(--bg-surface)}
.matrix-tabelle tbody tr:nth-child(even) td.sticky-col{background:var(--bg-surface) !important}
.matrix-tabelle tbody td.sticky-col:hover{background:var(--aqua-50) !important}

.spalte-distanz{display:block;font-family:var(--font-mono);font-weight:700;font-size:.78rem}
.spalte-lage{display:block;font-size:.65rem;opacity:.8;font-weight:400}

.matrix-tabelle td{
  padding:.5rem .55rem;text-align:center;
  border-bottom:1px solid var(--line-soft);
  background:var(--bg-elev);vertical-align:middle;
}
.matrix-tabelle .zeit{font-family:var(--font-mono);font-weight:500;color:var(--petrol-900);font-size:.82rem;line-height:1.1;display:block}
.matrix-tabelle .wa-punkte{display:block;font-family:var(--font-mono);font-size:.68rem;color:var(--aqua-600);font-weight:700;margin-top:.1rem}
.zelle-zeit{cursor:pointer}
.zelle-zeit:hover{background:var(--aqua-50) !important}
.zelle-sprint{background:repeating-linear-gradient(90deg,var(--bg-surface),var(--bg-surface) 6px,var(--line-soft) 6px,var(--line-soft) 7px) !important}
.zelle-sprint .zeit{color:var(--ink-500);font-style:italic}
.zelle-offen{color:var(--ink-400)}
.offen-text{display:inline-block;font-size:.62rem;line-height:1.15;color:var(--ink-400);font-style:italic;letter-spacing:.02em;padding:.1rem .2rem}
.zelle-gesperrt{background:repeating-linear-gradient(45deg,var(--line-soft),var(--line-soft) 4px,transparent 4px,transparent 8px) !important;color:var(--ink-300)}
.gesperrt-icon{color:var(--ink-300);font-size:.85rem}

/* ==================== BESTZEITEN-TABELLE (Schwimmer-Detail) ==================== */
.bestzeiten-bar{margin-bottom:.7rem}
.bestzeiten-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.bestzeiten-tabelle,.historie-tabelle,.wk-karte-tabelle{
  width:100%;border-collapse:collapse;
  background:var(--bg-elev);border:1px solid var(--line);
  border-radius:var(--radius-m);overflow:hidden;
  box-shadow:var(--schatten-s);font-size:.9rem;
}
.bestzeiten-tabelle th,.historie-tabelle th,.wk-karte-tabelle th{
  background:linear-gradient(180deg,var(--petrol-700),var(--petrol-800));
  color:#fff;text-align:left;padding:.65rem .85rem;
  font-weight:600;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;
  box-shadow:0 2px 4px -2px rgba(0,0,0,.15);
}
.bestzeiten-tabelle th.r,.historie-tabelle th.r,.wk-karte-tabelle th.r{text-align:right}
.bestzeiten-tabelle td,.historie-tabelle td,.wk-karte-tabelle td{padding:.55rem .85rem;border-bottom:1px solid var(--line-soft)}
.bestzeiten-tabelle tbody tr:nth-child(even),.historie-tabelle tbody tr:nth-child(even),.wk-karte-tabelle tbody tr:nth-child(even){background:var(--bg-surface)}
.bestzeiten-tabelle tbody tr:last-child td,.historie-tabelle tbody tr:last-child td,.wk-karte-tabelle tbody tr:last-child td{border-bottom:none}
.r{text-align:right}
.bestzeiten-tabelle tr.sprint-zeile{color:var(--ink-500)}

/* "noch abzulegen": LINKSBÜNDIG unter die Zeit-Spalte, nicht rechtsbündig.
   Die <td class="leer" colspan="3"> hat KEINE class "r" mehr.
   Wir erzwingen hier text-align:left und setzen ein padding-left,
   damit der Text an der gleichen horizontalen Position beginnt wie
   die Zeiten in den normalen Zeilen. */
.bestzeiten-tabelle tr.zeile-offen td.leer{
  color:var(--ink-400);
  font-style:italic;
  font-size:.82rem;
  text-align:left !important;
  padding-left:.85rem;
  font-family:var(--font-body);
  font-weight:400;
}

.bestzeiten-tabelle .zeit,.historie-tabelle .zeit,.wk-karte-tabelle .zeit{font-family:var(--font-mono);font-weight:700;color:var(--aqua-600)}
.kein-wa{color:var(--ink-300)}
.strecke-zelle{font-weight:500;white-space:nowrap}

.veranstaltung-zelle{min-width:0}
.v-datum{display:block;font-family:var(--font-mono);font-size:.82rem;font-weight:600;color:var(--petrol-900);line-height:1.15;white-space:nowrap}
.v-ort{display:block;font-size:.7rem;color:var(--ink-500);margin-top:.1rem;line-height:1.2;overflow:hidden;text-overflow:ellipsis}

/* =================== DIS-Zeile in Historie =================== */
.wk-karte-tabelle tr.dis-zeile,
.historie-tabelle tr.dis-zeile{
  background:var(--rot-dis-bg) !important;
  color:var(--rot-dis);
}
.wk-karte-tabelle tr.dis-zeile td,
.historie-tabelle tr.dis-zeile td{
  border-bottom-color:#f3b8ad;
}
.dis-badge{
  display:inline-block;
  padding:.12rem .45rem;border-radius:4px;
  background:var(--rot-dis);color:#fff;
  font-family:var(--font-mono);font-weight:700;font-size:.72rem;letter-spacing:.04em;
  box-shadow:var(--schatten-xs);
}
.dis-text{font-style:italic;color:var(--rot-dis);font-size:.82rem}

/* WETTKAMPF-KARTEN */
.wk-karte{background:linear-gradient(180deg, var(--bg-elev), var(--bg-surface));border:1px solid var(--line);border-radius:var(--radius-m);overflow:hidden;margin-bottom:.8rem;box-shadow:var(--schatten-s),var(--schatten-eingepraegt);transition:box-shadow .2s}
.wk-karte:hover{box-shadow:var(--schatten-m)}
.wk-karte-kopf{display:flex;gap:1rem;align-items:baseline;padding:.75rem 1rem;background:linear-gradient(180deg, #f1f6fa, var(--bg-surface));border-bottom:1px solid var(--line-soft);flex-wrap:wrap}
.wk-karte-datum{font-family:var(--font-mono);font-weight:700;font-size:.95rem;color:var(--petrol-900)}
.wk-karte-ort{color:var(--ink-700);font-size:.9rem}
.wk-karte-count{margin-left:auto;font-size:.78rem;color:var(--ink-500);font-weight:600;background:var(--bg-elev);padding:.2rem .55rem;border-radius:999px;border:1px solid var(--line)}
.wk-karte-tabelle{border:none;border-radius:0;box-shadow:none;font-size:.88rem}
.wk-karte-tabelle th{font-size:.7rem}

/* WETTKAMPFTAGE */
.wk-tage-section{max-width:1100px;margin:0 auto 2rem}
.wk-jahres-karte{margin-bottom:1.5rem}
.wk-jahr{font-family:var(--font-display);font-weight:900;font-size:1.8rem;color:var(--petrol-800);margin:0 0 .8rem;letter-spacing:-.02em;display:flex;align-items:center;gap:.6rem}
.wk-jahr::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent);margin-left:.3rem}
.wk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:.7rem}
.wk-item{
  background:linear-gradient(180deg, var(--bg-elev), var(--bg-surface));
  border:1px solid var(--line);border-radius:var(--radius-m);
  padding:.75rem .9rem;
  display:grid;grid-template-columns:1fr auto;gap:.6rem;
  align-items:center;
  box-shadow:var(--schatten-s),var(--schatten-eingepraegt);
  transition:transform .18s,box-shadow .18s;
  position:relative;overflow:hidden;
}
.wk-item::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--aqua-300),transparent);opacity:.5}
.wk-item:hover{transform:translateY(-2px);box-shadow:var(--schatten-m)}

/* Expandierbares wk-item: klickbar, mit Pfeil und Teilnehmer-Drawer */
.wk-item-expandable{
  display:block;                 /* Layout kommt aus .wk-item-kopf */
  padding:0;                     /* Padding wandert in den Kopf    */
  cursor:pointer;
}
.wk-item-expandable .wk-item-kopf{
  display:grid;grid-template-columns:1fr auto;gap:.6rem;align-items:center;
  padding:.75rem .9rem;
}
.wk-item-expandable .wk-item-rechts{gap:.5rem}
.wk-expand-pfeil{
  display:inline-block;color:var(--ink-400);font-size:.85rem;
  transition:transform .2s cubic-bezier(.3,.8,.4,1);
  margin-left:.25rem;
}
.wk-item-offen .wk-expand-pfeil{transform:rotate(180deg);color:var(--petrol-800)}
.wk-item-offen{box-shadow:var(--schatten-m);border-color:var(--aqua-300)}

.wk-teilnehmer{
  border-top:1px solid var(--line-soft);
  background:linear-gradient(180deg,var(--bg-surface),var(--bg-2));
  padding:.55rem .6rem .65rem;
}
.wk-teilnehmer-liste{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:.15rem;
}
.wk-teilnehmer-item{
  display:grid;grid-template-columns:1fr auto auto;gap:.6rem;align-items:center;
  padding:.38rem .55rem;border-radius:var(--radius-s);
  cursor:pointer;
  transition:background-color .15s;
}
.wk-teilnehmer-item:hover{background:var(--aqua-100)}
.wk-teilnehmer-name{
  font-size:.85rem;color:var(--ink-900);font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.wk-teilnehmer-starts{
  font-family:var(--font-mono);font-size:.72rem;color:var(--ink-500);
  white-space:nowrap;
}
.wk-teilnehmer-meds{
  display:inline-flex;gap:.2rem;align-items:center;min-width:1rem;
}
.wk-tm{
  display:inline-flex;align-items:center;font-size:.8rem;
  font-family:var(--font-mono);font-weight:700;line-height:1;
}
.wk-tm-gold{color:#8a6b1a}
.wk-tm-silber{color:#5d6b74}
.wk-tm-bronze{color:#7a4a24}
.wk-teilnehmer-leer{
  color:var(--ink-500);font-style:italic;font-size:.82rem;
  padding:.4rem .55rem;margin:0;
}
.wk-item-links{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.wk-item-rechts{display:flex;align-items:center}
.wk-datum{font-family:var(--font-mono);font-weight:700;font-size:.92rem;color:var(--petrol-900)}
.wk-ort{color:var(--ink-700);font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wk-stats{display:flex;gap:.7rem;margin-top:.2rem;flex-wrap:wrap}
.wk-stat{font-size:.75rem;color:var(--ink-500)}
.wk-stat strong{color:var(--petrol-800);font-weight:700;font-family:var(--font-mono)}

.wk-medaillen{display:flex;flex-direction:column;gap:.2rem;align-items:stretch}
.wk-medaillen-leer{color:var(--ink-300);font-size:.85rem;flex-direction:row;justify-content:center;align-items:center;min-width:2rem}
.wk-med{display:inline-flex;align-items:center;justify-content:center;gap:.1rem;font-family:var(--font-mono);font-size:.72rem;font-weight:700;padding:.15rem .4rem;border-radius:999px;box-shadow:var(--schatten-xs),inset 0 1px 0 rgba(255,255,255,.5);min-width:2.3rem}
.wk-med-gold{background:linear-gradient(180deg,#fff4d1,#f4cf75);color:#6f4a0c;border:1px solid #e4b74e}
.wk-med-silber{background:linear-gradient(180deg,#f6f8fa,#d4dde3);color:#4b5862;border:1px solid #b4c0c8}
.wk-med-bronze{background:linear-gradient(180deg,#f6dfc8,#d99e74);color:#6e3f1e;border:1px solid #c38252}

/* DIAGRAMME */
.diagramm-karte{background:linear-gradient(180deg, var(--bg-elev), var(--bg-surface));border:1px solid var(--line);border-radius:var(--radius-m);padding:1.1rem 1.2rem;margin-bottom:1rem;box-shadow:var(--schatten-m),var(--schatten-eingepraegt)}
.diagramm{width:100%;height:auto;display:block}
.diagramm .raster-linie{stroke:var(--line);stroke-width:1;stroke-dasharray:2 3}
.diagramm .achs-label{font-family:var(--font-body);font-size:11px;fill:var(--ink-500)}
.diagramm .legend-label{font-family:var(--font-body);font-size:12px;font-weight:500;fill:var(--ink-700)}
.diagramm .datenpunkt{cursor:pointer}
.diagramm .datenpunkt:hover circle:last-child{r:6}
.hinweis{color:var(--ink-500);font-style:italic;padding:1.2rem;text-align:center;background:var(--bg-surface);border-radius:var(--radius-s);border:1px dashed var(--line)}
.hinweis-inline{color:var(--ink-500);font-style:italic;font-size:.85rem;padding:.5rem .7rem}

/* TABS */
.tabs{display:flex;gap:.35rem;margin-bottom:.6rem;flex-wrap:wrap}
.tab{background:var(--bg-elev);color:var(--ink-500);border:1px solid var(--line);padding:.4rem .9rem;border-radius:999px;font-size:.85rem;cursor:pointer;transition:all .15s;font-family:var(--font-body);font-weight:500;box-shadow:var(--schatten-xs)}
.tab:hover{color:var(--aqua-600);border-color:var(--aqua-500);background:var(--aqua-50)}
.tab.aktiv{background:linear-gradient(180deg,var(--petrol-700),var(--petrol-800));color:#fff;border-color:var(--petrol-800);box-shadow:var(--schatten-s),inset 0 1px 0 rgba(255,255,255,.1)}
.tabs-distanz{margin-bottom:1rem;padding-left:.2rem}
.tab-mini{font-size:.78rem;padding:.25rem .7rem;background:var(--bg-surface)}
.tab-mini.aktiv{background:linear-gradient(180deg,var(--aqua-500),var(--aqua-600));border-color:var(--aqua-600)}

/* FOOTER */
.app-footer{text-align:center;padding:2rem 1rem;color:var(--ink-400);font-size:.82rem;border-top:1px solid var(--line);margin-top:2rem;background:var(--bg-elev)}
.app-footer p{margin:0}
.app-footer-rechtliches{margin-top:.5rem!important;display:flex;justify-content:center;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:.78rem}
.app-footer-rechtliches a{color:var(--aqua-600);text-decoration:none;border-bottom:1px dotted var(--aqua-300);padding-bottom:1px}
.app-footer-rechtliches a:hover{color:var(--petrol-700);border-bottom-style:solid}
.app-footer-sep{color:var(--ink-300)}
.app-footer-tag{font-style:italic;color:var(--ink-400)}

/* ==================== RECHTLICHES ==================== */
.rechtliches{
  max-width:760px;margin:1rem auto 2rem;padding:1.5rem 1.25rem 2rem;
  background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--radius-m);
  box-shadow:var(--schatten-xs);
  /* auf Mobile sorgt das margin-inline dafür, dass die Karte nicht am Viewport-Rand klebt */
  margin-inline:.75rem;
}
.rechtliches .zurueck{
  display:inline-flex;align-items:center;gap:.35rem;
  background:var(--aqua-50);color:var(--petrol-700);
  border:1px solid var(--aqua-300);border-radius:var(--radius-s);
  padding:.5rem .9rem;font-family:var(--font-body);font-size:.88rem;font-weight:500;
  cursor:pointer;transition:background .15s,transform .15s;
  margin-bottom:1.5rem;
}
.rechtliches .zurueck:hover{background:var(--aqua-100);transform:translateX(-2px)}
.rechtliches h1{
  font-family:var(--font-display);font-weight:900;font-size:1.8rem;letter-spacing:-.02em;
  color:var(--petrol-900);margin:0 0 1rem;
}
.rechtliches h2{
  font-family:var(--font-display);font-weight:800;font-size:1.2rem;letter-spacing:-.015em;
  color:var(--petrol-900);margin:2rem 0 .8rem;padding-bottom:.4rem;
  border-bottom:2px solid var(--aqua-300);display:block;
}
.rechtliches h3{
  font-family:var(--font-display);font-weight:700;font-size:1rem;
  color:var(--ink-900);margin:1.3rem 0 .5rem;
}
.rechtliches p{margin:0 0 .8rem;line-height:1.6;color:var(--ink-700)}
.rechtliches strong{color:var(--ink-900);font-weight:600}
.rechtliches a{color:var(--aqua-600);text-decoration:none;border-bottom:1px dotted var(--aqua-300)}
.rechtliches a:hover{color:var(--petrol-700);border-bottom-style:solid}
.rechtliches code{
  font-family:var(--font-mono);font-size:.82rem;
  background:var(--aqua-50);color:var(--petrol-700);
  padding:.08rem .35rem;border-radius:3px;border:1px solid var(--aqua-100);
}
.rechtliches-hinweis{
  background:#fff8e1;border:1px solid #f2d479;border-radius:var(--radius-m);
  padding:.9rem 1.1rem;margin:0 0 1.5rem!important;
  color:#7a5a1c;line-height:1.55;font-size:.9rem;
}
.rechtliches-hinweis strong{color:#5a4213}
.rechtliches-klein{font-size:.82rem;color:var(--ink-500);line-height:1.55}

/* ==================== RESPONSIVE ==================== */
@media(min-width:760px){
  h2{font-size:1.5rem}
  .gruppe-hero,.schwimmer-hero{padding:2.75rem 2rem 3.5rem}
  .ranking-eintrag{padding:1rem 1.25rem}
  .matrix-tabelle{font-size:.88rem}
  .rechtliches{padding:2rem 2.25rem 2.5rem;margin-inline:auto}
}
@media(min-width:1024px){
  .matrix-tabelle .sticky-col{min-width:10rem}
}

@media(max-width:720px){
  .kennzahlen{grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:.5rem;padding:0 .75rem;margin:1rem auto 1.5rem}
  .kennzahl{padding:.6rem .7rem;border-radius:var(--radius-s)}
  .kennzahl-wert{font-size:1.35rem}
  .kennzahl-wert-medaillen{font-size:.88rem}
  .kennzahl-wert-training{font-size:1rem}
  .kennzahl-label{font-size:.62rem;letter-spacing:.04em;margin-top:.2rem;line-height:1.25}
  .kennzahl-detail{font-size:.6rem}
  .kennzahl::before{width:50px;height:50px}
  .med-badge{padding:.18rem .35rem;font-size:.7rem}

  .ranking-kopf{gap:.5rem;margin:1.5rem 0 .9rem}
  .ranking-eintrag{grid-template-columns:2rem 1fr auto;gap:.55rem;padding:.75rem .85rem}
  .platz{font-size:1.2rem}
  .schwimmer-name{font-size:.92rem}
  .schwimmer-meta{font-size:.72rem}
  .punkte-grid{gap:.3rem}
  .punkte-kachel{padding:.35rem .45rem;min-width:2.4rem;border-radius:6px}
  .punkte-wert{font-size:.85rem}
  .beste-lage .punkte-wert{font-size:.72rem}
  .beste-lage .punkte-wert small{font-size:.55rem;display:block;margin-top:.1rem}
  .punkte-label{font-size:.55rem;letter-spacing:.03em;margin-top:.15rem}

  .bestzeiten-tabelle{font-size:.82rem}
  .bestzeiten-tabelle th,.bestzeiten-tabelle td{padding:.5rem .55rem}
  .strecke-zelle{font-size:.8rem}
  .v-datum{font-size:.76rem}
  .v-ort{font-size:.66rem}

  .wk-medaillen{flex-direction:row;gap:.2rem}
  .wk-med{font-size:.68rem;padding:.1rem .35rem;min-width:1.8rem}
}

@media(max-width:420px){
  .kennzahlen{grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem;padding:0 .6rem}
  .kennzahl{padding:.5rem .55rem}
  .kennzahl-wert{font-size:1.2rem}
  .kennzahl-label{font-size:.58rem}
  .kennzahl-wert-medaillen{font-size:.75rem}
  .med-badge{padding:.15rem .3rem;font-size:.62rem;gap:.08rem}

  .ranking-eintrag{grid-template-columns:1.7rem 1fr auto;gap:.4rem;padding:.6rem .65rem}
  .platz{font-size:1.1rem}
  .schwimmer-name{font-size:.88rem}
  .schwimmer-info .med-zeile{gap:.1rem}
  .med{font-size:.8rem}
  .punkte-grid{gap:.25rem}
  .punkte-kachel{padding:.28rem .38rem;min-width:2.1rem}
  .punkte-wert{font-size:.78rem}
  .beste-lage{max-width:5rem}
  .beste-lage .punkte-wert{font-size:.68rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:block}
  .beste-lage .punkte-wert small{font-size:.5rem;opacity:.75}

  .matrix-tabelle .sticky-col{min-width:7.5rem;max-width:9.5rem}
  .sticky-inner{padding:.4rem .55rem}
  .matrix-tabelle thead th.sticky-corner .sticky-inner{padding:.5rem .55rem}
  .schwimmer-zelle{grid-template-columns:1fr auto;gap:.25rem}
  .schwimmer-zelle .zeilen-platz{font-size:.9rem}
  .zeilen-name{font-size:.78rem}
  .zeilen-jg{font-size:.65rem;display:none}

  .matrix-tabelle{font-size:.76rem}
  .matrix-tabelle td{padding:.4rem .35rem}
  .matrix-tabelle thead th{padding:.5rem .3rem}
  .matrix-tabelle .zeit{font-size:.76rem}
  .matrix-tabelle .wa-punkte{font-size:.62rem}
  .offen-text{font-size:.58rem}

  .bestzeiten-tabelle{font-size:.78rem}
  .bestzeiten-tabelle th,.bestzeiten-tabelle td{padding:.42rem .45rem}
  .bestzeiten-tabelle th{font-size:.62rem}
  .strecke-zelle{font-size:.76rem;line-height:1.2}
  .v-datum{font-size:.72rem}
  .v-ort{font-size:.62rem}

  .wk-grid{grid-template-columns:1fr}
  .diagramm-karte{padding:.85rem .7rem}
}

@media(max-width:560px){
  .gruppe-hero,.schwimmer-hero{padding:1.75rem 1.1rem 2.5rem}
  .gruppe-hero h1,.schwimmer-hero h1{font-size:clamp(1.6rem,6.5vw,2.2rem)}
  .trainer-zeile{font-size:.85rem}
}

/* ===== USER/ADMIN-MODUS ===== */
.modus-toggle{
  margin-left:auto;flex-shrink:0;
  font-family:var(--font-mono);font-size:.72rem;font-weight:600;letter-spacing:.04em;
  color:rgba(255,255,255,.75);background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.22);border-radius:999px;
  padding:.28rem .8rem;cursor:pointer;transition:background .15s,color .15s,border-color .15s;
}
.modus-toggle:hover{background:rgba(255,255,255,.16);color:#fff}
.modus-toggle.modus-admin{
  color:#fff;background:var(--akzent);border-color:var(--akzent);
  box-shadow:0 0 0 3px rgba(232,93,75,.25);
}
.privat-marker{font-size:.75em;opacity:.75;margin-left:.15em}

.modus-dialog{
  border:none;border-radius:var(--radius-m);box-shadow:var(--schatten-l);
  padding:1.5rem 1.6rem;max-width:20rem;width:calc(100vw - 2.5rem);
  background:var(--bg-elev);color:var(--ink-900);
}
.modus-dialog::backdrop{background:rgba(5,33,49,.55);backdrop-filter:blur(2px)}
.modus-dialog h2{font-family:var(--font-display);font-size:1.15rem;margin:0 0 .35rem}
.modus-dialog p{font-size:.85rem;color:var(--ink-500);margin:0 0 .9rem}
.modus-dialog input[type=password]{
  width:100%;font-family:var(--font-mono);font-size:.95rem;
  padding:.55rem .7rem;border:1px solid var(--line);border-radius:var(--radius-s);
  background:var(--bg-surface);color:var(--ink-900);
}
.modus-dialog input[type=password]:focus{outline:2px solid var(--aqua-500);border-color:var(--aqua-500)}
.modus-fehler{color:var(--rot-dis);font-size:.8rem;margin:.5rem 0 0}
.modus-fehler[hidden]{display:none}
.modus-dialog-buttons{display:flex;gap:.6rem;justify-content:flex-end;margin-top:1.1rem}
.modus-dialog-buttons button{
  font-family:var(--font-body);font-size:.85rem;font-weight:600;
  padding:.45rem 1rem;border-radius:var(--radius-s);cursor:pointer;
  border:1px solid var(--line);background:var(--bg-surface);color:var(--ink-700);
}
.modus-dialog-buttons .modus-primaer{
  background:var(--petrol-700);border-color:var(--petrol-700);color:#fff;
}
.modus-dialog-buttons .modus-primaer:hover{background:var(--petrol-600)}

/* ===== TIEFE & BEWEGUNG (3D-Feinschliff) ===== */
/* Wasseroberfläche: die zwei Wellen-Ebenen im Hero atmen unterschiedlich
   schnell und gegenphasig — vordere Ebene stärker als hintere ergibt einen
   Parallaxe-/Tiefeneffekt. Unterkante bleibt via transform-origin bottom
   festgepinnt, damit nie ein Spalt zum Seitenhintergrund entsteht. */
.hero-welle svg path{transform-box:fill-box;transform-origin:50% 100%}
@media (prefers-reduced-motion: no-preference){
  .hero-welle svg path:first-child{animation:welle-hinten 9s ease-in-out infinite}
  .hero-welle svg path:last-child{animation:welle-vorn 6s ease-in-out infinite}
  .logo-icon{display:inline-block;animation:schwimmer-bob 3.5s ease-in-out infinite}
}
@keyframes welle-hinten{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.12)}}
@keyframes welle-vorn{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.88)}}
@keyframes schwimmer-bob{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-2px) rotate(-6deg)}
}

/* Fühlbares Druck-Feedback: klickbare Flächen geben beim Antippen minimal
   nach (Gegenstück zum Hover-Lift) — wirkt auf Touch-Geräten wie eine Taste. */
.kennzahl:active{transform:translateY(1px) scale(.995);box-shadow:var(--schatten-xs),var(--schatten-innen)}
.ranking-eintrag:active{transform:translateX(4px) translateY(1px);box-shadow:var(--schatten-xs)}
.fbtn:active,.modus-toggle:active,.zurueck:active,.switch-label:active,
.modus-dialog-buttons button:active{transform:translateY(1px)}
.schwimmer-zelle-td:active .schwimmer-zelle{transform:translateY(1px)}

/* ===== MATRIX: SPALTEN-SORTIERUNG ===== */
/* Der komplette Spaltenkopf ist der Sortier-Button; erbt die th-Optik. */
.matrix-tabelle th .sort-btn{
  all:unset;display:block;cursor:pointer;text-align:center;
  font:inherit;color:inherit;line-height:inherit;width:100%;
}
.matrix-tabelle th .sort-btn:focus-visible{outline:2px solid var(--aqua-300);outline-offset:-2px;border-radius:4px}
.sort-icon{display:block;font-size:.6rem;opacity:.45;margin-top:.15rem;transition:opacity .15s}
.matrix-tabelle th .sort-btn:hover .sort-icon{opacity:.9}
.matrix-tabelle th .sort-btn.aktiv .sort-icon{opacity:1;color:var(--aqua-300)}
.matrix-tabelle thead th.spalte-sortiert{
  background:linear-gradient(180deg,var(--aqua-600),var(--petrol-700));
}
.matrix-tabelle td.zelle-sortiert{box-shadow:inset 3px 0 0 var(--aqua-300),inset -1px 0 0 var(--aqua-100)}

/* Rang-Spalte in der Namenszelle, nur bei aktiver Sortierung */
.schwimmer-zelle-mit-platz{grid-template-columns:auto 1fr auto}