/* Assist – Oberfläche auf Shoelace-Tokens, Diagrammfarben aus der geprüften Palette */
:root, .sl-theme-light {
  --bg: var(--sl-color-neutral-50);
  --panel: var(--sl-color-neutral-0);
  --text: var(--sl-color-neutral-900);
  --text2: var(--sl-color-neutral-600);
  --muted: var(--sl-color-neutral-500);
  --border: var(--sl-color-neutral-200);
  --grid: #e1e0d9; --axis: #c3c2b7;
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100; --s7: #6250d6;
  --good: #0ca30c; --good-text: #006300; --warn: #fab219; --serious: #ec835a; --critical: #d03b3b;
  --beruflich: #2a78d6; --privat: #1baf7a;
  --schatten: 0 1px 2px rgba(0,0,0,.05), 0 6px 20px -8px rgba(0,0,0,.12);
  --sl-color-primary-50:  #e8f1fb; --sl-color-primary-100: #cde2fb; --sl-color-primary-200: #9ec5f4;
  --sl-color-primary-300: #6da7ec; --sl-color-primary-400: #3987e5; --sl-color-primary-500: #2a78d6;
  --sl-color-primary-600: #256abf; --sl-color-primary-700: #1c5cab; --sl-color-primary-800: #184f95;
  --sl-color-primary-900: #104281; --sl-color-primary-950: #0d366b;
  --sl-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --sl-border-radius-medium: 10px;
}
.sl-theme-dark {
  --bg: #0f0f0f;
  --panel: #1a1a19;
  --grid: #2c2c2a; --axis: #383835;
  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s7: #9085e9;
  --good-text: #0ca30c;
  --beruflich: #3987e5; --privat: #199e70;
  --schatten: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -8px rgba(0,0,0,.6);
  --sl-color-neutral-0: #1a1a19;
  --sl-color-neutral-50: #0f0f0f;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--text);
  font: 15px/1.45 var(--sl-font-sans);
  min-height: 100vh; display: flex; flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--sl-color-primary-600); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font: 13px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--sl-color-neutral-100); border-radius: 4px; padding: 0 4px; }
.muted { color: var(--muted); }
.klein { font-size: 13px; }
.tab-num { font-variant-numeric: tabular-nums; }

/* Kopf */
.kopf {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 16px; border-bottom: 1px solid var(--border); background: var(--panel);
  position: sticky; top: 0; z-index: 20; padding-top: max(8px, env(safe-area-inset-top));
}
.marke { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 18px; color: var(--text); }
.marke sl-icon { font-size: 22px; color: var(--sl-color-primary-600); }
.marke:hover { text-decoration: none; }
.kopf-datum { color: var(--text2); flex: 1; font-size: 14px; }
.menues { display: flex; align-items: center; gap: 6px; }
.menue-knopf::part(base) { font-weight: 600; border-left-width: 4px; }
.menue-knopf.beruflich::part(base) { border-left-color: var(--beruflich); }
.menue-knopf.privat::part(base) { border-left-color: var(--privat); }
.menues sl-icon-button { font-size: 20px; }
.menue-badge { margin-left: 8px; }
@media (max-width: 640px) {
  .kopf { padding: 8px 10px; gap: 6px; flex-wrap: nowrap; }
  .kopf-datum { display: none; }
  .menues { flex: 1; justify-content: flex-end; gap: 4px; min-width: 0; }
  .menue-text { display: none; }           /* nur Symbol, Text steht im Menü */
  .menue-knopf::part(base) { padding-inline: 10px; }
  .menue-knopf::part(prefix) { margin-inline-end: 0; }
  .menues sl-icon-button { font-size: 18px; }
  .menues sl-icon-button::part(base) { padding: 6px; }
  .marke span { display: none; }           /* Logo reicht, spart Platz */
}
.drawer-inhalt { display: flex; flex-direction: column; gap: 16px; }

/* Inhalt */
.inhalt { flex: 1; padding: 16px; max-width: 1400px; width: 100%; margin: 0 auto; }
@media (max-width: 640px) { .inhalt { padding: 12px 10px; } }
.fuss { padding: 8px 16px; font-size: 12px; color: var(--muted); border-top: 1px solid var(--border); min-height: 32px; }
.seitenkopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.seitenkopf h1 { font-size: 22px; margin: 0; letter-spacing: -.01em; }
.seitenkopf .muted { flex: 1 1 260px; font-size: 13px; }
h2 { font-size: 16px; margin: 0; }
.abschnitt { font-size: 12px; font-weight: 600; margin: 14px 0 6px; color: var(--text2); text-transform: uppercase; letter-spacing: .06em; display: flex; align-items: center; gap: 8px; }
.abschnitt:first-child { margin-top: 0; }
.lade { display: flex; align-items: center; gap: 10px; color: var(--muted); padding: 20px 0; }
.skelett { display: grid; gap: 12px; }
.skelett sl-skeleton { --border-radius: 10px; }

.spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.spalten.eine { grid-template-columns: 1fr; max-width: 920px; }
@media (max-width: 920px) { .spalten { grid-template-columns: 1fr; } }
.spalte { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.karte { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; box-shadow: var(--schatten); }
.karte.beruflich { border-top: 4px solid var(--beruflich); }
.karte.privat { border-top: 4px solid var(--privat); }
.karte-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.karte-kopf h2 { flex: 1; font-size: 18px; }
.status-zeile { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.status-zeile sl-badge::part(base) { font-weight: 500; }

ul.liste { list-style: none; margin: 0; padding: 0; }
ul.liste li { padding: 6px 0; border-bottom: 1px solid var(--border); display: flex; gap: 10px; align-items: baseline; }
ul.liste li:last-child { border-bottom: none; }
.datum-tag { font-variant-numeric: tabular-nums; color: var(--text2); min-width: 96px; font-size: 13px; flex-shrink: 0; }
.datum-tag.heute { color: var(--sl-color-primary-600); font-weight: 700; }
.faellig { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--text2); min-width: 60px; flex-shrink: 0; }
.faellig.alt { color: var(--critical); font-weight: 600; }
.faellig.heute { color: var(--sl-color-primary-600); font-weight: 700; }
.quelle { font-size: 12px; color: var(--muted); display: block; }
.prio { color: var(--serious); font-weight: 700; }
.leer { color: var(--muted); font-size: 13px; padding: 6px 0; }
.mehr { margin-top: 6px; }
.rechts { margin-left: auto; }
.aktion { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Rückfragen */
.rf-karte { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; margin-bottom: 12px; box-shadow: var(--schatten); }
.rf-karte.beantwortet { border-color: var(--good); }
.rf-kopf { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--text2); margin-bottom: 8px; }
.rf-kopf .nr { font-weight: 700; color: var(--text); font-size: 16px; }
.rf-text { margin: 0 0 6px; line-height: 1.5; }
.rf-bezug { font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.rf-antwort { display: flex; flex-direction: column; gap: 10px; }
.rf-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.rf-vorhanden::part(base) { font-size: 13px; }

/* Training */
.filter-zeile { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.filter-gruppe { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.filter-gruppe .label { font-size: 12px; color: var(--muted); }
.typ-schalter { display: inline-flex; align-items: center; gap: 6px; }
.typ-schalter .farbe { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.kachel { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; box-shadow: var(--schatten); position: relative; min-width: 0; }
.kachel .titel { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.kachel .wert { font-size: 26px; font-weight: 700; line-height: 1.15; margin: 2px 0; letter-spacing: -.01em; }
.kachel .einheit { font-size: 13px; font-weight: 400; color: var(--text2); margin-left: 3px; }
.kachel .delta { font-size: 12px; color: var(--text2); display: flex; align-items: center; gap: 3px; }
.kachel .delta.hoch { color: var(--good-text); }
.kachel .delta.runter { color: var(--critical); }
.kachel.gauge { display: grid; grid-template-columns: 1fr 86px; align-items: center; }
.kachel .mini-chart { width: 86px; height: 70px; }
.diagramme { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 14px; }
@media (min-width: 1000px) { .diagramme.zwei { grid-template-columns: 1fr 1fr; } }
.diagramm { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; box-shadow: var(--schatten); min-width: 0; }
.diagramm .d-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 2px; }
.diagramm .d-kopf h2 { flex: 1; font-size: 15px; }
.diagramm .d-sub { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.chart { width: 100%; height: 280px; }
.chart.hoch { height: 320px; }
.chart.flach { height: 190px; }
.chart.kalender { height: 210px; }

table.tab { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tab th, table.tab td { text-align: right; padding: 7px 8px; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; white-space: nowrap; }
table.tab th { color: var(--muted); font-weight: 600; font-size: 12px; position: sticky; top: 0; background: var(--panel); }
table.tab th:first-child, table.tab td:first-child { text-align: left; }
table.tab tr.summe td { font-weight: 700; border-top: 2px solid var(--axis); }
table.tab tbody tr:hover td { background: var(--sl-color-neutral-100); }
.tab-wrap { overflow-x: auto; }
.balken { display: inline-block; height: 8px; border-radius: 4px; background: var(--s1); vertical-align: middle; margin-left: 6px; opacity: .85; }

sl-details.monat { margin-bottom: 10px; }
sl-details.monat::part(base) { border-radius: 14px; box-shadow: var(--schatten); background: var(--panel); }
sl-details.monat::part(header) { padding: 10px 14px; }
sl-details.monat::part(content) { padding: 0 8px 8px; }
.monat-summary { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-weight: 600; }
.monat-summary .ms { font-weight: 400; color: var(--text2); font-size: 13px; }
sl-details.akt::part(base) { border: none; border-top: 1px solid var(--border); border-radius: 0; background: transparent; }
sl-details.akt::part(header) { padding: 8px 6px; }
sl-details.akt::part(content) { padding: 0 6px 14px 30px; }
.akt-summary { display: grid; grid-template-columns: 64px 12px 1fr repeat(4, 76px); gap: 8px; align-items: center; font-size: 14px; width: 100%; }
.akt-summary .typ { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.akt-summary .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.akt-summary .z { text-align: right; font-variant-numeric: tabular-nums; color: var(--text2); font-size: 13px; }
.akt-summary .d { font-variant-numeric: tabular-nums; color: var(--text2); font-size: 13px; }
@media (max-width: 760px) {
  .akt-summary { grid-template-columns: 56px 12px 1fr 70px 70px; }
  .akt-summary .z.optional { display: none; }
}
.akt-detail { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px 14px; font-size: 13px; }
.akt-detail .m .t { color: var(--muted); font-size: 11px; }
.akt-detail .m .w { font-weight: 600; font-variant-numeric: tabular-nums; font-size: 15px; }
.akt-detail .m .v { font-size: 11px; color: var(--text2); display: flex; align-items: center; gap: 2px; }
.akt-detail .m .v.hoch { color: var(--good-text); }
.akt-detail .m .v.runter { color: var(--critical); }
.akt-detail .breit { grid-column: 1 / -1; }
.akt-detail pre { white-space: pre-wrap; font: inherit; margin: 0; color: var(--text2); }

/* Aufträge, Bericht */
.eingabe { display: flex; flex-direction: column; gap: 10px; }
.md { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 12px 16px; font-size: 14px; line-height: 1.55; }
.md h3 { font-size: 14px; margin: 14px 0 4px; }
.md h3:first-child { margin-top: 0; }
.md ul { margin: 2px 0 6px; padding-left: 20px; }
.md li { margin: 2px 0; }
.md p { margin: 4px 0; }
sl-tab-group::part(body) { padding-top: 10px; }
.toast-stapel { position: fixed; bottom: 12px; right: 12px; z-index: 50; }

sl-tab .tab-icon { margin-right: 6px; font-size: 15px; vertical-align: -2px; }
sl-tab sl-badge { margin-left: 6px; }

/* Aufgaben mit Checkbox */
li.aufgabe sl-checkbox::part(label) { line-height: 1.4; }
li.aufgabe.erledigt sl-checkbox::part(label) { text-decoration: line-through; color: var(--muted); }
li.aufgabe.erledigt .faellig { color: var(--muted); font-weight: 400; }
li.aufgabe .quelle { padding-left: 26px; }
.liste li.aufgabe .faellig.alt { min-width: 60px; }

/* Aufgaben: Kästchen + Obsidian-Link, Formular */
.aufgabe-inhalt { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.aufgabe-zeile { display: flex; align-items: flex-start; gap: 8px; }
.aufgabe-zeile sl-checkbox { flex-shrink: 0; margin-top: 2px; }
a.aufgabe-text { color: var(--text); line-height: 1.4; }
a.aufgabe-text:hover { color: var(--sl-color-primary-600); text-decoration: none; }
li.aufgabe.erledigt a.aufgabe-text { text-decoration: line-through; color: var(--muted); }
li.aufgabe .quelle { padding-left: 26px; }
/* Neue Aufgabe: stille Zeile, Details erst beim Tippen */
.aufgabe-form { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.aufgabe-form .neu-text::part(base) { background: transparent; border: none; box-shadow: none; border-bottom: 1px dashed var(--border); border-radius: 0; }
.aufgabe-form .neu-text::part(base):hover { border-bottom-color: var(--axis); }
.aufgabe-form.aktiv .neu-text::part(base) { border-bottom: 1px solid var(--sl-color-primary-500); }
.aufgabe-form .neu-text::part(input) { padding-left: 4px; }
.aufgabe-form .neu-text::part(prefix) { color: var(--muted); font-size: 13px; }
.aufgabe-form.aktiv .neu-text::part(prefix) { color: var(--sl-color-primary-600); }
.aufgabe-form .zeile2 { display: none; gap: 8px; align-items: center; flex-wrap: wrap; padding-left: 4px; }
.aufgabe-form.aktiv .zeile2 { display: flex; }
.aufgabe-form .neu-datum { width: 160px; }
.aufgabe-form .neu-prio { width: 150px; }
.aufgabe-form .neu-datum::part(base), .aufgabe-form .neu-prio::part(combobox) { background: transparent; }
.aufgabe-form .neu-datum::part(prefix) { color: var(--muted); font-size: 13px; }
.aufgabe-form .neu-senden { margin-left: auto; }
@media (max-width: 480px) { .aufgabe-form .neu-datum, .aufgabe-form .neu-prio { flex: 1 1 120px; width: auto; } }

/* iPhone: kein Auto-Zoom beim Tippen (Safari zoomt bei Schrift unter 16 px), keine Überbreite */
html, body { max-width: 100%; overflow-x: hidden; }
.inhalt, .karte, .rf-karte, .diagramm, .kachel { min-width: 0; }
code, .rf-text, .rf-bezug, .quelle, .md, ul.liste li { overflow-wrap: anywhere; }
@media (max-width: 760px) {
  sl-input::part(input), sl-textarea::part(textarea), sl-select::part(combobox), sl-select::part(display-input) { font-size: 16px; }
  .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
ul.liste li.outlook .datum-tag { min-width: 128px; }