/* =========================================================
   easybooking — gestalterische Angleichung  (Modul B §6)
   ---------------------------------------------------------
   Die Widgets passen sich der Seite an, nicht umgekehrt.
   Quelle der Werte ist ausschließlich das Token-System aus
   src/styles/global.css.

   Diese Datei wird NUR auf Seiten geladen, die ein Widget
   tragen (Base.astro, Prop `hasWidget`).

   Zwei Regeln:
   · Keine !important-Kaskaden aufbauen, außer wo unvermeidbar
     — und dann mit Begründung im Kommentar.
   · Struktur nicht per CSS umbauen. Farben, Typografie,
     Abstände und Radien angleichen: ja. Elemente ausblenden,
     die für den Buchungsablauf nötig sind: nein.

   Es sind fremde Klassennamen. Sie können sich bei einem
   Update von easybooking ändern. Deshalb steht alles an
   dieser einen Stelle und nirgends verstreut.
   ========================================================= */

:root {
  /* --- Von easybooking dokumentierte Variablen --- */
  --ebCiFontFamily: 'Inter Variable', ui-sans-serif, system-ui, sans-serif;
  --ebCiFontSize: 18px; /* muss zu unserer Fließtextgröße passen */
  --ebPadding: 16px;

  --ebCiColor: #1c1b19; /* stone-900 */
  --ebCiBgColor: #fafaf9; /* stone-50 */
  --ebCiHeadingColor: #1c1b19;

  /*
    Die Warenkorbleiste rechnet mit der Basisschriftgröße.
    Wir weichen mit 18px vom Standard (16px) ab, deshalb müssen
    diese beiden Höhen mitgezogen werden — sonst überlappt die
    Leiste den Inhalt darunter. Faktor 18/16 auf die Vorgaben
    50px und 71px.
  */
  --ebShoppingCartHeight_mobile: 56px;
  --ebShoppingCartHeight_desktop: 80px;
}

/* =========================================================
   Typografie
   ========================================================= */

/* Überschriften der Maske auf unsere Display-Schrift ziehen */
#ebFrontEndPlugin h1,
#ebFrontEndPlugin h2,
#ebFrontEndPlugin h3,
#packagesFrame h2,
#packagesFrame h3,
#pricesFrame h2,
#pricesFrame h3 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.015em;
}

/* =========================================================
   Flächen und Kanten
   ---------------------------------------------------------
   Unser Design ist fast eckig (--radius-card: 2px).
   easybooking bringt großzügige Radien mit.
   ========================================================= */

#ebFrontEndPlugin .eb-panel,
#ebFrontEndPlugin .eb-card,
#ebFrontEndPlugin .eb-box,
#packagesFrame .eb-package,
#pricesFrame .eb-pricelist-table {
  border-radius: var(--radius-card);
}

/* =========================================================
   Schaltflächen
   ---------------------------------------------------------
   Die Primäraktion der Maske trägt unser Gletscherblau,
   damit der Gast dieselbe Farbe klickt wie auf der Seite davor.
   ========================================================= */

#ebFrontEndPlugin .eb-btn-primary,
#ebFrontEndPlugin button[type='submit'],
#packagesFrame .eb-btn-primary {
  background-color: var(--color-glacier);
  border-color: var(--color-glacier);
  color: #fff;
  border-radius: var(--radius-card);
  font-weight: 600;
}

#ebFrontEndPlugin .eb-btn-primary:hover,
#ebFrontEndPlugin button[type='submit']:hover,
#packagesFrame .eb-btn-primary:hover {
  background-color: var(--color-glacier-dk);
  border-color: var(--color-glacier-dk);
}

/* =========================================================
   Fokus
   ---------------------------------------------------------
   Barrierefreiheit steht über der Optik des Fremdwidgets:
   ein sichtbarer Fokusring ist Pflicht. Das ist die einzige
   Stelle, an der !important gerechtfertigt ist — die
   Widget-Styles setzen outline:none mit höherer Spezifität.
   ========================================================= */

#ebFrontEndPlugin :focus-visible,
#packagesFrame :focus-visible,
#pricesFrame :focus-visible,
#ebAvailability :focus-visible,
#ebOffer :focus-visible {
  outline: 2px solid var(--color-glacier) !important;
  outline-offset: 2px !important;
}

/* =========================================================
   Preisvergleich
   ---------------------------------------------------------
   Die eigene Überschrift steht im Markup darüber
   (showHeading: "off"), deshalb hier nur die Zahlen.
   ========================================================= */

#ebPriceOmeter {
  font-family: var(--ebCiFontFamily);
}

#ebPriceOmeter .eb-price-direct {
  color: var(--color-glacier);
  font-weight: 600;
}