/* ============================================================
   The FireScore V3 — gemeinsames Stylesheet
   Richtung: Product (FleetOps-Sprache, Brand FireScore)
   Fonts self-hosted, light-only, transform/opacity-Animationen
   ============================================================ */

@font-face{font-family:'Source Serif 4';src:url('assets/fonts/source-serif-4-latin.woff2') format('woff2');font-weight:400 600;font-display:swap;unicode-range:U+0000-00FF,U+2013-2014,U+2018-201E,U+2026}
@font-face{font-family:'Source Serif 4';src:url('assets/fonts/source-serif-4-latin-ext.woff2') format('woff2');font-weight:400 600;font-display:swap;unicode-range:U+0100-02BA,U+1E00-1EFF,U+20AC}

:root{
  --wine:#6B2130; --accent:#B0392A; --ink:#1E1418; --body:#3F3538; --muted:#665B60;
  --paper:#FFFFFF; --soft:#F7F4F1; --dark:#2B1519; --dark-text:#F4F2ED; --dark-muted:#C9B8B6;
  --line:#E4DBD6; --line2:#D2C6C0;
  --z10:#A8322A; --z8:#C97A22; --z5:#C9A227; --z2:#3F7A34;
  --serif:'Source Serif 4',Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-draw:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{font-size:16px}
body{margin:0;background:var(--paper);color:var(--body);font-family:var(--sans);font-size:1.0625rem;line-height:1.65}
a{color:inherit;text-decoration:none}
img{max-width:100%}
:focus-visible{outline:2px solid var(--wine);outline-offset:3px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:12px;background:#fff;padding:8px 14px;z-index:100}
.wrap{max-width:1200px;margin:0 auto;padding:0 40px}
h1,h2,h3{color:var(--ink);margin:0}
h1 em,h2 em{font-family:var(--serif);font-style:italic;font-weight:600;color:var(--accent);letter-spacing:-.01em}
.mono-label{font-family:var(--mono);font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);display:block}
.mono-label b{color:var(--accent);font-weight:400}
.serif-num{font-family:var(--serif);font-weight:600;color:var(--wine)}

/* ---------- Motion-Primitive ---------- */
.motion [data-reveal]{opacity:0;transform:translateY(14px)}
.motion [data-reveal="rule"]{opacity:1;transform:scaleX(0);transform-origin:left center}
.motion [data-reveal="vrule"]{opacity:1;transform:scaleY(0);transform-origin:top center}
.motion [data-reveal="left"]{opacity:0;transform:translateX(-18px)}
.motion [data-reveal="right"]{opacity:0;transform:translateX(18px)}
.motion [data-reveal="pop"]{opacity:0;transform:translateY(18px) scale(.97)}
.motion [data-reveal].is-in{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:var(--d,0ms)}
.motion [data-reveal="rule"].is-in{transition-duration:.64s;transition-timing-function:var(--ease-draw)}
.motion [data-reveal="scale"].is-in{transition-duration:1.1s}
.motion [data-reveal="vrule"].is-in{transition-duration:.5s}
.motion [data-reveal="pop"].is-in{transition-duration:.6s}
[data-count]{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* ---------- Header ---------- */
header{border-bottom:1px solid var(--line);background:rgba(255,255,255,.92);backdrop-filter:blur(8px);position:sticky;top:0;z-index:50}
.nav{display:flex;align-items:center;justify-content:space-between;padding:16px 0;gap:16px}
.nav-links{display:flex;gap:26px;font-size:.9375rem;font-weight:500}
.nav-links a{transition:color .16s}
.nav-links a:hover{color:var(--wine)}
.nav-links a[aria-current]{color:var(--wine);font-weight:700}
.brand{display:flex;align-items:center;gap:10px;font-size:1.0625rem}
.brand b{letter-spacing:.03em}
.brand span span{color:var(--muted)}
.progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none}
.progress i{display:block;height:100%;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--z10),var(--z8),var(--z5),var(--z2))}
.lang{font-family:var(--mono);font-size:.8125rem;color:var(--muted);white-space:nowrap}
.lang b{color:var(--wine)}
.lang a:hover{color:var(--wine)}
.mobile-toggle{display:none;background:none;border:1px solid var(--line);border-radius:6px;padding:8px 12px;font-size:1rem;cursor:pointer;color:var(--ink)}
.mobile-nav{display:none}

/* ---------- Buttons ---------- */
.btn{display:inline-block;background:var(--accent);color:#fff;font-weight:700;font-size:.9375rem;padding:13px 24px;border-radius:6px;transition:background .2s,transform .2s;border:0;cursor:pointer}
.btn:hover{background:#9A2F22;transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn-ghost{display:inline-block;font-weight:700;font-size:.9375rem;padding:12px 24px;border-radius:6px;border:1px solid var(--line2);transition:border-color .2s,transform .2s}
.btn-ghost:hover{border-color:var(--wine);transform:translateY(-1px)}
.cta-row{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.sec-link{font-size:.9375rem;font-weight:700;color:var(--accent)}
.sec-link span{display:inline-block;transition:transform .16s}
.sec-link:hover span{transform:translateX(4px)}
.person-links{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
.person-links .sec-link[target="_blank"]:hover span{transform:translate(2px,-2px)}

/* ---------- Hero (Start) ---------- */
.hero{padding:96px 0 64px;text-align:center}
.hero .mono-label{margin-bottom:26px}
.hero h1{font-size:clamp(3rem,6.8vw,5rem);line-height:1.02;letter-spacing:-.03em;font-weight:800;max-width:900px;margin:0 auto 12px}
.sigline{height:2px;width:min(300px,80%);margin:18px auto 26px;background:linear-gradient(90deg,var(--z10) 0%,var(--z8) 34%,var(--z5) 62%,var(--z2) 100%)}
.hero p{font-size:1.1875rem;max-width:640px;margin:0 auto 40px}
.hero .cta-row{justify-content:center;margin-bottom:72px}

/* ---------- Subpage-Hero ---------- */
.page-hero{padding:80px 0 56px;border-bottom:1px solid var(--line)}
.page-hero h1{font-size:clamp(2.25rem,5vw,3.5rem);line-height:1.06;letter-spacing:-.025em;font-weight:800;max-width:860px;margin:16px 0 0}
.page-hero .lead{font-size:1.1875rem;max-width:680px;margin:22px 0 0}

/* ---------- Produkt-Panel ---------- */
.panel{max-width:1040px;margin:0 auto;border:1px solid var(--line2);border-radius:12px;background:var(--paper);box-shadow:0 24px 60px -24px rgba(43,21,25,.25);overflow:hidden;text-align:left}
.panel-bar{display:flex;align-items:center;gap:8px;padding:12px 18px;border-bottom:1px solid var(--line);background:var(--soft)}
.panel-bar i{width:10px;height:10px;border-radius:50%;background:var(--line2);display:block}
.panel-bar .t{font-family:var(--mono);font-size:.75rem;color:var(--muted);margin-left:10px}
.tabs{display:flex;gap:4px;padding:14px 18px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.tab{font-size:.875rem;font-weight:600;color:var(--muted);padding:10px 16px;border:1px solid transparent;border-bottom:0;border-radius:8px 8px 0 0;cursor:pointer;background:none;font-family:var(--sans);transition:color .16s}
.tab:hover{color:var(--wine)}
.tab[aria-selected="true"]{color:var(--wine);background:var(--paper);border-color:var(--line);position:relative;top:1px}
.tabpane{padding:32px;display:none}
.tabpane.on{display:block}
.motion .tabpane.on{animation:panefade .35s var(--ease)}
@keyframes panefade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pane-note{font-size:.75rem;font-family:var(--mono);color:var(--muted);margin-top:18px}

/* Heatmap */
.hm{display:grid;grid-template-columns:110px 1fr;gap:10px 14px;align-items:center}
.hm .rowlab{font-family:var(--mono);font-size:.75rem;color:var(--muted);text-align:right}
.hm .cells{display:grid;grid-template-columns:repeat(30,1fr);gap:3px}
.hm .cells i{aspect-ratio:1;background:var(--zc,#E8E1DC);display:block;border-radius:2px}
.motion .hm:not(.is-in) .cells i{background:#E8E1DC}
.motion .hm.is-in .cells i{background:#E8E1DC;animation:cellin .4s ease-out forwards;animation-delay:calc(var(--i)*5ms)}
@keyframes cellin{to{background:var(--zc)}}
html:not(.motion) .hm .cells i{background:var(--zc)}
@media (prefers-reduced-motion:reduce){.hm .cells i{background:var(--zc)!important;animation:none!important}}
.hm-legend{display:flex;gap:18px;margin-top:20px;flex-wrap:wrap}
.hm-legend span{font-size:.8125rem;color:var(--muted);display:flex;align-items:center;gap:7px}
.hm-legend i{width:10px;height:10px;border-radius:2px;display:inline-block}

/* Skala */
.scale{display:flex;height:8px;border-radius:4px;overflow:hidden}
.scale div{flex:1}
.zone-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:24px}
.zone .num{font-family:var(--serif);font-size:1.75rem;font-weight:600}
.zone .t{font-size:.9375rem;font-weight:700;color:var(--wine);margin:8px 0 6px}
.zone .d{font-size:.875rem;color:var(--muted);line-height:1.55}
.zone-fazit{margin-top:22px;font-size:.9375rem}
.zone-fazit b{color:var(--wine)}
.zone-wrap{position:relative}
.threshold{position:absolute;left:50%;top:8px;bottom:0;width:1px;background:var(--ink);opacity:.4}

/* Selbsttest */
.st{display:grid;grid-template-columns:1.2fr .8fr;gap:44px;align-items:start}
.st-row{display:grid;grid-template-columns:44px 1fr 40px;gap:14px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line)}
.st-row:last-child{border-bottom:0}
.st-row .ltr{font-family:var(--serif);font-size:1.625rem;font-weight:600;color:var(--accent)}
.st-row label{font-size:.875rem;color:var(--body);display:block;margin-bottom:8px;line-height:1.4}
.st-row input[type=range]{width:100%;accent-color:var(--wine)}
.st-row output{font-family:var(--mono);font-size:1rem;color:var(--ink);text-align:right}
.st-result{background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:28px;text-align:center}
.st-result .mono-label{margin-bottom:16px}
.st-score{font-family:var(--serif);font-size:4rem;font-weight:600;color:var(--wine);line-height:1;font-variant-numeric:tabular-nums}
.st-bar{display:flex;height:6px;border-radius:3px;overflow:hidden;margin:22px 0 8px;position:relative}
.st-bar div{flex:1}
.st-marker{position:absolute;top:-5px;width:2px;height:16px;background:var(--ink);transition:left .25s var(--ease)}
.st-zone{font-size:1rem;font-weight:700;color:var(--wine);margin-top:14px}
.st-hint{font-size:.75rem;font-family:var(--mono);color:var(--muted);margin-top:18px}
.anchor-hint{display:block;font-size:.8125rem;font-style:italic;color:var(--muted);margin-top:6px;min-height:2.4em}
.st-zonetext{font-size:.875rem;color:var(--muted);line-height:1.55;margin:10px 0 0}

/* ---------- Sektionen ---------- */
.section{padding:96px 0}
.section.alt{background:var(--soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section.alt+.section.alt{border-top:0}
.sec-head{margin-bottom:52px;max-width:780px}
.sec-head h2{font-size:clamp(1.875rem,3.4vw,2.625rem);line-height:1.12;letter-spacing:-.02em;font-weight:800;margin:16px 0 0}
.sec-head .lead{margin:18px 0 0;max-width:680px}

.feat{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.fcard{border:1px solid var(--line);border-radius:10px;padding:28px;background:var(--paper);transition:transform .2s,border-color .2s,box-shadow .2s}
.fcard:hover{transform:translateY(-3px);border-color:var(--line2);box-shadow:0 12px 28px -16px rgba(43,21,25,.25)}
.fcard .ltr{font-family:var(--serif);font-size:2.25rem;font-weight:600;color:var(--accent);line-height:1}
.fcard h3{font-size:1.0625rem;margin:16px 0 8px}
.fcard p{font-size:.9375rem;color:var(--muted);line-height:1.55;margin:0}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;padding:72px 0;border-top:1px solid var(--line)}
.stat .rule{height:2px;background:var(--wine);margin-bottom:20px}
.stat .num{font-family:var(--serif);font-size:3.25rem;font-weight:600;color:var(--wine);line-height:1;font-variant-numeric:tabular-nums}
.stat .lbl{font-size:.875rem;color:var(--muted);margin-top:10px;line-height:1.5}

.quoteband{background:var(--dark);color:var(--dark-text);padding:96px 0}
.quoteband .mono-label{color:#B5A2A0}
.quoteband blockquote{font-family:var(--serif);font-size:clamp(1.625rem,3vw,2.25rem);line-height:1.35;font-style:italic;font-weight:400;max-width:900px;margin:22px 0 0;quotes:'\201E' '\201C'}
.quoteband blockquote::before{content:open-quote}
.quoteband blockquote::after{content:close-quote}
.quoteband .attrib{font-family:var(--mono);font-size:.8125rem;color:#B5A2A0;margin-top:22px}

.split{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.split h2{font-size:clamp(1.75rem,3vw,2.375rem);line-height:1.15;letter-spacing:-.02em;font-weight:800;margin:14px 0 18px}
.split p{margin:0 0 22px}
.split .img{border-radius:12px;overflow:hidden;border:1px solid var(--line2);background:#fff}
.split img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3;transition:transform .5s var(--ease)}
.split .img:hover img{transform:scale(1.025)}

/* Glut-Aufglimmen (einmalig) */
.glow{position:relative;overflow:hidden}
.glow img{display:block;width:100%;height:100%;object-fit:cover}
.glow .veil{position:absolute;inset:0;background:var(--dark);opacity:0;pointer-events:none}
.motion .glow.pre img{transform:scale(1.04)}
.motion .glow.pre .veil{opacity:.55}
.motion .glow.lit img{transform:scale(1);transition:transform 1.4s var(--ease-draw)}
.motion .glow.lit .veil{opacity:0;transition:opacity .9s ease-out}

/* ---------- Prosa / Artikel (Methode, Case Study, Über uns) ---------- */
.prose{max-width:760px}
.prose h2{font-size:clamp(1.625rem,2.8vw,2.125rem);line-height:1.18;letter-spacing:-.015em;font-weight:800;margin:64px 0 18px}
.prose h3{font-size:1.1875rem;font-weight:700;margin:40px 0 12px}
.prose p{margin:0 0 20px}
.prose ul,.prose ol{margin:0 0 20px;padding-left:24px}
.prose li{margin-bottom:8px}
.prose blockquote{font-family:var(--serif);font-style:italic;font-size:1.25rem;line-height:1.5;color:var(--wine);border-left:2px solid var(--wine);margin:28px 0;padding:4px 0 4px 24px}
.prose strong{color:var(--ink)}

/* Timeline (Ablauf) */
.timeline{position:relative;padding-left:36px;max-width:760px}
.timeline::before{content:'';position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:var(--line2)}
.motion .timeline::before{transform:scaleY(0);transform-origin:top}
.motion .timeline.is-in::before{transform:scaleY(1);transition:transform 1.2s var(--ease-draw)}
.tl-step{position:relative;padding-bottom:36px}
.tl-step:last-child{padding-bottom:0}
.tl-step::before{content:'';position:absolute;left:-34px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--paper);border:2px solid var(--accent)}
.tl-step .mono-label{margin-bottom:6px}
.tl-step h3{font-size:1.125rem;margin:0 0 8px}
.tl-step p{margin:0;color:var(--muted);font-size:.9855rem}

/* Governance-Kasten: bewusst ohne Animation */
.gov{border:1px solid var(--line2);border-radius:10px;background:var(--soft);padding:36px;max-width:860px}
.gov h2,.gov h3{margin-top:0}
.gov ul{margin:16px 0 0;padding-left:22px}
.gov li{margin-bottom:10px}

/* Einwände */
.einwand{border-top:1px solid var(--line);padding:28px 0;max-width:820px}
.einwand:last-child{border-bottom:1px solid var(--line)}
.einwand h3{font-size:1.0625rem;margin:0 0 10px;color:var(--wine)}
.einwand p{margin:0;color:var(--body)}

/* ---------- Kontakt ---------- */
.kontakt-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:52px}
.kcard{border:1px solid var(--line);border-radius:10px;padding:28px;background:var(--paper)}
.kcard h3{font-size:1rem;margin:12px 0 12px}
.kcard ul{margin:0;padding-left:18px;font-size:.9375rem;color:var(--muted)}
.kcard li{margin-bottom:8px}
.mailbox{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:44px;text-align:center;margin-top:64px}
.mailbox h2{font-size:1.75rem;font-weight:800;margin:0 0 12px}
.mailbox p{max-width:560px;margin:0 auto 26px}

/* ---------- Rechtstexte ---------- */
.legal{max-width:720px;padding:64px 0 96px}
.legal h1{font-size:2.25rem;letter-spacing:-.02em;font-weight:800;margin:16px 0 32px}
.legal h2{font-size:1.25rem;font-weight:700;margin:36px 0 12px}
.legal p{margin:0 0 16px}
.legal .stand{font-family:var(--mono);font-size:.8125rem;color:var(--muted);margin-top:40px}

/* Porträts schwarz-weiß (Entscheidung 08.08.) */
.person img{filter:grayscale(1)}

/* ---------- Finale CTA ---------- */
.cta-final{text-align:center;padding:110px 0}
.cta-final h2{font-size:clamp(2rem,4.4vw,3.25rem);letter-spacing:-.025em;font-weight:800;max-width:760px;margin:16px auto 20px}
.cta-final p{max-width:560px;margin:0 auto 36px}
.cta-final .cta-row{justify-content:center}

/* ---------- Footer ---------- */
footer{background:#1C0E11;color:var(--dark-muted);font-size:.875rem}
footer .grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px;padding:56px 0 40px}
footer .h{font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:#B5A2A0;margin-bottom:14px}
footer .col a{display:block;padding:5px 0;transition:color .16s}
footer .col a:hover{color:var(--dark-text)}
footer .bar{border-top:1px solid rgba(244,242,237,.14);padding:22px 0;display:flex;justify-content:space-between;font-size:.8125rem;color:#B5A2A0;flex-wrap:wrap;gap:8px}
footer .fbrand{color:var(--dark-text);font-size:1rem;margin-bottom:14px;display:flex;gap:10px;align-items:center}

/* ---------- Druck ---------- */
@media print{
  header,.progress,footer .col,.cta-final,.mobile-toggle{display:none}
  body{background:#fff;color:#000}
  main a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em;color:#555}
  [data-reveal]{opacity:1!important;transform:none!important}
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .wrap{padding:0 22px}
  .nav-links{display:none}
  .mobile-toggle{display:block}
  .mobile-nav.open{display:block;position:absolute;top:100%;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--line);padding:8px 22px 16px;z-index:49}
  .mobile-nav.open a{display:block;padding:12px 0;border-bottom:1px solid var(--line);font-size:1rem}
  .mobile-nav.open a:last-child{border-bottom:0}
  .hero{padding:60px 0 44px}
  .st,.split{grid-template-columns:1fr;gap:32px}
  .feat,.kontakt-grid{grid-template-columns:1fr 1fr;gap:16px}
  .stats{grid-template-columns:1fr 1fr;gap:32px}
  .zone-grid{grid-template-columns:1fr 1fr}
  .hm{grid-template-columns:70px 1fr}
  .hm .cells{grid-template-columns:repeat(18,1fr)}
  footer .grid{grid-template-columns:1fr 1fr}
  .tabpane{padding:20px}
  /* Die Schwellenlinie markiert die Grenze zwischen Spalte 2 und 3 des
     vierspaltigen Rasters. Sobald das Raster umbricht, steht sie quer im
     Text und bedeutet nichts mehr. Der Fazitsatz sagt dasselbe in Worten. */
  .threshold{display:none}
  /* Der Erstgespraech-Knopf sprengt sonst die Kopfzeile. */
  header .btn{padding:11px 16px;font-size:.875rem}
  .gov{padding:24px}
  .mailbox{padding:28px}
}
@media (max-width:620px){
  /* Auf schmalen Geraeten passen Marke, Sprachschalter, Menue und Knopf
     nicht nebeneinander. Der Knopf entfaellt, die Seite hat eigene
     Handlungsaufforderungen. */
  header .btn{display:none}
}
@media (max-width:560px){
  .feat,.kontakt-grid,.stats,.zone-grid{grid-template-columns:1fr}
  footer .grid{grid-template-columns:1fr}
}