/* Vera App. Farben und Schriften aus DESIGNVORLAGE_tagesblick.html, Maße für den Daumen. */
:root {
  --ground:#F2ECE0; --card:#FBF7EF; --card-hi:#FFFFFF; --line:#DFD4C0; --line-soft:#EBE3D4;
  --ink:#2A2219; --ink-soft:#5E5346; --ink-faint:#8B8072;
  --brand:#7A4E22; --brand-soft:#EDE0CC;
  --crit:#A8342A; --crit-bg:#F6E4E0; --warn:#8A5E12; --warn-bg:#F7EDD8;
  --wait:#6B6152; --wait-bg:#EEE8DC; --good:#4A6B3C; --good-bg:#E8EEE0;
  --shadow:0 1px 2px rgba(42,34,25,.06),0 4px 14px rgba(42,34,25,.05);
  --radius:8px; --knopf:52px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --ground:#221C15; --card:#2C251C; --card-hi:#342C22; --line:#423728; --line-soft:#332B21;
  --ink:#F2EADB; --ink-soft:#B6AB98; --ink-faint:#877D6D;
  --brand:#C9A063; --brand-soft:#33291C;
  --crit:#E8837A; --crit-bg:#382019; --warn:#DFAB59; --warn-bg:#362A16;
  --wait:#B6AB98; --wait-bg:#2F2820; --good:#93B87F; --good-bg:#232C1C;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 4px 16px rgba(0,0,0,.28);
} }
:root[data-theme="dark"] {
  --ground:#221C15; --card:#2C251C; --card-hi:#342C22; --line:#423728; --line-soft:#332B21;
  --ink:#F2EADB; --ink-soft:#B6AB98; --ink-faint:#877D6D;
  --brand:#C9A063; --brand-soft:#33291C;
  --crit:#E8837A; --crit-bg:#382019; --warn:#DFAB59; --warn-bg:#362A16;
  --wait:#B6AB98; --wait-bg:#2F2820; --good:#93B87F; --good-bg:#232C1C;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 4px 16px rgba(0,0,0,.28);
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--ground); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  font-size:17px; line-height:1.45; -webkit-font-smoothing:antialiased;
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
}
button, input, select, textarea { font:inherit; color:inherit; }
button { cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
:focus-visible { outline:3px solid var(--brand); outline-offset:2px; border-radius:4px; }
.cond { font-family:inherit; }
.zahl { font-variant-numeric:tabular-nums; }
[hidden] { display:none !important; }

.wrap { max-width:880px; margin:0 auto; padding:16px 16px 24px; padding-top:calc(14px + env(safe-area-inset-top)); display:flex; flex-direction:column; gap:22px; }

/* Kopf */
.kopf { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px 24px; padding-bottom:14px; border-bottom:3px solid var(--brand); }
.kopf .datum { font-family:inherit; font-weight:600; font-size:15px; color:var(--brand); text-transform:uppercase; letter-spacing:.14em; margin:0 0 2px; }
.kopf h1 { font-family:inherit; font-weight:800; font-size:clamp(34px,8vw,44px); line-height:1; margin:0; letter-spacing:-.02em; }
.kennzahlen { display:flex; gap:22px; }
.kennzahl { display:flex; flex-direction:column; min-width:64px; }
.kennzahl .zahl { font-family:inherit; font-weight:700; font-size:30px; line-height:1; letter-spacing:-.02em; }
.kennzahl.ist-kritisch .zahl { color:var(--crit); }
.kennzahl .bez { font-family:inherit; font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.11em; color:var(--ink-faint); margin-top:4px; }

/* Hinweise oben */
.hinweis { display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:var(--radius); border:1px solid var(--crit); border-left-width:6px; background:var(--crit-bg); color:var(--crit); font-family:inherit; font-weight:700; font-size:18px; line-height:1.25; }
.hinweis .betrag { font-size:24px; white-space:nowrap; }
.hinweis small { display:block; font-family:inherit; font-weight:500; font-size:14px; color:var(--ink-soft); margin-top:2px; }
.hinweis.ruhig { border-color:var(--wait); background:var(--wait-bg); color:var(--wait); }

/* Block */
.block { display:flex; flex-direction:column; gap:10px; }
.block-kopf { display:flex; align-items:baseline; gap:11px; }
.block-kopf h2 { font-family:inherit; font-weight:700; font-size:21px; line-height:1.1; letter-spacing:-.01em; margin:0; }
.block-kopf .anzahl { font-family:inherit; font-weight:600; font-size:13px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-faint); }
.block-kopf .rechts { margin-left:auto; }
.block.dringend .block-kopf h2 { color:var(--crit); font-size:23px; }
.block.warte .block-kopf h2 { color:var(--warn); }
.leer { color:var(--ink-faint); font-size:15px; padding:4px 2px; }

/* Eintrag */
.liste { display:flex; flex-direction:column; gap:9px; }
.eintrag { background:var(--card); border:1px solid var(--line); border-left:5px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); display:grid; grid-template-columns:1fr auto; align-items:stretch; overflow:hidden; }
.eintrag.stufe-krit { border-left-color:var(--crit); }
.eintrag.stufe-warn { border-left-color:var(--warn); }
.eintrag.stufe-wait { border-left-color:var(--wait); }
.eintrag.stufe-good { border-left-color:var(--good); }
.eintrag .inhalt { padding:13px 14px 12px 15px; text-align:left; background:none; border:0; min-width:0; display:flex; flex-direction:column; gap:5px; color:inherit; }
.eintrag .titel { font-family:inherit; font-weight:600; font-size:18px; line-height:1.25; letter-spacing:-.01em; overflow-wrap:anywhere; }
.eintrag .zeile { display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; }
.eintrag .betrieb { font-family:inherit; font-weight:600; font-size:13.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--brand); }
.eintrag .betrag { font-family:inherit; font-weight:700; font-size:18px; line-height:1; white-space:nowrap; }
.frist { font-family:inherit; font-size:13px; font-weight:600; padding:3px 9px; border-radius:5px; white-space:nowrap; }
.frist.krit { background:var(--crit-bg); color:var(--crit); }
.frist.warn { background:var(--warn-bg); color:var(--warn); }
.frist.wait { background:var(--wait-bg); color:var(--wait); }
.frist.good { background:var(--good-bg); color:var(--good); }
.eintrag .notiz { font-size:15px; color:var(--ink-soft); }
.eintrag .knopf { border:0; border-left:1px solid var(--line-soft); background:var(--card-hi); color:var(--brand); font-family:inherit; font-weight:600; font-size:15px; min-width:92px; padding:0 14px; display:flex; align-items:center; justify-content:center; }
.eintrag .knopf:active { background:var(--brand-soft); }
.eintrag .knopf.fertig { color:var(--good); }
.eintrag .knopf.krit { color:var(--crit); }
.eintrag .knopf-spalte { display:flex; flex-direction:column; border-left:1px solid var(--line-soft); }
.eintrag .knopf-spalte .knopf { border-left:0; flex:1; min-height:var(--knopf); }
.eintrag .knopf-spalte .knopf + .knopf { border-top:1px solid var(--line-soft); }
.eintrag.erledigt-lokal .titel { text-decoration:line-through; color:var(--ink-faint); }

/* Entwurf */
.entwurf .text { white-space:pre-wrap; font-size:15px; line-height:1.45; color:var(--ink-soft); max-height:4.4em; overflow:hidden; position:relative; }
.entwurf .text.offen { max-height:none; }
.entwurf .text:not(.offen)::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1.6em; background:linear-gradient(transparent,var(--card)); }
.entwurf .kopfzeile { font-size:15px; color:var(--ink-soft); }
.entwurf .kopfzeile b { color:var(--ink); font-weight:600; }

/* Finanzen */
.finanz { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:14px 16px; display:flex; flex-direction:column; gap:12px; }
.finanz .konto { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.finanz .konto .wert { font-family:inherit; font-weight:700; font-size:32px; line-height:1; letter-spacing:-.02em; }
.finanz .konto .wert.minus { color:var(--crit); }
.finanz .konto .bez { font-family:inherit; font-weight:600; font-size:13px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-faint); }
.finanz h3 { font-family:inherit; font-weight:600; font-size:14px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-faint); margin:0 0 6px; }
.finanz table { width:100%; border-collapse:collapse; font-size:16px; }
.finanz td { padding:7px 0; border-top:1px solid var(--line-soft); vertical-align:top; }
.finanz td.betrag { text-align:right; white-space:nowrap; font-family:inherit; font-weight:700; font-size:19px; }
.finanz td.wann { color:var(--ink-faint); white-space:nowrap; padding-left:10px; font-size:14px; }
.finanz tr.summe td { border-top:2px solid var(--line); font-weight:600; }

/* Erinnerungen */
.erinnerung .wann { font-family:inherit; font-weight:600; font-size:14px; color:var(--ink-soft); }
.erinnerung.faellig { border-left-color:var(--warn); }
.erinnerung.faellig .wann { color:var(--warn); }
.formular { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:14px; display:grid; gap:10px; grid-template-columns:1fr 1fr; }
.formular .voll { grid-column:1 / -1; }
.formular label { display:flex; flex-direction:column; gap:4px; font-family:inherit; font-weight:600; font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); }
.formular input, .formular select, .formular textarea { width:100%; min-height:48px; padding:10px 12px; border:1px solid var(--line); border-radius:6px; background:var(--card-hi); color:var(--ink); font-size:17px; font-family:inherit; }
.formular textarea { min-height:72px; resize:vertical; }
.formular .aktionen { display:flex; gap:10px; }

/* Große Knöpfe */
.gross { min-height:var(--knopf); padding:0 20px; border-radius:var(--radius); border:1px solid var(--brand); background:var(--brand); color:#FFF8EC; font-family:inherit; font-weight:600; font-size:17px; display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.gross.zweit { background:var(--card); color:var(--brand); }
.gross.krit { background:var(--crit); border-color:var(--crit); color:#FFF; }
.gross:disabled { opacity:.5; cursor:default; }
.gross.breit { width:100%; }

/* Erledigt */
details.erledigt { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:0 16px; }
details.erledigt summary { cursor:pointer; min-height:var(--knopf); display:flex; align-items:center; gap:10px; font-family:inherit; font-weight:600; font-size:17px; color:var(--ink-soft); list-style:none; }
details.erledigt summary::-webkit-details-marker { display:none; }
details.erledigt summary::before { content:""; width:0; height:0; border-left:7px solid var(--ink-faint); border-top:5px solid transparent; border-bottom:5px solid transparent; transition:transform .18s ease; }
details.erledigt[open] summary::before { transform:rotate(90deg); }
details.erledigt .liste { padding:4px 0 14px; }

/* Fuß und Leiste */
.fuss { font-size:13px; color:var(--ink-faint); display:flex; flex-wrap:wrap; gap:4px 16px; border-top:1px solid var(--line); padding-top:12px; }
.fuss button { background:none; border:0; color:var(--ink-faint); text-decoration:underline; padding:8px 0; min-height:44px; font-size:13px; }
.leiste { position:fixed; left:0; right:0; bottom:0; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:color-mix(in srgb,var(--ground) 92%,transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-top:1px solid var(--line); display:flex; gap:10px; justify-content:center; z-index:5; }
.leiste .gross { flex:1; max-width:440px; }
.leiste .rund { width:var(--knopf); height:var(--knopf); border-radius:50%; padding:0; flex:none; font-size:22px; }

/* Blatt (Detail) */
.schleier { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:20; display:flex; align-items:flex-end; justify-content:center; }
.blatt { background:var(--card); color:var(--ink); width:100%; max-width:640px; max-height:92vh; overflow:auto; border-radius:14px 14px 0 0; padding:18px 18px calc(18px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:14px; box-shadow:0 -6px 30px rgba(0,0,0,.3); }
.blatt h3 { font-family:inherit; font-weight:700; font-size:22px; line-height:1.2; margin:0; letter-spacing:-.01em; }
.blatt .meta { color:var(--ink-soft); display:flex; flex-wrap:wrap; gap:4px 12px; align-items:center; }
.blatt .notiz { font-size:16px; white-space:pre-wrap; }
.blatt .aktionen { display:grid; gap:10px; }
.blatt textarea { width:100%; min-height:88px; padding:10px 12px; border:1px solid var(--line); border-radius:6px; background:var(--card-hi); font-size:17px; }
.blatt .schliessen { position:sticky; top:0; align-self:flex-end; margin:-6px -6px -30px 0; width:44px; height:44px; border-radius:50%; border:0; background:var(--brand-soft); color:var(--brand); font-size:22px; z-index:1; }
.pdf-rahmen { width:100%; height:70vh; border:1px solid var(--line); border-radius:6px; background:#fff; }

.meldung { position:fixed; left:50%; bottom:calc(84px + env(safe-area-inset-bottom)); transform:translateX(-50%); background:var(--ink); color:var(--ground); padding:12px 18px; border-radius:8px; font-weight:600; z-index:30; box-shadow:var(--shadow); max-width:90vw; }

@media (max-width:560px) {
  .kopf { align-items:flex-start; }
  .kennzahlen { width:100%; justify-content:space-between; gap:12px; }
  .kennzahl .zahl { font-size:32px; }
  .eintrag .knopf { min-width:78px; padding:0 10px; font-size:15px; }
  .formular { grid-template-columns:1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { transition:none !important; animation:none !important; } }

/* Begrüßung von Vera */
.vera { background:var(--card); border:1px solid var(--line); border-left:5px solid var(--brand); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px 16px 14px; display:flex; flex-direction:column; gap:12px; }
.vera .wer { font-size:13px; font-weight:600; color:var(--brand); text-transform:uppercase; letter-spacing:.08em; }
.vera .text { font-size:18px; line-height:1.4; }
.vera .text b { font-weight:600; }
.vera .frage { display:flex; gap:8px; }
.vera .frage input { flex:1; min-height:48px; padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius); background:var(--card-hi); color:var(--ink); font-size:17px; }
.vera .frage button { min-height:48px; padding:0 16px; border-radius:var(--radius); border:0; background:var(--brand); color:#FFF8EC; font-weight:600; font-size:16px; }

/* Schalter Alles, Geschäftlich, Privat */
.schalter { display:flex; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:3px; gap:3px; }
.schalter button { flex:1; min-height:44px; border:0; border-radius:6px; background:transparent; color:var(--ink-soft); font-weight:600; font-size:15px; }
.schalter button[aria-pressed="true"] { background:var(--brand); color:#FFF8EC; }

/* Leiste mit Reitern */
.leiste .reiter { flex:1; max-width:220px; min-height:var(--knopf); border-radius:var(--radius); border:1px solid var(--line); background:var(--card); color:var(--ink-soft); font-weight:600; font-size:16px; display:inline-flex; align-items:center; justify-content:center; gap:8px; position:relative; }
.leiste .reiter[aria-selected="true"] { color:var(--brand); border-color:var(--brand); }
.leiste .reiter .punkt { min-width:22px; height:22px; padding:0 6px; border-radius:11px; background:var(--crit); color:#fff; font-size:13px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; }

/* Nachrichten */
.nachricht { background:var(--card); border:1px solid var(--line); border-left:5px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:13px 15px; display:flex; flex-direction:column; gap:5px; text-align:left; width:100%; color:inherit; }
.nachricht.neu { border-left-color:var(--brand); }
.nachricht .wann { font-size:13px; color:var(--ink-faint); display:flex; gap:10px; }
.nachricht .titel { font-weight:600; font-size:17px; line-height:1.3; }
.nachricht .vorschau { font-size:15px; color:var(--ink-soft); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; white-space:pre-line; }
.bericht { font-size:15px; line-height:1.5; }
.bericht h1, .bericht h2, .bericht h3 { font-size:17px; margin:14px 0 6px; line-height:1.3; }
.bericht h1 { font-size:20px; }
.bericht p { margin:8px 0; }
.bericht table { width:100%; border-collapse:collapse; font-size:14px; margin:8px 0; display:block; overflow-x:auto; }
.bericht th, .bericht td { text-align:left; vertical-align:top; padding:6px 8px; border-bottom:1px solid var(--line-soft); min-width:90px; }
.bericht th { color:var(--ink-faint); font-weight:600; }
.bericht ul { padding-left:20px; }
.bericht .tzeile { border:1px solid var(--line); border-radius:6px; padding:10px 12px; margin:8px 0; display:flex; flex-direction:column; gap:6px; background:var(--card-hi); }
.bericht .tzeile > div { font-size:15px; line-height:1.4; }
.bericht .tzeile .tk { display:block; font-size:12px; font-weight:600; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.06em; }