/* ============================================================================
   LAYOUT.CSS - Layout-Struktur für alle Themes
   FTS Husum - Contao 5.3
   Mobile-First Grid & Container System
   Stand-02.05.26
   ============================================================================ */

/* ==========================================================================
   WRAPPER & CONTAINER (Mobile-First, 0-575px)
   ========================================================================== */

#wrapper {
   width: 100%;
    margin: 0 auto;
    padding: 1rem;
    padding-bottom: 2rem;
    background-color: #fff;
    display: flow-root; /* statt overflow: hidden */
}

#container {
    padding: 0 2px;
}

/* ==========================================================================
   HEADER (Mobile Base)
   ========================================================================== */

#header {
    border: 0;
}

#header h1 {
    color: #33496E;
    letter-spacing: 0.09rem;
    font-size: 1.5rem;
    margin: 0 0.2rem;
    font-weight: bold;
}

#header h2 {
    margin-top: 0.2rem;
    margin-bottom: 0;
    color: #33496E;
    font-size: 0.9rem;
    font-weight: bold;
    margin-left: 0.2rem;
}

#header p {
    margin: 0.1rem 0;
    font-size: 0.8rem;
}

/* Klasse-5-Box: Flex-Layout */
.header-klasse5 {
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

/* Logo in der Klasse-5-Box */
.logo-klasse5 {
    width: 80px;    /* Mobile: etwas kleiner */
    height: auto;
}

/* Mobile Header */
.mobile-header {
    display: flex;
    flex-direction: column;
}

.mobile-header-zeile1 {
    display: flex;
    flex-direction: row;
}

.mobile-header-zeile2 {
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}

/* ==========================================================================
   MOBILE HEADER (0-991px)
   ========================================================================== */

/* Container */
#header-mobile {
    display: block;
}

/* Gelber Balken mit Hamburger Menu und Logo */
#header-mobile .header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #F4BC0D;
    padding: 0.8rem 1rem;
    margin-bottom: 1rem;
    margin-left: -1rem;
    margin-right: -1rem;
    margin-top: -1rem;
}

#header-mobile .header-bar > div {
    flex: 1;
    text-align: center;
    padding: 0 0.5rem;
}

/* Hamburger Menu Icon */
#header-mobile .menu-toggle {
    width: 30px;
    height: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    text-decoration: none;
}

/* Umbruch nur in Hochkant */
.nur-hochkant {
    display: none;
}

@media (orientation: portrait) {
    .nur-hochkant {
        display: block;
    }
}

/* Logo im gelben Balken */
#header-mobile .header-logo {
    width: 20%;
    max-width: 80px;
    height: auto;
}

/* Schulinfo-Bereich */
#header-mobile .header-info {
    text-align: center;
    padding: 0 1rem 1rem;
}

#header-mobile h1 {
    font-size: 0.95rem;        /* Portrait */
    margin: 0 0 0.3rem 0;
    line-height: 1.3;
    font-weight: 700;
    color: #33496E;
}

@media (orientation: landscape) {
    #header-mobile h1 {
        font-size: 1.2rem;  /* Landscape */
    }
}

#header-mobile h2 {
    font-size: 0.8rem;
    margin: 0 0 0.8rem 0;
    line-height: 1.3;
    font-weight: 600;
    color: #33496E;
}

/* FIX: fehlender Punkt vor Klasse (war: mobile-header-zeile2 ohne Punkt) */
@media (orientation: landscape) {
    #header-mobile .mobile-header-zeile2 {
        font-size: 1rem;  /* Landscape */
    }
}

#header-mobile .address {
    margin: 0.5rem 0;
    font-size: 0.9rem;
    color: #333;
}

#header-mobile .contact {
    margin: 0.5rem 0 0 0;
    font-size: 0.9rem;
}

#header-mobile .contact-link {
    display: inline-block;
    margin: 0 0.2rem;
    text-decoration: none;
    color: rgb(30, 63, 125);
    font-weight: bold;
}

#header-mobile .separator {
    margin: 0 0.3rem;
    color: #999;
}

#header-mobile .fa {
    margin-right: 0.2rem;
}

/* Mobile Header: ab 992px ausblenden */
@media (min-width: 992px) {
    #header-mobile {
        display: none;
    }
}

/* ==========================================================================
   DESKTOP HEADER (ab 992px)
   ========================================================================== */

/* Desktop Header: auf Mobile ausblenden */
.head-desktop,
#header-neu-desktop {
    display: none !important;
}

h2.ce_headline.header_rechts.desktop {
    display: none;
}

/* Desktop Header: ab 992px einblenden */
@media (min-width: 992px) {
    .head-desktop,
    #header-neu-desktop {
        display: block !important;
    }

    h2.ce_headline.header_rechts.desktop {
        display: block;
    }

    /* Mobile-only Elemente ausblenden */
    .mobile-header,
    #header-mobile {
        display: none !important;
    }

    h2.ce_headline.header_rechts.mobile {
        display: none;
    }

    #mobile-header-tel,
    #mobile-header-mmenu {
        display: none;
    }

    /* Desktop Header Abstand nach unten */
    #header-neu-desktop {
        margin-bottom: 2rem;
    }

    /* Logo in Klasse-5-Box: Originalgröße */
    .logo-klasse5 {
        width: 133px;
        height: auto;
    }

    /* Header Logos */
    .header_schulname {
        flex: 4 !important;
    }

    .header_logos {
        flex: 2;
    }

    .header_schulname h1 {
        font-size: 2rem !important;
    }

    .header_schulname h2 {
        font-size: 1.5rem !important;
    }
}

/* ==========================================================================
   MOBILE TEL/MAIL (Legacy)
   ========================================================================== */

.mobile-tel-mail {
    flex: 2;
    background-color: #5B7EC0;
    display: flex;
}

#mobile-header-tel {
    display: flex;
}

.header-tel a,
.header-mail a {
    margin: 0 auto;
    padding: 5px;
    border-radius: 2px;
    font-size: 1rem;
    color: #fff !important;
}

.header-tel a {
    float: left;
    padding-right: 15px;
}

/* Mobile MMMenu Button */
#naviMiniMobile {
    margin-bottom: 2rem;
}

/* ==========================================================================
   MAIN CONTENT AREA (Mobile)
   ========================================================================== */

#main {
    display: block;
}

#main div.inside {
    width: 100%;
}

#main div.custom {
    width: 100%;
}

.custom {
    margin-top: 25px !important;
}

#left-custom div.inside {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Info Sidebar */
#info {
    float: none !important;
    width: 100% !important;
}

#right {
    display: none;
}

/* ==========================================================================
   FOOTER (Mobile)
   ========================================================================== */

/* Smartphone Portrait (0-575px) */
#footer {
    min-height: 16rem;
    padding-bottom: 2rem;
}

#footer p {
    font-size: 0.8rem;
}

/* Footer Logos: Max 3 per row, centered */
.footer-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    border-top: 1px solid #ddd;
    padding-top: 1rem;
    flex-wrap: wrap;
}

.footer-logos img,
.footer-logos a {
    flex: 0 0 auto;
    height: 50px;
    width: auto;
    max-width: 120px; /* verhindert zu breite Logos */
}

/* ==========================================================================
   BOXES & START ELEMENTS (Mobile)
   ========================================================================== */

.start-boxen {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1rem;
}

/* ==========================================================================
   SPECIFIC ARTICLES (Mobile Adjustments)
   ========================================================================== */

/* Neue 5 Klassen Page */
#start-237 > div.ce_image.center.last.block > figure > a > img {
    width: 100%;
    height: auto;
}

#custom {
    display: table;
}

/* NP-Schule Page */
/* Mobile: kein Float */
.bild-im-text.media--right > figure {
    float: none !important;
    width: 100%;
    margin: 0 0 1rem 0;
}

/* Ab Tablet: Float wieder */
@media (min-width: 768px) {
    .bild-im-text.media--right > figure {
        float: right !important;
        width: auto;
        margin-left: 1rem;
        margin-bottom: 0;
    }
}

/* Gallery Creator Mobile */
.gallery_creator .list_albums .col_2 {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
}

/* Responsive Table Mobile */
.tabelle.lehrer {
    width: 100%;
}

.responsive-table table {
    margin: 0 auto;
}

/* ==========================================================================
   RESPONSIVE: LARGE MOBILE (576px+)
   ========================================================================== */

@media (min-width: 576px) {
    #wrapper {
        width: 95%;
        padding: 1.5rem;
    }

    /* Smartphone Landscape: Footer kleiner */
    #footer {
        min-height: 5rem;
        padding-bottom: 2rem;
    }

    .start-boxen {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    #header-mobile .header-bar {
        margin-left: -1rem;
        margin-right: -1rem;
        margin-top: -1rem;
    }
}

/* ==========================================================================
   RESPONSIVE: TABLET PORTRAIT (768px+)
   ========================================================================== */

@media (min-width: 768px) {
    #wrapper {
        width: 90%;
        padding: 10px 40px;
        padding-bottom: 3rem;
    }

    #header h1 {
        font-size: 1.5rem;
        margin-top: 5px;
    }

    #header h2 {
        font-size: 1.2rem;
    }

    #header p {
        margin-top: 0.3rem;
        margin-bottom: 0.4rem;
    }

    .mobile-header-zeile1 h1,
    .mobile-header-zeile1 h2 {
        padding: 0 1rem;
    }

    .header-tel a,
    .header-mail a {
        padding-top: 1rem;
        padding-bottom: 0.5rem;
        font-size: 1.1rem;
    }

    #mobile-header-tel {
        padding-top: 2rem;
    }

    .fa {
        line-height: 0.4rem !important;
        padding-top: 1rem;
    }

    .fa-2x {
        font-size: 3rem;
    }

    .fa-border {
        padding: 1rem 0.5rem;
    }

    /* Tablet Portrait: Footer klein */
    #footer {
        min-height: 4rem;
        padding-bottom: 2rem;
    }

    /* Content Adjustments */
    #left {
        width: 99% !important;
        margin-left: 10px !important;
    }
}

/* ==========================================================================
   RESPONSIVE: TABLET LANDSCAPE / DESKTOP (992px+)
   ========================================================================== */

@media (min-width: 992px) {
    #container {
        padding-left: 0;
        padding-right: 0;
    }

    #wrapper {
        padding: 10px 40px;
        padding-bottom: 3rem;
    }

    /* Header */
    #header h1 {
        font-size: 1.4rem;
        margin: 0;
    }

    #header h2 {
        font-size: 1.2rem;
        margin: 0;
    }

    .header-tel a,
    .header-mail a {
        font-size: 1.3rem;
    }

    /* Flexbox Layouts */
    #main {
        display: flex;
        gap: 2rem;
    }

    /* Info Sidebar */
    #info {
        width: 40% !important;
    }

    /* Footer: Theme-Einstellung übernimmt */
    #footer {
        min-height: auto;
        padding-bottom: 2rem;
    }
}

/* ==========================================================================
   RESPONSIVE: LARGE DESKTOP (1200px+)
   ========================================================================== */

@media (min-width: 1200px) {
    /* Content Layout */
    .mod_newslist.corona.sonderinfo.block div.layout_short {
        display: flex;
    }

    /* Footer */
    #footer {
        min-height: auto;
        padding-bottom: 2rem;
    }

    #footer p a img {
        height: 50px;
    }
}

/* ============================================================================
   THEME-SPEZIFISCHE STYLES
   ============================================================================ */

/* ==========================================================================
   THEME 1: STARTSEITE (2-Spalten Layout)
   Body-Klasse: .start
   ========================================================================== */

/* Mobile: 1-spaltig */
.start #header {
    height: 25rem;
    border: 0;
}

.start #main {
    display: flex;
    flex-direction: column;
}

.start #main div.inside {
    width: 100%;
}

.start #main div.custom {
    width: 100%;
}

/* Large Mobile (576px+) */
@media (min-width: 576px) {
    .start #header {
        height: 30rem;
    }
}

/* Tablet (768px+) */
@media (min-width: 768px) {
    .start #header {
        height: 30rem;
    }
}

/* Tablet Landscape (992px+): 2-Spalten aktivieren */
@media (min-width: 992px) {
    .start #main {
        display: flex;
        flex-direction: row-reverse;
        gap: 2rem;
    }

    .start #main div.inside {
        flex: 2;
    }

    .start #main #left-custom {
        flex: 1;
    }

    .start #container {
        padding-left: 0 !important;
    }

    .start #navi-suche-container.sticky {
        width: 100%;
    }

    .start #willkommen.sticky {
        margin-top: 60px;
    }

    .start #header {
        height: 40rem;
        border: 0;
    }
}

/* ==========================================================================
   THEME 2: FOLGESEITEN (1-Spalten Layout)
   Body-Klasse: .folgeseiten
   ========================================================================== */

/* Mobile */
.folgeseiten #header {
    height: 18rem;
    border: 0;
}

/* Flyer Boxes - 4 boxes layout (neue-5-klassen page) */
.flyer-boxen {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 2rem;
}

.flyer-boxen .box {
    flex: 1;
    min-width: 0;
}

/* Tag der offenen Tür */
.mod_article.tdot > div {
    margin-bottom: 2rem;
}

/* Large Mobile (576px+) */
@media (min-width: 576px) {
    .folgeseiten #header {
        height: 18rem;
    }
}

/* Tablet (768px+) */
@media (min-width: 768px) {
    .folgeseiten #header {
        height: 18rem;
    }

    /* Flyer Boxes - nebeneinander ab Tablet */
    .flyer-boxen {
        flex-direction: row;
        justify-content: space-between;
    }
}

/* Tablet Landscape (992px+) */
@media (min-width: 992px) {
    .folgeseiten #header {
        height: 20rem;
        border: 0;
    }
}

/* ==========================================================================
   THEME 3: FLYER
   Body-Klasse: .flyer
   ========================================================================== */

/* Mobile */
.flyer #header {
    height: 18rem;
    border: 0 !important;
}

.flyer .mobile-tel-mail {
    height: 3rem;
}

.flyer #container {
    margin-top: 0 !important;
}

/* später richtig einsortieren */

/* Mobile Header: Kontaktbereich Portrait */
#header-mobile .header-info p {
    font-size: 0.8rem;
}

#header-mobile .header-info .contact-link {
    font-size: 0.75rem;
}

/* Landscape */
@media (orientation: landscape) {
    #header-mobile .header-info p {
        font-size: 0.85rem;
    }

    #header-mobile .header-info .contact-link {
        font-size: 0.8rem;
    }
}

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

#header-neu-desktop .flex-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

#header-neu-desktop .flex-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    text-align: center;
}

/* Texte */
#header-neu-desktop h1 {
    font-size: 2rem;
    color: #33496E;
    margin: 0 0 0.3rem 0;
    font-weight: bold;
}

#header-neu-desktop h2 {
    font-size: 1.5rem;
    color: #33496E;
    margin: 0 0 0.5rem 0;
    font-weight: bold;
}

#header-neu-desktop p {
    font-size: 0.9rem;
    margin: 0.2rem 0;
}

#header-neu-desktop .phone-number {
    color: rgb(30, 63, 125);
    text-decoration: none;
    font-weight: bold;
}

#header-neu-desktop .phone-number:hover {
    text-decoration: underline;
}

/* Tablet Landscape (992px - 1199px): etwas kleiner */
@media (min-width: 992px) and (max-width: 1199px) {
    .header-logo-dt {
        width: 100px;
    }

    #header-neu-desktop h1 {
        font-size: 1.5rem;
    }

    #header-neu-desktop h2 {
        font-size: 1.1rem;
    }
}

/* FIX: h1/h2 waren versehentlich global (außerhalb Media Query) */
/* Large Desktop (1200px+) */
@media (min-width: 1200px) {
    #header-neu-desktop h1 {
        font-size: 2rem;
    }

    #header-neu-desktop h2 {
        font-size: 1.5rem;
    }
}

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

.content-player figure {
    margin: 0 auto;
    width: 100%;
}

.content-player video {
    width: 100%;
    height: auto;
}

/* FIX: fehlender Punkt vor Klasse (war: div-center-flex ohne Punkt) */
@media (min-width: 1200px) {
    .div-center-flex.content-player figure {
        width: 50%;
        padding: 0.2rem;
        border: 1px solid #ddd;
    }
}

@media (min-width: 768px) {
    .content-player figure {
        width: 50%;
    }
}

.content-player h2 {
    text-align: center;
}