/* Import Schriftart */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500&family=Roboto+Condensed:wght@700&display=swap');

/* WICHTIG: Den Standard-Rand des Browsers entfernen,
   damit das Banner wirklich GANZ oben klebt */
body {
    margin: 0;
    padding: 0;
}

.school-banner {
    /* HIER IST DIE MAGIE: */
    position: sticky;   /* Klebt fest, sobald gescrollt wird */
    position: -webkit-sticky; /* Für Safari */
    top: 0;             /* Klebt genau an der Oberkante (0px Abstand) */
    z-index: 1050;      /* WICHTIG: Muss über allem anderen liegen (Bilder, Texte) */

    width: 100%;
    background-color: #fff; /* Damit man den Text beim Scrollen nicht "hindurch" sieht */
    margin: 0;
    padding: 0;
    overflow: visible;

    /* OPTIONAL: Ein kleiner Schatten, sobald es über dem Inhalt schwebt.
       Das sieht sehr edel aus und trennt das Menü vom Inhalt. */
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.banner-content {
    display: flex;
    justify-content: space-between;
    align-items: center;

    /* Desktop Abstände */
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 5px;
}

.banner-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* --- Hamburger Button --- */
.menu-btn {
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    box-shadow: none !important;
    transition: transform 0.2s;
}
.menu-btn:hover {
    transform: scale(1.1);
}
/* Icon Größe Desktop */
.menu-btn i {
    font-size: 32px;
    color: #2e5d8b;
}

/* --- Dropdown Menü --- */
.dropdown-menu {
    margin-top: 5px; /* Kleinerer Abstand zum Button */
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border: none;
}
.dropdown-item {
    padding: 10px 20px;
    font-size: 16px;
}
.dropdown-item:active {
    background-color: #2e5d8b;
}

/* --- Logo & Text (Desktop) --- */
.banner-logo {
    height: 65px;
    width: auto;
    margin: 5px;
}

.banner-text {
    font-family: 'Oswald', 'Roboto Condensed', sans-serif;
    font-size: 38px;
    color: #2e5d8b;
    text-transform: none;
    line-height: 1;
    white-space: nowrap;
}

.banner-stripe {
    display: block;
    width: 100%;
    height: auto;
    margin-top: -5px;
    /* Verhindert, dass unter dem Bild ein kleiner weißer Rand entsteht */
    vertical-align: bottom;
}

/* --- MOBILE ANSICHT (Hier sparen wir Platz!) --- */
@media screen and (max-width: 700px) {

    /* Banner Inhalt sehr kompakt machen */
    .banner-content {
        padding-bottom: 2px; /* Wenig Abstand unten */
        padding-left: 10px;
        padding-right: 10px;
    }

    /* Schrift deutlich kleiner */
    .banner-text {
        font-size: 18px;
    }

    /* Logo deutlich kleiner */
    .banner-logo {
        height: 30px;
        margin-right: 8px;
    }

    /* Hamburger Icon kleiner */
    .menu-btn i {
        font-size: 28px;
    }

    /* Den bunten Balken unten ggf. etwas skalieren oder so lassen */
    .banner-stripe {
        margin-top: -2px;
    }
}

/* --- Basis Styling für den neuen Knopf --- */
.btn-desktop-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0 10px;
    display: flex;
    align-items: center;
}

/* ============================================================
   TOGGLE BUTTON LOGIK (Angepasst: Lücke geschlossen)
   ============================================================ */

/* 1. GRUNDZUSTAND (Alles) */

/* Desktop-Knopf (Pfeil) ist standardmäßig AUS */
.btn-desktop-toggle {
    display: none !important;
}

/* Mobile-Knopf (Hamburger) ist standardmäßig AUS */
.btn-sidebar-toggle {
    display: none;
}


@media (max-width: 700px) {
    .btn-sidebar-toggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        cursor: pointer;
        margin-right: 10px;
        color: #2e5d8b;
        padding: 5px;
    }
}


/* 3. DESKTOP (ab 1081px Breite) */
@media (min-width: 700px) {

    /* Desktop-Knopf (Pfeil) sichtbar machen */
    .btn-desktop-toggle {
        display: inline-flex !important;
        align-items: center;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0 15px;
    }

    /* Mobile-Knopf (Hamburger) sicher verstecken */
    .btn-sidebar-toggle {
        display: none !important;
    }
}