/* =====================================================================
   BESTELLPORTAL — Gestaltung
   =====================================================================

   Dieselben Farbwerte wie die Hauptseite, damit das Portal erkennbar
   dazugehört. Bewusst ohne Tailwind: Das Portal ist eine eigene, kleine
   PHP-Anwendung, und ein Bauwerkzeug für ein paar Seiten wäre Aufwand
   ohne Gegenwert.

   Schrift: die des Systems. Die Hauptseite liefert DM Sans vom eigenen
   Server aus, und die Datenschutzerklärung sagt zu, dass kein Aufruf an
   Google geht. Ein `@import` von Google Fonts würde genau diese Zusage
   brechen — für ein Bestellportal ist mir das den Buchstabenschnitt
   nicht wert.
   ===================================================================== */

:root {
  --waldnacht: #090c0a;
  --forst: #111614;
  --kante: #1d251f;
  --nebel: #8e9a90;
  --nebel-tief: #7a847c;
  --licht: #f1f4ef;
  --feuer: #e21113;
  /* Der warme Ton der Hauptseite ist hier bewusst nicht mehr im
     Einsatz. Sekundärfarbe des Portals ist Rot. Er steht nur noch als
     Wert da, damit ein späterer Blick weiß, was fehlt. */

  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  color-scheme: dark;
}

* { box-sizing: border-box; }

html {
  -webkit-tap-highlight-color: transparent;
  /* Verhindert die 300-ms-Verzögerung durch Doppeltipp-Zoom, ohne das
     Vergrößern selbst zu unterbinden. */
  touch-action: manipulation;
}

body {
  margin: 0;
  background: var(--waldnacht);
  color: var(--licht);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Verweise hell, nicht rot.

   Gemessen hat Rot auf Waldnacht 4,05 : 1 — das reicht für Ringe und
   Rahmen (gefordert 3,0), aber nicht für Fließtext (gefordert 4,5).
   Der Verweis trägt die Farbe deshalb in der Unterstreichung, nicht in
   der Schrift: Rot bleibt erkennbar, lesbar bleibt es trotzdem. */
a {
  color: var(--licht);
  text-decoration-color: var(--feuer);
  text-underline-offset: 3px;
}
a:hover { text-decoration-thickness: 2px; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--feuer);
  outline-offset: 3px;
}

.rahmen {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Kopf ─────────────────────────────────────────────────────────── */

.kopf {
  border-bottom: 1px solid var(--kante);
  background: rgba(9, 12, 10, 0.9);
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(12px);
}
.kopf .rahmen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 72px;
  flex-wrap: wrap;
}
.marke {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--licht);
  font-weight: 700;
  letter-spacing: -0.02em;
}
/* Die Bildmarke im Kopf. `display:flex` verhindert den Zeilenabstand,
   den ein eingebettetes SVG sonst als Inline-Element unter sich lässt. */
.marke .zeichen { color: var(--feuer); display: flex; align-items: center; }
.kopf nav { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.kopf nav a {
  color: var(--nebel);
  text-decoration: none;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* Zielgröße nach WCAG 2.2: mindestens 24 px, ohne die Zeile zu
     verschieben. */
  position: relative;
  padding: 6px 0;
}
.kopf nav a:hover { color: var(--licht); }
.kopf nav a[aria-current="page"] { color: var(--licht); }

/* Warenkorb im Kopf. Die Zahl sitzt als kleine Marke oben rechts am
   Symbol — sichtbar, ohne die Zeilenhöhe zu verändern. */
.korb {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--nebel);
  padding: 6px 4px;
  text-decoration: none;
}
.korb:hover { color: var(--licht); }
.korb-zahl {
  position: absolute;
  top: -2px;
  right: -8px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--feuer);
  color: #fff;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 17px;
  text-align: center;
  letter-spacing: 0;
}

/* ── Grundbausteine ──────────────────────────────────────────────── */

.marke-lf { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--nebel); margin: 0 0 10px; }

h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.06;
  letter-spacing: -0.03em; margin: 0 0 12px; text-wrap: pretty; }
h2 { font-size: 1.25rem; letter-spacing: -0.02em; margin: 0 0 10px; }

.abschnitt { padding: 48px 0; }
.karte {
  border: 1px solid var(--kante);
  background: var(--forst);
  padding: 28px;
}

.hinweis {
  border-left: 2px solid var(--feuer);
  padding: 12px 0 12px 16px;
  color: var(--licht);
  background: rgba(226, 17, 19, 0.06);
  margin: 0 0 20px;
}
/* Der ruhige Hinweis bleibt neutral. Bekäme er ebenfalls Rot, wäre der
   Unterschied zwischen „erledigt" und „schiefgegangen" nur noch am
   Wortlaut zu erkennen — und Farbe allein darf ohnehin nie die einzige
   Unterscheidung sein. */
.hinweis.ruhig { border-left-color: var(--nebel); background: rgba(142, 154, 144, 0.06); }

/* Leiser Textblock: Verweise nehmen die Farbe der Umgebung an, statt
   sich abzuheben. Für Nebensätze wie den Hinweis auf den vergessenen
   Zugang — dort ist der Verweis kein Angebot, das um Aufmerksamkeit
   wirbt, sondern Teil des Satzes. Die Unterstreichung bleibt, damit
   erkennbar ist, dass man klicken kann; sie ist ohnehin das Merkmal,
   das nicht von Farbwahrnehmung abhängt. */
.leise { color: var(--nebel-tief); }
.leise a { color: inherit; text-decoration-color: currentColor; }

/* ── Formulare ───────────────────────────────────────────────────── */

label.feld { display: block; margin-bottom: 18px; }
label.feld > span {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nebel);
  margin-bottom: 8px;
}
input[type="text"], input[type="password"], input[type="email"],
input[type="number"], select, textarea {
  width: 100%;
  padding: 12px 14px;
  background: transparent;
  border: 1px solid var(--kante);
  color: var(--licht);
  font: inherit;
  border-radius: 0;
  transition: border-color 0.2s;
}
input:focus, select:focus, textarea:focus { border-color: var(--feuer); }

/* Der PIN ist eine Zahlenfolge — Ziffern gleich breit setzen, sonst
   zappelt das Feld beim Tippen. Die Systemschrift für Monospace bringt
   echte Tabellenziffern mit. */
input[name="pin"] {
  font-family: var(--mono);
  letter-spacing: 0.35em;
  font-size: 1.15rem;
}

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  border: 0;
  background: var(--feuer);
  color: #fff;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s;
}
.knopf:hover { opacity: 0.9; }
.knopf:active { transform: translateY(1px); }
.knopf[disabled] { opacity: 0.45; cursor: not-allowed; }
.knopf.umriss { background: transparent; border: 1px solid var(--kante); color: var(--licht); }
/* Beim Überfahren nur der Rahmen rot — die Beschriftung bleibt hell,
   weil roter Text auf dieser Fläche unter dem Lesbarkeitswert liegt. */
.knopf.umriss:hover { border-color: var(--feuer); color: var(--licht); }

/* ── Produktgitter ───────────────────────────────────────────────── */

.gitter {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px;
  margin-top: 28px;
}
.produkt { border: 1px solid var(--kante); background: var(--forst); display: flex; flex-direction: column; }
.produkt .bild {
  display: block;
  aspect-ratio: 4 / 3;
  background: #0d1210 center/contain no-repeat;
  border-bottom: 1px solid var(--kante);
}
.produkt .inhalt { padding: 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.produkt h3 { margin: 0; font-size: 1rem; line-height: 1.3; }
.produkt h3 a:hover { text-decoration: underline; text-decoration-color: var(--feuer); }
/* Der Preis ist gewöhnlicher Text und braucht 4,5 : 1 — deshalb hell
   und nicht rot. */
.produkt .preis { font-family: var(--mono); color: var(--licht); font-size: 0.95rem; }
.produkt form { margin-top: auto; display: flex; gap: 8px; align-items: center; }
.produkt input[type="number"] { width: 76px; text-align: center; font-family: var(--mono); }

/* ── Tabellen ────────────────────────────────────────────────────── */

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--kante); vertical-align: top; }
th { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--nebel); font-weight: 400; }
td.zahl, th.zahl { text-align: right; font-family: var(--mono); }

.zustand { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 4px 8px; border: 1px solid var(--kante); }
/* Zustandsmarken sind kurze Versalien in eigenem Rahmen — grafische
   Elemente, für die 3,0 genügt. Hier darf Rot stehen. */
.zustand.offen { color: var(--feuer); border-color: var(--feuer); }
.zustand.freigegeben { color: #3fcf6b; border-color: #3fcf6b; }
.zustand.abgelehnt { color: var(--nebel-tief); }

/* ── Fuß ─────────────────────────────────────────────────────────── */

.fuss {
  border-top: 1px solid var(--kante);
  margin-top: 64px;
  padding: 28px 0 48px;
  color: var(--nebel-tief);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.fuss .rahmen { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.fuss a { color: var(--nebel-tief); text-decoration: none; }
.fuss a:hover { color: var(--licht); }

/* ── Anmeldung ───────────────────────────────────────────────────── */

.anmeldung { min-height: 100dvh; display: grid; place-items: center; padding: 40px 24px; }
.anmeldung .karte { width: 100%; max-width: 420px; }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}