@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Literata';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/literata-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Literata';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/literata-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Literata';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/literata-latin-400-italic.woff2) format('woff2')}

:root{
  --petrol:#0F3A3F;--petrol-hover:#174E54;--gold:#D4AF37;--gold-dunkel:#8A6B1C;
  --grund:#F5F3F0;--flaeche:#FCFBF9;--linie:#D2D6DA;--lichtblau:#CDE7F9;
  --mensch:#687078;--technik:#3A7295;--text:#262320;--ruhig:#5A5550;
  --serif:'Literata',Georgia,serif;--sans:'IBM Plex Sans',system-ui,sans-serif;
  --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:48px;--s6:64px;--s7:88px;
  --rahmen:1120px;--textspalte:680px;--radius:4px;
}
body{margin:0;background:var(--grund)}
.seite{font-family:var(--serif);color:var(--text);background:var(--grund);font-size:18px;line-height:1.65}
.rahmen{max-width:var(--rahmen);margin:0 auto;padding:0 24px;box-sizing:border-box}
.abschnitt{padding:var(--s7) 0}
.label{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-dunkel);margin:0}
.goldlinie{width:48px;height:1px;background:var(--gold);margin-bottom:var(--s2)}
h1,h2,h3{margin:0;color:var(--petrol)}
.hero-h{font-weight:400;font-size:48px;line-height:1.12;color:var(--flaeche)}
h2{font-weight:500;font-size:30px;line-height:1.25}
h3{font-weight:500;font-size:21px;line-height:1.35}
p{margin:0}
.vorspann{font-size:21px;line-height:1.5;color:var(--ruhig)}
.leise{font-family:var(--sans);font-size:15px;line-height:1.55;color:var(--ruhig)}
.textspalte{max-width:var(--textspalte)}
.kopf{display:flex;flex-direction:column;gap:var(--s3);margin-bottom:var(--s5)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;box-sizing:border-box;padding:14px 24px;border-radius:var(--radius);font-family:var(--sans);font-size:16px;font-weight:500;line-height:1;text-decoration:none;border:1px solid transparent;cursor:pointer}
.btn-primaer{background:var(--petrol);color:var(--flaeche)}
.btn-primaer:hover{background:var(--petrol-hover)}
.btn-gold{background:var(--gold);color:var(--petrol)}
.btn-gold:hover{background:#E0BF55}
.btn-sekundaer{background:transparent;color:var(--petrol);border-color:var(--petrol)}
.btn-sek-hell{background:transparent;color:var(--flaeche);border-color:rgba(252,251,249,.6)}
.btn-sek-hell:hover{border-color:var(--flaeche)}
.leiselink{font-family:var(--sans);font-size:16px;font-weight:500;color:var(--petrol);text-decoration:underline;text-underline-offset:3px}
.leiselink:hover{color:var(--gold-dunkel)}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold-dunkel);outline-offset:2px}
.dunkel a:focus-visible,.dunkel button:focus-visible{outline-color:var(--gold)}
button{font:inherit}
.entwurf{font-family:var(--sans);font-size:12px;font-weight:600;color:#9B2C22;letter-spacing:.04em}
.entwurf-hell{font-family:var(--sans);font-size:12px;font-weight:600;color:#F4B3A8;letter-spacing:.04em}
.neu-hell{color:#F4B3A8}
.neu{color:#9B2C22}
.lage5{grid-column:1 / -1;justify-self:center;width:calc(50% - 24px);box-sizing:border-box}
@media (max-width: 920px){.lage5{width:auto;justify-self:stretch}}

.nav-hell a{color:var(--linie);text-decoration:none}
.nav-hell a:hover{color:var(--flaeche)}
.nav-hell a.btn{color:var(--petrol)}
.lage-zeile{display:flex;flex-wrap:wrap;gap:var(--s5);padding:var(--s4) 0 var(--s4) var(--s3);border-bottom:1px solid var(--linie)}
.antwort{flex:1 1 400px;min-width:0;display:flex;flex-direction:column;gap:var(--s2);background:var(--flaeche);padding:var(--s4);border-radius:var(--radius)}
.fliess{display:flex;flex-direction:column;gap:var(--s2)}
.hinweis{background:#FFF4F1;border-bottom:1px solid #E8C4BC;font-family:var(--sans);font-size:14px;color:#262320;padding:10px 24px}
img{max-width:100%}
.zeitstrahl{list-style:none;margin:0;padding:0;position:relative;display:flex;flex-direction:column;gap:var(--s3)}
.zeitstrahl::before{content:"";position:absolute;left:111px;top:6px;bottom:6px;width:2px;background:var(--linie)}
.zeitstrahl li{display:grid;grid-template-columns:96px 1fr;gap:var(--s4);position:relative}
.zeitstrahl li::after{content:"";position:absolute;left:104px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--grund);border:2px solid var(--petrol)}
.zeitstrahl li.hell::after{background:var(--gold);border-color:var(--gold-dunkel)}
.zeitstrahl .jahr{font-family:var(--sans);font-weight:600;font-size:15px;color:var(--gold-dunkel);text-align:right;padding-top:2px}
.zeitstrahl .was{padding-left:var(--s3)}
.zeitstrahl h3{font-size:19px}
@media (max-width:600px){.zeitstrahl li{grid-template-columns:72px 1fr;gap:var(--s3)}.zeitstrahl::before{left:83px}.zeitstrahl li::after{left:76px}}
.kern{font-size:21px;line-height:1.5;color:var(--petrol);margin:var(--s2) 0}
.weg{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);position:relative}
.weg::before{content:"";position:absolute;left:12px;right:12px;top:11px;height:2px;background:var(--petrol);transform-origin:left;transform:scaleX(0);transition:transform 1.6s ease}
.weg.an::before{transform:scaleX(1)}
.weg li{position:relative;opacity:.25;transition:opacity .6s ease}
.weg.an li{opacity:1}
.weg.an li:nth-child(1){transition-delay:.2s}.weg.an li:nth-child(2){transition-delay:.6s}.weg.an li:nth-child(3){transition-delay:1s}.weg.an li:nth-child(4){transition-delay:1.4s}
.weg a{display:flex;flex-direction:column;gap:4px;text-decoration:none;color:var(--text);padding-top:40px}
.weg a::before{content:"";position:absolute;top:0;left:0;width:20px;height:20px;border-radius:50%;background:var(--grund);border:2px solid var(--petrol)}
.weg li:last-child a::before{background:var(--gold);border-color:var(--gold-dunkel)}
.weg a:hover h3{color:var(--gold-dunkel)}
.weg .zeit{font-family:var(--sans);font-size:14px;font-weight:500;color:var(--gold-dunkel)}
.abzweig{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s4);padding-top:var(--s3);border-top:1px dashed var(--linie);font-family:var(--sans)}
@media (max-width:760px){.weg{grid-template-columns:1fr;gap:var(--s3)}.weg::before{left:9px;right:auto;top:10px;bottom:10px;width:2px;height:auto;transform-origin:top;transform:scaleY(0)}.weg.an::before{transform:scaleY(1)}.weg a{padding-top:0;padding-left:40px}}
@media (prefers-reduced-motion:reduce){.weg::before{transition:none;transform:none}.weg li{transition:none;opacity:1}}