:root{
  --papier:#FBFAF6; --flaeche:#FFFFFF; --flaeche2:#F3F0E9;
  --text:#1B1D1F; --text2:#4B5057; --linie:#DED9CE;
  --akzent:#0E5E5B; --akzent-text:#FFFFFF;
  --warn:#8E5410; --alarm:#8C2F2F; --gut:#0A8F5D;
  --tab:64px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --papier:#131619; --flaeche:#1A1E22; --flaeche2:#22262B;
    --text:#ECE9E3; --text2:#B4B9C0; --linie:#2E333A;
    --akzent:#54C6BF; --akzent-text:#10322F;
    --warn:#DDA35A; --alarm:#E39191; --gut:#5BD3A0;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --papier:#131619; --flaeche:#1A1E22; --flaeche2:#22262B;
  --text:#ECE9E3; --text2:#B4B9C0; --linie:#2E333A;
  --akzent:#54C6BF; --akzent-text:#10322F;
  --warn:#DDA35A; --alarm:#E39191; --gut:#5BD3A0;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{margin:0;background:var(--papier);color:var(--text);
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-text-size-adjust:100%}
.inhalt{padding:16px 16px calc(env(safe-area-inset-bottom) + 24px);
  max-width:760px;margin-inline:auto}
h1{font-size:1.5rem;line-height:1.2;margin:8px 0 16px;text-wrap:balance}
h2{font-size:1.15rem;line-height:1.25;margin:22px 0 10px;text-wrap:balance}
a{color:var(--akzent)}
.formular{display:flex;flex-direction:column;gap:14px;max-width:420px}
.formular label{display:flex;flex-direction:column;gap:6px;font-size:.9rem;color:var(--text2)}
input,select,textarea,button{font:inherit;min-height:44px;border-radius:10px}
input,select,textarea{padding:10px 12px;border:1px solid var(--linie);
  background:var(--flaeche);color:var(--text);width:100%}
textarea{min-height:88px}
button{border:0;background:var(--akzent);color:var(--akzent-text);
  padding:12px 18px;font-weight:600;cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--akzent);outline-offset:2px}
.hinweis{padding:10px 12px;border-radius:10px;background:var(--flaeche2)}
.hinweis.fehler{background:#F6E2E0;color:#8C2F2F}
.tableiste{position:sticky;left:0;right:0;top:0;z-index:30;
  display:flex;gap:6px;overflow-x:auto;background:color-mix(in srgb,var(--flaeche) 94%,transparent);
  border-bottom:1px solid var(--linie);padding:calc(env(safe-area-inset-top) + 8px) 10px 8px;
  backdrop-filter:blur(18px);-webkit-overflow-scrolling:touch;scrollbar-width:none}
.tableiste::-webkit-scrollbar{display:none}
.tableiste a{flex:1 0 74px;display:flex;align-items:center;justify-content:center;
  min-height:54px;text-decoration:none;color:var(--text2);
  font-size:.68rem;font-weight:700;border-radius:12px}
.tableiste a[aria-current="page"]{color:var(--akzent);background:var(--flaeche2)}
.zaehlerzeile{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px;padding:0}
.abzeichen{display:inline-block;padding:4px 10px;border-radius:999px;
  font-size:.78rem;font-weight:600;background:var(--flaeche2);color:var(--text2)}
.abzeichen.in_arbeit,.abzeichen.arbeit{background:#F7EAD6;color:#8E5410}
.abzeichen.gemeldet{background:#DDEBE9;color:#0E5E5B}
.abzeichen.erledigt{background:#DFF3E7;color:#0A6B45}
.filterleiste{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.chip{flex:0 0 auto;padding:9px 14px;border-radius:999px;text-decoration:none;
  border:1px solid var(--linie);color:var(--text2);background:var(--flaeche);
  font-size:.85rem;font-weight:600;min-height:40px;display:flex;align-items:center}
.chip.aktiv{background:var(--akzent);color:var(--akzent-text);border-color:var(--akzent)}
.karten{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.karte{background:var(--flaeche);border:1px solid var(--linie);border-radius:12px;overflow:hidden}
.karte>a{display:flex;flex-direction:column;gap:6px;padding:14px;
  text-decoration:none;color:var(--text);border-left:4px solid transparent}
.karte.prio-hoch>a{border-left-color:var(--warn)}
.karte.prio-kritisch>a{border-left-color:var(--alarm)}
.karte-kopf{display:flex;justify-content:space-between;align-items:center;gap:8px}
.karte .nr{font-size:.8rem;color:var(--text2);font-variant-numeric:tabular-nums}
.karte .titel{font-weight:600;line-height:1.35}
.karte-fuss{display:flex;gap:10px;flex-wrap:wrap;font-size:.82rem;color:var(--text2)}
.gewerk::before{content:"";display:inline-block;width:9px;height:9px;border-radius:3px;
  background:var(--g,#888);margin-right:6px}
.knopf-schwebend{position:fixed;right:16px;
  bottom:calc(env(safe-area-inset-bottom) + 16px);
  width:56px;height:56px;border-radius:50%;background:var(--akzent);color:var(--akzent-text);
  display:flex;align-items:center;justify-content:center;font-size:1.9rem;
  text-decoration:none;box-shadow:0 6px 18px rgba(0,0,0,.22);z-index:15}
.formular.quer{flex-direction:row;flex-wrap:wrap;max-width:none;align-items:flex-end}
.daten{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:.9rem;margin:16px 0}
.daten dt{color:var(--text2)}
.daten dd{margin:0}
.beschreibung{background:var(--flaeche);border:1px solid var(--linie);
  border-radius:12px;padding:14px;margin:14px 0}
.verlauf{list-style:none;margin:14px 0;padding:0;display:flex;flex-direction:column;gap:10px}
.verlauf li{background:var(--flaeche);border:1px solid var(--linie);border-radius:12px;padding:12px}
.verlauf li.system{background:transparent;border-style:dashed;color:var(--text2);font-size:.86rem}
.verlauf li p{margin:0}
.verlauf-kopf{display:flex;justify-content:space-between;gap:10px;
  font-size:.8rem;color:var(--text2);margin-bottom:4px!important}
.tagkopf{font-size:.85rem;margin:20px 0 8px;color:var(--text2);
  text-transform:uppercase;letter-spacing:.06em}
.kopierbar{display:block;word-break:break-all;background:var(--flaeche2);
  padding:12px;border-radius:10px;font-size:.85rem;font-family:ui-monospace,Menlo,monospace}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* --- Oberflaeche Vorgaenge, Termine, Nebenseiten --- */
.seitenkopf{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.seitenkopf h1{margin-bottom:12px}
.knopf{display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  padding:10px 16px;border-radius:10px;background:var(--akzent);color:var(--akzent-text);
  text-decoration:none;font-weight:600;border:0;cursor:pointer}
.knopf.still{background:var(--flaeche);color:var(--text2);border:1px solid var(--linie)}
.knopf.gut{background:var(--gut);color:#fff}
.knopf.warn{background:var(--flaeche);color:var(--alarm);border:1px solid var(--linie)}

.zaehler{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 14px}
.zaehler .zelle{display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:10px 4px;border-radius:12px;background:var(--flaeche);border:1px solid var(--linie);
  text-decoration:none;color:var(--text2)}
.zaehler .zelle.aktiv{border-color:var(--akzent);color:var(--akzent)}
.zaehler b{font-size:1.25rem;color:var(--text);font-variant-numeric:tabular-nums}
.zaehler span{font-size:.72rem;text-align:center}

.filter{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:16px}
.filter input[type=search]{flex:1 1 160px;width:auto}
.filter select{flex:1 1 140px;width:auto}
.filter button{min-height:44px;padding:10px 16px}
.filter .schalter{display:flex;align-items:center;gap:6px;font-size:.85rem;color:var(--text2)}
.filter .schalter input{width:auto;min-height:0}
.zuruecksetzen{font-size:.85rem}

.liste{display:flex;flex-direction:column;gap:10px}
.liste-schmal{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
a.karte{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--text)}
.karte{padding:14px;display:flex;flex-direction:column;gap:6px}
.karte.gross{gap:8px;margin-bottom:16px}
.karte.gross h2{margin:0}
.karte .beschreibung{background:transparent;border:0;padding:0;margin:4px 0 0;color:var(--text2)}
.leerzustand{color:var(--text2);padding:18px 0}
.klein{font-size:.85rem;color:var(--text2)}

.badge{display:inline-block;padding:3px 9px;border-radius:999px;
  font-size:.75rem;font-weight:700;background:var(--flaeche2);color:var(--text2)}
.badge.s-in_arbeit{background:#F7EAD6;color:#8E5410}
.badge.s-gemeldet{background:#DDEBE9;color:#0E5E5B}
.badge.s-erledigt{background:#DFF3E7;color:#0A6B45}
.badge.p-hoch{background:#F7EAD6;color:#8E5410}
.badge.p-kritisch{background:#F6E2E0;color:#8C2F2F}
.badge.ki{background:#D8EFEA;color:#0E5E5B;border:1px solid color-mix(in srgb,var(--akzent) 30%,transparent)}

.status-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0 16px}
.status-raster span{display:flex;flex-direction:column;gap:2px;padding:10px;border-radius:12px;background:var(--flaeche2)}
.status-raster strong{font-size:.92rem;line-height:1.2;overflow-wrap:anywhere}
.status-raster small{font-size:.72rem;color:var(--text2)}
@media (max-width:560px){.status-raster{grid-template-columns:1fr 1fr}}

.karte-kopf .chip,.karte-fuss .chip{flex:0 0 auto;min-height:0;padding:3px 10px;
  font-size:.78rem;font-weight:600;border-radius:999px;border:0;
  background:color-mix(in srgb,var(--chip,#8895a6) 18%,var(--flaeche));
  color:var(--chip,var(--text2))}
.karte-fuss .chip.leer{background:var(--flaeche2);color:var(--text2)}
.faellig{font-variant-numeric:tabular-nums}
.faellig.spaet{color:var(--alarm);font-weight:600}
.zeit{font-variant-numeric:tabular-nums;font-weight:600;color:var(--text)}

.aktionen{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 18px}
.aktionen form{margin:0}
.formular.schmal{max-width:none}
.kommentare{margin-top:8px}
.kommentar{background:var(--flaeche);border:1px solid var(--linie);
  border-radius:12px;padding:12px;margin-bottom:10px}
.kommentar.system{background:transparent;border-style:dashed;color:var(--text2);font-size:.86rem}
.kommentar p{margin:0}
.kommentar .kopf{display:flex;justify-content:space-between;gap:10px;
  font-size:.8rem;color:var(--text2);margin-bottom:4px}

.kopierfeld{display:flex;gap:8px;align-items:stretch}
.kopierfeld input{font-family:ui-monospace,Menlo,monospace;font-size:.8rem}
.kopierfeld button{flex:0 0 auto;padding:10px 14px}

.passkey-login{max-width:420px;margin-top:18px}
.trennlinie{display:flex;align-items:center;gap:12px;margin:12px 0;color:var(--text2);font-size:.8rem}
.trennlinie::before,.trennlinie::after{content:"";height:1px;flex:1;background:var(--linie)}
.passkey-knopf{background:#173B38;color:#fff}
.passkey-liste{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.passkey-eintrag{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 12px;border-radius:12px;background:var(--flaeche2)}
.passkey-eintrag>div{display:flex;flex-direction:column;min-width:0}
.passkey-eintrag small{color:var(--text2);font-size:.75rem}
.passkey-eintrag form{margin:0;flex:0 0 auto}
.passkey-eintrag button{min-height:38px;padding:7px 11px;font-size:.8rem}

/* --- Breitensperre ---------------------------------------------------
   Eingabefelder in Flex-Zeilen wachsen sonst mit ihrem Inhalt und machen
   die ganze Seite breiter als das Telefon. Dann wird rechts alles
   abgeschnitten, auch der letzte Tab. */
html,body{max-width:100%;overflow-x:hidden}
.inhalt{width:100%}
.filter,.kopierfeld,.karte,.karte-kopf,.karte-fuss,.aktionen,.seitenkopf,.zaehler{min-width:0}
.filter>*,.kopierfeld>*,.karte-kopf>*,.karte-fuss>*{min-width:0}
.filter input[type=search],.filter select{flex:1 1 8rem;width:auto;min-width:0}
.kopierfeld input{flex:1 1 auto;width:auto;min-width:0}
input,select,textarea{max-width:100%}
.karte .titel,.beschreibung,.kommentar p{overflow-wrap:anywhere}
.zaehler .zelle{min-width:0;padding:10px 2px}
.zaehler span{font-size:.68rem;line-height:1.15}

/* --- Startseite ------------------------------------------------------ */
.start-kopf{margin:4px 0 18px}
.ueberzeile{margin:0;font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;color:var(--text2)}
.start-kopf h1{margin:2px 0 0}
.app-meta{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 0;color:var(--text2);font-size:.82rem}
.app-meta span{padding:4px 9px;border-radius:999px;background:var(--flaeche2)}
.changelog-liste{margin:0;padding-left:1.2rem;color:var(--text2)}
.changelog-liste li{margin:6px 0}

.kosten-hero strong{display:block;font-size:1.8rem;line-height:1.15;margin:4px 0;
  font-variant-numeric:tabular-nums}
.kosten-gewerk .karte-kopf>div{display:flex;align-items:center;gap:8px;min-width:0}
.kosten-werte{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:6px}
.kosten-werte span{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:12px;
  background:var(--flaeche2);color:var(--text2);font-size:.78rem}
.kosten-werte b{font-size:.92rem;color:var(--text);font-variant-numeric:tabular-nums}
@media (max-width:560px){.kosten-werte{grid-template-columns:1fr}}

.grosskachel{position:relative;display:flex;flex-direction:column;gap:6px;
  padding:18px 52px 18px 18px;border-radius:16px;text-decoration:none;
  background:var(--akzent);color:var(--akzent-text);margin-bottom:26px}
.gk-titel{font-size:1.1rem;font-weight:700}
.gk-text{font-size:.85rem;opacity:.85;line-height:1.4}
.gk-pfeil{position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:1.5rem}

.block{margin-bottom:26px}
.block-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px}
.block-kopf h2{margin:0;font-size:1.02rem}
.block-kopf a{font-size:.85rem;text-decoration:none}
.knopf.breit{display:flex;width:100%;margin-top:10px}
.start-aktionen{display:flex;gap:8px;flex-wrap:wrap}
.start-aktionen .knopf{flex:1 1 180px}
.unterlagen-start{padding:12px 0}

.leerkasten{border:1px dashed var(--linie);border-radius:14px;padding:20px;
  display:flex;flex-direction:column;gap:8px;margin:6px 0 18px}
.leerkasten p{margin:0}

/* --- Statusreiter ---------------------------------------------------- */
.reiter{display:flex;gap:8px;overflow-x:auto;margin:0 -16px 16px;padding:0 16px 4px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.reiter::-webkit-scrollbar{display:none}
.reiter-el{flex:0 0 auto;display:flex;align-items:center;gap:6px;min-height:38px;
  padding:8px 14px;border-radius:999px;text-decoration:none;font-size:.88rem;font-weight:600;
  border:1px solid var(--linie);background:var(--flaeche);color:var(--text2)}
.reiter-el.aktiv{background:var(--akzent);border-color:var(--akzent);color:var(--akzent-text)}
.reiter-el b{font-variant-numeric:tabular-nums;opacity:.75}

.suchbereich{margin-bottom:14px}
.suchbereich summary,.mehrfelder summary{cursor:pointer;color:var(--text2);
  font-size:.88rem;padding:10px 0;min-height:44px;display:flex;align-items:center}
.suchbereich .filter{margin-top:4px}
.mehrfelder{border-top:1px solid var(--linie);margin-top:6px}
.mehrfelder[open]{padding-bottom:8px}
.mehrfelder summary{font-weight:600}
.mehrfelder label{margin-top:12px}

/* --- Punkte nach Gewerk und Prioritaet ------------------------------ */
.punkte-gewerke{display:flex;flex-direction:column;gap:24px}
.punkte-gewerk{min-width:0}
.punkte-gewerk-kopf{display:flex;align-items:center;gap:10px;margin:0 0 12px;
  padding-bottom:9px;border-bottom:1px solid var(--linie)}
.punkte-gewerk-marke{width:5px;height:28px;border-radius:999px;background:var(--gewerk-farbe)}
.punkte-gewerk-kopf h2{min-width:0;margin:0;font-size:1.08rem;overflow-wrap:anywhere}
.punkte-gewerk-kopf>span:last-child{margin-left:auto;min-width:28px;padding:3px 8px;
  border-radius:999px;background:var(--flaeche2);color:var(--text2);font-size:.75rem;
  font-weight:700;text-align:center;font-variant-numeric:tabular-nums}
.punkte-prioritaet{margin:0 0 16px;padding-left:12px;border-left:2px solid var(--linie)}
.punkte-prioritaet.p-kritisch{border-left-color:#B74242}
.punkte-prioritaet.p-hoch{border-left-color:#B8751A}
.punkte-prioritaet h3{display:flex;align-items:center;gap:7px;margin:0 0 8px;
  color:var(--text2);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase}
.punkte-prioritaet h3 small{display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:22px;border-radius:999px;background:var(--flaeche2);
  color:var(--text2);font-size:.7rem;letter-spacing:0}
@media (max-width:560px){
  .punkte-gewerke{gap:20px}
  .punkte-prioritaet{padding-left:8px}
}

/* --- Tab-Leiste mit Symbolen ----------------------------------------- */
.tableiste a{flex-direction:column;gap:3px}
.tableiste svg{width:23px;height:23px}

/* --- Ordnerrechte ----------------------------------------------------- */
.ordnerwahl{border:1px solid var(--linie);border-radius:12px;padding:0 14px}
.ordnerwahl summary{font-weight:600;font-size:.9rem}
.ordnerwahl[open]{padding-bottom:14px}
.hakenliste{display:flex;flex-direction:column;gap:2px;margin:6px 0 12px}
.haken{display:flex!important;flex-direction:row!important;align-items:center;gap:10px;
  min-height:40px;font-size:.9rem;color:var(--text)}
.haken input{width:22px;height:22px;min-height:0;flex:0 0 auto;accent-color:var(--akzent)}
.rechte-raster .haken{align-items:flex-start;padding:7px 0}
.rechte-raster span{display:flex;flex-direction:column;gap:1px;min-width:0}
.rechte-raster strong{font-size:.92rem;color:var(--text)}
.rechte-raster small{font-size:.78rem;line-height:1.35;color:var(--text2)}

/* --- PWA-Hinweise ---------------------------------------------------- */
.install-hilfe{border:1px solid var(--linie);border-radius:12px;padding:14px;
  background:var(--flaeche);margin:12px 0 18px}
.install-hilfe h2{margin:0 0 6px;font-size:1rem}
.install-hilfe p{margin:0;color:var(--text2);font-size:.9rem}
.install-banner,.ios-install{position:fixed;left:12px;right:12px;bottom:calc(var(--tab) + env(safe-area-inset-bottom) + 12px);
  z-index:50;display:none;gap:10px;align-items:center;padding:12px;border:1px solid var(--linie);
  border-radius:12px;background:var(--flaeche);box-shadow:0 10px 32px rgba(0,0,0,.22)}
.update-banner{position:fixed;left:12px;right:12px;top:calc(env(safe-area-inset-top) + 12px);
  z-index:70;display:none;padding:12px 14px;border-radius:12px;background:var(--akzent);
  color:var(--akzent-text);font-weight:700;box-shadow:0 10px 32px rgba(0,0,0,.24)}
.update-banner.sichtbar{display:block}
.install-banner.sichtbar,.ios-install.sichtbar{display:flex}
.install-banner div,.ios-install{min-width:0}
.install-banner .pwa-icon{width:44px;height:44px;border-radius:12px;flex:0 0 auto}
.install-banner strong,.ios-install strong{display:block;font-size:.92rem}
.install-banner span,.ios-install span{display:block;font-size:.8rem;color:var(--text2);line-height:1.35}
.install-banner button{flex:0 0 auto;min-height:38px;padding:8px 10px;font-size:.82rem}
.install-banner button.still,.install-schliessen{background:var(--flaeche2);color:var(--text2)}
.ios-install{bottom:0;left:0;right:0;z-index:80;flex-direction:column;align-items:flex-start;
  padding:16px 56px calc(env(safe-area-inset-bottom) + 28px) 16px;border:0;border-radius:18px 18px 0 0;
  background:linear-gradient(135deg,#15312f,#0E5E5B);color:#fff;
  box-shadow:0 -10px 34px rgba(0,0,0,.38);transform:translateY(115%);
  transition:transform .28s ease}
.ios-install.sichtbar{transform:translateY(0)}
.ios-install span{color:rgba(255,255,255,.78)}
.install-schliessen{position:absolute;right:10px;top:10px;min-height:34px;padding:6px 9px;font-size:.78rem}
.ios-install .install-schliessen{background:rgba(255,255,255,.12);color:#fff}
.ios-install-pfeil{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom) + 3px);
  transform:translateX(-50%);font-size:28px;font-weight:900;line-height:1;color:#fff;
  text-shadow:0 4px 14px rgba(0,0,0,.35);animation:pwa-pfeil-huepft .8s infinite alternate}
@keyframes pwa-pfeil-huepft{
  from{transform:translateX(-50%) translateY(0)}
  to{transform:translateX(-50%) translateY(-7px)}
}

/* --- Monatsansicht ---------------------------------------------------- */
.monatskopf{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.monatskopf strong{font-size:1.05rem}
.knopf.schmal{padding:8px 14px;min-height:40px;font-size:1.1rem;line-height:1}
.monat{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:22px}
.wtag{text-align:center;font-size:.7rem;color:var(--text2);padding:4px 0;font-weight:600}
.tag{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;aspect-ratio:1;border-radius:10px;text-decoration:none;color:var(--text);
  background:var(--flaeche);border:1px solid var(--linie);font-size:.9rem}
.tag.leer{background:transparent;border-color:transparent}
.tag.heute{border-color:var(--akzent);color:var(--akzent);font-weight:700}
.tag.hat{background:var(--flaeche2)}
.tag .punkte{display:flex;gap:2px}
.tag .punkte i{width:4px;height:4px;border-radius:50%;background:var(--akzent)}
.zeitpaar{display:flex;gap:12px}
.zeitpaar label{flex:1 1 0;min-width:0}
.termin-aktionen{align-items:center}
.termin-aktionen form{margin:0}
.link-knopf{min-height:0;padding:0;border:0;border-radius:0;background:transparent;color:var(--akzent);
  font:inherit;font-weight:700;text-decoration:underline;cursor:pointer}
.warn-text{color:#A33A32}

/* --- To-do ------------------------------------------------------------ */
.todo-neu{max-width:none;margin-bottom:16px}
.todo-neu .todo-titel input{font-size:1rem}
.todo{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:start}
.todo form{margin:0}
.todo-check{width:36px;height:36px;min-height:36px;border-radius:50%;padding:0;
  border:2px solid var(--akzent);background:var(--flaeche);color:var(--akzent);font-weight:800}
.todo.erledigt .todo-inhalt{opacity:.62}
.todo.erledigt .titel{text-decoration:line-through}
.todo-loeschen{width:36px;height:36px;min-height:36px;padding:0;border-radius:50%;
  background:var(--flaeche2);color:var(--text2);font-size:1.1rem}
.todo-inhalt{min-width:0}
.berechtigungszeile{display:flex;gap:8px;flex-wrap:wrap}
.home-link{display:inline-flex;align-items:center;min-height:36px;margin:0 0 8px;
  color:var(--text2);font-size:.86rem;text-decoration:none}
.home-link::before{content:"←";margin-right:6px}
.foto-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px;margin-top:10px}
.foto-raster a{display:block;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--flaeche2)}
.foto-raster img{width:100%;height:100%;object-fit:cover;display:block}
.blog-form{max-width:none;margin:0 0 14px}
.blog-liste article p,.tagebuch article p{margin:4px 0}
.dateizeile{gap:8px}
.datei-link{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;align-items:center;
  color:var(--text);text-decoration:none}
.dateizeile .datei-icon{grid-row:1/3;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:10px;background:var(--flaeche2);color:var(--text2);
  font-size:.72rem;font-weight:800;text-transform:uppercase}
.dateizeile .datei-name{font-weight:700;overflow-wrap:anywhere}
.dateizeile .karte-fuss{font-size:.78rem}
.datei-aktionen{border-top:1px solid var(--linie);padding-top:8px}
.datei-aktionen summary{cursor:pointer;color:var(--text2);font-size:.85rem}
.datei-aktionen form{margin-top:8px}
.datei-viewer{height:calc(100dvh - var(--tab) - 110px);min-height:420px;border:1px solid var(--linie);
  border-radius:12px;overflow:hidden;background:var(--flaeche)}
.datei-viewer iframe{width:100%;height:100%;border:0;background:#fff}
.datei-viewer img{width:100%;height:100%;object-fit:contain;background:#111}
.upload-kachel{margin-bottom:16px}

/* --- Verwaltung ------------------------------------------------------ */
.inhalt:has(.verwaltung-seite){max-width:1180px}
.verwaltung-seite{width:100%;max-width:1180px;margin-inline:auto}
.verwaltung-seite .karte{overflow:hidden}
.verwaltung-seite .formular{max-width:none}
.admin-panel h2{margin:0}
.ich-bin strong{font-size:1.15rem}
.konto-passwort summary{cursor:pointer;color:var(--text2);font-weight:700;padding-top:4px}
.admin-passwort{max-width:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));align-items:end;margin-top:10px}
.admin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;align-items:end;max-width:none;width:100%}
.einladung-grid{grid-template-columns:minmax(130px,.7fr) minmax(150px,.8fr) minmax(260px,1.6fr) minmax(190px,1fr) minmax(240px,1.3fr)}
.benutzer-grid{grid-template-columns:minmax(160px,.8fr) minmax(240px,1.2fr) minmax(190px,.9fr) minmax(240px,1.2fr) auto}
.admin-grid button{white-space:nowrap}
.benutzerkarte{display:flex;flex-direction:column;gap:10px}
.benutzerkarte>.titel{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.benutzerkarte>.karte-fuss{margin-bottom:2px}
.rechte-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:8px}
.rechte-raster .haken{border:1px solid var(--linie);border-radius:10px;padding:10px;background:var(--flaeche)}
.rechte-raster .recht-kompakt{min-height:74px}

@media (max-width:1180px){
  .einladung-grid,.benutzer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  .verwaltung-seite{max-width:none;margin-inline:0}
  .admin-grid,.einladung-grid,.benutzer-grid,.admin-passwort{grid-template-columns:1fr}
  .rechte-raster{grid-template-columns:1fr}
  .install-banner{bottom:calc(env(safe-area-inset-bottom) + 10px)}
  .ios-install{bottom:0}
}