/* =============================================================================
   Preisanzeige auf den Objektseiten
   -----------------------------------------------------------------------------
   Farben ausschließlich über die Themevariablen aus layout.css, damit die
   Preisangaben zum Rest der Seite passen.

   Bewusst NICHT position:sticky für den Preisbereich. Ein klebendes Element
   verlässt den Fluss nicht – Standort und Kalender darunter scrollen weiter
   und würden überdeckt. Die ganze Spalte kleben zu lassen hilft nicht: Preis,
   Standort und Kalender ergeben zusammen rund 840 px und passen auf vielen
   Bildschirmen nicht in die Höhe, der untere Teil wäre nie erreichbar.
   Dauerhaft sichtbar bleibt der Preis stattdessen über die Leiste am unteren
   Rand, die auf allen Bildschirmgrößen einblendet.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   Titelzeile über der Überschrift

   Die Zeile sitzt in .title-section und ist dort kursiv – für den Preis wird
   das zurückgenommen, gerade bei Ziffern liest sich aufrecht besser. Das
   Gefälle entsteht über Größe und Farbe: Der Betrag trägt, Dauer und Kurtaxe
   laufen daneben mit, ohne zu verschwinden.
   -------------------------------------------------------------------------- */

.ebKurzPreis {
    font-family: "Barlow Condensed", serif;
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    color: var(--theme-primary-color);
    margin-right: .5rem;
}

.ebKurzDetail {
    font-size: .82rem;
    color: #9a9a9a;
    white-space: normal;
}

/* Auf schmalen Bildschirmen untereinander statt in einer langen Zeile */
@media screen and (max-width: 575px) {
    .ebKurzPreis { display: block; margin-right: 0; }
    .ebKurzDetail { display: block; }
}

/* -----------------------------------------------------------------------------
   Die Preisangabe selbst
   -------------------------------------------------------------------------- */

.ebPreisGesamt {
    font-family: "Barlow Condensed", serif;
    font-size: 2rem;
    line-height: 1.1;
    color: var(--theme-primary-color);
}

.ebGrundpreis { font-size: .9rem; color: #9a9a9a; margin-top: .1rem; }
.ebGrundpreis s { text-decoration-thickness: 1px; }

.ebRabattBadge {
    display: inline-block;
    background: var(--theme-green);
    color: #fff;
    font-size: .72rem;
    padding: .05rem .35rem;
    vertical-align: 1px;
}

.ebPreisBasis { font-size: .8rem; color: var(--theme-text-color); margin-top: .15rem; }
.ebRabatt { font-size: .8rem; color: var(--theme-green); margin-top: .2rem; }

/* Vertrauenshinweise: linksbündig, damit die Häkchen eine Kante bilden und die
   Zeilen als Liste lesbar bleiben. */
.ebVertrauen {
    list-style: none;
    margin: .8rem 0 0;
    padding: 0;
    text-align: left;
    font-size: .82rem;
    color: var(--theme-text-color);
}

.ebVertrauen li { padding-left: 1.25rem; position: relative; margin-bottom: .2rem; }

.ebVertrauen li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: var(--theme-green);
    font-weight: 700;
}

/* -----------------------------------------------------------------------------
   Ladezustand

   Die Mindesthöhe wird beim Umschalten aus der tatsächlichen Höhe des vorigen
   Inhalts gesetzt, damit nichts springt; der Wert hier greift nur beim
   allerersten Aufruf, wenn es noch keinen Vorzustand gibt.
   -------------------------------------------------------------------------- */

.ebFormLaedt {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: 104px;
}

.ebFormLaedt .ebSkelettGross { width: 190px; }

/* Platzhalterbalken in der Form des erwarteten Inhalts. Bewusst keine
   abgeblendete alte Zahl: Die wäre bequemer gegen das Springen, stünde aber
   als Preis auf der Seite, der nicht mehr gilt. */
.ebSkelett {
    border-radius: 2px;
    background: linear-gradient(90deg, #ededed 25%, #f7f7f7 50%, #ededed 75%);
    background-size: 200% 100%;
    animation: ebSchimmer 1.5s ease-in-out infinite;
}

.ebSkelettGross { width: 60%; height: 2rem; }

.ebLaedtZeile { display: flex; align-items: center; gap: .5rem; margin-top: .25rem; }

@keyframes ebSchimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

.ebSpinner {
    --bs-spinner-width: 1.1rem;
    --bs-spinner-height: 1.1rem;
    --bs-spinner-border-width: .15em;
    color: var(--theme-primary-color);
}

.ebLaedtText { font-size: .9rem; color: var(--theme-text-color); animation: ebPuls 1.4s ease-in-out infinite; }

/* Nur die Animation, ohne Schriftgröße oder Farbe zu ändern – für Stellen, an
   denen bereits Text steht (Titelzeile, Leiste unten). Sonst wäre der Wechsel
   selbst schon ein Sprung. */
.ebPulsiert { animation: ebPuls 1.4s ease-in-out infinite; }

@keyframes ebPuls { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

@media (prefers-reduced-motion: reduce) {
    .ebLaedtText, .ebPulsiert, .ebSkelett { animation: none; }
    .ebSkelett { background: #ededed; }
    .ebSpinner { animation-duration: 2.4s; }
}

/* -----------------------------------------------------------------------------
   Meldungen und Alternativen
   -------------------------------------------------------------------------- */

.ebMeldungText { font-size: .92rem; color: var(--theme-text-color); line-height: 1.45; }
.ebMeldungBtn { width: 100%; margin-top: .8rem; font-size: 1.1rem; }

.ebAlternativen { border-top: 1px solid #eee; margin-top: .9rem; padding-top: .7rem; text-align: left; }
.ebAltTitel { font-size: .8rem; color: #9a9a9a; margin-bottom: .35rem; }

.ebAlt {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    padding: .3rem 0;
    font-size: .85rem;
    color: var(--theme-text-color);
    text-decoration: none;
    border-bottom: 1px solid #f2f2f2;
}

.ebAlt:last-child { border-bottom: 0; }
.ebAlt:hover { color: var(--theme-primary-color); }
.ebAltName { font-weight: 600; }
.ebAltOrt { font-size: .78rem; color: #9a9a9a; }
.ebAltPreis { margin-left: auto; white-space: nowrap; }

/* -----------------------------------------------------------------------------
   Preis am Buchungsformular
   -------------------------------------------------------------------------- */

.ebFormPreis { text-align: center; margin-top: 1.2rem; }
.ebFormPreis .ebPreisGesamt { font-size: 2.4rem; }

/* Kurtaxenhinweis und Vertrauensangaben stehen unter einem mittig gesetzten
   Preis. Beide sollen linksbündig gelesen werden, als Block aber in der Mitte
   sitzen.
   Nicht über display:inline-block lösen: Zwei Inline-Blöcke stellen sich
   nebeneinander, sobald die Breite reicht – auf der breiten Formularspalte
   landete die Stornozeile damit neben der Kurtaxe statt darunter.
   width:fit-content hält den Block so schmal wie seinen Inhalt und lässt ihn
   zugleich ein Block bleiben, der die nächste Zeile beginnt. */
.ebFormPreis .ebKurtaxeInfo,
.ebFormPreis .ebKurtaxe,
.ebFormPreis .ebVertrauen {
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

.ebFormPreis .ebKurtaxeInfo,
.ebFormPreis .ebKurtaxe { margin-top: .5rem; }

.ebFormPreis .ebVertrauen { margin-top: .7rem; }

.ebFormFuss { font-size: .76rem; color: #9a9a9a; margin-top: .5rem; }

/* Meldung am Formular – dort, wo der Zeitraum geändert wird. Der Rahmen in der
   Themefarbe hebt sie vom Grau der Sektion ab, ohne wie eine Fehlermeldung zu
   wirken: Ein belegter Termin ist kein Fehler. */
.ebFormMeldung {
    border: 1px solid var(--theme-primary-color);
    background: #fff;
    padding: 1.1rem 1.2rem;
    text-align: center;
    animation: ebEinblenden .25s ease-out;
}

.ebFormMeldung .ebMeldungText { font-size: 1.05rem; }
.ebFormMeldung .ebMeldungBtn { width: auto; min-width: 240px; }
.ebFormMeldung .ebAlternativen { border-top-color: #e8e8e8; text-align: center; }

/* Nebeneinander statt untereinander – unter dem Formular ist Platz dafür */
.ebAltReihe { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }

.ebAltReihe .ebAlt {
    flex: 1 1 210px;
    max-width: 280px;
    border: 1px solid #e4e4e4;
    padding: .55rem .75rem;
}

.ebAltReihe .ebAlt:hover { border-color: var(--theme-primary-color); }

@keyframes ebEinblenden {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .ebFormMeldung { animation: none; }
}

/* -----------------------------------------------------------------------------
   Hinweis auf den günstigeren längeren Aufenthalt
   -------------------------------------------------------------------------- */

.ebDauer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .3rem .7rem;
    margin-top: .9rem;
    padding: .6rem .8rem;
    background: #fff;
    border: 1px solid var(--theme-green);
    font-size: .88rem;
    color: var(--theme-text-color);
}

.ebDauerBtn {
    background: none;
    border: 0;
    padding: 0;
    color: var(--theme-primary-color);
    text-decoration: underline;
    font-size: .88rem;
}

.ebDauerBtn:hover { color: var(--theme-secondary-color); }

/* -----------------------------------------------------------------------------
   Eingeblendete Leiste am unteren Rand
   -------------------------------------------------------------------------- */

.ebSticky {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .7rem;
    padding: .5rem .9rem;
    background: #fff;
    border-top: 1px solid #ddd;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, .09);
}

.ebSticky[hidden] { display: none; }

.ebStickyText { display: flex; flex-direction: column; min-width: 0; }

.ebStickyPreis {
    font-family: "Barlow Condensed", serif;
    font-size: 1.3rem;
    line-height: 1.15;
    color: var(--theme-primary-color);
}

.ebStickyZusatz { font-size: .7rem; line-height: 1.25; color: var(--theme-text-color); }
.ebStickyZusatz:empty { display: none; }

.ebStickyBtn { font-size: 1.05rem; padding: .35rem 1rem; white-space: nowrap; }

/* Auf großen Bildschirmen als schwebender Balken: Inhalt auf Containerbreite
   begrenzt, damit der Preis nicht am linken und der Knopf am rechten
   Bildschirmrand klebt. */
@media screen and (min-width: 992px) {
    .ebSticky {
        justify-content: center;
        gap: 2rem;
        padding: .6rem 1.5rem;
    }

    .ebStickyPreis { font-size: 1.45rem; }
    .ebStickyZusatz { font-size: .78rem; }
    .ebStickyBtn { font-size: 1.15rem; padding: .4rem 1.6rem; }
}

/* Die Kennzeichnung belegter Nächte steht jetzt in css/reisezeit.css, wo
   auch der gemeinsame Datumswähler beschrieben ist. Sie galt hier nur für
   die Objektseiten; Suchseite und Haus-Seiten hatten gar keine. */

/* -----------------------------------------------------------------------------
   Kurtaxen-Aufklapper
   -------------------------------------------------------------------------- */

.ebKurtaxe { font-size: .8rem; color: #495057; margin-top: .5rem; }
.ebKurtaxeInfo { text-align: left; margin-top: .6rem; }

.ebKurtaxeInfo > summary {
    cursor: pointer;
    list-style: none;
    font-size: .8rem;
    color: #495057;
}

.ebKurtaxeInfo > summary::-webkit-details-marker { display: none; }
.ebKurtaxeInfo > summary::before { content: "\25BE\00a0"; color: #9a9a9a; }
.ebKurtaxeInfo[open] > summary::before { content: "\25B4\00a0"; }
.ebKurtaxeInfo > summary:hover { color: #000; }
.ebStaffelTitel { font-size: .76rem; color: #6c757d; margin-top: .35rem; }
.ebKurtaxeInfo ul { margin: .2rem 0 .3rem 1rem; padding: 0; font-size: .76rem; color: #495057; }
.ebKurtaxeInfo p { margin: .3rem 0 0; font-size: .74rem; color: #8a8a8a; }
.ebSaisonHinweis { font-style: italic; }

/* Tooltip bewusst als reines CSS: Bootstrap-Tooltips müssten nach jedem
   Nachladen des Preises neu angemeldet werden. */
.ebTipZeile { margin: .5rem 0 0 !important; }

.ebTip {
    position: relative;
    cursor: help;
    color: #6c757d;
    font-size: .76rem;
}

.ebTip:hover, .ebTip:focus { color: #212529; }

.ebTipIcon {
    display: inline-block;
    width: 13px;
    height: 13px;
    line-height: 13px;
    margin-left: .25rem;
    border-radius: 50%;
    background: #adb5bd;
    color: #fff;
    font-size: .62rem;
    font-style: italic;
    text-align: center;
    vertical-align: 1px;
}

.ebTipText {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    z-index: 20;
    width: max(220px, 100%);
    max-width: 300px;
    padding: .5rem .6rem;
    border-radius: 3px;
    background: #212529;
    color: #fff;
    font-size: .72rem;
    font-style: normal;
    line-height: 1.4;
    text-align: left;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}

.ebTipText::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 14px;
    border: 6px solid transparent;
    border-top-color: #212529;
}

.ebTip:hover .ebTipText,
.ebTip:focus .ebTipText,
.ebTip:focus-within .ebTipText { display: block; }