/* ==========================================================================
   KIRUDA.DE — STYLE.CSS KOMMENTIERT

   Diese Datei enthält das komplette Styling der Homepage.
   Kommentare erklären, welcher Block wofür zuständig ist und was wichtige
   CSS-Eigenschaften bewirken.

   Hinweis:
   - CSS arbeitet von oben nach unten.
   - Wenn später dieselbe Klasse erneut definiert wird, gewinnt meistens
     die spätere Regel.
   - Werte mit var(--name) kommen aus dem :root-Bereich.
   ========================================================================== */


/* ==========================================================================
   1. LOKALE SCHRIFTARTEN
   ========================================================================== */

/* Lädt die große Headline-Schrift aus dem lokalen fonts-Ordner. */
@font-face {
  font-family: "Summer Nyumer"; /* Name, mit dem die Schrift später im CSS angesprochen wird. */
  src: url("fonts/Summer Nyumer.otf") format("opentype"); /* Pfad zur OTF-Datei. */
  font-display: swap; /* Zeigt erst eine Ersatzschrift und tauscht dann zur geladenen Schrift. */
}

/* Lädt die handschriftliche Schrift aus dem lokalen fonts-Ordner. */
@font-face {
  font-family: "TrashHand"; /* Name, mit dem die Schrift später im CSS angesprochen wird. */
  src: url("fonts/TrashHand.TTF") format("truetype"); /* Pfad zur TTF-Datei. */
  font-display: swap; /* Verhindert, dass Text unsichtbar bleibt, während die Schrift lädt. */
}


/* ==========================================================================
   2. GLOBALE VARIABLEN
   ========================================================================== */

/* :root ist die oberste Ebene der Seite. Hier werden CSS-Variablen definiert,
   damit Farben, Radien und Schatten zentral geändert werden können. */
:root {
  --sky: #A5D0FF; /* Helles Blau für den oberen Verlauf. */
  --ink: #06111f; /* Sehr dunkle Textfarbe. */
  --night: #030406; /* Fast Schwarz für dunkle Bereiche. */
  --paper: rgba(255, 255, 255, 0.78); /* Halbtransparentes Karten-Weiß. */
  --paper-strong: rgba(255, 255, 255, 0.9); /* Etwas stärker deckendes Karten-Weiß. */
  --line: rgba(6, 17, 31, 0.22); /* Dezente dunkle Linien. */
  --line-dark: rgba(255, 255, 255, 0.23); /* Dezente helle Linien für dunkle Bereiche. */
  --blue: #1d62ff; /* Kräftiges Blau für Fokus/Highlights. */
  --blue-dark: #073a98; /* Dunkles Blau für handschriftliche Labels. */
  --glow: rgba(165, 208, 255, 0.42); /* Blauer Leuchteffekt. */
  --radius-lg: 34px; /* Großer Standard-Radius für Karten. */
  --radius-md: 24px; /* Mittlerer Radius, falls kleinere Elemente ihn brauchen. */
  --shadow: 0 26px 90px rgba(0, 0, 0, 0.22); /* Großer weicher Schatten. */
}


/* ==========================================================================
   3. BASIS-RESET UND SEITEN-GRUNDLAGE
   ========================================================================== */

/* Sorgt dafür, dass padding und border in der Breite/Höhe eines Elements
   mitgerechnet werden. Das macht Layouts deutlich berechenbarer. */
* {
  box-sizing: border-box;
}

/* Globale Einstellung für die HTML-Seite. */
html {
  scroll-behavior: smooth; /* Klicks auf Ankerlinks scrollen weich zur Sektion. */
}

/* Grundgestaltung der gesamten Seite. */
body {
  margin: 0; /* Entfernt den Standard-Außenabstand des Browsers. */
  min-height: 100vh; /* Body ist mindestens so hoch wie das Browserfenster. */
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Normale Textschrift mit Fallbacks. */
  color: var(--ink); /* Standard-Textfarbe. */

  /* Mehrschichtiger Hintergrund:
     1. heller Lichtfleck links oben
     2. heller Lichtfleck rechts oben
     3. vertikaler Verlauf von Blau nach Schwarz */
  background:
    radial-gradient(circle at 12% 10%, rgba(255, 255, 255, 0.95) 0 8%, transparent 24%),
    radial-gradient(circle at 92% 18%, rgba(255, 255, 255, 0.4) 0 9%, transparent 28%),
    linear-gradient(180deg, var(--sky) 0%, #5b8cc7 34%, #111e33 64%, #000 100%);

  background-attachment: fixed; /* Hintergrund bleibt beim Scrollen optisch stehen. */
  overflow-x: hidden; /* Verhindert horizontales Scrollen durch Schatten/Rotationen. */
}

/* Pseudo-Element für das dezente Raster/Notebook-Gitter über dem Hintergrund. */
body::before {
  content: ""; /* Pseudo-Element braucht content, auch wenn es leer ist. */
  position: fixed; /* Bleibt fest im Browserfenster. */
  inset: 0; /* Kurzform für top/right/bottom/left: 0. */
  pointer-events: none; /* Das Overlay blockiert keine Klicks. */

  /* Zwei Linienverläufe ergeben ein Raster. */
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);

  background-size: 52px 52px; /* Größe der Raster-Kacheln. */
  mask-image: linear-gradient(180deg, rgba(0,0,0,.55), transparent 76%); /* Raster blendet nach unten aus. */
}

/* Zweites Hintergrund-Overlay: dunkler/blauer Glow unten. */
body::after {
  content: ""; /* Erzeugt das Pseudo-Element. */
  position: fixed; /* Bleibt beim Scrollen an Ort und Stelle. */
  inset: auto -10% -25% -10%; /* Positioniert den Glow unten und lässt ihn seitlich überstehen. */
  height: 48vh; /* Höhe des Glows relativ zur Fensterhöhe. */
  pointer-events: none; /* Blockiert keine Mausinteraktion. */
  background: radial-gradient(ellipse at center, rgba(29, 98, 255, .22), transparent 62%); /* Weicher blauer Lichtschein. */
}

/* Standard-Stil für Links. */
a {
  color: inherit; /* Links übernehmen die Textfarbe vom Elternelement. */
  text-decoration: none; /* Entfernt Unterstreichung. */
}


/* ==========================================================================
   4. HEADER UND NAVIGATION
   ========================================================================== */

/* Oberer Navigationsbereich. */
.site-header {
  position: sticky; /* Header bleibt beim Scrollen oben kleben. */
  top: 0; /* Klebt am oberen Fensterrand. */
  z-index: 10; /* Liegt über den normalen Inhaltskarten. */
  display: flex; /* Logo und Navigation werden in einer Zeile angeordnet. */
  align-items: center; /* Vertikal mittig ausrichten. */
  justify-content: flex-end; /* Ursprüngliche Ausrichtung nach rechts; wird später überschrieben. */
  gap: 28px; /* Abstand zwischen Logo und Navigation. */
  width: min(1180px, calc(100% - 32px)); /* Maximalbreite, aber mit Rand auf kleinen Screens. */
  margin: 0 auto; /* Zentriert den Header. */
  padding: 18px 0; /* Vertikaler Innenabstand. */
  backdrop-filter: blur(10px); /* Leichter Glas/Blur-Effekt hinter der Leiste. */
}

/* Container für die Navigationsbuttons. */
.main-nav {
  display: flex; /* Buttons nebeneinander. */
  gap: 8px; /* Abstand zwischen Buttons. */
  flex-wrap: wrap; /* Buttons dürfen auf kleinen Screens umbrechen. */
  justify-content: center; /* Zentriert Buttons innerhalb der Navigation. */
  order: 1; /* Reihenfolge im Flex-Layout. */
}

/* Gemeinsamer Look für Navigationsbuttons und Logo. */
.main-nav a,
.brand {
  border: 2px solid rgba(6, 17, 31, .8); /* Dunkle Umrandung. */
  border-radius: 999px 830px 760px 920px; /* Absichtlich ungleichmäßige Pillenform. */
  padding: 8px 14px; /* Innenabstand. */
  background: rgba(255, 255, 255, .32); /* Halbtransparenter heller Hintergrund. */
  box-shadow: 3px 5px 0 rgba(6, 17, 31, .15); /* Versetzter Comic-Schatten. */
  font-weight: 800; /* Fetter Text. */
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease; /* Animiert Hover/Klick weich. */
}

/* Hover-Effekt für Menü, Buttons, Plattformlinks und Kontaktlinks.
   Wird später nochmal erweitert/überschrieben. */
.main-nav a:hover,
.brand:hover,
.button:hover,
.platform-links a:hover,
.contact-card a:hover {
  transform: translateY(-2px) rotate(-1deg); /* Hebt Element leicht an und kippt es minimal. */
  box-shadow: 5px 8px 0 rgba(6, 17, 31, .18); /* Größerer Schatten beim Hover. */
  background: rgba(255, 255, 255, .72); /* Hintergrund wird heller. */
}

/* Logo/Brand-Schrift. */
.brand {
  order: 2; /* Ursprünglich nach der Navigation; wird später für links überschrieben. */
  font-family: "Patrick Hand", cursive; /* Alte Fallback-Schrift; später durch TrashHand überschrieben. */
  font-size: clamp(1.2rem, 2.2vw, 1.8rem); /* Reagiert auf Bildschirmbreite. */
  letter-spacing: .02em; /* Minimal mehr Buchstabenabstand. */
}


/* ==========================================================================
   5. ALLGEMEINE SEKTIONEN UND HERO-BEREICH
   ========================================================================== */

/* Standardbreite und Abstand für alle Hauptbereiche. */
.section {
  width: min(1120px, calc(100% - 32px)); /* Gleiche Breite wie die Inhaltsfelder. */
  margin: 0 auto; /* Zentriert die Sektion. */
  padding: 58px 0; /* Abstand oben/unten. */
  position: relative; /* Ermöglicht z-index und positionierte Kinder. */
  z-index: 1; /* Inhalt liegt über Hintergrund-Pseudo-Elementen. */
}

/* Startbereich mit Titel links und Porträt rechts. */
.hero {
  min-height: 72vh; /* Hero nimmt etwa 72 Prozent der Fensterhöhe ein. */
  display: grid; /* Zweispaltiges Layout. */
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, .8fr); /* Linke Spalte größer als rechte. */
  align-items: center; /* Ursprünglich vertikal mittig; später auf start korrigiert. */
  gap: 48px; /* Abstand zwischen Text und Bildkarte. */
  padding-top: 80px; /* Abstand unter der Navigation. */
}

/* Kleine handschriftliche Labels wie „Willkommen in“ oder „Werk 1“. */
.eyebrow,
.card-kicker {
  font-family: "Patrick Hand", cursive; /* Alte Fallback-Schrift; später durch TrashHand überschrieben. */
  color: var(--blue-dark); /* Dunkelblau. */
  font-size: clamp(1.7rem, 3vw, 2.55rem); /* Responsive Größe. */
  line-height: 1; /* Enge Zeilenhöhe für handschriftlichen Stil. */
  margin: 0 0 10px; /* Kein Abstand oben, 10px unten. */
}

/* Kleinere Variante der handschriftlichen Labels. */
.eyebrow.small {
  font-size: clamp(1.4rem, 2.4vw, 2rem); /* Etwas kleiner als normales Eyebrow. */
}

/* Riesiger KIRUDA-Titel im Hero. */
.hero h1 {
  font-size: clamp(5.4rem, 14vw, 13rem); /* Sehr groß, aber begrenzt. */
  letter-spacing: -.09em; /* Zieht Buchstaben dichter zusammen. */
  line-height: .76; /* Sehr kompakte Zeilenhöhe. */
  margin: 0; /* Entfernt Standardabstand. */
  font-weight: 900; /* Extrem fett. */
  text-transform: uppercase; /* Erzwingt Großbuchstaben. */
  text-shadow: 8px 12px 0 rgba(255, 255, 255, .32); /* Heller versetzter Schatten. */
}

/* Untertitel unter KIRUDA. */
.subtitle {
  margin: 24px 0 0; /* Abstand nach oben, kein Abstand unten. */
  font-family: "Patrick Hand", cursive; /* Alte Fallback-Schrift; später durch TrashHand überschrieben. */
  font-size: clamp(2rem, 5vw, 4.3rem); /* Große responsive Handschrift. */
  line-height: .95; /* Kompakte Zeilen. */
  color: #0a2b5c; /* Dunkelblauer Text. */
}


/* ==========================================================================
   6. KARTEN-GRUNDSTIL UND PORTRÄT
   ========================================================================== */

/* Gemeinsamer Kartenlook für Porträt, normale Cards und Kontaktcard. */
.portrait-card,
.card,
.contact-card {
  background: var(--paper); /* Halbtransparentes helles Kartenweiß. */
  border: 3px solid rgba(6, 17, 31, .8); /* Dunkle kräftige Umrandung. */
  box-shadow: var(--shadow), 7px 9px 0 rgba(6, 17, 31, .15); /* Weicher Schatten plus Comic-Versatz. */
  backdrop-filter: blur(16px); /* Glas-Effekt hinter der Karte. */
}

/* Rechte Avatar/Porträt-Karte im Hero. */
.portrait-card {
  min-height: 360px; /* Mindesthöhe der Bildkarte. */
  border-radius: 45% 55% 48% 52% / 12% 18% 13% 17%; /* Organische, leicht unregelmäßige Form. */
  display: grid; /* Inhalt kann einfach zentriert werden. */
  place-items: center; /* Zentriert Avatar horizontal und vertikal. */
  position: relative; /* Für innere pseudo/dekorative Elemente. */
  transform: rotate(2deg); /* Leicht schiefe Skizzenwirkung. */
}

/* Gestrichelter Innenrahmen der Porträtkarte. */
.portrait-card::before {
  content: ""; /* Erzeugt dekoratives Element. */
  position: absolute; /* Relativ zur Porträtkarte. */
  inset: 22px; /* Abstand nach innen. */
  border: 2px dashed rgba(29, 98, 255, .34); /* Hellblau gestrichelte Linie. */
  border-radius: 42% 58% 47% 53% / 14% 16% 13% 15%; /* Passt zur organischen Form. */
}

/* Gesicht im großen Porträt und im kleinen Mit-Host-Avatar. */
.avatar-face,
.mini-avatar {
  position: relative; /* Augen/Mund werden absolut darin positioniert. */
  width: 150px; /* Gesichtsdurchmesser. */
  aspect-ratio: 1; /* Macht das Element quadratisch. */
  border: 4px solid var(--blue-dark); /* Blaue Umrandung. */
  border-radius: 47% 53% 44% 56% / 52% 43% 57% 48%; /* Unregelmäßiger Kreis. */
  background: rgba(255,255,255,.55); /* Heller halbtransparenter Hintergrund. */
}

/* Hals/Strich unter dem Gesicht. */
.avatar-face::after,
.mini-avatar::after {
  content: ""; /* Erzeugt den Strich. */
  position: absolute; /* Position relativ zum Gesicht. */
  left: 50%; /* Start in der Mitte. */
  top: 94%; /* Direkt unter dem Gesicht. */
  width: 4px; /* Strichbreite. */
  height: 100px; /* Strichlänge. */
  background: var(--blue-dark); /* Dunkelblau. */
  transform: rotate(21deg); /* Schräger Strich. */
  transform-origin: top; /* Dreht vom oberen Punkt aus. */
}

/* Grundform der Augen. */
.eye {
  position: absolute; /* Positioniert Auge im Gesicht. */
  top: 44px; /* Abstand von oben. */
  width: 13px; /* Augenbreite. */
  height: 20px; /* Augenhöhe. */
  border-radius: 999px; /* Runde Form. */
  border: 4px solid var(--blue-dark); /* Blaue Linie. */
  border-bottom: 0; /* Unten offen, ergibt lachendes Auge. */
}

/* Linkes Auge. */
.eye-left { left: 45px; }

/* Rechtes Auge. */
.eye-right { right: 45px; }

/* Mund/Smile. */
.smile {
  position: absolute; /* Positioniert den Mund im Gesicht. */
  left: 48px; /* Abstand von links. */
  bottom: 44px; /* Abstand von unten. */
  width: 54px; /* Mundbreite. */
  height: 28px; /* Mundhöhe. */
  border: 5px solid var(--blue-dark); /* Blaue Linie. */
  border-top: 0; /* Oben offen, ergibt Smile. */
  border-radius: 0 0 999px 999px; /* Runde Unterseite. */
}

/* Text „Baquada“ unten rechts im Porträt. */
.portrait-caption {
  position: absolute; /* Relativ zur Porträtkarte. */
  bottom: 24px; /* Abstand unten. */
  right: 32px; /* Abstand rechts. */
  font-family: "Patrick Hand", cursive; /* Alte Fallback-Schrift; später durch TrashHand überschrieben. */
  font-size: 2rem; /* Schriftgröße. */
  color: var(--blue-dark); /* Dunkelblau. */
}


/* ==========================================================================
   7. STREAM-BEREICH, KARTEN UND TYPOGRAFIE
   ========================================================================== */

/* Zweispaltiger Bereich für Twitch-Clip und Streamtext. */
.split-section {
  display: grid; /* Grid-Layout. */
  grid-template-columns: .9fr 1.1fr; /* Linke Karte etwas schmaler, rechte etwas breiter. */
  gap: 32px; /* Abstand zwischen den Karten. */
}

/* Grundstil aller normalen Karten. */
.card {
  padding: clamp(24px, 4vw, 42px); /* Innenabstand wächst mit Bildschirmbreite. */
  border-radius: var(--radius-lg); /* Abgerundete Ecken. */
}

/* Große Überschriften in Karten, Sektionsüberschriften und Co-Host-Karte. */
.card h2,
.section-heading h2,
.cohost-card h2 {
  font-size: clamp(2rem, 5vw, 4.8rem); /* Responsive große Schrift. */
  line-height: .92; /* Kompakte Zeilenhöhe. */
  letter-spacing: -.06em; /* Ursprünglich enger Buchstabenabstand. */
  margin: 0 0 20px; /* Abstand unten. */
  font-weight: 900; /* Sehr fett. */
}

/* Mittlere Überschriften, z. B. Werk-Titel oder Podcast-Kartentitel. */
.card h3 {
  font-size: clamp(1.35rem, 2.6vw, 2.25rem); /* Responsive Größe. */
  line-height: 1; /* Enge Zeilenhöhe. */
  letter-spacing: -.04em; /* Etwas engerer Abstand. */
  margin: 0 0 18px; /* Abstand unten. */
}

/* Standardtext in Karten. */
.card p {
  font-size: clamp(1rem, 1.6vw, 1.15rem); /* Responsive Lesetextgröße. */
  line-height: 1.65; /* Angenehme Lesbarkeit. */
  margin: 0 0 18px; /* Abstand unter Absätzen. */
}

/* Alter Platzhalter für Twitch-Clips. Bleibt im CSS, falls die Klasse nochmal verwendet wird. */
.clip-placeholder {
  display: grid; /* Zentriert den Platzhaltertext. */
  place-items: center; /* Horizontal und vertikal zentrieren. */
  min-height: 250px; /* Mindesthöhe. */
  margin: 24px 0; /* Abstand oben/unten. */
  border: 3px dashed rgba(6, 17, 31, .45); /* Gestrichelter Rahmen. */
  border-radius: 35px 28px 38px 30px; /* Unregelmäßig runde Ecken. */
  background: linear-gradient(135deg, rgba(255,255,255,.35), rgba(165,208,255,.34)); /* Heller Verlauf. */
  font-family: "Patrick Hand", cursive; /* Handschriftliche Platzhalterschrift. */
  font-size: 2rem; /* Große Schrift. */
  color: rgba(6, 17, 31, .62); /* Halbtransparente dunkle Farbe. */
  text-align: center; /* Text zentrieren. */
  padding: 20px; /* Innenabstand. */
}


/* ==========================================================================
   8. AUTOR- UND WERKE-BEREICH
   ========================================================================== */

/* Spezielle organische Form für die Autor-Karte. */
.author-card {
  border-radius: 30px 55px 40px 70px / 38px 42px 60px 45px; /* Unregelmäßige Rundungen. */
}

/* Container für große Sektionsüberschriften. */
.section-heading {
  margin-bottom: 24px; /* Abstand zur folgenden Kartenreihe. */
  color: rgba(255,255,255,.92); /* Helle Schrift auf dunklerem Hintergrund. */
}

/* Schatten für die Überschriften im Werke- und Podcast-Bereich. */
.works-section .section-heading,
.podcast-section .section-heading {
  text-shadow: 0 2px 24px rgba(0,0,0,.3); /* Macht weiße Überschrift lesbarer. */
}

/* Allgemeiner Grid-Container für Karten. */
.card-grid {
  display: grid; /* Karten als Grid anordnen. */
  gap: 28px; /* Abstand zwischen Karten. */
}

/* Drei-Spalten-Grid für Werke und Podcastkarten. */
.card-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* Drei gleich breite Spalten. */
}

/* Ursprünglich schief gesetzte Werk-Karte 1.
   Wird weiter unten wieder auf gerade überschrieben. */
.work-card:nth-child(1) {
  transform: rotate(-1.2deg);
}

/* Ursprünglich leicht nach unten versetzte Werk-Karte 2.
   Wird weiter unten wieder auf gerade überschrieben. */
.work-card:nth-child(2) {
  transform: translateY(16px) rotate(1deg);
}

/* Ursprünglich schief gesetzte Werk-Karte 3.
   Wird weiter unten wieder auf gerade überschrieben. */
.work-card:nth-child(3) {
  transform: rotate(-.6deg);
}

/* Hervorgehobene Karte und neueste Podcastfolge sind etwas heller. */
.featured-work,
.latest {
  background: var(--paper-strong); /* Deutlichere helle Fläche. */
}

/* Statuszeilen und Meta-Infos bekommen Trennlinie und fetten Text. */
.status,
.meta {
  border-top: 2px solid rgba(6, 17, 31, .15); /* Dezente Trennlinie oben. */
  padding-top: 16px; /* Abstand zwischen Linie und Text. */
  font-weight: 700; /* Fett. */
}


/* ==========================================================================
   9. BUTTONS UND LINKS
   ========================================================================== */

/* Grundstil für normale Buttons, Plattformlinks und Kontaktlinks. */
.button,
.platform-links a,
.contact-card a {
  display: inline-flex; /* Inhalt wird flexibel und zentriert. */
  align-items: center; /* Vertikal zentrieren. */
  justify-content: center; /* Horizontal zentrieren. */
  width: fit-content; /* Button nur so breit wie sein Inhalt. */
  min-height: 44px; /* Mindesthöhe für gute Klickfläche. */
  padding: 10px 16px; /* Innenabstand. */
  border: 2px solid rgba(6, 17, 31, .84); /* Dunkle Umrandung. */
  border-radius: 999px; /* Pillenform. */
  background: #fff; /* Weißer Hintergrund. */
  font-weight: 900; /* Sehr fetter Text. */
  box-shadow: 3px 5px 0 rgba(6, 17, 31, .16); /* Comic-Schatten. */
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease; /* Weiche Animation. */
}

/* Geisterbutton/sekundärer Button mit transparenterem Hintergrund. */
.button.ghost {
  background: rgba(255,255,255,.48); /* Halbtransparentes Weiß. */
}


/* ==========================================================================
   10. PODCAST, CO-HOST UND KONTAKT
   ========================================================================== */

/* Diese Sektionen liegen im dunkleren Verlauf, daher Standardtext hell. */
.podcast-section,
.cohost-section,
.contact-section {
  color: #f7fbff; /* Fast weiß. */
}

/* Karten in dunkleren Sektionen behalten dunklen Text und hellen Kartenlook. */
.podcast-section .card,
.cohost-card,
.contact-card {
  color: var(--ink); /* Dunkler Text in den Karten. */
  border-color: rgba(255, 255, 255, .5); /* Hellere Kanten im dunklen Bereich. */
  box-shadow: 0 24px 80px rgba(0,0,0,.36), 7px 9px 0 rgba(255,255,255,.09); /* Tiefer Schatten plus heller Versatz. */
}

/* Co-Host-Karte mit Avatar links und Text rechts. */
.cohost-card {
  display: grid; /* Zweispaltiges Layout. */
  grid-template-columns: 128px 1fr; /* Avatar-Spalte und Text-Spalte. */
  gap: 28px; /* Abstand zwischen Avatar und Text. */
  align-items: center; /* Vertikal mittig ausrichten. */
  max-width: 900px; /* Begrenzte Breite. */
  margin-inline: auto; /* Zentriert horizontal. */
  transform: rotate(-1deg); /* Leicht schiefe Skizzenwirkung. */
}

/* Kleiner Avatar im Co-Host-Bereich. */
.mini-avatar {
  width: 104px; /* Kleiner als der große Hero-Avatar. */
}

/* Beim kleinen Avatar wird der Hals/Strich ausgeblendet. */
.mini-avatar::after {
  display: none; /* Entfernt den Hals-Strich. */
}

/* Kleinere Augen für den Mini-Avatar. */
.mini-avatar .eye {
  top: 30px; /* Position oben. */
  width: 9px; /* Augenbreite. */
  height: 14px; /* Augenhöhe. */
  border-width: 3px; /* Dünnere Linie. */
}

/* Linkes Auge im Mini-Avatar. */
.mini-avatar .eye-left { left: 30px; }

/* Rechtes Auge im Mini-Avatar. */
.mini-avatar .eye-right { right: 30px; }

/* Kleiner Smile im Mini-Avatar. */
.mini-avatar .smile {
  left: 33px; /* Position von links. */
  bottom: 31px; /* Position von unten. */
  width: 38px; /* Breite. */
  height: 20px; /* Höhe. */
  border-width: 3px; /* Dünnere Linie. */
}

/* Kontaktbereich ganz unten. */
.contact-card {
  text-align: center; /* Text zentrieren. */
  padding: clamp(30px, 5vw, 58px); /* Responsive Innenabstand. */
  border-radius: 42px 30px 50px 34px; /* Unregelmäßig runde Ecken. */
  background: rgba(255,255,255,.1); /* Sehr transparenter Hintergrund. */
  color: #fff; /* Weißer Text. */
}

/* Großer Claim im Footer/Kontaktbereich. */
.contact-card p {
  margin: 0 0 24px; /* Abstand nach unten. */
  font-family: "Patrick Hand", cursive; /* Alte Fallback-Schrift; später durch TrashHand überschrieben. */
  font-size: clamp(2.3rem, 7vw, 6.6rem); /* Sehr groß und responsive. */
  line-height: .92; /* Kompakt. */
}

/* Kontaktlink in der Kontaktkarte wird dunkel, damit er im weißen Button lesbar ist. */
.contact-card a {
  color: var(--ink); /* Dunkle Schrift. */
}


/* ==========================================================================
   11. RESPONSIVE DESIGN
   ========================================================================== */

/* Anpassungen für Tablets und kleinere Bildschirme. */
@media (max-width: 860px) {
  .site-header {
    justify-content: center; /* Header-Inhalte zentrieren. */
    gap: 12px; /* Kleinere Abstände. */
  }

  .brand {
    order: 0; /* Logo zuerst. */
    width: 100%; /* Logo bekommt eigene Zeile. */
    text-align: center; /* Logo zentrieren. */
  }

  .main-nav {
    order: 1; /* Navigation danach. */
  }

  .hero,
  .split-section,
  .card-grid.three,
  .cohost-card {
    grid-template-columns: 1fr; /* Alle mehrspaltigen Layouts werden einspaltig. */
  }

  .hero {
    min-height: auto; /* Hero muss mobil nicht fast bildschirmhoch sein. */
    padding-top: 48px; /* Etwas weniger Abstand oben. */
  }

  .portrait-card {
    min-height: 270px; /* Kleinere Porträtkarte. */
  }

  .work-card:nth-child(n) {
    transform: none; /* Mobile Werk-Karten gerade setzen. */
  }

  .cohost-card {
    text-align: center; /* Inhalt zentrieren. */
    justify-items: center; /* Grid-Inhalte horizontal zentrieren. */
  }
}

/* Anpassungen für kleine Smartphones. */
@media (max-width: 540px) {
  .section {
    width: min(100% - 22px, 1120px); /* Etwas weniger Seitenrand. */
    padding: 42px 0; /* Weniger vertikaler Abstand. */
  }

  .main-nav a {
    padding: 7px 10px; /* Kleinere Navigationsbuttons. */
    font-size: .9rem; /* Kleinere Schrift. */
  }

  .hero h1 {
    font-size: clamp(4rem, 21vw, 6rem); /* Hero-Titel auf Smartphones begrenzen. */
  }

  .card {
    padding: 24px; /* Weniger Innenabstand. */
  }

  .clip-placeholder {
    min-height: 180px; /* Kleinerer alter Clip-Platzhalter. */
  }
}


/* ==========================================================================
   12. TWITCH-CLIP UND BUTTON-REIHE
   ========================================================================== */

/* Buttonreihe unter dem Twitch-Clip. */
.button-row {
  display: flex; /* Buttons nebeneinander. */
  flex-wrap: wrap; /* Auf kleinen Screens dürfen Buttons umbrechen. */
  gap: 12px; /* Abstand zwischen Buttons. */
  align-items: center; /* Vertikal ausrichten. */
}

/* Button-Element soll wie ein normaler Button aussehen, aber die Website-Schrift erben. */
button.button {
  font: inherit; /* Erbt Schriftgröße, Familie und Gewicht. */
  cursor: pointer; /* Zeigt Hand-Cursor beim Hover. */
}


/* ==========================================================================
   13. KORREKTUREN: HERO, WERKE, TWITCH, PLATTFORMEN
   ========================================================================== */

/* Hero wird oben ausgerichtet, damit das Porträt nicht in die Überschrift läuft. */
.hero {
  align-items: start; /* Elemente starten oben statt vertikal mittig. */
  gap: 56px; /* Etwas mehr Abstand zwischen Text und Porträt. */
}

/* Hero-Text liegt sicher über anderen Elementen. */
.hero-copy {
  position: relative; /* Erlaubt z-index. */
  z-index: 2; /* Liegt über dem Porträt, falls sich etwas überlappt. */
  min-width: 0; /* Verhindert Grid-Überlauf bei großen Texten. */
}

/* KIRUDA wurde etwas kontrollierter skaliert. */
.hero h1 {
  font-size: clamp(5rem, 11vw, 10.5rem); /* Weniger riesig als ältere Variante. */
}

/* Porträt bekommt Abstand nach oben, damit es nicht in die Überschrift rutscht. */
.portrait-card {
  position: relative; /* Für z-index und pseudo-elemente. */
  z-index: 1; /* Liegt unter hero-copy. */
  margin-top: clamp(72px, 9vw, 122px); /* Schiebt Porträt auf Desktop tiefer. */
}

/* Werk-Karten werden gerade nebeneinander gesetzt. */
.work-card,
.work-card:nth-child(1),
.work-card:nth-child(2),
.work-card:nth-child(3),
.featured-work {
  transform: none; /* Entfernt Rotation und vertikalen Versatz. */
}

/* Twitch-Player im normalen 16:9-Videoformat. */
.clip-frame {
  overflow: hidden; /* Verhindert, dass iframe über Rundungen hinausragt. */
  aspect-ratio: 16 / 9; /* Klassisches Videoformat. */
  width: 100%; /* Nimmt volle Kartenbreite. */
  margin: 24px 0; /* Abstand oben/unten. */
  border: 3px solid rgba(6, 17, 31, .72); /* Dunkler Rahmen. */
  border-radius: 28px; /* Runde Ecken. */
  background: rgba(6, 17, 31, .9); /* Dunkler Hintergrund während iframe lädt. */
  line-height: 0; /* Entfernt möglichen Inline-Abstand um iframe. */
}

/* Twitch-iframe füllt den Clip-Rahmen komplett. */
.clip-frame iframe {
  display: block; /* Verhindert Unterlücken wie bei inline-Elementen. */
  width: 100%; /* Volle Breite. */
  height: 100%; /* Volle Höhe. */
  border: 0; /* Kein iframe-Standardrahmen. */
}

/* Buttonreihe unter dem Twitch-Clip, erneut definiert, damit sie sicher gewinnt. */
.button-row {
  display: flex; /* Buttons nebeneinander. */
  flex-wrap: wrap; /* Umbruch möglich. */
  gap: 12px; /* Abstand. */
  align-items: center; /* Vertikal mittig. */
}

/* Button-Element erbt Schrift und zeigt Hand-Cursor. */
button.button {
  font: inherit; /* Erbt Schrift. */
  cursor: pointer; /* Klickbarer Cursor. */
}

/* Plattformlinks untereinander statt nebeneinander. */
.platform-links {
  display: grid; /* Jeder Button bekommt eigene Zeile. */
  gap: 14px; /* Abstand zwischen Plattformbuttons. */
  margin-top: 18px; /* Abstand zur Überschrift. */
}

/* Einzelner Plattformbutton mit Icon, Text und Pfeil. */
.platform-link {
  display: grid; /* Drei Spalten: Icon, Text, Pfeil. */
  grid-template-columns: 34px 1fr auto; /* Icon-Spalte, flexible Textspalte, Pfeil. */
  align-items: center; /* Vertikal mittig. */
  gap: 12px; /* Abstand zwischen Icon/Text/Pfeil. */
  width: 100%; /* Button füllt die Kartenbreite. */
  min-height: 52px; /* Gute Klickhöhe. */
  padding: 10px 16px; /* Innenabstand. */
  border: 2px solid rgba(6, 17, 31, .84); /* Dunkler Rahmen. */
  border-radius: 999px; /* Pillenform. */
  color: var(--ink); /* Dunkle Schrift. */
  background: #fff; /* Weißer Button. */
  font-weight: 900; /* Fetter Text. */
  box-shadow: 3px 5px 0 rgba(6, 17, 31, .16); /* Comic-Schatten. */
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease; /* Hover-Animation. */
}

/* Container für das SVG-Icon links im Plattformbutton. */
.platform-icon {
  display: inline-grid; /* Icon wird einfach zentriert. */
  place-items: center; /* Zentriert SVG. */
  width: 28px; /* Icon-Box Breite. */
  height: 28px; /* Icon-Box Höhe. */
}

/* SVG-Icon selbst. */
.platform-icon svg {
  display: block; /* Entfernt inline-Lücken. */
  width: 25px; /* Iconbreite. */
  height: 25px; /* Iconhöhe. */
}

/* SVG-Pfade bekommen die Farbe vom Elternelement. */
.platform-icon svg path {
  fill: currentColor; /* Nutzt color aus .platform-link.xyz .platform-icon. */
}

/* Farben der einzelnen Plattformicons. */
.platform-link.youtube .platform-icon { color: #ff0000; } /* YouTube-Rot. */
.platform-link.apple .platform-icon { color: #8e44ff; } /* Apple-Podcasts-Lila. */
.platform-link.deezer .platform-icon { color: #ff6a00; } /* Deezer-Orange. */
.platform-link.spotify .platform-icon { color: #1ed760; } /* Spotify-Grün. */
.platform-link.instagram .platform-icon { color: #e4405f; } /* Instagram-Pink. */
.platform-link.linktree .platform-icon { color: #39e09b; } /* Linktree-Grün. */

/* Pfeil rechts in Plattformbuttons. */
.platform-arrow {
  color: var(--blue-dark); /* Dunkelblau. */
  font-size: 1.15rem; /* Etwas größer als Normaltext. */
  line-height: 1; /* Keine extra Höhe. */
}

/* Vereinheitlichter Hover-Effekt für alle klickbaren Button-Elemente. */
.main-nav a:hover,
.brand:hover,
.button:hover,
.contact-card a:hover,
.platform-link:hover {
  transform: translateY(-2px) rotate(-1deg); /* Hebt an und kippt leicht. */
  box-shadow: 5px 8px 0 rgba(6, 17, 31, .18); /* Verstärkter Schatten. */
  background: rgba(255, 255, 255, .72); /* Hellerer Hintergrund. */
}

/* Klick-Effekt: Element wird kurz nach unten gedrückt. */
.main-nav a:active,
.brand:active,
.button:active,
.contact-card a:active,
.platform-link:active {
  transform: translateY(1px) rotate(0deg); /* Drückt Element optisch runter. */
  box-shadow: 1px 2px 0 rgba(6, 17, 31, .18); /* Kleinerer Schatten beim Klick. */
}

/* Mobile Korrektur: Porträt nicht extra nach unten schieben. */
@media (max-width: 860px) {
  .portrait-card {
    margin-top: 0; /* Entfernt Desktop-Abstand. */
  }
}


/* ==========================================================================
   14. HEADER-KORREKTUR: GLEICHE BREITE WIE INHALTSFELDER
   ========================================================================== */

/* Header wird auf dieselbe Gesamtbreite wie die Inhaltssektionen gesetzt. */
.site-header {
  width: min(1120px, calc(100% - 32px)); /* Gleiche Breite wie .section. */
  max-width: none; /* Keine zusätzliche Maximalbreite. */
  margin: 0 auto; /* Zentriert im Fenster. */
  padding: 18px 0; /* Vertikaler Abstand. */
  justify-content: space-between; /* Logo links, Navigation rechts. */
}

/* Logo links im Header. */
.brand {
  order: 0; /* Logo kommt vor Navigation. */
  margin-right: auto; /* Schiebt Navigation nach rechts. */
}

/* Navigation rechts im Header. */
.main-nav {
  order: 1; /* Navigation kommt nach Logo. */
  margin-left: auto; /* Bleibt rechts. */
}

/* Mobile Header-Anpassung. */
@media (max-width: 860px) {
  .site-header {
    width: min(1120px, calc(100% - 32px)); /* Auch mobil mit Seitenrand. */
    margin: 0 auto; /* Zentriert. */
    padding: 18px 0; /* Abstand. */
    justify-content: center; /* Inhalte mittig. */
  }

  .brand {
    width: auto; /* Logo nicht mehr ganze Zeile erzwingen. */
    margin-right: 0; /* Kein automatisches Wegschieben. */
  }

  .main-nav {
    margin-left: 0; /* Navigation nicht künstlich nach rechts schieben. */
  }
}


/* ==========================================================================
   15. NEUE SCHRIFTARTEN
   ========================================================================== */

/* Große Headlines bekommen Summer Nyumer. */
.hero h1,
.card h2,
.section-heading h2,
.cohost-card h2,
.card h3 {
  font-family: "Summer Nyumer", "Inter", system-ui, sans-serif; /* Neue Headline-Schrift plus Fallbacks. */
  letter-spacing: 0.01em; /* Leichter Abstand, besser für diese Schrift. */
}

/* Handschriftliche Elemente bekommen TrashHand. */
.eyebrow,
.card-kicker,
.subtitle,
.brand,
.portrait-caption,
.contact-card p {
  font-family: "TrashHand", "Patrick Hand", cursive; /* Neue Handschrift plus Fallbacks. */
}


/* ==========================================================================
   16. ANKER-SPRÜNGE UNTER DER FESTEN NAVIGATION
   ========================================================================== */

/* Wenn ein Menüpunkt angeklickt wird, bleibt Abstand unter dem Sticky-Header. */
html {
  scroll-padding-top: 120px; /* Abstand für Browser-eigenes Scrollen zu Ankern. */
}

/* Jede Sektion bekommt beim Anspringen zusätzlichen oberen Abstand. */
.section {
  scroll-margin-top: 120px; /* Verhindert, dass Überschriften unter der Navigation verschwinden. */
}

/* Auf kleineren Screens ist der Header oft höher, daher mehr Abstand. */
@media (max-width: 860px) {
  html {
    scroll-padding-top: 150px; /* Größerer Abstand mobil/tablet. */
  }

  .section {
    scroll-margin-top: 150px; /* Größerer Anker-Abstand mobil/tablet. */
  }
}