/* theme-glass.css — Liquid-Glass (Dunkel standard, Hell per data-color-scheme) */

:root {
  --t-bg:                 #08080d;
  --t-bg-gradient-mid:    #12121c;
  --t-surface:            rgba(28, 28, 38, 0.5);
  --t-surface-2:          rgba(38, 38, 52, 0.65);
  --t-border:             rgba(255, 255, 255, 0.1);
  --t-border-strong:      rgba(255, 255, 255, 0.16);
  --t-text-1:             #f2f2f8;
  --t-text-2:             #9a9ab0;
  --t-text-3:             #65657a;
  --t-accent:             #7eb6ff;

  --t-glass-blur:         min(5vw, 1.25em);
  --t-glass-bg:           rgba(255, 255, 255, 0.07);
  --t-glass-border:       rgba(255, 255, 255, 0.14);
  --t-glass-inset:        rgba(255, 255, 255, 0.12);
  --t-header-footer-bg:   rgba(14, 14, 22, 0.55);

  --t-metro:              #e05560;
  --t-tram:               #e8956a;
  --t-bus:                #7eb6ff;
  --t-train:                #5fd4b8;

  --t-realtime:           #5fd4b8;
  --t-planned:            #e8c547;
  --t-error:              #f07178;
  --t-stale:              #e8c547;
  --t-stale-bg:           rgba(232, 197, 71, 0.12);

  --t-countdown-emphasis: #ffffff;

  --t-shadow:             0 0.25em 1.75em rgba(0, 0, 0, 0.45), 0 0.06em 0.2em rgba(0, 0, 0, 0.35);
  --t-shadow-hover:       0 0.75em 2.5em rgba(0, 0, 0, 0.5), 0 0.25em 0.75em rgba(0, 0, 0, 0.35);

  --t-radius:             min(3.8vw, 0.95em);
  --t-radius-lg:          min(4.6vw, 1.15em);
  --font-weight-clock:    350;

  /* ── Ambient-Hintergrund (Dark): Basis / Tiefpunkt (Verlauf im CSS definiert) ── */
  --grad-d-base:          #07080d;
  --grad-d-base-rgb:      7, 8, 13;
  --grad-d-deep:          hsl(220, 8%, 4.8%);

  /* Karten: eine Randfarbe (gleichmäßig, wirkt mit backdrop-filter konsistent); nur Stärke oben/unten */
  --t-card-ring:          rgba(255, 255, 255, 0.12);
}

:root[data-color-scheme="light"] {
  --t-bg:                 #e8e8f0;
  --t-bg-gradient-mid:    #f2f2f8;
  --t-surface:            rgba(255, 255, 255, 0.55);
  --t-surface-2:          rgba(255, 255, 255, 0.78);
  --t-border:             rgba(0, 0, 0, 0.08);
  --t-border-strong:      rgba(0, 0, 0, 0.12);
  --t-text-1:             #12121a;
  --t-text-2:             #5a5a6e;
  --t-text-3:             #888898;
  --t-accent:             #2563eb;

  --t-glass-bg:           rgba(255, 255, 255, 0.72);
  --t-glass-border:       rgba(255, 255, 255, 0.85);
  --t-glass-inset:        rgba(255, 255, 255, 0.95);
  --t-header-footer-bg:   rgba(255, 255, 255, 0.62);

  --t-metro:              #c41e3a;
  --t-tram:               #c45c2a;
  --t-bus:                #2563eb;
  --t-train:              #0d8066;

  --t-realtime:           #0d8066;
  --t-planned:            #b8860b;
  --t-error:              #c41e3a;
  --t-stale:              #b8860b;
  --t-stale-bg:           rgba(184, 134, 11, 0.12);

  --t-countdown-emphasis: #12121a;

  --t-shadow:             0 0.25em 1.5em rgba(0, 0, 0, 0.08), 0 0.06em 0.2em rgba(0, 0, 0, 0.04);
  --t-shadow-hover:       0 0.85em 2.25em rgba(0, 0, 0, 0.12), 0 0.25em 0.65em rgba(0, 0, 0, 0.06);

  --font-weight-clock:    400;

  /* Ambient — Light */
  --grad-l-base:          #eef0f6;
  --grad-l-base-rgb:      238, 240, 246;
  --grad-l-soft:          hsl(220, 12%, 86.1%);

  --t-card-ring:          rgba(0, 0, 0, 0.11);
}

/*
  Dunkel: einfarbiges Untergrund-Feld; Verläufe/Noise/Grid im modularen Stack
  (ambient-background.css + #ambient-root), gesteuert per html.ambient-on.
*/
html[data-color-scheme="dark"],
html[data-color-scheme="dark"] body {
  background-color: var(--t-bg) !important;
  background-image: none !important;
}

html[data-color-scheme="light"],
html[data-color-scheme="light"] body {
  background-color: var(--grad-l-base) !important;
  background-image:
    radial-gradient(
      ellipse 135% 100% at 6% 2%,
      rgba(255, 255, 255, 0.75) 0%,
      rgba(255, 255, 255, 0.2) 40%,
      rgba(var(--grad-l-base-rgb), 0) 68%
    ),
    radial-gradient(
      ellipse 100% 85% at 92% 98%,
      rgba(70, 78, 110, 0.07) 0%,
      rgba(70, 78, 110, 0.02) 45%,
      rgba(var(--grad-l-base-rgb), 0) 70%
    ),
    linear-gradient(
      162deg,
      hsl(220, 20%, 97.4%) 0%,
      hsl(221, 18%, 96.6%) 4%,
      hsl(222, 16%, 95.8%) 8%,
      hsl(222, 15%, 95%) 12%,
      hsl(221, 14%, 94.2%) 16%,
      hsl(220, 13%, 93.5%) 20%,
      hsl(219, 12.5%, 92.9%) 24%,
      hsl(220, 12%, 92.4%) 28%,
      hsl(221, 12%, 91.9%) 32%,
      hsl(222, 12%, 91.4%) 36%,
      hsl(222, 11.5%, 91%) 40%,
      hsl(221, 11.5%, 90.6%) 44%,
      hsl(220, 11.5%, 90.3%) 48%,
      hsl(219, 11.5%, 90.1%) 52%,
      hsl(220, 11.5%, 89.9%) 56%,
      hsl(221, 12%, 89.6%) 60%,
      hsl(222, 12%, 89.2%) 64%,
      hsl(221, 12%, 88.8%) 68%,
      hsl(220, 12%, 88.4%) 72%,
      hsl(219, 11.5%, 88%) 76%,
      hsl(220, 11.5%, 87.6%) 80%,
      hsl(221, 12%, 87.2%) 84%,
      hsl(222, 12%, 86.8%) 88%,
      hsl(222, 11.5%, 86.4%) 92%,
      hsl(221, 11.5%, 86.1%) 96%,
      var(--grad-l-soft) 100%
    ) !important;
  background-attachment: fixed !important;
}

/* Hell: feines Noise nur im hellen Schema (Dunkel: Noise in #ambient-root) */
html[data-color-scheme="light"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.038;
  mix-blend-mode: multiply;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='384' height='384'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.48' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' fill='%23fff'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)' fill='%23fff'/%3E%3C/svg%3E");
  background-size: min(42vw, 24em) min(42vw, 24em), min(14vw, 8em) min(14vw, 8em);
}

@media (max-width: 48em) {
  html[data-color-scheme="light"],
  html[data-color-scheme="light"] body {
    background-attachment: scroll !important;
  }
}

#app {
  background: transparent !important;
  position: relative;
  z-index: 1;
}

/* Header/Footer: keine eigene Fläche, kein Blur — geht optisch in den Page-Gradient über */
#header,
#footer {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

#header {
  /* leichte Lesbarkeit der Uhr ohne „Leiste“ */
  text-shadow: 0 0.06em 1.15em rgba(0, 0, 0, 0.35);
}

/* Kacheluhr: kein Header-Glow auf Ziffern */
#header .clock-transit {
  text-shadow: none;
}

:root[data-color-scheme="light"] #header {
  text-shadow: 0 0.06em 0.9em rgba(255, 255, 255, 0.65);
}

#footer .status-bar {
  text-shadow: 0 0.06em 0.75em rgba(0, 0, 0, 0.4);
}

:root[data-color-scheme="light"] #footer .status-bar {
  text-shadow: 0 0.06em 0.65em rgba(255, 255, 255, 0.55);
}

/* Uhr: nur Textfarbe aus dem Theme — keine eigene Fläche/Verlauf auf den Ziffern */
.clock-tile__digit {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

.departure-group {
  /* Eine Flächenfarbe: weniger Streifen im Glaseffekt; Rand eine Farbe → keine Naht an den Ecken */
  background: var(--t-glass-bg) !important;
  border-width: max(0.14em, calc(2 * var(--t-hairline, min(0.09em, 0.22vw)))) var(--t-hairline, min(0.09em, 0.22vw)) !important;
  border-style: solid !important;
  border-color: var(--t-card-ring) !important;
  border-radius: var(--t-radius-lg, min(4.6vw, 1.15em)) !important;
  box-shadow: var(--t-shadow) !important;
}

/* Stationsname: keine Linie darunter */
.station-header {
  border-bottom: none !important;
  padding-bottom: 0.35rem !important;
  margin-bottom: var(--t-stack-after-heading, min(0.38em, 0.52rem)) !important;
}

.time-chip {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: var(--t-glass-border) !important;
}

:root[data-color-scheme="light"] .time-chip {
  background: rgba(255, 255, 255, 0.9) !important;
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .departure-group {
    -webkit-backdrop-filter: blur(var(--t-glass-blur)) saturate(1.25);
    backdrop-filter: blur(var(--t-glass-blur)) saturate(1.25);
  }
}

.time-chip.primary .chip-countdown:not(.departing) {
  color: var(--t-countdown-emphasis, var(--t-text-1));
}

:root[data-color-scheme="light"] .time-chip.primary .chip-countdown:not(.departing) {
  color: var(--t-text-1);
}