/* ===========================================================================
   GLAS-DARSTELLUNG (Eriks Wahl: Gestaltungsvorschlag "Projektübersicht in
   Glas", Annäherung an Apple Liquid Glass)
   ---------------------------------------------------------------------------
   Eine eigene Schicht über styles.css und plan-styles.css, geladen als LETZTES
   Stylesheet. Alles hängt an der Klasse html.glas, die ein kleines Skript im
   <head> von App.html setzt — ohne sie sieht die App aus wie zuvor. Abschalten
   lässt sie sich je Browser unter Einstellungen → Mein Konto ("Glas-
   Darstellung", localStorage-Schlüssel projuebersicht-glas).

   Prinzip:
   - Tokens statt Einzelregeln: --surface & Co. werden durchscheinend, damit
     wirken die ~70 Stellen, die var(--surface) als Fläche nutzen, ohne dass
     jede einzeln angefasst wird.
   - Echtes Glas (Unschärfe des Hintergrunds) nur auf den großen Flächen —
     Menüband, Seitenleiste, Karten, Dialoge. Kleine Elemente bleiben ohne
     backdrop-filter: verschachtelte Unschärfe kostet Rechenzeit und bringt
     auf einer bereits gläsernen Karte nichts.
   - Drei Dichten: Rahmen (Menüband/Seitenleiste) am dichtesten, Inhalt
     mittel, Dialoge und Menüs fast deckend (sie liegen über Inhalt, der
     sonst durchscheinen und den Text stören würde).
   - Hintergrund: Lichtflächen in den Logo-Blautönen und das Logo als großes
     Wasserzeichen (logo.svg, vektorisiert aus logo.png), beides fixiert.
   - Die Wandtafel (body.wandtafel-aktiv) bleibt außen vor: eigenes Design,
     und auf dem Kiosk-Rechner wäre Unschärfe zu teuer.
   =========================================================================== */

/* ---------- Tokens: hell ---------- */
html.glas {
  --bg:            #e8eef3;
  --surface:       rgba(255,255,255,.58);
  --surface-alt:   rgba(255,255,255,.40);
  --surface-sunk:  rgba(15,90,133,.07);
  --line:          rgba(20,45,65,.16);
  --line-soft:     rgba(20,45,65,.09);

  --accent:        #0f5a85;
  --accent-hover:  #0d5079;
  --accent-active: #0a4565;
  --accent-soft:   rgba(15,90,133,.11);
  --band-neu:      #0f5a85;

  --text:          #14212b;
  --text-muted:    #4b5d6b;
  --text-subtle:   #6f8291;

  --r-md: 10px;
  --r-lg: 18px;
  --r-xl: 22px;

  --sh-1: 0 8px 28px rgba(21,58,86,.10), 0 1px 4px rgba(21,58,86,.06);
  --sh-2: 0 12px 34px rgba(21,58,86,.13), 0 2px 6px rgba(21,58,86,.07);
  --sh-3: 0 20px 60px rgba(21,58,86,.20), 0 4px 14px rgba(21,58,86,.10);

  --glas-rahmen:  rgba(255,255,255,.62);
  --glas-dicht:   rgba(255,255,255,.86);
  --glas-deckend: #f7fafc;
  --glas-kante:   rgba(255,255,255,.80);
  --glas-kante-2: rgba(255,255,255,.35);
  --glas-blur:    24px;
  --glas-hell:    #94b0cc;
  --glas-tief:    #116896;
  --glas-logo:    .16;
}

/* ---------- Tokens: dunkel (System und manuell) ---------- */
@media (prefers-color-scheme: dark) {
  html.glas:not([data-theme="light"]) {
    --bg:            #0b141b;
    --surface:       rgba(30,46,60,.50);
    --surface-alt:   rgba(30,46,60,.34);
    --surface-sunk:  rgba(255,255,255,.06);
    --line:          rgba(255,255,255,.14);
    --line-soft:     rgba(255,255,255,.08);
    --accent:        #8cc9e6;
    --accent-hover:  #a3d4ec;
    --accent-active: #6fb3d3;
    --accent-soft:   rgba(140,201,230,.15);
    --band-neu:      #116896;
    --text:          #e8f0f5;
    --text-muted:    #a9bccb;
    --text-subtle:   #7790a2;
    --sh-1: 0 10px 30px rgba(0,0,0,.40), 0 1px 4px rgba(0,0,0,.30);
    --sh-2: 0 14px 38px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.30);
    --sh-3: 0 22px 64px rgba(0,0,0,.55), 0 4px 16px rgba(0,0,0,.35);
    --glas-rahmen:  rgba(28,42,54,.58);
    --glas-dicht:   rgba(22,34,44,.90);
    --glas-deckend: #15212b;
    --glas-kante:   rgba(255,255,255,.18);
    --glas-kante-2: rgba(255,255,255,.07);
    --glas-hell:    #2c5675;
    --glas-tief:    #1d6f99;
    --glas-logo:    .10;
  }
}
html.glas[data-theme="dark"] {
  --bg:            #0b141b;
  --surface:       rgba(30,46,60,.50);
  --surface-alt:   rgba(30,46,60,.34);
  --surface-sunk:  rgba(255,255,255,.06);
  --line:          rgba(255,255,255,.14);
  --line-soft:     rgba(255,255,255,.08);
  --accent:        #8cc9e6;
  --accent-hover:  #a3d4ec;
  --accent-active: #6fb3d3;
  --accent-soft:   rgba(140,201,230,.15);
  --band-neu:      #116896;
  --text:          #e8f0f5;
  --text-muted:    #a9bccb;
  --text-subtle:   #7790a2;
  --sh-1: 0 10px 30px rgba(0,0,0,.40), 0 1px 4px rgba(0,0,0,.30);
  --sh-2: 0 14px 38px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.30);
  --sh-3: 0 22px 64px rgba(0,0,0,.55), 0 4px 16px rgba(0,0,0,.35);
  --glas-rahmen:  rgba(28,42,54,.58);
  --glas-dicht:   rgba(22,34,44,.90);
  --glas-deckend: #15212b;
  --glas-kante:   rgba(255,255,255,.18);
  --glas-kante-2: rgba(255,255,255,.07);
  --glas-hell:    #2c5675;
  --glas-tief:    #1d6f99;
  --glas-logo:    .10;
}

/* ---------- Hintergrund: Lichtflächen und Logo ---------- */
html.glas body {
  background:
    radial-gradient(55% 50% at 8% 4%,   color-mix(in srgb, var(--glas-hell) 70%, transparent), transparent 70%),
    radial-gradient(45% 45% at 92% 12%, color-mix(in srgb, var(--glas-tief) 26%, transparent), transparent 70%),
    radial-gradient(50% 55% at 72% 96%, color-mix(in srgb, #7fc3b6 26%, transparent), transparent 70%),
    radial-gradient(40% 40% at 28% 82%, color-mix(in srgb, var(--glas-hell) 42%, transparent), transparent 70%),
    var(--bg);
  background-attachment: fixed;
}
/* Wasserzeichen: fixiert, links unten, teils unter Seitenleiste und Karten —
   dort schimmert es durch das Glas, daneben ist es klar zu sehen. */
html.glas body::before {
  content: "";
  position: fixed;
  left: -3vw; bottom: -14vh;
  width: min(1100px, 68vw); aspect-ratio: 256 / 216;
  background: url("/logo.svg") no-repeat center / contain;
  opacity: var(--glas-logo);
  pointer-events: none;
  z-index: 0;
}
html.glas .app-shell { position: relative; z-index: 1; }
html.glas body.wandtafel-aktiv::before { display: none; }

/* ---------- Das Material ---------- */
html.glas .app-topbar,
html.glas #headerMenu.side-menu,
html.glas .modal,
html.glas .user-menu-dropdown,
html.glas .user-menu,
html.glas .board-list,
html.glas .abw-team-kopf,
html.glas .report-card,
html.glas .load-card,
html.glas .settings-card,
html.glas .dash-karte,
html.glas .dash-band,
html.glas .bericht-panel,
html.glas .pc-panel,
html.glas .table-wrap,
html.glas .gantt-container,
html.glas .people-readonly,
html.glas .bubble-card,
html.glas .range-picker,
html.glas .sync-problem-bar,
html.glas .plan-header,
html.glas .plan-nav,
html.glas .plan-panel,
html.glas .plan-einst-nav,
html.glas .load-karte,
html.glas .plan-kpi-tile,
html.glas .plan-lage-band,
html.glas .plan-mini-card,
html.glas .protokoll-liste,
html.glas .protokoll-schreiben,
html.glas .plan-toast,
html.glas .glocke-menue,
html.glas .wiz {
  background: var(--surface);
  -webkit-backdrop-filter: blur(var(--glas-blur)) saturate(170%);
  backdrop-filter: blur(var(--glas-blur)) saturate(170%);
  border: 1px solid var(--glas-kante-2);
  box-shadow: var(--sh-1), inset 0 1px 0 var(--glas-kante), inset 0 -1px 0 var(--glas-kante-2);
}

/* Rahmen: Menüband und Seitenleiste dichter als der Inhalt. */
html.glas .app-topbar {
  background: var(--glas-rahmen);
  border-width: 0 0 1px 0;
  box-shadow: 0 1px 0 var(--glas-kante-2), 0 6px 24px rgba(21,58,86,.06);
}
html.glas .topbar-logo { height: 26px; }

/* Dialoge, Menüs, Hinweise: fast deckend — sie liegen über Inhalt, der sonst
   durchscheint und den Text unruhig macht. */
html.glas .modal,
html.glas .user-menu-dropdown,
html.glas .user-menu,
html.glas .range-picker,
html.glas .plan-toast,
html.glas .glocke-menue,
html.glas .sync-problem-bar {
  background: var(--glas-dicht);
  box-shadow: var(--sh-3), inset 0 1px 0 var(--glas-kante);
}
html.glas .modal-bg {
  background: rgba(15,35,50,.28);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* ---------- Seitenleiste: schwebende Glasfläche (Desktop) ---------- */
@media (min-width: 769px) {
  html.glas #headerMenu.side-menu {
    background: var(--glas-rahmen);
    top: calc(52px + 12px);
    height: calc(100vh - 52px - 24px);
    margin: 12px 0 12px 12px;
    border-radius: var(--r-xl);
    border: 1px solid var(--glas-kante-2);
    box-shadow: var(--sh-2), inset 0 1px 0 var(--glas-kante);
    overflow: hidden;
  }
}
/* ---------- "Alles schwebt" (Eriks Wahl C, Desktop) ----------
   Vorher stieß der eckige Projektkopf (.plan-header + .plan-nav, ein
   durchgehender Streifen ohne Abstand) an die runde, schwebende
   Seitenleiste. Jetzt schweben Menüband, Seitenleiste und Projektkopf mit
   demselben Abstand (12px) und denselben Rundungen; der aktive Reiter ist
   eine Kapsel wie der aktive Eintrag der Seitenleiste. */
@media (min-width: 769px) {
  html.glas .app-topbar {
    top: 12px;
    margin: 12px 12px 0;
    border-radius: var(--r-lg);
    border: 1px solid var(--glas-kante-2);
    box-shadow: var(--sh-2), inset 0 1px 0 var(--glas-kante);
  }
  html.glas #headerMenu.side-menu {
    top: calc(52px + 24px);
    height: calc(100vh - 52px - 36px);
  }
  html.glas .plan-kopf {
    margin: 12px 12px 0;
    border-radius: var(--r-xl);
    background: var(--glas-rahmen);
    -webkit-backdrop-filter: blur(var(--glas-blur)) saturate(170%);
    backdrop-filter: blur(var(--glas-blur)) saturate(170%);
    border: 1px solid var(--glas-kante-2);
    box-shadow: var(--sh-2), inset 0 1px 0 var(--glas-kante);
    padding: 4px 12px 10px;
  }
  /* Kopf und Reiter sind innerhalb der Karte keine eigenen Flächen mehr. */
  html.glas .plan-kopf .plan-header,
  html.glas .plan-kopf .plan-nav {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 0;
    box-shadow: none;
  }
  /* Inhalt bündig unter der Kopfkarte und im selben 12px-Abstand. */
  html.glas .plan-page .plan-main-content { padding-left: 12px; padding-right: 12px; padding-top: 12px; }
  html.glas .plan-kopf .plan-header { padding: 10px 12px 6px; }
  html.glas .plan-kopf .plan-nav { padding: 0; gap: 2px; }
  html.glas .plan-kopf .plan-nav-item {
    border-bottom: 0;
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 13.5px;
  }
  html.glas .plan-kopf .plan-nav-item:hover { background: var(--surface-sunk); }
  html.glas .plan-kopf .plan-nav-item.is-active {
    background: var(--glas-dicht);
    color: var(--accent);
    box-shadow: inset 0 1px 0 var(--glas-kante), 0 2px 10px rgba(21,58,86,.10);
  }
}
@media (min-width: 769px) and (prefers-color-scheme: dark) {
  html.glas:not([data-theme="light"]) .plan-kopf .plan-nav-item.is-active { background: rgba(255,255,255,.10); }
}
@media (min-width: 769px) {
  html.glas[data-theme="dark"] .plan-kopf .plan-nav-item.is-active { background: rgba(255,255,255,.10); }
}

/* Projektbereich: .plan-main hat in plan-styles.css einen deckenden
   Grund (var(--bg)). Unter Glas verdeckte er die Lichtflächen und das
   Logo-Wasserzeichen — im Projekt sah man nur flaches Dunkelblau bzw.
   Grau, auf allen anderen Seiten den Glas-Hintergrund. */
html.glas .plan-main { background: transparent; }

html.glas .nav-item { border-radius: 999px; }
html.glas .nav-item:hover,
html.glas .nav-item:visited:hover { background: var(--surface-sunk); }
html.glas .nav-item.active {
  background: var(--glas-dicht);
  color: var(--text);
  box-shadow: inset 0 1px 0 var(--glas-kante), 0 2px 10px rgba(21,58,86,.10);
}
html.glas .nav-item.active .nav-icon { color: var(--accent); }
/* Die bestehenden Dunkel-Regeln für die Navigation setzen feste Werte —
   hier auf die Glas-Tokens zurückführen. */
@media (prefers-color-scheme: dark) {
  html.glas:not([data-theme="light"]) .nav-item:hover { background: var(--surface-sunk); }
  html.glas:not([data-theme="light"]) .nav-item.active { background: rgba(255,255,255,.10); }
  html.glas:not([data-theme="light"]) .app-topbar { background: var(--glas-rahmen); }
}
html.glas[data-theme="dark"] .nav-item:hover { background: var(--surface-sunk); }
html.glas[data-theme="dark"] .nav-item.active { background: rgba(255,255,255,.10); }
html.glas[data-theme="dark"] .app-topbar { background: var(--glas-rahmen); }

/* ---------- Bedienelemente ---------- */
/* Zweitknöpfe als klare Glaskapsel statt grauer Fläche. */
html.glas button.secondary {
  background: var(--surface);
  border: 1px solid var(--glas-kante-2);
  box-shadow: inset 0 1px 0 var(--glas-kante);
  color: var(--text);
}
html.glas button.secondary:hover { background: var(--glas-dicht); }
html.glas button:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
/* Hauptknöpfe (ohne eigene Klasse bzw. .small) mit leichtem Glanz oben —
   bewusst nicht jeder <button>: Kalendertage, Projektköpfe und Kacheln sind
   ebenfalls Knöpfe und bekämen sonst eine helle Kante. */
html.glas button:not([class]),
html.glas button.small:not(.secondary):not(.danger) {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
}
/* Text auf Akzentfläche: bisher var(--surface) (deckend weiß), jetzt
   durchscheinend — feste Farbe je Thema statt Flächen-Token. */
html.glas .dash-kal-tag.ist-gewaehlt,
html.glas .pt-badge-person { color: #fff; }
@media (prefers-color-scheme: dark) {
  html.glas:not([data-theme="light"]) .dash-kal-tag.ist-gewaehlt,
  html.glas:not([data-theme="light"]) .pt-badge-person { color: #0b141b; }
}
html.glas[data-theme="dark"] .dash-kal-tag.ist-gewaehlt,
html.glas[data-theme="dark"] .pt-badge-person { color: #0b141b; }
html.glas input[type=text],
html.glas input[type=email],
html.glas input[type=password],
html.glas input[type=number],
html.glas input[type=date],
html.glas input[type=search],
html.glas select,
html.glas textarea {
  background-color: var(--glas-dicht);
  border-color: var(--line);
  border-radius: 12px;
}

/* ---------- Kleine Korrekturen an durchscheinenden Flächen ---------- */
/* Sticky-Leisten bekamen bisher eine deckende Fläche; durchscheinend würde
   der darunter wegscrollende Inhalt den Text überlagern. */
html.glas .bericht-rail { background: var(--glas-rahmen); }
/* GANTT: die feststehende Namensspalte muss deckend sein — beim seitlichen
   Scrollen laufen die Balken darunter durch. */
/* Die feste Namensspalte des GANTT muss DECKEND sein: beim waagerechten
   Scrollen laufen die Balken unter ihr durch, und mit dem halbdurchsichtigen
   --glas-deckend (58 %) schienen sie durch die Namen hindurch (Eriks
   Meldung). --gantt-label-grund ist derselbe Farbton, nur ohne Transparenz. */
html.glas { --gantt-label-grund: #f6f9fb; }
@media (prefers-color-scheme: dark) { html.glas:not([data-theme="light"]) { --gantt-label-grund: #15212b; } }
html.glas[data-theme="dark"] { --gantt-label-grund: #15212b; }
html.glas .gantt-label,
html.glas .gantt-row.gantt-header .gantt-label,
html.glas .gantt-row.gantt-days .gantt-label { background: var(--gantt-label-grund); }
/* Login: derselbe Hintergrund wie die App, aber deckend — darunter liegt
   die (noch leere) App-Oberfläche, die nicht durchscheinen darf. */
html.glas .login-seite {
  background:
    radial-gradient(55% 50% at 8% 4%,   color-mix(in srgb, var(--glas-hell) 70%, transparent), transparent 70%),
    radial-gradient(45% 45% at 92% 12%, color-mix(in srgb, var(--glas-tief) 26%, transparent), transparent 70%),
    radial-gradient(50% 55% at 72% 96%, color-mix(in srgb, #7fc3b6 26%, transparent), transparent 70%),
    var(--bg);
}

/* ---------- Ohne Glas: Wandtafel, reduzierte Transparenz ---------- */
html.glas body.wandtafel-aktiv * {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
@media (prefers-reduced-transparency: reduce) {
  html.glas body::before { display: none; }
  html.glas * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  html.glas {
    --surface: #ffffff; --surface-alt: #fafcfd; --glas-rahmen: #f7f9fb; --glas-dicht: #ffffff;
  }
}

/* Schalter in Einstellungen → Mein Konto (gilt auch ohne html.glas). */
.settings-glas-schalter { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
/* Mit Id-Gewicht, weil eine spätere Regel die Aufgabenzeilen wieder auf das
   halbdurchsichtige --surface setzte. Getönte Zeilen (Phasen, Projekt)
   legen ihre Tönung als background-image darüber (plan-styles.css). */
html.glas #planGanttContainer .gantt-row .gantt-label { background-color: var(--gantt-label-grund); }