/* Puls. — Design-System. Dunkel zuerst (kühles Blauschwarz, eisblauer Lichtschein
   oben, Glut-Orange als einziger Akzent), heller Modus vollwertig in kühlen
   Papiertönen. Keine externen Quellen: Systemschriften. */

:root, html[data-theme="dunkel"] {
  color-scheme: dark;
  --bg0: #070A12; --bg1: #0B1020;
  --surface: #0E1526; --surface-2: #141C2E; --surface-3: #1A2439;
  --line: rgba(140, 170, 215, .13); --line-stark: rgba(140, 170, 215, .28);
  --ink: #EEF2FA; --ink-2: #A3AEC6; --ink-3: #6B768F;
  --akzent: #FF8A3D; --akzent-tief: #E5722A; --akzent-ink: #16090A;
  --akzent-glow: rgba(255, 138, 61, .35); --akzent-weich: rgba(255, 138, 61, .14);
  --eis: #7FD3FF; --eis-glow: rgba(127, 211, 255, .22);
  --gruen: #3DE0B4; --rot: #FF5C7A; --warn: #F5D64A; --blau: #4FB3FF;
  --schatten: 0 10px 28px rgba(0, 0, 0, .42);
  --glas: rgba(9, 13, 24, .82);
}
html[data-theme="hell"] {
  color-scheme: light;
  --bg0: #EEF1F6; --bg1: #F7F8FB;
  --surface: #FFFFFF; --surface-2: #F1F3F8; --surface-3: #E6E9F1;
  --line: rgba(30, 40, 70, .11); --line-stark: rgba(30, 40, 70, .24);
  --ink: #141A2B; --ink-2: #4C566C; --ink-3: #8A93A8;
  --akzent: #E2651A; --akzent-tief: #C2540F; --akzent-ink: #FFFFFF;
  --akzent-glow: rgba(226, 101, 26, .25); --akzent-weich: rgba(226, 101, 26, .12);
  --eis: #2B8FD1; --eis-glow: rgba(43, 143, 209, .16);
  --gruen: #0E9C78; --rot: #D23D5A; --warn: #A67C06; --blau: #2A78C9;
  --schatten: 0 8px 20px rgba(30, 40, 70, .10);
  --glas: rgba(247, 248, 251, .86);
}
@media (prefers-color-scheme: light) {
  html:not([data-theme]) {
    color-scheme: light;
    --bg0: #EEF1F6; --bg1: #F7F8FB;
    --surface: #FFFFFF; --surface-2: #F1F3F8; --surface-3: #E6E9F1;
    --line: rgba(30, 40, 70, .11); --line-stark: rgba(30, 40, 70, .24);
    --ink: #141A2B; --ink-2: #4C566C; --ink-3: #8A93A8;
    --akzent: #E2651A; --akzent-tief: #C2540F; --akzent-ink: #FFFFFF;
    --akzent-glow: rgba(226, 101, 26, .25); --akzent-weich: rgba(226, 101, 26, .12);
    --eis: #2B8FD1; --eis-glow: rgba(43, 143, 209, .16);
    --gruen: #0E9C78; --rot: #D23D5A; --warn: #A67C06; --blau: #2A78C9;
    --schatten: 0 8px 20px rgba(30, 40, 70, .10);
    --glas: rgba(247, 248, 251, .86);
  }
}
:root {
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --serif: ui-serif, "New York", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --radius: 18px; --radius-s: 12px;
  --ease: cubic-bezier(.2, .8, .25, 1);
  /* Shop-Palette (acht Farben, kontrastgeprüft auf #070A12) */
  --shop-koralle: #FF5C7A; --shop-mint: #3DE0B4; --shop-himmel: #4FB3FF; --shop-flieder: #B48CFF;
  --shop-zitrone: #F5D64A; --shop-aqua: #3ED3E6; --shop-magenta: #F06BD0; --shop-limette: #9EE84A;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html { overscroll-behavior-y: none; }
html, body { max-width: 100%; overflow-x: clip; }
body { overflow-wrap: anywhere; }
body {
  margin: 0; background: var(--bg0); color: var(--ink);
  font: 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; min-height: 100dvh;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(70% 40% at 50% -8%, var(--eis-glow), transparent 62%),
    radial-gradient(45% 35% at 100% 100%, var(--akzent-glow), transparent 65%),
    linear-gradient(var(--bg1), var(--bg0));
  opacity: .7; transform: translateZ(0); will-change: transform;
}
a { color: var(--akzent); text-decoration: none; }
h1, h2, h3, .kpi-titel { overflow-wrap: normal; }
h1, h2, h3 { margin: 0 0 .35em; letter-spacing: -.02em; }
h1 { font-size: 26px; } h2 { font-size: 19px; } h3 { font-size: 16px; }
p { margin: 0 0 .8em; }
small, .klein { font-size: 13px; color: var(--ink-2); }
.leise { color: var(--ink-3); }
.tnum { font-variant-numeric: tabular-nums; }
input, select, textarea, button { font: inherit; color: inherit; }
input, select, textarea {
  font-size: 16px; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-s); padding: 11px 13px; width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-glow);
}
label { display: block; font-size: 12px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 5px 2px; }
.feld { margin-bottom: 14px; }
.feld .hinweis { font-size: 12.5px; color: var(--ink-3); margin-top: 5px; }
.zeile2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.zeile2 > div { min-width: 0; }
input[type="date"] { -webkit-appearance: none; appearance: none; min-width: 0; max-width: 100%;
  min-height: 46px; display: flex; align-items: center; }
input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; accent-color: var(--akzent); padding: 0; }
.schalter { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.schalter:last-child { border-bottom: 0; }
.schalter label { margin: 0; text-transform: none; letter-spacing: 0; font-size: 15px; color: var(--ink); flex: 1; }
.schalter small { display: block; color: var(--ink-3); font-size: 12.5px; }

/* --- Knöpfe ---------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--line-stark);
  background: var(--surface-2); color: var(--ink); cursor: pointer; font-weight: 600; font-size: 15px;
  transition: transform .15s var(--ease), background .2s, box-shadow .2s;
}
.btn.primaer { background: linear-gradient(150deg, var(--akzent), var(--akzent-tief)); color: var(--akzent-ink);
  border-color: transparent; box-shadow: 0 8px 22px var(--akzent-glow); }
.btn.leise { background: transparent; }
.btn.gefahr { color: var(--rot); border-color: color-mix(in srgb, var(--rot) 40%, transparent); }
.btn.klein { min-height: 36px; padding: 6px 13px; font-size: 13.5px; }
.btn:disabled { opacity: .5; cursor: default; }
.btn .ikon { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,.25); }
  .btn.primaer:hover { box-shadow: 0 12px 30px var(--akzent-glow); }
}
.knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

/* --- Ladeschirm mit Puls-Ringen ---------------------------------------- */
.splash { display: none; }
html.lade .splash {
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 100;
  background: radial-gradient(70% 45% at 50% 18%, var(--eis-glow), transparent 65%), var(--bg0);
  transition: opacity .5s ease, transform .5s ease;
}
.splash.weg { opacity: 0; transform: scale(1.05); pointer-events: none; }
.splash-kern { display: grid; justify-items: center; gap: 14px; }
.splash-icon { position: relative; width: 96px; height: 96px; display: grid; place-items: center; }
.splash-icon img { width: 96px; height: 96px; border-radius: 24px; box-shadow: 0 18px 50px var(--akzent-glow);
  animation: splashKachel .7s cubic-bezier(.18, .9, .3, 1.2) both; position: relative; z-index: 1; }
.splash-icon i { position: absolute; inset: 0; border-radius: 28px; border: 2px solid var(--akzent);
  opacity: 0; animation: splashRing 1.6s ease-out infinite; }
.splash-icon i:nth-child(3) { animation-delay: .4s; }
.splash-icon i:nth-child(4) { animation-delay: .8s; }
.splash-wort { font: italic 600 34px/1 var(--serif); letter-spacing: -.01em; animation: splashWort .6s .25s var(--ease) both; }
.splash-wort .punkt { color: var(--akzent); }
.splash-firma { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3);
  animation: splashWort .6s .4s var(--ease) both; }
.splash-strich { width: 120px; height: 2px; border-radius: 2px; margin-top: 6px;
  background: linear-gradient(90deg, transparent, var(--akzent), transparent);
  background-size: 200% 100%; animation: splashStrich 1.2s linear infinite; }
@keyframes splashKachel { from { transform: scale(.6) translateY(20px); opacity: 0; } }
@keyframes splashRing { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(2.1); opacity: 0; } }
@keyframes splashWort { from { transform: translateY(8px); opacity: 0; } }
@keyframes splashStrich { from { background-position: 200% 0; } to { background-position: -200% 0; } }
html.lade:not(:has(.splash.weg)) main > * { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { html.lade .splash { display: none; } }

/* --- Gerüst ---------------------------------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 16px;
  padding: calc(10px + env(safe-area-inset-top)) 18px 10px;
  background: var(--glas); backdrop-filter: blur(12px) saturate(150%); -webkit-backdrop-filter: blur(12px) saturate(150%);
  border-bottom: 1px solid var(--line);
}
.wordmark { font: italic 600 22px/1 var(--serif); color: var(--ink); letter-spacing: -.01em;
  display: flex; align-items: center; gap: 9px; }
.wordmark .punkt { color: var(--akzent); }
.wordmark img { width: 28px; height: 28px; border-radius: 7px; }
.wm-firma { font: 600 9.5px var(--sans); font-style: normal; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-3); white-space: nowrap; margin-left: 4px; padding-left: 12px;
  border-left: 1px solid var(--line-stark); align-self: center; transform: translateY(1px); }
@media (max-width: 430px) { .wm-firma { display: none; } }
.desknav { display: flex; gap: 4px; margin-left: auto; }
.desknav a { color: var(--ink-2); padding: 8px 13px; border-radius: 999px; font-size: 15px; }
.desknav a.aktiv { color: var(--ink); background: var(--surface-2); }
.theme-knopf, .menue-knopf { background: none; border: 1px solid var(--line); border-radius: 999px;
  width: 36px; height: 36px; cursor: pointer; color: var(--ink-2); display: grid; place-items: center; font-size: 16px; }
.theme-knopf { margin-left: auto; }
.desknav + .theme-knopf { margin-left: 8px; }
.menue-knopf svg { width: 20px; height: 20px; }
.menue-knopf { display: none; }
main { max-width: 820px; margin: 0 auto; padding: 20px 18px calc(110px + env(safe-area-inset-bottom)); }
main.weit { max-width: 1180px; }
.tabbar {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  grid-template-columns: repeat(5, 1fr); padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  background: var(--glas); backdrop-filter: blur(12px) saturate(150%); -webkit-backdrop-filter: blur(12px) saturate(150%);
  border-top: 1px solid var(--line);
}
.tabbar a { display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 48px;
  justify-content: center; color: var(--ink-3); font-size: 10.5px; letter-spacing: .04em; }
.tabbar a.aktiv { color: var(--akzent); }
.tabbar svg { width: 23px; height: 23px; }
@media (max-width: 860px) { .desknav { display: none; } .tabbar { display: grid; } .menue-knopf { display: grid; } }

/* Menü (<dialog> als Bottom-Sheet) */
.menue { border: 0; padding: 0; width: min(100%, 520px); max-width: 100%; margin: auto auto 0; max-height: 85dvh;
  background: var(--surface); color: var(--ink); border-radius: 22px 22px 0 0; box-shadow: var(--schatten); }
@media (min-width: 861px) { .menue { margin: auto; border-radius: 22px; } }
.menue::backdrop { background: rgba(5, 8, 16, .55); backdrop-filter: blur(6px); }
.menue-kopf { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 8px;
  font-weight: 600; }
.menue-zu { background: var(--surface-2); border: 0; border-radius: 999px; width: 34px; height: 34px;
  display: grid; place-items: center; cursor: pointer; color: var(--ink-2); }
.menue-zu svg { width: 18px; height: 18px; }
.menue-liste { display: grid; padding: 0 10px calc(14px + env(safe-area-inset-bottom)); }
.menue-liste a { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px;
  padding: 12px 10px; border-radius: 14px; color: var(--ink); }
.menue-liste a.aktiv { background: var(--surface-2); }
.menue-icon { width: 38px; height: 38px; border-radius: 12px; background: var(--surface-2); display: grid;
  place-items: center; color: var(--akzent); }
.menue-icon svg { width: 20px; height: 20px; }
.menue-pfeil { color: var(--ink-3); }
.sheet { border: 0; padding: 0; width: min(100%, 560px); max-width: 100%; margin: auto auto 0; max-height: 88dvh;
  background: var(--surface); color: var(--ink); border-radius: 22px 22px 0 0; box-shadow: var(--schatten); }
@media (min-width: 861px) { .sheet { margin: auto; border-radius: 22px; } }
.sheet::backdrop { background: rgba(5, 8, 16, .55); backdrop-filter: blur(6px); }
.sheet-inhalt { padding: 14px 20px calc(20px + env(safe-area-inset-bottom)); overflow: auto; max-height: 88dvh; }
.sheet-griff { width: 40px; height: 4px; border-radius: 999px; background: var(--line-stark); margin: 2px auto 14px; }

/* --- Karten & Kennzahlen ------------------------------------------------ */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; margin-bottom: 14px; box-shadow: var(--schatten); }
.card h2, .card h3 { display: flex; align-items: center; gap: 8px; }
.card-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.card-kopf h2 { margin: 0; }
.hero { padding: 26px 20px 22px; position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; inset: auto -30% -60% auto; width: 75%; aspect-ratio: 1;
  border-radius: 50%; background: radial-gradient(circle, var(--akzent-glow), transparent 70%); pointer-events: none; }
.hero-titel, .kpi-titel { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.hero-figure { font: 700 clamp(40px, 13vw, 66px)/1 var(--sans); letter-spacing: -.03em; color: var(--akzent);
  font-variant-numeric: tabular-nums; }
.hero-figure small { font-size: .42em; color: var(--ink-2); font-weight: 600; letter-spacing: 0; margin-left: 6px; }
.hero-sub { color: var(--ink-2); margin-top: 6px; font-size: 15px; }
.dash { display: grid; gap: 14px; }
@media (min-width: 900px) {
  .dash { grid-template-columns: repeat(12, 1fr); align-items: start; }
  .dash > * { grid-column: span 12; margin-bottom: 0; }
  .dash > .sp3 { grid-column: span 3; } .dash > .sp4 { grid-column: span 4; } .dash > .sp5 { grid-column: span 5; }
  .dash > .sp6 { grid-column: span 6; } .dash > .sp7 { grid-column: span 7; } .dash > .sp8 { grid-column: span 8; }
}
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stats > .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
.stat, .kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 13px 15px; }
.stat b, .kpi-figur { display: block; font-size: 24px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; font-weight: 700; }
.stat span, .kpi-sub { font-size: 12.5px; color: var(--ink-3); }
.kpi-figur small { font-size: .6em; color: var(--ink-2); }
.delta { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; padding: 2px 9px; border-radius: 999px;
  background: var(--surface-3); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.delta.hoch { color: var(--gruen); background: color-mix(in srgb, var(--gruen) 14%, transparent); }
.delta.runter { color: var(--rot); background: color-mix(in srgb, var(--rot) 14%, transparent); }
.frisch { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-2); }
.frisch::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gruen);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gruen) 25%, transparent); }
.frisch.alt::before { background: var(--warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 25%, transparent); }
.frisch.tot::before { background: var(--rot); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rot) 25%, transparent); }
.frisch.neu::before { background: var(--ink-3); box-shadow: none; }

/* Chips, Badges, Hinweise */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px;
  font-weight: 600; background: var(--surface-3); color: var(--ink-2); white-space: nowrap; }
.chip.akzent { background: var(--akzent-weich); color: var(--akzent); }
.chip.gruen { background: color-mix(in srgb, var(--gruen) 14%, transparent); color: var(--gruen); }
.chip.rot { background: color-mix(in srgb, var(--rot) 14%, transparent); color: var(--rot); }
.chip.warn { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.chip.blau { background: color-mix(in srgb, var(--blau) 14%, transparent); color: var(--blau); }
.shop-punkt { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--shop, var(--akzent));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--shop, var(--akzent)) 22%, transparent); flex: none; }
.hinweis { border: 1px solid var(--line); background: var(--surface-2); border-radius: var(--radius-s); padding: 12px 14px;
  font-size: 14px; color: var(--ink-2); margin-bottom: 14px; }
.hinweis.ok { border-color: color-mix(in srgb, var(--gruen) 40%, transparent); color: var(--gruen); }
.hinweis.fehler { border-color: color-mix(in srgb, var(--rot) 45%, transparent); color: var(--rot); }
.hinweis.warn { border-color: color-mix(in srgb, var(--warn) 45%, transparent); color: var(--warn); }
.leer { text-align: center; color: var(--ink-3); padding: 26px 10px; }
.leer img { width: 150px; height: 150px; border-radius: 30px; margin-bottom: 10px; opacity: .9; }

/* Listen: Tabellen werden am Handy zu Karten */
.liste { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.liste th { text-align: left; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
  padding: 6px 8px; border-bottom: 1px solid var(--line); }
.liste td { padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.liste tr:last-child td { border-bottom: 0; }
.liste .betrag { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 860px) {
  .liste thead { display: none; }
  .liste, .liste tbody { display: block; }
  .liste tbody tr { display: grid; gap: 4px 12px; grid-template-columns: 1fr auto; background: var(--surface-2);
    border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; }
  .liste tbody td { display: block; padding: 0; border: 0; min-width: 0; }
  .liste td[data-l]::before { content: attr(data-l) " · "; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
  .liste td.voll { grid-column: 1 / -1; }
}

/* Bewegung */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .topbar { view-transition-name: topbar; }
  .tabbar { view-transition-name: tabbar; }
  main > .card:nth-child(-n+9), main > .dash > *:nth-child(-n+9) { animation: kartenAn .5s var(--ease) backwards; }
  main > .card:nth-child(2), main > .dash > *:nth-child(2) { animation-delay: .05s; }
  main > .card:nth-child(3), main > .dash > *:nth-child(3) { animation-delay: .1s; }
  main > .card:nth-child(4), main > .dash > *:nth-child(4) { animation-delay: .15s; }
  main > .card:nth-child(5), main > .dash > *:nth-child(5) { animation-delay: .2s; }
  main > .card:nth-child(6), main > .dash > *:nth-child(6) { animation-delay: .25s; }
  .btn:active { transform: scale(.96); }
  ::view-transition-old(root) { animation-duration: .16s; }
  ::view-transition-new(root) { animation-duration: .22s; }
}
@keyframes kartenAn { from { opacity: 0; transform: translateY(12px); } }

/* Balken */
.balken { height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.balken i { display: block; height: 100%; width: var(--w, 0%); border-radius: 999px; background: var(--akzent);
  transform-origin: left; transition: width .6s var(--ease); }
.balken i.soll { background: var(--ink-3); }

/* --- Seiten-spezifisches folgt (Login, Shops, Bildschirme, Einstellungen …) --- */

/* ===== Seiten-spezifisches ============================================= */

/* Gemeinsames: Seitenkopf, Hilfstexte, Pillen, Aktionsleiste */
.seitenkopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin: 4px 0 18px; flex-wrap: wrap; }
.seitenkopf > div { min-width: 0; }
.seitenkopf h1 { display: flex; align-items: center; gap: 10px; }
.seitenkopf p { margin: 0; }
.seitenkopf-knoepfe { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.seitenkopf-knoepfe form { margin: 0; }
.seitenkopf-knoepfe .btn { white-space: nowrap; }
@media (max-width: 600px) { .seitenkopf-knoepfe { width: 100%; } .seitenkopf-knoepfe .btn, .seitenkopf-knoepfe form { flex: 1 1 auto; } .seitenkopf-knoepfe form .btn { width: 100%; } }
.tabbar a { white-space: nowrap; letter-spacing: 0; font-size: 10px; }
.zurueck { display: inline-block; font-size: 13.5px; color: var(--ink-3); margin-bottom: 4px; }
.hinweis-text { font-size: 12.5px; color: var(--ink-3); margin: 8px 0 14px 2px; }
.feld > .hinweis-text { margin-top: 5px; margin-bottom: 0; }
.zeile2 + .hinweis-text, .feld + .hinweis-text { margin-top: -6px; }
.zeile2.weich > div { min-width: 0; }
@media (max-width: 520px) { .zeile2.weich { grid-template-columns: 1fr; } }
.hinweis-text code, .schritte code, .sheet code, .leer code { font: 12.5px var(--mono); background: var(--surface-3); padding: 1px 6px; border-radius: 6px; color: var(--ink-2); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips .chip b { font-weight: 700; }
.chips .chip { white-space: normal; }
.mittig { justify-content: center; }
.gruen-text { color: var(--gruen); }
.aktionsleiste { position: sticky; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 30; display: flex; align-items: center;
  gap: 14px; padding: 10px 14px; margin: 4px 0 18px; border-radius: 999px; background: var(--glas);
  backdrop-filter: blur(12px) saturate(150%); -webkit-backdrop-filter: blur(12px) saturate(150%); border: 1px solid var(--line);
  box-shadow: var(--schatten); }
.aktionsleiste .btn { flex: none; white-space: nowrap; }
.aktionsleiste > span { min-width: 0; }
@media (min-width: 861px) { .aktionsleiste { bottom: 14px; } }
.kopierzeile { display: flex; gap: 8px; align-items: center; }
.kopierzeile > input, .kopierzeile > select { flex: 1; min-width: 0; }
.kopierzeile > .btn { flex: none; }
.kopierzeile input[readonly] { font: 13.5px var(--mono); color: var(--ink-2); }
.pillen { display: flex; flex-wrap: wrap; gap: 8px; }
.pille { position: relative; margin: 0; text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--ink-2); }
.pille input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.pille span { display: inline-flex; align-items: center; min-height: 38px; padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--line-stark); background: var(--surface-2); transition: background .2s, color .2s, border-color .2s, transform .15s var(--ease); }
.pille:has(input:checked) span { background: var(--akzent-weich); color: var(--akzent); border-color: color-mix(in srgb, var(--akzent) 55%, transparent); font-weight: 600; }
.pille:has(input:focus-visible) span { box-shadow: 0 0 0 3px var(--akzent-glow); }
.pille:has(input:active) span { transform: scale(.96); }
.mit-einheit { display: flex; align-items: center; gap: 8px; }
.mit-einheit input { flex: 1; min-width: 0; }
.mit-einheit span { font-size: 13px; color: var(--ink-3); white-space: nowrap; }
.zeile3 { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 12px; }
.zeile3 > div { min-width: 0; }
@media (max-width: 520px) { .zeile3 { grid-template-columns: 1fr 1fr; } .zeile3 > div:first-child { grid-column: 1 / -1; } }
.avatar { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; flex: none;
  background: linear-gradient(150deg, var(--akzent), var(--akzent-tief)); color: var(--akzent-ink); font: 700 15px var(--sans); }
.avatar.gross { width: 40px; height: 40px; font-size: 17px; }
.spinner { display: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid color-mix(in srgb, currentColor 30%, transparent);
  border-top-color: currentColor; animation: drehen .8s linear infinite; }
.spinner.an, .btn.laedt .spinner { display: inline-block; }
.btn.laedt { pointer-events: none; opacity: .75; }
@keyframes drehen { to { transform: rotate(360deg); } }
.schritte { margin: 0 0 16px; padding: 0; list-style: none; counter-reset: schritt; display: grid; gap: 10px; }
.schritte li { display: grid; grid-template-columns: 30px 1fr; gap: 4px 12px; counter-increment: schritt; align-items: start; }
.schritte li::before { content: counter(schritt); grid-row: 1 / span 2; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; background: var(--akzent-weich); color: var(--akzent); font-weight: 700; font-size: 13.5px; }
.schritte li b { font-weight: 600; }
.schritte li small { grid-column: 2; color: var(--ink-3); font-size: 13px; }
.schritte.kompakt { gap: 8px; }
.sheet-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.sheet-kopf h2 { margin: 0; }
.sheet-kopf form { margin: 0; }
.sheet-inhalt > .feld { margin-top: 8px; }
/* Sheet: weich aus dem unteren Rand, weich wieder weg */
.sheet, .menue { opacity: 1; translate: 0 0; transition: opacity .28s var(--ease), translate .32s var(--ease), display .32s allow-discrete, overlay .32s allow-discrete; }
@starting-style { .sheet[open], .menue[open] { opacity: 0; translate: 0 24px; } }
.sheet:not([open]), .menue:not([open]) { opacity: 0; translate: 0 24px; }
.sheet::backdrop, .menue::backdrop { transition: opacity .28s, display .28s allow-discrete, overlay .28s allow-discrete; opacity: 1; }
@starting-style { .sheet[open]::backdrop, .menue[open]::backdrop { opacity: 0; } }
.sheet:not([open])::backdrop, .menue:not([open])::backdrop { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .sheet, .menue, .sheet::backdrop, .menue::backdrop { transition: none; } }

@media (prefers-reduced-motion: no-preference) {
  .shop-layout > *:nth-child(-n+6), form > .dash > *:nth-child(-n+6), .editor-seite > .card:nth-child(-n+3) { animation: kartenAn .5s var(--ease) backwards; }
  .shop-layout > *:nth-child(2), form > .dash > *:nth-child(2), .editor-seite > .card:nth-child(2) { animation-delay: .05s; }
  .shop-layout > *:nth-child(3), form > .dash > *:nth-child(3), .editor-seite > .card:nth-child(3) { animation-delay: .1s; }
  .shop-layout > *:nth-child(4), form > .dash > *:nth-child(4) { animation-delay: .15s; }
  .shop-layout > *:nth-child(5) { animation-delay: .2s; }
}

/* --- Login ---------------------------------------------------------------- */
.login-seite { background: #070A12; color: #EEF2FA; overflow: hidden; }
.login-seite::before { display: none; }
.login-wrap { position: relative; min-height: 100dvh; display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(28px + env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom)); overflow: hidden; isolation: isolate; }
.login-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; z-index: -3; }
.login-schleier { position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 10, 18, .55) 0%, rgba(7, 10, 18, 0) 35%, rgba(7, 10, 18, .15) 60%, rgba(7, 10, 18, .82) 100%),
              linear-gradient(0deg, rgba(7, 10, 18, .6) 0%, rgba(7, 10, 18, 0) 45%); }
/* Aurora: zwei weiche, träge driftende Farbfelder in Glut-Orange und Amber. Nur transform animiert — bleibt auf der GPU. */
.login-wrap::before, .login-wrap::after { content: ""; position: absolute; width: 72vmax; height: 72vmax; border-radius: 50%;
  filter: blur(70px); pointer-events: none; z-index: -1; }
.login-wrap::before { background: radial-gradient(circle at 50% 50%, rgba(255, 138, 61, .30), transparent 62%); top: -38vmax; right: -22vmax;
  animation: aurora1 26s ease-in-out infinite alternate; }
.login-wrap::after { background: radial-gradient(circle at 50% 50%, rgba(255, 196, 77, .20), transparent 62%); bottom: -40vmax; left: -24vmax;
  animation: aurora2 32s ease-in-out infinite alternate; }
@keyframes aurora1 { to { transform: translate(-9vmax, 7vmax) scale(1.12); } }
@keyframes aurora2 { to { transform: translate(9vmax, -7vmax) scale(1.08); } }
.login-kopf { text-align: center; animation: loginAn .7s var(--ease) backwards; }
.login-wordmark { font: italic 600 clamp(54px, 15vw, 78px)/1 var(--serif); letter-spacing: -.02em; text-shadow: 0 6px 40px rgba(0, 0, 0, .55); }
.login-wordmark .punkt { color: var(--akzent); }
.login-untertitel { margin-top: 8px; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: rgba(238, 242, 250, .72); }
.login-karte { width: 100%; max-width: 420px; margin: 28px auto 0; padding: 24px 22px calc(18px + env(safe-area-inset-bottom)); border-radius: 24px;
  background: rgba(9, 13, 24, .62); border: 1px solid rgba(140, 170, 215, .18); box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
  backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%);
  animation: loginAn .6s .12s var(--ease) backwards; }
.login-karte h1 { font-size: 22px; margin-bottom: 2px; }
.login-karte .klein { color: rgba(238, 242, 250, .62); margin-bottom: 16px; }
.login-karte input { background: rgba(20, 28, 46, .75); border-color: rgba(140, 170, 215, .2); }
.login-karte .hinweis { background: rgba(20, 28, 46, .6); }
.login-knopf { width: 100%; margin-top: 4px; min-height: 50px; font-size: 16px; }
@keyframes loginAn { from { opacity: 0; transform: translateY(18px) scale(.98); } }
@media (min-width: 861px) {
  .login-wrap { justify-content: center; gap: 28px; }
  .login-bg { object-position: 50% 55%; }
  .login-karte { margin-top: 0; padding-bottom: 22px; }
}
@media (prefers-reduced-motion: reduce) { .login-wrap::before, .login-wrap::after, .login-kopf, .login-karte { animation: none; } }

/* --- Shops ---------------------------------------------------------------- */
.shop-raster { display: grid; gap: 14px; }
@media (min-width: 700px) { .shop-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .shop-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.shop-karte { display: flex; flex-direction: column; gap: 12px; color: var(--ink); margin: 0; position: relative; overflow: hidden;
  transition: transform .2s var(--ease), border-color .2s; }
.shop-karte::before { content: ""; position: absolute; inset: 0 auto auto 0; width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--shop), transparent 80%); opacity: .9; }
.shop-karte.inaktiv { opacity: .55; }
@media (hover: hover) and (pointer: fine) { .shop-karte:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--shop) 45%, var(--line)); } }
.shop-karte-kopf { display: flex; align-items: center; gap: 12px; }
.shop-karte-name { min-width: 0; flex: 1; display: grid; }
.shop-karte-name b { font-size: 17px; letter-spacing: -.01em; }
.shop-karte-name small { font-size: 12.5px; }
.shop-punkt.gross { width: 14px; height: 14px; }
.shop-kuerzel { font: 700 12px var(--mono); letter-spacing: .08em; padding: 4px 9px; border-radius: 8px; flex: none;
  background: color-mix(in srgb, var(--shop) 16%, transparent); color: var(--shop); }
.shop-karte-fuss { display: flex; justify-content: space-between; gap: 10px; align-items: center; font-size: 13px; margin-top: auto; }
.shop-karte-fuss .leise { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop-fehler { font-size: 13px; color: var(--rot); padding: 8px 10px; border-radius: 10px;
  background: color-mix(in srgb, var(--rot) 10%, transparent); }
.shop-layout { display: grid; gap: 14px; }
.shop-layout > .card { margin-bottom: 0; }
@media (min-width: 900px) {
  .shop-layout { grid-template-columns: 7fr 5fr; align-items: start; }
  .shop-layout .bereich-formular { grid-column: 1; grid-row: 1 / span 4; }
  .shop-layout > :not(.bereich-formular) { grid-column: 2; }
  .shop-layout.allein { grid-template-columns: 1fr; max-width: 720px; }
  .shop-layout.allein .bereich-formular { grid-row: auto; }
}
.farben { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (min-width: 600px) { .farben { grid-template-columns: repeat(8, 1fr); } }
.farbe { position: relative; margin: 0; display: grid; justify-items: center; gap: 5px; padding: 8px 4px; border-radius: 14px;
  text-transform: none; letter-spacing: 0; cursor: pointer; border: 1px solid transparent; transition: background .2s, border-color .2s; }
.farbe input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.farbe-punkt { width: 28px; height: 28px; border-radius: 50%; background: var(--shop); box-shadow: 0 0 0 0 color-mix(in srgb, var(--shop) 35%, transparent);
  transition: transform .25s var(--spring, var(--ease)), box-shadow .25s; }
.farbe small { font-size: 11px; color: var(--ink-3); }
.farbe:has(input:checked) { background: var(--surface-2); border-color: var(--line); }
.farbe:has(input:checked) .farbe-punkt { transform: scale(1.15); box-shadow: 0 0 0 4px color-mix(in srgb, var(--shop) 35%, transparent), 0 0 18px color-mix(in srgb, var(--shop) 50%, transparent); }
.farbe:has(input:checked) small { color: var(--ink); font-weight: 600; }
.farbe:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--akzent-glow); }
:root { --spring: linear(0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1); }
.klang-wahl { display: flex; gap: 8px; align-items: center; }
.klang-wahl select { flex: 1; min-width: 0; }
.btn.abspielen { width: 42px; padding: 0; flex: none; font-size: 12px; }
.btn.abspielen.spielt { color: var(--akzent); border-color: var(--akzent); }
.webhook-liste { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.webhook-liste li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); }
.webhook-liste .wh-name { min-width: 0; }
.webhook-liste .wh-name code { white-space: nowrap; }
.webhook-liste .wh-detail { grid-column: 2 / -1; font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.webhook-liste .wh-zustand { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-3); }
.webhook-liste li.ok .wh-zustand { background: var(--gruen); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gruen) 25%, transparent); }
.webhook-liste li.warn .wh-zustand { background: var(--warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 25%, transparent); }
.webhook-liste li.rot .wh-zustand { background: var(--rot); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rot) 25%, transparent); }
.webhook-liste .wh-name code { font: 13px var(--mono); }
.webhook-liste .wh-text { font-size: 12.5px; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.webhook-liste li.ok .wh-text { color: var(--gruen); } .webhook-liste li.warn .wh-text { color: var(--warn); } .webhook-liste li.rot .wh-text { color: var(--rot); }
.stat .klein-figur { font-size: 15px; line-height: 1.4; }
.lauf-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lauf { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.lauf-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lauf-kopf b { font-size: 14.5px; }
.lauf-zeit { margin-left: auto; }
.lauf-meldung { color: var(--ink-3); font-size: 12.5px; min-height: 1em; }
.lauf.st-laeuft .lauf-balken, .lauf.st-angefordert .lauf-balken { background: linear-gradient(90deg, var(--akzent), var(--warn)); background-size: 200% 100%; animation: laufen 1.4s linear infinite; }
.lauf.st-fehler .lauf-balken { background: var(--rot); }
.lauf.st-teilweise .lauf-balken { background: var(--warn); }
@keyframes laufen { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .lauf-balken, .spinner { animation: none; } }

/* --- Bildschirme ------------------------------------------------------------ */
.code-feld { font: 600 30px/1 var(--mono); letter-spacing: .32em; text-transform: uppercase; text-align: center; padding: 14px 10px 14px 16px; }
.code-feld::placeholder { letter-spacing: .32em; color: var(--ink-3); opacity: .5; }
.tv-url { display: flex; gap: 8px; align-items: center; margin-top: 6px; grid-column: 2; min-width: 0; }
.tv-url code { flex: 1; min-width: 0; display: block; font: 600 15px/1.3 var(--mono); padding: 9px 12px; border-radius: 10px; background: var(--surface-2); color: var(--akzent); overflow-wrap: anywhere; }
.tv-url .btn { flex: none; }
.tv-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 700px) { .tv-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .tv-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tv-karte { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 12px 14px; border-radius: 14px;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); transition: border-color .2s, transform .2s var(--ease); }
.tv-karte.inaktiv { opacity: .55; }
@media (hover: hover) and (pointer: fine) { .tv-karte:hover { transform: translateY(-1px); border-color: var(--line-stark); } }
.tv-icon { grid-row: 1 / span 2; width: 44px; height: 44px; border-radius: 12px; background: var(--surface-3); display: grid; place-items: center; color: var(--akzent); }
.tv-icon svg { width: 22px; height: 22px; }
.tv-karte.inaktiv .tv-icon { color: var(--ink-3); }
.tv-karte b { font-size: 16px; }
.tv-karte .chip { grid-column: 3; grid-row: 1; }
.tv-meta { grid-column: 2 / -1; grid-row: 2; font-size: 12.5px; color: var(--ink-3); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.tv-pfeil { grid-column: 3; grid-row: 2; justify-self: end; color: var(--ink-3); font-size: 18px; }
.zeilen-link { color: var(--ink); }
.liste tr.inaktiv td { opacity: .6; }
.liste .geraet { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 860px) { .liste .geraet { max-width: none; white-space: normal; } .liste td.betrag .btn { margin-top: 6px; } }
.layout-editor .card { margin-bottom: 14px; }
@media (min-width: 900px) { .layout-editor .dash > .card, .layout-editor .editor-seite > .card { margin-bottom: 14px; } .editor-seite > .card:last-child { margin-bottom: 0; } }
.kachel-editor { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.kachel { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px;
  background: var(--surface-2); border: 1px solid var(--line); transition: background .2s, border-color .2s, opacity .2s; }
.kachel.an { border-color: color-mix(in srgb, var(--akzent) 40%, var(--line)); background: color-mix(in srgb, var(--akzent) 6%, var(--surface-2)); }
.kachel:not(.an) .kachel-text { opacity: .6; }
.kachel:not(.an) .kachel-pfeile { visibility: hidden; }
.kachel-wahl { margin: 0; display: grid; place-items: center; width: 36px; height: 36px; }
.kachel-text { min-width: 0; display: grid; gap: 1px; }
.kachel-text b { font-size: 15px; }
.kachel-text small { color: var(--ink-3); font-size: 12.5px; }
.kachel-pfeile { display: grid; gap: 4px; }
@media (min-width: 600px) { .kachel-pfeile { grid-auto-flow: column; } }
.pfeil { width: 36px; height: 34px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); cursor: pointer; font-size: 12px; display: grid; place-items: center; }
.pfeil:disabled { opacity: .3; cursor: default; }
.pfeil:not(:disabled):active { transform: scale(.92); }
.kachel.bewegt { animation: kachelHuepft .45s var(--spring, var(--ease)); }
@keyframes kachelHuepft { 0% { transform: scale(.98); } 100% { transform: none; } }
.kachel-editor .trenner { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); padding: 8px 4px 0; }
input[type="range"] { -webkit-appearance: none; appearance: none; height: 32px; padding: 0; background: transparent; border: 0; }
input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--akzent) var(--p, 80%), var(--surface-3) var(--p, 80%)); }
input[type="range"]::-moz-range-track { height: 6px; border-radius: 999px; background: var(--surface-3); }
input[type="range"]::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--akzent); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -10px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
input[type="range"]:focus-visible { outline: none; box-shadow: none; }
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--akzent-glow); }
label output { float: right; text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--akzent); font-weight: 700; }

/* --- Einstellungen ------------------------------------------------------------ */
.klang-raster { display: grid; gap: 0 14px; }
@media (min-width: 700px) { .klang-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.preset-liste { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.preset-liste li { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 12px; padding: 8px 10px; border-radius: 12px; background: var(--surface-2); }
.preset-liste li b { font-size: 14px; }
.preset-liste li small { grid-column: 2; color: var(--ink-3); font-size: 12.5px; }
.preset-liste li form { grid-column: 3; grid-row: 1; margin: 0; }
.preset-liste li:has(form) { grid-template-columns: auto 1fr auto; }
@media (min-width: 700px) { .preset-liste.zweispaltig { grid-template-columns: 1fr 1fr; } }
.upload-form { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
input[type="file"] { padding: 9px 12px; font-size: 14px; }
input[type="file"]::file-selector-button { font: 600 13px var(--sans); color: var(--ink); background: var(--surface-3); border: 0; border-radius: 999px; padding: 6px 12px; margin-right: 10px; }
.kurs-form { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.kurs-form h3 { margin-bottom: 10px; }

/* --- Team ------------------------------------------------------------------------- */
.team-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.team-zeile { padding: 12px 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.team-zeile.ich { border-color: color-mix(in srgb, var(--akzent) 35%, var(--line)); }
.team-kopf { display: flex; align-items: center; gap: 12px; }
.team-name { min-width: 0; flex: 1; display: grid; }
.team-name small { font-size: 12.5px; }
.team-aktionen { margin-top: 8px; }
.team-aktionen summary { list-style: none; width: max-content; }
.team-aktionen summary::-webkit-details-marker { display: none; }
.team-aktionen[open] summary { background: var(--surface-3); }
.team-formulare { display: grid; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
@media (min-width: 700px) { .team-formulare { grid-template-columns: 1fr 1fr; } .team-formulare form:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.inline-form { margin: 0; }

/* --- Protokoll --------------------------------------------------------------------- */
.segment { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line);
  margin-bottom: 14px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.segment::-webkit-scrollbar { display: none; }
@media (max-width: 600px) { .segment { display: grid; grid-template-columns: 1fr 1fr; border-radius: 18px; } .segment [role="tab"] { border-radius: 14px; padding: 6px 8px; font-size: 13.5px; } }
.segment [role="tab"] { flex: 1 0 auto; min-height: 38px; padding: 6px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2);
  font-weight: 600; font-size: 14px; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; justify-content: center;
  transition: background .2s, color .2s; }
.segment [role="tab"][aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.segment .zahl { font-size: 11.5px; padding: 1px 7px; border-radius: 999px; background: var(--surface-3); color: var(--ink-3); }
.segment [aria-selected="true"] .zahl { background: var(--akzent-weich); color: var(--akzent); }
.segment .hat-fehler .zahl { background: color-mix(in srgb, var(--rot) 16%, transparent); color: var(--rot); }
.tab-panel { view-transition-name: tab-panel; }
.liste td:empty::before { content: none; }
@media (max-width: 860px) {
  .liste.laeufe tbody tr { grid-template-areas: "art status" "shop wann" "zeit zeilen" "meldung meldung"; }
  .liste.eingaenge tbody tr { grid-template-areas: "topic ergebnis" "shop wann" "dauer verz"; }
  .liste.fehlerliste tbody tr { grid-template-areas: "grund grund" "shop wann" "topic link"; }
  .liste .c-art { grid-area: art; } .liste .c-status { grid-area: status; justify-self: end; } .liste .c-shop { grid-area: shop; }
  .liste .c-wann { grid-area: wann; justify-self: end; text-align: right; } .liste .c-zeit { grid-area: zeit; } .liste .c-zeilen { grid-area: zeilen; justify-self: end; }
  .liste .c-meldung { grid-area: meldung; } .liste .c-topic { grid-area: topic; } .liste .c-ergebnis { grid-area: ergebnis; justify-self: end; }
  .liste .c-dauer { grid-area: dauer; } .liste .c-verz { grid-area: verz; justify-self: end; } .liste .c-grund { grid-area: grund; } .liste .c-link { grid-area: link; justify-self: end; }
  .liste td:empty { display: none; }
  .liste .c-art b { font-size: 15.5px; }
  .liste .c-art::before, .liste .c-topic::before, .liste .c-grund::before, .liste .c-status::before, .liste .c-ergebnis::before { content: none; }
}
.fehler-text { color: var(--rot); }
.meilenstein-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.meilenstein-liste li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); }
.meilenstein-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; background: var(--akzent-weich); }
.meilenstein-text { min-width: 0; display: grid; }
.meilenstein-text small { font-size: 12.5px; }
@media (max-width: 520px) { .meilenstein-liste li { grid-template-columns: auto 1fr; } .meilenstein-liste .chip { grid-column: 2; justify-self: start; } }

/* --- Konto --------------------------------------------------------------------------- */
.sitzungen { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sitzungen li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.sitzung-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--surface-3); display: grid; place-items: center; color: var(--akzent); flex: none; }
.sitzung-icon svg { width: 18px; height: 18px; }
.sitzung-text { min-width: 0; display: grid; }
.sitzung-text small { font-size: 12.5px; }

/* --- Bildschirm-Editor: Modus-Wahl & Zähler-Wand --------------------------------------- */
.editor-links > .card { margin-bottom: 14px; }
@media (min-width: 900px) { .editor-links > .card:last-child { margin-bottom: 0; } }
.modus-wahl .card-kopf { margin-bottom: 12px; }
.modus-karten { display: grid; gap: 10px; }
@media (min-width: 640px) { .modus-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
.modus-karte { position: relative; display: grid; grid-template-columns: 118px minmax(0, 1fr); align-items: center;
  gap: 6px 14px; margin: 0; padding: 10px; border-radius: 16px; border: 1px solid var(--line-stark);
  background: var(--surface-2); cursor: pointer; text-transform: none; letter-spacing: 0; color: var(--ink);
  transition: border-color .2s, background .2s, box-shadow .2s, transform .15s var(--ease); }
@media (min-width: 640px) { .modus-karte { grid-template-columns: minmax(0, 1fr); align-content: start; padding: 12px; } }
.modus-karte input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.modus-karte:has(input:checked) { border-color: color-mix(in srgb, var(--akzent) 65%, transparent);
  background: color-mix(in srgb, var(--akzent) 6%, var(--surface-2));
  box-shadow: 0 0 0 3px var(--akzent-weich), 0 10px 26px rgba(0, 0, 0, .22); }
.modus-karte:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--akzent-glow); }
.modus-karte:has(input:active) { transform: scale(.985); }
@media (hover: hover) and (pointer: fine) { .modus-karte:not(:has(input:checked)):hover { transform: translateY(-1px); border-color: var(--line-stark); background: var(--surface-3); } }
.modus-vorschau { display: block; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #0B1020;
  border: 1px solid rgba(140, 170, 215, .22); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35); }
.modus-vorschau svg { display: block; width: 100%; height: 100%; }
.modus-text { display: grid; gap: 2px; min-width: 0; }
.modus-text b { font-size: 15.5px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.modus-text .chip { font-size: 10.5px; padding: 1px 8px; }
.modus-text small { color: var(--ink-3); font-size: 12.5px; }
.modus-haken { position: absolute; top: 9px; right: 9px; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; background: var(--surface-3); color: transparent;
  border: 1px solid var(--line); transition: background .2s, color .2s, transform .2s var(--ease); }
.modus-haken svg { width: 14px; height: 14px; }
.modus-karte:has(input:checked) .modus-haken { background: var(--akzent); color: var(--akzent-ink);
  border-color: transparent; box-shadow: 0 4px 12px var(--akzent-glow); transform: scale(1.06); }
.modus-abschnitt .card-kopf .chip { flex: none; }
.ziffern-probe { display: flex; align-items: center; gap: 8px; min-height: 46px; flex-wrap: wrap; }
.zp-ziffern { display: inline-flex; gap: 3px; }
.zp-ziffern i { font: 700 17px/1 var(--mono); font-style: normal; width: 21px; height: 30px; display: grid;
  place-items: center; border-radius: 6px; background: var(--surface-3); color: var(--ink);
  position: relative; font-variant-numeric: tabular-nums; overflow: hidden; }
.zp-ziffern i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: var(--bg0); opacity: .65; }
.zp-prefix { font: 600 12px var(--sans); color: var(--ink-3); }
.zp-text { font-size: 12.5px; color: var(--ink-3); flex-basis: 100%; margin-left: 2px; }
@media (min-width: 900px) { .zp-text { flex-basis: auto; margin-left: 4px; } }
@media (prefers-reduced-motion: no-preference) {
  .modus-abschnitt:not([hidden]) { view-transition-name: modus-abschnitt; }
  .editor-links > *:nth-child(-n+3) { animation: kartenAn .5s var(--ease) backwards; }
  .editor-links > *:nth-child(2) { animation-delay: .05s; }
  .editor-links > *:nth-child(3) { animation-delay: .1s; }
}
@media (max-width: 639px) {
  .modus-karte { padding-right: 44px; }
  .modus-haken { top: 50%; translate: 0 -50%; }
}