/* ============================================================
   Wegener Härtetechnik — Design Layer "Molten Steel"
   Graphit + Hitze-Ember-Glow, Blau = Abschreckung.
   Lädt NACH tailwind.min.css und veredelt die bestehenden Klassen.
   ============================================================ */

:root{
  --graphite-950:#0a0d12;
  --graphite-900:#0e131a;
  --graphite-850:#141b24;
  --graphite-800:#1b2430;
  --steel-100:#eef2f7;
  --steel-300:#c2ccd9;

  --blue:#1590D4;        /* Abschreckung / Quench */
  --blue-deep:#0d6eaa;

  --ember-1:#ffd15c;     /* Gold */
  --ember-2:#ff9a2e;     /* Amber */
  --ember-3:#ff5f16;     /* Orange */
  --ember-4:#e23c07;     /* glühendes Rot */

  --heat: linear-gradient(90deg,#ffd15c 0%,#ff9a2e 40%,#ff5f16 75%,#e23c07 100%);
  --heat-v: linear-gradient(180deg,#ffd15c 0%,#ff7a1c 55%,#e23c07 100%);
  --heat-diag: linear-gradient(120deg,#ffb43a 0%,#ff5f16 55%,#d63305 100%);

  --ff-display:'Anton', system-ui, sans-serif;
  --ff-head:'Oswald', system-ui, sans-serif;
  --ff-body:'Manrope', system-ui, sans-serif;
}

/* ---------- Typografie ---------- */
body{ font-family:var(--ff-body); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

h1,h2,h3,h4,h5,h6{
  font-family:var(--ff-head);
  font-style:normal !important;        /* raus aus dem "italic-Sport-Look" */
  font-weight:600 !important;
  letter-spacing:.005em;
  line-height:1.05;
}
/* Große Aussage-Headlines dürfen fetter/condenser wirken */
.h-hero, .h-display{
  font-family:var(--ff-display) !important;
  font-weight:400 !important;
  letter-spacing:.005em;
  line-height:.94;
}

::selection{ background:var(--ember-3); color:#fff; }
html{ scrollbar-color:var(--ember-3) transparent; }

/* ---------- Grain- & Ambient-Overlay (global, dezent) ---------- */
body::after{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Eyebrow / Section-Label ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--ff-head); font-weight:600; text-transform:uppercase;
  letter-spacing:.28em; font-size:.72rem; color:var(--blue);
}
.eyebrow::before{ content:""; width:34px; height:3px; background:var(--heat); border-radius:2px; }
.eyebrow.on-dark{ color:var(--ember-2); }

/* Hitze-Balken (ersetzt/ergänzt die farbigen Blöcke) */
.heat-bar{ height:6px; width:88px; background:var(--heat); border-radius:3px; box-shadow:0 0 18px -2px rgba(255,95,22,.6); }

/* ---------- Buttons ---------- */
.btn-kantig{
  font-family:var(--ff-head); font-weight:600; letter-spacing:.03em; text-transform:uppercase;
  position:relative; transition:transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s, background-color .22s, color .22s;
}
.btn-kantig:hover{ transform:translateY(-3px); }
/* Primär (Blau) glüht bei Hover heiß auf */
.bg-\[\#1590D4\].btn-kantig:hover,
.bg-\[\#1E293B\].btn-kantig:hover{
  box-shadow:0 14px 34px -10px rgba(255,95,22,.55), 0 8px 20px -8px rgba(0,0,0,.5);
}
.btn-heat{
  background:var(--heat-diag) !important; color:#1a0a02 !important; border:none !important;
  box-shadow:0 10px 26px -10px rgba(255,95,22,.6);
}
.btn-heat:hover{ box-shadow:0 18px 42px -12px rgba(255,95,22,.75); filter:brightness(1.04); }

/* ---------- Karten ---------- */
.kantig-card{ position:relative; isolation:isolate; }
.kantig-card::after{
  content:""; position:absolute; inset:0; z-index:-1; opacity:0; transition:opacity .35s;
  background:radial-gradient(120% 80% at 50% -10%, rgba(255,95,22,.16), transparent 60%);
}
.kantig-card:hover{ box-shadow:0 30px 60px -28px rgba(8,11,16,.55) !important; }
.kantig-card:hover::after{ opacity:1; }

/* ---------- Hero ---------- */
.hero-overlay{
  background:
    radial-gradient(120% 95% at 12% 18%, rgba(255,95,22,.30), transparent 52%),
    radial-gradient(90% 80% at 92% 90%, rgba(21,144,212,.30), transparent 55%),
    linear-gradient(115deg, rgba(8,11,16,.94) 0%, rgba(10,14,20,.78) 42%, rgba(10,14,20,.55) 100%) !important;
}
/* pulsierender Ofen-Glow hinter dem Hero-Text */
.heat-glow{
  position:absolute; z-index:5; pointer-events:none; width:60vw; max-width:820px; aspect-ratio:1;
  left:-8vw; top:20%; border-radius:50%;
  background:radial-gradient(circle, rgba(255,120,30,.42), rgba(255,95,22,.14) 45%, transparent 70%);
  filter:blur(20px); animation:emberPulse 5.5s ease-in-out infinite;
}
@keyframes emberPulse{ 0%,100%{ opacity:.7; transform:scale(1); } 50%{ opacity:1; transform:scale(1.08); } }

/* Glühende Kante am oberen Rand dunkler Sektionen */
.section-dark{ position:relative; background:var(--graphite-900) !important; }
.section-dark::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--heat); opacity:.85;
  box-shadow:0 0 24px 2px rgba(255,95,22,.5);
}
.section-dark::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(80% 120% at 85% 10%, rgba(255,95,22,.10), transparent 55%);
}

/* ---------- Reveal (weicher) ---------- */
.reveal{ transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.stagger-reveal.active > *{ transition-delay:calc(var(--i, 0) * 90ms); }

/* Kleine Spec-Chips im Hero */
.spec-chip{ font-family:var(--ff-head); font-weight:500; letter-spacing:.05em; }
.spec-chip b{ font-family:var(--ff-display); font-weight:400; color:#fff; }

/* Scroll-Cue */
.scroll-cue{ animation:cueBob 2s ease-in-out infinite; }
@keyframes cueBob{ 0%,100%{ transform:translateY(0); opacity:.6 } 50%{ transform:translateY(8px); opacity:1 } }

/* ============================================================
   STORYTELLING — Der Härteprozess (WOW-Herzstück)
   ============================================================ */
.prozess{ position:relative; background:
    radial-gradient(90% 60% at 80% 0%, rgba(255,95,22,.12), transparent 55%),
    var(--graphite-950); overflow:hidden; }
.prozess::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--heat);
  box-shadow:0 0 26px 2px rgba(255,95,22,.5);
}
/* vertikale Fortschritts-Achse */
.timeline{ position:relative; }
.timeline .rail{ position:absolute; left:32px; top:0; bottom:0; width:4px; background:rgba(255,255,255,.08); border-radius:3px; }
.timeline .rail-fill{
  position:absolute; left:32px; top:0; width:4px; height:0; border-radius:3px;
  background:linear-gradient(180deg,#ffd15c,#ff7a1c 45%,#ff3d0a 72%,#1590D4 100%);
  box-shadow:0 0 22px 1px rgba(255,95,22,.55); transition:height 1.1s cubic-bezier(.2,.7,.2,1);
}
@media(min-width:1024px){
  .timeline .rail, .timeline .rail-fill{ left:50%; transform:translateX(-50%); }
}
.step{ position:relative; padding-left:84px; }
@media(min-width:1024px){ .step{ padding-left:0; } }
.step-node{
  position:absolute; left:12px; top:2px; width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  font-family:var(--ff-display); color:#fff; background:var(--graphite-800);
  clip-path:polygon(12% 0,100% 0,88% 100%,0 100%);
  border:1px solid rgba(255,255,255,.12); transition:all .5s; z-index:2;
}
@media(min-width:1024px){ .step-node{ left:50%; transform:translateX(-50%); } }
.step.lit .step-node{
  background:var(--heat-diag); color:#180a02; border-color:transparent;
  box-shadow:0 0 30px -2px rgba(255,95,22,.8); transform:scale(1.06);
}
@media(min-width:1024px){ .step.lit .step-node{ transform:translateX(-50%) scale(1.06); } }
.step.quench .step-node{ background:linear-gradient(120deg,#3fb2f2,#0d6eaa); color:#03202f; box-shadow:0 0 30px -2px rgba(21,144,212,.8); }
.step-card{
  background:linear-gradient(180deg,var(--graphite-850),var(--graphite-900));
  border:1px solid rgba(255,255,255,.07); padding:1.6rem 1.8rem;
  clip-path:polygon(0 0,100% 0,100% 92%,2% 100%);
  transition:transform .5s, border-color .5s, box-shadow .5s; opacity:.55;
}
.step.lit .step-card{ opacity:1; border-color:rgba(255,95,22,.35); box-shadow:0 30px 60px -34px rgba(255,95,22,.4); }
.step.quench.lit .step-card{ border-color:rgba(21,144,212,.4); box-shadow:0 30px 60px -34px rgba(21,144,212,.4); }
.step-temp{ font-family:var(--ff-display); color:var(--ember-2); letter-spacing:.02em; }
.step.quench .step-temp{ color:#4db6ee; }

/* ============================================================
   KENNZAHLEN — Counter-Strip
   ============================================================ */
.stat-num{ font-family:var(--ff-display); font-weight:400; line-height:1;
  background:var(--heat); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.stat-num.quench{ background:linear-gradient(120deg,#5cc0f5,#0d6eaa); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }