:root{--night:#0d0907;--mahogany:#3a2217;--sky:#8fb4e3;--ivory:#f2e8d8;--paper:#faf5ec;--ink:#241812;--line:#e4d8c4}
*{box-sizing:border-box}
body{margin:0;font:400 1rem/1.55 'Figtree',system-ui,sans-serif;background:var(--paper);color:var(--ink);display:grid;grid-template-columns:230px 1fr;min-height:100vh}
h1,h2{font-family:'Young Serif',Georgia,serif;font-weight:400;margin:0}
h1{font-size:2rem}h2{font-size:1.25rem;margin-bottom:.4rem}
a{color:#2f5f9a}
:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.side{background:var(--night);color:var(--ivory);padding:1.5rem 1rem;display:flex;flex-direction:column;gap:1.5rem;position:sticky;top:0;height:100vh}
.logo{font:1.4rem 'Young Serif',serif;color:var(--sky);margin:0}.logo small{display:block;font:500 .8rem 'Figtree';color:#b9ab97}
.side nav{display:grid;gap:.2rem}
.side a{color:var(--ivory);text-decoration:none;padding:.6rem .8rem;border-radius:8px}
.side nav a:hover{background:var(--mahogany)}.side nav a[aria-current]{background:var(--sky);color:var(--night);font-weight:600}
.side-foot{margin-top:auto;display:grid;font-size:.95rem}.side-foot a{color:#b9ab97}
.badge{background:#e0533a;color:#fff;border-radius:99px;padding:0 .5rem;font-size:.8rem}
.adm{padding:2rem clamp(1rem,3vw,2.5rem);display:grid;gap:1.25rem;align-content:start;max-width:1100px;width:100%}
.head{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.4rem}
.muted{color:#7a6b5a}
.toast{background:var(--ink);color:var(--ivory);padding:.8rem 1.1rem;border-radius:10px;margin:0;border-left:4px solid var(--sky)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1rem}
.stat{background:var(--mahogany);color:var(--ivory);padding:1.2rem 1.4rem;border-radius:14px;text-decoration:none;font-weight:500}
.stat b{display:block;font:2.4rem/1 'Young Serif',serif;color:var(--sky)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.plain{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.row{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin:0}
.btn{display:inline-block;background:var(--mahogany);color:var(--ivory);border:2px solid var(--mahogany);border-radius:999px;padding:.6rem 1.3rem;font:600 .95rem 'Figtree';text-decoration:none;cursor:pointer}
.btn:hover{background:var(--night);border-color:var(--night);color:#fff}
.btn.alt{background:transparent;color:var(--mahogany)}.btn.alt:hover{background:var(--mahogany);color:var(--ivory)}
.btn.small{padding:.35rem .9rem;font-size:.88rem}
.btn.danger{background:transparent;border-color:#b3321d;color:#b3321d}.btn.danger:hover{background:#b3321d;color:#fff}
.btn:disabled{opacity:.35;cursor:not-allowed}
.form{display:grid;gap:1rem}
label{display:grid;gap:.3rem;font-weight:500}
.check{display:flex;gap:.6rem;align-items:center}.check input{width:auto}
input,select,textarea{font:inherit;color:var(--ink);background:#fff;border:1.5px solid #cdbfa9;border-radius:9px;padding:.6rem .8rem;width:100%}
input:focus,select:focus,textarea:focus{border-color:#4f7bb3;outline:none;box-shadow:0 0 0 3px rgba(143,180,227,.35)}
.cols2{display:grid;grid-template-columns:1fr 2fr;gap:.8rem}.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
.tablewrap{padding:0;overflow-x:auto}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:.85rem 1.1rem;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-size:.9rem;color:#7a6b5a;font-weight:600}
tr.past{color:#8d7f6e}
.acts{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}.acts form{display:flex;gap:1rem;margin:0}
.lnk{background:none;border:0;color:#2f5f9a;text-decoration:underline;font:inherit;cursor:pointer;padding:0}.lnk.danger{color:#b3321d}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem}
.gi{padding:.8rem;display:grid;gap:.6rem}.gi img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:9px}.gi form{display:grid;gap:.5rem}
.msg.unread{border-left:5px solid var(--sky)}
.msg header{display:flex;flex-wrap:wrap;gap:.3rem 1rem;align-items:baseline}.msg header .muted{margin-left:auto;font-size:.9rem}
.bad{background:#fde8e4;border:1px solid #e0533a;padding:.7rem 1rem;border-radius:9px;margin:0}
.hint{font-size:.9rem;color:#7a6b5a;margin:0;text-align:center}
body.login{display:grid;place-items:center;padding:1rem;background:var(--night)}
.login-card{width:min(400px,100%);display:grid;gap:1rem;padding:2rem}
.login-card h1{color:var(--mahogany)}
@media(max-width:860px){body{grid-template-columns:1fr}.side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center}.side nav{display:flex;flex-wrap:wrap}.side-foot{margin:0 0 0 auto;display:flex;gap:1rem}.grid2,.cols2,.cols3{grid-template-columns:1fr}}

/* Handy: Tabellen als Karten, größere Tippflächen */
@media(max-width:700px){
  .btn,.lnk{min-height:44px}
  .lnk{padding:.4rem .2rem}
  .side{gap:.8rem;padding:1rem}
  .side nav a{padding:.7rem .9rem}
  .adm{padding:1.25rem 1rem}
  .tablewrap thead{display:none}
  .tablewrap table,.tablewrap tbody,.tablewrap tr,.tablewrap td{display:block;width:100%}
  .tablewrap tr{padding:1rem 1.1rem;border-bottom:1px solid var(--line)}
  .tablewrap td{border:0;padding:.1rem 0}
  .tablewrap td.acts{padding-top:.6rem}
  .gal{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
  .stats{grid-template-columns:1fr 1fr}
}
.cols2e{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.tabs{display:flex;gap:.4rem;border-bottom:2px solid var(--line)}
.tabs a{padding:.6rem 1.1rem;text-decoration:none;color:var(--ink);font-weight:500;border-bottom:3px solid transparent;margin-bottom:-2px}
.tabs a[aria-current]{border-bottom-color:#4f7bb3;font-weight:600}
.filters{padding:.8rem 1rem}
.pill{display:inline-block;padding:.1rem .7rem;border-radius:99px;font-size:.85rem;font-weight:600}
.s-new{background:#fde7b3;color:#6b4a00}.s-ok{background:#cfe9d4;color:#14502a}.s-no{background:#f3d0c9;color:#7a2112}
.hoursgrid{display:grid;grid-template-columns:110px 1fr 1fr auto;gap:.5rem .8rem;align-items:center}
.tpl{border-top:1px solid var(--line);padding-top:.8rem;display:grid;gap:.6rem}.tpl h3{margin:0;font-size:1.05rem}
.modeform{border-top:1px solid #3a2a20;padding-top:1rem;display:grid;gap:.5rem}.muted2{margin:0;color:#b9ab97;font-size:.8rem;text-transform:uppercase;letter-spacing:.1em}
.btn.teston{background:#b3262d;border-color:#b3262d;color:#fff}
.side .btn.alt{color:var(--ivory);border-color:#8fb4e3}
.testbanner{grid-column:1/-1;position:fixed;left:0;right:0;bottom:0;z-index:50;background:#b3262d;color:#fff;text-align:center;padding:.4rem;font-weight:600}
.acts form{display:flex;flex-wrap:wrap;gap:.2rem .9rem;align-items:center}
@media(max-width:800px){.cols2e{grid-template-columns:1fr}.hoursgrid{grid-template-columns:1fr 1fr}.hoursgrid b{grid-column:1/-1}}
.adm{min-width:0}.filters input,.filters select{max-width:100%!important}

body.login{grid-template-columns:1fr;min-height:100vh}
mark{background:#ffe08a;color:#222;padding:0 .2em}

/* ===== Admin-Überarbeitung: Layout, Sidebar, Topbar, Glocke, Popups, Toasts ===== */
:root{--side:262px;--ok:#2e7d4f;--danger:#b3321d}
body{display:grid;grid-template-columns:var(--side) minmax(0,1fr);background:#f6f0e6}
.shell{min-width:0;display:flex;flex-direction:column;min-height:100vh}
.side{background:linear-gradient(180deg,#120c08,#1c120c);padding:1.1rem .8rem;gap:1rem;overflow-y:auto;width:var(--side);z-index:60;border-right:1px solid #2a1d14}
.brand{display:flex;gap:.7rem;align-items:center;padding:.2rem .5rem .6rem;border-bottom:1px solid #2a1d14}
.brand img{border-radius:50%;box-shadow:0 0 0 2px var(--sky);background:#fff}
.logo{font-size:1.1rem;line-height:1.2}
.side nav{display:flex;flex-direction:column;gap:.15rem}
.navgroup{margin:.9rem 0 .25rem;padding:0 .8rem;font:600 .72rem 'Figtree';letter-spacing:.14em;text-transform:uppercase;color:#8d7d6a}
.side nav a{display:flex;align-items:center;gap:.7rem;padding:.6rem .8rem;border-radius:10px;font-weight:500;color:#e9dcc6;transition:background .15s}
.side nav a svg{flex:none;opacity:.85}
.side nav a span{flex:1}
.side nav a:hover{background:#2c1c13}
.side nav a[aria-current]{background:var(--sky);color:#14100c;font-weight:600}
.side nav a[aria-current] svg{opacity:1}
.side .badge{margin-left:auto}
.side-foot{margin-top:auto;gap:.2rem;border-top:1px solid #2a1d14;padding-top:.8rem}
.side-foot a{padding:.45rem .8rem;border-radius:8px;color:#b9ab97}.side-foot a:hover{background:#2c1c13;color:#fff}
.badge{display:inline-block;min-width:1.35rem;height:1.35rem;line-height:1.35rem;text-align:center;background:#e0533a;color:#fff;border-radius:99px;padding:0 .4rem;font:600 .75rem 'Figtree'}
.badge[hidden]{display:none}
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:.8rem;padding:.6rem clamp(1rem,3vw,2.5rem);background:rgba(246,240,230,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);min-height:62px}
.crumb{margin:0;font:1.15rem 'Young Serif',serif;color:var(--mahogany);flex:1}
.topright{display:flex;align-items:center;gap:.4rem}
.iconbtn{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;border-radius:12px;border:1px solid transparent;background:transparent;color:var(--mahogany);cursor:pointer;text-decoration:none;font:500 .92rem 'Figtree'}
.iconbtn:hover{background:#fff;border-color:var(--line)}
.iconbtn.txt{padding:0 .9rem}
.menubtn{display:none}
.bellbadge{position:absolute;top:2px;right:2px}
.bellwrap{position:relative}
.bellpanel{position:absolute;right:0;top:calc(100% + .5rem);width:min(340px,88vw);background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 50px rgba(30,15,5,.22);overflow:hidden;z-index:80}
.bellpanel[hidden]{display:none}
.bellhead{margin:0;padding:.85rem 1.1rem;font:600 .8rem 'Figtree';letter-spacing:.1em;text-transform:uppercase;color:#7a6b5a;border-bottom:1px solid var(--line)}
.bellpanel ul{list-style:none;margin:0;padding:.3rem}
.bellpanel li a{display:block;padding:.7rem .8rem;border-radius:9px;color:var(--ink);text-decoration:none}
.bellpanel li a:hover{background:#f3ece0}.bellpanel li b{color:#b3321d}
.bellpanel li.empty{padding:.9rem .8rem;color:#7a6b5a}
.scrim{display:none}
.adm{max-width:1180px;margin:0 auto;padding:1.6rem clamp(1rem,3vw,2.5rem) 4rem;width:100%}
.adm>.head h1{font-size:1.7rem}
.card{box-shadow:0 1px 0 rgba(60,30,10,.04)}
.btn.solid.danger,.btn.danger.solid{background:var(--danger);border-color:var(--danger);color:#fff}
.testbanner{position:static;order:-1}
tbody tr:hover td{background:#fbf7f0}
.tabs{overflow-x:auto;white-space:nowrap}
/* Toasts */
.toasts{position:fixed;right:1rem;top:4.6rem;z-index:120;display:grid;gap:.6rem;width:min(380px,calc(100vw - 2rem));pointer-events:none}
.toast{pointer-events:auto;position:relative;margin:0;padding:.85rem 2.4rem .85rem 1.1rem;border-radius:12px;background:#1d140e;color:var(--ivory);border-left:5px solid var(--ok);box-shadow:0 12px 34px rgba(0,0,0,.28);animation:tin .28s ease;cursor:pointer;line-height:1.4}
.toast.info{border-left-color:var(--sky)}.toast.bad{border-left-color:#e0533a}
.toast.out{opacity:0;transform:translateX(20px);transition:.3s}
.toastx{position:absolute;right:.4rem;top:.3rem;border:0;background:none;color:#b9ab97;font-size:1.4rem;line-height:1;cursor:pointer;padding:.2rem .4rem}
@keyframes tin{from{opacity:0;transform:translateX(24px)}}
/* Popups */
dialog.modal{border:0;padding:0;border-radius:18px;background:#fffdf9;color:var(--ink);box-shadow:0 30px 90px rgba(10,5,0,.45);width:min(520px,calc(100vw - 1.5rem));max-height:calc(100vh - 2rem);overflow:hidden;margin:auto}
dialog.modal[open]{display:flex;flex-direction:column;animation:min .22s ease}
dialog.modal.big{width:min(760px,calc(100vw - 1.5rem))}
dialog.modal::backdrop{background:rgba(14,8,4,.62);backdrop-filter:blur(3px)}
@keyframes min{from{opacity:0;transform:translateY(14px) scale(.98)}}
.mhead{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem 1.4rem;border-bottom:1px solid var(--line);background:#f8f1e5}
.mhead h2{margin:0;font-size:1.25rem}
.modalx{border:0;background:none;font-size:1.9rem;line-height:1;cursor:pointer;color:#7a6b5a;width:40px;height:40px;border-radius:10px}.modalx:hover{background:#eadfce}
.mbody{padding:1.3rem 1.4rem;overflow-y:auto}
.mbody>.popup{border:0;padding:0;box-shadow:none;background:none}
dialog.confirm .mbody p{margin:0;font-size:1.05rem;line-height:1.55}
.mfoot{display:flex;justify-content:flex-end;gap:.6rem;flex-wrap:wrap;padding:1rem 1.4rem;border-top:1px solid var(--line);background:#f8f1e5}
.oitems{display:grid;gap:.5rem}.oitem{display:flex;justify-content:space-between;align-items:center;gap:1rem;border:1px solid var(--line);border-radius:10px;padding:.5rem .8rem}.oitem input{width:84px}
@media(max-width:900px){
  body{grid-template-columns:1fr}
  .side{position:fixed;left:0;top:0;bottom:0;height:100vh;transform:translateX(-102%);transition:transform .25s ease;display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;box-shadow:0 0 60px rgba(0,0,0,.5)}
  .side nav{display:flex;flex-wrap:nowrap}
  .side-foot{margin:auto 0 0}
  body.nav-open .side{transform:none}
  body.nav-open .scrim{display:block;position:fixed;inset:0;background:rgba(10,5,0,.55);z-index:55}
  .menubtn{display:inline-flex}
  .iconbtn.txt{display:none}
  .toasts{top:4.2rem}
}
@media(max-width:700px){
  .mhead,.mbody,.mfoot{padding-left:1rem;padding-right:1rem}
  dialog.modal{max-height:calc(100vh - 1rem)}
  .mfoot .btn{flex:1}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.perms{border:1px solid var(--line);border-radius:10px;padding:.8rem 1rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.4rem .8rem}.perms legend{padding:0 .4rem;font-weight:600}
.pill.ok{background:#dcefdc;color:#1f5f2a}.pill{background:#eee;color:#555}
.card.form h2{margin-top:1.4rem}.card.form>h2:first-child,.card.form>p.muted:first-child+h2{margin-top:0}
.sticky{position:sticky;bottom:0;background:var(--card,#fff);padding:.7rem 0;margin:0;border-top:1px solid var(--line)}