/* STR8CASTING · Platzhalter
   CI: Schwarz, Gelb #F4CE14, Oswald, Poppins.
   Schriften selbst gehostet, keine externen Aufrufe. */

@font-face {
  font-family: "Oswald";
  src: url("fonts/oswald-var.woff2") format("woff2-variations");
  font-weight: 200 700;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("fonts/poppins-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("fonts/poppins-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

:root {
  --yellow: #f4ce14;
  --ink: #000;
  --paper: #fff;
  --muted: rgba(255, 255, 255, 0.62);
  --line: rgba(255, 255, 255, 0.16);
  --gap: clamp(1.5rem, 5vw, 4rem);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--ink);
  color: var(--paper);
  font-family: "Poppins", system-ui, sans-serif;
  font-size: clamp(0.9rem, 0.85rem + 0.25vw, 1rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.wrap {
  width: 100%;
  max-width: 68rem;
  margin-inline: auto;
  padding-inline: var(--gap);
}

.masthead { padding-block: clamp(0.9rem, 2vw, 1.4rem); }

.logo { display: inline-block; width: clamp(9.5rem, 23vw, 15rem); }
.logo img { display: block; width: 100%; height: auto; }

/* Der Platzhalter zentrierte den einen Block per Flex. Die Vollseite besteht
   aus mehreren Abschnitten, die untereinander stehen müssen. */
main {
  flex: 1;
  display: block;
  padding-block: 0;
}

.claim {
  margin: 0;
  font-family: "Oswald", "Arial Narrow", sans-serif;
  font-weight: 300;
  font-size: clamp(2.75rem, 10vw, 7.5rem);
  line-height: 0.95;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}

/* Skew pro Zeile, sonst wandert jede obere Zeile nach rechts
   und die linke Kante steht treppenförmig statt bündig. */
.claim span {
  display: block;
  transform: skewX(-8deg);
  transform-origin: left bottom;
}
.claim em { font-style: normal; color: var(--yellow); }

.status {
  margin: clamp(2.25rem, 5vw, 3.5rem) 0 0;
  max-width: 36rem;
  color: var(--muted);
  text-wrap: pretty;
}

.status strong {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--paper);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.contact {
  display: inline-block;
  margin-top: clamp(1.5rem, 4vw, 2.25rem);
  padding: 0.7rem 1.4rem;
  background: var(--yellow);
  color: var(--ink);
  font-family: "Oswald", sans-serif;
  font-weight: 400;
  font-size: 1.0625rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: filter 0.15s ease;
}

.contact:hover,
.contact:focus-visible { filter: brightness(1.12); }

.age {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  padding: 0.5rem 0.9rem 0.5rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.8125rem;
  color: var(--muted);
}

.age b {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--ink);
  font-family: "Oswald", sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
}

/* Eigene Zeile, aber nur so breit wie der Text. */
.block { display: table; margin-top: 1.25rem; }

/* Die Zugehoerigkeit zur Gruppe. Schmal, ruhig, ohne eigenes Gewicht: sie soll
   Vertrauen stiften, nicht um Aufmerksamkeit ringen. */
/* Weitere Talente. Kleiner als die Hauptreihe, ohne Zahlen und ohne Link,
   weil beides fuer sie nicht belegt ist. */
.weitere-titel {
  font-size: clamp(1rem, 2vw, 1.15rem);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--stumm);
  font-weight: 600;
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 1.25rem;
}
/* Diese Reihe hat keine Verlinkung, deshalb traegt das li selbst den Rahmen,
   den sonst das a traegt. */
.crew-weitere li {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
.crew-weitere li::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.88), transparent);
  pointer-events: none;
}
.crew-weitere li img { filter: grayscale(0.3); }
.crew-weitere .crew-name { margin-bottom: 0.8rem; font-size: clamp(0.8125rem, 1vw, 0.9375rem); }

.band-gruppe { padding-block: clamp(1.75rem, 3.5vw, 2.5rem); border-top: 1px solid var(--linie); }
.gruppe { text-align: center; }
.band-gruppe .kicker { margin-bottom: .6rem; }
.gruppe-satz {
  max-width: 44rem;
  margin: 0 auto;
  color: var(--stumm);
  font-size: clamp(.95rem, 1.6vw, 1.05rem);
  line-height: 1.7;
}
.gruppe-satz a {
  color: var(--papier);
  text-decoration: none;
  border-bottom: 1px solid var(--gelb);
  padding-bottom: 1px;
  white-space: nowrap;
}
.gruppe-satz a:hover { color: var(--gelb); }

.foot {
  border-top: 1px solid var(--line);
  padding-block: clamp(1.25rem, 3vw, 1.75rem);
  font-size: 0.8125rem;
  color: var(--muted);
}

.foot .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem clamp(1rem, 3vw, 2rem);
  align-items: baseline;
  justify-content: space-between;
}

.foot nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem clamp(1rem, 3vw, 2rem);
}

.foot a {
  text-decoration-color: var(--line);
  text-underline-offset: 0.25em;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.foot a:hover,
.foot a:focus-visible {
  color: var(--paper);
  text-decoration-color: var(--yellow);
}

/* Rechtsseiten */

.doc { padding-block: clamp(2rem, 6vw, 4.5rem); }

.doc h1 {
  margin: 0 0 clamp(2rem, 5vw, 3rem);
  font-family: "Oswald", sans-serif;
  font-weight: 300;
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  line-height: 0.95;
  text-transform: uppercase;
  transform: skewX(-8deg);
  transform-origin: left bottom;
  /* Bis zum 27.08. lief ein langes Wort wie ERWACHSENENBRANCHE auf dem Handy
     über den rechten Rand hinaus. Die Rechtstexte hatten nur kurze Titel,
     deshalb fiel es nie auf. Trennung vor Überlauf, Überlauf als Notausgang. */
  hyphens: auto;
  /* Ohne Untergrenze trennte der Browser nach zwei Buchstaben, also
     ER-WACHSENENBRANCHE (Jakob, 28.08.). Mindestens vier Zeichen vor und drei
     nach der Trennung, und nur Wörter ab acht Zeichen. Wo die Eigenschaft
     fehlt, bleibt es beim bisherigen Verhalten. */
  -webkit-hyphenate-limit-before: 4;
  -webkit-hyphenate-limit-after: 3;
  hyphenate-limit-chars: 8 4 3;
  overflow-wrap: break-word;
}

.doc h2 {
  margin: clamp(2.25rem, 5vw, 3rem) 0 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--yellow);
}

.doc h3 {
  margin: 1.75rem 0 0.4rem;
  font-size: 0.9375rem;
  font-weight: 600;
}

.doc p, .doc ul { margin: 0 0 0.9rem; max-width: 44rem; color: var(--muted); }
.doc li { margin-bottom: 0.35rem; }
.doc address { font-style: normal; color: var(--paper); }
.doc a { color: var(--yellow); }
.doc .lede { color: var(--paper); }

.back {
  display: inline-block;
  margin-bottom: 2rem;
  font-size: 0.8125rem;
  color: var(--muted);
  text-underline-offset: 0.25em;
}
.back:hover { color: var(--paper); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ============================================================
   Startseite, Vollausbau
   ============================================================ */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--yellow);
  color: var(--ink);
  padding: 0.6rem 1rem;
  z-index: 10;
}
.skip:focus { left: 0; }

.masthead-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem clamp(1rem, 4vw, 2rem);
  flex-wrap: wrap;
}

.masthead-tools {
  display: flex;
  align-items: center;
  gap: 0.6rem clamp(0.75rem, 2vw, 1.25rem);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.lang { display: inline-flex; align-items: center; gap: 0.5rem; }
.lang-label {
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.lang select {
  appearance: none;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--paper);
  font: inherit;
  font-size: 0.8125rem;
  padding: 0.35rem 0.6rem;
  cursor: pointer;
}
.lang select:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.lang option { background: var(--ink); color: var(--paper); }

/* Knopf */

.btn {
  display: inline-block;
  margin-top: clamp(1.5rem, 4vw, 2.25rem);
  padding: 0.8rem 1.6rem;
  background: var(--yellow);
  color: var(--ink);
  font-family: "Oswald", sans-serif;
  font-weight: 400;
  font-size: 1.0625rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: filter 0.15s ease;
}
.btn:hover, .btn:focus-visible { filter: brightness(1.12); }
.btn-sm { margin-top: 0; padding: 0.5rem 1rem; font-size: 0.875rem; }
.btn-lg { padding: 1rem 2.2rem; font-size: 1.1875rem; }

/* Hero */

.hero {
  padding-block: clamp(2rem, 5vw, 3rem);
  border-bottom: 1px solid var(--line);
}

.lede {
  margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
  max-width: 40rem;
  font-size: clamp(1rem, 0.95rem + 0.35vw, 1.1875rem);
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
}

.micro { margin: 0.9rem 0 0; font-size: 0.8125rem; color: var(--muted); }
.micro a { color: var(--yellow); }

/* Abschnitte */

/* 96 Pixel oben und unten je Abschnitt ergaben 192 Pixel zwischen zwei
   Abschnitten. Das las sich als Loch, nicht als Luft. */
.band { padding-block: clamp(2.5rem, 6vw, 4.25rem); border-bottom: 1px solid var(--line); }
.band-alt { background: #0a0a0a; }
.band-final { text-align: center; border-bottom: 0; }
.band-final .lede { margin-inline: auto; }

.kicker {
  margin: 0 0 0.6rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--yellow);
}

.band h2 {
  margin: 0 0 1.25rem;
  font-family: "Oswald", sans-serif;
  font-weight: 300;
  font-size: clamp(1.9rem, 5vw, 3.25rem);
  line-height: 1.02;
  text-transform: uppercase;
}

.band .body { max-width: 44rem; color: var(--muted); line-height: 1.65; text-wrap: pretty; }

.final {
  font-size: clamp(2.5rem, 8vw, 5rem);
  transform: skewX(-8deg);
  transform-origin: center bottom;
}

/* Karten */

.cards, .steps, .ticks { list-style: none; margin: 0; padding: 0; }

.cards {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  grid-template-columns: 1fr;
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}
@media (min-width: 34rem) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cards li { border: 1px solid var(--line); padding: clamp(1.25rem, 3vw, 1.75rem); }
.cards h3 {
  margin: 0 0 0.5rem;
  font-family: "Oswald", sans-serif;
  font-weight: 400;
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.cards p { margin: 0; color: var(--muted); font-size: 0.9375rem; line-height: 1.6; }

/* Schritte */

.steps {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2rem);
  grid-template-columns: 1fr;
  margin-top: clamp(2rem, 5vw, 3rem);
  counter-reset: step;
}
@media (min-width: 34rem) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.steps li { position: relative; padding-top: 3rem; }
.steps .num {
  position: absolute;
  top: 0;
  left: 0;
  font-family: "Oswald", sans-serif;
  font-size: 2.25rem;
  font-weight: 300;
  color: var(--yellow);
  line-height: 1;
}
.steps h3 {
  margin: 0 0 0.5rem;
  font-family: "Oswald", sans-serif;
  font-weight: 400;
  font-size: 1.1875rem;
  text-transform: uppercase;
}
.steps p { margin: 0; color: var(--muted); font-size: 0.9375rem; line-height: 1.6; }

/* Zwei Spalten */

/* min(...) verhindert, dass auto-fit auf schmalen Geraeten eine
   Mindestbreite erzwingt, die breiter ist als der verfuegbare Platz. */
.cols {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
}

.ticks { margin-top: 1.25rem; }
.ticks li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.7rem;
  color: var(--muted);
  line-height: 1.55;
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--yellow);
}

.note {
  margin-top: 1.5rem;
  padding: 1rem 1.1rem;
  border-left: 3px solid var(--yellow);
  background: rgba(244, 206, 20, 0.06);
  color: var(--paper);
  font-size: 0.9375rem;
  line-height: 1.6;
}

@media (max-width: 30rem) {
  .masthead-tools { width: 100%; justify-content: space-between; }
}

/* Auf sehr schmalen Geraeten traegt die Flagge allein, das Kuerzel
   daneben wuerde die Kopfzeile ueber die Bildschirmbreite schieben. */
@media (max-width: 24rem) {
  .flag-txt { display: none; }
  .flag { padding: 0.3rem; }
}

/* Sprachwahl als Flaggen. Sprachneutral, damit sie auch findet,
   wer die gerade eingestellte Sprache nicht liest. */
.langswitch { display: flex; gap: 0.35rem; }

.flag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.45rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 2px;
  color: var(--muted);
  font: inherit;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}
.flag svg { display: block; width: 1.35rem; height: auto; border-radius: 1px; }
.flag-txt { font-weight: 600; }
.flag:hover { opacity: 0.85; }
.flag.is-on { opacity: 1; border-color: var(--line); color: var(--paper); }
.flag:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }

/* Hilfe-Abschnitt */
.help {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  grid-template-columns: 1fr;
  margin-top: clamp(2rem, 5vw, 3rem);
  list-style: none;
  padding: 0;
}
@media (min-width: 34rem) { .help { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .help { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.help li { border-top: 2px solid var(--yellow); padding-top: 1rem; }
.help h3 {
  margin: 0 0 0.5rem;
  font-family: "Oswald", sans-serif;
  font-weight: 400;
  font-size: 1.1875rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.help p { margin: 0; color: var(--muted); font-size: 0.9375rem; line-height: 1.6; }

/* Bilder */
.shot { position: relative; overflow: hidden; background: #111; margin: 0; }
.shot img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Hero: das Bild traegt die Flaeche, der Verlauf haelt den Text lesbar.
   Keine freistehende Kachel, sondern eine Bildkante bis zum Rand. */
.hero { position: relative; overflow: hidden; isolation: isolate; }

.hero-bild {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: -1;
}
.hero-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 22%;
}
/* Zwei Verlaeufe: einer von links fuer den Text, einer nach unten fuer die Kante */
.hero-bild::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, var(--ink) 34%, rgba(11, 11, 11, 0.72) 62%, rgba(11, 11, 11, 0.35) 100%),
    linear-gradient(to bottom, rgba(11, 11, 11, 0.65) 0%, transparent 22%, transparent 68%, var(--ink) 100%);
}

.hero-grid { display: block; }
.hero-grid > div { max-width: 34rem; }

@media (min-width: 56rem) {
  /* Eine Bildschirmhoehe abzueglich der Kopfleiste, damit alles bis zum
     Knopf ohne Scrollen dasteht. svh statt vh wegen der Leisten auf Mobilgeraeten. */
  .hero {
    min-height: calc(100svh - 5rem);
    display: flex;
    align-items: center;
  }
  .hero-bild img { object-position: 50% 30%; }
  .hero-bild::after {
    background:
      linear-gradient(to right, var(--ink) 38%, rgba(11, 11, 11, 0.55) 62%, transparent 90%),
      linear-gradient(to bottom, rgba(11, 11, 11, 0.5) 0%, transparent 24%, transparent 74%, var(--ink) 100%);
  }
  /* Breit genug, dass jede Claim-Zeile in eine Zeile passt und
     der Anspruch dreizeilig bleibt statt vierzeilig umzubrechen. */
  .hero-grid > div { max-width: 47rem; }
  .hero .claim { font-size: clamp(3.25rem, 6.6vw, 6rem); }
  .hero .lede { margin-top: clamp(1.25rem, 2.5vw, 1.75rem); max-width: 36rem; }
  .hero .btn { margin-top: clamp(1.5rem, 3vw, 2rem); }
  .hero .age { margin-top: 1.25rem; }
}

/* Flache Fenster: der Anspruch wird kleiner, damit der ganze Block
   samt Altershinweis ohne Scrollen dasteht. */
@media (min-width: 56rem) and (max-height: 47rem) {
  .hero .claim { font-size: clamp(2.75rem, 5.2vw, 4.25rem); }
  .hero .lede { margin-top: 1rem; }
  .hero .btn { margin-top: 1.25rem; }
  .hero .age { margin-top: 0.9rem; }
}

/* Creator: Bild, Name, Profil. Die ganze Kachel ist der Link. */
.band-crew { background: #0a0a0a; }

/* Kopf und Zahlen stehen immer untereinander. Nebeneinander blieb links eine
   leere Flaeche stehen, und die rechte Spalte wurde so schmal, dass die Zahl
   ueber ihren Rand lief. Untereinander hat beides Platz. */
.crew-kopf {
  display: block;
}
.crew-kopf .body { margin-bottom: 0; }
.crew-kopf .body { margin-bottom: 0; }

/* Zwei Kennzahlen nebeneinander, sobald Platz ist. Untereinander machten sie
   die Sektion unnoetig hoch und rissen links ein Loch auf. */
.zahlen {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: 1fr;
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}
@media (min-width: 34rem) { .zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .zahlen { max-width: 46rem; } }

.reichweite {
  margin: 0;
  padding-left: clamp(0.9rem, 1.6vw, 1.25rem);
  border-left: 2px solid var(--yellow);
}
/* Das Plus sagt „mindestens", ohne die Zahl aufzublasen. Etwas kleiner und
   hochgestellt, damit es die Zahl nicht erschlaegt. */
/* Zwei Fallen auf einmal: `.reichweite span` weiter unten macht jedes span
   zum Block, deshalb fiel das Plus in eine eigene Zeile. Und `vertical-align`
   vergroessert die Zeilenbox, deshalb wird hier ueber `position` versetzt. */
.reichweite .plus {
  display: inline;
  font-size: 0.5em;
  font-weight: 400;
  position: relative;
  top: -0.62em;
  margin-left: 0.03em;
  color: inherit;
}

.reichweite b {
  display: block;
  font-family: "Oswald", sans-serif;
  font-weight: 300;
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  line-height: 0.95;
  color: var(--yellow);
  font-variant-numeric: tabular-nums;
  /* Ohne das rutscht das Plus in eine eigene Zeile, sobald die Spalte eng wird */
  white-space: nowrap;
}
.reichweite span:not(.plus) {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--muted);
}

/* Die Reihe verlaesst den Satzspiegel und laeuft bis an beide Raender.
   Sonst bleiben fuenf Bilder im 68rem-Raster Briefmarken. */
.crew {
  list-style: none;
  margin: clamp(2rem, 5vw, 3rem) 0 1rem;
  padding: 0;
  display: grid;
  gap: 2px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 44rem) { .crew { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .crew { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.crew a {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-decoration: none;
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
.crew .shot { position: absolute; inset: 0; }
.crew img { transition: transform 0.4s ease, filter 0.4s ease; filter: grayscale(0.15); }
.crew a:hover img, .crew a:focus-visible img { transform: scale(1.04); filter: grayscale(0); }
.crew a:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }

.crew a::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.88), transparent);
  pointer-events: none;
}
.crew-name, .crew-handle, .crew-zahl { position: relative; z-index: 1; display: block; }
.crew-name {
  margin: 0 0.9rem 0.1rem;
  font-weight: 600;
  font-size: clamp(0.875rem, 1.1vw, 1.0625rem);
  line-height: 1.2;
}
.crew-handle {
  margin: 0 0.9rem;
  font-size: 0.75rem;
  color: var(--muted);
  word-break: break-all;
}
.crew-zahl {
  margin: 0.3rem 0.9rem 0.9rem;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--yellow);
  font-variant-numeric: tabular-nums;
}

/* Bildband: laeuft ueber die volle Breite, schliesst den Abschnitt ab */
.bildband {
  display: grid;
  gap: 2px;
  grid-template-columns: 62fr 38fr;
  margin-top: clamp(2.5rem, 6vw, 4rem);
  height: clamp(15rem, 32vw, 28rem);
}
.bildband .shot { height: 100%; }
.bildband .shot:first-child img { object-position: 50% 18%; }
.bildband .shot:last-child img { object-position: 50% 20%; }

/* Formatkarte, die auf eine eigene Seite fuehrt */
.cards .karte-link {
  color: var(--yellow);
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
}
.cards .karte-link span { font-size: 0.7em; }
.cards .karte-link:hover, .cards .karte-link:focus-visible { text-decoration: underline; }
.cards li:has(.karte-link) { border-color: rgba(244, 206, 20, 0.4); }

/* Das Video ist keine Pflicht. Der Punkt steht trotzdem in der Liste, damit
   klar ist, dass wir eins annehmen, aber ohne den Haken der Pflichtpunkte. */
.ticks .kuer { opacity: 0.72; }
.ticks .kuer::before { opacity: 0.5; }

/* Der Team-Zugang gehoert in den Fuss und nicht ins Blickfeld der Bewerber.
   Er ist da, wenn man ihn sucht, und draengt sich sonst nicht auf. */
.foot .intern { opacity: 0.45; }
.foot .intern:hover, .foot .intern:focus-visible { opacity: 1; color: var(--yellow); }

/* ---- Ratgeberseiten, angelegt 27.08.2026 ----
   Fünf Seiten zu Fragen, die vor einer Bewerbung gestellt werden. Sie nutzen
   das Grundgerüst von .doc und brauchen nur drei Ergänzungen. */

/* Nummerierte Listen waren bisher nicht gestylt, es gab keine im Bestand. */
.doc ol { margin: 0 0 0.9rem; max-width: 44rem; color: var(--muted); padding-left: 1.4rem; }
.doc ol li { margin-bottom: 0.5rem; }

/* Abgesetzter Hinweis für das, was jemand lesen muss, bevor er weiterliest,
   etwa dass eine Seite keine Rechtsberatung ist. */
.hinweis {
  border-left: 3px solid var(--yellow);
  background: rgba(255, 255, 255, 0.03);
  padding: 1rem 1.25rem;
  margin: 1.75rem 0;
  max-width: 44rem;
}
.hinweis p { margin: 0; }

/* Der Weg zur Bewerbung, abgesetzt vom Fließtext. */
.cta-block { margin: 2.5rem 0 0.5rem; }

/* Der Knopf im Fließtext war bis zum 27.08. unlesbar: `.doc a` färbt jeden
   Link gelb und hat höhere Spezifität als `.btn`, also stand gelbe Schrift
   auf gelbem Grund. Diese Regel gewinnt und stellt die Schriftfarbe her. */
.doc a.btn { color: var(--ink); }
.doc a.btn:hover, .doc a.btn:focus-visible { color: var(--ink); }

/* Trennlinie vor dem Kleingedruckten. */
.doc hr {
  border: 0;
  border-top: 1px solid var(--line, rgba(255, 255, 255, 0.12));
  margin: 2.5rem 0 1.25rem;
  max-width: 44rem;
}