/*
 * Theme: Herztoene
 * Überschreibt die miriam-eckert CSS-Variablen für die Einbettung
 * auf www.hebammen-praxis-herztoene.de (Bare-Buchungsseite, type=9001).
 * Wird nur geladen, wenn ?theme=herztoene in der URL steht.
 */
:root {
    /* Primärfarbe = Rot aus herztoene-logo(-horizontal).svg */
    --color-primary:       #ac1918;
    --color-primary-dark:  #8a140f;
    --color-primary-soft:  #c95b52;
    --color-primary-light: #f2cf24;

    --color-heading:       #2d2c2c;

    /* War rgb(243, 234, 242) (Fliederton) – ersetzt durch Herztöne-Gelb.
       Betrifft u. a. Hinweisbox, Vollgebucht-Hinweis, Schritt-Kreise,
       Zusammenfassung (Schritt 3) und den Zurück-Button-Hover. */
    --color-bg-subtle:     #f2cf24;

    --font-family-heading: 'droid_serifregular', 'Times New Roman', serif;
    --font-family-base:    'droid_serifregular', 'Times New Roman', serif;
}

/* Bare-Seite: kein Logo, kein Site-Header sichtbar (eigenes Logo s. u.).
   "Zurück zum Kurs" auf der Anmeldeseite selbst bleibt ausgeblendet (kein
   sinnvolles Ziel im Herztöne-Kontext) – siehe New.html. "Zurück zur
   Kursübersicht" auf den Status-Seiten (Requested/Confirm/Decline) zeigt
   dagegen jetzt auf die Terminübersicht von herztoene.de, daher hier NICHT
   mehr pauschal ausgeblendet. */
.booking-bare--herztoene .cdetail-back {
    display: none;
}

/* Herztöne-Logo, zentriert über dem Anmeldeformular */
.booking-bare--herztoene__logo {
    display: flex;
    justify-content: center;
    margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.booking-bare--herztoene__logo img {
    width: min(260px, 70vw);
    height: auto;
}

/* Primärbutton (Weiter/Absenden) in Logo-Rot statt Marken-Lila */
.booking-bare--herztoene .btn-primary {
    background-color: #ac1918;
    border-color: #ac1918;
}

.booking-bare--herztoene .btn-primary:hover,
.booking-bare--herztoene .btn-primary:focus-visible {
    background-color: #8a140f;
    border-color: #8a140f;
}

/* Outline-Button ("Zurück zur Kursübersicht" auf den Status-Seiten) ebenfalls
   in Logo-Rot statt Marken-Lila – Bootstrap setzt hier nur CSS-Variablen,
   daher genügt die Überschreibung ohne Duplizieren der Basis-Styles. */
.booking-bare--herztoene .btn-outline-primary {
    --bs-btn-color: #ac1918;
    --bs-btn-border-color: #ac1918;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #ac1918;
    --bs-btn-hover-border-color: #ac1918;
    --bs-btn-focus-shadow-rgb: 172, 25, 24;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #ac1918;
    --bs-btn-active-border-color: #ac1918;
    --bs-btn-disabled-color: #ac1918;
    --bs-btn-disabled-border-color: #ac1918;
}

/* Rote Feld-Umrandung bei Validierungsfehlern in Logo-Rot statt Marken-Lila
   (hebammeeckerts main.css liefert dafür bereits border-color: var(--color-error);
   diese Regel überschreibt nur die Farbe für den Herztöne-Bare-Kontext). */
.booking-bare--herztoene .has-error input,
.booking-bare--herztoene .has-error select,
.booking-bare--herztoene .has-error textarea {
    border-color: #ac1918;
}

/* Text auf den gelben --color-bg-subtle-Flächen dunkel halten (AA-Kontrast) */
.booking-bare--herztoene .booking__intro,
.booking-bare--herztoene .booking__notice--full {
    color: #2d2c2c;
}

/* Zusammenfassung (Schritt 3): volles --color-bg-subtle-Gelb war zu heftig,
   daher hier abgeschwächt statt des Vollton-Gelbs. */
.booking-bare--herztoene .booking-form__summary {
    background: rgba(242, 207, 36, .3);
}

/* Schritt-Übergangs-Animation: Herztöne-Logo statt Miriams Bildmarke.
   Der Disc-Container (5.5rem) bleibt wie im Original; die Bildmarke selbst
   ist hier kein gezeichneter Pfad, sondern das echte Logo, eingeblendet
   mit einem einfachen Fade/Scale statt des Pfad-Zeichen-Effekts. */
.booking-bare--herztoene .booking-form__transition {
    background: rgb(255 255 204 / .92);
}

.booking-bare--herztoene .booking-form__transition-mark {
    width: 4.4rem;
}

.booking-bare--herztoene .booking-form__transition-mark-img {
    width: 100%;
    height: auto;
    display: block;
    animation: herztoene-mark-in .28s ease-out both;
}

@keyframes herztoene-mark-in {
    from { opacity: 0; transform: scale(.82); }
    to   { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .booking-bare--herztoene .booking-form__transition-mark-img {
        animation: none;
    }
}

/* Anmeldeformular als eigene Karte mit Herztöne-Hintergrund */
.booking-bare--herztoene .booking {
    background: #ffffcc;
    border-radius: 12px;
    padding: clamp(1.5rem, 5vw, 3rem);
    font-family: 'droid_serifregular', 'Times New Roman', serif;
    font-weight: normal;
    font-style: normal;
    font-size: 14px;
    color: #2d2c2c;
}

/* Gutschein-Bare-Seite: dasselbe Herztöne-Branding wie oben für die Buchung */
.coupon-bare--herztoene__logo {
    display: flex;
    justify-content: center;
    margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.coupon-bare--herztoene__logo img {
    width: min(260px, 70vw);
    height: auto;
}

.coupon-bare--herztoene .btn-primary {
    background-color: #ac1918;
    border-color: #ac1918;
}

.coupon-bare--herztoene .btn-primary:hover,
.coupon-bare--herztoene .btn-primary:focus-visible {
    background-color: #8a140f;
    border-color: #8a140f;
}

.coupon-bare--herztoene .btn-outline-primary {
    --bs-btn-color: #ac1918;
    --bs-btn-border-color: #ac1918;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #ac1918;
    --bs-btn-hover-border-color: #ac1918;
    --bs-btn-focus-shadow-rgb: 172, 25, 24;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #ac1918;
    --bs-btn-active-border-color: #ac1918;
    --bs-btn-disabled-color: #ac1918;
    --bs-btn-disabled-border-color: #ac1918;
}

.coupon-bare--herztoene .coupon__intro,
.coupon-bare--herztoene .coupon__notice--warning {
    color: #2d2c2c;
}

.coupon-bare--herztoene .coupon {
    background: #ffffcc;
    border-radius: 12px;
    padding: clamp(1.5rem, 5vw, 3rem);
    font-family: 'droid_serifregular', 'Times New Roman', serif;
    font-weight: normal;
    font-style: normal;
    font-size: 14px;
    color: #2d2c2c;
}