/* =============================================================================
   styles-layout.css — Design Tokens, Reset, Seitenstruktur, Panel-Primitiven
   =============================================================================
   Zweck:   Strukturelle Grundlage der Seite. Enthält Design-Tokens (:root),
            Base-Reset, das Seiten-Layout und die Panel/Bar-Primitiven.
            Wird benötigt auf ALLEN Seiten.

   Geladene CSS-Dateien (Reihenfolge in HTML):
     1. styles-layout.css    — diese Datei
     2. styles-components.css — alle UI-Komponenten (Menü, Karten, Formulare etc.)
   ============================================================================= */

/* --------------------------------------------------------------------------
   Design tokens
   - --x:         Basiseinheit für Abstände und Rundungen (24px)
   - --x-half:    Abgeleitete kleinere Einheit für Cards / Formfelder
   - --x-quarter: Innen-Abstand in Pillen, Links, Pfad-Bubbles
   -------------------------------------------------------------------------- */
:root {
  --x: 24px;
  --x-half: calc(var(--x) / 2);
  --x-quarter: calc(var(--x) / 4);

  --color-page: #ececec;
  --color-surface: #ffffff;
  --color-text: #111111;
  --color-inverse-surface: rgba(255, 255, 255, 0.5);
  --color-inverse-text: #111111;
  --color-toggle: #f4f4f4;
  --color-image: #d9d9d9;
  --color-soft-surface: #f4f4f4;
  --color-soft-surface-strong: #ffffff;
  --color-border-soft: rgba(17, 17, 17, 0.08);
  --color-error: #b07878;
  --color-accent-legal: #6b84c7;
  --color-accent-price: #c7a15a;
  --color-accent-service: #b06b86;
  --color-accent-mail: #8b73c7;

  --desktop-screen-width: 1440px;
  --content-max-width: 640px;

  --font-xl: 48px;
  --font-l: 24px;
  --font-m: 16px;
  --font-s: 12px;

  --font-body: var(--font-m);
  --font-title: var(--font-l);
  --font-brand: var(--font-xl);
  /* Einheitlicher Font-Stack: normal Arial/Helvetica, fett Arial Black mit Apple-System-Fallback. */
  --font-black: "Arial Black", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-regular: Arial, Helvetica, sans-serif;
  --panel-bevel: -6px -6px var(--x-half) rgba(255, 255, 255, 0.75), 6px 6px var(--x-half) rgba(0, 0, 0, 0.125);
  --inner-shadow-soft: inset -2px -2px calc(var(--x) / 4) rgba(255, 255, 255, 0.75), inset 2px 2px calc(var(--x) / 4) rgba(0, 0, 0, 0.125);
}

/* --------------------------------------------------------------------------
   Dark mode — überschreibt alle Tokens, keine Klassen nötig
   Wird via JS gesetzt: document.body.classList.toggle('is-darkmode')
   -------------------------------------------------------------------------- */
body.is-darkmode {
  --color-page: #111111;
  --color-surface: #1c1c1c;
  --color-text: #f1f1f1;
  --color-inverse-surface: rgba(0, 0, 0, 0.35);
  --color-inverse-text: #f1f1f1;
  --color-toggle: #232323;
  --color-image: #2b2b2b;
  --color-soft-surface: #232323;
  --color-soft-surface-strong: #1c1c1c;
  --color-border-soft: rgba(255, 255, 255, 0.12);
  --color-error: #c49090;
  --panel-bevel: -6px -6px var(--x-half) rgba(255, 255, 255, 0.08), 6px 6px var(--x-half) rgba(0, 0, 0, 0.35);
  --inner-shadow-soft: inset -2px -2px calc(var(--x) / 4) rgba(255, 255, 255, 0.08), inset 2px 2px calc(var(--x) / 4) rgba(0, 0, 0, 0.35);
}

/* --------------------------------------------------------------------------
   Base reset
   -------------------------------------------------------------------------- */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--color-page);
  color: var(--color-text);
  font-family: var(--font-regular);
  font-size: var(--font-body);
}

p {
  margin: 0;
  line-height: 1.5;
}

.btn-reset {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Layout shell
   - `.page` begrenzt die Gesamtbreite auf --content-max-width (640px)
   - `.stack` ist der vertikale Content-Container mit Gap
   -------------------------------------------------------------------------- */
.page {
  width: min(100%, var(--content-max-width));
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--x-half) 0 0;
  display: flex;
  flex-direction: column;
}

.stack {
  display: grid;
  gap: var(--x-half);
  margin-top: var(--x);
}

.stack--tight {
  margin-top: 0;
}

.stack-content {
  padding: 0 var(--x-half);
}

.product-list,
.cart-list,
.info-panel {
  display: grid;
  gap: var(--x-half);
}

/* --------------------------------------------------------------------------
   Panel / bar primitiven
   - `.panel` ist die visuelle Grundeinheit (weißer Kasten mit Bevel-Shadow)
   - `.panel-header` / `.panel-footer` — sticky Header- und Footer-Leiste
   - `.panel-content` — normaler Inhalts-Kasten mit Padding
   - `.panel-footer:not(.panel-footer-spacer)` — fix positioniert am unteren Rand
   -------------------------------------------------------------------------- */
.panel {
  width: 100%;
  max-width: 100%;
  background: var(--color-surface);
  box-shadow: var(--panel-bevel);
}

.panel-header,
.panel-footer {
  border-radius: var(--x);
}

.panel-content {
  padding: var(--x-half);
  border-radius: var(--x-half);
}

.panel-content--flush {
  padding: 0;
  overflow: visible;
  box-shadow: none;
}

.panel-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--x-half);
  padding: var(--x);
}

.panel-footer {
  width: 100%;
  background: var(--color-inverse-surface);
  -webkit-backdrop-filter: blur(4.5px) contrast(0.5);
  backdrop-filter: blur(4.5px) contrast(0.5);
  box-shadow: none;
}

.panel-footer-spacer {
  margin-top: var(--x-half);
  margin-bottom: var(--x-half);
  opacity: 0;
  pointer-events: none;
}

.panel-footer:not(.panel-footer-spacer) {
  position: fixed;
  left: 50%;
  bottom: var(--x-half);
  transform: translateX(-50%);
  width: min(100%, var(--content-max-width));
  margin: 0;
}