/* Design System — hoteldiscount24.com
   CSS Custom Properties for consistent design tokens.
   Eingebunden vor main.css/style.css — Werte werden schrittweise uebernommen.

   Neue "Warm Brand" Palette (11.04.2026) — Sonnet Hero Rebuild.
   Koexistiert mit den alten Tokens unten fuer Rueckwaerts-Kompatibilitaet. */

:root {
    /* ========== NEW: Warm Brand Palette (Sonnet spec) ========== */
    /* Page + Surface backgrounds */
    --color-page-bg:        #FFF9F4;   /* Seiten-Hintergrund (warmes Creme) */
    --color-card-bg:        #FFFFFF;   /* Karten-Hintergrund */
    --color-input-bg:       #F8F5F1;   /* Input-Felder, Chat-Bubble, Chip-Hover-BG */
    --color-section-bg:     #F5EDE3;   /* Trust-Bar, Direktsuche-Toggle-Header */
    --color-border:         #EDE0D0;   /* Alle Borders und Divider (warm-beige tint) */

    /* Markenfarben */
    --color-orange:         #E8840A;   /* Akzente, Icons, Borders (dekorativ, 3:1 non-text OK) */
    --color-orange-btn:     #B86207;   /* CTA Button Background — WCAG AA 4.39:1 mit weissem Text */
    --color-orange-dark:    #A55606;   /* CTA Hover — WCAG AA 5.34:1 */
    --color-orange-pale:    #FFF3E0;   /* Badge-Hintergrund, Icon-Kreis-BG */
    --color-navy:           #0F1E38;   /* Headings, Avatar-BG, Nav-Login-BG */
    --color-navy-soft:      #1E3A5F;   /* Chip-Text, Sekundaere Elemente */

    /* Texte */
    --color-text-body:      #5A4A3A;   /* Fliesstext, Hero-Subtext */
    --color-text-muted:     #6F5E4C;   /* Placeholder, Form-Labels, Disclaimer — WCAG AA 5.95:1 auf Cream */
    --color-text-white:     #FFFFFF;

    /* Status */
    --color-online:         #22C55E;   /* Online-Dot, "Online"-Text */
    --color-star:           #F5C842;   /* Hotel-Sterne, Rating-Stars */
    --color-star-alt:       #FFB300;   /* Alternative Star-Farbe (Amber) */

    /* Status-Hintergruende (Booking-Flow, Alerts) */
    --color-success-bg:     #d4edda;
    --color-success-dark:   #155724;
    --color-error-bg:       #f8d7da;
    --color-error-dark:     #721c24;
    --color-warning-bg:     #fff3cd;
    --color-warning-dark:   #856404;

    /* Icon Palette (fuer farbige Form-Label-Icons, Option B) */
    --icon-destination:     #E91E63;   /* Pink — Reiseziel-Pin */
    --icon-date:            #1E88E5;   /* Blau — Kalender */
    --icon-guests:          #D4A017;   /* Gold — Personen */
    --icon-nation:          #00897B;   /* Teal — Staatsangehoerigkeit */
    --icon-meal:            #6D4C41;   /* Braun — Verpflegung */
    --icon-stars:           #FFB300;   /* Amber — Sterne */

    /* Typography — Font Families */
    --font-display: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* ========== LEGACY: bestehende Tokens (nicht anfassen) ========== */
    /* Brand Colors */
    --color-primary: #0F1E38;     /* Navy — Header, Footer, primaerer Text */
    /* Marken-Vereinheitlichung 30.06.2026: Legacy-Akzent von Blau (#1A6FD8) auf
       Marine-soft. Links/Akzente/Reiter werden Marine; primaere CTAs (Buchen/Submit)
       per Element-Override Orange (Betreiber-Entscheidung Marine-Links + Orange-CTA). */
    --color-secondary: #1E3A5F;   /* Marine-soft — Links/Akzente (CTAs separat Orange) */
    --color-accent: #E8840A;      /* Orange — CTA, MERCAN-Avatar, Preis (max 3 Stellen) */
    --color-success: #16A34A;     /* Gruen — Verfuegbarkeit, Bestaetigungen */
    --color-error: #DC2626;       /* Rot — Fehler, Warnungen */

    /* Neutral Colors */
    --bg-base: #FFFFFF;
    --bg-subtle: #F8FAFC;
    --bg-muted: #F3F5F9;
    --border-light: #E5E7EB;
    --border-medium: #D1D5DB;
    --text-primary: #0F1E38;
    --text-secondary: #475569;
    --text-muted: #657585;  /* WCAG AA 4.73:1 auf Weiss (vorher #94A3B8 = 2.56:1 FAIL) */

    /* Typography */
    --font-h1: 40px;
    --font-h2: 28px;
    --font-h3: 16px;
    --font-body-lg: 17px;
    --font-body: 15px;
    --font-small: 13px;
    --font-caption: 12px;

    /* Spacing (4px base) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;
    --space-32: 128px;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

/* Smooth scrolling (respects prefers-reduced-motion) */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

/* ========== Basis body + Typographie-Defaults ========== */
body {
    background: var(--color-page-bg);
    color: var(--color-text-body);
    font-family: var(--font-body);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Mobile: Prevent iOS Safari auto-zoom on input focus (requires 16px minimum).
   Also ensures consistent form element sizing across all browsers.
   !important needed to override class-specific font-size rules in legacy CSS. */
@media (max-width: 768px) {
    input, select, textarea {
        font-size: 16px !important;
    }
}
/* Touch-Geraete beliebiger Breite (iPad Hochformat >768px) ebenfalls schuetzen:
   pointer:coarse trifft NUR Touch — Desktop/Maus bleibt unberuehrt, daher kein
   Layout-Risiko fuer schmale Desktop-Fenster (06.06.2026). */
@media (pointer: coarse) {
    input, select, textarea {
        font-size: 16px !important;
    }
}
input, select, textarea, button {
    font-family: inherit;
}

/* Minimum touch target size (WCAG 2.2 SC 2.5.8 Level AA = 24px, Apple HIG = 44px).
   Only on standalone interactive elements — NOT on inline text links or
   links inside headings/cards, as min-height/min-width on inline/flex children
   can break mobile card layouts. */
button, [role="button"], input[type="checkbox"], input[type="radio"], select {
    min-height: 44px;
    min-width: 44px;
}

/* Global focus indicator (WCAG 2.4.7 — visible focus for keyboard users).
   :focus-visible fires only on keyboard navigation, not on mouse clicks.
   This replaces all the outline:none declarations throughout the CSS. */
:focus-visible {
    outline: 2px solid var(--color-orange, #E8840A);
    outline-offset: 2px;
}
/* Buttons and inputs: inset outline looks cleaner */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline-offset: -2px;
}

/* Skip-to-content link (accessibility, visible only on :focus) */
.skip-to-content {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 10000;
    padding: 8px 16px;
    background: var(--color-navy, #0F1E38);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 4px 0;
    min-height: auto;
    min-width: auto;
}
.skip-to-content:focus {
    left: 0;
    outline: 2px solid var(--color-orange, #E8840A);
    outline-offset: 2px;
}

/* Inline SVG icon base style */
.icon {
    display: inline-block;
    vertical-align: -0.125em;
    flex-shrink: 0;
}

/* Farbige Icon-Varianten fuer Form-Labels (Sonnet Hero Rebuild) */
.icon-destination { color: var(--icon-destination); }
.icon-date        { color: var(--icon-date); }
.icon-guests      { color: var(--icon-guests); }
.icon-nation      { color: var(--icon-nation); }
.icon-meal        { color: var(--icon-meal); }
.icon-stars       { color: var(--icon-stars); }
.icon-orange      { color: var(--color-orange); }
.icon-online      { color: var(--color-online); }