/* Website Justus Wilhelm – Layout auf Basis des JW-Designsystems (css/jw.css).
   Werte nur über Tokens. Raster: 12 Spalten, max 1320 px, Gutter 24 px, Rand 48 px; mobil 4 Spalten, Rand 20 px. */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; min-height: 100vh; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }

/* ---------- Nachtmodus: Logos hell, Rest über die Tokens ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="papier"]) .logos img, :root:not([data-theme="papier"]) .preis-logo img { filter: grayscale(1) invert(1); }
}
[data-theme="nacht"] .logos img, [data-theme="nacht"] .preis-logo img { filter: grayscale(1) invert(1); }

/* ---------- Raster ---------- */
.c { max-width: var(--web-max); margin: 0 auto; padding: 0 var(--space-12); }
.g12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-6); }
.abschnitt { padding-top: var(--space-32); }

.sprung { position: absolute; left: -9999px; top: 0; background: var(--kontrast); color: var(--auf-kontrast); padding: var(--space-3) var(--space-4); }
.sprung:focus { left: var(--space-4); top: var(--space-4); z-index: 10; }

/* ---------- Navigation ---------- */
.nav { display: flex; justify-content: space-between; align-items: center; height: 96px; border-bottom: var(--linie-haar) solid var(--linie); position: relative; }
.nav-signet { display: block; color: var(--tinte); padding: var(--space-2) 0; }
.nav-liste { display: flex; gap: 36px; list-style: none; margin: 0; padding: 0; }
.nav-liste a { text-decoration: none; padding: 14px 0; display: inline-block; }
.nav-liste a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.nav-menue { display: none; background: none; border: 0; color: inherit; cursor: pointer; padding: 0 var(--space-2); min-height: 44px; min-width: 44px; }

/* ---------- Aufmacher ---------- */
.aufmacher { padding-top: 112px; }
.aufmacher-titel { grid-column: 1 / 9; }
.aufmacher-claim { margin-top: var(--space-6); font-size: clamp(56px, 9.2vw, 132px); }
.aufmacher-vorspann { grid-column: 9 / 13; align-self: end; }
.jw .aufmacher-aktion { margin-top: var(--space-8); }
.jw .titelfoto { grid-column: 1 / -1; margin-top: var(--space-24); }
.jw-r-21x9 { aspect-ratio: 21 / 9; object-fit: cover; object-position: 40% 50%; }
@media (max-width: 700px) { .jw-r-21x9 { aspect-ratio: 4 / 5; object-position: 50% 50%; } }

/* ---------- Abschnittskopf links, Inhalt rechts ---------- */
.spalte-kopf { grid-column: 1 / 4; }
.jw .spalte-notiz { margin-top: var(--space-4); max-width: 260px; }
.liste-arbeiten, .liste-sprechproben, .videos { grid-column: 4 / 13; }

/* ---------- Arbeiten ---------- */
.liste-arbeiten > li { grid-template-columns: 64px 1fr auto; align-items: start; padding: var(--space-6) 0 var(--space-8); }
.arbeit { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.arbeit-cover { width: 160px; aspect-ratio: 1; object-fit: cover; }
.arbeit-text > .jw-titel-2 { margin-top: var(--space-2); }
.arbeit-text > .jw-lesetext-klein { margin-top: var(--space-2); }
.arbeit-format { white-space: nowrap; padding-top: 2px; }
.liste-sprechproben > li { grid-template-columns: 64px 1fr; align-items: center; padding: var(--space-4) 0; }
.probe { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--space-6); align-items: center; }
.probe-text > .jw-titel-3 { margin-top: var(--space-1); }
.probe .player { margin-top: 0; }

/* ---------- Audio-Player: Wort, Linie, Zeit ---------- */
.player { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-6); max-width: 720px; }
.player-knopf { min-width: 128px; justify-content: center; }
.player-linie { flex: 1 1 auto; height: 44px; display: flex; align-items: center; cursor: pointer; position: relative; }
.player-linie::before { content: ""; display: block; width: 100%; height: var(--linie-haar); background: var(--linie-leise); }
.player-fortschritt { position: absolute; left: 0; top: 50%; height: var(--linie-stark); margin-top: -1px; width: 0; background: var(--linie); pointer-events: none; }
.player-zeit { min-width: 92px; text-align: right; color: var(--tinte-2); }
.player-zeit.ist-fehler { color: var(--tinte); }

/* ---------- Logozeilen (grau, wie Referenzen) ---------- */
.logozeile { margin-top: var(--space-16); align-items: center; }
.logozeile-titel { grid-column: 1 / 4; }
.logos { grid-column: 4 / 13; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-16); list-style: none; margin: 0; padding: 0; }
.logos img { height: 40px; width: auto; filter: grayscale(1); opacity: .72; }
.logos img[alt="ARD"], .logos img[alt="rbb"] { height: 36px; }
.logos img[alt="Bremen Zwei"] { height: 44px; }
.logos img[alt="Y-Kollektiv"] { height: 60px; }

/* ---------- Video ---------- */
.videos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12) var(--space-6); }
.video-start { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; position: relative; color: inherit; text-align: left; }
.video-start img { width: 100%; }
.video-label { position: absolute; left: var(--space-4); top: var(--space-4); background: var(--schwarz); color: var(--weiss); padding: 8px 10px; }
.video-start:hover .video-label, .video-start:focus-visible .video-label { text-decoration: underline; text-underline-offset: 4px; }
.video figcaption .jw-bildzeile:first-child { max-width: 34em; text-wrap: pretty; }
.video figcaption strong { font-weight: 600; color: var(--tinte); }
.video figcaption .jw-leiser { white-space: nowrap; }
.video-rahmen { aspect-ratio: 16 / 9; width: 100%; background: var(--papier-3); }
.video-rahmen iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- Über mich ---------- */
.ueber-portraet { grid-column: 1 / 6; }
.ueber-text { grid-column: 7 / 13; }
.ueber-lesetext { margin-top: var(--space-6); max-width: var(--web-text); }
.hinter { margin-top: var(--space-24); }
.hinter-fotos { margin-top: var(--space-8); row-gap: var(--space-12); }
.hinter-foto { grid-column: span 4; }
/* Auszeichnungen: drei Spalten wie die Fotos darüber, Logo und Beschriftung je Spalte */
.preise { margin-top: var(--space-24); }
.preise-liste { list-style: none; margin: var(--space-8) 0 0; padding: 0; row-gap: var(--space-8); }
.preis { grid-column: span 4; }
.preis-logo { height: 120px; display: flex; align-items: flex-end; }
.preis-logo img { width: auto; filter: grayscale(1); opacity: .85; }
.preis:nth-child(1) .preis-logo img { height: 120px; }
.preis:nth-child(2) .preis-logo img { height: 72px; }
.preis:nth-child(3) .preis-logo img { height: 100px; }
.jw .preis-text { margin-top: var(--space-4); }

/* ---------- Kontakt (Kontrastband) ---------- */
.fuss { margin-top: var(--space-32); padding: var(--space-24) 0 var(--space-12); }
.fuss-oben { align-items: end; }
.fuss-anrede { grid-column: 1 / 9; }
.fuss-titel { margin-top: var(--space-4); font-size: clamp(40px, 6vw, 88px); }
.jw .fuss-satz { margin-top: var(--space-8); color: var(--auf-kontrast-2); }
.fuss-kontakt { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-8); }
.jw .fuss-adresse { margin-top: var(--space-6); color: var(--auf-kontrast-2); }
.fuss-logo { grid-column: 10 / 13; justify-self: end; }
.fuss-linie { margin: var(--space-16) 0 var(--space-4); }
.fuss-unten { color: var(--auf-kontrast-2); align-items: center; }
.fuss-unten > span { display: flex; align-items: center; min-height: 44px; gap: 0 var(--space-2); }

.fuss-unten a { text-decoration: none; display: inline-block; padding: 14px 0; }
.fuss-unten a:hover { text-decoration: underline; text-underline-offset: 4px; }
.fuss-copy { grid-column: 1 / 5; }
.fuss-recht { grid-column: 5 / 8; }
.fuss-profile { grid-column: 8 / 13; justify-content: flex-end; flex-wrap: wrap; }

/* Sichtbar markierte Platzhalter – vor Veröffentlichung ersetzen */
.platzhalter { background: var(--papier-3); color: var(--tinte); padding: 0 .3em; }
.jw-band .platzhalter { background: var(--grau-75); color: var(--weiss); }

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .probe { grid-template-columns: minmax(0, 1fr) 320px; }
  .spalte-kopf, .liste-arbeiten, .liste-sprechproben, .videos, .logozeile-titel, .logos { grid-column: 1 / -1; }
  .liste-arbeiten, .liste-sprechproben, .videos { margin-top: var(--space-8); }
  .logos { margin-top: var(--space-4); }
  .aufmacher-titel { grid-column: 1 / -1; }
  .aufmacher-vorspann { grid-column: 1 / 9; margin-top: var(--space-12); }
  .ueber-portraet { grid-column: 1 / 6; }
  .ueber-text { grid-column: 6 / 13; }
}

/* ---------- Mobil: 4 Spalten, Rand 20 px ---------- */
@media (max-width: 700px) {
  .c { padding: 0 20px; }
  .g12 { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--space-4); }
  .abschnitt { padding-top: var(--space-24); }
  .nav { height: 72px; }
  .nav-menue { display: inline-block; }
  .nav-liste { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; background: var(--papier); border-bottom: var(--linie-stark) solid var(--linie); z-index: 5; }
  .nav-liste.ist-offen { display: flex; }
  .nav-liste li { border-top: var(--linie-haar) solid var(--linie); }
  .nav-liste a { display: block; padding: var(--space-4) 0; }
  .aufmacher { padding-top: var(--space-6); }
  .aufmacher-claim { margin-top: var(--space-3); }
  .aufmacher-titel, .aufmacher-vorspann { grid-column: 1 / -1; }
  .aufmacher-claim { font-size: 48px; }
  .aufmacher-titel { order: 1; }
  .jw .titelfoto { order: 2; margin-top: var(--space-6); }
  .aufmacher-vorspann { order: 3; margin-top: var(--space-8); }
  .jw-vorspann { font-size: 18px; line-height: 28px; }
  .aufmacher-aktion .jw-button { height: auto; padding: var(--space-3) 0; border: 0; background: none; color: var(--tinte); }
  .aufmacher-aktion .jw-button::after { content: "—"; }
  .aufmacher-aktion .jw-button:hover { text-decoration: underline; text-underline-offset: 4px; }
  .jw-liste > li { grid-template-columns: 40px 1fr; }
  .liste-arbeiten > li { grid-template-columns: 40px 1fr; }
  .arbeit { grid-template-columns: 1fr; }
  .arbeit-cover { width: 120px; }
  .arbeit-format { grid-column: 2; padding-top: 0; }
  .jw-titel-2 { font-size: 28px; }
  .player { flex-wrap: wrap; }
  .probe { grid-template-columns: 1fr; }
  .probe .player { margin-top: var(--space-3); }
  .liste-sprechproben > li { align-items: start; }
  .player-zeit { min-width: 0; flex: 1 1 auto; }
  .videos { grid-template-columns: 1fr; }
  .ueber-portraet, .ueber-text { grid-column: 1 / -1; }
  .ueber-text { margin-top: var(--space-12); }
  .hinter-foto { grid-column: 1 / -1; }
  .logos { gap: var(--space-6) var(--space-8); }
  .logos img { height: 32px; }
  .logos img[alt="ARD"], .logos img[alt="rbb"] { height: 28px; }
  .logos img[alt="Bremen Zwei"] { height: 34px; }
  .logos img[alt="Y-Kollektiv"] { height: 48px; }
  .preise-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-3); }
  .preis { grid-column: span 1; }
  .preis-logo { height: 88px; }
  .preis-logo img { max-width: 100%; height: auto; }
  .preis:nth-child(1) .preis-logo img { height: 88px; }
  .preis:nth-child(2) .preis-logo img { height: 52px; }
  .preis:nth-child(3) .preis-logo img { height: 72px; }
  .fuss { padding-top: var(--space-16); }
  .fuss-anrede, .fuss-logo { grid-column: 1 / -1; }
  .fuss-logo { justify-self: start; margin-top: var(--space-12); }
  .fuss-copy, .fuss-recht, .fuss-profile { grid-column: 1 / -1; justify-content: flex-start; margin-top: var(--space-2); }
}