/* ============================================================
   Startseite — dunkle Editorial-Variante.
   Alles unter body.home gescoped, damit die Unterseiten
   weiter das helle Standard-Layout aus styles.css behalten.
   ============================================================ */

.home{
  --home-bg:#0b2226;
  --home-bg-deep:#071a1d;
  --home-panel:#10333a;
  --home-panel-soft:#164047;
  --home-ink:#f4f0e8;
  --home-ink-soft:rgba(244,240,232,.74);
  --home-accent:#ef7d3a;
  --home-accent-soft:rgba(239,125,58,.38);
  --home-line:rgba(244,240,232,.14);

  background:var(--home-bg);
  color:var(--home-ink);
}

/* ---------- Navigation auf der Startseite ---------- */
.home .nav{border-bottom:1px solid var(--home-line)}
.home .nav::before{background:rgba(7,26,29,.82)}
.home .brand{color:var(--home-ink)}
.home .brand-dot{background:var(--home-bg-deep);border:1.5px solid var(--brand);color:var(--brand)}
.home .nav-links a{color:var(--home-ink-soft)}
.home .nav-links a:hover{background:rgba(244,240,232,.08);color:var(--home-ink)}
.home .nav-links a.is-active{background:rgba(239,125,58,.16);color:var(--home-accent)}
.home .nav-cta{
  background:var(--home-accent);color:#062023;font-weight:600;
}
.home .nav-cta:hover{background:#ff9f66;color:#062023}
.home .nav-burger span{background:var(--home-ink)}
@media (max-width:880px){
  .home .nav-links{background:var(--home-bg-deep)}
}

/* ---------- Bausteine ---------- */
.hm-eyebrow{
  display:inline-block;
  font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--home-accent);
}
.hm-btn{
  display:inline-flex;align-items:center;gap:9px;
  margin-top:26px;padding:13px 26px;border-radius:999px;
  font-size:14.5px;font-weight:600;letter-spacing:.03em;
  align-self:flex-start;
  transition:transform .15s,background .15s,border-color .15s;
}
.hm-btn:hover{transform:translateY(-2px)}
.hm-btn-solid{background:var(--home-accent);color:#062023}
.hm-btn-solid:hover{background:#ff9f66}
.hm-btn-ghost{border:1px solid var(--home-line);color:var(--home-ink)}
.hm-btn-ghost:hover{border-color:var(--home-accent);background:rgba(239,125,58,.10)}

.hm-h2{
  margin-top:16px;
  font-family:var(--font-body);
  font-size:clamp(26px,3.6vw,40px);
  font-weight:700;line-height:1.12;letter-spacing:-.01em;
  text-transform:uppercase;
}
.hm-sub{
  margin-top:12px;font-size:14px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--home-accent);
}
.hm-text{margin-top:18px;color:var(--home-ink-soft);font-size:16.5px;max-width:46ch}

/* Schnell-Links (die kleinen Icon-Spalten unter dem Text) */
.hm-quick{
  display:flex;flex-wrap:wrap;gap:14px 18px;
  margin-top:26px;padding-top:22px;border-top:1px solid var(--home-line);
}
.hm-quick a{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  min-width:68px;
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  color:var(--home-ink-soft);transition:color .15s,transform .15s;
}
.hm-quick a:hover{color:var(--home-accent);transform:translateY(-2px)}
.hm-quick .ic{
  width:40px;height:40px;border-radius:50%;
  border:1px solid var(--home-line);
  display:flex;align-items:center;justify-content:center;font-size:17px;
}
.hm-quick a:hover .ic{border-color:var(--home-accent)}

/* Neu-Badge: markiert frisch hinzugefügte Artikel in den Quick-Links,
   ohne Layout zu verändern. Läuft per data-new-until automatisch ab,
   siehe Script am Seitenende. */
.hm-quick li{position:relative}
.hm-quick .is-new .ic{border-color:var(--home-accent)}
.hm-quick .is-new .ic::after{
  content:"";position:absolute;top:-2px;right:-2px;
  width:9px;height:9px;border-radius:50%;
  background:var(--home-accent);
  box-shadow:0 0 0 2px var(--home-panel);
}
.hm-split--reverse .hm-quick .is-new .ic::after{box-shadow:0 0 0 2px var(--home-panel-soft)}

/* ---------- Hero ---------- */
.hm-hero{
  position:relative;
  min-height:calc(100vh - 70px);
  display:flex;align-items:center;
  overflow:hidden;
}
.hm-hero-bg{position:absolute;inset:0;z-index:0}
.hm-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:60% center}
.hm-hero-bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg, rgba(7,26,29,.75) 0%, rgba(7,26,29,.55) 42%, rgba(7,26,29,.08) 100%),
    linear-gradient(180deg, rgba(7,26,29,.4) 0%, rgba(7,26,29,0) 30%, rgba(7,26,29,.55) 100%);
}
.hm-hero-inner{position:relative;z-index:1;width:100%;padding-top:60px;padding-bottom:80px}
.hm-wordmark{
  margin-top:14px;
  font-family:var(--font-body);
  font-size:clamp(46px,8.5vw,104px);
  font-weight:700;line-height:1;letter-spacing:-.02em;
  text-transform:uppercase;
}
.hm-wordmark span{color:var(--home-accent)}
.hm-hero h1:not(.hm-status){
  margin-top:26px;
  font-family:var(--font-body);
  font-size:clamp(28px,4.6vw,52px);
  font-weight:700;line-height:1.08;letter-spacing:-.01em;
  text-transform:uppercase;
}
.hm-hero h1.hm-status{margin-top:30px}
.hm-status-link{
  display:inline-flex;flex-direction:column;gap:11px;
  max-width:640px;text-decoration:none;color:inherit;
}
.hm-status-label{
  display:inline-flex;align-items:center;gap:9px;
  font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--home-accent);
}
.hm-status-dot{
  width:9px;height:9px;border-radius:50%;flex:none;
  background:var(--home-accent);
  box-shadow:0 0 0 4px rgba(239,125,58,.22);
  animation:hm-status-pulse 2.4s ease-in-out infinite;
}
.hm-status--idle .hm-status-dot{
  background:rgba(244,240,232,.45);
  box-shadow:0 0 0 4px rgba(244,240,232,.1);
  animation:none;
}
@keyframes hm-status-pulse{
  0%,100%{box-shadow:0 0 0 4px rgba(239,125,58,.22)}
  50%{box-shadow:0 0 0 8px rgba(239,125,58,.05)}
}
.hm-status-text{
  font-family:var(--font-body);
  font-size:clamp(26px,4.2vw,46px);
  font-weight:700;line-height:1.16;letter-spacing:-.01em;
  text-transform:none;
  transition:color .15s;
}
.hm-status-link:hover .hm-status-text{color:var(--home-accent)}
.hm-hero-meta{
  margin-top:22px;font-size:13.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--home-accent);
}
.hm-scroll{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  z-index:1;width:26px;height:42px;border-radius:999px;
  border:1px solid rgba(244,240,232,.45);
}
.hm-scroll::after{
  content:"";position:absolute;left:50%;top:9px;margin-left:-2px;
  width:4px;height:8px;border-radius:2px;background:rgba(244,240,232,.8);
  animation:hm-scroll-dot 1.8s ease-in-out infinite;
}
@keyframes hm-scroll-dot{
  0%,100%{transform:translateY(0);opacity:.9}
  50%{transform:translateY(12px);opacity:.25}
}
@media (max-width:880px){
  .hm-hero{min-height:auto}
  .hm-hero-inner{padding-top:70px;padding-bottom:90px}
  .hm-scroll{display:none}
}

/* ---------- Sektionstrenner: dezente Petrol-Linie an jedem Bandwechsel.
   Gibt der Startseite einen durchgehenden Rhythmus, bleibt aber deutlich
   leiser als die 3px-Linie der Feature-Kachel — die soll Blickfang bleiben.
   :not(.hm-feature) statt Reihenfolge-Trick, damit die Regel unabhängig
   von ihrer Position in dieser Datei greift. ---------- */
.hm-split:not(.hm-feature),
.hm-overlay,
.hm-about,
.hm-strip{border-top:1px solid var(--home-accent-soft)}

/* ---------- Aktuell-Kachel: gleiches Layout/Höhe wie die Themen-Kacheln,
   nur mit Akzent-Rahmen + größerem Badge markiert. Befristet über
   data-feature-until, blendet sich danach automatisch aus. ---------- */
.hm-feature{border-top:3px solid var(--home-accent)}
.hm-feature.is-expired{display:none}
.hm-feature-tag{
  display:inline-flex;align-self:flex-start;align-items:center;gap:7px;
  padding:8px 18px;border-radius:999px;
  background:var(--home-accent);color:#062023;
  font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.hm-feature .hm-h2{margin-top:18px}

/* ---------- Band: Bild + Panel (Technik, Handball) ---------- */
.hm-split{display:grid;grid-template-columns:1fr 1fr;background:var(--home-bg-deep)}
.hm-split-media{position:relative;min-height:420px}
.hm-split-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hm-split-panel{
  background:var(--home-panel);
  padding:clamp(36px,5vw,72px) clamp(24px,4vw,64px);
  display:flex;flex-direction:column;justify-content:center;
}
.hm-split--reverse .hm-split-media{order:2}
.hm-split--reverse .hm-split-panel{order:1;background:var(--home-panel-soft)}

/* CRD-VI-Teaser: SVG-Infografik traegt eigenen Text bis an die Raender,
   object-fit:cover schneidet den bei den meisten Viewport-Breiten ab. */
#crd-vi .hm-split-media img{object-fit:contain;background:var(--home-bg-deep)}

@media (max-width:880px){
  .hm-split{grid-template-columns:1fr}
  .hm-split-media{min-height:260px;order:1 !important}
  .hm-split-panel{order:2 !important}
}

/* ---------- Band: Vollbild-Foto mit Overlay (Börse, Abenteuer) ---------- */
.hm-overlay{position:relative;display:flex;align-items:center;min-height:clamp(420px,58vh,620px)}
.hm-overlay-bg{position:absolute;inset:0;z-index:0}
.hm-overlay-bg img{width:100%;height:100%;object-fit:cover}
.hm-overlay-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(7,26,29,.94) 0%, rgba(7,26,29,.78) 45%, rgba(7,26,29,.35) 100%);
}
.hm-overlay--right .hm-overlay-bg::after{
  background:linear-gradient(270deg, rgba(7,26,29,.90) 0%, rgba(7,26,29,.55) 45%, rgba(7,26,29,.25) 100%);
}
.hm-overlay-inner{
  position:relative;z-index:1;width:100%;
  padding-top:clamp(46px,6vw,80px);padding-bottom:clamp(46px,6vw,80px);
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:40px;align-items:center;
}
/* Variante mit Karte rechts — die Person im Foto bleibt links frei */
.hm-overlay--right .hm-overlay-inner{grid-template-columns:minmax(0,1fr);justify-items:end}
.hm-overlay-card{
  background:rgba(7,26,29,.72);
  border:1px solid var(--home-line);
  border-radius:var(--radius);
  padding:clamp(26px,3vw,40px);
  max-width:560px;
  backdrop-filter:blur(6px);
}
.hm-overlay-card .hm-text{max-width:none}

/* Kennzahlen-Karte (Börse) */
.hm-stat-card{
  background:rgba(7,26,29,.66);
  border:1px solid var(--home-line);
  border-radius:var(--radius);
  padding:28px;
  backdrop-filter:blur(8px);
}
.hm-stat{padding:16px 0;border-bottom:1px solid var(--home-line)}
.hm-stat:first-child{padding-top:0}
.hm-stat:last-child{border-bottom:0;padding-bottom:0}
.hm-stat-num{
  display:block;font-family:var(--font-body);
  font-size:26px;font-weight:700;letter-spacing:-.01em;color:var(--home-accent);
}
.hm-stat-label{
  display:block;margin-top:6px;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--home-ink-soft);
}
@media (max-width:880px){
  .hm-overlay-inner{grid-template-columns:1fr;gap:26px}
}

/* ---------- Über mich (heller Block) ---------- */
.hm-about{background:var(--bg-soft);color:var(--ink)}
.hm-about-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;
  padding-left:0;padding-right:0;
}
.hm-about-text{padding:clamp(40px,5vw,80px) clamp(24px,4vw,56px)}
.hm-about .hm-eyebrow{color:var(--accent-deep)}
.hm-about .hm-h2{color:var(--ink)}
.hm-about .hm-text{color:var(--ink-soft)}
.hm-about-photo{position:relative;min-height:360px}
/* Hochformat-Porträt in einem breiten Block: oben ausrichten, damit das
   Gesicht im Bild bleibt und nicht rausgeschnitten wird. */
.hm-about-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.hm-sign{
  margin-top:24px;font-family:var(--font-display);font-style:italic;
  font-size:30px;color:var(--accent-deep);
}
.hm-about .hm-btn-ghost{border-color:var(--line);color:var(--ink)}
.hm-about .hm-btn-ghost:hover{border-color:var(--accent);background:var(--accent-glow)}
@media (max-width:880px){
  .hm-about-grid{grid-template-columns:1fr}
  .hm-about-photo{min-height:280px}
}

/* ---------- Foto-Leiste ---------- */
.hm-strip{background:var(--home-bg-deep);padding:26px 0 0}
.hm-strip-claim{
  text-align:center;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--home-accent);font-weight:600;margin-bottom:20px;padding:0 20px;
}
.hm-strip-row{
  display:grid;grid-template-columns:repeat(8,1fr);gap:2px;
}
.hm-strip-row a{position:relative;aspect-ratio:4/3;overflow:hidden}
.hm-strip-row img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.85) brightness(.82);
  transition:transform .3s,filter .3s;
}
.hm-strip-row a:hover img{transform:scale(1.06);filter:saturate(1) brightness(1)}
@media (max-width:880px){.hm-strip-row{grid-template-columns:repeat(4,1fr)}}
@media (max-width:480px){.hm-strip-row{grid-template-columns:repeat(2,1fr)}}

/* ---------- Footer auf der Startseite ---------- */
.home .footer{
  background:var(--home-bg-deep);border-top:1px solid var(--home-line);
  color:var(--home-ink);margin-top:0;
}
.home .foot-claim,
.home .foot-col h4,
.home .foot-copy,
.home .foot-legal{color:var(--home-ink-soft)}
.home .foot-col a,
.home .foot-legal a{color:var(--home-ink)}
.home .foot-col a:hover,
.home .foot-legal a:hover{color:var(--home-accent)}
.home .foot-bottom{border-top-color:var(--home-line)}
.home .foot-social a{border-color:var(--home-line);color:var(--home-ink)}
.home .foot-social a:hover{background:rgba(239,125,58,.14);border-color:var(--home-accent)}

/* ---------- Intro-Overlay (einmal pro Session) ----------
   Boot-Sequenz statt Autoplay-Video (abgelöst 2026-09-08): Zeilen zählen per
   CSS-Animation hoch, jede mit eigener --d-Verzögerung (inline gesetzt in
   base.njk), zuletzt löst sich das Wortmark heraus. */
#introOverlay{position:fixed;inset:0;z-index:999;background:var(--home-bg-deep);overflow:hidden;display:flex;align-items:center;justify-content:center}
#introOverlay.hidden{display:none}
.boot{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;text-align:left}
.boot-line{
  opacity:0;color:var(--home-ink-soft);font-size:15px;letter-spacing:.02em;
  animation:boot-in .4s ease-out forwards;animation-delay:var(--d,0s);
}
.boot-wordmark{
  margin-top:18px;opacity:0;
  font-family:var(--font-body);font-weight:700;text-transform:uppercase;
  font-size:clamp(38px,7vw,72px);letter-spacing:-.02em;color:var(--home-ink);
  animation:boot-wordmark .6s ease-out forwards;animation-delay:var(--d,0s);
}
.boot-wordmark span{color:var(--home-accent)}
@keyframes boot-in{
  from{opacity:0;transform:translateY(4px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes boot-wordmark{
  from{opacity:0;transform:scale(.96)}
  to{opacity:1;transform:scale(1)}
}
#introOverlay .fade-to-black{position:fixed;inset:0;z-index:1000;background:var(--home-bg-deep);opacity:0;pointer-events:none;transition:opacity .7s ease-in}
#introOverlay .fade-to-black.active{opacity:1}
#introOverlay .skip{position:fixed;bottom:28px;right:28px;z-index:1001;background:transparent;border:1px solid rgba(244,240,232,.22);color:rgba(244,240,232,.65);font-family:var(--font-body);font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:10px 18px;border-radius:999px;cursor:pointer;opacity:0;pointer-events:none;transition:border-color .25s ease,color .25s ease,background .25s ease;animation:skipIn .6s ease-out 1.2s forwards}
#introOverlay .skip:hover{border-color:var(--home-accent);color:#fff;background:rgba(239,125,58,.14)}
@keyframes skipIn{to{opacity:1;pointer-events:auto}}
@media (prefers-reduced-motion: reduce){
  #introOverlay .skip{animation-duration:.01s !important;animation-delay:0s !important}
  .boot-line,.boot-wordmark{animation-duration:.01s !important;animation-delay:0s !important}
}