/**
 * template.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 (#222)
 *
 * Reihenfolge:
 *  1. Grundlagen (html, body)
 *  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)
 * 10. EMZ-Listen (ohne Standardpunkte)
 * 11. Sponsorenliste
 * 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.0 – Februar 2026
 */


/* ============================================================
   1. Grundlagen – Seite und Hintergrund
   ============================================================ */

html, body {
    margin: 0;
    padding: 0;
    height: 101%;           /* Verhindert Scroll-Sprung bei kurzen Seiten */
    color: #eee;
}

body {
    background: #1f1f1f url(img/bodybg.jpg) no-repeat fixed;
    background-size: 100% 100%, auto;
}


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

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

/* Innerer Container: max. 1200px, zentriert */
.wrap_inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Header-Bereich mit Hintergrundbild (Züge) */
.topspacer {
    margin-top: 120px;      /* Platz für die fixierte Menüleiste */
    height: 230px;
    width: 100%;
    background: #222 url(img/header.jpg) no-repeat fixed center top;
    background-size: 100% auto, auto;
}

/* Content-Container: max. 1200px */
.container {
    margin: 0 auto;
    width: 100%;
    max-width: 1200px;
    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;
}

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


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

.footerbox {
    height: 80px;
    font-size: 11px;
    color: #999;
    width: 100%;
    background: #222;
}

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

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

/* "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: 120px;
    margin: 0;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    transition: 0.5s all;
    border-bottom: 5px solid #000;
    background: #222;
}

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

/* 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: 42px;
    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: #999;
    text-align: left;
    font-weight: normal;
}

#nav ul li a {
    display: block;
    font-size: 16px;
    border-right: 1px #333 solid;
    color: #eee;
    text-decoration: none;
}

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

/* Hover, Fokus und aktiver Zustand: Gold-Hintergrund */
#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: #fff;
    background: #ffcc00;
}

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

/* --- 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;
    border-bottom: 1px solid #333;
    font-size: 13px;
    background: #555;
    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: #ddd;
    border-top: 1px solid #333;
    font-weight: normal;
    font-size: 13px;
    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 {
    background-color: #ffcc00 !important;
    text-shadow: 1px 2px 4px #000;
}

/* 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: #ffcc00 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: #222;
    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;
}


/* ============================================================
   9. Erlebniswelt-Container (Startseite) – Bild links, Text rechts
   ============================================================ */

.erlebniswelt-wrapper {
    background-color: #3B3B3B;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.erlebniswelt-title {
    width: 100%;
    text-align: left;
    margin-bottom: 20px;
}

.erlebniswelt-container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;    /* Text am oberen Bildrand ausrichten */
    justify-content: center;
    gap: 20px;
}

.erlebniswelt-container img {
    border-radius: 5px;
    max-width: 200px;
    height: auto;
    width: 100%;
}

.erlebniswelt-content {
    flex: 1;
    min-width: 300px;
}

/* Erlebniswelt responsive: untereinander auf kleinen Bildschirmen */
@media (max-width: 768px) {
    .erlebniswelt-container {
        flex-direction: column;
        text-align: center;
    }

    .erlebniswelt-content {
        width: 100%;
    }
}


/* ============================================================
   10. EMZ-Listen – ohne Standardpunkte, mit goldener Farbe
   ============================================================ */

ul.emz-list {
    list-style: none;
    padding-left: 0;
    margin: 8px 0 0 0;
}

ul.emz-list li {
    list-style: none;
    margin: 6px 0;
}

/* Goldene Farbe für Icons/Symbole vor dem Listenpunkt */
ul.emz-list li span {
    color: #ffcc00;
    margin-right: 4px;
}


/* ============================================================
   11. Sponsorenliste – Karten-Design mit Hover-Effekt
   ============================================================ */

ul.sponsor-list {
    list-style: none;
    text-align: left;
    padding: 0 0 0 50px;
    max-width: 600px;
}

ul.sponsor-list li {
    list-style: none;
    margin-bottom: 12px;
    padding: 12px 16px;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
    transition: background 0.3s ease;
}

ul.sponsor-list li::before {
    font-size: 1.5em;
    margin-right: 12px;
    transition: transform 0.3s ease;
}

ul.sponsor-list li:hover {
    background: #3B3B3B;
}

ul.sponsor-list a {
    color: #FF9933;
    font-weight: bold;
    text-decoration: none;
}

ul.sponsor-list a:hover {
    text-decoration: underline;
}

/* Sponsorenliste responsive */
@media (max-width: 600px) {
    ul.sponsor-list li {
        flex-direction: column;
        align-items: flex-start;
    }

    ul.sponsor-list li::before {
        margin-bottom: 6px;
    }
}


/* ============================================================
   12. Benutzerbereich – Wird im Footer angezeigt wenn eingeloggt
   ============================================================ */

.benutzer-box {
    margin: 10px 0 0 10px;
    font-size: 11px;
    line-height: 180%;
}

.benutzer-gruss {
    display: block;
    color: #ccc;
}

/* Logout-Button: schlicht, passend zum Footer */
.logout-button {
    font-size: 10px;
    padding: 2px 8px;
    border: 1px solid #666;
    background: #333;
    color: #eee;
    cursor: pointer;
    transition: 0.3s background;
}

.logout-button:hover {
    background: #555;
}

/* Formular: kein extra Abstand */
.logout-formular {
    display: inline;
    margin: 0;
    padding: 0;
}

/* Link zu den Einstellungen */
.einstellungen-link {
    display: block;
    margin-top: 2px;
    color: #ffcc00;
    text-decoration: none;
}

.einstellungen-link:hover {
    text-decoration: underline;
}

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

#editthis a {
    color: #ffcc00;
    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: 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: 96%;
        margin: 0 2%;
    }

    /* 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;
    }

    /* --- Header-Bild auf Mobil ausblenden --- */
    .topspacer {
        background-image: none;
        background-color: transparent;
        height: auto;
        position: relative;
        margin-top: 65px;
        padding-top: 0;
        background-position: center top;
    }

    /* --- Mobiles Menü (#nav2) --- */
    #nav2 {
        width: 250px;
        height: auto;
        position: absolute;
        left: 0;
        top: 100px;
        z-index: 2000;
        background: #333;
        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 #555;
    }

    /* 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: #ffcc00;
        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) {

    /* Anderes Hintergrundbild für Smartphones */
    body {
        background: #222 url(img/bodybg-mobile.jpg) no-repeat fixed;
        background-size: 100% auto, auto;
    }

    /* 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%;
    }
}