/* ═══════════════════════════════════════════════════════════
   Stralsund Homes – base.css
   Design-System-Tokens (verbindlich, siehe docs/redesign-kontext.md)
   + Basis-Button- und Chip-Stile.
   Wird auf jeder Seite VOR dem seitenspezifischen CSS geladen.
   ═══════════════════════════════════════════════════════════ */

:root {
    /* ── Primär (Teal/Grün-Familie) ── */
    --sh-green:       #4c808e;
    --sh-green-50:    #a6c0c7;
    --sh-green-25:    #d2dfe2;
    --sh-green-15:    rgba(76,128,142,.12);
    --sh-green-dark:  #2a4651;
    --teal-deep:      #1e3640;
    --teal-tint:      #e8eff1;

    /* ── Warm (Sand/Cream-Familie) ── */
    --cream:          #faf8f4;
    --sand:           #f4e9d8;
    --sand-warm:      #e8d5b8;

    /* ── Neutrale Hilfsfläche (nicht Teil der Kernpalette, nur für bestehende Layout-Flächen) ── */
    --off-white:      #eef2f3;

    /* ── Text ── */
    --text-dark:      #1a2a30;
    --text-mid:       #4a6470;

    /* ── Sonderfarben ── */
    --gold:           #c9a84c;   /* nur Trust-Signale */
    --star-gold:      #d4a017;   /* nur Sterne */
    --white:          #ffffff;

    /* ── Borders (nie Schwarz, nie Rot) ── */
    --border:         rgba(74,120,134,.14);
    --border-md:      rgba(74,120,134,.22);

    /* ── Typografie ── */
    --font:           "boreal", sans-serif;
    --fw-light:       300;
    --fw-regular:     400;
    --fw-medium:      500;
    --fw-bold:        700;
    --fs-eyebrow:     10px;
    --fs-chip:        9px;
    --fs-small:       11px;
    --fs-btn:         11px;
    --fs-body-sm:     13px;
    --fs-body:        15px;
    --fs-price:       28px;
    --ls-caps:        0.10em;
    --ls-caps-wide:   0.25em;

    /* ── Form ── */
    --radius:         0px;   /* scharfe Kanten, durchgehend */
    --touch-min:      44px;

    /* ── Schatten (nur als Hover-Zustand einsetzen) ── */
    --shadow-btn:     0 8px 24px rgba(0,0,0,.15);

    --ease-default:   all .2s ease;
}

/* [hidden] global erzwingen: Elemente mit eigenem display (z. B.
   .prop-row { display: grid }) überschreiben sonst das hidden-Attribut
   und werden trotzdem angezeigt. */
[hidden] { display: none !important; }

/* ── BUTTONS ──
   .btn-primary – Füllung sh-green-dark: Standard-CTA in der Buchungsstrecke und auf hellem Grund.
   .btn-warm    – Füllung sand: CTA auf dunklem Grund (Hero, Teal-Flächen).
   .btn-ghost   – transparent, umrandet: sekundäre Aktion.
   Diese Klassen werden erst sichtbar, sobald seitenspezifisches CSS seine eigene
   (abweichende) .btn-primary-Regel in einem späteren Schritt entfernt. */
.btn-primary,
.btn-warm,
.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--touch-min);
    padding: 14px 28px;
    border: none;
    border-radius: var(--radius);
    font-family: var(--font);
    font-weight: var(--fw-bold);
    font-size: var(--fs-btn);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: var(--ease-default);
}
.btn-primary { background: var(--sh-green-dark); color: var(--cream); }
.btn-primary:hover { background: var(--teal-deep); transform: translateY(-1px); }

.btn-warm { background: var(--sand); color: var(--teal-deep); }
.btn-warm:hover { background: var(--sand-warm); transform: translateY(-1px); }

.btn-ghost { background: transparent; color: inherit; border: 1px solid var(--border-md); }
.btn-ghost:hover { border-color: currentColor; transform: translateY(-1px); }

/* ── CHIP ──
   .chip-base – neutraler Chip mit Teal-Border (Standard).
   .chip-gold – Hervorhebungs-Chip in Gold/Sand, z. B. für „Neu renoviert“ statt einer roten Warnbox. */
.chip-base {
    display: inline-block;
    padding: 4px 11px;
    font-size: var(--fs-chip);
    font-weight: var(--fw-bold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border: 1px solid var(--border-md);
    color: var(--text-mid);
    background: transparent;
}
.chip-gold {
    display: inline-block;
    padding: 4px 11px;
    font-size: var(--fs-chip);
    font-weight: var(--fw-bold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border: 1px solid rgba(201,168,76,.35);
    background: rgba(201,168,76,.08);
    color: var(--text-dark);
}

/* ── HEADER (geteilt über alle Seiten) ──
   Menü-Knopf (Hamburger) zentral hier gepflegt statt pro Seite – Vorgabe:
   mindestens 44×44px Tippfläche. Seiten mit eigener .hamburger-Regel
   überschreiben das (gleiche Werte, siehe css/home.css); neue/angepasste
   Seiten binden sich nur noch hierüber ein. */
.hamburger { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: pointer; width: var(--touch-min); height: var(--touch-min); padding: 0; background: none; border: none; }
.hamburger span { display: block; width: 24px; height: 2px; background: var(--text-dark); transition: all .3s; }
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 768px) {
    .hamburger { display: flex; }
}

/* Header-Button "Jetzt buchen" (.header-cta): Farbe zentral hier, nicht pro
   Seite – Layout/Typografie (padding, font, Breakpoints) bleibt in den
   jeweiligen Seiten-CSS, da die sich je nach Header unterscheiden. */
.header-cta { background: var(--sh-green-dark); white-space: nowrap; }
.header-cta:hover { background: var(--teal-deep); }

/* Mobil-Menü-CTA "Jetzt buchen" (.mm-cta): Farbe zentral hier, nicht pro
   Seite – Layout/Typografie (Margin, Font, Breakpoints) bleibt in den
   jeweiligen Seiten-CSS, da die sich je nach Seite unterscheiden. */
.mm-cta { background: var(--sh-green-dark); }
.mm-cta:hover { background: var(--teal-deep); }

/* Hero mit eingebundener Buchungsleiste (Startseite, /ferienwohnungen/):
   Scroll-Hinweis entfällt (die Leiste übernimmt die "hier geht's weiter"-
   Funktion), zusätzlicher Innenabstand unten, damit es unter der Leiste
   nicht zu eng wirkt. Gilt für jede Seite mit .hero .shb. */
.hero:has(.shb) .hero-scroll-hint { display: none; }
.hero:has(.shb) { padding-bottom: var(--space-100, 100px); }