/* ═══════════════════════════════════════════════════════════════════
   Meducated · TEAMWORK + Liquid Glass
   Glasschicht nach Apple „Adopting Liquid Glass“
   (developer.apple.com/documentation/technologyoverviews/adopting-liquid-glass, gelesen 17.10.2026).
   Nach tokens.css und teamwork.css laden. Verhalten (Linse, Glanzlicht, Nachgeben,
   Formänderung) steckt in liquid-glass.js und hängt sich an [data-twc-glass].

   Regeln aus der Anleitung, hier verbindlich:
   1. Glas nur auf der obersten Bedienebene: Kopfleiste/Reiter, schwebende Bedienflächen
      (Popover), Knöpfe in Leisten. Inhalte (Text, Bilder, Karten im Fluss) bekommen kein Glas.
   2. Sparsam: nur die wichtigsten Bedienelemente. Kein Glas auf Glas – Bedienelemente in
      einer Glasfläche sind getönt (.twc-glass-fill), nicht gläsern.
   3. Konzentrische Ecken: innerer Radius = äußerer Radius − Abstand zum Rand.
   4. Formänderung statt Sprung; Schalterknöpfe werden nur während der Berührung zu Glas.
   5. Einstellungen respektieren: Transparenz reduzieren → deckend, Kontrast erhöhen →
      klare Kante und dunkler Text, Bewegung reduzieren → kein Glanzlauf, keine Formänderung.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Grundfläche: Regular-Glas ─────────────────────────────────────── */
.twc .twc-glass {
  --twc-gx: 30%; --twc-gy: 0%;
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(160deg, var(--twc-glass-tint-top), var(--twc-glass-tint) 55%, var(--twc-glass-tint-bottom));
  -webkit-backdrop-filter: blur(var(--twc-glass-blur)) saturate(var(--twc-glass-saturate)) brightness(var(--twc-glass-brightness));
          backdrop-filter: blur(var(--twc-glass-blur)) saturate(var(--twc-glass-saturate)) brightness(var(--twc-glass-brightness));
  box-shadow: var(--twc-glass-edge), var(--twc-glass-shadow);
  transition: transform var(--twc-dur-glass-press) var(--twc-ease-spring), box-shadow var(--twc-dur-glass-press) var(--twc-ease-spring);
}
/* Linsenbrechung am Rand: liquid-glass.js setzt .has-lens nur in Chromium (SVG-Filter #twc-glass-lens) */
.twc .twc-glass.has-lens {
  -webkit-backdrop-filter: blur(var(--twc-glass-blur-lens)) saturate(var(--twc-glass-saturate)) brightness(var(--twc-glass-brightness));
          backdrop-filter: blur(var(--twc-glass-blur-lens)) saturate(var(--twc-glass-saturate)) brightness(var(--twc-glass-brightness));
}
.twc .twc-glass > * { position: relative; }
/* Lesbarkeit: helle Dämpfung hinter Text, Rand bleibt klar */
.twc .twc-glass::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(130% 95% at 35% 45%, var(--twc-glass-legibility), rgba(255,255,255,.12) 80%);
}
/* Glanzlicht auf der Kante, folgt dem Zeiger (--twc-gx / --twc-gy) */
.twc .twc-glass::after {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; padding: 1px;
  background: radial-gradient(60% 80% at var(--twc-gx) var(--twc-gy), rgba(255,255,255,1), rgba(255,255,255,.18) 45%, rgba(255,255,255,.08) 70%, rgba(255,255,255,.5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.twc .twc-glass.is-pressed { transform: scale(var(--twc-glass-press-scale)); box-shadow: var(--twc-glass-edge-pressed), var(--twc-glass-shadow-raised); }

/* ── Formen ───────────────────────────────────────────────────────── */
/* Schwebende Bedienfläche (Popover, Plakette) */
.twc .twc-glass--popover { --twc-glass-r: var(--twc-glass-r-popover); border-radius: var(--twc-glass-r); padding: 18px 20px var(--twc-glass-inset); }
/* Leiste / Reiterkapsel / Einzelknopf in der Kopfzeile */
.twc .twc-glass--bar { --twc-glass-r: var(--twc-r-pill); border-radius: var(--twc-glass-r); padding: var(--twc-glass-bar-inset); }

/* ── Getönte Bedienelemente in Glas (kein Glas auf Glas) ──────────── */
.twc .twc-glass-fill {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border-radius: calc(var(--twc-glass-r, 28px) - var(--twc-glass-inset)); /* konzentrisch */
  background: var(--twc-glass-fill); color: var(--twc-ink); font-weight: var(--twc-w-semibold);
  transition: background-color var(--twc-dur-ui) var(--twc-ease-ui);
}
.twc .twc-glass-fill:hover { background: var(--twc-glass-fill-hover); }

/* ── Reiterkapsel (iPadOS: schwebend oben, iPhone: schwebend unten) ── */
.twc .twc-tabbar { display: inline-flex; align-items: center; gap: 2px; }
.twc .twc-tabbar__tab {
  position: relative; z-index: 1; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 44px; min-width: 44px; padding: 0 18px; border-radius: var(--twc-r-pill);
  font-size: 15px; font-weight: var(--twc-w-medium); letter-spacing: var(--twc-ls-small); color: var(--twc-text); text-decoration: none;
  transition: color var(--twc-dur-ui) var(--twc-ease-ui);
}
.twc .twc-tabbar__tab[aria-current="page"] { color: var(--twc-ink); font-weight: var(--twc-w-semibold); }
.twc .twc-tabbar__tab svg { width: 22px; height: 22px; }
/* Auswahlfläche gleitet zwischen den Reitern (getönt, nicht gläsern) */
.twc .twc-tabbar__indicator {
  position: absolute; z-index: 0; top: var(--twc-glass-bar-inset); bottom: var(--twc-glass-bar-inset); left: 0; width: 0;
  border-radius: var(--twc-r-pill); background: var(--twc-glass-fill);
  transition: transform var(--twc-dur-pill) var(--twc-ease-spring), width var(--twc-dur-pill) var(--twc-ease-spring);
}

/* ── Schalterknopf wird nur während der Berührung zu Glas ─────────── */
.twc .twc-glass-knob.is-active {
  background: var(--twc-glass-tint-top);
  -webkit-backdrop-filter: blur(4px) saturate(var(--twc-glass-saturate)); backdrop-filter: blur(4px) saturate(var(--twc-glass-saturate));
  box-shadow: var(--twc-glass-edge), 0 6px 16px -6px rgba(29,28,57,.25);
}

/* ── Scroll-Kante (Apple „scroll edge effect“) ─────────────────────── */
/* Unter schwebenden Leisten wird durchlaufender Inhalt weich ausgeblendet,
   damit kein Glas über Glas oder über unruhigem Text steht. */
.twc .twc-scroll-edge { position: fixed; left: 0; right: 0; z-index: 15; pointer-events: none; height: var(--twc-scroll-edge-h, 112px); }
.twc .twc-scroll-edge--bottom { bottom: 0; background: linear-gradient(to top, var(--twc-page) 38%, rgba(252,251,249,.85) 62%, rgba(252,251,249,0)); }
.twc .twc-scroll-edge--top { top: 0; background: linear-gradient(to bottom, var(--twc-page) 38%, rgba(252,251,249,.85) 62%, rgba(252,251,249,0)); }

/* ── Ohne Unterstützung für Hintergrundfilter ─────────────────────── */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .twc .twc-glass { background: var(--twc-glass-solid); }
}

/* ── Einstellungen des Geräts ─────────────────────────────────────── */
@media (prefers-reduced-transparency: reduce) {
  .twc .twc-glass, .twc .twc-glass.has-lens { background: var(--twc-glass-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .twc .twc-glass, .twc .twc-glass.has-lens { background: var(--twc-white); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 0 0 1.5px var(--twc-ink); }
  .twc .twc-glass::after { display: none; }
  .twc .twc-glass, .twc .twc-glass * { color: var(--twc-ink); }
  .twc .twc-glass-fill, .twc .twc-tabbar__indicator { background: transparent; box-shadow: inset 0 0 0 1.5px var(--twc-ink); }
}
@media (prefers-reduced-motion: reduce) {
  .twc .twc-glass, .twc .twc-tabbar__indicator { transition: none; }
  .twc .twc-glass.is-pressed { transform: none; }
}