/**
 * layout.css – Layout-Styles für EMZ Stellwerk Template
 *
 * Diese Datei steuert das gesamte Seiten-Layout:
 * Header, Navigation, Content-Bereich, Sidebar, Footer
 *
 * Farbschema: Gold/Gelb (#ffcc00) auf dunklem Hintergrund (#15171a)
 *
 * Reihenfolge:
 *  1. Grundlagen (html, body): jetzt in css/global.css
 *  2. Layout-Struktur (wrapper, container, content, sidebar)
 *  3. Footer
 *  4. Fixierte Menüleiste (topmenubox)
 *  5. Breadcrumbs (Navigationspfad)
 *  6. Desktop-Navigation (Dropdown-Menü, 3 Ebenen)
 *  7. Horizontales Akkordeon (Desktop)
 *  8. Mobiles Akkordeon (Bildergalerie)
 *  9. Erlebniswelt-Container (Startseite): jetzt in css/module.css
 * 10. EMZ-Listen (ohne Standardpunkte): jetzt in css/module.css
 * 11. Sponsorenliste: jetzt in css/module.css
 * 12. Benutzerbereich (eingeloggt)
 * 13. Responsive: bis 1240px (leicht schmaler)
 * 14. Responsive: bis 1000px (Tablet/Mobil – Hauptumbruch)
 * 15. Responsive: bis 540px (Smartphone)
 *
 * @template EMZ Stellwerk für WBCE
 * Version: 2.1 – Oktober 2026
 * Geändert: 13.Oktober.2026 – Styles für Frontend-Login entfernt (Abschnitt 12)
 * Geändert am: 02. November 2026 (aus template.css hervorgegangen, Farben und Breite als Variablen, Bildpfade angepasst, neue Optik aus entwurf.css übernommen)
 */


/* ============================================================
   2. Layout-Struktur – Das Grundgerüst der Seite
   ============================================================ */

/* Äußerster Container: volle Breite */
.wrapper {
    width: 100%;
    margin: 0 auto;
}

/* Innerer Container: Breite aus --emz-breite, zentriert */
.wrap_inner {
    width: 100%;
    max-width: var(--emz-breite);
    margin: 0 auto;
}

/* Header-Bereich mit Hintergrundbild (Züge) */
.topspacer {
    margin-top: 92px;       /* Platz für die fixierte Menüleiste */
    height: clamp(110px, 14vw, 240px);
    width: 100%;
    /* Unteren Bildteil zeigen, dort steht der Zug */
    background: #000 url(../img/header.webp) no-repeat scroll center 85%;
    background-size: cover;
}

/* Bildergalerie im Kopf bleibt ausgeblendet, das Kopfbild reicht */
.topspacer #haccordion1 {
    display: none;
}

/* Content-Container: Breite aus --emz-breite */
.container {
    margin: 0 auto;
    width: 100%;
    max-width: var(--emz-breite);
    padding-top: 3px;
}

/* Hauptbereich: 2-Spalten-Layout (66% Content + 32% Sidebar) */
.mainbox {
    width: 100%;
    float: right;
    display: inline;
}

/* Hauptinhalt: linke Spalte (66%) */
.content {
    width: 66%;
    float: left;
    display: inline;
    margin-left: 0;
}

/* Bilder im Content: nie breiter als der Container */
.mainbox .content img {
    max-width: 100%;
    height: auto !important;
}

/* Volle Breite wenn keine Sidebar vorhanden */
.mainbox .contentwide {
    width: 100%;
    margin: 0;
}

/* Schmaler Content innerhalb von voller Breite */
.mainbox .contentwide .contentwidenarrow {
    width: 66%;
}

/* Sidebar: rechte Spalte (32%) */
#rightbox {
    width: 32%;
    float: right;
    display: inline;
    border-left: 1px #ddd solid;
}

#rightbox .inner {
    margin: 0 3% 3px 3%;
    font-size: 0.9em;
    line-height: 135%;
}

#rightbox .inner img {
    max-width: 100%;
    height: auto !important;
}

/* Innenabstand des Inhalts */
.contentbox {
    box-sizing: border-box;
    padding: 0 24px;
}

/* Abstandhalter nach dem Content-Bereich */
.clearcontent {
    height: 40px;
    clear: both;
}


/* ============================================================
   3. Footer
   ============================================================ */

.footerbox {
    position: relative;
    box-sizing: border-box;
    min-height: 80px;
    height: auto;
    padding: 26px 24px;
    font-size: 16px;
    color: var(--emz-text-leise);
    width: 100%;
    background: var(--emz-fusszeile);
    border-top: 1px solid var(--emz-linie);
}

.footerbox::after {
    display: block;
    clear: both;
    content: "";
}

.footerbox .left {
    width: 25%;
    margin: 0;
    float: left;
}

.footerbox .center {
    width: 50%;
    margin: 0;
    float: left;
    text-align: center;
}

.footerbox .center,
.footerbox .center p,
.footerbox .center a,
.footerbox .center span {
    font-size: 16px !important;
}

/* "Nach oben"-Button im Footer */
#gototopswitch {
    float: right;
    margin: 10px 10px 0 0;
}


/* ============================================================
   4. Fixierte Menüleiste – bleibt oben beim Scrollen
   ============================================================ */

#topmenubox {
    width: 100%;
    height: 92px;
    margin: 0;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    transition: 0.5s all;
    border-bottom: 3px solid var(--emz-gold);
    background: var(--emz-grund);
}

#topmenubox .wrap_inner {
    position: relative;
    height: 100%;
    background: transparent;
}

/* Logo: unten links positioniert */
#topmenubox a.logo img {
    max-height: 80%;
    max-width: 100%;
    position: absolute;
    bottom: 3px;
}

/* Verkleinerte Menüleiste nach dem Scrollen */
#topmenubox.reduced {
    height: 52px;
    transition: 0.5s all;
}

/* Suchfeld im Header: keinen Rahmen am Link */
li.search_box_li a {
    border: none !important;
}

/* Menü-Container (Desktop) */
.menuebox {
    width: 75%;
    height: 100%;
    float: left;
    position: relative;
}

/* Mobile Buttons: auf Desktop versteckt */
.toggleMenu { display: none; }


/* ============================================================
   5. Breadcrumbs – Navigationspfad ("Sie sind hier: ...")
   ============================================================ */

.breadcrumbs {
    height: 30px;
    line-height: 100%;
    margin: 0;
    padding: 3px 0;
    clear: both;
}

.innerbc {
    font-size: 14px;
    margin: 10px 0 0 0;
}

/* Einzelne Breadcrumb-Einträge mit Pfeil-Grafik */
.breadcrumbs .innerbc span {
    background: transparent url(../img/bclink.gif) no-repeat;
    padding: 6px 2px 0 12px;
    font-weight: normal;
}

.breadcrumbs .innerbc a {
    padding: 1px;
    border-bottom: 1px dotted #666;
    text-decoration: none;
}

.breadcrumbs .innerbc a:hover {
    border-bottom: 1px solid #505567;
}

/* Aktuelle Seite: weiße Schrift */
.breadcrumbs .innerbc .menu-current a {
    color: #fff;
}

/* Auf der Startseite: Breadcrumbs ausblenden */
.frontpage .breadcrumbs {
    display: none;
}


/* ============================================================
   6. Desktop-Navigation – Horizontales Dropdown-Menü (3 Ebenen)
   ============================================================ */

/* --- Basis: Listen-Formatierung zurücksetzen --- */

#nav {
    position: absolute;
    right: 0;
    bottom: 0;
    border: 0;
    padding: 0;
}

#nav ul,
#nav2 ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width: auto;
    position: relative;
    z-index: 800;
}

#nav ul li,
#nav2 ul li {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* --- Ebene 1: Hauptmenü-Einträge --- */

#nav ul li {
    float: left;
    display: inline;
    color: var(--emz-text-leise);
    text-align: left;
    font-weight: normal;
}

#nav ul li a {
    display: block;
    font-size: 16px;
    border-right: 0;
    border-radius: var(--emz-radius) var(--emz-radius) 0 0;
    color: var(--emz-text);
    text-decoration: none;
}

#nav ul li a span {
    display: block;
    padding: 12px 13px;
}

/* Hover, Fokus und aktiver Zustand: Gold-Hintergrund, dunkle Schrift, weiß war schlecht lesbar */
#nav ul li a:hover,
#nav li a:focus,
#nav li a:active,
#nav ul li a.active,
#nav a.menu-current,
#nav a.menu-parent {
    color: var(--emz-auf-gold);
    background: var(--emz-gold);
}

/* Aktuelle Seite: fett und schwarz auf Gold */
#nav a.menu-current {
    font-weight: bold;
    color: var(--emz-auf-gold);
}

/* --- Ebene 2: Untermenü (Dropdown) --- */

#nav li ul {
    position: absolute;
    width: 200px;
    margin: -3px 0 0 -10000px;     /* Versteckt: weit nach links geschoben */
    opacity: 0;
    text-transform: none;
    font-size: 13px;
    background: var(--emz-flaeche);
    border: 1px solid var(--emz-linie);
    border-top: 0;
    border-radius: 0 0 var(--emz-radius) var(--emz-radius);
    box-shadow: 0 10px 10px -4px rgba(0, 0, 0, 0.9);
}

#nav li ul li {
    text-align: left;
    font-weight: normal;
    margin: 0;
    padding: 0;
    line-height: 1.2em;
}

#nav li ul li a {
    width: 200px;
    height: auto;
    text-shadow: none;
    margin: 0;
    padding: 0;
    color: var(--emz-text);
    border-top: 0;
    border-radius: 0;
    font-weight: normal;
    font-size: 15px;
    background: none;
}

#nav li ul li a span {
    display: block;
    padding: 8px;
}

/* Untermenü: Hover und aktuelle Seite */
#nav li ul a:hover,
#nav li ul a.menu-current {
    color: var(--emz-auf-gold);
    background-color: var(--emz-gold) !important;
    text-shadow: none;
}

/* Pfeil-Icon: zeigt an dass es ein weiteres Untermenü gibt */
#nav li ul a.menu-expand {
    background: transparent url(../img/arr-right.png) no-repeat right 5px;
}

#nav li ul a.menu-parent {
    background: var(--emz-gold) url(../img/arr-right.png) no-repeat right 5px;
}

/* Sanfter Übergang beim Einblenden */
#nav li ul a {
    transition: 2s all;
}

#nav li ul a:hover {
    transition: 0.2s all;
}

/* --- Untermenü ein-/ausblenden (Hover + Tastatur) --- */

/* Einblenden: beim Hover, Fokus oder Tab-Navigation */
#nav li:hover ul,
#nav li a:focus ul,
#nav li.tabselected ul {
    margin: -3px 0 0 0;
    opacity: 1;
    transition: 0.5s opacity;
}

/* Verschachtelte Untermenüs: erstmal verstecken */
#nav li ul ul {
    margin-left: -10000px;
    opacity: 0;
    transition: 0.5s opacity;
}

#nav li:hover ul ul,
#nav li.subMenu ul ul {
    margin-left: -10000px;
    opacity: 0;
    transition: 0.5s opacity;
}

/* Direktes Kind-Untermenü einblenden */
#nav li:hover > ul,
#nav li li:hover > ul {
    opacity: 1;
    margin-left: 0;
    transition: 0.5s opacity;
    z-index: 1000;
}

#nav ul li ul li:hover > ul {
    margin-left: -30%;
    opacity: 0.9;
}

/* --- Ebene 3: Unter-Untermenü --- */

#nav li ul li ul {
    width: 180px;
    margin: 10px 0 0 -40%;
    z-index: 2000;
}

#nav li ul li ul li {
    width: 100%;
}

#nav li ul li ul li a {
    width: 100%;
}

/* Positionierung: Flyout nach rechts */
#nav li {
    position: relative;
}

#nav ul ul ul {
    position: absolute;
    top: 1px;
    left: 100%;
}

/* Hover-Element immer im Vordergrund */
#nav li:hover {
    z-index: 1000;
    white-space: normal;
}


/* ============================================================
   7. Horizontales Akkordeon (Desktop) – Bildergalerie im Header
   ============================================================ */

#haccordion1 {
    background: var(--emz-grund);
    overflow: hidden;
    height: 200px;
    padding: 0;
}

#haccordion1 ul {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
    width: 102%;
}

#haccordion1 li {
    margin: 0 5px 0 0;
    padding: 0;
    display: block;
    width: 100%;            /* Fallback wenn JS deaktiviert */
    height: 200px;
    overflow: hidden;
    float: left;
}

#haccordion1 li .hpanel {
    padding: 0;
    background: #000;
    float: left;
    width: 100%;            /* Fallback wenn JS deaktiviert */
    height: 200px;
}

/* Bild im Akkordeon-Panel: links, volle Höhe */
#haccordion1 .panelpic {
    float: left;
    height: 100%;
    padding-right: 10px;
}


/* ============================================================
   8. Mobiles Akkordeon – Bildergalerie für Smartphones/Tablets
   ============================================================ */

/* Auf Desktop versteckt – wird per CSS in der 1000px-Query eingeblendet */
#mobile_accordion {
    display: none;
}


/* ============================================================
   12. Edit-Link im Footer – nur für den Administrator sichtbar
   ============================================================ */

/* Edit-Link für Administratoren */
#editthis {
    margin-top: 4px;
}

#editthis a {
    color: var(--emz-gold);
    text-decoration: none;
}

#editthis a:hover {
    text-decoration: underline;
}


/* ============================================================
   13. Responsive: bis 1240px – Leicht schmalerer Bildschirm
   ============================================================ */

@media screen and (max-width: 1240px) {
    .wrapper,
    #topmenubox .m_inner {
        width: 98%;
    }
}


/* ============================================================
   14. Responsive: bis 1000px – Tablet/Mobil (Hauptumbruch)
   Hier wird das Desktop-Menü durch das mobile Menü ersetzt
   ============================================================ */

@media screen and (max-width: 1000px) {

    /* --- Layout anpassen --- */
    .wrapper,
    .mainbox,
    #topmenubox .m_inner {
        width: 100%;
        margin: 0;
    }

    body {
        font-size: 16px;
    }

    .contentbox {
        padding: 0 14px;
    }

    .container {
        padding-top: 2px;
    }

    /* Linke Spalte und Footer-Links ausblenden */
    .leftbox,
    .footerbox .left {
        display: none;
    }

    /* Content-Bereich: etwas schmaler mit Rand */
    .content {
        width: 63%;
        margin-left: 2%;
    }

    .mainbox .contentwide {
        width: 100%;
        margin: 0;
    }

    .footerbox .center {
        float: none;
        width: auto;
        margin-right: 40px;
        text-align: left;
    }

    /* Sidebar anpassen */
    #rightbox {
        width: 33%;
    }

    #rightbox .inner {
        margin: 0 5%;
    }

    /* --- Fixierte Menüleiste: kompakter --- */
    #topmenubox {
        height: 60px !important;
    }

    /* Desktop-Navigation ausblenden */
    #topmenubox #nav {
        display: none;
    }

    /* Logo-Box */
    .logobox a.logo {
        width: 210px;
        height: 160px;
        margin-bottom: 20px;
    }

    /* Hamburger-Button für mobiles Menü anzeigen */
    .toggleMenu {
        display: block;
        float: right;
        width: 20px;
        height: 50px;
        background: url(../img/menuswitch.png) no-repeat top right;
        margin: 10px 4% 0 0;
    }

    /* Kamera-Button für mobile Bildergalerie */
    .togglePics {
        display: block;
        float: right;
        width: 30px;
        height: 50px;
        background: url(../img/picmenuswitch.png) no-repeat top right;
        margin: 10px 8% 0 0;
    }

    /* --- Kopfbild auch auf dem Handy --- */
    .topspacer {
        height: 26vw;
        position: relative;
        margin-top: 63px;
        padding-top: 0;
        background: #000 url(../img/header.webp) no-repeat scroll center top;
        background-size: cover;
    }

    /* --- Mobiles Menü (#nav2) --- */
    #nav2 {
        width: 250px;
        height: auto;
        position: absolute;
        left: 0;
        top: 100px;
        z-index: 2000;
        background: var(--emz-menue-mobil);
        box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.8);
    }

    /* Menüpunkte: verschiedene Ebenen-Einrückung */
    #nav2 li {
        width: 250px;
        padding: 0;
    }

    #nav2 li a {
        display: block;
        padding: 12px 0 12px 20px;
        font-size: 18px;
        color: #fff;
        text-decoration: none;
        border-bottom: 1px solid var(--emz-menue);
    }

    /* Ebene 2: leicht eingerückt */
    #nav2 li li a {
        padding: 10px 0 10px 30px;
        font-size: 16px;
    }

    /* Ebene 3: stärker eingerückt */
    #nav2 li li li a {
        padding: 8px 0 8px 40px;
        font-size: 14px;
    }

    /* Ebene 4: noch stärker eingerückt */
    #nav2 li li li li a {
        padding: 6px 0 6px 50px;
        font-size: 13px;
    }

    /* Untermenüs: standardmäßig versteckt */
    #nav2 li ul {
        display: none;
    }

    /* Untermenüs einblenden: aktive Seite oder geöffnet per Klick */
    #nav2 li.menu-parent > ul,
    #nav2 li.menu-current > ul,
    #nav2 li.is_opened > ul {
        display: block;
    }

    /* Pfeil-Icons für Untermenüs */
    #nav2 li a.menu-expand {
        background: transparent url(../img/arr-down.png) no-repeat left center;
    }

    /* Aktuelle Seite: Gold-Hintergrund */
    #nav2 li a.menu-current {
        color: #fff;
        background-color: var(--emz-gold);
        text-shadow: 1px 2px 4px #000;
    }

    /* Geöffnete Untermenüs und übergeordnete Seiten */
    #nav2 ul li a.menu-expand.is_opened,
    #nav2 ul li a.menu-parent {
        font-weight: bold;
        background: #444 url(../img/arr-right.png) no-repeat 2px center;
    }

    /* Schließen-Overlay (deckt die Seite ab) */
    #nav2close {
        display: none;
        position: absolute;
        top: 0;
        width: 100%;
        height: 900px;
        background-image: none;
    }

    /* --- Breadcrumbs auf Mobil: kompakter --- */
    .breadcrumbs {
        width: 100%;
        height: auto;
    }

    .innerbc {
        margin: 2px 0 5px 2%;
        width: 96%;
    }

    .innerbc span {
        display: block;
        float: left;
        padding: 2px 2px 2px 12px;
        margin: 0 0 5px 0;
    }

    /* "Sie sind hier:" Text auf Mobil ausblenden */
    .innerbc b {
        display: none;
    }

    /* --- Desktop-Akkordeon ausblenden, mobiles einblenden --- */
    #haccordion1 {
        display: none;
    }

    #mobile_accordion,
    #mobile_accordion a,
    #mobile_accordion b,
    a#mobile_accordion_open {
        display: block;
    }

    #mobile_accordion a {
        height: 0;
        margin: 0 2% 0 0;
        float: left;
        width: 48%;
        text-decoration: none;
        font-size: 0.85em;
        overflow: hidden;
        transition: height 1s, margin 1s;
        background: rgba(0, 0, 0, 0.3);
    }

    #mobile_accordion a img {
        float: left;
        width: 24% !important;
        margin: 0 2% 0 0;
    }

    /* Geöffneter Zustand: Bilder sichtbar */
    #mobile_accordion.is_open {
        padding-top: 10px;
    }

    #mobile_accordion.is_open a {
        height: 90px;
        margin: 5px 2% 5px 0;
    }
}


/* ============================================================
   15. Responsive: bis 540px – Smartphone
   ============================================================ */

@media screen and (max-width: 540px) {

    /* Content und Sidebar: volle Breite untereinander */
    .content,
    #rightbox {
        width: 96%;
        margin: 0 2%;
    }

    .mainbox .contentwide .contentwidenarrow {
        float: none;
        width: 100%;
        border-left: none;
    }

    #rightbox {
        display: block;
        border-left: none;
    }

    #rightbox .inner {
        margin: 0;
    }

    /* Startseite: Hintergrundbild oben */
    .frontpage .wrapper {
        background-position: center top;
    }

    /* Mobile Akkordeon-Bilder: volle Breite untereinander */
    #mobile_accordion a {
        float: none;
        width: 100%;
    }
}