/*
 * ============================================================
 *  FangDoku 2026 · app.css
 *  Version: v00-7
 *  Globales Stylesheet für alle Dashboard-Pages.
 *  Struktur:
 *   1. Tokens (:root)
 *   2. Reset + Base
 *   3. Masthead (shared + Varianten)
 *   4. Layout Shell + Panel
 *   5. INDEX-PAGE (Sonar, Gauge, Moon, Charts, Logbuch, CTA, Fish-Strip, Modal, Heatmap)
 *   6. MEINE FÄNGE (Stats, Record, Catch-Cards)
 *   7. TEAM PAGE
 *   8. LOGIN PAGE
 *   9. ADMIN PAGE
 *  10. Responsive + Utilities
 * ============================================================
 */

/* ═══════════════════════════════════════════════════════
   1. DESIGN TOKENS
═══════════════════════════════════════════════════════ */
:root {
  --bg:         #080c14;
  --bg2:        #0d1420;
  --bg3:        #111827;
  --cyan:       #00f5d4;
  --cyan2:      #00c4ab;
  --cyan-dim:   rgba(0,245,212,.12);
  --cyan-glow:  rgba(0,245,212,.25);
  --blue:       #0096c7;
  --blue-dim:   rgba(0,150,199,.15);
  --warn:       #ff6b35;
  --warn-dim:   rgba(255,107,53,.15);
  --gold:       #fbbf24;
  --red:        #ff2d55;
  --grid:       rgba(0,245,212,.1);
  --border:     rgba(0,245,212,.2);
  --text:       #c8f0eb;
  --text-dim:   rgba(200,240,235,.65);
  --text-faint: rgba(200,240,235,.30);

  /* Login-Page accent */
  --accent:     #4a9eff;
  --accent-dim: #1a3a5c;

  /* Border-radius tokens */
  --rad:    4px;  /* panels */
  --rad-sm: 3px;  /* buttons, inputs */
  --rad-xs: 2px;  /* tags, badges */
}

/* ═══════════════════════════════════════════════════════
   2. RESET + BASE
═══════════════════════════════════════════════════════ */
*,*::before,*::after { box-sizing:border-box;margin:0;padding:0 }
html { scroll-behavior:smooth }

body {
  font-family:'JetBrains Mono',monospace;
  background:
    radial-gradient(ellipse 100% 38% at 50% 0%, rgba(13,28,48,.55) 0%, transparent 65%),
    var(--bg);
  color:var(--text);
  min-height:100vh;
  min-height:100dvh;
  overflow-x:hidden;
  font-size:16px;
}

/* Scanline overlay */
body::before {
  content:'';
  position:fixed;inset:0;z-index:9999;pointer-events:none;
  background:repeating-linear-gradient(
    0deg,
    transparent,transparent 2px,
    rgba(0,245,212,.022) 2px,rgba(0,245,212,.022) 4px
  );
}

/* Moving scan beam */
body::after {
  content:'';
  position:fixed;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(0,245,212,.25),transparent);
  z-index:9998;pointer-events:none;
  animation:scan-beam 6s linear infinite;
}
@keyframes scan-beam {
  0%   { transform:translateY(-2px);opacity:0 }
  5%   { opacity:1 }
  95%  { opacity:.3 }
  100% { transform:translateY(100vh);opacity:0 }
}

/* Background grid */
.bg-grid {
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    repeating-linear-gradient(0deg,  transparent,transparent 39px,var(--grid) 39px,var(--grid) 40px),
    repeating-linear-gradient(90deg, transparent,transparent 39px,var(--grid) 39px,var(--grid) 40px);
}
.bg-grid::after {
  content:'';position:absolute;inset:0;
  background:
    repeating-linear-gradient(0deg,  transparent,transparent 199px,rgba(0,245,212,.06) 199px,rgba(0,245,212,.06) 200px),
    repeating-linear-gradient(90deg, transparent,transparent 199px,rgba(0,245,212,.06) 199px,rgba(0,245,212,.06) 200px);
}

/* Rhein silhouette BG */
.rhein-bg {
  position:fixed;bottom:0;left:0;right:0;z-index:0;
  pointer-events:none;opacity:.07;
}

/* Scrollbar */
::-webkit-scrollbar { width:4px;height:4px }
::-webkit-scrollbar-track { background:var(--bg) }
::-webkit-scrollbar-thumb { background:rgba(0,245,212,.3);border-radius:2px }

/* ═══════════════════════════════════════════════════════
   3. MASTHEAD (shared)
═══════════════════════════════════════════════════════ */
.masthead {
  background:var(--bg2);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:100;
}
.masthead::after {
  content:'';
  position:absolute;bottom:-1px;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
  opacity:.5;
}
.mast-inner {
  max-width:1600px;margin:0 auto;
  padding:0 16px;height:44px;
  display:flex;align-items:center;gap:12px;
}
.mast-logo {
  font-family:'Rajdhani',sans-serif;
  font-size:16px;font-weight:700;
  color:var(--cyan);letter-spacing:.1em;
  text-decoration:none;white-space:nowrap;
  text-shadow:0 0 12px rgba(0,245,212,.25);
}
.mast-logo span { color:var(--text-dim) }
.mast-sep  { width:1px;height:20px;background:var(--border);flex-shrink:0 }
.mast-spacer { flex:1 }
.mast-back {
  display:flex;align-items:center;gap:6px;
  font-size:10px;text-transform:uppercase;letter-spacing:.14em;
  color:var(--text-dim);text-decoration:none;
  padding:5px 10px;border:1px solid var(--border);border-radius:3px;
  transition:color .2s,border-color .2s;flex-shrink:0;
}
.mast-back:hover { color:var(--cyan);border-color:var(--cyan) }
.mast-title {
  font-family:'Rajdhani',sans-serif;font-size:14px;font-weight:700;
  color:var(--cyan);text-transform:uppercase;letter-spacing:.14em;
}
.mast-coord {
  font-size:11px;color:var(--text-dim);
  display:flex;flex-direction:column;gap:1px;line-height:1.2;
}
.mast-coord strong { font-size:12px;color:var(--text) }
.mast-time-wrap { text-align:right }
.mast-time {
  font-size:15px;font-weight:500;color:var(--cyan);
  letter-spacing:.06em;line-height:1;
  text-shadow:0 0 10px rgba(0,245,212,.25);
}
.mast-date { font-size:9px;color:var(--text-faint);margin-top:1px;letter-spacing:.05em }
.mast-user {
  display:flex;align-items:center;gap:6px;
  padding:4px 10px;
  border:1px solid var(--border);border-radius:3px;
  background:rgba(0,245,212,.04);
}
.mast-uname { font-size:11px;font-weight:400;color:var(--text-dim) }
.mast-av {
  width:24px;height:24px;border-radius:50%;
  background:linear-gradient(135deg,var(--blue),var(--cyan));
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;color:var(--bg);flex-shrink:0;
}

/* Live-Pill (index) */
.live-pill {
  display:flex;align-items:center;gap:5px;
  font-size:10px;color:var(--cyan);
  padding:3px 8px;border:1px solid rgba(0,245,212,.3);
  border-radius:2px;background:var(--cyan-dim);
  letter-spacing:.1em;text-transform:uppercase;
}
.pulse {
  width:6px;height:6px;border-radius:50%;
  background:var(--cyan);box-shadow:0 0 6px var(--cyan);
  animation:pulse-anim 1.8s ease-in-out infinite;
}
@keyframes pulse-anim {
  0%,100% { transform:scale(1);opacity:1 }
  50%      { transform:scale(1.6);opacity:.4 }
}

/* Admin gold variant */
.page-admin .masthead { border-bottom-color:rgba(251,191,36,.2) }
.page-admin .mast-logo { color:var(--gold);text-shadow:none }
.page-admin .mast-title { color:var(--gold) }
.page-admin .mast-av { background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.3);color:var(--gold) }

/* ═══════════════════════════════════════════════════════
   4. LAYOUT SHELL + PANEL
═══════════════════════════════════════════════════════ */
.shell {
  position:relative;z-index:1;
  max-width:1600px;margin:0 auto;
  padding:12px 16px 24px;
  display:flex;flex-direction:column;gap:12px;
}

.panel {
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:4px;
  position:relative;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.055), 0 4px 18px rgba(0,0,0,0.22);
}
.panel::before {
  content:'';position:absolute;inset:0;border-radius:4px;
  background:linear-gradient(150deg,rgba(255,255,255,0.04) 0%,transparent 55%);
  pointer-events:none;
}
/* Corner brackets */
.panel::after {
  content:'';position:absolute;top:6px;right:6px;
  width:10px;height:10px;
  border-top:1.5px solid var(--cyan);border-right:1.5px solid var(--cyan);
  opacity:.5;pointer-events:none;
}
.panel-bl {
  position:absolute;bottom:6px;left:6px;
  width:10px;height:10px;
  border-bottom:1.5px solid var(--cyan);border-left:1.5px solid var(--cyan);
  opacity:.5;pointer-events:none;z-index:2;
}
.panel-hd {
  padding:8px 14px;
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(0,245,212,.03);
}
.panel-hd-title,.panel-hd-t {
  font-family:'Rajdhani',sans-serif;
  font-size:12px;font-weight:600;
  text-transform:uppercase;letter-spacing:.18em;color:var(--cyan);
}
.panel-hd-coords { font-size:10px;color:var(--text-dim) }

/* Shared alert */
.alert { padding:10px 16px;border-radius:3px;font-size:11px;letter-spacing:.05em;margin-bottom:4px }
.alert-ok  { background:rgba(0,245,212,.06);border:1px solid rgba(0,245,212,.2);color:var(--cyan) }
.alert-err { background:rgba(255,107,53,.06);border:1px solid rgba(255,107,53,.3);color:var(--warn) }


/* ═══════════════════════════════════════════════════════
   5. INDEX PAGE
═══════════════════════════════════════════════════════ */

/* ── STATUS BAR ── */
.status-bar {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:8px;
}
.sb-cell { padding:10px 14px;display:flex;flex-direction:column;gap:3px }
.sb-label { font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:var(--text-dim) }
.sb-val {
  font-family:'Rajdhani',sans-serif;
  font-size:26px;font-weight:700;color:var(--text);
  line-height:1;letter-spacing:.04em;
}
.sb-val .u { font-size:13px;font-weight:400;color:var(--text-dim) }
.sb-hint { font-size:10px;color:var(--cyan) }
.sb-cell.warn .sb-val  { color:var(--warn);text-shadow:0 0 12px rgba(255,107,53,.5) }
.sb-cell.warn .sb-hint { color:var(--warn) }
.sb-compact { display:flex;align-items:center;gap:14px;padding:7px 14px }
.sb-compact .sb-label { font-size:9px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.14em;min-width:90px;flex-shrink:0 }
.sb-compact .sb-val   { font-family:'Rajdhani',sans-serif;font-size:18px;font-weight:700;color:var(--text);line-height:1;letter-spacing:.04em }
.sb-compact .sb-val .u { font-size:11px;font-weight:400;color:var(--text-dim) }
.sb-compact .sb-hint  { font-size:10px;color:var(--cyan);flex:1 }

/* ── MIDDLE ZONE ── */
.mid-zone {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:12px;align-items:start;
}

/* ── SONAR ── */
.sonar-panel {
  display:flex;flex-direction:row;align-items:stretch;
  padding:0;gap:0;overflow:hidden;
}
.sonar-content {
  display:flex;flex-direction:column;align-items:center;
  padding:20px 4px 18px;gap:0;flex:1;min-width:0;
}
.sonar-title {
  font-family:'Rajdhani',sans-serif;
  font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.22em;
  color:var(--cyan);margin-bottom:14px;opacity:.7;
}
.sonar-wrap { position:relative;width:225px;height:225px;flex-shrink:0 }
.sonar-ring {
  position:absolute;border-radius:50%;
  border:1px solid rgba(0,245,212,.15);
  transform:translate(-50%,-50%);top:50%;left:50%;
}
.sonar-sweep {
  position:absolute;top:50%;left:50%;
  width:112px;height:112px;transform-origin:0 0;
  animation:sonar-sweep 4s linear infinite;
}
.sonar-sweep-line {
  position:absolute;top:0;left:0;
  width:112px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,245,212,.8));
  transform-origin:0 0;transform:rotate(0deg);
}
.sonar-sweep-grad {
  position:absolute;top:0;left:0;width:112px;height:112px;
  background:conic-gradient(from 270deg,rgba(0,245,212,.25) 0deg,rgba(0,245,212,.08) 40deg,transparent 80deg);
  border-radius:50%;clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
}
@keyframes sonar-sweep {
  from { transform:translate(-50%,-50%) rotate(0deg) }
  to   { transform:translate(-50%,-50%) rotate(360deg) }
}
.blip {
  position:absolute;width:6px;height:6px;
  border-radius:50%;background:var(--cyan);
  transform:translate(-50%,-50%);
  box-shadow:0 0 8px var(--cyan);
  animation:blip-fade 4s ease-in-out infinite;
}
.blip-r { background:var(--warn);box-shadow:0 0 8px var(--warn) }
@keyframes blip-fade {
  0%,100% { opacity:.3;transform:translate(-50%,-50%) scale(1) }
  40%     { opacity:1;transform:translate(-50%,-50%) scale(1.4) }
}
.crosshair-h {
  position:absolute;top:50%;left:0;right:0;
  height:1px;background:rgba(0,245,212,.15);transform:translateY(-50%);
}
.crosshair-v {
  position:absolute;left:50%;top:0;bottom:0;
  width:1px;background:rgba(0,245,212,.15);transform:translateX(-50%);
}
.center-dot {
  position:absolute;top:50%;left:50%;
  width:8px;height:8px;border-radius:50%;
  background:var(--cyan);transform:translate(-50%,-50%);
  box-shadow:0 0 12px var(--cyan),0 0 24px rgba(0,245,212,.3);z-index:2;
}
.sonar-score {
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  text-align:center;z-index:3;pointer-events:none;
}
.sonar-score-num {
  font-family:'Rajdhani',sans-serif;
  font-size:61px;font-weight:700;color:var(--cyan);line-height:.9;
  letter-spacing:-.02em;text-shadow:0 0 30px rgba(0,245,212,.5);
}
.sonar-score-denom { font-size:19px;font-weight:300;color:var(--text-dim) }
.sonar-score-lbl {
  font-size:11px;text-transform:uppercase;
  letter-spacing:.2em;color:var(--text-dim);margin-top:4px;
}
.sonar-verdict {
  font-family:'Rajdhani',sans-serif;
  font-size:17px;font-weight:600;color:var(--cyan);
  letter-spacing:.1em;text-shadow:0 0 16px rgba(0,245,212,.4);margin-top:12px;
}
.sonar-sub {
  font-size:10px;color:var(--text-dim);
  text-align:center;margin-top:3px;line-height:1.5;
}
.amp-row-center { display:flex;gap:10px;align-items:center;margin-top:14px }
.amp-c {
  width:18px;height:18px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.1);
}
.amp-c.off { opacity:.15;background:currentColor }
.apc-r { color:var(--warn) }
.apc-y { color:#fbbf24 }
.apc-g {
  color:#00e676;background:#00e676;border-color:#00e676;
  box-shadow:0 0 12px #00e676,0 0 28px rgba(0,230,118,.3);
  transform:scale(1.15);animation:glow-g 2.5s ease-in-out infinite;
}
@keyframes glow-g {
  0%,100% { box-shadow:0 0 10px #00e676,0 0 24px rgba(0,230,118,.25) }
  50%     { box-shadow:0 0 18px #00e676,0 0 40px rgba(0,230,118,.45) }
}
.amp-label-center {
  font-family:'Rajdhani',sans-serif;
  font-size:12px;font-weight:600;color:var(--text);letter-spacing:.1em;
}

/* ── GAUGE COLUMN (left of sonar) ── */
.gauge-col  { display:flex;flex-direction:column;gap:10px }
.gauge-panel { padding:16px 14px;display:flex;flex-direction:column;align-items:center;gap:10px }
.gauge-title { font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:var(--text-dim);text-align:center }
.gauge-wrap  { position:relative;width:160px;height:100px }
.gauge-canvas { width:160px;height:100px }
.gauge-center {
  position:absolute;bottom:8px;left:50%;transform:translateX(-50%);text-align:center;
}
.gauge-num {
  font-family:'Rajdhani',sans-serif;font-size:26px;font-weight:700;
  color:var(--text);line-height:1;letter-spacing:.04em;
}
.gauge-num .gu { font-size:12px;color:var(--text-dim);font-weight:400 }
.gauge-hint   { font-size:10px;color:var(--cyan);margin-top:2px }
.gauge-spark  { height:36px;width:100% }

/* ── RIGHT COLUMN ── */
.right-col { display:flex;flex-direction:column;gap:10px }

/* Moon */
.moon-panel  { padding:16px;display:flex;align-items:center;gap:16px }
.moon-orbit  { position:relative;width:80px;height:80px;flex-shrink:0 }
.moon-orbit-ring {
  position:absolute;inset:0;border-radius:50%;
  border:1px dashed rgba(0,245,212,.2);
  animation:orbit-spin 20s linear infinite;
}
@keyframes orbit-spin { to { transform:rotate(360deg) } }
.moon-body {
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:52px;height:52px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#d4e8f0,#7aabcc 60%,#3a6a80);
  box-shadow:0 0 20px rgba(100,180,220,.25);
}
.moon-shadow {
  position:absolute;top:50%;left:50%;transform:translate(-38%,-50%);
  width:52px;height:52px;border-radius:50%;background:var(--bg2);opacity:.88;
}
.moon-orbit-dot {
  position:absolute;top:6px;left:50%;
  width:6px;height:6px;border-radius:50%;
  background:var(--cyan);transform:translateX(-50%);box-shadow:0 0 8px var(--cyan);
}
.moon-info { flex:1 }
.moon-name {
  font-family:'Rajdhani',sans-serif;
  font-size:15px;font-weight:600;color:var(--text);letter-spacing:.06em;
}
.moon-data { font-size:10px;color:var(--text-dim);line-height:1.7;margin-top:4px }

/* Wind compass */
.compass-panel { padding:14px;display:flex;align-items:center;gap:14px }
.compass-svg-wrap { flex-shrink:0 }
.compass-info  { flex:1 }
.wind-val {
  font-family:'Rajdhani',sans-serif;
  font-size:28px;font-weight:700;color:var(--text);letter-spacing:.04em;line-height:1;
}
.wind-dir { font-size:11px;color:var(--cyan);margin-top:2px }

/* Condition table */
.cond-table { padding:14px 16px;display:flex;flex-direction:column;gap:11px }
.ct-row     { display:flex;align-items:center;gap:8px }
.ct-dot     { width:8px;height:8px;border-radius:50%;flex-shrink:0 }
.ct-label   { font-size:13px;color:var(--text-dim);flex:1;line-height:1.4 }
.ct-val     { font-size:13px;font-weight:500;color:var(--text) }
.ct-tag {
  font-size:11px;padding:3px 9px;border-radius:2px;
  text-transform:uppercase;letter-spacing:.08em;border:1px solid;
}

/* ── CHART ZONE ── */
.chart-zone   { display:grid;grid-template-columns:2fr 1fr;gap:12px }
.chart-full   { height:220px;position:relative }
.chart-legend { display:flex;gap:14px;flex-wrap:wrap;padding:10px 14px 0 }
.cl-item      { display:flex;align-items:center;gap:5px;font-size:10px;color:var(--text-dim) }
.cl-dot       { width:8px;height:8px;border-radius:50% }
.donut-zone   { display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2px 8px;gap:3px }
.donut-wrap   { position:relative;width:112px;height:112px;flex-shrink:0 }
.donut-center {
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);text-align:center;pointer-events:none;
}
.donut-center .big {
  font-family:'Rajdhani',sans-serif;
  font-size:22px;font-weight:700;color:var(--text);line-height:1;
}
.donut-center .sm  { font-size:8px;color:var(--text-dim) }
.donut-legend      { width:100%;display:flex;flex-direction:column;gap:3px }
.dl-row  { display:flex;align-items:center;gap:5px;font-size:9px }
.dl-dot  { width:9px;height:9px;border-radius:50%;flex-shrink:0 }
.dl-name { flex:1;color:var(--text-dim) }
.dl-n    { font-weight:600;color:var(--text) }
.dl-bg   { flex:2;height:3px;background:rgba(0,245,212,.1);border-radius:2px;min-width:40px }
.dl-bar  { height:3px;border-radius:2px }

/* ── HEATMAP ── */
.hm-zone { padding:12px 14px }
.hm-g {
  display:grid;
  grid-template-columns:32px repeat(24,1fr);
  gap:2px;min-width:500px;
}
.hm-h  { font-size:8px;color:var(--text-dim);text-align:center;padding-top:2px }
.hm-d  { font-size:9px;font-weight:500;color:var(--text-dim);display:flex;align-items:center }
.hm-c  { height:18px;border-radius:2px;cursor:default;transition:transform .12s }
.hm-c:hover { transform:scale(1.5);z-index:1 }
.hm-0 { background:rgba(0,245,212,.04) }
.hm-1 { background:rgba(0,245,212,.15) }
.hm-2 { background:rgba(0,245,212,.3) }
.hm-3 { background:rgba(0,245,212,.5) }
.hm-4 { background:rgba(0,245,212,.72) }
.hm-5 { background:var(--cyan);box-shadow:0 0 6px rgba(0,245,212,.5) }

/* ── BOTTOM ZONE ── */
.bottom-zone  { display:grid;grid-template-columns:1fr 1fr;gap:12px }
.bottom-trio  { display:grid;grid-template-columns:2fr 1fr 2fr;gap:12px;align-items:start }

/* ── LOGBOOK ── */
.log-hd {
  display:grid;
  grid-template-columns:40px 44px 1fr 72px 90px 90px;
  padding:6px 14px;border-bottom:1px solid var(--border);
  background:rgba(0,245,212,.04);
  font-size:8px;text-transform:uppercase;letter-spacing:.18em;color:var(--cyan);
}
.log-av {
  width:34px;height:34px;border-radius:50%;overflow:hidden;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg3);border:1px solid var(--border);
  font-size:11px;font-weight:700;color:var(--text-dim);
}
.log-av img { width:100%;height:100%;object-fit:cover;display:block;border-radius:50% }
.log-row {
  display:grid;
  grid-template-columns:40px 44px 1fr 72px 90px 90px;
  padding:0 14px;height:48px;align-items:center;
  border-bottom:1px solid rgba(0,245,212,.05);
  font-size:11px;color:var(--text-dim);
  transition:background .15s;cursor:default;
}
.log-row:hover      { background:var(--cyan-dim) }
.log-row:last-child { border-bottom:none }
.log-id { font-size:10px;color:var(--text-faint) }
.sp-tag {
  display:inline-flex;font-size:9px;
  padding:2px 6px;border-radius:2px;border:1px solid;
}
.sp-z { color:var(--cyan);border-color:rgba(0,245,212,.4);background:var(--cyan-dim) }
.sp-h { color:var(--warn);border-color:rgba(255,107,53,.4);background:var(--warn-dim) }
.sp-b { color:#fbbf24;border-color:rgba(251,191,36,.4);background:rgba(251,191,36,.1) }

/* ── RANKING ── */
.rank-list  { display:flex;flex-direction:column }
.rank-row {
  padding:10px 14px;display:flex;align-items:center;gap:10px;
  border-bottom:1px solid rgba(0,245,212,.06);
  transition:background .15s;cursor:default;
}
.rank-row:hover      { background:var(--cyan-dim) }
.rank-row:last-child { border-bottom:none }
.rank-row.me         { background:rgba(0,150,199,.1);border-left:2px solid var(--blue) }
.rk-n {
  font-family:'Rajdhani',sans-serif;
  font-size:18px;font-weight:700;color:var(--text-faint);
  width:24px;text-align:center;flex-shrink:0;
}
.rk-n.g1   { color:var(--cyan);text-shadow:0 0 10px rgba(0,245,212,.5) }
.rk-av     { width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--bg);flex-shrink:0 }
.rk-name   { flex:1;font-size:12px;font-weight:500;color:var(--text) }
.rk-bar-w  { width:56px }
.rk-bar-bg { height:3px;background:rgba(0,245,212,.1);border-radius:2px }
.rk-bar    { height:3px;background:var(--cyan);border-radius:2px }
.rk-count  { font-family:'Rajdhani',sans-serif;font-size:20px;font-weight:700;color:var(--cyan);min-width:32px;text-align:right }

.rank-zone       { display:grid;grid-template-columns:2fr 1fr;gap:12px;align-items:start }
.rank-panel-hd   { display:flex;align-items:center;justify-content:space-between;padding:8px 14px;border-bottom:1px solid var(--border);background:rgba(0,245,212,.03) }
.rank-month-nav  { display:flex;align-items:center;gap:8px }
.rank-month-lbl  { font-family:'Rajdhani',sans-serif;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);min-width:90px;text-align:center }
.rank-month-dots { display:flex;gap:4px;justify-content:center;padding:6px 14px 2px;flex-wrap:wrap }
.rm-dot { width:6px;height:6px;border-radius:50%;background:var(--border);border:none;padding:0;cursor:pointer;transition:background .2s,transform .2s }
.rm-dot.active { background:var(--cyan);transform:scale(1.3) }
.rank-empty { padding:20px 14px;text-align:center;color:var(--text-faint);font-size:10px;letter-spacing:.1em;text-transform:uppercase }

/* ── CTA PANEL ── */
.cta-panel {
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:32px 20px;gap:16px;
  text-align:center;
  background:var(--bg2);border:1px solid var(--border);border-radius:4px;
  position:relative;overflow:hidden;
}
.cta-panel::before {
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 100%,rgba(0,150,199,.12),transparent);
}
.cta-panel>* { position:relative;z-index:1 }
.cta-icon {
  width:64px;height:64px;border-radius:50%;
  border:2px solid var(--cyan);
  display:flex;align-items:center;justify-content:center;
  background:var(--cyan-dim);
  box-shadow:0 0 20px rgba(0,245,212,.15);
  animation:icon-pulse 3s ease-in-out infinite;
}
@keyframes icon-pulse {
  0%,100% { box-shadow:0 0 18px rgba(0,245,212,.15) }
  50%     { box-shadow:0 0 32px rgba(0,245,212,.3) }
}
.cta-title  { font-family:'Rajdhani',sans-serif;font-size:20px;font-weight:700;color:var(--text);letter-spacing:.1em;text-transform:uppercase }
.cta-sub    { font-size:11px;color:var(--text-dim);line-height:1.5 }
.cta-btn {
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 28px;
  background:transparent;border:1.5px solid var(--cyan);border-radius:3px;
  font-family:'Rajdhani',sans-serif;font-size:15px;font-weight:600;
  color:var(--cyan);text-transform:uppercase;letter-spacing:.12em;
  cursor:pointer;
  transition:background .2s,box-shadow .2s,transform .15s;
  position:relative;overflow:hidden;
}
.cta-btn::before {
  content:'';position:absolute;inset:0;
  background:var(--cyan);transform:scaleX(0);transform-origin:left;
  transition:transform .25s;z-index:0;
}
.cta-btn:hover::before  { transform:scaleX(1) }
.cta-btn:hover          { color:var(--bg);box-shadow:0 0 24px rgba(0,245,212,.3) }
.cta-btn:hover>*        { color:var(--bg) }
.cta-btn>*              { position:relative;z-index:1 }
.cta-btn:active         { transform:scale(.97) }
.cta-stats-row          { display:flex;gap:20px;flex-wrap:wrap;justify-content:center }
.cta-stat               { text-align:center }
.cta-stat-n             { font-family:'Rajdhani',sans-serif;font-size:28px;font-weight:700;color:var(--cyan);letter-spacing:.04em;line-height:1 }
.cta-stat-l             { font-size:9px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.12em }

/* CTA Yellow variant (Fang Dokumentieren) */
.cta-strip--yellow { border-color:rgba(251,191,36,.35);background:rgba(251,191,36,.03) }
.cta-strip--yellow::before { background:radial-gradient(ellipse 80% 60% at 0% 50%,rgba(251,191,36,.1),transparent) !important }
.cta-strip--yellow .cta-icon { border-color:#fbbf24;background:rgba(251,191,36,.1);animation:yellow-icon-pulse 3s ease-in-out infinite }
@keyframes yellow-icon-pulse {
  0%,100% { box-shadow:0 0 18px rgba(251,191,36,.2) }
  50%     { box-shadow:0 0 36px rgba(251,191,36,.5) }
}
.cta-strip--yellow .cta-stat-n  { color:#fbbf24 }
.cta-strip--yellow .cta-btn     { border-color:#fbbf24;color:#fbbf24;animation:yellow-btn-pulse 2.5s ease-in-out infinite }
.cta-strip--yellow .cta-btn::before { background:#fbbf24 }
.cta-strip--yellow .cta-btn:hover   { color:#080c14;box-shadow:0 0 28px rgba(251,191,36,.5) }
.cta-strip--yellow .cta-btn:hover>* { color:#080c14 }
@keyframes yellow-btn-pulse {
  0%,100% { box-shadow:0 0 8px rgba(251,191,36,.2) }
  50%     { box-shadow:0 0 22px rgba(251,191,36,.55),0 0 44px rgba(251,191,36,.12) }
}

/* Shimmer sweep on Eintrag-Button */
.cta-btn--shimmer::after {
  content:'';position:absolute;top:0;left:-120%;
  width:55%;height:100%;
  background:linear-gradient(105deg,transparent 20%,rgba(255,255,255,.28) 50%,transparent 80%);
  animation:btn-shimmer 2.8s ease-in-out infinite;z-index:2;pointer-events:none;
}
@keyframes btn-shimmer { 0% { left:-120% } 45%,100% { left:160% } }

/* CTA layout variants */
.cta-duo        { display:grid;grid-template-columns:2fr 1.6fr 1.4fr;gap:12px;align-items:stretch }
.cta-strip      { flex-direction:row;padding:14px 20px;gap:20px;text-align:left;justify-content:flex-start;align-items:center;text-decoration:none }
.cta-strip .cta-icon        { width:48px;height:48px;flex-shrink:0 }
.cta-strip .cta-title       { font-size:16px;letter-spacing:.08em }
.cta-strip .cta-text        { display:flex;flex-direction:column;gap:3px }
.cta-strip .cta-sub         { text-align:left }
.cta-strip .cta-spacer      { flex:1 }
.cta-strip .cta-stats-row   { justify-content:flex-end;gap:24px;flex-wrap:nowrap }
.cta-strip .cta-stat-n      { font-size:22px }

/* Button-Link (right column) */
.cta-btn-link {
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:1.5px solid var(--blue);border-radius:3px;
  font-family:'Rajdhani',sans-serif;font-size:15px;font-weight:700;
  color:var(--blue);text-transform:uppercase;letter-spacing:.14em;
  text-decoration:none;cursor:pointer;
  position:relative;overflow:hidden;transition:color .2s,box-shadow .2s;
}
.cta-btn-link::before {
  content:'';position:absolute;inset:0;
  background:var(--blue);transform:scaleX(0);transform-origin:left;
  transition:transform .25s;z-index:0;
}
.cta-btn-link:hover::before  { transform:scaleX(1) }
.cta-btn-link:hover          { color:#fff;box-shadow:0 0 24px rgba(0,150,199,.3) }
.cta-btn-link span, .cta-btn-link { position:relative;z-index:1 }

.cta-btn-link--orange { border-color:#f97316;color:#f97316;text-shadow:0 0 12px rgba(249,115,22,.4);box-shadow:0 0 10px rgba(249,115,22,.15) }
.cta-btn-link--orange::before { background:#f97316 }
.cta-btn-link--orange:hover   { color:#fff;box-shadow:0 0 28px rgba(249,115,22,.55) }

.cta-btn-link--red {
  border-color:#ff2d55;color:#ff2d55;
  text-shadow:0 0 14px rgba(255,45,85,.5);
  box-shadow:0 0 14px rgba(255,45,85,.2),inset 0 0 20px rgba(255,45,85,.04);
  animation:red-pulse 3s ease-in-out infinite;
}
.cta-btn-link--red::before { background:#ff2d55 }
.cta-btn-link--red:hover   { color:#fff;box-shadow:0 0 36px rgba(255,45,85,.7) }
@keyframes red-pulse {
  0%,100% { box-shadow:0 0 10px rgba(255,45,85,.15),inset 0 0 16px rgba(255,45,85,.03) }
  50%     { box-shadow:0 0 20px rgba(255,45,85,.32),inset 0 0 22px rgba(255,45,85,.06) }
}

.cta-right-duo { display:grid;grid-template-rows:1fr 1fr 1fr;gap:12px }

/* ── SESSION PLANER card — center column of cta-duo ── */
.cta-session-card {
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;padding:20px 22px;min-width:180px;
  background:rgba(0,245,212,.04);
  border:1.5px solid rgba(0,245,212,.28);border-radius:4px;
  text-decoration:none;cursor:pointer;position:relative;overflow:hidden;
  transition:border-color .25s,background .25s,box-shadow .25s;
  text-align:center;
}
.cta-session-card::before {
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(0,245,212,.07) 0%,transparent 60%);
  pointer-events:none;
}
.cta-session-card:hover {
  border-color:var(--cyan);
  background:rgba(0,245,212,.08);
  box-shadow:0 0 32px rgba(0,245,212,.2),inset 0 0 24px rgba(0,245,212,.05);
}
/* PB-Knacker Logo — eigene Box im Grid */
.cta-logo-box {
  display:flex;align-items:center;justify-content:center;
  background:var(--bg2);border:1px solid var(--border);border-radius:3px;
  position:relative;overflow:hidden;
}
.cta-logo-box::before {
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at center,rgba(0,245,212,.06) 0%,transparent 70%);
  pointer-events:none;
}
.cta-logo-wrap {
  width:96px;height:96px;
  flex:0 0 96px;
  border-radius:50%;overflow:hidden;
  border:1.5px solid rgba(0,245,212,.35);
  box-shadow:0 0 24px rgba(0,245,212,.4),0 0 8px rgba(0,245,212,.2);
  animation:logo-pulse 4s ease-in-out infinite;
  position:relative;z-index:1;
}
@keyframes logo-pulse {
  0%,100% { box-shadow:0 0 20px rgba(0,245,212,.35),0 0 6px rgba(0,245,212,.15) }
  50%      { box-shadow:0 0 38px rgba(0,245,212,.6),0 0 14px rgba(0,245,212,.3)  }
}
.cta-logo-wrap img {
  width:100%;height:100%;
  object-fit:cover;display:block;
}
.cta-session-icon {
  font-size:28px;line-height:1;
  color:var(--cyan);
  text-shadow:0 0 18px rgba(0,245,212,.7);
  transition:text-shadow .25s;
}
.cta-session-card:hover .cta-session-icon {
  text-shadow:0 0 28px rgba(0,245,212,1);
}
.cta-session-title {
  font-family:'Rajdhani',sans-serif;
  font-size:16px;font-weight:700;
  color:var(--cyan);
  letter-spacing:.1em;text-transform:uppercase;
  line-height:1.2;
  text-shadow:0 0 18px rgba(0,245,212,.3);
}
.cta-session-sub {
  font-family:'JetBrains Mono',monospace;
  font-size:8px;color:var(--text-faint);
  letter-spacing:.14em;text-transform:uppercase;
}

/* ── FISH STRIP (Bester Fang) ── */
.fish-strip    { display:grid;grid-template-columns:repeat(3,1fr);gap:12px }
.fish-card     { padding:0;display:flex;flex-direction:column;position:relative;overflow:hidden }
.fish-card::after { content:'';position:absolute;bottom:0;left:0;right:0;height:2px }
.fc-z::after   { background:linear-gradient(90deg,var(--cyan),transparent) }
.fc-h::after   { background:linear-gradient(90deg,var(--warn),transparent) }
.fc-b::after   { background:linear-gradient(90deg,#fbbf24,transparent) }
.fish-card-hd { display:flex;align-items:center;justify-content:space-between;padding:8px 10px 6px;gap:6px }
.fish-rank     { font-size:8px;text-transform:uppercase;letter-spacing:.14em;color:var(--text-dim) }
.fish-card-date { font-size:8px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-faint);flex-shrink:0 }
.fish-card-photo  {
  width:100%;aspect-ratio:3/2;position:relative;overflow:hidden;background:#000814;
  display:flex;align-items:center;justify-content:center;
}
.fish-card-photo img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block }
.fish-card-photo-ph {
  display:flex;flex-direction:column;align-items:center;gap:6px;
  color:rgba(255,255,255,.1);font-size:7px;text-transform:uppercase;letter-spacing:.08em;
  text-align:center;padding:12px;width:100%;height:100%;justify-content:center;
}
.fish-empty   { font-size:9px;text-transform:uppercase;letter-spacing:.12em;color:var(--text-faint);margin-top:4px }
.fish-card-info   { display:flex;flex-direction:column;gap:5px;padding:10px 12px }
.fish-angler  { font-family:'Rajdhani',sans-serif;font-size:12px;font-weight:700;line-height:1.1;letter-spacing:.06em;text-transform:uppercase }
.fc-z .fish-angler { color:var(--cyan);text-shadow:0 0 24px rgba(0,245,212,.3) }
.fc-h .fish-angler { color:var(--warn);text-shadow:0 0 24px rgba(255,107,53,.3) }
.fc-b .fish-angler { color:#fbbf24;text-shadow:0 0 24px rgba(251,191,36,.2) }
.fish-species-row { display:flex;justify-content:space-between;align-items:baseline;gap:6px }
.fish-name {
  font-family:'Rajdhani',sans-serif;font-size:16px;font-weight:600;color:var(--text-dim);
  letter-spacing:.08em;text-transform:uppercase;min-width:0;
}
.fc-z .fish-name { color:rgba(0,245,212,.7) }
.fc-h .fish-name { color:rgba(255,107,53,.7) }
.fc-b .fish-name { color:rgba(251,191,36,.7) }
.fish-chip { font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;padding:2px 6px;border-radius:2px;background:rgba(255,255,255,.06);border:1px solid var(--border);color:var(--text-dim);white-space:nowrap;flex-shrink:0 }
.fish-tags { display:flex;flex-wrap:wrap;gap:3px }
.fish-tag  { font-size:9px;padding:2px 7px;border:1px solid var(--border);border-radius:2px;color:var(--text-dim);background:var(--cyan-dim);text-transform:uppercase;letter-spacing:.06em }

/* ── ATREKORD + SAISON SLIDESHOW ── */
/* Eigene Klassen ohne Konflikt mit .spotlight-card / .spotlight-stage */
.fc-atrekord            { grid-column:1/-1 }
.fc-atrekord::after     { background:linear-gradient(90deg,#fbbf24,transparent) }
.atrekord-stage,
.season-stage           { overflow:hidden }
/* Slides: per default versteckt, als flex-column sichtbar wenn .active */
.atrekord-slide         { display:none;flex-direction:column }
.atrekord-slide.active  { display:flex }
.season-slide           { display:none;flex-direction:column }
.season-slide.active    { display:flex }
/* fish-card-photo hat bereits aspect-ratio:3/2, overflow, position:relative, img cover */
/* Atrekord-Farben */
.atrekord-slide .fish-angler { font-size:13px;color:#fbbf24;text-shadow:0 0 24px rgba(251,191,36,.2) }
.atrekord-slide .fish-name   { font-size:18px;color:rgba(251,191,36,.7) }
/* Platzhalter ohne Foto */
.fish-card-nophoto {
  width:100%;aspect-ratio:3/2;
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.1);background:#000814;
}

/* ── MODAL ── */
.modal-bg {
  display:none;position:fixed;inset:0;
  background:rgba(8,12,20,.85);backdrop-filter:blur(8px);
  z-index:500;align-items:center;justify-content:center;padding:20px;
}
.modal-bg.open { display:flex }
.modal-box {
  background:var(--bg2);border:1px solid var(--border);border-radius:4px;
  width:100%;max-width:660px;
  box-shadow:0 0 60px rgba(0,245,212,.08);
  overflow:hidden;position:relative;display:flex;flex-direction:column;
  max-height:calc(100vh - 40px);
}
.modal-box::after {
  content:'';position:absolute;top:4px;right:4px;
  width:10px;height:10px;
  border-top:1.5px solid var(--cyan);border-right:1.5px solid var(--cyan);opacity:.6;
}
.modal-hd {
  padding:14px 20px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(0,245,212,.04);flex-shrink:0;
}
.modal-hd-t {
  font-family:'Rajdhani',sans-serif;font-size:16px;font-weight:700;
  color:var(--cyan);text-transform:uppercase;letter-spacing:.12em;
}
.modal-x {
  width:28px;height:28px;border-radius:2px;
  background:var(--cyan-dim);border:1px solid var(--border);
  color:var(--text);font-size:14px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .15s;
}
.modal-x:hover { background:rgba(0,245,212,.2) }
.modal-body { padding:20px;display:flex;flex-direction:column;gap:16px;overflow-y:auto;flex:1 }

/* ── FORMULAR (modal) ── */
.form-section { display:flex;flex-direction:column;gap:10px }
.form-sec-title {
  font-family:'Rajdhani',sans-serif;font-size:9px;font-weight:700;
  text-transform:uppercase;letter-spacing:.22em;color:var(--cyan);
  padding-bottom:6px;border-bottom:1px solid rgba(0,245,212,.18);
  display:flex;align-items:center;gap:8px;
}
.form-sec-title::before {
  content:'';display:inline-block;
  width:4px;height:4px;background:var(--cyan);border-radius:50%;flex-shrink:0;
}
.form-row-2 { display:grid;grid-template-columns:1fr 1fr;gap:12px }
.form-group { display:flex;flex-direction:column;gap:5px }
.form-group.full { grid-column:span 2 }
.f-lbl { font-size:9px;text-transform:uppercase;letter-spacing:.16em;color:var(--cyan);opacity:.7 }
.f-req { color:var(--warn);opacity:1 }
.f-in, .f-sel {
  padding:9px 12px;background:var(--bg);
  border:1px solid var(--border);border-radius:3px;
  color:var(--text);font-family:'JetBrains Mono',monospace;font-size:13px;
  transition:border-color .2s;width:100%;
}
.f-in[type=date],.f-in[type=time] { color-scheme:dark }
.f-in:focus,.f-sel:focus { outline:none;border-color:var(--cyan);box-shadow:0 0 0 2px var(--cyan-dim) }
.f-sel option { background:var(--bg) }
.f-sub {
  width:100%;padding:12px;background:transparent;border:1.5px solid var(--cyan);border-radius:3px;
  font-family:'Rajdhani',sans-serif;font-size:14px;font-weight:600;color:var(--cyan);
  text-transform:uppercase;letter-spacing:.14em;cursor:pointer;
  transition:background .2s,color .2s;position:relative;overflow:hidden;flex-shrink:0;
}
.f-sub:hover { background:var(--cyan);color:var(--bg) }
/* Edit-Modus: roter Submit-Button */
.f-sub--edit { border-color:var(--red);color:var(--red) }
.f-sub--edit:hover { background:var(--red);color:var(--bg);box-shadow:0 0 16px rgba(255,45,85,.3) }
.f-in::placeholder,.f-sel::placeholder { font-size:10px;color:rgba(200,216,232,.22);letter-spacing:.03em }

/* ── Reporter selector tiles ─────────────────────────────────────── */
.report-selector {
  display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px;
}
.report-tile {
  display:flex;align-items:flex-start;gap:10px;padding:11px 13px;
  border:1.5px solid var(--border);border-radius:3px;
  background:rgba(0,245,212,.03);cursor:pointer;
  transition:border-color .18s,background .18s;
}
.report-tile:hover { border-color:rgba(0,245,212,.45);background:rgba(0,245,212,.06) }
.report-tile-dot {
  width:14px;height:14px;border-radius:50%;border:1.5px solid var(--border);
  flex-shrink:0;margin-top:2px;
  background:transparent;transition:border-color .18s,background .18s,box-shadow .18s;
}
.report-tile-text { display:flex;flex-direction:column;gap:2px;min-width:0 }
.report-tile-title {
  font-family:'Rajdhani',sans-serif;font-size:13px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text);line-height:1.1;
}
.report-tile-sub {
  font-family:'JetBrains Mono',monospace;font-size:9px;
  color:var(--text-faint);letter-spacing:.04em;
}
/* own tile: cyan when checked */
#f-report-own:checked ~ .report-selector .report-tile:first-of-type {
  border-color:var(--cyan);background:rgba(0,245,212,.08);
}
#f-report-own:checked ~ .report-selector .report-tile:first-of-type .report-tile-dot {
  border-color:var(--cyan);background:var(--cyan);
  box-shadow:0 0 6px rgba(0,245,212,.5);
}
#f-report-own:checked ~ .report-selector .report-tile:first-of-type .report-tile-title {
  color:var(--cyan);
}
/* foreign tile: gold when checked */
#f-report-foreign:checked ~ .report-selector .report-tile--foreign {
  border-color:var(--gold);background:rgba(251,191,36,.07);
}
#f-report-foreign:checked ~ .report-selector .report-tile--foreign .report-tile-dot {
  border-color:var(--gold);background:var(--gold);
  box-shadow:0 0 6px rgba(251,191,36,.45);
}
#f-report-foreign:checked ~ .report-selector .report-tile--foreign .report-tile-title {
  color:var(--gold);
}
/* angler picker slide-in */
.report-angler-wrap {
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .28s ease,opacity .22s ease;
  margin-top:0;
}
.report-angler-wrap.report-angler-open {
  max-height:80px;opacity:1;margin-top:10px;
}

/* Foto upload */
.foto-area    { display:flex;flex-direction:column;gap:8px }
.foto-preview {
  width:100%;aspect-ratio:4/3;min-height:100px;
  border:1px dashed rgba(0,245,212,.25);border-radius:3px;
  background:var(--bg);overflow:hidden;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  position:relative;transition:border-color .2s;
}
.foto-preview:hover { border-color:rgba(0,245,212,.6) }
.foto-preview img { width:100%;height:100%;object-fit:cover;display:none;position:absolute;inset:0 }
.foto-hint {
  display:flex;flex-direction:column;align-items:center;gap:5px;
  color:var(--text-faint);font-size:8px;text-transform:uppercase;letter-spacing:.12em;pointer-events:none;
}
.foto-btn {
  width:100%;padding:7px 6px;background:transparent;
  border:1px solid var(--border);border-radius:3px;
  color:var(--text-dim);font-family:'JetBrains Mono',monospace;
  font-size:9px;text-transform:uppercase;letter-spacing:.1em;cursor:pointer;
  transition:border-color .2s,color .2s;
  display:flex;align-items:center;justify-content:center;gap:5px;
}
.foto-btn:hover { border-color:var(--cyan);color:var(--cyan) }
.foto-btn--cyan { border-color:var(--cyan);color:var(--cyan) }
.foto-btn--cyan:hover { background:var(--cyan);color:var(--bg) }

/* ── Crop Modal ─────────────────────────────────────────────────────────── */
.foto-crop-overlay {
  position:fixed;inset:0;z-index:9000;
  background:rgba(0,0,0,.85);
  display:flex;align-items:center;justify-content:center;
}
.foto-crop-box {
  width:min(640px,94vw);background:var(--bg2);
  border:1px solid var(--border);border-radius:4px;
  display:flex;flex-direction:column;overflow:hidden;
}
.foto-crop-header {
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;border-bottom:1px solid var(--border);
}
.foto-crop-title {
  font-family:'JetBrains Mono',monospace;font-size:9px;
  color:var(--cyan);letter-spacing:.12em;
}
.foto-crop-toolbar { display:flex;gap:4px }
.foto-crop-toolbar button {
  background:transparent;border:1px solid var(--border);border-radius:3px;
  color:var(--text-dim);font-size:13px;padding:3px 8px;cursor:pointer;
  transition:border-color .15s,color .15s;
}
.foto-crop-toolbar button:hover { border-color:var(--cyan);color:var(--cyan) }
.foto-crop-canvas {
  padding:12px;background:var(--bg);max-height:50vh;overflow:hidden;
}
.foto-crop-canvas img { display:block;max-width:100% }
.foto-crop-actions {
  display:flex;gap:8px;padding:10px 14px;border-top:1px solid var(--border);
}
/* ── End Crop Modal ─────────────────────────────────────────────────────── */

/* ── Report Chooser Overlay ──────────────────────────────────────────────── */
/* Lives inside .modal-bg (position:fixed), so position:absolute;inset:0
   covers the full backdrop — completely clear of .modal-box's overflow:hidden */
.report-chooser {
  position:absolute;inset:0;z-index:10;
  background:rgba(8,12,20,.65);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .25s ease;
}
.report-chooser.rc-done { opacity:0;pointer-events:none }
.rc-inner {
  width:100%;max-width:400px;padding:22px 22px 24px;
  background:var(--bg2);border:1px solid var(--border);border-radius:4px;
  box-shadow:0 8px 40px rgba(0,0,0,.55);
}
/* Header row: eyebrow left, X right */
.rc-header {
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:10px;
}
.rc-header .rc-eyebrow { margin-bottom:0 }
/* X close button — flex sibling of eyebrow, always top-right */
.rc-close {
  flex-shrink:0;
  width:26px;height:26px;border-radius:2px;
  background:var(--bg3);border:1px solid var(--border);
  color:var(--text-dim);font-size:13px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s,color .15s;line-height:1;
}
.rc-close:hover { background:rgba(0,245,212,.12);color:var(--text) }
.rc-eyebrow {
  font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--cyan);opacity:.65;
  /* margin handled by .rc-header when inside it; standalone gets a small bottom gap */
  margin-bottom:6px;
}
.rc-question {
  font-family:'Rajdhani',sans-serif;font-size:22px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--text);margin-bottom:20px;
}
/* Outline frame that visually groups the two choice tiles */
.rc-tiles-frame {
  border:1px solid rgba(0,245,212,.12);border-radius:3px;
  padding:10px;margin-top:4px;
  background:rgba(0,245,212,.02);
}
.rc-tiles { display:grid;grid-template-columns:1fr 1fr;gap:10px }
.rc-tile {
  display:flex;align-items:flex-start;gap:11px;padding:16px 14px;
  background:rgba(0,245,212,.03);border:1.5px solid var(--border);border-radius:3px;
  cursor:pointer;text-align:left;width:100%;
  transition:border-color .18s,background .18s;
}
.rc-tile:hover { border-color:rgba(0,245,212,.5);background:rgba(0,245,212,.07) }
.rc-tile.active,
.rc-tile:active { border-color:var(--cyan);background:rgba(0,245,212,.1) }
.rc-tile--foreign:hover { border-color:rgba(251,191,36,.5);background:rgba(251,191,36,.07) }
.rc-tile--foreign.active { border-color:var(--gold);background:rgba(251,191,36,.1) }
.rc-tile-dot {
  width:15px;height:15px;border-radius:50%;border:1.5px solid var(--border);
  flex-shrink:0;margin-top:3px;
  transition:border-color .18s,background .18s,box-shadow .18s;
}
.rc-tile.active .rc-tile-dot {
  border-color:var(--cyan);background:var(--cyan);box-shadow:0 0 8px rgba(0,245,212,.5);
}
.rc-tile--foreign.active .rc-tile-dot {
  border-color:var(--gold);background:var(--gold);box-shadow:0 0 8px rgba(251,191,36,.45);
}
.rc-tile-body { display:flex;flex-direction:column;gap:3px;min-width:0 }
.rc-tile-title {
  font-family:'Rajdhani',sans-serif;font-size:14px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text);line-height:1.1;
}
.rc-tile.active .rc-tile-title { color:var(--cyan) }
.rc-tile--foreign.active .rc-tile-title { color:var(--gold) }
.rc-tile-sub {
  font-family:'JetBrains Mono',monospace;font-size:9px;
  color:var(--text-faint);letter-spacing:.04em;
}
.rc-sel { width:100%;margin-top:10px }
.rc-actions { display:flex;gap:10px;margin-top:14px }
.rc-back {
  background:transparent;border:1px solid rgba(200,216,232,.2);
  color:rgba(200,216,232,.45);padding:10px 14px;border-radius:3px;
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em;
  cursor:pointer;transition:color .18s,border-color .18s;white-space:nowrap;
}
.rc-back:hover { color:var(--text);border-color:rgba(200,216,232,.4) }
.rc-confirm {
  flex:1;background:transparent;border:1.5px solid var(--gold);color:var(--gold);
  padding:11px;border-radius:3px;font-family:'Rajdhani',sans-serif;font-size:14px;
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;
  transition:background .2s;
}
.rc-confirm:hover { background:rgba(251,191,36,.12) }
/* Cancel button — step 2, full-width, below the action row */
.rc-cancel {
  display:block;width:100%;margin-top:10px;
  padding:9px;background:transparent;
  border:1px solid rgba(200,216,232,.12);border-radius:3px;
  font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:.09em;text-transform:uppercase;
  color:rgba(200,216,232,.3);cursor:pointer;
  transition:color .18s,border-color .18s;
}
.rc-cancel:hover { color:rgba(200,216,232,.6);border-color:rgba(200,216,232,.3) }
/* Admin bulk-import bar — step 1, admin-only, below the tile frame */
.rc-admin-bar {
  margin-top:16px;
  padding-top:12px;
  border-top:1px solid rgba(0,245,212,.1);
}
.rc-admin-link {
  display:inline-flex;align-items:center;gap:7px;
  font-family:'JetBrains Mono',monospace;font-size:9px;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold);opacity:.6;
  text-decoration:none;
  transition:opacity .18s;
}
.rc-admin-link:hover { opacity:1 }
.rc-admin-icon { font-size:12px;line-height:1 }
/* ── End Report Chooser Overlay ──────────────────────────────────────────── */

/* ── Team card angler badge ──────────────────────────────────────────────── */
.card-hd-angler {
  font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.07em;
  color:var(--text-faint);text-transform:uppercase;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* Fetch-Button (neben Notiz) — Gold-Glow */
.fetch-btn {
  padding:0 14px;min-height:100%;
  background:rgba(251,191,36,.08);border:1px solid rgba(251,191,36,.4);border-radius:3px;
  color:var(--gold);font-family:'JetBrains Mono',monospace;
  font-size:10px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;text-align:center;
  text-shadow:0 0 8px rgba(251,191,36,.5);
  box-shadow:0 0 10px rgba(251,191,36,.12);
  transition:background .2s,border-color .2s,color .2s,box-shadow .2s;
  display:flex;align-items:center;justify-content:center;gap:6px;flex-direction:column;
}
.fetch-btn:hover { background:rgba(251,191,36,.18);border-color:var(--gold);box-shadow:0 0 18px rgba(251,191,36,.3) }

/* ── FANGZEIT + GEWÄSSER (Section ② — 70/30-Grid) ── */
.zeit-gewaesser-grid {
  display:grid;
  grid-template-columns:70% 1fr;
  gap:16px;
  align-items:start;
}
.zeit-panel  { display:flex;flex-direction:column;gap:10px }

/* Gewässer-Panel: blaue Akzente, kein Kasten */
.gewaesser-panel {
  display:flex;flex-direction:column;gap:10px;
}
.gewaesser-panel-title {
  font-family:'Rajdhani',sans-serif;font-size:9px;font-weight:700;
  text-transform:uppercase;letter-spacing:.22em;
  color:var(--blue);
  padding-bottom:6px;
  border-bottom:1px solid rgba(0,150,199,.3);
  display:flex;align-items:center;gap:8px;
}
.gewaesser-panel-title::before {
  content:'';display:inline-block;
  width:4px;height:4px;background:var(--blue);border-radius:50%;flex-shrink:0;
}

/* Fang-Ort (Section ③ — standalone) */
.fang-ort-panel-title {
  font-family:'Rajdhani',sans-serif;font-size:9px;font-weight:700;
  text-transform:uppercase;letter-spacing:.22em;
  color:var(--cyan);
  padding-bottom:6px;
  border-bottom:1px solid rgba(0,245,212,.18);
  display:flex;align-items:center;gap:8px;
  margin-bottom:4px;
}
.fang-ort-panel-title::before {
  content:'';display:inline-block;
  width:4px;height:4px;background:var(--cyan);border-radius:50%;flex-shrink:0;
}

/* Blaue Label + Select-Variante für Gewässer */
.f-lbl--blue { color:rgba(0,150,199,.8) }
.f-sel--blue { border-color:rgba(0,150,199,.35);color:rgba(0,200,220,.85) }
.f-sel--blue:focus { border-color:var(--blue);box-shadow:0 0 0 2px rgba(0,150,199,.15) }

/* Rhein-KM + Land-Select + Flagge nebeneinander */
.rheinkm-land-wrap          { display:flex;align-items:center;gap:8px }
.rheinkm-land-wrap .f-in    { flex:1;min-width:0 }
.f-sel--land                { width:74px;padding:0 4px;font-size:11px;flex-shrink:0;
                              border-color:rgba(0,150,199,.35);color:rgba(0,200,220,.85) }
.f-sel--land:focus          { border-color:var(--blue);box-shadow:0 0 0 2px rgba(0,150,199,.15) }
.f-flag-inline              { font-size:20px;line-height:1;flex-shrink:0 }
/* Gewässer-Custom-Input-Wrap — erbt .form-group Abstände */
#f-gewaesser-name-wrap      { /* shown/hidden via JS */ }

/* Uhrzeit: AM/PM ausblenden (WebKit/Blink) */
.f-in--time::-webkit-datetime-edit-ampm-field { display:none }

/* Collapsible sections */
.form-sec-title.collapsible { cursor:pointer;user-select:none;display:flex;align-items:center;justify-content:space-between;transition:color .2s }
.form-sec-title.collapsible:hover { color:var(--cyan) }
.collapse-arrow { font-size:9px;opacity:.55;transition:transform .25s;margin-left:6px;flex-shrink:0 }
.form-sec-title.collapsible.open .collapse-arrow { transform:rotate(90deg) }

/* ── NEW LAYOUT ZONES (v00-5) ── */
.logbook-donut-zone {
  display:grid;grid-template-columns:7fr 3fr;gap:12px;align-items:start;
}
/* Gewässerverlauf (2fr) + Rekord-Tafeln (1fr) nebeneinander */
.gw-rekord-row {
  display:grid;grid-template-columns:2fr 1fr;gap:12px;align-items:stretch;
}
.gw-rekord-row > .panel { display:flex;flex-direction:column }
.fish-donut-zone {
  display:grid;grid-template-columns:310px 1fr;gap:12px;align-items:stretch;
}
.gw-rekord-row .fish-donut-zone {
  grid-template-columns:1fr;
}
.gw-rekord-row .fish-cards-grid {
  grid-template-columns:repeat(2,1fr);
}
.fish-cards-grid {
  display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:1fr;gap:10px;
}
.analyse-zone {
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:auto auto;
  gap:12px;
}
/* Col 1 Row 1: Forecast */
.analyse-zone > :nth-child(1) { grid-column:1;grid-row:1;overflow:hidden }
/* Col 1 Row 2: Bedingungsanalyse */
.analyse-zone > :nth-child(2) { grid-column:1;grid-row:2 }
/* Col 2 Row 1: Moon+Wind */
.analyse-zone > :nth-child(3) { grid-column:2;grid-row:1;align-self:stretch }
.analyse-zone > :nth-child(3).moon-wind-duo { margin-bottom:0;height:100%;align-content:stretch }
/* Col 2 Row 2: Beißprognose Sonar */
.analyse-zone > :nth-child(4) { grid-column:2;grid-row:2;align-self:start }
.analyse-zone > :nth-child(4) .sonar-wrap  { width:150px;height:150px }
.analyse-zone > :nth-child(4) .sonar-sweep { width:75px;height:75px }
.analyse-zone > :nth-child(4) .sonar-sweep-line { width:75px }
.analyse-zone > :nth-child(4) .sonar-sweep-grad { width:75px;height:75px }
.analyse-zone > :nth-child(4) .sonar-content { padding:14px 4px 12px }
.gauge-row {
  display:grid;grid-template-columns:repeat(5,1fr);gap:12px;
}
.moon-wind-duo {
  display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px;
}
.moon-wind-duo .moon-panel  { padding:12px }
.moon-wind-duo .moon-orbit  { width:64px;height:64px;flex-shrink:0 }
.moon-wind-duo .moon-body   { width:42px;height:42px }
.moon-wind-duo .moon-shadow { width:42px;height:42px }
.moon-wind-duo .moon-name   { font-size:12px }
.moon-wind-duo .moon-data   { font-size:9px }

/* Count-up elements */
.count-up { transition:opacity .3s }


/* ═══════════════════════════════════════════════════════
   6. MEINE FÄNGE PAGE
═══════════════════════════════════════════════════════ */

/* Filter bar */
.filter-bar {
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:12px 16px;
}
.filter-label { font-size:9px;text-transform:uppercase;letter-spacing:.18em;color:var(--cyan);opacity:.7;white-space:nowrap }
.filter-bar .f-in, .filter-bar .f-sel {
  padding:7px 11px;font-size:12px;
}
.filter-bar .f-in[type=date] { color-scheme:dark;min-width:140px }
.filter-bar .f-sel { min-width:130px }
.filter-btn {
  padding:7px 16px;border-radius:3px;
  font-family:'Rajdhani',sans-serif;font-size:12px;font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;cursor:pointer;border:1px solid;
  transition:background .2s,color .2s;
}
.filter-apply { background:var(--cyan);border-color:var(--cyan);color:var(--bg) }
.filter-apply:hover { background:var(--cyan2);border-color:var(--cyan2) }
.filter-reset { background:transparent;border-color:var(--border);color:var(--text-dim) }
.filter-reset:hover { border-color:var(--warn);color:var(--warn) }
.filter-count { margin-left:auto;font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--text-dim);white-space:nowrap }
.filter-count strong { color:var(--cyan) }

/* Stats strip */
.stats-strip { display:grid;grid-template-columns:repeat(4,1fr);gap:10px }
.stat-card   { background:var(--bg2);border:1px solid var(--border);border-radius:4px;padding:14px 16px;display:flex;flex-direction:column;gap:4px }
.stat-n      { font-family:'Rajdhani',sans-serif;font-size:28px;font-weight:700;color:var(--cyan);line-height:1;letter-spacing:.02em }
.stat-l      { font-size:9px;text-transform:uppercase;letter-spacing:.16em;color:var(--text-dim) }

/* Record banner */
.record-banner {
  padding:20px 24px;display:flex;align-items:center;gap:24px;flex-wrap:wrap;
  background:var(--bg2);border:1px solid var(--border);border-radius:4px;
  position:relative;overflow:hidden;
}
.record-banner::before {
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 100% at 0% 50%,rgba(var(--rec-rgb),.08),transparent);
}
.record-banner>* { position:relative;z-index:1 }
.rec-badge { font-size:9px;text-transform:uppercase;letter-spacing:.2em;color:var(--text-faint);margin-bottom:2px }
.rec-art   { font-family:'Rajdhani',sans-serif;font-size:32px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1 }
.rec-kg    { font-family:'Rajdhani',sans-serif;font-size:56px;font-weight:700;letter-spacing:-.02em;line-height:1 }
.rec-kg small { font-size:22px;font-weight:300;color:var(--text-dim) }
.rec-meta  { display:flex;flex-direction:column;gap:6px;flex:1 }
.rec-tags  { display:flex;flex-wrap:wrap;gap:6px }
.rec-tag   { font-size:9px;padding:3px 8px;border-radius:2px;border:1px solid var(--border);color:var(--text-dim);background:var(--cyan-dim);text-transform:uppercase;letter-spacing:.06em }

/* Meine Fänge: Sidebar-Layout */
.mf-layout  { display:grid;grid-template-columns:220px 1fr;gap:16px;align-items:start }
.mf-sidebar { position:sticky;top:16px }
.filter-sidebar-form { display:flex;flex-direction:column;gap:8px;padding:12px 14px }
.fsf-group  { display:flex;flex-direction:column;gap:4px }

/* Spotlight Overlay */
.sl-overlay {
  display:none;position:fixed;inset:0;z-index:9999;
  background:rgba(2,8,18,.88);backdrop-filter:blur(6px);
  align-items:center;justify-content:center;padding:20px;
}
.sl-overlay.open { display:flex }
.sl-box {
  display:grid;grid-template-columns:1fr 1fr;
  max-width:1200px;width:100%;max-height:92vh;
  background:var(--bg2);border:1px solid var(--border);border-radius:6px;
  overflow:hidden;position:relative;
}
.sl-close {
  position:absolute;top:14px;right:18px;z-index:2;
  background:none;border:none;color:var(--text-dim);font-size:28px;
  cursor:pointer;line-height:1;padding:0;transition:color .15s;
}
.sl-close:hover { color:var(--text) }
.sl-photo {
  position:relative;overflow:hidden;background:rgba(0,0,0,.4);
  min-height:420px;display:flex;align-items:center;justify-content:center;
}
.sl-photo img { width:100%;height:100%;object-fit:cover;display:block }
.sl-photo-ph { display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--text-faint);font-size:11px }
.sl-info { padding:36px 32px;overflow-y:auto;display:flex;flex-direction:column;gap:14px }
.sl-badge { font-size:9px;text-transform:uppercase;letter-spacing:.22em;color:var(--text-faint) }
.sl-art   { font-family:'Rajdhani',sans-serif;font-size:48px;font-weight:700;text-transform:uppercase;line-height:1 }
.sl-dt    { font-size:13px;color:var(--text-dim);letter-spacing:.04em }
.sl-laenge { font-family:'Rajdhani',sans-serif;font-size:72px;font-weight:700;line-height:1 }
.sl-laenge small { font-size:24px;font-weight:300;color:var(--text-dim) }
.sl-tags  { display:flex;flex-wrap:wrap;gap:6px }
.sl-tag   { font-size:10px;padding:4px 10px;border-radius:2px;border:1px solid var(--border);color:var(--text-dim);background:var(--cyan-dim);text-transform:uppercase;letter-spacing:.06em }
.sl-tag--tz { border-color:rgba(var(--sl-tz-rgb),.3);color:var(--sl-tz-color);background:rgba(var(--sl-tz-rgb),.07) }
.sl-section { font-size:12px;color:var(--text-dim);line-height:1.8;border-top:1px solid var(--border);padding-top:10px }
.sl-section strong { color:var(--text);font-weight:500;font-size:9px;text-transform:uppercase;letter-spacing:.14em;display:block;margin-bottom:4px }
.sl-notiz { font-size:12px;color:var(--text-dim);font-style:italic;border-top:1px solid var(--border);padding-top:10px }
.sl-id    { font-size:10px;color:var(--text-faint);margin-top:auto;padding-top:10px }

/* Catch cards grid */
.cards-grid  { display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px }
.catch-card  { background:var(--bg2);border:1px solid var(--border);border-radius:4px;overflow:hidden;display:flex;flex-direction:column;transition:border-color .2s,box-shadow .2s }
.catch-card:hover { border-color:rgba(var(--cc-rgb),.45);box-shadow:0 0 20px rgba(var(--cc-rgb),.07) }
.card-accent { height:3px }
.card-photo  { width:100%;aspect-ratio:4/3;overflow:hidden;flex-shrink:0;background:rgba(0,0,0,.3);position:relative }
.card-photo img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block }
.card-photo-ph { position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:rgba(255,255,255,.08);font-size:8px;text-transform:uppercase;letter-spacing:.12em }
.card-body   { padding:16px;display:flex;flex-direction:column;gap:10px;flex:1 }
.card-art    { font-family:'Rajdhani',sans-serif;font-size:22px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1 }
.card-dt     { font-size:10px;color:var(--text-dim);letter-spacing:.06em }
.card-metrics { display:flex;gap:10px;flex-wrap:wrap }
.metric-box  { background:var(--bg3);border:1px solid var(--border);border-radius:3px;padding:8px 14px;display:flex;flex-direction:column;align-items:center;min-width:80px }
.metric-n    { font-family:'Rajdhani',sans-serif;font-size:24px;font-weight:700;line-height:1 }
.metric-u    { font-size:9px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.1em }
.card-tags   { display:flex;flex-wrap:wrap;gap:4px }
.card-tag    { font-size:9px;padding:2px 7px;border-radius:2px;border:1px solid var(--border);color:var(--text-dim);background:rgba(0,245,212,.05);text-transform:uppercase;letter-spacing:.05em }
.card-tag--tz { border-color:rgba(var(--tz-rgb),.4);color:var(--tz-color);background:rgba(var(--tz-rgb),.08) }
.card-pegel  { display:flex;flex-wrap:wrap;gap:8px;padding:8px 10px;border-radius:3px;background:rgba(0,150,199,.07);border:1px solid rgba(0,150,199,.2);font-size:10px;color:var(--text-dim);letter-spacing:.04em }
.card-pegel span { white-space:nowrap }
.card-wetter { display:flex;flex-wrap:wrap;gap:6px 10px;padding:7px 10px;border-radius:3px;background:rgba(96,165,250,.06);border:1px solid rgba(96,165,250,.2);font-size:10px;color:rgba(147,197,253,.7);letter-spacing:.04em }
.card-wetter span { white-space:nowrap }
.card-wetter-lage { font-style:italic }
.card-notiz  { font-size:11px;color:var(--text-dim);margin:0 14px 8px;padding:6px 10px;border-radius:2px;border-left:2px solid rgba(var(--cc-rgb),.4);background:rgba(var(--cc-rgb),.04);font-style:italic;line-height:1.5 }
.card-footer { display:flex;justify-content:space-between;align-items:center;padding:8px 16px;border-top:1px solid var(--border);font-size:9px;color:var(--text-faint);letter-spacing:.1em;margin-top:auto }

/* ── Card: Header strip (Gewässer + Ort + Datum) ── */
.card-header  { display:flex;justify-content:space-between;align-items:center;padding:9px 14px;background:rgba(0,0,0,.22);border-bottom:1px solid rgba(var(--cc-rgb),.14);gap:10px;min-height:50px }
.card-hd-left { flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:2px }
.card-hd-gw   { font-family:'Rajdhani',sans-serif;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.card-hd-ort  { font-size:9px;color:var(--text-faint);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.card-hd-date { font-size:10px;color:var(--text-dim);letter-spacing:.06em;white-space:nowrap;flex-shrink:0 }

/* ── Card: PB badge (overlaid on photo) ── */
.card-pb-badge { position:absolute;bottom:8px;right:8px;font-family:'Rajdhani',sans-serif;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:3px 8px;background:rgba(251,191,36,.15);border:1px solid rgba(251,191,36,.55);color:var(--gold);border-radius:2px;z-index:1 }

/* ── Card: Species + size row ── */
.card-species-row { display:flex;justify-content:space-between;align-items:baseline;padding:11px 14px 6px;gap:8px }
.card-stats-chips { display:flex;gap:8px;flex-shrink:0;align-items:baseline }
.card-stat-chip   { font-family:'Rajdhani',sans-serif;font-size:14px;font-weight:600;letter-spacing:.06em;color:var(--text-dim) }

/* ── Card: Compact env + bait chip row ── */
.card-env-row  { display:flex;flex-wrap:wrap;gap:4px;padding:0 14px 10px }
.card-env-chip { font-size:9px;padding:2px 7px;border-radius:2px;border:1px solid var(--border);color:var(--text-dim);background:rgba(0,245,212,.04);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap }
.card-env-chip--tz { border-color:rgba(var(--tz-rgb),.4);color:var(--tz-color);background:rgba(var(--tz-rgb),.08) }

/* ── Gewässer-Tag in Karte ── */
.card-tag--gewaesser {
  border-color:rgba(0,150,199,.5);
  color:var(--blue);
  background:rgba(0,150,199,.1);
}

/* ── Gewässer-Tag im Spotlight ── */
.sl-tag--gewaesser {
  border-color:rgba(0,150,199,.5);
  color:var(--blue);
  background:rgba(0,150,199,.1);
}

/* ── Card: Länge + Gewässer/Ort-Zeile ── */
.card-metrics-row {
  display:flex;
  align-items:flex-end;   /* Unterkanten bündig */
  gap:10px;
  width:100%;
}
.card-geo {
  flex:1;
  display:flex;flex-direction:column;justify-content:flex-end;
  min-width:0;
  text-align:right;
}
.card-geo-gw {
  font-family:'Rajdhani',sans-serif;
  font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--blue);line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.card-geo-ort {
  font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-faint);line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ── Card: Pegel+Wetter gruppiert (Abstand zu Tags) ── */
.card-env { display:flex;flex-direction:column;gap:4px;margin-top:8px }

/* Team-Karte: etwas kleinere Metriken */
.metric-box--sm .metric-n { font-size:24px !important }
.card-metrics-row--team { gap:6px }

/* Team: Fischart + Angler in einer Zeile */
.card-art-angler-row {
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
}
.card-angler-name {
  font-family:'JetBrains Mono',monospace;
  font-size:9px;color:var(--text-dim);letter-spacing:.08em;
  white-space:nowrap;flex-shrink:0;
}

/* Pegel/Wetter-Font kleiner → kein Umbruch */
.card-pegel { font-size:9px }
.card-wetter { font-size:9px }

/* Empty state */
.empty-state { padding:60px 20px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px }
.empty-icon  { font-size:40px;opacity:.3 }
.empty-t     { font-family:'Rajdhani',sans-serif;font-size:18px;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.1em }
.empty-s     { font-size:11px;color:var(--text-faint);line-height:1.6 }


/* ═══════════════════════════════════════════════════════
   7. TEAM PAGE
═══════════════════════════════════════════════════════ */
.team-hero     { display:grid;grid-template-columns:320px 1fr 220px;min-height:240px }
.team-logo-side {
  display:flex;align-items:center;justify-content:center;
  padding:16px 24px 16px 8px;
  border-left:1px solid var(--border);
  background:rgba(0,245,212,.015);
}
.team-logo-wrap {
  width:192px;height:192px;
  flex:0 0 192px;
  border-radius:50%;overflow:hidden;
  border:2px solid rgba(0,245,212,.3);
  box-shadow:0 0 40px rgba(0,245,212,.45),0 0 12px rgba(0,245,212,.2),inset 0 0 20px rgba(0,245,212,.04);
  animation:logo-pulse 4s ease-in-out infinite;
  transition:transform .3s;
}
.team-logo-wrap:hover {
  transform:scale(1.04);
}
.team-logo-wrap img {
  width:100%;height:100%;
  object-fit:cover;display:block;
}
.team-photo-side { position:relative;overflow:hidden;border-right:1px solid var(--border) }
.team-photo-side img { width:100%;height:100%;object-fit:contain;display:block;background:rgba(0,0,0,.4) }
.team-photo-ph { width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--text-faint);background:rgba(0,0,0,.2) }
.team-photo-ph svg  { opacity:.3 }
.team-photo-ph span { font-size:9px;text-transform:uppercase;letter-spacing:.15em;opacity:.5 }
.team-info-side { padding:28px 32px;display:flex;flex-direction:column;justify-content:center;gap:16px }
.team-badge { font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--cyan);opacity:.7 }
.team-name  { font-family:'Rajdhani',sans-serif;font-size:42px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:.95;color:var(--text) }
.team-name span { color:var(--cyan) }
.team-motto { font-size:10px;color:var(--text-dim);letter-spacing:.12em }
.team-kpis  { display:flex;gap:0;margin-top:4px }
.kpi-box    { padding:12px 24px 10px 0;display:flex;flex-direction:column;gap:3px }
.kpi-box + .kpi-box { padding-left:24px;border-left:1px solid var(--border) }
.kpi-n      { font-family:'Rajdhani',sans-serif;font-size:32px;font-weight:700;color:var(--cyan);line-height:1 }
.kpi-l      { font-size:8px;text-transform:uppercase;letter-spacing:.18em;color:var(--text-dim) }

/* Team mid-row: 50/50 two-column layout */
.mid-row { display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch }

/* Funny stats */
.funny-row  { display:grid;grid-template-columns:repeat(5,1fr);gap:10px }
.funny-card { background:var(--bg2);border:1px solid var(--border);border-radius:4px;padding:14px 14px 16px;position:relative;overflow:hidden }
.funny-card::before { content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--gold),transparent) }
.funny-card-icon  { font-size:20px;margin-bottom:8px }
.funny-card-title { font-family:'Rajdhani',sans-serif;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:6px;line-height:1.2 }
.funny-card-text  { font-size:10px;color:var(--text-dim);line-height:1.5;letter-spacing:.03em }

/* Spotlight carousel */
.spotlight-stage { position:relative;overflow:hidden;height:260px }
.spotlight-card  { position:absolute;inset:0;display:flex;gap:0;opacity:0;transition:opacity .7s ease;pointer-events:none }
.spotlight-card.active { opacity:1;pointer-events:auto }
.spotlight-photo { width:180px;flex-shrink:0;overflow:hidden;background:rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;border-right:1px solid var(--border) }
.spotlight-photo img { width:100%;height:100%;object-fit:contain;display:block }
.spotlight-av    { width:80px;height:80px;border-radius:50%;background:var(--cyan-dim);border:2px solid rgba(0,245,212,.3);display:flex;align-items:center;justify-content:center;font-family:'Rajdhani',sans-serif;font-size:28px;font-weight:700;color:var(--cyan) }
.spotlight-info  { flex:1;padding:24px 20px;display:flex;flex-direction:column;justify-content:center;gap:10px }
.sp-name         { font-family:'Rajdhani',sans-serif;font-size:28px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text);line-height:1 }
.sp-username     { font-size:10px;color:var(--text-faint);letter-spacing:.1em }
.sp-best         { display:flex;align-items:baseline;gap:6px }
.sp-best-n       { font-family:'Rajdhani',sans-serif;font-size:22px;font-weight:700;color:var(--cyan) }
.sp-best-u       { font-size:10px;color:var(--text-dim) }
.sp-best-art     { font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim) }
.sp-count        { font-size:10px;color:var(--text-faint);letter-spacing:.08em }
.sp-lastseen     { font-size:10px;color:var(--text-faint);letter-spacing:.06em;margin-top:2px;opacity:.7 }
.spotlight-nav   { display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border-top:1px solid var(--border) }
.sp-dot          { width:8px;height:8px;border-radius:50%;background:var(--border);cursor:pointer;transition:background .2s,transform .2s;border:none;padding:0 }
.sp-dot.active   { background:var(--cyan);transform:scale(1.2) }

/* Quotes */
.quotes-inner { display:flex;flex-direction:column;gap:0 }
.quote-item   { padding:14px 18px;border-bottom:1px solid var(--border);display:flex;gap:12px;align-items:flex-start }
.quote-item:last-child { border-bottom:none }
.quote-mark   { font-family:'Rajdhani',sans-serif;font-size:32px;font-weight:700;color:var(--cyan);opacity:.3;line-height:.9;flex-shrink:0;margin-top:-4px }
.quote-text   { font-size:11px;color:var(--text-dim);line-height:1.6;letter-spacing:.03em;font-style:italic }

/* Angler badge on team catch cards */
.card-angler { display:inline-flex;align-items:center;gap:4px;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);background:var(--cyan-dim);border:1px solid rgba(0,245,212,.2);border-radius:2px;padding:2px 7px;font-weight:400 }

/* ─── Team Fang-Chronik: Carousel Tabs ─────────────────── */
.team-carousel-tabs { display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding-bottom:10px }
.tct-label { font-size:9px;color:var(--text-faint);letter-spacing:.15em;margin-right:6px;flex-shrink:0 }
.tct-tab {
  font-size:10px;letter-spacing:.08em;color:var(--text-dim);
  background:var(--bg2);border:1px solid var(--border);border-radius:3px;
  padding:5px 14px;cursor:pointer;transition:color .15s,border-color .15s,background .15s;
}
.tct-tab:hover { color:var(--text);border-color:rgba(0,245,212,.3) }
.tct-tab.active { color:var(--cyan);border-color:rgba(0,245,212,.45);background:var(--cyan-dim) }

/* ─── Team Filter Bar ──────────────────────────────────── */
.team-filter-bar {
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  background:var(--bg2);border:1px solid var(--border);
  border-radius:8px;padding:10px 16px;margin-bottom:12px;
  max-width:calc(100% - 222px); /* ends at 2nd-to-last card column */
}
.tf-label { font-size:9px;color:var(--text-faint);letter-spacing:.15em;flex-shrink:0;margin-right:4px }
.tf-ctrl {
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.04em;
  color:var(--text-dim);background:var(--bg3);border:1px solid var(--border);
  border-radius:3px;padding:5px 8px;outline:none;cursor:pointer;
  transition:border-color .15s,color .15s;
}
.tf-ctrl:hover,.tf-ctrl:focus { border-color:rgba(0,245,212,.35);color:var(--text) }
.tf-reset {
  font-size:9px;letter-spacing:.1em;color:var(--text-faint);
  background:none;border:1px solid var(--border);border-radius:3px;
  padding:5px 10px;cursor:pointer;transition:color .15s,border-color .15s;text-transform:uppercase;
}
.tf-reset:hover { color:var(--cyan);border-color:rgba(0,245,212,.4) }
.tf-count { font-size:9px;color:var(--text-faint);letter-spacing:.1em;margin-left:auto }

/* ─── Team cards grid (narrower columns = more per row) ── */
.cards-grid--team { display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px }

/* Top catches table */
.top-table    { width:100%;border-collapse:collapse }
.top-table th { font-size:8px;text-transform:uppercase;letter-spacing:.18em;color:var(--text-faint);padding:8px 14px;text-align:left;border-bottom:1px solid var(--border);font-weight:400 }
.top-table td { padding:10px 14px;border-bottom:1px solid var(--border);font-size:11px;color:var(--text-dim) }
.top-table tr:last-child td { border-bottom:none }
.top-table tr:hover td      { background:rgba(0,245,212,.02) }
.top-rank   { font-family:'Rajdhani',sans-serif;font-size:18px;font-weight:700;color:var(--text-faint) }
.top-rank.gold   { color:var(--gold) }
.top-rank.silver { color:#94a3b8 }
.top-rank.bronze { color:#b07d4a }
.top-art    { font-family:'Rajdhani',sans-serif;font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase }
.top-angler { font-family:'Rajdhani',sans-serif;font-size:14px;font-weight:600;color:var(--text) }
.top-tag    { display:inline-block;font-size:8px;letter-spacing:.1em;text-transform:uppercase;padding:2px 6px;border:1px solid var(--border);border-radius:2px;color:var(--text-dim);background:rgba(0,0,0,.2) }


/* ═══════════════════════════════════════════════════════
   8. LOGIN PAGE
═══════════════════════════════════════════════════════ */
body.page-login::before {
  background:
    radial-gradient(ellipse 80% 50% at 50% 120%, #0d3a5c55 0%, transparent 70%),
    radial-gradient(ellipse 40% 30% at 20% 80%, #0a2a4022 0%, transparent 60%);
  animation:none;
}

.login-page {
  position:relative;z-index:1;min-height:100vh;
  display:grid;grid-template-rows:1fr auto;place-items:center;padding:2rem 1rem;
}
.login-card {
  width:100%;max-width:336px;
  background:rgba(17,24,32,0.96);border:1px solid #1e2d3d;border-radius:2px;
  padding:2rem;
  box-shadow:0 0 0 1px #ffffff04,0 24px 64px #00000088,0 0 80px #0d3a5c22,0 8px 32px rgba(0,0,0,0.75);
  animation:fadeUp .4s ease both;
  position:relative;z-index:1;
}
@keyframes fadeUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }

.view         { display:none }
.view.active  { display:block }

.logo         { display:flex;align-items:center;gap:.75rem;margin-bottom:2rem }
.logo-text    { font-family:'Rajdhani',sans-serif;font-size:1.5rem;font-weight:700;letter-spacing:.08em;color:var(--cyan);text-shadow:0 0 16px rgba(0,245,212,.4) }
.logo-sub     { font-size:.6rem;color:var(--text-dim);letter-spacing:.15em;text-transform:uppercase;display:block;margin-top:2px }

.login-card h1 {
  font-family:'Rajdhani',sans-serif;font-size:1rem;font-weight:600;color:var(--text-dim);
  margin-bottom:1.75rem;padding-bottom:1.25rem;border-bottom:1px solid #1e2d3d;letter-spacing:.1em;text-transform:uppercase;
}

/* Login Alerts */
.alert-login-error   { padding:.75rem 1rem;border-radius:2px;font-size:.75rem;margin-bottom:1.25rem;letter-spacing:.02em;line-height:1.5;background:#2a1010;border:1px solid #4a1515;color:#ff8888 }
.alert-login-info    { padding:.75rem 1rem;border-radius:2px;font-size:.75rem;margin-bottom:1.25rem;letter-spacing:.02em;line-height:1.5;background:#0d2535;border:1px solid #1a3a5c;color:#6aacdd }
.alert-login-success { padding:.75rem 1rem;border-radius:2px;font-size:.75rem;margin-bottom:1.25rem;letter-spacing:.02em;line-height:1.5;background:#0d2520;border:1px solid #1a4a38;color:#4ecda0 }

.field { margin-bottom:1.25rem }
.login-card label {
  display:block;font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(180,220,240,.75);margin-bottom:.5rem;
}
.login-card input[type="text"],
.login-card input[type="password"],
.login-card input[type="email"],
.login-card select {
  width:100%;background:var(--bg);border:1px solid #2a3f55;
  color:var(--text);font-family:'JetBrains Mono',monospace;font-size:.85rem;
  padding:.7rem .9rem;border-radius:2px;outline:none;
  transition:border-color .2s,box-shadow .2s;caret-color:var(--cyan);
}
.login-card select { appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2300f5d4' opacity='.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .9rem center }
.login-card select option { background:#0d1117;color:var(--text) }
.login-card input:focus,
.login-card select:focus { border-color:rgba(0,150,199,.5);box-shadow:0 0 0 3px rgba(0,150,199,.1) }
.login-card input.invite-field:focus { border-color:rgba(0,245,212,.4);box-shadow:0 0 0 3px rgba(0,245,212,.07) }
.login-card input::placeholder { color:rgba(180,220,240,.45) }
.pending-icon { font-size:2rem;margin-bottom:.5rem }

.invite-wrap { position:relative }
.invite-wrap::before { content:'🔑';position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:.8rem;opacity:.4;pointer-events:none }
.invite-wrap input { padding-right:2rem }

.btn-primary {
  width:100%;margin-top:.5rem;padding:.8rem;
  background:var(--blue-dim);border:1px solid var(--blue);
  color:var(--blue);font-family:'JetBrains Mono',monospace;
  font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;
  cursor:pointer;border-radius:2px;
  transition:background .2s,color .2s,box-shadow .2s;
  position:relative;overflow:hidden;
}
.btn-primary:hover { background:var(--blue);color:var(--bg);box-shadow:0 0 24px rgba(0,150,199,.35) }
.btn-primary:active { transform:translateY(1px) }
.btn-primary.btn-cyan { background:var(--cyan-dim);border-color:var(--cyan);color:var(--cyan) }
.btn-primary.btn-cyan:hover { background:var(--cyan);color:var(--bg);box-shadow:0 0 24px rgba(0,245,212,.3) }

.ripple { position:absolute;border-radius:50%;background:#ffffff30;transform:scale(0);animation:btnRipple .5s linear;pointer-events:none }
@keyframes btnRipple { to { transform:scale(4);opacity:0 } }

.switch-row {
  margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid #1e2d3d;
  text-align:center;font-size:.7rem;color:#4a6070;letter-spacing:.05em;
}
.switch-row a { color:var(--blue);text-decoration:none;cursor:pointer;transition:color .15s }
.switch-row a:hover { color:var(--cyan) }
.login-footer { font-size:.65rem;color:#4a6070;letter-spacing:.05em;display:flex;justify-content:space-between;align-items:center;margin-top:2rem;padding-top:1.25rem;border-top:1px solid #1e2d3d }
.page-footer  { font-size:.6rem;color:#1e2d3d;letter-spacing:.1em;text-align:center;padding:1rem }
.opt-hint     { font-size:.6rem;color:#4a6070;letter-spacing:.08em;margin-left:.4rem }


/* ═══════════════════════════════════════════════════════
   9. ADMIN PAGE
═══════════════════════════════════════════════════════ */
.a-panel      { background:var(--bg2);border:1px solid var(--border);border-radius:4px;overflow:hidden }
.a-panel-hd   { padding:14px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:rgba(0,0,0,.2) }
.a-panel-title { font-family:'Rajdhani',sans-serif;font-size:14px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold) }
.a-panel-body { padding:20px }
.a-form       { display:flex;flex-direction:column;gap:12px }
.a-row        { display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap }
.a-group      { display:flex;flex-direction:column;gap:5px;flex:1;min-width:160px }
.a-lbl        { font-size:8px;text-transform:uppercase;letter-spacing:.18em;color:var(--text-faint) }
.a-in,.a-sel,.a-ta {
  background:var(--bg);border:1px solid var(--border);border-radius:3px;
  color:var(--text);font-family:'JetBrains Mono',monospace;font-size:11px;
  padding:7px 10px;outline:none;transition:border-color .2s;width:100%;
}
.a-ta { resize:vertical;min-height:60px }
.a-in:focus,.a-sel:focus,.a-ta:focus { border-color:rgba(0,245,212,.4) }
.a-file { background:var(--bg);border:1px solid var(--border);border-radius:3px;color:var(--text-dim);font-family:'JetBrains Mono',monospace;font-size:10px;padding:6px 10px;cursor:pointer;width:100% }
.a-btn      { padding:7px 16px;border:1px solid var(--cyan);border-radius:3px;background:var(--cyan-dim);color:var(--cyan);font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s;white-space:nowrap }
.a-btn:hover { background:var(--cyan);color:var(--bg) }
.a-btn-warn  { border-color:var(--warn);background:rgba(255,107,53,.06);color:var(--warn) }
.a-btn-warn:hover { background:var(--warn);color:#fff }
.a-btn-gold  { border-color:var(--gold);background:rgba(251,191,36,.06);color:var(--gold) }
.a-btn-gold:hover { background:var(--gold);color:var(--bg) }
.a-btn:disabled { opacity:.4;cursor:not-allowed;pointer-events:none }

/* ── Admin Filter Bar ── */
.admin-filter-bar        { padding:10px 16px;border-bottom:1px solid var(--border);background:rgba(0,0,0,.15) }
.admin-filter-row        { display:flex;flex-wrap:wrap;gap:8px 12px;align-items:flex-end }
.admin-filter-group      { display:flex;flex-direction:column;gap:3px }
.admin-filter-lbl        { font-size:8px;color:var(--text-faint);letter-spacing:.1em;text-transform:uppercase }
.admin-filter-sel        { background:var(--bg);border:1px solid var(--border);border-radius:3px;
                           color:var(--text-dim);font-family:'JetBrains Mono',monospace;font-size:10px;
                           padding:3px 8px;min-width:90px }
.admin-filter-sel:focus  { border-color:var(--cyan);outline:none }
.admin-filter-date       { background:var(--bg);border:1px solid var(--border);border-radius:3px;
                           color:var(--text-dim);font-family:'JetBrains Mono',monospace;font-size:10px;
                           padding:3px 8px;width:120px }
.admin-filter-date:focus { border-color:var(--cyan);outline:none }

/* ── Admin Bulk Action Bar ── */
.admin-bulk-bar          { padding:8px 16px;border-bottom:1px solid var(--border);
                           background:rgba(0,0,0,.1);
                           display:flex;align-items:center;justify-content:space-between;
                           flex-wrap:wrap;gap:8px }
.admin-bulk-actions      { display:flex;gap:8px;align-items:center;flex-wrap:wrap }
.admin-bulk-info         { font-size:8.5px;color:rgba(251,191,36,.7);letter-spacing:.04em }

/* ── Env Status Dots ── */
.env-dot                 { font-size:11px;line-height:1 }
.env-dot--full           { color:#3fb950 }
.env-dot--part           { color:var(--gold) }
.env-dot--none           { color:var(--text-faint) }
.env-dot--skip           { color:var(--text-faint) }
.env-dot--err            { color:var(--red) }

.team-foto-wrap    { display:grid;grid-template-columns:200px 1fr;gap:20px;align-items:start }
.team-foto-preview { width:200px;aspect-ratio:4/3;border:1px solid var(--border);border-radius:3px;overflow:hidden;background:rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center }
.team-foto-preview img { width:100%;height:100%;object-fit:contain;display:block }
.team-foto-ph { color:var(--text-faint);font-size:9px;text-align:center;letter-spacing:.1em }

.user-grid  { display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px }
.user-card  { background:var(--bg);border:1px solid var(--border);border-radius:3px;overflow:hidden }
.user-card-photo { width:100%;aspect-ratio:1;background:rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;overflow:hidden }
.user-card-photo img { width:100%;height:100%;object-fit:contain;display:block }
.user-av    { width:56px;height:56px;border-radius:50%;background:var(--cyan-dim);border:1px solid rgba(0,245,212,.3);display:flex;align-items:center;justify-content:center;font-family:'Rajdhani',sans-serif;font-size:20px;font-weight:700;color:var(--cyan) }
.user-card-body    { padding:10px 12px }
.user-card-name    { font-family:'Rajdhani',sans-serif;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text) }
.user-card-un      { font-size:9px;color:var(--text-faint);letter-spacing:.08em;margin-bottom:8px }
.user-card-role    { display:inline-block;font-size:7px;letter-spacing:.14em;text-transform:uppercase;padding:2px 6px;border-radius:2px;margin-bottom:8px }
.role-admin { border:1px solid rgba(251,191,36,.4);background:rgba(251,191,36,.06);color:var(--gold) }
.role-user  { border:1px solid var(--border);background:rgba(0,0,0,.2);color:var(--text-faint) }
.user-card-lastseen { font-size:9px;color:var(--text-faint);letter-spacing:.06em;margin-bottom:8px }
.user-card-actions { display:flex;flex-direction:column;gap:6px }

.c-table    { width:100%;border-collapse:collapse }
.c-table th { font-size:8px;text-transform:uppercase;letter-spacing:.15em;color:var(--text-faint);padding:6px 10px;text-align:left;border-bottom:1px solid var(--border);font-weight:400 }
.c-table td { padding:8px 10px;border-bottom:1px solid var(--border);vertical-align:middle }
.c-table tr:last-child td { border-bottom:none }
.c-check  { width:16px;height:16px;accent-color:var(--cyan);cursor:pointer }
.add-row  { background:rgba(0,245,212,.02);border-top:1px solid var(--border);padding:14px 20px }


/* ── RANGLISTEN MIX ── */
.rank-mix-grid {
  display:flex;flex-direction:column;gap:6px;padding:10px;
}
.rmi {
  background:rgba(0,245,212,.03);border:1px solid rgba(0,245,212,.08);
  border-radius:3px;padding:8px 10px;
}
.rmi-title {
  font-size:8px;text-transform:uppercase;letter-spacing:.14em;
  color:var(--cyan);margin-bottom:6px;padding-bottom:4px;
  border-bottom:1px solid rgba(0,245,212,.1);
}
.rmi-row {
  display:grid;grid-template-columns:16px 1fr auto;gap:5px;
  align-items:center;padding:3px 0;font-size:10.5px;
}
.rmi-pos   { color:var(--text-faint);font-size:8px;text-align:center }
.rmi-name  { color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.rmi-val   { color:var(--cyan);font-size:11px;font-weight:700;text-align:right }
.rmi-empty { color:var(--text-faint);font-size:9px;font-style:italic;padding:3px 0 }

/* ── CHART + HEATMAP ROW ── */
.chart-heatmap-row {
  display:grid;grid-template-columns:1fr;gap:12px;align-items:stretch;
}
.chart-heatmap-row > .panel {
  display:flex;flex-direction:column;
}

/* ═══════════════════════════════════════════════════════
   10. RESPONSIVE
═══════════════════════════════════════════════════════ */
@media(max-width:1400px) {
  .mast-coord { display:none }
}
@media(max-width:1200px) {
  .mid-zone         { grid-template-columns:1fr 1fr;grid-template-rows:auto auto }
  .right-col        { grid-column:span 1 }
  .gauge-col        { grid-row:2;grid-column:span 2;display:grid;grid-template-columns:repeat(3,1fr) }
  .sonar-panel      { grid-column:span 2;flex-direction:row;justify-content:center;gap:32px }
  .fish-donut-zone  { grid-template-columns:1fr }
  .analyse-zone     { grid-template-rows:auto auto }
  .gauge-row        { grid-template-columns:repeat(3,1fr) }
  .chart-heatmap-row { grid-template-columns:1fr }
}
@media(max-width:900px) {
  .status-bar       { grid-template-columns:repeat(3,1fr) }
  .gw-rekord-row    { grid-template-columns:1fr }
  .mid-zone         { grid-template-columns:1fr }
  .chart-zone       { grid-template-columns:1fr }
  .bottom-zone      { grid-template-columns:1fr }
  .bottom-trio      { grid-template-columns:1fr }
  .fish-strip       { grid-template-columns:1fr }
  .logbook-donut-zone { grid-template-columns:1fr }
  .analyse-zone     { grid-template-columns:1fr }
  .analyse-zone > :nth-child(1),
  .analyse-zone > :nth-child(2),
  .analyse-zone > :nth-child(3),
  .analyse-zone > :nth-child(4) { grid-column:1;grid-row:auto }
  .gauge-row        { grid-template-columns:repeat(2,1fr) }
  .moon-wind-duo    { grid-template-columns:1fr }
  .rank-zone        { grid-template-columns:1fr }
  .log-hd,.log-row  { grid-template-columns:40px 44px 1fr 72px }
  .log-hd>:nth-child(n+5),.log-row>:nth-child(n+5) { display:none }
  .mast-inner       { flex-wrap:wrap;height:auto;padding:8px 16px;gap:8px }
  .stats-strip      { grid-template-columns:repeat(3,1fr) }
  .funny-row        { grid-template-columns:repeat(3,1fr) }
  .mid-row          { grid-template-columns:1fr }
  .cta-duo          { grid-template-columns:1fr;grid-template-rows:auto }
  .cta-session-card { min-width:unset }
  .cta-strip        { flex-wrap:wrap }
  .cta-strip .cta-spacer { display:none }
}
@media(max-width:600px) {
  .status-bar       { grid-template-columns:repeat(2,1fr) }
  .fish-strip       { grid-template-columns:1fr }
  .form-row-2       { grid-template-columns:1fr }
  .form-group.full  { grid-column:span 1 }
  .stats-strip      { grid-template-columns:repeat(2,1fr) }
  .funny-row        { grid-template-columns:1fr 1fr }
  .gauge-row        { grid-template-columns:1fr 1fr }
  .hm-g             { min-width:0 }
}

/* ═══════════════════════════════════════════════════════
   MASTHEAD NAV (shared across all pages)
═══════════════════════════════════════════════════════ */
.mast-nav {
  display:flex;align-items:center;gap:2px;
}
.mast-nav-link {
  display:flex;align-items:center;
  padding:4px 10px;height:26px;
  font-family:'JetBrains Mono',monospace;
  font-size:9px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-dim);text-decoration:none;
  border:1px solid transparent;border-radius:3px;
  transition:color .2s,border-color .2s,background .2s;
  white-space:nowrap;
}
.mast-nav-link:hover {
  color:var(--text);
  border-color:var(--border);
}
.mast-nav-link.active {
  color:var(--cyan);
  border-color:rgba(0,245,212,.3);
  background:var(--cyan-dim);
}
/* SESSION link — always highlighted, never looks like a regular nav item */
.mast-nav-link--session {
  color:var(--cyan) !important;
  border-color:rgba(0,245,212,.35) !important;
  background:rgba(0,245,212,.06) !important;
  text-shadow:0 0 10px rgba(0,245,212,.3);
  font-weight:500;
}
.mast-nav-link--session:hover {
  background:rgba(0,245,212,.12) !important;
  border-color:var(--cyan) !important;
  box-shadow:0 0 14px rgba(0,245,212,.25);
  text-shadow:0 0 14px rgba(0,245,212,.6);
}
.mast-nav-link--session.active {
  background:rgba(0,245,212,.14) !important;
  border-color:var(--cyan) !important;
  box-shadow:0 0 16px rgba(0,245,212,.28);
}
@media(max-width:600px) {
  .mast-nav { gap:0 }
  .mast-nav-link { padding:4px 7px;font-size:8px;letter-spacing:.1em }
}

/* ═══════════════════════════════════════════════════════
   TIME TRACKER BUTTON (masthead — all pages)
═══════════════════════════════════════════════════════ */
.mast-timetracker {
  display:flex;align-items:center;gap:5px;
  padding:0 9px;height:26px;
  background:transparent;
  border:1px solid rgba(255,45,85,.35);border-radius:3px;
  color:rgba(255,45,85,.65);
  font-family:'JetBrains Mono',monospace;
  font-size:9px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;
  cursor:pointer;white-space:nowrap;flex-shrink:0;
  transition:color .2s,border-color .2s,background .2s,box-shadow .2s;
}
.mast-timetracker:hover {
  color:#ff2d55;
  border-color:rgba(255,45,85,.65);
  background:rgba(255,45,85,.06);
}
/* ACTIVE state — pulsing red glow */
.mast-timetracker.active {
  color:#ff2d55;
  border-color:#ff2d55;
  background:rgba(255,45,85,.1);
  animation:tt-pulse 1.6s ease-in-out infinite;
}
@keyframes tt-pulse {
  0%,100% {
    box-shadow:0 0 0 0 rgba(255,45,85,.5),
               0 0 8px rgba(255,45,85,.2);
  }
  50% {
    box-shadow:0 0 0 6px rgba(255,45,85,0),
               0 0 18px rgba(255,45,85,.45);
  }
}

/* ═══════════════════════════════════════════════════════
   MASTHEAD ADMIN + LOGOUT (shared CSS classes)
═══════════════════════════════════════════════════════ */
.mast-admin-link {
  display:flex;align-items:center;gap:4px;
  padding:0 9px;height:26px;
  border:1px solid rgba(251,191,36,.25);border-radius:3px;
  color:rgba(251,191,36,.6);text-decoration:none;
  font-family:'JetBrains Mono',monospace;font-size:9px;
  letter-spacing:.1em;text-transform:uppercase;
  transition:color .2s,border-color .2s;flex-shrink:0;cursor:pointer;
}
.mast-admin-link:hover { color:#fbbf24;border-color:rgba(251,191,36,.6) }
.mast-admin-link svg   { flex-shrink:0 }

.mast-logout-btn {
  display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;
  border:1px solid rgba(0,245,212,.15);border-radius:3px;
  color:rgba(200,240,235,.3);text-decoration:none;
  transition:color .2s,border-color .2s,background .2s;flex-shrink:0;
}
.mast-logout-btn:hover { color:#00f5d4;border-color:rgba(0,245,212,.5) }

/* ═══════════════════════════════════════════════════════
   SKIP TO CONTENT (accessibility)
═══════════════════════════════════════════════════════ */
.skip-to-content {
  position:absolute;top:-100px;left:16px;
  background:var(--cyan);color:var(--bg);
  font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  padding:8px 16px;border-radius:3px;z-index:10000;
  transition:top .15s;white-space:nowrap;
}
.skip-to-content:focus { top:8px;outline:none }

/* ═══════════════════════════════════════════════════════
   FOCUS VISIBLE (keyboard navigation)
═══════════════════════════════════════════════════════ */
:focus { outline:none }
:focus-visible {
  outline:2px solid var(--cyan);
  outline-offset:2px;
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE — CATCH-MODAL FORMULAR (Smartphone)
   600px → Phone
═══════════════════════════════════════════════════════ */
@media (max-width:600px) {

  /* Modal: enger Rand, mehr Platz für Formular */
  .modal-bg   { padding:6px }
  .modal-body { padding:14px;gap:12px }
  .modal-hd   { padding:10px 14px }

  /* Fischart-Inputs + Foto: untereinander statt nebeneinander */
  .fish-foto-grid { grid-template-columns:1fr !important }

  /* Fangzeit + Gewässer: untereinander */
  .zeit-gewaesser-grid { grid-template-columns:1fr }
  /* Rhein-KM + Flag: bleibt nebeneinander, Flag passt immer */

  /* Foto-Vorschau auf Mobile: weniger Höhe */
  .foto-preview { min-height:140px !important;aspect-ratio:unset !important }

  /* Notiz + Abruf-Button: untereinander */
  .notiz-fetch-row {
    grid-template-columns:1fr !important;
    min-height:unset !important;
  }
  /* Abruf-Button: horizontal statt vertikal, feste Höhe */
  .fetch-btn {
    flex-direction:row !important;
    min-height:44px;
    padding:10px 14px;
  }

  /* Formular-Sektions-Titel: etwas kleiner */
  .form-sec-title { font-size:10px;letter-spacing:.12em }

  /* Collapsible-Pfeil nicht abschneiden */
  .form-sec-title.collapsible { gap:8px }

  /* Submit-Button: etwas kompakter */
  .f-sub { padding:10px;font-size:13px }
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE — MEINE FÄNGE + SPOTLIGHT (Smartphone)
   768px → tablet / großes Phone
   480px → kleines Phone
═══════════════════════════════════════════════════════ */
@media (max-width:768px) {

  /* Shell: weniger Seitenabstand */
  .shell { padding:12px }

  /* Stats-Strip: 2 Spalten */
  .stats-strip { grid-template-columns:repeat(2,1fr);gap:8px }

  /* Rekord-Banner: kompakter */
  .record-banner { padding:14px 16px;gap:12px }
  .rec-kg        { font-size:44px }
  .rec-art       { font-size:22px }

  /* Meine Fänge: Filter über Karten stapeln */
  .mf-layout  { grid-template-columns:1fr;gap:12px }
  .mf-sidebar { position:static }

  /* Filter-Formular: Von+Bis nebeneinander, Rest volle Breite */
  .filter-sidebar-form {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    padding:10px 12px;
  }
  .filter-sidebar-form > .fsf-group:first-child { grid-column:span 2 }
  .filter-sidebar-form > .filter-btn,
  .filter-sidebar-form > a.filter-btn,
  .filter-sidebar-form > .filter-count { grid-column:span 2 }

  /* Fang-Karten: volle Bildschirmbreite */
  .cards-grid { grid-template-columns:1fr }

  /* Spotlight: Bottom-Sheet aus dem unteren Bildschirmrand */
  .sl-overlay { padding:0;align-items:flex-end }
  .sl-box {
    grid-template-columns:1fr;
    grid-template-rows:220px 1fr;
    max-height:92vh;
    border-radius:12px 12px 0 0;
    width:100%;
    max-width:100%;
  }
  .sl-photo        { min-height:unset }
  .sl-info {
    padding:18px 20px 24px;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .sl-art          { font-size:30px }
  .sl-laenge       { font-size:52px }
  .sl-laenge small { font-size:18px }
  .sl-close {
    top:10px;right:12px;font-size:20px;
    background:rgba(8,12,20,.65);border-radius:50%;
    width:34px;height:34px;
    display:flex;align-items:center;justify-content:center;
  }
}

@media (max-width:480px) {
  .shell      { padding:8px }
  .sl-box     { grid-template-rows:180px 1fr }
  .sl-art     { font-size:26px }
  .sl-laenge  { font-size:42px }
  .sl-info    { padding:14px 16px 18px }
  .rec-kg     { font-size:36px }
  .rec-art    { font-size:18px }
}

/* ═══════════════════════════════════════════════════════
   REDUCED MOTION
═══════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
  body::after              { display:none }
  .cta-btn--shimmer::after { display:none }
}