/* ══════════════════════════════════════════════════════════════════════════
   bro1.css — gemeinsames Design System für bro1.de
   Eingebunden von: /pool/index.html, /wetter/wetter.html, /wetter/wetter-archiv.html,
                     /adsb/adsb.html, /adsb/adsb-archiv.html
   NICHT eingebunden von: / (index.html) — die Startseite ist bewusst eigenständig
   gestaltet (Hero mit Canvas-Animation) und bleibt unverändert.

   Enthält: Tokens/Themes, Chrome-Bar, Theme-Toggle + Varianten-Popover,
   Shell/Card/Slabel-Grundgerüst, Buttons, Badges, Chart-Metrik-Pills,
   Eintritts-Animation. Tool-spezifische Komponenten (Stat-Grids, Charts,
   Formulare etc.) bleiben in der jeweiligen Datei.
   ══════════════════════════════════════════════════════════════════════════ */

/* ════ Tokens ════════════════════════════════════════════════════════════ */
:root {
  --red:    #BB0522;
  --yellow: #E0B61E;
  --blue:   #3B82F6;
  --green:  #4FB300; /* nur Status-Farbe (ok/gut) — keine UI-Akzentfarbe */

  --font-sans:  "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-mono:  "Geist Mono", ui-monospace, monospace;
  --font-serif: "Instrument Serif", serif;
  --shadow:     0 1px 2px rgba(0,0,0,.04), 0 6px 20px rgba(0,0,0,.05);
  --chrome-h:   48px;

  /* Default = LIGHT 1 (Gold & Slate) — greift, bis bro1.js data-theme setzt */
  --accent:          #D3AE2A;
  --accent-dim:      #BF9A1E;
  --accent-deep:     #5D6A72;
  --accent-contrast: #1A1A18;
  --bg:              #FFFFFF;
  --bg-subtle:       #F2F3F4;
  --border:          #E0E0DC;
  --text:            #1A1A18;
  --muted:           #5D6A72;
  --toggle-bg:       #E0E0DC;
}

html[data-theme="dark-1"] { /* Warmgold */
  --accent:          #F2BF27;
  --accent-dim:      #F2AB27;
  --accent-deep:     #593F0E;
  --accent-contrast: #1A1A18;
  --bg:              #0D0D0D;
  --bg-subtle:       #2F2D2E;
  --border:          #3A3838;
  --text:            #F0EDE6;
  --muted:           #A09890;
  --toggle-bg:       #2F2D2E;
}

html[data-theme="dark-2"] { /* Olive / Erde */
  --accent:          #786D34;
  --accent-dim:      #736A4C;
  --accent-deep:     #615941;
  --accent-contrast: #F4F4EF;
  --bg:              #2B2B29;
  --bg-subtle:       #1E1E1C;
  --border:          #3D3D39;
  --text:            #D0D1CB;
  --muted:           #8A8A80;
  --toggle-bg:       #3D3D39;
}

html[data-theme="light-1"] { /* Gold & Slate */
  --accent:          #D3AE2A;
  --accent-dim:      #BF9A1E;
  --accent-deep:     #5D6A72;
  --accent-contrast: #1A1A18;
  --bg:              #FFFFFF;
  --bg-subtle:       #F2F3F4;
  --border:          #E0E0DC;
  --text:            #1A1A18;
  --muted:           #5D6A72;
  --toggle-bg:       #E0E0DC;
}

html[data-theme="light-3"] { /* Classic Green */
  --accent:          #6EC800;
  --accent-dim:      #5AAA00;
  --accent-deep:     #1F2837;
  --accent-contrast: #1A1A18;
  --bg:              #FFFFFF;
  --bg-subtle:       #EFF0F1;
  --border:          #DEDFE1;
  --text:            #1F2837;
  --muted:           #616A73;
  --toggle-bg:       #DEDFE1;
}

html[data-theme="light-2"] { /* Spa / Aqua */
  --accent:          #95B8BF;
  --accent-dim:      #7AA4AC;
  --accent-deep:     #A6866A;
  --accent-contrast: #0D0D0D;
  --bg:              #FFFFFF;
  --bg-subtle:       #DCEEF2;
  --border:          #C8DDE2;
  --text:            #0D0D0D;
  --muted:           #5A7378;
  --toggle-bg:       #C8DDE2;
}

/* Fallback vor JS-Ausführung: Systempräferenz Dunkel → Dark 1 */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    --accent:#F2BF27;--accent-dim:#F2AB27;--accent-deep:#593F0E;--accent-contrast:#1A1A18;
    --bg:#0D0D0D;--bg-subtle:#2F2D2E;--border:#3A3838;--text:#F0EDE6;--muted:#A09890;--toggle-bg:#2F2D2E;
  }
}

*,*::before,*::after { box-sizing:border-box;margin:0;padding:0; }
html,body { min-height:100%; }
body { font-family:var(--font-sans);background:var(--bg-subtle);color:var(--text);-webkit-font-smoothing:antialiased;transition:background .25s,color .25s; }

button:focus-visible, a:focus-visible, .theme-toggle:focus-visible, .chart-metric-tab:focus-visible, .theme-swatch:focus-visible {
  outline:2px solid var(--accent);outline-offset:2px;
}

/* ════ Chrome ════════════════════════════════════════════════════════════ */
.chrome { background:var(--bg);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,4vw,40px);height:var(--chrome-h);transition:background .25s,border-color .25s; }
.chrome-left { display:flex;align-items:center;gap:10px; }
.chrome-right { display:flex;align-items:center;gap:16px; }
.wordmark { font-weight:400;font-size:13px;letter-spacing:-.01em;color:var(--muted);text-decoration:none;transition:color .2s; }
.wordmark:hover { color:var(--text); }
.chrome-copy { font-family:var(--font-mono);font-size:10px;letter-spacing:.04em;color:var(--muted);margin-left:8px; }
.chrome-contact { font-family:var(--font-sans);font-size:12px;color:var(--muted);text-decoration:none;border-bottom:1px solid var(--border);padding-bottom:1px;transition:color .2s,border-color .2s; }
.chrome-contact:hover { color:var(--text);border-color:var(--accent); }

.live-dot { display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);white-space:nowrap; }
.live-dot::before { content:"";width:6px;height:6px;background:var(--green);border-radius:50%;animation:blink 1.8s ease-in-out infinite;box-shadow:0 0 10px rgba(79,179,0,.55); }
.live-dot.error::before { background:var(--red);box-shadow:none;animation:none; }
.live-dot.loading::before, .live-dot.stale::before { background:var(--yellow);box-shadow:none;animation:none; }
.live-dot.offline::before { background:var(--muted);box-shadow:none;animation:none; }
@keyframes blink { 0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)} }

/* ════ Theme-Toggle + Varianten-Popover ══════════════════════════════════ */
.theme-controls { position:relative;display:flex;align-items:center;gap:8px; }
.theme-toggle { position:relative;width:52px;height:28px;background:var(--toggle-bg);border:1px solid var(--border);border-radius:14px;cursor:pointer;transition:background .25s,border-color .25s;display:flex;align-items:center;padding:0 4px;outline:none;flex-shrink:0; }
.theme-toggle:hover { border-color:var(--accent); }
.toggle-thumb { width:20px;height:20px;border-radius:50%;background:var(--bg);box-shadow:0 1px 4px rgba(0,0,0,.2);transition:transform .25s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.toggle-icon { width:10px;height:10px;color:var(--muted); }
html[data-theme^="dark"] .toggle-thumb { transform:translateX(24px);background:var(--text); }
html[data-theme^="dark"] .toggle-icon { color:var(--bg); }
@media(prefers-color-scheme:dark){html:not([data-theme]) .toggle-thumb{transform:translateX(24px);background:var(--text);}html:not([data-theme]) .toggle-icon{color:var(--bg);}}

.variant-trigger { width:28px;height:28px;border-radius:50%;background:var(--bg);border:1px solid var(--border);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .2s;flex-shrink:0;padding:0; }
.variant-trigger:hover { border-color:var(--accent); }
.variant-trigger svg { width:14px;height:14px;color:var(--muted); }

.variant-popover { position:absolute;top:calc(100% + 10px);right:0;background:var(--bg);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);padding:14px;display:none;z-index:60;min-width:200px; }
.variant-popover.open { display:block;animation:tabFade 150ms ease-out; }
.variant-popover-label { font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin-bottom:8px; }
.variant-popover-label:not(:first-child) { margin-top:12px; }
.theme-swatches { display:flex;gap:10px; }
.theme-swatch { width:24px;height:24px;border-radius:50%;border:1px solid var(--border);cursor:pointer;padding:0;background:linear-gradient(135deg, var(--sw1) 50%, var(--sw2) 50%);transition:box-shadow .2s,transform .16s cubic-bezier(.23,1,.32,1);flex-shrink:0; }
.theme-swatch:active { transform:scale(.94); }
.theme-swatch.active { box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }

/* ════ Shell / Slabel / Card ═══════════════════════════════════════════════ */
.shell { max-width:1200px;margin:0 auto;width:100%;padding:clamp(20px,4vw,32px);display:flex;flex-direction:column;gap:clamp(16px,2vw,20px); }
.slabel { font-family:var(--font-serif);font-style:italic;font-size:17px;letter-spacing:.01em;color:var(--text);display:flex;align-items:center;gap:10px;margin-top:6px; }
.slabel::before { content:"";display:inline-block;width:3px;height:16px;background:var(--accent);border-radius:1px; }
.card { background:var(--bg);border:1px solid var(--border);border-radius:8px;box-shadow:var(--shadow);overflow:hidden;transition:background .25s,border-color .25s; }

/* ════ Buttons ═══════════════════════════════════════════════════════════ */
.btn-primary { font-family:var(--font-sans);font-size:14px;font-weight:600;padding:11px 26px;background:var(--accent);color:var(--accent-contrast);border:none;border-radius:6px;cursor:pointer;transition:background .2s,transform .16s cubic-bezier(.23,1,.32,1);letter-spacing:-.01em; }
.btn-primary:hover { background:var(--accent-dim); }
.btn-primary:active { transform:scale(.97); }
.btn-secondary { font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;padding:10px 18px;background:none;color:var(--muted);border:1px solid var(--border);border-radius:6px;cursor:pointer;transition:border-color .2s,color .2s,transform .16s cubic-bezier(.23,1,.32,1); }
.btn-secondary:hover { border-color:var(--text);color:var(--text); }
.btn-secondary:active { transform:scale(.97); }
.btn-danger { font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;padding:10px 18px;background:none;color:var(--red);border:1px solid rgba(187,5,34,.3);border-radius:6px;cursor:pointer;transition:border-color .2s,background .2s,transform .16s cubic-bezier(.23,1,.32,1); }
.btn-danger:hover { background:rgba(187,5,34,.06);border-color:var(--red); }
.btn-danger:active { transform:scale(.97); }

/* ════ Badges ════════════════════════════════════════════════════════════ */
.badge { display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:3px;font-family:var(--font-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase; }
.badge.ok   { background:rgba(79,179,0,.12);color:#3a8a00; }
.badge.warn { background:rgba(224,182,30,.12);color:#a07800; }
.badge.bad  { background:rgba(187,5,34,.10);color:var(--red); }
html[data-theme^="dark"] .badge.ok   { background:rgba(79,179,0,.16);color:#7ACC33; }
html[data-theme^="dark"] .badge.warn { background:rgba(224,182,30,.15);color:var(--yellow); }
html[data-theme^="dark"] .badge.bad  { background:rgba(187,5,34,.14);color:#e03050; }
@media(prefers-color-scheme:dark){html:not([data-theme]) .badge.ok{background:rgba(79,179,0,.16);color:#7ACC33;}html:not([data-theme]) .badge.warn{background:rgba(224,182,30,.15);color:var(--yellow);}html:not([data-theme]) .badge.bad{background:rgba(187,5,34,.14);color:#e03050;}}

/* ════ Chart-Metrik-Pills (Pool, Wetter, ADS-B nutzen identische Klassen) ══ */
.chart-metric-tabs { display:flex;gap:6px;flex-wrap:wrap;align-items:flex-start; }
.chart-metric-tab { font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.08em;padding:5px 12px;border:1px solid var(--border);border-radius:999px;background:var(--bg);color:var(--muted);cursor:pointer;transition:border-color .2s,color .2s,background .2s;white-space:nowrap;user-select:none; }
.chart-metric-tab:hover { border-color:var(--accent);color:var(--text); }
.chart-metric-tab.active { background:var(--accent);border-color:var(--accent);color:var(--accent-contrast); }

/* ════ Eintritts-Animation ═══════════════════════════════════════════════ */
/* Läuft nur beim ersten Render: bro1.js setzt nach 700ms body.anim-done.
   Nötig für Seiten mit Tab-Panes (Pool) — display:none→block würde die
   Animation sonst bei jedem Tab-Wechsel erneut abspielen. */
@keyframes tabFade { from{opacity:0} to{opacity:1} }
@keyframes fadeSlideUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
.chrome                                    { animation:fadeSlideUp 500ms cubic-bezier(0.23,1,0.32,1) both; }
body:not(.anim-done) .shell > *:nth-child(1)   { animation:fadeSlideUp 560ms cubic-bezier(0.23,1,0.32,1)  60ms both; }
body:not(.anim-done) .shell > *:nth-child(2)   { animation:fadeSlideUp 580ms cubic-bezier(0.23,1,0.32,1) 130ms both; }
body:not(.anim-done) .shell > *:nth-child(3)   { animation:fadeSlideUp 580ms cubic-bezier(0.23,1,0.32,1) 200ms both; }
body:not(.anim-done) .shell > *:nth-child(4)   { animation:fadeSlideUp 580ms cubic-bezier(0.23,1,0.32,1) 270ms both; }
body:not(.anim-done) .shell > *:nth-child(n+5) { animation:fadeSlideUp 580ms cubic-bezier(0.23,1,0.32,1) 340ms both; }
@media (prefers-reduced-motion:reduce) { .chrome,.shell>* { animation:none !important; } .btn-primary:active,.btn-secondary:active,.btn-danger:active,.theme-swatch:active { transform:none; } }

/* ════ Responsive Basics ═════════════════════════════════════════════════ */
@media(max-width:720px) { .chrome-copy { display:none; } }