/* ============================================================
   digiSZEM — Design-System  ·  Richtung "Gravur"
   Gate D · Stand 21.08.2026
   Schicht 1 primitiv → Schicht 2 semantisch → Schicht 3 Komponente
   ============================================================ */

:root {
  /* ---- 1 primitiv: Farbe ---------------------------------- */
  --c-ink-900:  #101010;   /* tiefster Grund                    */
  --c-ink-800:  #141414;   /* Seitengrund                       */
  --c-ink-700:  #1D1D1C;   /* erhöhte Fläche, Karte             */
  --c-ink-600:  #2A2A28;   /* Rahmen, Trennlinie                */
  --c-ash-400:  #8A8580;   /* sekundärer Text  · 5.1:1 auf 800  */
  --c-paper-100:#EDE8E2;   /* Text, Gravurpunkte · 14.4:1       */
  --c-ember-500:#F0722A;   /* Marke, Akzent    · 6.3:1 auf 800  */
  --c-ember-400:#FF8C42;   /* Hover, heißer Brand               */
  --c-ember-900:#4A1F0A;   /* Brandschatten, Flächenraster      */

  /* ---- 1 primitiv: Maß ------------------------------------ */
  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-6: 1.5rem;  --s-8: 2rem;    --s-12: 3rem;   --s-16: 4rem;
  --s-24: 6rem;   --s-32: 8rem;   --s-48: 12rem;

  /* ---- 1 primitiv: helle Fassung --------------------------- */
  --c-paper-000:#F7F4F0;   /* Seitengrund hell                  */
  --c-paper-200:#E4DED6;   /* erhöhte Fläche hell               */
  --c-paper-300:#D2CBC2;   /* Trennlinie hell                   */
  --c-ash-700:  #6B655F;   /* Text sekundär hell · 4.7:1        */
  --c-ember-700:#A8410F;   /* Akzent hell      · 5.0:1          */
  --c-ember-800:#8F3409;   /* Hover hell                        */
  --c-ember-050:#F6E3D6;   /* Brandschimmer hell                */

  /* ---- 2 semantisch: Farbrollen (dunkel = Vorgabe) --------- */
  --bg:          var(--c-ink-800);
  --bg-raised:   var(--c-ink-700);
  --rule:        var(--c-ink-600);
  --text:        var(--c-paper-100);
  --text-muted:  var(--c-ash-400);
  --accent:      var(--c-ember-500);
  --accent-hot:  var(--c-ember-400);
  --accent-ink:  var(--c-ink-900);   /* Text AUF Akzentfläche             */
  --focus:       var(--c-ember-400);
  --glut:        var(--c-ember-900);
  --bild-grund:  var(--c-ink-900);
  color-scheme: dark;

  /* ---- 2 semantisch: Schrift ------------------------------ */
  /* Archivo + JetBrains Mono: beide führen ő und ű (doppelter Akut) */
  --ff-display: "Archivo", "Archivo Expanded", "Helvetica Neue", Arial, sans-serif;
  --ff-text:    "Archivo", "Helvetica Neue", Arial, sans-serif;
  --ff-mono:    "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* echte Sprünge, keine 16/18/20/22-Treppe */
  /* Display: so bemessen, dass die längste Hero-Zeile — „IN EINER
     PERSON." — auf voller Satzbreite in EINE Zeile passt. */
  --fs-display: clamp(2.75rem, 9vw, 7.75rem);
  --fs-h1:      clamp(2.25rem, 5.5vw, 4.25rem);
  --fs-h2:      clamp(1.5rem,  3vw,   2.5rem);
  --fs-lead:    clamp(1.125rem, 1.6vw, 1.375rem);
  --fs-body:    clamp(1rem, 1.05vw, 1.0625rem);
  --fs-meta:    .8125rem;

  --lh-tight: .92;  --lh-head: 1.06;  --lh-body: 1.6;
  --tr-tight: -.03em;  --tr-mono: .14em;

  /* ---- 2 semantisch: Form und Bewegung -------------------- */
  --r-0: 0;  --r-1: 2px;          /* Gravur kennt keine runden Ecken */
  --mo-fast: 180ms;  --mo-mid: 420ms;  --mo-slow: 900ms;
  --ease: cubic-bezier(.2,.7,.2,1);

  --wrap: 78rem;
  --gutter: clamp(1.25rem, 4vw, 4rem);
}

/* ---- Helle Fassung ---------------------------------------- */
/* Dunkel ist die Vorgabe der Marke — unabhängig von der Systemeinstellung.
   Hell gibt es nur über die ausdrückliche Wahl am Umschalter (data-theme). */
.hell-tokens,
[data-theme="light"] {
  --bg:          var(--c-paper-000);
  --bg-raised:   var(--c-paper-200);
  --rule:        var(--c-paper-300);
  --text:        var(--c-ink-800);
  --text-muted:  var(--c-ash-700);
  --accent:      var(--c-ember-700);
  --accent-hot:  var(--c-ember-800);
  --accent-ink:  var(--c-paper-000);
  --focus:       var(--c-ember-800);
  --glut:        var(--c-ember-050);
  --bild-grund:  var(--c-paper-200);
  color-scheme: light;
}

/* ---- Grundlagen ------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--ff-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;                 /* nie horizontal scrollen */
}

img, svg { max-width: 100%; height: auto; display: block; }

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

::selection { background: var(--accent); color: var(--bg); }

.wrap { width: min(var(--wrap), 100% - var(--gutter) * 2); margin-inline: auto; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ---- Typografie ------------------------------------------- */
.t-display {
  font-family: var(--ff-display);
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  text-transform: uppercase;
  margin: 0;
}
.t-h1 { font-family: var(--ff-display); font-size: var(--fs-h1); font-weight: 700;
        line-height: var(--lh-head); letter-spacing: var(--tr-tight); margin: 0; }
.t-h2 { font-family: var(--ff-display); font-size: var(--fs-h2); font-weight: 600;
        line-height: var(--lh-head); letter-spacing: -.02em; margin: 0; }
.t-lead { font-size: var(--fs-lead); max-width: 34ch; color: var(--text); margin: 0; }
.t-body { max-width: 62ch; }          /* 50–75 Zeichen (Ertel/Laborenz) */
.t-meta {
  font-family: var(--ff-mono); font-size: var(--fs-meta);
  letter-spacing: var(--tr-mono); text-transform: uppercase;
  color: var(--text-muted); margin: 0;
}

/* ============================================================
   3 · Kernkomponenten
   ============================================================ */

/* --- K0 Bildmarke ----------------------------------------- */
/* currentColor wirkt nicht durch <img>. Deshalb als Maske auf einer
   Fläche — so erbt die Marke die Textfarbe und bleibt eine externe Datei. */
.marke {
  display: block;
  aspect-ratio: 2112 / 1146;
  background: currentColor;
  -webkit-mask: url("logo-auge.svg") no-repeat center / contain;
          mask: url("logo-auge.svg") no-repeat center / contain;
}

/* --- K1 Gravurbild ---------------------------------------- */
/* Farbfassung: das Bild bleibt nah am Original. Die Gravur-Anmutung
   kommt aus dem Brandschimmer von unten, nicht mehr aus einem Raster. */
.gravur {
  position: relative;
  background: var(--bild-grund);
  overflow: hidden;
}
.gravur img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--mo-slow) var(--ease),
              filter var(--mo-mid) var(--ease);
  filter: saturate(.94);
}
.gravur::after {                      /* Brandschimmer, mischt sich ins Bild */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top,
              var(--glut) 0%, transparent 46%);
  mix-blend-mode: multiply;
  opacity: .55; pointer-events: none;
  transition: opacity var(--mo-mid) var(--ease);
}
.gravur:hover img,
.gravur:focus-within img { transform: scale(1.03); filter: saturate(1.04); }
.gravur:hover::after,
.gravur:focus-within::after { opacity: .3; }

/* --- K2 Rollenkarte --------------------------------------- */
/* Bewusst KEIN Raster mit 1fr-Zeile: das dehnte den Zwischenraum
   Headline→Subline je nach Kartenhöhe — jede Karte sah anders aus.
   Feste Abstände, in jeder Karte identisch. */
.rolle {
  border-top: 1px solid var(--rule);
  padding-top: var(--s-4);
  background: none;
}
.rolle__nr {
  font-family: var(--ff-mono); font-size: var(--fs-meta);
  letter-spacing: var(--tr-mono); color: var(--accent);
  margin: 0 0 var(--s-3);
}
.rolle__titel {
  font-family: var(--ff-display); font-weight: 700;
  font-size: clamp(1.375rem, 2.4vw, 2rem);
  line-height: 1.05; letter-spacing: -.02em;
  text-transform: uppercase;
  margin: var(--s-3) 0 var(--s-2);
}
.rolle__text { color: var(--text-muted); max-width: 40ch; margin: 0 0 var(--s-6); }
.rolle .gravur { aspect-ratio: 4 / 5; }

/* --- K3 Brand-Knopf --------------------------------------- */
/* Der Rand brennt von links nach rechts durch.
   z-index:0 ist Pflicht: es macht den Knopf zum eigenen Stapelkontext.
   Ohne ihn rutscht das ::before (z-index:-1) HINTER den Seiten- bzw.
   Hero-Hintergrund — die Füllung bleibt unsichtbar und die umgefärbte
   Beschriftung steht im Dunkeln auf Dunkel. */
.knopf {
  --brand: 0%;
  position: relative; z-index: 0;
  display: inline-flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-8);
  font-family: var(--ff-mono); font-size: var(--fs-meta);
  letter-spacing: var(--tr-mono); text-transform: uppercase;
  color: var(--text); text-decoration: none;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--r-0);
  cursor: pointer;
  transition: color var(--mo-fast) var(--ease),
              border-color var(--mo-fast) var(--ease);
}
.knopf::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--accent);
  transform: scaleX(var(--brand)); transform-origin: left;
  transition: transform var(--mo-mid) var(--ease);
}
.knopf:hover, .knopf:focus-visible { --brand: 1; color: var(--accent-ink); border-color: var(--accent); }
.knopf:active::before { background: var(--accent-hot); }
.knopf[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.knopf__pfeil { transition: transform var(--mo-fast) var(--ease); }
.knopf:hover .knopf__pfeil { transform: translateX(4px); }

/* --- K4 Einbrennende Überschrift -------------------------- */
/* Scroll-driven: die Zeile wird beim Hereinscrollen aufgedeckt. */
.brennt { --auf: 0; display: block; position: relative; }
.brennt > span {
  display: block;
  clip-path: inset(0 calc(100% - var(--auf) * 100%) 0 0);
}
.brennt::after {                      /* glühende Brennkante */
  content: ""; position: absolute; top: 0; bottom: 0;
  left: calc(var(--auf) * 100%); width: 2px;
  background: var(--accent-hot);
  opacity: calc(1 - var(--auf));
  box-shadow: 0 0 18px 4px var(--accent);
}

@supports (animation-timeline: view()) {
  @property --auf { syntax: "<number>"; inherits: true; initial-value: 0; }
  .brennt {
    animation: einbrennen linear both;
    animation-timeline: view();
    animation-range: entry 25% cover 38%;   /* früh fertig: nie lange angeschnitten */
  }
  @keyframes einbrennen { to { --auf: 1; } }
}
@supports not (animation-timeline: view()) { .brennt { --auf: 1; } }

/* --- Laufband --------------------------------------------- */
/* Endlos ohne Naht: KEIN gap auf der Spur. Der Abstand steckt im
   padding-right jedes Begriffs. Nur so ist die Spur exakt doppelt
   so breit wie ein Durchlauf und -50 % trifft punktgenau — sonst
   fehlt am Übergang genau ein Zwischenraum und es ruckelt. */
.laufband { overflow: hidden; border-block: 1px solid var(--rule); padding: var(--s-3) 0; }
.laufband__spur { display: flex; width: max-content;
                  animation: laufen 38s linear infinite; }
.laufband span { font-family: var(--ff-mono); font-size: var(--fs-meta);
                 letter-spacing: var(--tr-mono); text-transform: uppercase;
                 color: var(--text-muted); white-space: nowrap;
                 padding-right: var(--s-8); }
.laufband span::after { content: " ◆"; color: var(--accent); }
@keyframes laufen { to { transform: translateX(-50%); } }
.laufband:hover .laufband__spur { animation-play-state: paused; }

/* ---- Bewegung abschaltbar --------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .brennt { --auf: 1; }
  .brennt::after { display: none; }
}