/**
 * editor.css – Inhalts-Styles für EMZ Stellwerk Template
 *
 * Diese Datei wird sowohl im WBCE-Editor (Backend) als auch
 * im Frontend für die Darstellung der Seiteninhalte verwendet.
 *
 * Farbschema: Gold/Gelb (#ffcc00) auf dunklem Hintergrund
 *
 * Reihenfolge:
 * 1. Grundlagen (body, Schrift)
 * 2. Überschriften
 * 3. Text und Absätze
 * 4. Links
 * 5. Listen
 * 6. Zitate und Code
 * 7. Trennlinien und Adressen
 * 8. Formulare
 * 9. Tabellen
 * 10. Bilder und Bild-Klassen
 * 11. Buttons und spezielle Klassen
 * 12. Responsive Video
 * 13. Sichtbarkeits-Helfer
 * 14. Responsive Anpassungen
 *
 * @template EMZ Stellwerk für WBCE
 * Version: 2.0 – Februar 2026
 */


/* ============================================================
   1. Grundlagen – Schrift und Farben
   ============================================================ */

body {
    font-family: 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
    font-size: 15px;
    color: #222;
    background: #fff;
}


/* ============================================================
   2. Überschriften – alle in EMZ-Gold
   ============================================================ */

/* Gemeinsame Basis für alle Überschriften */
h1, h2, h3, h4, h5, h6 {
    color: #ffcc00;
    line-height: 120%;
    margin: 0;
}

h1 {
    padding: 0 0 10px 0;
    font-size: 2.2em;
    font-weight: 300;       /* Dünn – für elegante Wirkung */
}

h2 {
    margin: 10px 0 4px 0;
    font-size: 1.8em;
    font-weight: 400;       /* Normal */
}

h3 {
    margin: 10px 0 4px 0;
    font-size: 1.2em;
}

h4 {
    margin: 10px 0 0 0;
    font-size: 1em;
}

h5 {
    margin: 10px 0 0 0;
    font-size: 0.94em;
}

h6 {
    margin: 3px 0 0 0;
    font-size: 0.9em;
}


/* ============================================================
   3. Text und Absätze
   ============================================================ */

p {
    margin: 0 0 5px 0;
    line-height: 160%;
}

/* Fett gedruckter Text in hellem Gold */
strong {
    color: #ffeeaa;
}

/* Fett in Links – gleiche Farbe */
a strong {
    color: #ffeeaa;
}


/* ============================================================
   4. Links – Gold mit sanftem Übergang
   ============================================================ */

a:link,
a:visited {
    color: #ffcc00;
    text-decoration: none;
    transition: 0.5s all;
}

a:hover,
a:active {
    color: #ffea00;
    text-decoration: underline;
    transition: 0.5s all;
}

/* Bilder in Links: keinen Rahmen anzeigen */
a img {
    border: 0;
}

/* Links in Absätzen: fett hervorheben */
p a {
    font-weight: bold;
}


/* ============================================================
   5. Listen – mit eigenem Aufzählungszeichen
   ============================================================ */

/* Ungeordnete Listen */
ul {
    line-height: 150%;
    margin: 0 0 10px 0.7em;
    padding-left: 0.7em;
}

ul li {
    padding-bottom: 0;
    list-style: url(img/lipu.gif);  /* Eigenes Bullet-Bild */
}

/* Geordnete Listen (nummeriert) */
ol {
    line-height: 150%;
    margin: 0 0 10px 0.9em;
    padding-left: 0.9em;
}


/* ============================================================
   6. Zitate und Code-Blöcke
   ============================================================ */

/* Zitat-Block mit goldener Linie links */
blockquote {
    background-color: #222;
    padding: 6px;
    border-left: 2px solid #ffcc00;
    margin: 3px 0 20px 0;
}

/* Code-Blöcke mit grauer Umrandung */
pre,
.code {
    color: #ccc;
    padding: 6px 0 20px 6px;
    border: 1px solid #666;
    border-left: 6px solid #666;    /* Dickere Linie links */
    background-color: #222;
    margin: 3px 0 20px 0;
    font-size: 1em;
    overflow: auto;
    line-height: 2.2em;
}

/* Inline-Code im Editor: grüne Monospace-Schrift */
.code {
    font-family: "Courier New", Courier, monospace;
    color: #093;
    letter-spacing: 1px;
}


/* ============================================================
   7. Trennlinien und Adressen
   ============================================================ */

hr {
    margin: 5px 0;
    color: #505567;
    border: 0;
    border-top: 1px solid #505567;
    height: 1px;
}

/* Adress-Block mit grauer Linie links */
address {
    line-height: 120%;
    margin: 10px 0 20px 0;
    padding-left: 10px;
    border-left: 6px solid #666;
    font-style: normal;
    font-weight: bold;
}


/* ============================================================
   8. Formulare – dunkles Design für Suchseite etc.
   ============================================================ */

form {
    margin: 0;
}

input,
textarea,
select {
    border: 1px solid #666;
    background: #333;
    color: #eee;
    padding: 2px;
    width: 98%;
}

/* Bild-Buttons (z.B. Submit mit Icon) brauchen keinen Rahmen */
input[type="image"] {
    background: none;
    border: none;
}


/* ============================================================
   9. Tabellen
   ============================================================ */

/* Basis: Alle Tabellen ohne Rahmen */
table {
    border-collapse: collapse;
    border: none;
}

/* Tabellenzellen: Text oben ausrichten */
td {
    vertical-align: top;
}

/* Gestylte Tabelle mit Klasse "table" */
table.table {
    clear: both;
    border-collapse: collapse;
    border: none;
    border-top: 1px solid #666;
    margin: 20px 0 5px 0;
    width: 100%;
    font-size: 0.85em;
}

table.table caption {
    font-size: 1.1em;
    text-align: left;
}

table.table th {
    font-size: 0.9em;
    padding: 4px;
    text-align: left;
    vertical-align: top;
    border: none;
    border-bottom: 1px solid #999;
    background-color: rgba(0, 0, 0, 0.1);
}

table.table tbody td {
    font-size: 0.9em;
    padding: 4px;
    vertical-align: top;
    border: none;
    border-bottom: 1px solid #999;
    background-color: rgba(0, 0, 0, 0.01);
    transition: 1s background-color;
}

/* Hover-Effekt: Zeile hervorheben */
table.table tbody tr:hover td {
    background-color: rgba(0, 0, 0, 0.5);
}

/* Überschriften und Absätze in Tabellenzellen: kompakter */
table.table tbody td p,
table.table tbody td h1,
table.table tbody td h2,
table.table tbody td h3,
table.table tbody td h4 {
    margin: 0;
    line-height: 120%;
}


/* ============================================================
   10. Bilder und Bild-Klassen
   ============================================================ */

/* Bilder im Editor: links oder rechts floaten */
.bildrechts { float: right; margin-left: 10px; }
.bildlinks  { float: left;  margin-right: 10px; }

/* Bilder mit align-Attribut (vom Editor gesetzt) */
p img[align="right"],
h3 img[align="right"] {
    float: right;
    max-width: 48%;
    margin: 3px 0 2px 1%;
    height: auto;
}

p img[align="left"],
h3 img[align="left"] {
    float: left;
    max-width: 48%;
    margin: 3px 3% 2px 0;
    height: auto;
}

/* Bild-Raster: volle Breite */
img.picfull {
    width: 100%;
    height: auto;
}

/* Bild-Raster: 2er-Spalten (je 48%) */
img.pic2left  { float: left;  width: 48%; margin: 3px 3% 2px 0;    height: auto; }
img.pic2right { float: right; width: 48%; margin: 3px 0  2px 1%;   height: auto; }

/* Bild-Raster: 3er-Spalten (je 32%) */
img.pic3left  { float: left;  width: 32%; margin: 3px 1.5% 2px 0;  height: auto; }
img.pic3right { float: right; width: 32%; margin: 3px 0    2px 0.3%; height: auto; }

/* Bild-Raster: 4er-Spalten (je 24%) */
img.pic4left  { float: left;  width: 24%; margin: 3px 1% 2px 0;    height: auto; }
img.pic4right { float: right; width: 24%; margin: 3px 0  2px 0.5%; height: auto; }


/* ============================================================
   11. Buttons und spezielle Editor-Klassen
   ============================================================ */

/* "Mehr lesen"-Button mit abgerundeten Ecken */
.teaserbutton {
    display: block;
    clear: both;
    padding: 2px 10px 5px 10px;
    margin: 10px 10px 10px auto;
    text-align: center;
    border: 2px solid #ccc;
    border-radius: 1.2em;
    transition: 0.8s all;
    background: rgba(200, 200, 200, 0.5);
}

.teaserbutton:hover {
    background: rgba(30, 123, 0, 0.5);
    color: #fff;
    border-radius: 0.5em;
}

/* Wichtiger Text: rot und fett (für Warnungen im Editor) */
.important {
    font-weight: bold;
    color: #f00;
}

/* Info-Box (z.B. für Hinweise im Content) */
.info-box {
    border: 1px solid #cc3;
    background-color: #dadbe8;
    padding: 4px;
}


/* ============================================================
   12. Responsive Video – für YouTube, Vimeo etc.
   ============================================================ */

/* Container hält das 16:9 Seitenverhältnis */
.responsiveVideo,
.flex-video {
    position: relative;
    padding-bottom: 56.25%;     /* 16:9 Verhältnis */
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

/* Video/iFrame füllt den Container komplett aus */
.responsiveVideo iframe,
.responsiveVideo object,
.responsiveVideo embed,
.flex-video iframe,
.flex-video object,
.flex-video embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* ============================================================
   13. Sichtbarkeits-Helfer – Elemente je nach Gerät ein/ausblenden
   Nutzung im Editor: Klasse "hideOnTablets" etc. vergeben
   ============================================================ */

.hideOnDesktops  { display: none; }
body .showOnDesktops { display: block; }


/* ============================================================
   14. Responsive Anpassungen
   ============================================================ */

/* --- Tablets (bis 768px) --- */
@media (max-width: 768px) {

    /* 2er-Bilder: volle Breite untereinander */
    img.pic2left,
    img.pic2right {
        width: 100%;
        margin: 3px 0 2px 0;
    }

    /* 3er und 4er-Bilder: auf 2er-Raster verkleinern */
    img.pic3left, img.pic3right,
    img.pic4left, img.pic4right {
        width: 49%;
    }

    /* Sichtbarkeit für Tablets umschalten */
    body .hideOnTablets    { display: none; }
    .hideOnDesktops        { display: block; }
    body div .showOnTablets { display: block; }
}

/* --- Smartphones (bis 440px) --- */
@media (max-width: 440px) {

    /* Alle Bilder: volle Breite oder 2er-Raster */
    img.pic2left,
    img.pic2right {
        width: 100%;
        margin: 3px 0 2px 0;
    }

    img.pic3left, img.pic3right,
    img.pic4left, img.pic4right {
        width: 49%;
    }

    /* Sichtbarkeit für Smartphones umschalten */
    .hideOnMobiles          { display: none; }
    body .hideOnTablets      { display: block; }
    body .hideOnDesktops     { display: block; }
    body div .showOnMobiles  { display: block; }
}