/* Trikot-App JSG Hengstett – Liquid-Glass-Designsystem
   Einzige Style-Quelle der App. Regeln und Komponenten: DESIGN_SYSTEM.md.
   Grundregel (Referenz liquid-glass-ref, Apple „Adopting Liquid Glass“):
   – Glas nur auf der Funktionsebene: Kopfleiste, Tab-Leiste, Werkzeugleisten, Sheets, schwebende Bedienelemente.
   – Inhaltsebene ohne Glas: ruhige, gruppierte Flächen, damit der Inhalt im Vordergrund steht.
   – Konzentrische Rundungen (innen = außen − Abstand), Schaltflächen ohne eingebackene Effekte,
     Überschriften in normaler Schreibweise, Anpassung an Transparenz-, Kontrast- und Bewegungseinstellungen.
   Dunkelmodus nur im Genehmiger-Bereich (das Formular sitzt in der hellen Jimdo-Seite).
   Werte nur über die Tokens unten verwenden – keine neuen Farben, Größen oder Abstände in Regeln. */

:root {
  /* ---------- Farben ---------- */
  --accent: #ce0000;            /* Vereinsrot wie jsghengstett.com */
  --accent-press: #a80000;
  --accent-solid: #ce0000;      /* gefüllte Flächen mit weißer Schrift (im Dunkelmodus kräftiger) */
  --accent-tint: rgba(206, 0, 0, .1);
  --accent-tint-strong: rgba(206, 0, 0, .3);
  --on-accent: #ffffff;
  --on-accent-muted: rgba(255, 255, 255, .85);
  --ink: #1d1d1f;
  --muted: #6e6e73;
  --tertiary: #aeaeb2;
  --separator: rgba(60, 60, 67, .14);
  --fill: rgba(120, 120, 128, .12);      /* neutrale Füllung für Bordered-Buttons, Segmente */
  --fill-strong: rgba(120, 120, 128, .2);
  --selection: rgba(206, 0, 0, .18);
  --scrim: rgba(0, 0, 0, .25);           /* Abdunklung hinter Sheets */

  /* Status: Grundfarbe · Tönung (Fläche) · Schrift auf Tönung */
  --good: #1f9d45; --good-tint: rgba(31, 157, 69, .14); --good-ink: #167a35;
  --warn: #d97a00; --warn-tint: rgba(217, 122, 0, .14); --warn-ink: #a65d00;
  --pending-tint: rgba(255, 159, 10, .18); --pending-strong: rgba(255, 159, 10, .45);
  --err: #d70015;  --err-tint: rgba(215, 0, 21, .1);
  --info: #0a84ff; --info-tint: rgba(10, 132, 255, .12); --info-ink: #0060c0;
  --extra-tint: rgba(88, 86, 214, .14); --extra-ink: #4b48b8;   /* Zusatzausrüstung */

  /* ---------- Inhaltsebene (kein Glas) ---------- */
  --bg: #f2f2f7;                 /* gruppierter Hintergrund */
  --surface: #ffffff;            /* Abschnitte, Karten */
  --surface-2: #f2f2f7;          /* verschachtelte Flächen in Abschnitten */
  --field: #ffffff;
  --media-bg: #ffffff;           /* Hintergrund hinter Produktfotos */
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .04), 0 4px 16px rgba(0, 0, 0, .04);
  --shadow-raise: 0 10px 30px rgba(0, 0, 0, .08);
  --bg-glow: radial-gradient(80vmax 50vmax at 0% -20%, rgba(255, 59, 48, .16), transparent 60%),
             radial-gradient(70vmax 50vmax at 110% 0%, rgba(206, 0, 0, .1), transparent 60%);

  /* ---------- Funktionsebene (Liquid Glass) ---------- */
  --glass: rgba(255, 255, 255, .62);
  --glass-thick: rgba(255, 255, 255, .78);   /* Sheets: dichter, weil Text darauf liegt */
  --glass-edge: rgba(255, 255, 255, .72);
  --glass-ring: 0 0 0 .5px rgba(0, 0, 0, .08);   /* Haarlinie: klare Kante auch auf hellem Grund (weiße Kante allein verschwimmt) */
  --glass-shadow: 0 10px 24px -8px rgba(0, 0, 0, .16), 0 1px 2px rgba(0, 0, 0, .06);   /* Schatten nach unten, kein Schleier über der Leiste */
  --blur: blur(24px) saturate(180%);

  /* ---------- Typografie (Systemschrift, Stufen nach Apple-Textstilen) ---------- */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --text-2xs: .68rem;   /* Tab-Beschriftung */
  --text-xs: .76rem;    /* Caption: Feldbezeichner, Badges, Rasterzellen */
  --text-sm: .86rem;    /* Footnote: Hinweise, Untertitel */
  --text-md: .92rem;    /* Subheadline: Navigation, Labels, Nebentext */
  --text-base: 1rem;    /* Body in Feldern und Schaltflächen */
  --text-lg: 1.08rem;   /* Headline: Abschnittstitel, Lead */
  --text-xl: 1.3rem;    /* Title 3: h2, Nummern, Summen */
  --text-2xl: 1.75rem;  /* Title 2: große Zahlen, h1 am Handy */
  --text-3xl: 2.1rem;   /* Large Title */
  --leading: 1.47;
  --leading-tight: 1.15;
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-heavy: 800;
  --tracking-tight: -.02em;

  /* ---------- Abstände (Raster in px) ---------- */
  --s-2: 2px; --s-4: 4px; --s-6: 6px; --s-8: 8px; --s-10: 10px; --s-12: 12px; --s-14: 14px;
  --s-16: 16px; --s-18: 18px; --s-20: 20px; --s-24: 24px; --s-28: 28px; --s-32: 32px; --s-34: 34px; --s-40: 40px; --s-48: 48px;
  --pad-card: 18px;

  /* ---------- Konzentrische Radien ---------- */
  --r-sheet: 34px;
  --r-card: 26px;
  --r-section: 20px;             /* Abschnitt in einer Karte: --r-card − 6px */
  --r-tile: 22px;                /* eigenständige Kacheln/Zeilen im Genehmiger-Bereich */
  --r-bubble: 18px;              /* Sprechblasen; Abschnitt am Handy */
  --r-nested: 14px;              /* Flächen im Abschnitt */
  --r-control: 12px;             /* Eingabefelder, Zellen */
  --r-inner: 8px;                /* Bild in verschachtelter Fläche: --r-nested − 6px */
  --r-tail: 6px;                 /* Sprechblasen-Ecke, Legendenfelder */
  --r-pill: 999px;

  /* ---------- Bedienelemente ---------- */
  --control-h: 44px;             /* Mindest-Trefferfläche */
  --control-h-sm: 40px;
  --control-h-lg: 50px;
  --control-h-xl: 54px;
  --icon-btn: 36px;
  --icon: 19px;
  --icon-lg: 23px;
  --focus-ring: 0 0 0 4px rgba(206, 0, 0, .22);
  --error-ring: 0 0 0 4px var(--err-tint);
  --disabled-opacity: .45;

  /* ---------- Bewegung ---------- */
  --dur-fast: .15s;
  --dur-base: .25s;
  --dur-slow: .3s;
  --ease: ease;
  --ease-spring: cubic-bezier(.2, .8, .2, 1);
  --press-scale: .97;

  /* ---------- Breiten ---------- */
  --w-page: 1120px;
  --w-form: 820px;
  --w-narrow: 440px;
  --w-sheet: 400px;
  --w-tabbar: 440px;
  --w-tabbar-min: 260px;
  --w-prose: 68ch;
  /* Kopfleiste: Abstand zum oberen Rand und Höhe (Grundlage für Kantenverlauf und Developer-Reiter) */
  --topbar-top: 12px;
  --topbar-h: 52px;
  /* Umbrüche (in Media Queries nicht als Variable nutzbar): 1060 · 900 · 720 (Handy-Navigation) · 560 (einspaltig) */

  font-family: var(--font);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; line-height: var(--leading); font-size: 17px; min-height: 100vh; }
main { max-width: var(--w-page); margin: 0 auto; padding: var(--s-20) var(--s-16) var(--s-48); }
/* Platz für die feste Kopfleiste; Sprungziele (#…) landen unter ihr statt dahinter */
body.admin main { padding-top: calc(var(--topbar-top) + var(--topbar-h) + var(--s-20)); }
html:has(body.admin) { scroll-padding-top: calc(var(--topbar-top) + var(--topbar-h) + var(--s-12)); }
h1 { font-size: var(--text-3xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); font-weight: var(--weight-bold); margin: 0 0 var(--s-6); }
h2 { font-size: var(--text-xl); letter-spacing: var(--tracking-tight); font-weight: var(--weight-bold); margin: 0 0 var(--s-6); }
a { color: var(--accent); text-underline-offset: 2px; }
[hidden] { display: none !important; }
::selection { background: var(--selection); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lead, .sub, .hint { color: var(--muted); }
.lead { font-size: var(--text-lg); margin: 0 0 var(--s-20); }
.sub { font-size: var(--text-sm); display: block; }
.prose p { max-width: var(--w-prose); }

/* ---------- Hintergrund ---------- */
body.admin { background: var(--bg-glow), var(--bg); background-attachment: fixed; }
body.public { background: transparent; }

/* =====================================================================
   Funktionsebene – Liquid Glass
   ===================================================================== */
.topbar, .tabbar, .filters, .actionbar, dialog.sheet {
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-ring), var(--glass-shadow);   /* keine zusätzliche Lichtkante oben: verschwamm am iPhone mit dem Rand */
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
}

/* Kopfleiste (schwebende Kapsel) – fest am oberen Rand, bewegt sich beim Scrollen und Nachfedern nicht mit */
.topbar {
  position: fixed; top: var(--topbar-top); left: 0; right: 0; z-index: 20; min-height: var(--topbar-h);
  display: flex; align-items: center; gap: var(--s-12); flex-wrap: nowrap;
  max-width: var(--w-page); width: calc(100% - 2 * var(--s-16)); margin: 0 auto; padding: var(--s-6) var(--s-8) var(--s-6) var(--s-10);
  border-radius: var(--r-pill);
}
.brand { flex: none; display: inline-flex; align-items: center; gap: var(--s-10); font-weight: var(--weight-bold); color: var(--ink); text-decoration: none; }
.brand-logo { display: block; width: 38px; height: 38px; object-fit: contain; }
.topbar nav { display: flex; min-width: 0; overflow-x: auto; scrollbar-width: none; gap: var(--s-2); margin-left: var(--s-6); }
.topbar nav a {
  flex: none; display: inline-flex; align-items: center; gap: var(--s-6); padding: var(--s-8) var(--s-14); border-radius: var(--r-pill);
  color: var(--ink); text-decoration: none; font-size: var(--text-md); font-weight: var(--weight-medium);
  transition: background var(--dur-fast) var(--ease);
}
.topbar nav a:hover { background: var(--fill); }
.topbar nav a[aria-current="page"] { background: var(--accent-tint); color: var(--accent); font-weight: var(--weight-semibold); }
.ico { width: var(--icon); height: var(--icon); flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.who { flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: var(--s-8); font-size: var(--text-sm); color: var(--muted); }
.avatar { display: grid; place-items: center; width: var(--icon-btn); height: var(--icon-btn); border-radius: 50%; font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--accent); background: var(--accent-tint); }
.tabbar { display: none; }

/* Kantenverlauf: Inhalt, der unter die Kopfleiste scrollt, wird ausgeblendet (Lesbarkeit) */
body.admin::before {
  content: ""; position: fixed; inset: 0 0 auto 0; height: calc(var(--topbar-top) + var(--topbar-h) + 20px); z-index: 15; pointer-events: none;
  background: linear-gradient(var(--bg) 25%, transparent);
  -webkit-mask-image: linear-gradient(#000 40%, transparent); mask-image: linear-gradient(#000 40%, transparent);
}

/* Werkzeugleiste (Filter) */
.filters { display: flex; flex-wrap: wrap; gap: var(--s-8); align-items: center; margin-bottom: var(--s-18); padding: var(--s-8); border-radius: var(--r-card); }
.card .filters { background: none; border: 0; box-shadow: none; padding: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.filters select, .filters input { width: auto; margin: 0; min-height: var(--control-h-sm); border-radius: var(--r-pill); padding-top: var(--s-8); padding-bottom: var(--s-8); background-color: var(--surface); }
.filters input[type=search] { flex: 1 1 200px; }
.filters .btn { min-height: var(--control-h-sm); }

/* Schwebende Bestell-Leiste mit Gesamtpreis */
.actionbar {
  position: sticky; bottom: max(var(--s-12), env(safe-area-inset-bottom)); z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-14);
  margin: var(--s-20) 0 var(--s-4); padding: var(--s-8) var(--s-8) var(--s-8) var(--s-24); border-radius: var(--r-pill);
}
.actionbar-sum { display: flex; flex-direction: column; line-height: 1.2; font-size: var(--text-sm); color: var(--muted); }
.actionbar-sum output { font-size: var(--text-xl); font-weight: var(--weight-bold); color: var(--ink); letter-spacing: var(--tracking-tight); }
.actionbar .btn { min-height: var(--control-h-lg); padding: 0 var(--s-28); font-size: var(--text-base); }

/* Sheet (Freigabe im Nummernraster) – schwebt, auf dem Handy mit Abstand zum Rand */
dialog.sheet {
  width: min(var(--w-sheet), calc(100% - 2 * var(--s-12))); padding: var(--s-28) var(--s-20) var(--s-20); border-radius: var(--r-sheet); color: var(--ink);
  background: var(--glass-thick);
}
dialog.sheet::backdrop { background: var(--scrim); }
dialog.sheet .cell-pop { position: static; width: auto; padding: 0; background: none; border: 0; box-shadow: none; font-size: var(--text-base); }
dialog.sheet .cell-pop strong { font-size: var(--text-xl); }
dialog.sheet .cell-pop .btn { min-height: var(--control-h-lg); margin-top: var(--s-10); }
.sheet-nr { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: var(--s-14); border-radius: var(--r-section); font-size: var(--text-2xl); font-weight: var(--weight-heavy); color: var(--on-accent); background: var(--accent-solid); }

/* Symbol-Schaltfläche (rund, nur Symbol): Abmelden, Sheet schließen */
.icon-btn {
  display: inline-grid; place-items: center; flex: none; width: var(--icon-btn); height: var(--icon-btn); padding: 0;
  border: 0; border-radius: 50%; cursor: pointer; text-decoration: none;
  font: inherit; font-size: var(--text-xl); line-height: 1; color: var(--muted); background: none;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.icon-btn:hover { background: var(--fill); color: var(--accent); }
.icon-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.icon-btn.filled { background: var(--fill); }
.icon-btn[aria-current="page"] { background: var(--accent-tint); color: var(--accent); }   /* aktive Seite, wie Navigation */
.sheet-close { position: absolute; top: var(--s-16); right: var(--s-16); }

/* =====================================================================
   Inhaltsebene – ruhige, gruppierte Flächen (kein Glas)
   ===================================================================== */
/* Gemeinsame Fläche: Karte, Kacheln, Bestellzeilen, Hinweise */
.card, .counter, .order, .push-card, .empty, .flash { background: var(--surface); box-shadow: var(--shadow-card); }
.card { border-radius: var(--r-card); padding: var(--s-24); margin-bottom: var(--s-18); }
.card > :last-child, .card > :last-child > :last-child { margin-bottom: 0; }   /* Innenabstand der Karte gilt oben und unten gleich – kein Zusatzabstand vom letzten Element */
.card.narrow { max-width: var(--w-narrow); margin: 9vh auto; text-align: center; padding: var(--s-34) var(--s-28) var(--s-28); }
.card.narrow form { text-align: left; }
.card.narrow .btn { width: 100%; justify-content: center; margin-top: var(--s-6); }
.card.narrow::before { content: ""; display: block; width: 84px; height: 84px; margin: 0 auto var(--s-18); background: url("/assets/logo.png") center / contain no-repeat; }

/* Formularelemente */
fieldset { border: 0; padding: 0; margin: 0 0 var(--s-12); min-width: 0; }
legend { font-weight: var(--weight-semibold); margin-bottom: var(--s-6); }
label { display: block; font-size: var(--text-md); font-weight: var(--weight-medium); margin-bottom: var(--s-14); color: var(--ink); }
input, select, textarea {
  display: block; width: 100%; margin-top: var(--s-6); padding: var(--s-12) var(--s-14); font: inherit; font-size: var(--text-base); font-weight: var(--weight-regular); color: var(--ink);
  background: var(--field); border: 1px solid var(--separator); border-radius: var(--r-control);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  -webkit-appearance: none; appearance: none;
}
select {
  padding-right: 38px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 52%, calc(100% - 14px) 52%; background-size: 6px 6px; background-repeat: no-repeat;
}
input::placeholder, textarea::placeholder { color: var(--tertiary); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
input:disabled, select:disabled, textarea:disabled { opacity: var(--disabled-opacity); cursor: not-allowed; }
input[type=checkbox], input[type=radio] { -webkit-appearance: auto; appearance: auto; width: 22px; height: 22px; flex: none; padding: 0; margin: 1px 0 0; accent-color: var(--accent); box-shadow: none; }
input[type=file] { padding: var(--s-10); }
[aria-invalid="true"] { border-color: var(--err) !important; box-shadow: var(--error-ring) !important; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s-14); }   /* untereinander trennt nur der Label-Abstand (--s-14), wie bei Feldern ohne .row */
.row.three { grid-template-columns: 1fr 1fr 1fr; }
.check { display: flex; gap: var(--s-12); align-items: flex-start; font-weight: var(--weight-regular); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hint.good { color: var(--good); } .hint.warn { color: var(--warn); }
.err-text { color: var(--err); font-size: var(--text-sm); font-weight: var(--weight-medium); display: block; margin-top: var(--s-6); }
.errlist { color: var(--err); font-size: var(--text-md); }

/* Schaltflächen: prominent (.primary, gefüllt) · bordered (Standard, neutral getönt) · plain (.link) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-8); min-height: var(--control-h); padding: 0 var(--s-18);
  border: 0; border-radius: var(--r-pill); background: var(--fill); color: var(--accent);
  font: inherit; font-weight: var(--weight-semibold); font-size: var(--text-base); cursor: pointer; text-decoration: none; list-style: none; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), transform .1s var(--ease);
}
.btn:hover { background: var(--fill-strong); }
.btn:active { transform: scale(var(--press-scale)); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: not-allowed; transform: none; }
.btn.primary { background: var(--accent-solid); color: var(--on-accent); }
.btn.primary:hover { background: var(--accent-press); }
.btn.primary:disabled:hover { background: var(--accent-solid); }
.btn.big { width: 100%; min-height: var(--control-h-xl); font-size: var(--text-lg); }
.btn.link { background: none; color: var(--muted); font-weight: var(--weight-medium); padding: 0 var(--s-8); }
.btn.link:hover { background: none; color: var(--ink); }
.btn.danger:hover { color: var(--err); }

/* Meldungen */
.flash { position: relative; padding: var(--s-12) var(--s-16) var(--s-12) 44px; border-radius: var(--r-nested); margin: 0 0 var(--s-16); font-weight: var(--weight-medium); }
.flash::before { content: ""; position: absolute; left: var(--s-16); top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; }
.flash.ok::before { background: var(--good); } .flash.warn::before { background: var(--warn); } .flash.err::before { background: var(--err); }
.card .flash, .card .push-card { background: var(--surface-2); box-shadow: none; }

/* =====================================================================
   Bestellformular, Startseite, Antwortseite (öffentlich, eingebettet)
   ===================================================================== */
body.public main { max-width: var(--w-form); padding: var(--s-12); }
body.public .card { background: var(--bg); box-shadow: none; border: 1px solid var(--separator); }
.step { background: var(--surface); border-radius: var(--r-section); padding: var(--s-6) var(--pad-card) var(--s-10); margin: 0 0 var(--s-16); }
.step legend { float: left; width: 100%; display: flex; align-items: center; gap: var(--s-12); padding: var(--s-16) 0 var(--s-12); margin: 0; font-size: var(--text-lg); font-weight: var(--weight-bold); }
.step legend + * { clear: both; }
.step-nr { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; flex: none; color: var(--on-accent); font-size: var(--text-md); font-weight: var(--weight-bold); background: var(--accent-solid); }
.notice { background: var(--surface-2); border-radius: var(--r-nested); padding: var(--s-14) var(--s-16); margin-bottom: var(--s-14); font-size: var(--text-md); }
.ranges { margin: 0 0 var(--s-12); font-size: var(--text-md); }
.choice { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-10); margin-bottom: var(--s-16); }

/* Auswahlfläche (Radio, Produkt): neutral, ausgewählt mit Akzent-Rand und -Tönung */
.radio, .product { border-radius: var(--r-nested); background: var(--surface-2); border: 2px solid transparent; transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.radio:has(input:checked), .product.chosen { background: var(--accent-tint); border-color: var(--accent); }
.radio { display: flex; gap: var(--s-12); align-items: flex-start; margin: 0; cursor: pointer; font-weight: var(--weight-regular); padding: var(--s-14) var(--s-16); }
.products { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-12); }
.product { margin: 0; display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-10) var(--s-10) var(--s-12); }
.product img { width: 100%; height: auto; aspect-ratio: 900 / 475; object-fit: contain; background: var(--media-bg); border-radius: var(--r-inner); margin-bottom: var(--s-10); }
.product-name { font-weight: var(--weight-bold); font-size: var(--text-base); }
.product select { margin-top: var(--s-10); }
.druck { color: var(--accent); font-size: var(--text-sm); }
.total { display: flex; justify-content: space-between; align-items: center; margin: var(--s-14) 0 var(--s-6); padding: var(--s-12) var(--s-16); font-size: var(--text-lg); font-weight: var(--weight-semibold); border-radius: var(--r-nested); background: var(--surface-2); }
.total output { color: var(--accent); font-size: var(--text-xl); font-weight: var(--weight-heavy); letter-spacing: var(--tracking-tight); }
.pay { display: flex; align-items: center; gap: var(--s-10); margin: 0 0 var(--s-8); padding: var(--s-8) var(--s-4); font-size: var(--text-md); color: var(--muted); }
.pay::before { content: "€"; display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; font-weight: var(--weight-bold); color: var(--good); background: var(--good-tint); }
.plz-ort { grid-template-columns: 1fr 2fr; }
#order-form > .check { padding: var(--s-4) var(--s-6); }
.back { display: block; width: fit-content; margin-bottom: var(--s-10); font-size: var(--text-md); color: var(--accent); text-decoration: none; }
.thanks { text-align: center; padding: var(--s-40) var(--s-24); }
.thanks::before { content: "✓"; display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto var(--s-18); border-radius: 50%; color: var(--on-accent); font-size: var(--text-3xl); font-weight: var(--weight-bold); background: var(--good); }

/* Startseite */
.choose { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-14); margin: var(--s-6) 0 var(--s-14); }
.choose-card { display: flex; flex-direction: column; gap: var(--s-6); padding: var(--s-12) var(--s-12) var(--s-16); color: var(--ink); text-decoration: none; border-radius: var(--r-section); background: var(--surface); transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); }
.choose-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-raise); }
.choose-card img { width: 100%; height: auto; aspect-ratio: 900 / 475; object-fit: contain; background: var(--media-bg); border-radius: var(--r-nested); margin-bottom: var(--s-8); }
.choose-title { font-size: var(--text-xl); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); }
.choose-card .sub { flex: 1; font-size: var(--text-md); }
.choose-card .btn { margin-top: var(--s-10); }
.foot { text-align: center; font-size: var(--text-sm); padding: var(--s-4) 0 var(--s-16); }
.foot a { color: var(--muted); }

/* =====================================================================
   Genehmiger-Bereich (Inhaltsebene)
   ===================================================================== */
.page-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-12); flex-wrap: wrap; margin: var(--s-18) var(--s-4) var(--s-16); }
.page-head h1 { margin: 0; }

.push-card { display: flex; align-items: center; gap: var(--s-14); flex-wrap: wrap; padding: var(--s-14) var(--s-16); margin: 0 0 var(--s-16); border-radius: var(--r-tile); }
.push-icon { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; color: var(--accent); background: var(--accent-tint); }
.push-icon .ico { width: var(--icon-lg); height: var(--icon-lg); }
.push-card.on .push-icon { color: var(--good); background: var(--good-tint); }
.push-text { flex: 1 1 220px; display: flex; flex-direction: column; }
.push-actions { display: flex; gap: var(--s-6); align-items: center; }
.counters { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-12); margin: 0 0 var(--s-16); }
.counter { display: block; padding: var(--s-16) var(--s-18); color: var(--ink); text-decoration: none; border-radius: var(--r-tile); transition: transform var(--dur-fast) var(--ease); }
.counter:hover { transform: translateY(-1px); }
.counter strong { display: block; font-size: var(--text-3xl); line-height: var(--leading-tight); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); }
.counter span { color: var(--muted); font-size: var(--text-md); font-weight: var(--weight-medium); }
.counter.active { background: var(--accent-solid); color: var(--on-accent); }
.counter.active span { color: var(--on-accent-muted); }

.orders { display: flex; flex-direction: column; gap: var(--s-12); }
.order { display: grid; grid-template-columns: 2.3fr .7fr .9fr .8fr 1.4fr 1.8fr; gap: var(--s-12) var(--s-16); align-items: center; padding: var(--s-18) var(--s-20); border-radius: var(--r-tile); }
.order.flash-row { box-shadow: 0 0 0 3px var(--accent), var(--shadow-card); }
.who-col strong { font-size: var(--text-lg); }
.order .lbl, .dialog .lbl { display: block; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--muted); margin-bottom: var(--s-2); }
.nr-col, .jg-col { font-weight: var(--weight-semibold); }
.final-col strong { display: inline-grid; place-items: center; min-width: 56px; height: var(--control-h); padding: 0 var(--s-10); border-radius: var(--r-control); font-size: var(--text-xl); background: var(--surface-2); }
.order .nr-input { width: 78px; height: 46px; margin: 0; padding: var(--s-6); font-size: var(--text-xl); font-weight: var(--weight-bold); text-align: center; background: var(--surface-2); border-color: transparent; }
.check-col { display: flex; gap: var(--s-10); align-items: flex-start; font-size: var(--text-md); font-weight: var(--weight-medium); padding: var(--s-8) var(--s-12); border-radius: var(--r-control); background: var(--surface-2); }
.check-col:empty { display: none; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--tertiary); flex: none; margin-top: var(--s-6); }
.dot.good { background: var(--good); } .dot.warn { background: var(--warn); } .dot.info { background: var(--info); }
.act-col { grid-column: -2; display: flex; flex-wrap: wrap; gap: var(--s-8); align-items: center; justify-content: flex-end; }   /* immer letzte Spalte, auch ohne Prüfspalte */
.ask summary::-webkit-details-marker { display: none; }
.ask[open] { flex-basis: 100%; }
.ask textarea { margin: var(--s-10) 0; }
.dialog { grid-column: 1 / -1; display: grid; gap: var(--s-8); }
.dialog p { margin: 0; padding: var(--s-10) var(--s-14); border-radius: var(--r-bubble); font-size: var(--text-md); max-width: 640px; }
.dialog .q { background: var(--surface-2); border-bottom-left-radius: var(--r-tail); }
.dialog .a { background: var(--info-tint); border-bottom-right-radius: var(--r-tail); justify-self: end; }
.dialog .wait { color: var(--muted); font-style: italic; padding: var(--s-2) var(--s-4); }
.more { grid-column: 1 / -1; font-size: var(--text-md); color: var(--muted); border-top: 1px solid var(--separator); padding-top: var(--s-10); }
.more summary { cursor: pointer; font-weight: var(--weight-medium); }
.more p { margin: var(--s-8) 0 0; }

/* Status-Badge: Tönung + Schriftfarbe je Status */
.badge { display: inline-flex; align-items: center; gap: var(--s-4); white-space: nowrap; font-size: var(--text-xs); font-weight: var(--weight-semibold); padding: var(--s-2) var(--s-8); border-radius: var(--r-pill); background: var(--fill); color: var(--muted); }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.s-eingegangen, .badge.s-antwort { background: var(--info-tint); color: var(--info-ink); }
.badge.s-rueckfrage, .badge.s-genehmigt { background: var(--warn-tint); color: var(--warn-ink); }
.badge.s-bestellt { background: var(--accent-tint); color: var(--accent); }
.badge.s-geliefert { background: var(--good-tint); color: var(--good-ink); }
.badge.s-zusatz { background: var(--extra-tint); color: var(--extra-ink); }
.badge.s-freigegeben { background: var(--fill); color: var(--muted); }
.empty { color: var(--muted); text-align: center; padding: var(--s-48) var(--s-20); border-radius: var(--r-tile); box-shadow: none; }

/* Nummernraster */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: var(--s-8); }
.cell { border-radius: var(--r-control); padding: var(--s-8); min-height: 62px; font-size: var(--text-xs); color: var(--muted); background: var(--surface-2); }
.cell b { display: block; font-size: var(--text-lg); color: var(--ink); letter-spacing: var(--tracking-tight); }
.cell span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* Name bleibt in der Kachel, lange Namen mit … */
.cell.taken { background: var(--accent-tint); color: var(--accent-press); }
.cell.pending { background: var(--pending-tint); }
details.cell { position: relative; padding: 0; }
details.cell summary { list-style: none; cursor: pointer; padding: var(--s-8); min-height: 62px; border-radius: inherit; }
details.cell summary::-webkit-details-marker { display: none; }
details.cell[open] { z-index: 5; box-shadow: 0 0 0 2px var(--accent); }
.cell-pop { position: absolute; top: calc(100% + var(--s-6)); left: 0; z-index: 6; width: 230px; padding: var(--s-14); display: grid; gap: var(--s-8); color: var(--ink); font-size: var(--text-sm); border-radius: var(--r-nested); background: var(--surface); box-shadow: var(--glass-shadow); }
.cell-pop .btn { min-height: var(--control-h-sm); font-size: var(--text-md); }
.legend { font-size: var(--text-sm); color: var(--muted); display: flex; gap: var(--s-6); align-items: center; flex-wrap: wrap; }
.cell-demo { display: inline-block; width: 14px; height: 14px; border-radius: var(--r-tail); margin-left: var(--s-10); background: var(--surface-2); border: 1px solid var(--separator); }
.cell-demo.taken { background: var(--accent-tint-strong); border-color: transparent; }
.cell-demo.pending { background: var(--pending-strong); border-color: transparent; }

/* Protokoll */
.table-wrap { overflow-x: auto; border-radius: var(--r-nested); background: var(--surface-2); margin-bottom: var(--s-14); }
table.log { border-collapse: collapse; width: 100%; font-size: var(--text-md); }
table.log th { text-align: left; font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--muted); padding: var(--s-12) var(--s-12) var(--s-8); }
table.log td { text-align: left; padding: var(--s-10) var(--s-12); border-top: 1px solid var(--separator); vertical-align: top; overflow-wrap: anywhere; }   /* lange Wörter (z. B. E-Mail-Adressen) umbrechen statt die Tabelle zu verbreitern */
table.log:has(.btn) td { vertical-align: middle; }   /* Tabellen mit Schaltflächen: alle Zeilen mittig, Text und Knopf auf einer Höhe */
table.log .schmal { width: 1%; }   /* Spalte nur so breit wie ihr breitestes Element (Badge, Schaltfläche) – der Rest bleibt für Namen */
.druck-offen { display: inline-flex; vertical-align: -.2em; margin-left: var(--s-2); color: var(--accent); }   /* Ausweis noch nicht gedruckt (am Namen) */
table.log .schmal .druck-offen { display: flex; width: fit-content; margin: var(--s-6) 0 0; }   /* Trainerliste: in der Status-Spalte immer direkt unter „Frei“/„Gesperrt“ */
/* Als Link (öffnet den Ausweis direkt zum Drucken): Trefferfläche --control-h, ohne die Lage des Symbols zu verändern */
table.log .schmal a.druck-offen { padding: calc((var(--control-h) - var(--icon)) / 2); margin: calc(var(--s-6) - (var(--control-h) - var(--icon)) / 2) 0 calc((var(--icon) - var(--control-h)) / 2) calc((var(--icon) - var(--control-h)) / 2); border-radius: var(--r-pill); }
table.log .schmal a.druck-offen:hover { background: var(--accent-tint); }

/* Developer-Modus: grüner Rahmen um den ganzen Bildschirm + Reiter oben, nur in der Testversion (page_header) */
.dev-frame { position: fixed; inset: 0; z-index: 1000; pointer-events: none; border: 4px solid var(--good); }
.dev-pill {
  position: fixed; top: calc(var(--topbar-top) + var(--topbar-h) + var(--s-6)); left: 50%; transform: translateX(-50%); z-index: 1001;
  padding: var(--s-2) var(--s-12); border-radius: var(--r-pill);
  font-size: var(--text-2xs); font-weight: var(--weight-bold); line-height: 1.2; white-space: nowrap;
  color: var(--on-accent); background: var(--good); text-decoration: none;
}
.dev-pill:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Styleguide (interne Referenzseite) */
.sg-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s-10); }
.sg-swatch { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-10); border-radius: var(--r-nested); background: var(--surface-2); font-size: var(--text-xs); color: var(--muted); }
.sg-swatch i { display: block; height: 44px; margin-bottom: var(--s-6); border-radius: var(--r-inner); border: 1px solid var(--separator); }
.sg-swatch b { color: var(--ink); font-size: var(--text-sm); }
.sg-row { display: flex; flex-wrap: wrap; gap: var(--s-10); align-items: center; margin-bottom: var(--s-14); }
.sg-type > * { margin: 0 0 var(--s-8); }
.sg-glass { position: relative; padding: var(--s-24); border-radius: var(--r-card); background: var(--bg-glow), var(--bg); }
/* Farbfelder des Styleguides (keine Inline-Styles wegen CSP) */
.sg-c-accent { background: var(--accent); } .sg-c-accent-tint { background: var(--accent-tint); } .sg-c-ink { background: var(--ink); }
.sg-c-muted { background: var(--muted); } .sg-c-tertiary { background: var(--tertiary); } .sg-c-separator { background: var(--separator); }
.sg-c-fill { background: var(--fill); } .sg-c-bg { background: var(--bg); } .sg-c-surface { background: var(--surface); } .sg-c-surface-2 { background: var(--surface-2); }
.sg-c-good { background: var(--good); } .sg-c-warn { background: var(--warn); } .sg-c-err { background: var(--err); } .sg-c-info { background: var(--info); }
.sg-c-extra { background: var(--extra-tint); } .sg-c-glass { background: var(--glass); }

/* =====================================================================
   Trainerausweis (Druckvorlage, /intern/ausweis.php) – freigegebene Erweiterung
   Kreditkartenmaß ISO/IEC 7810 ID-1 (85,6 × 53,98 mm), 10 Stück pro A4-Blatt (2 × 5), Raster waagrecht mittig.
   Gedrucktes ist immer hell wie die Mails: die Karte setzt die hellen Werte der Tokens lokal (Spiegel von :root),
   damit der Dunkelmodus des Genehmiger-Bereichs nicht auf Papier landet. Alle Maße in mm sind komponenteneigen.
   ===================================================================== */
.ausweis-karte {
  --accent: #ce0000; --on-accent: #ffffff; --on-accent-muted: rgba(255, 255, 255, .85);
  --ink: #1d1d1f; --muted: #6e6e73; --tertiary: #aeaeb2; --surface: #ffffff;
  position: relative; width: 85.6mm; height: 53.98mm; overflow: hidden; flex: none;
  background: var(--surface); color: var(--ink); font-family: var(--font); line-height: 1.3;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.ausweis-kopf { position: absolute; inset: 0 0 auto 0; height: 17mm; display: flex; align-items: center; gap: 3.5mm; padding: 0 4.5mm; background: var(--accent); color: var(--on-accent); }
.ausweis-logo { flex: none; width: 12mm; height: 12mm; padding: .8mm; border-radius: 3mm; background: var(--surface); }
.ausweis-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ausweis-titel, .ausweis-saison { display: flex; flex-direction: column; gap: .4mm; }
.ausweis-titel b { font-size: 13pt; font-weight: var(--weight-bold); }
.ausweis-saison { margin-left: auto; text-align: right; }
.ausweis-saison b { font-size: 11pt; font-weight: var(--weight-bold); }
.ausweis-klein { font-size: 7pt; color: var(--on-accent-muted); }
.ausweis-feld { position: absolute; left: 4.5mm; right: 4.5mm; }
.ausweis-feld:nth-of-type(2) { top: 20mm; }
.ausweis-feld:nth-of-type(3) { top: 31mm; }
.ausweis-feld.ausweis-nr { top: 42.5mm; right: auto; width: 30mm; }
.ausweis-wert { height: 6.5mm; line-height: 6.5mm; border-bottom: .25mm solid var(--tertiary); font-size: 12pt; font-weight: var(--weight-bold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ausweis-nr .ausweis-wert { height: 5mm; line-height: 5mm; font-size: 9pt; font-weight: var(--weight-semibold); }
.ausweis-bez { display: block; margin-top: .7mm; font-size: 6.5pt; color: var(--muted); }
.ausweis-rueckseite { padding: 4.5mm 5mm; font-size: 8pt; line-height: 1.38; }
.ausweis-rueckseite p { margin: 0 0 1.2mm; }
.ausweis-rueckseite .ausweis-ueber { font-size: 8.5pt; font-weight: var(--weight-bold); color: var(--accent); }
.ausweis-rueckseite .ausweis-zusatz { font-weight: var(--weight-semibold); }
.ausweis-stempel { position: absolute; right: 5mm; bottom: 5mm; width: 26mm; height: 17mm; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 1mm; border: .25mm dashed var(--tertiary); border-radius: 2mm; }
.ausweis-stempel .ausweis-bez { margin: 0; }

/* Vorschau am Bildschirm: Originalgröße, am schmalen Handy leicht verkleinert */
.ausweis-vorschau { display: flex; flex-wrap: wrap; gap: var(--s-14); }
.ausweis-vorschau .ausweis-karte { border-radius: var(--r-inner); box-shadow: 0 0 0 1px var(--separator); }
@media (max-width: 400px) { .ausweis-vorschau .ausweis-karte { zoom: .9; } }

/* Druckbögen: nur im Druck. Rückseite gespiegelt (direction: rtl), damit sie beim Wenden an der langen Kante passt. */
.ausweis-boegen { display: none; }
.ausweis-bogen {
  position: relative; width: 210mm; height: 297mm; padding-top: 13.55mm;
  display: grid; grid-template-columns: repeat(2, 85.6mm); grid-template-rows: repeat(5, 53.98mm); justify-content: center; align-content: start;
  background: #fff; break-after: page;
}
.ausweis-bogen:last-child { break-after: auto; }
.ausweis-bogen.hinten { direction: rtl; }
.ausweis-bogen.hinten > * { direction: ltr; }
.ausweis-bogen.vorne .ausweis-karte { outline: .1mm solid #d1d1d6; outline-offset: -.05mm; }
.ausweis-bogen-info { position: absolute; top: 7mm; left: 28mm; font: 7pt var(--font); color: #aeaeb2; }
/* Schnittmarken außerhalb des Rasters: Spalten bei 19,4 / 105 / 190,6 mm, Reihen bei 13,55 + n × 53,98 mm */
.ausweis-bogen.vorne::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
  background:
    linear-gradient(#000, #000) 19.3mm 7mm / .2mm 5mm no-repeat, linear-gradient(#000, #000) 104.9mm 7mm / .2mm 5mm no-repeat, linear-gradient(#000, #000) 190.5mm 7mm / .2mm 5mm no-repeat,
    linear-gradient(#000, #000) 19.3mm 285mm / .2mm 5mm no-repeat, linear-gradient(#000, #000) 104.9mm 285mm / .2mm 5mm no-repeat, linear-gradient(#000, #000) 190.5mm 285mm / .2mm 5mm no-repeat,
    linear-gradient(#000, #000) 12.9mm 13.45mm / 5mm .2mm no-repeat, linear-gradient(#000, #000) 192.1mm 13.45mm / 5mm .2mm no-repeat,
    linear-gradient(#000, #000) 12.9mm 67.43mm / 5mm .2mm no-repeat, linear-gradient(#000, #000) 192.1mm 67.43mm / 5mm .2mm no-repeat,
    linear-gradient(#000, #000) 12.9mm 121.41mm / 5mm .2mm no-repeat, linear-gradient(#000, #000) 192.1mm 121.41mm / 5mm .2mm no-repeat,
    linear-gradient(#000, #000) 12.9mm 175.39mm / 5mm .2mm no-repeat, linear-gradient(#000, #000) 192.1mm 175.39mm / 5mm .2mm no-repeat,
    linear-gradient(#000, #000) 12.9mm 229.37mm / 5mm .2mm no-repeat, linear-gradient(#000, #000) 192.1mm 229.37mm / 5mm .2mm no-repeat,
    linear-gradient(#000, #000) 12.9mm 283.35mm / 5mm .2mm no-repeat, linear-gradient(#000, #000) 192.1mm 283.35mm / 5mm .2mm no-repeat;
}
@page { size: A4 portrait; margin: 0; }
@media print {
  /* Nur die Seite mit Druckbögen druckt die Bögen allein; andere Seiten drucken wie bisher, nur ohne Leisten */
  .topbar, .tabbar, .dev-frame, .dev-pill { display: none !important; }
  body.admin::before, body.admin::after { display: none; }
  body.admin main:has(.ausweis-boegen) { max-width: none; margin: 0; padding: 0; }
  main:has(.ausweis-boegen) > :not(.ausweis-boegen) { display: none; }
  body.admin:has(.ausweis-boegen) { background: #fff; }
  .ausweis-boegen { display: block; }
}

/* =====================================================================
   Dunkelmodus (nur Genehmiger-Bereich) – nur Tokens umschalten
   ===================================================================== */
@media (prefers-color-scheme: dark) {
  body.admin {
    --ink: #f5f5f7; --muted: #98989d; --tertiary: #636366; --separator: rgba(84, 84, 88, .6);
    --fill: rgba(120, 120, 128, .24); --fill-strong: rgba(120, 120, 128, .36);
    --bg: #000; --surface: #1c1c1e; --surface-2: #2c2c2e; --field: #2c2c2e;
    --shadow-card: none;
    --glass: rgba(40, 40, 44, .58); --glass-thick: rgba(44, 44, 46, .8); --glass-edge: rgba(255, 255, 255, .1);
    --glass-ring: 0 0 0 .5px rgba(0, 0, 0, .5);
    --glass-shadow: 0 12px 28px -8px rgba(0, 0, 0, .6);
    --accent: #ff453a; --accent-press: #ff6961; --accent-solid: #d70015; --accent-tint: rgba(255, 69, 58, .18);
    --good: #30d158; --warn: #ff9f0a; --err: #ff453a;
    --info-tint: rgba(10, 132, 255, .25); --info-ink: #64b5ff; --warn-ink: #ffb340; --good-ink: #5ee08a; --extra-ink: #a5a3ff;
    --focus-ring: 0 0 0 4px rgba(255, 69, 58, .35);
    --bg-glow: radial-gradient(80vmax 50vmax at 0% -20%, rgba(255, 59, 48, .2), transparent 60%);
    color: var(--ink);
  }
  body.admin .btn.primary:hover { background: var(--accent); }
  body.admin .cell.taken { color: #ff8a80; }
}

/* =====================================================================
   Barrierefreiheit
   ===================================================================== */
/* Transparenz reduzieren → Glas wird mattiert/deckend */
@media (prefers-reduced-transparency: reduce) {
  :root { --glass: rgba(246, 246, 248, .97); --glass-thick: rgba(246, 246, 248, .99); }
  body.admin::before, body.admin::after { display: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass: rgba(246, 246, 248, .96); --glass-thick: rgba(246, 246, 248, .98); }
}
/* Kontrast erhöhen → deutliche Ränder, kräftigere Texte */
@media (prefers-contrast: more) {
  :root { --muted: #3a3a3c; --separator: rgba(0, 0, 0, .5); --glass: rgba(255, 255, 255, .97); --glass-edge: #000; --glass-ring: 0 0 0 1px #000; }
  .card, .counter, .order, .step, .product, .choose-card, .cell { outline: 1px solid var(--separator); }
  .btn, .icon-btn { outline: 1px solid currentColor; }
}
/* Bewegung reduzieren */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* =====================================================================
   Responsiv – am Handy: schwebende Tab-Leiste unten, die beim Scrollen kleiner wird
   ===================================================================== */
@media (max-width: 1060px) {
  .who-name { display: none; }
  .topbar nav a { padding: var(--s-8) var(--s-10); }
}
@media (max-width: 900px) {
  .order { grid-template-columns: 1fr 1fr 1fr; }
  .who-col, .check-col, .act-col { grid-column: 1 / -1; }
  .act-col { justify-content: flex-start; }
  .act-col .btn.primary { flex: 1 1 auto; }
}
@media (max-width: 720px) {
  :root { --topbar-top: 8px; }
  .topbar { width: calc(100% - 2 * var(--s-10)); }
  .topbar nav { display: none; }
  body.admin main { padding-bottom: 120px; }
  .tabbar {
    display: flex; position: fixed; z-index: 30; left: 50%; transform: translateX(-50%);
    bottom: calc(var(--s-14) + env(safe-area-inset-bottom)); width: min(var(--w-tabbar), calc(100% - 2 * var(--s-14)));
    justify-content: space-around; padding: var(--s-6); border-radius: var(--r-pill);
    transition: width var(--dur-slow) var(--ease), padding var(--dur-slow) var(--ease);
  }
  .tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--s-2); padding: var(--s-6) var(--s-4); border-radius: var(--r-pill); color: var(--ink); text-decoration: none; font-size: var(--text-2xs); font-weight: var(--weight-semibold); }
  .tabbar .ico { width: var(--icon-lg); height: var(--icon-lg); }
  .tabbar a[aria-current="page"] { color: var(--accent); background: var(--accent-tint); }
  /* Minimiert beim Herunterscrollen: nur Symbole, schmaler */
  .tabbar.min { width: min(var(--w-tabbar-min), calc(100% - 2 * var(--s-14))); padding: var(--s-4); }
  .tabbar.min a { padding: var(--s-8) var(--s-4); }
  .tabbar.min a span { display: none; }
  body.admin::after {
    content: ""; position: fixed; inset: auto 0 0 0; height: 110px; z-index: 25; pointer-events: none;
    background: linear-gradient(transparent, var(--bg) 85%);
    -webkit-mask-image: linear-gradient(transparent, #000 60%); mask-image: linear-gradient(transparent, #000 60%);
  }
  .counters { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: var(--s-8); }
  .counter { padding: var(--s-12) var(--s-14); }
  .counter strong { font-size: var(--text-2xl); }
  .counter span { font-size: var(--text-sm); }
  .grid { grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: var(--s-6); }
  .cell { min-height: 54px; padding: var(--s-6); font-size: var(--text-2xs); }
  .cell b { font-size: var(--text-base); }
  dialog.sheet {
    width: calc(100% - 2 * var(--s-8)); max-width: none; margin: auto var(--s-8) calc(var(--s-8) + env(safe-area-inset-bottom));
    padding-bottom: var(--s-24); border-radius: var(--r-sheet);
  }
  dialog.sheet[open] { animation: sheet-up var(--dur-slow) var(--ease-spring); }
}
@keyframes sheet-up { from { transform: translateY(110%); } to { transform: none; } }
@media (max-width: 560px) {
  .row, .row.three, .choice, .products, .choose { grid-template-columns: 1fr; }
  .plz-ort { grid-template-columns: 1fr 2fr; }
  .row.compact { grid-template-columns: 1fr 1fr; }   /* kurze Felder bleiben am Handy nebeneinander */
  main { padding: var(--s-14) var(--s-10) var(--s-32); }
  .card { padding: var(--s-18) var(--s-14); border-radius: var(--r-tile); }
  .step { padding: var(--s-4) var(--s-14) var(--s-8); border-radius: var(--r-bubble); }
  h1 { font-size: var(--text-2xl); }
  .filters select { flex: 1 1 45%; }
  .actionbar { padding-left: var(--s-18); }
  .actionbar .btn { padding: 0 var(--s-18); }
}

/* Als App vom Home-Bildschirm: iOS (ab 26) legt unter der Statusleiste eine eigene Unschärfe-Zone über den
   oberen Rand der Seite. Die Kopfleiste muss darunter liegen, sonst wirkt ihre Oberkante verschwommen. */
/* Steht bewusst am Ende, damit es die Handy-Regel (720 px) überschreibt. */
@media (display-mode: standalone) {
  :root { --topbar-top: 28px; }
}