/*
 * Design-Tokens Hikel Homes.
 *
 * Einzige Stelle mit Hexwerten. Alles andere im Stylesheet greift auf
 * diese Variablen zu -- so laesst sich das Farbsystem an einem Ort
 * pruefen, und ein Ad-hoc-Farbwert im Komponentencode faellt sofort auf.
 *
 * Merksatz aus dem Design-System: Adria-Blau traegt, Logo-Gruen handelt,
 * Gold adelt. Blau ist die Welt, Gruen ist jede Handlung, Gold ist
 * ausschliesslich Auszeichnung, Empfehlung und Signatur.
 */

:root {
  /* ---- Blau (Basis) ---- */
  --blue-900: #08202c;   /* Footer */
  --blue-800: #0e3d54;   /* dunkles Meeresblau: Trustbar, Buch, CTA-Band */
  --blue-700: #14647f;   /* Primaerfarbe: Headlines, Links, UI, Tags */
  --blue-500: #2f7e97;   /* Verlaufs- und Illustrationston */
  --blue-300: #8ec9da;   /* helles Adria-Blau */
  --blue-100: #eaf2f5;   /* Chip- und Flaechenhintergrund */

  /* ---- Logo-Gruen (Akzent und CTA) ---- */
  --lime-500: #97bc14;   /* Logo-Gruen. Nie als Textfarbe auf hellem Grund */
  --lime-600: #86a90f;   /* Hover von lime-500 */
  --lime-700: #6f8e0b;   /* textsichere Variante auf hellem Grund */
  --lime-300: #c9e356;   /* helles Lime auf dunklem Grund */
  --lime-100: #edf3da;   /* helle Lime-Flaeche: Icon-Kacheln, Haekchen */

  /* ---- Gold (nur Auszeichnung, Empfehlung, Signatur) ---- */
  --gold-500: #c9a227;
  --gold-300: #e3c76a;
  --gold-grad: linear-gradient(135deg, #f0dc96 0%, #d1a92f 52%, #9a7418 100%);
  --gold-ink: #3a2c05;   /* Text auf Goldflaechen */
  --gold-tint: #faf3dd;  /* Hintergrund "Daniels Tipp" */
  --gold-tint-ink: #57430e;
  --gold-schatten: #7a5c11;

  /* ---- Neutral ---- */
  --cream: #faf8f3;      /* Seitenhintergrund */
  --cream-2: #f2ede2;    /* alternierende Sektionen */
  --white: #ffffff;
  --ink: #16303c;        /* Fliesstext */
  --muted: #56707d;      /* Sekundaertext */
  --border: #eae2d3;     /* Kartenraender auf hell */
  --border-fein: #eeeeee;
  --border-feld: #d9d0bd;
  --border-kopf: #e5ddcf;

  /* Text auf dunklen Flaechen. Nie reines Grau, sonst wirkt Blau
     schmutzig statt tief. */
  --auf-dunkel: #d6e8ef;
  --auf-dunkel-labels: #c2d6df;
  --auf-dunkel-leise: #9db4c0;
  --auf-dunkel-fein: #6e8794;
  --auf-lime-ink: #0e2a36;  /* Text auf Lime-Flaechen */
  --auf-dunkel-hero: #eaf5f8;   /* Vorspann im Hero, eine Spur heller als der Rest */
  --auf-dunkel-cta: #c8dde8;    /* Fliesstext im CTA-Band */
  --gold-siegel: #f4e4ac;       /* Schriftzug im Award-Siegel */

  /* ---- Verlaeufe (Bild-Platzhalter, bis echte Fotos da sind) ---- */
  --grad-hero: linear-gradient(180deg, #0e3d54 0%, #14647f 34%, #2e8aa6 58%, #8ec9da 82%, #c9e4ec 100%);
  --grad-meer: linear-gradient(160deg, #2e8aa6, #0e3d54);
  --grad-lime: linear-gradient(160deg, #97bc14, #54700a);
  --grad-tief: linear-gradient(160deg, #2f7e97, #0c2f42);
  --grad-cta: linear-gradient(120deg, #0e3d54, #14647f);
  --grad-buch: linear-gradient(155deg, #14647f 0%, #0e3d54 100%);
  --grad-polaroid: linear-gradient(150deg, #8ec9da 0%, #2e8aa6 55%, #14647f 100%);
  --grad-siegel: radial-gradient(circle at 32% 28%, #123f56, #0b2d40 70%);
  --grad-buchmeer: linear-gradient(180deg, #2e8aa6, #8ec9da);

  /* Regionsflaechen: sechs Toene, damit die Karten nicht wie eine Reihe
     Duplikate wirken, bis die echten Fotos da sind. */
  --grad-r1: linear-gradient(170deg, #3b95b0, #0e3d54);
  --grad-r2: linear-gradient(170deg, #97bc14, #54700a);
  --grad-r3: linear-gradient(170deg, #2f7e97, #0c2f42);
  --grad-r4: linear-gradient(170deg, #8ec9da, #14647f);
  --grad-r5: linear-gradient(170deg, #6aa5c0, #2b5871);
  --grad-r6: linear-gradient(170deg, #5c7c8f, #1c2f3a);

  /* ---- Typografie ---- */
  --serif: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* ---- Layout ---- */
  --breite: 1180px;
  --rand: 24px;
  --sektion: 88px;

  /* ---- Radien ---- */
  --r-knopf: 6px;
  --r-karte: 14px;
  --r-karte-klein: 12px;
  --r-pille: 99px;

  /* ---- Schatten ---- */
  --schatten-karte: 0 6px 24px rgba(14, 61, 84, .08);
  --schatten-karte-hover: 0 20px 48px rgba(14, 61, 84, .16);
  --schatten-weich: 0 16px 40px rgba(14, 61, 84, .12);
  --schatten-suche: 0 24px 60px rgba(10, 40, 55, .35);
  --schatten-buch: 18px 24px 50px rgba(14, 61, 84, .28);
  --schatten-polaroid: 0 18px 44px rgba(0, 0, 0, .28);

  /* Halbtransparente Flaechen auf Blau. Als Token, weil sie in Badges,
     Fakten und Video-Hinweis dieselbe Tiefe halten muessen. */
  --glas: rgba(9, 42, 58, .42);
  --glas-rand: rgba(255, 255, 255, .25);
  --glas-hell: rgba(255, 255, 255, .1);
  --glas-hell-rand: rgba(255, 255, 255, .2);
}