/* ── RESET ───────────────────────── */
* {
    margin: 0;
    padding: 0;
    border: 0;
}
 
/* ── BODY ────────────────────────── */
body {
    background-color: #3d3846;
    color: #c0bfbc;
    font-family: 'Roboto Slab', Georgia, serif;
    font-size: 18px;
    line-height: 1.75;
}
 
/* ── WRAPPER ─────────────────────── */
.wrapper {
    width: 86%;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}
 
/* ── HR ──────────────────────────── */
hr {
    height: 1px;
    background-color: #4a4355;
    color: #4a4355;
}
 
/* ── CLEARFIX ────────────────────── */
.clearfix {
    clear: both;
}
 
/* ─────────────────────────────────
   HERO
───────────────────────────────── */
#hero {
    background-color: #1a0800;
    background-image: url(bild.png);
    background-size: cover;
    background-repeat: no-repeat;
    padding-top: 100px;
    padding-bottom: 100px;
    text-align: center;
}
 
.eyebrow {
    font-family: 'Roboto Slab', Georgia, serif;
    font-size: 0.8em;
    letter-spacing: 0.35em;
    color: #e06b28;
    margin-bottom: 20px;
}
 
/* h1 zweimal genutzt: einmal weiß, einmal orange */
h1 {
    font-family: 'Bebas Neue', Arial, sans-serif;
    font-size: 12em;
    letter-spacing: 0.04em;
    line-height: 0.88;
    color: #d4cfc8;
    text-align: center;
}
 
h1.orange {
    color: #342c35;
}
 
.untertitel {
    font-family: 'Roboto Slab', Georgia, serif;
    font-size: 1.3em;
    font-style: italic;
    color: #c0bfbc;
    margin-top: 20px;
    letter-spacing: 0.06em;
}
 
/* ─────────────────────────────────
   INTRO
───────────────────────────────── */
#intro {
    background-color: #2e2a37;
    padding-top: 70px;
    padding-bottom: 70px;
}
 
.intro-text {
    width: 100%;
}
 
.intro-text p {
    font-size: 0.95em;
    color: #c0bfbc;
    margin-bottom: 16px;
}
 
.intro-text strong {
    color: #e06b28;
}
 
/* Stats rechts */
.stats-bereich {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 16px;
    margin-top: 40px;
}
 
/* ── STAT KARTEN ─────────────────── */
.stat-karte {
    width: 44%;
    float: left;
    background-color: #46404f;
    border-top: 3px solid #e06b28;
    padding-top: 22px;
    padding-bottom: 22px;
    padding-left: 12px;
    padding-right: 12px;
    margin-bottom: 16px;
    margin-right: 8%;
    text-align: center;
}
 
/* jede zweite Karte kein margin-right */
.stat-karte.rechts {
    margin-right: 0;
}
 
.stat-zahl {
    font-family: 'Bebas Neue', Arial, sans-serif;
    font-size: 3.8em;
    color: #e06b28;
    line-height: 1;
    display: block;
}
 
.stat-label {
    font-family: 'Roboto Slab', Georgia, serif;
    font-size: 0.68em;
    letter-spacing: 0.1em;
    color: #807b88;
    margin-top: 5px;
    display: block;
}
 
/* ─────────────────────────────────
   CHRONIK
───────────────────────────────── */
#chronik {
    background-color: #3d3846;
    padding-top: 70px;
    padding-bottom: 70px;
}
 
/* Überschrift mit oranger Unterstreichung */
.bereichstitel {
    font-family: 'Bebas Neue', Arial, sans-serif;
    font-size: 3em;
    letter-spacing: 0.07em;
    color: #807b88;
    margin-bottom: 45px;
    border-bottom: 3px solid #e06b28;
    padding-bottom: 6px;
    width: max-content;
}
 
/* Timeline: oranger Balken links */
.timeline-eintrag {
    border-left: 3px solid #e06b28;
    padding-left: 28px;
    padding-top: 4px;
    padding-bottom: 4px;
    margin-bottom: 32px;
}
 
.zeitpunkt {
    font-family: 'Bebas Neue', Arial, sans-serif;
    font-size: 1.3em;
    color: #e06b28;
    letter-spacing: 0.07em;
    margin-bottom: 6px;
}
 
.timeline-eintrag p {
    font-size: 0.92em;
    color: #c0bfbc;
}
 
/* Punkt an der Timeline */
.timeline-eintrag .zeitpunkt::before {
    content: "●";
    color: #e06b28;
    margin-right: 8px;
    font-size: 0.7em;
}
 
/* ─────────────────────────────────
   ZITAT + FLIESSTEXT
───────────────────────────────── */
#zitat-bereich {
    background-color: #2e2a37;
    padding-top: 70px;
    padding-bottom: 70px;
}
 
/* braunes Zitat-Block wie im PDF */
#zitat {
    background-color: #7a4a2a;
    padding-top: 40px;
    padding-bottom: 40px;
    padding-left: 50px;
    padding-right: 50px;
    margin-bottom: 60px;
}
 
.zitat-text {
    font-family: 'Bebas Neue', Arial, sans-serif;
    font-size: 2.4em;
    letter-spacing: 0.04em;
    line-height: 1.2;
    color: #1a1220;
    margin-bottom: 14px;
}

.zitat-karte {
    background-color: #7a4a2a;
    padding: 40px 50px;
    margin-top: 40px;
    margin-left: 7%;
    margin-right: 7%;
}
 
.zitat-quelle {
    font-family: 'Roboto Slab', Georgia, serif;
    font-size: 0.78em;
    letter-spacing: 0.16em;
    color: #e06b28;
}
 
.fliesstext {
    font-size: 0.95em;
    color: #c0bfbc;
    line-height: 1.85;
    margin-bottom: 18px;
}
 
/* ─────────────────────────────────
   FOLGEN
───────────────────────────────── */
#folgen {
    background-color: #3d3846;
    padding-top: 70px;
    padding-bottom: 70px;
}
 
.folgen-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}
 
/* Karte mit oranger linker Linie wie im PDF */
.folgen-karte {
    background-color: #46404f;
    border-left: 3px solid #e06b28;
    padding-top: 24px;
    padding-bottom: 24px;
    padding-left: 22px;
    padding-right: 22px;
}
 
.folgen-karte h3 {
    font-family: 'Bebas Neue', Arial, sans-serif;
    font-size: 1.35em;
    color: #e06b28;
    letter-spacing: 0.1em;
    margin-bottom: 12px;
}
 
.folgen-karte p {
    font-size: 0.88em;
    color: #c0bfbc;
    line-height: 1.7;
}
 
/* ─────────────────────────────────
   FOOTER
───────────────────────────────── */
#footer {
    background-color: #2e2a37;
    border-top: 2px solid #a04e1e;
    padding-top: 30px;
    padding-bottom: 30px;
    text-align: center;
    font-family: 'Roboto Slab', Georgia, serif;
    font-size: 0.72em;
    letter-spacing: 0.14em;
    color: #807b88;
    line-height: 2.2;
}
 
/* ─────────────────────────────────
   LINKS
───────────────────────────────── */
a {
    text-decoration: none;
}
 
a:link {
    color: #e06b28;
}
 
a:visited {
    color: #a04e1e;
}
 
a:focus {
    color: #f0a060;
}
 
a:hover {
    color: #f0a060;
}
 
a:active {
    color: #ffffff;
}