/* PKUeche — app layer on top of organic.css (Organic design system). Tokens only, no raw colors. */
html { -webkit-text-size-adjust: 100%; }
body { background: var(--color-neutral-200); min-height: 100dvh; -webkit-tap-highlight-color: transparent; }
a { color: var(--color-accent-700); }
a:hover { color: var(--color-accent-800); }
input[type=range] { accent-color: var(--color-accent); }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { opacity: 0; }
input[type=number] { -moz-appearance: textfield; }
.pku-scroll { scrollbar-width: none; }
.pku-scroll::-webkit-scrollbar { display: none; }
@keyframes pkuScan { from { top: 12%; } to { top: 82%; } }
@keyframes pkuIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Shell: a phone-width column, centered on large screens */
.shell {
  position: relative; max-width: 480px; margin: 0 auto; min-height: 100dvh;
  background: var(--color-bg); color: var(--color-text); font-family: var(--font-body);
}
.main { padding-top: max(env(safe-area-inset-top), 14px); padding-bottom: calc(112px + env(safe-area-inset-bottom)); }
.main.pad-create { padding-bottom: calc(200px + env(safe-area-inset-bottom)); }
.main.pad-none { padding-bottom: 40px; }

/* Fixed layers keep to the column width */
.fix { position: fixed; left: 50%; transform: translateX(-50%); width: min(480px, 100%); }

/* Unstyled button base — later classes win at equal specificity */
.u { all: unset; box-sizing: border-box; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.u:focus-visible, .btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.u:disabled { opacity: .45; cursor: not-allowed; }
button { font-family: inherit; }
.btn-icon { display: inline-grid; place-items: center; }

/* Hover tints (only where hovering exists) */
@media (hover: hover) {
  .h-bg:hover { background: var(--color-bg) !important; }
  .h-n100:hover { background: var(--color-neutral-100) !important; }
  .h-n300:hover { background: var(--color-neutral-300) !important; }
  .h-a100:hover { background: var(--color-accent-100) !important; }
  .h-a300:hover { background: var(--color-accent-300) !important; }
  .h-a2-200:hover { background: var(--color-accent-2-200) !important; }
  .h-a2-300:hover { background: var(--color-accent-2-300) !important; }
  .h-n800:hover { background: var(--color-neutral-700) !important; }
  .h-bd:hover { border-color: var(--color-neutral-500) !important; }
}
.u:active { filter: brightness(.97); }

/* Wordmark: „PKU“ in ink, „eche“ in terracotta */
.wordmark { font-family: var(--font-heading); font-weight: var(--font-heading-weight); letter-spacing: -0.01em; line-height: 1; white-space: nowrap; }
.wordmark > span { color: var(--color-accent-600); }
.appbar { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 2px 22px 0; }
.appbar .wordmark { font-size: 24px; }

/* Recurring patterns */
.screen { padding: 10px 22px 0; display: flex; flex-direction: column; gap: 20px; animation: pkuIn .22s ease-out; }
.screen.push { padding-top: 4px; gap: 18px; }
.eyebrow { font-size: 14px; color: var(--color-neutral-700); }
.head { display: flex; flex-direction: column; gap: 2px; }
.head h1 { margin: 0; font-size: 38px; line-height: 1.05; }
.toprow { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; }
.list { background: var(--color-neutral-100); border-radius: var(--radius-lg); padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; min-height: 56px; border-radius: 22px; }
.row-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.row-t > :first-child { font-size: 15px; font-weight: 600; }
.row-t > :nth-child(2) { font-size: 13px; color: var(--color-neutral-700); }
.dot { border-radius: 50%; flex: none; display: inline-block; }
.hscroll { display: flex; gap: 8px; overflow-x: auto; margin: 0 -22px; padding: 0 22px; }
.seg4, .seg3 { display: grid; gap: 4px; padding: 4px; border-radius: 999px; background: var(--color-neutral-100); }
.seg4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.seg3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.seg-b { height: 40px; border-radius: 999px; font-size: 13px; font-weight: 600; text-align: center; display: grid; place-items: center; }
.back { align-self: flex-start; height: 44px; margin-left: -8px; padding: 0 12px 0 6px; color: var(--color-accent-700); font-weight: 600; }
.stepper { width: 48px; height: 48px; padding: 0; flex: none; }
.kicker { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-neutral-800); }
.searchbox { position: relative; flex: 1; }
.searchbox > svg { position: absolute; left: 16px; top: 14px; color: var(--color-neutral-700); pointer-events: none; }
.searchbox .input { height: 48px; padding-left: 46px; font-size: 16px; background: var(--color-neutral-100); }

/* Overlays */
.tabs { bottom: 0; z-index: 4; min-height: 88px; padding: 8px 20px calc(18px + env(safe-area-inset-bottom)); background: var(--color-surface); border-radius: 32px 32px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 12px; font-weight: 700; }
.createbar { bottom: 0; z-index: 4; padding: 0 12px calc(14px + env(safe-area-inset-bottom)); }
.createbar > div { border-radius: 36px; background: var(--color-neutral-900); color: var(--color-bg); padding: 16px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--shadow-lg); }
.layer { position: fixed; inset: 0; z-index: 8; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.layer > .scrim { position: absolute; inset: 0; background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent); animation: fade .2s ease-out; }
.sheet { position: relative; width: min(480px, 100%); max-height: 88dvh; background: var(--color-bg); border-radius: 36px 36px 0 0; padding: 12px 20px 0; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-lg); animation: up .24s cubic-bezier(.2,.8,.2,1); }
.sheet.tall { height: 78dvh; }
.sheet-body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
.grip { width: 44px; height: 5px; border-radius: 999px; background: var(--color-neutral-400); align-self: center; flex: none; }
.sheet-head { display: flex; justify-content: space-between; align-items: center; }
.sheet-head h2 { margin: 0; font-size: 24px; }
@keyframes fade { from { opacity: 0; } }
@keyframes up { from { transform: translateY(40px); opacity: .4; } }
.toast { bottom: calc(104px + env(safe-area-inset-bottom)); z-index: 9; display: flex; justify-content: center; pointer-events: none; }
.toast > div { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 999px; background: var(--color-neutral-900); color: var(--color-bg); font-size: 14px; font-weight: 600; box-shadow: var(--shadow-md); max-width: calc(100% - 32px); animation: pkuIn .2s ease-out; }

/* Scanner */
#cam { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 7; background: #000; }
.scan { position: fixed; inset: 0; z-index: 7; background: var(--color-neutral-900); color: var(--color-neutral-100); overflow: hidden; display: flex; flex-direction: column; align-items: center; }
.scan.live { background: color-mix(in srgb, var(--color-neutral-900) 35%, transparent); }
.scan.live .blob { display: none; }
.scan-inner { position: relative; width: min(480px, 100%); flex: 1; display: flex; flex-direction: column; align-items: center; padding: max(env(safe-area-inset-top), 14px) 18px calc(24px + env(safe-area-inset-bottom)); gap: 18px; }
.blob { position: absolute; border-radius: 50%; background: var(--color-neutral-800); }
.scan-frame { position: relative; width: 280px; max-width: 100%; height: 180px; border-radius: 36px; overflow: hidden; margin-top: 40px; }
.round-dark { width: 48px; height: 48px; border-radius: 50%; background: var(--color-neutral-800); display: grid; place-items: center; }
.scan .input { background: var(--color-neutral-700); color: var(--color-neutral-100); border-color: transparent; height: 52px; font-size: 16px; }
.scan .input::placeholder { color: var(--color-neutral-400); }

/* Switch */
.switch { width: 52px; height: 32px; border-radius: 999px; background: var(--color-neutral-400); position: relative; flex: none; transition: background .15s; }
.switch::after { content: ''; position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: var(--color-bg); box-shadow: var(--shadow-sm); transition: transform .15s; }
.switch[aria-checked=true] { background: var(--color-accent-2-600); }
.switch[aria-checked=true]::after { transform: translateX(20px); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ─── Rezept: Zutaten, Zubereitung, Rechner ─── */
.sub { font-size: 12px; color: var(--color-neutral-700); font-weight: 400; }
.sec { display: flex; flex-direction: column; gap: 10px; }
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 4px; min-height: 40px; }
.sec-head h3 { margin: 0; font-size: 20px; }
.mini-step { display: flex; align-items: center; gap: 8px; font-size: 14px; white-space: nowrap; }
.mini-step .btn-icon { width: 36px; height: 36px; }
.mini-step b { font-family: var(--font-heading); font-weight: 400; font-size: 18px; }
.scaled-note { margin-top: -4px; padding: 8px 14px; border-radius: 999px; background: var(--color-accent-100); color: var(--color-accent-900); font-size: 13px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.scaled-note .u { font-weight: 700; color: var(--color-accent-700); text-decoration: underline; text-underline-offset: 3px; }
.ing-list { background: var(--color-neutral-100); border-radius: var(--radius-lg); padding: 6px 16px; display: flex; flex-direction: column; }
.ing { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 6px; align-items: center; padding: 12px 0 10px; }
.ing + .ing { border-top: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); }
.ing-cap { padding: 8px 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-neutral-700); }
.ing-cap > :last-child { text-align: right; }
.ing-amt { font-weight: 700; font-size: 16px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ing-name { display: flex; flex-direction: column; min-width: 0; }
.ing-name > :first-child { font-size: 15px; font-weight: 600; }
.ing-phe { display: flex; flex-direction: column; align-items: flex-end; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ing-phe > :first-child { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; }
.ing-bar { grid-column: 2 / -1; height: 4px; border-radius: 999px; background: var(--color-neutral-300); overflow: hidden; }
.ing-bar > span { display: block; height: 100%; border-radius: 999px; }
.ing-total { padding: 12px 0; }
.ing-total .ing-amt, .ing-total .ing-name > :first-child, .ing-total .ing-phe > :first-child { font-size: 16px; font-weight: 700; }
.ing-list .ing-total { border-top: 2px solid var(--color-divider); }
.steps { list-style: none; margin: 0; padding: 18px; border-radius: var(--radius-lg); background: var(--color-neutral-100); display: flex; flex-direction: column; gap: 14px; counter-reset: none; }
.steps li { display: flex; gap: 14px; align-items: flex-start; }
.steps .num { width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--color-accent-200); color: var(--color-accent-900); display: grid; place-items: center; font-family: var(--font-heading); font-size: 15px; }
.steps p { margin: 4px 0 0; font-size: 15px; line-height: 1.5; }
.add-prep { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; border-radius: 999px; border: 2px dashed var(--color-neutral-400); font-size: 15px; font-weight: 700; color: var(--color-accent-700); }
.eat-res { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 14px; border-radius: 28px; background: var(--color-accent-2-200); color: var(--color-accent-2-900); font-size: 13px; }
.eat-res b { font-family: var(--font-heading); font-weight: 400; font-size: 34px; line-height: 1.05; }
textarea.input { resize: vertical; }
#draftCooked::placeholder { color: var(--color-neutral-500); font-weight: 600; }

/* ─── Mobile defaults for layout wrappers (they vanish into the flow) ─── */
.cols, .col { display: contents; }
.cards { display: flex; flex-direction: column; gap: 14px; }
.side, .desk-only { display: none; }

/* ─── Desktop: sidebar + wide content ─── */
@media (min-width: 960px) {
  body { background: var(--color-bg); }
  .shell { max-width: none; }
  .mob-only, .tabs { display: none !important; }
  .desk-only { display: block; }

  .side {
    position: fixed; top: 16px; bottom: 16px; left: 16px; width: 256px; z-index: 5;
    display: flex; flex-direction: column; gap: 4px; padding: 22px 14px 16px;
    border-radius: 36px; background: var(--color-surface); overflow-y: auto; scrollbar-width: none;
  }
  .brand { display: flex; align-items: center; gap: 12px; padding: 0 10px 18px; font-family: var(--font-heading); font-size: 23px; line-height: 1.1; }
  .brand img { width: 40px; height: 40px; border-radius: 12px; flex: none; }
  .side-nav { display: flex; flex-direction: column; gap: 4px; }
  .side-item { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 16px; border-radius: 999px; font-size: 15px; font-weight: 700; color: var(--color-neutral-800); }
  .side-item[aria-current=page] { background: var(--color-bg); color: var(--color-accent-700); }
  .side-budget { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border-radius: 28px; background: var(--color-bg); }
  .side-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
  .side-actions .btn { height: 48px; font-size: 15px; }
  .side-foot { margin-top: auto; padding-top: 16px; display: flex; flex-direction: column; gap: 8px; }
  .side-hint { padding: 0 16px; font-size: 12px; color: var(--color-neutral-700); }
  kbd { font: 700 11px/1 var(--font-body); padding: 3px 6px; border-radius: 6px; background: var(--color-bg); border: 1px solid var(--color-divider); }

  .main, .main.pad-create { margin-left: 288px; padding: 44px 48px 72px; }
  .screen { padding: 0; max-width: 1120px; gap: 24px; }
  .screen.push { padding-top: 0; gap: 22px; }
  .head h1 { font-size: 48px; }
  .h-xl { font-size: 46px !important; }

  .cols { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 36px; align-items: start; }
  .cols.wide-r { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
  .col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
  .col.sticky { position: sticky; top: 32px; }
  .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
  .list.desk-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 6px; }
  .desk-wrap { flex-wrap: wrap; overflow: visible; margin-left: 0; margin-right: 0; padding: 0; }
  .desk-stack { flex-direction: column; overflow: visible; margin: 0; padding: 0; }
  .desk-stack > * { width: auto !important; }
  .desk-stack > * > span:first-child { min-height: 0 !important; }
  .back { margin-left: -12px; }
  .create-head > span:first-of-type { font-family: var(--font-heading); font-weight: 400; font-size: 30px !important; order: -1; }
  .create-head > span:last-child { display: none; }

  /* The create bar sits in the right column instead of floating over content */
  .createbar.desk-only { padding: 0; }
  .createbar.desk-only > div { box-shadow: none; }

  /* Sheets become centered dialogs */
  .layer { justify-content: center; padding: 32px; }
  .sheet { border-radius: 36px; width: min(560px, 100%); max-height: calc(100dvh - 64px); padding-top: 24px; }
  .sheet.tall { height: min(720px, calc(100dvh - 64px)); }
  .layer .grip { display: none; }
  .sheet-body { padding-bottom: 24px; }
  .sheet form[data-submit] { padding-bottom: 24px !important; }

  .toast { left: calc(50% + 144px); bottom: 32px; }
}
@media (min-width: 960px) and (hover: hover) {
  .side-item.h-n300:hover { background: var(--color-neutral-300) !important; }
}

/* ─── Nährwert-Kacheln ─── */
.nutri { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.nt b small { font-family: var(--font-body); font-size: 14px; font-weight: 600; margin-left: 3px; }
.nt { background: var(--color-neutral-100); border-radius: 22px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nt b { font-family: var(--font-heading); font-weight: 400; font-size: 22px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.nt span { font-size: 12px; color: var(--color-neutral-800); }
.nt-phe { grid-column: span 2; background: var(--color-accent-2-200); color: var(--color-accent-2-900); }
.nt-phe b { font-size: 28px; }
.nt-phe span { color: var(--color-accent-2-800); font-weight: 700; }
.a-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.a-tiles > div { background: var(--color-accent-2-100); border-radius: 20px; padding: 10px 12px; display: flex; flex-direction: column; min-width: 0; }
.a-tiles b { font-size: 17px; }
.a-tiles span { font-size: 12px; color: var(--color-accent-2-800); }
.eat-res > span { line-height: 1.4; }
.toast > div, .createbar > div { position: relative; }

/* ─── Liquid Glass (nur aktiv mit html.lg, gesetzt von glass.js) ─── */
:root {
  --glass-tint: color-mix(in srgb, var(--color-bg) 38%, transparent);
  --glass-tint-strong: color-mix(in srgb, var(--color-bg) 70%, transparent);
  --glass-dark: color-mix(in srgb, var(--color-neutral-900) 58%, transparent);
  --glass-rim: color-mix(in srgb, var(--color-neutral-100) 90%, transparent);
  --glass-rim-soft: color-mix(in srgb, var(--color-neutral-100) 32%, transparent);
  --glass-sheen: color-mix(in srgb, var(--color-neutral-100) 38%, transparent);
  --glass-shadow: 0 14px 36px color-mix(in srgb, var(--color-neutral-900) 20%, transparent), 0 2px 6px color-mix(in srgb, var(--color-neutral-900) 10%, transparent);
}
.lg-bg { display: none; }
/* Fester Hintergrund: flache Gemüse- und Obstformen mit klaren Kanten (Karotte, Brokkoli,
   Kürbis, Avocado). Beim Scrollen gleiten die Glasflächen darüber und brechen sie an den Rändern. */
html.lg .lg-bg { display: block; position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; background: var(--color-bg); }
.lg-bg .v { position: absolute; display: block; height: auto; opacity: .82; filter: saturate(.9); }
.lg-bg .v1 { top: 5%; right: -44px; width: 210px; transform: rotate(-6deg); }
.lg-bg .v2 { top: 33%; left: -64px; width: 240px; transform: rotate(-14deg); }
.lg-bg .v3 { top: 58%; right: -52px; width: 230px; transform: rotate(9deg); }
.lg-bg .v4 { bottom: -46px; left: 4%; width: 200px; transform: rotate(26deg); }
.lg-bg .v5 { top: 19%; left: 30%; width: 96px; transform: rotate(-32deg); }
.lg-bg .v6 { top: 82%; right: 20%; width: 120px; transform: rotate(38deg); }
.lg-bg .v7, .lg-bg .v8, .lg-bg .v9 { display: none; }
@media (min-width: 960px) {
  .lg-bg .v1 { top: -30px; right: 4%; width: 260px; }
  .lg-bg .v2 { top: 40%; left: -40px; width: 280px; }
  .lg-bg .v3 { top: 54%; right: -30px; width: 300px; }
  .lg-bg .v4 { left: 22%; width: 220px; }
  .lg-bg .v5 { top: 46%; left: 30%; width: 120px; }
  .lg-bg .v6 { top: 78%; right: 30%; width: 150px; }
  .lg-bg .v7 { display: block; top: 16%; left: 58%; width: 180px; transform: rotate(10deg); }
  .lg-bg .v8 { display: block; bottom: -50px; left: 50%; width: 220px; transform: rotate(-8deg); }
  .lg-bg .v9 { display: block; top: 30%; right: 22%; width: 110px; transform: rotate(-20deg); }
}
html.lg body, html.lg .shell { background: transparent; }

html.lg .glass {
  background: var(--glass-tint);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  box-shadow: inset 0 1px 0 var(--glass-rim), inset 0 -1px 0 var(--glass-rim-soft), inset 1px 0 0 var(--glass-rim-soft), inset -1px 0 0 var(--glass-rim-soft), var(--glass-shadow);
  isolation: isolate;
}
html.lg .glass[data-glass=strong] { background: var(--glass-tint-strong); }
/* Inhaltsflächen: behalten ihre Farbe als Glastönung */
.card { --tint: var(--color-surface); }
.list, .ing-list, .steps, .nt { --tint: var(--color-neutral-100); }
.nt-phe { --tint: var(--color-accent-2-200); }
html.lg .glass.gt {
  position: relative;
  background: color-mix(in srgb, var(--tint, var(--color-bg)) var(--ga, 60%), transparent) !important;
  -webkit-backdrop-filter: blur(10px) saturate(170%);
  backdrop-filter: blur(10px) saturate(170%);
  box-shadow: inset 0 1px 0 var(--glass-rim), inset 0 -1px 0 var(--glass-rim-soft), 0 6px 20px color-mix(in srgb, var(--color-neutral-900) 10%, transparent);
}
@media (hover: hover) { html.lg .u.glass.gt:hover { --ga: 80%; } }
html.lg .u.glass.gt:active { --ga: 85%; }
html.lg .glass.glass-dark { background: var(--glass-dark); }
/* Glanzkante: heller Rand oben links, weicher Lichtpunkt am Zeiger */
html.lg .glass::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 1.5px;
  background:
    radial-gradient(180px circle at var(--mx, 24%) var(--my, 0%), var(--glass-rim), transparent 70%),
    linear-gradient(145deg, var(--glass-rim) 0%, transparent 30%, transparent 66%, var(--glass-rim-soft) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
/* Innerer Schimmer von oben, liegt hinter dem Inhalt */
html.lg .glass::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: linear-gradient(180deg, var(--glass-sheen) 0%, transparent 42%),
              radial-gradient(260px circle at var(--mx, 30%) var(--my, -20%), var(--glass-sheen), transparent 60%);
}
html.lg .glass.glass-dark::before { opacity: .35; }
html.lg .glass.glass-dark::after { opacity: .6; }

/* Tab-Leiste wird zur schwebenden Glaskapsel */
html.lg .tabs {
  bottom: calc(10px + env(safe-area-inset-bottom)); width: min(456px, calc(100% - 24px));
  min-height: 66px; padding: 6px; border-radius: 999px;
}
html.lg .tab { border-radius: 999px; transition: background .2s; }
html.lg .tab[aria-current=page] { background: color-mix(in srgb, var(--color-neutral-100) 58%, transparent); box-shadow: inset 0 1px 0 var(--glass-rim); }
html.lg .createbar { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
html.lg .layer > .scrim { background: color-mix(in srgb, var(--color-neutral-900) 22%, transparent); }
html.lg .side-item[aria-current=page], html.lg .side-budget { background: color-mix(in srgb, var(--color-neutral-100) 55%, transparent); }
@media (min-width: 960px) { html.lg .shell { background: transparent; } }
@media (prefers-reduced-transparency: reduce) { html.lg .lg-bg { display: none; } }