/* Tageswerk – Aussehen
   Farben und Abstände stehen als Variablen ganz oben (:root).
   Wer das Aussehen anpassen will, ändert am besten nur die.
   Aufbau: Grundlagen → Bausteine → Ansichten → mobile Anpassungen */

:root{
  --bg:#eef1f5; --card:#ffffff; --ink:#1d2530; --muted:#68727f;
  --line:#dbe1e8; --hover:rgba(29,37,48,.04);
  --accent:#c9860f; --accent-ink:#241a05; --accent-soft:#f6ead0;
  --green:#2e8b61; --red:#c14b4b; --amber:#a97b12;
  --morgen:#e0873c; --mittag:#3d7bbf; --abend:#7b6bd6;
  --shadow:0 1px 2px rgba(29,37,48,.05),0 10px 26px -14px rgba(29,37,48,.16);
  --radius:14px;
}
:root[data-theme=dark]{
  --bg:#12161e; --card:#1a2029; --ink:#e8ecf3; --muted:#8d97a6;
  --line:#2b3340; --hover:rgba(232,236,243,.05);
  --accent:#e3a83c; --accent-ink:#241a05; --accent-soft:#3a2f17;
  --green:#57b184; --red:#e07474; --amber:#d9ab4e;
  --morgen:#efa35c; --mittag:#6aa3dd; --abend:#a396e6;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 12px 30px -14px rgba(0,0,0,.55);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme=light]){
    --bg:#12161e; --card:#1a2029; --ink:#e8ecf3; --muted:#8d97a6;
    --line:#2b3340; --hover:rgba(232,236,243,.05);
    --accent:#e3a83c; --accent-ink:#241a05; --accent-soft:#3a2f17;
    --green:#57b184; --red:#e07474; --amber:#d9ab4e;
    --morgen:#efa35c; --mittag:#6aa3dd; --abend:#a396e6;
    --shadow:0 1px 2px rgba(0,0,0,.5),0 12px 30px -14px rgba(0,0,0,.55);
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:15.5px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  transition:background .3s,color .3s;
}
h1,h2,h3,.datelabel strong{
  font-family:"Avenir Next","Segoe UI Variable Display","Trebuchet MS",system-ui,sans-serif;
  letter-spacing:-.01em;margin:0;
}
.mono{font-family:ui-monospace,"SF Mono","Cascadia Mono",Consolas,Menlo,monospace}
button{font:inherit;cursor:pointer;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.app{max-width:680px;margin:0 auto;padding:22px 16px 96px}

/* ---------- Kopf ---------- */
header{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:16px}
.eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:0 0 2px}
h1{font-size:30px;font-weight:700;line-height:1.05}
.iconbtn{
  border:1px solid var(--line);background:var(--card);border-radius:10px;
  width:38px;height:38px;font-size:16px;box-shadow:var(--shadow);flex:none;
}
.iconbtn:hover{border-color:var(--accent)}
.banner{
  background:var(--accent-soft);border:1px solid var(--accent);color:var(--ink);
  padding:10px 14px;border-radius:12px;font-size:14px;margin:0 0 14px;line-height:1.5;
}
.banner .banner-actions{display:flex;gap:8px;margin-top:9px;flex-wrap:wrap}
.banner .banner-actions button{font-size:13px;padding:7px 12px}

/* ---------- Tabs ---------- */
.tabs{
  display:flex;gap:5px;background:var(--card);border:1px solid var(--line);
  padding:5px;border-radius:999px;box-shadow:var(--shadow);
  position:sticky;top:10px;z-index:5;margin-bottom:18px;
}
.tabs button{
  flex:1;border:0;background:transparent;color:var(--muted);
  font-size:14px;font-weight:600;padding:9px 2px;border-radius:999px;transition:.2s;
  white-space:nowrap;
}
@media (max-width:560px){
  .tabs{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{flex:none;padding:9px 14px}
}
.tabs button.active{background:var(--ink);color:var(--bg)}

/* ---------- Karten & Basiselemente ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}
#view>*{margin:0 0 14px}
.summary .card{margin-bottom:0}
.emptycard{background:var(--card);border:1px dashed var(--line);border-radius:var(--radius);text-align:center;padding:30px 18px;color:var(--muted)}
.emptycard p{margin:0 0 14px}
input[type=text],input[type=number],input[type=email],select{
  background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:10px 12px;font:inherit;color:var(--ink);
}
input[type=text]:focus,input[type=number]:focus,input[type=email]:focus,select:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
button.primary{background:var(--accent);color:var(--accent-ink);border:0;border-radius:10px;padding:10px 16px;font-weight:700}
button.ghost{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:9px 14px}
button.ghost:hover{border-color:var(--accent)}
button.ghost.danger{color:var(--red)}
button.ghost.danger:hover{border-color:var(--red)}
.mini{
  border:1px solid var(--line);background:var(--card);border-radius:8px;
  padding:5px 9px;font-size:12.5px;white-space:nowrap;flex:none;
}
.mini:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- Heute: Datum & Tagesbogen ---------- */
.datenav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.navbtn:disabled{opacity:.3;cursor:default}
.navbtn:disabled:hover{border-color:var(--line)}
.datelabel{text-align:center;flex:1;min-width:0}
.datelabel strong{font-size:20px;display:block}
.datelabel span{color:var(--muted);font-size:12.5px}
.pastnote{text-align:center;color:var(--amber);font-size:13.5px;margin:-2px 0 12px}
.progress-card{padding:14px 16px;margin-bottom:16px}
.progress-top{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;color:var(--muted);margin-bottom:10px}
.progress-top strong{color:var(--ink);font-size:16px}
.barwrap{position:relative;padding:3px 0}
.bar{position:relative;height:14px;border-radius:999px;overflow:hidden;background:var(--line)}
.bar .grad{position:absolute;inset:0;background:linear-gradient(90deg,var(--morgen),var(--mittag) 55%,var(--abend))}
.bar .cover{position:absolute;top:0;right:0;bottom:0;background:var(--card);opacity:.85;transition:width .4s ease}
.sun{
  position:absolute;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#ffe9a8,#f0ac35 72%);
  box-shadow:0 0 0 2px var(--card),0 0 10px rgba(240,172,53,.85);
  transition:left .4s ease;
}
.cheer{margin-top:12px;font-size:14px;color:var(--green);font-weight:600;animation:pop .4s ease}
@keyframes pop{from{transform:scale(.92);opacity:0}}
.dayinfo{text-align:center;color:var(--muted);padding:18px}

/* ---------- Tagesabschnitte ---------- */
.daypart{
  background:var(--card);border:1px solid var(--line);border-left:4px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:14px;overflow:hidden;
}
.daypart[data-part=morgen]{border-left-color:var(--morgen)}
.daypart[data-part=mittag]{border-left-color:var(--mittag)}
.daypart[data-part=abend]{border-left-color:var(--abend)}
.dp-head{display:flex;align-items:center;gap:9px;padding:11px 16px;border-bottom:1px solid var(--line)}
.dp-head h2{font-size:16px;flex:1;font-weight:700}
.dp-count{font-size:12.5px;color:var(--muted)}
.dp-dot{width:10px;height:10px;border-radius:50%;flex:none}
.dot-morgen{background:var(--morgen)}
.dot-mittag{background:var(--mittag)}
.dot-abend{background:var(--abend)}
.dp-empty{padding:12px 16px;color:var(--muted);font-size:14px;font-style:italic}
.habit{
  display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;
  border-bottom:1px solid var(--line);transition:background .15s;position:relative;
}
.habit:last-child{border-bottom:0}
.habit:hover{background:var(--hover)}
.habit input{position:absolute;opacity:0;pointer-events:none}
.box{
  width:24px;height:24px;border:2px solid var(--muted);border-radius:8px;flex:none;
  display:grid;place-items:center;color:#fff;font-size:14px;transition:.18s;
}
.box::after{content:"\2713";transform:scale(0);transition:transform .18s cubic-bezier(.5,1.6,.4,1)}
.habit input:checked ~ .box,.todo input:checked ~ .box{background:var(--green);border-color:var(--green)}
.habit input:checked ~ .box::after,.todo input:checked ~ .box::after{transform:scale(1)}
.habit input:focus-visible ~ .box,.todo input:focus-visible ~ .box{outline:2px solid var(--accent);outline-offset:2px}
.hname{flex:1;transition:color .2s;overflow-wrap:anywhere}
.habit input:checked ~ .hname{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--line)}
.streak{font-size:12px;color:var(--amber);background:var(--accent-soft);padding:2px 8px;border-radius:999px;white-space:nowrap;font-weight:600;flex:none}

/* ---------- Statistik ---------- */
.summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.summary .card{padding:12px 8px;text-align:center}
.summary b{display:block;font-size:15px;line-height:1.3;overflow-wrap:anywhere}
.summary span{font-size:11.5px;color:var(--muted)}
.sortnote{color:var(--muted);font-size:13px;margin:0 2px 12px}
.stat-card{padding:14px 16px;margin-bottom:12px}
.stat-head{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.stat-head strong{flex:1;overflow-wrap:anywhere}
.badge{font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:2px 8px;white-space:nowrap;flex:none}
.strip{display:flex;gap:4px;margin-bottom:12px}
.strip i{flex:1;height:9px;border-radius:3px;background:var(--line)}
.strip i.done{background:var(--green)}
.strip i.miss{background:var(--red);opacity:.55}
.strip i.open{background:transparent;border:1.5px dashed var(--muted)}
.strip i.off{opacity:.35}
.stat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;text-align:center}
.stat-grid b{display:block;font-size:13.5px}
.stat-grid span{font-size:10.5px;color:var(--muted)}
b.good{color:var(--green)}
b.mid{color:var(--amber)}
b.low{color:var(--red)}

/* ---------- Ideen ---------- */
.add-row{display:flex;gap:8px;margin-bottom:14px}
.add-row input{flex:1;min-width:0}
.idea{padding:12px 14px;margin-bottom:10px;display:flex;gap:8px;align-items:flex-start}
.idea .txt{flex:1;overflow-wrap:anywhere}
.idea small{display:block;color:var(--muted);font-size:12px;margin-top:2px}

/* ---------- Verwalten ---------- */
.form-card{margin-bottom:16px}
.form-card h2{font-size:17px;margin-bottom:12px}
.fld{display:block;margin-bottom:12px;font-size:12.5px;color:var(--muted);font-weight:600}
.fld input,.fld select{margin-top:5px;font-weight:400;width:100%;display:block}
.wd-row{display:flex;gap:6px;margin:5px 0 14px}
.wd{flex:1;padding:8px 0;border-radius:9px;border:1px solid var(--line);background:transparent;color:var(--muted);font-size:13px}
.wd.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:700}
.form-actions{display:flex;gap:8px}
.mgroup{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:12px;overflow:hidden}
.mrow{display:flex;align-items:center;gap:6px;padding:11px 14px;border-bottom:1px solid var(--line)}
.mrow:last-child{border-bottom:0}
.mrow .info{flex:1;min-width:0}
.mrow .info b{display:block;overflow-wrap:anywhere;font-weight:600}
.mrow .info small{color:var(--muted);font-size:12px}
.data-card{margin-top:16px}
.data-card h2{font-size:17px}
.data-card p{color:var(--muted);font-size:14px;margin:8px 0 12px}
.data-actions{display:flex;gap:8px;flex-wrap:wrap}

footer{margin-top:28px;text-align:center;color:var(--muted);font-size:12.5px}
#toast{
  position:fixed;left:50%;bottom:24px;transform:translate(-50%,10px);
  background:var(--ink);color:var(--bg);padding:9px 16px;border-radius:999px;
  font-size:14px;opacity:0;pointer-events:none;transition:.25s;z-index:50;
  max-width:88vw;text-align:center;
}
#toast.show{opacity:1;transform:translate(-50%,0)}
/* ---------- Fokus ---------- */
.hright{display:flex;align-items:center;gap:8px}
.fpill{
  display:flex;align-items:center;gap:7px;background:var(--card);border:1px solid var(--accent);
  border-radius:999px;padding:7px 12px;font-weight:700;font-size:13.5px
}
.fpill[hidden]{display:none}
.fpill .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:fpulse 1.5s ease-in-out infinite}
.fpill.paused .dot{animation:none;opacity:.4}
@keyframes fpulse{0%,100%{opacity:1}50%{opacity:.2}}
.focus-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;padding:10px 0 4px}
.fring{position:relative;width:224px;height:224px}
.fring svg{width:100%;height:100%;transform:rotate(-90deg)}
.fring circle{fill:none;stroke-width:10;stroke-linecap:round}
.fring .track{stroke:var(--line)}
.fring .prog{stroke:var(--accent);transition:stroke-dashoffset .5s linear}
.fring.break .prog{stroke:var(--mittag)}
.fcenter{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.ftime{font-size:46px;font-weight:700;letter-spacing:1px}
.fphase{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.14em;font-weight:600}
.flabel{font-size:13.5px;color:var(--muted);max-width:220px;text-align:center;overflow-wrap:anywhere;margin-top:-6px}
.fbtns,.fpresets{display:flex;gap:9px;flex-wrap:wrap;justify-content:center}
.fcustom{display:flex;gap:10px;align-items:flex-end;justify-content:center;flex-wrap:wrap}
.fcustom label.fld{width:auto}
.fcustom .fld input{width:78px}
.fwide{width:100%;max-width:340px}
.fsub{font-size:13.5px;color:var(--muted);text-align:center;display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center}
.fsound{background:transparent;border:0;font-size:17px;padding:2px 4px;line-height:1}
.focus-stat{font-size:14px;margin-bottom:12px;line-height:1.6}
.mchips,.fchips{display:flex;gap:7px;flex-wrap:wrap;justify-content:center}
.mchip{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:7px 13px;font-size:13.5px;font-weight:600}
.mchip.on{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.mdesc{font-size:13px;color:var(--muted);text-align:center;max-width:380px;margin:-4px 0 0;line-height:1.5}
.fchip{background:transparent;border:1px solid var(--line);border-radius:999px;padding:5px 11px;font-size:12.5px;color:var(--muted)}
.fchip.on{border-color:var(--accent);color:var(--ink);background:var(--accent-soft)}
.fgoal{width:auto}
.fgoal input{width:96px}
button.big{padding:12px 26px;font-size:15px}
.cyc{display:flex;gap:6px}
.cyc i{width:7px;height:7px;border-radius:50%;background:var(--line)}
.cyc i.on{background:var(--accent)}
.cyc i.cur{background:var(--accent);opacity:.4;animation:fpulse 1.5s ease-in-out infinite}
.fcalm{padding:24px 0 8px;display:flex;flex-direction:column;align-items:center;gap:2px}
.btip{font-size:13.5px;color:var(--muted);text-align:center;max-width:280px;margin-top:-4px}
.fchart{display:flex;gap:3px;align-items:flex-end;height:48px;margin-top:10px}
.fchart i{flex:1;background:var(--accent);opacity:.55;border-radius:3px 3px 0 0;min-height:3px}
.fchart i.td{opacity:1}
.fchart i.zero{background:var(--line);opacity:1}
.fchart-lbl{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:3px}
#topbar{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;pointer-events:none}
#topbar[hidden]{display:none}
#topbar i{display:block;height:100%;width:0;background:var(--accent);transition:width .5s linear}
#topbar.break i{background:var(--mittag)}
.dlg-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:70;padding:18px}
.dlg{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;max-width:360px;width:100%;box-shadow:var(--shadow)}
.dlg p{margin:0 0 14px;line-height:1.55}
.dlg-btns{display:flex;gap:9px;justify-content:flex-end}
.dangerbtn{background:var(--red);color:#fff}
.habit.sub,.mrow.sub{margin-left:14px;border-left:2px solid var(--line);padding-left:12px}
.habit.sub .hname{font-size:14.5px}
.subtag{color:var(--muted);font-weight:600;margin-right:2px}
.fldnote{font-size:12.5px;color:var(--muted);margin:6px 2px 0;line-height:1.5}
#ownSchedule[hidden]{display:none}
.ppill{gap:5px}
.hdet{font-size:11.5px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:1px 8px;white-space:nowrap;flex:none}
.habit .jk{opacity:.85;flex:none}
.habit:hover .jk{opacity:1}
.habit.skipped .hname{color:var(--muted)}
.skipmark{width:24px;text-align:center;font-size:17px;flex:none}
.skipchip{font-size:11px;color:var(--accent);border:1px solid var(--accent);border-radius:999px;padding:1px 8px;flex:none;font-weight:600}
.strip i.skip{background:var(--accent);opacity:.5}
.points-card h3{margin:14px 0 2px;font-size:15px}
.phead{display:flex;align-items:baseline;gap:8px}
.pbig{font-size:30px;font-weight:800;color:var(--accent)}
.plabel{color:var(--muted);font-weight:600}
.pbreak{font-size:12.5px;color:var(--muted);margin:4px 0 0;line-height:1.55}
.rrow{display:flex;align-items:center;gap:8px;padding:8px 0;border-top:1px dashed var(--line)}
.rrow b{flex:1;overflow-wrap:anywhere}
.rcost{color:var(--muted);font-size:13px;white-space:nowrap}
.reward-add{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.reward-add input[type=text]{flex:1;min-width:150px}
.reward-add input[type=number]{width:92px}
.redeems{font-size:12.5px;color:var(--muted);margin-top:10px;line-height:1.6}
button.mini[disabled]{opacity:.4;cursor:default}
.vswitch{display:flex;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:4px;width:max-content;margin:0 auto 14px}
.vswitch button{border:0;background:transparent;padding:6px 18px;border-radius:999px;font-weight:600;color:var(--muted);font-size:13.5px}
.vswitch button.on{background:var(--accent);color:var(--accent-ink)}
.week-card{overflow-x:auto;padding:14px 12px}
.wgrid{display:grid;grid-template-columns:minmax(96px,1.4fr) repeat(7,minmax(30px,1fr));gap:4px;align-items:center;min-width:340px}
.whead{font-size:10.5px;color:var(--muted);text-align:center;font-weight:600;line-height:1.35}
.whead.td{color:var(--accent)}
.wsec{grid-column:1/-1;margin-top:10px;font-size:13px;font-weight:700;display:flex;gap:6px;align-items:center}
.wname{font-size:12.5px;overflow-wrap:anywhere;padding-right:2px;line-height:1.3}
.wname.sub{padding-left:10px;color:var(--muted)}
.wcell{height:30px;border-radius:8px;border:1px solid var(--line);background:var(--card);display:grid;place-items:center;font-size:13px;padding:0;color:var(--ink)}
button.wcell{cursor:pointer;transition:.15s}
button.wcell:hover{border-color:var(--accent)}
.wcell.wdone{background:var(--green);border-color:var(--green);color:#fff}
.wcell.wskip{background:var(--accent-soft);border-color:var(--accent);font-size:14px}
.wcell.wmiss{border-style:dashed;background:transparent}
.wcell.off{border:0;background:transparent;color:var(--line)}
.wcell.future{border-style:dotted;opacity:.4;background:transparent}
.wcell.tdc{box-shadow:0 0 0 2px var(--accent-soft)}
.wtot{font-size:10.5px;color:var(--muted);text-align:center;padding-top:2px}
.wtot.full{color:var(--accent);font-weight:700}
.mplayer{display:flex;align-items:center;gap:8px}
.mtitle-wrap{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.mtitle{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mtitle-wrap small{color:var(--muted);font-size:11.5px}
.mvol{display:flex;align-items:center;gap:8px;margin:10px 0 2px}
.mvol input[type=range]{flex:1;accent-color:var(--accent)}
hr.sep{border:0;border-top:1px dashed var(--line);margin:14px 0 10px}
.audio-card h2{margin-bottom:10px}
/* Unten rechts stehen Rückmeldung und Musik-Player in einer Spalte.
   Der Stapel wächst nach oben – der Musik-Knopf bleibt ganz unten. */
#fabStack{position:fixed;right:16px;bottom:16px;z-index:55;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
#playerBox{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
/* Leere Fächer nehmen keinen Platz weg (Musik abgeschaltet, kein Server). */
#playerBox:empty,#feedbackBox:empty{display:none}
.mfab{
  width:52px;height:52px;border-radius:50%;border:1px solid var(--line);
  background:var(--card);color:var(--accent);font-size:21px;
  box-shadow:var(--shadow);display:grid;place-items:center;transition:.2s;
}
.mfab:hover{border-color:var(--accent)}
.mfab.playing{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.mfab .eq{display:flex;gap:3px;align-items:flex-end;height:16px}
.mfab .eq i{width:3px;background:var(--accent-ink);border-radius:2px;animation:eq 1.1s ease-in-out infinite}
.mfab .eq i:nth-child(2){animation-delay:.25s}
.mfab .eq i:nth-child(3){animation-delay:.5s}
@keyframes eq{0%,100%{height:5px}50%{height:15px}}
.mpanel{
  width:min(310px,calc(100vw - 32px));background:var(--card);border:1px solid var(--line);
  border-radius:16px;box-shadow:var(--shadow);padding:14px;
}
.mpanel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.mpanel .mplayer{justify-content:center;margin-top:10px}
.mbig{width:46px;height:46px;font-size:17px}
.mbtns button{font-size:13px;padding:8px 12px}
@media (max-width:480px){
  #fabStack{right:12px}
}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important}
}
@media (max-width:420px){
  h1{font-size:26px}
  .tabs button{font-size:13px}
  .stat-grid span{font-size:10px}
}
/* ---------- Statistik-Unteransichten ---------- */
.snav{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 10px;margin:0 -2px 8px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.snav::-webkit-scrollbar{display:none}
.schip{flex:none;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:13.5px;font-weight:600;color:var(--muted)}
.schip.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.summary.s4{grid-template-columns:repeat(4,1fr)}
@media (max-width:480px){.summary.s4{grid-template-columns:repeat(2,1fr)}}
.chart-card h3,.card h3{margin:0 0 8px;font-size:15px}
.card h3 small{color:var(--muted);font-weight:500;font-size:12px}
.chart{width:100%;height:auto;display:block}
.chart .cb{fill:var(--accent);opacity:.75}
.chart .cb.hl{opacity:1}
.chart .cb-null{fill:var(--line)}
.chart .clab{fill:var(--muted);font-size:9.5px;font-family:inherit}
.chart .cline{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart .cdot{fill:var(--accent)}
.strow{padding:8px 0 4px;border-top:1px dashed var(--line)}
.strow:first-of-type{border-top:0;padding-top:2px}
.strow-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.strow-top b{flex:1;min-width:100px}
.strow-next{font-size:11.5px;color:var(--muted)}
.msbar{height:6px;border-radius:999px;background:var(--line);margin-top:6px;overflow:hidden}
.msbar i{display:block;height:100%;border-radius:999px;background:var(--accent)}
/* ---------- Check-in ---------- */
.checkin{padding:12px 14px}
.ci-head{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}
.ci-head span{font-size:11.5px;color:var(--muted)}
.ci-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:4px 0}
.ci-lbl{font-size:11.5px;color:var(--muted);width:64px;flex:none}
.mbtn{width:36px;height:34px;border-radius:10px;border:1px solid var(--line);background:transparent;font-size:17px;line-height:1;padding:0;filter:grayscale(.65);opacity:.75;transition:.15s}
.mbtn:hover{border-color:var(--accent)}
.mbtn.on{filter:none;opacity:1;border-color:var(--accent);background:var(--accent-soft);transform:scale(1.06)}
.ci-note{position:relative;margin-top:8px}
.ci-note textarea{width:100%;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--ink);font:inherit;font-size:13.5px;padding:8px 10px;resize:none;overflow:hidden;min-height:36px}
.ci-note textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.notesaved{position:absolute;right:8px;bottom:7px;font-size:11px;color:var(--accent);background:var(--card);padding:1px 6px;border-radius:999px}
/* ---------- Flammen-Stufen ---------- */
.streak.f7{border:1px solid var(--amber)}
.streak.f30{background:var(--amber);color:#fff}
.streak.f90{background:linear-gradient(100deg,var(--amber),var(--accent));color:#fff;animation:flick 1.6s ease-in-out infinite}
@keyframes flick{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
/* ---------- Stimmung & Korrelationen ---------- */
.mrow2{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px dashed var(--line)}
.mrow2:first-of-type{border-top:0}
.mrow2 .memo{font-size:16px;flex:none}
.mrow2 b{flex:1;font-size:13.5px}
.mrow2 small{color:var(--muted);font-size:11.5px;text-align:right}
.toughcard{border-color:var(--accent)}
.toughcard small{display:block;color:var(--muted);margin-top:3px;font-size:12px}
.corr-card{padding:12px 14px}
.corr-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.corrlink{font-size:16px;font-weight:700}
.corrlink.pos{color:var(--green)}
.corrlink.neg{color:var(--red)}
.badge.bpos{border-color:var(--green);color:var(--green)}
.badge.bneg{border-color:var(--red);color:var(--red)}
.noterow{display:flex;gap:10px;align-items:baseline;padding:6px 0;border-top:1px dashed var(--line);font-size:13px;line-height:1.5}
.noterow:first-of-type{border-top:0}
.noterow .mono{flex:none;color:var(--muted);font-size:11.5px}
.wmark{font-size:11px;line-height:1}
/* ---------- Klang-Auswahl ---------- */
.tchips{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin:10px 0 4px}
.tchip{
  background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:8px 14px;font-size:13.5px;font-weight:600;color:var(--muted);transition:.15s;
}
.tchip:hover{border-color:var(--accent);color:var(--ink)}
.tchip.on{background:var(--accent-soft);border-color:var(--accent);color:var(--ink)}
/* ---------- Geräte-Abgleich ---------- */
.spill{font-size:15px;padding:7px 11px}
/* ---------- Kennzeichnung der Entwicklungsumgebung ---------- */
.envtag{
  display:inline-block;margin-left:8px;background:var(--red);color:#fff;
  font-size:10px;font-weight:800;letter-spacing:.1em;padding:2px 7px;border-radius:999px;
  vertical-align:middle;
}
.envnote{border-left:3px solid var(--red);padding-left:9px;margin-bottom:10px !important}
.spill.off{color:var(--muted);font-size:13px}
.offlinebox{background:var(--bg);border:1px dashed var(--line);border-radius:12px;padding:12px 14px}
.logindlg{max-width:400px;max-height:88vh;overflow-y:auto}
.dlg-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px}
.dlg-head h2{margin:0;font-size:19px}
.logindlg .fld{margin-bottom:10px}
.logindlg form{margin:0}
.obmods{margin:12px 0 4px;max-height:46vh;overflow-y:auto}
.obmods .modrow{padding:9px 0}
/* ---------- To-dos ---------- */
.todocard{padding:0;overflow:hidden}
.todocard .dp-head{padding:11px 16px;border-bottom:1px solid var(--line)}
.todocard .dp-head h2{flex:1;margin:0;font-size:15px}
.todocard .count{color:var(--muted);font-size:12.5px}
.todolist{padding:4px 6px}
.todo{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;cursor:pointer;transition:.15s}
.todo:hover{background:var(--accent-soft)}
.todo input[type=checkbox]{position:absolute;opacity:0;width:0;height:0}
.todo .ttext{flex:1;font-size:14.5px;overflow-wrap:anywhere;line-height:1.4}
.todo.done .ttext{text-decoration:line-through;color:var(--muted)}
.todo.late .ttext{color:var(--ink)}
.tdue{font-size:11.5px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:1px 8px;white-space:nowrap;flex:none}
.tdue.late{color:var(--red);border-color:var(--red)}
.tdate{border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--muted);
  font:inherit;font-size:12px;padding:4px 6px;flex:none;max-width:140px}
.tdate:focus{outline:2px solid var(--accent);outline-offset:1px}
.todo-add h2,.todolist-card h3{margin:0 0 8px}
.todolist-card h3{display:flex;align-items:center;gap:8px;font-size:14px}
.todolist-card h3 small{color:var(--muted);font-weight:500}
.todolist-card h3 .mini{margin-left:auto}
.quickdue{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:9px;font-size:12.5px;color:var(--muted)}
.quickdue .tchip{padding:5px 11px;font-size:12.5px}
.ideas-head h2{margin:0 0 8px}
.scratch-to{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:9px;font-size:12px;color:var(--muted)}
.scratch-to .tchip{padding:5px 10px;font-size:12px}
.stgroup{display:flex;gap:5px;flex-wrap:wrap}
/* ---------- Wiederholungen ---------- */
.trep{color:var(--accent);font-size:13px;flex:none}
.trepsel{border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--muted);
  font:inherit;font-size:12px;padding:4px 6px;flex:none;max-width:130px}
.trepsel:disabled{opacity:.4}
/* ---------- Erinnerungen ---------- */
.remtimes{display:flex;gap:7px;flex-wrap:wrap;margin:10px 0 4px}
.remchip{display:flex;align-items:center;gap:4px;background:var(--accent-soft);border:1px solid var(--accent);
  border-radius:999px;padding:4px 6px 4px 11px;font-size:13px}
/* ---------- Startpakete ---------- */
.starters{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:9px;margin:12px 0 6px}
.stcard{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px 10px;text-align:center;transition:.15s}
.stcard:hover{border-color:var(--accent)}
.stcard.on{border-color:var(--accent);background:var(--accent-soft)}
.stcard .ste{display:block;font-size:22px;margin-bottom:3px}
.stcard b{display:block;font-size:14px;margin-bottom:2px}
.stcard small{display:block;color:var(--muted);font-size:11.5px;line-height:1.4}
/* ---------- Jahresrückblick ---------- */
.yearhead h2{margin:0 0 4px;font-size:19px}
.yrow{display:flex;gap:11px;align-items:flex-start;padding:9px 0;border-top:1px dashed var(--line)}
.yrow:first-of-type{border-top:0}
.yrow>span{font-size:19px;flex:none;width:26px;text-align:center}
.yrow b{display:block;font-size:14px}
.yrow small{display:block;color:var(--muted);font-size:12.5px;line-height:1.5;overflow-wrap:anywhere}
/* ---------- Suche ---------- */
input[type=search]{width:100%;border:1px solid var(--line);border-radius:10px;background:transparent;
  color:var(--ink);font:inherit;font-size:15px;padding:10px 12px}
input[type=search]:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.sres{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-top:1px dashed var(--line)}
.sres:first-of-type{border-top:0}
.sres[data-action]{cursor:pointer;border-radius:8px;padding-left:6px;padding-right:6px;margin:0 -6px}
.sres[data-action]:hover{background:var(--accent-soft)}
.sicon{font-size:15px;flex:none;width:22px;text-align:center;padding-top:1px}
.sbody{flex:1;min-width:0}
.sbody b{display:block;font-size:14px;font-weight:600;line-height:1.4;overflow-wrap:anywhere}
.sbody small{display:block;color:var(--muted);font-size:11.5px;margin-top:1px}
.linkbtn{background:none;border:0;color:var(--accent);text-decoration:underline;font-size:13px;padding:2px 0}
.forgotline{margin:2px 0 0;text-align:right}
.syncerr{background:var(--accent-soft);border:1px solid var(--red);border-radius:12px;padding:11px 13px;margin-bottom:10px}
.syncerr b{display:block;font-size:14px;margin-bottom:2px}
.syncerr small{display:block;color:var(--muted);font-size:12.5px;margin-bottom:9px;overflow-wrap:anywhere}
.legalcard h2{margin:18px 0 6px;font-size:17px}
.legalcard h2:first-of-type{margin-top:4px}
.legalcard h3{margin:14px 0 4px;font-size:14px}
.legaltext{font-size:13.5px;line-height:1.65;color:var(--ink);margin:0}
.legalwarn{background:var(--accent-soft);border:1px solid var(--accent);border-radius:10px;padding:10px 12px;font-size:13px;line-height:1.55;margin-bottom:6px}
.legallist{font-size:13.5px;line-height:1.7;margin:6px 0 0;padding-left:20px}
.legallist li{margin-bottom:3px}
.legalcard a{color:var(--accent)}
.privacynote{background:var(--bg);border-radius:10px;padding:9px 11px;font-size:12.5px;
  color:var(--muted);line-height:1.6;margin:8px 0 4px}
.privacynote .linkbtn{font-size:12.5px}
.wnlist{margin:8px 0 4px;padding-left:20px;font-size:14px;line-height:1.7}
.emptycard.intro h2{margin:0 0 8px;font-size:19px}
.emptycard.intro p{margin:0 0 10px;line-height:1.65}
footer .linkbtn{font-size:inherit}
footer a{color:var(--accent);text-decoration:underline}
a.linkbtn{color:var(--accent);text-decoration:underline;cursor:pointer}
.offlinebox p{font-size:13.5px;line-height:1.6;margin:0 0 9px}
.offlinebox p:last-child{margin-bottom:0}
.ob-steps{background:var(--card);border-radius:10px;padding:10px 12px;line-height:1.9 !important}
.obsync{background:var(--accent-soft);border-radius:10px;padding:9px 11px;font-size:13.5px !important}
.spill.busy{animation:spin 1.1s linear infinite}
.spill.warn{border-color:var(--red);color:var(--red)}
@keyframes spin{to{transform:rotate(360deg)}}
.sync-card .syncrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 0}
.sync-card .synced{font-size:20px;color:var(--accent);flex:none}
.sync-card .modinfo{flex:1;min-width:140px}
.sync-card .modinfo small{display:block;color:var(--muted);font-size:12px;margin-top:1px;overflow-wrap:anywhere}
input[type=email],input[type=password]{
  width:100%;border:1px solid var(--line);border-radius:10px;background:transparent;
  color:var(--ink);font:inherit;font-size:14px;padding:9px 11px;
}
input[type=email]:focus,input[type=password]:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
/* ---------- Erststart-Dialog ---------- */
.dlg.ob{max-width:440px;max-height:88vh;overflow-y:auto}
.dlg.ob h2{margin:0 0 8px;font-size:20px}
.dlg.ob p{font-size:14px}
.obq{font-weight:700;color:var(--ink);margin:14px 0 8px !important}
.obopt{
  display:block;width:100%;text-align:left;background:var(--bg);border:1px solid var(--line);
  border-radius:12px;padding:11px 13px;margin-bottom:8px;transition:.15s;
}
.obopt:hover,.obopt:focus-visible{border-color:var(--accent);background:var(--accent-soft)}
.obopt.reco{border-color:var(--accent)}
.obopt b{display:block;font-size:15px;margin-bottom:2px}
.obopt small{display:block;color:var(--muted);font-size:12.5px;line-height:1.45}
.recotag{font-size:10.5px;background:var(--accent);color:var(--accent-ink);padding:1px 7px;border-radius:999px;vertical-align:middle;margin-left:6px}
/* ---------- Rückgängig im Toast ---------- */
.undobtn{
  background:transparent;border:0;color:var(--accent);font-weight:700;font-size:13.5px;
  margin-left:12px;padding:2px 4px;text-decoration:underline;
}
/* ---------- Mobile: Navigation in Daumenreichweite ---------- */
@media (max-width:700px){
  .app{padding:16px 14px calc(96px + env(safe-area-inset-bottom))}
  .tabs{
    position:fixed;top:auto;bottom:0;left:0;right:0;z-index:56;
    margin:0;border-radius:0;border-left:0;border-right:0;border-bottom:0;
    padding:5px 6px calc(5px + env(safe-area-inset-bottom));
    box-shadow:0 -4px 18px rgba(0,0,0,.10);
  }
  #fabStack{bottom:calc(72px + env(safe-area-inset-bottom))}
  #noteBox{bottom:calc(72px + env(safe-area-inset-bottom))}
  #toast{bottom:calc(80px + env(safe-area-inset-bottom))}
  .mfab,.nfab,.fbfab{width:46px;height:46px;font-size:19px}
}
/* ---------- Module ---------- */
.modrow{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px dashed var(--line)}
.modrow:first-of-type{border-top:0}
.modrow .modinfo{flex:1}
.modrow .modinfo b{display:block;font-size:14px}
.modrow .modinfo small{color:var(--muted);font-size:11.5px;line-height:1.4;display:block}
.switch{width:42px;height:24px;border-radius:999px;border:1px solid var(--line);background:var(--line);position:relative;flex:none;padding:0;transition:.2s}
.switch::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--card);transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.switch.on{background:var(--accent);border-color:var(--accent)}
.switch.on::after{left:20px}
/* ---------- Ziele ---------- */
.goal-card{padding:14px 16px}
.goal-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.goal-head b{flex:1;min-width:120px;font-size:15px}
.goal-why{font-size:12.5px;color:var(--muted);margin:3px 0 0;line-height:1.5}
.goal-bar{height:8px;border-radius:999px;background:var(--line);margin:10px 0 4px;overflow:hidden}
.goal-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--morgen),var(--mittag),var(--accent))}
.goal-meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:11.5px;color:var(--muted)}
.badge.due{border-color:var(--red);color:var(--red)}
.badge.donebadge{border-color:var(--green);color:var(--green)}
.gsteps{margin-top:10px}
.gstep{display:flex;align-items:center;gap:8px;padding:5px 0}
.gstep .gtext{flex:1;font-size:13.5px}
.gstep.done .gtext{color:var(--muted);text-decoration:line-through}
.gadd{display:flex;gap:8px;margin-top:8px}
.gadd input{flex:1}
.glog{margin-top:10px;border-top:1px dashed var(--line);padding-top:8px}
.glogrow{display:flex;gap:10px;align-items:baseline;padding:5px 0;font-size:13px;line-height:1.5}
.glogrow .mono{flex:none;color:var(--muted);font-size:11px}
.glogrow span{flex:1;overflow-wrap:anywhere}
.goal-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.ghchip{font-size:11.5px;border:1px solid var(--line);border-radius:999px;padding:3px 9px;color:var(--muted)}
.ghchip.link{cursor:pointer}
.ghchip.on{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
/* ---------- Reflexion & Werte ---------- */
.vchips{display:flex;gap:7px;flex-wrap:wrap;margin:8px 0}
.vchip{border:1px solid var(--line);background:transparent;border-radius:999px;padding:7px 13px;font-size:13px}
.vchip.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:600}
.vrank{display:flex;align-items:center;gap:8px;padding:7px 0;border-top:1px dashed var(--line)}
.vrank:first-of-type{border-top:0}
.vrank b{flex:1}
.vrank .vnum{width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-size:12px;font-weight:700;flex:none}
.refl-dim{display:flex;align-items:center;gap:10px;padding:8px 0}
.refl-dim .re{font-size:17px;flex:none}
.refl-dim .rl{width:150px;flex:none;font-size:13px}
.refl-dim input[type=range]{flex:1;accent-color:var(--accent)}
.refl-dim .rv{width:18px;text-align:center;font-weight:700;flex:none}
@media (max-width:480px){.refl-dim{flex-wrap:wrap}.refl-dim .rl{width:auto;flex:1}}
.refl-free label{display:block;font-size:12.5px;color:var(--muted);margin:10px 0 4px}
.refl-free textarea{width:100%;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--ink);font:inherit;font-size:13.5px;padding:8px 10px;resize:none;overflow:hidden;min-height:36px}
.refl-free textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.sparkrow{display:flex;align-items:center;gap:10px;padding:4px 0}
.sparkrow .rl{width:150px;flex:none;font-size:12.5px;color:var(--muted)}
.sparkrow .chart{flex:1;height:34px}
.bscard{border-left:4px solid var(--accent);padding:12px 14px}
.bscard.warn{border-left-color:var(--red)}
.bscard.pos{border-left-color:var(--green)}
.bscard b{display:block;margin-bottom:2px}
.bscard p{margin:0;font-size:13px;color:var(--muted);line-height:1.55}
.reflecthint{background:var(--accent-soft);border:1px solid var(--accent);border-radius:12px;padding:8px 12px;font-size:13px;margin:0 0 14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* ---------- Notiz-Panel ---------- */
#noteBox{position:fixed;left:16px;bottom:16px;z-index:55;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.nfab{width:52px;height:52px;border-radius:50%;border:1px solid var(--line);background:var(--card);font-size:20px;box-shadow:var(--shadow);display:grid;place-items:center;transition:.2s}
.nfab:hover{border-color:var(--accent)}
.nfab.has{border-color:var(--accent)}
.npanel{width:min(310px,calc(100vw - 32px));background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:14px}
.npanel textarea{width:100%;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--ink);font:inherit;font-size:13.5px;padding:9px 10px;resize:none;min-height:110px;max-height:40vh;overflow:auto}
.npanel textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
@media (max-width:480px){#noteBox{left:12px}}

/* ---------- Rückmeldung: Knopf und Fenster ---------- */
.fbfab{
  width:52px;height:52px;border-radius:50%;border:1px solid var(--line);
  background:var(--card);font-size:20px;padding:0;
  box-shadow:var(--shadow);display:grid;place-items:center;transition:.2s;
}
.fbfab:hover{border-color:var(--accent)}
/* Das Fenster klappt von unten auf und deckt den Rest ab. */
.fbback{
  position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:70;
  display:flex;align-items:flex-end;justify-content:center;
  animation:fbfade .18s ease-out;
}
.fbsheet{
  width:min(520px,100%);max-height:88vh;overflow-y:auto;
  background:var(--card);border:1px solid var(--line);border-bottom:0;
  border-radius:18px 18px 0 0;box-shadow:0 -12px 40px rgba(0,0,0,.30);
  padding:10px 18px calc(18px + env(safe-area-inset-bottom));
  animation:fbup .26s cubic-bezier(.22,.85,.3,1);
}
@keyframes fbup{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes fbfade{from{opacity:0}to{opacity:1}}
.fbgrip{width:42px;height:4px;border-radius:999px;background:var(--line);margin:2px auto 12px}
.fbhead{display:flex;align-items:center;justify-content:space-between;gap:10px}
.fbhead h2{font-size:19px}
.fbintro{margin-top:4px}
.fbkinds{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0}
.fbsheet textarea{
  width:100%;border:1px solid var(--line);border-radius:10px;background:transparent;
  color:var(--ink);font:inherit;font-size:14px;padding:10px 12px;resize:vertical;
  min-height:130px;max-height:40vh;
}
.fbsheet textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.fbcount{display:block;text-align:right;color:var(--muted);font-size:11.5px;min-height:15px;margin-top:3px}
.fbcount.warn{color:var(--red)}
.fbsheet .fld{margin:10px 0 0}
.fberr{
  background:var(--card);border:1px solid var(--red);color:var(--red);
  border-radius:10px;padding:9px 12px;margin:14px 0 0;font-size:13.5px;line-height:1.5;
}
.fberr[hidden]{display:none}
.fbopt{font-weight:400;text-transform:none;letter-spacing:0;opacity:.8}
.fbactions{display:flex;gap:9px;justify-content:flex-end;margin-top:16px}
.fbactions button[disabled]{opacity:.55;cursor:default}
/* Falle für automatische Einträge – für Menschen unsichtbar. */
.fbhp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}