/* Verwaltung: hell und schlicht, große Tippflächen; am Computer Navigation links, Liste in der Mitte, Bearbeiten rechts */
:root{
  --bg:#F3F0EA; --app:#FFFFFF; --soft:#F6F3EE; --ink:#1E1A16; --muted:#6F665B; --line:#E6E0D6;
  --amber:#E8952A; --amber-ink:#2A1A05; --amber-soft:#FDF0DC; --green:#3E7B34; --green-soft:#E5F1DE; --red:#B5432C; --red-soft:#FBE6E0;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root{--bg:#171513;--app:#211E1A;--soft:#2A2621;--ink:#F2ECE3;--muted:#B5AB9C;--line:#38322B;--amber:#F2A541;--amber-ink:#1C1307;--amber-soft:#3A2A14;--green:#9CCB7E;--green-soft:#22301C;--red:#F09A82;--red-soft:#3A221B;color-scheme:dark}}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.45;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
[hidden]{display:none!important}
.laden{padding:40px;text-align:center;color:var(--muted)}

/* Anmeldung */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px max(16px,env(safe-area-inset-left,0px))}
.login form{background:var(--app);border:1px solid var(--line);border-radius:22px;padding:28px;width:100%;max-width:400px;display:flex;flex-direction:column;gap:14px}
.login h1{margin:0;font-size:1.4rem}
.login p{margin:0;color:var(--muted)}

/* Rahmen */
.shell{max-width:1240px;margin:0 auto;min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr)}
.bar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:16px max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px));flex-wrap:wrap}
.bar b{font-size:1.05rem}
.bar nav{display:flex;gap:14px;flex-wrap:wrap;font-size:.9rem}
.bar a,.linkbtn{color:var(--muted);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.tabs{display:flex;gap:6px;padding:0 max(14px,env(safe-area-inset-right,0px)) 12px max(14px,env(safe-area-inset-left,0px));border-bottom:1px solid var(--line)}
.tabs button{flex:1;border:0;background:var(--app);font-weight:600;font-size:.95rem;padding:11px 6px;border-radius:12px;cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--ink);color:var(--app)}
.body{padding:14px max(14px,env(safe-area-inset-right,0px)) 40px max(14px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:14px}
.col-side,.col-main{display:flex;flex-direction:column;gap:10px;min-width:0}

@media (min-width:900px){
  .shell{grid-template-columns:230px minmax(0,1fr);grid-template-rows:auto 1fr;padding:24px;gap:0;min-height:auto}
  .side-panel{grid-column:1;grid-row:1/3;background:var(--app);border:1px solid var(--line);border-right:0;border-radius:18px 0 0 18px}
  .bar{flex-direction:column;align-items:flex-start;padding:22px 18px 16px}
  .bar nav{flex-direction:column;gap:6px}
  .tabs{flex-direction:column;border-bottom:0;padding:0 12px 20px}
  .tabs button{flex:none;text-align:left;padding:12px 14px;background:transparent}
  .tabs button[aria-selected="true"]{background:var(--ink)}
  .body{grid-column:2;grid-row:1/3;background:var(--app);border:1px solid var(--line);border-radius:0 18px 18px 0;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start;padding:26px 28px;min-height:680px}
  .col-main{grid-column:1;grid-row:1}
  .col-side{grid-column:2;grid-row:1;position:sticky;top:20px}
}

/* Bausteine */
.cat{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:8px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.cat button{font-size:.8rem;letter-spacing:0;text-transform:none}
.add{border:2px dashed var(--line);background:transparent;font-weight:700;border-radius:14px;padding:14px;cursor:pointer}
.add:hover{border-color:var(--amber)}
.hint{margin:0;color:var(--muted);font-size:.88rem}
.banner{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.banner.on{background:var(--red-soft);border-color:var(--red)}
.banner b{display:block;font-size:.95rem}
.banner small{color:var(--muted)}
.switch{position:relative;width:52px;height:30px;flex:none;border:0;border-radius:999px;background:var(--line);cursor:pointer;transition:background .2s}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:left .2s}
.switch[aria-pressed="true"]{background:var(--red)}
.switch[aria-pressed="true"]::after{left:25px}
.row,.dish{display:grid;gap:12px;align-items:center;border:1px solid var(--line);border-radius:14px;padding:10px 12px;background:var(--app);cursor:pointer;text-align:left;width:100%}
.row{grid-template-columns:58px 1fr auto}
.dish{grid-template-columns:1fr auto auto}
.row:hover,.dish:hover{border-color:var(--amber)}
.sel{border-color:var(--amber);box-shadow:0 0 0 2px var(--amber-soft)}
.off{opacity:.5}
.past{opacity:.5}
.date{background:var(--soft);border-radius:10px;text-align:center;padding:6px 0;line-height:1.1}
.date b{display:block;font-size:1.15rem}
.date small{font-size:.72rem;color:var(--muted);text-transform:uppercase;font-weight:600}
.t{min-width:0}
.t b,.dish b{display:block;font-size:.98rem;overflow-wrap:anywhere}
.t small,.dish small{color:var(--muted)}
.pill{display:inline-block;font-size:.74rem;font-weight:700;border-radius:999px;padding:2px 9px;margin-top:3px}
.pill.hl{background:var(--amber-soft);color:var(--amber)}
.pill.closed{background:var(--red-soft);color:var(--red)}
.pill.open{background:var(--green-soft);color:var(--green)}
.p{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.icon{border:0;background:var(--soft);min-width:42px;padding:0 10px;height:38px;border-radius:10px;font-weight:700;cursor:pointer}
.evgrid{display:flex;flex-direction:column;gap:10px}
@media (min-width:900px){.evgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}
.ev{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--app);cursor:pointer;text-align:left;padding:0;width:100%}
.ev:hover{border-color:var(--amber)}
.ev .img{height:120px;background:var(--soft) center 20%/cover no-repeat;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:.9rem}
.ev .in{padding:12px 14px}
.ev .in b{display:block}
.ev .in small{color:var(--muted)}

/* Formular */
.sheet{border:1px solid var(--line);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:12px;background:var(--soft)}
.sheet h2{margin:0;font-size:1.05rem}
label{font-size:.85rem;font-weight:600;color:var(--muted);display:flex;flex-direction:column;gap:5px}
input[type=text],input[type=password],input[type=date],input:not([type]),select,textarea{width:100%;min-width:0;padding:11px 12px;border-radius:10px;border:1px solid var(--line);background:var(--app);font-size:1rem;color:var(--ink)}
textarea{min-height:110px;resize:vertical}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.check{flex-direction:row;align-items:center;gap:10px;color:var(--ink);font-weight:500;font-size:.95rem}
.check input{width:20px;height:20px}
.save{border:0;background:var(--amber);color:var(--amber-ink);font-weight:800;padding:13px;border-radius:12px;cursor:pointer}
.save:disabled{opacity:.6;cursor:progress}
.ghost{border:1px solid var(--line);background:var(--app);font-weight:600;padding:11px;border-radius:12px;cursor:pointer}
.danger{color:var(--red)}
.btnrow{display:flex;gap:8px}
.btnrow > *{flex:1}
.err{color:var(--red);font-size:.9rem;margin:0}
.preview{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center 20%;border-radius:10px;background:var(--app)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(18px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--app);padding:10px 18px;border-radius:999px;font-weight:600;z-index:20;max-width:calc(100% - 32px);text-align:center}
.toast.bad{background:var(--red);color:#fff}
.empty{color:var(--muted);padding:12px 0}
.bar nav{align-items:flex-start}
.linkbtn{text-align:left}
.login p.err,.err{color:var(--red)}
.sheet.urlaub{background:var(--app)}
.zeiten{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:.95rem}
.zeiten b{text-align:right;font-variant-numeric:tabular-nums}
.zeiten b.zu{color:var(--muted);font-weight:500}
.zeile{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 10px;padding:8px 0;border-top:1px solid var(--line)}
.zeile .check{min-width:120px}
.vonbis{display:flex;align-items:center;gap:6px}
.vonbis input{width:auto;min-width:0;padding:8px 8px}
.vonbis input:disabled{opacity:.4}
.vonbis span{color:var(--muted);font-size:.85rem}