/* =====================================================================
 * Glas-Stil (1.3.0, Spec 3): Verlauf im Hintergrund, Glas fuer die
 * Bedienebene (Kopf, schwebende Leiste, Seitenleiste); Karten, Dialoge und
 * Blaetter deckend (1.4). Ohne Glas-Unterstuetzung, bei "Transparenz
 * reduzieren", "Kontrast erhoehen" oder Glas aus (Konto) alles deckend.
 * Kontraste im schlechtesten Fall prueft test/tokens.test.js.
 * ================================================================== */
body { background: var(--verlauf-3); }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 60% at 0% 0%, var(--verlauf-2) 0%, transparent 62%),
    radial-gradient(90% 50% at 100% 35%, var(--verlauf-1) 0%, transparent 60%),
    var(--verlauf-3);
}

/* Kopf: oben durchsichtig, beim Scrollen Glas mit kleinem Seitentitel */
.kopf { background: transparent; border-bottom-color: transparent; }
.kopf-titel { font-weight: 700; opacity: 0; }
@keyframes kopf-glas {
  to {
    background: var(--glas); border-bottom-color: var(--glas-rand); box-shadow: 0 6px 20px rgb(16 24 40 / 0.08);
    -webkit-backdrop-filter: blur(var(--unschaerfe)) saturate(1.4); backdrop-filter: blur(var(--unschaerfe)) saturate(1.4);
  }
}
@keyframes titel-ein { to { opacity: 1; } }
@supports (animation-timeline: scroll()) {
  .kopf { animation: kopf-glas linear both; animation-timeline: scroll(root); animation-range: 0 64px; }
  .kopf-titel { animation: titel-ein linear both; animation-timeline: scroll(root); animation-range: 48px 96px; }
}
/* ohne scrollgesteuerte Animation (oder bei reduzierter Bewegung) ist der Kopf immer Glas */
@supports not (animation-timeline: scroll()) {
  .kopf { background: var(--glas); border-bottom-color: var(--glas-rand); -webkit-backdrop-filter: blur(var(--unschaerfe)) saturate(1.4); backdrop-filter: blur(var(--unschaerfe)) saturate(1.4); }
}
@media (prefers-reduced-motion: reduce) {
  .kopf { background: var(--glas); border-bottom-color: var(--glas-rand); -webkit-backdrop-filter: blur(var(--unschaerfe)) saturate(1.4); backdrop-filter: blur(var(--unschaerfe)) saturate(1.4); }
}

/* Leiste unten: schwebende Kapsel mit vier Zielen, runder Erfassen-Knopf rechts daneben */
.leiste {
  left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 10px; padding: 0;
  background: transparent; border: 0; box-shadow: none;
}
.leiste .kapsel {
  flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); height: 62px; border-radius: var(--radius-rund);
  background: var(--glas); border: 1px solid var(--glas-rand); box-shadow: 0 10px 30px rgb(16 24 40 / 0.14);
  -webkit-backdrop-filter: blur(var(--unschaerfe)) saturate(1.4); backdrop-filter: blur(var(--unschaerfe)) saturate(1.4);
}
.leiste .kapsel a { min-height: 60px; color: var(--glas-schrift); }
.leiste .kapsel a[aria-current="page"] { color: var(--akzent); }
/* Akzent auf Glas nur fuer das Symbol (3:1); Schrift braucht 4,5:1 im schlechtesten Fall -> Glas-Schrift */
.leiste .kapsel a[aria-current="page"] span { color: var(--glas-schrift); }
.leiste a.gross { flex: none; min-height: 0; }
.leiste a.gross span.kreis { width: 62px; height: 62px; margin-top: 0; border-radius: 50%; box-shadow: var(--schatten-hoch); }
.inhalt { padding-bottom: calc(62px + 12px + 32px + env(safe-area-inset-bottom)); }

/* PC: Seitenleiste als schwebendes Glas-Panel */
@media (min-width: 900px) {
  .leiste { display: none; }
  .rahmen { grid-template-columns: calc(var(--seitenleiste) + 16px) 1fr; }
  .seitenleiste {
    margin: 16px 0 16px 16px; top: 74px; height: calc(100vh - 58px - 32px); border-radius: 22px;
    background: var(--glas); border: 1px solid var(--glas-rand); box-shadow: 0 10px 30px rgb(16 24 40 / 0.10);
    -webkit-backdrop-filter: blur(var(--unschaerfe)) saturate(1.4); backdrop-filter: blur(var(--unschaerfe)) saturate(1.4);
  }
  .inhalt { padding-bottom: 56px; }
}

/* Inhalt (ab 1.4, Apple-Regel „kein Glas im Inhalt“): Karten, Dialoge und Blaetter deckend */
.karte { background: var(--flaeche); border-color: var(--glas-rand); border-radius: 22px; }
dialog.dialog, dialog.blatt { background: var(--flaeche); border-color: var(--rand); }
dialog.dialog { border-radius: 24px; }

/* Darstellung je Geraet (Konto): Glas aus -> Leiste, Kopf und Seitenleiste deckend */
:root[data-glas="aus"] { --glas: var(--glas-deckend); }
:root[data-glas="aus"] .leiste .kapsel, :root[data-glas="aus"] .seitenleiste, :root[data-glas="aus"] .kopf {
  -webkit-backdrop-filter: none; backdrop-filter: none;
}

/* Rueckfall: deckend */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glas: var(--glas-deckend); }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  :root { --glas: var(--glas-deckend); }
}
@media (prefers-contrast: more) {
  .karte, .leiste .kapsel, .kopf, .seitenleiste { border-color: var(--rand-stark); }
}

/* Startseite (1.4, Spec 2.1): Kachel-Raster - Telefon 2 Spalten, ab 900 px 4 */
.gruss { margin: 0 0 2px; color: var(--text-leise); font-weight: 650; }
.start-raster { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: var(--abstand); }
.start-raster > .karte { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.start-raster > .karte > h2 { margin: 0 0 2px; font-size: 1.05rem; }
.start-raster > .karte p { margin: 0; overflow-wrap: anywhere; }
.start-raster > .karte > a:last-child { margin-top: auto; padding-top: 6px; }
.k-gross, .k-breit, .k-voll { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .start-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .k-gross { grid-column: span 2; grid-row: span 2; }
  .k-breit { grid-column: span 2; }
}
.grosse-zahl { font-size: clamp(2rem, 1.6rem + 2vw, 2.6rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; margin: 0 0 4px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.klein { font-size: 0.85rem; }
.trend { color: var(--gruen); font-weight: 650; }
.ampel.mit-symbol::before { content: none; }
.ampel.mit-symbol svg { width: 18px; height: 18px; flex: none; }
.ampel.mit-symbol { gap: 4px; }
.verlauf { display: grid; gap: 8px; margin-top: 6px; }
/* PC: die grosse Kachel fuellt ihre Hoehe mit der Linie */
@media (min-width: 900px) {
  .k-gross .verlauf { flex: 1; grid-template-rows: auto minmax(80px, 1fr) auto; }
  .k-gross [data-linie] { position: relative; min-height: 80px; }
  .k-gross [data-linie] .diagramm.linie { position: absolute; inset: 0; height: 100%; }
}
.pillen { display: inline-flex; justify-self: start; gap: 4px; padding: 3px; border-radius: var(--radius-rund); background: var(--flaeche-2); }
.pille { min-height: 44px; padding: 0 14px; border: 0; border-radius: var(--radius-rund); background: transparent; color: var(--text-leise); font: inherit; font-size: 0.9rem; font-weight: 650; cursor: pointer; }
.pille[aria-pressed="true"] { background: var(--flaeche); color: var(--akzent); box-shadow: var(--schatten); }
.pille:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.ring-zeile { display: flex; align-items: center; gap: 12px; }
.ring-zeile .diagramm.ring { width: 64px; height: 64px; flex: none; }
.ring-zahl { font-size: 1.4rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.balken-liste, .legende { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.balken-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 6px 4px; border-radius: var(--radius-klein); color: var(--text); text-decoration: none; }
a.balken-zeile:hover { background: var(--akzent-hell); }
.balken-zeile .diagramm.balken { grid-column: 1 / -1; }
.balken-zeile .name, .legende .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.balken-zeile .betrag, .legende .betrag { font-variant-numeric: tabular-nums; color: var(--text-leise); }
.donut-zeile { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 16px; }
/* schmale Telefone: Donut ueber der Legende, damit die Kategorienamen lesbar bleiben */
@media (max-width: 599px) { .donut-zeile { grid-template-columns: minmax(0, 1fr); justify-items: center; } .donut-zeile .legende { justify-self: stretch; } }
.donut-zeile .diagramm.donut { width: 120px; height: 120px; }
.legende a, .legende .zeile-innen { display: flex; align-items: center; gap: 8px; min-height: 44px; color: var(--text); text-decoration: none; }
.legende a:hover .name { text-decoration: underline; }
.leer-klein p { color: var(--text-leise); }
.karte.kompakt h2 { display: flex; align-items: center; gap: 10px; }
.karte.kompakt h2 svg { width: 34px; height: 34px; padding: 7px; border-radius: 11px; background: var(--akzent-hell); color: var(--akzent); flex: none; }
.skelett.start { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: var(--abstand); }
.skelett.start > div { aspect-ratio: auto; min-height: 150px; }
.skelett.start > div:first-of-type { grid-column: 1 / -1; min-height: 220px; }
@media (min-width: 900px) {
  .skelett.start { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .skelett.start > div:first-of-type { grid-column: span 2; grid-row: span 2; }
}
/* Zuletzt erfasst: am Telefon waagerecht wischen mit Einrasten */
@media (max-width: 899px) {
  .fotokacheln.wisch { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 6px; overscroll-behavior-x: contain; }
  .fotokacheln.wisch > .fotokachel { flex: 0 0 70%; scroll-snap-align: start; }
}
.fotokacheln { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .fotokacheln { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } }
.fotokachel { display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; background: var(--flaeche); border: 1px solid var(--rand); color: var(--text); text-decoration: none; transition: transform var(--dauer), box-shadow var(--dauer); }
.fotokachel .bild { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; background: linear-gradient(150deg, var(--verlauf-1), var(--akzent-hell)); overflow: hidden; }
.fotokachel .bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 350ms cubic-bezier(0.2, 0.7, 0.3, 1); }
.fotokachel .bild svg { width: 36px; height: 36px; color: var(--akzent); }
.fotokachel .text { display: grid; gap: 4px; padding: 10px 12px 12px; }
.fotokachel .name { font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.fotokachel .preis { justify-self: start; padding: 1px 9px; border-radius: var(--radius-rund); background: var(--akzent-hell); color: var(--akzent); font-size: 0.8rem; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (hover: hover) { .fotokachel:hover { transform: translateY(-2px); box-shadow: var(--schatten); } .fotokachel:hover .bild img { transform: scale(1.05); } }
.fotokachel:active { transform: scale(0.98); }

/* Leiste klein beim Scrollen nach unten (1.4, Spec 5): Kapsel 48 px, Beschriftung nur fuer Vorleser */
.leiste.klein .kapsel { height: 48px; }
.leiste.klein .kapsel a { min-height: 46px; }
.leiste.klein .kapsel a span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.leiste.klein a.gross span.kreis { width: 48px; height: 48px; }

/* Ziehen zum Aktualisieren (1.4, Spec 5) */
html { overscroll-behavior-y: contain; }
.ziehen-anzeige {
  position: fixed; top: calc(env(safe-area-inset-top, 0px) + 6px); left: 50%; z-index: 40; width: 40px; height: 40px; margin-left: -20px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%; pointer-events: none;
  background: var(--flaeche); color: var(--akzent); box-shadow: var(--schatten-hoch); opacity: 0;
}
.ziehen-anzeige.aktiv { opacity: 1; }
.ziehen-anzeige.bereit { background: var(--akzent); color: var(--akzent-text); }
.ziehen-anzeige svg { width: 22px; height: 22px; }