/* ========================================================================== * Typografie-Rollen — eine Quelle der Wahrheit * * Jede Rolle definiert Größe + Weight + Line-Height + Tracking + Transform an * EINER Stelle. Ein Element nimmt eine Rolle auf einem von zwei Wegen an: * * 1. Neuer/bevorzugter Weg: die Utility-Klasse im Markup mitführen * (z.B. class="task-card__title u-card-title"). * 2. Bestands-Weg: der BEM-Selektor ist unten in der Selektor-Liste der * Rolle registriert. So werden ganze Module ohne Markup-Änderung * vereinheitlicht; das Modul-CSS trägt dann nur noch Farbe/Accent/Layout. * * Beide Wege treffen denselben Deklarationsblock. Werte ausschließlich aus * tokens.css. Wird als letzte Basis-Datei geladen, damit Rollen gegenüber * Basis-Komponenten gewinnen; on-demand geladenes Modul-CSS darf die hier * gesetzten Eigenschaften nicht mehr doppeln. * * Siehe Typo-Konsistenz-Plan Phase 2. * ========================================================================== */ /* -------------------------------------------------------------------------- * Hero / Begrüßung — eine Instanz pro Screen, feste Produkt-Skala * ------------------------------------------------------------------------ */ .u-hero, .dashboard-hero__title, .dashboard-overview__title { font-size: var(--type-hero-mobile); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); letter-spacing: var(--tracking-tight); } /* -------------------------------------------------------------------------- * Seitentitel — Large Title (34px), mobil wie Desktop * * Hier stand „feste 22px mobil, 28px Desktop". Das waren die Werte vor dem * HIG-Rollout; beide Tokens tragen seither 2.125rem, und der Desktop-Token * existiert nur noch, damit die Stufe benannt bleibt (tokens.css: „Large Title * bleibt stabil"). Ein Kommentar, der zwei Groessen nennt, wo eine steht, laesst * die naechste Suche im falschen Stylesheet anfangen. * ------------------------------------------------------------------------ */ .u-page-title { font-size: var(--type-page-title-mobile); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); letter-spacing: var(--tracking-tight); } /* -------------------------------------------------------------------------- * Canonical Page Head — Modul-Kopf-Titel (20px). EINE Rolle für den * Titel im Sticky-Modulkopf: alle Module, Settings-Leaf, Split. Löst den * zuvor gestreuten 18/22/28px-Konflikt der Seitentitel auf. * ------------------------------------------------------------------------ */ /* Die Rolle ist BEWUSST nicht als freie Utility adressierbar: die einzige * u-toolbar-title-Vergabe außerhalb der Shell waren acht Sektionsköpfe im * Gesundheitsmodul - drei Hierarchie-Ebenen kollabierten auf eine (Critique * 2026-08-31). Wer den Kopf-Schnitt trägt, ist eine Shell-Klasse in DIESER * Liste; test-typography.js wacht darüber. Der Sub-Tabs-Titel ist die * Kopfzeile der Leisten-Architektur (Küche/Settings), kein Modul-Inhalt. */ .sub-tabs-bar__title, .page-toolbar__title, /* Der angedockte Titel der scrollenden Architektur ist derselbe Seitentitel in * seinem Inline-Zustand, nur ein zweites Element (der echte bleibt in der * Lead-Zone, siehe wireCollapsingHeader). Er gehört deshalb in DIESE Rolle und * braucht keinen eigenen Schnitt: der Large-Title-Zustand unten hebt nur * `.page-toolbar__title` an, an ihm geht er vorbei. */ .page-toolbar__dock-title, .settings-leaf-header__title, .split-title { font-size: var(--type-toolbar-title); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); letter-spacing: var(--tracking-tight); text-wrap: balance; } /* -------------------------------------------------------------------------- * Canonical Page Head, LARGE-TITLE-ZUSTAND (HIG, Redesign Runde 4 / C-1) * * Dieselbe Rolle, zwei Schnitte: in der kompakten Grössenklasse steht der * Modul-Titel am Scroll-Anfang als Large Title (34px) auf eigener Zeile und * fällt auf den Inline-Schnitt (22px) zurück, sobald die Leiste angedockt ist. * Ab 1024px regiert die Sidebar - dort bleibt es beim Inline-Schnitt, wie in * Apples regulärer Grössenklasse. * * Den UMBRUCH (eigene Zeile, Andocken, Einklappen) macht layout.css; hier * steht nur, welche Stufe der Titel dabei trägt. Beides zusammen an einem Ort * hätte die Rolle aus typography.css herausgezogen - genau das, was die * Canonical-Page-Head-Rolle einmal beendet hat (18/22/28px gestreut). * ------------------------------------------------------------------------ */ @media (max-width: 1023px) { .page-toolbar:not(.page-toolbar--in-group) > .page-toolbar__title { font-size: var(--type-page-title-mobile); } .page-toolbar--capped.is-collapsed > .page-toolbar__title { font-size: var(--type-toolbar-title); } } /* In der kompakten HÖHENKLASSE gibt es den Large-Title-Zustand nicht: dort * steht der Titel inline, wie ihn iOS im Querformat führt. Den Umbruch dazu * macht layout.css; hier steht, dass er dabei auf den Inline-Schnitt * zurückfällt - sonst stünden 34px in einer 54px hohen Leiste. */ @media (max-width: 1023px) and (max-height: 499px) { .page-toolbar:not(.page-toolbar--in-group) > .page-toolbar__title { font-size: var(--type-toolbar-title); } } /* -------------------------------------------------------------------------- * Section-/Bereichs-Überschrift (normale Schreibweise) * * ABGRENZUNG zum Versal-Mikro-Label darunter (HIG-Rollout Runde 3, der * Finish-Review fand zwei Schreibweisen über demselben Trägertyp): * BEREICH einer Seite → diese Rolle. Ein Heading-Element, Satzschreibung. * Es gibt eine Handvoll pro Seite, jede benennt etwas * anderes („Heute wichtig", „Punktestände", * „Nach Kategorie", „Transaktionen"). * GRUPPE in einer Liste → das Versal-Mikro-Label. Kein Heading, sondern ein * Sortierschlüssel, der sich über die Liste * wiederholt (Kategorie in Kontakten, Mahlzeitentyp * im Wochenplan, Monat in einer Chronik). * Die Faustregel: wiederholt sich der Kopf mit wechselndem Wert über EINE * Liste, ist er versal; benennt er einen eigenen Bereich, ist er Überschrift. * ------------------------------------------------------------------------ */ .u-section-title, .panel-head__title, .budget-page .split-title, .budget-chart-section__title, .budget-list-header__title, .birthdays-toolbar__title, .birthdays-section__header h2, .list-header__name, .loan-report__title, .day-view__date-label, .today-cockpit__header h2, .settings-section__title, .settings-navigation-panel__title, .split-group-name, .housekeeping-card h2, .subscriptions-chart h2, .subscriptions-section-head h2, .subscriptions-logo-picker-head h3 { font-size: var(--type-section-title); font-weight: var(--font-weight-semibold); line-height: var(--line-height-snug); letter-spacing: var(--tracking-normal); } /* -------------------------------------------------------------------------- * Versal-Mikro-Label (Grouped-List-Sektionskopf) — der EINE konsistente * Tracking-Wert. Ersetzt die zuvor gestreuten 0/0.05/0.06/0.07/0.08/0.1em-Werte. * * Rollenwechsel mit dem HIG-Rollout: das ist der SEKTIONSKOPF einer * Grouped-Liste (Apples eigenes Muster: „NACH KATEGORIE", „OBST & GEMÜSE"), * nicht mehr der dekorative Eyebrow über einer Überschrift. Den verbietet * DESIGN.md ausdrücklich; erlaubt ist die Versal-Zeile nur als ECHTE * Information (Apple-News-Muster, z. B. das Masthead-Datum). * * Entfallen sind mit dem Rollout .u-eyebrow (die generische Opt-in-Klasse - ohne * Nutzer im Markup und mit einem Namen, der zur Rückkehr des Musters einlädt), * .dashboard-metric__title, .today-cockpit-card__label (die Cockpit-Zeile trägt * jetzt Titel + Untertitel statt Versal-Label), .dashboard-hero__summary-label * und .item-category__header - alle fünf ohne Fundstelle im Markup. * * DIESE LISTE HAT BEWUSST KEINEN GUARD, und das ist keine Lücke, sondern die * Regel (Guard-Abdeckung 2026-08-08, Befund D). Die Kopf-Abgrenzung entscheidet * an einer BEDEUTUNG: ein Kopf, der einen Bereich der Seite benennt, ist eine * Überschrift in Satzschreibung (Block darüber); einer, der sich mit * wechselndem Wert über eine Liste wiederholt, ist ein Versal-Mikro-Label * (dieser Block). Was ein Kopf benennt, ist keine Eigenschaft seines Markups - * `.panel-head__title` stand bis 2026-09-25 in DIESEM Block, obwohl es * einen Bereich benennt (Konten, Darlehen) - als einziger Titel eines Panels * war das Versal-Label die zweite Ueberschriftsgrammatik des Budgets neben * „Nach Kategorie" (Critique 2026-09-25). Es ist jetzt ein

im Block * darueber. * * Ein Guard darüber wäre deshalb ein Guard über DIESE LISTE, nicht über die * Regel - genau die Bauart, die dieses Repo bei der Küche und beim Budget schon * zweimal eingeholt hat: er wäre ab dem Tag grün, an dem jemand einen neuen * Selektor hier einträgt, egal was der Kopf benennt. Die Prüfung, die trägt, * ist die, die es gibt: `test:typography` hält die ROLLENSCHICHT (jede Rolle * existiert als Regel, keine nur als Kommentar) und verbietet die entfallene * `.u-eyebrow` in Stylesheet und Markup. Wer hier einen Selektor hinzufügt, * beantwortet die Bedeutungsfrage - im Zweifel im Review, nicht im Test. * ------------------------------------------------------------------------ */ .event-icon-picker__category-label, .metric-card__label, .budget-chart-block__title, .loan-report__section-title, .contact-group__header, .day-header__name, .meal-slot__type-label, .week-gutter-label { /* `.documents-folder-browser__title` stand hier und war die falsche Antwort * auf die Bedeutungsfrage, die der Kommentar oben stellt: "Ordner * durchsuchen" NENNT, was folgt, statt es zu wiederholen - nach der * Kopf-Abgrenzungs-Regel also eine Ueberschrift in Satzschreibung. Dazu war * es eine Verbphrase, und die las in Versal mit Tracking als Anweisung * (Critique 2026-08-13). Sie ist jetzt ein echtes

. */ font-size: var(--text-xs); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); letter-spacing: var(--tracking-label); text-transform: uppercase; } /* -------------------------------------------------------------------------- * Navigations-Gruppierungslabel — normale Schreibweise. * Sidebar-Sektionen und Settings-Domänen gruppieren die Navigation. Im * Gegensatz zu den Overline-Mikro-Labels (oben) rendern sie ganze Phrasen * ("Benutzerdefinierte Module") und würden in Versal + Tracking als * geschriene Eyebrow lesen — gegen den warmen Familien-Ton. Daher Sentence- * Case, ruhiges Tracking; Größe/Weight halten die Header-Hierarchie. * Gleiches Prinzip für die Aufgaben-Sektionsköpfe (Gruppen-, Kanban-Spalten- * und Filter-Labels): ganze Phrasen wie "Überfällig" oder Kategorienamen * ("Haushalt", "Schule") lasen in Versal + Tracking geschrien (Critique P2). * ------------------------------------------------------------------------ */ .nav-section-label, .settings-shell__navigation-heading, .settings-shell__navigation-toggle, .kanban-col__title { font-size: var(--text-xs); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); letter-spacing: var(--tracking-normal); } /* -------------------------------------------------------------------------- * Card-/Item-Titel * ------------------------------------------------------------------------ */ .u-card-title, .agenda-event__title, .detail-popover__title, .budget-loan-card__title, .budget-entry__title, .contact-item__name, .birthday-item__name, .document-card__title, .document-row__title, .document-viewer__unsupported-title, .recipe-card__title, .housekeeping-task__body h2, .split-card-title, .settings-card__title, .settings-member__name, .settings-provider__name, .settings-sync-info__name, /* Dashboard-Widget-Titel eine Stufe über den Zeilen-Titeln (17px vs. 15px, die * Dichte-Variante darunter): gibt jedem Widget innere Hierarchie zwischen Name * und Inhalt (Critique P3). Hier stand „16px vs. 14px" - die Zahlen der Skala * VOR der Apple-Umstellung, während die Regel darunter längst --type-card-title * liest. */ .widget__title { font-size: var(--type-card-title); font-weight: var(--font-weight-semibold); line-height: var(--line-height-snug); } /* Dichte-Variante: eine Stufe kompakter. Macht hohe Informationsdichte * (Dashboard-Widgets, Kanban-Karten, Listen-Items) zu einer BEWUSSTEN * Entscheidung statt zu einem zufälligen Größen-Override pro Selektor. */ .u-card-title.u-compact, .task-item__title, .event-item__title, .shopping-widget-list__name, .note-item__title, .note-card__title, .documents-folder-item__name, .document-dropzone__title, .dms-result__title, .meal-card__title, .housekeeping-section-heading span, .subscription-card__name, .reminder-section__title, .cat-row__name, .cat-subrow__name, /* Gruppentitel über den Modul-Listen ("Übersicht", "Planen"). Sie standen in * der Section-Rolle (18px) und wurden in settings.css auf 14px übersteuert - * die Registrierung behauptete das eine, die Datei tat das andere, und im * Ergebnis rendert dasselbe h3-Element zwei Größen (Critique 2026-07-27). */ .settings-navigation-group__title { font-size: var(--type-secondary); font-weight: var(--font-weight-semibold); line-height: var(--line-height-snug); } /* -------------------------------------------------------------------------- * Generische Rollen für neuen Code (Markup trägt u-* direkt) * ------------------------------------------------------------------------ */ .u-body { font-size: var(--type-body); font-weight: var(--font-weight-regular); line-height: var(--line-height-base); } .u-meta { font-size: var(--type-secondary); font-weight: var(--font-weight-regular); line-height: var(--line-height-base); } .u-label { font-size: var(--type-caption); font-weight: var(--font-weight-medium); line-height: var(--line-height-tight); } .u-badge { font-size: var(--type-micro); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); } .u-section-title.u-compact { font-size: var(--type-card-title); } @media (min-width: 1024px) { .u-hero, .dashboard-hero__title, .dashboard-overview__title { font-size: var(--type-hero-desktop); } .u-page-title { font-size: var(--type-page-title-desktop); } } /* ================================================================ * Markdown-Light Rendering (renderMarkdownLight → public/utils/html.js) * * Geteilte Darstellung für alle Flächen, die Notiz-Inhalte rendern * (Notiz-Karten, Dashboard-Notiz-Widget). Alle Farben leiten sich aus * currentColor/inherit ab, damit sie auf jeder Zettelfarbe funktionieren. * Block-Abstände sind bewusst knapp — Notizen sind kurz, keine Dokumente. * ================================================================ */ .note-md-p { margin: 0 0 var(--space-2); } .note-md-h1, .note-md-h2, .note-md-h3 { margin: var(--space-2) 0 var(--space-1); line-height: var(--line-height-snug); color: inherit; } .note-md-h1 { font-size: var(--text-xl); font-weight: var(--font-weight-bold); } .note-md-h2 { font-size: var(--text-lg); font-weight: var(--font-weight-bold); } .note-md-h3 { font-size: var(--text-base); font-weight: var(--font-weight-semibold); } .note-md-ul, .note-md-ol { margin: var(--space-1) 0 var(--space-2); padding-inline-start: 1.4em; } .note-md-ul { list-style: disc; } .note-md-ol { list-style: decimal; } .note-md-ul li, .note-md-ol li { margin-block: var(--space-0h); } /* Checkliste: eigene Box statt Listenpunkt */ .note-md-checklist { list-style: none; padding-inline-start: 0; } .note-md-check { display: flex; align-items: baseline; gap: var(--space-2); } .note-md-box { flex: 0 0 auto; position: relative; top: 0.15em; width: 1em; height: 1em; border: 1.5px solid color-mix(in srgb, currentColor 50%, transparent); border-radius: var(--radius-xs); } /* Antippbares Kaestchen (#704). Ein