/* Tagnora – Komponenten-Stile. Alle Farben, Schriftgroessen, Abstaende und Ecken kommen aus /tokens.css.
   Am Ende dieser Datei: die iOS-Schicht (Tab Bar, Sidebar, gruppierte Listen, Schalter, Sheets). */
:root[data-theme="light"] .badge-hoch { background: #fee2e2; color: #991b1b; }
:root[data-theme="light"] .badge-mittel { background: #fef3c7; color: #92400e; }
:root[data-theme="light"] .badge-niedrig { background: #dcfce7; color: #166534; }
:root[data-theme="light"] .tag, :root[data-theme="light"] .share-gone { background: #e5e7eb; }
:root[data-theme="light"] .day.selected, :root[data-theme="light"] .choice.on { background: #cffafe; }
:root[data-theme="light"] .dropzone { border-color: #c4c9d0; }
:root[data-theme="light"] .dropzone.over, :root[data-theme="light"] .edit-hint, :root[data-theme="light"] .helper-bar { background: #ecfeff; border-color: #67e8f9; }
:root[data-theme="light"] .tab.active { border-color: #9aa3ad; }
:root[data-theme="light"] .modal-backdrop { background: rgba(15, 23, 42, .35); }
:root[data-theme="light"] .collapse-btn { background: #f3f4f6; border-color: #6b7280; color: #1f2937; box-shadow: 0 2px 6px rgba(15, 23, 42, .15); }
:root[data-theme="light"] .collapse-btn:hover { background: #e5e7eb; border-color: #1f2937; }
:root[data-theme="light"] .collapse-btn:focus-visible { outline-color: #111827; }
:root[data-theme="light"] .tile.editing { outline-color: #9ca3af; }
:root[data-theme="light"] .status-neu, :root[data-theme="light"] .share-shared { background: #dbeafe; color: #1e40af; }
:root[data-theme="light"] .status-in_bearbeitung, :root[data-theme="light"] .wf-pruefung, :root[data-theme="light"] .share-wf { background: #fef3c7; color: #92400e; }
:root[data-theme="light"] .status-ausstehend { background: #fae8ff; color: #86198f; }
:root[data-theme="light"] .status-erledigt, :root[data-theme="light"] .wf-freigegeben, :root[data-theme="light"] .share-approved { background: #dcfce7; color: #166534; }
:root[data-theme="light"] .wf-zurueckgegeben, :root[data-theme="light"] .share-returned { background: #fee2e2; color: #991b1b; }
:root[data-theme="light"] .timeline { border-left-color: #d4d4d8; }
:root[data-theme="light"] :is(.sig-ok, .sec-ok .sec-icon) { color: #15803d; }
:root[data-theme="light"] :is(.sig-bad, .overdue-text, .sec-bad .sec-icon) { color: #b91c1c; }
:root[data-theme="light"] .sec-warn .sec-icon { color: #a16207; }
:root[data-theme="light"] .tile-icon { box-shadow: 0 1px 4px rgba(15, 23, 42, .18); }
:root[data-theme="light"] .tiles.masonry > .tile.dragging { box-shadow: 0 18px 40px rgba(15, 23, 42, .25); }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: var(--fs-body)/1.45 var(--font); -webkit-text-size-adjust: 100%; }
a { color: var(--accent); }
h1 { font-size: 1.45rem; margin: 0; }
h2 { font-size: 1.05rem; margin: 0; }
h3 { font-size: .95rem; margin: .8rem 0 .3rem; color: var(--muted); font-weight: 600; }
p { margin: .4rem 0; }
code, .mono { font-family: var(--font-mono); }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.hint { color: var(--muted); font-size: .82rem; display: block; }
.warn { color: var(--warn); }
.pre { white-space: pre-wrap; }
.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.grow { flex: 1; min-width: 0; }
.row { display: flex; gap: .6rem; align-items: center; }
.row > .field { flex: 1; }
.row.wrap { flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.row.end { justify-content: flex-end; }
.col { display: flex; flex-direction: column; gap: .3rem; align-items: flex-end; }
.stack { display: flex; flex-direction: column; gap: .75rem; }

/* Banner */
.banner { padding: .5rem 1rem; text-align: center; font-weight: 600; font-size: .9rem; padding-top: calc(.5rem + env(safe-area-inset-top, 0px)); }
.banner-staging { background: repeating-linear-gradient(45deg, #7c2d12, #7c2d12 12px, #9a3412 12px, #9a3412 24px); color: #fff; }
.banner-warn { background: #713f12; color: #fff; }

/* Formulare */
.field { display: flex; flex-direction: column; gap: .3rem; }
.field-label { font-size: .85rem; color: var(--muted); }
.input { width: 100%; padding: .7rem .8rem; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); font: inherit; font-size: 16px; }
.input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
textarea.input { resize: vertical; }
.check { display: flex; align-items: center; gap: .5rem; cursor: pointer; }
.check input { width: 1.15rem; height: 1.15rem; accent-color: var(--accent); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; padding: .6rem 1rem; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); font: inherit; cursor: pointer; text-decoration: none; min-height: 40px; }
.btn:hover { border-color: #555; }
.btn:disabled { opacity: .6; cursor: wait; }
.btn-primary { background: var(--accent); color: #0b1b1f; border-color: transparent; font-weight: 600; }
.btn-danger { background: #3a1616; border-color: #7f1d1d; color: #fecaca; }
.btn-ghost { background: transparent; }
.btn-link { background: none; border: none; color: var(--accent); padding: .3rem 0; min-height: 0; }
.btn-sm { padding: .35rem .7rem; min-height: 32px; font-size: .88rem; }
.btn-icon { padding: .3rem .55rem; min-height: 32px; background: transparent; }

/* Anmeldung */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem 1rem calc(1.5rem + env(safe-area-inset-bottom, 0px)); }
.auth-card { width: min(100%, 460px); background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 1.5rem; display: flex; flex-direction: column; gap: .8rem; }
.brand { display: flex; align-items: center; gap: .6rem; font-weight: 700; font-size: 1.2rem; }
.brand.small { font-size: 1.05rem; }
.codes { columns: 2; gap: 1rem; padding-left: 1.4rem; }
.codes code { font-size: .85rem; }
.totp-setup { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-start; }
.qr { border-radius: 8px; max-width: 220px; height: auto; }
.secret { display: inline-block; padding: .4rem .6rem; background: var(--panel-2); border-radius: 8px; letter-spacing: .05em; word-break: break-all; }
.steps { padding-left: 1.2rem; margin: 0; }
.steps li { margin: .3rem 0; }

/* App-Rahmen */
.shell { min-height: 100vh; display: grid; grid-template-columns: 220px 1fr; grid-template-rows: auto 1fr; grid-template-areas: "top top" "nav main"; }
.topbar { grid-area: top; display: flex; align-items: center; justify-content: space-between; padding: .6rem 1rem; padding-top: calc(.6rem + env(safe-area-inset-top, 0px)); border-bottom: 1px solid var(--line); background: var(--panel); position: sticky; top: 0; z-index: 10; }
.topbar-right { display: flex; align-items: center; gap: .6rem; }
.sync { font-size: .8rem; color: var(--muted); }
.sync[data-state="ungespeichert"], .sync[data-state="speichert ..."] { color: var(--warn); }
.sync[data-state="nicht gespeichert"], .sync[data-state="zu gross"] { color: var(--danger); }
.nav { grid-area: nav; display: flex; flex-direction: column; gap: .3rem; padding: 1rem .6rem; border-right: 1px solid var(--line); }
.nav-btn { display: flex; align-items: center; gap: .6rem; padding: .7rem .8rem; border-radius: 10px; border: none; background: transparent; color: var(--muted); font: inherit; cursor: pointer; text-align: left; }
.nav-btn.active { background: var(--panel-2); color: var(--text); }
.nav-icon { width: 1.4rem; height: 1.4rem; display: inline-grid; place-items: center; flex: none; }
.nav-icon .line-icon { width: 22px; height: 22px; }
.topbar-left { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.search-btn { gap: .4rem; }
.search-btn .line-icon { flex: none; }
/* Menue-Knopf (drei Striche): nur am Handy */
.menu-btn { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--text); cursor: pointer; margin-left: -.35rem; }
.menu-btn:hover, .menu-btn.active { background: var(--panel-2); border-color: var(--line); }
.menu-btn:focus-visible, .nav-btn:focus-visible, .menu-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.menu-list { display: flex; flex-direction: column; gap: .25rem; }
.menu-item { display: flex; align-items: center; gap: .8rem; width: 100%; padding: .85rem .9rem; border-radius: 12px; border: 1px solid transparent; background: transparent; color: var(--text); font: inherit; font-size: 1rem; cursor: pointer; text-align: left; }
.menu-item:hover, .menu-item.active { background: var(--panel-2); border-color: var(--line); }
.menu-item .line-icon { color: var(--muted); flex: none; }
.menu-item.active .line-icon { color: var(--accent); }
.menu-danger { color: var(--danger); }
.menu-danger .line-icon { color: var(--danger); }
.view { grid-area: main; padding: 1.2rem; max-width: 1400px; width: 100%; min-width: 0; overflow-x: clip; }
.btn-icon:disabled { opacity: .35; cursor: default; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }

/* Kacheln */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 1rem; align-items: start; }
.tile { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; margin-bottom: 1rem; min-width: 0; }
.tiles .tile { margin-bottom: 0; }
.tile-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; flex-wrap: wrap; }
.tile-actions { display: flex; gap: .3rem; flex-wrap: wrap; }
.list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.list li { display: flex; align-items: center; gap: .6rem; padding: .55rem .6rem; border-radius: 10px; background: var(--panel-2); }
.list.compact li { padding: .35rem .6rem; }
.list li.clickable, .list li.event { cursor: pointer; }
.list li.done .title { text-decoration: line-through; color: var(--muted); }
.list li.overdue { outline: 1px solid var(--warn); }
.title { font-weight: 500; overflow-wrap: anywhere; }
.badge { display: inline-block; font-size: .7rem; padding: .05rem .4rem; border-radius: 6px; vertical-align: middle; }
.badge-hoch { background: #7f1d1d; color: #fecaca; }
.badge-mittel { background: #713f12; color: #fef08a; }
.badge-niedrig { background: #14532d; color: #bbf7d0; }
.tag { font-size: .72rem; padding: .1rem .45rem; border-radius: 6px; background: #333; color: color-mix(in srgb, var(--muted) 65%, var(--text)); white-space: nowrap; } /* Kontrast ≥ 4,5:1 (gemessen) */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: .5rem; margin-bottom: .7rem; }
/* Keine einzelne Kachel in der letzten Zeile: 4 Werte als 2 × 2, 5–6 Werte in 3 Spalten. */
.stats:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stats:has(> :nth-child(5):last-child), .stats:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 1200px) { .tiles .tile-wide .stats:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat { background: var(--panel-2); border-radius: 10px; padding: .5rem .6rem; display: flex; flex-direction: column; }
.stat strong { font-size: 1.25rem; }
.stat span { color: var(--muted); font-size: .78rem; }

/* Kalender */
.month-title { font-weight: 600; margin-bottom: .3rem; text-transform: capitalize; }
.weekdays, .month { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.weekdays span { text-align: center; font-size: .75rem; color: var(--muted); }
.day { position: relative; aspect-ratio: 1 / .85; min-height: 44px; border: none; border-radius: 8px; background: var(--panel-2); color: var(--text); font: inherit; font-size: .85rem; cursor: pointer; display: flex; align-items: flex-start; justify-content: center; padding-top: .2rem; }
.day.empty { background: transparent; cursor: default; }
.day.today { outline: 1px solid var(--accent); }
.day.selected { background: #164e63; }
.dot { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); min-width: 7px; height: 7px; border-radius: 4px; background: var(--accent-2); font-size: .6rem; font-style: normal; line-height: 7px; color: #000; padding: 0 1px; }
.agenda-title { margin-top: .8rem; }
.event-bar { width: 4px; align-self: stretch; border-radius: 2px; background: var(--accent-2); }
.swatch { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; }

/* Uhr */
.clock { font-size: 2.2rem; font-weight: 300; font-variant-numeric: tabular-nums; text-align: center; margin-bottom: .4rem; }
.clock-tools { display: flex; flex-direction: column; gap: .4rem; }
.clock-item { display: flex; align-items: center; gap: .5rem; padding: .4rem .6rem; background: var(--panel-2); border-radius: 10px; flex-wrap: wrap; }

/* Favoriten */
.web-group h3 { margin-top: .5rem; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { display: inline-flex; align-items: center; gap: .2rem; padding: .3rem .3rem .3rem .7rem; border-radius: 999px; background: var(--panel-2); border-left: 3px solid var(--accent); max-width: 100%; }
.chip a { color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.chip-x { border: none; background: none; color: var(--muted); cursor: pointer; font-size: 1rem; padding: 0 .35rem; }
.chip-ki { border-left-color: #67e8f9; } .chip-uni { border-left-color: #a78bfa; } .chip-arbeit { border-left-color: #60a5fa; }
.chip-privat { border-left-color: #f472b6; } .chip-news { border-left-color: #facc15; } .chip-tools { border-left-color: #4ade80; } .chip-sonstiges { border-left-color: #9ca3af; }
.dropzone { border: 2px dashed #444; border-radius: 12px; padding: 1.1rem; text-align: center; color: var(--muted); cursor: pointer; margin-bottom: .6rem; }
.dropzone.over { border-color: var(--accent); color: var(--text); background: #12313a; }
.spotify { width: 100%; height: 352px; border: 0; border-radius: 12px; }

/* Tabs, Tabellen */
.tabs { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .8rem; }
.tab { padding: .45rem .9rem; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--muted); font: inherit; cursor: pointer; }
.tab.active { background: var(--panel-2); color: var(--text); border-color: #555; }
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table th, .table td { padding: .45rem .5rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.table th { color: var(--muted); font-weight: 500; }
.pos { color: var(--ok); } .neg { color: var(--danger); }
.news li { align-items: flex-start; }

/* Dialoge, Meldungen */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: grid; place-items: center; z-index: 50; padding: 1rem; }
.modal { width: min(100%, 560px); max-height: calc(100vh - 2rem); overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 1.2rem; display: flex; flex-direction: column; gap: .8rem; }
.modal-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.modal-head h2 { margin-right: auto; }
.toast.toast-action { display: flex; align-items: center; gap: .6rem; }
.toast-btn { margin-left: auto; flex: none; }
.toasts { position: fixed; z-index: 60; left: 50%; transform: translateX(-50%); bottom: calc(var(--nav-h) + 1rem + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: .4rem; width: min(92vw, 440px); }
.toast { padding: .7rem 1rem; border-radius: 12px; background: #2b2b2b; border: 1px solid #444; box-shadow: 0 6px 24px rgba(0,0,0,.4); }
.toast-error { border-color: var(--danger); }
.toast-success { border-color: var(--ok); }
.toast-warn { border-color: var(--warn); }

/* Handy */
@media (max-width: 767px) {
  .shell { grid-template-columns: 1fr; grid-template-areas: "top" "main"; padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px)); }
  .nav { position: fixed; bottom: 0; left: 0; right: 0; flex-direction: row; justify-content: space-around; border-right: none; border-top: 1px solid var(--line); background: var(--panel); padding: .3rem .3rem calc(.3rem + env(safe-area-inset-bottom, 0px)); z-index: 20; }
  .nav-btn { flex-direction: column; gap: .2rem; font-size: .68rem; padding: .4rem .2rem; flex: 1 1 0; min-width: 0; align-items: center; text-align: center; }
  .nav-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav-btn.active { background: transparent; color: var(--accent); }
  .nav-btn.active .nav-icon { background: var(--panel-2); border-radius: 999px; width: 3rem; }
  .nav-desktop-only { display: none; }
  /* Tippflaechen am Handy mindestens ~40 px (auch im Kompakt-Modus) */
  .collapse-btn, body.dense .collapse-btn { width: 40px; height: 40px; }
  .btn-icon, body.dense .btn-icon { min-width: 40px; min-height: 40px; }
  body.dense .btn { min-height: 38px; }
  body.dense .btn-sm { min-height: 36px; }
  .menu-btn { display: inline-flex; }
  .topbar-right .present-btn, .topbar-right .lock-btn { display: none; }
  .search-btn { width: 40px; height: 40px; padding: 0; min-height: 0; }
  .view { padding: .8rem; }
  .tiles { grid-template-columns: 1fr; }
  .codes { columns: 1; }
  .row:not(.wrap) { flex-wrap: wrap; }
  .modal-backdrop { align-items: end; padding: 0; }
  .modal { border-radius: 18px 18px 0 0; max-height: 92vh; padding-bottom: calc(1.2rem + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 768px) { .toasts { bottom: 1.5rem; } }
@media (max-width: 480px) {
  .topbar .sync { display: none; }
  .topbar-right { gap: .3rem; }
  .topbar-right .btn { padding: .45rem .6rem; font-size: .85rem; }
}

/* Kacheln: Einklappen und Bearbeitungsmodus */
.tile-title { display: flex; align-items: center; gap: .25rem; min-width: 0; }
/* Klapp-Knopf: ganz rechts, groesser, Kontrast ueber Form/Rand statt Farbe */
.collapse-btn { flex: none; width: 34px; height: 34px; margin-left: .25rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 2px solid #8a8a8a; background: #2f2f2f; color: #fff; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.45); }
.collapse-btn:hover { border-color: #e5e5e5; background: #3a3a3a; }
.collapse-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.chevron { width: 10px; height: 10px; border-right: 3px solid currentColor; border-bottom: 3px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .18s; }
.tile.collapsed .chevron { transform: translateY(2px) rotate(-135deg); }
/* Titelzeile: Icon + Titel links, Klapp-Knopf ganz rechts; Aktionsknoepfe darunter (kein Abschneiden) */
.tiles.masonry .tile-head { flex-wrap: wrap; align-items: center; row-gap: .45rem; }
.tiles.masonry .tile-title { order: 1; flex: 1 1 0; }
.tiles.masonry .collapse-btn { order: 2; }
.tiles.masonry .tile-actions { order: 3; flex: 1 1 100%; justify-content: flex-start; align-items: center; }
.tiles.masonry .tile-actions:empty { display: none; }
.tiles.masonry .tile.collapsed .tile-actions { display: none; }
.head-time { display: none; margin-left: .5rem; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 1.05rem; color: var(--text); }
.tile.collapsed .head-time { display: inline; }
.tile.collapsed > :not(.tile-head) { display: none !important; }
.tile.collapsed .tile-head { margin-bottom: 0; }
.edit-hint { background: #12313a; border: 1px solid #155e75; border-radius: 12px; padding: .6rem .9rem; margin-bottom: 1rem; }
.tile.editing { outline: 1px dashed #4b5563; }
.drag-handle { cursor: grab; font-size: 1.3rem; line-height: 1; padding: .3rem .45rem; border-radius: 8px; color: var(--accent); touch-action: none; user-select: none; -webkit-user-select: none; }
.drag-handle:focus { outline: 2px solid var(--accent); }
.tile.dragging .drag-handle { cursor: grabbing; }

/* Kachel-Icons */
.tile-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 9px; margin-right: .2rem; box-shadow: 0 2px 8px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.25); }
.tile-head h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Masonry: Kacheln ruecken immer lueckenlos zusammen */
.tiles.masonry { display: block; position: relative; }
.tiles.masonry > .tile { position: absolute; top: 0; left: 0; margin: 0; will-change: transform; }
.tiles.masonry.laid-out > .tile { transition: transform .32s cubic-bezier(.2, .8, .2, 1), box-shadow .2s; }
.tiles.masonry > .tile.dragging { transition: box-shadow .2s !important; z-index: 30; box-shadow: 0 18px 40px rgba(0,0,0,.55); outline: 2px solid var(--accent); cursor: grabbing; }
.edit-mode .tile-head { touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.edit-mode > .tile:not(.dragging) { animation: tile-wiggle .32s ease-in-out infinite alternate; }
.edit-mode > .tile:nth-child(2n):not(.dragging) { animation-delay: -.16s; }
.is-dragging > .tile:not(.dragging) { animation-play-state: paused; }
@keyframes tile-wiggle { from { rotate: -.35deg; } to { rotate: .35deg; } }
@media (prefers-reduced-motion: reduce) {
  .edit-mode > .tile { animation: none !important; }
  .tiles.masonry.laid-out > .tile { transition: none; }
}

/* Praesentationsmodus: persoenliche Inhalte unkenntlich (Ueberschriften, Navigation, Knoepfe bleiben lesbar) */
.banner-present { background: #4c1d95; color: #fff; display: flex; justify-content: center; align-items: center; gap: .6rem; flex-wrap: wrap; }
body.presenting :is(.view, .modal) :is(.timeline, .task-title, .attachments .title),
body.presenting .view :is(.title, .muted, .small, .chip a, td, .stat strong, .pre, .clamp, code, .secret, .sensitive, .clock-item .grow, .clock-item > span:not(.tag), .event .tag, .dropzone ~ .list, .codes),
body.presenting .view .tile-body p:not(.hint):not(.warn),
body.presenting .modal :is(input:not([type=checkbox]), textarea, p, .pre, code) {
  filter: blur(7px);
  user-select: none;
  -webkit-user-select: none;
}
body.presenting .view iframe { visibility: hidden; }
body.presenting .present-btn { background: #4c1d95; color: #fff; border-color: transparent; }

/* Aufgaben: Status und Zeitstrahl */
.status { display: inline-block; font-size: .72rem; font-weight: 600; padding: .1rem .5rem; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; }
.status-neu { background: #1e3a5f; color: #bfdbfe; border-color: #2563eb; }
.status-in_bearbeitung { background: #3f2d0d; color: #fde68a; border-color: #d97706; }
.status-ausstehend { background: #3b1d3a; color: #f5d0fe; border-color: #a21caf; }
.status-erledigt { background: #14351f; color: #bbf7d0; border-color: #16a34a; }
.task-meta { gap: .45rem; margin-top: .2rem; }
.task-title { margin: 0 0 .3rem; color: var(--text); font-size: 1.1rem; }
.timeline { list-style: none; margin: 0; padding: 0 0 0 1.1rem; border-left: 2px solid #3f3f46; display: flex; flex-direction: column; gap: .7rem; max-height: 45vh; overflow: auto; }
.timeline li { position: relative; padding-left: .5rem; }
.timeline li::before { content: ""; position: absolute; left: -1.53rem; top: .3rem; width: .8rem; height: .8rem; border-radius: 50%; background: #71717a; border: 2px solid var(--panel); }
.timeline li.tl-created::before { background: #3b82f6; }
.timeline li.tl-status::before { background: #f59e0b; }
.timeline li.tl-step::before { background: #22c55e; }
.timeline li.tl-reminder::before { background: #ef4444; }
.timeline li.tl-edit::before { background: #a855f7; }
.timeline time { display: block; font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Themen-/Branchenauswahl */
.choice-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.choice { padding: .4rem .8rem; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--muted); font: inherit; font-size: .88rem; cursor: pointer; }
.choice.on { background: #164e63; border-color: var(--accent); color: var(--text); }
details.news-prefs > summary { cursor: pointer; font-weight: 600; padding: .2rem 0; }
details.news-prefs[open] > summary { margin-bottom: .6rem; }
.attachments { border-top: 1px solid var(--line); padding-top: .6rem; }
.print-frame { position: fixed; right: 0; bottom: 0; width: 1px; height: 1px; border: 0; opacity: 0; pointer-events: none; }
.helper-bar { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; background: #12313a; border: 1px solid #155e75; border-radius: 10px; padding: .45rem .6rem; margin-bottom: .6rem; }
.notify-prefs .input[type=time] { width: auto; }

/* Admin */
.admin-tabs { display: flex; gap: .4rem; flex-wrap: wrap; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: .2rem 1rem; font-size: .9rem; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.ok { color: color-mix(in srgb, var(--ok) 82%, var(--text)); } .bad { color: var(--danger); } /* Statustext: Kontrast ≥ 4,5:1 */

/* Fokus Kollaborativ */
.collab { display: grid; grid-template-columns: 240px 1fr; gap: 1rem; align-items: start; }
.collab-rooms { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem; display: flex; flex-direction: column; gap: .6rem; position: sticky; top: 4.5rem; }
.collab-rooms h3 { margin: 0; }
.room-list li.active { outline: 1px solid var(--accent); }
.room-picker { display: none; }
.count { min-width: 1.4rem; padding: 0 .4rem; border-radius: 999px; background: var(--warn); color: #000; font-size: .75rem; font-weight: 700; text-align: center; }
.collab-main { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; min-width: 0; }
.room-head { display: flex; gap: .8rem; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin-bottom: .8rem; }
.room-head > .grow { flex: 1 1 14rem; }
.board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; align-items: start; }
.board-col { background: var(--bg); border-radius: 12px; padding: .5rem; min-width: 0; }
.board-col h3 { margin: 0 0 .5rem; display: flex; align-items: center; gap: .4rem; }
.board-card { align-items: flex-start; }
.board-card.mine { outline: 1px solid var(--warn); }
.wf, .share-tag { display: inline-block; font-size: .72rem; font-weight: 600; padding: .1rem .5rem; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; }
.wf-pruefung, .share-wf { background: #3f2d0d; color: #fde68a; border-color: #d97706; }
.wf-zurueckgegeben, .share-returned { background: #3a1616; color: #fecaca; border-color: #dc2626; }
.wf-freigegeben, .share-approved { background: #14351f; color: #bbf7d0; border-color: #16a34a; }
.share-shared { background: #1e3a5f; color: #bfdbfe; border-color: #2563eb; }
.share-gone { background: #333; color: var(--muted); }
.wf-box { border-top: 1px solid var(--line); padding-top: .4rem; }
.wf-box select.input { width: auto; flex: 1; min-width: 10rem; }
.share-preview { background: var(--panel-2); border-radius: 10px; padding: .6rem .8rem; }
.share-preview h3 { margin-top: 0; }
.timeline li.tl-comment::before, .timeline li.tl-shared::before { background: #22c55e; }
.timeline li.tl-assignee::before { background: #06b6d4; }
@media (max-width: 1100px) { .board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .collab { grid-template-columns: 1fr; }
  .collab-rooms { position: static; }
  .room-list { display: none; }
  .room-picker { display: block; }
  .board { grid-template-columns: 1fr; }
  .collab-main { padding: .7rem; }
}
body.presenting .view :is(.room-picker, .wf, .share-tag, .collab-rooms .title) { filter: blur(7px); }

/* Raumschutz: Sicherheitsstatus im Raumkopf */
.room-security { gap: .35rem; margin-top: .35rem; }
.room-security .chip { padding: .15rem .55rem; font-size: .78rem; border-left-width: 3px; }
.room-security .chip-ok { border-left-color: #4ade80; }
.room-security .chip-warn { border-left-color: #facc15; }
.room-security .chip-danger { border-left-color: #f87171; font-weight: 600; }
.list.compact li { padding-block: .3rem; }

/* Wischgesten (Handy) */
.swipeable { touch-action: pan-y; position: relative; transition: transform .18s ease; }
.swipeable.swiping { transition: none; }
.swipeable.swipe-right { box-shadow: inset 4px 0 0 #4ade80; }
.swipeable.swipe-left { box-shadow: inset -4px 0 0 #facc15; }
.swipeable.swipe-armed.swipe-right::before, .swipeable.swipe-armed.swipe-left::after {
  position: absolute; top: 50%; transform: translateY(-50%); font-size: .8rem; font-weight: 600; padding: .15rem .5rem; border-radius: 999px; background: var(--panel-2); white-space: nowrap;
}
.swipeable.swipe-armed.swipe-right::before { content: attr(data-swipe-right); left: -6.5rem; }
.swipeable.swipe-armed.swipe-left::after { content: attr(data-swipe-left); right: -6.5rem; }
.overdue-text { color: #f87171; }

/* Heute-Ansicht */
.today-view { display: grid; gap: 1rem; max-width: 760px; margin-inline: auto; }
.today-view .tile { margin: 0; }
.today-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem; }
.today-head h1 { margin: 0; }
.today-quick { display: flex; gap: .5rem; }
.today-quick .input { flex: 1; min-width: 0; }
.today-section h2 { font-size: 1rem; margin: 0 0 .5rem; display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.today-section h2 .today-count { font-weight: 600; color: var(--muted); font-size: .8rem; min-width: 1.6rem; padding: .05rem .45rem; border-radius: 999px; background: var(--panel-2); text-align: center; font-variant-numeric: tabular-nums; }
.today-empty { color: var(--muted); margin: 0; }
.today-hint { font-size: .8rem; color: var(--muted); }

/* Suche */
.search-box .input { font-size: 1.05rem; }
.search-results { list-style: none; margin: 0; padding: 0; max-height: 60vh; overflow: auto; }
.search-results li { padding: .5rem .4rem; border-radius: 8px; cursor: pointer; display: flex; gap: .6rem; align-items: baseline; }
.search-results li:hover, .search-results li.active { background: var(--panel-2); }
.search-results .kind { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); min-width: 5.5rem; }
.search-results .snippet { color: var(--muted); font-size: .85rem; }
.search-results mark { background: color-mix(in srgb, var(--accent) 35%, transparent); color: inherit; border-radius: 3px; }
.kbd { font-family: ui-monospace, monospace; font-size: .75rem; border: 1px solid var(--line, #444); border-radius: 4px; padding: 0 .3rem; }

/* Kompakt-Modus: mehr auf einen Bildschirm (Einstellungen > Darstellung) */
body.dense { font-size: 14px; }
body.dense .view { padding: .8rem; }
body.dense .tiles { gap: .6rem; }
body.dense .tile { padding: .65rem .75rem; border-radius: 11px; }
body.dense .tile-head { margin-bottom: .35rem; }
body.dense .list li { padding-block: .3rem; }
body.dense .btn { min-height: 32px; padding: .35rem .7rem; }
body.dense .btn-sm { min-height: 28px; }
body.dense .collapse-btn { width: 28px; height: 28px; }
body.dense h1 { font-size: 1.25rem; }
body.dense .stat strong { font-size: 1.15rem; }
body.dense .today-view { gap: .6rem; }

/* Raum-Farben und Symbole */
.room-badge { flex: none; display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 8px; color: #fff; font-weight: 700; font-size: .85rem; line-height: 1; }
.room-head .room-badge { width: 2.2rem; height: 2.2rem; font-size: 1.05rem; border-radius: 10px; }
.room-list li { display: flex; align-items: center; gap: .5rem; }
.room-list li.active { box-shadow: inset 3px 0 0 var(--room-color, var(--accent)); background: var(--panel-2); }
.swatches { display: flex; flex-wrap: wrap; gap: .4rem; }
.swatch { width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.swatch[aria-pressed="true"] { border-color: var(--text); box-shadow: 0 0 0 2px var(--panel); }
.symbol-choice { width: 2.2rem; height: 2.2rem; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); font-size: 1rem; cursor: pointer; }
.symbol-choice[aria-pressed="true"] { border-color: var(--accent); outline: 2px solid var(--accent); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.seg button { border: none; background: transparent; color: var(--muted); padding: .45rem .9rem; font: inherit; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--panel-2); color: var(--text); font-weight: 600; }

/* Signaturen */
.sig { font-size: .78rem; font-weight: 600; padding: 0 .4rem; border-radius: 999px; white-space: nowrap; }
.sig-ok { color: #4ade80; }
.sig-bad { color: #f87171; border: 1px solid currentColor; }
.sig-none { color: var(--muted); font-weight: 400; }

/* Rechtstexte (statische Seiten) */
.legal-page { padding: 1rem max(16px, env(safe-area-inset-left, 0px)) 3rem; }
.legal { max-width: 760px; margin: 0 auto; line-height: 1.65; }
.legal h1 { font-size: 1.6rem; margin: .6rem 0 .2rem; }
.legal h2 { font-size: 1.15rem; margin: 1.8rem 0 .5rem; }
.legal h3 { font-size: 1rem; margin: 1.2rem 0 .3rem; color: var(--text); }
/* Warteliste: Ergebnis per Sprungmarke (#bestaetigt, #abgemeldet, #ungueltig), ohne Skript */
.legal .wl-state { display: none; }
.legal .wl-state:target { display: block; }
.legal:has(.wl-state:target) .wl-default { display: none; }
.legal ul { padding-left: 1.2rem; }
.legal li { margin: .3rem 0; }
.legal pre.license { white-space: pre-wrap; font-size: .78rem; background: var(--panel-2); border-radius: 10px; padding: .8rem; overflow-x: auto; }

/* Rechtliches */
.legal-footer { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1rem; margin-top: 1rem; font-size: .82rem; }
.legal-footer a, .menu-legal a { color: var(--muted); }
.menu-legal { margin-top: .8rem; font-size: .8rem; text-align: center; color: var(--muted); }
.consent-box { padding: .8rem; border: 1px dashed var(--line); border-radius: 12px; background: var(--panel-2); }

/* Sicherheitscenter */
.sec-list li { display: flex; gap: .6rem; align-items: flex-start; }
.sec-icon { flex: none; width: 1.4rem; height: 1.4rem; border-radius: 50%; display: inline-grid; place-items: center; font-size: .8rem; font-weight: 700; border: 2px solid currentColor; }
.sec-ok .sec-icon { color: #4ade80; }
.sec-warn .sec-icon { color: #facc15; }
.sec-bad .sec-icon { color: #f87171; }
.fingerprint { font-size: 1.05rem; letter-spacing: .06em; margin: 0; }
.sec-events li { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; }
.sec-events time { min-width: 8.5rem; font-variant-numeric: tabular-nums; }
.sec-failed { border-left: 3px solid #f87171; padding-left: .5rem; }

/* Schnell entsperren */
.passkey-btn { width: 100%; }
@media (max-width: 767px) {
  .hide-mobile { display: none; }
  .topbar-right { flex-wrap: wrap; justify-content: flex-end; gap: .25rem; }
  .topbar-right .btn { padding-inline: .55rem; }
}

/* =====================================================================================================
   iOS-Schicht: einheitliche Komponenten auf Basis der Tokens (tokens.css).
   Handy < 768 px: Tab Bar unten, Large Title, Bottom Sheets. Tablet 768-1199 px: einklappbare Sidebar.
   PC >= 1200 px: feste Sidebar, Toolbar oben, Hover-Zustaende.
   ===================================================================================================== */

/* Typografie */
h1 { font-size: var(--fs-title1); font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
h2 { font-size: var(--fs-body); font-weight: 600; }
h3 { font-size: var(--fs-footnote); font-weight: 500; text-transform: uppercase; letter-spacing: .04em; }
.small, .hint, .field-label { font-size: var(--fs-footnote); }
.badge, .tag, .status, .wf, .share-tag { font-size: var(--fs-caption); }

/* Karten: flaechig, ohne Rahmen (gruppierter Stil) */
.tile, .collab-rooms, .collab-main, .modal, .auth-card { border: none; }
.auth-card { border-radius: var(--radius-sheet); }
.tiles { grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); }

/* Buttons */
.btn { border: none; border-radius: var(--radius-btn); background: var(--fill); font-weight: 500; transition: transform var(--dur) var(--ease-spring), background-color .15s ease, opacity .15s ease; }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn-primary { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.btn-ghost { background: transparent; color: var(--accent); }
.btn-danger { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
.btn-link { color: var(--accent); }
.btn:focus-visible, .input:focus-visible, .tab:focus-visible, .seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) {
  .btn:hover:not(:disabled) { background: color-mix(in srgb, var(--fill), var(--text) 8%); }
  .btn-primary:hover:not(:disabled) { background: color-mix(in srgb, var(--accent), var(--text) 12%); }
  .btn-ghost:hover:not(:disabled) { background: var(--fill); }
  .btn-danger:hover:not(:disabled) { background: color-mix(in srgb, var(--danger) 24%, transparent); }
}

/* Eingabefelder und Suchfeld */
.input { border: none; background: var(--fill); border-radius: var(--radius-btn); }
.input:focus { outline: 2px solid var(--accent); outline-offset: 0; }
.input[type="search"], .search-box .input { border-radius: var(--radius-btn); padding-left: .9rem; }
/* Auswahllisten: deckende Flaeche statt transluzenter Fuellung, damit die aufgeklappten Optionen gut lesbar sind
   (der Browser zeichnet die Liste mit der Hintergrundfarbe des Felds). Eigener Pfeil im Akzent. */
select.input {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  background-color: var(--select-bg); color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line);
  padding-right: 2.2rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--accent) 50%), linear-gradient(135deg, var(--accent) 50%, transparent 50%);
  background-position: calc(100% - 17px) 52%, calc(100% - 12px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
select.input[multiple] { background-image: none; padding-right: .8rem; }
select.input option, select.input optgroup { background-color: var(--select-option-bg); color: var(--text); font-weight: 400; }
select.input option:checked { background-color: var(--accent); color: var(--on-accent); }
select.input option:disabled { color: var(--muted); }

/* Toggle: Kontrollkaestchen als iOS-Schalter (Zustimmungen zu Rechtstexten bleiben bewusst Kaestchen) */
.check:not(.auth-card .check):not([for^="legal-"]):not([for^="reg-"]) > input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; flex: none; margin: 0; width: 51px; height: 31px; border-radius: 999px; cursor: pointer;
  background: var(--fill) radial-gradient(circle, #fff 0 12.5px, transparent 13px) no-repeat left center / 31px 31px;
  box-shadow: inset 0 0 0 1px var(--line);
  transition: background-color var(--dur) var(--ease-out), background-position var(--dur) var(--ease-spring);
}
.check:not(.auth-card .check):not([for^="legal-"]):not([for^="reg-"]) > input[type="checkbox"]:checked { background-color: var(--ok); background-position: right center; box-shadow: none; }
.check > input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.check > input[type="checkbox"]:disabled { opacity: .5; cursor: default; }

/* Segmented Control (und Tabs im gleichen Stil) */
.seg { border: none; background: var(--fill); border-radius: 9px; padding: 2px; gap: 2px; }
.seg button { border-radius: 7px; color: var(--text); min-height: 32px; transition: background-color var(--dur) var(--ease-out); }
.seg button[aria-pressed="true"] { background: var(--seg-on); box-shadow: 0 1px 3px rgba(0, 0, 0, .18); }
.tab, .choice { border: none; background: var(--fill); color: var(--text); }
.tab.active { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.choice.on { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--text); box-shadow: inset 0 0 0 1px var(--accent); }

/* Gruppierte Listen: Zellen mit Haarlinie statt einzelner Kaesten */
:is(.tile, .collab-rooms) .list { gap: 0; }
:is(.tile, .collab-rooms) .list > li { background: transparent; border-radius: 0; padding-inline: .1rem; min-height: var(--touch); border-bottom: 1px solid var(--line); }
:is(.tile, .collab-rooms) .list > li:last-child { border-bottom: none; }
.room-list > li.active { border-radius: var(--radius-btn); }
:is(.board, .kanban) .list { gap: var(--sp-2); }
:is(.board, .kanban) .list > li { background: var(--panel); border-radius: 12px; padding: .6rem .7rem; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.board-col { background: var(--bg); }
@media (hover: hover) {
  .list > li.clickable:hover, .search-results li:hover { background: color-mix(in srgb, var(--fill) 70%, transparent); }
}

/* Menue-Zellen (Mehr, Menue) als gruppierte Liste */
.menu-list.grouped { gap: 0; background: var(--panel-2); border-radius: var(--radius); overflow: hidden; }
.menu-list.grouped .menu-item { border-radius: 0; border: none; border-bottom: 1px solid var(--line); min-height: var(--touch); }
.menu-list.grouped .menu-item:last-child { border-bottom: none; }
.menu-item .grow + .line-icon { color: var(--muted); }

/* Toasts mit Material */
.toast { background: var(--bar); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: none; border-radius: var(--radius); box-shadow: var(--shadow); }
.toast-error { box-shadow: inset 4px 0 0 var(--danger), var(--shadow); }
.toast-success { box-shadow: inset 4px 0 0 var(--ok), var(--shadow); }
.toast-warn { box-shadow: inset 4px 0 0 var(--warn), var(--shadow); }

/* Kopfleiste: transluzent */
.topbar { background: var(--bar); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-bottom: 1px solid var(--line); }
.topbar-title, .sheet-grabber, .nav-more-btn, .sidebar-btn { display: none; }
.sidebar-btn { width: var(--touch); height: var(--touch); align-items: center; justify-content: center; border-radius: var(--radius-btn); border: none; background: transparent; color: var(--accent); cursor: pointer; }
.sidebar-btn:hover { background: var(--fill); }
.sidebar-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Sidebar (Tablet und PC) */
@media (min-width: 768px) {
  .shell { grid-template-columns: var(--sidebar-w) 1fr; }
  .nav { position: sticky; top: 61px; align-self: start; max-height: calc(100vh - 61px); overflow-y: auto; gap: 2px; border-right: 1px solid var(--line); }
  .nav-btn { color: var(--text); border-radius: 8px; min-height: 40px; }
  .nav-btn .line-icon { color: var(--accent); }
  .nav-btn.active { background: var(--accent); color: var(--on-accent); font-weight: 600; }
  .nav-btn.active .line-icon { color: var(--on-accent); }
}
@media (min-width: 768px) and (hover: hover) {
  .nav-btn:not(.active):hover { background: var(--fill); }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .sidebar-btn { display: inline-flex; }
  .shell { transition: grid-template-columns var(--dur) var(--ease-out); }
  body.sidebar-min .shell { grid-template-columns: var(--sidebar-w-min) 1fr; }
  body.sidebar-min .nav-btn { justify-content: center; padding-inline: 0; }
  body.sidebar-min .nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* Handy: Tab Bar, Large Title, Bottom Sheets */
@media (max-width: 767px) {
  .nav { background: var(--bar); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-top: 1px solid var(--line); padding-top: 2px; }
  .nav-btn { font-size: 10px; font-weight: 500; gap: 2px; min-height: 49px; color: var(--muted); transition: color var(--dur) var(--ease-out); }
  .nav-btn .nav-icon, .nav-btn.active .nav-icon { background: transparent; width: auto; }
  .nav-btn .line-icon { width: 26px; height: 26px; }
  .nav-btn.active { color: var(--accent); }
  .nav-btn:active .line-icon { transform: scale(.9); transition: transform 120ms var(--ease-out); }
  .nav-more-item { display: none; }
  .nav-more-btn { display: flex; }

  /* Large Title, der beim Scrollen in die Kopfleiste schrumpft */
  .view .page-head h1, .today-head h1 { font-size: var(--fs-large-title); line-height: 1.12; letter-spacing: .005em; }
  .topbar { border-bottom-color: transparent; transition: border-color var(--dur) var(--ease-out); }
  body.scrolled .topbar { border-bottom-color: var(--line); }
  .topbar-title { display: flex; align-items: center; position: absolute; left: 50%; bottom: 0; height: calc(100% - env(safe-area-inset-top, 0px)); transform: translateX(-50%); font-weight: 600; white-space: nowrap; opacity: 0; transition: opacity var(--dur) var(--ease-out); pointer-events: none; }
  body.scrolled .topbar-title { opacity: 1; }
  .topbar .brand span { transition: opacity var(--dur) var(--ease-out); }
  body.scrolled .topbar .brand span { opacity: 0; }

  /* Bottom Sheet */
  .modal { border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; animation: sheet-in var(--dur) var(--ease-spring); }
  .sheet-grabber { display: block; width: 36px; height: 5px; border-radius: 3px; background: var(--line); margin: -.5rem auto 0; flex: none; }
  .modal-backdrop { animation: fade-in var(--dur) var(--ease-out); }
}
@keyframes sheet-in { from { transform: translateY(100%); } }
@keyframes fade-in { from { opacity: 0; } }

/* Hilfe & Support */
.help-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); align-items: start; margin-top: var(--sp-4); }
.help-grid > .tile { margin: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.help-search { margin: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.help-search .input { font-size: var(--fs-title3); min-height: 52px; }
.help-hit mark, .help-results mark { background: color-mix(in srgb, var(--accent) 35%, transparent); color: inherit; border-radius: 3px; }
.help-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-2); }
.help-cat { justify-content: flex-start; text-align: left; min-height: 52px; }
.help-steps { padding-left: 1.4rem; display: flex; flex-direction: column; gap: var(--sp-2); }
.help-steps li { padding-left: .2rem; }
.help-feedback { border-top: 1px solid var(--line); padding-top: var(--sp-3); }
.help-i { font-size: 1.05rem; color: var(--accent); min-width: 32px; padding: 0; background: transparent; }
.help-i:hover { background: var(--fill); }
.t-devprev { background: var(--bg); border-radius: var(--radius-btn); padding: var(--sp-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.t-st-offen, .t-st-warten { background: color-mix(in srgb, var(--warn) 25%, transparent); color: var(--text); }
.t-st-in_bearbeitung { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--text); }
.t-st-geloest, .t-st-geschlossen { background: color-mix(in srgb, var(--ok) 22%, transparent); color: var(--text); }
.onboarding h2 { font-size: var(--fs-title2); margin: 0; }
.onb-dots { display: flex; gap: 6px; justify-content: center; }
.onb-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.onb-dots span.on { background: var(--accent); }
.tour-overlay { position: fixed; inset: 0; z-index: 90; }
.tour-spot { position: fixed; border-radius: 14px; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .55), 0 0 0 3px var(--accent); transition: all var(--dur) var(--ease-out); pointer-events: none; }
.tour-tip { position: fixed; max-width: min(360px, calc(100vw - 24px)); background: var(--panel); color: var(--text); border-radius: var(--radius); padding: var(--sp-4); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: var(--sp-3); }

/* Glossar */
.g-layout { display: grid; gap: var(--sp-4); align-items: start; }
.g-main { margin: 0; display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.g-side { margin: 0; display: none; }
.g-chips { max-height: 7.5rem; overflow-y: auto; }
.g-listwrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-2); }
.g-list { display: flex; flex-direction: column; min-width: 0; }
.g-row { display: flex; gap: var(--sp-2); align-items: flex-start; padding: .6rem .2rem; border-bottom: 1px solid var(--line); cursor: pointer; min-height: var(--touch); }
.g-row:last-child { border-bottom: none; }
.g-row.active { background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: var(--radius-btn); }
.g-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.g-row mark { background: color-mix(in srgb, var(--accent) 35%, transparent); color: inherit; border-radius: 3px; }
.g-found { margin-left: var(--sp-2); }
.g-star { color: #ff9f0a; }
.g-letter { position: sticky; top: 60px; background: var(--panel); padding: .3rem .2rem; margin: 0; z-index: 1; }
.g-index { position: sticky; top: 70px; display: flex; flex-direction: column; align-self: start; }
.g-index-btn { border: none; background: none; color: var(--accent); font: inherit; font-size: 11px; font-weight: 600; line-height: 1.25; padding: 1px 6px; cursor: pointer; min-height: 0; }
.g-index-btn:disabled { color: var(--muted); opacity: .45; cursor: default; }
/* Touch: breitere Trefferflaeche, Finger darf ueber das Register gleiten (siehe glossary.js). */
@media (pointer: coarse) {
  .g-index { touch-action: none; padding-inline: 4px; }
  .g-index-btn { font-size: 12px; padding: 2px 12px; min-width: 36px; }
}
.g-term { font-size: var(--fs-title2); margin: 0; }
.g-fav { font-size: 1.4rem; color: #ff9f0a; }
.g-rich p { margin: .3rem 0; }
.g-rich ul { margin: .3rem 0; padding-left: 1.2rem; }
.g-print { display: none; }
.glossary-pick { position: fixed; z-index: 80; box-shadow: var(--shadow); }
.undo-toast { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
@media (min-width: 1024px) {
  .g-layout { grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); }
  .g-side { display: block; position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow-y: auto; }
}
@media print {
  body.printing-glossary > *:not(.g-print) { display: none !important; }
  body.printing-glossary .g-print { display: block; color: #000; background: #fff; }
  .g-print section { break-inside: avoid; margin-bottom: 12pt; }
  .g-print h2 { font-size: 13pt; margin: 0; }
}

/* Taschenrechner */
.calc { display: grid; gap: var(--sp-4); align-items: start; }
.calc-pane { margin: 0; display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.calc-side { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.calc-tabs { margin-bottom: var(--sp-2); }
.calc-privacy { margin: 0 0 var(--sp-2); }
.calc-status { margin: 0; color: var(--muted); font-size: var(--fs-footnote); min-height: 1.2em; }
.calc-display { background: var(--bg); border-radius: var(--radius); padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); }
.calc-line { font-family: var(--font-mono); font-size: var(--fs-title3); background: transparent; box-shadow: none; padding-inline: 0; }
.calc-line:focus { outline: none; }
.calc-display:focus-within { box-shadow: 0 0 0 2px var(--accent); }
.calc-preview { min-height: 1.6em; font-size: var(--fs-title3); color: var(--muted); overflow-x: auto; white-space: nowrap; }
.calc-result { font-size: var(--fs-title1); font-weight: 600; text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; min-height: 1.3em; }
.calc-result.error { color: var(--danger); font-size: var(--fs-callout); font-weight: 500; text-align: left; }
.calc-keys { display: flex; flex-direction: column; gap: var(--sp-2); }
.calc-grid { display: grid; gap: var(--sp-2); }
.calc-grid.basic { grid-template-columns: repeat(4, 1fr); }
.calc-grid.sci { grid-template-columns: repeat(4, 1fr); }
.calc-key { min-height: 54px; border: none; border-radius: 999px; background: var(--fill); color: var(--text); font: inherit; font-size: var(--fs-title3); cursor: pointer; transition: transform var(--dur) var(--ease-spring), filter .15s; }
.calc-grid.sci .calc-key { min-height: 44px; font-size: var(--fs-callout); border-radius: var(--radius-btn); }
.calc-key:active { transform: scale(.94); filter: brightness(1.15); }
.calc-key:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.calc-key.key-op { background: #ff9f0a; color: #1c1c1e; font-weight: 700; } /* dunkle Schrift: 9:1 statt 2:1 bei Weiss */
.calc-key.key-eq { background: var(--accent); color: var(--on-accent); font-weight: 700; }
.calc-key.key-fn { background: color-mix(in srgb, var(--fill), var(--text) 12%); }
.calc-canvas { width: 100%; aspect-ratio: 4 / 3; max-height: 70vh; border-radius: var(--radius-btn); touch-action: none; display: block; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); cursor: grab; }
.calc-canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.calc-fn { display: flex; gap: var(--sp-2); align-items: flex-start; }
.calc-fn-color { width: 12px; height: 12px; border-radius: 50%; margin-top: .9rem; flex: none; }
.calc-fn-on { margin-top: .4rem; }
.calc-slider { display: grid; grid-template-columns: auto 1fr 3.5rem; gap: var(--sp-2); align-items: center; }
.calc-slider input[type="range"] { accent-color: var(--accent); width: 100%; min-height: var(--touch); }
.calc-details > summary { cursor: pointer; font-weight: 600; min-height: var(--touch); display: flex; align-items: center; }
.calc-table { max-height: 320px; overflow: auto; }
.calc-tool-out:empty { display: none; }
.calc-tool-out { background: var(--bg); border-radius: var(--radius-btn); padding: var(--sp-3); overflow-x: auto; }
.calc-history .mono { overflow-wrap: anywhere; }
/* Mathematische Darstellung */
.m-row, .m-frac, .m-sqrt, .m-paren { display: inline-flex; align-items: center; vertical-align: middle; }
.m-frac { flex-direction: column; margin: 0 .15em; font-size: .9em; }
.m-top { border-bottom: 1px solid currentColor; padding: 0 .2em; }
.m-bot { padding: 0 .2em; }
.m-sup { font-size: .7em; align-self: flex-start; margin-left: .05em; }
.m-sqrt .m-rad { border-top: 1px solid currentColor; padding: 0 .15em; }
.m-sym { font-style: italic; }
.m-fn { font-style: normal; }
/* Handy: ein Bereich je Tab */
@media (max-width: 1199px) {
  .calc .calc-pane, .calc .calc-side > * { display: none; }
  .calc[data-tab="calc"] .pane-calc, .calc[data-tab="graph"] .pane-graph, .calc[data-tab="tools"] .pane-tools, .calc[data-tab="history"] .pane-history { display: flex; }
}
/* PC: Eingabe | Graph, darunter Werkzeuge & Verlauf nebeneinander (Graph bekommt die ganze Restbreite) */
@media (min-width: 1200px) {
  .calc { grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); }
  .calc-side { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .calc-tabs { display: none; }
  .calc-settings > summary { display: none; }
}
/* Sehr breit: drei Spalten Eingabe | Graph | Werkzeuge & Verlauf */
@media (min-width: 1700px) {
  .calc { grid-template-columns: minmax(300px, 360px) minmax(0, 1fr) minmax(300px, 380px); }
  .calc-side { grid-column: auto; display: flex; }
}
/* Einstellungen des Rechners: am Handy eingeklappt, damit Anzeige und Tasten sofort sichtbar sind */
.calc-settings > summary { cursor: pointer; list-style: none; min-height: var(--touch); display: flex; align-items: center; gap: .4rem; color: var(--muted); font-size: var(--fs-footnote, .85rem); }
.calc-settings > summary::-webkit-details-marker { display: none; }
.calc-settings > summary::before { content: "⚙"; color: var(--accent); }
.calc-settings[open] > summary { margin-bottom: var(--sp-2); }
@media (max-width: 767px) {
  .pane-calc { gap: var(--sp-2); }
  .pane-calc .calc-display { min-height: 0; }
}

/* Mitteilungscenter */
.bell-btn { position: relative; padding-inline: .5rem; }
.bell-badge { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.notif-list > li { align-items: flex-start; gap: var(--sp-3); }
.notif-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: .45rem; flex: none; background: transparent; }
.notif-list > li.unread .notif-dot { background: var(--accent); }
.notif-list > li.unread .title { font-weight: 700; }
.level-option { align-items: flex-start; cursor: pointer; }
.level-option input { margin-top: .3rem; accent-color: var(--accent); width: 1.1rem; height: 1.1rem; flex: none; }
.notify-events { border: none; padding: 0; margin: 0; }

/* Kanban-Board */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.board-toolbar { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.board-filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.board-filters > .input { flex: 1 1 10rem; width: auto; min-width: 0; }
.board-filters > .input[type="search"] { flex: 2 1 14rem; }
.board-stats { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.stat-warn strong { color: var(--danger); }
.board-lane + .board-lane { margin-top: var(--sp-4); }
.lane-title { margin: 0 0 var(--sp-2); }
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: var(--sp-3); overflow-x: auto; padding-bottom: var(--sp-2); align-items: start; }
.kanban-col { min-height: 6rem; transition: box-shadow .15s ease, background-color .15s ease; }
.kanban-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-2); text-transform: none; letter-spacing: 0; }
.kanban-count { font-variant-numeric: tabular-nums; color: var(--muted); font-size: var(--fs-footnote); }
.kanban-col.wip-over { background: color-mix(in srgb, var(--danger) 12%, var(--bg)); box-shadow: inset 0 0 0 2px var(--danger); }
.kanban-col.wip-over .kanban-count { color: var(--danger); font-weight: 700; }
.kanban-col.drop-target { box-shadow: inset 0 0 0 2px var(--accent); }
.kanban-empty { margin: 0; }
.board-card.dragging { opacity: .5; }
.board-card.grabbed { outline: 3px solid var(--accent); outline-offset: 2px; }
.board-card.blocked { box-shadow: inset 3px 0 0 var(--warn), 0 1px 2px rgba(0, 0, 0, .12); }
.board-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.card-labels { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.card-label { font-size: var(--fs-caption); padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--accent-2) 22%, transparent); color: var(--text); }
.card-progress { display: flex; align-items: center; gap: var(--sp-2); margin-top: 4px; }
.card-progress-bar { flex: 1; height: 6px; border-radius: 3px; background: var(--fill); overflow: hidden; }
.card-progress-bar > span { display: block; height: 100%; background: var(--ok); border-radius: 3px; }
.tag-blocked { background: color-mix(in srgb, var(--warn) 25%, transparent); color: var(--text); }
.checklist { border: none; padding: 0; margin: var(--sp-2) 0; display: flex; flex-direction: column; gap: 2px; }
.checklist-item { display: flex; align-items: center; gap: var(--sp-2); min-height: 36px; cursor: pointer; }
.checklist-item input { width: 1.2rem; height: 1.2rem; accent-color: var(--ok); }
.checklist-item input:checked + span { text-decoration: line-through; color: var(--muted); }
.column-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) 5rem auto; gap: var(--sp-2); align-items: center; }
.mine-btn { margin-bottom: var(--sp-2); }
@media (max-width: 767px) {
  /* Handy: eine Spalte pro Bildschirm, waagerecht wischen */
  .kanban { grid-auto-columns: 86%; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
  .kanban-col { scroll-snap-align: start; }
  .column-row { grid-template-columns: 1fr 1fr; }
}

/* Einstellungen: gruppierte Liste + Unterseite (ab 1024 px nebeneinander) */
.settings-layout { display: grid; gap: var(--sp-5); align-items: start; }
.settings-nav { display: flex; flex-direction: column; gap: var(--sp-4); }
.settings-group h3 { margin: 0 0 var(--sp-2) var(--sp-3); }
.settings-group-title { font-size: var(--fs-footnote, .8rem); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.settings-group .menu-list.grouped { background: var(--panel); }
.settings-groups { gap: var(--sp-4); }
.settings-search { width: 100%; }
.settings-empty { margin: 0 var(--sp-3); }
.settings-icon { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--icon-bg, var(--accent)); color: #fff; flex: none; }
.settings-nav .menu-item .settings-icon .line-icon { color: #fff; }
.settings-nav .menu-item.active { background: color-mix(in srgb, var(--accent) 14%, var(--panel)); }
.settings-detail { min-width: 0; }
.settings-detail .tile { margin: 0; }
.settings-title { font-size: var(--fs-title2); font-weight: 700; margin: 0; }
.settings-back { align-self: flex-start; padding-inline: .2rem; gap: .1rem; }
/* Unterseite in einer Karte: eingebettete Abschnitte ohne zweite Karte */
.tile .tile { background: transparent; padding: 0; box-shadow: none; }
.tile .tile > .tile-head h2 { font-size: var(--fs-callout); }
@media (max-width: 1023px) {
  .settings-layout.has-page .settings-nav { display: none; }
  .settings-layout.has-page ~ * { display: none; }
  .view .page-head:has(+ .settings-layout.has-page) h1 { font-size: var(--fs-large-title); }
  .settings-layout.has-page .settings-title { display: none; }
}
@media (min-width: 1024px) {
  .settings-layout { grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); }
  .settings-nav { position: sticky; top: 76px; max-height: calc(100vh - 90px); overflow-y: auto; }
}
/* Konnektoren */
.connector-row { align-items: center; }
.connector-row:disabled { cursor: default; opacity: 1; }
.connector-row:disabled .connector-name { color: var(--muted); }
.connector-name { display: block; font-weight: 600; margin: 0; font-size: var(--fs-body); text-transform: none; letter-spacing: normal; color: var(--text); }
.connector-sub { display: block; }
.connector-state { font-size: var(--fs-footnote); font-weight: 600; white-space: nowrap; }
.state-on { color: var(--ok); }
.state-off, .state-soon { color: var(--muted); }
.state-error { color: var(--danger); }

/* Kennungen (Konto) */
.id-code { font-size: var(--fs-callout); letter-spacing: .04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.id-list > li { flex-wrap: wrap; }
.id-list > li > .grow { flex: 1 1 12rem; }
.sensitive { overflow-wrap: anywhere; }

/* Kontaktformular */
.contact-form { max-width: 560px; margin-top: var(--sp-4); }
.contact-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-form .input[aria-invalid="true"] { outline: 2px solid var(--danger); }
/* Support-Dashboard (Admin) */
.stat-warn strong { color: var(--warn, #d97706); } .stat-bad strong { color: var(--danger); } .stat-ok strong { color: var(--ok); }
.sup-filters { margin-block: var(--sp-3); align-items: center; }
.sup-filters .input { width: auto; min-width: 9rem; flex: 1 1 9rem; }
.sup-bars { display: grid; gap: .35rem; }
.sup-bar { display: grid; grid-template-columns: minmax(6rem, 10rem) 1fr 2.5rem; gap: .5rem; align-items: center; font-size: .85rem; }
.sup-bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sup-bar-track { height: .55rem; background: var(--fill); border-radius: 99px; overflow: hidden; }
.sup-bar-fill { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.sup-bar-value { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.sup-spark { display: flex; align-items: flex-end; gap: 2px; height: 90px; padding-top: .3rem; }
.sup-spark-col { flex: 1; background: var(--accent); opacity: .75; border-radius: 2px 2px 0 0; min-height: 3px; }
.sup-table tbody tr { cursor: pointer; }
.sup-table tbody tr:hover, .sup-table tbody tr:focus-visible { background: var(--panel-2); outline: none; }
.sup-table tr.sla-bad td:first-child, .sup-card.sla-bad { box-shadow: inset 3px 0 0 var(--danger); }
.sup-table tr.sla-warn td:first-child, .sup-card.sla-warn { box-shadow: inset 3px 0 0 var(--warn, #d97706); }
.sup-pill { font-size: .75rem; padding: .1rem .5rem; border-radius: 99px; background: var(--fill); white-space: nowrap; }
.sup-pill.st-offen { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.sup-pill.st-geloest, .sup-pill.st-geschlossen { color: var(--muted); }
.sup-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-3); }
.sup-col { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-3); display: grid; gap: .5rem; align-content: start; }
.sup-col h3 { margin: 0; font-size: .9rem; }
.sup-col.drop { box-shadow: inset 0 0 0 2px var(--accent); }
.sup-card[draggable="true"] { cursor: grab; }
.sup-bulk { background: var(--panel-2); border-radius: var(--radius-btn); padding: var(--sp-2) var(--sp-3); align-items: center; }
.sup-presence { margin: 0; padding: .4rem .7rem; border-radius: var(--radius-btn); background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--text); font-size: .85rem; }
.sup-dup { border: 1px dashed var(--warn); border-radius: var(--radius-btn); padding: var(--sp-2) var(--sp-3); display: grid; gap: .3rem; }
.sup-person > summary { cursor: pointer; font-size: .9rem; color: var(--muted); }
.sup-canned { border-bottom: 1px solid var(--line); padding-bottom: var(--sp-2); }
.sup-suggest .btn { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sup-card { display: grid; gap: .2rem; text-align: left; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-btn); padding: .6rem .7rem; color: var(--text); font: inherit; cursor: pointer; }
.sup-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sup-detail { max-width: 720px; }
.sup-thread { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; max-height: 45vh; overflow: auto; }
.sup-msg { border-radius: var(--radius-btn); padding: .6rem .75rem; background: var(--panel-2); display: grid; gap: .2rem; }
.sup-msg.from-support { background: color-mix(in srgb, var(--accent) 14%, var(--panel-2)); }
.sup-msg.from-note { background: transparent; border: 1px dashed var(--line); }
.sup-msg-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.cell-wrap { overflow-wrap: anywhere; display: inline-block; max-width: 22ch; }
.row.nowrap { flex-wrap: nowrap; }
/* Newsquelle: Zeile 1 = Schalter · Name · Entfernen, Zeile 2 = Bereich · Adresse (passt in jede Kachelbreite) */
.feed-row { display: grid; grid-template-columns: auto minmax(7rem, 9rem) minmax(0, 1fr) auto; grid-template-areas: "on name name del" "sec sec url url"; gap: var(--sp-2); align-items: center; padding-block: var(--sp-2); border-bottom: 1px solid var(--line); }
.feed-row > :nth-child(1) { grid-area: on; margin: 0; }
.feed-row > :nth-child(2) { grid-area: name; }
.feed-row > :nth-child(3) { grid-area: sec; }
.feed-row > :nth-child(4) { grid-area: url; }
.feed-row > :nth-child(5) { grid-area: del; }
.warn-tag { background: color-mix(in srgb, var(--warn) 22%, transparent); color: var(--text); }
.err-card { max-width: 860px; }
.err-card h2 { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.err-code { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: .85em; padding: .1rem .45rem; border-radius: 6px; background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--text); }
.err-kv { margin-bottom: .6rem; }
.err-sub { font-size: .9rem; margin: .4rem 0 .2rem; }
.err-steps { margin: 0; padding-left: 1.3rem; display: grid; gap: .25rem; }
.err-pattern { display: block; overflow-x: auto; white-space: pre; padding: .4rem; background: var(--panel-2); border-radius: 6px; }
.contact-msg { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--panel-2); border-radius: var(--radius-btn); padding: var(--sp-3); margin: var(--sp-2) 0; }
.contact-msg.reply-msg { border-left: 3px solid var(--accent); }
.inbox-list li { align-items: flex-start; gap: var(--sp-2); }
.inbox-list li.inbox-new .title { font-weight: 700; }

/* Kontextmenue (PC) und ActionSheet (Handy) */
.ctx-menu { position: fixed; z-index: 70; min-width: 220px; max-width: min(320px, calc(100vw - 16px)); padding: 5px; border-radius: 12px; background: var(--bar); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--shadow), 0 0 0 1px var(--line); display: flex; flex-direction: column; animation: fade-in 120ms var(--ease-out); }
.ctx-item { display: flex; align-items: center; width: 100%; min-height: 32px; padding: .35rem .7rem; border: none; border-radius: 7px; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.ctx-menu .ctx-item:is(:hover, :focus-visible) { background: var(--accent); color: var(--on-accent); outline: none; }
.ctx-item:disabled { opacity: .45; cursor: default; }
.ctx-danger { color: var(--danger); }
.action-backdrop { position: fixed; inset: 0; z-index: 70; background: rgba(0, 0, 0, .4); display: flex; align-items: flex-end; justify-content: center; padding: 0 8px calc(8px + env(safe-area-inset-bottom, 0px)); animation: fade-in var(--dur) var(--ease-out); }
.action-sheet { width: min(100%, 440px); display: flex; flex-direction: column; gap: 8px; animation: sheet-in var(--dur) var(--ease-spring); }
.action-group { background: var(--bar); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-radius: 14px; overflow: hidden; }
.action-title { padding: .7rem 1rem; text-align: center; color: var(--muted); font-size: var(--fs-footnote); border-bottom: 1px solid var(--line); }
.action-sheet .ctx-item { justify-content: center; min-height: 56px; font-size: 20px; border-radius: 0; color: var(--accent); border-bottom: 1px solid var(--line); }
.action-sheet .action-group .ctx-item:last-child { border-bottom: none; }
.action-sheet .ctx-danger { color: var(--danger); }
.action-sheet .action-cancel { background: var(--panel); border-radius: 14px; border: none; font-weight: 600; }
.action-sheet .ctx-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (pointer: coarse) { .has-actions { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } }
.view.swipe-back { transition: none; }

/* Tippziele mind. 44 x 44 px auf Touch-Geraeten (auch im Kompakt-Modus) */
@media (pointer: coarse) {
  .btn, body.dense .btn, .btn-sm, body.dense .btn-sm, .btn-icon, body.dense .btn-icon, .input, .tab, .choice, .seg button { min-height: var(--touch); }
  .btn-icon, body.dense .btn-icon, .menu-btn, .search-btn, .collapse-btn, body.dense .collapse-btn { min-width: var(--touch); min-height: var(--touch); }
  .menu-btn, .search-btn { width: var(--touch); height: var(--touch); }
}

/* Sicherungs-Erinnerung auf "Heute" (siehe DESIGN.md, Erinnerungskarte) */
.backup-reminder { border: 1.5px solid color-mix(in srgb, var(--warn) 55%, var(--line)); background: color-mix(in srgb, var(--warn) 9%, var(--panel)); }
.backup-reminder h2 { font-size: var(--fs-callout, 1rem); margin: 0 0 .35rem; }
.backup-reminder p { margin: 0 0 .6rem; }
/* Registrierung: freiwillige Herkunftsangabe */
.reg-origin summary { cursor: pointer; color: var(--muted); font-size: .9rem; padding: .25rem 0; }
.reg-origin[open] summary { margin-bottom: .5rem; }
/* Admin: neue Konten je Woche (Balken, Skala = höchste Woche) */
.usage-weeks { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .4rem; align-items: end; height: 110px; margin: .25rem 0 .5rem; }
.usage-week { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: .2rem; font-variant-numeric: tabular-nums; }
.usage-bar { width: 100%; max-width: 36px; background: var(--accent); border-radius: 6px 6px 2px 2px; display: block; }
.usage-week small { color: var(--muted); font-size: .75rem; }
.code-row .input { flex: 1 1 160px; }