/* token.css – UI Tokens (Erweiterung) */
:root{
  /* ============================================================
     Farb-Basis (bestehend bei dir)
     ============================================================ */
  /* --navy, --brand, --accent, --ink, --muted, --bg, --bg-soft, ... */

  /* ============================================================
     RGB-Ableitungen (für rgba() ohne Hardcodes)
     ============================================================ */
  --ink-rgb: 11,18,32;         /* entspricht deinem rgba(11,18,32,...) */
  --brand-rgb: 14,58,90;       /* entspricht #0E3A5A */

  /* ============================================================
     Surfaces
     ============================================================ */
  --surface: var(--card-bg, #fff);
  --surface-2: var(--bg-soft, #F4F7FA);
  --surface-glass: rgba(255,255,255,.92);

  /* ============================================================
     Border / Divider
     ============================================================ */
  --border-soft: rgba(var(--ink-rgb), .08);
  --border:      rgba(var(--ink-rgb), .10);
  --border-strong: rgba(var(--ink-rgb), .14);
  --divider:     rgba(var(--ink-rgb), .10);

  /* ============================================================
     Shadows (UI konsistent)
     ============================================================ */
  --shadow-section: 0 10px 28px rgba(var(--ink-rgb), .08);
  --shadow-sticky:  0 6px 18px rgba(0,0,0,.06);
  --shadow-active:  0 6px 16px rgba(var(--ink-rgb), .10);
  --shadow-modal:   0 18px 60px rgba(var(--ink-rgb), .25);

  /* ============================================================
     Pills / Filter Buttons (Termine)
     ============================================================ */
  --pill-bg: rgba(var(--ink-rgb), .04);
  --pill-border: rgba(var(--ink-rgb), .06);

  --btn-neutral-border: rgba(var(--ink-rgb), .10);
  --btn-neutral-text: rgba(var(--ink-rgb), .78);

  --btn-active-bg: rgba(var(--brand-rgb), .10);
  --btn-active-border: rgba(var(--brand-rgb), .28);
  --btn-active-text: rgba(var(--brand-rgb), 1);

  --btn-hover-bg: rgba(var(--brand-rgb), .06);
  --btn-hover-border: rgba(var(--brand-rgb), .18);

  /* ============================================================
     Overlay / Modal
     ============================================================ */
  --overlay-soft: rgba(0,0,0,.35);
  --overlay-strong: rgba(var(--ink-rgb), .70);

  /* ============================================================
     Radius
     ============================================================ */
  --r-soft: 4px;
  --r-modal: 16px;

  /* ============================================================
     Sections / Scroll / Sticky
     (du kannst die auch in sections.css lassen,
      aber token.css als Single Source ist sauberer)
     ============================================================ */
  --section-pad-y: 18px;
  --section-gap: 18px;
  --nav-offset: 73px;
  --top-gap: 14px;
  --sticky-top: 72px;
  --sticky-top-mobile: 62px;
}

/* token.css – Ergänzungen für sections.css (Single Source) */
:root{
  /* Layout spacing (wird in sections.css genutzt) */
  --page-pad-x: clamp(18px, 2.6vw, 72px);

  /* Text-Mutes (statt #6B7280 / rgba(...) verstreut) */
  --text-muted: rgba(var(--ink-rgb), .72);
  --text-muted-2: rgba(var(--ink-rgb), .55);

  /* Optional: falls du --muted nicht global hast */
  --muted: rgba(var(--ink-rgb), .62);
}
/* token.css – Layout & Page Tokens (Add-on) */
:root{
  /* Page */
  --page-bg: var(--surface-2);                /* früher #f4f7fa */
  --content-max-width: 1180px;
  --page-pad-x: clamp(18px, 2.6vw, 72px);

  /* Layout */
  --layout-top: 14px;
  --layout-bp: 1024px;
  --detail-gap: 24px;
  --sidebar-w: 380px;

  /* Lines */
  --line: var(--border-strong);

  /* Section-Nav */
  --section-nav-bg: rgba(var(--ink-rgb), .04);
  --section-nav-border: rgba(var(--ink-rgb), .18);

  /* Side-Links (dark block) */
  --side-links-bg: #0b1220;
  --side-links-line: rgba(255,255,255,.18);
  --side-links-text: rgba(255,255,255,.92);
  --side-links-text-2: rgba(255,255,255,.88);
  --side-links-hover: rgba(255,255,255,.06);

  /* Hero media CTA */
  --hero-cta-bg: rgba(255,255,255,.85);
  --hero-cta-bg-hover: rgba(255,255,255,.95);
  --hero-cta-border: rgba(var(--ink-rgb), .15);
  --hero-cta-border-hover: rgba(var(--ink-rgb), .30);

  /* Home – Background Rhythmus */
  --home-bg-1: #ffffff;
  --home-bg-2: #eef4f9;
  --home-bg-3: var(--page-bg);

  /* Home – Container widths */
  --home-w-0: 1250px;
  --home-w-1: 992px;
  --home-w-2: 736px;
  --home-w-3: 608px;
  --home-w-4: 448px;

  /* Home – Padding */
  --home-pad-y: 80px;
  --home-pad-y-mobile: 60px;

  /* Home – Tile overlay */
  --tile-grad-0: rgba(0,0,0,.60);
  --tile-grad-1: rgba(0,0,0,.42);
  --tile-grad-2: rgba(0,0,0,.22);
  --tile-grad-3: rgba(0,0,0,.06);
  --tile-text-shadow: 0 1px 4px rgba(0,0,0,.28);
}
@media (max-width: 700px){
  :root{
    --layout-top: 10px;
  }
}

:root{
  /* Page / Background */
  --page-bg: var(--surface-2, #f4f7fa);

  /* Cards / Sections */
  --card-bg: var(--surface, #fff);
  --card-border: var(--border-soft, rgba(11,18,32,.08));
  --card-shadow: var(--shadow-section, 0 10px 28px rgba(11,18,32,.08));

  /* Lines / Text */
  --line: var(--divider, rgba(11,18,32,.14));

  /* Falls du text-muted NICHT schon hast, ist das hier wichtig */
  --text-muted: rgba(var(--ink-rgb), .62);

  /* Section-Nav */
  --section-nav-bg: #e9eff5; /* oder: var(--surface-2) wenn du willst */
  --section-nav-border: rgba(var(--ink-rgb), .18);
}
:root{
  --text-muted-2: rgba(var(--ink-rgb), .55);
}


:root{
  /* ============================================================
     Side-Links (Sidebox Menü) — Tokens
     ============================================================ */

  /* Container */
  --side-links-bg: #0b1220;
  --side-links-border: rgba(255,255,255,.10);
  --side-links-shadow: 0 10px 28px rgba(0,0,0,.35);

  /* Text */
  --side-links-text: rgba(255,255,255,1);
  --side-links-text-sub: rgba(255,255,255,.88);

  /* Hover / Active */
  --side-links-hover-bg: rgba(255,255,255,.08);
  --side-links-active-bg: rgba(255,255,255,.12);

  /* Focus */
  --side-links-focus-outline: rgba(255,255,255,.45);

  /* Lines / Dividers */
  --side-links-divider-strong: rgba(255,255,255,.35);
  --side-links-divider: rgba(255,255,255,.12);

  /* Submenu */
  --side-links-sub-bg: rgba(255,255,255,.04);

  /* Icons */
  --side-links-icon-bg: rgba(255,255,255,.12);
  --side-links-icon-border: rgba(255,255,255,.22);
  --side-links-icon-color: rgba(255,255,255,1);
}

:root{
  /* ============================================================
     Global neutrals / surfaces (ergänzend)
     ============================================================ */
  --white: #ffffff;
  --black: #000000;

  --gray-050: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  /* Text (alias, damit du später leicht refactorst) */
  --text: var(--ink);
  --text-muted: var(--muted);
  --text-invert: #ffffff;

  /* Links */
  --link: var(--navy);
  --link-hover: var(--accent);
  --link-inline: var(--accent);
  --link-inline-visited: #cc6f00; /* war hardcoded */

  /* Borders / dividers */
  --border: var(--card-border);                 /* #e5e7eb */
  --border-soft: rgba(0,0,0,.04);
  --border-black-08: rgba(0,0,0,.08);
  --border-black-12: rgba(0,0,0,.12);
  --border-white-06: rgba(255,255,255,.06);
  --border-white-10: rgba(255,255,255,.10);
  --border-white-14: rgba(255,255,255,.14);
  --border-white-18: rgba(255,255,255,.18);
  --border-white-25: rgba(0,0,0,.25);

  /* Shadows (zusätzlich zu --shadow) */
  --shadow-soft: 0 6px 18px rgba(10,35,66,.08);
  --shadow-soft-hover: 0 10px 24px rgba(10,35,66,.12);
  --shadow-deep: 0 20px 40px rgba(15,23,42,.18);
  --shadow-modal: 0 16px 40px rgba(0,0,0,0.25);
  --shadow-nav: 0 2px 14px rgba(0,0,0,.08);
  --shadow-float: 0 4px 14px rgba(0,0,0,0.16);

  /* ============================================================
     Status / Badges
     ============================================================ */
  --badge-ok-bg: #e6f8ee;
  --badge-ok-text: #0f6a33;
  --badge-ok-border: #bfe9cf;

  --badge-plan-bg: #eef6ff;
  --badge-plan-text: #0b4d9a;
  --badge-plan-border: #cfe3ff;

  --badge-off-bg: #f7f7f7;
  --badge-off-text: #6b7280;
  --badge-off-border: #e5e7eb;

  /* Alerts */
  --alert-error-bg: #fee2e2;
  --alert-error-text: #7f1d1d;
  --alert-error-border: #fca5a5;

  --alert-success-bg: #dcfce7;
  --alert-success-text: #14532d;
  --alert-success-border: #bbf7d0;

  /* Mitglied-Status */
  --status-error-bg: #d93025;
  --status-ok-bg: #0a7a20;
  --status-muted-bg: #e8e8e8;
  --status-muted-text: #333333;

  /* ============================================================
     Hero overlays / text
     ============================================================ */
  --hero-noise-opacity: .4;

  /* Hero Text Shadows */
  --hero-text-shadow: 0 2px 6px rgba(0,0,0,.30), 0 0 6px rgba(0,0,0,.10);

  /* Hero Gradient “darkness” (nutzt weiterhin --hero-darkness als Faktor) */
  --hero-grad-top: 0.10;
  --hero-grad-mid: 0.25;
  --hero-grad-bot: 0.35;

  /* Hero kicker */
  --hero-kicker-bg: rgba(255,255,255,.16);
  --hero-kicker-border: rgba(255,255,255,.38);
  --hero-kicker-shadow: 0 1px 6px rgba(0,0,0,.18);

  --hero-meta-text: rgba(255,255,255,.88);
  --hero-meta-label: rgba(255,255,255,.85);

  /* ============================================================
     Navigation (FW-Bar)
     ============================================================ */
  --nav-bg: #ffffff;
  --nav-border: var(--fw-red); /* bleibt brand */
  --nav-dropdown-border: #e4e6ea;
  --nav-dropdown-shadow: 0 10px 20px rgba(0,0,0,.08);

  --hamburger-line: #111111;

  /* Mobile Nav */
  --nav-mobile-bg: #ffffff;
  --nav-mobile-item-border: #eceff3;

  /* ============================================================
     Cards / Teaser / Feel
     ============================================================ */
  --card-text: var(--text);
  --card-text-muted: var(--text-muted);
  --card-text-strong: var(--gray-900);

  --teaser-bg: #ffffff;
  --teaser-title: #0a2342;
  --teaser-text: #111827;

  --feel-bg: #ffffff;
  --feel-bg-primary: #f9fafb;
  --feel-border: #e5e7eb;

  --section-feeling-border: #e8edf3;

  /* ============================================================
     Reviews
     ============================================================ */
  --review-card-bg: #ffffff;
  --review-shadow: 0 8px 24px rgba(0,0,0,0.06);
  --review-shadow-hover: 0 12px 30px rgba(0,0,0,0.08);

  --review-text: #333333;
  --review-meta: #777777;
  --review-avatar-fallback-bg: #e0e0e0;
  --review-avatar-fallback-text: #555555;

  --review-link: #1a73e8;
  --review-dot-bg: #e4e4e4;
  --review-dot-border: #cccccc;

  --review-modal-backdrop: rgba(0,0,0,0.35);
  --gallery-modal-backdrop: rgba(0,0,0,0.55);

  /* Stars */
  --star: #f4b400;
  --star-accent: #f59e0b; /* war hardcoded */

  /* ============================================================
     Forms
     ============================================================ */
  --input-bg: #ffffff;
  --input-border: #d1d5db;
  --input-border-hover: #b3b7c0;

  --input-focus-border: #2563eb;
  --input-focus-ring: rgba(37,99,235,0.25);

  --input-disabled-bg: #f3f4f6;

  --placeholder: #9ca3af;

  /* ============================================================
     CTA / Footer / Misc
     ============================================================ */
  --cta-band-text: #ffffff;
  --footer-text: #c9d1e1;
  --footer-link: #d7dfec;
  --footer-claim: #cbd5f5;
  --footer-title: #e5e7eb;
  --footer-divider: rgba(255,255,255,.06);

  /* Voucher/Guarantee */
  --guarantee-bg: #fff9e8;

  /* Photo strip dots */
  --photo-dot-bg: #d1d5db;

  /* Floating CTA / Booking banner */
  --booking-banner-bg: rgba(14,58,90,.95);
  --booking-banner-text: rgba(255,255,255,.85);

  --bb-tool-bg: rgba(255,255,255,.06);
  --bb-tool-border: rgba(255,255,255,.35);
  --bb-tool-hover-bg: rgba(255,255,255,.12);
  --bb-tool-hover-border: rgba(255,255,255,.55);
  --bb-tool-focus-ring: rgba(255,255,255,.25);

  --bb-menu-bg: rgba(10,15,25,.96);
  --bb-menu-border: rgba(255,255,255,.18);
  --bb-menu-shadow: 0 12px 30px rgba(0,0,0,.35);
  --bb-menu-item-text: rgba(255,255,255,.92);
  --bb-menu-item-hover: rgba(255,255,255,.10);

  /* Contact modal */
  --modal-backdrop: rgba(15, 23, 42, 0.6);
  --modal-bg: #ffffff;
  --modal-shadow: 0 20px 40px rgba(15,23,42,0.35);
  --modal-close: #666666;
  --modal-close-hover: #000000;

  /* Cookie banner */
  --cookie-bg: #b71c1c;
  --cookie-border: rgba(0,0,0,.25);
  --cookie-cta-bg: #ffb300;
  --cookie-cta-text: #111111;
  --cookie-link: #ffffff;
}