/* Urlaub buchen — Rahmen um die Vioma-Engine, mobile-first.
   Das Aussehen der Engine selbst kommt aus der Buchungsstrecke 5871
   (Farbfelder + eigenes CSS im vioma-Backend), nicht von hier. */

/* Keine eigene Fläche: die ganze Seite bleibt Papier, damit zwischen unserem
   Teil und der Engine keine Kante entsteht. */
.buchen-intro { padding-block: 40px 16px; }
.buchen-intro .eyebrow--rot { letter-spacing: var(--ls-caps); margin-bottom: 12px; }
.buchen-sig { font-size: clamp(32px, 8.6vw, 56px); line-height: 1.05; }
.buchen-intro-text { max-width: 720px; margin-top: 18px; }
@media (min-width: 1100px) { .buchen-intro { padding-block: 72px 32px; } }

/* Aktions-Hinweise im Muster der übrigen Seiten: Herz-Aufzählung, keine Fläche. */
.buchen-aktion-titel {
    font-family: var(--font-display);
    font-size: clamp(19px, 2.4vw, 22px);
    font-weight: 700;
    color: var(--text-standard);
    margin: 28px 0 0;
}
.buchen-aktion { max-width: 720px; margin-top: 14px; }

/* Engine: eigener Abschnitt auf Papier, Breite wie der übrige Seiteninhalt. */
.buchen-engine { padding-block: 24px 8px; }
@media (min-width: 1100px) { .buchen-engine { padding-block: 40px 12px; } }

.buchen-fussnote { padding-block: 8px 44px; }
.buchen-fussnote-text {
    max-width: 900px;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--text-gedaempft);
    scroll-margin-top: 120px; /* Anker aus dem Vioma-Panel („Weitere Details") */
}
.buchen-fussnote-text strong { color: var(--text-neben); }
/* Auf gleiche Kante wie die Inhaltsspalte der Engine (.vsc-item-content), sonst
   sitzt die Fußnote weiter links als alles darüber. Die Engine rückt selbst um
   10px ein, ab ihrem Umbruch bei 941px um 20px. */
.buchen-fussnote-text { padding-left: 10px; }
@media (min-width: 941px) { .buchen-fussnote-text { padding-left: 20px; } }
/* Auf Desktop steht über dem Anker der Kopf (84px) und die fixe Schrittleiste (61px). */
@media (min-width: 1100px) { .buchen-fussnote-text { scroll-margin-top: 165px; } }

/* --- Engine-Korrekturen -----------------------------------------------------
   Alles, was das vioma-Backend nicht kann, steht hier — sonst nichts. Farben,
   Schrift und Flächen kommen aus der Buchungsstrecke 5871. */

/* Die Engine begrenzt sich selbst auf 1000px; unsere Spalte ist breiter. */
.buchen-engine .vsc { max-width: none; }

/* Fortschrittsbalken: im Backend hängt er am selben Feld wie Links und Icons,
   deshalb hier gesetzt — Tanne als ruhige Zweitfarbe. */
.buchen-engine .vsc-navigation-progress { background: var(--tanne); }

/* Die Schrittleiste liegt auf z-index 999, die Metabar-Fläche auf 1000 — beide
   damit über unserem Header (40). Auf dieser Seite gehören sie darunter.
   Die Reihenfolge der beiden zueinander muss aber bleiben: Das Modal hängt im
   DOM in der Metabar und erbt deren Stapelkontext. Auf gleichem z-index
   entscheidet die DOM-Reihenfolge — dann liegt die Schrittleiste über dem
   offenen Modal. */
.buchen-engine .vsc-navigation { z-index: 5; }
.buchen-engine .vsc-metabar { z-index: 6; }

/* Beim Scrollen setzt die Engine die Schrittleiste auf `fixed` (Klasse
   `vsc-navigation-fixed`), gibt ihr aber keine Fläche — der Seiteninhalt
   läuft sichtbar durch sie hindurch, und dasselbe gilt über dem offenen
   Modal. Die Fläche kann nicht aus dem vioma-Backend kommen: dort gälte sie
   für beide Zustände und würde im ruhenden Zustand einen Kasten in die
   Seite malen. Die Leiste ist auf die Inhaltsbreite begrenzt, deshalb zieht
   das Pseudo-Element den Streifen bis an die Fensterränder. */
html body .buchen-engine .vsc-navigation.vsc-navigation-fixed { box-shadow: none; }
html body .buchen-engine .vsc-navigation.vsc-navigation-fixed::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 -50vw;
    background: var(--weiss-warm);
    border-bottom: 1px solid var(--linie);
}

/* „Code einlösen" ist ein Button, sieht aber wie Kleintext aus. */
.buchen-engine .vsc-metabar-item-codes .vsc-metabar-button {
    border: 1px solid var(--rot);
    border-radius: 999px;
    padding: 7px 16px;
    background: var(--surface-card);
}
.buchen-engine .vsc-metabar-item-codes .vsc-metabar-button-text {
    color: var(--rot);
    font-weight: 700;
    text-transform: none;
}

/* Der Kalender ist ein Web-Component mit Shadow-DOM — erreichbar nur über die
   Custom Properties, die er selbst anbietet. Wochentagszeile abheben, damit
   Monatskopf, Wochentage und Datumsraster drei erkennbare Zonen sind. */
.buchen-engine ibe-calendar {
    --ibe-cal-weekday-background: var(--weiss-warm);
    --ibe-cal-weekday-text: var(--sattel);
    --ibe-cal-title: var(--text-standard);
    --ibe-cal-text: var(--text-standard);
}

/* Zimmer-Schritt: die drei Ebenen lagen bei 18/15/15 px, die mittlere sogar
   dünner als die unterste — deshalb liefen sie ineinander. */
html body .buchen-engine .vsc-item-title,
html body .buchen-engine .vsc-title {
    font-family: var(--font-display);
    font-size: clamp(20px, 2.4vw, 24px);
    font-weight: 700;
    color: var(--text-standard);
}
html body .buchen-engine .vsc-group-name {
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-neben);
    margin-top: 22px;
    padding-top: 14px;
    border-top: 1px solid var(--linie);
}
.buchen-engine .vsc-list-item { margin-bottom: 4px; }
html body .buchen-engine .vsc-list-item-label { padding-block: 10px; }

/* Modal und Overlay hängen im Backend an der Inhaltsfläche — die ist bewusst
   transparent, damit keine Kästen entstehen. Beide brauchen aber eine eigene
   Fläche, sonst scheint die Seite durch. */
html body .buchen-engine .vsc-modal,
html body .buchen-engine .vsc-overlay,
html body .buchen-engine .vsc-overlay-content {
    background: var(--surface-card);
    border-radius: 12px;
}
html body .buchen-engine .vsc-modal-holder.vsc-modal-show {
    background: rgba(44, 34, 30, 0.45);
    /* Der Halter füllt das ganze Fenster, liegt aber im Stapelkontext der
       Metabar und damit unter unserem Kopf. Ein hohes Modal begänne deshalb
       hinter dem Kopf. Unterhalb angesetzt ändert sich sichtbar nichts — die
       oberen Pixel liegen ohnehin hinter dem Kopf. */
    top: 66px;
}
@media (min-width: 1100px) {
    html body .buchen-engine .vsc-modal-holder.vsc-modal-show { top: 84px; }
}

/* Offset-Element: Die Engine zählt beim Scrollen nur Elemente mit CSS-Position
   `fixed`; unser Header ist `sticky` und würde mit 0 gerechnet. Das Element ist
   für den Gast nicht zu sehen, gilt der Engine aber als vorhanden — sie prüft
   `position` und `display`, nicht `visibility`. */
.buchen-offset {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 66px;
    visibility: hidden;
    pointer-events: none;
}
@media (min-width: 1100px) { .buchen-offset { height: 84px; } } /* Desktop-Kopf ist höher */

/* Die Prozentzahl neben der Schrittleiste misst nichts, was der Gast steuern kann. */
.buchen-engine .vsc-navigation-progress-hint { display: none; }

/* Raten-Block: bei Vioma eine zweispaltige Tabelle, die auch auf 390px zwei
   Spalten behält — links bleiben dann rund 120px für die Verpflegung. Unter
   700px in Blöcke auflösen, Preis unter die Beschreibung. */
@media (max-width: 700px) {
    html body .buchen-engine .vsc .vsc-list-item-name-content,
    html body .buchen-engine .vsc .vsc-list-pensions-info,
    html body .buchen-engine .vsc .vsc-list-pensions-info > *,
    html body .buchen-engine .vsc .vsc-list-packages-info,
    html body .buchen-engine .vsc .vsc-list-packages-info > * {
        display: block;
        width: auto;
        max-width: 100%;
        box-sizing: border-box;
        white-space: normal;
        overflow: visible;
        text-align: left;
    }
    html body .buchen-engine .vsc .vsc-list-pensions-info > * + * {
        border-left: 0;
        border-top: 1px solid var(--linie);
        margin-top: 10px;
        padding-top: 10px;
        padding-left: 0;
    }
}

/* Ratennamen werden sonst abgeschnitten („Länger bleiben & sparen – 10…"). */
html body .buchen-engine .vsc-list-item-name-title { white-space: normal; }

/* Restliche Standard-Blautöne der Engine auf unsere Palette. Die Regel dahinter
   steht in einem Stylesheet, das der Browser wegen CORS nicht auslesen lässt —
   deshalb hier ausnahmsweise mit !important. */
html body .buchen-engine .vsc a.vsc-list-item-desc-infos-link,
html body .buchen-engine .vsc a.vsc-block-item-description-link,
html body .buchen-engine .vsc a.cst-url,
html body .buchen-engine .vsc a[class*="link"],
html body .buchen-engine .vsc div a.cst-url { color: #5C4F42 !important; }

/* Zusammenfassungs-Zeilen der eingeklappten Schritte laufen mobil über den Rand
   hinaus — daher der weiße Streifen rechts neben der Zimmerliste. */
@media (max-width: 700px) {
    html body .buchen-engine .vsc .vsc-item-collapsed-item {
        display: block;
        width: auto;
        max-width: 100%;
        box-sizing: border-box;
    }
    /* Beschriftung und Wert bleiben in einer Zeile und brechen nur bei Bedarf um. */
    html body .buchen-engine .vsc .vsc-item-collapsed-item-value {
        display: inline;
        width: auto;
        max-width: 100%;
        white-space: normal;
    }
}

/* Innerhalb der aufgelösten Tabellen: Beschriftung über den Wert, keine Reste
   der Spaltentrenner. Gilt für Raten- wie Pauschalen-Block. */
@media (max-width: 700px) {
    html body .buchen-engine .vsc .vsc-list-packages-info-item,
    html body .buchen-engine .vsc .vsc-list-pensions-info-item {
        padding-left: 0;
        padding-right: 0;
        border-left: 0;
        border-right: 0;
    }
    html body .buchen-engine .vsc .vsc-list-packages-info-item + .vsc-list-packages-info-item,
    html body .buchen-engine .vsc .vsc-list-pensions-info-item + .vsc-list-pensions-info-item {
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid var(--linie);
    }
    html body .buchen-engine .vsc .vsc-list-packages-info-item-hint,
    html body .buchen-engine .vsc .vsc-list-pensions-info-item-hint {
        display: block;
        margin: 0 0 2px;
        padding: 0;
        font-size: 13px;
        line-height: 1.4;
        color: var(--text-gedaempft);
    }
    html body .buchen-engine .vsc .vsc-list-packages-info-item-value,
    html body .buchen-engine .vsc .vsc-list-pensions-info-item-value {
        display: block;
        margin: 0;
        padding: 0;
    }
}


/* Alternativ-Angebot („Flexibel sein — und sparen!"): Die Werte der drei
   Spalten stehen zentriert, die Beschriftung darüber erbt links, weil die
   Engine für sie keine Ausrichtung setzt. Eine Klasse für alle drei. */
html body .buchen-engine .vsc-item-upselling-from-title { text-align: center; }

/* Der Preis-Kopf behält die Fläche, die die Engine dort vorsieht, wechselt
   aber von Rot auf Tanne: Rot gehört auf dieser Seite dem Knopf „Angebot
   übernehmen", der direkt darunter steht. Im vioma-Backend ist das nicht zu
   trennen — Kopf und Knopf hängen an demselben Farbfeld. */
html body .buchen-engine .vsc-item-upselling-price-header {
    background: var(--tanne);
    color: var(--text-invers);
}

/* Raten- und Pauschalenliste: Der Auswahlkreis (.vsc-list-item-state) ist
   `float: left` mit 34px Breite. Die erste Zeile fließt daneben, alles darunter
   beginnt wieder an der Kante des Kastens — gemessen bei 390px: Titel auf 76,
   Zeilen darunter auf 58. Ein eigener Blockkontext stellt die ganze Spalte
   neben den Kreis, dann stehen Titel und Zeilen bündig. */
@media (max-width: 700px) {
    html body .buchen-engine .vsc .vsc-list-item-desc-infos { display: flow-root; }
}

/* Formularfelder sichtbar machen: Die Feldfläche (#FBF7EF) und der Untergrund
   (#FDFBF6) liegen 1,01:1 auseinander — es gibt praktisch keine Kante. Die
   Engine legt bereits einen 1px-Rahmen in der Füllfarbe an; hier wird er nur
   eingefärbt, dadurch verschiebt sich nichts. Stein liegt bei 4,1:1 zum
   Untergrund und erfüllt damit die 3:1-Regel für Bedienelemente. */
html body .buchen-engine .vsc-element-input,
html body .buchen-engine .vsc-element-select,
html body .buchen-engine .vsc-element-textarea,
html body .buchen-engine .vsc-element-input-date { border: 1px solid var(--stein); }

/* Platzhalter setzt die Engine gar nicht — es gilt der Browser-Standard, der
   auf der warmen Fläche verwaschen wirkt. Gedämpft liegt bei 4,0:1 auf der
   Feldfläche und bleibt deutlich heller als der eingetippte Wert. */
html body .buchen-engine .vsc input::placeholder,
html body .buchen-engine .vsc textarea::placeholder {
    color: var(--text-gedämpft);
    opacity: 1; /* Firefox dämpft Platzhalter sonst zusätzlich ab */
}

/* Der Container der Remote-Integration bringt eine eigene weiße Fläche mit —
   sie stammt aus den Farbfeldern der Integration (`cori_color_*`), die wir
   nicht anfassen dürfen, weil die alte Seite an derselben Integration hängt. */
html body .buchen-engine [id^="vri-container-"] { background: transparent !important; }

/* „Alle Zimmertypen anzeigen" schaltet die Kategorieliste ein — die steht bei
   uns ohnehin immer offen (Regel im eigenen CSS der Buchungsstrecke). Der
   Schalter bleibt im DOM, damit diese Regel weiter greift, ist aber unsichtbar. */
html body .buchen-engine .vsc-item[rel="roomtypes"] label.vsc-menu-visible { display: none; }