/* ============================================================================
   DIGITALGROWMATIC — Gate 3.1: S02 Positionierung + S03 Systeme (statischer Kern)
   S01 = Farbe / Bewegung / Energie · S02 = Raum / Typo / Stille · S03 = Ordnung / System
   Dieser Zustand ist der semantische Standard und zugleich der Fallback für
   ohne JS, prefers-reduced-motion und Animationsfehler. Keine Bewegung in G3.1.
   ============================================================================ */

.story {
  --s-bg: #ffffff;          /* reines Weiß (Visual Direction 05.10., vorher #f3f2ee) */
  --s-ink: #17181a;         /* Graphit (= --graphite) */
  --s-mute: #5f5e5a;        /* Sekundärtext, 6,6:1 auf Weiß */
  --s-faint: #6b6964;       /* Labels/Aufgaben, 5,4:1 auf Weiß */
  --s-pad: var(--pad);
  background: var(--s-bg);
  color: var(--s-ink);
}
.story ::selection { background: var(--s-ink); color: var(--s-bg); }
.story :focus-visible { outline: 2px solid var(--s-ink); outline-offset: 4px; box-shadow: none; }

.sec-label {
  margin: 0;
  font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--s-faint);
}

/* ---------------------------------------------------------------------------
   S02 — Stille. Ein Statement, sehr viel Raum. Leere ist Teil der Gestaltung.
   --------------------------------------------------------------------------- */
.s02__inner {
  min-height: 100svh;
  padding: clamp(56px, 11vh, 140px) var(--s-pad) clamp(72px, 14vh, 180px);
  display: flex; flex-direction: column;
}
.s02__headline {
  margin: clamp(72px, 19vh, 230px) 0 0;
  font-stretch: 118%; font-weight: 800; text-transform: uppercase;
  font-size: clamp(38px, 5.9vw, 118px);
  line-height: .98; letter-spacing: -.018em;
  text-wrap: balance;
}
.s02__line { display: block; }
.s02__support {
  margin: clamp(28px, 4.4vh, 52px) 0 0;
  font-size: clamp(17px, 1.3vw, 23px); font-weight: 460; line-height: 1.45;
  color: var(--s-mute);
  max-inline-size: 30em;
}

/* ---------------------------------------------------------------------------
   S03 — Ordnung. Redaktioneller Produktindex; Farbe nur als Linie (dekorativ).
   --------------------------------------------------------------------------- */
.s03 { scroll-margin-top: 0; }
.s03__inner { padding: clamp(32px, 6vh, 72px) var(--s-pad) clamp(120px, 20vh, 240px); }
.s03__headline {
  margin: clamp(18px, 2.6vh, 28px) 0 clamp(56px, 10vh, 128px);
  font-stretch: 118%; font-weight: 800; text-transform: uppercase;
  font-size: clamp(24px, 2.7vw, 48px); line-height: 1.02; letter-spacing: -.01em;
  max-inline-size: 22ch; text-wrap: balance;
}

.s03__pre, .lbl-from { display: none; }   /* nur Bewegungsebene (Stufe 1); statisch nie sichtbar */

.sys-index {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr;
  column-gap: clamp(32px, 4.2vw, 96px);
  row-gap: clamp(56px, 8vh, 112px);
}
.sys {
  container-type: inline-size;
  display: flex; flex-direction: column; align-items: flex-start;
  padding-top: clamp(18px, 2.2vh, 26px);
  border-top: 3px solid var(--c, var(--s-ink));   /* 3 px: Lime/Eisblau bleiben auf Warmweiß sichtbar */
}
.sys__meta {
  margin: 0; display: flex; align-items: baseline; gap: 16px;
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
}
.sys__num { font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.sys__group { color: var(--s-faint); font-weight: 600; }
.sys__name {
  margin: clamp(18px, 2.4vh, 28px) 0 0;
  font-stretch: 118%; font-weight: 800; text-transform: uppercase;
  font-size: clamp(26px, 8.4cqi, 46px);
  line-height: 1; letter-spacing: -.01em;
  text-wrap: balance; hyphens: none; overflow-wrap: normal;
}
.sys__text {
  margin: clamp(14px, 1.8vh, 20px) 0 0;
  font-size: clamp(16px, 1.08vw, 19px); line-height: 1.5;
  color: var(--s-mute); max-inline-size: 34ch;
  hyphens: auto;
}
.sys__tasks {
  list-style: none; margin: clamp(16px, 2vh, 22px) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; row-gap: 4px;
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--s-faint);
}
.sys__tasks li:not(:last-child)::after { content: "·"; padding: 0 .7em; }  /* Trenner bleibt am Zeilenende */
.sys__cta {
  margin-top: auto; padding-top: clamp(22px, 3vh, 32px);
  display: inline-flex; gap: .5em; align-items: baseline;
  font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; color: var(--s-ink);
}
a.sys__cta { text-underline-offset: 6px; }
a.sys__cta:hover { text-decoration: underline; }

/* Tablet ab 820 px: zwei Spalten (A und B gleich) */
@media (min-width: 820px) {
  .sys-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Desktop ab 1280 px: 2 Spalten x 3 Reihen (LOCKED, Gate 3.1). Der Index darf scrollen. */
@media (min-width: 1280px) {
  .sys-index { column-gap: clamp(64px, 8vw, 180px); }
  .sys__name { font-size: clamp(30px, 7.2cqi, 54px); }
}

/* Mobil */
@media (max-width: 819px) {
  .s02__inner { min-height: 92svh; }
  .s02__headline { margin-top: clamp(64px, 16vh, 140px); font-size: clamp(32px, 9.4vw, 52px); }
  .s03__headline { font-size: clamp(24px, 7vw, 34px); }
  .sys__name { font-size: clamp(26px, 8.4vw, 38px); }
}

/* Desktop ≥ 1280 (Live-Korrektur 02.10.): Statement großzügig statt leer – Headline ~17 % kleiner
   (vorher clamp(38px, 5.9vw, 118px)), Abstand Label → Headline deutlich kürzer (vorher clamp(72px, 19vh, 230px)),
   keine volle Bildschirmhöhe mehr (vorher min-height 100svh). Mobil/Tablet unverändert. */
@media (min-width: 1280px) {
  .s02__inner { min-height: 0; padding-bottom: clamp(104px, 17vh, 200px); }
  .s02__headline { margin-top: clamp(40px, 7vh, 88px); font-size: clamp(38px, 4.9vw, 98px); }
}

/* ============================================================================
   Feinschliff 02.10. — DGM-Identität: Off-White · Graphit · Orange als Signal
   Orange nur gezielt: ausgewählte Wörter (.acc), Label-Marker, Nummern, Zustände, CTAs.
   Auf Hell: --orange-ink (#d94d05, 3,7:1 → nur große Schrift); auf Dunkel: --orange (#ff6414, 6,3:1).
   ============================================================================ */
:root { --orange-ink: #d94d05; }
.acc { color: var(--orange-ink); }
.sec-label { display: flex; align-items: baseline; gap: 14px; color: var(--s-faint); }
.sec-num { color: var(--orange-ink); font-weight: 750; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.sec-name { font-weight: 650; }
@media (min-width: 1280px) { .sec-label { font-size: 13px; } }

/* ============================================================================
   S02 (Visual Direction 05.10.2026) — kräftige DGM-Orange-Fläche, große Typografie,
   rechts das Systembild: manuelle Arbeit / Chaos → DGM → geordnete Ergebnisse.
   Bild = Bildwelt (aria-hidden, Text steht im HTML); läuft links weich in die Fläche aus.
   Kontrast: Graphit auf --s2-bg ≈ 5,9:1 · Weiß (Headline-Zeile 2, ≥ 34 px fett) ≈ 3,0:1 (WCAG AA Großschrift).
   Flächenton an den Orange-Grund des Bildes angeglichen, damit die Bildkanten ohne Naht auslaufen.
   ============================================================================ */
.s02 {
  --s2-bg: #f6651c;
  --s2-ink: #17181a;
  position: relative; overflow: hidden;
  background: var(--s2-bg); color: var(--s2-ink);
}
.s02 .sec-label, .s02 .sec-num, .s02 .sec-name { color: var(--s2-ink); }
.s02 .acc { color: #fff; }
.s02 ::selection { background: var(--s2-ink); color: #fff; }
.s02 :focus-visible { outline-color: var(--s2-ink); }
.s02__media { position: relative; }
.s02__pic, .s02__pic img { display: block; width: 100%; height: 100%; }
.s02__pic img { object-fit: cover; max-width: none; }
.s02__body { margin-top: clamp(22px, 3.4vh, 36px); display: block; }
.s02__about {
  margin: 0; max-inline-size: 30em;
  font-size: clamp(16px, 1.1vw, 20px); font-weight: 500; line-height: 1.55; color: var(--s2-ink);
}
.s02.has-media .s02__headline {
  font-stretch: 125%; font-weight: 800; color: var(--s2-ink);
  letter-spacing: -.02em; line-height: .92; text-wrap: initial;
}
.s02.has-media .s02__line { display: block; }

/* Prinzipien als drei dunkle Kacheln mit Systemfarbe (Nummer + Linie) */
.s02__principles {
  list-style: none; margin: clamp(26px, 4vh, 44px) 0 0; padding: 0; counter-reset: pr;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, .8vw, 14px);
  max-inline-size: 660px;
}
.s02__principles li {
  counter-increment: pr; position: relative;
  display: flex; flex-direction: column; gap: 6px;
  padding: clamp(12px, 1vw, 18px) clamp(12px, 1vw, 18px) clamp(16px, 1.3vw, 22px);
  background: #111214; color: #fff; border-radius: 6px;
  box-shadow: 0 12px 26px -16px rgba(0, 0, 0, .6);
}
.s02__principles li::before {
  content: "0" counter(pr);
  font-stretch: 125%; font-weight: 800; font-size: clamp(22px, 1.9vw, 34px); line-height: 1; letter-spacing: -.01em;
  color: var(--pc); font-variant-numeric: tabular-nums;
}
.s02__principles li:nth-child(1) { --pc: #cfe21e; --pf: .74; }
.s02__principles li:nth-child(2) { --pc: #3ba7f2; --pf: .56; }
.s02__principles li:nth-child(3) { --pc: #ffffff; --pf: .88; }
.s02__pr { font-size: clamp(11px, .85vw, 14px); font-weight: 750; letter-spacing: .1em; text-transform: uppercase; hyphens: none; overflow-wrap: anywhere; }
.s02__bar { position: relative; display: block; height: 3px; margin-top: 8px; background: rgba(255, 255, 255, .18); }
.s02__bar i { position: absolute; inset: 0 auto 0 0; width: calc(var(--pf) * 100%); background: var(--pc); }

/* Mobil/Tablet: Text auf Orange, darunter das ganze Bild (Chaos → DGM → Ergebnisse bleibt vollständig lesbar) */
@media (max-width: 1279px) {
  .s02.has-media { display: flex; flex-direction: column; }
  .s02.has-media .s02__inner { order: 1; min-height: 0; padding-bottom: 0; }
  .s02.has-media .s02__headline { margin-top: clamp(22px, 4vh, 40px); font-size: clamp(34px, 9.6vw, 72px); }
  .s02.has-media .s02__inner { padding-top: calc(var(--nav-h, 56px) + clamp(24px, 5vh, 56px)); }
  .s02__media { order: 2; margin-top: clamp(28px, 5vh, 48px); aspect-ratio: 1747 / 900; }
  .s02__pic img { object-position: 50% 50%; }
  .s02__media::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, var(--s2-bg) 0%, rgba(246, 101, 28, 0) 16%);
  }
}
@media (max-width: 519px) {
  .s02__principles { grid-template-columns: minmax(0, 1fr); max-inline-size: none; }
  .s02__principles li { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; column-gap: 12px; row-gap: 8px; padding: 12px 14px; }
  .s02__principles li::before { grid-row: 1 / span 2; }
  .s02__bar { margin-top: 0; }
}

/* Desktop ab 1280: Text links auf der Fläche, Bild ≈ 68 % rechts, läuft per Maske weich in die Fläche aus (keine Kante) */
@media (min-width: 1280px) {
  .s02.has-media { min-height: calc(68vw * 900 / 1747 + 40px); display: flex; align-items: center; }
  /* Bild in natürlichem Format (nichts Wichtiges abgeschnitten), rechts, vertikal zentriert; alle Kanten laufen in die Fläche aus */
  .s02__media {
    position: absolute; top: 50%; right: 0; width: 68%; aspect-ratio: 1747 / 900; transform: translateY(-50%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 27%), linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 27%), linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%);
    -webkit-mask-composite: source-in; mask-composite: intersect;
  }
  .s02__pic img { object-position: 50% 50%; }
  .s02.has-media .s02__inner {
    position: relative; z-index: 1; flex: none; width: 100%; min-height: 0;
    max-inline-size: 38%; padding-right: 0;
    padding-top: calc(var(--nav-h, 56px) + clamp(32px, 6vh, 64px)); padding-bottom: clamp(56px, 9vh, 104px);
  }
  .s02.has-media .s02__headline { margin-top: clamp(18px, 3vh, 34px); font-size: clamp(34px, 4.1vw, 84px); }
}

/* S03 — Endzustand Desktop enger (Bewegung misst die echten Positionen, daher nur statische Werte) */
@media (min-width: 1280px) {
  .s03__headline { margin-bottom: clamp(40px, 7vh, 96px); }
  .sys-index { row-gap: clamp(40px, 6vh, 80px); }
  .sys__name { font-size: clamp(28px, 6.4cqi, 48px); margin-top: clamp(14px, 2vh, 22px); }
  .sys__text { margin-top: clamp(10px, 1.4vh, 16px); }
  .sys__cta { padding-top: clamp(16px, 2.2vh, 24px); }
}