/* ============================================================
   CHAOSTOUR — Design Tokens (portiert aus claude.ai Mockup)
   ============================================================ */
:root{
  /* Primär — warmes Naturgrün (Tannen/Moos) */
  --green-900: oklch(0.30 0.055 158);
  --green-700: oklch(0.42 0.082 156);
  --green-600: oklch(0.49 0.090 155);
  --green-500: oklch(0.57 0.095 152);
  --green-300: oklch(0.80 0.060 150);
  --green-100: oklch(0.93 0.030 150);
  --green-050: oklch(0.965 0.018 150);

  /* Akzente — warm */
  --orange:    oklch(0.70 0.150 52);
  --orange-ink:oklch(0.46 0.130 50);
  --mustard:   oklch(0.80 0.130 88);
  --mustard-ink:oklch(0.52 0.110 86);
  --terra:     oklch(0.63 0.140 38);
  --terra-ink: oklch(0.46 0.130 36);
  --lilac:     oklch(0.66 0.110 305);
  --lilac-ink: oklch(0.48 0.110 305);
  --sky:       oklch(0.70 0.090 235);

  /* Tageszeit-Färbung */
  --tz-fruh:   oklch(0.85 0.120 95);
  --tz-mittag: oklch(0.72 0.150 55);
  --tz-abend:  oklch(0.62 0.110 300);

  /* Status */
  --ok:   oklch(0.60 0.110 150);
  --warn: oklch(0.75 0.140 75);
  --info: oklch(0.62 0.090 235);
  --danger: oklch(0.55 0.150 30);

  /* Light Mode Flächen */
  --bg:        oklch(0.975 0.010 95);
  --bg-tint:   oklch(0.955 0.014 110);
  --surface:   oklch(0.995 0.004 95);
  --surface-2: oklch(0.965 0.012 105);
  --ink:       oklch(0.28 0.024 160);
  --ink-soft:  oklch(0.44 0.020 158);
  --ink-mute:  oklch(0.58 0.016 155);
  --border:    oklch(0.90 0.012 130);
  --border-soft:oklch(0.93 0.010 120);
  --shadow:    0 1px 2px oklch(0.30 0.02 150 / .05), 0 8px 24px oklch(0.30 0.04 150 / .07);
  --shadow-lg: 0 2px 4px oklch(0.30 0.02 150 / .06), 0 18px 44px oklch(0.30 0.04 150 / .14);

  --primary: var(--green-600);
  --primary-ink: var(--green-700);
  --on-primary: oklch(0.985 0.010 150);
  --primary-soft: var(--green-100);
  --primary-soft-ink: var(--green-700);

  --radius: 18px;
  --radius-sm: 12px;
  --radius-lg: 26px;
  --tap: 52px;          /* Touch-Target — komfortabel für Daumen */
  --tap-lg: 60px;       /* extra-groß für Haupt-CTAs */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, system-ui, sans-serif;
  --mono: "SF Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;

  /* Body-Background-Gradients als Variablen (Dark Mode überschreibt) */
  --grad-1: oklch(0.55 0.07 150 / .10);
  --grad-2: oklch(0.68 0.12 55 / .08);
}

[data-theme="dark"]{
  --bg:        oklch(0.205 0.020 158);
  --bg-tint:   oklch(0.185 0.022 158);
  --surface:   oklch(0.245 0.022 158);
  --surface-2: oklch(0.290 0.026 158);
  --ink:       oklch(0.955 0.010 100);
  --ink-soft:  oklch(0.82 0.014 120);
  --ink-mute:  oklch(0.66 0.016 130);
  --border:    oklch(0.345 0.022 158);
  --border-soft:oklch(0.31 0.020 158);
  --shadow:    0 1px 2px oklch(0 0 0 / .25), 0 8px 24px oklch(0 0 0 / .30);
  --shadow-lg: 0 2px 6px oklch(0 0 0 / .3), 0 20px 48px oklch(0 0 0 / .45);

  --green-100: oklch(0.34 0.045 156);
  --green-050: oklch(0.30 0.035 156);
  --primary: var(--green-500);
  --primary-ink: var(--green-300);
  --on-primary: oklch(0.16 0.02 156);
  --primary-soft: oklch(0.32 0.045 156);
  --primary-soft-ink: var(--green-300);

  --orange-ink: oklch(0.80 0.130 60);
  --mustard-ink: oklch(0.84 0.120 90);
  --terra-ink: oklch(0.74 0.130 44);
  --lilac-ink: oklch(0.78 0.110 305);

  --grad-1: oklch(0.30 0.04 150 / .08);
  --grad-2: oklch(0.40 0.10 55 / .06);
}

/* ============================================================
   Basis
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html{height:100%;}
body{
  font-family:var(--font);
  background:
    radial-gradient(1200px 600px at 80% -10%, var(--grad-1), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, var(--grad-2), transparent 55%),
    var(--bg-tint);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.45;
  min-height:100%;
  padding-bottom: calc(72px + env(safe-area-inset-bottom, 0));
}
a{color:var(--primary);text-decoration:none;}
a:hover{text-decoration:underline;}
input, select, textarea, button{font-family:inherit;color:inherit;}

/* ============================================================
   Layout-Wrapper
   ============================================================ */
.app-shell{
  max-width:480px;
  margin:0 auto;
  background:var(--bg);
  min-height:100vh;
  padding:0 18px 28px;
  position:relative;
}
@media (min-width:900px){
  .app-shell{max-width:760px;padding:0 24px 28px;}
  body{padding-bottom:40px;}
  .bottomnav{position:sticky;}
}

/* ============================================================
   App-Header
   ============================================================ */
.appbar{
  display:flex;align-items:center;gap:12px;
  padding:18px 0 14px;position:sticky;top:0;z-index:30;
  background:linear-gradient(to bottom, var(--bg) 70%, transparent);
  backdrop-filter:blur(6px);
}
.appbar .brand{display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:-.02em;font-size:17px;}
.appbar .brand .mark{
  width:34px;height:34px;border-radius:11px;display:grid;place-items:center;font-size:18px;
  background:linear-gradient(150deg,var(--green-600),var(--green-700));
  color:var(--on-primary);box-shadow:0 4px 12px oklch(0.45 0.09 155 / .35);
}
.appbar .title-block{flex:1;min-width:0;}
.appbar .title-block h1{font-size:20px;font-weight:850;letter-spacing:-.03em;line-height:1.1;}
.appbar .title-block .sub{font-size:12.5px;color:var(--ink-mute);font-weight:500;margin-top:2px;}
.icon-btn{
  width:40px;height:40px;flex:0 0 auto;border-radius:12px;border:1px solid var(--border);
  background:var(--surface);display:grid;place-items:center;font-size:17px;cursor:pointer;
  color:var(--ink-soft);transition:.16s;text-decoration:none;
}
.icon-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow);text-decoration:none;}

.header-avatar{
  display:inline-flex;width:40px;height:40px;border-radius:50%;overflow:hidden;
  flex:0 0 auto;text-decoration:none;
  transition:.16s;
}
.header-avatar:hover{transform:translateY(-1px);box-shadow:var(--shadow);text-decoration:none;}
.header-avatar .avatar{width:100%;height:100%;font-size:14px;box-shadow:none;}

/* Hamburger-Button */
.menu-btn{font-size:22px;line-height:1;font-weight:300;}

/* ============================================================
   Side-Drawer (Hamburger-Menü)
   ============================================================ */
.side-drawer{
  position:fixed;inset:0;z-index:100;
  background:rgba(0,0,0,.4);backdrop-filter:blur(2px);
  opacity:0;visibility:hidden;transition:opacity .25s ease, visibility .25s;
}
.side-drawer.open{opacity:1;visibility:visible;}
.drawer-panel{
  position:absolute;top:0;right:0;bottom:0;
  width:min(86vw, 340px);
  background:var(--surface);
  box-shadow:-4px 0 24px rgba(0,0,0,.2);
  transform:translateX(100%);transition:transform .28s cubic-bezier(.22,.7,.3,1);
  display:flex;flex-direction:column;
  overflow-y:auto;
  padding-bottom:env(safe-area-inset-bottom);
}
.side-drawer.open .drawer-panel{transform:translateX(0);}

.drawer-header{
  display:flex;align-items:center;gap:10px;
  padding:18px 16px;border-bottom:1px solid var(--border-soft);
  position:sticky;top:0;background:var(--surface);z-index:2;
}
.drawer-header .icon-btn{width:44px;height:44px;font-size:22px;}
.drawer-profile{
  flex:1;display:flex;align-items:center;gap:10px;
  text-decoration:none;color:var(--ink);
  min-width:0;
}
.drawer-profile:hover{text-decoration:none;}
.drawer-profile > div{flex:1;min-width:0;}

.drawer-eyebrow{
  font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-mute);
  padding:18px 16px 8px;
}

.drawer-section{padding:8px 0;border-bottom:1px solid var(--border-soft);}
.drawer-section-last{border-top:1px solid var(--border-soft);border-bottom:none;margin-top:auto;}

.drawer-link{
  display:flex;align-items:center;gap:12px;
  padding:12px 16px;
  text-decoration:none;color:var(--ink);
  font-size:14.5px;font-weight:600;
  background:none;border:none;width:100%;text-align:left;cursor:pointer;font-family:inherit;
  transition:.12s;
}
.drawer-link:hover{background:var(--surface-2);text-decoration:none;}
.drawer-link.active{background:var(--primary-soft);color:var(--primary-soft-ink);}
.drawer-link-icon{
  font-size:18px;line-height:1;width:28px;text-align:center;flex:0 0 auto;
}
.drawer-link-admin{color:var(--primary-ink);font-weight:700;}
.drawer-link-logout{color:var(--terra-ink);font-weight:700;}
.drawer-badge{
  margin-left:auto;background:var(--orange);color:oklch(0.22 0.06 50);
  border-radius:999px;padding:2px 9px;font-size:11px;font-weight:800;
}

.profil-card-empty{border-left:3px solid var(--mustard);}

.push-card{
  display:block;
  background:linear-gradient(135deg, color-mix(in oklab, var(--mustard) 25%, var(--surface)), color-mix(in oklab, var(--orange) 15%, var(--surface)));
  border:1px solid color-mix(in oklab, var(--mustard) 40%, var(--border));
  border-left:4px solid var(--orange);
  box-shadow:var(--shadow);
  margin-bottom:14px;
  animation:pushPulse 2s ease-in-out infinite;
}
.push-card:hover{
  transform:translateY(-1px);
  box-shadow:var(--shadow-lg);
  text-decoration:none;
  animation:none;
}
@keyframes pushPulse{
  0%, 100%{box-shadow:var(--shadow);}
  50%{box-shadow:0 0 0 4px color-mix(in oklab, var(--orange) 25%, transparent), var(--shadow);}
}
@media (prefers-reduced-motion: reduce){
  .push-card{animation:none;}
}
.profil-card-empty:hover{transform:translateY(-1px);box-shadow:var(--shadow);text-decoration:none;border-color:var(--mustard);}

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  font-family:inherit;cursor:pointer;border:none;border-radius:14px;font-weight:700;font-size:15px;
  padding:0 22px;height:var(--tap);min-width:52px;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  transition:.18s;letter-spacing:-.01em;text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.btn-block{width:100%;}
.btn-primary{background:var(--primary);color:var(--on-primary);box-shadow:0 6px 18px oklch(0.45 0.09 155 / .32);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 26px oklch(0.45 0.09 155 / .40);text-decoration:none;}
.btn-orange{background:var(--orange);color:oklch(0.22 0.06 50);box-shadow:0 6px 18px oklch(0.70 0.15 52 / .35);}
.btn-orange:hover{transform:translateY(-2px);text-decoration:none;}
.btn-ghost{background:var(--surface-2);color:var(--ink);border:1px solid var(--border);}
.btn-ghost:hover{background:var(--surface);transform:translateY(-1px);text-decoration:none;}
.btn-danger{background:transparent;color:var(--terra-ink);border:1px solid color-mix(in oklch, var(--terra) 30%, transparent);}
.btn-danger:hover{background:color-mix(in oklch, var(--terra) 10%, transparent);text-decoration:none;}
.btn-sm{height:42px;font-size:13.5px;padding:0 16px;border-radius:11px;min-width:44px;}
.btn-success{background:var(--green-100);color:var(--primary-soft-ink);box-shadow:none;}

/* ============================================================
   Cards
   ============================================================ */
.card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:16px;margin-bottom:12px;
}
.card-tight{padding:6px 14px;}
.card-pad-0{padding:0;}
.card-warn{border-color:color-mix(in oklch, var(--mustard) 40%, var(--border));background:linear-gradient(135deg, oklch(0.80 0.13 88 / .12), var(--surface));}
.card-danger{border-color:color-mix(in oklch, var(--terra) 40%, var(--border));background:color-mix(in oklch, var(--terra) 6%, var(--surface));}

.section-h{display:flex;align-items:baseline;gap:9px;margin:22px 2px 11px;}
.section-h h2{font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-mute);}
.section-h .count{font-size:12px;color:var(--ink-mute);font-weight:600;margin-left:auto;}

.eyebrow{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);}

/* ============================================================
   Pills & Badges
   ============================================================ */
.pill{
  display:inline-flex;align-items:center;gap:5px;border-radius:999px;
  padding:5px 11px;font-size:12px;font-weight:600;line-height:1;white-space:nowrap;
}
.pill-soft{background:var(--surface-2);color:var(--ink-soft);border:1px solid var(--border);}
.pill-green{background:var(--green-100);color:var(--primary-soft-ink);}
.pill-orange{background:oklch(0.70 0.15 52 / .16);color:var(--orange-ink);}
.pill-mustard{background:oklch(0.80 0.13 88 / .20);color:var(--mustard-ink);}
.pill-terra{background:oklch(0.63 0.14 38 / .16);color:var(--terra-ink);}
.pill-lilac{background:oklch(0.66 0.11 305 / .18);color:var(--lilac-ink);}
.pill-info{background:oklch(0.62 0.09 235 / .15);color:var(--info);}

.tip{
  display:flex;gap:9px;align-items:flex-start;
  background:oklch(0.80 0.13 88 / .14);border:1px solid oklch(0.80 0.13 88 / .30);
  border-radius:13px;padding:10px 12px;font-size:12.5px;color:var(--mustard-ink);line-height:1.4;
}
[data-theme="dark"] .tip{color:oklch(0.86 0.10 90);}
.tip b{font-weight:700;}

.tip-info{
  background:oklch(0.62 0.09 235 / .12);border-color:oklch(0.62 0.09 235 / .25);color:var(--info);
}
[data-theme="dark"] .tip-info{color:oklch(0.78 0.10 235);}

/* ============================================================
   Avatars
   ============================================================ */
.avatar{
  width:30px;height:30px;border-radius:50%;display:inline-grid;place-items:center;
  font-size:12px;font-weight:800;color:oklch(0.985 0.010 150);flex:0 0 auto;
  box-shadow:0 0 0 2px var(--surface);
  overflow:hidden;position:relative;
}
.avatar.sm{width:24px;height:24px;font-size:10px;}
.avatar.lg{width:44px;height:44px;font-size:16px;}
.avatar.xl{width:80px;height:80px;font-size:28px;}
.avatar-img img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%;}
.avatar-anon{
  background:var(--surface-2);
  border:1px dashed var(--border);
  color:var(--ink-mute);
  box-shadow:none;
  font-weight:700;
}
.avatar-stack{display:inline-flex;}
.avatar-stack .avatar{margin-left:-8px;}
.avatar-stack .avatar:first-child{margin-left:0;}

/* ============================================================
   Custom Checkbox (SVG)
   ============================================================ */
.check{
  width:32px;height:32px;flex:0 0 auto;border-radius:10px;border:2px solid var(--border);
  background:var(--surface);cursor:pointer;display:grid;place-items:center;transition:.2s;position:relative;
  padding:0;-webkit-tap-highlight-color:transparent;
}
.check svg{
  width:18px;height:18px;stroke:var(--on-primary);stroke-width:3.4;fill:none;
  stroke-dasharray:20;stroke-dashoffset:20;transition:stroke-dashoffset .26s ease .04s;
}
.check.on{background:var(--primary);border-color:var(--primary);}
.check.on svg{stroke-dashoffset:0;}

/* ============================================================
   List rows
   ============================================================ */
.row{
  display:flex;align-items:center;gap:12px;padding:13px 4px;
  border-bottom:1px solid var(--border-soft);
}
.row:last-child{border-bottom:none;}
.row .meta{flex:1;min-width:0;}
.row .meta .t{font-size:14.5px;font-weight:600;letter-spacing:-.01em;}
.row .meta .s{font-size:12px;color:var(--ink-mute);margin-top:1px;}
.row.done .meta .t{text-decoration:line-through;color:var(--ink-mute);}
.row-actions{display:flex;gap:6px;align-items:center;flex-shrink:0;}

/* ============================================================
   Stats
   ============================================================ */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.stats-3{grid-template-columns:1fr 1fr 1fr;gap:8px;}
.stat{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:13px 14px;
  position:relative;overflow:hidden;color:var(--ink);text-decoration:none;display:block;
}
.stat:hover{text-decoration:none;border-color:var(--green-300);}
.stat .v{font-size:25px;font-weight:850;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1;}
.stat .v small{font-size:16px;color:var(--ink-mute);font-weight:700;}
.stat .k{font-size:11.5px;color:var(--ink-mute);font-weight:600;margin-top:5px;}
.stat .ic{position:absolute;top:11px;right:12px;font-size:17px;opacity:.85;}

/* ============================================================
   Progress
   ============================================================ */
.progress{height:8px;border-radius:999px;background:var(--surface-2);overflow:hidden;}
.progress > i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--green-500),var(--green-600));transition:width .5s;}

/* ============================================================
   Login
   ============================================================ */
.login{display:flex;flex-direction:column;justify-content:center;min-height:calc(100vh - 100px);padding:0 14px;text-align:center;}
.login .logo{
  width:78px;height:78px;border-radius:24px;margin:0 auto 20px;display:grid;place-items:center;font-size:38px;
  background:linear-gradient(150deg,var(--green-600),var(--green-700));color:var(--on-primary);
  box-shadow:0 12px 32px oklch(0.45 0.09 155 / .40);
}
.login h1{font-size:30px;font-weight:850;letter-spacing:-.035em;}
.login p.lead{color:var(--ink-mute);font-size:14px;margin-top:7px;}
.field{text-align:left;margin-top:16px;}
.field label{font-size:12.5px;font-weight:700;color:var(--ink-soft);margin-bottom:6px;display:block;}
.input, input[type=text], input[type=number], input[type=date], input[type=password], input[type=email], input[type=tel], input[type=url], input[type=search], input:not([type]), select, textarea{
  width:100%;height:var(--tap);border-radius:14px;border:1.5px solid var(--border);background:var(--surface);
  padding:0 18px;
  font-size:16px;  /* min 16px verhindert Auto-Zoom auf iOS */
  font-family:inherit;color:var(--ink);transition:.16s;
  -webkit-appearance:none;appearance:none;
  -webkit-tap-highlight-color:transparent;
}
textarea{height:auto;padding:14px 18px;min-height:120px;line-height:1.5;resize:vertical;}
input[type=file]{
  height:auto;padding:14px;font-size:14px;
  background:var(--surface-2);border-style:dashed;cursor:pointer;
}
input[type=file]::file-selector-button{
  margin-right:12px;padding:10px 16px;border:none;border-radius:8px;
  background:var(--primary);color:var(--on-primary);font-weight:700;cursor:pointer;
}
select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%236b7468' d='M6 8L0 0h12z'/></svg>");background-repeat:no-repeat;background-position:right 16px center;padding-right:38px;}
[data-theme="dark"] select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23a8b5a0' d='M6 8L0 0h12z'/></svg>");}
.input:focus, input:focus, select:focus, textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px oklch(0.49 0.09 155 / .15);}
.pin{display:flex;gap:9px;}
.pin .input{text-align:center;font-size:22px;font-weight:800;letter-spacing:.1em;padding:0;}

/* ============================================================
   Hero (Home)
   ============================================================ */
.hero{
  border-radius:var(--radius-lg);padding:22px 20px;color:oklch(0.97 0.02 150);position:relative;overflow:hidden;
  background:linear-gradient(155deg,var(--green-700),var(--green-900));
  box-shadow:var(--shadow);margin-bottom:14px;
}
.hero::after{content:"⛺";position:absolute;right:-6px;bottom:-18px;font-size:120px;opacity:.10;transform:rotate(-8deg);}
.hero .yr{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.78;}
.hero h2{font-size:30px;font-weight:850;letter-spacing:-.035em;margin-top:4px;line-height:1.05;}
.hero .place{font-size:13.5px;opacity:.85;margin-top:6px;display:flex;align-items:center;gap:6px;}
.hero .ring{position:absolute;right:18px;top:18px;font-size:11px;font-weight:800;background:oklch(1 0 0 / .15);border:1px solid oklch(1 0 0 / .25);padding:5px 10px;border-radius:999px;color:oklch(0.97 0.02 150);}

.dabei{margin-bottom:14px;}
.dabei .btn{width:100%;}

/* Facts (Eckdaten-Block) */
.facts{display:grid;gap:1px;background:var(--border-soft);border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--border);}
.fact{display:flex;align-items:center;gap:12px;background:var(--surface);padding:13px 14px;}
.fact .fi{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:16px;background:var(--surface-2);flex:0 0 auto;}
.fact .fk{font-size:11.5px;color:var(--ink-mute);font-weight:600;}
.fact .fv{font-size:14.5px;font-weight:700;letter-spacing:-.01em;}
.fact .fv.accent{color:var(--orange-ink);}
.fact .fv a{color:var(--primary-ink);font-size:12px;margin-left:6px;}

/* Quick-Nav */
.quick{display:grid;gap:8px;}
.quick a{
  display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:14px;border:1px solid var(--border);
  background:var(--surface);cursor:pointer;transition:.16s;text-decoration:none;color:inherit;
}
.quick a:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--green-300);text-decoration:none;}
.quick .qi{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:18px;flex:0 0 auto;}
.quick .qt{flex:1;font-size:14.5px;font-weight:700;letter-spacing:-.01em;}
.quick .qs{font-size:12px;color:var(--ink-mute);font-weight:500;}
.quick .qchev{color:var(--ink-mute);font-size:16px;}
.quick .qbadge{
  background:var(--orange);color:oklch(0.22 0.06 50);
  border-radius:999px;padding:3px 9px;font-size:11px;font-weight:800;
}

/* ============================================================
   Meal Cards
   ============================================================ */
.daygroup{margin-top:18px;}
.dayhead{display:flex;align-items:baseline;gap:8px;margin:0 2px 10px;}
.dayhead .dn{font-size:16px;font-weight:850;letter-spacing:-.02em;}
.dayhead .dd{font-size:12px;color:var(--ink-mute);font-weight:600;}
.meal{
  border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);
  box-shadow:var(--shadow);overflow:hidden;margin-bottom:11px;transition:.18s;cursor:pointer;
  text-decoration:none;color:var(--ink);display:block;
}
.meal:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);text-decoration:none;}
.meal-top{display:flex;align-items:center;gap:13px;padding:14px 15px;position:relative;}
.meal-top::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;}
.meal.tz-fruh .meal-top::before{background:var(--tz-fruh);}
.meal.tz-mittag .meal-top::before{background:var(--tz-mittag);}
.meal.tz-abend .meal-top::before{background:var(--tz-abend);}
.meal.tz-default .meal-top::before{background:var(--green-300);}
.meal .micon{
  width:52px;height:52px;border-radius:15px;display:grid;place-items:center;font-size:27px;flex:0 0 auto;
  background:var(--surface-2);
}
.meal.tz-fruh .micon{background:oklch(0.85 0.12 95 / .22);}
.meal.tz-mittag .micon{background:oklch(0.72 0.15 55 / .18);}
.meal.tz-abend .micon{background:oklch(0.62 0.11 300 / .20);}
.meal .mtitle{flex:1;min-width:0;}
.meal .mtitle .tag{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute);}
.meal.tz-fruh .tag{color:var(--mustard-ink);}
.meal.tz-mittag .tag{color:var(--orange-ink);}
.meal.tz-abend .tag{color:var(--lilac-ink);}
.meal .mtitle .name{font-size:17px;font-weight:800;letter-spacing:-.02em;margin-top:1px;}
.meal .ingr{display:flex;flex-wrap:wrap;gap:6px;padding:0 15px 13px;}
.meal-foot{
  display:flex;align-items:center;gap:14px;padding:11px 15px;border-top:1px solid var(--border-soft);
  background:var(--surface-2);font-size:12px;color:var(--ink-mute);font-weight:600;
}
.meal-foot .mf{display:flex;align-items:center;gap:5px;}
.meal-foot .cook{margin-left:auto;display:flex;align-items:center;gap:7px;color:var(--ink-soft);}

/* ============================================================
   Shop Filter + Cards (Einkauf)
   ============================================================ */
.shopfilters{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;padding:2px 0 4px;margin:0 -18px 6px;padding-left:18px;padding-right:18px;}
.shopfilters::-webkit-scrollbar{display:none;}
.fchip{
  flex:0 0 auto;border:1px solid var(--border);background:var(--surface);font-family:inherit;cursor:pointer;
  border-radius:999px;padding:10px 16px;font-size:13.5px;font-weight:700;color:var(--ink-soft);transition:.15s;white-space:nowrap;
  display:inline-flex;gap:6px;align-items:center;text-decoration:none;
  min-height:44px;
  -webkit-tap-highlight-color:transparent;
}
.fchip .dot{width:8px;height:8px;border-radius:50%;}
.fchip.on{background:var(--ink);color:var(--bg);border-color:var(--ink);text-decoration:none;}
.fchip:hover:not(.on){border-color:var(--green-300);text-decoration:none;}

.shopcard{margin-bottom:14px;}
.shopcard .sc-head{display:flex;align-items:center;gap:10px;margin-bottom:6px;flex-wrap:wrap;}
.shopcard .sc-head .nm{font-size:13px;color:var(--ink-soft);font-weight:600;}
.shopcard .sc-head .ct{font-size:11.5px;color:var(--ink-mute);font-weight:600;margin-left:auto;}

/* ============================================================
   Schnaps
   ============================================================ */
.schnaps-total{
  display:flex;align-items:center;gap:14px;padding:15px;border-radius:var(--radius);
  background:linear-gradient(145deg,var(--surface),var(--surface-2));border:1px solid var(--border);
  box-shadow:var(--shadow);margin-bottom:11px;cursor:pointer;transition:.18s;
}
.schnaps-total:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);}
.schnaps-total .se{font-size:32px;flex:0 0 auto;width:54px;height:54px;border-radius:15px;display:grid;place-items:center;background:oklch(0.63 0.14 38 / .14);}
.schnaps-total .st{flex:1;min-width:0;}
.schnaps-total .st .nm{font-size:16px;font-weight:800;letter-spacing:-.02em;}
.schnaps-total .st .by{font-size:12px;color:var(--ink-mute);margin-top:2px;}
.schnaps-total .amt{text-align:right;flex-shrink:0;}
.schnaps-total .amt .big{font-size:24px;font-weight:850;color:var(--terra-ink);line-height:1;font-variant-numeric:tabular-nums;}
.schnaps-total .amt .unit{font-size:11px;color:var(--ink-mute);font-weight:600;}
.bringers{display:none;flex-direction:column;gap:0;padding:2px 4px 11px;}
.bringers.open{display:flex;}
.bringer{display:flex;align-items:center;gap:9px;padding:8px 0;border-top:1px solid var(--border-soft);font-size:13.5px;}
.bringer .who{flex:1;font-weight:600;}
.bringer .qty{font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink-soft);}
.bringer .mine-actions{display:flex;gap:6px;}

/* ============================================================
   Bestellungen
   ============================================================ */
.order{margin-bottom:12px;}
.order .o-head{display:flex;align-items:flex-start;gap:12px;}
.order .o-emoji{font-size:26px;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--surface-2);flex:0 0 auto;}
.order .o-name{font-size:16px;font-weight:800;letter-spacing:-.02em;}
.order .o-sub{font-size:12px;color:var(--ink-mute);margin-top:1px;}
.order .o-items{margin-top:11px;display:grid;gap:7px;}
.order .o-line{display:flex;justify-content:space-between;gap:8px;font-size:13px;padding:7px 11px;border-radius:10px;background:var(--surface-2);}
.order .o-line .q{font-weight:700;color:var(--ink-soft);white-space:nowrap;}
.order .o-foot{display:flex;align-items:center;gap:10px;margin-top:13px;font-size:12.5px;color:var(--ink-mute);flex-wrap:wrap;}
.status{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:5px 11px;font-size:11.5px;font-weight:800;}
.status.open, .status.offen{background:oklch(0.75 0.14 75 / .18);color:var(--mustard-ink);}
.status.ordered, .status.bestellt{background:oklch(0.62 0.09 235 / .16);color:var(--info);}
.status.picked, .status.abgeholt{background:var(--green-100);color:var(--primary-soft-ink);}

/* ============================================================
   Participants (Teilnehmer)
   ============================================================ */
.part{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid var(--border-soft);}
.part.abgesagt{opacity:.55;}
.part.abgesagt .pn .nm{text-decoration:line-through;text-decoration-color:var(--terra);}
.status-abgesagt{font-size:14px;}
.part:last-child{border-bottom:none;}
.part .pn{flex:1;min-width:0;}
.part .pn .nm{font-size:14.5px;font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.part .pn .role{font-size:11.5px;color:var(--ink-mute);}
.crown{font-size:12px;}
.paybadge{font-size:11px;font-weight:800;border-radius:999px;padding:4px 9px;}
.paybadge.paid{background:var(--green-100);color:var(--primary-soft-ink);}
.paybadge.due{background:oklch(0.75 0.14 75 / .18);color:var(--mustard-ink);}

/* ============================================================
   Admin
   ============================================================ */
.admincard{display:flex;align-items:center;gap:13px;padding:15px;margin-bottom:10px;}
.admincard .ai{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;font-size:20px;flex:0 0 auto;background:var(--surface-2);}
.admincard .at{flex:1;min-width:0;}
.admincard .at .nm{font-size:15px;font-weight:800;letter-spacing:-.02em;}
.admincard .at .ds{font-size:12px;color:var(--ink-mute);margin-top:2px;}
.admincard.danger{border-color:oklch(0.63 0.14 38 / .4);background:oklch(0.63 0.14 38 / .06);}
.admincard.danger .ai{background:oklch(0.63 0.14 38 / .16);}
.admincard.danger .at .nm{color:var(--terra-ink);}
.admincard .qchev{color:var(--ink-mute);font-size:18px;}

/* ============================================================
   Bottom Nav
   ============================================================ */
.bottomnav{
  position:fixed;bottom:0;left:0;right:0;z-index:40;
  display:flex;justify-content:space-around;align-items:center;
  padding:10px 8px calc(10px + env(safe-area-inset-bottom));
  border-top:1px solid var(--border);
  background:color-mix(in oklch, var(--surface) 92%, transparent);
  backdrop-filter:saturate(1.4) blur(14px);
  max-width:480px;margin:0 auto;
}
@media (min-width:900px){
  .bottomnav{max-width:760px;}
}
.bottomnav a{
  border:none;background:transparent;font-family:inherit;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  font-size:10px;font-weight:600;color:var(--ink-mute);padding:5px 9px;border-radius:12px;transition:.15s;
  text-decoration:none;flex:1;text-align:center;
}
.bottomnav a .bi{font-size:19px;line-height:1;}
.bottomnav a.active{color:var(--primary-ink);}
.bottomnav a.active .bi{transform:translateY(-1px);}

/* ============================================================
   Forms (für Edit-Modals und einfache Forms)
   ============================================================ */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:end;}
.form-grid label{
  display:block;font-size:13px;font-weight:700;color:var(--ink-soft);
  cursor:pointer;line-height:1.4;
}
.form-grid label.full{grid-column:1 / -1;}
.form-grid label input,
.form-grid label select,
.form-grid label textarea{margin-top:6px;}
.form-grid .btn{grid-column:1 / -1;}
.form-grid.mini{grid-template-columns:1fr;gap:12px;padding:14px 0;border-top:1px dashed var(--border);margin-top:12px;}
.form-grid hr.full{grid-column:1 / -1;border:none;border-top:1px solid var(--border);margin:4px 0;}

/* Inline-Checkbox/Radio mit Label (z.B. "Anonym posten") — größeres Tap-Target */
input[type=checkbox], input[type=radio]{
  width:22px;height:22px;
  accent-color:var(--primary);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.form-grid label:has(> input[type=checkbox]),
.form-grid label:has(> input[type=radio]){
  display:flex;align-items:center;gap:10px;
  padding:12px 0;
  font-size:14px;color:var(--ink);
  cursor:pointer;
}
.form-grid label:has(> input[type=checkbox]):hover,
.form-grid label:has(> input[type=radio]):hover{
  color:var(--primary-ink);
}

@media (max-width:600px){
  .form-grid{grid-template-columns:1fr;}
  .stats-3{grid-template-columns:1fr 1fr 1fr;}
}

/* ============================================================
   Flashes
   ============================================================ */
.flashes{margin:8px 0 14px;}
.flash{
  padding:11px 14px;border-radius:12px;margin-bottom:8px;font-size:13.5px;font-weight:600;
  background:var(--green-100);color:var(--primary-soft-ink);border:1px solid color-mix(in oklch, var(--green-300) 50%, transparent);
}
.flash.warn, .flash.flash-warn{background:oklch(0.80 0.13 88 / .18);color:var(--mustard-ink);border-color:oklch(0.80 0.13 88 / .35);}
.flash.danger, .flash.flash-danger{background:oklch(0.63 0.14 38 / .12);color:var(--terra-ink);border-color:oklch(0.63 0.14 38 / .30);}

/* ============================================================
   Login-Hint
   ============================================================ */
.login-hint{
  font-size:12.5px;min-height:1.4em;margin:6px 4px 0;text-align:left;font-weight:600;
}
.login-hint.ok{color:var(--ok);}
.login-hint.warn{color:var(--mustard-ink);}

/* ============================================================
   Details / Disclosure
   ============================================================ */
details summary{cursor:pointer;list-style:none;}
details summary::-webkit-details-marker{display:none;}
.more summary{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:12px;border:1px solid var(--border);background:var(--surface);
  color:var(--ink-soft);font-size:18px;font-weight:700;
  -webkit-tap-highlight-color:transparent;
}
.more summary:hover{background:var(--surface-2);}
.more[open] summary{background:var(--surface-2);}
/* Beschriftete Variante: "✏ Ändern" statt nacktem ⋯ */
.more-labeled summary{width:auto;padding:0 14px;gap:5px;font-size:14px;font-weight:700;color:var(--ink-soft);}
.more-labeled[open] summary{background:var(--primary-soft);color:var(--primary-soft-ink);border-color:var(--primary);}
@media (max-width:380px){ .more-labeled .more-label{display:none;} }
.more-content{margin-top:8px;padding:12px;border-radius:12px;background:var(--surface-2);border:1px solid var(--border-soft);}

/* ============================================================
   Misc
   ============================================================ */
.muted{color:var(--ink-mute);font-size:13px;}
.hint{color:var(--ink-mute);font-size:12.5px;margin-top:10px;}
.notiz{color:var(--ink-mute);font-size:12.5px;font-style:italic;}
.text-center{text-align:center;}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.spacer{flex:1;}

.lerntipp{
  display:inline-flex;align-items:center;gap:4px;
  font-size:11px;font-weight:700;
  background:oklch(0.80 0.13 88 / .20);color:var(--mustard-ink);
  padding:3px 8px;border-radius:999px;margin-top:4px;
}

/* Bringer-Picker (Multi-Checkbox als Chips) */
.bringer-picker{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;}
.chip-pick{
  display:inline-flex;align-items:center;gap:6px;padding:10px 16px;
  border:1px solid var(--border);border-radius:999px;
  background:var(--surface);font-size:14px;cursor:pointer;font-weight:600;
  min-height:44px;
  -webkit-tap-highlight-color:transparent;
}
.chip-pick input{margin:0;accent-color:var(--primary);}
.chip-pick:has(input:checked){
  background:var(--green-100);border-color:var(--primary);color:var(--primary-soft-ink);
}

/* Bezahl-Stats Block */
.bezahl-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}

/* ============================================================
   Forum — Threads & Replies (Nachbereitung)
   ============================================================ */
.thread{margin-bottom:10px;}
.thread-head{
  display:flex;align-items:flex-start;gap:10px;margin-bottom:8px;
}
.thread-meta{flex:1;min-width:0;}
.thread-name{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.thread-name strong{font-size:14.5px;font-weight:800;}
.thread-topic{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px;}
.thread-body{
  font-size:14px;line-height:1.5;margin:6px 0 12px;
  padding:11px 13px;border-radius:12px;background:var(--surface-2);
  color:var(--ink-soft);
}
.thread-replies{
  border-left:3px solid var(--border);
  padding:0 0 0 12px;margin:0 0 12px 6px;
}
.reply{display:flex;gap:10px;padding:8px 0;border-top:1px solid var(--border-soft);}
.reply:first-child{border-top:none;padding-top:4px;}
.reply-body{flex:1;min-width:0;}
.reply-head{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;}
.reply-head strong{font-size:13px;font-weight:700;}
.reply-text{font-size:13.5px;line-height:1.45;margin-top:2px;color:var(--ink-soft);}

.thread-reply-form summary{
  font-size:13px;font-weight:700;color:var(--primary-ink);cursor:pointer;
  padding:6px 0;display:inline-block;
}
.thread-reply-form[open] summary{color:var(--primary);}
.thread-reply-form textarea{width:100%;}

/* ============================================================
   Forum Variante B — Item-Feed Stil
   ============================================================ */
.welcome-forum{border-left:4px solid var(--mustard);background:linear-gradient(135deg, oklch(0.80 0.13 88 / .14), var(--surface));}

.absage-disclosure summary{
  display:flex;align-items:center;justify-content:center;gap:6px;
  cursor:pointer;list-style:none;
  padding:10px 14px;border-radius:12px;
  border:1px solid var(--border);background:var(--surface-2);
  font-size:13px;font-weight:700;color:var(--ink-soft);
  text-align:center;
}
.absage-disclosure summary:hover{color:var(--terra-ink);border-color:var(--terra);}
.absage-disclosure[open] summary{color:var(--terra-ink);border-color:var(--terra);background:color-mix(in oklab, var(--terra) 8%, var(--surface));}

.thread-card{
  background:var(--surface);border:1px solid var(--border);border-radius:20px;
  overflow:hidden;margin-bottom:14px;box-shadow:var(--shadow);
}

/* Themen-Band: farbiger Kopfbereich pro Topic */
.thread-band{
  display:flex;align-items:center;gap:9px;padding:12px 15px;
  border-bottom:1px solid var(--border-soft);
  font-weight:800;font-size:14px;
}
.thread-band-icon{font-size:18px;line-height:1;}
.thread-band-title{flex:1;letter-spacing:-.01em;}
.thread-band-link{
  margin-left:auto;background:oklch(0 0 0 / .15);border-radius:999px;
  padding:4px 11px;font-size:11px;font-weight:700;color:inherit;
  text-decoration:none;
}
.thread-band-link:hover{background:oklch(0 0 0 / .25);text-decoration:none;}

.thread-band-green   {background:color-mix(in oklab, var(--green-500) 22%, var(--surface)); color:var(--primary-ink);}
.thread-band-terra   {background:color-mix(in oklab, var(--terra) 22%, var(--surface));     color:var(--terra-ink);}
.thread-band-orange  {background:color-mix(in oklab, var(--orange) 22%, var(--surface));    color:var(--orange-ink);}
.thread-band-lilac   {background:color-mix(in oklab, var(--lilac) 22%, var(--surface));     color:var(--lilac-ink);}
.thread-band-mustard {background:color-mix(in oklab, var(--mustard) 25%, var(--surface));   color:var(--mustard-ink);}
.thread-band-info    {background:color-mix(in oklab, var(--sky) 22%, var(--surface));       color:var(--info);}

.thread-body-pad{padding:14px 15px;}

.thread-author{display:flex;align-items:center;gap:10px;}
.thread-author-meta{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;font-size:13px;color:var(--ink-mute);}
.thread-author-meta strong{font-size:13.5px;font-weight:700;color:var(--ink);}

.thread-text{
  font-size:14px;line-height:1.5;margin-top:10px;color:var(--ink);
}

/* Metrik-Kacheln bei strukturierten Beiträgen */
.metric-tiles{display:flex;gap:9px;margin-top:13px;}
.metric-tile{
  flex:1;background:var(--surface-2);border:1px solid var(--border-soft);border-radius:13px;
  padding:11px 9px;text-align:center;min-width:0;
}
.metric-value{font-size:16px;font-weight:850;letter-spacing:-.02em;line-height:1.1;}
.metric-label{font-size:10.5px;color:var(--ink-mute);margin-top:4px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;}
.metric-bewertung-zu_viel .metric-value{color:var(--terra-ink);}
.metric-bewertung-zu_wenig .metric-value{color:var(--mustard-ink);}
.metric-bewertung-genau_richtig .metric-value{color:var(--ok);}
.metric-empfehlung .metric-value{color:var(--primary-ink);}

.adopt-button{
  background:var(--primary)!important;color:var(--on-primary)!important;
  border-radius:13px!important;padding:12px!important;font-weight:700!important;font-size:13.5px!important;
  box-shadow:0 4px 12px oklch(0.45 0.09 155 / .25)!important;
}

/* Replies als Chat-Bubbles */
.thread-replies-b{margin-top:14px;display:flex;flex-direction:column;gap:10px;}
.reply-b{display:flex;gap:8px;align-items:flex-start;}
.reply-bubble{
  flex:1;background:var(--surface-2);border-radius:14px;border-top-left-radius:4px;
  padding:9px 12px;min-width:0;
}
.reply-bubble-head{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;font-size:11.5px;color:var(--ink-mute);}
.reply-bubble-head strong{font-size:12px;font-weight:700;color:var(--ink);}
.reply-bubble-text{font-size:13.5px;line-height:1.45;margin-top:3px;color:var(--ink-soft);}

.thread-reply-form-b{margin-top:12px;}
.thread-reply-form-b summary{
  cursor:pointer;list-style:none;
  border:1px solid var(--border);border-radius:12px;padding:10px;text-align:center;
  font-size:13px;font-weight:700;color:var(--ink-mute);background:none;
}
.thread-reply-form-b[open] summary{color:var(--primary);}
.reply-input-row{display:flex;gap:8px;margin-top:10px;}
.reply-input-row{align-items:flex-end;}
.reply-input-row input,
.reply-input-row textarea{
  flex:1;padding:12px 16px;border-radius:12px;border:1.5px solid var(--border);
  background:var(--surface-2);font-size:16px;min-height:var(--tap);line-height:1.4;resize:vertical;
}
.reply-input-row .btn{height:var(--tap);min-width:52px;flex:0 0 auto;}

/* Anonym-Toggle: ganzes Label als großes Tap-Target */
.anon-toggle{
  display:flex !important;align-items:center;gap:12px;
  padding:14px;border:1px solid var(--border);border-radius:12px;
  background:var(--surface-2);cursor:pointer;font-size:14px;
}
.anon-toggle input[type=checkbox]{width:24px;height:24px;flex:0 0 auto;}
.anon-toggle:hover{border-color:var(--primary);}

/* Bewertungs-Chips */
.bewertungs-chips .chip-pick:has(input[value="zu_viel"]:checked){
  background:oklch(0.63 0.14 38 / .18);border-color:var(--terra);color:var(--terra-ink);
}
.bewertungs-chips .chip-pick:has(input[value="zu_wenig"]:checked){
  background:oklch(0.80 0.13 88 / .22);border-color:var(--mustard);color:var(--mustard-ink);
}
.bewertungs-chips .chip-pick:has(input[value="genau_richtig"]:checked){
  background:var(--green-100);border-color:var(--primary);color:var(--primary-soft-ink);
}

/* ============================================================
   PWA: Offline-Bar + Install-Prompt
   ============================================================ */
.offline-bar{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:var(--terra);color:#fff;
  text-align:center;padding:8px 14px;font-size:13px;font-weight:600;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
  display:none;
}
.offline-bar + .app-shell .appbar{top:36px;}

/* Admin-Tab-Leiste */
.admin-tabs{
  display:flex;gap:5px;overflow-x:auto;scrollbar-width:none;
  background:var(--surface-2);border:1px solid var(--border);border-radius:14px;
  padding:5px;margin:4px 0 16px;position:sticky;top:64px;z-index:20;
  -webkit-overflow-scrolling:touch;
}
.admin-tabs::-webkit-scrollbar{display:none;}
.admin-tab{
  flex:1 0 auto;min-width:max-content;
  border:none;background:transparent;font-family:inherit;cursor:pointer;
  padding:10px 14px;border-radius:10px;font-size:13.5px;font-weight:700;
  color:var(--ink-mute);white-space:nowrap;transition:.15s;
  display:inline-flex;align-items:center;gap:6px;
  -webkit-tap-highlight-color:transparent;
}
.admin-tab.active{background:var(--surface);color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,0.12);}
.admin-tab-dot{width:8px;height:8px;border-radius:50%;background:var(--mustard);}
.admin-section[hidden]{display:none;}

/* Nav-Konfig-Grid im Admin */
.nav-grid{display:flex;flex-direction:column;gap:6px;}
.nav-grid-head{
  display:grid;grid-template-columns:1.4fr 1.3fr 70px;gap:10px;
  padding:8px 10px;
  font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute);
}
.nav-grid-row{
  display:grid;grid-template-columns:1.4fr 1.3fr 70px;gap:10px;
  align-items:center;
  padding:8px 10px;border:1px solid var(--border-soft);border-radius:12px;
  background:var(--surface);
}
.nav-grid-row:hover{border-color:var(--border);}
.nav-grid-label{display:flex;align-items:center;gap:10px;font-size:14px;min-width:0;}
.nav-grid-label strong{font-weight:700;}
.nav-grid-select{height:40px;font-size:13.5px;padding:0 28px 0 12px;border-radius:10px;}
.nav-grid-order{height:40px;font-size:14px;text-align:center;padding:0 8px;border-radius:10px;}
@media (max-width:480px){
  .nav-grid-head{display:none;}
  .nav-grid-row{grid-template-columns:1fr;gap:6px;padding:12px;}
  .nav-grid-select,.nav-grid-order{width:100%;}
}

/* Avatar-Crop-Editor */
.crop-ui{margin:14px 0;}
.crop-ui canvas{
  width:100%;max-width:320px;height:auto;aspect-ratio:1/1;
  border-radius:16px;display:block;margin:0 auto;cursor:grab;
  touch-action:none;background:#1a1a1a;
}
.crop-ui canvas:active{cursor:grabbing;}
.crop-zoom-row{
  display:flex;align-items:center;gap:12px;margin-top:14px;
  padding:0 4px;
}
.crop-zoom-row span{font-size:18px;}
.crop-zoom-row input[type=range]{
  flex:1;height:44px;
  -webkit-appearance:none;appearance:none;background:transparent;cursor:pointer;
}
.crop-zoom-row input[type=range]::-webkit-slider-runnable-track{
  height:6px;background:var(--surface-2);border-radius:3px;border:1px solid var(--border);
}
.crop-zoom-row input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:26px;height:26px;border-radius:50%;background:var(--primary);
  border:3px solid var(--surface);box-shadow:var(--shadow);
  margin-top:-11px;cursor:grab;
}
.crop-zoom-row input[type=range]::-moz-range-track{
  height:6px;background:var(--surface-2);border-radius:3px;border:1px solid var(--border);
}
.crop-zoom-row input[type=range]::-moz-range-thumb{
  width:26px;height:26px;border-radius:50%;background:var(--primary);
  border:3px solid var(--surface);box-shadow:var(--shadow);cursor:grab;
}
.crop-hint{
  text-align:center;font-size:12.5px;color:var(--ink-mute);
  margin-top:8px;
}

.avatar-row{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;border:1px solid var(--border-soft);border-radius:12px;
  background:var(--surface);transition:.15s;
}
.avatar-row-empty{border-color:color-mix(in oklab, var(--mustard) 30%, var(--border));background:color-mix(in oklab, var(--mustard) 5%, var(--surface));}
.avatar-actions{position:relative;}
.avatar-actions summary{
  list-style:none;cursor:pointer;
  width:44px;height:44px;border-radius:11px;border:1px solid var(--border);
  background:var(--surface-2);
  display:grid;place-items:center;font-size:16px;
  -webkit-tap-highlight-color:transparent;
}
.avatar-actions[open] summary{background:var(--primary-soft);}
.avatar-actions-menu{
  position:absolute;right:0;top:calc(100% + 6px);
  background:var(--surface);border:1px solid var(--border);border-radius:12px;
  padding:12px;box-shadow:var(--shadow-lg);z-index:5;
  min-width:240px;
}

.install-hint{border-left:3px solid var(--info);}
.install-step{
  display:flex;align-items:flex-start;gap:11px;
  padding:9px 0;
  font-size:13.5px;line-height:1.45;
}
.install-step-num{
  flex:0 0 auto;width:24px;height:24px;border-radius:50%;
  background:var(--info);color:#fff;
  display:grid;place-items:center;
  font-size:12px;font-weight:800;
}
.install-step strong{color:var(--ink);}
.ios-share-icon{
  display:inline-block;padding:2px 8px;border-radius:6px;
  background:var(--surface-2);font-size:14px;border:1px solid var(--border);
}
.install-success{
  background:color-mix(in oklab, var(--ok) 12%, var(--surface));
  border-left:3px solid var(--ok);
}

.install-prompt{
  position:fixed;bottom:calc(76px + env(safe-area-inset-bottom));right:14px;z-index:60;
  background:var(--orange);color:oklch(0.22 0.06 50);
  border:none;border-radius:999px;
  padding:10px 18px;font-size:13.5px;font-weight:800;cursor:pointer;font-family:inherit;
  box-shadow:0 6px 18px oklch(0.70 0.15 52 / .45);
  display:none;animation:slideUp .3s ease;
}
.install-prompt:hover{transform:translateY(-2px);}
@keyframes slideUp{from{transform:translateY(10px);opacity:0;}to{transform:none;opacity:1;}}
@media (min-width:900px){
  .install-prompt{bottom:24px;right:24px;}
}

/* ============================================================
   Utility-Klassen für Quick-Nav-Icon-Hintergründe
   (statt inline oklch() in Views)
   ============================================================ */
.qi-lilac{background:oklch(0.66 0.11 305 / .18);}
.qi-terra{background:oklch(0.63 0.14 38 / .16);}
.qi-fruh,.qi-mustard{background:oklch(0.85 0.12 95 / .22);}
.qi-orange{background:oklch(0.72 0.15 55 / .18);}
.qi-green{background:oklch(0.49 0.09 155 / .16);}
.qi-surface{background:var(--surface-2);}
[data-theme="dark"] .qi-lilac{background:oklch(0.40 0.11 305 / .25);}
[data-theme="dark"] .qi-terra{background:oklch(0.40 0.14 38 / .25);}
[data-theme="dark"] .qi-fruh,[data-theme="dark"] .qi-mustard{background:oklch(0.50 0.12 95 / .25);}
[data-theme="dark"] .qi-orange{background:oklch(0.45 0.14 55 / .25);}
[data-theme="dark"] .qi-green{background:oklch(0.35 0.09 155 / .30);}

/* Progress-Bar-Varianten */
.progress.variant-mustard > i{background:linear-gradient(90deg, oklch(0.78 0.13 90), oklch(0.85 0.13 88));}
.progress.on-hero{background:oklch(1 0 0 / .20);}

/* Status-/Indikator-Inline-Helper */
.indikator-ok{color:var(--ok);}
.indikator-warn{color:var(--warn);}

/* Status-Pill für Teilnehmer */
.status-zugesagt{color:var(--ok);font-size:14px;}
.status-unsicher{color:var(--warn);font-size:14px;}

/* Pill/Status Dark-Mode-Overrides für besseren Kontrast */
[data-theme="dark"] .pill-orange{background:oklch(0.45 0.13 52 / .28);}
[data-theme="dark"] .pill-mustard{background:oklch(0.50 0.12 88 / .28);}
[data-theme="dark"] .pill-terra{background:oklch(0.45 0.13 38 / .28);}
[data-theme="dark"] .pill-lilac{background:oklch(0.45 0.10 305 / .28);}
[data-theme="dark"] .pill-info{background:oklch(0.45 0.08 235 / .28);}
[data-theme="dark"] .pill-green{background:oklch(0.40 0.08 152 / .35);color:var(--green-300);}
[data-theme="dark"] .status.open,
[data-theme="dark"] .status.offen{background:oklch(0.50 0.13 75 / .28);}
[data-theme="dark"] .status.ordered,
[data-theme="dark"] .status.bestellt{background:oklch(0.45 0.08 235 / .28);}
[data-theme="dark"] .status.picked,
[data-theme="dark"] .status.abgeholt{background:oklch(0.40 0.08 152 / .35);}
[data-theme="dark"] .paybadge.paid{background:oklch(0.40 0.08 152 / .35);}
[data-theme="dark"] .paybadge.due{background:oklch(0.50 0.13 75 / .28);}

/* iOS smooth scrolling für horizontale Filter */
.shopfilters,.shopfilters > *{-webkit-overflow-scrolling:touch;}
.fchip{max-width:200px;overflow:hidden;text-overflow:ellipsis;}

/* Appbar Title overflow control */
.appbar .title-block{overflow:hidden;}
.appbar .title-block h1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.appbar .title-block .sub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@media (max-width:380px){
  .appbar .title-block h1{font-size:17px;}
  .appbar{gap:8px;}
  .appbar .brand .mark{width:30px;height:30px;font-size:16px;border-radius:9px;}
  .icon-btn{width:36px;height:36px;font-size:15px;}
}

/* Bestellungen .o-foot Mobile-Layout */
.order .o-foot select{min-height:38px;}
@media (max-width:480px){
  .order .o-foot{flex-direction:column;align-items:stretch;}
  .order .o-foot .spacer{display:none;}
  .order .o-foot select,
  .order .o-foot .btn{width:100%;}
}