/* ══════════════════════════════════════════════════════════════════════
   iPhone · Schrift und Ruhe wie am Mac (seit 26.10.2026)
   ──────────────────────────────────────────────────────────────────────
   Vincent, 26.10.2026: „Check nochmal die mobile Version, dass diese auch
   vernünftig dazu passt.“ Am Mac liest das Cockpit seit M8 wie Erinnerungen
   (mac-optik.css): keine gesperrten Versalien, eine Größe für
   Abschnittsköpfe, Farbe als Punkt statt als Kante, „Was im Haus fehlt“ als
   eine Liste, Hinweise leise statt in Fehlerrot. Am iPhone standen noch die
   bunten Brett-Karten mit Kante oben und links, Bögen auf 28 px Rundung,
   gesperrte Etiketten („T e s t h a u s“), bernsteinfarbene Kästen je
   Einkaufsposten und der Betriebshinweis des Gäste-Chats in Rot.

   Übernommen sind die Abschnitte von mac-optik.css, die nicht an Maus und
   Tastatur hängen. Nicht übernommen: Pfeil statt Hand, Fokusring, ruhige
   Auswahllisten bis zum Zeigen (Hover), 34-px-Zeilen (am iPhone gelten
   44 pt), 72 Zeichen Zeilenlänge (das iPhone ist schmaler), der Knopf
   unten rechts im Blog.

   Regeln dieser Datei:
   - Jede Regel beginnt mit html.hh (handy-frueh.js, unter 640 px), geladen
     nur unter 640 px. handy-optik.test.js hält die Listen gleich mit
     mac-optik.css.
   - Alles in @media screen: Gedruckt wird, wie es war.
   - Spezifität: Die Farbwelten setzen Bauteile mit :root[data-skin] (0,3,0).
     Wo das überboten werden muss, steht html.hh:root (0,3,1) davor.
   ══════════════════════════════════════════════════════════════════════ */

@media screen {

/* ══ 1 · Keine Sperrung ═══════════════════════════════════════════════
   Die Versalien nimmt handy-huelle.css schon weg (text-transform), die
   Sperrung blieb, wo sie mit Zahlen gesetzt ist (.04em …): „Testhaus 20“,
   „Kredit gesamt“, „Investitionsprojekte“. Dieselbe Liste wie am Mac. */
html.hh :where(
  .gebaeude-label, .badge, .unit-stat label, .form-group label, .ka-kpi-label,
  .netto-gewinn-row .label, .kosten-table th, .global-kosten-title,
  .kosten-section-title, .alerts-sub-label, .va-titel, .pnl-table th, .kredit-hero-label,
  .kredit-table th, .inv-section-subtitle, .inv-badge, .inv-massnahmen-head, .roi-info-label,
  .roi-table th, .roi-sens-title, .opp-key, .prio-rank-num, .prio-kat-badge, .prio-meta-label,
  .prio-rest-table th, .roi-opp-title, .roi-opp-label, .roi-opp-delay-title, .liq-kredit-label,
  .liq-table-head, .rm-empfehlung-label, .rm-manual-title, .wb-top-lessons-label, .ro-teil-titel,
  .ops-typ-badge, .ops-wartung-table th, .src-badge, .t5-detail-cell span, .t5-prio-badge,
  .pl-table th, .pe-table th, .blog-posts-table th, .todo-score-lbl, .pb-ansicht-lbl,
  .pb-spalte-kopf, .pb-karte-ziele-lbl, .bk-net-lbl, .bk-score-title, .bk-sub-title,
  .msheet-title, .fund-table th, .fund-klartext-tag, .komm-kpi-lbl,
  .komm-table th, .md-grid b, .md-tl-title, .z-badge, .fin-zwischentitel, .ck-bez, .ck-tabelle th,
  .section-title, .gc-trenner, .gc-w-einheit, [style*="text-transform:uppercase"]
) {
  letter-spacing: normal !important;
}

/* ══ 2 · Abschnittsköpfe ══════════════════════════════════════════════
   Eine Größe, der Untertitel 13 in der leisen Farbe (vorher je Welt 22
   fett, 13 in Versalien oder 15). Der große Titel der Hülle bleibt
   darüber, wie in den Apps von iOS. Seit 27.10.2026 fett mit −0,02 em wie
   in der klassischen Ansicht und am Mac (dort 22 px); im Hochformat 17 px
   wie klassisch unter 900 px, sonst brächen „Was im Haus fehlt“ und seine
   Erklärzeile um (vorher 17 halbfett). */
html.hh:root .section-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  color: var(--text);
}
html.hh:root .section-subtitle {
  font-size: var(--fs-sm);
  font-weight: var(--fw-normal);
  letter-spacing: 0;
  color: var(--text-muted);
}

/* ══ 3 · Zahlen: ohne Pulsieren, Bernstein wird grau ══════════════════
   Wie die Seitenleiste am Mac: Rot bleibt, was „wichtig“ ist, Bernstein
   heißt „ansehen“ und steht grau da (in „Braucht dich“ und den Listen von
   Häuser und Finanzen). */
html.hh .tab-badge { animation: none; }
html.hh .tab-badge.tab-badge-warn,
html.hh .hh-wert.warn:not(:empty) {
  background: var(--bg-card3);
  color: var(--text);
}

/* ══ 4 · Höchstens ein Hauptknopf je Reiter ═══════════════════════════
   Dieselbe Liste wie am Mac (mac-optik.css, Abschnitt 5): Zweitknöpfe und
   Knöpfe je Zeile sehen aus wie ein normaler Knopf, was sie tun, bleibt. */
html.hh :is([data-mw="speichern"], [data-lco-aktion="pdf"], #rechnungen-runlive-btn, #btn-nl-generate,
  #fin-btn-fints-sync, [data-st="speichern"], [data-stb], td .btn, #gc-w-inhalt .btn, .gc-w-uebernahme .btn,
  [onclick^="rechnungenComplete("], [data-lf-freigabe]).btn-primary,
html.hh td .btn-success,
html.hh :is(.btn-umbau-save, .btn-mieter-save) {
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  color: var(--text);
  font-weight: var(--fw-medium);
}
html.hh :is([data-api-tage], [data-mw="schein"]).btn-primary {
  background: var(--brand-soft);
  border-color: var(--brand-line);
  color: var(--brand);
  font-weight: var(--fw-semi);
}
/* Im Dunkeln dunkle Schrift auf hellen Signalfarben (Status „Offen“,
   „Freigeben“, Balken der Zeitleiste), wie am Mac. */
html.hh[data-theme="dark"] .todo-statusbtn.active:is(.ts-offen, .ts-erledigt, .ts-verschoben, .ps-pausiert, .ps-fertig, .ps-archiv),
html.hh[data-theme="dark"] :is(#btn-blog-publish, #btn-nl-send).btn-success,
html.hh[data-theme="dark"] .tl-bar-label { color: var(--bg); }
html.hh .src-vorlage { color: var(--text-muted); }
html.hh .tl-ks-label { color: var(--text); }

/* ══ 5 · Farbe als Punkt statt als Kante ══════════════════════════════
   Wie am Mac (mac-optik.css, Abschnitt 6): Die Stufe (todoStufe, todos.js)
   trägt ein Punkt vor dem Titel, der Behälter ein Punkt vor seinem Namen.
   „Fällig …“ bleibt als Plakette, Neutral bleibt ohne Punkt. Auf der
   Rundung der Karten wurden die Kanten zu Bögen. */
html.hh .st-rot    { --hh-stufe: var(--crit); }
html.hh .st-orange { --hh-stufe: var(--serious); }
html.hh .st-gelb   { --hh-stufe: var(--warn); }
html.hh .rm-unit--kritisch { --hh-stufe: var(--crit); }
html.hh .rm-unit--warnung  { --hh-stufe: var(--warn); }
html.hh .rm-unit--gut      { --hh-stufe: var(--good); }
html.hh .inv-card-umbau    { --hh-stufe: var(--warn); }
html.hh .inv-card-kzv      { --hh-stufe: var(--good); }
html.hh .inv-card-fest     { --hh-stufe: var(--text-subtle); }
html.hh .z-card.is-open    { --hh-stufe: var(--warn); }
html.hh :is(.pb-karte, .todo-card, .todo-heute-card):is(.st-rot, .st-orange, .st-gelb) :is(.pb-k-titel, .todo-card-titel, .th-titel)::before,
html.hh .pb-karte[class*="pb-f-"] .pb-k-herkunft::before,
html.hh :is(.rm-unit--kritisch, .rm-unit--warnung, .rm-unit--gut) .rm-unit-name::before,
html.hh :is(.inv-card-umbau, .inv-card-kzv, .inv-card-fest) .inv-card-name::before,
html.hh .z-card.is-open .z-kunde::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  vertical-align: 1px;
  background: var(--hh-stufe);
}
html.hh .pb-karte[class*="pb-f-"] .pb-k-herkunft::before { background: var(--pf-akzent); }
html.hh :is(.rm-unit--kritisch, .rm-unit--warnung, .rm-unit--gut, .inv-card-umbau, .inv-card-kzv, .inv-card-fest, .z-card.is-open) {
  border-left: 1px solid var(--border);
}
html.hh :is(.unit-card-fest, .unit-card-umbau) { border-top: 1px solid var(--border); opacity: 1; filter: none; }
html.hh .kpi-karte { border-bottom: 1px solid var(--border); }

/* Brett-Karte: ein Rand rundum, keine Kante oben. Seit 27.10.2026 wie am
   Mac (mac-optik.css) leicht in der Farbe ihres Behälters getönt (12 %),
   der Punkt vor dem Behälter bleibt. Schrift darauf hält in jeder Welt
   4,5:1 (handy-glas.test.js); Einheit und Alter stehen dafür in der leisen
   statt der noch leiseren Farbe (Klarheit dunkel: #8e8e93 auf 12 %
   Behälterfarbe 4,1:1, Prüfung 27.10.2026). */
html.hh .pb-karte {
  border: 1px solid var(--border);
  background: var(--bg-card);
}
html.hh .pb-karte[class*="pb-f-"] {
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--pf-akzent) 12%, var(--bg-card));
}
html.hh .pb-karte[class*="pb-f-"] :is(.pb-k-einheit, .pb-k-alter:not(.pb-k-alt)) { color: var(--text-muted); }
html.hh .pb-karte[class*="pb-f-"] { padding-top: 7px; }
html.hh .pb-sp-erledigt .pb-karte[class*="pb-f-"] { padding-top: 6px; }
html.hh .pb-karte[class*="pb-f-"] .pb-k-herkunft { color: var(--text-muted); font-weight: var(--fw-normal); }
html.hh .todo-card { border-left: 1px solid var(--border); }
html.hh:root .todo-heute-card { border-left-width: 1px; border-left-color: var(--border); }
html.hh:root:is([data-skin="klarheit"], [data-skin="gruppen"], [data-skin="buehne"]) .todo-heute-card { border-left-color: transparent; }
html.hh:root:is([data-skin="klarheit"], [data-skin="gruppen"]) .todo-heute-card .th-titel::before { content: none; }
html.hh:root:is([data-skin="klarheit"], [data-skin="gruppen"]) .todo-heute-card.st-gelb::before { border-color: var(--warn-ink); }

/* ══ 6 · Was im Haus fehlt: eine Liste wie in Erinnerungen ════════════
   Wie am Mac (mac-optik.css, Abschnitt 11): EINE Karte, Zeilen durch
   Haarlinien getrennt, Menge und Haus leise hinter dem Artikel. Was die
   Zeile kann, bleibt (einkauf.js): Mengenfeld, „Besorgt“, Amazon-Link. */
html.hh #einkauf-liste:has(.einkauf-zeile) {
  background: var(--bg-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
html.hh[data-skin="glas"] #einkauf-liste:has(.einkauf-zeile) { border: 1px solid var(--border); box-shadow: var(--shadow-xs), inset 0 1px 0 var(--hh-glanz); }
html.hh #einkauf-liste .einkauf-zeile {
  min-height: 44px;
  margin: 0;
  padding: var(--sp-2) var(--sp-4);
  gap: var(--sp-2);
  border: 0;
  border-radius: 0;
  background: transparent;
}
html.hh #einkauf-liste > :is(.einkauf-zeile, .einkauf-fuss) + :is(.einkauf-zeile, .einkauf-fuss) { border-top: 1px solid var(--border); }
html.hh #einkauf-liste .einkauf-artikel { font-weight: var(--fw-medium); }
html.hh #einkauf-liste :is(.einkauf-menge, .einkauf-einheit) {
  padding: 0;
  border-radius: 0;
  background: none;
  font-size: var(--fs-sm);
}
html.hh #einkauf-liste :is(.einkauf-menge, .einkauf-einheit)::before {
  content: "·";
  margin-right: var(--sp-2);
  color: var(--text-subtle);
}
html.hh #einkauf-liste .einkauf-fuss {
  margin: 0;
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-xs);
}
/* Das Mengenfeld: „Pkg.“ und zwei Ziffern ganz zu lesen (stand als „Pkc“ da). */
html.hh :is(#einkauf-liste [data-einkauf-menge], #team-einkauf-inhalt [data-menge]) {
  width: 56px;
  padding: 4px var(--sp-2);
  text-align: center;
}

/* ══ 7 · Kleines wie am Mac ═══════════════════════════════════════════ */
/* Das Symbol im Hauptknopf einer Überschrift nimmt die Farbe seines Knopfs. */
html.hh .section-title .btn-primary [data-lucide] { color: inherit; }
/* Ein Betriebshinweis in der Fehlerkarte (data-hinweis, gaeste-chat.js:
   „Der erste vollständige Abgleich läuft noch“) ist kein Fehler: leise statt
   Fehlerrot. Ein echter Fehler und „Ohne Datenbank“ (data-warnung) bleiben rot. */
html.hh .ck-fehler > [data-hinweis]:not([data-warnung]) { color: var(--text-muted); }
html.hh #gc-fehler:not([hidden]) { margin-bottom: var(--sp-3); }
/* Farbe auf getönter Farbe unter 4,5:1 (heutiger Tag im Kalender, „Manuell“). */
html.hh .kalender-table th.heute-col,
html.hh :is(.src-manuell, .src-markt, .rm-tag-listing) { color: var(--text); }

/* „Stand notieren“ im Karten-Dialog: ab 16 px zoomt iOS beim Tippen nicht. */
html.hh .kv-form textarea,
html.hh .pb-karte-projekt { font-size: var(--fs-lg); }
/* Ebenso das Antwortfeld einer Mail in der Karte (anfragen-mail.js). */
html.hh :is(.anf-post-feld input, .anf-post-feld select, .anf-post-antwort textarea, .anf-post-standtext, .sek-text) { font-size: var(--fs-lg); }

} /* @media screen */