/* ══════════════════════════════════════════════════════════════════════
   iPhone · Glas wie am Mac (seit 26.10.2026)
   ──────────────────────────────────────────────────────────────────────
   Vincent, 26.10.2026, nach dem Mac-Umbau: „Check nochmal die mobile
   Version, dass diese auch vernünftig dazu passt.“ Am iPhone stand noch das
   erste Glas vom 22.10.: grün getönt, Akzent Tannengrün (hell) und Weiß
   (dunkel), Milchglas auf jeder Karte, auf den Arbeitsreitern ein dichter
   Schleier. Am Mac ist Glas seit dem 25./26.10. Apple-Grau mit Systemblau,
   das Foto liegt einmal weich hinter allem, die Karten sind halbdurchsichtig
   ohne eigenen Weichzeichner, und darüber liegt höchstens eine Glasschicht
   (farbwelten-mac.css, Abschnitte 2, 3 und 3a). Diese Datei gibt dem iPhone
   dasselbe Glas: dieselben Farben, dieselbe Tönung, dieselben Regeln.
   Seit 27.10.2026 trägt der Mac den Charakter der klassischen Ansicht
   (Waldgrün, grün-schwarzer Grund, Foto mit 8 statt 40 px Weichzeichner);
   Vincent: „zieh das iPhone als nächsten Schritt nach.“ Seitdem auch hier.

   Regeln dieser Datei:
   - Jede Regel beginnt mit html.hh (handy-frueh.js, unter 640 px). Am Mac,
     am iPad, quer, in der klassischen Ansicht und für buchhalter greift
     nichts; geladen wird sie nur unter 640 px (media in index.html).
   - Die Farbwerte sind die vom Mac. handy-glas.test.js hält beide gleich
     und rechnet die Kontraste mit dem Foto im Hochformat nach. Zwei
     Ausnahmen, beide wegen der Leisten: --rail-active färbt am Mac Symbole
     der Seitenleiste, am iPhone auch Schrift auf Leisten und Foto („‹
     Häuser“, „Fertig“, „Einblenden“); es ist deshalb das Grün, das als
     Schrift hält (--brand). Und --rail-bg: Am Mac liegt die Seitenleiste
     als Milchglas über dem Foto (30 %/45 % Tönung genügen), am iPhone
     schweben Tab-Leiste, Titelleiste und Menüs über Karten mit Schrift;
     dort bleibt die Fläche zu 86 % gefüllt.
   - Die Dämpfung der erleuchteten Fenster (26.10.2026) ist mit der
     dichteren grünen Tönung weg, wie am Mac: Im Hochformat gemessen
     (375 × 667 bis 440 × 956) hält leise Schrift direkt auf dem Foto
     ohne sie 4,5:1 und mehr (Abschnitt 2).
   - Alles in @media screen: Gedruckt wird, wie es war.
   ══════════════════════════════════════════════════════════════════════ */

@media screen {

/* ══ 1 · Glas: Tokens wie am Mac ═════════════════════════════════════
   Werte aus farbwelten-mac.css, Abschnitt 2 (dort die Messungen):
   Waldgrün als Akzent, Schrift mit einem Hauch Grün, Rundung 22 px. Die
   Leisten-Tokens (--rail-*) tragen hier Tab-Leiste, Titelleiste, Menüs und
   Meldungen, am Mac die Seitenleiste. */
html.hh[data-skin="glas"] {
  --bg: #f5f5f7;  --bg-sunken: #ececf0;  --bg-card: #ffffff;  --bg-card2: #f2f2f5;  --bg-card3: #e8e8ed;
  --border: #e1e5e2;  --border-strong: #cdd3cf;
  --text: #12201a;  --text-muted: #36423b;  --text-subtle: #36423b;
  --brand: #1f5f3f;  --brand-hover: #174a31;  --brand-ink: #ffffff;
  --brand-soft: #e3eee7;  --brand-softer: #f1f6f3;  --brand-line: #b6d0c0;  --gold: #8a6c1c;
  --rail-bg: rgba(246,248,246,.86);  --rail-bg-2: rgba(18,32,26,.07);  --rail-line: rgba(18,32,26,.08);
  --rail-ink: #12201a;  --rail-ink-dim: #33413a;  --rail-active: #1f5f3f;
  --viz-grid: #e6e9e7;  --viz-axis: #cdd3cf;  --viz-label: #4f5b55;  --viz-track: #eaedeb;
  --shadow-xs: 0 1px 2px rgba(18,32,26,.06);
  --shadow-lg: 0 12px 32px rgba(18,32,26,.16), 0 1px 3px rgba(18,32,26,.08);
  --tooltip-grund: #ffffff;
  --radius: 22px;  --fw-link: var(--brand);  --fw-ring: var(--brand);
  --warn-ink: #7d5105;  --crit-ink: #9c1b1b;  --good-ink: #046215;
  /* „bald fällig“ an der Brett-Karte: auf rot getönter Karte hielt das
     Orange aus styles.css (#9c4416) im strengen Modell 4,44:1. */
  --serious-ink: #8f3c12;
  /* Glas im Inhalt: Tönung des Fotos (Verlauf, oben am leichtesten),
     Füllung der Karten, Lichtkante oben, die leise Gruppe und die
     Innenflächen (farbwelten-mac.css 3, 3a). */
  --hh-seite-toenung: linear-gradient(180deg, rgba(240,244,241,.70) 0%, rgba(240,244,241,.76) 45%, rgba(240,244,241,.86) 100%);
  --hh-karte: rgba(255,255,255,.62);
  --hh-glanz: rgba(255,255,255,.60);
  --hh-gruppe: rgba(255,255,255,.22);
  --hh-innen: rgba(255,255,255,.32);
  color-scheme: light;
}
html.hh[data-skin="glas"][data-theme="dark"] {
  --bg: #0b130e;  --bg-sunken: #070c09;  --bg-card: #151d18;  --bg-card2: #1d2620;  --bg-card3: #27312a;
  --border: #2a342d;  --border-strong: #3f4b43;
  --text: #f5f7f5;  --text-muted: #ccd4ce;  --text-subtle: #ccd4ce;
  --brand: #8fd6a9;  --brand-hover: #aee2c1;  --brand-ink: #06140c;
  --brand-soft: #173a27;  --brand-softer: #112d1e;  --brand-line: #2b5a40;  --gold: #e0b552;
  --rail-bg: rgba(11,19,14,.86);  --rail-bg-2: rgba(255,255,255,.12);  --rail-line: rgba(255,255,255,.10);
  --rail-ink: #ffffff;  --rail-ink-dim: #cdd5cf;  --rail-active: #8fd6a9;
  --viz-grid: #1d2620;  --viz-axis: #27312a;  --viz-label: #a7b0aa;  --viz-track: #1d2620;
  --shadow-xs: 0 1px 2px rgba(0,0,0,.3);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06);
  --tooltip-grund: #18211b;
  --warn-ink: #f5c25a;  --crit-ink: #f7a8a8;  --good-ink: #62d466;  --serious-ink: #f0a077;
  --hh-seite-toenung: linear-gradient(180deg, rgba(8,14,10,.60) 0%, rgba(8,14,10,.66) 45%, rgba(8,14,10,.80) 100%);
  --hh-karte: rgba(16,22,18,.60);
  --hh-glanz: rgba(255,255,255,.08);
  --hh-gruppe: rgba(8,14,10,.22);
  --hh-innen: rgba(0,0,0,.16);
  /* Flächen mit Schrift im Dunkeln (Abschnitt 1b): Waldgrün mit Weiß. */
  --hh-auswahl: #2b7350;
  --hh-auswahl-hover: #2f7a55;
  --hh-auswahl-ink: #ffffff;
  color-scheme: dark;
}
/* handy-huelle.css setzt die Schatten flach (Schritt 2, :root im Selektor);
   dabei bleibt es, die Karten tragen dazu die Lichtkante. --shadow und
   --shadow-md stehen deshalb hier nicht: Der dunkle Block wiegt so viel wie
   die Regel der Hülle und lädt später, er hätte im Dunkeln den großen
   Schatten vom Mac an Tab-Leiste, Blatt und angetippte Karten gelegt
   (Prüfung 27.10.2026). */

/* ── 1b · Flächen mit Schrift darauf im Dunkeln ──
   Wie am Mac (farbwelten-mac.css, Abschnitt 1, --mac-auswahl): ein tieferer
   Ton mit weißer Schrift, in Klarheit und Gruppen das Systemblau, in Glas
   Waldgrün (5,7:1). Als Schrift bleibt --brand der helle Ton, als Fläche
   stand er mit dunkler Schrift blass da („Beleg scannen“, „Hinzufügen“).
   Dieselbe Liste wie am Mac ohne dessen Leisten, dazu die gefüllten Knöpfe
   der Hülle. Hell ist die Fläche --brand selbst, dort ändert sich nichts.
   Die Werte für Glas stehen in seinem Block (Abschnitt 1). */
html.hh:is([data-skin="klarheit"], [data-skin="gruppen"])[data-theme="dark"] {
  --hh-auswahl: #0a6ee0;
  --hh-auswahl-hover: #2a80ea;
  --hh-auswahl-ink: #ffffff;
}
html.hh:is([data-skin="klarheit"], [data-skin="gruppen"], [data-skin="glas"])[data-theme="dark"] :is(.btn-primary:not([data-api-tage], [data-mw="schein"]), .skip-link,
  .wb-key-num, .pb-chip.aktiv, .todo-statusbtn.active, .todo-filter .tfbtn.active, .er-badge, .er-btn-apply,
  .btn-umbau-save, .btn-mieter-save, .blog-step-num, .sa-num, .beleg-scan-knopf, .handy-beleg,
  .ops-wartung-table td:last-child .btn, .ops-status-btn.ops-btn-done) {
  --brand: var(--hh-auswahl);
  --brand-hover: var(--hh-auswahl-hover);
  --brand-ink: var(--hh-auswahl-ink);
  --blue: var(--hh-auswahl);
}

/* Klarheit, Gruppen und Bühne hell: leise Schrift und Blau als Schrift wie
   am Mac (farbwelten-mac.css, Abschnitt 1; dort die Messungen). */
html.hh:is([data-skin="klarheit"], [data-skin="gruppen"], [data-skin="buehne"]):not([data-theme="dark"]) {
  --text-muted: #636366;
  --text-subtle: #636366;
}
html.hh:is([data-skin="klarheit"], [data-skin="gruppen"]):not([data-theme="dark"]) {
  --brand: #005fd8;
  --brand-hover: #004fb8;
}

/* ══ 2 · Das Foto: einmal leicht weich hinter allem ═══════════════════
   Wie am Mac (farbwelten-mac.css, Abschnitt 3): 8 px weichgezeichnet, das
   Haus bleibt erkennbar, getönt im grünen Verlauf, auf jedem Reiter gleich.
   Gemessen am Prüfstand im Hochformat (nur die Foto-Ebene, 375 × 667 bis
   440 × 956): handy-glas.test.js rechnet die Schrift darauf nach. Bis zum 26.10.2026 lag am iPhone auf den
   Arbeitsreitern der dichte Schleier (farbwelten-rahmen.css, 88 % dunkel),
   auf Heute ein Verlauf; die zweite Zeile überbietet die Schleier-Regel
   (1,3,2) mit (1,3,3), die erste die weiche Fassung aus handy-huelle.css. */
html.hh[data-skin="glas"]:not(#hh-glas) body::before,
html.hh[data-skin="glas"]:not(:has(#tab-uebersicht.active)) body::before {
  content: "";
  position: fixed;
  inset: -24px;
  z-index: -1;
  background: var(--hh-seite-toenung),
    url("img/farbwelt-glas.jpg") center 40% / cover no-repeat;
  filter: blur(8px) saturate(1.3);
  transform: none;
  pointer-events: none;
}
/* Im Safari-Tab blendet iOS beim Scrollen seine Leisten ein und aus. Die
   feste Ebene änderte dann ihre Höhe, und cover rechnete das Foto neu: Bei
   blur 40 fiel das nicht auf, bei 8 px zoomt das erkennbare Haus (Prüfung
   27.10.2026). Mit der Höhe der größten Ansicht (lvh) steht es still, die
   Leisten decken nur seinen unteren Rand. Als App auf dem Home-Bildschirm
   gibt es keine Leisten, dort ist lvh die Fensterhöhe wie vorher. Ohne lvh
   bleibt es bei inset (sonst wäre die Ebene null hoch). */
@supports (height: 100lvh) {
  html.hh[data-skin="glas"]:not(#hh-glas) body::before,
  html.hh[data-skin="glas"]:not(:has(#tab-uebersicht.active)) body::before {
    bottom: auto;
    height: calc(100lvh + 48px);
  }
}

/* ══ 3 · Inhalt: halbdurchsichtige Karten ohne eigenen Weichzeichner ══
   Das Foto ist schon weich; ein Weichzeichner je Karte rechnet beim
   Scrollen jede Ebene neu und kostet am iPhone am meisten. */
html.hh[data-skin="glas"] {
  /* hier aufgelöst: deckend, für Knöpfe, Felder und Menüs im Inhalt */
  --hh-karte-deckend: var(--bg-card);
  --hh-innen-deckend: var(--bg-card2);
  --hh-grund-deckend: var(--bg);
  --hh-mulde-deckend: var(--bg-sunken);
}
html.hh[data-skin="glas"] #hauptinhalt { --bg-card: var(--hh-karte); }
html.hh[data-skin="glas"] #hauptinhalt :is([role="menu"], [role="listbox"]) { --bg-card: var(--hh-karte-deckend); }
html.hh[data-skin="glas"] #hauptinhalt :is(.metric-card, .kpi-karte, .checkin-kachel, .vorausschau-kachel, .t5-card,
  .todo-heute-card, .ge-card, .m-coll-head.klapp, .gewinn-uebersicht, .unit-card,
  .pb-spalte, .hh-zeilen),
html.hh[data-skin="glas"] .todo-quickadd input {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: var(--shadow-xs), inset 0 1px 0 var(--hh-glanz);
}
/* Wie am Mac: Fest- und Umbau-Karten der Einheiten nicht blass (ihre
   Beschriftung stand bei 3,3–4,1:1), „Gesendet“ im Mail-Protokoll lesbar. */
html.hh[data-skin="glas"] :is(.unit-card-fest, .unit-card-umbau) { opacity: 1; filter: none; }
html.hh[data-skin] .komm-status-sent { background: var(--brand-soft); color: var(--brand); }

/* ══ 4 · Höchstens eine Glasschicht ══════════════════════════════════
   Wie farbwelten-mac.css, Abschnitt 3a: Was nur Karten gruppiert, ist eine
   leise Gruppe (--hh-gruppe), was in einer Karte liegt, dichteres Glas
   derselben Tönung (--hh-innen). Heute bleibt, wie es ist. Deckend bleiben
   Knöpfe, Felder, Menüs, Listen und Diagramme. */
html.hh[data-skin="glas"] #hauptinhalt .tab-panel:not(#tab-uebersicht) {
  --bg: var(--hh-innen);
  --bg-card2: var(--hh-innen);
  --bg-sunken: var(--hh-gruppe);
}
html.hh[data-skin="glas"] #hauptinhalt .tab-panel:not(#tab-uebersicht) :is(button, .btn, input, select, textarea, svg,
  [role="menu"], [role="listbox"], .kal-unit-label, .tl-bar-label) {
  --bg: var(--hh-grund-deckend);
  --bg-card2: var(--hh-innen-deckend);
  --bg-sunken: var(--hh-mulde-deckend);
}
/* Eigene Bedienteile der Hülle im Inhalt: Das Segment des Bretts ist eine
   Spur mit hellem Knopf, wie im Kontrollzentrum. */
html.hh[data-skin="glas"] #hauptinhalt .hh-segment { background: var(--hh-gruppe); }
html.hh[data-skin="glas"] #hauptinhalt .hh-seg.aktiv { background: var(--hh-karte); box-shadow: var(--shadow-xs), inset 0 1px 0 var(--hh-glanz); }
html.hh[data-skin="glas"] #hauptinhalt dialog {
  --bg-card: var(--hh-karte-deckend);
  --bg: var(--hh-grund-deckend);
  --bg-card2: var(--hh-innen-deckend);
  --bg-sunken: var(--hh-mulde-deckend);
}
/* Brett: Die Spalte gruppiert die Karten, sie ist keine Karte. */
html.hh[data-skin="glas"] #hauptinhalt .pb-spalte { box-shadow: none; }
html.hh[data-skin="glas"] #hauptinhalt .ro-portfolio-bar {
  background: var(--hh-gruppe);
  box-shadow: none;
}
html.hh[data-skin="glas"] #hauptinhalt :is(.ck-karte .ck-kachel, .ck-karte .fin-block, .fin-block .ck-kachel,
  .fin-block .ck-tabelle-rahmen, .fin-block .ck-karte, .ro-unit .ck-tabelle-rahmen, .rm-karte .rm-unit, .ck-karte .st-objekt,
  .sa-paper .sa-objekt-card, .fin-block .ka-wrap, #fin-ampel > .fin-ampel, .roi-panel .roi-panel-toggle,
  .gewinn-uebersicht .fin-block) {
  --bg-card: var(--hh-innen);
}
html.hh[data-skin="glas"] #hauptinhalt .ops-kpi-kritisch { background: color-mix(in srgb, rgb(239 68 68) 6%, var(--bg-card)); }
html.hh[data-skin="glas"] #hauptinhalt .ops-kpi-warn { background: color-mix(in srgb, rgb(245 158 11) 6%, var(--bg-card)); }
html.hh[data-skin="glas"] #hauptinhalt .wb-markt-banner { background: color-mix(in srgb, var(--viz-7) 8%, var(--bg-card)); }
html.hh[data-skin="glas"] #hauptinhalt .tl-recom-info { background: color-mix(in srgb, rgb(59 130 246) 10%, var(--bg-card)); }
html.hh[data-skin="glas"] #hauptinhalt .fund-klartext { background: color-mix(in srgb, var(--blue) 8%, var(--bg-card)); }
html.hh[data-skin="glas"] #hauptinhalt .pe-stand.veraltet { padding: 0 var(--sp-1); border-radius: var(--r-xs); background: var(--warn-soft); }
html.hh[data-skin="glas"] #hauptinhalt :is(#kredit-tracker .kredit-hero-item, .pl-gap-info, #nl-config) {
  --bg: var(--hh-karte);
  --bg-card2: var(--hh-karte);
}
html.hh[data-skin="glas"] #hauptinhalt .komm-table-wrap { background: var(--bg-card); }
html.hh[data-skin="glas"] #hauptinhalt :is(.sa-comp-ring, .bk-score-ring) > span { background: var(--hh-karte-deckend); }

/* ══ 5 · Schrift direkt auf dem Foto ════════════════════════════════
   „Alle Funktionen zeigen“ steht am Ende jeder Seite direkt auf dem Foto.
   Akzent als Schrift braucht eine Fläche (farbwelten-mac.css, 3a: auf dem
   Foto hält Waldgrün hell nur 3,6:1, dunkel 4,4:1, auf der Kapsel 5,8:1
   und 8,0:1); deshalb eine Glaskapsel wie „Alle anzeigen“ in iOS. Die
   Zeichen oben auf den Wurzeln (+, Profil, Filter) sind keine Schrift,
   ihnen genügen 3:1 (hell 3,6:1). */
html.hh[data-skin="glas"] .handy-alles-knopf {
  width: auto;
  margin-inline: auto;
  padding: 0 var(--sp-5);
  background: var(--hh-karte);
  border-radius: var(--r-full);
  box-shadow: var(--shadow-xs), inset 0 1px 0 var(--hh-glanz);
}

} /* @media screen */