#sb_main #header #sb_menu .nav li a.popup-hide {
    font-family: 'Archivo Narrow', sans-serif !important;
    font-size: 19px !important;
    font-weight: 500 !important;
    color: #9CBF9E !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}






/* Basiert auf deinem funktionierenden Code – öffnet ihn jetzt für ALLE Textteile */
.collapse-content,
.collapse-content span,
.collapse-content b,
.collapse-content strong,
.wrap-collapse-content,
.wrap-collapse-content span,
.wrap-collapse-content b,
.wrap-collapse-content strong {
    font-family: 'Archivo Narrow', sans-serif !important; /* Eure richtige Schriftart */
    font-size: 14px !important;                           /* Angenehme Größe */
    font-weight: 400 !important;                          /* Schöne Strichstärke */
    line-height: 1.6 !important;                          /* Edler Zeilenabstand */
    letter-spacing: 0.3px !important;                     /* Abstand der Buchstaben */
    color: #555555 !important;                            /* Weiches Dunkelgrau */
}





/* Ändert die Farbe UND zwingt den 10€-Preis endlich dazu, größer zu werden */
.bar-service_item-price,
.bar-service_item-price *,
.price,
.price *,
[class*="bar-service_item-price"] {
    color: #9CBF9E !important;
    font-size: 16px !important; /* HIER die Größe ändern: z.B. 18px, 20px oder 22px */
}




/* Ändert NUR die große Überschrift: kleiner und dunkelgrau/schwarz */
#sb_main #sb_content .title-main,
[role="heading"].title-main,
.title-main {
    font-size: 30px !important;       /* Macht die Überschrift deutlich kleiner */
    color: #2D2D2D !important;        /* Ändert die Farbe in ein edles Dunkelgrau/Schwarz */
}



/* Verpasst dem Untertext die exakte Schriftart, Größe und Stärke von unten */
#sb-timeline #steps-nav li .tab-top,
#sb_main #sb_content #steps-nav #sb_booking_info ul.clearfix li .tab-top {
    font-family: 'Archivo Narrow', sans-serif !important;
    font-size: 17px !important;       /* Perfekte Einheitsgröße wie unten */
    color: #9CBF9E !important;        /* Euer exaktes Grün */
    font-weight: 500 !important;      /* Macht die Schrift ein kleines bisschen dicker, damit sie nicht mehr so dünn wegbricht */
    text-transform: none !important;  /* Verhindert automatische Großbuchstaben */
}





/* Hält alle Wörter auf einer Linie und gibt dem Untertext wieder Platz */
#sb_booking_info ul.clearfix li .content {
    height: 70px !important;       /* Erhöht von 55px auf 70px, damit der Text reinpasst */
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important; /* Hält die Hauptüberschriften stur oben auf einer Linie */
    padding-top: 4px !important;   
    overflow: visible !important;  /* Erlaubt dem Untertext, angezeigt zu werden */
}








#client-login .title-main {
    color: #2c3e50 !important;
}





#client-login .client-login-bar {
    display: none !important;
}




#client-login .social {
    display: none !important;
}





#sb_sign_up_form.form-horizontal .button-wrapper button#sb_sign_up_btn.btn.custom {
    background-color: #d8e8da !important;
    color: #000000 !important;
}






#sb_sign_in_form.form-horizontal .button-wrapper button#sb_sign_in_btn.btn.custom {
    background-color: #d8e8da !important;
    color: #000000 !important;
}








/* Nur Dienstleistungs-Karten: Schatten weg, feine grüne Abgrenzung */
#sb_booking_content .service-item.item.panel.-v4 {
    box-shadow: none !important;
    border: 1px solid #D8E8DA !important;
}






/* --- MOBILE LOGIN REPARATUR (STARKER SPEZIFISCHER CODE) --- */
@media (max-width: 768px) {
    /* Wir nutzen die exakte Kette aus deinem Screenshot, um das System zu zwingen */
    #sb_main #header .items-wrapper #sb_client_info .full-info .social.clearfix {
        display: flex !important;
        flex-direction: column !important; /* Zwingt Buttons untereinander */
        align-items: center !important;
        gap: 15px !important;
        width: 100% !important;
    }

    /* Damit die Buttons im Kasten nicht links/rechts rausfliegen */
    #sb_main #header .items-wrapper #sb_client_info .full-info .social.clearfix > div {
        width: 100% !important;
        margin: 0 !important;
        text-align: center !important;
    }

    /* Den kompletten weißen Kasten auf volle Breite bringen */
    #sb_client_info .full-info {
        width: 95vw !important;
        left: 2.5vw !important;
        max-width: none !important;
    }
}








/* --- LOGIN-TEXT FINAL MIT SCHRIFTART --- */

.logged-out {
    background: none !important;
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    
    /* ABSTAND NACH LINKS SCHIEBEN */
    margin-right: 70px !important; /* Erhöhe diese Zahl, wenn es noch weiter nach links soll */
    
    /* Deine Schriftart */
    font-family: 'Archivo Narrow', sans-serif !important;
    font-size: 19px !important;
    font-weight: 500 !important;
    color: #9CBF9E !important;
    text-transform: uppercase !important;
}

/* Den alten Pfeil/Icon komplett eliminieren, falls er noch Platz wegnimmt */
.logged-out i {
    display: none !important;
}

.logged-out::after {
    content: "Login" !important;
    font-family: 'Archivo Narrow', sans-serif !important;
    visibility: visible !important;
}




/* --- PASSWORT ZURÜCKSETZEN: GRÖSSE & FARBE --- */

.remind-pass, 
span.remind-pass.sb-client-remind-popup {
    font-size: 15px !important;       /* Größer und besser lesbar */
    font-family: 'Archivo Narrow', sans-serif !important;
    color: #9CBF9E !important;        /* Dein schönes Pantone-Grün */
    display: block !important;
    text-align: right !important;     /* Rechtsbündig über dem Button */
    margin-bottom: 10px !important;   /* Abstand nach unten zu den Buttons */
    cursor: pointer !important;
    font-weight: 400 !important;      /* Etwas deutlicher */
    text-decoration: none !important;
}

/* Kleiner Effekt beim Drüberfahren */
.remind-pass:hover {
    color: #333333 !important;        /* Wechselt zu Dunkelgrau */
    text-decoration: underline !important;
}




/* --- ICON-REPARATUR (DAS AUGE) --- */

/* Zwingt das Passwort-Auge, wieder seine ursprüngliche Icon-Schrift zu nutzen */
.fa, .fas, .far, .fal, .fab, 
i[class^="fa-"], 
i[class*=" fa-"],
.password-toggler i {
    font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "Font Awesome" !important;
    font-weight: 900 !important; /* Wichtig, damit das Icon gefüllt/sichtbar ist */
    font-style: normal !important;
}

/* --- DEINE STABILEN BUTTONS & FENSTER (KEINE ÄNDERUNG AN BREITE) --- */

.full-info.full-info--client-info.active {
    width: 480px !important;
    min-height: 520px !important;
    display: block !important;
    overflow: visible !important;
}

#sb_sign_in_btn, 
#sign_up_btn {
    font-family: 'Archivo Narrow', sans-serif !important;
    font-weight: 400 !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 !important;
}

.btn-bar--row {
    display: flex !important;
    gap: 15px !important;
    width: 100% !important;
}






/* --- REPARATUR & FEINSCHLIFF (BREITE FIXIERT) --- */

/* 1. Zurück auf die gute Breite und Stabilität */
.full-info.full-info--client-info.active {
    width: 530px !important;       /* Die Breite, die vorhin gut war */
    min-height: 300px !important;
    background: #ffffff !important;
    padding: 25px !important;
    display: block !important;
    overflow: visible !important;
}

/* 2. Schriftart und exaktes Alignment für BEIDE Buttons */
#sb_sign_in_btn, 
#sign_up_btn {
    font-family: 'Archivo Narrow', sans-serif !important; /* Deine Hausschrift */
    font-weight: 400 !important;
    font-size: 16px !important;
    
    /* Zwingt beide auf die gleiche optische Linie */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 48px !important;      /* Einheitliche Höhe */
    box-sizing: border-box !important;
}

/* 3. Registrieren-Button (Der mit dem Rahmen) */
#sign_up_btn {
    color: #333333 !important;
    border: 1px solid #9CBF9E !important;
    background-color: #f7f7f7 !important;
    text-decoration: none !important;
    flex: 1 !important;            /* Nutzt den verfügbaren Platz */
}

/* 4. Anmelden-Button (Der Grüne) */
#sb_sign_in_btn {
    background-color: #d8e8da !important;
    color: #ffffff !important;
    border: none !important;
    flex: 1 !important;            /* Nutzt den verfügbaren Platz */
}

/* 5. Container-Stabilität */
.btn-bar--row {
    display: flex !important;
    flex-direction: row !important;
    gap: 15px !important;
    width: 100% !important;
    margin-bottom: 25px !important;
}

/* 6. Social Media Icons (Google/FB) wieder sauber nebeneinander */
.social.clearfix {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 30px !important;
    width: 100% !important;
    margin-top: 30px !important;
}











/* Macht JEDEN Link und jedes Icon auf der Seite in eurem Pantone-Grün */
a,
a:link,
a:visited,
.glyphicon,
i,
[class^="fa-"] {
color: #9CBF9E !important;
}


/* --- RADIKALE SCHRIFT-REINIGUNG START --- */

/* 1. Die richtige Schrift laden */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Narrow:wght@300;400;500;600&display=swap');

/* 2. ALLES auf Archivo Narrow und SCHLANK (300 bis 400) setzen */
* {
    font-family: 'Archivo Narrow', sans-serif !important;
    -webkit-font-smoothing: antialiased;
}

/* 3. Überschriften und wichtige Texte: SCHLANK & EDEL (kein fettes 600/700 mehr!) */
h1, h2, h3, h4, .title-main, .service-name, .sb-menu-item-packages a, 
b, strong, th, .bold, .cap, .title, [role="heading"] {
    font-family: 'Archivo Narrow', sans-serif !important;
    font-weight: 400 !important; /* Das ist das "Semi-Bold", das jetzt schlanker ist */
    letter-spacing: -0.01em !important;
    text-transform: none !important;
}

/* 4. Buttons und normale Texte: EXTRA SCHLANK */
p, span, div, li, a, .btn, button, .date-line--caption {
    font-weight: 300 !important; /* Hier ist die 300 für den richtig feinen Look */
}

/* --- RADIKALE SCHRIFT-REINIGUNG ENDE --- */

/* 7. Ultimativer Großangriff auf das "Mehr erfahren"-Blau */
[class*="more-info"],
[class*="more-info"] *,
[class*="btn"] *,
.more-info-btn,
.more-info-btn span,
a.more-info-btn,
div[class*="more"] * {
color: #9CBF9E !important;
}

/* 8. Die Buttons im Banner NEBENEINANDER anzeigen und Reihenfolge tauschen */
.container-fluid.column .bar {
display: flex !important;
flex-direction: row-reverse !important; /* Setzt sie nebeneinander und bringt Buchen nach links */
justify-content: center !important; /* Zentriert die Buttons nebeneinander */
align-items: center !important;
gap: 16px !important; /* Ein schöner Abstand zwischen den Buttons */
}

.container-fluid.column .bar .btn {
width: 220px !important; /* Beide Buttons optisch exakt gleich breit machen */
display: inline-block !important;
text-align: center !important;
}

/* 9. Icons und Texte in BEIDEN Buttons radikal strahlend weiß färben */
.container-fluid.column .bar .btn,
.container-fluid.column .bar .btn i,
.container-fluid.column .bar .btn span,
.container-fluid.column .bar .btn:before,
.container-fluid.column .bar .btn * {
color: #ffffff !important;
}


/* 10. Schaltet alle restlichen leeren Kästchen (Kalender, Zurück, Header, Sanduhr & Preis) aus */
#sb_next_month .fa,
#sb_prev_month .fa,
#sb_back_button .fa,
.datetime-step .header .fa,
.nav-trigger::before,
.nav-trigger::after,
.nav-trigger,
i.fa-hourglass-start,
.fa-hourglass-start,
i.fa-wallet,
.fa-wallet {
display: none !important;
}


/* 11. Preise einheitlich in Schwarz/Dunkelgrau anzeigen */
#sb_timeline .div-info-bar .bar-flex-item.price,
#sb_timeline .div-info-bar span[class*="price"],
.bar-flex-item.price span {
color: #333333 !important;
}


/* 12. Text auf dem Auswählen-Button unumstößlich in Schwarz anzeigen */
a.btn.select.custom,
.btn.btn-select,
.btn-select {
color: #333333 !important;
}

/* 13. Text auf dem Auswählen-Button unumstößlich in DÜNN (300) anzeigen */
a.btn.select.custom,
.btn.btn-select,
.btn-select {
font-weight: 300 !important;
}

/* 14. "0,00 €" unumstößlich NUR in die leere Info-Bar bei Check-Ins einfügen */

/* Wir prüfen explizit, ob ein Element mit einer Preis-Klasse FEHLT (:not) */
.service-item.item.panel[class*="-v4"] .info-bar.bar-service:not(:has(.price)):not(:has([class*="price"]))::after {
content: "0,00 €" !important;
color: #333333 !important; /* Exakt dasselbe Schwarz wie die anderen Preise */
font-weight: 300 !important; /* Schön dünn und elegant */
font-size: 15px !important; /* Dieselbe Schriftgröße */
margin-left: 20px !important; /* Der perfekte Abstand nach rechts */
display: inline-block !important;
}


/* 15. Uhrzeiten in den verfügbaren Zeit-Kästchen perfekt lesbar in Schwarz */
#sb_time_slots_container .slot a.sb-cell.free {
color: #333333 !important; /* Macht die Uhrzeiten (17:00, 18:00 etc.) sauber schwarz */
font-weight: 400 !important; /* Macht die Zahlen einen Hauch deutlicher, damit man sie auf dem Grün noch besser erkennt */
}

/* 16. Wochenende (Sa/So) von Holiday-Rot auf DEIN Pantone-Grün umfärben */
.datetime-step #sb_dateview_container .calendar .weeks-name .name.is-holiday {
color: #9fc7a5 !important; /* Exakt dein Pantone-Grün */
}


/* 17. Kaputte Kästchen im Footer löschen + edlen Grün-Schwarz-Mix aktivieren */

/* 17a. Löscht die hässlichen, kaputten Icon-Kästchen restlos */
.section-pd .info ul li .icon i.fa {
display: none !important;
}

/* 18. Ausschließlich den Kontaktbereich im Footer schwarz färben */
#contacts .section-pd,
#contacts .section-pd * {
color: #333333 !important;
}

/* 19. Die Adresse (Benefit - Rumfordstraße...) in DEINEM Pantone-Grün färben */
.provider-item .mobile-title h4.title {
color: #9CBF9E !important; /* Exakt dein Pantone-Grün */
}



/* 20. Uhrzeit bei der Bestätigung ausblenden (nur das Datum anzeigen) */
.booking-info--item_date-start .date-line .date-line--caption {
display: inline-block;
max-width: 9.6ch; /* Schneidet den Text exakt nach dem Datum ab */
overflow: hidden; /* Macht die dahinterliegende Uhrzeit unsichtbar */
white-space: nowrap;
}


/* 21. Das Text-Wort "Buchen" auf dem finalen Button schwarz färben */
#sb_book_btn span {
color: #333333 !important; /* Macht die Aufschrift "Buchen" sauber schwarz */
}

/* Das hässliche Info-Kästchen beim Aktionscode komplett löschen */
.promo-code-input--dropdown .span.dropdown-toggle i.fa-info-square,
.promo-code-input--dropdown i.fa-info-square,
i.fas.fa-info-square {
display: none !important;
}



/* 24. Schriftfarbe im Fortfahren-Button radikal auf Schwarz zwingen */
.invoice-payment-systems #sb_pay_btn,
.invoice-payment-systems #sb_pay_btn *,
button#sb_pay_btn.btn.custom.btn-with-image.v1.selected,
button#sb_pay_btn.btn.custom.btn-with-image.v1.selected * {
color: #000000 !important;
}


/* 25. Schrift beim Promo-Code-Button schlank machen (nicht mehr fett) */
button#sb_promotion_apply_btn,
.invoice-pay-page .promo-code-input .btn,
button.btn.promo-btn {
font-weight: 300 !important; /* Setzt die Schrift auf eine feine, schlanke Dicke */
text-transform: none !important; /* Verhindert, dass das System alles in Großbuchstaben zwingt */
}


/* 26. Überschrift "Benefit Private Gym & Sauna" in der Mitte platzieren */
div.title-main[role="heading"] {
text-align: center !important;
width: 100% !important;
}

/* 27. Wochentage normal schreiben (keine reinen Großbuchstaben) */
table.overview td.day,
#content-view #schedule .overview tr td.day {
text-transform: none !important;
}


/* 28. Komma zwischen PLZ und Ort entfernen */
#contacts .section-pd p {
visibility: hidden !important;
}

#contacts .section-pd p::after {
content: "Rumfordstraße 5, 80469 München" !important;
visibility: visible !important;
display: block !important;
}


/* 29. Nerviges Pop-up für unvollendete Aufträge komplett ausblenden */
button#sb_invoice_notification_open,
.invoice-notification--content,
.invoice-notification--content-body {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}

/* 30. NUR das kaputte Icon-Kästchen löschen, den Text aber lassen */
.header__navigation-link-dropdown::after,
.caret,
i.fa-angle-down,
.header__navigation-link-dropdown i {
    display: none !important;
}

/* Verhindert, dass das System Platz für das Icon reserviert */
.header__navigation-link-dropdown {
    padding-right: 0 !important;
}

/* 31. Löscht die "5 years" und das Datum daneben präzise weg */
.info-bar.date-bar,
.bar-flex-item.date-item,
.bar-flex-item.start-date-btn-wrapper {
    display: none !important;
}


/* 35. Titel "10 x Benefit" anpassen - Gewicht von 700 auf 400 geändert */
.item.package-item.panel .one-line .content h4.title a {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 24px !important; 
    color: #9CBF9E !important; 
    font-weight: 400 !important; /* <--- Hier die 400 statt 700 eintragen */
    text-decoration: none !important;
}




/* 33. Das "x 10" (Anzahl der Leistungen) optisch anpassen */
.package-list-item.package-service .count {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px !important; /* Etwas größer, damit es lesbar ist */
    font-weight: 400 !important; /* Nicht zu fett, damit es elegant bleibt */
    color: #333333 !important; /* Passend zum restlichen Text */
    padding-right: 10px !important; /* Ein bisschen Abstand zum Rand */
}


/* 34. Blaues Infofeld auf Grün und Montserrat anpassen */
.alert.alert-info {
    background-color: transparent !important; /* Entfernt den blauen Hintergrund, falls gewünscht */
    border-color: #9CBF9E !important; /* Grüner Rahmen */
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 300 !important;
    color: #9CBF9E !important; /* Schrift in deinem Grün */
}

/* Verhindert, dass Icons in diesem Feld blau bleiben */
.alert.alert-info i, .alert.alert-info div {
    color: #9CBF9E !important;
    font-family: 'Montserrat', sans-serif !important;
}


/* 35. Finale Korrektur laut Untersuchung für den Preis-Button */
a.btn.select {
    color: #000000 !important;
}

/* Falls der Text in einem span-Element innerhalb des Buttons liegt */
a.btn.select span {
    color: #000000 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 400 !important;
}



/* Vergrößerung NUR für das SVG innerhalb der Pakete */
.package-item-logo-container svg.sb-inline-svg {
    transform: scale(1.2) !important; 
    transform-origin: center !important;
}

/* Menü-Zentrierung und Abstände final korrigieren */
#sb_menu_list_items_container {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 auto !important;
    gap: 10px !important; /* Minimaler Abstand zwischen den Boxen */
}

#sb_menu_list_items_container li {
    float: none !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

#header .nav-wrapper #sb_menu .nav li a {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 400 !important;
    padding: 10px 20px !important; /* Gleicher Abstand links und rechts für jedes Wort */
    margin: 0 !important;
    border-bottom: none !important; /* Entfernt die Unterstreichung für einen cleanen Look */
    display: block !important;
    text-align: center !important;
}

/* Optional: Den aktiven Menüpunkt farblich markieren statt unterstreichen */
#header .nav-wrapper #sb_menu .nav li.active a {
    color: #9CBF9E !important; 
    font-weight: 600 !important;
}


/* Das Icon/Kästchen neben 'Zurück zu den Dienstleistungen' entfernen */
.back-to-services .fa, 
.back-to-services .fa-angle-left,
#sb_back_to_bookings .fa {
    display: none !important;
}

/* Den Text 'Zurück zu den Dienstleistungen' schöner formatieren */
.back-to-services, 
#sb_back_to_bookings a {
    font-family: 'Montserrat', sans-serif !important;
    color: #9CBF9E !important; /* Dein Grün */
    text-decoration: none !important;
    font-weight: 400 !important;
    padding-left: 0 !important; /* Schiebt den Text ganz nach links, wo das Kästchen war */
}


/* SPEZIAL-REINIGUNG BESTÄTIGUNGSSEITE */

/* 1. Hauptüberschrift (Bitte bestätige...) - Montserrat & Klar */
#sb_confirm_details_page .title-main, 
#sb_confirm_details_page h2 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    color: #333333 !important;
    text-align: center !important;
}

/* 2. Die gewählte Leistung (1 Stunde...) - Montserrat & Edel-Grün */
.current-booking-info .cap, 
.login-bar .cap,
.booking-info .cap {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 19px !important;
    font-weight: 400 !important; /* Hier war es vorher zu fett (600) */
    color: #9CBF9E !important;
    margin-bottom: 10px !important;
}

/* 3. "Du bist angemeldet als..." - Montserrat & Dezent */
.additional-info .cap {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 18px !important;
    font-weight: 300 !important;
    color: #777777 !important;
}


/* LOGOUT-BUTTON (ROT) GEDÄMPFTER MACHEN */

/* Den roten Standard-Hintergrund durch ein gedämpftes Rot ersetzen */
#sb_confirm_details_page .btn-danger,
#sb_client_login_container .btn-danger,
.btn-danger {
    background-color: #D6CEC3 !important; /* Ein gedämpftes, edles Dunkelrot */
    border-color: #D6CEC3 !important;
    color: #FFFFFF !important; /* Weißer Text für gute Lesbarkeit */
}

/* Hover-Effekt (wenn man mit der Maus drübergeht) */
#sb_confirm_details_page .btn-danger:hover,
#sb_client_login_container .btn-danger:hover,
.btn-danger:hover {
    background-color: #8C4040 !important; /* Ein klein wenig dunkler beim Drübergehen */
    border-color: #8C4040 !important;
}


/* Das Icon-Kästchen über 'Zahlung Ausstehend' komplett ausblenden */
#booking-result-popup .booking-icon i.fa-check-circle,
#booking-result-popup .booking-icon {
    display: none !important;
}


/* 36. FINALER FIX FÜR DAS STORNO-TEXTFELD (Laut Untersuchung) */
.note-editable, 
.note-editable p, 
.note-editable span, 
.note-editable font {
    font-family: 'Archivo Narrow', sans-serif !important;
    font-weight: 300 !important;
    font-size: 16px !important;
}

/* Zwingt auch fettgedruckte Stellen im Editor in die richtige Schrift */
.note-editable b, 
.note-editable strong {
    font-family: 'Archivo Narrow', sans-serif !important;
    font-weight: 600 !important;
}

/* Das hier ist für die Anzeige auf der echten Website (Modal/Pop-up) */
#cancellation-policy-modal .modal-body,
.cancellation-policy-text {
    font-family: 'Archivo Narrow', sans-serif !important;
    font-weight: 300 !important;
}


/* 37. FINALER FIX: Nur Schriftgröße für die Überschrift */
h2.title-main {
    font-family: 'Archivo Narrow', sans-serif !important;
    font-size: 24px !important; /* Etwas größer, damit es nicht mehr "zu klein" ist */
    font-weight: 400 !important;
    color: #9CBF9E !important;
    display: inline-block !important; /* Hält es in der Reihe mit den Tabs */
    margin-right: 20px !important; /* Abstand nach rechts zum nächsten Wort */
}

/* Die Tabs daneben lassen wir vom System führen, nur die Schriftart drauf */
#booking-result-tabs .nav-tabs li a {
    font-family: 'Archivo Narrow', sans-serif !important;
    font-weight: 400 !important;
}


/* Schließen-Icon durch ein schwarzes X ersetzen */
#booking-result-popup .close-modal .fa-times::before {
    content: '✕' !important; 
    font-family: Arial, sans-serif !important;
    font-size: 24px !important;
    color: #000000 !important; /* Tiefschwarz */
    font-style: normal !important;
    font-weight: bold !important;
}

/* Den blauen Hintergrund, Rahmen und Schatten entfernen */
#booking-result-popup .close-modal {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    opacity: 0.8 !important; /* Leicht dezent */
    top: 10px !important;
    right: 15px !important;
}

/* Hover-Effekt: X wird beim Drüberfahren kräftiger */
#booking-result-popup .close-modal:hover {
    opacity: 1 !important;
    background: transparent !important;
}

/*
	Custom CSS
	Please make sure your CSS rules are 
	more particular / have higher priority
	then other page styles
*/
 #events h3   {
	/* add your css rule here */
}


 #events p.duration, #events div.duration   {
	/* add your css rule here */
}


 #events p.description, #events div.description   {
	/* add your css rule here */
}


 #events .selectedEvent   {
	/* add your css rule here */
}


 #events input.reserve_time_btn   {
	/* add your css rule here */
}


 #events input.select_another_btn   {
	/* add your css rule here */
}


 #eventForm #start_date-block-container h3, #eventForm #timeline-container h3   {
	/* add your css rule here */
}


 #eventForm #save_button   {
	/* add your css rule here */
}


 div.ui-widget-content   {
	/* add your css rule here */
}


 div.ui-widget-header   {
	/* add your css rule here */
}


 #timeline-container table.timeline   {
	/* add your css rule here */
}


 .timeline td.not_worked_time   {
	/* add your css rule here */
}


 .timeline td.free_time   {
	/* add your css rule here */
}


 .timeline td.selected_time   {
	/* add your css rule here */
}


 .timeline td.reserved_time   {
	/* add your css rule here */
}


 div#loading   {
	/* add your css rule here */
}


 #start_date-block-container .zend_form dt, start_date-block-container .zend_form dt b, start_date-block-container .zend_form dd label   {
	/* add your css rule here */
}