/* ============================================================
   Design Tokens — „Stiller Krieger"
   ============================================================ */

:root {
  /* === BASIS (Anthrazit) === */
  --color-ash-900: #0F0E0C;
  --color-ash-850: #15140F;
  --color-ash-800: #1B1916;
  --color-ash-700: #272420;
  --color-ash-600: #3A3631;
  --color-ash-500: #524C44;

  /* === TEXT (Cream) === */
  --color-bone-50:  #F4EFE3;
  --color-bone-100: #E8E1D2;
  --color-bone-200: #C9C1B0;
  --color-bone-300: #9A9281;
  --color-bone-400: #6B6557;

  /* === ACTION === */
  --color-ember-300: #F2A57F;
  --color-ember-500: #E66433;
  --color-ember-600: #D9531E;
  --color-ember-700: #B8431A;
  --color-ember-900: #3A1407;

  /* === SUB-THEMES === */
  --color-blood:    #7A1A12;
  --color-forest:   #1F2E2C;
  --color-moss:     #2E3A22;
  --color-bone-dk:  #2A2520;
  --color-rust:     #8B3A1F;
  --color-gold:     #B8893A;
  --color-twilight: #1F2540;       /* Indigo/Twilight - Meditation */
  --color-twilight-accent: #C97A3F; /* Sonnenuntergang-Akzent */

  /* === SEMANTIC === */
  --color-success: #5A7A3D;
  --color-warning: #D49A2A;
  --color-danger:  #A8331E;

  /* === TYPOGRAPHY === */
  --font-display: "Newsreader", "Source Serif Pro", Georgia, serif;
  --font-condensed: "Bebas Neue", "Oswald", "Impact", sans-serif;
  --font-body: "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --text-display-2xl: clamp(3rem, 7vw, 6rem);
  --text-display-xl:  clamp(2.5rem, 5.5vw, 4.5rem);
  --text-display-lg:  clamp(2rem, 4vw, 3.5rem);
  --text-eyebrow-xl:  clamp(1.75rem, 3vw, 2.75rem);
  --text-eyebrow-md:  clamp(0.875rem, 1vw, 1rem);
  --text-heading-lg:  clamp(1.5rem, 2.2vw, 2rem);
  --text-heading-md:  clamp(1.25rem, 1.6vw, 1.5rem);
  --text-body-lg:     clamp(1.125rem, 1.3vw, 1.25rem);
  --text-body-md:     clamp(1rem, 1.1vw, 1.0625rem);
  --text-body-sm:     0.875rem;
  --text-caption:     0.75rem;

  /* === SPACING === */
  --spacing-section-y-mobile: 5rem;
  --spacing-section-y-desktop: 10rem;
  --spacing-container-max: 82.5rem;

  /* === RADIUS === */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 12px;

  /* === SHADOWS === */
  --shadow-whisper: 0 1px 0 0 rgba(232, 225, 210, 0.04);
  --shadow-recess:  inset 0 1px 0 0 rgba(0, 0, 0, 0.4);
  --shadow-ember:   0 0 32px -8px rgba(217, 83, 30, 0.45);
  --shadow-pillar:  0 24px 60px -20px rgba(0, 0, 0, 0.7);

  /* === MOTION === */
  --duration-instant: 80ms;
  --duration-quick:   180ms;
  --duration-base:    320ms;
  --duration-slow:    600ms;
  --duration-cinema:  1200ms;

  --ease-blade:  cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-breath: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-fall:   cubic-bezier(0.5, 0, 0.75, 0);

  /* === Pillar Defaults === */
  --pillar-accent: var(--color-ember-600);
  --pillar-bg: var(--color-ash-900);
  --pillar-eyebrow-color: var(--color-bone-300);
  --pillar-image-filter: none;
  --pillar-section-bg: var(--color-ash-900);

  color-scheme: dark;
}

/* === Pillar Sub-Themes === */
[data-pillar="kaempfen"] {
  --pillar-accent: var(--color-blood);
  --pillar-eyebrow-color: var(--color-blood);
  --pillar-image-filter: contrast(1.15) saturate(0.85) brightness(0.92);
}

[data-pillar="meditation"] {
  --pillar-accent: var(--color-twilight-accent);
  --pillar-bg: var(--color-twilight);
  --pillar-eyebrow-color: var(--color-twilight-accent);
  --pillar-section-bg: var(--color-twilight);
  --pillar-image-filter: contrast(0.95) saturate(0.85);
}

[data-pillar="ernaehrung"] {
  --pillar-accent: var(--color-rust);
  --pillar-bg: var(--color-bone-dk);
  --pillar-eyebrow-color: var(--color-rust);
  --pillar-section-bg: var(--color-bone-dk);
  --pillar-image-filter: contrast(1.05) saturate(1.1) brightness(0.95);
}

[data-pillar="bootcamp"] {
  --pillar-accent: var(--color-ember-600);
  --pillar-bg: var(--color-ash-850);
  --pillar-eyebrow-color: var(--color-gold);
  --pillar-section-bg: var(--color-ash-850);
  --pillar-image-filter: contrast(1.1) saturate(1.05);
}

/* === Font-Faces (selbst-gehostet) === */
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/Newsreader-Variable.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Newsreader";
  src: url("../fonts/Newsreader-Italic-Variable.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Bebas Neue";
  src: url("../fonts/BebasNeue-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter Tight";
  src: url("../fonts/InterTight-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* === Reset === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; background-color: var(--color-ash-900); color: var(--color-bone-100); font-family: var(--font-body); font-size: 16px; line-height: 1.6; scroll-behavior: smooth; }
body { min-height: 100vh; min-height: 100dvh; background-color: var(--color-ash-900); }
main:focus { outline: none; }
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { background: none; border: 0; cursor: pointer; font: inherit; color: inherit; }
ul, ol { list-style: none; }

::selection { background-color: var(--color-ember-600); color: var(--color-bone-50); }
:focus-visible { outline: 2px solid var(--color-ember-300); outline-offset: 4px; border-radius: var(--radius-sm); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* === Type-Scale Utilities === */
.type-display-2xl { font-family: var(--font-display); font-size: var(--text-display-2xl); font-weight: 400; line-height: 0.95; letter-spacing: -0.02em; }
.type-display-xl  { font-family: var(--font-display); font-size: var(--text-display-xl);  font-weight: 400; font-style: italic; line-height: 1.0; letter-spacing: -0.015em; }
.type-display-lg  { font-family: var(--font-display); font-size: var(--text-display-lg);  font-weight: 500; line-height: 1.05; letter-spacing: -0.01em; }
.type-eyebrow-xl  { font-family: var(--font-condensed); font-size: var(--text-eyebrow-xl); font-weight: 400; line-height: 1.0; letter-spacing: 0.08em; text-transform: uppercase; }
.type-eyebrow-md  { font-family: var(--font-condensed); font-size: var(--text-eyebrow-md); font-weight: 400; line-height: 1.2; letter-spacing: 0.18em; text-transform: uppercase; }
.type-heading-lg  { font-family: var(--font-display); font-size: var(--text-heading-lg); font-weight: 500; line-height: 1.2; letter-spacing: -0.005em; }
.type-heading-md  { font-family: var(--font-display); font-size: var(--text-heading-md); font-weight: 500; line-height: 1.3; }
.type-body-lg     { font-family: var(--font-body); font-size: var(--text-body-lg); font-weight: 400; line-height: 1.55; letter-spacing: -0.005em; }
.type-body-md     { font-family: var(--font-body); font-size: var(--text-body-md); font-weight: 400; line-height: 1.6; }
.type-body-sm     { font-family: var(--font-body); font-size: var(--text-body-sm); font-weight: 400; line-height: 1.55; letter-spacing: 0.005em; }
.type-caption     { font-family: var(--font-body); font-size: var(--text-caption); font-weight: 500; line-height: 1.4; letter-spacing: 0.04em; }

/* === Container === */
.container { width: 100%; max-width: var(--spacing-container-max); margin-inline: auto; padding-inline: 1.5rem; }
@media (min-width: 768px) { .container { padding-inline: 3rem; } }

.section { padding-block: var(--spacing-section-y-mobile); }
@media (min-width: 1024px) { .section { padding-block: var(--spacing-section-y-desktop); } }

/* === Grain Filter === */
.grain { position: relative; isolation: isolate; }
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0.18;
  z-index: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>");
}
.grain[data-intensity="subtle"]::after { opacity: 0.10; }
.grain[data-intensity="heavy"]::after  { opacity: 0.28; }

.vignette { position: relative; isolation: isolate; }
.vignette::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(ellipse at center, transparent 0%, transparent 50%, rgba(15, 14, 12, 0.85) 100%);
}

/* === Pillar-Strich (Signatur) === */
.pillar-strich {
  display: inline-block;
  width: 48px;
  height: 2px;
  background-color: var(--pillar-accent);
  margin-right: 16px;
  vertical-align: middle;
  transform-origin: left center;
  transform: scaleX(0);
  animation: strich-in 320ms var(--ease-blade) forwards;
}
@keyframes strich-in { to { transform: scaleX(1); } }

/* === Atmender Kreis === */
.breath-circle {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 2px solid var(--color-bone-300);
  border-radius: 50%;
  animation: breath 4000ms ease-in-out infinite;
}
@keyframes breath { 0%, 100% { transform: scale(1); opacity: 0.7; } 50% { transform: scale(1.08); opacity: 1; } }

.pillar-image { filter: var(--pillar-image-filter); }

/* === Skip Link === */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background-color: var(--color-ember-600);
  color: var(--color-bone-50);
  text-decoration: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-condensed);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: top var(--duration-quick) var(--ease-blade);
}
.skip-link:focus { top: 1rem; }

/* === Word-Reveal === */
.word-reveal > span {
  display: inline-block;
  opacity: 0;
  transform: translateY(24px);
  animation: word-reveal-in var(--duration-cinema) var(--ease-breath) forwards;
}
@keyframes word-reveal-in { to { opacity: 1; transform: translateY(0); } }