/* ============================================================
 * Geschenke-Koordinations-Tool — style.css V1
 * ------------------------------------------------------------
 * Gemeinsame CSS-Basis für alle 4 Sichten:
 *   • wunschliste.html  (Jannis, vor Event)
 *   • dankesicht.html   (Jannis, nach Archivierung)
 *   • admin.html        (Sarah, 4 Tabs + Toggle)
 *   • index.html        (Freunde, anonym)
 *
 * Aufbau dieser Datei (zum Springen):
 *   1) Design-Tokens (Custom Properties / Variablen)
 *   2) Reset & Base-Defaults
 *   3) Typographie
 *   4) Layout-Primitives  (Header, Section, Container)
 *   5) Buttons
 *   6) Form-Elemente (Inputs, Radios, Checkboxen)
 *   7) Karten (Item-Card, Buyer-Card etc.)
 *   8) Status-Indikatoren (●●○ Slots, ⏰ Deadlines, 💰⏳ Pay, 🆕 New)
 *   9) Tabs (WAI-ARIA, Sarah-Sicht)
 *  10) Toggle (Admin/Meine Geschenke, Sarah-Sicht)
 *  11) Dialoge (Modals) + Onboarding-Overlay
 *  12) Utility-Klassen
 *  13) Accessibility-Helfer & Media-Queries
 *  14) Dark-Mode-Vorbereitung (V2 — Werte erst dann füllen)
 *
 * Design-Anker: Apple-Clean
 *   • Hintergrund: Weiß, viel Weißraum
 *   • Schrift: System-Stack (SF Pro / -apple-system)
 *   • Akzent: Apple-Blau (CTA, Links) + warmes Korall (Geburtstags-Anker)
 *   • Rundungen dezent, Schatten nur bei aktiven Modals
 *   • Touch-Targets min 44×44 px (Apple-HIG)
 * ============================================================ */


/* ============================================================
 * 1) DESIGN-TOKENS
 * ------------------------------------------------------------
 * CSS Custom Properties: zentrale Stellschrauben.
 * Wenn du z.B. den Akzent von Blau auf Grün ändern willst,
 * änderst du NUR `--color-primary` — der Rest folgt automatisch.
 * ============================================================ */

:root {
  /* ── FARBEN: NEUTRALE ── */
  --color-bg:            #ffffff;   /* Hintergrund Seite */
  --color-bg-elevated:   #fbfbfd;   /* leicht erhöhte Fläche (Cards bei Bedarf) */
  --color-bg-muted:      #f5f5f7;   /* sehr dezenter Grau-Hintergrund */
  --color-text:          #1d1d1f;   /* Haupttext, Apple-Schwarz */
  --color-text-muted:    #6e6e73;   /* sekundärer Text, Hinweise */
  --color-text-subtle:   #86868b;   /* tertiär, z.B. Meta-Info */
  --color-border:        #d2d2d7;   /* Trennlinien, Card-Rand */
  --color-border-subtle: #ebebef;   /* sehr leichte Linie */

  /* ── FARBEN: AKZENTE ── */
  --color-primary:       #0071e3;   /* Apple-Blau: CTA-Buttons, Links */
  --color-primary-hover: #0077ed;   /* leicht heller bei Hover */
  --color-primary-soft:  #e8f1fd;   /* sehr blasser Blau-Hintergrund */

  --color-warm:          #ff7a5c;   /* Geburtstag-Akzent: warmes Korall */
  --color-warm-soft:     #fff0eb;   /* blasser Korall-Hintergrund */

  /* ── FARBEN: STATUS ── */
  --color-success:       #34c759;   /* bezahlt, freigegeben (Apple-Grün) */
  --color-success-soft:  #e8f8ec;
  --color-warning:       #ff9500;   /* Deadline warning (Apple-Orange) */
  --color-warning-soft:  #fff4e5;
  --color-danger:        #ff3b30;   /* heute letzter Tag, Stornieren (Apple-Rot) */
  --color-danger-soft:   #ffeae8;

  /* ── SCHRIFT ── */
  --font-base:
    -apple-system,           /* iOS/iPadOS/macOS Safari */
    BlinkMacSystemFont,      /* macOS Chrome */
    "SF Pro Text",
    "SF Pro Display",
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;

  /* Schriftgrößen — mobile-first, dezent skaliert für Desktop unten */
  --fs-xs:    12px;   /* Meta, Captions */
  --fs-sm:    14px;   /* Hint-Text, Labels klein */
  --fs-base:  16px;   /* Standard-Body */
  --fs-lg:    18px;   /* leicht hervorgehoben */
  --fs-xl:    22px;   /* Card-Titel */
  --fs-2xl:   28px;   /* Section-Header */
  --fs-3xl:   34px;   /* Seiten-Titel */

  /* Schriftgewichte */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  /* Zeilenhöhen */
  --lh-tight:   1.2;   /* für große Titel */
  --lh-normal:  1.5;   /* Body */
  --lh-relaxed: 1.6;   /* lange Erklär-Texte */

  /* ── SPACING (8-Punkt-Raster, mit 4px-Halbschritt) ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  16px;
  --space-4:  24px;
  --space-5:  32px;
  --space-6:  48px;
  --space-7:  64px;

  /* ── RUNDUNGEN ── */
  --radius-sm:    6px;    /* Slot-Punkte, kleine Badges */
  --radius-md:    8px;    /* Buttons, Inputs */
  --radius-lg:    12px;   /* Karten (Brief-Standard) */
  --radius-xl:    20px;   /* Modals/Dialoge */
  --radius-pill:  9999px; /* Pill-Badges */

  /* ── SCHATTEN (sehr subtil, Apple-Stil) ── */
  --shadow-card:    0 1px 2px rgba(0, 0, 0, 0.04);              /* Karten dezent abgesetzt */
  --shadow-modal:   0 10px 40px rgba(0, 0, 0, 0.16);            /* Modal über Backdrop */
  --shadow-toast:   0 4px 16px rgba(0, 0, 0, 0.10);             /* Toast-Nachrichten */

  /* ── TOUCH-TARGETS (Apple-HIG) ── */
  --touch-min: 44px;

  /* ── ANIMATIONEN ── */
  --easing-apple:   cubic-bezier(0.32, 0.72, 0, 1);  /* Apple's "sanfter" Ease */
  --duration-fast:  120ms;
  --duration-base:  200ms;
  --duration-slow:  320ms;

  /* ── Z-LAYER (übersichtlich, lassen Luft für Zwischen-Layer) ── */
  --z-toast:       100;
  --z-modal:       200;
  --z-onboarding:  300;

  /* ── CONTAINER-BREITEN ── */
  --width-content: 640px;  /* primäre Lese-Breite, auch auf Desktop nicht breiter */
  --width-narrow:  480px;  /* schmaler für Modals/Formulare */
}


/* ============================================================
 * 2) RESET & BASE-DEFAULTS
 * ------------------------------------------------------------
 * Minimaler, moderner Reset.
 * Bewusst klein gehalten — wir wollen nicht Bootstrap reimplementieren.
 * ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;     /* "Padding + Border zählen zur Breite" — vorhersagbares Layout */
  margin: 0;
  padding: 0;
}

/* hidden-Attribut "scharf" machen: schlägt JEDE display-Klasse (.row/.btn/.card …).
   Ohne !important gewinnt sonst z.B. `.row { display:flex }` gegen das eingebaute
   [hidden] → versteckte V1/V2-Elemente (Toggle, Buttons, Mounts) blieben sichtbar. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;  /* iOS skaliert sonst Schrift bei Rotation */
  -webkit-tap-highlight-color: transparent;  /* iOS-Tap-Flash entfernen, wir machen eigenen */
  background: var(--color-bg);     /* V6.4: hist. wegen bg-photo-stage gesetzt — bleibt, html trägt weiterhin den BG */
}

body {
  font-family: var(--font-base);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--color-text);
  background: transparent;          /* V6.4: hist. wegen bg-photo-stage — schadet nicht (html liefert BG) */
  min-height: 100vh;
  /* Bessere Font-Renderung auf macOS/iOS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, picture, video {
  max-width: 100%;
  display: block;
}

button {
  font: inherit;     /* Buttons erben Schrift, nicht System-Default */
  cursor: pointer;
  border: 0;
  background: transparent;
  color: inherit;
}

input, textarea, select {
  font: inherit;
  color: inherit;
}

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

/* Klick-Outline nur für Keyboard-Nutzer, nicht für Maus.
 * Das ist Apple-Standard: sichtbarer Focus-Ring nur bei TAB-Navigation. */
:focus {
  outline: none;
}
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}


/* ============================================================
 * 3) TYPOGRAPHIE
 * ============================================================ */

h1, h2, h3, h4 {
  line-height: var(--lh-tight);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;   /* leicht enger, wirkt premium */
}
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }

p { line-height: var(--lh-normal); }

.text-muted   { color: var(--color-text-muted); }
.text-subtle  { color: var(--color-text-subtle); }
.text-small   { font-size: var(--fs-sm); }
.text-xs      { font-size: var(--fs-xs); }


/* ============================================================
 * 4) LAYOUT-PRIMITIVES
 * ============================================================ */

/* Page-Container: zentriert, max-Breite, Sicherheitsabstand seitlich */
.page {
  max-width: var(--width-content);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

/* V6.4: Page-Header als solid weiße Card — analog zu Item-Cards.
 * (V6.3 hatte hier zusätzlich z-index:2 zum Schutz gegen Polaroids — V6.4
 * ohne Polaroids überflüssig, daher zurückgesetzt.) */
.page-header {
  padding: var(--space-3);
  background: var(--color-bg);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-3);
}

/* V6.4: .section > p Card-Look-Block entfernt — war V6.3-Polaroid-Schutz.
 * Ohne Polaroids dürfen Hinweis-Texte wieder nackt sein (Apple-Clean-Anker).
 * V6.4: .item-card { position: relative } entfernt — war ebenfalls nur
 * V6.3-Polaroid-Stacking-Context-Vorkehrung. */
.page-header__title {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}
.page-header__subtitle {
  margin-top: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

.section {
  margin: var(--space-4) 0;
}
/* V6.4: .section__title z-index-Schutz entfernt — war V6.3-Polaroid-Workaround. */
.section__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-3);
}

/* Stack: vertikales Layout mit konsistentem Abstand zwischen Kindern */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.stack--tight { gap: var(--space-2); }
.stack--loose { gap: var(--space-4); }

/* Row: horizontales Layout, wrap erlaubt */
.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* Divider — horizontale Linie wie iOS Settings */
.divider {
  height: 1px;
  background: var(--color-border-subtle);
  border: 0;
  margin: var(--space-4) 0;
}


/* ============================================================
 * 5) BUTTONS
 * ------------------------------------------------------------
 * BEM:
 *   .btn                Basis
 *   .btn--primary       blau gefüllt (Haupt-CTA, "Speichern")
 *   .btn--secondary     hell, Rand (Nebenaktion)
 *   .btn--ghost         transparent, nur Text (Tertiär)
 *   .btn--danger        rotes Stornieren/Löschen
 *   .btn--full          volle Breite
 *   .btn[disabled]      ausgegraut
 * ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--touch-min);   /* Apple-HIG */
  padding: 0 var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  text-align: center;
  transition: background var(--duration-fast) var(--easing-apple),
              transform var(--duration-fast) var(--easing-apple),
              opacity var(--duration-fast) var(--easing-apple);
  user-select: none;
  -webkit-user-select: none;
}
.btn:active {
  transform: scale(0.98);   /* iOS-typisches "press-in" */
}
.btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.btn--primary {
  background: var(--color-primary);
  color: #ffffff;
}
.btn--primary:hover { background: var(--color-primary-hover); }

.btn--secondary {
  background: var(--color-bg-muted);
  color: var(--color-text);
}
.btn--secondary:hover { background: var(--color-border-subtle); }

.btn--ghost {
  background: transparent;
  color: var(--color-primary);
  padding: 0 var(--space-3);
}
.btn--ghost:hover { background: var(--color-primary-soft); }

.btn--danger {
  background: var(--color-danger);
  color: #ffffff;
}

.btn--full {
  display: flex;
  width: 100%;
}

/* Chip-Button (kompakt, für ÷X-Schnellwahl im Spendentopf-Dialog) */
.btn--chip {
  width: auto;
  padding: var(--space-1) var(--space-3);
  font-size: var(--fs-sm);
  border-radius: var(--radius-pill);
}


/* ============================================================
 * 6) FORM-ELEMENTE
 * ------------------------------------------------------------
 * BEM:
 *   .field                 Wrapper für Label + Input + Hint
 *   .field__label          das Label drüber
 *   .field__input          Input/Textarea
 *   .field__hint           Hilfetext drunter
 *   .field__hint--error    Fehler-Rot
 *   .field__counter        "0 / 500 Zeichen"
 *   .field--required ::after-Sternchen
 * ============================================================ */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.field__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text);
}
.field--required .field__label::after {
  content: " *";
  color: var(--color-danger);
}
.field__input {
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  transition: border-color var(--duration-fast),
              box-shadow var(--duration-fast);
}
.field__input:focus-visible {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
  outline: none;
}
textarea.field__input {
  min-height: 96px;
  resize: vertical;
  font-family: var(--font-base);
}
.field__hint {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}
.field__hint--error {
  color: var(--color-danger);
}
.field__counter {
  align-self: flex-end;
  font-size: var(--fs-xs);
  color: var(--color-text-subtle);
}

/* Radio-Gruppe als iOS-Settings-Liste */
.radio-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg);
}
.radio-list__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--touch-min);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  border-bottom: 1px solid var(--color-border-subtle);
}
.radio-list__item:last-child { border-bottom: 0; }
.radio-list__item:has(input:checked) {
  background: var(--color-primary-soft);
}
.radio-list__item input[type="radio"] {
  /* Browser-Default zeigt iOS-konformes Radio — kein Custom-Styling nötig */
  accent-color: var(--color-primary);   /* eingebautes Theming, modern */
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.radio-list__label {
  flex: 1;
}
.radio-list__meta {
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;   /* Zahlen-Spalten sauber rechts */
}

/* Checkbox-Zeile (Datenschutz) */
.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  cursor: pointer;
  padding: var(--space-2) 0;
  min-height: var(--touch-min);
}
.checkbox-row input[type="checkbox"] {
  accent-color: var(--color-primary);
  width: 20px;
  height: 20px;
  margin-top: 2px;
  flex-shrink: 0;
}


/* ============================================================
 * 7) KARTEN
 * ------------------------------------------------------------
 * Allgemeine Card + Item-Card-Variante mit BEM:
 *   .card               Basis-Container
 *   .item-card          Item-spezifisch (Titel + Preis + Meta + Buttons)
 *   .item-card__body    Text-Bereich (links)
 *   .item-card__title
 *   .item-card__price
 *   .item-card__meta
 *   .item-card__actions  Buttons (rechts)
 *   .item-card--locked   sanft ausgegraut (Cutoff vorbei, voll, etc.)
 *   .item-card--full     Voll-belegt-State (V6.4 ohne Funktion — Bild-Overlay raus)
 *   .item-card--new      🆕-Marker (siehe Status-Indikatoren)
 *
 * V6.4: .item-card__media (Bild-Bereich) entfernt — Listen-Look ohne Bilder.
 * Buyer-Card (Sarah-Sicht) + Recovery-Card folgen demselben Stil.
 * ============================================================ */

.card {
  background: var(--color-bg);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  box-shadow: var(--shadow-card);
}

/* V6.4: Item-Card als horizontale Listen-Zeile [Body flex:1] [Actions].
 * V6.3 hatte noch Bild-Spalte links — V6.4 ohne Bilder, 2 Spalten reichen.
 * Card trägt jetzt direkt Padding (war vorher auf Body+Actions verteilt). */
.item-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: row;
  align-items: center;            /* V6.4: stretch → center (kein Bild, das stretchen muss) */
  gap: var(--space-3);
  padding: var(--space-3);
}
/* V6.4: Body als linke Spalte (Titel, Preis, Meta) — nimmt Rest-Breite.
 * min-width:0 erlaubt Text-Wrap (sonst overflow). */
.item-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.item-card__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
}
.item-card__price {
  font-size: var(--fs-base);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.item-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
/* V6.4: Actions als rechte Spalte. Buttons horizontal nebeneinander (gap). */
.item-card__actions {
  flex-shrink: 0;
  display: flex;
  gap: var(--space-2);
}

/* V6.4: Mobile-Anpassung — kompakteres Padding/Gap.
 * Buttons bleiben NEBENEINANDER (V6.3 hatte sie auf Mobile gestapelt —
 * Jannis wollte das nach iPhone-Test geändert).
 * Greift bei iPhone SE (320 px) bis kleine Android-Phones (≤479 px). */
@media (max-width: 479px) {
  .item-card {
    padding: var(--space-2);
    gap: var(--space-2);
  }
  .item-card__actions {
    gap: var(--space-1);
  }
}

.item-card--locked {
  opacity: 0.5;
  pointer-events: none;       /* Cutoff vorbei → nicht klickbar */
}
/* V6.4: .item-card--full .item-card__media::after "VOLL"-Overlay entfernt
 * (kein __media-Element mehr). VOLL-Status wird jetzt nur noch durch
 * slots__caption "VOLL" angezeigt (siehe index.html renderItems-Logik). */


/* ============================================================
 * 8) STATUS-INDIKATOREN — die ASCII-Symbole als CSS
 * ------------------------------------------------------------
 * MAP (was Wireframes nutzen → was HTML/CSS daraus macht):
 *
 *   ●●○          → <span class="slots">
 *                     <span class="slot slot--filled"></span>
 *                     <span class="slot slot--filled"></span>
 *                     <span class="slot slot--empty"></span>
 *                   </span>
 *
 *   ⏰ Cutoff …   → <span class="deadline-badge deadline-badge--normal/warning/today/expired">
 *
 *   💰 bezahlt   → <span class="pay-badge pay-badge--paid">
 *   ⏳ offen     → <span class="pay-badge pay-badge--pending">
 *
 *   🆕           → .item-card--new::before (Pseudo-Element-Marker)
 * ============================================================ */

/* ── SLOTS (●●○) ── */
.slots {
  display: inline-flex;
  gap: var(--space-1);
  align-items: center;
}
.slot {
  width: 14px;
  height: 14px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-warm);   /* Korall = Geburtstag-Anker */
  background: transparent;
  flex-shrink: 0;
}
.slot--filled {
  background: var(--color-warm);
}
.slot--empty {
  background: transparent;
}
/* Optional: Zahl daneben, z.B. "2 / 3 belegt" */
.slots__caption {
  margin-left: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

/* ── SPENDENTOPF-BALKEN (Fortschritt collected/price) ──
 * Löst die Slot-Punkte ●●○ ab (Spendentopf-Modell V4).
 * .pot-bar = Schiene, .pot-bar__fill = gefüllter Anteil (Breite per JS in %).
 * Voll → __fill--full färbt grün, Caption zeigt "✅ Gesichert"-Badge. */
.pot {
  display: block;
  margin: var(--space-2) 0;
}
.pot-bar {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-bg-muted);
  overflow: hidden;
}
.pot-bar__fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--color-warm);          /* Korall = Geburtstag-Anker */
  transition: width 0.3s ease;
}
.pot-bar__fill--full {
  background: var(--color-success);       /* Topf gedeckt → Apple-Grün */
}
.pot__caption {
  margin-top: var(--space-1);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

/* ── BETRAGS-FELD mit €-Präfix (Reserve-Dialog Spendentopf) ── */
.amount-field {
  position: relative;
  display: flex;
  align-items: center;
}
.amount-field__currency {
  position: absolute;
  left: var(--space-3);
  font-size: var(--fs-lg);
  color: var(--color-text-muted);
  pointer-events: none;
}
.amount-field__input {
  padding-left: calc(var(--space-3) + 1.2em);
  font-size: var(--fs-lg);
}

/* ── DEADLINE-BADGE (⏰) ── */
.deadline-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}
.deadline-badge::before {
  content: "⏰";
  font-size: var(--fs-sm);
}
.deadline-badge--normal {
  background: var(--color-bg-muted);
  color: var(--color-text-muted);
}
.deadline-badge--warning {
  background: var(--color-warning-soft);
  color: #b45309;     /* dunkleres Orange für Kontrast */
}
.deadline-badge--today {
  background: var(--color-danger-soft);
  color: var(--color-danger);
  font-weight: var(--fw-semibold);
}
.deadline-badge--expired {
  background: var(--color-bg-muted);
  color: var(--color-text-subtle);
  text-decoration: line-through;
}

/* ── PAY-BADGE (💰⏳) — nur Sarah-Sicht ── */
.pay-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
}
.pay-badge--paid {
  background: var(--color-success-soft);
  color: #166534;     /* dunkleres Grün */
}
.pay-badge--paid::before { content: "💰 "; }
.pay-badge--pending {
  background: var(--color-warning-soft);
  color: #b45309;
}
.pay-badge--pending::before { content: "⏳ "; }

/* ── 🆕-MARKER (Pseudo-Element auf neuen Items in Sarah-Sicht) ── */
.item-card--new {
  position: relative;
}
.item-card--new::before {
  content: "🆕 NEU";
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  z-index: 1;
  padding: var(--space-1) var(--space-2);
  background: var(--color-warm);
  color: #ffffff;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-pill);
  letter-spacing: 0.02em;
}

/* ── "Nur Solo" / "noch frei" / generische Info-Badges ── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
}
.badge--neutral { background: var(--color-bg-muted); color: var(--color-text-muted); }
.badge--info    { background: var(--color-primary-soft); color: var(--color-primary); }
.badge--warm    { background: var(--color-warm-soft); color: #c2410c; }
.badge--success { background: var(--color-success-soft); color: #1a7f37; }


/* ============================================================
 * 9) TABS (Sarah-Sicht, WAI-ARIA konform)
 * ------------------------------------------------------------
 * Markup-Beispiel (Stichwort, nicht zum Kopieren):
 *
 *   <div role="tablist" class="tab-list" aria-label="Admin-Sichten">
 *     <button role="tab" aria-selected="true"  aria-controls="panel-items" id="tab-items"   class="tab tab--active">Items <span class="tab__count">7</span></button>
 *     <button role="tab" aria-selected="false" aria-controls="panel-buyers" id="tab-buyers" class="tab">Käufer <span class="tab__count">12</span></button>
 *     …
 *   </div>
 *   <div role="tabpanel" id="panel-items" aria-labelledby="tab-items" class="tab-panel">…</div>
 *
 * `aria-selected="true"` wird per JS getoggled — die Klasse `.tab--active`
 * folgt rein optisch.
 * ============================================================ */

.tab-list {
  display: flex;
  gap: var(--space-1);
  overflow-x: auto;             /* horizontales Scrollen auf engen Screens */
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid var(--color-border-subtle);
  padding-bottom: 1px;
  margin: 0 calc(var(--space-3) * -1) var(--space-3);
  padding: 0 var(--space-3);
}
.tab-list::-webkit-scrollbar { display: none; }

.tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--touch-min);
  padding: 0 var(--space-3);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--duration-fast), border-color var(--duration-fast);
}
.tab:hover { color: var(--color-text); }
.tab--active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}
.tab__count {
  font-size: var(--fs-xs);
  background: var(--color-bg-muted);
  color: var(--color-text-muted);
  padding: 1px var(--space-1);
  border-radius: var(--radius-pill);
  min-width: 20px;
  text-align: center;
}
.tab--active .tab__count {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}
/* Warn-Variante für "Moderation 3" / "Recovery 1" */
.tab__count--warn {
  background: var(--color-warning-soft);
  color: #b45309;
}

.tab-panel {
  display: none;
}
.tab-panel--active {
  display: block;
}


/* ============================================================
 * 10) TOGGLE (Admin / Meine Geschenke, Sarah-Sicht)
 * ------------------------------------------------------------
 * Segmented Control wie iOS.
 * Markup:
 *   <div role="tablist" class="toggle">
 *     <button role="tab" aria-selected="true"  class="toggle__option toggle__option--active">Admin</button>
 *     <button role="tab" aria-selected="false" class="toggle__option">Meine Geschenke</button>
 *   </div>
 * ============================================================ */

.toggle {
  display: inline-flex;
  background: var(--color-bg-muted);
  border-radius: var(--radius-md);
  padding: 2px;
}
.toggle__option {
  min-height: 36px;             /* etwas kleiner als Touch-min, weil Container Touch-konform */
  padding: 0 var(--space-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  border-radius: calc(var(--radius-md) - 2px);
  transition: background var(--duration-fast), color var(--duration-fast);
}
.toggle__option--active {
  background: var(--color-bg);
  color: var(--color-text);
  box-shadow: var(--shadow-card);
}


/* ============================================================
 * 11) DIALOGE (Modals) + ONBOARDING-OVERLAY
 * ------------------------------------------------------------
 * Wir nutzen das HTML-native <dialog>-Element.
 * Vorteile: Tastatur (Esc schließt), Fokus-Trap, Backdrop frei steuerbar.
 *
 * Markup:
 *   <dialog class="dialog" id="add-item-dialog">
 *     <form method="dialog" class="dialog__form">
 *       <header class="dialog__header">…</header>
 *       <div class="dialog__body">…</div>
 *       <footer class="dialog__footer">…</footer>
 *     </form>
 *   </dialog>
 *
 * Öffnen per JS: dialog.showModal()
 * Schließen: dialog.close() oder ESC-Taste (browser-nativ).
 * ============================================================ */

.dialog {
  border: 0;
  padding: 0;
  background: var(--color-bg);
  border-radius: var(--radius-xl);
  max-width: var(--width-narrow);
  width: calc(100% - var(--space-4));
  max-height: 90dvh;            /* dvh = dynamic viewport height, iOS-safe */
  overflow: hidden;
  box-shadow: var(--shadow-modal);
}
.dialog::backdrop {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
}
.dialog__form {
  display: flex;
  flex-direction: column;
  max-height: inherit;
}
.dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
}
.dialog__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
}
.dialog__close {
  width: var(--touch-min);
  height: var(--touch-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
}
.dialog__close:hover {
  background: var(--color-bg-muted);
}
.dialog__body {
  padding: var(--space-3);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.dialog__footer {
  padding: var(--space-3);
  border-top: 1px solid var(--color-border-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: var(--color-bg);
}

/* ── Bottom-Sheet-Modifier ──
 * Für 3F (Meine Beiträge, Freunde-Sicht).
 * Klebt das <dialog> an den unteren Bildschirmrand wie ein iOS-Bottom-Sheet.
 * Vorteil: gleiche <dialog>-API (Esc, Backdrop, Fokus-Trap) — nur Position anders.
 * Markup: <dialog class="dialog dialog--bottom" id="...">
 */
.dialog.dialog--bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  width: 100%;
  max-width: 100%;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  /* Safe-Area-Padding für iPhones mit Home-Indicator */
  padding-bottom: env(safe-area-inset-bottom);
}

/* Onboarding-Overlay: vollständige Schicht über Hauptinhalt.
 * Kein <dialog>, weil es beim ersten Besuch sofort zeigt und Hauptseite blockt. */
.onboarding-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-onboarding);
  background: var(--color-bg);
  overflow-y: auto;
  padding: var(--space-4) var(--space-3) calc(env(safe-area-inset-bottom) + var(--space-4));
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.onboarding-overlay__inner {
  max-width: var(--width-narrow);
  width: 100%;
}


/* ============================================================
 * 12) UTILITY-KLASSEN
 * ============================================================ */

.hidden        { display: none !important; }
.invisible     { visibility: hidden; }
.full-width    { width: 100%; }
.center-text   { text-align: center; }
.mt-2          { margin-top: var(--space-2); }
.mt-3          { margin-top: var(--space-3); }
.mt-4          { margin-top: var(--space-4); }
.mb-2          { margin-bottom: var(--space-2); }
.mb-3          { margin-bottom: var(--space-3); }
.mb-4          { margin-bottom: var(--space-4); }


/* ============================================================
 * 13) ACCESSIBILITY-HELFER & MEDIA-QUERIES
 * ============================================================ */

/* Screen-Reader-only Text (z.B. für Icon-Buttons ohne Label) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Reduced Motion: Apple-HIG. Wenn Nutzer iOS auf "Bewegungen reduzieren" hat,
 * schalten wir Animationen praktisch ab. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Desktop (≥ 768 px): leicht größere Schrift, mehr Luft */
@media (min-width: 768px) {
  :root {
    --fs-base:  17px;
    --fs-lg:    19px;
    --fs-xl:    24px;
    --fs-2xl:   32px;
    --fs-3xl:   40px;
  }
  .page {
    padding: 0 var(--space-4);
  }
}


/* ============================================================
 * 14) DARK-MODE-VORBEREITUNG (V2)
 * ------------------------------------------------------------
 * Aktiv schaltbar per <html data-theme="dark"> ODER automatisch
 * über System-Preference (@media prefers-color-scheme: dark).
 *
 * V1: Werte sind leere Platzhalter — wir lassen die Light-Tokens stehen,
 *     damit V1 immer Light bleibt, egal was das System sagt.
 *
 * V2: Hier die echten Dark-Mode-Farben füllen. Struktur steht bereits.
 * ============================================================ */

[data-theme="dark"] {
  /* TODO V2: Dark-Mode-Werte einsetzen, z.B.:
     --color-bg:            #1d1d1f;
     --color-bg-elevated:   #2c2c2e;
     --color-text:          #f5f5f7;
     --color-text-muted:    #a1a1a6;
     --color-border:        #3a3a3c;
     etc.
  */
}

/* Wenn V2 mit Auto-Switch laufen soll, diesen Block aktivieren:
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    Übernimmt automatisch Dark-Mode bei iOS/macOS-Systemeinstellung.
  }
}
*/


/* ============================================================
 * 15) BACKGROUND PHOTO STAGE — entfernt in V6.4
 * ------------------------------------------------------------
 * Polaroid-Säulen waren V4.0 bis V6.3.
 * V6.4 (2026-06-20): Komplett entfernt auf Wunsch von Jannis nach iPhone-Test
 * ("Bilder waren mir zu viel"). bg-images.js + img/bg/-Ordner bleiben im Repo
 * für mögliche Reaktivierung (alter CSS-Code in Git-Historie nachvollziehbar).
 * ============================================================ */


/* ============================================================
 * 16) DANKESICHT (1D) — sichtspezifische Mini-Komponenten
 * ------------------------------------------------------------
 * Nur auf dankesicht.html.
 * Listet pro Item die Käufer mit 🎁 + Name.
 * Käufer-Anonymität ist hier bewusst aufgehoben (Post-Event,
 * das ist der Spaß-Moment).
 * ============================================================ */

.thanks-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.thanks-list__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-base);
}
.thanks-list__item::before {
  content: "🎁";
  font-size: var(--fs-base);
}
.thanks-meta {
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

/* Dankschön-Schluss-Banner: ❤️ Danke an alle! */
.thanks-footer {
  text-align: center;
  margin: var(--space-5) 0;
  font-size: var(--fs-lg);
  color: var(--color-text-muted);
}