/* css/theme-twink-death.css - Charakter-Schicht fuer das Theme "twink-death".
 *
 * Quelle: ~/twink-death/DESIGN.md + style.css. Uebertragen wird, was der
 * Token-Block allein nicht kann: die Schrift-Rollen (Gear Wide nur Hero,
 * Bebas Neue fuer alles Laute, Poppins fuer Fliesstext), der rote Glow als
 * einzige Form von Erhebung, die durchgehend rechten Winkel.
 *
 * Regeln: ausschliesslich unter :root[data-theme="twink-death"], keine
 * Hex-Werte (nur var()/color-mix()/rgba()), keine zweite Akzentfarbe.
 */

/* ========================================================================
   00. Grundhaltung
   ======================================================================== */

/* Null Radius, ueberall - Pass-Badges (999px) bleiben die Ausnahme. */
:root[data-theme="twink-death"] .slide-html .card,
:root[data-theme="twink-death"] .slide-html .chip,
:root[data-theme="twink-death"] .slide-html .verdict,
:root[data-theme="twink-death"] .mockup-pane,
:root[data-theme="twink-death"] .code-pane,
:root[data-theme="twink-death"] .mockup-frame,
:root[data-theme="twink-death"] .vault-panel,
:root[data-theme="twink-death"] .vault-section,
:root[data-theme="twink-death"] .vault-table-wrap,
:root[data-theme="twink-death"] .vault-canvas,
:root[data-theme="twink-death"] .vault-code,
:root[data-theme="twink-death"] .app-region {
  border-radius: 0;
}

/* Fliesstext ist Poppins, 1.6 - die ruhigste Stimme im Raum. */
:root[data-theme="twink-death"] body,
:root[data-theme="twink-death"] .slide-body,
:root[data-theme="twink-death"] .slide-html p,
:root[data-theme="twink-death"] .slide-html li,
:root[data-theme="twink-death"] .stage-notes,
:root[data-theme="twink-death"] .vault-md {
  font-family: var(--font-body);
  line-height: 1.6;
}

/* ========================================================================
   01. Gateway
   ======================================================================== */

/* Der Gateway ist der Hero der Seite - und damit die einzige Stelle mit
   Gear Wide. Unter 640px uebernimmt Bebas Neue (Gear Wide nie unter 60px). */
:root[data-theme="twink-death"] .gate-title {
  font-family: var(--font-display);
  font-size: clamp(60px, 8vw, 108px);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: 0;
  text-transform: uppercase;
}

:root[data-theme="twink-death"] .lockup-x {
  font-family: var(--font-headline);
  color: var(--brand-secondary);
  opacity: 1;
  text-shadow: 0 0 18px var(--brand-glow);
}

:root[data-theme="twink-death"] .gate-note,
:root[data-theme="twink-death"] .field::placeholder {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

:root[data-theme="twink-death"] .field {
  border-bottom-color: var(--border-ghost);
  letter-spacing: 0.25em;
}

:root[data-theme="twink-death"] .field:focus,
:root[data-theme="twink-death"] .field:focus-visible {
  border-bottom-color: var(--brand-color);
  box-shadow: 0 6px 24px -14px var(--brand-glow);
}

:root[data-theme="twink-death"] .gate-error {
  font-family: var(--font-headline);
  font-size: 15px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brand-secondary);
  text-shadow: 0 0 20px var(--brand-glow);
}

/* Aurora: rot statt Zweitfarbe - der dritte Blob mischt sonst nach Rosa. */
:root[data-theme="twink-death"] .aurora-blob-3 {
  background: radial-gradient(ellipse,
    color-mix(in srgb, var(--brand-secondary) 70%, transparent) 0%,
    color-mix(in srgb, var(--brand-color) 22%, transparent) 35%,
    transparent 65%);
}

:root[data-theme="twink-death"] .aurora-blob-1 { opacity: 0.32; }
:root[data-theme="twink-death"] .aurora-blob-2 { opacity: 0.28; }
:root[data-theme="twink-death"] .aurora-blob-3 { opacity: 0.22; }

@media (max-width: 640px) {
  :root[data-theme="twink-death"] .gate-title {
    font-family: var(--font-headline);
    font-size: clamp(38px, 11vw, 56px);
    line-height: 1;
    letter-spacing: var(--headline-spacing);
  }
}

/* ========================================================================
   02. Buttons - rote Flaeche, weisse Bebas-Versalien, Glow, kein Radius
   ======================================================================== */

:root[data-theme="twink-death"] .btn-primary,
:root[data-theme="twink-death"] .vault-btn,
:root[data-theme="twink-death"] .vault-btn-sm,
:root[data-theme="twink-death"] .vault-theme-apply,
:root[data-theme="twink-death"] .tb-btn,
:root[data-theme="twink-death"] .tb-seg-btn {
  font-family: var(--font-headline);
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  border-radius: 0;
}

:root[data-theme="twink-death"] .btn-primary {
  font-size: 16px;
  padding: 16px 30px;
  background: var(--brand-color);
  color: var(--btn-ink);
  box-shadow: 0 0 24px var(--brand-glow);
  transition: background 150ms ease, box-shadow 200ms ease, transform 150ms ease;
}

:root[data-theme="twink-death"] .btn-primary:hover {
  filter: none;
  background: var(--brand-hover);
  box-shadow: 0 0 44px color-mix(in srgb, var(--brand-secondary) 55%, transparent);
}

:root[data-theme="twink-death"] .btn-primary:active { transform: scale(0.97); }

:root[data-theme="twink-death"] .tb-seg-btn[aria-pressed="true"],
:root[data-theme="twink-death"] .tb-btn.is-active,
:root[data-theme="twink-death"] .vault-btn {
  background: var(--brand-color);
  color: var(--btn-ink);
  border-color: transparent;
  box-shadow: 0 0 20px -2px var(--brand-glow);
}

:root[data-theme="twink-death"] .tb-segment {
  border-radius: 0;
  border-color: var(--border-ghost);
}

:root[data-theme="twink-death"] .tb-btn-audit {
  color: var(--btn-ink);
  background: color-mix(in srgb, var(--brand-color) 26%, transparent);
  border-color: color-mix(in srgb, var(--brand-secondary) 60%, transparent);
}

:root[data-theme="twink-death"] .tb-btn-audit:hover {
  background: var(--brand-color);
  box-shadow: 0 0 24px var(--brand-glow);
}

:root[data-theme="twink-death"] .tb-clock,
:root[data-theme="twink-death"] .tb-plan {
  font-family: var(--font-headline);
  letter-spacing: 0.12em;
}

:root[data-theme="twink-death"] .tb-clock.is-urgent,
:root[data-theme="twink-death"] .tb-clock.is-over {
  color: var(--brand-secondary);
  text-shadow: 0 0 18px var(--brand-glow);
}

/* ========================================================================
   03. Buehne: Sektionsakzent bleibt Rot
   ======================================================================== */

/* Neon Pulse mischt den Sektionsakzent aus zwei Marken-Farben. Hier gibt es
   nur eine - jede Sektion traegt dasselbe Rot. */
:root[data-theme="twink-death"] .main-stage,
:root[data-theme="twink-death"] .main-stage[data-section-no="01"],
:root[data-theme="twink-death"] .main-stage[data-section-no="02"],
:root[data-theme="twink-death"] .main-stage[data-section-no="03"],
:root[data-theme="twink-death"] .main-stage[data-section-no="04"],
:root[data-theme="twink-death"] .main-stage[data-section-no="05"],
:root[data-theme="twink-death"] .main-stage[data-section-no="06"],
:root[data-theme="twink-death"] .main-stage[data-section-no="07"],
:root[data-theme="twink-death"] .main-stage[data-section-no="08"] {
  --slide-accent: var(--brand-color);
}

/* ---- Kicker: Poppins label-caps ---------------------------------------- */
:root[data-theme="twink-death"] .slide-kicker {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

:root[data-theme="twink-death"] .kicker-no {
  font-weight: 600;
  color: var(--brand-secondary);
  text-shadow: 0 0 16px var(--brand-glow);
}

:root[data-theme="twink-death"] .kicker-name { font-weight: 500; }
:root[data-theme="twink-death"] .kicker-day { font-weight: 500; }

/* ---- Titel: Bebas Neue, Versalien -------------------------------------- */
:root[data-theme="twink-death"] .slide-title,
:root[data-theme="twink-death"] .funnel-title,
:root[data-theme="twink-death"] .vault-title {
  font-family: var(--font-headline);
  font-weight: 400;
  line-height: 1;
  letter-spacing: var(--headline-spacing);
  text-transform: uppercase;
}

:root[data-theme="twink-death"] .slide-title {
  max-width: 20ch;
  font-size: clamp(38px, 4.4vw, 74px);
}

:root[data-theme="twink-death"] .slide.is-title .slide-title,
:root[data-theme="twink-death"] .slide.is-divider .slide-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(60px, 7.4vw, 124px);
  line-height: 0.85;
  letter-spacing: 0;
  max-width: 14ch;
  text-shadow: 0 0 clamp(24px, 4vw, 60px) color-mix(in srgb, var(--brand-glow) 55%, transparent);
}

/* Statement-Folien sind der zweite Hero-Moment: Gear Wide. */
:root[data-theme="twink-death"] .slide.is-v-statement .slide-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(60px, 6.6vw, 112px);
  line-height: 0.85;
  letter-spacing: 0;
  text-shadow: 0 0 clamp(24px, 4vw, 60px) color-mix(in srgb, var(--brand-glow) 55%, transparent);
}

:root[data-theme="twink-death"] .slide.is-v-statement:has(.slide-html) .slide-title {
  font-size: clamp(44px, 4.6vw, 76px);
}

:root[data-theme="twink-death"] .slide.is-divider .slide-kicker::after {
  background: var(--brand-color);
  box-shadow: 0 0 18px var(--brand-glow);
}

/* ---- Hero-Zahl: die eine rote Stimme pro Folie ------------------------- */
:root[data-theme="twink-death"] .hero-value {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: 0;
  color: var(--brand-secondary);
  text-shadow: 0 0 clamp(24px, 4vw, 56px) var(--brand-glow);
}

:root[data-theme="twink-death"] .hero-label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  line-height: 1.6;
  border-top-color: color-mix(in srgb, var(--brand-color) 55%, transparent);
}

:root[data-theme="twink-death"] .slide-html .bignum,
:root[data-theme="twink-death"] .slide-html .num,
:root[data-theme="twink-death"] .slide-html .delta,
:root[data-theme="twink-death"] .funnel-value,
:root[data-theme="twink-death"] .funnel-marker-val {
  font-family: var(--font-headline);
  font-weight: 400;
  letter-spacing: 0.02em;
}

:root[data-theme="twink-death"] .slide-html .card.good .bignum,
:root[data-theme="twink-death"] .slide-html .card.warn .bignum,
:root[data-theme="twink-death"] .slide-html .num {
  color: var(--brand-secondary);
  text-shadow: 0 0 22px var(--brand-glow);
}

/* ---- Zwischentitel im HTML-Body ---------------------------------------- */
:root[data-theme="twink-death"] .slide-html h2,
:root[data-theme="twink-death"] .slide-html h3,
:root[data-theme="twink-death"] .slide-html h4,
:root[data-theme="twink-death"] .slide-html .card h3,
:root[data-theme="twink-death"] .slide-body .md-heading,
:root[data-theme="twink-death"] .stage-notes .notes-head {
  font-family: var(--font-headline);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---- Karten: Flaeche ohne Kasten, Haarlinie in 7 % Weiss --------------- */
:root[data-theme="twink-death"] .slide-html .card {
  border-radius: 0;
  border-top: 1px solid var(--border-ghost);
}

:root[data-theme="twink-death"] .slide-html .card.warn,
:root[data-theme="twink-death"] .slide-html .card.bad,
:root[data-theme="twink-death"] .slide-html .card.good,
:root[data-theme="twink-death"] .slide-html .card.neutral,
:root[data-theme="twink-death"] .slide-html .card.accent-a,
:root[data-theme="twink-death"] .slide-html .card.accent-b,
:root[data-theme="twink-death"] .slide-html .card.hl-card {
  border-radius: 0;
  background: var(--surface-1);
  box-shadow: inset 0 0 0 1px var(--border-ghost);
}

:root[data-theme="twink-death"] .slide-html .card.warn,
:root[data-theme="twink-death"] .slide-html .card.bad,
:root[data-theme="twink-death"] .slide-html .card.accent-b {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-color) 45%, transparent),
              0 0 32px -16px var(--brand-glow);
}

:root[data-theme="twink-death"] .slide-html .card li::before {
  border-radius: 0;
  background: var(--brand-color);
}

:root[data-theme="twink-death"] .slide-html .card .fix {
  font-family: var(--font-headline);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brand-secondary);
}

/* ---- Chips und Bewertungsmarken: eckig, rot, Versalien ----------------- */
:root[data-theme="twink-death"] .slide-html .chip,
:root[data-theme="twink-death"] .slide-html .verdict,
:root[data-theme="twink-death"] .vault-chip,
:root[data-theme="twink-death"] .vault-badge,
:root[data-theme="twink-death"] .commit-chip {
  font-family: var(--font-headline);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-radius: 0;
}

:root[data-theme="twink-death"] .slide-html .chip,
:root[data-theme="twink-death"] .slide-html .chip.pink {
  color: var(--brand-secondary);
  background: color-mix(in srgb, var(--brand-color) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-color) 55%, transparent);
}

:root[data-theme="twink-death"] .slide-html .verdict.yes {
  color: var(--btn-ink);
  background: var(--brand-color);
  box-shadow: 0 0 18px -4px var(--brand-glow);
}

:root[data-theme="twink-death"] .slide-html .verdict.part,
:root[data-theme="twink-death"] .slide-html .verdict.open,
:root[data-theme="twink-death"] .slide-html .verdict.no {
  color: var(--brand-secondary);
  background: transparent;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-secondary) 55%, transparent);
}

/* ---- Tabellen ---------------------------------------------------------- */
:root[data-theme="twink-death"] .slide-html table.tbl th,
:root[data-theme="twink-death"] .vault-table-wrap th {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-bottom: 1px solid color-mix(in srgb, var(--brand-color) 55%, transparent);
}

:root[data-theme="twink-death"] .slide-html table.tbl td,
:root[data-theme="twink-death"] .vault-table-wrap td {
  border-bottom: 1px solid var(--border-ghost);
}

:root[data-theme="twink-death"] .slide-html table.tbl td.ok,
:root[data-theme="twink-death"] .slide-html table.tbl td.part,
:root[data-theme="twink-death"] .slide-html table.tbl td.open,
:root[data-theme="twink-death"] .slide-html table.tbl td.up {
  font-family: var(--font-headline);
  font-weight: 400;
  letter-spacing: 0.06em;
}

/* ---- Fortschritt und Navigation ---------------------------------------- */
:root[data-theme="twink-death"] .stage-progress {
  border-radius: 0;
  background: var(--surface-2);
}

:root[data-theme="twink-death"] .stage-progress span {
  background: var(--brand-color);
  box-shadow: 0 0 14px var(--brand-glow);
}

:root[data-theme="twink-death"] .stage-dot { border-radius: 0; }

:root[data-theme="twink-death"] .stage-dot.is-active {
  background: var(--brand-color);
  box-shadow: 0 0 14px var(--brand-glow);
}

/* ---- Kleine Beschriftungen: Poppins label-caps ------------------------- */
:root[data-theme="twink-death"] .slide-html .caseline > span,
:root[data-theme="twink-death"] .slide-html .kpirow > span,
:root[data-theme="twink-death"] .slide-html .rnd,
:root[data-theme="twink-death"] .slide-html .sub {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

:root[data-theme="twink-death"] .stage-counter,
:root[data-theme="twink-death"] .commit-chip {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* ---- Code- und Mockup-Rahmen ------------------------------------------- */
:root[data-theme="twink-death"] .code-head,
:root[data-theme="twink-death"] .mockup-caption,
:root[data-theme="twink-death"] .code-lang {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* ========================================================================
   04. Vault
   ======================================================================== */

:root[data-theme="twink-death"] .vault-eyebrow,
:root[data-theme="twink-death"] .vault-tab,
:root[data-theme="twink-death"] .vault-swatch-token,
:root[data-theme="twink-death"] .vault-status,
:root[data-theme="twink-death"] .vault-color-field {
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

:root[data-theme="twink-death"] .vault-title,
:root[data-theme="twink-death"] .vault-emergency-title,
:root[data-theme="twink-death"] .vault-diagram-name {
  font-family: var(--font-headline);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

:root[data-theme="twink-death"] .vault-tab { border-radius: 0; }

:root[data-theme="twink-death"] .vault-tab[aria-selected="true"] {
  color: var(--btn-ink);
  background: var(--brand-color);
  box-shadow: 0 0 20px -4px var(--brand-glow);
}

:root[data-theme="twink-death"] .vault-close,
:root[data-theme="twink-death"] .vault-swatch,
:root[data-theme="twink-death"] .vault-swatch-chip,
:root[data-theme="twink-death"] .vault-theme,
:root[data-theme="twink-death"] .vault-diagram-item,
:root[data-theme="twink-death"] .vault-hex-input,
:root[data-theme="twink-death"] .vault-accordion,
:root[data-theme="twink-death"] .vault-emergency {
  border-radius: 0;
}

:root[data-theme="twink-death"] .vault-status {
  border-radius: 0;
  font-size: 10.5px;
}

:root[data-theme="twink-death"] .vault-md h2,
:root[data-theme="twink-death"] .vault-md h3,
:root[data-theme="twink-death"] .vault-h3,
:root[data-theme="twink-death"] .vault-accordion summary {
  font-family: var(--font-headline);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ========================================================================
   05. Bewegung - Expo-Out, wie auf der Quelle
   ======================================================================== */

:root[data-theme="twink-death"] .reveal {
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root[data-theme="twink-death"] .btn-primary:active { transform: none; }
}