/* ============================================================
   AXR-Systems Core — consent.css
   Cookie-/Consent-Banner + Seite „Cookie-Einstellungen".

   Grundhaltung:
   - Der Banner ist eine schwebende Karte, keine randlose Systemleiste.
     Warum: eine abgesetzte Fläche mit Radius/Kante spricht dieselbe
     Sprache wie .card / .quote / .fork-card im Theme und wirkt hochwertig
     statt nach Cookie-Warnung von der Stange.
   - Alle Farben, Radien, Schatten und Bewegungen kommen aus tokens.css,
     damit Light/Dark und spätere Markenänderungen zentral greifen.
   - Ablehnen und Zustimmen sind gestalterisch gleichwertig. Das ist eine
     rechtliche Anforderung (freiwillige Einwilligung), deshalb sind unten
     Größe, Padding, Schriftgewicht, Fläche und Schatten für beide Buttons
     in EINER gemeinsamen Regel definiert.
   ============================================================ */

/* ------------------------------------------------------------
   0) Lokale Abstands-/Formskala
   Warum eigene Variablen statt Streuwerte: der Banner soll innen wie
   außen aus derselben Skala rechnen; eine Änderung hier verschiebt
   alle Abstände konsistent mit.
   ------------------------------------------------------------ */
.ax-consent-banner,
.ax-consent-settings{
  --axc-pad: clamp(1.15rem, .85rem + 1vw, 1.75rem); /* Innenabstand der Fläche */
  --axc-gap: var(--space-3);                         /* Abstand zwischen Blöcken */
  --axc-gap-sm: var(--space-1);                      /* Abstand innerhalb eines Blocks */
  --axc-radius: var(--r-lg);                         /* großzügig, wie .fork-card */
}

/* ============================================================
   1) Banner-Rahmen (fixiert am unteren Rand)
   ============================================================ */

.ax-consent-banner{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:120;
  /* Safe-Area: auf iPhones mit Home-Indicator darf die Karte nicht unter
     der Gestenleiste kleben. Der Basisabstand bleibt erhalten und das
     Geräte-Inset kommt oben drauf (auf Geräten ohne Inset = 0px). */
  padding:0 var(--gutter) calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
  /* Der Rahmen selbst fängt keine Klicks ab – nur die Karte ist interaktiv.
     Sonst wäre der transparente Streifen links/rechts eine unsichtbare Sperre. */
  pointer-events:none;
}

/* Der Banner bekommt per JS tabindex="-1" und wird programmatisch fokussiert.
   Ein sichtbarer Ring wäre hier irritierend – :focus-visible bleibt unberührt. */
.ax-consent-banner:focus{outline:none}

/* ------------------------------------------------------------
   2) Die eigentliche Fläche (das <form>)
   ------------------------------------------------------------ */
.ax-consent-inner{
  pointer-events:auto;
  /* Maximalbreite + zentriert: keine Vollbreiten-Leiste auf großen Screens. */
  width:100%;
  max-width:min(var(--container), 68rem);
  margin:0 auto;

  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:var(--space-4);

  padding:var(--axc-pad);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--axc-radius);
  color:var(--ink-2);

  /* Mehrstufiger Schatten: eine enge Kontaktkante, eine mittlere Lage und
     ein weit gestreuter, sehr weicher Abschluss. Dadurch wirkt die Karte
     angehoben, aber nicht schwer – ein einzelner harter Schatten würde
     „Popup" schreien. */
  box-shadow:
    0 1px 2px rgba(11,16,32,.05),
    0 10px 24px -14px rgba(23,34,73,.22),
    0 34px 70px -32px rgba(23,34,73,.30);
}

/* Leichte Milchglas-Fläche, wo unterstützt: hebt die Karte vom Seiteninhalt
   ab, ohne zusätzlichen Schatten. Fallback oben bleibt vollflächig deckend. */
@supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)){
  .ax-consent-inner{
    background:color-mix(in srgb, var(--surface) 92%, transparent);
    -webkit-backdrop-filter:saturate(140%) blur(14px);
    backdrop-filter:saturate(140%) blur(14px);
  }
}

/* ------------------------------------------------------------
   3) Textblock: Icon + Titel + Fließtext + Links
   ------------------------------------------------------------ */
.ax-consent-body{
  display:flex;
  align-items:flex-start;
  gap:var(--space-3);
  min-width:0; /* verhindert, dass langer Text das Grid sprengt */
}

/* Icon-Kachel im Stil von .card .ic – schafft einen Ankerpunkt links
   und nimmt dem Textblock die „Textwand"-Wirkung. */
.ax-consent-icon{
  flex:none;
  width:44px; height:44px;
  display:grid; place-items:center;
  border-radius:14px;
  background:var(--brand-grad-soft);
  color:var(--brand-2);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brand-2) 18%, transparent);
}
.ax-consent-icon svg{width:22px;height:22px;display:block}

.ax-consent-text{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:var(--axc-gap-sm);
  max-width:60ch; /* Lesbarkeit: keine überlangen Zeilen auf Desktop */
}

.ax-consent-title{
  margin:0;
  font-family:var(--font-head);
  font-weight:700;
  font-size:1.02rem;
  line-height:1.25;
  letter-spacing:-.01em;
  color:var(--ink);
}

.ax-consent-copy{
  margin:0;
  font-size:.9rem;
  line-height:1.6;
  color:var(--ink-2);
  text-wrap:pretty;
}

/* Links als eigene Zeile statt mitten im Fließtext: klare Gliederung,
   größere Trefferfläche, und der Erklärtext bleibt ruhig lesbar. */
.ax-consent-links{
  margin:.15rem 0 0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.35rem .6rem;
  font-size:.85rem;
  font-weight:600;
  font-family:var(--font-head);
}
.ax-consent-links a{
  color:var(--brand-2);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  border-radius:6px;
  padding:.15rem .1rem;
  transition:color var(--dur-1) var(--ease), text-decoration-color var(--dur-1);
}
.ax-consent-links a:hover{
  color:var(--brand-1);
  text-decoration-color:currentColor;
}
.ax-consent-sep{color:var(--line); user-select:none}

/* ------------------------------------------------------------
   4) Aktionsblock
   ------------------------------------------------------------ */
.ax-consent-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--space-1);
}

/* ============================================================
   GLEICHWERTIGKEIT DER BUTTONS — rechtlich relevant, nicht kosmetisch.
   Beide Buttons teilen sich EINE Regel: identische Mindestbreite,
   Mindesthöhe (>= 44px Touchziel), Padding, Schriftgröße, -gewicht und
   Schatten. Unterschiedlich ist ausschließlich die Füllfarbe, die aus
   .btn-primary / .btn-ghost des Themes kommt.
   Der farbige Glow von .btn-primary wird hier bewusst auf denselben
   neutralen Schatten zurückgesetzt, weil ein leuchtender Schatten
   „Alle akzeptieren" optisch bevorzugen würde. Die höhere Spezifität
   (.ax-consent-actions .ax-consent-btn) reicht dafür aus – kein !important.
   ============================================================ */
.ax-consent-actions .ax-consent-btn{
  flex:1 1 auto;
  min-width:11.5rem;
  min-height:48px;          /* > 44px Touchziel */
  justify-content:center;
  padding:.8rem 1.35rem;    /* identisch für beide */
  font-size:.95rem;         /* identisch für beide */
  font-weight:600;          /* identisch für beide */
  line-height:1.2;
  box-shadow:var(--shadow-sm); /* identisch für beide */
}
.ax-consent-actions .ax-consent-btn:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow);    /* identisch für beide */
}
.ax-consent-actions .ax-consent-btn:active{transform:translateY(0)}
/* Fokus für beide gleich: Ring zusätzlich zum Ruhe-Schatten. */
.ax-consent-actions .ax-consent-btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px var(--ring), var(--shadow-sm);
}
/* Die Ghost-Variante bekommt eine etwas deutlichere Kante, damit sie bei
   gleicher Fläche genauso gut erkennbar ist wie die gefüllte Variante. */
.ax-consent-actions .btn-ghost.ax-consent-btn{
  background:var(--surface-2);
  border-color:color-mix(in srgb, var(--ink) 16%, var(--line));
  color:var(--ink);
}
.ax-consent-actions .btn-ghost.ax-consent-btn:hover{
  border-color:var(--brand-2);
}

/* Sichtbarer Fokus auf Links (Theme-Ring, aber mit passendem Radius). */
.ax-consent-links a:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px var(--ring);
  border-radius:6px;
}

/* ============================================================
   5) Einblenden von unten
   Nur beim ersten Erscheinen, dezent: kurze Distanz + Deckkraft.
   ============================================================ */
@keyframes axConsentUp{
  from{opacity:0; transform:translateY(18px) scale(.985)}
  to  {opacity:1; transform:none}
}
.ax-consent-inner{
  animation:axConsentUp var(--dur-2) var(--ease-out) both;
  animation-delay:.12s; /* Seite darf zuerst stehen, dann kommt der Banner */
  will-change:transform, opacity;
}

/* ============================================================
   6) Dark Mode — exakt der Mechanismus aus tokens.css ([data-theme])
   Im Dunkeln trägt ein weicher Schatten kaum: die Abhebung passiert
   über eine hellere Fläche (surface-2), eine feine Innenkante und einen
   stark zurückgenommenen Schlagschatten.
   ============================================================ */
[data-theme="dark"] .ax-consent-inner{
  background:var(--surface-2);
  border-color:color-mix(in srgb, var(--ink) 12%, var(--line));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 24px 60px -34px rgba(0,0,0,.85);
}
@supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)){
  [data-theme="dark"] .ax-consent-inner{
    background:color-mix(in srgb, var(--surface-2) 90%, transparent);
  }
}
[data-theme="dark"] .ax-consent-icon{
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brand-2) 32%, transparent);
}
[data-theme="dark"] .ax-consent-sep{color:color-mix(in srgb, var(--ink) 30%, transparent)}
[data-theme="dark"] .ax-consent-actions .btn-ghost.ax-consent-btn{
  background:color-mix(in srgb, var(--ink) 8%, transparent);
  border-color:color-mix(in srgb, var(--ink) 22%, var(--line));
}

/* ============================================================
   7) Responsiv
   ============================================================ */

/* Ab hier passen Text und Buttons nicht mehr nebeneinander. */
@media (max-width:900px){
  .ax-consent-inner{
    grid-template-columns:1fr;
    gap:var(--axc-gap);
    align-items:stretch;
  }
  .ax-consent-text{max-width:none}
}

@media (max-width:640px){
  .ax-consent-banner{
    padding-left:var(--space-2);
    padding-right:var(--space-2);
  }
  .ax-consent-inner{
    border-radius:var(--r);
    gap:var(--space-3);
  }
  .ax-consent-icon{width:38px;height:38px;border-radius:12px}
  .ax-consent-icon svg{width:20px;height:20px}
  .ax-consent-actions{flex-direction:column; align-items:stretch}
  /* Auf Mobil beide Buttons volle Breite – weiterhin exakt gleich groß. */
  .ax-consent-actions .ax-consent-btn{width:100%; min-width:0}
}

/* Sehr niedrige Viewports (Querformat Handy): Text darf scrollen,
   die Buttons bleiben erreichbar. */
@media (max-height:420px){
  .ax-consent-inner{max-height:82vh; overflow:auto}
}

/* ============================================================
   8) Seite „Cookie-Einstellungen"
   Gleiche Formensprache wie der Banner, damit die Seite nicht nackt wirkt.
   ============================================================ */
.ax-consent-settings{
  max-width:44rem;
  display:flex;
  flex-direction:column;
  gap:var(--axc-gap);
  padding:var(--axc-pad);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--axc-radius);
  box-shadow:
    0 1px 2px rgba(11,16,32,.04),
    0 18px 44px -30px rgba(23,34,73,.28);
}

/* Statuszeile: Punkt als ::before, damit der von consent.js gesetzte
   innerHTML-Austausch die Markierung nicht entfernt. */
.ax-consent-status{
  margin:0;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:.15rem .5rem;
  padding:var(--space-2) var(--space-3);
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  font-size:.93rem;
  color:var(--ink-2);
  line-height:1.55;
}
.ax-consent-status::before{
  content:"";
  flex:none;
  width:9px; height:9px;
  border-radius:50%;
  background:var(--brand-2);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--brand-2) 18%, transparent);
  transform:translateY(-1px);
}
.ax-consent-status strong{color:var(--ink); font-family:var(--font-head); font-weight:600}

/* Aktionsblock der Einstellungsseite: durch eine feine Linie vom Status
   getrennt, damit die Wahl als eigener Schritt lesbar ist. */
.ax-consent-form{
  margin:0;
  padding-top:var(--axc-gap);
  border-top:1px solid var(--line);
}
.ax-consent-settings .ax-consent-actions{gap:var(--space-1)}

.ax-consent-note{
  margin:0;
  font-size:.85rem;
  line-height:1.6;
  color:var(--muted);
}
.ax-consent-note em{font-style:normal; opacity:.75}

/* .ax-alert kommt aus forms.css, die auf dieser Seite nicht zwingend
   geladen wird – deshalb hier eine eigenständige, identisch anmutende
   Grundform (scoped, damit sie forms.css nirgends sonst überschreibt). */
.ax-consent-settings .ax-alert{
  margin:0;
  padding:var(--space-2) var(--space-3);
  border-radius:var(--r-sm);
  border:1px solid var(--line);
  background:var(--surface-2);
  color:var(--ink);
  font-size:.9rem;
  line-height:1.55;
}
.ax-consent-settings .ax-alert-success{
  background:color-mix(in srgb, var(--brand-3) 14%, var(--surface));
  border-color:color-mix(in srgb, var(--brand-2) 40%, var(--line));
}

[data-theme="dark"] .ax-consent-settings{
  background:var(--surface);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 18px 44px -32px rgba(0,0,0,.8);
}
[data-theme="dark"] .ax-consent-status{background:var(--surface-2)}

/* ============================================================
   9) Bewegung reduzieren
   Ergebniszustand bleibt sichtbar, nur der Weg dorthin entfällt.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .ax-consent-inner{animation:none}
  .ax-consent-actions .ax-consent-btn,
  .ax-consent-actions .ax-consent-btn:hover,
  .ax-consent-actions .ax-consent-btn:active{transform:none}
  .ax-consent-links a{transition:none}
}

/* ============================================================
   10) Kontrast-Modus / erzwungene Farben
   Bei forced-colors verschwinden Hintergründe – die Kante muss dann
   die Fläche tragen, sonst „schwebt" der Banner ohne Begrenzung.
   ============================================================ */
@media (forced-colors:active){
  .ax-consent-inner,
  .ax-consent-settings{border:1px solid CanvasText}
  .ax-consent-actions .ax-consent-btn{border:1px solid ButtonText}
}