/* Typografie-Schicht (13.10.2026, Thomas: „extreme Vielfalt an Groß-, Klein-, Fett-, Grau-, Unterstreichungen“)
   Wird auf jeder Seite ZULETZT geladen. Ein System statt vieler Einzelstile:
   · eine Schrift (system-ui), Stärken 400 / 500 / 600
   · Größen 12,5 · 13,5 · 15 · 17 · 22 · 30 px
   · zwei Textfarben: Tinte (--ink) und ein Grau (--ink-2); kein drittes Grau
   · Beschriftungen in normaler Schreibweise, halbfett, klein, grau – keine gesperrten Versalien
   · Links ohne Dauer-Unterstreichung, unterstrichen erst beim Überfahren (Fließtext ausgenommen)
   Neue Versalien-Regeln an anderer Stelle hebt diese Liste nicht automatisch auf: test/integration/mac-app.test.js prüft das. */
:root { --ink: #1E2A25; --ink-2: #646B66; --fs-xs: 12.5px; --fs-sm: 13.5px; --fs-md: 15px; --fs-lg: 17px; --fs-xl: 22px; --fs-2xl: 30px; }
body { color: var(--ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "kern", "liga", "calt"; }
h1, h2, h3, h4 { letter-spacing: -0.01em; }

/* Beschriftungen (früher VERSALIEN, gesperrt) */
.ap-lage h3,
.ap-tl-now span,
.ap-prop h2,
.tk-h,
.nb-card h3,
.ap-orig > details > summary,
.ap-lage .ap-band > h3,
.ap-lage .ap-band .ap-bh,
.ap-day,
.day-sec h3,
.kal-month th,
.kal-sub,
.kal-sec-h,
.vzm-eyebrow,
.hs-arch .sr-sec-h,
.eyebrow,
th,
.kpil,
.mn-head,
.vz-lane-h,
.vz-h,
.vz-group-h,
.vz-sec-h h3,
.vz-drawer h3,
.cost-kpis span,
.as-h,
.as-sub,
.as-h-head,
.more-group h2,
.mcmd-label,
.cs-sug-top,
.cs-or,
.sr-gh,
.sr-side-sec .h4,
.sr-archive .h4,
.ct-h,
.ct-tag,
.as-reveal .as-rv-eyebrow,
.mn-new,
.hp-live-l,
.agid-code-row input,
.userdrop-admin .acct-h,
.adm-kv dt,
.userdrop.um .userdrop-accts .acct-h,
.ad-memo h4,
.brf-kicker,
.brf-over,
.atts.da .atts-h,
.vzn-f-h,
.vg-k,
html.ui-new .vzn-sec-h,
html.ui-new .vzf-block h3,
html.ui-new .vzf-block-h h3,
html.ui-new .vzf-hrow dt {
  text-transform: none !important; letter-spacing: 0 !important; font-size: var(--fs-sm) !important; font-weight: 600 !important;
}

/* ---------- Arbeitsplatz ---------- */
.ap-app { color: var(--ink); }
.ap-app .ap-title { font: 600 var(--fs-xl)/1.2 var(--sans); letter-spacing: -0.02em; }
/* Links: Zeilen sind klickbar, Unterstreichung nur beim Überfahren */
.ap-app a { text-decoration: none; }
.ap-app :is(.ap-lead, .tk-text, .vzf-draft-body, .mailbody) a { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }
.ap-app :is(.ap-list, .ap-cols, .ap-read-list, .tk-src, .tk-mem) a:hover { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 3px; }

/* Briefing */
.ap-app .ap-brief .ap-eyebrow { font-size: var(--fs-sm); color: var(--ink-2); }
.ap-app .ap-brief h1 { font: 600 var(--fs-2xl)/1.2 var(--sans); letter-spacing: -0.025em; margin: 6px 0 14px; }
.ap-app .ap-lead { font-size: var(--fs-lg); line-height: 1.65; max-width: 66ch; color: var(--ink); margin: 0 0 28px; }
.ap-app .ap-cols { gap: 36px; padding-top: 22px; border-top: 1px solid var(--line); }
.ap-app .ap-cols h3 { font: 600 var(--fs-sm)/1.3 var(--sans); color: var(--ink-2); margin: 0 0 8px; letter-spacing: 0; }
.ap-app .ap-cols h3:not(:first-child) { margin-top: 22px; }
.ap-app .ap-cols .ap-empty { color: var(--ink-2); font-size: var(--fs-sm); padding: 0; margin: 0; }
.ap-app .ap-cols p.small { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.55; }
.ap-list { list-style: none; margin: 0; padding: 0; }
.ap-list li > a, .ap-list li > .ap-it { display: flex; align-items: flex-start; gap: 12px; margin: 0 -10px; padding: 8px 10px; border-radius: 10px; color: inherit; }
.ap-list li > a:hover { background: #F4F2EC; }
.ap-list li + li { border-top: 1px solid #F0EDE6; }
.ap-it { display: grid; gap: 2px; min-width: 0; flex: 1; }
.ap-it-m { font-size: var(--fs-md); line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ap-it-s { font-size: var(--fs-xs); color: var(--ink-2); }
.ap-it-a { flex: none; font-size: var(--fs-xs); color: var(--ink-2); font-variant-numeric: tabular-nums; padding-top: 3px; white-space: nowrap; }
.ap-list .ap-chip { flex: none; margin-top: 2px; }

/* Vorschlag + Gespräch */
.ap-app .ap-prop { border-radius: 14px; padding: 18px 22px; }
.ap-app .ap-prop h2 { font: 600 var(--fs-sm)/1.3 var(--sans); color: var(--ap-green, #17362c); margin: 0 0 6px; }
.ap-app .ap-prop p { font-size: var(--fs-md); line-height: 1.55; }
.ap-app .tk-h { font: 600 var(--fs-sm)/1.3 var(--sans); color: var(--ink-2); }
.ap-app .tk-bub { font-size: var(--fs-md); line-height: 1.55; }

/* Lage: ruhiger, gleiche Maße */
.ap-app .ap-day { color: var(--ink-2); font-size: var(--fs-sm); }
.ap-app .ap-lage .ap-bh .ap-bh-l { font-size: var(--fs-sm); }
.ap-app .ap-band li > a > b { font-size: 14.5px; font-weight: 500; color: var(--ink); }
.ap-app .ap-band .ap-chip { font-size: 12px; }
.ap-app .ap-acct { font-size: 12px; color: var(--ink-2); }
.ap-app .ap-tl-list li { font-size: var(--fs-sm); }
.ap-app .ap-tl-list time { color: var(--ink-2); }
.ap-app .ap-lage .ap-fold > summary::after { transition: transform .25s cubic-bezier(.2,.75,.25,1); }

/* Vorgang (Mitte): Beschriftungen ruhig, Text in Tinte */
.ap-app .vzf-block h3, .ap-app .vzn-sec-h { color: var(--ink-2); }
.ap-app .ap-pos { font-size: var(--fs-sm); color: var(--ink-2); }
.ap-app .ap-tl-list li > a, .ap-app .ap-tl-list li > span { align-items: flex-start; }
.ap-app .ap-tl-i { display: inline-grid; place-items: center; width: 16px; padding-top: 2px; color: var(--band, var(--ink-2)); }

/* Vorgang: eine Fettstufe (600) statt 700/800, Empfängerliste der Originalmail ruhig */
.ap-app :is(h1, h2, h3, h4, b, strong, th) { font-weight: 600; }
.ap-app .ap-main :is(.vz-orig, .ap-orig) :is(.mv-to, .mail-to, .vzf-to, p:first-of-type) b { font-weight: 400; color: var(--ink); }
.ap-app .mailbody :is(b, strong) { font-weight: 700; } /* Mailinhalt bleibt, wie er geschrieben wurde */

/* ---------- Einzelvorgang (13.10.2026): eine Hierarchie statt vieler Stile ----------
   Kopf: Herkunft klein/grau · Titel 24/600 · Meta 13,5 grau · Kernaussage 16
   Karten: Beschriftung klein/halbfett/grau · Aussage 17/600 · Erklärung 14 grau
   Auswahlfelder (Zeit, Konto) als ruhige Pillen statt orangefarbener Unterstreichung */
html body .ap-app .vzm-eyebrow { font-size: var(--fs-sm); font-weight: 400; color: var(--ink-2); letter-spacing: 0; }
html body .ap-app .vzm-eyebrow .vzm-due { font-weight: 500; color: #A4492A; }
html body .ap-app .vzm-title { font: 600 24px/1.25 var(--sans); letter-spacing: -0.02em; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
html body .ap-app .vzm-meta { font-size: var(--fs-sm); color: var(--ink-2); margin-top: 10px; }
html body .ap-app .vzm-meta a, html body .ap-app .vzm-meta .vzf-amt { color: var(--ink); font-weight: 500; }
html body .ap-app .vzm-summary { font-size: 16px; line-height: 1.6; color: var(--ink); margin-top: 14px; }
html body .ap-app .pc { font-size: 12px; font-weight: 500; letter-spacing: 0; }
/* Empfehlung */
html body .ap-app .vzm-k { font: 600 var(--fs-sm)/1.4 var(--sans); color: var(--ink-2); }
html body .ap-app .vzm-reco { font: 600 var(--fs-lg)/1.45 var(--sans); color: var(--ink); }
html body .ap-app .vzm-reco-sub, html body .ap-app .vzm-reco + p { font-size: 14px; line-height: 1.55; color: var(--ink-2); }
html body .ap-app :is(.ap-why-link, .hp-why, .vzm-link) { color: var(--ink-2); text-decoration: none; font-size: var(--fs-sm); }
html body .ap-app :is(.ap-why-link, .hp-why, .vzm-link):hover { color: var(--ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 3px; }
html body .ap-app .vzm-note { font-size: var(--fs-xs); color: var(--ink-2); }
/* Aufgaben-Vorschlag: Zeit + Titel + Konto */
html body .ap-app .vzm-heading, html body .ap-app .vzm-heading.is-sub { font: 600 var(--fs-lg)/1.45 var(--sans); letter-spacing: -0.005em; color: var(--ink); }
html body .ap-app .vzm-when { display: block; margin: 0 0 8px; }
html body .ap-app .vzm-when br { display: none; }
html body .ap-app .vzm-inline { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 12px; border: 0; border-radius: 999px; background: #F7E8E0; color: #A4492A; font: 500 14px/1.4 var(--sans); letter-spacing: 0; text-decoration: none; transition: background .15s; }
html body .ap-app .vzm-inline:hover { background: #F1DACE; }
html body .ap-app .vzm-inline::after { content: ''; width: 6px; height: 6px; margin: 0 2px 2px 2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
html body .ap-app .vzm-inline:disabled { background: #F1EFE9; color: var(--ink-2); }
html body .ap-app .vzm-firmline { display: flex; align-items: center; gap: 8px; margin-top: 10px; font: 400 var(--fs-sm)/1.4 var(--sans); color: var(--ink-2); }
html body .ap-app .vzm-firmline .vzm-inline { background: #EEF1EF; color: var(--ink); font-size: var(--fs-sm); }
html body .ap-app .vzm-firmline .vzm-inline:hover { background: #E3E8E5; }
html body .ap-app .vzm-intro { font-size: 14px; line-height: 1.55; color: var(--ink-2); margin-top: 12px; }
html body .ap-app .vzm-prepared h2, html body .ap-app .vzm-facets h2, html body .ap-app .vzm-sheet h2 { font: 600 var(--fs-md)/1.4 var(--sans); letter-spacing: 0; color: var(--ink); }
html body .ap-app .vzm-prepared p, html body .ap-app .vzm-facets p { font-size: var(--fs-sm); color: var(--ink-2); }
html body .ap-app .vzm-prepared .vzm-eyebrow { font-weight: 600; }
/* Originalmail: Empfänger ruhig, lange Verteiler eingeklappt; Anhänge-Überschrift als Beschriftung */
html body .ap-app .mv-rcpt { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.55; }
html body .ap-app .mv-rcpt b { font-weight: 400; color: var(--ink); }
.mv-rcpt-long > summary { cursor: pointer; list-style: none; }
.mv-rcpt-long > summary::-webkit-details-marker { display: none; }
.mv-rcpt-long > summary::before { content: none !important; }
.mv-rcpt-long > summary::after { content: ' ▾'; color: var(--ink-2); }
.mv-rcpt-long[open] > summary { display: none; }
.mv-rcpt-long > p { margin: 0; }
html body .ap-app .atts-h, html body .ap-app .atts .atts-h { font: 600 var(--fs-sm)/1.3 var(--sans); color: var(--ink-2); letter-spacing: 0; text-transform: none; margin: 18px 0 10px; }

html body .ap-app .vzm-link { min-height: 0; }
html body .ap-app :is(.ap-next, [data-ap-next], .ap-akte-add, .vf-akte-add) { text-decoration: none; }
html body .ap-app a:is([data-ap-next], .ap-next-link) { text-decoration: none; color: var(--ink-2); }
html body .ap-app a:is([data-ap-next], .ap-next-link):hover { color: var(--ink); }
html body .ap-app .ap-nextlink { font-size: var(--fs-sm); color: var(--ink-2); text-decoration: none; }
html body .ap-app .ap-nextlink:hover { color: var(--ink); }
html body .ap-app summary.btn.text { text-decoration: none; font-weight: 500; color: var(--ink-2); }
html body .ap-app summary.btn.text:hover { color: var(--ink); }
html body .ap-app .vzm-story { padding-top: 6px; }
html body .ap-app .vzm-work > .vzm-task-slot:not(:empty) { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }

/* ---------- Alle Seiten im Büro (13.10.2026): Mail-Ansicht, Kalender, Aufgaben, Akten, Notizbücher ---------- */
/* Seitentitel und Überschriften: eine Stufe je Ebene */
.office-ui main.office-main h1, .office-ui main h1 { font: 600 28px/1.2 var(--sans); letter-spacing: -0.02em; }
.office-ui main h2, .office-ui main .h4, .office-ui .ap-drawer h2 { font-weight: 600; letter-spacing: -0.01em; }
.office-ui main h2:not(.kal-range) { font-size: 19px; }
.office-ui main h3 { font-size: var(--fs-md); font-weight: 600; }
/* eine Fettstufe */
.office-ui main :is(b, strong):not(:where(.mailbody *, .mail-frame *, .vzf-draft-body *)) { font-weight: 600; }
/* Links: Breadcrumb, Textknöpfe, Zurück-Links, Fußzeile ohne Dauer-Unterstreichung; Links im Fließtext dezent */
.office-ui :is(main, footer) :is(a, summary, button) { text-decoration: none; }
.office-ui :is(main, footer) :is(a, summary, button.btn.text):hover { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 3px; }
.office-ui main p:not(:where(.ap-list *, .ap-band *, nav *)) > a:not(.btn) { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 30%, transparent); text-underline-offset: 3px; }
.office-ui main :where(.mailbody, .mail-frame) a { text-decoration: underline; }
/* Mail-Ansicht: Betreff als Titel, Absender in Tinte */
.office-ui main .mv-from b, .office-ui main .im-from b { color: var(--ink); }
/* Ein „Neuer Auftrag“-Knopf: auf breiten Bildschirmen der in der Spalte, sonst der schwebende */
@media (min-width: 1000px) { body:has(.ap-lage-top .ap-plus) .ap-fab-g { display: none; } }
.office-ui :is(main, footer) :is(.btn.text, a.btn, .kal-chip) { text-decoration: none; }
.office-ui :is(main, footer) :is(.btn.text, a.btn):hover { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 3px; }
/* Lage-Spalte gleich auf allen Seiten (nicht nur im Arbeitsplatz) */
.office-ui .ap-lage a, .office-ui .ap-lage a:hover { text-decoration: none !important; }
.office-ui .ap-lage .ap-band li > a > b { font-size: 14.5px; font-weight: 500; color: var(--ink); }
.office-ui .ap-lage .ap-chip { font-size: 12px; font-weight: 400; }
.office-ui .ap-lage .ap-acct { font-size: 12px; color: var(--ink-2); }
.office-ui .ap-lage .ap-day { color: var(--ink-2); font-size: var(--fs-sm); }
/* Mail-Ansicht: Absender ohne Unterstreichung, Empfänger ruhig, Anhänge als Beschriftung */
.office-ui main .ct-namelink, .office-ui main p > a.ct-namelink { text-decoration: none; font-weight: 600; color: var(--ink); }
.office-ui main .ct-namelink:hover { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 3px; }
.office-ui main .mv-rcpt { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.55; }
.office-ui main .mv-rcpt b { font-weight: 400; color: var(--ink); }
.office-ui main .atts-h { font: 600 var(--fs-sm)/1.3 var(--sans); color: var(--ink-2); letter-spacing: 0; margin: 22px 0 10px; }
.office-ui main .att-card .att-name { font-weight: 500; }

/* Akten-Übersicht: ruhige Karten. Akten-Farbe nur als feine Linie oben links, kein Farbflächen-Mix; „prüfen“ als dezenter Hinweis */
.office-ui .ak-card { border-left: 1px solid var(--line); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--ak-c, #CFC7B8) 70%, white); padding: 16px 18px; gap: 6px; }
.office-ui .ak-card.has-warn { background: #fff; }
.office-ui .ak-card-h b { font-size: var(--fs-md); font-weight: 600; }
.office-ui .ak-card :is(p, span, small):not(.ak-pill) { font-weight: 400; }
.office-ui .ak-card-meta { font-size: var(--fs-xs); color: var(--ink-2); }
.office-ui .ak-warn { font-weight: 500 !important; color: #8A6516; }
.office-ui .ak-pill { font-weight: 500; }

/* ======================================================================================================
   Einheitliche Bauteile auf allen Seiten (13.10.2026, Nachtschicht: „Designsprache vereinheitlichen“)
   ====================================================================================================== */
/* 1) EIN Umschalter (Filter innerhalb einer Liste): grauer Track, weiße aktive Pille, 13,5/500 */
.office-ui :is(.readseg, .ot-filters, .seg, .ct-ktabs, .rp-tabs, .ms-seg) { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 3px; margin-bottom: 16px; background: #EEF0EC; border: 0; border-radius: 999px; }
.office-ui :is(.readseg, .ot-filters, .seg, .ct-ktabs, .rp-tabs, .ms-seg) > :is(a, button) { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 4px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); font: 500 var(--fs-sm)/1.2 var(--sans); text-decoration: none; box-shadow: none; }
.office-ui :is(.readseg, .ot-filters, .seg, .ct-ktabs, .rp-tabs, .ms-seg) > :is(a, button):hover { color: var(--ink); text-decoration: none; }
.office-ui :is(.readseg, .ot-filters, .seg, .ct-ktabs, .rp-tabs, .ms-seg) > :is(a, button):is(.on, .is-on, .active, [aria-current], [aria-selected="true"], [aria-pressed="true"]) { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(20, 30, 25, .12); }
.office-ui :is(.readseg, .ot-filters, .seg, .ct-ktabs, .rp-tabs) .ap-n, .office-ui .ct-ktabs a span { font-size: 12px; color: var(--ink-2); font-weight: 500; }
/* 2) Reiter (Bereichswechsel oben): Unterstrich statt grüner Pillen */
.office-ui .sk-tabs a { font-weight: 500; font-size: var(--fs-md); color: var(--ink-2); }
.office-ui .sk-tabs a.on { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }
/* 3) Knöpfe: primär = Tinte, sekundär = weiß mit Linie (statt grauer Füllung), keine Schatten */
.office-ui .btn:not(.primary):not(.ghost):not(.text):not(.danger):not(.link) { background: #fff; color: var(--ink); border: 1px solid #D5D9D4; box-shadow: none; }
.office-ui .btn:not(.primary):not(.ghost):not(.text):not(.danger):not(.link):hover { background: #F6F7F4; }
.office-ui .btn.ghost { background: #fff; color: var(--ink); border-color: #D5D9D4; }
.office-ui .btn.ghost:hover { background: #F6F7F4; color: var(--ink); }
.office-ui .btn { font-weight: 600; border-radius: 10px; }
/* 4) Hinweis-Karten ohne farbigen Linksrand (Farben gehören der Spalte); Warnungen behalten ihren Ton */
.office-ui main .banner:not(.warn):not(.err):not(.bad):not(.ok) { border-left-width: 1px; border-left-color: var(--line); background: #fff; }
/* 5) Handy: leere Leiste weg, schwebendes ＋ verdeckt nichts, Kopf-Navigation gleich groß */
@media (max-width: 999px) {
  .ap-mstrip:empty { display: none; }
  .ap-shell-main { padding-bottom: 92px; }
  .ap-fab-g { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .office-ui .office-top :is(nav a, nav button, .office-tabs a) { font-size: 15px; }
}
/* 6) Fußzeile, Brotkrumen: ruhig */
.office-ui footer a { color: var(--ink-2); }
/* Linien-Icons (src/views/icons.js) und Wärme-Punkt bei Kontakten */
svg.ic { display: inline-block; vertical-align: -3px; flex: none; }
.ct-wdot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: 4px; vertical-align: 1px; }
.nw-badge svg.ic { width: 18px; height: 18px; }

/* Einstellungen-Übersicht: ganze Zeile klickbar, kein Unterstrich, Geltungsbereich nicht in jeder Zeile */
.office-ui main .eo-link, .office-ui main .eo-link * { text-decoration: none !important; }
.office-ui main .eo-link:hover { background: #F6F7F4; }
.office-ui main .eo-scope { display: none; }
.office-ui main .eo-link b { font-weight: 600; color: var(--ink); }
.office-ui main .eo-desc { color: var(--ink-2); font-size: var(--fs-sm); }
/* Verbindungen: nur „Freigeben“ ist primär; „Vormerken“ sekundär; Aktionen unten bündig; „Bald“ grau */
.office-ui .cn-tile { display: flex; flex-direction: column; }
.office-ui .cn-tile .cn-act { margin-top: auto; }
.office-ui .cn-act button.btn.primary { background: #fff; color: var(--ink); border: 1px solid #D5D9D4; box-shadow: none; }
.office-ui .cn-act button.btn.primary:hover { background: #F6F7F4; }
.office-ui .cn-st { background: #EEF0EC !important; color: var(--ink-2) !important; font-weight: 500 !important; }
/* Kategorien: „Anheften“ als ruhiger Textknopf */
.office-ui .cat-pin { border: 0 !important; background: none !important; color: var(--ink-2) !important; font-weight: 500 !important; box-shadow: none !important; }
.office-ui .cat-pin:hover { color: var(--ink) !important; }
/* Postfach: Auswahlhinweis weg, Zähler im Titel nur einmal (steht schon am Reiter) */
.office-ui .im-selhint:empty, .office-ui .im-selhint { display: none; }
.office-ui .headline-row h1 .muted, .office-ui .headline-row h1 small { display: none; }
/* Netzwerk: zwei Hauptaktionen, Rest im ⋯-Menü */
.nw-more { position: relative; display: inline-block; }
.nw-more > summary { list-style: none; cursor: pointer; font-size: 18px; line-height: 1; padding: 6px 10px; }
.nw-more > summary::-webkit-details-marker { display: none; }
.nw-more-m { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 220px; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(20,30,25,.12); display: grid; }
.nw-more-m > :is(a, button) { display: block; text-align: left; padding: 8px 10px; border: 0; background: none; border-radius: 8px; color: var(--ink); font: 400 var(--fs-sm)/1.3 var(--sans); text-decoration: none; cursor: pointer; }
.nw-more-m > :is(a, button):hover { background: #F4F2EC; }
.sr-more-f { margin-top: 6px; }
.sr-more-f > summary { cursor: pointer; color: var(--ink-2); font-size: var(--fs-sm); font-weight: 500; list-style: none; padding: 4px 0; }
.sr-more-f > summary::-webkit-details-marker { display: none; }
.sr-more-f > summary::after { content: ' ▾'; }
.sr-more-f[open] > summary::after { content: ' ▴'; }
/* Suche: das Feld oben in der Kopfzeile ist die Eingabe; kein zweites Feld auf der Seite */
.office-ui .sr-page .sr-pageform { display: none; }
/* Netzwerk: Symbol als Kreis, Entwurfsvorschau neutral, Titel ohne Dauer-Unterstrich, Art-Plaketten grau */
.office-ui .nw-badge { width: 40px !important; height: 40px !important; flex: none; justify-self: start; align-self: start; background: #F1EFE9 !important; color: var(--ink-2); }
.office-ui .nw-draft { border: 1px solid var(--line) !important; border-left-width: 1px !important; background: #FBFAF7 !important; color: var(--ink); }
.office-ui .nw-b h3 a, .office-ui .nw-b h3 { text-decoration: none; font-family: var(--sans); font-size: var(--fs-md); }
.office-ui .nw-kind, .office-ui .nw-b .nw-k { background: #EEF0EC !important; color: var(--ink-2) !important; font-weight: 500 !important; }
.office-ui .nw-step .nw-chip { background: #EEF0EC !important; color: var(--ink-2) !important; font-weight: 500 !important; border: 0 !important; }

/* Leerzustände, Hinweise, Kopfzeilen: eine ruhige Form (keine gestrichelten/cremefarbenen Kästen, keine Terrakotta-Ränder) */
.office-ui main :is(.ot-empty, .kal .banner, .or-card.or-new, .set-scope) { border-style: solid !important; border-width: 1px !important; border-color: var(--line) !important; background: #fff !important; box-shadow: none !important; }
.office-ui main .ot-empty { border-radius: 12px; padding: 18px 20px; color: var(--ink); }
.office-ui main .set-scope { border: 0 !important; padding: 0 !important; margin: 4px 0 16px; color: var(--ink-2); font-size: var(--fs-xs); }
.office-ui main .kal .banner { border-radius: 12px; padding: 16px 18px; }
.office-ui main .kal:has(> .banner) .kal-foot { display: none; } /* nur wenn der Hinweis „Kalender verbinden“ schon da ist */
.office-ui main .brf-kicker { color: var(--ink-2) !important; font-weight: 500; }
.office-ui main .or-status { background: #EEF0EC !important; color: var(--ink-2) !important; }

/* ---------- nacht-a (Nachtschicht 13.10.2026) ---------- */
/* Nacht A (13.10.2026): /pro, /einladen, /feedback im einheitlichen Gestaltungssystem.
   Eine Schrift, Gewichte 400/500/600, Größen 12.5/13.5/15/17/22/28, Tinte var(--ink) + Grau var(--ink-2). */

/* ---------- gemeinsam ---------- */
:is(.na-pro, .na-ref, .na-fb) { font-family: var(--sans); color: var(--ink); }
:is(.na-pro, .na-ref, .na-fb) h1 { font: 600 28px/1.2 var(--sans); letter-spacing: -0.02em; margin: 0 0 8px; }
:is(.na-pro, .na-ref, .na-fb) :is(h2, .h4) { font: 600 17px/1.3 var(--sans); letter-spacing: -0.01em; text-transform: none; }
:is(.na-pro, .na-ref, .na-fb) .lead { font-size: 15px; line-height: 1.5; color: var(--ink-2); font-weight: 400; margin: 0 0 18px; }
:is(.na-pro, .na-ref, .na-fb) :is(.muted.small, .small.muted) { font-size: 12.5px; color: var(--ink-2); }
:is(.na-pro, .na-ref, .na-fb) .na-label { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink-2); text-transform: none; letter-spacing: 0; margin: 0 0 8px; padding: 0; }
:is(.na-pro, .na-ref, .na-fb) a:not(.btn) { text-decoration: none; }
:is(.na-pro, .na-ref, .na-fb) :is(p, li) > a:not(.btn) { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 30%, transparent); text-underline-offset: 3px; }
:is(.na-pro, .na-ref, .na-fb) .btn.ghost { background: #fff; color: var(--ink); border: 1px solid var(--line); box-shadow: none; }
:is(.na-pro, .na-ref, .na-fb) .btn.ghost:hover { background: #F6F7F4; }
:is(.na-pro, .na-ref, .na-fb) .btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------- /pro ---------- */
.na-pro .plans { gap: 14px; align-items: stretch; }
.na-pro .plan { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; display: flex; flex-direction: column; }
.na-pro .plan.featured { border: 1.5px solid var(--ink); }
.na-pro .na-plan-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.na-pro .na-plan-head h2 { margin: 0; }
.na-pro .na-pill { flex: none; font-size: 12.5px; font-weight: 500; line-height: 1; color: var(--ink-2); background: #F1F2EF; border-radius: 999px; padding: 5px 10px; white-space: nowrap; }
.na-pro .na-plan-usage { margin: 0 0 10px; font-size: 13.5px; color: var(--ink-2); }
.na-pro .na-price { font: 600 22px/1.2 var(--sans); color: var(--ink); margin: 10px 0 2px; white-space: nowrap; }
.na-pro .na-vat { font-size: 12.5px; line-height: 1.4; color: var(--ink-2); margin: 0 0 12px; }
.na-pro .plan ul { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.5; }
.na-pro .plan ul li { margin: 4px 0; }
.na-pro .na-buy { gap: 10px; margin: 18px 0 8px; }
.na-pro .na-buy .consent-row { font-size: 13.5px; margin: 0; border-radius: 12px; }
.na-pro .na-buy .consent-row:has(input:checked) { border-color: var(--ink); background: #fff; }
.na-pro .na-buy .consent-row input { accent-color: var(--ink); }
.na-pro .na-legal { margin: 0; font-size: 12.5px; color: var(--ink-2); }
.na-pro .na-legal a { color: var(--ink-2); }
.na-pro .na-buy .btn.primary { justify-self: start; align-self: flex-start; }

/* ---------- /einladen ---------- */
.na-ref .na-lead { max-width: 60ch; }
.na-ref .na-ref-quota { font-size: 13.5px; color: var(--ink-2); margin: -8px 0 12px; }
.na-ref .sharebox { margin: 4px 0 16px; }
.na-ref .sharebox > .share-url { height: 40px; font-size: 13.5px; border: 1px solid var(--line); border-radius: 8px; padding: 0 12px; }
.na-ref .sharebox > .btn,
.na-ref .na-ref-main .btn,
.na-ref .ref-claim-row :is(input, .btn) { height: 40px; min-height: 40px; box-sizing: border-box; margin: 0; padding-top: 0; padding-bottom: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.na-ref .sharebox > .btn { padding-left: 18px; padding-right: 18px; }
.na-ref .sharebox .share-alt .btn { height: 34px; font-size: 13.5px; font-weight: 500; }
.na-ref .ref-claim-row input { font-weight: 400; justify-content: flex-start; padding: 0 12px; }
.na-ref .na-ref-main { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 6px; }
.na-ref .na-ref-why { font-size: 12.5px; color: var(--ink-2); margin: 0 0 16px; }
.na-ref .ref-code .na-label { display: inline; margin: 0 6px 0 0; }
.na-ref .ref-code code { font-size: 15px; letter-spacing: 0; background: #F1F2EF; }
.na-ref .beta-friends li { font-size: 13.5px; }
.na-ref .circle-member .eyebrow { text-transform: none; letter-spacing: 0; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }

/* ---------- /feedback ---------- */
.na-fb .fb-kinds legend.na-label { float: none; width: 100%; }
.na-fb .fb-kind { position: relative; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 14px 14px 14px 16px; transition: border-color .12s ease, background-color .12s ease; }
.na-fb .fb-kind:hover { border-color: #C4C9C4; background: #FAFBF9; }
.na-fb .fb-kind.on, .na-fb .fb-kind:has(input:checked) { border: 1px solid var(--ink); box-shadow: 0 0 0 1px var(--ink); background: #fff; }
.na-fb .fb-kind-ico { width: 32px; height: 32px; border-radius: 8px; background: #F1F2EF; color: var(--ink); font-size: 0; }
.na-fb .fb-kind-txt { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.na-fb .fb-kind-txt b { font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.na-fb .fb-kind-txt .muted.small { font-size: 13.5px; line-height: 1.4; color: var(--ink-2); }
.na-fb .na-fb-chev { flex: none; color: var(--ink-2); transition: transform .12s ease; }
.na-fb .fb-kind:hover .na-fb-chev { transform: translateX(2px); color: var(--ink); }
.na-fb .fb-kind.on .na-fb-chev, .na-fb .fb-kind:has(input:checked) .na-fb-chev { transform: rotate(90deg); color: var(--ink); }
.na-fb .fb-body { margin-top: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; display: grid; gap: 10px; }
.na-fb .fb-body[data-fb-wait] { display: none; }
.na-fb .fb-body > label[for="fb-text"] { font-size: 13.5px; font-weight: 600; color: var(--ink-2); margin: 0; }
.na-fb .fb-body textarea { font: 400 15px/1.5 var(--sans); border: 1px solid var(--line); border-radius: 8px; }
.na-fb .fb-body .btn.primary { justify-self: start; }
.na-fb .fb-row-t b { font-size: 15px; font-weight: 600; }
.na-fb .fb-row-t .muted.small, .na-fb .fb-row-no { font-size: 12.5px; color: var(--ink-2); }
@media (max-width: 640px) {
  .na-fb .na-fb-chev { transform: none; }
  .na-fb .fb-kind.on .na-fb-chev, .na-fb .fb-kind:has(input:checked) .na-fb-chev { transform: rotate(90deg); }
}

/* ---------- nacht-c (Nachtschicht 13.10.2026) ---------- */
/* Nachtschicht C (13.10.2026): Interessen, Kategorien, Verbindungen im einheitlichen Typografie-System
   Eine Schrift · 400/500/600 · 12,5/13,5/15/17/22 px · Tinte + ein Grau · Beschriftungen halbfett, klein, grau. */

/* ---------- Interessen-Editor (/interests und Onboarding) ---------- */
.int-editor .chip,
.int-editor .ichip,
.int-editor .ichip-b { font-family: inherit; }
.int-editor .chip.sm { font: inherit; font-size: var(--fs-sm, 13.5px); font-weight: 500; line-height: 1.4; padding: 4px 12px; }
.int-editor .chip.add { color: var(--ink-2); }
.int-editor .chip.add:hover { color: var(--ink); }
.int-editor .ichip { font-size: var(--fs-sm, 13.5px); font-weight: 500; }
.int-editor .ichip.star { font-weight: 600; }
.int-editor .ichip-new { font-size: var(--fs-xs, 12.5px); font-weight: 500; text-transform: none; letter-spacing: 0; }
.int-editor .ichip-b { font-size: var(--fs-sm, 13.5px); }
.int-editor .int-legend { font-size: var(--fs-xs, 12.5px); color: var(--ink-2); margin: 0 0 14px; gap: 14px; }
.int-editor .int-hint { margin: 0 0 6px; font-size: var(--fs-xs, 12.5px); color: var(--ink-2); }
.int-editor .int-opt { font-size: var(--fs-xs, 12.5px); font-weight: 400; color: var(--ink-2); }
.int-editor .int-step h2 { font-size: var(--fs-lg, 17px); font-weight: 600; }
.int-editor .int-neg-block h3,
.int-editor .int-suggest h3,
.int-editor .int-preview h3,
.int-editor .int-add > label { font-size: var(--fs-sm, 13.5px); font-weight: 600; color: var(--ink-2); letter-spacing: 0; text-transform: none; margin: 0 0 8px; display: block; }
.int-editor .int-reanalyze-row { margin: 10px 0 0; }
.int-editor .int-reanalyze { padding: 4px 0; margin: 0; color: var(--ink-2); text-decoration: none; font-weight: 500; }
.int-editor .int-reanalyze:hover { color: var(--ink); text-decoration: underline; }

/* Feldbeschriftungen auf „Meine Interessen“: 13,5/600 grau (im Onboarding bleiben die großen Fragen) */
.int-page .int-label { font-family: inherit; font-size: var(--fs-sm, 13.5px); font-weight: 600; line-height: 1.4; color: var(--ink-2); margin: 18px 0 4px; letter-spacing: 0; }
.int-page .int-step[data-step="1"] > .int-label:first-child { margin-top: 4px; }
.int-page h1 { font-size: var(--fs-xl, 22px); font-weight: 600; }
.int-page > p.muted { font-size: var(--fs-md, 15px); color: var(--ink-2); }
.int-page .int-actions { gap: 12px; }
.int-page .int-status { font-size: var(--fs-sm, 13.5px); color: var(--ink-2); }

/* ---------- Kategorien (/kategorien): feste Spalten je Zeile ---------- */
.kt-card .kt-h1 { display: flex; align-items: baseline; gap: 8px; }
.kt-card .kt-h-count { font-size: var(--fs-sm, 13.5px); font-weight: 400; color: var(--ink-2); letter-spacing: 0; }
/* Spalte 1 = Auswahlkästchen der Mehrfachauswahl (listsel.js setzt es vor die Zeile), danach feste Spalten */
.kt-list .kt-row { display: grid; grid-template-columns: auto minmax(0, 1fr) 9.5rem 6.5rem 2rem; align-items: center; column-gap: 8px; padding: 4px 0; }
.kt-list .kt-row > .ms-box { grid-column: 1; }
.kt-list .kt-row > .kt-main { grid-column: 2; }
.kt-list .kt-row > .kt-done { grid-column: 3; }
.kt-list .kt-row > .cat-pin { grid-column: 4; }
.kt-list .kt-row > .mn-catmenu { grid-column: 5; }
.kt-list .kt-row > .ms-chip { grid-column: 2 / -1; justify-self: start; margin: 0 0 4px; }
.kt-list .kt-main { display: grid; grid-template-columns: 12px minmax(0, 1fr) 17rem 6.5rem; align-items: center; column-gap: 10px; min-width: 0; text-decoration: none; color: var(--ink); }
.kt-list .kt-main,
.kt-list .kt-main:hover,
.kt-list .kt-main * { text-decoration: none; }
.kt-list .kt-name { font-size: var(--fs-md, 15px); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kt-list .kt-meta { margin: 0; font-size: var(--fs-sm, 13.5px); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.kt-list .kt-unread { font-size: var(--fs-sm, 13.5px); font-weight: 600; color: var(--ink); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kt-list .kt-done { font-size: var(--fs-sm, 13.5px); font-weight: 400; color: var(--ink-2); text-decoration: none; white-space: nowrap; justify-self: start; }
.kt-list .kt-done:hover { color: var(--ink); text-decoration: underline; }
.kt-list .cat-pin { justify-self: start; margin: 0; padding: 4px 0; border: 0; background: none; box-shadow: none; color: var(--ink-2); font-size: var(--fs-sm, 13.5px); font-weight: 500; white-space: nowrap; }
.kt-list .cat-pin:hover { background: none; color: var(--ink); text-decoration: underline; }
.kt-list .cat-pin.on { color: var(--ink); font-weight: 600; }
.kt-list .kt-row .mn-catmenu { justify-self: end; }
@media (max-width: 760px) {
  .kt-list .kt-row { grid-template-columns: auto minmax(0, 1fr) 6.5rem 2rem; }
  .kt-list .kt-row > .cat-pin { grid-column: 3; }
  .kt-list .kt-row > .mn-catmenu { grid-column: 4; }
  .kt-list .kt-main { grid-template-columns: 12px minmax(0, 1fr) auto; }
  .kt-list .kt-meta,
  .kt-list .kt-done { display: none; }
}

/* ---------- Verbindungen (/verbindungen) ---------- */
.cn-page .cn-grid { align-items: stretch; }
.cn-page .cn-tile { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.cn-page .cn-tile .cn-act { margin-top: auto; padding-top: 6px; }
.cn-page .cn-mono { background: #EEF0EC; color: var(--ink-2); font-weight: 600; font-size: var(--fs-md, 15px); }
.cn-page .cn-h h3 { font-size: var(--fs-md, 15px); font-weight: 600; }
.cn-page .cn-st { font-size: var(--fs-xs, 12.5px); font-weight: 500; letter-spacing: 0; color: var(--ink-2); }
.cn-page .cn-st.is-on, .cn-page .cn-st.is-ready { color: #1F6B43; }
.cn-page .cn-st.is-error { color: #A12A1C; }
.cn-page .cn-pkg { font-size: var(--fs-sm, 13.5px); font-weight: 500; }
.cn-page .cn-soon { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.cn-page .cn-soon[hidden] { display: none; }
.cn-page .cn-sec-h { font-size: var(--fs-lg, 17px); font-weight: 600; margin: 0 0 4px; letter-spacing: 0; text-transform: none; }
.cn-page .cn-soon > p { margin: 0 0 14px; color: var(--ink-2); }
.cn-page .cn-act [data-cn-mark] { background: #fff; color: var(--ink); border: 1px solid #D5D9D4; box-shadow: none; }
.cn-page .cn-act [data-cn-mark]:hover { background: #F6F7F4; color: var(--ink); }
.cn-page .cn-act [data-cn-mark][aria-pressed="true"] { color: var(--ink-2); border-color: var(--line); }