/* =================================

   RESET UND GRUNDEINSTELLUNGEN

   ================================= */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



body {

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    line-height: 1.6;

    color: #333;

    background-color: transparent;

    min-height: 100vh;

    display: flex;

    flex-direction: column;

    gap: 10px;

    padding: 10px 10px 10px 10px;

}



/* =================================

   HEADER UND NAVIGATION

   ================================= */

header {

    background: linear-gradient(135deg, #004526, #367c2b);

    border-radius: 10px;

    max-width: 1200px;

    margin: 0 auto;

    color: white;

    padding: 1rem 2rem;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

    width: 95%;

    box-sizing: border-box;

}



.header-container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 10px 0 0 0;

}



.logo-title-area {

    display: flex;

    align-items: center;

    margin-bottom: 0.5rem;

}



.title-section {

    display: flex;

    flex-direction: column;

}



.school-logo {

    height: 80px;

    width: auto;

    margin-right: 1rem;

    filter: invert(1);

}



header h1 {

    text-align: left;

    font-size: 2.5rem;

    margin: 0;

    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);

    color: white;

}



.subtitle {

    font-size: 1.6rem;

    font-weight: bold;

    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);

    letter-spacing: 0.1em;

    color: white;

    margin: 0;

    opacity: 0.9;

}



.header-link {

    color: white;

    text-decoration: none;

}



.header-link:hover {

    opacity: 0.8;

    text-decoration: none;

}



/* Navigation Containers */

.nav-container {

    display: flex;

    justify-content: space-between;

    align-items: center;

    width: 100%;

}



.text-nav {

    display: flex;

    align-items: center;

    margin-left: calc(58px + 1rem);

}



.text-nav a {

    color: white;

    text-decoration: none;

    padding: 0.8rem 1.5rem;

    margin: 0;

    border-radius: 25px;

    transition: all 0.3s ease;

    display: inline-block;

    font-weight: 500;

}



.text-nav a:hover {

    background: rgba(255, 255, 255, 0.2);

    transform: translateY(-2px);

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

}



.icon-nav {

    display: flex;

    gap: 1rem;

    margin-left: auto;

}



.icon-nav a {

    font-size: 1.2rem;

    padding: 0.1rem;

    border-radius: 8px;

    transition: all 0.3s ease;

    text-decoration: none;

    color: white;

}



.icon-nav a:hover {

    background: rgba(255, 255, 255, 0.2);

    transform: scale(1.1);

}



.nav-icon {

    width: 36px;

    height: 36px;

    transition: all 0.3s ease;

}



.icon-nav a:hover .nav-icon {

    transform: scale(1.1);

}



/* =================================

   SUB NAV FOR LONG PAGES

   ================================= */

.page-toc {

    background: transparent;

    border: none;

    padding: 0;

    margin: 0 0 0 2rem;

}



.page-toc h3 {

    margin: 0 0 1rem 0;

    color: #1e8449;

    font-size: 1.1rem;

    font-weight: bold;

}



.page-toc ul {

    list-style: none;

    padding: 0;

    margin: 0;

    display: flex;

    flex-wrap: wrap;

    gap: 0.5rem;

}



.page-toc a {

    color: #27ae60;

    text-decoration: none;

    font-size: 0.9rem;

    padding: 0.5rem 1rem;

    border: 1px solid #27ae60;

    border-radius: 10px;

    display: inline-block;

    transition: all 0.3s ease;

    background: white;

}



.page-toc a:hover {

    background: #27ae60;

    color: white;

}



.back-to-top {

    text-align: left;

    margin: 0;

    padding-top: 0;

    /*border-top: 1px solid #eee;*/

}



.back-to-top a {

    color: #27ae60;

    text-decoration: none;

    font-size: 0.9rem;

    padding: 0.5rem 1rem;

    border: 1px solid #27ae60;

    border-radius: 10px;

    transition: all 0.3s ease;

}



.back-to-top a:hover {

    background: #27ae60;

    color: white;

}



/* =================================

   HERO GRID - IMMER 4 IN EINER REIHE

   ================================= */

.hero-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr); /* Immer 4 gleichgroße Spalten */

    gap: clamp(4px, 1vw, 15px); /* Responsive Gap */

    max-width: 1200px;

    margin: 0 auto;

    width: 95%; /* Nutzt immer 95% der verfügbaren Breite */

    padding: 0;

}



.hero-card {

    position: relative;

    aspect-ratio: 1; /* Quadratisch */

    border-radius: 10px;

    cursor: pointer;

    transition: all 0.3s ease;

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    text-decoration: none;

    color: white;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);

    min-height: 60px; /* Absolute Mindesthöhe für Touch */

    min-width: 60px;  /* Absolute Mindestbreite für Touch */

}



.hero-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);

}



.hero-card::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: linear-gradient(180deg,

            rgba(0, 0, 0, 0.1) 0%,

            rgba(0, 0, 0, 0.3) 50%,

            rgba(0, 0, 0, 0.8) 100%);

    border-radius: 10px;

    transition: background 0.3s ease;

}



.hero-card:hover::before {

    background: linear-gradient(180deg,

            rgba(0, 0, 0, 0.2) 0%,

            rgba(0, 0, 0, 0.5) 50%,

            rgba(0, 0, 0, 0.9) 100%);

    border-radius: 10px;

}



.hero-card-content {

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    padding: clamp(0.5rem, 3vw, 2rem); /* Skaliert mit Bildschirmbreite */

    z-index: 2;

    text-align: left;

}



.hero-card-title {

    font-size: clamp(0.7rem, 2.5vw, 1.5rem); /* Von sehr klein bis normal */

    font-weight: bold;

    margin-bottom: clamp(0.2rem, 1vw, 0.5rem);

    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);

    line-height: 1.1; /* Enger für kleine Screens */

}



.hero-card-subtitle {

    font-size: clamp(0.6rem, 2vw, 1rem); /* Noch kleiner für sehr schmale Screens */

    opacity: 0.9;

    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);

    line-height: 1.2;

}



/* =================================

   RESPONSIVE ANPASSUNGEN

   ================================= */



/* Desktop */

@media (min-width: 769px) {

    .hero-grid {

        gap: 15px;

    }

}



/* Tablet */

@media (max-width: 768px) {

    .hero-grid {

        width: 95%;

        padding: 1rem;

        margin: 0;

        max-width: none; /* Entfernt 1200px Limit */

        gap: clamp(6px, 1.5vw, 12px);

    }

    

    .hero-card:hover {

        transform: translateY(-2px); /* Weniger Movement auf Touch */

    }

}



/* Mobile */

@media (max-width: 480px) {

    .hero-grid {

        padding: 0.5rem;

        gap: clamp(4px, 1vw, 8px);

        width: 98%; /* Nutzt noch mehr Platz auf sehr kleinen Screens */

    }

    

    .hero-card {

        min-height: 50px; /* Etwas kleiner auf Mobile */

        min-width: 50px;

        border-radius: clamp(5px, 2vw, 10px); /* Responsive border-radius */

    }

    

    .hero-card::before,

    .hero-card:hover::before {

        border-radius: clamp(5px, 2vw, 10px); /* Matching border-radius */

    }

}



/* Sehr kleine Screens */

@media (max-width: 320px) {

    .hero-grid {

        width: 99%; /* Maximale Breite ausnutzen */

        padding: 0.3rem;

        gap: clamp(2px, 0.5vw, 4px);

    }

    

    .hero-card {

        min-height: 45px;

        min-width: 45px;

    }

    

    /* Text könnte bei sehr kleinen Kacheln verschwinden */

    .hero-card-title {

        font-size: clamp(0.6rem, 2.5vw, 1rem);

    }

    

    .hero-card-subtitle {

        font-size: clamp(0.5rem, 2vw, 0.8rem);

    }

}



/* Ultra-schmale Screens (für den Fall der Fälle) */

@media (max-width: 280px) {

    .hero-grid {

        gap: 2px;

        padding: 0.2rem;

    }

    

    .hero-card {

        min-height: 40px;

        min-width: 40px;

    }

    

    /* Bei extrem kleinen Kacheln kann der Text ausgeblendet werden */

    .hero-card-content {

        padding: clamp(0.3rem, 2vw, 1rem);

    }

}



/* =================================

   HAUPTINHALT

   ================================= */

main {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0;

    border-radius: 10px;

    /*box-shadow: 0 5px 15px rgba(0,0,0,0.1);*/

    min-height: 60vh;

    flex: 1;

    width: 100%;

    box-sizing: border-box;

    animation: fadeIn 0.6s ease-in;

}



main>*:not(.full-image) {

    padding: 1rem 2rem 0 2rem;



}



@keyframes fadeIn {

    from {

        opacity: 0;

        transform: translateY(20px);

    }



    to {

        opacity: 1;

        transform: translateY(0);

    }

}



/* =================================

   Infobox

   ================================= */



.info-timeline {

    margin: -2rem 2rem 2rem 2rem;

}



.infobox {

    padding: 1rem 2rem 0rem;

    margin: 2rem 0rem;

    background: linear-gradient(135deg, #e8f5e8, #f1f8f1);

    /*border-left: 1px solid #27ae60;*/

    border-radius: 10px;

    box-shadow: 0 4px 12px rgba(39, 174, 96, 0.15);

    transition: all 0.3s ease;

    position: relative;

}



.infobox::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 5px;

    height: 100%;

    background: linear-gradient(180deg, #27ae60, #1e8449);

    border-radius: 0 0 0 12px;

}



.infobox:hover {

    transform: translateY(-2px);

    box-shadow: 0 6px 20px rgba(39, 174, 96, 0.2);

}



.infobox h3 {

    color: #1e8449;

    margin: 0;

    font-size: 1.3rem;

}



/*.infobox h3::before {

    content: 'ℹ️';

    margin-right: 1rem;

    font-size: 1.2rem;

}

*/    



.infobox p {

    margin: 1rem 0 1rem 0;

    color: #2c3e50;

    line-height: 1.6;

}



/* =================================

   TYPOGRAFIE

   ================================= */

h1 {

    color: #1e8449;

    font-size: 2.5rem;

    margin-bottom: 1rem;

    border-bottom: 3px solid #27ae60;

    padding-bottom: 0.5rem;

}



h2 {

    color: #166e3c;

    font-size: 2rem;

    margin: 0;

    position: relative;

    padding-bottom: 0.5rem;

}



h3 {

    color: #7f8c8d;

    font-size: 1.5rem;

    margin: 1.5rem 0 0.5rem 0;

}



p {

    margin-bottom: 0;

    font-size: 1.1rem;

    line-height: 1.7;

}



main a {

    color: #27ae60;

    text-decoration: none;

    border-bottom: 2px solid transparent;

    transition: border-color 0.3s ease;

}



main a:hover {

    border-bottom-color: #27ae60;

}



/* =================================

   FOOTER

   ================================= */

footer {

    background: linear-gradient(135deg, #004526, #367c2b);

    border-radius: 10px;

    max-width: 1200px;

    margin: 0 auto;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);

    color: white;

    padding: 2rem;

    width: 95%;

    box-sizing: border-box;

    text-align: center;

}



/* =================================

   BILDERGALERIEN UND VOLLBILDER

   ================================= */

/* Galerie Raster */

    .gallery-grid {

        display: grid;

        grid-template-columns: repeat(4, 1fr);

        gap: 2rem;

        margin: 3rem 0;

    }



    .gallery-item {

        cursor: pointer;

        transition: transform 0.3s ease;

    }



    .gallery-item:hover {

        transform: translateY(-5px);

    }



    .gallery-thumbnail {

        width: 100%;

        aspect-ratio: 1;

        object-fit: cover;

        border-radius: 10px;

        box-shadow: 0 3px 10px rgba(0,0,0,0.2);

        transition: all 0.3s ease;

    }



    .gallery-item:hover .gallery-thumbnail {

        box-shadow: 0 8px 25px rgba(0,0,0,0.3);

    }



    .gallery-title {

        text-align: center;

        margin-top: 1rem;

        font-size: 1.1rem;

        font-weight: 600;

        color: #239b56;

    }



    /* Lightbox */

    .lightbox {

        display: none;

        position: fixed;

        top: 0;

        left: 0;

        width: 100%;

        height: 100%;

        background: rgba(0,0,0,0.95);

        z-index: 1000;

        animation: fadeIn 0.3s ease;

    }



    .lightbox.active {

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

    }



    .lightbox-close {

        position: absolute;

        top: 20px;

        right: 30px;

        font-size: 3rem;

        color: white;

        cursor: pointer;

        background: none;

        border: none;

        transition: transform 0.3s ease;

        z-index: 1002;

    }



    .lightbox-close:hover {

        transform: scale(1.2);

    }



    .lightbox-title {

        position: absolute;

        top: 30px;

        left: 50%;

        transform: translateX(-50%);

        color: white;

        font-size: 1.5rem;

        z-index: 1002;

    }



    /* Thumbnail Übersicht */

    .lightbox-thumbnails {

        display: grid;

        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

        gap: 1rem;

        padding: 2rem;

        max-width: 1200px;

        width: 90%;

        overflow-y: auto;

        max-height: 80vh;

    }



    .lightbox-thumb {

        width: 100%;

        aspect-ratio: 1;

        object-fit: cover;

        border-radius: 8px;

        cursor: pointer;

        transition: all 0.3s ease;

        border: 3px solid transparent;

    }



    .lightbox-thumb:hover {

        transform: scale(1.05);

        border-color: #27ae60;

    }



    /* Slideshow Ansicht */

    .lightbox-slideshow {

        display: none;

        width: 100%;

        height: 100%;

        align-items: center;

        justify-content: center;

        padding: 0 100px;

    }



    .lightbox-slideshow.active {

        display: flex;

    }



    .lightbox-image {

        max-width: 90%;

        max-height: 85vh;

        object-fit: contain;

        border-radius: 10px;

    }



    .lightbox-nav {

        position: absolute;

        top: 50%;

        transform: translateY(-50%);

        background: rgba(255,255,255,0.9);

        border: none;

        width: 60px;

        height: 60px;

        border-radius: 50%;

        cursor: pointer;

        font-size: 2rem;

        display: flex;

        align-items: center;

        justify-content: center;

        transition: all 0.3s ease;

        z-index: 1001;

    }



    .lightbox-nav:hover {

        background: white;

        transform: translateY(-50%) scale(1.1);

    }



    .lightbox-prev { left: 30px; }

    .lightbox-next { right: 30px; }



    .lightbox-home {

        position: absolute;

        bottom: 30px;

        left: 50%;

        transform: translateX(-50%);

        background: rgba(255,255,255,0.9);

        border: none;

        width: 60px;

        height: 60px;

        border-radius: 50%;

        cursor: pointer;

        font-size: 1.8rem;

        display: flex;

        align-items: center;

        justify-content: center;

        transition: all 0.3s ease;

        z-index: 1001;

    }



    .lightbox-home:hover {

        background: white;

        transform: translateX(-50%) scale(1.1);

    }



    /* Responsive */

    @media (max-width: 1024px) {

        .gallery-grid {

            grid-template-columns: repeat(3, 1fr);

        }

    }



    @media (max-width: 768px) {

        .gallery-grid {

            grid-template-columns: repeat(2, 1fr);

            gap: 1rem;

        }



        .lightbox-thumbnails {

            grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

        }



        .lightbox-slideshow {

            padding: 0 60px;

        }



        .lightbox-nav {

            width: 50px;

            height: 50px;

        }

    }



    @media (max-width: 480px) {

        .gallery-grid {

            grid-template-columns: 1fr;

        }

    }





/* Mini-Lightbox für einzelne Bilder - Einfache Version */



/* Klickbare Bilder im Content */

.popup-image {

    width: auto;

    height: 240px;

    cursor: pointer;

    border-radius: 8px;

    transition: transform 0.3s ease, box-shadow 0.3s ease;

    box-shadow: 0 2px 8px rgba(0,0,0,0.1);

    object-fit: contain;

}



.popup-image:hover {

    transform: scale(1.02);

    box-shadow: 0 4px 15px rgba(0,0,0,0.2);

}



/* Lightbox Overlay */

.image-overlay {

    display: none;

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0,0,0,0.95);

    z-index: 1000;

    animation: fadeIn 0.3s ease;

}



.image-overlay.active {

    display: flex;

    align-items: center;

    justify-content: center;

}



/* Vergrößertes Bild */

.image-overlay img {

    max-width: 90%;

    max-height: 85vh;

    object-fit: contain;

    border-radius: 10px;

}



/* Schließen-Button */

.image-overlay-close {

    position: absolute;

    top: 20px;

    right: 30px;

    font-size: 3rem;

    color: white;

    cursor: pointer;

    background: none;

    border: none;

    transition: transform 0.3s ease;

    z-index: 1002;

}



.image-overlay-close:hover {

    transform: scale(1.2);

}



/* Responsive */

@media (max-width: 768px) {

    .popup-image {

        width: 100%;

        max-width: 320px;

    }

    

    .image-overlay img {

        max-width: 95%;

    }

}



/* Bildreihe für Beiträge*/

.image-row {

    display: flex;

    gap: 1rem;

    flex-wrap: wrap;

    margin: 1rem 0;

    justify-content: center;

}



/* =================================

   Timeline

   ================================= */



.termine-timeline {

    margin: 2rem;

}



.termin-item {

    display: flex;

    margin-bottom: 1.0rem;

    padding: 1rem;

    background: white;

    border-left: 5px solid #27ae60;

    border-radius: 10px;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

}



.termin-item h3 {

    margin: 0;

    color: #1e8449;

}



.termin-item p {

    margin: 0;

    color: #666;

}



/* =================================

   UTILITY CLASSES

   ================================= */

.text-center {

    text-align: center;

}



.mb-2 {

    margin-bottom: 2rem;

}



.mt-2 {

    margin-top: 2rem;

}



/* =================================

   MOBILE RESPONSIVE - OHNE ÄUSSERE RÄNDER

   ================================= */



@media (max-width: 768px) {



    /* Body komplett ohne Padding/Margin */

    body {

        padding: 0;

        margin: 0;

        gap: 0;

        /* Entfernt auch das Gap zwischen den Elementen */

    }



    /* Header - volle Breite ohne Rundung */

    header {

        margin: 0;

        padding: 1rem;

        border-radius: 0;

        width: 100%;

        max-width: none;

        box-sizing: border-box;

    }



    .header-container {

        padding: 0;

        max-width: none;

        width: 100%;

        box-sizing: border-box;

    }



    /* Main - volle Breite ohne Rundung */

    main {

        margin: 0;

        border-radius: 0;

        box-shadow: none;

        width: 100%;

        max-width: none;

        padding: 0;

        box-sizing: border-box;

    }



    /* Main Inhalte - Padding nur innen */

    main>*:not(.full-image):not(.hero-grid):not(.fade-carousel) {

        padding: 1rem;

    }



    /* Footer - volle Breite ohne Rundung */

    footer {

        margin: 0;

        border-radius: 0;

        width: 100%;

        max-width: none;

        padding: 1rem;

        box-sizing: border-box;

    }



    /* Hero Grid - volle Breite */

    .hero-grid {

        width: 100%;

        max-width: none;

        padding: 1rem;

        margin: 0;

        gap: 10px;

        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

    }



    /* Hero Cards angepasst */

    .hero-card-content {

        padding: 1rem;

    }



    .hero-card-title {

        font-size: 1.2rem;

    }



    .hero-card-subtitle {

        font-size: 0.9rem;

    }



    /* Navigation kompakter */

    .logo-title-area {

        flex-direction: column;

        align-items: center;

        margin-bottom: 1rem;

    }



    .school-logo {

        height: 50px;

        margin-right: 0;

        margin-bottom: 0.5rem;

    }



    header h1 {

        font-size: 2rem;

        text-align: center;

    }



    .subtitle {

        text-align: center;

        margin-bottom: 1rem;

        font-size: 1.2rem;

        /* Etwas größer für bessere Lesbarkeit */

    }



    .nav-container {

        flex-direction: column;

        gap: 1rem;

    }



    .text-nav {

        margin-left: 0;

        flex-wrap: wrap;

        justify-content: center;

        gap: 0.5rem;

    }



    .text-nav a {

        padding: 0.6rem 1rem;

        /* Etwas kompakter */

        border-radius: 8px;

        font-size: 0.9rem;

    }



    .icon-nav {

        margin-left: 0;

        justify-content: center;

    }



    /* Timeline und Infoboxen angepasst */

    .termine-timeline {

        margin: 0;

        padding: 1rem;

    }



    .info-timeline {

        margin: 0;

        padding: 1rem;

    }



    .infobox {

        margin: 1rem 0;

        padding: 1rem;

    }



    /* Page TOC angepasst */

    .page-toc {

        margin: 0;

        padding: 1rem;

    }



    .back-to-top {

        text-align: center;

        padding: 1rem;

    }



    /* Typografie angepasst */

    h1 {

        font-size: 1.8rem;

        /* Etwas kleiner für mobile */

        margin-bottom: 0.5rem;

    }



    h2 {

        font-size: 1.4rem;

        margin: 1rem 0 0.5rem 0;

    }



    h2::before {

        display: none;

        /* Entfernt die Seitenlinie bei h2 */

    }



    h3 {

        font-size: 1.2rem;

        margin: 1rem 0 0.5rem 0;

    }



    p {

        font-size: 1rem;

        line-height: 1.6;

    }



    /* Galleries volle Breite */

    .gallery {

        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

        gap: 0.5rem;

        margin: 1rem 0;

    }



    /* Spezielle Elemente die volle Breite brauchen */

    .full-image,

    .fade-carousel {

        width: 100%;

        margin: 0;

        border-radius: 0;

    }



    /* Falls du ein Begrüßungsbanner hast */

    .greeting-banner {

        padding: 2rem 1rem;

        margin: 0;

    }



    .floating-headline {

        font-size: 1.8rem;

    }



    .breathing-subtitle {

        font-size: 1.2rem;

    }

}



/* =================================

   SEHR KLEINE BILDSCHIRME (unter 480px)

   ================================= */

@media (max-width: 480px) {



    /* Noch kompaktere Navigation */

    .text-nav a {

        padding: 0.5rem 0.8rem;

        font-size: 0.85rem;

    }



    /* Hero Grid noch enger */

    .hero-grid {

        padding: 0.5rem;

        gap: 8px;

        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));

    }



    .hero-card-content {

        padding: 0.8rem;

    }



    .hero-card-title {

        font-size: 1.1rem;

    }



    .hero-card-subtitle {

        font-size: 0.85rem;

    }



    /* Noch kleinere Typografie */

    header h1 {

        font-size: 1.6rem;

    }



    .subtitle {

        font-size: 1rem;

    }



    h1 {

        font-size: 1.6rem;

    }



    h2 {

        font-size: 1.3rem;

    }



    h3 {

        font-size: 1.1rem;

    }



    /* Alle Inhalte mit weniger Padding */

    main>*:not(.full-image):not(.hero-grid):not(.fade-carousel) {

        padding: 0.8rem;

    }



    .termine-timeline,

    .info-timeline,

    .page-toc {

        padding: 0.8rem;

    }



    /* Banner kompakter */

    .greeting-banner {

        padding: 1.5rem 0.8rem;

    }



    .floating-headline {

        font-size: 1.5rem;

    }



    .breathing-subtitle {

        font-size: 1rem;

    }

}



/* =================================

   Startseite

   ================================= */

/* Begrüßungsbanner */

.greeting-banner {

    text-align: center;

    padding: 60px 20px;

    background: transparent;

    margin: 0;

}



/* Floating Hauptüberschrift */

.floating-headline {

    font-size: 2.8rem;

    font-weight: 600;

    color: #1e8449;

    margin-bottom: 15px;

    animation: gentleFloatUp 5s ease-in-out infinite;

    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);

    line-height: 1.2;

}



@keyframes gentleFloatUp {



    0%,

    100% {

        transform: translateY(0px);

    }



    50% {

        transform: translateY(-5px);

    }

}



/* Breathing Untertitel */

.breathing-subtitle {

    font-size: 1.6rem;

    color: #239b56;

    margin: 0;

    padding-bottom: 1.5rem;

    animation: breatheText 6s ease-in-out infinite;

    opacity: 0.9;

    font-weight: 400;

    line-height: 1.3;

}



@keyframes breatheText {



    0%,

    100% {

        transform: scale(1);

        opacity: 0.9;

    }



    50% {

        transform: scale(1.02);

        opacity: 1;

    }

}



/* Responsive Design */

@media (max-width: 768px) {

    .greeting-banner {

        padding: 40px 15px;

    }



    .floating-headline {

        font-size: 2.2rem;

        margin-bottom: 12px;

    }



    .breathing-subtitle {

        font-size: 1.3rem;

    }



    .banner-divider {

        width: 40px;

        margin-top: 20px;

    }

}



@media (max-width: 480px) {

    .greeting-banner {

        padding: 30px 10px;

    }



    .floating-headline {

        font-size: 1.8rem;

        margin-bottom: 10px;

    }



    .breathing-subtitle {

        font-size: 1.1rem;

    }



    .banner-divider {

        width: 30px;

        margin-top: 15px;

    }

}



/* Fade-Through Karussel - Volle Breite */

.fade-carousel {

    position: relative;

    margin: 0 auto;

    width: 95%;

    height: 570px;

    border-radius: 10px;

    overflow: hidden;

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);

}



.fade-slide {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    opacity: 0;

    transition: opacity 2s ease-in-out;

    display: flex;

    align-items: center;

    justify-content: center;

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

}



.fade-slide.active {

    opacity: 1;

}



/* Text-Overlay */

.slide-text-overlay {

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));

    color: white;

    padding: 50px 40px 25px;

    text-align: left;

}



.slide-title {

    font-size: 2.2rem;

    font-weight: 600;

    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);

    line-height: 1.2;

    margin: 0;

}



/* Responsive Design */

@media (max-width: 768px) {

    .fade-carousel {

        height: 250px;

        border-radius: 10px;

    }



    .slide-text-overlay {

        padding: 35px 25px 20px;

    }



    .slide-title {

        font-size: 1.6rem;

    }

}



@media (max-width: 480px) {

    .fade-carousel {

        height: 200px;

        border-radius: 8px;

    }



    .slide-text-overlay {

        padding: 25px 20px 15px;

    }



    .slide-title {

        font-size: 1.3rem;

    }

}



/* Pause Animation on Hover */

.fade-carousel:hover .carousel-pause {

    animation-play-state: paused;

}



/* =================================

   Unsere Schule

   ================================= */

.stats-container {

    max-width: 1200px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 2rem;

    padding: 1rem 0;

}



.stat-box {

    background: linear-gradient(135deg, #e8f5e8, #f1f8f1);

    border: 2px solid #27ae60;

    border-radius: 15px;

    padding: 1rem 1rem;

    text-align: center;

    box-shadow: 0 4px 15px rgba(39, 174, 96, 0.15);

    transition: all 0.3s ease;

    position: relative;

    overflow: hidden;

}



.stat-box::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 5px;

    background: linear-gradient(90deg, #27ae60, #1e8449);

}



.stat-box:hover {

    transform: translateY(-5px);

    box-shadow: 0 8px 25px rgba(39, 174, 96, 0.25);

    border-color: #1e8449;

}



.stat-number {

    font-size: 3.5rem;

    font-weight: bold;

    color: #1e8449;

    margin-bottom: 0.5rem;

    line-height: 1;

}



.stat-label {

    font-size: 1.1rem;

    color: #2c3e50;

    font-weight: 500;

    text-transform: uppercase;

    letter-spacing: 0.5px;

}



/* Mobile Anpassungen */

@media (max-width: 768px) {

    .stats-container {

        grid-template-columns: repeat(2, 1fr);

        gap: 1rem;

        padding: 1rem 0;

    }



    .stat-box {

        padding: 2rem 1rem;

    }



    .stat-number {

        font-size: 2.5rem;

    }



    .stat-label {

        font-size: 1rem;

    }

}



@media (max-width: 480px) {

    .stats-container {

        grid-template-columns: 1fr;

    }

}



/* Schulleitung Sektion */

.staff-section {

    margin: 3rem 0;

}



.staff-container {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 2rem;

    margin-top: 0rem;

}



.staff-card {

    background: white;

    border-radius: 10px;

    padding: 2rem;

    text-align: center;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);

    transition: all 0.3s ease;

    border: 2px solid transparent;

}



.staff-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 8px 25px rgba(39, 174, 96, 0.2);

    border-color: #27ae60;

}



.staff-photo {

    width: 180px;

    height: 180px;

    border-radius: 50%;

    object-fit: cover;

    margin: 0 auto 1.5rem;

    border: 4px solid #e8f5e8;

    transition: all 0.3s ease;

}



.staff-card:hover .staff-photo {

    border-color: #27ae60;

}



.staff-name {

    font-size: 1.3rem;

    font-weight: bold;

    color: #1e8449;

    margin-bottom: 0.5rem;

}



.staff-position {

    font-size: 1rem;

    color: #2c3e50;

    font-weight: 500;

}



.staff-contact {

    font-size: 0.9rem;

    color: #666;

    margin-top: 1rem;

}



.staff-contact a {

    color: #27ae60;

    text-decoration: none;

    transition: color 0.3s ease;

}



.staff-contact a:hover {

    color: #1e8449;

    text-decoration: underline;

}



/* Platzhalter für Bilder */

.staff-photo.placeholder {

    background: linear-gradient(135deg, #e8f5e8, #c8e6c9);

    display: flex;

    align-items: center;

    justify-content: center;

    color: #1e8449;

    font-size: 2.5rem;

    font-weight: bold;

}



/* Mobile Anpassungen */

@media (max-width: 768px) {

    .staff-container {

        grid-template-columns: 1fr;

        gap: 1.5rem;

    }



    .staff-card {

        padding: 1.5rem;

    }



    .staff-photo {

        width: 150px;

        height: 150px;

    }



    .staff-name {

        font-size: 1.2rem;

    }

}



/* Pädagogenfoto Sektion */

.teacher-photo-section {

    margin-bottom: 2rem;

    text-align: center;

}



.teacher-photo-container {

    display: block;

    width: 100%;

    background: white;

    border-radius: 15px;

    padding: 2rem;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);

    transition: all 0.3s ease;

    border: 2px solid transparent;

    cursor: pointer;

}



.teacher-photo-container:hover {

    transform: translateY(-5px);

    box-shadow: 0 8px 25px rgba(39, 174, 96, 0.2);

    border-color: #27ae60;

}



.teacher-photo {

    width: 100%;

    height: 400px;

    border-radius: 15px;

    object-fit: cover;

    border: 4px solid #e8f5e8;

    transition: all 0.3s ease;

}



.teacher-photo-container:hover .teacher-photo {

    border-color: #27ae60;

}



/* Platzhalter für Bild */

.teacher-photo.placeholder {

    background: linear-gradient(135deg, #e8f5e8, #c8e6c9);

    display: flex;

    align-items: center;

    justify-content: center;

    color: #1e8449;

    font-size: 4rem;

    font-weight: bold;

    flex-direction: column;

}



.teacher-photo.placeholder::after {

    content: 'Pädagogenteam';

    font-size: 1.2rem;

    margin-top: 1rem;

    font-weight: normal;

}



/* Modal für vergrößertes Bild */

.modal {

    display: none;

    position: fixed;

    z-index: 1000;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.8);

    animation: fadeIn 0.3s ease;

}



.modal.show {

    display: flex;

    align-items: center;

    justify-content: center;

}



.modal-content {

    max-width: 90%;

    max-height: 90%;

    border-radius: 15px;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

    animation: zoomIn 0.3s ease;

}



.modal-image {

    width: 100%;

    height: 100%;

    border-radius: 15px;

    object-fit: contain;

}



.close-modal {

    position: absolute;

    top: 20px;

    right: 30px;

    color: white;

    font-size: 3rem;

    font-weight: bold;

    cursor: pointer;

    transition: color 0.3s ease;

    z-index: 1001;

}



.close-modal:hover {

    color: #27ae60;

}



/* Animationen */

@keyframes fadeIn {

    from {

        opacity: 0;

    }



    to {

        opacity: 1;

    }

}



@keyframes zoomIn {

    from {

        opacity: 0;

        transform: scale(0.3);

    }



    to {

        opacity: 1;

        transform: scale(1);

    }

}



/* Klick-Hinweis */

.click-hint {

    margin-top: 1rem;

    color: #666;

    font-size: 0.9rem;

    font-style: italic;

}



/* Mobile Anpassungen */

@media (max-width: 768px) {

    .teacher-photo {

        height: 300px;

    }



    .teacher-photo-container {

        padding: 1.5rem;

    }



    .close-modal {

        font-size: 2rem;

        top: 10px;

        right: 15px;

    }

}



@media (max-width: 480px) {

    .teacher-photo {

        height: 250px;

    }



    .teacher-photo.placeholder {

        font-size: 3rem;

    }

}