/* ---------- Farben: Hell (Standard) ---------- */
:root {
  color-scheme: light;
  --bg: #f6f7fb;
  --verlauf: radial-gradient(1200px 700px at 8% -10%, #ffe9b8 0%, transparent 60%),
             radial-gradient(900px 600px at 105% 10%, #dbe8ff 0%, transparent 60%),
             radial-gradient(900px 700px at 60% 120%, #f1e3ff 0%, transparent 60%), #f7f8fc;
  --flaeche: rgba(255, 255, 255, .62);      /* Glas */
  --flaeche-stark: rgba(255, 255, 255, .82);
  --feld: rgba(255, 255, 255, .85);
  --glas-rand: rgba(255, 255, 255, .85);
  --text: #1d1d22;
  --leise: #6b6b76;
  --rand: rgba(20, 20, 40, .08);
  --honig: #f2a91c;
  --honig-dunkel: #b97705;
  --honig-hell: rgba(255, 196, 64, .2);
  --gruen: #30c45a;
  --rot: #ff3b30;
  --blau: #0a7aff;
  --lila: #a855f7;
  --orange: #ff9500;
  --grau: #8e8e93;
  --leiste: rgba(255, 255, 255, .55);
  --leiste-kachel: rgba(255, 255, 255, .55);
  --leiste-kachel-hover: rgba(255, 255, 255, .9);
  --leiste-text: #1d1d22;
  --leiste-trenner: rgba(20, 20, 40, .08);
  --radius: 16px;
  --schatten: 0 1px 1px rgba(16, 24, 40, .04), 0 8px 30px rgba(16, 24, 40, .07);
  --blur: blur(22px) saturate(170%);
}
/* ---------- Farben: Dunkel ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d0f17;
  --verlauf: radial-gradient(1100px 700px at 5% -10%, rgba(242, 169, 28, .22) 0%, transparent 60%),
             radial-gradient(900px 600px at 105% 5%, rgba(10, 122, 255, .2) 0%, transparent 60%),
             radial-gradient(900px 700px at 55% 120%, rgba(168, 85, 247, .18) 0%, transparent 60%), #0d0f17;
  --flaeche: rgba(36, 38, 52, .55);
  --flaeche-stark: rgba(36, 38, 52, .85);
  --feld: rgba(20, 22, 32, .7);
  --glas-rand: rgba(255, 255, 255, .09);
  --text: #f1f1f5;
  --leise: #a0a0ad;
  --rand: rgba(255, 255, 255, .08);
  --honig-hell: rgba(242, 169, 28, .18);
  --honig-dunkel: #f8c55a;
  --leiste: rgba(22, 24, 34, .6);
  --leiste-kachel: rgba(255, 255, 255, .05);
  --leiste-kachel-hover: rgba(255, 255, 255, .1);
  --leiste-text: #f1f1f5;
  --leiste-trenner: rgba(255, 255, 255, .08);
  --schatten: 0 8px 30px rgba(0, 0, 0, .35);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;
    --bg: #0d0f17;
    --verlauf: radial-gradient(1100px 700px at 5% -10%, rgba(242, 169, 28, .22) 0%, transparent 60%),
               radial-gradient(900px 600px at 105% 5%, rgba(10, 122, 255, .2) 0%, transparent 60%),
               radial-gradient(900px 700px at 55% 120%, rgba(168, 85, 247, .18) 0%, transparent 60%), #0d0f17;
    --flaeche: rgba(36, 38, 52, .55);
    --flaeche-stark: rgba(36, 38, 52, .85);
    --feld: rgba(20, 22, 32, .7);
    --glas-rand: rgba(255, 255, 255, .09);
    --text: #f1f1f5;
    --leise: #a0a0ad;
    --rand: rgba(255, 255, 255, .08);
    --honig-hell: rgba(242, 169, 28, .18);
    --honig-dunkel: #f8c55a;
    --leiste: rgba(22, 24, 34, .6);
    --leiste-kachel: rgba(255, 255, 255, .05);
    --leiste-kachel-hover: rgba(255, 255, 255, .1);
    --leiste-text: #f1f1f5;
    --leiste-trenner: rgba(255, 255, 255, .08);
    --schatten: 0 8px 30px rgba(0, 0, 0, .35);
  }
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { background: var(--verlauf); background-attachment: fixed; background-color: var(--bg); color: var(--text); font: 16px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif; min-height: 100vh; }

/* Glas für alle Flächen */
.karte, .liste > li, .hilfe-karte, .ios-liste, .immo-karte, .kachel, .hinweisbox, .grosser-knopf, .dokkarte,
.nachricht.biene, .faq details, .chip, button.leise, .leise-link, dialog {
  background: var(--flaeche);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--glas-rand);
  box-shadow: var(--schatten);
}
input, select, textarea { background: var(--feld) !important; }
code { font: 13px ui-monospace, Consolas, monospace; background: var(--honig-hell); padding: 1px 6px; border-radius: 6px; word-break: break-all; }
h1 { font-size: 32px; font-weight: 700; letter-spacing: -.02em; margin: 4px 0 2px; }
h2 { font-size: 17px; margin: 0; }
.unterzeile { color: var(--leise); margin: 0 0 20px; }
.klein { color: var(--leise); font-size: 13px; }
.leer { color: var(--leise); padding: 24px; text-align: center; }

/* ---------- Grundgerüst ---------- */
.rahmen { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }
main { padding: 28px 32px 48px; max-width: 980px; width: 100%; }
.seite { display: none; }
.seite.aktiv { display: block; animation: rein .18s ease-out; }
@keyframes rein { from { opacity: 0; transform: translateY(4px); } }

/* ---------- Seitenleiste ---------- */
.seitenleiste { background: var(--leiste); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-right: 1px solid var(--glas-rand); color: var(--leiste-text); padding: 18px 14px; position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.seitenleiste .marke { display: flex; gap: 12px; align-items: center; padding: 4px 6px 10px; }
.seitenleiste .marke img { width: 42px; height: 42px; filter: drop-shadow(0 4px 10px rgba(242, 140, 20, .35)); }
.seitenleiste .marke b { display: block; font-size: 18px; letter-spacing: -.01em; }
.seitenleiste .marke span { font-size: 12px; color: var(--leise); }
#navigation { display: flex; flex-direction: column; gap: 7px; }
#navigation a { display: flex; align-items: center; gap: 14px; padding: 11px 14px; border-radius: 14px; background: var(--leiste-kachel); color: var(--leiste-text); text-decoration: none; font-weight: 600; border: 1px solid var(--glas-rand); transition: background .15s, transform .1s; }
#navigation a svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
#navigation a:hover { background: var(--leiste-kachel-hover); }
#navigation a:active { transform: scale(.98); }
#navigation a.aktiv { background: linear-gradient(135deg, #ffc44d, #f28c14); color: #2a1700; border-color: rgba(255, 255, 255, .5); box-shadow: 0 6px 18px rgba(242, 140, 20, .35); }
#navigation .chevron { margin-left: auto; width: 16px; height: 16px; transition: transform .15s; }
#navigation a.aufklapp.offen .chevron { transform: rotate(90deg); }
.untermenue { display: none; flex-direction: column; gap: 7px; margin-left: 18px; padding-left: 14px; border-left: 1px solid var(--leiste-trenner); }
.untermenue.offen { display: flex; }
.untermenue a { font-weight: 500 !important; padding: 9px 12px !important; }
.trenner { height: 1px; background: var(--leiste-trenner); margin: 6px 4px; }
.design-wahl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 3px; border-radius: 12px; background: var(--leiste-kachel); border: 1px solid var(--glas-rand); margin-top: auto; }
.design-wahl button { background: transparent; color: var(--leise); font-size: 12px; font-weight: 600; padding: 7px 4px; border-radius: 9px; justify-content: center; border: 0; box-shadow: none; }
.design-wahl button.aktiv { background: var(--flaeche-stark); color: var(--text); box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
#status { font-size: 11px; color: var(--leise); padding: 0 6px; }
#status .warnung { color: var(--rot); }

/* ---------- Bedienelemente ---------- */
button, .aktionen a { font: inherit; font-weight: 600; border: 0; border-radius: 12px; padding: 10px 18px; background: var(--honig); color: #241a03; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
button:hover, .aktionen a:hover { filter: brightness(1.05); }
button:disabled { opacity: .5; cursor: default; }
button.leise, .leise-link { background: var(--flaeche) !important; color: var(--text) !important; border: 1px solid var(--rand); font-weight: 500 !important; }
input, select { font: inherit; padding: 12px 14px; border: 1px solid var(--rand); border-radius: 12px; background: var(--flaeche); color: var(--text); min-width: 0; }
input:focus, select:focus { outline: 2px solid var(--honig); outline-offset: -1px; }

.grosse-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grosser-knopf { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 26px 12px; border-radius: 20px; background: var(--flaeche); box-shadow: var(--schatten); font-weight: 600; font-size: 17px; cursor: pointer; text-align: center; border: 1px solid var(--rand); }
.grosser-knopf svg { width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.grosser-knopf.haupt { background: var(--honig); color: #241a03; border-color: transparent; }
#dropzone { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center; padding: 18px; border: 2px dashed var(--rand); border-radius: 16px; color: var(--leise); }
#dropzone.drueber { border-color: var(--honig); background: var(--honig-hell); color: var(--text); }

.kopfzeile { display: flex; justify-content: space-between; align-items: baseline; margin: 28px 0 10px; }
#warteschlange { color: var(--leise); font-size: 13px; }
.liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.liste > li { background: var(--flaeche); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--schatten); }
.zeile { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.titel { font-weight: 600; word-break: break-word; }
.meta { color: var(--leise); font-size: 13px; }
.marker { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 99px; white-space: nowrap; }
.marker.abgelegt { background: color-mix(in srgb, var(--gruen) 16%, transparent); color: #1f8a3d; }
.marker.pruefen, .marker.in_arbeit { background: var(--honig-hell); color: var(--honig-dunkel); }
.marker.fehler { background: color-mix(in srgb, var(--rot) 14%, transparent); color: var(--rot); }
.pfad { margin-top: 6px; }
.korrektur { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; margin-top: 10px; }
.aktionen { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.aktionen button, .aktionen a { padding: 7px 14px; font-size: 14px; }
.auszug { color: var(--leise); font-size: 13px; margin-top: 4px; }
.warnung { color: var(--rot); font-weight: 600; }

/* ---------- Biene ---------- */
#chat { display: flex; flex-direction: column; gap: 12px; min-height: 45vh; padding-bottom: 12px; }
.nachricht { max-width: 85%; padding: 10px 15px; border-radius: 20px; white-space: pre-wrap; word-break: break-word; }
.nachricht.biene { background: var(--flaeche); align-self: flex-start; border-bottom-left-radius: 6px; box-shadow: var(--schatten); }
.nachricht.ich { background: var(--honig); color: #241a03; align-self: flex-end; border-bottom-right-radius: 6px; }
.nachricht.denkt { color: var(--leise); font-style: italic; }
.nachricht .modell { margin-top: 6px; font-size: 11px; color: var(--leise); }
.nachricht .gemerkt { margin-top: 8px; padding: 6px 10px; border-radius: 10px; background: var(--honig-hell); font-size: 13px; }
dialog.gedaechtnis .ios-liste { max-height: 60vh; overflow: auto; }
.vorschlaege { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { background: var(--flaeche); color: var(--text); font-weight: 500; font-size: 14px; border: 1px solid var(--rand); border-radius: 99px; padding: 8px 14px; }
.gruendlicher { align-self: flex-start; font-size: 14px; }
#chat-form, #such-form { display: flex; gap: 8px; }
#chat-form { position: sticky; bottom: 0; background: var(--bg); padding: 12px 0; }
#chat-form input, #such-form input { flex: 1; }
#such-form { margin-bottom: 16px; }
.dokkarte { background: var(--flaeche); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--schatten); border-left: 4px solid var(--honig); }
.dok-name { font-weight: 600; word-break: break-word; }
.dok-hinweis { color: var(--leise); font-size: 13px; margin: 2px 0 6px; }

/* ---------- Hilfe ---------- */
.hilfe-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.hilfe-karte { background: var(--flaeche); border-radius: 20px; padding: 18px 20px; box-shadow: var(--schatten); }
.hilfe-karte h3 { margin: 10px 0 6px; font-size: 18px; }
.hilfe-karte ol, .hilfe-karte ul { margin: 0; padding-left: 20px; }
.hilfe-karte li { margin: 4px 0; }
.hilfe-karte p { margin: 4px 0; }
.hilfe-symbol { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; font-size: 26px; }
.hilfe-symbol.gelb { background: #fff4d6; } .hilfe-symbol.orange { background: #ffe8cc; } .hilfe-symbol.blau { background: #dcebff; }
.hilfe-symbol.gruen { background: #daf5e1; } .hilfe-symbol.lila { background: #f1e1fa; } .hilfe-symbol.grau { background: #ececf0; }
.farben { list-style: none; padding: 0 !important; }
.farben li { display: grid; grid-template-columns: 96px 1fr; gap: 10px; align-items: baseline; margin: 8px 0; }
.farben .marker { text-align: center; }
.ios-teilen { display: inline-block; border: 1px solid var(--rand); border-radius: 6px; padding: 0 5px; font-size: 13px; }
.abschnitt { margin: 30px 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--leise); font-weight: 600; }
.faq details { background: var(--flaeche); border-radius: 14px; margin-bottom: 8px; box-shadow: var(--schatten); }
.faq summary { padding: 14px 18px; font-weight: 600; cursor: pointer; list-style: none; }
.faq summary::after { content: '›'; float: right; color: var(--leise); transition: transform .15s; }
.faq details[open] summary::after { transform: rotate(90deg); }
.faq details p { margin: 0; padding: 0 18px 14px; color: var(--leise); }
.schritte { padding-left: 22px; } .schritte li { margin: 6px 0; }

/* ---------- iOS-Listen (Einstellungen) ---------- */
.ios-liste { background: var(--flaeche); border-radius: 14px; overflow: hidden; box-shadow: var(--schatten); }
.ios-zeile { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 16px; color: var(--text); text-decoration: none; background: none; border: 0; border-radius: 0; font-weight: 400; text-align: left; border-bottom: 1px solid var(--rand); min-height: 52px; }
.ios-zeile:last-child { border-bottom: 0; }
.ios-zeile:hover { filter: none; background: color-mix(in srgb, var(--text) 4%, transparent); }
.ios-zeile > span:nth-child(2) { flex: 1; }
.ios-zeile .wert { color: var(--leise); font-size: 15px; text-align: right; }
.ios-zeile .chevron { width: 16px; height: 16px; fill: none; stroke: var(--grau); stroke-width: 2; }
.ios-symbol { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: #fff; flex: none; }
.ios-symbol svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ios-symbol.blau { background: var(--blau); } .ios-symbol.gruen { background: var(--gruen); } .ios-symbol.orange { background: var(--orange); }
.ios-symbol.grau { background: var(--grau); } .ios-symbol.lila { background: var(--lila); } .ios-symbol.gelb { background: var(--honig); } .ios-symbol.rot { background: var(--rot); }
.ios-zeile .beschreibung { display: block; font-size: 13px; color: var(--leise); }
/* iOS-Schalter */
.schalter { position: relative; width: 51px; height: 31px; flex: none; }
.schalter input { opacity: 0; width: 0; height: 0; position: absolute; }
.schalter span { position: absolute; inset: 0; background: #e9e9eb; border-radius: 99px; transition: background .2s; cursor: pointer; }
.schalter span::before { content: ''; position: absolute; width: 27px; height: 27px; left: 2px; top: 2px; background: #fff; border-radius: 50%; box-shadow: 0 2px 4px rgba(0, 0, 0, .2); transition: transform .2s; }
.schalter input:checked + span { background: var(--gruen); }
.schalter input:checked + span::before { transform: translateX(20px); }
:root[data-theme="dark"] .schalter span { background: #39393d; }

/* ---------- Umzug ---------- */
.hinweisbox { background: var(--flaeche); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 12px; box-shadow: var(--schatten); border-left: 4px solid var(--honig); }
.hinweisbox ol { margin: 6px 0; padding-left: 20px; }
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 14px 0; }
.kachel { background: var(--flaeche); border-radius: 12px; padding: 10px 12px; box-shadow: var(--schatten); }
.kachel b { display: block; font-size: 20px; }
.kachel span { color: var(--leise); font-size: 12px; word-break: break-word; }
.umzug-filter { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 6px; }
.umzug-filter input { flex: 1; min-width: 200px; }
.umzug-zeile .alt { font-size: 13px; color: var(--leise); word-break: break-all; }
.umzug-zeile .korrektur { grid-template-columns: 2fr 1fr auto auto; }

/* ---------- Vorschau ---------- */
dialog { width: min(1000px, 96vw); height: 92vh; border: 0; border-radius: 18px; padding: 0; background: var(--flaeche); color: var(--text); }
dialog[open] { display: flex; flex-direction: column; }
dialog::backdrop { background: rgba(0, 0, 0, .45); }
.vorschau-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--rand); }
#vorschau-frame { flex: 1; border: 0; width: 100%; background: #fff; }

/* ---------- iPhone: Leiste unten ---------- */
@media (max-width: 760px) {
  .rahmen { display: block; }
  main { padding: 16px 16px calc(96px + env(safe-area-inset-bottom)); }
  h1 { font-size: 30px; }
  .seitenleiste { position: fixed; inset: auto 0 0 0; height: auto; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); flex-direction: row; z-index: 10; background: color-mix(in srgb, var(--flaeche) 88%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 1px solid var(--rand); overflow: visible; }
  .seitenleiste .marke, .nur-gross { display: none !important; }
  #navigation { flex-direction: row; justify-content: space-around; width: 100%; gap: 0; }
  #navigation a { flex-direction: column; gap: 2px; background: none; border: 0; padding: 6px 2px; font-size: 10px; font-weight: 500; color: var(--grau); flex: 1; min-width: 0; }
  #navigation a:hover { background: none; }
  #navigation a.aktiv { background: none; color: var(--honig-dunkel); }
  #navigation a svg { width: 26px; height: 26px; }
  #navigation .chevron { display: none; }
  .korrektur, .umzug-zeile .korrektur { grid-template-columns: 1fr; }
  .nachricht { max-width: 100%; }
  #chat-form { bottom: calc(64px + env(safe-area-inset-bottom)); }
  .hilfe-karten { grid-template-columns: 1fr; }
}

/* ---------- Immobilien ---------- */
.karte { background: var(--flaeche); border-radius: 18px; padding: 16px 18px; box-shadow: var(--schatten); margin-bottom: 14px; }
.karte h3 { margin: 0 0 10px; font-size: 18px; }
.immo-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.immo-zahlen { display: flex; gap: 22px; flex-wrap: wrap; margin: 10px 0; }
.immo-zahlen b { font-size: 20px; }
.immo-zahlen span { color: var(--leise); font-size: 14px; }
.immo-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.immo-karte { display: flex; flex-direction: column; gap: 4px; background: var(--flaeche); border-radius: 18px; padding: 16px 18px; box-shadow: var(--schatten); color: var(--text); text-decoration: none; }
.immo-karte b { font-size: 17px; }
.immo-karte:hover { outline: 2px solid var(--honig); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.frist-chip { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 99px; border: 1px solid transparent; white-space: nowrap; }
.frist-chip.fehlt { border: 1px dashed var(--orange); color: #c26a00; background: transparent; }
.frist-chip.ueberfaellig { background: color-mix(in srgb, var(--rot) 14%, transparent); color: var(--rot); }
.frist-chip.bald { background: var(--honig-hell); color: var(--honig-dunkel); }
.frist-chip.ok { background: color-mix(in srgb, var(--gruen) 16%, transparent); color: #1f8a3d; }
.zurueck { color: var(--blau); text-decoration: none; font-weight: 500; }
.objekt-titel { font-size: 24px; margin: 8px 0 2px; }
.immo-drop { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; margin-bottom: 14px; border: 2px dashed var(--rand); border-radius: 18px; cursor: pointer; color: var(--leise); }
.immo-drop b { color: var(--text); }
.immo-drop.drueber { border-color: var(--honig); background: var(--honig-hell); }
.unterkarte { border-top: 1px solid var(--rand); padding: 12px 0; }
.unterkarte:first-of-type { border-top: 0; }
.mieter { margin: 6px 0; }
.werte { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin: 8px 0; }
.werte span { display: block; font-size: 12px; }
.miet-raster { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; margin: 8px 0; }
.monat { padding: 8px 0; font-size: 12px; font-weight: 600; border-radius: 8px; justify-content: center; background: var(--bg); color: var(--leise); }
.monat.bezahlt { background: color-mix(in srgb, var(--gruen) 22%, transparent); color: #1f8a3d; }
.monat.offen { background: color-mix(in srgb, var(--rot) 16%, transparent); color: var(--rot); }
.monat.aktuell { background: var(--honig-hell); color: var(--honig-dunkel); }
.monat.na { opacity: .35; }
.klein-knopf { padding: 5px 12px !important; font-size: 13px !important; }
.frist-liste { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.frist-liste li { display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center; }
.frist-liste input { padding: 6px 8px; }
.dok-gruppe { margin-top: 8px; }
.dok-gruppe summary { cursor: pointer; font-weight: 600; padding: 6px 0; }
.dok-gruppe ul { margin: 4px 0 8px; padding-left: 18px; }
.dok-gruppe a { color: var(--blau); text-decoration: none; word-break: break-word; }
.log-liste { list-style: none; padding: 0; margin: 0; }
.log-liste li { padding: 4px 0; border-bottom: 1px solid var(--rand); }
dialog.formular { height: auto; max-height: 92vh; width: min(520px, 96vw); overflow: auto; }
dialog.formular form { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
dialog.formular h2 { font-size: 20px; margin-bottom: 4px; }
.feld { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--leise); }
.feld.haken { flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 10px; color: var(--text); }
.feld input:not([type=checkbox]), .feld select, .feld textarea { font: inherit; color: var(--text); padding: 10px 12px; border: 1px solid var(--rand); border-radius: 10px; background: var(--bg); }
@media (max-width: 760px) {
  .miet-raster { grid-template-columns: repeat(6, 1fr); }
  .frist-liste li { grid-template-columns: 1fr 1fr; }
}

/* ---------- Glas-Feinschliff ---------- */
dialog { background: var(--flaeche-stark); }
.design-wahl.gross { margin: 0 0 6px; max-width: 420px; background: var(--flaeche); }
.design-wahl.gross button { font-size: 14px; padding: 10px; }
.grosser-knopf.haupt { background: linear-gradient(135deg, #ffc44d, #f28c14); border-color: rgba(255, 255, 255, .5); box-shadow: 0 10px 26px rgba(242, 140, 20, .3); }
button:not(.leise):not(.chip):not(.monat):not(.ios-zeile):not([data-design]):not(.sk-ed button) { background: linear-gradient(135deg, #ffc44d, #f28c14); color: #2a1700; box-shadow: 0 4px 14px rgba(242, 140, 20, .25); }
.nachricht.ich { background: linear-gradient(135deg, #ffc44d, #f28c14); }
.immo-karte:hover, .grosser-knopf:hover { transform: translateY(-1px); }
.immo-karte, .grosser-knopf { transition: transform .15s; }
h1 { background: linear-gradient(90deg, var(--text), color-mix(in srgb, var(--text) 65%, #f28c14)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Anmeldung & PIN ---------- */
#anmeldung { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--verlauf); background-color: var(--bg); padding: 16px; }
#anmeldung[hidden] { display: none; }
.anmelde-karte { width: min(420px, 100%); text-align: center; padding: 28px 22px; border-radius: 28px; background: var(--flaeche); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--glas-rand); box-shadow: var(--schatten); }
.anmelde-logo { width: 72px; height: 72px; filter: drop-shadow(0 8px 18px rgba(242, 140, 20, .35)); }
.anmelde-personen { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 12px; }
.person { flex-direction: column; gap: 8px; padding: 16px 8px !important; background: var(--flaeche-stark) !important; color: var(--text) !important; border: 1px solid var(--glas-rand) !important; box-shadow: none !important; font-size: 16px; justify-content: center; }
.avatar { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: #fff; font-size: 13px; font-weight: 700; flex: none; box-shadow: 0 0 0 2px var(--flaeche-stark); }
.avatar.gross { width: 64px; height: 64px; font-size: 26px; }
.pin-punkte { display: flex; justify-content: center; gap: 14px; margin: 18px 0; min-height: 16px; }
.pin-punkte span { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--leise); }
.pin-punkte span.voll { background: var(--text); border-color: var(--text); }
.pin-tasten { display: grid; grid-template-columns: repeat(3, 72px); gap: 14px; justify-content: center; margin-bottom: 14px; }
.taste { width: 72px; height: 72px; border-radius: 50% !important; justify-content: center; font-size: 26px !important; font-weight: 400 !important; background: var(--flaeche-stark) !important; color: var(--text) !important; box-shadow: none !important; border: 1px solid var(--glas-rand) !important; padding: 0 !important; }
.taste.ok { font-size: 17px !important; font-weight: 600 !important; background: linear-gradient(135deg, #ffc44d, #f28c14) !important; color: #2a1700 !important; }
.taste:active { transform: scale(.94); }
.ich-box { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 14px; background: var(--leiste-kachel); border: 1px solid var(--glas-rand); }
.ich-text { flex: 1; min-width: 0; font-size: 14px; }
svg.mini { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.version { font-size: 11px; color: var(--leise); padding: 0 6px; }
.nur-handy { display: none !important; }

/* ---------- Heute ---------- */
.heute-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.heute-kachel { display: flex; flex-direction: column; gap: 8px; color: var(--text); text-decoration: none; margin: 0; }
.heute-kachel h3 { margin: 0 0 4px; }
.heute-zeile { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; padding: 4px 0; border-bottom: 1px solid var(--rand); font-size: 15px; }
.heute-zeile:last-child { border-bottom: 0; }
.heute-zeile > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.heute-zahl b { font-size: 28px; color: var(--honig-dunkel); }
.heute-notiz { padding: 8px 10px; border-radius: 10px; font-size: 14px; }
.schnell-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.schnell { padding: 12px; border-radius: 12px; background: var(--flaeche-stark); color: var(--text); text-decoration: none; font-weight: 600; text-align: center; border: 1px solid var(--glas-rand); }

/* ---------- To-Do ---------- */
.neu-zeile { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.neu-zeile input:first-child { flex: 1; min-width: 200px; }
.filter-chips { display: flex; gap: 6px; margin-bottom: 12px; }
.chip.aktiv { background: var(--text) !important; color: var(--bg) !important; }
.todo { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.todo-zeile { display: flex; align-items: center; gap: 12px; flex: 1; cursor: pointer; }
.todo-haken { width: 24px; height: 24px; accent-color: var(--gruen); flex: none; }
.todo.erledigt .todo-text { text-decoration: line-through; color: var(--leise); }
.todo-meta { display: flex; gap: 8px; align-items: center; }

/* ---------- Notizen ---------- */
.notiz-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 14px; }
.notiz { display: flex; flex-direction: column; align-items: stretch; gap: 8px; text-align: left; min-height: 150px; padding: 14px 16px !important; border-radius: 18px !important; color: #1d1d22 !important; font-weight: 400 !important; box-shadow: var(--schatten) !important; border: 1px solid rgba(255, 255, 255, .6) !important; }
.notiz-kopf { display: flex; justify-content: space-between; gap: 6px; }
.notiz-text { white-space: pre-wrap; font-size: 14px; flex: 1; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; }
.notiz-fuss { display: flex; justify-content: space-between; align-items: center; font-size: 12px; opacity: .7; }
.farbe-gelb { background: #fff3b0 !important; } .farbe-gruen { background: #d4f5dc !important; } .farbe-blau { background: #d8e8ff !important; }
.farbe-rosa { background: #ffdbe6 !important; } .farbe-lila { background: #ead9ff !important; } .farbe-grau { background: #e8e8ee !important; }
.heute-notiz { color: #1d1d22; }
.farb-wahl { display: flex; gap: 8px; }
.farbpunkt { width: 30px; height: 30px; border-radius: 50% !important; padding: 0 !important; border: 2px solid transparent !important; box-shadow: none !important; }
.farbpunkt.aktiv { border-color: var(--text) !important; }
dialog.formular textarea, dialog.formular > form > input { font: inherit; padding: 10px 12px; border: 1px solid var(--rand); border-radius: 10px; color: var(--text); }

/* ---------- Passwörter ---------- */
.geteilt { display: flex; gap: 2px; }
.feld-zeile { display: flex; gap: 6px; align-items: center; }
.feld-zeile > input, .feld-zeile > select, .feld-zeile > textarea { flex: 1; min-width: 0; }
.freigabe { display: flex; flex-wrap: wrap; gap: 8px; }
.freigabe-person { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 99px; background: var(--flaeche-stark); border: 1px solid var(--glas-rand); color: var(--text); cursor: pointer; }
.personen-wahl { display: inline-grid; grid-auto-flow: column; grid-template-columns: none; margin-bottom: 14px; }
.personen-wahl button { padding: 8px 16px; font-size: 14px; }
.ios-symbol { font-weight: 700; }

/* ---------- Handy: nur die wichtigsten Punkte unten, Rest unter „Mehr“ ---------- */
@media (max-width: 760px) {
  #navigation a:not(.unten), #navigation .trenner, #navigation .untermenue { display: none !important; }
  #navigation a.nur-handy { display: flex !important; }
  .pin-tasten { grid-template-columns: repeat(3, 68px); }
  .taste { width: 68px; height: 68px; }
  .heute-raster, .notiz-raster { grid-template-columns: 1fr; }
  .neu-zeile > * { flex: 1 1 100%; }
}

/* ---------- Master-Passwort ---------- */
.link-knopf { background: none !important; box-shadow: none !important; border: 0 !important; color: var(--blau) !important; font-weight: 500 !important; padding: 6px !important; margin-top: 4px; }
#master-feld { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
#master-feld input, .master-form input { padding: 12px 14px; border: 1px solid var(--rand); border-radius: 12px; color: var(--text); font: inherit; }
.aktionen.zentriert { justify-content: center; }
.master-form { display: flex; flex-direction: column; gap: 10px; max-width: 520px; }

/* ---------- Spruch & Witz des Tages ---------- */
.tagesgruss { grid-column: 1 / -1; background: linear-gradient(135deg, rgba(255, 196, 77, .35), rgba(168, 85, 247, .15)) !important; }
.spruch { font-size: 20px; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; }
.anfuehrung { color: var(--honig-dunkel); font-size: 28px; margin-right: 2px; }
.witz-kopf { margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--leise); text-transform: uppercase; letter-spacing: .04em; }
.witz { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.pointe { font-weight: 600; color: var(--honig-dunkel); animation: rein .25s ease-out; }

/* Schalter: „an“ immer deutlich grün – auch im Dunkel-Modus */
.schalter input:checked + span { background: var(--gruen) !important; box-shadow: 0 0 0 1px rgba(48, 196, 90, .5), 0 0 12px rgba(48, 196, 90, .45); }
.schalter input:not(:checked) + span::before { background: #d1d1d6; }
.schalter input:focus-visible + span { outline: 2px solid var(--honig); outline-offset: 2px; }

/* Segment-Auswahl (Hell/Dunkel, Personen): nur die gewählte Option hervorheben */
.design-wahl button { background: transparent !important; color: var(--leise) !important; box-shadow: none !important; }
.design-wahl button.aktiv { background: var(--flaeche-stark) !important; color: var(--text) !important; box-shadow: 0 1px 4px rgba(0, 0, 0, .15) !important; }
.personen-wahl button.aktiv { background: linear-gradient(135deg, #ffc44d, #f28c14) !important; color: #2a1700 !important; }

.wert.gut { color: #1f8a3d; font-weight: 600; }
:root[data-theme="dark"] .wert.gut { color: var(--gruen); }
.wert.warnung { color: var(--rot); }
.master-form[data-anbieter] input { font-family: ui-monospace, Consolas, monospace; }
#ki-wahl select { width: auto; padding: 6px 10px; margin-left: auto; }
#status a.warnung { text-decoration: none; }

/* ---------- Anfragen & Löschen ---------- */
.anfrage-zeile { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--rand); }
.anfrage-zeile:last-child { border-bottom: 0; }
.anfrage-zeile .aktionen { margin: 0; flex-wrap: nowrap; }
.anfrage-zeile .aktionen button { white-space: nowrap; }
.anfrage-zeile { flex-wrap: wrap; }
.anfrage-zeile > div:first-child { flex: 1 1 180px; min-width: 0; }
.dok-zeile { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 2px 0; }
.dok-zeile .klein-knopf { flex: none; }

/* ---------- iPhone: nichts darf breiter als der Bildschirm werden ---------- */
html, body { max-width: 100%; overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
main { min-width: 0; overflow-wrap: anywhere; }
/* Flex-/Grid-Kinder dürfen schrumpfen, lange Wörter brechen um */
.zeile > *, .heute-zeile > *, .ios-zeile > *, .anfrage-zeile > *, .dok-zeile > *, .todo-zeile, .todo-text, .mieter,
.immo-karte, .heute-kachel, .karte, .unterkarte, .liste > li, .dokkarte, .hilfe-karte { min-width: 0; }
.ios-zeile .beschreibung, .dok-name, .titel, .meta, .todo-text, .alt { overflow-wrap: anywhere; }
.frist-chip { white-space: normal; max-width: 100%; }
.geteilt { flex-shrink: 0; }
code { overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .heute-raster, .notiz-raster, .immo-karten, .hilfe-karten, .kacheln, .werte { grid-template-columns: minmax(0, 1fr) !important; }
  .heute-zeile > span:first-child { white-space: normal; }
  .zeile { flex-wrap: wrap; }
  .aktionen { flex-wrap: wrap; }
  /* Schrift in Eingabefeldern mind. 16 px – sonst zoomt Safari beim Antippen hinein */
  input, select, textarea { font-size: 16px !important; }
  .seitenleiste { left: 0; right: 0; width: 100%; max-width: 100vw; }
  dialog { max-width: calc(100vw - 16px); }
}
/* Chips nie mitten im Wort umbrechen */
.frist-chip, .marker { overflow-wrap: normal; word-break: keep-all; flex-shrink: 0; }

/* OK-Taste ausblenden, wenn nach der letzten Ziffer automatisch geprüft wird */
.taste.unsichtbar { visibility: hidden; }

/* ---------- Updates ---------- */
.update-notizen { white-space: pre-wrap; font-size: 14px; color: var(--leise); margin-top: 6px; }
#update-karte .unterkarte:first-of-type { border-top: 1px solid var(--rand); }

/* ---------- Wiederholende Aufgaben ---------- */
.wdh-chip { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--honig-hell); color: var(--text); white-space: nowrap; }
#todo-zeit { flex: 0 0 auto; width: auto; }

/* To-Do am Handy: Text über volle Breite, Termin-Chips darunter (sonst wird der Text auf einen Buchstaben gequetscht) */
.todo-meta { flex-wrap: wrap; justify-content: flex-end; }
.feld-beschriftet { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--leise); }
.feld-beschriftet input { flex: 1; }
@media (max-width: 760px) {
  .todo { flex-wrap: wrap; row-gap: 6px; }
  .todo-zeile { flex: 1 1 100%; min-width: 0; }
  .todo-meta { flex: 1 1 100%; justify-content: flex-start; padding-left: 36px; }
  .wdh-chip { white-space: nowrap; }
  .feld-beschriftet { background: var(--feld); border: 1px solid var(--rand); border-radius: 12px; padding: 0 12px; }
  .feld-beschriftet input { border: 0; background: transparent; min-height: 44px; }
}

/* Wochentage für wiederholende Aufgaben: mehrere antippbar */
.tage-wahl { display: flex; gap: 6px; flex-wrap: wrap; }
#todo-wochentage button { justify-content: center; flex: 1 0 40px; min-height: 40px; padding: 0 6px; border-radius: 12px; background: var(--feld); color: var(--text); border: 1px solid var(--rand); box-shadow: none; font-weight: 600; }
#todo-wochentage button.aktiv { background: linear-gradient(135deg, #ffc44d, #f28c14); color: #2a1700; border-color: transparent; box-shadow: 0 4px 14px rgba(242, 140, 20, .25); }

.marker.fehlt { background: color-mix(in srgb, var(--grau) 18%, transparent); color: var(--leise); }

/* ---------- Plantafel ---------- */
.pt-leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.pt-steuerung { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pt-steuerung select { width: auto; }
.pt-legende { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.pt-chip { font-size: 12px; padding: 3px 9px; border-radius: 8px; }
.pt-inhalt { overflow-x: auto; border-radius: 16px; background: var(--flaeche); border: 1px solid var(--glas-rand); }
.pt-tafel { display: inline-block; min-width: 100%; }
.pt-zeile { display: flex; border-bottom: 1px solid var(--rand); }
.pt-label { position: sticky; left: 0; z-index: 3; flex: 0 0 130px; padding: 6px 10px; background: var(--flaeche-stark); backdrop-filter: blur(12px); display: flex; flex-direction: column; justify-content: center; font-size: 13px; }
.pt-label span { font-size: 11px; color: var(--leise); }
.pt-spur { position: relative; flex: none; cursor: copy; }
.pt-kopfzeile .pt-spur, .pt-infozeile .pt-spur { cursor: default; }
.pt-tag { position: absolute; top: 0; bottom: 0; }
.pt-tag.we { background: color-mix(in srgb, var(--gruen) 9%, transparent); }
.pt-tag.feiertag { background: color-mix(in srgb, var(--gruen) 22%, transparent); }
.pt-tag.heute { background: color-mix(in srgb, var(--rot) 10%, transparent); border-left: 2px solid var(--rot); }
.pt-kopf { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; border-left: 1px solid var(--rand); white-space: nowrap; overflow: hidden; }
.pt-kopf.monat, .pt-kopf.kw { justify-content: flex-start; padding-left: 6px; font-weight: 600; }
.pt-kopf.tag { flex-direction: column; line-height: 1.1; font-size: 11px; }
.pt-kopf.tag.we { background: color-mix(in srgb, var(--gruen) 9%, transparent); }
.pt-kopf.tag.feiertag { background: color-mix(in srgb, var(--gruen) 25%, transparent); }
.pt-kopf.tag.heute { background: var(--rot); color: #fff; border-radius: 6px; }
.pt-balken { position: absolute; height: 22px; padding: 0 6px; border-radius: 6px; font-size: 12px; font-weight: 600; text-align: left; overflow: visible; white-space: nowrap; box-shadow: none !important; border: 1px solid rgba(0, 0, 0, .08) !important; display: block; z-index: 1; }
.pt-balken span { overflow: hidden; text-overflow: ellipsis; display: block; width: max-content; line-height: 20px; }
.pt-info { position: absolute; top: 3px; height: 20px; font-size: 11px; padding: 2px 6px; border-radius: 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pt-info.feiertag { background: color-mix(in srgb, var(--gruen) 35%, transparent); }
.pt-info.ferien { background: color-mix(in srgb, var(--honig) 35%, transparent); }
/* Farben je Art (Balken, Chips, Punkte) */
#seite-plantafel .art-termin, .pt-balken.art-termin { background: #cfe3ff !important; color: #0b3d80 !important; }
#seite-plantafel .art-urlaub, .pt-balken.art-urlaub { background: #f7c6f3 !important; color: #6b0f63 !important; }
#seite-plantafel .art-schule, .pt-balken.art-schule { background: #ffe7a3 !important; color: #6b4a00 !important; }
#seite-plantafel .art-freizeit, .pt-balken.art-freizeit { background: #c9f2cf !important; color: #11582a !important; }
#seite-plantafel .art-arzt, .pt-balken.art-arzt { background: #ffd0cc !important; color: #8a1b12 !important; }
#seite-plantafel .art-geburtstag, .pt-balken.art-geburtstag { background: #ffd9b0 !important; color: #7a3c00 !important; }
#seite-plantafel .art-sonstiges, .pt-balken.art-sonstiges { background: #e3e3e8 !important; color: #3a3a40 !important; }
/* Handy: Terminliste */
.pt-tagkopf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 16px 4px 6px; font-size: 14px; }
.pt-tagkopf.heute b { color: var(--rot); }
.pt-hinweis { font-size: 11px; padding: 2px 8px; border-radius: 8px; }
.pt-hinweis.feiertag { background: color-mix(in srgb, var(--gruen) 25%, transparent); }
.pt-hinweis.ferien { background: color-mix(in srgb, var(--honig) 30%, transparent); }
.pt-eintrag { text-align: left; }
.pt-punkt { width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
@media (max-width: 760px) {
  .pt-inhalt { background: none; border: 0; overflow: visible; }
  .pt-steuerung { width: 100%; }
  #pt-neu { flex: 1; justify-content: center; }
}
/* Plantafel nutzt die ganze Seitenbreite */
main:has(#seite-plantafel.aktiv) { max-width: none; }
.pt-zeile { align-items: stretch; }

/* ---------- Notizen (wie iPhone-Notizen) ---------- */
main:has(#seite-notizen.aktiv) { max-width: none; }
.nb-raster { display: grid; grid-template-columns: 210px 320px minmax(0, 1fr); gap: 14px; height: calc(100vh - 76px); min-height: 480px; }
.nb-spalte { background: var(--flaeche); border: 1px solid var(--glas-rand); border-radius: 18px; padding: 12px; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.nb-kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.nb-kopf b { flex: 1; font-size: 17px; }
.nb-knopf { background: transparent !important; color: var(--honig-dunkel) !important; box-shadow: none !important; padding: 6px 8px !important; font-size: 17px; border-radius: 10px; }
.nb-knopf:hover { background: var(--honig-hell) !important; }
.nb-knopf.an { background: var(--honig-hell) !important; }
.nb-knopf:disabled { opacity: .35; }
.nb-zurueck { display: none; background: transparent !important; color: var(--honig-dunkel) !important; box-shadow: none !important; padding: 6px 4px !important; font-weight: 600; }
.nb-ordner { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 12px; background: transparent !important; color: var(--text) !important; box-shadow: none !important; font-weight: 500; text-align: left; }
.nb-ordner b { flex: 1; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-ordner small { color: var(--leise); }
.nb-ordner.aktiv { background: var(--honig-hell) !important; }
.nb-ordner-menue { padding: 0 4px; color: var(--leise); }
.nb-suche { margin-bottom: 8px; border-radius: 12px; }
.nb-liste { overflow-y: auto; flex: 1; min-height: 0; }
.nb-gruppe { font-size: 13px; font-weight: 700; margin: 12px 6px 4px; }
.nb-eintrag { display: flex; gap: 10px; align-items: center; width: 100%; padding: 10px; border-radius: 12px; background: transparent !important; color: var(--text) !important; box-shadow: none !important; text-align: left; border-bottom: 1px solid var(--rand) !important; }
.nb-eintrag.aktiv { background: var(--honig-hell) !important; }
.nb-eintrag-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nb-eintrag-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-eintrag-text small { color: var(--leise); font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-zeit { color: var(--text); }
.nb-hinweis { font-size: 11px; }
.nb-eintrag img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; flex: none; }
.nb-leer, .nb-anzahl { color: var(--leise); text-align: center; padding: 10px; }
.nb-werkzeuge { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--rand); padding-bottom: 6px; position: relative; }
.nb-luecke { flex: 1; }
.nb-format-halter { position: relative; }
.nb-menue { position: absolute; top: 40px; right: 0; z-index: 20; display: flex; flex-direction: column; min-width: 170px; padding: 6px; border-radius: 14px; background: var(--flaeche-stark); backdrop-filter: blur(16px); border: 1px solid var(--glas-rand); box-shadow: 0 10px 30px rgba(0, 0, 0, .15); }
.nb-menue button { background: transparent !important; color: var(--text) !important; box-shadow: none !important; justify-content: flex-start; font-weight: 500; }
.nb-menue button:hover { background: var(--honig-hell) !important; }
.nb-meta { text-align: center; color: var(--leise); margin: 6px 0; }
.nb-text { flex: 1; overflow-y: auto; outline: none; padding: 6px 10px 40px; font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
.nb-text h1 { font-size: 26px; margin: 4px 0 8px; }
.nb-text h2 { font-size: 20px; margin: 8px 0 4px; }
.nb-text img { max-width: 100%; border-radius: 10px; margin: 6px 0; }
.nb-text a { color: var(--blau); }
.nb-text ul.chk { list-style: none; padding-left: 4px; }
.nb-text ul.chk > li { position: relative; padding-left: 30px; margin: 4px 0; min-height: 24px; }
.nb-text ul.chk > li::before { content: ''; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--grau); cursor: pointer; }
.nb-text ul.chk > li[data-done="1"] { color: var(--leise); text-decoration: line-through; }
.nb-text ul.chk > li[data-done="1"]::before { background: var(--honig); border-color: var(--honig); }
.nb-text ul.chk > li[data-done="1"]::after { content: '✓'; position: absolute; left: 5px; top: 0; color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; }
.nb-keine { display: none; color: var(--leise); text-align: center; margin: auto; }
.nb-editor.leer > :not(.nb-keine) { display: none; }
.nb-editor.leer .nb-keine { display: block; }
@media (max-width: 760px) {
  .nb-raster { display: block; height: auto; min-height: 0; }
  .nb-spalte { display: none; border-radius: 16px; }
  .nb-zeige-ordner .nb-ordnerspalte, .nb-zeige-liste .nb-listenspalte, .nb-zeige-editor .nb-editor { display: flex; }
  .nb-zurueck { display: inline-flex; }
  .nb-editor { min-height: calc(100vh - 170px); }
  .nb-liste { max-height: none; }
  .nb-werkzeuge .nb-knopf { padding: 6px !important; }
}

/* Tresor: verschlüsselte Dateien am Eintrag */
.tresor-dateien { display: flex; flex-direction: column; gap: 6px; margin: 4px 0; }
.tresor-datei { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 10px; border-radius: 12px; background: var(--feld); border: 1px solid var(--rand); }
.tresor-datei span { flex: 1; min-width: 0; overflow-wrap: anywhere; font-weight: 600; font-size: 14px; }
.tresor-datei.neu { border-style: dashed; }
/* Passwörter, die Admins nur als Admin sehen: je Person zugeklappt */
.tresor-fremd { margin-top: 18px; }
.tresor-fremd summary { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--flaeche); border: 1px solid var(--glas-rand); cursor: pointer; font-weight: 600; list-style: none; }
.tresor-fremd summary::-webkit-details-marker { display: none; }
.tresor-fremd-titel { flex: 1; }
.tresor-fremd summary::after { content: '›'; font-size: 20px; color: var(--leise); transition: transform .15s; }
.tresor-fremd[open] summary::after { transform: rotate(90deg); }
.tresor-fremd > .ios-liste { margin-top: 8px; }

.schalter-klein { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; cursor: pointer; }

/* ---------- Mülltonnen in der Plantafel: kleine Tonne als Symbol, Farbe wie die echte Tonne ---------- */
.tonne::before { content: ''; display: inline-block; width: 1.05em; height: 1.05em; margin-right: 4px; vertical-align: -.15em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M3.5%205.5h17v2.2h-17z'%2F%3E%3Cpath%20d%3D'M10%203h4v1.8h-4z'%2F%3E%3Cpath%20d%3D'M5.2%208.6h13.6l-1.3%2010.6H6.5z'%2F%3E%3Ccircle%20cx%3D'8'%20cy%3D'21'%20r%3D'1.6'%2F%3E%3Ccircle%20cx%3D'16'%20cy%3D'21'%20r%3D'1.6'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M3.5%205.5h17v2.2h-17z'%2F%3E%3Cpath%20d%3D'M10%203h4v1.8h-4z'%2F%3E%3Cpath%20d%3D'M5.2%208.6h13.6l-1.3%2010.6H6.5z'%2F%3E%3Ccircle%20cx%3D'8'%20cy%3D'21'%20r%3D'1.6'%2F%3E%3Ccircle%20cx%3D'16'%20cy%3D'21'%20r%3D'1.6'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; }
.pt-balken.tonne { display: flex !important; align-items: center; width: max-content !important; z-index: 2; }
.pt-balken.tonne::before, .pt-balken.tonne span { flex: none; }
.pt-punkt.tonne::before { width: 20px; height: 20px; margin: 0; }
#seite-plantafel .art-tonne_bio, .pt-balken.art-tonne_bio { background: #8a5a2b !important; color: #fff !important; }
#seite-plantafel .art-tonne_rest, .pt-balken.art-tonne_rest { background: #2b2b30 !important; color: #fff !important; }
#seite-plantafel .art-tonne_papier, .pt-balken.art-tonne_papier { background: #2f8f46 !important; color: #fff !important; }
#seite-plantafel .art-tonne_gelb, .pt-balken.art-tonne_gelb { background: #f5cc16 !important; color: #3a2f00 !important; }

/* ---------- To-Do wie im R&R-Cockpit ---------- */
main:has(#seite-todo.aktiv) { max-width: none; }
.td-raster { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 14px; min-height: calc(100vh - 76px); }
.td-listenspalte { background: var(--flaeche); border: 1px solid var(--glas-rand); border-radius: 18px; padding: 10px; align-self: start; }
.td-liste { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 12px; background: transparent !important; color: var(--text) !important; box-shadow: none !important; font-weight: 500; text-align: left; }
.td-liste.aktiv { background: color-mix(in srgb, var(--rot) 10%, transparent) !important; font-weight: 700; }
.td-liste .td-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-liste small { color: var(--leise); }
.td-symbol { width: 22px; text-align: center; }
.td-trenner { height: 1px; background: var(--rand); margin: 8px 6px; }
.td-haupt { --td-farbe: #5b6fd3; background: var(--td-farbe); border-radius: 18px; padding: 16px 16px 24px; color: #fff; }
.td-kopfzeile { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.td-kopfzeile h1 { font-size: 22px; color: #fff; margin: 0; }
.td-neu input { width: 100%; background: rgba(255, 255, 255, .22); color: #fff; border: 0; border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; }
.td-neu input::placeholder { color: rgba(255, 255, 255, .85); }
.td-neu input:focus { background: #fff; color: var(--text); outline: none; }
.td-aufgaben { display: flex; flex-direction: column; gap: 6px; }
.td-zeile { display: flex; align-items: center; gap: 12px; background: var(--flaeche-stark); color: var(--text); border-radius: 10px; padding: 10px 12px; cursor: pointer; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.td-zeile:hover { filter: brightness(.98); }
.td-kreis { flex: none; width: 22px; height: 22px; padding: 0 !important; border-radius: 50% !important; border: 2px solid var(--grau) !important; background: transparent !important; box-shadow: none !important; }
.td-kreis:hover { border-color: var(--td-farbe, var(--blau)) !important; }
.td-kreis.fertig { background: var(--td-farbe, var(--gruen)) !important; border-color: transparent !important; position: relative; }
.td-kreis.fertig::after { content: '✓'; color: #fff; font-size: 13px; font-weight: 700; position: absolute; inset: 0; display: grid; place-items: center; }
.td-inhalt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.td-text { font-weight: 600; overflow-wrap: anywhere; }
.td-text.ueberfaellig, .td-meta.ueberfaellig { color: var(--rot); }
.td-meta { color: var(--leise); font-size: 12px; overflow-wrap: anywhere; }
.td-zeile.erledigt .td-text { text-decoration: line-through; color: var(--leise); font-weight: 500; }
.td-stern { flex: none; background: transparent !important; box-shadow: none !important; color: var(--grau) !important; font-size: 18px; padding: 2px 4px !important; }
.td-stern.an { color: var(--td-farbe, #d99a06) !important; }
.td-erledigt summary { display: inline-flex; margin: 10px 0 6px; padding: 6px 12px; border-radius: 8px; background: rgba(255, 255, 255, .22); color: #fff; font-weight: 600; cursor: pointer; list-style: none; }
.td-erledigt summary::-webkit-details-marker { display: none; }
.td-erledigt summary::before { content: '▸ '; }
.td-erledigt[open] summary::before { content: '▾ '; }
.td-erledigt { display: flex; flex-direction: column; gap: 6px; }
.td-erledigt[open] { display: flex; }
.td-leer { color: rgba(255, 255, 255, .9); padding: 12px 4px; }
.td-tage button { flex: 1 0 36px; min-height: 36px; padding: 0 4px; border-radius: 10px; background: var(--feld) !important; color: var(--text) !important; border: 1px solid var(--rand) !important; box-shadow: none !important; justify-content: center; }
.td-tage button.aktiv { background: linear-gradient(135deg, #ffc44d, #f28c14) !important; color: #2a1700 !important; border-color: transparent !important; }
@media (max-width: 760px) {
  .td-raster { display: block; min-height: 0; }
  /* Listen am Handy als waagerechte Leiste (scrollt innerhalb, nicht die Seite) */
  .td-listenspalte { display: flex; gap: 6px; overflow-x: auto; padding: 6px; margin-bottom: 10px; scrollbar-width: none; }
  .td-liste { width: auto; flex: none; padding: 8px 12px; }
  .td-trenner { width: 1px; height: auto; margin: 4px 2px; }
  .td-haupt { padding: 12px 10px 18px; }
}
.tresor-ablage { border: 2px dashed var(--rand); border-radius: 12px; padding: 14px; text-align: center; color: var(--leise); font-size: 14px; margin: 4px 0 6px; }
.tresor-ablage.drueber { border-color: var(--honig); background: var(--honig-hell); color: var(--text); }

/* ---------- Skizzen (aus dem R&R-Cockpit) ---------- */
body.sk-open { overflow: hidden; }
.sk-ed { position: fixed; inset: 0; z-index: 5000; background: #f2f2f5; display: flex; flex-direction: column; font-family: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif; user-select: none; -webkit-user-select: none; }
.sk-top { display: flex; align-items: center; gap: 6px; padding: 8px 12px; padding-top: max(8px, env(safe-area-inset-top)); background: rgba(255,255,255,.92); backdrop-filter: blur(12px); border-bottom: 1px solid #e3e3e8; }
.sk-title { font-size: 16px; margin-left: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-sp { flex: 1; }
.sk-tb { border: 0; background: none; font: inherit; font-size: 16px; color: #1f5fa8; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
.sk-tb.sk-done, .sk-airow .sk-done { background: #d0021b; color: #fff; font-weight: 700; padding: 8px 18px; }
.sk-ic { border: 0; background: #fff; width: 38px; height: 38px; border-radius: 12px; font-size: 18px; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.sk-ic:disabled { opacity: .35; cursor: default; }
.sk-ai { background: linear-gradient(135deg, #fff4d6, #ffe2f0); }
.sk-ai.busy { animation: skPulse 1s infinite alternate; }
@keyframes skPulse { to { transform: scale(1.12); box-shadow: 0 0 0 6px rgba(245,166,35,.25); } }
.sk-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; touch-action: none; }
.sk-stage canvas { display: block; touch-action: none; cursor: crosshair; }
.sk-stage[data-tool="sel"] canvas { cursor: grab; }
.sk-stage[data-tool="text"] canvas { cursor: text; }
.sk-stage[data-tool="erase"] canvas { cursor: cell; }
.sk-zoom { position: absolute; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 2px; background: rgba(255,255,255,.95); border-radius: 12px; padding: 3px; box-shadow: 0 2px 10px rgba(0,0,0,.12); font-size: 13px; }
.sk-zoom button { border: 0; background: none; width: 32px; height: 30px; font-size: 18px; cursor: pointer; border-radius: 8px; }
.sk-zoom button:hover { background: #f0f0f3; }
.sk-pct { min-width: 46px; text-align: center; color: #555; }
.sk-bar { background: rgba(255,255,255,.95); backdrop-filter: blur(12px); border-top: 1px solid #e3e3e8; padding: 8px 10px; padding-bottom: max(8px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 8px; align-items: center; }
.sk-tools, .sk-opts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; align-items: center; }
.sk-tools button { width: 46px; height: 46px; border-radius: 14px; border: 0; background: #f2f2f5; font-size: 20px; cursor: pointer; transition: transform .1s, background .1s; font-weight: 700; }
.sk-tools button.on { background: #111; color: #fff; transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0,0,0,.25); }
.sk-cols { display: flex; gap: 6px; }
.sk-cols button { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff; background: var(--c); box-shadow: 0 0 0 1px #ccc; cursor: pointer; }
.sk-cols button.on { box-shadow: 0 0 0 2px #111; transform: scale(1.12); }
.sk-ws { display: flex; gap: 4px; margin: 0 6px; }
.sk-ws button { width: 34px; height: 34px; border-radius: 10px; border: 0; background: #f2f2f5; display: grid; place-items: center; cursor: pointer; }
.sk-ws button i { display: block; background: #111; border-radius: 50%; }
.sk-ws button.on { background: #111; } .sk-ws button.on i { background: #fff; }
.sk-pill { border: 0; background: #f2f2f5; border-radius: 10px; padding: 8px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.sk-pill.hidden { display: none; }
.sk-hint { font-size: 12px; color: #777; min-height: 15px; text-align: center; }
/* KI-Ladeanzeige über der Zeichenfläche */
.sk-ai-ov { position: absolute; inset: 0; z-index: 7; display: flex; align-items: center; justify-content: center; background: rgba(240,240,245,.55); }
.sk-ai-card { background: #fff; border-radius: 16px; box-shadow: 0 12px 40px rgba(0,0,0,.25); padding: 20px 26px; min-width: 240px; text-align: center; }
.sk-ai-txt { font-size: 15px; font-weight: 600; color: #1b1f27; }
.sk-ai-bar { position: relative; height: 6px; border-radius: 4px; background: #e7e9ee; overflow: hidden; margin: 14px 0 8px; }
.sk-ai-bar i { position: absolute; left: -40%; width: 40%; height: 100%; border-radius: 4px; background: #d0021b; animation: sk-ai-prog 1.1s infinite ease-in-out; }
@keyframes sk-ai-prog { 0% { left: -40%; } 60% { left: 100%; } 100% { left: 100%; } }
.sk-ai-sub { font-size: 12px; color: #777; }
.sk-ta { position: absolute; z-index: 3; min-width: 140px; border: 2px dashed #1f5fa8; background: rgba(255,255,255,.9); border-radius: 8px; padding: 2px 6px; font-weight: 600; resize: none; outline: none; font-family: inherit; field-sizing: content; }
.sk-aibox { position: absolute; left: 50%; top: 70px; transform: translateX(-50%); width: min(460px, calc(100vw - 24px)); background: #fff; border-radius: 16px; box-shadow: 0 12px 40px rgba(0,0,0,.25); padding: 16px; display: flex; flex-direction: column; gap: 10px; z-index: 6; }
.sk-aibox textarea { width: 100%; box-sizing: border-box; border: 1px solid #ddd; border-radius: 10px; padding: 10px; font: inherit; font-size: 15px; resize: vertical; }
.sk-aich { display: flex; flex-wrap: wrap; gap: 6px; }
.sk-aich button { border: 1px solid #e3e3e8; background: #fafafa; border-radius: 14px; padding: 5px 10px; font: inherit; font-size: 12.5px; cursor: pointer; }
.sk-airow { display: flex; justify-content: flex-end; gap: 8px; }
.sk-airow button { border: 0; background: #f2f2f5; border-radius: 10px; padding: 8px 14px; font: inherit; cursor: pointer; }
@media (max-width: 600px) { .sk-tools button { flex: 0 0 auto; width: 40px; height: 40px; font-size: 17px; border-radius: 12px; } .sk-tools { gap: 4px; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; justify-content: flex-start; padding: 4px 2px; scrollbar-width: none; } .sk-cols button { width: 24px; height: 24px; } .sk-title { display: none; } }
#ntBody img { cursor: pointer; }
.sk-syms { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.sk-syms.hidden { display: none; }
.sk-syms button { display: flex; flex-direction: column; align-items: center; gap: 2px; border: 2px solid transparent; background: #f2f2f5; border-radius: 12px; padding: 6px 8px 4px; cursor: pointer; font: inherit; font-size: 12px; }
.sk-syms button canvas { width: 72px; height: 48px; }
.sk-syms button.on { border-color: #111; background: #fff; }
.sk-pill.sk-rot.hidden { display: none; }
.sk-aisel { display: flex; gap: 6px; align-items: center; font-size: 13px; color: #555; }
.sk-aisel select { flex: 1; min-width: 0; border: 1px solid #ddd; border-radius: 8px; padding: 6px; font: inherit; font-size: 13px; background: #fff; }
@media (max-width: 600px) { .sk-syms button canvas { width: 56px; height: 38px; } .sk-syms { gap: 4px; } }
.call-set { position: absolute; right: 16px; bottom: 110px; z-index: 20; width: min(360px, calc(100vw - 32px)); max-height: calc(100% - 140px); overflow: auto; background: #1d2027; color: #fff; border: 1px solid #333842; border-radius: 16px; padding: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.5); display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.call-set .cs-h { display: flex; align-items: center; justify-content: space-between; font-size: 15px; }
.call-set .cs-x { background: none; border: 0; color: #aaa; font-size: 16px; cursor: pointer; }
.call-set label { display: flex; flex-direction: column; gap: 4px; color: #c9cdd4; margin: 0; }
.call-set select { width: 100%; background: #2a2e37; color: #fff; border: 1px solid #3a3f4a; border-radius: 10px; padding: 8px; font: inherit; font-size: 13px; margin: 0; }
.call-set .cs-lvl { height: 6px; background: #2a2e37; border-radius: 4px; overflow: hidden; margin-top: -4px; }
.call-set .cs-lvl i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #2fa462, #f5a623); transition: width .08s; }
.call-set .cs-note { color: #8b919c; font-size: 12px; }
.call-set .cs-test { align-self: flex-start; background: #2a2e37; color: #fff; border: 1px solid #3a3f4a; border-radius: 10px; padding: 6px 12px; font: inherit; cursor: pointer; margin-top: -4px; }
.nt-body ul.chk ul.chk { padding-left: 26px; }
.sk-syms { flex-direction: column; align-items: stretch; gap: 6px; max-height: 34vh; overflow-y: auto; width: 100%; max-width: 980px; }
.sk-sg { display: flex; align-items: center; gap: 8px; }
.sk-sg > b { font-size: 11px; color: #777; text-transform: uppercase; letter-spacing: .04em; width: 74px; flex: 0 0 auto; text-align: right; }
.sk-sg > div { display: flex; gap: 6px; flex-wrap: wrap; }
.sk-syms button { padding: 4px 6px 3px; font-size: 11px; }
.sk-syms button canvas { width: 60px; height: 40px; }
@media (max-width: 600px) { .sk-sg { flex-direction: column; align-items: flex-start; gap: 3px; } .sk-sg > b { width: auto; text-align: left; } .sk-sg > div { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; } .sk-syms button canvas { width: 50px; height: 34px; } }
.sk-syms { flex-wrap: nowrap; }
.sk-syms { justify-content: flex-start; }
.sk-bar { position: relative; }
.sk-syms { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(100% + 8px); width: min(980px, calc(100vw - 16px)); background: rgba(255,255,255,.97); backdrop-filter: blur(12px); border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: 10px; box-sizing: border-box; z-index: 5; }
.sk-syms { max-height: min(52vh, 420px); }
.sk-ed .hidden { display: none !important; }
.sk-ed .sk-ai { display: none !important; }
:where(.sk-ed) button { background: transparent; color: inherit; padding: 0; border-radius: 0; font-weight: inherit; gap: 0; box-shadow: none; display: inline-block; }
/* Version klein unten rechts (wie im R&R-Cockpit) */
.versions-marke { position: fixed; right: 10px; bottom: 6px; z-index: 50; font-size: 11px; color: var(--leise); background: var(--flaeche); border: 1px solid var(--glas-rand); border-radius: 999px; padding: 1px 8px; pointer-events: none; opacity: .8; }
.versions-marke:empty { display: none; }
/* Skizzen: Marker-Optionen (doppelt tippen / gedrückt halten) */
.sk-ed .sk-mm { position: fixed; z-index: 5100; width: 260px; padding: 8px; border-radius: 16px; background: #fff; color: #222; box-shadow: 0 12px 34px rgba(0, 0, 0, .22); display: flex; flex-direction: column; gap: 4px; }
.sk-ed .sk-mm > b { font-size: 13px; color: #666; padding: 2px 6px 4px; }
.sk-ed .sk-mm button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 12px; text-align: left; }
.sk-ed .sk-mm button:hover { background: #f2f2f5; }
.sk-ed .sk-mm button.on { background: #fff4dc; box-shadow: inset 0 0 0 2px #f2a91c; }
.sk-ed .sk-mm button > span:first-child { font-size: 20px; width: 26px; text-align: center; }
.sk-ed .sk-mm button > span:last-child { display: flex; flex-direction: column; }
.sk-ed .sk-mm small { color: #777; font-size: 12px; }
.sk-ed .sk-tools [data-tool=mark] { position: relative; }
.sk-ed .sk-tools [data-tool=mark][data-mm]:not([data-mm=""])::after { content: attr(data-mm); position: absolute; right: -2px; bottom: -2px; font-size: 11px; line-height: 1; background: #fff; border-radius: 6px; padding: 1px; box-shadow: 0 0 0 1px #ddd; }
/* Dokumente: Bereiche zum Zuklappen */
details.dok-bereich { padding: 0; }
details.dok-bereich > summary { display: flex; align-items: center; gap: 10px; padding: 16px 18px; cursor: pointer; list-style: none; font-weight: 700; font-size: 17px; }
details.dok-bereich > summary::-webkit-details-marker { display: none; }
details.dok-bereich > summary span { flex: 1; }
details.dok-bereich > summary::after { content: '›'; font-size: 22px; color: var(--leise); transition: transform .15s; }
details.dok-bereich[open] > summary::after { transform: rotate(90deg); }
details.dok-bereich[open] { padding-bottom: 14px; }
details.dok-bereich > :not(summary) { margin-left: 18px; margin-right: 18px; }

/* Dokumente: Versicherungsübersicht */
.vs-karte { display: flex; flex-direction: column; gap: 4px; }
.vs-titel { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.vs-titel h3 { margin: 0; flex: 1; }
.vs-zeile { padding: 10px 12px; border-radius: 12px; border-top: 1px solid var(--rand); display: flex; flex-direction: column; gap: 3px; }
.vs-zeile.klickbar { cursor: pointer; }
.vs-zeile.klickbar:hover { background: var(--honig-hell); }
.vs-kopf { font-size: 16px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; }
.vs-betrag { margin-left: auto; font-weight: 700; white-space: nowrap; }
.vs-info { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; align-items: center; }
.vs-info code { font-size: 14px; }
.vs-info .klein-knopf { margin-left: 6px; padding: 2px 8px !important; font-size: 12px; }
.vs-tel a { color: var(--blau); text-decoration: none; white-space: nowrap; }
.vs-bald { color: var(--rot); font-weight: 600; }
.vs-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Heute: Fristen abhaken */
.frist-rechts { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.frist-rechts .klein-knopf { padding: 2px 8px !important; font-size: 13px; }

/* Biene + Suche in einem Feld */
#chat-form button { white-space: nowrap; }
@media (max-width: 760px) {
  #chat-form { flex-wrap: wrap; }
  #chat-form input { flex: 1 1 100%; }
  #chat-form button { flex: 1; padding-left: 10px !important; padding-right: 10px !important; min-width: 0; }
  #chat-form #chat-neu { flex: 0 0 auto; }
}

/* Eingang: „Zuletzt abgelegt“ ist eingeklappt, aufklappen nur bei Bedarf */
.zuletzt-klappe { margin: 28px 0 10px; }
.zuletzt-klappe > summary { display: flex; align-items: baseline; gap: 10px; cursor: pointer; list-style: none; font-size: 17px; font-weight: 700; padding: 6px 0; }
.zuletzt-klappe > summary::-webkit-details-marker { display: none; }
.zuletzt-klappe > summary::before { content: '›'; display: inline-block; color: var(--leise); transition: transform .15s; }
.zuletzt-klappe[open] > summary::before { transform: rotate(90deg); }
.zuletzt-klappe > .liste { margin-top: 10px; }

/* Steuer-Checkliste (Dokumente → Steuer) */
.st-kopf { display: grid; gap: 10px; }
.st-jahr { display: flex; align-items: center; gap: 10px; }
.st-jahr h3 { margin: 0; flex: 1; }
.st-balken { height: 10px; border-radius: 6px; background: var(--glas-rand); overflow: hidden; }
.st-balken span { display: block; height: 100%; background: linear-gradient(90deg, #f6b73c, #f08a24); border-radius: 6px; transition: width .3s; }
.st-liste { display: grid; gap: 2px; padding: 0 12px 6px; }
.st-punkt { padding: 10px 6px; border-top: 1px solid var(--glas-rand); }
.st-punkt:first-child { border-top: 0; }
.st-zeile { display: flex; align-items: flex-start; gap: 12px; }
.st-haken { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--leise); background: none; color: var(--leise); font-weight: 700; cursor: pointer; padding: 0; }

.st-haken.entfaellt { border-style: dashed; background: none !important; color: var(--leise) !important; border-color: var(--leise) !important; }
.st-text { flex: 1; min-width: 0; }
.st-punkt.erledigt .st-text b { opacity: .7; }
.st-punkt.entfaellt .st-text b { text-decoration: line-through; }
.st-marke { margin-left: 8px; font-size: 11px; padding: 1px 7px; border-radius: 10px; background: rgba(240, 138, 36, .15); color: #c76a12; vertical-align: middle; }
.st-aktionen { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.st-aktionen label { cursor: pointer; }
.st-belege { margin: 6px 0 0 42px; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 14px; }
.st-belege li { display: flex; align-items: center; gap: 8px; }
.st-vorschlaege { margin: 6px 0 0 42px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.st-suche { margin: 8px 0 0 42px; display: grid; gap: 6px; }
.st-suchzeile { display: flex; gap: 6px; }
.st-suchzeile input { flex: 1; }
.st-treffer { display: grid; gap: 4px; max-height: 260px; overflow: auto; }
.st-treffer-zeile { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.st-neu { margin: 0 18px 14px; }
@media (max-width: 760px) {
  .st-zeile { flex-wrap: wrap; }
  .st-aktionen { width: 100%; justify-content: flex-start; padding-left: 42px; }
}
/* Mit „Familie“ und „Steuer“ sind es sechs Reiter: auf dem Handy waagerecht wischen statt Namen umbrechen */
.personen-wahl { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.personen-wahl::-webkit-scrollbar { display: none; }
.personen-wahl button { white-space: nowrap; padding-left: 14px; padding-right: 14px; }
button.st-haken { background: none !important; box-shadow: none !important; border: 2px solid var(--leise) !important; color: var(--leise) !important; }
.st-punkt.erledigt button.st-haken { background: #2f9e5a !important; border-color: #2f9e5a !important; color: #fff !important; }
.st-punkt.entfaellt button.st-haken { background: none !important; border-style: dashed !important; border-color: var(--leise) !important; color: var(--leise) !important; }

/* Seitenleiste einklappbar (PC und Handy quer); Handy hochkant nutzt weiter die Leiste unten */
.leiste-auf { display: none; }
.seitenleiste .marke > div { flex: 1; min-width: 0; }
button.leiste-zu { flex: none; width: 34px; height: 34px; padding: 0; justify-content: center; border-radius: 10px; font-size: 18px; background: var(--leiste-kachel) !important; color: var(--leiste-text) !important; border: 1px solid var(--glas-rand); box-shadow: none !important; }
@media (min-width: 761px) {
  body.leiste-eingeklappt .rahmen { grid-template-columns: 1fr; }
  body.leiste-eingeklappt .seitenleiste { display: none; }
  body.leiste-eingeklappt main { padding-left: 72px; }
  body.leiste-eingeklappt button.leiste-auf { display: inline-flex; position: fixed; top: 14px; left: 14px; z-index: 30; width: 44px; height: 44px; padding: 0; justify-content: center; font-size: 22px; border-radius: 12px;
    background: var(--leiste) !important; color: var(--leiste-text) !important; border: 1px solid var(--glas-rand); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: 0 4px 14px rgba(0, 0, 0, .18) !important; }
}

/* iPhone/iPad: Milchglas auf vielen Flächen lässt Safari nach einem App-Wechsel (z. B. Diktieren mit Wispr Flow)
   schwarz zeichnen. Auf Touch-Geräten daher fast deckende Flächen ohne Weichzeichner; nur die Leiste unten bleibt Glas. */
@media (hover: none) and (pointer: coarse) {
  body { background-attachment: scroll; }
  .karte, .liste > li, .hilfe-karte, .ios-liste, .immo-karte, .kachel, .hinweisbox, .grosser-knopf, .dokkarte,
  .nachricht.biene, .faq details, .chip, button.leise, .leise-link, dialog, .anmelde-karte, .pt-label, .nb-menue {
    background: var(--flaeche-stark);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
/* nach der Rückkehr in die App einmal neu zeichnen lassen (siehe app.js) */
html.neu-zeichnen body { opacity: .999; }

/* ---------- Dokument-Scanner ---------- */
dialog.scanner { width: min(900px, 100vw); height: min(100dvh, 960px); max-width: 100vw; max-height: 100dvh; background: #111 !important; color: #f2f2f2; }
dialog.scanner .vorschau-kopf { border-color: rgba(255, 255, 255, .12); }
dialog.scanner .vorschau-kopf .meta { display: block; font-size: 13px; color: #c9c9cf; margin-top: 2px; }
.scan-buehne { flex: 1; min-height: 0; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.scan-flaeche { position: relative; touch-action: none; }
.scan-bild { width: 100%; height: 100%; display: block; }
.scan-rahmen { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.scan-abdunkeln { fill: rgba(0, 0, 0, .45); }
.scan-linie { fill: none; stroke: #ffb000; stroke-width: 2.5; stroke-linejoin: round; }
.scan-griff { position: absolute; left: -24px; top: -24px; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; touch-action: none; cursor: grab; }
.scan-griff span { width: 22px; height: 22px; border-radius: 50%; border: 3px solid #ffb000; background: rgba(255, 176, 0, .25); box-shadow: 0 0 0 2px rgba(0, 0, 0, .35); }
.scan-griff.zieht span { background: rgba(255, 176, 0, .55); transform: scale(1.15); }
.scan-lupe { position: absolute; left: 0; top: 0; width: 120px; height: 120px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, .5); pointer-events: none; }
.scan-ergebnis { max-width: calc(100% - 24px); max-height: calc(100% - 24px); box-shadow: 0 6px 30px rgba(0, 0, 0, .6); background: #fff; }
.scan-warten { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .55); font-weight: 600; text-align: center; padding: 20px; }
.scan-seiten { display: flex; gap: 8px; overflow-x: auto; padding: 8px 12px 0; }
.scan-seite { position: relative; flex: none; }
.scan-seite img { height: 64px; display: block; border-radius: 4px; border: 2px solid transparent; cursor: pointer; }
.scan-seite.aktiv img { border-color: #ffb000; }
.scan-seite button { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; padding: 0; justify-content: center; border-radius: 50%; font-size: 11px; }
.scan-fuss { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
.scan-fuss[hidden], .scan-warten[hidden], .scan-seiten[hidden], .scan-flaeche[hidden], .scan-ergebnis[hidden] { display: none; }
.scan-luecke { flex: 1; }
.scan-modus { font: inherit; padding: 9px 10px; border-radius: 12px; border: 1px solid var(--rand); background: var(--feld); color: var(--text); }
@media (max-width: 760px) {
  dialog.scanner { width: 100vw; height: 100dvh; border-radius: 0; }
  .scan-fuss button { padding: 10px 12px; }
}

/* ---------- Biene per Sprache ---------- */
#chat-mikro[data-zustand="hoert"] { background: var(--rot) !important; color: #fff !important; border-color: transparent; animation: mikro-puls 1.4s ease-in-out infinite; }
#chat-mikro[data-zustand="erkennt"], #chat-mikro[data-zustand="denkt"], #chat-mikro[data-zustand="spricht"] { background: var(--honig-hell) !important; }
#chat-vorlesen.an { background: var(--honig-hell) !important; }
#chat-form { flex-wrap: wrap; }
#chat-form input { min-width: 180px; }
@keyframes mikro-puls { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 59, 48, .5); } 50% { box-shadow: 0 0 0 8px rgba(255, 59, 48, 0); } }
@media (max-width: 760px) {
  /* Handy: „Suchen“ und „Biene fragen“ in voller Breite, die kleinen Knöpfe in eine eigene Zeile darunter */
  #chat-form #knopf-suchen, #chat-form #knopf-biene { flex: 1 1 45%; }
  #chat-form #chat-mikro, #chat-form #chat-vorlesen, #chat-form #chat-gedaechtnis, #chat-form #chat-neu { flex: 1 1 20%; }
}

/* Live-Kamera des Scanners */
.kamera-buehne { background: #000; }
.kamera-flaeche { position: relative; }
.kamera-video { width: 100%; height: 100%; display: block; object-fit: fill; }
.kamera-abdunkeln { fill: rgba(0, 0, 0, .35); }
.kamera-linie { fill: rgba(255, 176, 0, .12); stroke: #ffb000; stroke-width: 3; stroke-linejoin: round; transition: stroke .2s, fill .2s; }
.kamera-linie.ruhig { stroke: #34c759; fill: rgba(52, 199, 89, .18); }
.kamera-hinweis { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); max-width: calc(100% - 24px); padding: 7px 14px; border-radius: 999px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 14px; font-weight: 600; text-align: center; pointer-events: none; }
.kamera-blitz { position: absolute; inset: 0; background: #fff; animation: kamera-blitz .35s ease-out forwards; pointer-events: none; }
.kamera-blitz[hidden] { display: none; }
@keyframes kamera-blitz { from { opacity: .85; } to { opacity: 0; } }
.kamera-fuss { justify-content: center; }
.kamera-fuss > button.leise { min-width: 84px; justify-content: center; }
.kamera-fuss button.an { background: #ffb000; color: #111; }
dialog.kamera .kamera-ausloeser { --fortschritt: 0; flex: none; width: 72px; height: 72px; padding: 0; border-radius: 50%; justify-content: center; border: 0; box-shadow: none;
  background: conic-gradient(#34c759 calc(var(--fortschritt) * 360deg), rgba(255, 255, 255, .85) 0); }
.kamera-ausloeser span { flex: none; width: 58px; height: 58px; border-radius: 50%; background: #fff; border: 3px solid #111; transition: transform .1s; }
.kamera-ausloeser:active span { transform: scale(.9); }
.kamera-ausloeser:disabled { opacity: .35; }

/* Passwort-Tresor: Zugangsdaten vom Foto */
.tresor-foto-info:empty { display: none; }
.tresor-foto-info { margin-top: 6px; }
.tresor-foto-wahl { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }