/* ============================================================
   IRONCLOSING · Design-System
   Ein Werkstoff: dunkles Eisen. Ein Licht: Smaragd.
   Ein Funke: Messing — sparsam, nur wo es heiß wird.

   Alle drei Seiten (index, bewerbung, danke) hängen hier dran.
   Keine Abhängigkeiten, kein Build. Nur diese Datei.
   ============================================================ */

/* ---------- 1 · Marken-Werte ------------------------------ */
:root{
  color-scheme:dark;

  /* Eisen — von tief nach hell */
  --void:#070a09;
  --iron:#0c100f;
  --iron-2:#111716;
  --iron-3:#171f1d;
  --iron-4:#1e2725;

  /* Kanten. Hauchdünn, sonst wird die Seite laut. */
  --edge:rgba(233,241,237,.075);
  --edge-2:rgba(233,241,237,.13);
  --edge-3:rgba(233,241,237,.22);

  /* Schrift */
  --chalk:#e9f1ed;
  --chalk-2:#c3cfca;
  --smoke:#8b9a94;
  --smoke-2:#68766f;

  /* Smaragd — die Marke */
  --em:#2fd39a;
  --em-2:#19b383;
  --em-3:#0f8a64;
  --em-deep:#0b6b53;
  --em-ghost:rgba(47,211,154,.10);
  --em-ghost-2:rgba(47,211,154,.18);

  /* Messing — nur für Hitze */
  --heat:#e0a75e;
  --heat-2:#ff9d54;

  --warn:#ff8a7a;

  /* Schriften */
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --sans:'Inter Tight',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Maße */
  --breit:1240px;
  --schmal:760px;
  --rand:clamp(20px,5vw,64px);

  --r-s:10px;
  --r:14px;
  --r-l:22px;
  --r-xl:34px;

  /* Licht */
  --schein:0 0 0 1px var(--edge), 0 30px 70px -40px rgba(0,0,0,.9);
  --schein-hoch:0 0 0 1px var(--edge-2), 0 2px 6px rgba(0,0,0,.5), 0 40px 90px -50px rgba(0,0,0,1);
  --glut:0 0 24px -6px rgba(47,211,154,.5), 0 18px 40px -18px rgba(47,211,154,.42);
  --glut-hoch:0 0 34px -4px rgba(47,211,154,.62), 0 24px 52px -20px rgba(47,211,154,.55);

  /* Korn — feines Rauschen, damit nichts nach Plastik aussieht */
  --korn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

/* ---------- 2 · Grundlage --------------------------------- */
*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:96px;
}

body{
  margin:0;
  background:var(--void);
  color:var(--chalk);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.62;
  font-feature-settings:"cv05" 1,"ss03" 1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  /* Deutsche Komposita („Gesprächsstruktur“) sonst über den Rand. */
  overflow-wrap:break-word;
}

/* iOS legt beim Antippen sonst einen grauen Kasten über das Element. */
a,button,summary,label,input[type=range]{-webkit-tap-highlight-color:transparent}

/* Das Korn liegt über allem, reagiert auf nichts. */
body::after{
  content:"";
  position:fixed;
  inset:-50%;
  background-image:var(--korn);
  opacity:.028;
  pointer-events:none;
  z-index:9999;
  mix-blend-mode:overlay;
}

img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}

:focus-visible{
  outline:2px solid var(--em);
  outline-offset:3px;
  border-radius:4px;
}

::selection{background:rgba(47,211,154,.28);color:#fff}

/* Bildlaufleiste — auch das ist Oberfläche */
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--void)}
::-webkit-scrollbar-thumb{
  background:var(--iron-4);
  border-radius:99px;
  border:3px solid var(--void);
}
::-webkit-scrollbar-thumb:hover{background:#2c3a36}

/* ---------- 3 · Typografie -------------------------------- */
h1,h2,h3,h4{margin:0;font-weight:400;letter-spacing:-.02em}

.display{
  font-family:var(--serif);
  font-weight:400;
  line-height:.96;
  letter-spacing:-.025em;
  /* Aus Metall gefräst: Lichtkante oben, Schatten unten.
     Die Kachel ist genau eine Zeile hoch und wiederholt sich —
     sonst bekäme die zweite Zeile nur noch den Schatten und die
     Überschrift läse sich grau statt hell. */
  background-image:linear-gradient(176deg,#ffffff 0%,#f4f8f6 46%,#c2d0ca 100%);
  background-size:100% .96em;
  background-repeat:repeat-y;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 1px 0 rgba(0,0,0,.35);
  text-wrap:balance;
}
.display em{
  font-style:italic;
  background-image:linear-gradient(176deg,#a6f2d5 0%,var(--em) 58%,var(--em-3) 100%);
  background-size:100% .96em;
  background-repeat:repeat-y;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.d-xxl{font-size:clamp(3.1rem,8.4vw,6.6rem)}
.d-xl{font-size:clamp(2.6rem,6.2vw,4.75rem)}
.d-l{font-size:clamp(2.1rem,4.4vw,3.4rem)}
.d-m{font-size:clamp(1.6rem,3vw,2.3rem)}

.lauf{
  font-family:var(--mono);
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--smoke);
}
.lauf-em{color:var(--em)}

p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

.fuehrung{
  font-size:clamp(1.06rem,1.55vw,1.24rem);
  line-height:1.66;
  color:var(--chalk-2);
  text-wrap:pretty;
}
.leise{color:var(--smoke)}
.leiser{color:var(--smoke-2);font-size:.9rem;line-height:1.55}

/* ---------- 4 · Bahn und Raster --------------------------- */
.bahn{
  width:min(var(--breit),100%);
  margin-inline:auto;
  padding-inline:var(--rand);
}
.bahn-schmal{
  width:min(var(--schmal),100%);
  margin-inline:auto;
  padding-inline:var(--rand);
}

section{position:relative}

.feld{padding-block:clamp(76px,11vw,148px)}
.feld-eng{padding-block:clamp(56px,7vw,92px)}

/* Haarlinie zwischen den Feldern — statt Kästen überall */
.naht{border-top:1px solid var(--edge)}

/* Abschnittskopf: Mono-Ziffer, Linie, Titel. Ein wiederkehrender Takt. */
.kopf{margin-bottom:clamp(38px,5vw,64px)}
.kopf-zeile{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:22px;
}
.kopf-zeile::after{
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(90deg,var(--edge-2),transparent);
}

/* ---------- 5 · Oberflächen ------------------------------- */
.platte{
  position:relative;
  background:linear-gradient(168deg,var(--iron-2),var(--iron));
  border:1px solid var(--edge);
  border-radius:var(--r-l);
  box-shadow:var(--schein);
}

/* Geschmiedet: eine Lichtkante oben, ein langsamer Schimmer darüber. */
.geschmiedet{position:relative;overflow:hidden;isolation:isolate}
.geschmiedet::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--edge-3) 22%,rgba(255,255,255,.34) 50%,var(--edge-3) 78%,transparent);
  z-index:2;
}
.geschmiedet::after{
  content:"";
  position:absolute;
  inset:-60%;
  background:linear-gradient(112deg,
    transparent 34%,
    rgba(255,255,255,.028) 44%,
    rgba(255,255,255,.075) 50%,
    rgba(255,255,255,.028) 56%,
    transparent 66%);
  background-size:280% 280%;
  animation:schimmer 14s linear infinite;
  pointer-events:none;
  z-index:1;
}
@keyframes schimmer{
  0%{background-position:130% 0}
  100%{background-position:-30% 0}
}

/* ---------- 6 · Knöpfe ------------------------------------ */
.knopf{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  padding:17px 30px;
  border:0;
  border-radius:999px;
  font-family:var(--sans);
  font-size:1.005rem;
  font-weight:600;
  letter-spacing:-.008em;
  cursor:pointer;
  overflow:hidden;
  isolation:isolate;
  text-align:center;
  transition:transform .28s cubic-bezier(.22,1,.36,1),
             box-shadow .28s cubic-bezier(.22,1,.36,1),
             background-color .28s ease,
             border-color .28s ease;
}
.knopf:active{transform:translateY(1px) scale(.995)}

.knopf-haupt{
  background:linear-gradient(178deg,var(--em),var(--em-2) 55%,var(--em-3));
  color:#04231a;
  box-shadow:var(--glut);
}
/* Der Streiflicht-Zug beim Überfahren */
.knopf-haupt::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);
  transform:translateX(-115%);
  transition:transform .72s cubic-bezier(.22,1,.36,1);
  z-index:-1;
}
.knopf-haupt:hover{transform:translateY(-2px);box-shadow:var(--glut-hoch)}
.knopf-haupt:hover::before{transform:translateX(115%)}

.knopf-geist{
  background:rgba(233,241,237,.03);
  color:var(--chalk);
  border:1px solid var(--edge-2);
  backdrop-filter:blur(6px);
}
.knopf-geist:hover{
  background:rgba(233,241,237,.07);
  border-color:var(--edge-3);
  transform:translateY(-2px);
}

.knopf-breit{width:100%}
.knopf-klein{padding:12px 22px;font-size:.92rem}

.knopf .pfeil{transition:transform .3s cubic-bezier(.22,1,.36,1)}
.knopf:hover .pfeil{transform:translateX(4px)}

/* Pfeile links und rechts vom Wort, wenn der Knopf nicht auf eine andere
   Seite führt, sondern weiter nach unten. Sie ziehen deshalb beim
   Überfahren nach unten statt nach rechts. */
.knopf .pfeil-runter{transition:transform .3s cubic-bezier(.22,1,.36,1)}
.knopf:hover .pfeil-runter{transform:translateY(3px)}

/* Kleinzeile unter einem Knopf */
.unterschrift{
  margin-top:14px;
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--smoke-2);
}

/* ---------- 7 · Marke ------------------------------------- */
.marke{display:inline-flex;align-items:center;gap:11px}
.marke-mal{
  width:28px;
  height:28px;
  flex:none;
  /* Ein schwacher smaragdener Schein hinter dem silbernen
     Monogramm — sonst steht es auf dem dunklen Grund tot da. */
  filter:drop-shadow(0 0 12px rgba(47,211,154,.34));
}
/* In der Fußzeile nimmt sich die Marke zurück. */
.marke-leise .marke-mal{filter:none;opacity:.62}
.marke-leise .marke-wort{color:var(--smoke)}
.marke-leise .marke-wort b{color:var(--em-3)}
.marke-wort{
  font-family:var(--sans);
  font-size:.95rem;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--chalk);
}
.marke-wort b{font-weight:600;color:var(--em)}

/* ---------- 8 · Kopfleiste -------------------------------- */
.kopfleiste{
  position:fixed;
  inset:0 0 auto;
  z-index:100;
  transition:background-color .4s ease,border-color .4s ease,backdrop-filter .4s ease;
  border-bottom:1px solid transparent;
}
.kopfleiste.fest{
  background:rgba(7,10,9,.72);
  backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--edge);
}
.kopfleiste-innen{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  height:74px;
}
.kopf-navi{
  display:none;
  gap:30px;
  font-size:.92rem;
  color:var(--smoke);
}
.kopf-navi a{position:relative;padding-block:6px;transition:color .25s ease}
.kopf-navi a::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:1px;
  background:var(--em);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .34s cubic-bezier(.22,1,.36,1);
}
.kopf-navi a:hover{color:var(--chalk)}
.kopf-navi a:hover::after{transform:scaleX(1)}
@media (min-width:920px){.kopf-navi{display:flex}}
/* Auf schmalen Geräten darf die Leiste flacher sein. */
@media (max-width:620px){
  .kopfleiste-innen{height:62px}
}

/* ---------- 9 · Einblenden beim Scrollen ------------------ */
[data-auf]{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .82s cubic-bezier(.22,1,.36,1),transform .82s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--verzug,0ms);
  will-change:opacity,transform;
}
[data-auf].da{opacity:1;transform:none}

/* ---------- 10 · Kleinteile ------------------------------- */
.marke-punkt{
  display:inline-block;
  width:6px;height:6px;
  border-radius:99px;
  background:var(--em);
  box-shadow:0 0 12px var(--em);
  animation:pulsen 2.6s ease-in-out infinite;
}
@keyframes pulsen{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.45;transform:scale(.78)}
}

.schild{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:8px 16px 8px 13px;
  border:1px solid var(--edge-2);
  border-radius:999px;
  background:rgba(233,241,237,.028);
  backdrop-filter:blur(8px);
  font-family:var(--mono);
  font-size:.685rem;
  font-weight:500;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--chalk-2);
}

.ziffer{
  font-family:var(--mono);
  font-weight:500;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
}

/* ---------- 11 · Schieberegler ----------------------------
   Steht hier und nicht bei der Startseite, weil der Fragebogen
   denselben Regler für die Skala 1–10 benutzt.
   Die gefüllte Spur kommt aus --f (0–100), das JS setzt.       */
input[type=range]{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:26px;
  background:transparent;
  cursor:pointer;
  display:block;
}
input[type=range]::-webkit-slider-runnable-track{
  height:3px;
  border-radius:99px;
  background:linear-gradient(90deg,
    var(--em) 0%, var(--em) calc(var(--f,50) * 1%),
    var(--iron-4) calc(var(--f,50) * 1%), var(--iron-4) 100%);
}
input[type=range]::-moz-range-track{height:3px;border-radius:99px;background:var(--iron-4)}
input[type=range]::-moz-range-progress{height:3px;border-radius:99px;background:var(--em)}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:20px;height:20px;
  margin-top:-8.5px;
  border-radius:999px;
  background:linear-gradient(180deg,#f4fffa,var(--em));
  border:1px solid rgba(255,255,255,.4);
  box-shadow:0 0 0 5px rgba(47,211,154,.12), 0 4px 14px rgba(0,0,0,.6);
  transition:box-shadow .25s ease,transform .18s ease;
}
input[type=range]:hover::-webkit-slider-thumb{box-shadow:0 0 0 8px rgba(47,211,154,.16), 0 4px 16px rgba(0,0,0,.6)}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.14)}
/* Der Rahmen gehört an den Griff, nicht um die ganze Spur —
   sonst liegt bei Tastaturbedienung ein Kasten über dem Regler. */
input[type=range]:focus-visible{outline:none}
input[type=range]:focus-visible::-webkit-slider-thumb{
  box-shadow:0 0 0 3px var(--void), 0 0 0 6px var(--em), 0 4px 14px rgba(0,0,0,.6);
}
input[type=range]:focus-visible::-moz-range-thumb{
  box-shadow:0 0 0 3px var(--void), 0 0 0 6px var(--em);
}
input[type=range]::-moz-range-thumb{
  width:19px;height:19px;
  border-radius:999px;
  background:linear-gradient(180deg,#f4fffa,var(--em));
  border:1px solid rgba(255,255,255,.4);
  box-shadow:0 0 0 5px rgba(47,211,154,.12);
}

/* Am Finger braucht der Griff mehr Fläche als an der Maus. Die Spur
   bleibt gleich dünn — nur der greifbare Bereich wächst. */
@media (pointer:coarse){
  input[type=range]{height:44px}
  input[type=range]::-webkit-slider-thumb{width:24px;height:24px;margin-top:-10.5px}
  input[type=range]::-moz-range-thumb{width:23px;height:23px}

  /* Textlinks in den Fußzeilen sind am Finger sonst nur 13 Pixel hoch.
     Der Abstand vergrößert nur die Trefferfläche, nicht die Schrift. */
  .fuss-links a,
  .fuss-zeile a,
  .b-fuss-innen a,
  .d-fuss-innen a{display:inline-block;padding-block:9px}
  .marke{padding-block:5px}
}

/* ---------- 12 · Fußzeile --------------------------------- */
.fuss{
  border-top:1px solid var(--edge);
  background:var(--iron);
  padding-block:56px 40px;
}
.fuss-raster{
  display:flex;
  flex-wrap:wrap;
  gap:28px;
  align-items:flex-start;
  justify-content:space-between;
  padding-bottom:34px;
  border-bottom:1px solid var(--edge);
}
.fuss-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px 26px;
  font-size:.9rem;
  color:var(--smoke);
}
.fuss-links a{transition:color .25s ease}
.fuss-links a:hover{color:var(--em)}
.fuss-zeile{
  display:flex;
  flex-wrap:wrap;
  gap:12px 22px;
  justify-content:space-between;
  padding-top:26px;
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--smoke-2);
}

/* ---------- 13 · Bewegung aus --------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-auf]{opacity:1;transform:none}
}