/* PLAN.md §5a -- Tokens/Assets kopiert von der Vereinsseite (Astro + Decap CMS,
   verifiziert gegen src/layouts/Base.astro:41-46), kein Cross-Repo-Import,
   kein Hotlink. Kein Auto-Update -- manueller Re-Sync bei Restyle der
   Vereinsseite. Fonts self-hosted (@fontsource/barlow(-condensed), Dateien
   einmalig aus node_modules nach public/fonts/ kopiert -- kein Google-Fonts-
   CDN, siehe README). */

@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/barlow/barlow-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/barlow/barlow-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/barlow/barlow-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/barlow-condensed/barlow-condensed-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/barlow-condensed/barlow-condensed-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/barlow-condensed/barlow-condensed-latin-700-normal.woff2") format("woff2");
}

:root {
  --color-red: #C8102E;
  --color-black: #111111;
  --color-surface: #1C1C1C;
  --color-border: #2E2E2E;
  --color-text: #EDECEA;
  --color-muted: #ABABAB;
  --font-body: "Barlow", sans-serif;
  --font-heading: "Barlow Condensed", sans-serif;
}

/* PLAN.md §5a PRINT: Dark-Theme ist druck-untauglich (Tintenfresser,
   teils unlesbar) -- Print-Layer invertiert bewusst auf hell/schwarz.
   Screen-Views nutzen die Dark-Tokens 1:1, nur der Druck-Output weicht ab. */
@media print {
  :root {
    --color-black: #FFFFFF;
    --color-surface: #FFFFFF;
    --color-text: #000000;
    --color-muted: #333333;
    --color-border: #999999;
    --color-red: #C8102E;
  }
  nav, .btn, .no-print { display: none !important; }
  body { margin: 0; }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-black);
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: 1.5;
}

h1, h2, h3, label, th, button, .btn {
  font-family: var(--font-heading);
}

main {
  max-width: 960px;
  margin: 0 auto;
  padding: 1.5rem;
}
/* Admin dashboard is desktop-only (see CLAUDE.md) and its data tables
   (Bestellrunden/Team-Teilnahmen) have more columns than the 960px parent-
   /trainer-facing pages need to budget for -- widen just this page so the
   Aktionen column has room for its input+buttons to sit inline. */
#admin-main { max-width: 1280px; }

h1 {
  border-left: 3px solid var(--color-red);
  padding-left: 0.6rem;
}
h2 {
  border-left: 2px solid var(--color-red);
  padding-left: 0.5rem;
  margin-top: 2rem;
}

a { color: var(--color-text); }

.logo { height: 48px; }

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.card:hover {
  border-color: var(--color-red);
  transform: translateY(-2px);
}

/* Top-level cascading sections (Team-/Katalog-/Bestellrunden-Verwaltung) --
   native <details> so collapsed-by-default decluttering needs no JS. */
details.section { margin-bottom: 1.5rem; }
details.section > summary {
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 1.4rem;
  border-left: 3px solid var(--color-red);
  padding: 0.4rem 0 0.4rem 0.6rem;
  margin-top: 1.5rem;
  list-style: none;
  user-select: none;
}
details.section > summary::-webkit-details-marker { display: none; }
details.section > summary::before {
  content: "▸";
  display: inline-block;
  width: 1em;
  margin-right: 0.3rem;
  color: var(--color-red);
  transition: transform 0.15s ease;
}
details.section[open] > summary::before { transform: rotate(90deg); }
details.section > .section-body {
  padding: 1rem 0 0 0.9rem;
  margin-left: 0.4rem;
  border-left: 1px solid var(--color-border);
}

/* Nested sub-groups (e.g. inside Katalog) -- smaller than .section, still a
   <details> so each sub-item can be collapsed independently. */
details.subsection { margin-bottom: 1rem; }
details.subsection > summary {
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--color-text);
  padding: 0.3rem 0;
  list-style: none;
  user-select: none;
}
details.subsection > summary::-webkit-details-marker { display: none; }
details.subsection > summary::before {
  content: "▸";
  display: inline-block;
  width: 1em;
  margin-right: 0.3rem;
  font-size: 0.85rem;
  color: var(--color-muted);
  transition: transform 0.15s ease;
}
details.subsection[open] > summary::before { transform: rotate(90deg); }

/* Per-order item breakdown inside the trainer live-orders table -- same
   disclosure pattern, but inline/compact since it sits inside a table cell. */
details.items-toggle > summary {
  cursor: pointer;
  color: var(--color-muted);
  list-style: none;
  user-select: none;
}
details.items-toggle > summary::-webkit-details-marker { display: none; }
details.items-toggle > summary::before {
  content: "▸";
  display: inline-block;
  width: 1em;
  margin-right: 0.2rem;
  color: var(--color-muted);
  transition: transform 0.15s ease;
}
details.items-toggle[open] > summary::before { transform: rotate(90deg); }

.btn, .btn-outline {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 1rem;
  letter-spacing: 0.02em;
  padding: 0.5rem 1.1rem;
  border-radius: 3px;
  cursor: pointer;
  text-decoration: none;
}
.btn-outline {
  background: transparent;
  color: var(--color-text);
  border: 2px solid var(--color-border);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.btn-outline:hover {
  border-color: var(--color-text);
  transform: translateY(-1px);
}
.btn-primary {
  background: var(--color-red);
  color: #fff;
  border: 2px solid var(--color-red);
}
.btn-primary:hover { transform: translateY(-1px); }
.btn:disabled, .btn-outline:disabled, .btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.btn-danger {
  background: transparent;
  color: var(--color-red);
  border: 2px solid var(--color-red);
}
.btn-sm {
  padding: 0.25rem 0.6rem;
  font-size: 0.85rem;
}

.form-input, select.form-input, textarea.form-input {
  display: block;
  width: 100%;
  background: var(--color-black);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  font-family: var(--font-body);
  padding: 0.5rem 0.6rem;
  border-radius: 3px;
  margin-bottom: 0.9rem;
}
.form-input:focus {
  outline: none;
  border-color: var(--color-red);
}
/* Native calendar-picker glyph renders black by default, invisible on the
   dark background -- recolor to the UI red via filter (no direct SVG/color
   API for this browser-drawn icon). */
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(13%) sepia(72%) saturate(6787%) hue-rotate(345deg) brightness(80%) contrast(94%);
  cursor: pointer;
}
.form-input.field-error {
  border-color: var(--color-red);
  box-shadow: 0 0 0 1px var(--color-red);
}
input[type="checkbox"] { accent-color: var(--color-red); }

label { display: block; margin-bottom: 0.25rem; color: var(--color-muted); font-size: 0.95rem; }

table { border-collapse: collapse; width: 100%; margin-bottom: 1.5rem; }
th, td { border-bottom: 1px solid var(--color-border); padding: 0.5rem 0.6rem; text-align: left; }
tr:hover td { background: rgba(200, 16, 46, 0.06); }
th { color: var(--color-muted); font-weight: 400; }
td.num, th.num { text-align: right; }
td.checkbox-cell, th.checkbox-cell { text-align: center; }
td.checkbox-cell input[type="checkbox"] { width: 20px; height: 20px; }
tfoot th { border-bottom: none; border-top: 2px solid var(--color-border); color: var(--color-text); font-family: var(--font-heading); }
/* Narrow viewports (trainer dashboard tables) -- scroll instead of overflow. */
.table-scroll { overflow-x: auto; }

/* Trainer live-orders table (public/trainer.html) on phones: its first column
   holds name + the per-family article breakdown (long text like "2x
   Trainingsshirt (Wappen+SpVgg) (Kinder, 128)"), which forces the table wider
   than the screen under normal table layout -- no wrap-based fix keeps it
   readable at 375px, so below 640px it stacks into a label/value list per row
   instead of scrolling sideways. Cells opt into a label via [data-label];
   the name/action cells don't set one, so they show unlabeled (self-evident). */
@media (max-width: 640px) {
  .orders-table thead { display: none; }
  .orders-table, .orders-table tbody, .orders-table tr, .orders-table td, .orders-table tfoot, .orders-table tfoot tr {
    display: block;
    width: 100%;
  }
  .orders-table tbody tr { border-bottom: 1px solid var(--color-border); padding: 0.6rem 0; }
  .orders-table td { border-bottom: none; padding: 0.2rem 0; text-align: left; }
  .orders-table td:empty, .orders-table tfoot th:empty { display: none; }
  .orders-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    color: var(--color-muted);
    font-size: 0.85rem;
  }
  .orders-table tfoot th { display: inline-block; width: auto; border-top: none; padding: 0.2rem 0.4rem 0.2rem 0; }
}

/* Campaign card action rows (trainer dashboard) -- buttons appended via JS
   with no whitespace between them, so they need explicit gap/wrap or they
   touch edge-to-edge and don't wrap on narrow screens. */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.75rem 0; }
/* Admin tables (Bestellrunden/Team-Teilnahmen) put a datetime input inside
   .actions alongside buttons -- .form-input's default width:100%/block would
   force it onto its own full-width line instead of sitting inline. */
.actions .form-input { display: inline-block; width: auto; margin-bottom: 0; }
td > .actions { margin: 0; }
.link-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.parent-link { word-break: break-all; }

.muted { color: var(--color-muted); }
.catalog-thumb { height: 48px; width: 48px; object-fit: cover; border-radius: 4px; vertical-align: middle; margin: 0 0.5rem; }
.catalog-photo-row td { padding-top: 0.75rem; }
.catalog-group-header { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.catalog-group-header .inline-input { display: inline-block; width: auto; margin-bottom: 0; }
.catalog-group-header .inline-input[data-group-field="artikelNr"] { width: 6rem; }
.catalog-group-header .inline-input[data-group-field="artikel"] { width: 18rem; }
.order-photo { height: 96px; width: 96px; object-fit: cover; border-radius: 6px; display: block; margin-bottom: 0.5rem; }

/* Mobile order form (public/order.html) -- article cards with pill/chip
   pickers and large tap targets instead of one <input type=number> per
   catalog line. */
.article-card { margin-bottom: 1rem; }
.article-card h3 { font-size: 1.15rem; margin: 0 0 0.5rem; }

.variante-pills, .size-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; }
.variante-pill, .size-chip {
  font-family: var(--font-body);
  background: var(--color-black);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.5rem 0.9rem;
  min-height: 44px;
  cursor: pointer;
  text-align: center;
  line-height: 1.25;
}
.size-chip { border-radius: 8px; }
.size-chip-price { color: var(--color-muted); font-size: 0.8rem; }
.variante-pill.selected, .size-chip.selected {
  border-color: var(--color-red);
  background: rgba(200, 16, 46, 0.15);
}
.variante-pill.selected .size-chip-price, .size-chip.selected .size-chip-price { color: var(--color-text); }

.qty-stepper { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.qty-btn {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  width: 44px;
  height: 44px;
  border-radius: 3px;
  border: 2px solid var(--color-border);
  background: var(--color-black);
  color: var(--color-text);
  cursor: pointer;
}
.qty-btn:hover { border-color: var(--color-text); }
.qty-display { font-family: var(--font-heading); font-size: 1.2rem; min-width: 2ch; text-align: center; }

.add-btn { width: 100%; }

.cart-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border);
}
.cart-row:last-child { border-bottom: none; }
.cart-remove {
  font-family: var(--font-body);
  background: none;
  border: none;
  color: var(--color-red);
  text-decoration: underline;
  cursor: pointer;
  padding: 0.25rem;
  flex-shrink: 0;
}

/* [hidden] has equal specificity to .sticky-bar but the browser's UA
   stylesheet always loses to author styles -- without this, the class's
   own `display: flex` below wins and the `hidden` attribute is ignored. */
.sticky-bar[hidden] { display: none; }
.sticky-bar {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: 0.75rem 1.25rem;
  max-width: 960px;
  margin: 0 auto;
}
.sticky-bar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.sticky-bar span { font-family: var(--font-heading); font-size: 1.1rem; }
.sticky-count { color: var(--color-muted); font-size: 0.95rem; margin-right: auto; }
.sticky-bar .error { margin: 0; }
.error {
  color: #ff6b6b;
  border-left: 2px solid var(--color-red);
  padding-left: 0.6rem;
  margin: 0.75rem 0;
}
.badge {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  padding: 0.1rem 0.5rem;
  border-radius: 3px;
  border: 1px solid var(--color-red);
  color: var(--color-red);
}
.warning-banner {
  background: rgba(200, 16, 46, 0.1);
  border: 2px solid var(--color-red);
  border-radius: 4px;
  padding: 0.9rem 1.1rem;
  margin: 1rem 0 1.5rem;
  font-weight: 600;
}
.warning-banner strong { color: var(--color-red); }
.parent-link-hint {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  margin-bottom: 0.3rem;
}
.mockup-frame {
  border: 1px solid var(--color-border);
  border-radius: 6px;
  overflow: hidden;
  margin: 0.75rem 0 1.5rem;
  background: var(--color-black);
}
.mockup-titlebar {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: 0.4rem 0.6rem;
  display: flex;
  gap: 0.3rem;
}
.mockup-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-border);
}
.mockup-body {
  padding: 1.2rem;
  pointer-events: none;
}
.mockup-body .card { margin: 0; }