/**
 * global.css – Farben und Grundlagen für EMZ Stellwerk
 *
 * Die wichtigen Farben und die Seitenbreite stehen hier als Variablen an einer Stelle.
 * Wird vor layout.css geladen, siehe index.php.
 *
 * Nicht für den WBCE-Editor: Der CKEditor lädt nur editor.css und kennt
 * diese Variablen nicht. In editor.css bleiben die Farben deshalb fest.
 *
 * Reihenfolge:
 * 1. Variablen
 * 2. Grundlagen (html, body, Text)
 * 3. Große Überschrift
 * 4. Knöpfe
 *
 * @template EMZ Stellwerk für WBCE
 * Geändert am: 02. November 2026 (Datei angelegt, Grundlagen aus template.css übernommen, neue Optik aus entwurf.css übernommen)
 */


/* ============================================================
   1. Variablen
   ============================================================ */

:root {
    --emz-grund: #15171a;       /* Seitenhintergrund und Menüleiste */
    --emz-fusszeile: #0f1113;   /* Fußzeile */
    --emz-flaeche: #22252a;     /* Kästen und Karten */
    --emz-linie: #3b4048;       /* Trennlinien */
    --emz-text: #eef0f2;        /* Haupttext */
    --emz-text-leise: #bcc2c9;  /* Gedämpfter Text */
    --emz-gold: #ffcc00;        /* Markenfarbe */
    --emz-gold-hell: #ffdc4d;   /* Gold beim Überfahren */
    --emz-auf-gold: #15171a;    /* Text auf Gold */
    --emz-orange: #ff9933;      /* Links in der Sponsorenliste */
    --emz-menue: #555;          /* Linien im mobilen Menü */
    --emz-menue-mobil: #333;    /* Hintergrund des mobilen Menüs */
    --emz-breite: 1300px;       /* Maximale Breite der Seite */
    --emz-radius: 6px;          /* Die einzige Rundung, auch für Knöpfe. Kreise bleiben Kreise. */
}


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

html, body {
    margin: 0;
    padding: 0;
    height: 101%;           /* Verhindert Scroll-Sprung bei kurzen Seiten */
    color: var(--emz-text);
}

body {
    background: var(--emz-grund);
    font-size: 17px;
    line-height: 1.65;
}

p {
    line-height: 1.65;
    margin-bottom: 0.7em;
}

strong,
a strong {
    color: inherit;
}


/* ============================================================
   3. Große Überschrift
   ============================================================ */

h1 {
    color: var(--emz-text);
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 400;
    line-height: 1.25;
}


/* ============================================================
   4. Knöpfe
   ============================================================ */

/* Weiterlesen-Knöpfe stehen rechts */
p:has(> a.readmore) {
    text-align: right;
}

a.readmore:link,
a.readmore:visited {
    display: inline-block;
    float: none !important;
    min-height: 24px;
    padding: 10px 16px;
    color: var(--emz-auf-gold);
    font-weight: 700;
    text-decoration: none;
    background: var(--emz-gold);
    border-radius: var(--emz-radius);
    transition: background 0.2s;
}

a.readmore:hover,
a.readmore:focus,
.frontpage .obo_unit:hover a.readmore {
    color: var(--emz-auf-gold);
    background: var(--emz-gold-hell);
}