/* ==========================================
   GLOBAL
========================================== */


html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
    font-family: "Segoe UI", Arial, sans-serif;
}



body {
    background: #8fd3f4;
}





/* ==========================================
   HAUPT LAYOUT
========================================== */


.app-container {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}



.page-content {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: #8fd3f4;
}





/* ==========================================
   HEADER
========================================== */


.top-header {
    height: 85px;
    flex-shrink: 0;
    width: 100%;
    background: #002040;
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 0;
    z-index: 5000;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .22);
}





/* ==========================================
   LOGO
========================================== */


.logo-container {
    position: absolute;
    left: 25px;
    display: flex;
    align-items: center;
    text-decoration: none;
}



.logo-image {
    height: 55px;
    width: auto;
    margin-right: 15px;
}



.logo-text {
    color: white;
    font-size: 27px;
    font-weight: 900;
}



.logo-container:hover .logo-text {
    color: #7de3ff;
}





/* ==========================================
   NAVIGATION
========================================== */


.main-navigation {
    display: flex;
    align-items: center;
    gap: 25px;
}



    .main-navigation a {
        color: white;
        text-decoration: none;
        font-size: 17px;
        font-weight: 600;
        transition: color .2s ease;
    }



        /* Hover */

        .main-navigation a:hover {
            color: #7de3ff;
        }



        /* Aktuelle Seite */

        .main-navigation a.active {
            color: #0096c7;
        }





/* ==========================================
   DROPDOWN
========================================== */


.menu-dropdown {
    position: relative;
    height: 85px;
    display: flex;
    align-items: center;
}



.dropdown-button {
    display: flex;
    align-items: center;
    gap: 7px;
}



.arrow {
    font-size: 12px;
    transition: transform .25s ease;
}



.menu-dropdown.open .arrow {
    transform: rotate(180deg);
}





.menu-dropdown-list {
    position: absolute;
    top: 65px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 230px;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,.3);
    opacity: 0;
    visibility: hidden;
    transition: .2s ease;
    z-index: 1000;
}



.menu-dropdown.open > .menu-dropdown-list {
    opacity: 1;
    visibility: visible;
}



.menu-dropdown-list a {
    display: block;
    padding: 14px 18px;
    color: #002040;
}



    .menu-dropdown-list a:hover {
        background: #d9f5ff;
    }





/* ==========================================
   LOGIN / REGISTRIEREN
========================================== */


.account-buttons {
    position: absolute;
    right: 25px;
    display: flex;
    align-items: center;
    gap: 10px;
}



    .account-buttons a,
    .account-buttons button {
        box-sizing: border-box;
        min-height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        padding: 8px 15px;
        border-radius: 25px;
        font-size: 14px;
        font-weight: 700;
        line-height: 1;
    }



.login-button {
    color: white;
    border: 2px solid white;
}



    .login-button:hover {
        background: white;
        color: #002040;
    }



.register-button {
    background: #00a8e8;
    color: white;
}



    .register-button:hover {
        background: #0082b5;
    }





/* ==========================================
   CONTENT
========================================== */


.content-page {
    padding: 50px;
    text-align: center;
}



    .content-page h1 {
        color: #002040;
        font-size: 40px;
    }



    .content-page p {
        font-size: 20px;
    }





/* ==========================================
   KARTEN
========================================== */


.cards {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 25px;
    margin-top: 40px;
}



    .cards div {
        width: 280px;
        background: white;
        padding: 25px;
        border-radius: 15px;
        box-shadow: 0 5px 15px rgba(0,0,0,.2);
        transition: transform .2s ease;
    }



        .cards div:hover {
            transform: translateY(-5px);
        }





/* ==========================================
   FOOTER
========================================== */


.footer {
    height: 75px;
    flex-shrink: 0;
    width: 100%;
    background: #002040;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* Dynamische Standort-Untermenüs */
.about-dropdown-list {
    overflow: visible;
}

.nested-dropdown {
    position: relative;
}

.nested-dropdown-button {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.nested-dropdown-list {
    position: absolute;
    left: calc(100% - 4px);
    top: 0;
    min-width: 230px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,.28);
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transform: translateX(8px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
    z-index: 1500;
}

.nested-dropdown::after {
    content: "";
    position: absolute;
    top: 0;
    left: 100%;
    width: 14px;
    height: 100%;
}

.nested-dropdown.open .nested-dropdown-list {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}
.locations-index,.location-detail{max-width:1200px;margin:0 auto;padding:48px 24px 70px;color:#002040}.locations-index>h1,.location-detail>h1{text-align:center;font-size:42px}.locations-index>p{text-align:center;font-size:19px}.location-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:35px}.location-teaser{display:block;background:white;border-radius:18px;overflow:hidden;text-decoration:none;color:#002040;box-shadow:0 8px 22px rgba(0,0,0,.18);transition:transform .2s}.location-teaser:hover{transform:translateY(-5px)}.location-teaser img{width:100%;height:220px;object-fit:cover}.location-teaser div{padding:18px}.location-teaser h2{margin:0 0 6px}.location-hero{width:100%;max-height:560px;object-fit:cover;border-radius:22px;box-shadow:0 10px 28px rgba(0,0,0,.2)}.location-description{max-width:900px;margin:0 auto 36px;text-align:center;font-size:19px;line-height:1.7;white-space:pre-line}.location-map-address{display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,1fr);gap:24px;align-items:stretch}.location-map,.location-address{background:white;border-radius:18px;overflow:hidden;box-shadow:0 8px 22px rgba(0,0,0,.17)}.location-map iframe{width:100%;height:430px;border:0;display:block}.location-address{padding:30px;font-size:18px;line-height:1.7;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.location-address h2{margin-top:0}.location-address p{margin:0}.location-address a{display:inline-block;margin-top:15px;background:#003366;color:white;padding:11px 18px;border-radius:24px;text-decoration:none}@media(max-width:800px){.location-map-address{grid-template-columns:1fr}.location-map iframe{height:340px}.nested-dropdown-list{position:static;box-shadow:none;opacity:1;visibility:visible;margin-left:12px}}

.menu-dropdown-list a.active{background:#d9f5ff;color:#002040;}
@media(max-width:1100px){.location-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:650px){.location-grid{grid-template-columns:1fr;}}


/* Kunden- und Lehrerportal */
.auth-page,.portal-dashboard{box-sizing:border-box;flex:1;width:100%;padding:32px 20px;background:#a8d6f0;display:flex;justify-content:center;align-items:flex-start}.auth-card,.dashboard-card{box-sizing:border-box;width:min(820px,100%);background:#fff;border-radius:18px;padding:32px;box-shadow:0 12px 35px rgba(0,51,102,.16)}.auth-card.compact{width:min(520px,100%)}.auth-card h1,.dashboard-card h1{margin:0 0 8px;color:#003366}.auth-intro{margin:0 0 28px;color:#526273}.auth-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.auth-field{display:flex;flex-direction:column;gap:7px}.auth-field.wide{grid-column:1/-1}.auth-field label{font-weight:700;color:#163a5c}.auth-field input,.auth-field select{box-sizing:border-box;width:100%;height:48px;border:1px solid #b8c9d8;border-radius:9px;padding:0 14px;font:inherit;background:#fff}.auth-field input:focus,.auth-field select:focus{outline:3px solid rgba(73,172,232,.25);border-color:#298bc5}.password-toggle{display:flex;align-items:center;gap:9px;margin-top:14px;color:#163a5c;font-weight:700;cursor:pointer;user-select:none}.password-toggle.wide{grid-column:1/-1;margin-top:-2px}.password-toggle input{width:18px;height:18px;margin:0;accent-color:#168bd0;cursor:pointer}.auth-primary{width:100%;height:50px;margin-top:24px;border:0;border-radius:9px;background:#168bd0;color:#fff;font-weight:800;font-size:1rem;cursor:pointer}.auth-primary:hover{background:#0876b7}.auth-primary:disabled{opacity:.65;cursor:wait}.auth-error{margin-top:18px;padding:12px 14px;border-radius:8px;background:#ffe0e0;color:#8c1f1f;font-weight:700}.auth-switch{text-align:center;margin:22px 0 0}.auth-switch a{color:#0069a8;font-weight:800}.account-logout{border:0;font:inherit;cursor:pointer}.portal-dashboard{align-items:flex-start}.dashboard-card{margin-top:0}@media(max-width:700px){.auth-page,.portal-dashboard{padding:24px 12px}.auth-card{padding:24px 18px}.auth-grid{grid-template-columns:1fr}.auth-field.wide,.password-toggle.wide{grid-column:auto}}

/* Stabiler Seitenaufbau für Login und Registrierung */
html{scrollbar-gutter:stable;}
body{overflow-y:auto;}
.app-container{min-height:100vh;display:flex;flex-direction:column;}
.page-content{flex:1;display:flex;flex-direction:column;min-height:0;}
.auth-page{flex:1;min-height:calc(100vh - 150px);align-items:center!important;padding-top:18px!important;padding-bottom:18px!important;}
.auth-card{margin:auto;}
.register-page .auth-card{padding-top:22px;padding-bottom:22px;}
.register-page .auth-grid{gap:12px 18px;}
.register-page .auth-field{gap:4px;}
.register-page .auth-field input,.register-page .auth-field select{height:44px;}
.register-page .auth-primary{margin-top:16px;}
.register-page .auth-switch{margin-top:14px;}

/* Stabiler Seitenaufbau für Login und Registrierung */
html{scrollbar-gutter:stable;}
body{overflow-y:auto;}
.app-container{min-height:100vh;display:flex;flex-direction:column;}
.page-content{flex:1;display:flex;flex-direction:column;min-height:0;}
.auth-page{flex:1;min-height:calc(100vh - 150px);align-items:center!important;padding-top:18px!important;padding-bottom:18px!important;}
.auth-card{margin:auto;}
.register-page .auth-card{padding-top:22px;padding-bottom:22px;}
.register-page .auth-grid{gap:12px 18px;}
.register-page .auth-field{gap:4px;}
.register-page .auth-field input,.register-page .auth-field select{height:44px;}
.register-page .auth-primary{margin-top:16px;}
.register-page .auth-switch{margin-top:14px;}