/* ══ iPhone-Hülle (seit 24.10.2026) ═══════════════════════════════════════
   Tab-Leiste, Titelleiste mit großem Titel, Bereichslisten. Jede Regel
   hängt an html.hh (handy-frueh.js, handy-huelle.js): Am Mac, am iPad, im
   Querformat und für die Rolle buchhalter greift hier nichts. Bedienteile
   der Leisten sind wie .mrail-area eigene Klassen, keine .btn: Tabs, Zurück
   und Listenzeilen sind bei iOS keine Knöpfe mit Rahmen oder Füllung.
   Warum so: Kopf von handy-modell.js und docs/cockpit.md, „Cockpit am
   iPhone“. */

/* Auch was in Reitern steckt (Heute, Brett, Schritt 6 in handy-reiter.css),
   damit es nach dem Drehen (Hülle aus) nicht stehen bleibt. */
.hh-leiste, .hh-kopf, .hh-liste, .hh-tabbar, .hh-umschalter, .hh-blatt, .hh-signale, .hh-segment, .hh-leer, .hh-r-fuss, .hh-mehr, .hh-menue, .hh-erscheinung-ort, .hh-auffrischen { display: none; }
html.hh .hh-umschalter, .hh-umschalter.zur-neuen { display: flex; }
html.hh .hh-umschalter { border-top: 1px solid var(--border); }

/* ── Alte Navigation weg: Kopfleiste, Reiter-Chips, Bereichsleiste, FAB ── */
html.hh .topbar,
html.hh .subnav,
html.hh .mobile-rail,
html.hh .handy-beleg { display: none !important; }

/* Kein Einblenden beim Reiterwechsel und nach dem stillen Nachladen: die
   Karten fielen sonst nach rund 0,9 s auf Deckkraft 0 und kamen bei 1,9 s
   zurück (gemessen am Prüfstand). Bewegung gibt es nur noch beim Hinein-
   und Herausschieben einer Seite. */
html.hh .tab-panel.active,
html.hh .reveal-in { animation: none; }

html.hh {
  --hh-leiste: 44px;
  --hh-tabbar: 62px;
  --hh-tabbar-abstand: calc(6px + env(safe-area-inset-bottom) / 2);
  -webkit-tap-highlight-color: transparent;
}
html.hh main {
  padding-top: calc(var(--hh-leiste) + env(safe-area-inset-top) + var(--sp-2));
  padding-bottom: calc(var(--hh-tabbar) + var(--hh-tabbar-abstand) + var(--sp-6));
}
/* Beim Anordnen liegt zusätzlich die Kachel-Leiste unten (styles.css,
   body.kacheln-anordnen): ihr Platz kommt dazu, sonst wären die Pfeile der
   letzten Kachel verdeckt. */
html.hh body.kacheln-anordnen main {
  padding-bottom: calc(var(--hh-tabbar) + var(--hh-tabbar-abstand) + 130px);
}

/* ── Titelleiste: oben durchsichtig, eingeklappt Glas mit kleinem Titel ── */
html.hh .hh-leiste {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 210;
  height: calc(var(--hh-leiste) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) var(--sp-2) 0;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
html.hh .hh-leiste.eingeklappt {
  background: var(--rail-bg);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  backdrop-filter: blur(20px) saturate(1.8);
  border-bottom-color: var(--rail-line);
}
html.hh .hh-titel {
  grid-column: 2;
  max-width: 56vw;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--fs-lg); font-weight: var(--fw-semi);
  color: var(--text);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease);
}
html.hh .hh-leiste.eingeklappt .hh-titel { opacity: 1; }
html.hh .hh-zurueck {
  grid-column: 1; justify-self: start;
  display: none; align-items: center; gap: 0;
  min-height: 44px; max-width: 34vw;
  padding: 0 var(--sp-2) 0 0;
  background: none; border: 0;
  color: var(--rail-active);
  font-family: inherit; font-size: var(--fs-lg);
  cursor: pointer;
}
html.hh .hh-zurueck span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.hh .hh-zurueck [data-lucide], html.hh .hh-zurueck svg { width: 28px; height: 28px; stroke-width: 2.2; flex: none; }
html.hh .hh-leiste.mit-zurueck .hh-zurueck { display: flex; }
html.hh .hh-rechts { grid-column: 3; justify-self: end; display: flex; align-items: center; }
html.hh .hh-profil, html.hh .hh-neu, html.hh .hh-filter {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  background: none; border: 0;
  color: var(--rail-active);
  cursor: pointer;
}
html.hh .hh-profil [data-lucide], html.hh .hh-profil svg { width: 26px; height: 26px; stroke-width: 1.8; }
html.hh .hh-neu [data-lucide], html.hh .hh-neu svg { width: 26px; height: 26px; stroke-width: 2; }
html.hh .hh-filter [data-lucide], html.hh .hh-filter svg { width: 24px; height: 24px; stroke-width: 2; }
html.hh:not([data-hh-wurzel]) .hh-filter,
html.hh:not([data-hh-tab="brett"]) .hh-filter { display: none; }
/* „+“ nur auf den Wurzeln von Heute und Brett */
html.hh:not([data-hh-wurzel]) .hh-neu,
html.hh:not([data-hh-tab="heute"]):not([data-hh-tab="brett"]) .hh-neu { display: none; }
/* Einstellungen gibt es auf den Wurzeln; auf Unterseiten steht dort nichts. */
html.hh:not([data-hh-wurzel]) .hh-profil { visibility: hidden; }
html.hh .hh-zurueck:active, html.hh .hh-profil:active, html.hh .hh-neu:active, html.hh .hh-filter:active { opacity: .4; }

html.hh:not([data-hh-wurzel]) .hh-doppelt { display: none; }

/* ── Großer Titel auf den Wurzeln ── */
html.hh[data-hh-wurzel] .hh-kopf {
  display: block;
  padding: 0 var(--sp-1) var(--sp-3);
}
/* Das Datum halbfett wie über dem großen Titel am Mac und in der
   klassischen Ansicht (seit 27.10.2026, vorher normal). */
html.hh .hh-datum {
  display: block; min-height: 1em;
  font-size: var(--fs-md); font-weight: var(--fw-semi); color: var(--text-muted);
  text-transform: none; letter-spacing: normal;
}
html.hh .hh-datum:empty { display: none; }
html.hh .hh-grosstitel {
  margin: 0;
  font-size: var(--fs-3xl); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight); line-height: var(--lh-tight);
  color: var(--text);
}

/* ── Bereichslisten (Häuser, Finanzen) wie in den Einstellungen ── */
html.hh[data-hh-seite="bereich-haeuser"] .hh-liste[data-wurzel="bereich-haeuser"],
html.hh[data-hh-seite="bereich-finanzen"] .hh-liste[data-wurzel="bereich-finanzen"] { display: block; }
html.hh .hh-gruppe { margin: 0 0 var(--sp-6); }
html.hh .hh-gruppe-kopf {
  padding: 0 var(--sp-4) 6px;
  font-size: var(--fs-sm); color: var(--text-muted);
}
html.hh .hh-zeilen {
  overflow: hidden;
  background: var(--bg-card);
  border-radius: var(--r-md);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
}
html.hh .hh-zeile {
  position: relative;
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%; min-height: 50px;
  padding: 0 var(--sp-3) 0 var(--sp-4);
  background: transparent; border: 0;
  color: var(--text);
  font-family: inherit; font-size: var(--fs-lg); text-align: left;
  cursor: pointer;
  -webkit-touch-callout: none; user-select: none;
  transition: background var(--dur-2) var(--ease);
}
/* Trennlinie erst ab dem Text, wie bei iOS */
html.hh .hh-zeile + .hh-zeile::before {
  content: '';
  position: absolute; top: 0; right: 0; left: 57px;
  height: 1px; background: var(--border);
}
html.hh .hh-zeile:active { background: var(--bg-card3); transition: none; }
html.hh .hh-kachel {
  display: grid; place-items: center; flex: none;
  width: 29px; height: 29px; border-radius: 7px;
  background: var(--viz-label); color: #fff;
}
html.hh .hh-kachel [data-lucide], html.hh .hh-kachel svg { width: 18px; height: 18px; stroke-width: 2; }
html.hh .hh-kachel[data-farbe="viz-1"] { background: var(--viz-1); }
html.hh .hh-kachel[data-farbe="viz-2"] { background: var(--viz-2); }
html.hh .hh-kachel[data-farbe="viz-3"] { background: var(--viz-3); }
html.hh .hh-kachel[data-farbe="viz-4"] { background: var(--viz-4); }
html.hh .hh-kachel[data-farbe="viz-5"] { background: var(--viz-5); }
html.hh .hh-kachel[data-farbe="viz-6"] { background: var(--viz-6); }
html.hh .hh-kachel[data-farbe="viz-7"] { background: var(--viz-7); }
html.hh .hh-kachel[data-farbe="viz-8"] { background: var(--viz-8); }
html.hh .hh-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.hh .hh-wert:not(:empty) {
  min-width: 22px; height: 22px; padding: 0 7px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-full);
  background: var(--crit); color: #fff;
  font-size: var(--fs-sm); font-weight: var(--fw-semi);
  font-variant-numeric: tabular-nums;
}
html.hh .hh-wert.warn:not(:empty) { background: var(--warn); color: #2b1d00; }
html.hh .hh-pfeil, html.hh svg.hh-pfeil { width: 18px; height: 18px; flex: none; color: var(--text-subtle); stroke-width: 2.4; }

/* ── Tab-Leiste: schwebende Glas-Kapsel, rechts daneben die Kamera ── */
html.hh .hh-tabbar {
  display: flex; gap: var(--sp-2); align-items: stretch;
  position: fixed; left: var(--sp-3); right: var(--sp-3);
  bottom: var(--hh-tabbar-abstand);
  z-index: 220;
  height: var(--hh-tabbar);
}
html.hh .hh-tabs, html.hh .hh-kamera {
  background: var(--rail-bg);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  backdrop-filter: blur(24px) saturate(1.8);
  border: 1px solid var(--rail-line);
  box-shadow: var(--shadow-md);
  border-radius: var(--r-full);
}
html.hh .hh-tabs { flex: 1; display: flex; padding: 4px; min-width: 0; }
html.hh .hh-tab {
  position: relative; flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: none; border: 0; border-radius: var(--r-full);
  color: var(--rail-ink-dim);
  font-family: inherit; font-size: var(--fs-2xs); font-weight: var(--fw-medium); line-height: 1;
  cursor: pointer;
  -webkit-touch-callout: none; user-select: none;
}
html.hh .hh-tab span:not(.hh-punkt) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
html.hh .hh-tab [data-lucide], html.hh .hh-tab svg { width: 24px; height: 24px; stroke-width: 1.8; }
html.hh .hh-tab.aktiv { color: var(--rail-active); background: var(--rail-bg-2); }
html.hh .hh-tab.aktiv svg { stroke-width: 2.3; }
html.hh .hh-tab:active { opacity: .55; }
html.hh .hh-punkt {
  position: absolute; top: 7px; left: 50%;
  width: 8px; height: 8px; border-radius: 50%;
  transform: translateX(8px);
  background: var(--crit);
  box-shadow: 0 0 0 2px var(--rail-bg);
  display: none;
}
html.hh .hh-punkt.show { display: block; }
html.hh .hh-kamera {
  flex: none; width: var(--hh-tabbar);
  display: grid; place-items: center;
  color: var(--rail-active);
  cursor: pointer;
}
html.hh .hh-kamera [data-lucide], html.hh .hh-kamera svg { width: 26px; height: 26px; stroke-width: 1.9; }
html.hh .hh-kamera:active { opacity: .55; }
html.hh.hh-tastatur .hh-tabbar { display: none; }

/* ── Seite hinein- und herausschieben ── */
@keyframes hh-push { from { transform: translateX(32%); opacity: .35; } to { transform: none; opacity: 1; } }
@keyframes hh-pop  { from { transform: translateX(-22%); opacity: .5; } to { transform: none; opacity: 1; } }
html.hh main.hh-push { animation: hh-push 340ms cubic-bezier(.32, .72, 0, 1); }
html.hh main.hh-pop  { animation: hh-pop 300ms cubic-bezier(.32, .72, 0, 1); }
@media (prefers-reduced-motion: reduce) {
  html.hh main.hh-push, html.hh main.hh-pop { animation: none; }
}

/* ══ Schritt 2: Ruhe und Optik (seit 24.10.2026) ═════════════════════════
   Aus der Analyse „woran es liegt“: gesperrte GROSSBUCHSTABEN, dünne Rahmen
   um ganze Abschnitte, eine Lichtkante an jeder Karte und das scharfe Foto
   hinter dem Text ließen die App nach Web-Dashboard aussehen. Apple legt Glas
   auf die Leisten und lässt den Inhalt darunter ruhig. */

/* Rückmeldung sichtbar: Fünf Dateien setzen className „toast-…“ (finance.js,
   zahlungen.js, kommunikation.js, newsletter.js, media-upload.js), das kennt
   styles.css nicht – rund 90 Meldungen blieben unsichtbar, und danach auch
   die aus dashboard.js (display:none blieb stehen). Am iPhone als Glaskapsel
   unter der Titelleiste. Am Mac ist das ein eigener Schritt (Desktop-Analyse). */
html.hh #toast {
  top: calc(var(--hh-leiste) + env(safe-area-inset-top) + var(--sp-2));
  bottom: auto; left: var(--sp-4); right: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--rail-line); border-radius: var(--r-lg);
  background: var(--rail-bg);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  backdrop-filter: blur(24px) saturate(1.8);
  font-size: var(--fs-md); text-align: center;
  transform: translateY(-12px);
}
html.hh #toast.show { display: block !important; }
html.hh #toast.show, html.hh #toast[class^="toast-"] { transform: none; opacity: 1; }

/* Keine gesperrten Versalien: das deutlichste Merkmal eines Web-Dashboards
   („AKTIONEN“, „OFFEN“, „RÜCKLAGE NÖTIG FÜR 2026“, „FESTMIETE“). Die Sperrung
   hängt am Token --ls-wide, das nur Versal-Labels tragen. */
html.hh { --ls-wide: normal; }
html.hh body * { text-transform: none !important; }

/* Keine Rahmen um Abschnitte, keine Lichtkante: In Glas bekam ein Abschnitt
   mit Kennzahlen einen Rand, aber keine Fläche (Betriebs-Cockpit,
   Geldeingang; farbwelten-rahmen.css, die Randregel hat eine kürzere
   Ausnahmeliste als die Kartenregel). */
html.hh .tab-panel > section { border: 0 !important; }
/* :root mit im Selektor: farbwelten.css setzt die Schatten für Glas dunkel
   mit :root[data-skin][data-theme] (0,3,0), das muss hier überboten werden. */
html.hh:root[data-skin="glas"] { --shadow: var(--shadow-xs); --shadow-md: var(--shadow-xs); }

/* Das Foto als weiche Farbfläche statt scharf hinter dem Text. */
html.hh[data-skin="glas"] body::before {
  filter: blur(22px) saturate(1.15);
  transform: scale(1.12);
}

/* Tippen wie bei iOS: gefüllte Knöpfe werden kurz dunkler. */
html.hh .btn:active { filter: brightness(.88); transition: none; }

/* ══ Schritt 3: Heute (seit 24.10.2026, handy-heute.js) ═════════════════
   Kein Aufgabenblock und keine Schnellzeile mehr: Die Aufgaben stehen im
   Brett, oben steht „Braucht dich“ mit den Zählern über 0. */
html.hh .handy-schnell,
html.hh section[data-kachel="todo-top"] { display: none !important; }
html.hh .hh-signale:not([hidden]) { display: block; margin-bottom: var(--sp-6); }

/* Neue Aufgabe: Blatt von oben, damit die Tastatur es nicht verdeckt. */
html.hh .hh-blatt {
  display: block;
  position: fixed; inset: 0; z-index: 400;
  background: rgba(0,0,0,.45);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-2) var(--ease);
}
html.hh .hh-blatt.offen { opacity: 1; pointer-events: auto; }
html.hh .hh-blatt-panel {
  position: absolute; top: 0; left: 0; right: 0;
  margin: 0;
  padding: calc(env(safe-area-inset-top) + var(--sp-2)) var(--sp-4) var(--sp-4);
  background: var(--rail-bg);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  backdrop-filter: blur(24px) saturate(1.8);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  box-shadow: var(--shadow-md);
  transform: translateY(-100%);
  transition: transform var(--dur-3) var(--ease-out);
}
html.hh .hh-blatt.offen .hh-blatt-panel { transform: none; }
html.hh .hh-blatt-kopf {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  min-height: 44px; margin-bottom: var(--sp-2);
  font-size: var(--fs-lg); color: var(--text);
}
html.hh .hh-blatt-knopf {
  justify-self: start;
  min-height: 44px; padding: 0;
  background: none; border: 0;
  color: var(--rail-active);
  font-family: inherit; font-size: var(--fs-lg);
  cursor: pointer;
}
html.hh .hh-blatt-fertig { justify-self: end; font-weight: var(--fw-semi); }
html.hh .hh-blatt-panel input {
  width: 100%; box-sizing: border-box;
  min-height: 44px; padding: var(--sp-3) var(--sp-4);
  border: 0; border-radius: var(--r-md);
  background: var(--bg-card2); color: var(--text);
  font-family: inherit; font-size: var(--fs-lg);
}
html.hh .hh-blatt-hinweis { margin: var(--sp-2) var(--sp-1) 0; font-size: var(--fs-sm); color: var(--text-muted); }

/* ══ Schritt 4: Brett wie Erinnerungen (seit 24.10.2026, handy-brett.js) ══
   Statt Werkzeugzeile, Behälter-Chips und Status-Chips (rund 260 px vor der
   ersten Karte): eine Auswahl, darunter genau eine Spalte als Liste. */
html.hh #tab-projekte .pb-werkzeug,
html.hh #tab-projekte .pb-rail,
html.hh #tab-projekte .pb-mobil-tabs,
html.hh #tab-projekte .pb-spalte-kopf { display: none !important; }
html.hh #tab-projekte .pb-spalten { display: block !important; overflow: visible !important; }
html.hh #tab-projekte .pb-spalte { display: none !important; }
html.hh #tab-projekte[data-hh-spalte="offen"] .pb-sp-offen,
html.hh #tab-projekte[data-hh-spalte="inArbeit"] .pb-sp-inArbeit,
html.hh #tab-projekte[data-hh-spalte="wartet"] .pb-sp-wartet,
html.hh #tab-projekte[data-hh-spalte="verschoben"] .pb-sp-verschoben,
html.hh #tab-projekte[data-hh-spalte="erledigt"] .pb-sp-erledigt { display: block !important; width: auto; }

/* Auswahl wie das Segment in iOS: graue Spur, der gewählte Teil hell. */
html.hh .hh-segment {
  display: flex; gap: 2px;
  margin: 0 0 var(--sp-4); padding: 2px;
  background: var(--bg-card2); border-radius: 9px;
}
html.hh .hh-seg {
  flex: 1; min-width: 0; min-height: 34px;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 0 4px;
  background: none; border: 0; border-radius: 7px;
  color: var(--text);
  font-family: inherit; font-size: var(--fs-sm); font-weight: var(--fw-medium);
  cursor: pointer;
}
html.hh .hh-seg span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.hh .hh-seg b { color: var(--text-muted); font-weight: var(--fw-semi); font-variant-numeric: tabular-nums; }
html.hh .hh-seg.aktiv { background: var(--bg-card3); box-shadow: var(--shadow-xs); font-weight: var(--fw-semi); }

/* Behälter-Blatt von unten (keine Tastatur), Zeilen wie die Listen. */
html.hh .hh-blatt.unten .hh-blatt-panel {
  top: auto; bottom: 0;
  max-height: 80vh; overflow-y: auto;
  padding: var(--sp-2) var(--sp-4) calc(env(safe-area-inset-bottom) + var(--sp-4));
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  transform: translateY(100%);
}
html.hh .hh-blatt.unten.offen .hh-blatt-panel { transform: none; }
html.hh .hh-blatt-griff { width: 36px; height: 5px; margin: 0 auto var(--sp-2); border-radius: 3px; background: var(--border-strong); }
html.hh .hh-behaelter-punkt { flex: none; width: 12px; height: 12px; border-radius: 50%; margin: 0 8px 0 9px; background: var(--text-subtle); }
html.hh .hh-behaelter-punkt.pa-rot { background: var(--crit); }
html.hh .hh-behaelter-punkt.pa-orange { background: var(--serious); }
html.hh .hh-behaelter-punkt.pa-gelb { background: var(--warn); }
html.hh .hh-behaelter-punkt.pa-gruen { background: var(--good); }
html.hh .hh-behaelter-punkt:is(.pa-keine, .pa-neutral) { background: transparent; box-shadow: inset 0 0 0 1.5px var(--text-subtle); }
html.hh .hh-menge { color: var(--text-muted); font-variant-numeric: tabular-nums; }
html.hh .hh-haken, html.hh svg.hh-haken { width: 20px; height: 20px; color: var(--rail-active); visibility: hidden; }
html.hh .hh-behaelter.aktiv .hh-haken { visibility: visible; }

/* ══ Schritt 5: Blätter und Gesten (seit 24.10.2026, handy-gesten.js) ════
   Die 14 Dialoge (.modal-overlay > .modal) kommen als Blatt von unten, mit
   Griff, und lassen sich am Griff nach unten wegziehen. Bei offener
   Tastatur steht das Blatt oben und so hoch wie der Platz über der
   Tastatur (--hh-vv aus visualViewport), sonst verdeckte sie die Felder. */
@keyframes hh-blatt-hoch { from { transform: translateY(100%); } to { transform: none; } }
html.hh .modal-overlay { padding: 0; align-items: flex-end; }
html.hh .modal {
  width: 100%; max-width: none;
  max-height: 92dvh;
  padding: var(--sp-2) var(--sp-4) calc(env(safe-area-inset-bottom) + var(--sp-5));
  border: 0; border-radius: var(--r-lg) var(--r-lg) 0 0;
  /* backwards, nicht both: Ein stehengebliebener Endzustand der Animation
     schlüge das transform beim Wegziehen (handy-gesten.js). */
  animation: hh-blatt-hoch var(--dur-3) cubic-bezier(.32, .72, 0, 1) backwards;
}
html.hh .modal::before {
  content: ''; flex: none;
  width: 36px; height: 5px; margin: 0 auto calc(-1 * var(--sp-2));
  border-radius: 3px; background: var(--border-strong);
}
html.hh.hh-tastatur .modal-overlay { align-items: flex-start; }
html.hh.hh-tastatur .modal {
  max-height: calc(var(--hh-vv, 60dvh) - var(--sp-2));
  padding-top: calc(env(safe-area-inset-top) + var(--sp-2));
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  animation: none;
}
html.hh.hh-tastatur .modal::before { display: none; }
@media (prefers-reduced-motion: reduce) {
  html.hh .modal { animation: none; }
}

/* Ziehen zum Aktualisieren (seit 02.11.2026): der Kreisel unter der
   Titelleiste, in der Lücke über dem federnden Inhalt. Lage, Drehung und
   Deckkraft setzt handy-gesten.js beim Ziehen; beim Laden dreht er sich in
   Schritten wie die Aktivitätsanzeige von iOS. */
@keyframes hh-kreisel { to { transform: rotate(360deg); } }
html.hh .hh-auffrischen {
  display: block;
  position: fixed; left: 50%; z-index: 205;
  top: calc(var(--hh-leiste) + env(safe-area-inset-top));
  width: 24px; height: 24px; margin-left: -12px;
  color: var(--text-muted);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
html.hh .hh-auffrischen svg { display: block; width: 24px; height: 24px; }
html.hh .hh-auffrischen.laeuft svg { animation: hh-kreisel 0.8s steps(8) infinite; }
@media (prefers-reduced-motion: reduce) {
  html.hh .hh-auffrischen.laeuft svg { animation: none; }
}

/* ══ Erscheinungsbild im Einstellungen-Blatt (seit 26.10.2026) ═══════════
   Wie am Mac unter „Einstellungen…“: Hell · Dunkel · System als Segment
   und die Farbwelt per Vorschau, wie das Erscheinungsbild in den
   Einstellungen von iOS (handy-huelle.js, erscheinungsbild). Die alten
   Zeilen „Hell/Dunkel“ und „Farbwelt“ schalteten nur hin und her bzw.
   reihum; unter html.hh sind sie aus, ohne Hülle stehen sie wie vorher. */
html.hh .msheet-action:is([data-quelle="btn-theme"], [data-quelle="btn-skin"]) { display: none; }
/* Die Gruppen tragen eigene Köpfe; „Aktionen“ darüber wäre ein zweiter. */
html.hh .msheet-title { display: none; }
html.hh .hh-erscheinung-ort { display: block; margin: 0 0 var(--sp-4); }
html.hh .hh-erscheinung + .hh-erscheinung { margin-top: var(--sp-4); }
html.hh .hh-erscheinung .hh-gruppe-kopf { padding: 0 var(--sp-1) 6px; }
html.hh .hh-modus {
  display: flex; gap: 2px; padding: 2px;
  background: var(--bg-card2); border-radius: 9px;
}
html.hh .hh-modus-wahl {
  flex: 1; min-height: 36px;
  background: none; border: 0; border-radius: 7px;
  color: var(--text);
  font-family: inherit; font-size: var(--fs-md); font-weight: var(--fw-medium);
  cursor: pointer;
}
html.hh .hh-modus-wahl[aria-checked="true"] { background: var(--bg-card3); box-shadow: var(--shadow-xs); font-weight: var(--fw-semi); }
html.hh .hh-fw { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); }
html.hh .hh-fw-welt {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  min-width: 0; padding: 0;
  background: none; border: 0;
  color: var(--text); font-family: inherit;
  cursor: pointer;
}
html.hh .hh-fw-bild {
  position: relative; display: block;
  width: 100%; aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--bg-card2);
  box-shadow: 0 0 0 1px var(--border);
}
html.hh .hh-fw-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
html.hh .hh-fw-bild img[hidden] { display: none; }
html.hh .hh-fw-welt[aria-checked="true"] .hh-fw-bild { box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 4px var(--brand); }
html.hh .hh-fw-haken, html.hh svg.hh-fw-haken {
  position: absolute; right: 5px; bottom: 5px;
  display: none; width: 20px; height: 20px; padding: 3px;
  border-radius: var(--r-full);
  background: var(--brand); color: var(--brand-ink); stroke-width: 3;
}
html.hh .hh-fw-welt[aria-checked="true"] .hh-fw-haken { display: block; }
html.hh .hh-fw-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); }
html.hh .hh-fw-welt[aria-checked="true"] .hh-fw-name { font-weight: var(--fw-semi); }
html.hh :is(.hh-modus-wahl, .hh-fw-welt):active { opacity: .55; }

/* ══ Den Monat wischen (seit 28.10.2026, handy-monat.js) ══════════════════
   Auf den drei Monatsblöcken von Heute gehört die waagrechte Bewegung der
   Geste, die senkrechte der Seite. Die Blöcke folgen dem Finger nur,
   solange <html> data-hh-monat trägt: Ein bleibendes transform machte sie
   zum Bezugsrahmen fester Kinder und zu eigenen Stapelkontexten. */
html.hh #tab-uebersicht > :is([data-kachel="umsatz-auslastung"], [data-kachel="monat"], [data-kachel="geldeingang"]) { touch-action: pan-y; }
/* Seitlich nie breiter als das iPhone: Beim Wischen lagen die Blöcke neben
   dem Bildschirm, die Seite wurde bis 907 px breit, und iOS verschob bzw.
   zoomte darauf die ganze Seite, die Tab-Leiste rutschte in die Mitte
   (Vincent, 28.10.2026, Bildschirmfoto). clip statt hidden: Der Inhalt wird
   kein eigener Scrollbereich, senkrecht und sticky bleibt alles, wie es war.
   In Ruhe ist kein Reiter breiter als 390 px (Prüfstand), es fehlt nichts. */
html.hh #hauptinhalt { overflow-x: clip; }
html.hh[data-hh-monat] #tab-uebersicht > :is([data-kachel="umsatz-auslastung"], [data-kachel="monat"], [data-kachel="geldeingang"]) {
  transform: translateX(var(--hh-monat-x, 0px));
  opacity: var(--hh-monat-o, 1);
  transition: transform var(--hh-monat-dauer, 0ms) cubic-bezier(.32, .72, 0, 1), opacity var(--hh-monat-dauer, 0ms) ease;
}
/* „Zurück zu Oktober“ rechts in der Überschrift von Umsatz & Auslastung. */
html.hh #tab-uebersicht .section-title > .hh-monat-zurueck { margin-left: auto; flex: none; font-size: var(--fs-sm); }
html.hh #tab-uebersicht .section-title > .hh-monat-zurueck[hidden] { display: none; }