/* Extracted verbatim from docs/design-source.html. */
  :root {
    /* === Brand-Tokens (theme-invariant) === */
    --ink:       #0A0A0C;
    --charcoal:  #151517;
    --graphite:  #2A2C30;
    --stone:     #888888;
    --mist:      #E5E5E5;
    --paper:     #F0F0F0;
    --white:     #FFFFFF;
    --accent:    #D8FF3C;
    --accent-dim: rgba(216, 255, 60, 0.18);

    /* === Semantische Tokens (theme-aware, Dark = Default) === */
    --bg:        var(--charcoal);   /* Body / Section-Default */
    --bg-deep:   var(--ink);        /* Eingelassene Surfaces (Cards) */
    --bg-elev:   var(--graphite);   /* Erhöhte Surfaces */
    --fg:        var(--paper);      /* Primärtext */
    --fg-mute:   var(--stone);      /* Sekundärtext */
    --line:      var(--graphite);   /* Subtile Borders */
    --line-soft: rgba(255,255,255,0.06);

    /* Spacing */
    --gutter:   24px;
    --margin:   96px;
    --max:      1320px;

    /* Animation Easings */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-io:  cubic-bezier(0.7, 0, 0.3, 1);

    /* === Hexagon-Form (Logo-Proportional, NICHT gestaucht) ===
       Logo-Ratio: width/height = 150/170 = 0.882
       Polygon nutzt volle Container-Höhe, Hexagon-Breite = 88% des Containers,
       6% Padding links/rechts. Garantiert konsistente Form überall. */
    --hex-clip: polygon(50% 0%, 94% 25%, 94% 75%, 50% 100%, 6% 75%, 6% 25%);
  }


  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    background: var(--bg);
    color: var(--fg);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    transition: background 0.4s var(--ease-out), color 0.4s var(--ease-out);
  }
  ::selection { background: var(--accent); color: var(--ink); }

  /* ============ TYPOGRAPHIE ============
     Display = Mona Sans Black (wdth 125, brutalist-modern, GitHub-Custom, premium)
     Body    = Inter (Workhorse)
     Mono    = Geist Mono — NUR für echte Daten (Zahlen, Dates, IDs)
                niemals für Bylines / Marketing-Text. */

  h1, h2, h3, h4, h5, .display, .display-xl, .display-l, .display-m {
    font-family: 'Mona Sans', 'Unbounded', 'Inter', sans-serif;
    font-weight: 900;
    font-variation-settings: 'wdth' 125;
  }
  .display-xl { font-size: clamp(3rem, 7.5vw, 6.5rem); line-height: 1.0;  letter-spacing: -0.035em; }
  .display-l  { font-size: clamp(2.5rem, 5vw, 4.5rem);  line-height: 1.05; letter-spacing: -0.03em; }
  .display-m  { font-size: clamp(2rem, 3.6vw, 3.25rem); line-height: 1.1;  letter-spacing: -0.025em; }
  h1 { font-size: clamp(1.75rem, 2.6vw, 2.25rem); line-height: 1.15; letter-spacing: -0.02em; }
  h2 { font-size: 1.625rem; line-height: 1.25; letter-spacing: -0.015em; font-weight: 800; font-variation-settings: 'wdth' 118; }
  h3 { font-size: 1.125rem; line-height: 1.35; letter-spacing: -0.01em; font-weight: 700; font-variation-settings: 'wdth' 112; }

  .body-l { font-size: 1.0625rem; line-height: 1.65; font-weight: 400; color: var(--paper); }
  .small  { font-size: 0.875rem;  line-height: 1.55; color: var(--stone); }
  .micro  { font-size: 0.75rem;   line-height: 1.5;  color: var(--stone); }

  /* Eyebrow: Inter mit tight tracking — KEIN Mono mehr */
  .eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem; font-weight: 600;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--stone);
    display: inline-flex; align-items: center; gap: 12px;
  }
  .eyebrow::before {
    content: ''; width: 8px; height: 8px;
    background: var(--accent);
    clip-path: var(--hex-clip);
  }
  .eyebrow--plain::before { display: none; }

  /* Mono: nur für DATEN (Zahlen, Dates, Hex-IDs) */
  .data {
    font-family: 'Geist Mono', 'Spline Sans Mono', ui-monospace, monospace;
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--stone);
    font-feature-settings: 'tnum';
  }
  .data--small { font-size: 0.6875rem; }
  .data--accent { color: var(--accent); }
  .data--paper { color: var(--paper); }

  /* Byline: Inter, italic, designer-elegant */
  .byline {
    font-family: 'Inter', sans-serif;
    font-style: italic;
    font-weight: 300;
    font-size: 0.9375rem;
    color: var(--stone);
  }

  .punctuated::after { content: '.'; color: var(--accent); }
  .accent-dot { color: var(--accent); }


  .btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 26px;
    font-family: 'Mona Sans', 'Unbounded', sans-serif;
    font-weight: 800;
    font-variation-settings: 'wdth' 115;
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out),
                border-color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
    position: relative;
    isolation: isolate;
  }
  .btn-primary {
    background: var(--accent);
    color: var(--ink);
  }
  .btn-primary:hover {
    background: var(--fg);
    transform: translateY(-2px);
  }
  .btn-secondary {
    background: transparent;
    border-color: var(--fg);
    color: var(--fg);
  }
  .btn-secondary:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--ink);
    transform: translateY(-2px);
  }
  .btn-ghost {
    background: transparent;
    color: var(--fg);
    padding: 14px 4px;
  }
  .btn-ghost::after {
    content: '';
    position: absolute;
    bottom: 8px; left: 4px; right: 4px;
    height: 1.5px;
    background: var(--accent);
    transform-origin: left;
    transform: scaleX(0);
    transition: transform 0.35s var(--ease-out);
  }
  .btn-ghost:hover::after { transform: scaleX(1); }