/* ════════════════════════════════════════════════════════════════
   TESSAR · Section-Separation Tweaks (v2.1)
   Alle Trenner über Body-Klassen geschaltet, alle innerhalb des
   Design-Systems (Anthrazit · Papierweiss · Grau-Skala, Bordeaux
   ≤ 5 %, keine Schatten, keine Radien, keine Gradienten außer
   Brand-Anchor).

   Basis-Layer:
     · A  band-{aus|dezent|wechselnd|stark}   — Hintergrundrhythmus
     · B  show-numeral                        — riesige Kapitelziffer hinten
     · D  show-sticky                         — Sticky Kapitel (Bottom-Left)

   Effekt-Layer (Sektion-Identität):
     · E  show-slate          — Film-Slate-Karte beim Einscrollen
     · F  show-kopfstreifen   — Dokumenten-Divider am Sektionsstart
     · G  show-reiter         — Vertikaler Akten-Reiter (linke Kante)
     · H  show-frame          — Haarlinien-Rahmen (oben + unten, draw-in)
   ════════════════════════════════════════════════════════════════ */


/* ─── A · Band-Rhythmus ────────────────────────────────────────
   Wechselt einzelne Sektionen auf grau-100 oder Anthrazit.
   ──────────────────────────────────────────────────────────── */

body.band-dezent #vorleistung,
body.band-dezent #branchen,
body.band-dezent #netzwerk {
  background: var(--grau-100);
}

body.band-wechselnd #vorleistung,
body.band-wechselnd #branchen,
body.band-wechselnd #sourcing,
body.band-wechselnd #risiko,
body.band-wechselnd #netzwerk {
  background: var(--grau-100);
}

body.band-stark #vorleistung,
body.band-stark #branchen,
body.band-stark #netzwerk {
  background: var(--grau-100);
}
body.band-stark #finanzielles {
  background: var(--brand-anthrazit);
  color: var(--brand-paper);
}
body.band-stark #finanzielles .section-overline { color: rgba(246, 244, 238, 0.55); }
body.band-stark #finanzielles .section-overline::before { background: var(--brand-accent-soft, #B84756); }
body.band-stark #finanzielles .section-h2 { color: var(--brand-paper); }
body.band-stark #finanzielles .section-h2 em { color: var(--brand-accent-soft, #B84756); }
body.band-stark #finanzielles .section-sub { color: rgba(246, 244, 238, 0.78); }
body.band-stark #finanzielles .money-step-marker {
  border-color: rgba(246, 244, 238, 0.45);
  color: var(--brand-paper);
}
body.band-stark #finanzielles .money-step-amount { color: var(--brand-accent-soft, #B84756); }
body.band-stark #finanzielles .money-step-h { color: var(--brand-paper); }
body.band-stark #finanzielles .money-step-p { color: rgba(246, 244, 238, 0.72); }
body.band-stark #finanzielles .money-flow-line { background: rgba(246, 244, 238, 0.15); }
body.band-stark #finanzielles .money-flow-line .draw { background: var(--brand-accent-soft, #B84756); }
body.band-stark #finanzielles .money-step.final .money-step-amount { color: var(--brand-accent-soft, #B84756); }


/* ─── Helper: which sections are "über-dunkel" (Anthrazit-Grund) ─
   Sektionen mit dunklem Hintergrund — relevant für Kontrastinversion
   in Numeral / Slate / Kopfstreifen / Reiter / Frame.
   ──────────────────────────────────────────────────────────── */

.section.dark,
.stimme,
body.band-stark #finanzielles {
  /* nothing here — selectors used below via comma-chains */
}


/* ─── B · Kapitel-Numeral ─────────────────────────────────────
   Riesige Mono-Ziffer im Sektionshintergrund, wie eine Seitenzahl
   in einem Report.
   ──────────────────────────────────────────────────────────── */

.section-numeral {
  position: absolute;
  top: 56px;
  right: max(32px, calc((100vw - 1280px) / 2 + 32px));
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: clamp(140px, 18vw, 260px);
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: rgba(17, 17, 17, 0.045);
  z-index: 0;
  pointer-events: none;
  user-select: none;
  display: none;
  font-variant-numeric: tabular-nums;
}
body.show-numeral .section-numeral { display: block; }

.section.dark .section-numeral,
.stimme .section-numeral,
body.band-stark #finanzielles .section-numeral {
  color: rgba(246, 244, 238, 0.055);
}
body.band-dezent #vorleistung .section-numeral,
body.band-dezent #branchen   .section-numeral,
body.band-dezent #netzwerk   .section-numeral,
body.band-wechselnd #vorleistung .section-numeral,
body.band-wechselnd #branchen   .section-numeral,
body.band-wechselnd #sourcing   .section-numeral,
body.band-wechselnd #risiko     .section-numeral,
body.band-wechselnd #netzwerk   .section-numeral,
body.band-stark #vorleistung .section-numeral,
body.band-stark #branchen   .section-numeral,
body.band-stark #netzwerk   .section-numeral {
  color: rgba(17, 17, 17, 0.065);
}

.hero .section-numeral,
.footer .section-numeral { display: none !important; }

/* Inhalts-Shell über alle Marker legen */
.section > .shell,
.process > .shell,
.stimme > .shell,
.faq > .shell {
  position: relative;
  z-index: 1;
}


/* ─── E · Sektion-Slate ────────────────────────────────────────
   Film-Slate-Karte. Beim Einscrollen (data-marker-played) fadet eine
   zentrale Karte für ~1.4s ein und wieder aus. Mono-Nummer + dünne
   Bordeaux-Linie + Display-Titel. Wird nur einmal pro Sektion abgespielt.
   ──────────────────────────────────────────────────────────── */

.section-slate {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
}
body.show-slate .section-slate { display: flex; }

.slate-card {
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  gap: 28px;
  padding: 28px 40px;
  background: var(--brand-paper);
  border-top: 1px solid var(--brand-anthrazit);
  border-bottom: 1px solid var(--brand-anthrazit);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 320ms ease-out, transform 320ms ease-out;
  min-width: min(560px, 80vw);
  max-width: 92vw;
  justify-content: center;
  pointer-events: none;
}

.slate-n {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(36px, 6vw, 72px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--brand-anthrazit);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.slate-n .sep { opacity: 0.35; margin: 0 6px; font-weight: 400; }
.slate-n .total { color: var(--grau-500); font-weight: 400; font-size: 0.55em; }

.slate-rule {
  width: 64px;
  height: 2px;
  background: var(--brand-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 420ms cubic-bezier(.4,.0,.2,1) 120ms;
}

.slate-t {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: normal;
  font-size: clamp(28px, 4.5vw, 56px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--brand-anthrazit);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 360ms ease-out 180ms, transform 360ms ease-out 180ms;
}

/* Einblenden, kurz halten, ausblenden — gesteuert per data-marker-played */
body.show-slate [data-marker-played="true"] .slate-card {
  animation: slateInOut 1600ms cubic-bezier(.4,.0,.2,1) forwards;
}
body.show-slate [data-marker-played="true"] .slate-rule {
  transform: scaleX(1);
}
body.show-slate [data-marker-played="true"] .slate-t {
  opacity: 1;
  transform: none;
}

@keyframes slateInOut {
  0%   { opacity: 0; transform: translateY(8px); }
  20%  { opacity: 1; transform: translateY(0); }
  62%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-4px); }
}

/* Auf dunklen Sektionen invertieren */
.section.dark .slate-card,
.stimme .slate-card,
body.band-stark #finanzielles .slate-card {
  background: var(--brand-anthrazit);
  border-top-color: var(--brand-paper);
  border-bottom-color: var(--brand-paper);
}
.section.dark .slate-n,
.section.dark .slate-t,
.stimme .slate-n,
.stimme .slate-t,
body.band-stark #finanzielles .slate-n,
body.band-stark #finanzielles .slate-t {
  color: var(--brand-paper);
}
.section.dark .slate-rule,
.stimme .slate-rule,
body.band-stark #finanzielles .slate-rule {
  background: var(--brand-accent-soft, #B84756);
}
.section.dark .slate-n .total,
.stimme .slate-n .total,
body.band-stark #finanzielles .slate-n .total {
  color: rgba(246, 244, 238, 0.5);
}

/* Motion-aware: bei "off" kein Slate (vermeidet ungewollte Overlays) */
body.motion-off .section-slate { display: none !important; }
.hero .section-slate,
.footer .section-slate { display: none !important; }


/* ─── F · Sektion-Kopfstreifen ────────────────────────────────
   Mono-Dokumenten-Divider am Beginn jeder Sektion. Sitzt im
   Shell-Container ÜBER dem Section-Head.
   ──────────────────────────────────────────────────────────── */

.section-kopfstreifen {
  display: none;
  align-items: center;
  gap: 16px;
  padding: 20px 0 28px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--grau-300);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brand-anthrazit);
  font-variant-numeric: tabular-nums;
}
body.show-kopfstreifen .section-kopfstreifen { display: flex; }

.kopf-arrow {
  font-family: var(--font-body);
  font-size: 16px;
  letter-spacing: 0;
  color: var(--brand-accent);
  line-height: 1;
  transform: translateY(-1px);
}
.kopf-n {
  font-weight: 500;
  font-size: 13px;
  color: var(--brand-anthrazit);
}
.kopf-t {
  font-weight: 400;
  color: var(--grau-700);
}
.kopf-rule {
  flex: 1;
  height: 1px;
  background: var(--grau-300);
  min-width: 24px;
}
.kopf-meta {
  font-weight: 400;
  color: var(--grau-500);
  font-size: 10px;
  letter-spacing: 0.28em;
}

/* Dunkle Sektionen */
.section.dark .section-kopfstreifen,
.stimme .section-kopfstreifen,
body.band-stark #finanzielles .section-kopfstreifen {
  border-bottom-color: rgba(246, 244, 238, 0.18);
  color: var(--brand-paper);
}
.section.dark .kopf-n, .stimme .kopf-n, body.band-stark #finanzielles .kopf-n { color: var(--brand-paper); }
.section.dark .kopf-t, .stimme .kopf-t, body.band-stark #finanzielles .kopf-t { color: rgba(246, 244, 238, 0.78); }
.section.dark .kopf-rule, .stimme .kopf-rule, body.band-stark #finanzielles .kopf-rule { background: rgba(246, 244, 238, 0.22); }
.section.dark .kopf-meta, .stimme .kopf-meta, body.band-stark #finanzielles .kopf-meta { color: rgba(246, 244, 238, 0.5); }
.section.dark .kopf-arrow,
.stimme .kopf-arrow,
body.band-stark #finanzielles .kopf-arrow {
  color: var(--brand-accent-soft, #B84756);
}

/* Hero und Footer ausnehmen */
.hero .section-kopfstreifen,
.footer .section-kopfstreifen { display: none !important; }


/* ─── G · Akten-Reiter ────────────────────────────────────────
   Vertikaler Mono-Tab am linken Sektionsrand. Sitzt 32px vom
   Section-Top, ragt 8px aus der Shell-Spalte nach links heraus.
   Bordeaux-Stripe (3px) + um 90° gedrehter Text.
   ──────────────────────────────────────────────────────────── */

.section-reiter {
  display: none;
  position: absolute;
  top: 56px;
  left: max(0px, calc((100vw - 1280px) / 2 + 4px));
  z-index: 2;
  pointer-events: none;
  align-items: stretch;
  gap: 12px;
  height: 220px;
}
body.show-reiter .section-reiter { display: flex; }

.reiter-stripe {
  width: 3px;
  height: 100%;
  background: var(--brand-accent);
}
.reiter-text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brand-anthrazit);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  line-height: 1;
  padding: 4px 0;
  font-variant-numeric: tabular-nums;
}
.reiter-n {
  font-weight: 500;
  color: var(--brand-anthrazit);
  letter-spacing: 0.12em;
}
.reiter-dot {
  color: var(--grau-500);
  letter-spacing: 0;
}
.reiter-t {
  font-weight: 400;
  color: var(--grau-700);
}

/* Auf dunklen Sektionen */
.section.dark .reiter-stripe,
.stimme .reiter-stripe,
body.band-stark #finanzielles .reiter-stripe {
  background: var(--brand-accent-soft, #B84756);
}
.section.dark .reiter-n,
.stimme .reiter-n,
body.band-stark #finanzielles .reiter-n { color: var(--brand-paper); }
.section.dark .reiter-t,
.stimme .reiter-t,
body.band-stark #finanzielles .reiter-t { color: rgba(246, 244, 238, 0.7); }
.section.dark .reiter-dot,
.stimme .reiter-dot,
body.band-stark #finanzielles .reiter-dot { color: rgba(246, 244, 238, 0.4); }

/* Auf Sektionen, die ohnehin schmal sind (Stimme/Kontakt): Reiter
   nach rechts in den Shell-Innenraum hinein, damit nichts abgeschnitten wird */
@media (max-width: 1340px) {
  .section-reiter {
    left: max(8px, calc((100vw - 1280px) / 2 + 8px));
  }
}
@media (max-width: 720px) {
  .section-reiter { display: none !important; }
}

.hero .section-reiter,
.footer .section-reiter { display: none !important; }

/* Reiter slidet auf data-marker-played von links ein */
.section-reiter { transform: translateX(-12px); opacity: 0; transition: transform 420ms cubic-bezier(.4,.0,.2,1), opacity 420ms ease-out; }
body.show-reiter [data-marker-played="true"] .section-reiter { transform: none; opacity: 1; }


/* ─── H · Sektion-Rahmen ──────────────────────────────────────
   Haarlinien (1 px grau-300) am oberen und unteren Sektionsrand,
   die bei Sichtbarkeit von der Mitte aus nach außen wachsen.
   ──────────────────────────────────────────────────────────── */

.section-frame {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
body.show-frame .section-frame { display: block; }

.section-frame .rule {
  position: absolute;
  left: 50%;
  width: calc(100% - max(64px, calc((100vw - 1280px) / 2 + 64px) * 2));
  max-width: calc(1280px - 64px);
  height: 1px;
  background: var(--grau-300);
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform 700ms cubic-bezier(.4,.0,.2,1);
}
.section-frame .rule.top    { top: 0; }
.section-frame .rule.bottom { bottom: 0; }

body.show-frame [data-marker-played="true"] .section-frame .rule {
  transform: translateX(-50%) scaleX(1);
}
body.show-frame [data-marker-played="true"] .section-frame .rule.bottom {
  transition-delay: 140ms;
}

/* Dunkle Sektionen */
.section.dark .section-frame .rule,
.stimme .section-frame .rule,
body.band-stark #finanzielles .section-frame .rule {
  background: rgba(246, 244, 238, 0.22);
}

.hero .section-frame,
.footer .section-frame { display: none !important; }

/* Motion-off: keine Animation, einfach gerendert */
body.motion-off .section-frame .rule {
  transition: none;
  transform: translateX(-50%) scaleX(1);
}


/* ─── D · Sticky Kapitelanzeige ───────────────────────────────
   Fixiert am unteren linken Rand.
   ──────────────────────────────────────────────────────────── */

.sticky-kapitel {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 80;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: end;
  gap: 14px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 240ms ease-out, transform 240ms ease-out;
  max-width: 320px;
}
.sticky-kapitel.visible { opacity: 1; transform: none; }

.sticky-kapitel-n {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 26px;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--brand-anthrazit);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sticky-kapitel-n .sep { opacity: 0.35; margin: 0 3px; font-weight: 400; }
.sticky-kapitel-n .total { color: var(--grau-500); font-weight: 400; }

.sticky-kapitel-label {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--grau-500);
  line-height: 1.5;
  padding-bottom: 3px;
}

body.over-dark .sticky-kapitel-n { color: var(--brand-paper); }
body.over-dark .sticky-kapitel-n .total { color: rgba(246, 244, 238, 0.55); }
body.over-dark .sticky-kapitel-label { color: rgba(246, 244, 238, 0.6); }

body.motion-off .sticky-kapitel { transition: none; }


/* ─── Print ────────────────────────────────────────────────── */
@media print {
  .sticky-kapitel,
  .section-numeral,
  .section-slate,
  .section-kopfstreifen,
  .section-reiter,
  .section-frame { display: none !important; }
}