/* ============================================================
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;
/* PWA-Standalone: Header unter Notch/Statusleiste schieben (iOS safe area).
Im Browser ist env() = 0 -> fällt auf 18px zurück. */
padding-top:max(18px, calc(env(safe-area-inset-top, 0px) + 8px));
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);
/* Drawer öffnet über die Notch -> Kopf ebenfalls unter die Statusleiste */
padding-top:max(18px, calc(env(safe-area-inset-top, 0px) + 8px));
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);}
.tip-warn{
background:oklch(0.63 0.14 36 / .12);border-color:oklch(0.63 0.14 36 / .30);color:var(--terra-ink);
}
/* ============================================================
Promille-Pegel
============================================================ */
.pegel-card{border-left:4px solid var(--border);}
.pegel-card > summary{list-style:none;}
.pegel-card > summary::-webkit-details-marker{display:none;}
.pegel-head{display:flex;align-items:center;gap:12px;cursor:pointer;}
.pegel-info{flex:1;min-width:0;}
.pegel-name{font-weight:800;font-size:15.5px;letter-spacing:-.01em;}
.pegel-sub{font-size:12px;color:var(--ink-mute);margin-top:2px;}
.pegel-wert{display:flex;align-items:baseline;gap:2px;flex:0 0 auto;}
.pegel-promille{font-size:27px;font-weight:900;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1;}
.pegel-einheit{font-size:14px;font-weight:800;color:var(--ink-mute);}
.pegel-body{margin-top:14px;border-top:1px solid var(--border-soft);padding-top:14px;}
.pegel-drinks{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.pegel-drink{
display:flex;align-items:center;gap:9px;padding:12px;border-radius:12px;
border:1px solid var(--border);background:var(--surface);cursor:pointer;
font-family:inherit;font-size:13px;font-weight:700;color:var(--ink);text-align:left;
transition:.12s;-webkit-tap-highlight-color:transparent;
}
.pegel-drink:hover{border-color:var(--primary);}
.pegel-drink:active{transform:scale(.96);}
.pegel-drink:disabled{opacity:.5;}
.pegel-drink .pd-emoji{font-size:20px;flex:0 0 auto;}
.pegel-actions{display:flex;gap:8px;margin-top:12px;}
.pegel-settings{margin-top:12px;}
.pegel-settings summary{font-size:12.5px;color:var(--ink-soft);cursor:pointer;font-weight:700;}
.pegel-stat-bier{font-size:15px;font-weight:850;color:var(--mustard-ink);white-space:nowrap;flex:0 0 auto;}
/* Status-Farben (Promille) */
.pegel-card.pg-0{border-left-color:var(--ink-mute);}
.pegel-card.pg-1{border-left-color:var(--green-500);} .pg-1 .pegel-promille{color:var(--green-600);}
.pegel-card.pg-2{border-left-color:oklch(0.80 0.13 88);} .pg-2 .pegel-promille{color:var(--mustard-ink);}
.pegel-card.pg-3{border-left-color:var(--orange);} .pg-3 .pegel-promille{color:var(--orange-ink);}
.pegel-card.pg-4{border-left-color:var(--terra);} .pg-4 .pegel-promille{color:var(--terra-ink);}
.pegel-card.pg-5{border-left-color:oklch(0.55 0.20 25);} .pg-5 .pegel-promille{color:oklch(0.55 0.20 25);}
.pegel-card.pg-6{border-left-color:oklch(0.45 0.23 25);} .pg-6 .pegel-promille{color:oklch(0.48 0.23 25);}
[data-theme="dark"] .pg-5 .pegel-promille{color:oklch(0.70 0.18 25);}
[data-theme="dark"] .pg-6 .pegel-promille{color:oklch(0.72 0.20 25);}
/* ============================================================
Avatars
============================================================ */
.avatar{
width:38px;height:38px;border-radius:50%;display:inline-grid;place-items:center;
font-size:15px;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:30px;height:30px;font-size:12px;}
.avatar.lg{width:56px;height:56px;font-size:20px;}
.avatar.xl{width:104px;height:104px;font-size:38px;}
.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:-10px;}
.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;}
/* Ausrüstungs-Zeile darf umbrechen → Stepper + Bearbeiten-Form bekommen
eine eigene volle Zeile (verhindert Überlappung mit Avataren/Buttons) */
.row-equip{flex-wrap:wrap;}
/* Schneller −/+ Mengen-Stepper (Admin, Ausrüstung) — eigene Zeile */
.qty-step{
flex:1 0 100%;order:9;
display:flex;align-items:center;gap:8px;
margin-top:10px;padding-top:10px;
border-top:1px dashed var(--border-soft);
}
.qs-lbl{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute);margin-right:2px;}
.qs-btn{
width:34px;height:34px;flex:0 0 auto;border-radius:9px;
border:1px solid var(--border);background:var(--surface-2);
font-size:21px;font-weight:800;line-height:1;cursor:pointer;color:var(--ink-soft);
display:grid;place-items:center;font-family:inherit;padding:0;
-webkit-tap-highlight-color:transparent;transition:.12s;
}
.qs-btn:hover{border-color:var(--primary);color:var(--primary-ink);}
.qs-btn:active{transform:scale(.9);}
.qs-btn:disabled{opacity:.5;}
.qs-val{font-size:17px;font-weight:850;min-width:28px;text-align:center;font-variant-numeric:tabular-nums;letter-spacing:-.02em;}
.qs-unit{font-size:13px;color:var(--ink-mute);font-weight:600;flex:1;}
/* Bearbeiten-Form ebenfalls eigene Zeile, hinter dem Stepper */
.row-equip .more-content{order:10;margin-top:10px;}
/* ============================================================
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,");background-repeat:no-repeat;background-position:right 16px center;padding-right:38px;}
[data-theme="dark"] select{background-image:url("data:image/svg+xml;utf8,");}
.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 18px;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-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.hero-tent{font-size:70px;line-height:1;opacity:.22;transform:rotate(-8deg) translateY(6px);flex-shrink:0;align-self:flex-end;margin-right:-4px;}
.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;}
/* Countdown im Hero */
.cd-wrap{
margin-top:16px;padding-top:14px;
border-top:1px solid oklch(1 0 0 / .15);
}
.cd-label{font-size:10.5px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;opacity:.72;margin-bottom:8px;}
.cd-digits{display:flex;align-items:flex-end;gap:0;}
.cd-unit{display:flex;flex-direction:column;align-items:center;flex:1;}
.cd-num{
font-size:26px;font-weight:900;letter-spacing:-.04em;line-height:1;
font-variant-numeric:tabular-nums;
background:oklch(1 0 0 / .12);border-radius:8px;
padding:5px 0;width:100%;text-align:center;
min-width:48px;
}
.cd-u{font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.65;margin-top:4px;}
.cd-sep{font-size:22px;font-weight:900;opacity:.5;padding:0 3px;align-self:flex-start;margin-top:4px;line-height:1;}
.cd-live .cd-label,.cd-done .cd-label{font-size:13px;letter-spacing:0;text-transform:none;opacity:.9;font-weight:700;}
.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;
/* Flacher: weniger Eigen-Höhe, Home-Indicator-Abstand via safe area bleibt erhalten */
padding:5px 8px calc(5px + env(safe-area-inset-bottom, 0px));
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);
}
/* ── Nachbereitung Admin-Editor: einfache Icon-Bewertung ── */
.nb-editor-intro{display:flex;gap:11px;align-items:flex-start;margin-bottom:6px;}
.nb-editor-intro p{font-size:13px;line-height:1.45;}
.nb-personen{
display:flex;align-items:center;gap:14px;padding:13px 15px;margin:8px 0 2px;
border:1px solid var(--border);border-radius:16px;background:var(--surface-2);
}
.nb-personen .nb-p-ico{font-size:28px;line-height:1;flex:none;}
.nb-personen label{flex:1;font-weight:700;font-size:13.5px;display:flex;flex-direction:column;gap:5px;}
.nb-personen input{
width:96px;font-size:20px;font-weight:850;text-align:center;
padding:7px;border-radius:12px;border:1px solid var(--border);background:var(--surface);
}
.nb-item{
display:flex;flex-direction:column;gap:9px;padding:14px 0;
border-bottom:1px solid var(--border-soft);
}
.nb-item:last-of-type{border-bottom:none;}
.nb-item-head{display:flex;align-items:center;gap:11px;}
.nb-item-ico{
width:42px;height:42px;flex:none;display:grid;place-items:center;
font-size:22px;border-radius:13px;background:var(--surface-2);border:1px solid var(--border-soft);
}
.nb-item-name{font-weight:800;font-size:15px;line-height:1.2;}
.nb-item-plan{font-size:12px;color:var(--ink-mute);font-weight:600;margin-top:2px;}
.nb-rate{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.nb-rate label{
position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;
padding:11px 4px;border:1.5px solid var(--border);border-radius:14px;
background:var(--surface);cursor:pointer;font-size:12px;font-weight:700;
color:var(--ink-mute);min-height:62px;justify-content:center;
-webkit-tap-highlight-color:transparent;transition:transform .08s,border-color .12s,background .12s;
}
.nb-rate label:active{transform:scale(.96);}
.nb-rate .nb-rate-ico{font-size:24px;line-height:1;filter:grayscale(.4);opacity:.75;transition:filter .12s,opacity .12s;}
.nb-rate input{position:absolute;opacity:0;width:0;height:0;pointer-events:none;}
.nb-rate label:has(input:checked) .nb-rate-ico{filter:none;opacity:1;}
.nb-rate label:has(input[value="zu_wenig"]:checked){
border-color:var(--info);background:oklch(0.62 0.09 235 / .13);color:var(--info);
}
.nb-rate label:has(input[value="genau_richtig"]:checked){
border-color:var(--primary);background:var(--green-100);color:var(--primary-soft-ink);
}
.nb-rate label:has(input[value="zu_viel"]:checked){
border-color:var(--terra);background:oklch(0.63 0.14 38 / .12);color:var(--terra-ink);
}
.nb-detail{margin-top:1px;}
.nb-detail>summary{
font-size:12.5px;font-weight:700;color:var(--ink-mute);cursor:pointer;
list-style:none;padding:4px 2px;-webkit-tap-highlight-color:transparent;
}
.nb-detail>summary::-webkit-details-marker{display:none;}
.nb-detail-body{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:8px;}
.nb-detail-body label.full{grid-column:1/-1;}
/* ============================================================
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;}
}
/* Push-Aktivieren-Banner (erscheint automatisch beim ersten Öffnen) */
.push-ask{
position:fixed;left:12px;right:12px;
bottom:calc(76px + env(safe-area-inset-bottom));z-index:70;
max-width:456px;margin:0 auto;
display:flex;align-items:center;gap:10px;
background:var(--surface);border:1px solid var(--border);
border-radius:16px;padding:12px 14px;
box-shadow:0 10px 30px rgba(0,0,0,.22);animation:slideUp .3s ease;
}
.push-ask-ic{font-size:24px;flex:0 0 auto;}
.push-ask-txt{flex:1;font-size:12.5px;line-height:1.35;color:var(--ink-soft);}
.push-ask-txt strong{color:var(--ink);font-size:13.5px;}
.push-ask-yes{
flex:0 0 auto;border:none;cursor:pointer;font-family:inherit;
background:var(--primary);color:var(--on-primary);
border-radius:10px;padding:9px 14px;font-size:13px;font-weight:800;
}
.push-ask-no{
flex:0 0 auto;border:none;cursor:pointer;font-family:inherit;
background:transparent;color:var(--ink-mute);font-size:16px;
width:30px;height:30px;border-radius:8px;
}
.push-ask-no:hover{background:var(--surface-2);}
@media (min-width:900px){
.push-ask{bottom: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%;}
}
/* ============================================================
🪟 Apple "Liquid Glass" — Default-Design (data-design="glass")
Umschaltbar auf klassisch via data-design="classic".
============================================================ */
:root[data-design="glass"]{
--radius:22px; --radius-sm:15px; --radius-lg:30px;
/* Durchscheinende Flächen (Milchglas) */
--surface: oklch(1 0 0 / .55);
--surface-2: oklch(1 0 0 / .40);
--border: oklch(1 0 0 / .60);
--border-soft:oklch(1 0 0 / .32);
/* Farbiger Hintergrund, damit das Glas "liest" */
--grad-1: oklch(0.62 0.13 150 / .24);
--grad-2: oklch(0.74 0.15 55 / .20);
}
:root[data-design="glass"][data-theme="dark"]{
--surface: oklch(0.32 0.020 158 / .52);
--surface-2: oklch(0.36 0.022 158 / .42);
--border: oklch(0.80 0.020 158 / .26);
--border-soft:oklch(0.80 0.020 158 / .16);
--grad-1: oklch(0.52 0.09 150 / .18);
--grad-2: oklch(0.58 0.12 55 / .14);
}
/* Reicherer Hintergrund + transparente Shell, damit Karten "schweben" */
:root[data-design="glass"] body{
background:
radial-gradient(1100px 720px at 84% -8%, var(--grad-1), transparent 60%),
radial-gradient(920px 620px at -12% 108%, var(--grad-2), transparent 58%),
radial-gradient(760px 560px at 50% 42%, oklch(0.68 0.11 265 / .07), transparent 62%),
var(--bg-tint);
background-attachment: fixed;
/* Mehr Luft unten wegen der schwebenden Glas-Nav */
padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
}
:root[data-design="glass"] .app-shell{background:transparent;}
/* Milchglas auf alle schwebenden Flächen */
:root[data-design="glass"] .card,
:root[data-design="glass"] .appbar,
:root[data-design="glass"] .bottomnav,
:root[data-design="glass"] .drawer-panel,
:root[data-design="glass"] .tip,
:root[data-design="glass"] .facts,
:root[data-design="glass"] .quick a,
:root[data-design="glass"] .stat,
:root[data-design="glass"] .meal,
:root[data-design="glass"] .pegel-card,
:root[data-design="glass"] .fchip,
:root[data-design="glass"] .pegel-drink,
:root[data-design="glass"] .qs-btn,
:root[data-design="glass"] .icon-btn,
:root[data-design="glass"] input,
:root[data-design="glass"] select,
:root[data-design="glass"] textarea{
-webkit-backdrop-filter: blur(20px) saturate(1.7);
backdrop-filter: blur(20px) saturate(1.7);
}
/* Glas-Kante: heller Innen-Rand oben + weiche Tiefe */
:root[data-design="glass"] .card,
:root[data-design="glass"] .meal,
:root[data-design="glass"] .facts{
border:1px solid var(--border);
box-shadow:
inset 0 1px 0 oklch(1 0 0 / .55),
0 10px 30px oklch(0.30 0.04 150 / .13);
}
:root[data-design="glass"][data-theme="dark"] .card,
:root[data-design="glass"][data-theme="dark"] .meal,
:root[data-design="glass"][data-theme="dark"] .facts{
box-shadow:
inset 0 1px 0 oklch(1 0 0 / .10),
0 12px 34px oklch(0 0 0 / .40);
}
/* Header & Bottom-Nav: kräftigeres Glas */
:root[data-design="glass"] .appbar{
background:linear-gradient(to bottom, var(--surface), oklch(1 0 0 / .18));
}
/* Bottom-Nav als schwebende Glas-Leiste mit runden Ecken (iOS-26-Stil) */
:root[data-design="glass"] .bottomnav{
left:12px; right:12px;
bottom:calc(8px + env(safe-area-inset-bottom, 0px));
max-width:452px; margin:0 auto;
padding:8px 8px;
border:1px solid var(--border);
border-top:1px solid var(--border);
border-radius:28px;
background:var(--surface);
box-shadow:0 10px 34px oklch(0.30 0.06 150 / .20), inset 0 1px 0 oklch(1 0 0 / .5);
}
:root[data-design="glass"][data-theme="dark"] .bottomnav{
box-shadow:0 12px 38px oklch(0 0 0 / .48), inset 0 1px 0 oklch(1 0 0 / .10);
}
/* Aktiver Tab als weiche Glas-Pille (wie iOS-Auswahl) */
:root[data-design="glass"] .bottomnav a.active{
background:var(--primary-soft);
border-radius:16px;
}
/* Drawer als Glasplatte */
:root[data-design="glass"] .drawer-panel{
background:var(--surface);
border-left:1px solid var(--border);
}
/* Eingaben & Chips runder + glasig */
:root[data-design="glass"] input,
:root[data-design="glass"] select,
:root[data-design="glass"] textarea{
background:var(--surface-2);border-color:var(--border);border-radius:14px;
}
/* Primär-CTA bleibt satt (Bedienbarkeit), nur runder + glänzender */
:root[data-design="glass"] .btn-primary,
:root[data-design="glass"] .btn-success,
:root[data-design="glass"] .btn-orange{
box-shadow:inset 0 1px 0 oklch(1 0 0 / .30), 0 6px 18px oklch(0.45 0.10 150 / .22);
}
/* Reduzierte Transparenz respektieren (a11y / schwache Geräte) */
@media (prefers-reduced-transparency: reduce){
:root[data-design="glass"] .card,
:root[data-design="glass"] .appbar,
:root[data-design="glass"] .bottomnav,
:root[data-design="glass"] .drawer-panel{
-webkit-backdrop-filter:none; backdrop-filter:none;
background:var(--bg);
}
}
/* ============================================================
Einkauf — Team, Fortschritt, Modus, Mengen-Feintuning
============================================================ */
.ek-team{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.ek-team-ic{font-size:26px;flex:0 0 auto;}
.ek-team-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-mute);font-weight:700;}
.ek-team-name{font-weight:850;font-size:15.5px;letter-spacing:-.01em;}
.ek-team-edit{flex:0 0 auto;}
.ek-team-edit summary{list-style:none;cursor:pointer;}
.ek-team-edit summary::-webkit-details-marker{display:none;}
.ek-progress{margin-bottom:6px;}
.ekp-top{display:flex;justify-content:space-between;font-size:12.5px;color:var(--ink-soft);font-weight:600;margin-bottom:8px;}
.sc-bar{height:6px;margin:7px 2px 0;}
.ek-modus-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:4px;}
/* Mengen-Reset-Chip (Admin) */
.qs-reset{margin-left:auto;border:none;background:transparent;color:var(--ink-mute);font-size:11px;font-weight:800;cursor:pointer;font-family:inherit;padding:5px 8px;border-radius:8px;}
.qs-reset:hover{color:var(--terra-ink);background:var(--surface-2);}
/* Einkauf-Modus: größere Tap-Ziele, erledigte gedimmt */
.ek-laden .check{width:40px;height:40px;}
.ek-laden .row{padding:15px 4px;}
.ek-laden .row.done{opacity:.42;}
.ek-laden .shopcard{margin-bottom:18px;}
/* Dienste-Rotation */
.dienst-emoji{font-size:22px;flex:0 0 auto;width:32px;text-align:center;}
.dienst-person{display:inline-flex;align-items:center;gap:6px;vertical-align:middle;}
.dienst-sel{font-size:12.5px;padding:6px 26px 6px 10px;border-radius:9px;max-width:120px;}
/* ============================================================
Foto-Galerie
============================================================ */
.foto-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:8px;}
@media (min-width:560px){.foto-grid{grid-template-columns:repeat(4,1fr);}}
.foto-cell{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;cursor:pointer;background:var(--surface-2);border:1px solid var(--border);}
.foto-cell img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s;}
.foto-cell:hover img{transform:scale(1.04);}
.foto-by{position:absolute;left:0;right:0;bottom:0;padding:10px 8px 4px;font-size:10.5px;font-weight:700;color:#fff;
background:linear-gradient(to top, rgba(0,0,0,.55), transparent);pointer-events:none;}
.foto-del{position:absolute;top:4px;right:4px;margin:0;}
.foto-del-btn{width:26px;height:26px;border-radius:8px;border:none;cursor:pointer;font-family:inherit;
background:rgba(0,0,0,.5);color:#fff;font-size:16px;line-height:1;display:grid;place-items:center;}
.foto-del-btn:hover{background:var(--terra);}
/* Lightbox */
.foto-lightbox{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.92);
display:none;align-items:center;justify-content:center;padding:20px;}
.foto-lightbox.open{display:flex;}
.foto-lightbox img{max-width:100%;max-height:88vh;border-radius:10px;box-shadow:0 10px 40px rgba(0,0,0,.5);}
.foto-lb-close{position:absolute;top:calc(12px + env(safe-area-inset-top,0));right:14px;width:44px;height:44px;
border:none;background:rgba(255,255,255,.15);color:#fff;font-size:26px;border-radius:12px;cursor:pointer;line-height:1;}
.foto-lb-cap{position:absolute;left:0;right:0;bottom:calc(18px + env(safe-area-inset-bottom,0));text-align:center;color:#fff;font-weight:700;font-size:13px;}
/* ============================================================
🪟 Mehr Glas: Icon-Kacheln & Logos frosten (nur Glas-Modus)
============================================================ */
:root[data-design="glass"] .quick .qi,
:root[data-design="glass"] .fact .fi,
:root[data-design="glass"] .order .o-emoji,
:root[data-design="glass"] .quick .qbadge{
-webkit-backdrop-filter: blur(12px) saturate(1.6);
backdrop-filter: blur(12px) saturate(1.6);
border:1px solid oklch(1 0 0 / .38);
box-shadow: inset 0 1px 0 oklch(1 0 0 / .5), 0 4px 12px oklch(0.30 0.05 150 / .12);
}
[data-theme="dark"][data-design="glass"] .quick .qi,
[data-theme="dark"][data-design="glass"] .fact .fi,
[data-theme="dark"][data-design="glass"] .order .o-emoji{
border-color: oklch(1 0 0 / .12);
box-shadow: inset 0 1px 0 oklch(1 0 0 / .12), 0 4px 12px oklch(0 0 0 / .35);
}
/* Zelt-Logo im Header: durchscheinendes Glas statt deckendem Grün */
:root[data-design="glass"] .appbar .brand .mark{
background:linear-gradient(150deg, oklch(0.60 0.10 155 / .55), oklch(0.45 0.08 156 / .48));
-webkit-backdrop-filter: blur(12px) saturate(1.6);
backdrop-filter: blur(12px) saturate(1.6);
border:1px solid oklch(1 0 0 / .4);
box-shadow: inset 0 1px 0 oklch(1 0 0 / .5), 0 4px 14px oklch(0.45 0.09 155 / .28);
}
/* Pills, Checkbox & Avatar-Ring leicht glasig; Karten kräftigeres Glas */
:root[data-design="glass"] .pill,
:root[data-design="glass"] .check{
-webkit-backdrop-filter: blur(10px) saturate(1.5);
backdrop-filter: blur(10px) saturate(1.5);
}
:root[data-design="glass"] .card{
-webkit-backdrop-filter: blur(26px) saturate(1.85);
backdrop-filter: blur(26px) saturate(1.85);
}
/* Admin-Komponenten glasig (Tab-Leiste oben, Kachel-Icons, Nav-Grid) */
:root[data-design="glass"] .admin-tabs,
:root[data-design="glass"] .admin-tab.active,
:root[data-design="glass"] .admincard .ai,
:root[data-design="glass"] .nav-grid-row,
:root[data-design="glass"] .nav-grid-select,
:root[data-design="glass"] .nav-grid-order{
-webkit-backdrop-filter: blur(14px) saturate(1.6);
backdrop-filter: blur(14px) saturate(1.6);
}
:root[data-design="glass"] .admin-tabs{
border:1px solid var(--border);
box-shadow: inset 0 1px 0 oklch(1 0 0 / .4);
}
:root[data-design="glass"] .admincard .ai{
border:1px solid oklch(1 0 0 / .35);
box-shadow: inset 0 1px 0 oklch(1 0 0 / .45);
}
/* ============================================================
Spiele-Turnier (K.o.-Baum)
============================================================ */
.tn-seed{width:26px;height:26px;flex:0 0 auto;border-radius:8px;background:var(--surface-2);
display:grid;place-items:center;font-weight:800;font-size:13px;color:var(--ink-soft);}
.tn-match{padding:10px 2px;}
.tn-match-sep{border-top:1px solid var(--border-soft);}
.tn-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:3px 0;}
.tn-side{font-size:14.5px;font-weight:600;letter-spacing:-.01em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tn-side.win{font-weight:850;color:var(--primary-ink);}
.tn-score{font-variant-numeric:tabular-nums;font-weight:850;font-size:15px;flex:0 0 auto;}
.tn-form{display:flex;align-items:center;gap:8px;margin-top:8px;}
.tn-form input{width:56px;text-align:center;font-weight:800;padding:8px 4px;}
.tn-colon{font-weight:800;color:var(--ink-mute);}
.tn-form .btn{margin-left:auto;}
/* ============================================================
Wetter am Camp
============================================================ */
.wetter-now{display:flex;align-items:center;gap:14px;margin-bottom:6px;}
.wn-emoji{font-size:46px;line-height:1;flex:0 0 auto;}
.wn-main{flex:1;min-width:0;}
.wn-temp{font-size:38px;font-weight:900;letter-spacing:-.04em;line-height:1;}
.wn-desc{font-size:13.5px;color:var(--ink-soft);font-weight:600;margin-top:2px;}
.wn-side{text-align:right;font-size:12.5px;color:var(--ink-mute);font-weight:600;line-height:1.6;flex:0 0 auto;}
.wetter-days{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch;}
.wetter-days::-webkit-scrollbar{display:none;}
.wetter-day{
flex:0 0 auto;width:88px;text-align:center;
background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:12px 6px;
}
.wd-day{font-size:12px;font-weight:800;}
.wd-date{font-size:11px;color:var(--ink-mute);margin-bottom:6px;}
.wd-emoji{font-size:26px;line-height:1;margin:2px 0 6px;}
.wd-temp{font-size:13px;font-variant-numeric:tabular-nums;}
.wd-temp b{font-weight:850;}
.wd-temp span{color:var(--ink-mute);}
.wd-rain{font-size:11px;color:var(--info);font-weight:700;margin-top:4px;}
:root[data-design="glass"] .wetter-day{
-webkit-backdrop-filter: blur(14px) saturate(1.6);
backdrop-filter: blur(14px) saturate(1.6);
box-shadow: inset 0 1px 0 oklch(1 0 0 / .4);
}
/* ============================================================
🪟 Liquid Glass v2 — kräftiger & Apple-näher
Lebendigerer Hintergrund + mehr Transparenz + stärkerer Blur/Sättigung,
damit Inhalte wirklich durch die Flächen schimmern.
============================================================ */
:root[data-design="glass"]{
--surface: oklch(1 0 0 / .46);
--surface-2: oklch(1 0 0 / .32);
--border: oklch(1 0 0 / .72);
--border-soft:oklch(1 0 0 / .30);
--grad-1: oklch(0.64 0.16 150 / .40);
--grad-2: oklch(0.75 0.17 55 / .34);
}
:root[data-design="glass"][data-theme="dark"]{
--surface: oklch(0.33 0.020 158 / .44);
--surface-2: oklch(0.37 0.022 158 / .36);
--border: oklch(0.86 0.020 158 / .22);
--border-soft:oklch(0.86 0.020 158 / .14);
--grad-1: oklch(0.55 0.11 150 / .28);
--grad-2: oklch(0.60 0.14 55 / .24);
}
/* Lebendiger, farbiger Hintergrund (Mesh) — Voraussetzung fürs Glas */
:root[data-design="glass"] body{
background:
radial-gradient(1200px 840px at 82% -10%, var(--grad-1), transparent 58%),
radial-gradient(1020px 720px at -14% 106%, var(--grad-2), transparent 56%),
radial-gradient(840px 640px at 46% 36%, oklch(0.70 0.15 265 / .16), transparent 58%),
radial-gradient(700px 580px at 104% 60%, oklch(0.72 0.16 322 / .13), transparent 58%),
var(--bg-tint);
background-attachment: fixed;
padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
}
/* Karten: kräftiges Glas + heller Glasrand ringsum */
:root[data-design="glass"] .card{
-webkit-backdrop-filter: blur(32px) saturate(2);
backdrop-filter: blur(32px) saturate(2);
box-shadow:
inset 0 1px 0 oklch(1 0 0 / .70),
inset 0 0 0 1px oklch(1 0 0 / .12),
0 12px 34px oklch(0.30 0.05 150 / .14);
}
:root[data-design="glass"][data-theme="dark"] .card{
box-shadow:
inset 0 1px 0 oklch(1 0 0 / .14),
0 14px 38px oklch(0 0 0 / .46);
}
/* Bottom-Nav: dünner, stärker durchscheinend, iOS-Kapsel am aktiven Tab */
:root[data-design="glass"] .bottomnav{
background: oklch(1 0 0 / .44);
-webkit-backdrop-filter: blur(34px) saturate(2.1);
backdrop-filter: blur(34px) saturate(2.1);
box-shadow:
0 8px 30px oklch(0.30 0.06 150 / .22),
inset 0 1px 0 oklch(1 0 0 / .75),
inset 0 0 0 1px oklch(1 0 0 / .14);
}
:root[data-design="glass"][data-theme="dark"] .bottomnav{
background: oklch(0.30 0.020 158 / .50);
box-shadow: 0 10px 34px oklch(0 0 0 / .5), inset 0 1px 0 oklch(1 0 0 / .12);
}
:root[data-design="glass"] .bottomnav a.active{
background: oklch(1 0 0 / .60);
box-shadow: inset 0 1px 0 oklch(1 0 0 / .85), 0 3px 10px oklch(0.30 0.06 150 / .12);
}
:root[data-design="glass"][data-theme="dark"] .bottomnav a.active{
background: oklch(1 0 0 / .16);
box-shadow: inset 0 1px 0 oklch(1 0 0 / .18);
}
/* Appbar oben ebenfalls kräftigeres Glas */
:root[data-design="glass"] .appbar{
-webkit-backdrop-filter: blur(30px) saturate(2);
backdrop-filter: blur(30px) saturate(2);
}
/* ============================================================
Menü-Anordnung — Drag & Drop
============================================================ */
.nav-zone{margin-bottom:14px;}
.nav-zone-head{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-mute);margin-bottom:6px;}
.nav-zone-cap{font-weight:600;text-transform:none;color:var(--ink-mute);}
.nav-list{
display:flex;flex-direction:column;gap:6px;min-height:46px;
padding:6px;border:1px dashed var(--border);border-radius:14px;background:var(--surface-2);
}
.nav-chip{
display:flex;align-items:center;gap:10px;
padding:12px;border-radius:12px;background:var(--surface);border:1px solid var(--border);
font-weight:700;font-size:14px;color:var(--ink);
cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;
box-shadow:var(--shadow);
}
.nav-chip.dragging{cursor:grabbing;box-shadow:0 12px 28px rgba(0,0,0,.24);opacity:.96;}
.nav-ph{background:var(--primary-soft);border:1px dashed var(--primary);box-shadow:none;}
.nav-grip{color:var(--ink-mute);font-size:15px;letter-spacing:-1px;}
.nav-chip-ic{font-size:19px;}
.nav-chip-lbl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
:root[data-design="glass"] .nav-chip{
-webkit-backdrop-filter: blur(14px) saturate(1.7);
backdrop-filter: blur(14px) saturate(1.7);
box-shadow: inset 0 1px 0 oklch(1 0 0 / .5), 0 4px 12px oklch(0.30 0.05 150 / .12);
}
/* ============================================================
🪟 Liquid Glass v2.1 — lebendiger Hintergrund (Apple-Feel)
Karten bleiben lesbar (deckender), Hintergrund + Chrome vivid/glasig,
sodass das Glas in den Zwischenräumen und durch die Nav sichtbar wird.
============================================================ */
:root[data-design="glass"]{
--surface: oklch(1 0 0 / .58);
--surface-2: oklch(1 0 0 / .40);
--grad-1: oklch(0.63 0.19 150 / .52);
--grad-2: oklch(0.73 0.20 58 / .44);
}
:root[data-design="glass"][data-theme="dark"]{
--surface: oklch(0.33 0.020 158 / .52);
--surface-2: oklch(0.37 0.022 158 / .40);
--grad-1: oklch(0.55 0.13 150 / .34);
--grad-2: oklch(0.60 0.15 58 / .28);
}
:root[data-design="glass"] body{
background:
radial-gradient(1200px 900px at 80% -12%, var(--grad-1), transparent 56%),
radial-gradient(1100px 820px at -16% 108%, var(--grad-2), transparent 56%),
radial-gradient(900px 720px at 44% 34%, oklch(0.66 0.18 268 / .28), transparent 56%),
radial-gradient(780px 660px at 106% 58%, oklch(0.70 0.19 330 / .22), transparent 56%),
var(--bg-tint);
background-attachment: fixed;
}
:root[data-design="glass"] .bottomnav{ background: oklch(1 0 0 / .40); }
:root[data-design="glass"][data-theme="dark"] .bottomnav{ background: oklch(0.30 0.020 158 / .46); }
/* Wetter-Widget (Dashboard) */
.wetter-widget{display:flex;align-items:center;gap:12px;margin-bottom:14px;text-decoration:none;color:inherit;}
.wetter-widget:hover{text-decoration:none;}
.ww-emoji{font-size:32px;line-height:1;flex:0 0 auto;}
.ww-main{flex:1;min-width:0;}
.ww-temp{font-weight:850;font-size:16px;letter-spacing:-.01em;}
.ww-desc{font-size:12.5px;color:var(--ink-mute);margin-top:1px;}
/* Teilnahme: fester "dabei"-Status + Absagen rechts */
.zusage-fest{display:flex;align-items:center;gap:8px;}
.zusage-badge{
flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
background:var(--ok);color:var(--on-primary);border-radius:14px;padding:15px 14px;
font-weight:850;font-size:15px;letter-spacing:-.01em;box-shadow:var(--shadow);
}
:root[data-design="glass"] .zusage-badge{box-shadow:inset 0 1px 0 oklch(1 0 0 / .3), 0 6px 18px oklch(0.55 0.12 150 / .22);}
/* Teilnahme-Status: sauberes Layout (überschreibt .dabei .btn{width:100%}) */
.zusage-fest{display:flex;align-items:stretch;gap:8px;}
.zusage-badge{
flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:8px;
background:var(--ok);color:var(--on-primary);border-radius:14px;padding:16px 14px;
font-weight:850;font-size:15.5px;letter-spacing:-.01em;box-shadow:var(--shadow);
white-space:nowrap;
}
.zusage-absagen{
flex:0 0 auto;width:auto;border:1px solid var(--border);background:var(--surface);
color:var(--ink-soft);border-radius:14px;padding:0 18px;font-family:inherit;
font-size:13.5px;font-weight:800;cursor:pointer;transition:.14s;
}
.zusage-absagen:hover{border-color:var(--terra);color:var(--terra-ink);}
:root[data-design="glass"] .zusage-badge{box-shadow:inset 0 1px 0 oklch(1 0 0 / .35), 0 6px 18px oklch(0.55 0.12 150 / .24);}
:root[data-design="glass"] .zusage-absagen{-webkit-backdrop-filter:blur(14px) saturate(1.7);backdrop-filter:blur(14px) saturate(1.7);}
/* Getränke-Rangliste */
.pg-rank{flex:0 0 auto;width:34px;text-align:center;font-weight:850;font-size:16px;font-variant-numeric:tabular-nums;}
.pg-katcount{display:inline-flex;align-items:center;gap:2px;margin-right:8px;font-size:12px;font-weight:700;color:var(--ink-soft);}
.pg-katrow-lbl{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-mute);margin:10px 0 6px;}
.pg-katrow-lbl:first-child{margin-top:0;}