/* ============================================================
   Asia Cruise Companion — Design Tokens
   Warme, hochwertige Travel-App: Creme, Petrol, Terracotta.
   ============================================================ */
:root{
  /* Farben */
  --cream: #F8F3EA;
  --cream-deep: #F0E9DB;
  --white: #FFFFFF;
  --paper: #FDFBF7;

  --petrol: #12333B;
  --petrol-deep: #0B242A;
  --petrol-light: #1F4B55;
  --petrol-tint: #E4EBEA;

  --coral: #D97452;
  --coral-deep: #C05F3D;
  --coral-tint: #F7E4DA;

  --ink: #1C2624;
  --ink-soft: #4C5957;
  --ink-faint: #7C8886;
  --border: #E4DCC9;
  --border-strong: #D3C8AE;

  --green: #5C8A66;
  --green-tint: #E7EFE5;
  --amber: #B8813F;
  --amber-tint: #F7EEDC;
  --red: #B2534A;
  --red-tint: #F5E4E1;
  --blue: #4E7A93;
  --blue-tint: #E5EEF2;

  /* Radien */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Schatten */
  --shadow-sm: 0 1px 3px rgba(18,51,59,0.08);
  --shadow-md: 0 8px 24px rgba(18,51,59,0.10);
  --shadow-lg: 0 18px 44px rgba(18,51,59,0.16);

  /* Typografie — durchgängig sans-serif, moderne Travel-App statt Editorial/Magazin.
     --font-display bleibt als Token bestehen (von vielen Screens referenziert),
     zeigt aber bewusst auf denselben Sans-Stack wie --font-body. */
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Layout — mobile-first App-Viewport. Auf Desktop wird EIN zentrierter
     Handy-Viewport gezeigt (kein Editorial-Website-Layout). */
  --max-width: 390px;
  --bottom-nav-height: 68px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* Icon-Größen — konsistente Stroke-Skala */
  --icon-xs: 14px;
  --icon-sm: 17px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-xl: 32px;

  /* Bild-Seitenverhältnisse */
  --ar-hero: 16 / 10;
  --ar-card: 4 / 3;
  --ar-wide: 16 / 9;
  --ar-thumb: 1 / 1;
  --ar-homeHero: 5 / 4.4;
  --ar-portrait: 4 / 5;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--petrol-deep);
  line-height: 1.2;
  margin: 0 0 0.4em;
}
h1{ font-size: 22px; }
h2{ font-size: 19px; }
h3{ font-size: 16px; }
p{ margin: 0 0 1em; color: var(--ink-soft); }
a{ color: inherit; }
button{ font-family: inherit; }
ul{ margin: 0; padding: 0; list-style: none; }
img{ max-width: 100%; display: block; }
input, select, textarea{ font-family: inherit; font-size: 16px; }

/* Alle Icon-SVGs im UI sind inline und bekommen HIER ihre Basisgröße.
   Ohne diese Regel fallen SVGs ohne width/height-Attribut auf die
   Browser-Standardgröße (300x150px) zurück — das war die Ursache der
   überdimensionierten Pfeile. Einzelne Kontexte überschreiben --icon-size
   gezielt (Bottom-Nav, Buttons, Meta-Pills, ...). */
svg.icon{
  --icon-size: var(--icon-md);
  width: var(--icon-size);
  height: var(--icon-size);
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}

:focus-visible{ outline: 2px solid var(--coral); outline-offset: 2px; }

.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;
}