/* --- Basis-Styling und Container --- */
.slider2026-wrapper {
    max-width: 1250px;
    margin: 0 auto;
    padding: 15px 0px;
    font-family: sans-serif;
    margin-top: 50px;
}
.slider2026-link-img{
    height: 49px;
    /*padding-left: calc(50% - 40px);*/
}

/* 1. Der Link-Container (hält das Bild im Zaum) */
.slider2026-top {
    display: inline-block; /* Wichtig, damit overflow und transform sauber greifen */
    overflow: hidden;
}

/* 2. Das Bild im Normalzustand (direkt über die Parent-Klasse angesprochen) */
.slider2026-top img {
    transition: transform 0.3s ease-in-out; /* Schönes, geschmeidiges Gleiten */
    transform: scale(1); /* Ausgangsgröße */
}

/* 3. On Hover: Das Bild im Container zoomt ganz leicht raus (wird 5% kleiner) */
.slider2026-top:hover img {
    transform: scale(0.9);
}


.slider2026-top-3,
.slider2026-top-4,
.slider2026-top-5,
.slider2026-top-6 {
    border: none !important;
    background-color: transparent !important;
}

/* --- 2. HOVER-EFFEKT: Hintergrund (rect) ändern --- */
/* 1. Der Container bekommt einfach standardmäßig dein Orange im Hintergrund --- */
.slider2026-item {
    display: inline-block;
    position: relative;
}

/* 2. Das Bild wird beim Hovern einfach leicht transparent --- */
.slider2026-img {
    transition: all 0.3s ease;
}

.slider2026-item:hover .slider2026-img {
    opacity: 0.3;
    filter: grayscale(100%);
}

.slider2026-menu-link:hover rect {
    fill: var(--orange);
}

/* --- 3. HOVER-EFFEKT: Schriftfarbe (text) ändern --- */
.slider2026-menu-link:hover svg text {
    fill: #ffffff;
}



/* --- Standard Styling für alle Boxen --- */
.slider2026-item {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 0;
    border: 1px solid var(--blue);
    box-sizing: border-box;
    overflow: hidden;
    text-decoration: none;
    background-color: var(--orange);
}

.slider2026-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin: 0;
}

.slider2026-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}

/* --- Text-Stile --- */
.slider2026-text-date {
    font-family: Oswald, 'Open sans', tahoma, arial, sans-serif;
    font-size: 30px;
    fill: #ffffff;
    text-shadow: 0 0 5px black;
}

.slider2026-text-default {
    font-family: Oswald, 'Open sans', tahoma, arial, sans-serif;
    font-size: 20px;
    fill: #ffffff;
    text-shadow: 1px 1px 1px var(--darker-orange),
                 1px -1px 1px var(--darker-orange),
                -1px 1px 1px var(--darker-orange),
                -1px -1px 1px var(--darker-orange);
}

.slider2026-text-default-extra {
    font-family: Oswald, 'Open sans', tahoma, arial, sans-serif;
    font-size: 20px;
    fill: #ffffff;
    text-shadow: 1px 1px 1px var(--blue),
                 1px -1px 1px var(--blue),
                -1px 1px 1px var(--blue),
                -1px -1px 1px var(--blue);
}

.slider2026-text-default-extra-bright {
    font-family: Oswald, 'Open sans', tahoma, arial, sans-serif;
    font-size: 20px;
    fill: #ffffff;
    text-shadow: 1px 1px 1px var(--bright-blue),
                 1px -1px 1px var(--bright-blue),
                -1px 1px 1px var(--bright-blue),
                -1px -1px 1px var(--bright-blue);
}

.slider2026-text-default-extra-semester {
    font-family: Oswald, 'Open sans', tahoma, arial, sans-serif;
    font-size: 20px;
    fill: #ffffff;
    text-shadow: 3px 3px 3px var(--darker-orange),
                 3px -3px 3px var(--darker-orange),
                -3px 3px 3px var(--darker-orange),
                -3px -3px 3px var(--darker-orange);
}

/* ==========================================================================
   DIE REITER & LOGO
   ========================================================================= */

/* Basis für alle 4 Top-Reiter */
.slider2026-top {
    position: absolute;
    /* Sitzen exakt 8px (Grid Gap) über der Haupt-Box */
    bottom: calc(100% + 8px);
    height: 62px;
    width: 100%;
    display: block;
    border: 1px solid var(--blue);
    background-color: #9ac255;
    box-sizing: border-box;
    text-decoration: none;
    z-index: 60;
}
.slider2026-top-contact{
       background-color: transparent;
}


.slider2026-top svg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%; display: block;
}

/* Logo Styling */
.slider2026-box-logo {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 70;
    pointer-events: none;
}

.slider2026-logo-img {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    /* Bricht exakt 50px nach oben aus (42px Reiter + 8px Gap) */
    height: calc(100% + 50px);
    max-height: 287px;
    object-fit: contain;
    pointer-events: auto;
}


/* ==========================================================================
   GETEILTE MENÜS (Links 2-geteilt, Rechts 3-geteilt)
   ========================================================================= */
.slider2026-menu-container {
    display: flex;
    flex-direction: column;
    background-color: #9ac255;
}

.slider2026-menu-link {
    flex: 1; /* Teilt den Platz automatisch durch die Anzahl der Links auf! */
    display: block;
    position: relative;
    border-bottom: 1px solid var(--blue);
    text-decoration: none;
}

.slider2026-menu-link svg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%; display: block;
}

.slider2026-menu-link:last-child {
    border-bottom: none;
}


/* ==========================================================================
   BREAKPOINTS & GRID-LOGIK
   ========================================================================= */

.slider2026-grid {
    position: relative;
}

/* --- 1. DESKTOP (Ab 1000px) --- */
@media (min-width: 1000px) {
    .slider2026-grid {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: 8px;
        aspect-ratio: 1100 / 250;
    }

    /* Zuweisung der Reiter oben */
    .slider2026-top-3 { grid-column: 3 / 4; }
    .slider2026-top-4 { grid-column: 4 / 5; }
    .slider2026-top-5 { grid-column: 9 / 10; }
    .slider2026-top-6 { grid-column: 10 / 11; }

    /* Zuweisung Hauptfeld (Obere Reihe) */
    .slider2026-box-1 { grid-column: 1 / 3; grid-row: 1 / 3; }
    .slider2026-box-3 { grid-column: 3 / 5; grid-row: 1 / 2; }
    .slider2026-box-logo { grid-column: 5 / 9; grid-row: 1 / 2; }
    .slider2026-box-4 { grid-column: 9 / 11; grid-row: 1 / 2; }
    .slider2026-box-6 { grid-column: 11 / 13; grid-row: 1 / 3; }

    /* Zuweisung Hauptfeld (Untere Reihe) */
    .slider2026-box-5 { grid-column: 3 / 5; grid-row: 2 / 3; } /* 2er Menü Links */
    .slider2026-box-8 { grid-column: 5 / 9; grid-row: 2 / 3; } /* MINT Mitte */
    .slider2026-box-9 { grid-column: 9 / 11; grid-row: 2 / 3; } /* 3er Menü Rechts */
}

/* --- 2. TABLET QUERFORMAT (750px bis 999px) --- */
@media (min-width: 750px) and (max-width: 999px) {
    .slider2026-wrapper {
        margin-top: 50px;
    }

    .slider2026-grid {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        grid-template-rows: repeat(3, 1fr);
        gap: 8px;
        aspect-ratio: 780 / 418.5;
    }

    /* Auf dem Tablet stapeln wir die Reiter aus Platzgründen */
    .slider2026-top-3 { grid-column: 1 / 2;  }
    .slider2026-top-4 { grid-column: 2 / 3;  }
    .slider2026-top-5 { grid-column: 7 / 8;  }
    .slider2026-top-6 { grid-column: 8 / 9;  }

    .slider2026-box-1 { grid-column: 1 / 3; grid-row: 1 / 3; }
    .slider2026-box-6 { grid-column: 7 / 9; grid-row: 1 / 3; }
    .slider2026-box-logo { grid-column: 3 / 7; grid-row: 1 / 2; }
    .slider2026-box-3 { grid-column: 3 / 5; grid-row: 2 / 3; }
    .slider2026-box-4 { grid-column: 5 / 7; grid-row: 2 / 3; }

    .slider2026-box-5 { grid-column: 1 / 3; grid-row: 3 / 4; }
    .slider2026-box-8 { grid-column: 3 / 7; grid-row: 3 / 4; }
    .slider2026-box-9 { grid-column: 7 / 9; grid-row: 3 / 4; }
}

/* --- 3. TABLET HOCHFORMAT (500px bis 749px) --- */
@media (min-width: 500px) and (max-width: 749px) {
   /* .slider2026-wrapper { margin-top: 15px; }*/

   .slider2026-logo-img {
    width: auto;
    height: calc(50% + 35px);
    margin-bottom: 30%;
}

    .slider2026-grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: repeat(3, 1fr);
        gap: 8px;
        /*aspect-ratio: 585 / 558;*/
        aspect-ratio: 585 / 418.5;
    }

    /* Auf kleinen Tablets blenden wir die Reiter aus */
    /*.slider2026-top { display: none !important; }*/

    /* Auf dem Tablet stapeln wir die Reiter aus Platzgründen */
    .slider2026-top-3 { grid-column: 1 / 2; grid-row: 1 / 2; }
    .slider2026-top-4 { grid-column: 2 / 3; grid-row: 1 / 2; }
    .slider2026-top-5 { grid-column: 5 / 6; grid-row: 1 / 2; }
    .slider2026-top-6 { grid-column: 6 / 7; grid-row: 1 / 2; }

    .slider2026-box-1 { grid-column: 1 / 3; grid-row: 1 / 3; }
    .slider2026-box-logo { grid-column: 3 / 5; grid-row:  1 / 2; }
    .slider2026-box-3 { grid-column: 3 / 5; grid-row: 2 / 3; }
    .slider2026-box-4 { grid-column: 1 / 3; grid-row: 3 / 4; }

    .slider2026-box-8 { grid-column: 3 / 7; grid-row: 3 / 4; }
    .slider2026-box-6 { grid-column: 5 / 7; grid-row: 1 / 3; }

    .slider2026-box-5 {  display: none !important;}
    .slider2026-box-9 {  display: none !important;}
}

/* --- 4. SMARTPHONE (Kompakt-Modus) - Unter 500px --- */
@media (max-width: 499px) {
    #topmenu { height: 0px; }

    .slider2026-wrapper {
        margin-top: 15px;
    }

    .slider2026-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
    }

    /* =========================================================
       1. DER HOLZHAMMER: Zwingt die Reiter zurück ins Grid!
       Hebt die absolute Positionierung vom Desktop knallhart auf.
       ========================================================= */
    .slider2026-top-3,
    .slider2026-top-4,
    .slider2026-top-5,
    .slider2026-top-6 {
        position: relative !important;
        bottom: auto !important;
        height: auto !important;
        display: block !important;
    }

    /* =========================================================
       2. ZEILE 1: Die 4 kleinen Icons (ganz oben!)
       Syntax: grid-area: Zeile-Start / Spalte-Start / Zeile-Ende / Spalte-Ende;
       ========================================================= */
    .slider2026-top-3 { grid-area: 1 / 1 / 2 / 2; aspect-ratio: 1 / 1; }
    .slider2026-top-4 { grid-area: 1 / 2 / 2 / 3; aspect-ratio: 1 / 1; }
    .slider2026-top-5 { grid-area: 1 / 3 / 2 / 4; aspect-ratio: 1 / 1; }
    .slider2026-top-6 { grid-area: 1 / 4 / 2 / 5; aspect-ratio: 1 / 1; }

    /* =========================================================
       3. ZEILE 2: Das Logo (Direkt unter den Icons)
       Nimmt Spalte 1 bis 5 (also alle 4 Spalten) ein
       ========================================================= */
    .slider2026-box-logo {
        grid-area: 2 / 1 / 3 / 5;
        height: 120px;
    }

    /* =========================================================
       4. ZEILE 3: Box 1 und 6 (jeweils halbe Breite)
       ========================================================= */
    .slider2026-box-1 { grid-area: 3 / 1 / 4 / 3; aspect-ratio: 195 / 279; }
    .slider2026-box-6 { grid-area: 3 / 3 / 4 / 5; aspect-ratio: 195 / 279; }

    /* =========================================================
       5. ZEILE 4: Box 8 (volle Breite)
       ========================================================= */
    .slider2026-box-8 { grid-area: 4 / 1 / 5 / 5; aspect-ratio: 350 / 121; }

    /* =========================================================
       6. ZEILE 5: Box 3 und 4 (jeweils halbe Breite)
       ========================================================= */
    .slider2026-box-3 { grid-area: 5 / 1 / 6 / 3; aspect-ratio: 165 / 121; }
    .slider2026-box-4 { grid-area: 5 / 3 / 6 / 5; aspect-ratio: 165 / 121; }

    /* =========================================================
       AUSGEBLENDETE ELEMENTE
       ========================================================= */
    .slider2026-box-5 { display: none !important; }
    .slider2026-box-9 { display: none !important; }
}

@media (max-width: 419px) {
    .slider2026-logo-img {
        height: calc(100% + 25px) !important;
    }
}