/* Look A «90er Sticker» (25.10.2026): cream background, thick ink outlines, hard offset shadows, bright pop colours.
   Always light, also when the device is in dark mode (decision Daniel, 25.10.2026). */
:root{
  --bg:#FFF4DC; --surface:#FFFFFF; --surface-2:#FFF9EC; --fg:#1A1A1A; --muted:#6B604C; --line:#E9DFC9;
  --ink:#1A1A1A; --on-pop:#1A1A1A;
  --yellow:#FFD23F; --pink:#FF6B9D; --teal:#3BCEAC; --blue:#2EC4D6;
  --accent:#1A1A1A; --accent-fg:#FFF4DC; --warn:#D9473B; --ok:#1F8F6E;
  --emma:#FF8A3D; --lucy:#A47BFF; --nicole:#2EC4D6; --daniel:#7BD389; --jeder:#B8AE9C; --gemeinsam:#FFD23F; --offen:#D5CCBC;
  --shadow:4px 4px 0 var(--ink); --shadow-sm:2px 2px 0 var(--ink);
  --display:"Bungee","Arial Black",system-ui,sans-serif;
  --body:"Space Grotesk","Segoe UI",system-ui,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:15px;line-height:1.5}
[hidden]{display:none!important}
#app,#login{max-width:1040px;margin:0 auto;padding:24px 16px 56px;display:flex;flex-direction:column;gap:22px}
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;text-wrap:balance}
h1{font-size:clamp(28px,6vw,40px);letter-spacing:.01em}
h2{font-size:14px;letter-spacing:.04em;color:var(--fg)}
.top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:14px}
.top p{margin:4px 0 0;color:var(--muted);max-width:60ch}
.me-sticker{display:inline-block;vertical-align:middle;font-family:var(--body);font-size:14px;font-weight:700;letter-spacing:0;background:var(--pink);color:var(--on-pop);border:2px solid var(--ink);border-radius:999px;padding:2px 12px;transform:rotate(-5deg);box-shadow:var(--shadow-sm)}
.me-sticker:empty{display:none}
.bar-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#status{font-size:13px;color:var(--muted)}
@media (max-width:600px){#btn-print{display:none}.top .bar-actions button{padding:4px 10px;font-size:13px}}
#status.warn{color:var(--warn);font-weight:700}

/* Buttons: outlined stickers that press down */
button,.btn{font:inherit;font-weight:500;cursor:pointer;border-radius:10px;border:2px solid var(--ink);background:var(--surface);color:var(--fg);padding:7px 14px;text-decoration:none;display:inline-flex;align-items:center;gap:6px;box-shadow:var(--shadow-sm);transition:transform .06s,box-shadow .06s}
button:active,.btn:active{transform:translate(2px,2px);box-shadow:none}
button:disabled{cursor:default;opacity:.55}
button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,.btn:focus-visible{outline:3px solid var(--pink);outline-offset:2px}
.primary{background:var(--yellow);color:var(--on-pop);font-weight:700}
.ghost{border-color:transparent;background:none;color:var(--muted);box-shadow:none}
.ghost:active{transform:none}
input,select,textarea{font:inherit;font-size:15px;width:100%;padding:8px 10px;border:2px solid var(--ink);border-radius:10px;background:var(--surface);color:var(--fg)}
input:disabled,select:disabled{opacity:.75;border-style:dashed}
textarea{resize:vertical;min-height:64px}
label.f{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:500;color:var(--muted)}

/* Anmeldung */
.login-box{background:var(--surface);border:2px solid var(--ink);box-shadow:var(--shadow);border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:14px;max-width:420px}
.login-box .err{color:var(--warn);font-weight:700;font-size:14px;margin:0}
.who{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.who button{background:var(--c);color:var(--on-pop);justify-content:center;font-family:var(--display);font-size:18px;padding:12px}

/* Reiter: Pillen */
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tab{border-radius:999px;padding:7px 16px;font-weight:700;color:var(--fg);background:var(--surface)}
.tab[aria-selected="true"]{background:var(--ink);color:var(--bg);box-shadow:var(--shadow-sm)}

/* Personen-Bilanz */
.people{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:760px){.people{grid-template-columns:repeat(2,minmax(0,1fr))}}
.person{background:var(--surface);border:2px solid var(--ink);border-radius:16px;padding:12px 14px;text-align:left;display:flex;flex-direction:column;gap:6px;box-shadow:var(--shadow)}
.person>*{width:100%;text-align:left}
.person[aria-pressed="true"]{background:var(--c);color:var(--on-pop)}
.person[aria-pressed="true"] .sub{color:var(--on-pop)}
.person .nm{font-family:var(--display);font-size:18px}
.person .tot{font-variant-numeric:tabular-nums;font-weight:700}
.person .sub{font-size:12px;color:var(--muted)}
.meter{height:12px;border-radius:999px;background:var(--surface-2);border:2px solid var(--ink);overflow:hidden}
.meter span{display:block;height:100%;background:var(--c,var(--teal))}

/* Heute */
.daynav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.daynav h3{font-size:22px;flex:1;min-width:200px}
@media (max-width:600px){
  .daynav{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:6px}
  .daynav h3{min-width:0;font-size:17px;line-height:1.25;text-align:center}
  .daynav button{padding:7px 12px}
}
.daysum{display:flex;flex-direction:column;gap:8px;background:var(--yellow);color:var(--on-pop);border:2px solid var(--ink);border-radius:16px;padding:12px 14px;box-shadow:var(--shadow);transform:rotate(-.6deg)}
.daysum span{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.daysum .meter{background:#FFF4DC;border-color:#1A1A1A}
.daysum .meter span{background:var(--teal)}
.todo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media (max-width:760px){.todo-grid{grid-template-columns:minmax(0,1fr)}}
.tcard{background:var(--surface);border:2px solid var(--ink);border-radius:16px;padding:0 14px 6px;display:flex;flex-direction:column;min-width:0;box-shadow:var(--shadow);overflow:hidden}
.tcard header{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0 -14px 4px;padding:9px 14px;background:var(--c);color:var(--on-pop);border-bottom:2px solid var(--ink)}
.tcard header b{font-family:var(--display);font-weight:400;font-size:17px}
.tcard header span{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.todo{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:10px;align-items:start;padding:10px 0;border-top:2px dashed var(--line);cursor:pointer}
.todo:first-of-type{border-top:0}
.todo.locked{cursor:default}
.todo input{appearance:none;-webkit-appearance:none;width:24px;height:24px;margin:0;padding:0;border:2px solid var(--ink);border-radius:7px;background:var(--surface);cursor:pointer;display:grid;place-content:center}
.todo input:checked{background:var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/18px no-repeat}
.todo input:disabled{cursor:default;border-style:dashed}
.todo .tx b{display:block;font-weight:700}
.todo .tx small{display:block;font-size:13px;color:var(--muted)}
.todo .tx .overdue{display:inline-block;font-style:normal;font-size:12px;font-weight:700;background:var(--pink);color:var(--on-pop);border:2px solid var(--ink);border-radius:999px;padding:0 8px;margin:2px 0;transform:rotate(-1.5deg)}
.todo.done .tx b{text-decoration:line-through;color:var(--muted)}
.todo time{font-size:12px;font-weight:700;color:var(--ok);font-variant-numeric:tabular-nums;white-space:nowrap}
.nothing{color:var(--muted);font-size:14px;padding:10px 0}

/* Verwalten */
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chip{border-radius:999px;padding:4px 12px;font-size:13px;box-shadow:none}
.chip[aria-pressed="true"]{background:var(--pink);color:var(--on-pop);box-shadow:var(--shadow-sm)}
.group{display:flex;flex-direction:column;gap:10px}
.group h3{font-size:17px;display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.group h3 small{font-family:var(--body);font-size:13px;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
.rows{background:var(--surface);border:2px solid var(--ink);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.row{display:flex;flex-direction:column;gap:10px;padding:12px 14px;border-top:2px dashed var(--line);border-left:6px solid var(--c,transparent)}
.row:first-child{border-top:0}
.rhead{display:flex;gap:6px;align-items:flex-start}
.rhead .t{flex:1;min-width:0}
.rhead .t b{display:block;font-weight:700}
.rhead .t span{display:block;font-size:13px;color:var(--muted);white-space:pre-line}
.icon{border:0;background:none;color:var(--muted);padding:4px 8px;font-size:15px;line-height:1.2;box-shadow:none}
.icon:hover{color:var(--fg)}
.icon:active{transform:none}
.icon.del:hover{color:var(--warn)}
.ctrl{display:grid;grid-template-columns:200px 96px 150px minmax(0,1fr) 92px;gap:10px;align-items:end}
@media (max-width:860px){.ctrl{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.ctrl .days-cell{grid-column:1 / -1}}
.mins{display:flex;align-items:center;gap:4px}
.mins input{text-align:right;font-variant-numeric:tabular-nums}
.mins em{font-style:normal;font-size:12px;color:var(--muted)}
.days{display:flex;gap:4px;flex-wrap:wrap}
.day{padding:4px 0;width:34px;justify-content:center;font-size:12px;border-radius:8px;box-shadow:none}
.day[aria-pressed="true"]{background:var(--c,var(--teal));color:var(--on-pop);font-weight:700}
.day:disabled{opacity:1;cursor:default}
.hint{font-size:11px;color:var(--muted);margin-top:2px}
.wk{font-variant-numeric:tabular-nums;font-size:14px;font-weight:700;text-align:right}
.wk small{display:block;font-size:11px;font-weight:500;color:var(--muted)}
@media (max-width:860px){.wk{text-align:left}}
.edit{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:10px;background:var(--surface-2);border:2px dashed var(--line);border-radius:12px;padding:12px}
.edit .full{grid-column:1 / -1}
.edit .end{display:flex;justify-content:flex-end}
@media (max-width:600px){.edit{grid-template-columns:minmax(0,1fr)}}

/* Erinnern / Telegram / Passwörter */
.nudge{padding:2px 9px;font-size:12px;margin-left:6px;border-radius:999px;background:var(--pink);color:var(--on-pop);box-shadow:none}
.tg-list{display:flex;flex-direction:column;background:var(--surface);border:2px solid var(--ink);border-radius:16px;overflow:hidden}
.tg-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:10px 14px;border-top:2px dashed var(--line);border-left:6px solid var(--c)}
.tg-row:first-child{border-top:0}
.tg-row b{min-width:70px}
.tg-row span{font-size:13px;color:var(--muted)}
.tg-row span.ok{color:var(--ok);font-weight:700}
.tg-actions{margin-left:auto;display:flex;gap:6px;align-items:center}
.tg-actions button{padding:5px 10px;font-size:13px}
.codebox{background:var(--surface);border:2px solid var(--ink);box-shadow:var(--shadow);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.codebox span{font-size:14px;color:var(--muted)}
.codebox code{font-size:18px;letter-spacing:.08em;color:var(--fg)}

/* Menüs */
.prow{display:grid;grid-template-columns:120px 150px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 14px;border-top:2px dashed var(--line);border-left:6px solid var(--c,transparent)}
.prow:first-child{border-top:0}
.prow .pday b{display:block;font-family:var(--display);font-weight:400}
.prow .pday span{font-size:13px;color:var(--muted)}
.prow .meal-name{font-weight:700}
.prow .meal-name.empty{font-weight:400;color:var(--muted)}
@media (max-width:600px){.prow{grid-template-columns:minmax(0,1fr) auto}}
.badge{display:inline-block;font-size:12px;font-weight:500;padding:1px 9px;border-radius:999px;border:2px solid var(--ink);background:var(--surface-2);color:var(--fg);margin:2px 4px 2px 0}
.badge.weekend{background:var(--pink);color:var(--on-pop);transform:rotate(-2deg)}
.badge.takeaway{background:var(--blue);color:var(--on-pop);transform:rotate(1.5deg)}
.chip.kind{font-size:12px;padding:3px 10px}
.mrow{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-top:2px dashed var(--line)}
.mrow:first-child{border-top:0}
.mhead{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.mhead .mname{font-weight:700;flex:1;min-width:140px;text-align:left;border:0;background:none;padding:0;color:var(--fg);box-shadow:none}
.mhead .mname:active{transform:none}
.mhead .wish{padding:3px 10px;font-size:13px;border-radius:999px;box-shadow:none}
.mhead .wish[aria-pressed="true"]{background:var(--yellow);color:var(--on-pop)}
.mdetail{display:flex;flex-direction:column;gap:6px;font-size:14px}
.mdetail ul{margin:0;padding-left:20px}
.mdetail a{color:var(--fg);font-weight:700}
.mdetail .note{white-space:pre-line}
.mdetail .acts{display:flex;gap:8px;flex-wrap:wrap}
.wish-list{display:flex;flex-direction:column;gap:8px}
.wish-item{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;background:var(--surface);border:2px solid var(--ink);border-radius:12px;padding:8px 12px;font-size:14px}
.wish-item span{color:var(--muted)}
.wish-item .acts{margin-left:auto;display:flex;gap:6px}
.mform{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) 110px minmax(0,1fr);gap:10px;align-items:end}
.mform .full{grid-column:1 / -1}
.mform div.f{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:500;color:var(--muted)}
@media (max-width:760px){.mform{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.checks{display:flex;gap:12px;flex-wrap:wrap;padding:6px 0;font-size:14px;color:var(--fg)}
.checks label{display:flex;gap:6px;align-items:center}
.checks input{width:auto;accent-color:var(--teal)}
.ings{display:flex;flex-direction:column;gap:6px}
.ing{display:grid;grid-template-columns:110px minmax(0,1fr) auto;gap:6px}

/* Panels */
.panel{background:var(--surface-2);border:2px solid var(--ink);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow)}
.addgrid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1.2fr) 90px minmax(0,1fr);gap:10px;align-items:end}
.addgrid .full{grid-column:1 / -1}
@media (max-width:760px){.addgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.note{font-size:13px;color:var(--muted);max-width:75ch;margin:0}
#toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%) rotate(-1deg);background:var(--yellow);color:var(--on-pop);border:2px solid #1A1A1A;box-shadow:4px 4px 0 #1A1A1A;padding:10px 16px;border-radius:12px;font-size:14px;font-weight:700;z-index:10;max-width:calc(100% - 32px)}

@media (prefers-reduced-motion: reduce){button,.btn{transition:none}.daysum,.badge{transform:none}#toast{transform:translateX(-50%)}}

@media print{
  body{background:#fff;color:#000;font-size:12px}
  .bar-actions,.tabs,.panel,.filters .chip,.icon,.daynav button,.note{display:none!important}
  #app{padding:0;gap:14px}
  .tcard,.rows,.person,.daysum{box-shadow:none;transform:none}
  select,input{border:0;background:none;padding:0;appearance:none;-webkit-appearance:none}
  .row,.group,.tcard{break-inside:avoid}
}