/* ============================================================
   TOXIN SPIRIT – Zentrale Stildatei
   Design: „Resonant Stark" + „Frosted Touch"
   Regeln siehe CLAUDE.md. Diese Datei ist die EINZIGE zentrale
   CSS-Quelle – keine neuen isolierten <style>-Blöcke anlegen.
   Schriften werden in fonts.css geladen (lokal, DSGVO-konform).
   ============================================================ */

/* ===== Farbschema + Basiswerte als CSS-Variablen ===== */
:root {
  /* Farben laut CLAUDE.md */
  --bg:      #0a0f1e;   /* Hintergrund (Haupt, Navy)            */
  --bg2:     #131a2e;   /* Karten/Sektionen (dunkler)          */
  --accent:  #f97316;   /* Akzent (Orange) – sparsam einsetzen */
  --text:    #f8f8f8;   /* Text                                */
  --muted:   #9aa3b2;   /* Nebentext / gedämpft                */

  /* Schriften (Familien kommen aus fonts.css) */
  --font-headline:  "Bebas Neue", "Segoe UI", system-ui, sans-serif;       /* nur kurze Haupt-Headlines */
  --font-body:      "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif; /* alles andere */
  --font-condensed: "Barlow Condensed", "Segoe UI", system-ui, sans-serif;  /* Buttons & Labels */

  /* Frosted-Touch-Bausteine (für Wiederverwendung) */
  --glass-bg:     rgba(255, 255, 255, 0.03);
  --glass-border: 1px solid rgba(255, 255, 255, 0.08);
  --glass-blur:   blur(12px);
  --radius:       20px;
}

/* ===== Basis / Grundlayout ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  min-height: 100vh;
  font-family: var(--font-body);
  font-weight: 300;               /* dünne, moderne Schrift    */
  color: var(--text);
  background: radial-gradient(circle at 50% 10%, var(--bg2) 0%, var(--bg) 60%);
  line-height: 1.6;
}

/* Grundschrift Barlow global durchsetzen – überschreibt seiteneigene
   body{ font-family:"Segoe UI" }-Angaben (höhere Spezifität via html body). */
html body { font-family: var(--font-body); }

/* --- Schrift-Zuordnung (Feinjustierung nach Vergleich) ---
   Bebas Neue NUR für kurze Haupt-Überschriften (Seitentitel).      */
h1 {
  font-family: var(--font-headline);
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.1;
}

/* Unter-Überschriften, PRODUKTNAMEN (.card h2), Abschnitte:
   Barlow (normal) – besser lesbar als Bebas.                       */
h2, h3 {
  font-family: var(--font-body);
  font-weight: 600;
  line-height: 1.25;
}

/* Rechtstexte (AGB/Datenschutz/Impressum/Widerruf/Versand): auch die
   Haupt-Überschrift in Barlow, NICHT in Bebas (Lesbarkeit lange Titel). */
.legal-wrap h1,
.legal-wrap h2,
.legal-wrap h3 {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0;
}

/* Buttons & Labels (z.B. „In den Warenkorb", „Weiter einkaufen",
   Kategorie-Filter): Barlow Condensed. Nur die Schrift, sonst nichts. */
.btn, .submit-btn, .add-btn, .remove-btn, .order-btn, .weiter-btn,
.cta-btn, .confirm-btn, .checkout-btn, .delete-btn,
.kategorie-tab, .kontakt-label, .label-link,
button, input[type="submit"], input[type="button"] {
  font-family: var(--font-condensed);
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--text); }

/* ===== „Frosted Touch" – Glassmorphismus-Karte ===== */
.frosted-card {
  background: var(--glass-bg);
  border: var(--glass-border);
  border-radius: var(--radius);
  -webkit-backdrop-filter: var(--glass-blur);  /* Safari/iOS */
  backdrop-filter: var(--glass-blur);
  padding: 24px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.frosted-card:hover {
  transform: translateY(-4px);
  border-color: rgba(249, 115, 22, 0.4);       /* Orange, dezent */
}

/* ===== Markenrecht: Fremdmarken neutral & gedämpft ===== */
/* iPhone, Apple, AirPods im Text NIE auffälliger als TOXIN SPIRIT.
   Diese Klasse um Fremdmarken-Namen legen.                        */
.fremdmarke {
  font-size: 0.7em;
  color: var(--muted);
  font-weight: 300;
}

/* ===== "In Bearbeitung"-Status (rot, frosted) — wiederverwendbar (Kachel + Detail) =====
   Bewusst ROT (nicht Orange = normaler Akzent), Glassmorphism passend zum Frosted-Stil. */
.bearbeitung-ov {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 999px;
  background: rgba(220, 38, 38, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.38);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #fff; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.02em;
  box-shadow: 0 4px 16px rgba(220, 38, 38, 0.40);
}
.bearbeitung-banner {
  display: flex; align-items: center; gap: 12px;
  margin: 16px 0; padding: 14px 18px; border-radius: 14px;
  background: rgba(220, 38, 38, 0.13);
  border: 1px solid rgba(220, 38, 38, 0.55);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: #fecaca; font-size: 0.92rem; line-height: 1.5;
}
.bearbeitung-banner .bb-titel { color: #fff; font-weight: 800; }
.add-btn.gesperrt {
  background: rgba(220, 38, 38, 0.16) !important;
  color: #fca5a5 !important;
  border: 1px solid rgba(220, 38, 38, 0.45) !important;
  cursor: not-allowed !important;
}