/**
 * module.css – Inhaltsbausteine einzelner Seiten für EMZ Stellwerk
 *
 * Die Farben kommen als Variablen aus css/global.css.
 * Wird nach layout.css geladen, siehe index.php.
 *
 * Reihenfolge:
 * 1. Erlebniswelt-Container (Startseite)
 * 2. EMZ-Listen (Öffnungszeiten)
 * 3. Sponsorenliste
 * 4. Einheitliche Rundung für fremde Inhalte
 * 5. Info-Kasten (Startseite)
 * 6. Überschriften und Textblöcke der Startseite
 * 7. Anlagen-Karten (Startseite)
 *
 * @template EMZ Stellwerk für WBCE
 * Geändert am: 02. November 2026 (Datei angelegt, Abschnitte 9 bis 11 aus template.css übernommen, Breite und Rundung als Variable, Rundung für fremde Inhalte, neue Optik aus entwurf.css übernommen)
 */


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

.erlebniswelt-wrapper {
    box-sizing: border-box;
    background-color: var(--emz-flaeche);
    max-width: var(--emz-breite);
    margin: 0 auto 24px;
    padding: 28px;
    border: 1px solid var(--emz-linie);
    border-radius: var(--emz-radius);
}

.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: flex-start;
    gap: 20px;
}

.erlebniswelt-container img {
    border: 0 !important;
    border-radius: var(--emz-radius);
    max-width: 280px !important;
    margin: 0 !important;
    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%;
    }
}


/* ============================================================
   2. 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: var(--emz-gold);
    margin-right: 4px;
}


/* ============================================================
   3. 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: var(--emz-radius);
    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: var(--emz-flaeche);
}

ul.sponsor-list a {
    color: var(--emz-orange);
    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;
    }
}


/* ============================================================
   4. Einheitliche Rundung für fremde Inhalte
   Das Modul selbst bleibt unverändert, damit es updatefähig ist.
   ============================================================ */

/* Modul feedforward: Der +1-Knopf und die Schieberegler-Punkte bleiben Kreise.
   "body" davor, weil die CSS-Datei des Moduls ein zweites Mal nach dieser Datei geladen wird */
body .ff-wrap,
body .ff-wrap input[type="text"],
body .ff-wrap input[type="number"],
body .ff-info,
body .ff-btn,
body .ff-btn.ff-btn-del,
body .ff-list li label,
body .ff-bar-row,
body .ff-bar-track,
body .ff-slider-row,
body .ff-slider-trackwrap,
body .ff-cloud,
body .ff-ranking-item {
    border-radius: var(--emz-radius);
}

/* Bilder aus dem Editor: !important, weil die Rundung dort per style="" gesetzt ist. Kreise bleiben. */
img[style*="border-radius"]:not([style*="50%"]) {
    border-radius: var(--emz-radius) !important;
}


/* ============================================================
   5. Info-Kasten (Startseite)
   ============================================================ */

.emz-info {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    margin: 28px 0 8px;
    overflow: hidden;
    color: var(--emz-text);
    background: var(--emz-linie);   /* Scheint in den Lücken als Trennlinie durch */
    border: 1px solid var(--emz-linie);
    border-radius: var(--emz-radius);
}

/* WBCE setzt vor jeden Abschnitt einen leeren Anker, der sonst eine Spalte belegen würde */
.emz-info > .section_anchor {
    display: none;
}

.emz-info > div {
    padding: 20px 24px;
    background: var(--emz-flaeche);
}

.emz-info h2 {
    margin: 0 0 6px;
    color: var(--emz-gold);
    font-size: 1.1rem;
    font-weight: 700;
}

.emz-info p {
    margin: 0 0 6px;
    line-height: 1.5;
}

.emz-info a:link,
.emz-info a:visited {
    color: var(--emz-gold);
    font-weight: 700;
    text-decoration: underline;
}

/* Untereinander statt zwei Spalten, sonst bliebe neben dem dritten Feld eine leere Fläche */
@media (max-width: 700px) {
    .emz-info {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   6. Überschriften und Textblöcke der Startseite
   ============================================================ */

.frontpage h1 {
    margin: 36px auto 28px !important;
    text-align: center;
    max-width: 30em;
    text-wrap: balance;     /* Verhindert ein einzelnes Wort in der letzten Zeile */
}

.frontpage .content > p:first-of-type {
    display: none;
}

/* Orange Trennlinien und leere Abstandsabsätze entfallen */
.frontpage .content hr,
.frontpage .content > p[style*="clear"] {
    display: none;
}

.frontpage .content div[style*="background-color:#3b3b3b"] {
    max-width: 44em;
    margin: 36px auto 28px !important;
    padding: 0 !important;
    text-align: center;
    background: none !important;
}

.frontpage .content .h3-text-groesse {
    margin: 0 0 16px;
    font-size: 1.5rem;
}

.bloro_unit img {
    max-width: 100%;
    height: auto;
    border: 0 !important;
    border-radius: var(--emz-radius);
}


/* ============================================================
   7. Anlagen-Karten (Startseite): ganze Karte klickbar, Bild oben
   ============================================================ */

.frontpage .obo_grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    width: auto !important;
    margin: 0 0 24px !important;
    padding: 0 !important;
}

/* Zeilenumbruch und Clearfix des Moduls würden sonst als Flex-Kinder Abstand erzeugen */
.frontpage .obo_grid > br,
.frontpage .obo_grid::before,
.frontpage .obo_grid::after {
    display: none;
}

/* !important: Das Modul onebyone setzt eigene Abstände und Farben */
.frontpage .obo_grid .obo_unit {
    position: relative;
    display: flex;
    flex: 1 1 300px;
    flex-direction: column;
    float: none;
    box-sizing: border-box;
    width: auto !important;
    margin: 0 !important;
    padding: 0 0 20px !important;
    overflow: hidden;
    background: var(--emz-flaeche) !important;
    border: 1px solid var(--emz-linie);
    border-radius: var(--emz-radius);
    transition: border-color 0.2s, transform 0.2s;
}

.frontpage .obo_unit:hover,
.frontpage .obo_unit:focus-within {
    border-color: var(--emz-gold);
    transform: translateY(-3px);
}

/* Bild steht im Markup nach der Überschrift, wird nach oben gezogen */
.frontpage .obo_unit > a:nth-of-type(2) {
    order: -1;
}

.frontpage .obo_content_image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto !important;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.frontpage .obo_content_headline {
    margin: 18px 20px 8px;
    font-size: 1.35rem;
    font-weight: 700;
}

.frontpage .obo_unit p {
    margin: 0 20px 0.7em;
    color: var(--emz-text-leise);
    font-size: 1rem;
}

/* Knopf immer unten, damit die Karten bündig enden */
.frontpage .obo_unit p:last-of-type {
    margin-top: auto;
    margin-bottom: 0;
}

/* Macht die ganze Karte zum Link */
.frontpage .obo_unit a.readmore::after {
    position: absolute;
    inset: 0;
    content: "";
}

@media (prefers-reduced-motion: reduce) {
    .frontpage .obo_unit {
        transition: none;
    }

    .frontpage .obo_unit:hover,
    .frontpage .obo_unit:focus-within {
        transform: none;
    }
}