@font-face {
  font-family: "Inclusive Sans";
  src: url(../fonts/InclusiveSans.woff2);
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}

@font-face {
  font-family: "Inclusive Sans";
  src: url(../fonts/InclusiveSans-Italic.woff2);
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
}

:root {
  --color-text: #1b193b;
  --color-background: #ffffff;
  --color-primary: #f1fb31;

  --font-body: "Inclusive Sans", Arial, sans-serif;
  --font-heading: "Inclusive Sans", Arial, sans-serif;

  --font-size-body: 1.4rem;
  --font-size-small: 0.875rem;
  --font-size-h1: clamp(2.25rem, 4vw, 4rem);
  --font-size-h2: clamp(1.75rem, 3vw, 3rem);

  --font-weight-h1: 700;

  --spacing-heading-body: 1rem;

  --content-width: 75%;
  --content-width-wide: 90%;

  /* Höchstbreite der großen Sprechblasen (Projektübersicht, Aktuelles,
     Info-Tabs auf Projektseiten). rem statt px, damit
     die Blasen mitwachsen, wenn im Browser eine größere Grundschrift
     eingestellt ist. */
  --bubble-width: 55rem;

  /* Dicke/Abstand der Unterstreichung bei Logo (.site-title em) und
     Hauptnavigation (.nav-links). rem statt em */
  --nav-underline-thickness: 0.15rem;
  --nav-underline-offset: 0.375rem;

  /* Einheitlicher Seitenrand im Mobil-Layout (bis 700px): Titel,
     Navigation, Bilder, Sprechblasen und Texte beginnen alle an
     derselben Kante. */
  --gutter-mobile: 1.5rem;

  /* Abstand zwischen Navigation und H1 auf den Default-Seiten
     (Impressum, Datenschutz, Kontakt …). Wird zusätzlich zum
     Innenabstand der Navigation (1rem) gerechnet. Mobil-Wert
     siehe @media (max-width: 700px) direkt darunter. */
  --spacing-nav-default-page: 3rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

@media (max-width: 700px) {
  :root {
    --font-size-body: 1.1rem;
    --font-size-h2: 1.5rem;
    --spacing-nav-default-page: 1.5rem;
  }
}

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: 1.3;
  font-weight: 450;

  /* Footer auch auf kurzen Seiten (z. B. Impressum) am unteren
     Bildschirmrand: body mindestens so hoch wie das Fenster,
     <main> füllt den freien Platz (siehe main unten).
     100dvh berücksichtigt auf Mobil die ein-/ausfahrende
     Browserleiste, 100vh ist der Fallback für ältere Browser. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

main {
  flex-grow: 1;
}

::selection {
  background-color: var(--color-primary);
  color: var(--color-text);
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.1;
}

h1 {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-h1);
  margin: 0 0 var(--spacing-heading-body);
}

h2 {
  font-size: var(--font-size-h2);
}

a {
  color: inherit;
  /* Unterstreichung von Links im Fließtext wie in Navigation und Logo
     (Variablen in :root). 
     Navigation, Projektkarten usw. setzen ihre Unterstreichung selbst. */
  text-decoration-thickness: var(--nav-underline-thickness);
  text-underline-offset: var(--nav-underline-offset);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Sprechblasen "Ebene 1" */

.speech-bubble {
  --tip-x: 50%;
  --tip-rotate: 0deg;
  --tip-width: clamp(3.5rem, 7vw, 4.5rem);
  --tip-height: calc(var(--tip-width) * 1.528);
  --tip-gap: 0.5rem;

  position: relative;
  isolation: isolate;

  width: var(--content-width);
  margin: 7rem auto 0;

  --bubble-color: var(--color-primary);
}

.speech-bubble[data-points-to="nav-projects"],
.speech-bubble[data-points-to="nav-news"] {
  margin-top: calc(var(--tip-height) + var(--tip-gap));

  width: var(--content-width-wide);
  max-width: max(var(--bubble-width), var(--bubble-width) + 0.9 * (100% - 1800px));
}

@media (max-width: 700px) {
  .speech-bubble[data-points-to="nav-projects"],
  .speech-bubble[data-points-to="nav-news"] {
    /* Zipfel im Mobil-Layout kleiner (verhindert, dass er zu breit für
       schmale Screens wird). */
    --tip-width: clamp(3.5rem, 4vw, 5em);
    /* gleicher Rand wie alle Sprechblasen im Mobil-Layout */
    width: auto;
    margin-inline: var(--gutter-mobile);
  }
}

.speech-bubble__shape {
  position: absolute;
  z-index: 0;
  inset: 0;

  display: block;
  width: 100%;
  height: 100%;
}

.speech-bubble__content {
  position: relative;
  z-index: 1;
  padding: clamp(3rem, 5vw, 5rem);

  ::selection {
    background-color: var(--color-text);
    color: var(--color-primary);
  }
}

.speech-bubble__content--homepage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;

  /* Innenabstand relativ zur Blasenbreite (cqw), damit der Text auch
     bei schmaler Blase nicht bis an den Rand läuft. */
  padding: clamp(1.25rem, 7cqw, 2.5rem) clamp(1.25rem, 8cqw, 3rem);
  font-size: max(1.4rem, 6cqw);
  color: var(--color-background);
  text-align: center;
}

.speech-bubble__content--homepage p {
  width: 100%;
  margin: 0;
  text-align: center;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}

.speech-bubble__tip {
  position: absolute;
  z-index: 2;
  bottom: calc(100% + var(--tip-gap));
  left: var(--tip-x);

  display: block;
  width: var(--tip-width);
  height: auto;
  aspect-ratio: 72 / 110;

  transform: translateX(-50%) rotate(var(--tip-rotate));
}

/* Drehpunkt = Mittelpunkt der gerundeten Blasenecke (--tip-pivot unterhalb
   der Zipfel-Basis, per JS gesetzt). So läuft die Basis an der Rundung
   entlang und die Spitze zeigt auf ihr Ziel (siehe positionSpeechBubbleTips). */
.speech-bubble[data-points-to] .speech-bubble__tip {
  transform-origin: 50% calc(100% + var(--tip-pivot, 0px));
}

.speech-bubble__shape path,
.speech-bubble__tip path {
  fill: var(--bubble-color);
}

.speech-bubble--news {
  --bubble-color: var(--color-text);
}

/* Aktuelles: mehr Abstand zwischen Blasenrand und Text als bei den
   übrigen Sprechblasen (dort clamp(3rem, 5vw, 5rem)). */
.speech-bubble--news .speech-bubble__content {
  padding: clamp(3rem, 8vw, 7rem);
}

/* Aktuelles: Textbreite begrenzen. Die Blase wächst ab 1800px wieder
   mit (siehe .speech-bubble[data-points-to="nav-news"]), die Zeilen
   sollen aber nicht länger werden als bei fester Blasenbreite:
   --bubble-width minus Innenabstand links und rechts (je 7rem).
   Der Inhalt bleibt in der Blase mittig. */
.speech-bubble--news .news {
  max-width: calc(var(--bubble-width) - 2 * 7rem);
  margin-inline: auto;
}

.speech-bubble--tab {
  width: 100%;

  /* --tip-width skaliert per vw (siehe .speech-bubble oben, bei sehr
     breiten Screens gedeckelt bei 4.5rem) - ein fester margin-top wuerde
     bei groesserem Zipfel nicht reichen und der Zipfel wuerde in die Tabs
     hineinragen. Deshalb immer dynamisch anhand der tatsaechlichen
     Zipfelgroesse berechnet statt fest (kein zusaetzlicher Puffer mehr,
     siehe dieselbe Anpassung bei den nav-projects/nav-news-Bubbles oben). */
  margin-top: calc(var(--tip-height) + var(--tip-gap) + 0.75rem);
}

.speech-bubble--hero {
  --bubble-color: var(--color-text);
}

.speech-bubble--hero .speech-bubble__tip {
  top: var(--hero-tip-inset);
  right: calc(100% + var(--tip-gap) + var(--hero-tip-offset, 0.75rem));
  bottom: auto;
  left: auto;

  transform: translateY(-50%) rotate(-90deg);
}

@media (max-width: 700px) {
  .hero-image__bubble.speech-bubble--hero .speech-bubble__tip {
    top: auto;
    right: auto;
    bottom: calc(100% + var(--tip-gap));
    left: clamp(2.5rem, 8vw, 5rem);

    /* Desktop-Drehung (-90°, Zipfel zeigt nach links) aufheben:
       Zipfel steht wieder aufrecht und zeigt nach oben aufs Foto.
       left = Abstand der linken Zipfelkante zur Blase. */
    transform: none;
  }
}

@media (max-width: 700px) {
  .speech-bubble {
    width: auto;
    margin-inline: var(--gutter-mobile);
  }
}

/* Skip-Link: unsichtbar, erscheint nur beim ersten Druck auf die
   Tab-Taste oben links. Dunkel mit gelber Schrift, damit er sowohl auf
   dem gelben Header der Startseite als auch auf Weiß sichtbar ist. */
.skip-link {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 1000;

  padding: 0.75rem 1.25rem;
  background: var(--color-text);
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;

  /* nach oben aus dem Bild geschoben */
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
  outline: 0.1875rem solid var(--color-primary);
  outline-offset: 0.2rem;
}

/* Navigation ab hier */

.main-nav {
  /* Hintergrundfarbe der Navigation als Variable, z. B. für den
     Knopf des Sprach-Schalters (Startseite gelb, sonst weiß) */
  --nav-bg: var(--color-background);

  padding-top: 1rem;
  padding-bottom: 1rem;
  background-color: var(--color-background);

  user-select: none;
  -webkit-user-select: none;
}

.header-home .main-nav {
  --nav-bg: var(--color-primary);
  background-color: var(--color-primary);
}

.nav-content {
  width: var(--content-width-wide);
  margin-inline: auto;
  /* Bezugsgröße für die cqw-Werte von Seitentitel und Navigation */
  container-type: inline-size;

  display: flex;
  align-items: flex-end;
}

@media (max-width: 700px) {
  .main-nav {
    padding-bottom: 0.5rem;
  }

}

.site-title {
  display: flex;
  flex-direction: column;
  line-height: 0.85;
  /* 4rem – zwischen ca. 700 und 845px Fensterbreite kleiner, damit
     Titel und Navigation nebeneinander passen (siehe .nav-links).
     Mobil: eigene Regel im @media-Block. */
  font-size: min(4rem, 8.4cqw);
  font-weight: 700;
  text-decoration: none;

  /* Feinkorrektur um Navigation/Logo aufeinander auszurichten*/
  transform: translateY(0.22rem);
}

.site-title span {
  display: block;
}

/* Startseite: Seitentitel steckt in einem <h1> (header.php).
   Browser-Vorgaben des h1 zurücksetzen, damit sich optisch nichts ändert. */
.site-title-heading {
  margin: 0;
  font: inherit;
}

.site-title em {
  font-style: italic;

  /* Unterstreichung bei Hover, gleiche Animation und Strichdicke
     wie bei .nav-links a/button weiter unten in dieser Datei.
     text-decoration: none auf .site-title (oben) verhindert das
     nicht, da em hier ihre eigene Unterstreichung setzt. */
  text-decoration: underline;
  text-decoration-thickness: var(--nav-underline-thickness);
  text-underline-offset: var(--nav-underline-offset);
  text-decoration-color: transparent;
  transition: text-decoration-color 0.5s ease;
}

.site-title:hover em,
.site-title:focus-visible em {
  text-decoration-color: currentColor;
}

.nav-links {
  display: flex;

  /* Titel und Navigation passen immer in .nav-content:
     In voller Größe brauchen sie zusammen ca. 760px. Ist .nav-content
     schmaler (Fenster ca. 700–845px), schrumpfen Schrift und Abstände
     von Titel und Navigation gemeinsam im selben Verhältnis.
     cqw = 1 % der Breite von .nav-content (ohne Scrollleiste – mit vw
     zählte eine sichtbare Scrollleiste mit und die Navigation ragte
     über den Rand). 1.25rem ≈ 2.6cqw, 1.5rem ≈ 3.1cqw, 2rem ≈ 4.2cqw,
     Seitentitel 4rem ≈ 8.4cqw – jeweils bezogen auf 760px. */
  gap: min(1.5rem, 3.1cqw);
  margin-left: min(2rem, 4.2cqw);
  font-size: min(1.25rem, 2.6cqw);
  font-weight: 600;
  line-height: 1;
  transform: translateY(0.1em);
}

@media (max-width: 700px) {
  .nav-content {
    width: auto;
    margin-inline: var(--gutter-mobile);
    flex-direction: column;
    align-items: flex-start;
  }

  .nav-links {
    flex-direction: row;
    margin-left: 0;
    padding-left: 0;
    margin-top: 1.5rem;
    gap: 0.4em;

    /* Schrift so berechnet, dass Projekte, Aktuelles und der
       Sprach-Schalter einzeilig passen (gemessen an Inclusive Sans 600:
       ca. 19em Gesamtbreite inkl. Abständen und Schalter).
       clamp(min, ideal, max): nie kleiner als 0.875rem, nie größer als
       1.25rem (= Desktop-Größe), dazwischen mit der Fensterbreite.
       Ca. 16px bei 375px, 17px bei 390px, 19px bei 430px Breite,
       ab ca. 450px unverändert 1.25rem. */
    font-size: clamp(0.875rem, 5.2vw - 0.2rem, 1.25rem);
  }

  /* Seitentitel: gleiches Prinzip – bei 320px ca. 3.6rem statt 4rem,
     ab ca. 360px unverändert 4rem. */
  .site-title {
    font-size: clamp(2.5rem, 18vw, 4rem);
  }
}

.nav-links a,
.nav-links button {
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-decoration-thickness: var(--nav-underline-thickness);
  text-underline-offset: var(--nav-underline-offset);
  text-decoration-color: transparent;
  transition: text-decoration-color 0.5s ease;
}

.nav-links button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

.nav-links a:hover,
.nav-links a:focus-visible,
.nav-links button:hover,
.nav-links button:focus-visible {
  text-decoration-color: currentColor;
}

.nav-links a[aria-current] {
  text-decoration-color: currentColor;
}

.nav-links:has(a:hover, button:hover) a[aria-current]:not(:hover) {
  text-decoration-color: transparent;
}


/* Sprach-Schalter (Leichte Sprache an/aus) in der Navigation.
   Aus: leerer Rahmen, dunkler Knopf links.
   An:  gefüllte Fläche, heller Knopf rechts. */
.language-switch {
  display: inline;
  margin: 0;
}

.language-switch__button {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  /* „Leichte Sprache“ nie umbrechen */
  white-space: nowrap;
}

/* Ausgeschaltet: andere Schriftstärke als die übrige Navigation (600) */
.language-switch__button[aria-checked="false"] {
  font-weight: 450;
}

.language-switch__track {
  --switch-height: 0.9em;
  --switch-width: 1.7em;
  --switch-stroke: var(--nav-underline-thickness);
  --switch-inset: 0.12em;
  --switch-knob: calc(var(--switch-height) - 2 * var(--switch-stroke) - 2 * var(--switch-inset));

  position: relative;
  flex: none;
  width: var(--switch-width);
  height: var(--switch-height);
  border: var(--switch-stroke) solid currentColor;
  border-radius: var(--switch-height);
  transition: background-color 0.2s ease;
}

.language-switch__track::after {
  content: "";
  position: absolute;
  /* Senkrecht mittig über top 50% + translate statt fester Abstände:
     Firefox rundet Rahmenstärken auf ganze Pixel, feste Werte
     landeten dort leicht außermittig. */
  top: 50%;
  translate: 0 -50%;
  left: var(--switch-inset);
  width: var(--switch-knob);
  height: var(--switch-knob);
  border-radius: 50%;
  background-color: currentColor;
  transition: left 0.2s ease, background-color 0.2s ease;
}

.language-switch__button[aria-checked="true"] .language-switch__track {
  background-color: currentColor;
}

.language-switch__button[aria-checked="true"] .language-switch__track::after {
  left: calc(100% - var(--switch-knob) - var(--switch-inset));
  background-color: var(--nav-bg);
}

.nav-page-title {
  display: inline;
  margin: 0;
  padding: 0;
  font: inherit;
}

/* Wiederverwendbarer Fokus-Stil (Rahmen in Textfarbe statt
   Hinterlegung): einfach die Klasse "focus-outline" an ein
   interaktives Element vergeben, egal wo auf der Seite. Reagiert nur
   auf :focus-visible (Tastatur-/Nicht-Zeiger-Fokus), nicht auf
   Mausklick – WCAG 2.4.7/2.4.11 verlangen einen sichtbaren
   Fokusindikator nur für Tastaturfokus. */
.focus-outline:focus-visible {
  outline: 0.1875rem solid var(--color-text);
  outline-offset: 0.4rem;
}

/* Im dunklen Medienbereich (Trailer/Fotos) wäre der dunkle Rahmen
   unsichtbar – dort gelb, passend zu Tabs und Galerie-Pfeilen. */
.project-media .focus-outline:focus-visible {
  outline-color: var(--color-primary);
}

/* Galerie-Track: Rahmen nach innen, damit er nicht über den
   dunklen Bereich hinaus in die Tabs ragt. */
.gallery-track.focus-outline:focus-visible {
  outline-offset: -0.1875rem;
}

/* Startseite */

.hero-image {
  overflow: visible;
  background: var(--color-primary);
}

.hero-image__content {
  display: grid;
  grid-template-columns: 11fr 9fr;
  align-items: stretch;
  column-gap: 11%;

  width: var(--content-width-wide);
  margin-inline: auto;
  padding-block: clamp(1rem, 3cqw, 4rem);
}

.hero-image__figure {
  min-width: 0;
  margin: 0;
  aspect-ratio: 4 / 3;
  /* Breite fest aus der Spalte, Höhe aus aspect-ratio – verhindert,
     dass Bildgröße und Zeilenhöhe sich gegenseitig "festhalten". */
  width: 100%;
  align-self: start;

  user-select: none;
  -webkit-user-drag: none;
}

.hero-image__figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;

  user-select: none;
  -webkit-user-drag: none;
}

.hero-image__bubble {
  container-type: inline-size;
  min-width: 0;

  display: flex;
  align-self: start;
  align-items: center;

  /* Mindesthöhe statt fester Höhe: Bei längeren Texten wächst die
     Blase mit, statt dass der Text oben und unten herausläuft. */
  min-height: 50%;
  width: 100%;
  margin: 0;
  flex: none;

  font-weight: 600;

  --tip-width: 14cqw;
  --hero-tip-inset: clamp(5rem, 5vw, 7rem);
  --hero-tip-offset: 3cqw;
  --tip-gap: 3cqw;

  user-select: none;
  -webkit-user-select: none;
}

/* Rahmen um die Startseiten-Sprechblase (home.php). Er ist so hoch
   wie das Bild daneben. Darin sitzt die Blase normalerweise 5rem unter
   der Bildoberkante. Wird sie bei längerem Text höher, schrumpft der
   Abstand oben, damit die Blase nicht unter das Bild rutscht.
   ::before = Abstand oben (höchstens 5rem, bekommt freien Platz zuerst),
   ::after  = restlicher Platz unten. */
.hero-image__bubble-slot {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.hero-image__bubble-slot::before,
.hero-image__bubble-slot::after {
  content: "";
  flex-basis: 0;
}

.hero-image__bubble-slot::before {
  flex-grow: 1000;
  max-height: 5rem;
}

.hero-image__bubble-slot::after {
  flex-grow: 1;
}

/* Tablet und Mobil */

@media (max-width: 700px) {
  /* Mobil steht die Blase unter dem Bild – der Rahmen wird hier
     wirkungslos, die Blase verhält sich wie ein direktes Element. */
  .hero-image__bubble-slot {
    display: contents;
  }

  .hero-image__bubble-slot::before,
  .hero-image__bubble-slot::after {
    content: none;
  }

  .hero-image__content {
    display: flex;
    flex-direction: column;
    align-items: stretch;

    width: auto;
    margin-inline: var(--gutter-mobile);
    padding-top: 1rem; /* Stellt Abstand zur Navigation ein */
    gap: clamp(1rem, 2vw, 3rem); /* Abstand zwischen Sprechblase und*/
  }

  .hero-image__bubble {
    height: auto;
    min-height: clamp(4rem, 24vw, 12rem);
    align-self: center;

    /* Zipfel im Mobil-Layout kleiner als am Desktop (14cqw)
       und eigener, separat einstellbarer Abstand zur Blase. */
    --tip-width: clamp(3rem, 6vw, 6rem);
    --tip-gap: 1cqw;

    margin-top: calc(var(--tip-height) * 0.85 + var(--tip-gap));
  }
}

.about-us {
  margin-top: 1.5rem;
}

/* War vorher ein h1 – jetzt h2 (der Seitentitel ist das h1),
   Aussehen bleibt gleich. */
.about-us h2 {
  font-size: var(--font-size-h1);
  line-height: 1.1;
  margin: 0 0 var(--spacing-heading-body);
}

.body-text {
  width: 50%;
  max-width: 45rem;
  margin-inline: auto;
}

@media (max-width: 700px) {
  .body-text {
    width: auto;
    margin-inline: var(--gutter-mobile);
  }
}

/* Default-Seiten: Abstand Navigation → H1 (Wert in :root) */
.default-page {
  padding-top: var(--spacing-nav-default-page);
}

/* News */
.news {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.news-card {
  width: 100%;
  margin-inline: auto;

  display: flex;
  flex-direction: column;
  color: var(--color-background);
}

.news-card h2 {
  margin-bottom: 1rem;
}

.news-card__image {
  margin-bottom: 1rem;
}

.news-card__image img {
  display: block;
  width: 100%;
  height: auto;
}

/* Projekt-Übersicht */

.projects {
  margin-block: 0;
  margin-inline: auto;
  list-style: none;

  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0;
}

.project-card > a {
  display: flex;
  width: 100%;
  gap: 1rem;
  align-items: flex-start;
  text-decoration: none;
}

.project-card h2 {
  /* Obergrenze 2.25rem: Die Sprechblase (und damit die Bilder daneben)
     wächst ab ca. 940px Fensterbreite nicht mehr mit – die Schrift
     soll das dann auch nicht, sonst werden lange Titel höher als das Bild. */
  font-size: clamp(2rem, 2.5vw, 2.5rem);
  text-decoration: underline;
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.2em;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.5s ease;
}

.project-card > a:hover h2,
.project-card > a:focus-visible h2 {
  text-decoration-color: currentColor;
}

.project-card__image {
  flex: 0 0 calc(50% - 0.5rem);
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.project-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-card__info {
  flex: 0 0 calc(50% - 0.5rem);
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.project-card__info h2 {
  margin: 0;
}

.project-card__year {
  font-size: clamp(1rem, 1.5vw, 2rem);
  margin-bottom: 0.1rem;
}

@media (max-width: 700px) {
  .project-card > a {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .project-card__image,
  .project-card__info {
    flex: 1 1 auto;
  }

  .project-card h2 {
    font-size: var(--font-size-h2);
    line-height: 1.1;
  }

  .project-card__year {
    font-size: var(--font-size-body);
  }
}

.project-card {
  /* Bezugspunkt für die Hover-Info bei Tastaturfokus (unten) */
  position: relative;
}

.project-card__additional-info {
  position: fixed;
  /* Werte kommen aus project-hover.js (Mausposition) */
  left: var(--info-x, 0);
  top: var(--info-y, 0);
  z-index: 100;
  pointer-events: none;

  max-width: 20rem;
  padding: 1rem 1.5rem;
  border-radius: 0 2rem 2rem 2rem;
  background: var(--color-text);
  color: var(--color-background);

  opacity: 0;
  visibility: hidden;

  transition: opacity 0.2s ease;
}

/* Maus: nur auf Geräten mit echtem Hover (nicht Touch) */
@media (hover: hover) {
  .project-card:hover .project-card__additional-info {
    opacity: 1;
    visibility: visible;
  }
}

/* Tastatur: :focus-visible greift nur bei Tastaturfokus, nicht beim
   Antippen. Die Info sitzt dann fest oben in der Textspalte der Karte
   (dort ist Platz, weil Jahr/Titel unten stehen). */
.project-card:has(> a:focus-visible) .project-card__additional-info {
  opacity: 1;
  visibility: visible;
}

.project-card:has(> a:focus-visible):not(:hover)
  .project-card__additional-info {
  position: absolute;
  left: calc(50% + 0.5rem);
  top: 0;
}

@media (max-width: 700px) {
  /* Mobil liegt die Textspalte unter dem Bild – Info oben aufs Bild */
  .project-card:has(> a:focus-visible):not(:hover)
    .project-card__additional-info {
    left: 0;
  }
}

/* Projekt-Einzelseite */

.project-title {
  background-color: var(--color-primary);
  padding-block: 2rem;

  ::selection {
    background-color: var(--color-text);
    color: var(--color-primary);
  }
}

.project-title__content {
  width: var(--content-width-wide);
  margin-inline: auto;
}

.project-title p {
  margin: 0;
}

@media (max-width: 700px) {
  .project-title__content {
    width: auto;
    margin-inline: var(--gutter-mobile);
  }
}

/* Tabs */

.tabs {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 1rem;
  padding-top: 1rem;
}

.tab {
  padding: 0;
  border: 0;
  background: none;

  color: inherit;
  font: inherit;
  cursor: pointer;

  text-decoration: underline;
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.3em;
  text-decoration-color: transparent;

  transition: text-decoration-color 0.5s ease;

  font-weight: 600;
}

@media (max-width: 700px) {
  .tabs {
    /* Tabs müssen einzeilig bleiben (Sprechblasen-Zipfel). Schrift und
       Abstand werden deshalb nur auf sehr schmalen Screens (bzw. bei
       starkem Browser-Zoom) stufenlos kleiner. Ab ca. 385px Breite
       unverändert 1.1rem / 0.5rem. */
    font-size: clamp(0.875rem, 4.6vw, 1.1rem);
    gap: clamp(0.4rem, 2vw, 0.5rem);
  }
}

.tab:hover,
.tab:focus-visible {
  text-decoration-color: currentColor;
}

.tab[aria-selected="true"] {
  text-decoration-color: currentColor;
}

.tab-panel[hidden] {
  display: none;
}

.project-information .tab-panel {
  /* Gestaltung für Info/Besetzung/Förderer/Barrierefreiheit.
     Feste Höchstbreite, auf breiten Screens wachsen nur
     die Ränder, nicht die Sprechblase. rem statt px, damit die Blase
     mitwächst, wenn im Browser eine größere Grundschrift eingestellt
     ist (Zeilenlänge bleibt gleich). Auf schmalen Screens 100%. */
  width: 100%;
  max-width: var(--bubble-width);
  margin-inline: auto;
}

.cast-list {
  width: fit-content;
  text-align: left;
}

.cast-list p {
  margin: 0;
}

.supporters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 2rem; /* Abstand nebeneinander */
  row-gap: 1.5rem; /* Abstand zwischen Zeilen */
  list-style: none;
  padding: 0;
  margin: 0;
}

.supporter {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15rem; /* gemeinsame visuelle Fläche */
  height: 8rem; /* gemeinsame visuelle Fläche */
}

.supporter a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.supporter img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 8rem;
  object-fit: contain;
}

/* Trailer / Video */

.trailer-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  /* Breite und Ausrichtung wie Navigation, Projekttitel und Galerie */
  width: var(--content-width-wide);
  margin-inline: auto;
  /* grid: Platzhalter füllt die Höhe aus, darf aber bei wenig Breite
     (Mobile, Zoom) mit seinem Text über 16:9 hinaus wachsen */
  display: grid;
}
.trailer-embed iframe,
.trailer-embed video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Hochgeladenes Video: Seitenverhältnis der Datei beibehalten,
   freie Fläche bleibt in der Hintergrundfarbe des Medienbereichs. */
.trailer-embed video {
  object-fit: contain;
}

@media (max-width: 700px) {
  .trailer-embed {
    width: auto;
    margin-inline: var(--gutter-mobile);
  }
}

/* Trailer-Platzhalter (Klick zum Laden): dunkle Fläche mit gelbem
   Rahmen in Größe und Position des späteren Videos. */
.trailer-placeholder {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  padding: 1.5rem;
  border: 0.1875rem solid var(--color-primary);
  color: var(--color-primary);
  text-align: center;
}

.trailer-placeholder[hidden] {
  display: none;
}

.trailer-heading {
  margin: 0;
  font-size: var(--font-size-h2);
  font-weight: 600;
}

.trailer-note {
  margin: 0;
  font-size: var(--font-size-small);
}

.trailer-note a {
  color: inherit;
}

.trailer-play {
  margin-top: 0.75rem;
  padding: 0.5em 1.25em;
  border: 0;
  background-color: var(--color-primary);
  color: var(--color-text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;

  text-decoration: underline;
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.3em;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.5s ease;
}

.trailer-play:hover,
.trailer-play:focus-visible {
  text-decoration-color: currentColor;
}

/* Galerie */

.project-media {
  background-color: var(--color-text);
  margin-top: 0;
  position: relative;
  padding-bottom: 2rem;
}

.project-media .tab {
  color: var(--color-primary);
}

.gallery {
  position: relative;
}

.gallery-track {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* Seitenabstand wie Navigation und Projekttitel: dort ist der Inhalt
     --content-width-wide breit und zentriert, links bleibt also die
     Hälfte des Rests frei. Prozent bezieht sich hier auf die Breite
     der Galerie (= volle Seitenbreite). */
  padding-inline: calc((100% - var(--content-width-wide)) / 2);
  cursor: grab;
}

.gallery-track::-webkit-scrollbar {
  display: none;
}

@media (max-width: 700px) {
  .gallery-track {
    /* gallery.js liest diesen Wert aus und hält ihn beim Blättern frei */
    padding-inline: var(--gutter-mobile);
  }
}

.gallery-item {
  flex: 0 0 auto;
  /* 60vw, aber nie höher als 80 % der Fensterhöhe
     (sonst auf breiten Screens höher als der Bildschirm) */
  height: min(60vw, 80vh);
  margin: 0;
}

.gallery-item img {
  display: block;
  height: 100%;
  width: auto;
  max-width: none;

  user-select: none;
  -webkit-user-drag: none;
}

.gallery-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);

  border: 0;
  background: none;
  padding: 0;

  color: var(--color-primary);
  font: inherit;
  font-size: 4rem;
  line-height: 1;

  cursor: pointer;
}

.gallery-arrow--prev {
  left: 1rem;
}

.gallery-arrow--next {
  right: 1rem;
}

.gallery-track.is-dragging {
  cursor: grabbing;
  user-select: none;
  /* Beim Ziehen mit der Maus muss die Galerie direkt der Maus folgen –
     "smooth" würde jede kleine Bewegung einzeln animieren (Nachziehen). */
  scroll-behavior: auto;
}

/* Footer */

.site-footer {
  margin: 4rem auto 4rem;
}

.site-footer nav {
  display: flex;
  justify-content: center;
  gap: 1rem;
  /* Der Footer-nav hat auch die Klasse .nav-links und würde sonst
     deren margin-left (Desktop) bzw. margin-top (Mobil) erben –
     die Links säßen dann rechts neben der Mitte. */
  margin: 0;
}


/* 
   Barrierefreiheits-Modi
   Reizarm und Kontrast richten sich nur nach den Einstellungen im
   Betriebssystem/Browser (Media Queries unten)
  */

/* Reizarmer Modus: Animationen und Übergänge abschalten, wenn im
   Betriebssystem „Bewegung reduzieren“ eingestellt ist.
   !important ist hier bewusst gesetzt: Die Einstellung der
   Nutzer:innen soll jede Animation im restlichen CSS überstimmen. */
@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;
  }
}


/* Kontraststarker Modus – aktiv, wenn im Betriebssystem
   „Kontrast erhöhen“ eingestellt ist. */
@media (prefers-contrast: more) {
  :root {
    --color-text: #000000;
    --color-background: #ffffff;
    --color-primary: #f3f3f3;
  }
}