/* ================================================================
   THEME: Brechtisch
   Politisches Theater, Banner-Plakate, episch
   Schwarz / Knallrot / Weiss, mono Headlines, eckig
   ================================================================ */

:root {
  /* Hintergruende */
  --bg-base:           #FFFFFF;
  --bg-alt:            #F5F5F5;
  --bg-dark:           #000000;
  --bg-card:           #FFFFFF;

  /* Text */
  --text-base:         #1A1A1A;
  --text-headline:     #000000;
  --text-muted:        #555555;
  --text-on-dark:      #FFFFFF;
  --text-link:         #C23018;

  /* Akzente */
  --accent:            #C23018;   /* Plakat-Rot — warm, harmoniert mit Foto-Wand */
  --accent-hover:      #9A2410;
  --accent-soft:       #000000;
  --accent-soft-hover: #1A1A1A;

  /* Struktur */
  --border:            #000000;
  --shadow:            rgba(0, 0, 0, 0.0);
  --shadow-strong:     rgba(0, 0, 0, 0.0);

  /* Typografie — mono fuer Headlines, sans fuer Body */
  --font-headline: "IBM Plex Mono", "Courier New", ui-monospace, monospace;
  --font-body:     "Inter", -apple-system, "Helvetica Neue", system-ui, sans-serif;
  --font-mono:     "IBM Plex Mono", "Courier New", monospace;

  /* Headline-Charakter — fett, gross gespreizt, UPPERCASE */
  --headline-weight:        700;
  --headline-letter-spacing: 0.02em;
  --headline-text-transform: uppercase;

  /* Untertitel */
  --subtitle-style:        normal;
  --subtitle-letter-spacing: 0.2em;

  /* Body */
  --body-line-height:      1.55;

  /* Buttons — scharf, eckig, schwarze Border */
  --btn-radius:            0;
  --btn-border-width:      3px;
  --btn-text-transform:    uppercase;
  --btn-font-weight:       700;

  /* Karten — eckig, mit fetter schwarzer Border */
  --card-radius:           0;
  --card-border:           3px solid #000000;
  --card-shadow:           none;

  --theme-name: "brechtisch";
}

/* "Drei Trainer." / "Three trainers." sichtbar auf schwarzem bg-dark
   (--accent-soft ist Schwarz, deshalb diese Regel-Override) */
.section--konzept .konzept__hammer span:nth-child(2) {
  color: #C23018;
}

/* Schreibmaschinen-Cursor (wird per script.js beim Typewriter-Effekt
   eingefuegt, nur waehrend das Brechtisch-Theme aktiv ist) */
.typewriter-caret {
  display: inline-block;
  color: #C23018;
  font-weight: 400;
  transform: translateY(0.08em);
  animation: brecht-cursor-blink 1s steps(1) infinite;
}

@keyframes brecht-cursor-blink {
  0%, 50%      { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

/* Schwarz-auf-Schwarz-Fix: --accent-soft ist in Brechtisch Schwarz und wird
   auf den schwarzen Flaechen (Footer, Konzept, Finale, Skepsis) verwendet —
   dort waere der Text unsichtbar. Diese Stellen explizit hell setzen. */
.site-footer a {
  color: #FFFFFF;
}
.site-footer a:hover,
.site-footer a:focus-visible {
  color: #C23018;
}

.section--konzept strong,
.section--skepsis strong,
.finale-block__kicker,
.finale-block__credits,
.section--skepsis .prose-large--accent {
  color: #FFFFFF;
}