/* ═══════════════════════════════════════════════════════════
   TRAEVEL — design-system-v2.css (Design-Migration 2026-09)
   Komponenten-Muster der v2-Designsprache (dunkles Editorial,
   Reise-Theater, duales Theme). Additiv zum Bestand: bestehende
   Seiten behalten design-system.css (v1); v2-Seiten/Slices laden
   ZUSÄTZLICH diese Datei nach tokens.css und fonts.css.

   Alle Farben/Nur-Werte kommen aus tokens.css v2 (Dark = :root,
   Light = [data-theme=light]) — hier steht KEIN eigener Farbwert.
   Wahrheitsregel: .ds2-example-label ist Pflicht neben jeder
   unbelegten Zahl auf Theater-Flächen (SOUL v2, PRODUCT_CONTRACT §3).
   ═══════════════════════════════════════════════════════════ */

/* ─── Basis ─── */
.ds2-section { padding-block: clamp(48px, 6vw, 80px); }
.ds2-container { width: min(var(--container-wide), calc(100% - 48px)); margin-inline: auto; }

.ds2-display-hero {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-display-hero);
  line-height: 1.065;
  letter-spacing: -0.03em;
  color: var(--text);
  text-wrap: balance;
}
.ds2-display-section {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-display-section);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--text);
}
.ds2-serif-accent {
  font-family: var(--font-serif);
  font-style: italic;
  letter-spacing: -0.01em;
}
.ds2-mono-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs); /* 12px — NUR dekorative Labels ohne Lese-/Klickpflicht (SOUL 14.09.) */
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ds2-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ─── Buttons ─── */
.ds2-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  min-height: 44px; padding: 0 var(--sp-5);
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 500;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.ds2-btn--primary { background: var(--primary); color: var(--text-on-primary); }
.ds2-btn--primary:hover { background: var(--primary-light); }
.ds2-btn--ghost { background: transparent; color: var(--text); border-color: var(--border); }
.ds2-btn--ghost:hover { border-color: var(--primary); color: var(--primary); }
.ds2-btn:focus-visible, .ds2-link:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 3px;
}

/* ─── Flugzeugfenster (Signatur-Bauteil, kanonisch — R44b) ───
   EINE Form (Konzept .airplane-window 1:1): Doppelkurven-Ecken
   46% 46% 43% 43% / 36% 36% 36% 36% — wie ein echtes 737-Fenster,
   KEINE Ellipse. Metallrahmen linear-gradient(133deg, 6 Stops) aus
   tokens.css (--ds2-window-frame-*), Kantenlicht + Doppelring +
   Innen-Lightbevel als EINE zusammengesetzte box-shadow (Budget: 1
   Wert), Scheibe mit Dichtungsring und asymmetrischem Innenschatten
   via ::after aus Gradients (kein weiterer Schattenwert).
   Groesse: Rahmenstaerke ueber --ds2-window-frame (Hero 13px, Karten
   7px), Flaeche ueber den Container. Die FORM variiert nie.
   Waechter: api/tests/window-consistency.test.js (Geometrie-Drift)
   und api/tests/browser/window-fidelity.spec.js (Pixel-Referenz
   evidence/window-reference/). Ueberlagerungen (Orts-Chip) brauchen
   z-index >= 1 — das Scheiben-::after liegt ueber dem Foto. */
.ds2-window {
  --ds2-window-frame: 13px;  /* Rahmenstaerke — Konzept-Hero-Wert */
  --ds2-window-glass: 3px;   /* Dichtungsring der Scheibe */
  position: relative;
  box-sizing: border-box;
  aspect-ratio: .775;        /* kanonische Silhouette (Konzept .hero-window) */
  padding: var(--ds2-window-frame);
  border-radius: 46% 46% 43% 43% / 36% 36% 36% 36%;
  background: linear-gradient(133deg,
    var(--ds2-window-frame-1) 0%, var(--ds2-window-frame-2) 16%,
    var(--ds2-window-frame-3) 32%, var(--ds2-window-frame-4) 66%,
    var(--ds2-window-frame-5) 88%, var(--ds2-window-frame-6) 100%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--ds2-window-bevel) 13%, transparent),
    0 0 0 9px color-mix(in srgb, var(--ds2-window-frame-3) 20%, transparent),
    0 0 0 10px color-mix(in srgb, var(--ds2-window-frame-6) 15%, transparent),
    var(--shadow-lg),
    inset 0 0 5px 1px color-mix(in srgb, var(--ds2-window-bevel) 23%, transparent);
  overflow: hidden;  /* harte Maske: kein Bildrand verlaesst die Form */
  isolation: isolate;
}
/* Breite Fensterscheibe (Detailpanel/Dialog): Fuellhoehe statt
   Silhouette — einzig erlaubte Aspekt-Abweichung, nur hier. */
.ds2-window--pane { aspect-ratio: auto; }
/* Foto fuellt die Scheibe: img haelt die innere Doppelkurve parallel
   zur Aussenform (border-radius: inherit auf dem kleineren Boxmass),
   object-fit: cover staucht nie. Foto-Elemente werden blockfoermig,
   damit picture/figure/links die Scheibe vollstaendig fuellen (div-
   Ueberlagerungen wie Orts-Chips bleiben unberuehrt). */
.ds2-window > img,
.ds2-window > picture,
.ds2-window > figure,
.ds2-window > a,
.ds2-window > button { display: block; }
.ds2-window img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: inherit;
  filter: var(--photo-treatment);
}
.ds2-window::after {
  /* Scheibe ueber dem Foto: Dichtungsring (Konzept .window-inner
     0 0 0 3px) + asymmetrischer Innenschatten + Bodenscrim (Konzept
     .window-shade) — Border/Gradients statt box-shadow, damit das
     Schatten-Budget unberuehrt bleibt. Kanten-Gradients in PX (nicht
     %): echte inset-Schatten sitzen an der Kante, nicht ueber 20% der
     Scheibe. Themeunabhaengig: Eine echte Scheibe schattiert auch im
     Light-Theme dunkel (--ink). */
  content: "";
  position: absolute;
  inset: var(--ds2-window-frame);
  border-radius: inherit;
  border: var(--ds2-window-glass) solid var(--ds2-window-seal);
  background:
    linear-gradient(0deg,
      color-mix(in srgb, var(--ink) 30%, transparent), transparent 34%),
    linear-gradient(160deg,
      color-mix(in srgb, var(--ink) 24%, transparent) 0, transparent 26px),
    linear-gradient(340deg,
      color-mix(in srgb, var(--ink) 32%, transparent) 0, transparent 20px);
  pointer-events: none;
}

/* ─── Abflugtafel (Departure Board) ─── */
.ds2-board {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  font-family: var(--font-mono);
  overflow: hidden;
}
.ds2-board-row {
  display: flex; align-items: baseline; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
}
.ds2-board-row:last-child { border-bottom: 0; }
.ds2-board-route { color: var(--text); letter-spacing: 0.06em; }
.ds2-board-price { margin-left: auto; color: var(--primary); font-weight: 500; }
.ds2-example-label {
  font-family: var(--font-body); font-size: var(--fs-xs);
  color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase;
}

/* ─── Bordkarte (Boarding Card) ─── */
.ds2-boarding-card {
  position: relative;
  display: grid; grid-template-columns: 1fr auto; gap: var(--sp-5);
  background: var(--paper); color: var(--ink);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-5);
}
.ds2-boarding-card::before { /* Perforation zwischen Hauptteil und Abschnitt */
  content: ""; position: absolute; inset-block: 0; right: clamp(96px, 30%, 160px);
  border-left: 2px dashed color-mix(in srgb, var(--ink) 25%, transparent);
}
.ds2-boarding-card .ds2-mono-label { color: color-mix(in srgb, var(--ink) 55%, transparent); }

/* ─── TravelBrief (TRAEVEL KOMPASS) ─── */
.ds2-brief {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  padding: var(--sp-5);
  display: grid; gap: var(--sp-3);
}
.ds2-brief dt { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.ds2-brief dd { margin: 0; color: var(--text-body); font-size: var(--fs-sm); }

/* ─── Wizard-Karte (Hero-Suche ohne Anmeldung) ─── */
.ds2-wizard-card {
  background: var(--paper); color: var(--ink);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl), 0 0 0 1px var(--line);
  padding: var(--sp-5);
}
.ds2-wizard-card .ds2-btn--primary { background: #0d5c63; color: #fff; }
.ds2-wizard-card .ds2-btn--primary:hover { background: #14756e; }

/* Light-Theme: Papier-Karten würden auf Papier-Grund unsichtbar —
   sie werden dort zu weißen Karten (bg-elevated). */
[data-theme="light"] .ds2-boarding-card,
[data-theme="light"] .ds2-wizard-card { background: var(--bg-elevated); }

/* ─── Preis-Ticker (Marquee, pausiert bei Hover, stoppt bei reduced motion) ─── */
.ds2-ticker { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.ds2-ticker-track { display: flex; gap: var(--sp-6); width: max-content; animation: ds2-marquee 45s linear infinite; padding-block: var(--sp-2); }
.ds2-ticker:hover .ds2-ticker-track { animation-play-state: paused; }
@keyframes ds2-marquee { to { transform: translateX(-50%); } }

/* ─── Foto-Behandlung + Hover ─── */
.ds2-photo { filter: var(--photo-treatment); transition: transform var(--dur-slow) var(--travel-ease); }
.ds2-photo-frame:hover .ds2-photo { transform: scale(1.035); }

/* ─── Pills/Chips (Tags, Status, Segmente — keine normalen Aktionen) ─── */
.ds2-pill {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  min-height: 32px; padding: 0 var(--sp-3);
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  font-size: var(--fs-sm); color: var(--text-body);
}
.ds2-pill[aria-pressed="true"], .ds2-pill[aria-selected="true"] {
  border-color: var(--primary); color: var(--primary);
}

/* ─── Theme-Umschalter ─── */
.ds2-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: transparent; color: var(--text);
  cursor: pointer;
}
.ds2-theme-toggle:hover { border-color: var(--primary); color: var(--primary); }
.ds2-theme-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

/* ─── Reduced Motion: alles Theatralische stoppt vollständig ─── */
@media (prefers-reduced-motion: reduce) {
  .ds2-ticker-track { animation: none; }
  .ds2-photo { transition: none; }
  .ds2-btn { transition: none; }
}