/* Design-Tokens pro Produkt (D6). Das Skeleton bringt nur ein neutrales Minimum mit. */
:root {
  --farbe-text: #1c1c1c;
  --farbe-hintergrund: #fbfaf7;
  --farbe-akzent: #12234a;
  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mass: 44rem;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { color-scheme: light; }
body { margin: 0; font-family: var(--schrift); color: var(--farbe-text); background: var(--farbe-hintergrund); line-height: 1.5; }
.kopf, .inhalt, .fuss { max-width: var(--mass); margin: 0 auto; padding: 1rem; }
.marke { font-weight: 600; color: var(--farbe-akzent); text-decoration: none; }
.fuss { color: #666; }
a { color: var(--farbe-akzent); }
h1 { font-size: 1.75rem; line-height: 1.2; }
@media (min-width: 40rem) { h1 { font-size: 2.25rem; } }

/* Trailbuster: Farben aus dem Mockup (Text #15201B, Gefahr #E8470F, Grün #2F6B3A), Knöpfe mit 48 px Mindesthöhe. */
:root { --farbe-text: #15201B; --farbe-akzent: #15201B; --farbe-hintergrund: #F3F6F4; --farbe-fehler: #9b2c12; }
.knopf { display: inline-flex; align-items: center; min-height: 48px; padding: 0 1.25rem; border: 0; border-radius: 0.75rem; background: var(--farbe-akzent); color: #fff; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.knopf--leise { background: transparent; color: var(--farbe-akzent); border: 2px solid var(--farbe-akzent); min-height: 40px; }
.knopf:focus-visible { outline: 3px solid #E8470F; outline-offset: 2px; }
.hinweis { padding: 0.75rem 1rem; border-radius: 0.6rem; background: #e3ece6; }
.hinweis--fehler { background: #fbe4dc; color: var(--farbe-fehler); }
.formular { display: grid; gap: 0.5rem; max-width: 32rem; margin: 1rem 0; }
.formular label { font-weight: 600; }
.formular input[type="email"], .formular textarea { width: 100%; padding: 0.6rem; border: 1px solid #9aa8a0; border-radius: 0.5rem; font: inherit; background: #fff; }
.formular input[aria-invalid="true"] { border-color: var(--farbe-fehler); }
.feldfehler { margin: 0; color: var(--farbe-fehler); font-size: 0.9rem; }
.admin-kopf { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.tabelle { width: 100%; border-collapse: collapse; margin: 0.75rem 0; font-size: 0.92rem; display: block; overflow-x: auto; }
.tabelle th, .tabelle td { padding: 0.4rem 0.6rem; border-bottom: 1px solid #c9d4ce; text-align: left; vertical-align: top; }
.tabelle form { margin: 0; }