/* Google Fonts importieren (Nur die benötigten Schriften für ein modernes Design) */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,700;1,400&family=Syne:wght@700;800&display=swap');

/* Ab hier folgt dein restlicher CSS-Code (body, h1, etc.) */
:root {
    /* Option A: Ein sattes, dunkleres Blutrot (wirkt sehr edel) */

    --colorBackground: #3B3127;
    --colorOnBackground: #DB8A59;
    --primary-hover: #b86f42;
    --border-color: #ced4da;
    --danger-color: #ef233c;
   
}

/* -------------------------------------------------------------
   GLOBALE TYPOGRAFIE-EINSTELLUNGEN
------------------------------------------------------------- */
/* Gilt für die gesamte Seite (Fließtext, Buttons, Buchung) */
/* Globale Hintergrundfarbe für die gesamte Seite erzwingen */
body {
    background-color: var(--colorBackground) !important;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* Restliche globale Typografie-Einstellungen */
body, input, select, textarea, button {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #1a1a1a;
    -webkit-font-smoothing: antialiased;
}

/* 2. Hintergrund für den Header auf der Startseite */
.tenant-header-bg {
    background-image: url('/Image/Webseite/webseiteDefault.png');
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 2rem;
    width: calc(100% - 1rem);
    height: calc(100% - 1rem);
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    filter: brightness(70%);
    z-index: 1;
}

/* Gilt für alle Überschriften */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Syne', sans-serif;
    font-weight: 700; /* Schön fett und ausdrucksstark */
    line-height: 1.2;
    letter-spacing: -0.02em; /* Leicht engerer Buchstabenabstand für modernen Look */
}

/* Beispiel für die Hauptüberschrift (Hero-Section) */
h1 {
    font-size: 2.5rem; /* Skaliert sauber */
    font-weight: 700; /* Extra fett für den ersten Eindruck */
    margin-bottom: 1.5rem;
}

.Tabellenheader {
    text-align:center;
    color: var(--colorBackground) !important;
    background-color: var(--colorOnBackground) !important;
}




.TabellensendeButton {
    padding: 5px;
    border-radius: 8px;
    border: none;
    background-color: var(--colorOnBackground) !important;
    margin: 00.2rem
}

    .TabellensendeButton:hover {
        background-color: var(--colorBackground) !important;
        color: var(--colorOnBackground) !important;
    }

.DienstplanAnsicht {
    background-color: var(--colorOnBackground) !important;
    color: var(--colorBackground) !important;
}

.nav-link-hover-effect {
    border-radius: 0.5rem;
    padding: 0.5rem;
    transition: background-color 0.2s ease, color 0.2s ease;
}

    /* Erzwingt den weißen Hintergrund für den Link */
    .nav-link-hover-effect:hover {
        background-color: #ffffff !important;
    }

        /* Erzwingt, dass der Text UND das h5-Element beim Hovern schwarz werden */
        .nav-link-hover-effect:hover,
        .nav-link-hover-effect:hover h5,
        .nav-link-hover-effect:hover .nav-link {
            color: #000000 !important;
        }
/* Beispiel für Absätze und den Buchungsbereich */
p, .booking-text {
    font-weight: 400; /* Normale Textstärke */
    margin-bottom: 1rem;
}

/* WICHTIG: Für wichtige Daten im Buchungskalender (z.B. Uhrzeiten) */
.booking-time, .price-tag {
    font-weight: 500; /* Etwas fetter, damit Preise und Zeiten sofort ins Auge springen */
}


/*Button für jetztBuchen*/
.btn-modern-booking {
    display: inline-block;
    font-family: 'Syne', sans-serif;
    font-size: 1.25rem;
    color: var(--colorOnBackground) !important;
    background-color: #140806;
    padding: 0.5rem 1rem;
    border-radius: 1rem;
    text-decoration: none !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

    .btn-modern-booking:hover {
        background-color: #222222;
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
    }

    .btn-modern-booking:active {
        transform: translateY(-1px);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    }




/* ###############Indexseite*/
#indexbild {
    border-radius: 2vh;
    height: 25vw;
    width: auto;
    background-size: cover; /* Bild vollständig anzeigen */
    background-repeat: no-repeat; /* Wiederholung verhindern */
    margin: auto;
    margin: 2vw;
    padding: 5vh;
}

/* ==========================================================================
   #INDEXSEITE - SERVICES GRID (Voll responsiv)
   ========================================================================== */

/* Der Container wird zum flexiblen Grid-System */
.services .service-gritti {
    display: grid;
    /* ÄNDERUNG: Wir begrenzen die maximale Breite der Spalten auf z.B. 300px */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    /* ÄNDERUNG: Zentriert die Kacheln, falls weniger als die volle Breite genutzt wird */
    justify-content: center;
    gap: 2rem;
    width: 90%;
    max-width: 75rem;
    margin: 2rem auto;
}

/* Der Container der einzelnen Service-Karten */
.innerer_Flex {
    display: flex;
    flex-direction: column;
    height: auto; /* Keine starre vh-Höhe mehr! Wächst elastisch mit dem Inhalt */
    min-height: 320px; /* Garantiert eine schöne Mindesthöhe */
    overflow: hidden;
    border-radius: 2rem 2rem 0 0;
    background-color: #1e1412; /* Einheitliches Dunkelbraun */
    border: 1px solid rgba(219, 138, 89, 0.15);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

/* Die Überschrift innerhalb der Karte */
.Serviceueberschrift {
    padding: 1.2rem 1rem;
    text-align: center;
    background-color: #1e1412;
}
.Servicepreisanzeige {
    font-size: 0.8em;
    font-family: 'Syne', sans-serif;
    color: var(--colorOnBackground);
    margin: auto
}
/* Sorgt dafür, dass das <h4> innerhalb der Kachel perfekt lesbar skaliert */
.Serviceueberschrift h4 {
    font-family: 'Syne', sans-serif;
    font-size: 1.2rem;
    color: var(--colorOnBackground);
    margin: 0;
    word-wrap: break-word; /* Verhindert das Rausfliegen bei langen Wörtern */
}

/* Das Service-Bild / GIF */
.BildFürService, #bild {
    width: 100%;
    height: 200px; /* Feste Bildhöhe für Symmetrie */
    object-fit: cover; /* Schneidet das Bild perfekt zu, kein Verzerren mehr */
    margin-top: auto; /* Schiebt das Bild immer bündig nach unten */
}

/* ==========================================================================
   RESPONSIVE MAP (MEDIA QUERIES FÜR MOBILE GERÄTE)
   ========================================================================== */

@media (max-width: 576px) {
    .services .service-gritti {
        /* Auf kleinen Handys erzwingen wir 2 Spalten nebeneinander */
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem; /* Kompakterer Abstand auf Smartphones */
        width: 95%;
    }

    .innerer_Flex {
        min-height: 240px; /* Etwas flacher auf Mobile */
        border-radius: 1rem 1rem 0 0; /* Kleinere Ecken-Radien auf Mobile */
    }

    .Serviceueberschrift {
        padding: 0.8rem 0.4rem;
    }

        .Serviceueberschrift h4 {
            font-size: 0.9rem; /* Leicht kleinere Schrift, damit sie nicht umbricht */
        }

    .BildFürService, #bild {
        height: 140px; /* Kompakteres Bild auf Mobile */
    }
}

/* Falls das Handy QUER gehalten wird (Landscape-Schutz) */
@media (max-height: 500px) and (orientation: landscape) {
    .innerer_Flex {
        min-height: 200px;
    }

    .BildFürService, #bild {
        height: 100px;
    }
}
/* ==========================================================================
   Service Create und 
   ========================================================================== */

/* Container für das Formular zentrieren */
.edit-preview-img {
    max-width: 200px; /* Maximale Breite */
    max-height: 200px; /* Maximale Höhe */
    width: 100%; /* Flexibel für kleine Screens */
    height: auto;
    object-fit: cover; /* Schneidet es quadratisch/passend zu ohne Verzerrung */
    border-radius: 1rem; /* Passt zum restlichen Design */
    border: 2px solid rgba(219, 138, 89, 0.3);
    display: block;
    margin: 1rem 0;
    /* WICHTIG gegen Verschwommenheit: */
    image-rendering: -webkit-optimize-contrast; /* Safari/Chrome */
    image-rendering: crisp-edges;
}
/* ==========================================================================
   MODERNE AUTH-FORMULARE (LOGIN & REGISTER)
   ========================================================================== */

/* Container für das Formular zentrieren */
.kartenkopf {
    width: 100%;
    max-width: 30rem; /* Perfekte Breite für Formulare */
    margin: 4rem auto;
    padding: 2.5rem;
    background-color: #1e1412; /* Das edle Dunkelbraun deiner Service-Karten */
    color: var(--colorOnBackground);
    border: 1px solid rgba(219, 138, 89, 0.15); /* Dezenter kupferner Rand */
    border-radius: 2rem;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}


/* ==========================================================================
   MOBILE FIX: Header und Titel auf Handys verkleinern
   ========================================================================== */
@media (max-width: 576px) {
    /* 1. Header-Höhe für Handys drastisch reduzieren */
    header div[style*="min-height: 24rem"] {
        min-height: 16rem !important;
        height: 18rem !important;
    }

    /* 2. Hintergrundbild-Container anpassen */
    header div[style*="background-image"] {
        border-radius: 1rem !important;
        width: calc(100% - 1rem) !important;
        height: calc(100% - 1rem) !important;
        top: 0.5rem !important;
        left: 0.5rem !important;
    }

    /* 3. Den "Style Inn"-Titel perfekt in die Mitte des kleineren Headers holen */
    header div.d-flex.justify-content-center {
        
        top: -7rem !important; /* Ersetzt das riesige -16rem vom Desktop */
        height: 100% !important;
    }

    /* 4. Schriftgröße des Titels auf Handys etwas verkleinern */
    header h2 {
        font-size: 2rem !important;
    }
}

/* Erzwingt, dass alle Menüelemente im Burger-Menü sauber untereinander stehen */
.navbar-collapse .navbar-nav {
    display: flex;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100%;
}

    .navbar-collapse .navbar-nav .nav-item {
        width: 100%;
    }

        .navbar-collapse .navbar-nav .nav-item form {
            width: 100%;
        }
/* NEU: Optimiertes mobiles Dropdown-Menü, damit absolut nichts mehr verdeckt wird */
@media (max-width: 991.98px) {
    .navbar-collapse {
        background-color: #2b221a !important;
        padding: 15px;
        border-radius: 0.5rem;
        margin-top: 10px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8);
        /* WICHTIG: Begrenzt die Höhe auf max. 65% des Bildschirms und macht es scrollbar */
        max-height: 65vh !important;
        overflow-y: auto !important;
        /* Zwingt das Menü ganz nach oben im Layer-Stack, damit kein Footer es verdeckt */
        position: relative;
        z-index: 9999;
    }
}

/*****************************************************************************************Login-Pages*/

/* 1. Hintergrund für die Login-Seite */
body.login-page-body {
    margin: 0;
    min-height: 100vh;
    background-image: url('/Image/Webseite/webseiteDefault.png');
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: rgba(0, 0, 0, 0.5);
    background-blend-mode: overlay;
    display: flex;
    flex-direction: column;
    width: 100%;
}


.InputText {
    color: var(--colorOnBackground) !important;
}

.login-wrapper {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.login-card {
    background-color: var(--colorBackground);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    width: 100%;
    max-width: 45rem; /* Vorher 32rem - jetzt breit genug für Laptop-Ansichten */
    padding: 30px;
    margin: auto;
}

.login-header {
    background-color: var(--colorBackground) !important;
    text-align: center;
}

    .login-header h4 {
        font-weight: 600;
        color: var(--colorOnBackground: #DB8A59);
        margin-bottom: 0.5rem;
        font-size: 1.75rem;
    }

    .login-header p {
        color: var(--colorOnBackground);
        font-size: 1rem;
    }

.loginCardBody {
    background-color: var(--colorBackground);
}

.form-group {
    margin-bottom: 1.25rem;
}

.form-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    font-size: 14px;
}

.form-control {
    background-color: white !important;
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 15px;
    transition: border-color 0.3s;
}

    .form-control:focus {
        border-color: var(--colorBackground);
        box-shadow: 0 0 0 3px rgba(219, 138, 89, 0.15);
        outline: none;
    }

.remember-me {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

    .remember-me .form-check-input {
        margin-right: 10px;
    }

.login-btn {
    width: 100%;
    padding: 5px;
    border-radius: 8px;
    border: none;
    background-color: var(--colorOnBackground) !important;
    margin: 00.2rem
}

    .login-btn:hover {
        background-color: var(--colorBackground) !important;
        color: var(--colorOnBackground) !important;
    }


.login-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

    .login-links a {
        color: var(--colorBackground);
        text-decoration: none;
        font-size: 14px;
        transition: color 0.2s;
    }

        .login-links a:hover {
            text-decoration: underline;
        }

.text-danger {
    color: var(--danger-color);
    font-size: 13px;
    margin-top: 5px;
    display: block;
}

.alert {
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.alert-danger {
    background-color: rgba(239, 35, 60, 0.1);
    border: 1px solid rgba(239, 35, 60, 0.2);
    color: var(--danger-color);
    font-size: 14px;
}

.alert-success {
    background-color: rgba(40, 167, 69, 0.1);
    border: 1px solid rgba(40, 167, 69, 0.2);
    color: var(--text-color);
}

.alert-info {
    background-color: rgba(23, 162, 184, 0.1);
    border: 1px solid rgba(23, 162, 184, 0.2);
    color: var(--text-color);
}

.alert i {
    font-size: 24px;
    margin-bottom: 10px;
    display: block;
}

.confirmation-message {
    margin: 25px 0;
    text-align: center;
}

.back-to-home,
.back-to-login {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-color);
    text-decoration: none;
}

    .back-to-home:hover,
    .back-to-login:hover {
        color: var(--colorBackground);
    }

.password-hint {
    font-size: 13px;
    color: #6c757d;
    margin-top: 5px;
    display: block;
}

.password-strength {
    margin-top: 5px;
    height: 5px;
    background: #f0f0f0;
    border-radius: 3px;
    overflow: hidden;
}

.strength-bar {
    height: 100%;
    width: 0%;
    background: #ef233c;
    transition: width 0.3s, background 0.3s;
}

.external-auth {
    margin-top: 30px;
    text-align: center;
}

    .external-auth .btn {
        margin: 5px;
        width: 100%;
        max-width: 200px;
    }

.external-auth-divider {
    display: flex;
    align-items: center;
    margin: 20px 0;
    color: #6c757d;
}

    .external-auth-divider::before,
    .external-auth-divider::after {
        content: "";
        flex: 1;
        border-bottom: 1px solid #dee2e6;
    }

    .external-auth-divider::before {
        margin-right: 10px;
    }

    .external-auth-divider::after {
        margin-left: 10px;
    }

.btn-outline-primary {
    border-color: var(--colorBackground);
    color: var(--colorBackground);
}

    .btn-outline-primary:hover {
        background-color: var(--colorBackground);
        color: white;
    }
.TitleColor {
    color: var(--colorOnBackground)
}
/* Standard-Layout für den footer für große Bildschirme (Desktop) */
.site-footer {
    font-size: 1.2rem;
    color: white;
    background-color: black;
    width: 100%;
    position: fixed;
    bottom: 0px;
    right: 0px;
    margin: 0;
    padding: 10px 20px;
    box-sizing: border-box;
}

.footer-container {
    font-family: 'Syne', sans-serif;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.footer-links {
    display: flex;
    gap: 30px;
}

/* Anpassung für Smartphones (Bildschirme kleiner als 768px) */
@media (max-width: 768px) {
    .site-footer {
        font-size: 0.85rem; /* Kleinere Schrift auf dem Handy */
        padding: 8px 12px;
    }

    .footer-container {
        flex-direction: column; /* Untereinander statt nebeneinander */
        gap: 6px; /* Kleiner Abstand zwischen Copyright und Links */
        text-align: center;
    }

    .footer-links {
        gap: 15px; /* Geringerer Abstand zwischen den Links */
    }
    #StyleInnSchriftzug{
        display:none;
    }
}

/* Container für Warnungen / Alternativen im Slot-Bereich */
.slot-alert-box {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    width: 100%;
}

.slot-alert-content {
    max-width: 450px;
    width: 100%;
    border-radius: 1rem;
    background-color: #fce8b2;
    color: #5c3a21;
    border: 1px solid #db8a59;
    padding: 1.5rem;
    text-align: center;
}

.slot-alert-text {
    font-weight: 600;
    margin-bottom: 1rem;
}

/* Buttons für alternative Friseure */
.btn-friseur-alt {
    background-color: #1e1412;
    color: #ffffff;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    transition: opacity 0.2s;
}

    .btn-friseur-alt:hover {
        opacity: 0.85;
        color: #ffffff;
    }

/* Zurück-Buttons */
.btn-back-solid {
    background-color: #1e1412;
    color: #ffffff;
    border: none;
    padding: 0.75rem;
    border-radius: 0.75rem;
}

.btn-back-outline {
    background-color: transparent;
    color: #5c3a21;
    border: 1px solid #5c3a21;
    padding: 0.5rem;
    border-radius: 0.75rem;
}