/* KWG Films · Prototyp 04 · orientiert an der Seite von 2017 */

@font-face { font-family: "transatstandard"; src: url("assets/fonts/transatstandard-webfont.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "transatmedium"; src: url("assets/fonts/transatmedium-webfont.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "transatbold"; src: url("assets/fonts/transatbold-webfont.woff2") format("woff2"); font-display: swap; }

:root {
  --red: #e20613;
  --ink: #111;
  --dark: #231f20;
  --paper: #fff;
  --muted: #6b6b6b;
  --gutter: clamp(16px, 4vw, 48px);
  --std: "transatstandard", "Helvetica Neue", Arial, sans-serif;
  --med: "transatmedium", "Helvetica Neue", Arial, sans-serif;
  --bold: "transatbold", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
section[id] { scroll-margin-top: 80px; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--std); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; }
a { color: var(--red); text-decoration: none; }
b, strong { font-family: var(--med); font-weight: normal; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.container { max-width: 1200px; margin: 0 auto; padding-inline: var(--gutter); }
.container.narrow { max-width: 760px; }

.h1 {
  font-family: var(--bold); font-weight: normal; text-transform: uppercase;
  font-size: clamp(1.45rem, 2.6vw, 2rem); letter-spacing: .2rem; line-height: 1.25;
  text-align: center; margin: 0 0 2.2rem;
}
.h1.light { color: #fff; }
p { font-size: clamp(1.02rem, 1.25vw, 1.2rem); line-height: 1.75; margin: 0 0 1rem; }

.i18n-wait body { visibility: hidden; }

/* ---------- Header: roter Punkt in der Mitte ---------- */
header {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  padding-top: env(safe-area-inset-top, 0px);
  transition: background .3s ease-in-out;
}
header.solid { background: var(--dark); }
.nav { display: flex; justify-content: center; align-items: center; height: 80px; }
.nav-side { display: flex; }
.nav-side a {
  color: #fff; font-family: var(--med); font-size: .8rem; letter-spacing: .1rem;
  text-transform: uppercase; padding: 1.2rem 1.9rem;
}
.nav-side a:hover { color: var(--red); }
.nav-dot {
  display: inline-flex; justify-content: center; align-items: center;
  width: 0; height: 46px; overflow: hidden;
  transition: width .3s ease-in-out .3s;
}
.nav-dot img { width: 102px; max-width: none; height: 46px; opacity: 0; transition: opacity .3s ease-in-out, transform .3s; }
header.open .nav-dot { width: 100px; transition-delay: 0s; }
header.open .nav-dot img { opacity: 1; transition-delay: .3s; }
header.pulse .nav-dot img { transform: scale(1.25); }

.lang { position: absolute; right: var(--gutter); top: calc(env(safe-area-inset-top, 0px) + 28px); display: flex; align-items: center; gap: 4px; color: rgba(255,255,255,.5); font-size: .75rem; }
.lang button { background: none; border: 0; color: rgba(255,255,255,.6); font-family: var(--med); letter-spacing: .1rem; padding: 4px; }
.lang button[aria-pressed="true"] { color: #fff; border-bottom: 2px solid var(--red); }

/* ---------- Einstieg ---------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 520px; overflow: hidden; background: #000 url("assets/img/hero-poster.jpg") center/cover; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-cover { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center;
  background: linear-gradient(to bottom, rgba(0,0,0,.50) 0%, rgba(0,0,0,.28) 28%, rgba(0,0,0,.28) 62%, rgba(0,0,0,.60) 100%); }
.hero-logo { margin: 0; width: min(600px, 84vw); line-height: 0; }
.hero-logo img { width: 100%; height: auto; }
.hero-bottom { position: absolute; left: 0; right: 0; bottom: 1.2rem; text-align: center; color: #fff; }
.claim { font-style: italic; font-size: clamp(1.3rem, 2.3vw, 1.9rem); margin: 0 0 .3rem; }
.chevron img { width: 35px; animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(6px); } }
.hero-controls { position: absolute; right: var(--gutter); bottom: 1.4rem; display: flex; gap: .5rem; }
.pill {
  background: rgba(0,0,0,.35); color: #fff; border: 1px solid rgba(255,255,255,.4);
  font-size: .7rem; letter-spacing: .08em; padding: .45rem .8rem; border-radius: 99px;
}
.pill[aria-pressed="true"] { background: rgba(0,0,0,.6); border-color: rgba(255,255,255,.75); }

/* ---------- Über uns ---------- */
.about { padding-block: clamp(4rem, 10vw, 8rem) clamp(3rem, 7vw, 5rem); text-align: center; }
.cols3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
.fake-quote { margin: clamp(3rem, 7vw, 5rem) auto 0; max-width: 760px; text-align: center; }
.fake-quote p { font-size: 1.05rem; }
.fake-quote em { color: var(--red); font-style: inherit; }
.fake-quote span { font-size: .9rem; color: var(--muted); }
.fake-quote.light { color: #fff; }
.fake-quote.light span { color: rgba(255,255,255,.6); }

/* ---------- Wortwand ---------- */
.words {
  position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden;
  background: var(--wall-bg); border-top: 1px solid #eee; transition: background .4s;
  --wall-bg: #fff; --ov-bg: rgba(255,255,255,.9); --w-ink: rgba(17,17,17,.30); --w-soft: rgba(17,17,17,.13); --w-faint: rgba(17,17,17,.07);
  --w-init: rgba(226,6,19,.6); --w-init-soft: rgba(226,6,19,.38); --w-on: #111; --ov-ink: #111; --ov-muted: #444;
  display: flex; align-items: center; justify-content: center;
}
.words-field { position: absolute; inset: -6% -4%; }
.w {
  position: absolute; white-space: nowrap; line-height: 1;
  font-family: var(--med); color: var(--w-soft);
  transform-origin: center; will-change: transform;
  transition: color .9s ease, opacity .9s ease, text-shadow .9s ease;
}
.w i { font-style: normal; color: var(--w-init-soft); transition: color .9s ease; }
.w.on { color: var(--w-on); z-index: 2; }
.w-bg { color: var(--w-faint); }
.w-bg i { color: rgba(226,6,19,.16); }
.words[data-wall="physik"] .words-field { inset: 0; cursor: grab; }
.words[data-wall="physik"] .words-field.grabbing { cursor: grabbing; }
.w-phys { left: 0; top: 0; transform-origin: center; user-select: none; -webkit-user-select: none; color: var(--w-ink); }
.w-phys i { color: var(--w-init); }
.w-phys.held { z-index: 4; color: var(--w-on); }
.w-phys.held i { color: var(--red); }

.words-hint { font-size: .8rem; color: #888; font-style: italic; margin: -.3rem 0 .4rem; }
.words-hint[hidden] { display: none; }
.w.on i { color: var(--red); }
.words.focus .w:not(.on):not(.w-phys) { opacity: .45; }
.w-inner { display: inline-block; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.words.boom .w { opacity: 1 !important; transition: color .3s; }
.words.boom .w:not(.w-bg):not(.on) { color: var(--w-ink); }
/* Wortwand „Noch ’ne Runde“: der rote Punkt verschluckt alles */
.words > .words-overlay { background: none; box-shadow: none; }
.words > .words-overlay::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--ov-bg); box-shadow: 0 0 60px 40px var(--ov-bg); transition: opacity .7s ease; will-change: opacity; }
.words.ov-hide .words-overlay::before { opacity: 0; transition-delay: .25s; }
.words-overlay > *, .words-dot > span { will-change: transform, opacity; }
.words.boom .words-dot { pointer-events: none; }
.words.boom .w:not(.w-bg):not(.on) { color: rgba(17,17,17,.55); }
.words.boom .w-bg { color: rgba(17,17,17,.2); }
.kwg-halo, .kwg-flash, .kwg-ring { position: absolute; border-radius: 50%; pointer-events: none; z-index: 2; }
.kwg-halo, .kwg-flash { will-change: transform, opacity; }
.kwg-halo { width: 160px; height: 160px; margin: -80px 0 0 -80px;
  background: conic-gradient(from 0deg, rgba(226,6,19,0) 0deg, rgba(226,6,19,.38) 55deg, rgba(226,6,19,0) 120deg,
                                        rgba(17,17,17,0) 180deg, rgba(17,17,17,.22) 235deg, rgba(17,17,17,0) 300deg, rgba(226,6,19,0) 360deg);
  -webkit-mask: radial-gradient(circle, transparent 22%, #000 26%, #000 48%, transparent 70%);
          mask: radial-gradient(circle, transparent 22%, #000 26%, #000 48%, transparent 70%);
  opacity: 0; }
.kwg-flash { width: 40px; height: 40px; margin: -20px 0 0 -20px;
  background: radial-gradient(circle, #fff 0%, rgba(255,255,255,.9) 18%, rgba(226,6,19,.55) 42%, rgba(226,6,19,0) 70%); }
.kwg-ring { width: 100px; height: 100px; margin: -50px 0 0 -50px; border-radius: 0; will-change: transform; }
.kwg-ring svg { display: block; overflow: visible; }
.kwg-ring circle { fill: none; stroke: rgba(226,6,19,.8); stroke-width: 2; }
.kwg-ring-2 circle { stroke: rgba(17,17,17,.3); stroke-width: 1; }
.w.on .w-inner { transform: scale(1.18); }

.words-overlay {
  position: relative; z-index: 3; text-align: center;
  background: var(--ov-bg); color: var(--ov-ink); padding: 2rem clamp(1.2rem, 4vw, 3rem);
  max-width: min(560px, calc(100% - 2 * var(--gutter)));
  box-shadow: 0 0 60px 40px var(--ov-bg);
}
.words-title { font-family: var(--bold); font-weight: normal; text-transform: uppercase; letter-spacing: .15rem; font-size: clamp(1.2rem, 2.2vw, 1.7rem); line-height: 1.3; margin: 0 0 1rem; }
.words-caption { font-size: 1rem; color: var(--ov-muted); }
.words-dot { display: inline-flex; align-items: center; gap: .7rem; margin-top: .6rem; background: none; border: 0; padding: .4rem; font-family: var(--med); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ov-ink); }
.words-dot .dot { width: 34px; height: 34px; border-radius: 50%; background: var(--red); transition: transform .25s; }
.words-dot:hover .dot { transform: scale(1.15); }
.words-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Hintergrund-Varianten der Wortwand */
.words[data-bg="hellgrau"] {
  --wall-bg: #e8e6e3; --ov-bg: rgba(232,230,227,.93);
  --w-ink: rgba(17,17,17,.30); --w-soft: rgba(17,17,17,.15); --w-faint: rgba(17,17,17,.08);
}
.words[data-bg="grau18"] {
  --wall-bg: #767573; --ov-bg: rgba(118,117,115,.93);
  --w-ink: rgba(255,255,255,.36); --w-soft: rgba(255,255,255,.2); --w-faint: rgba(255,255,255,.1);
  --w-init: rgba(255,40,50,.85); --w-init-soft: rgba(255,40,50,.55); --w-on: #fff; --ov-ink: #fff; --ov-muted: rgba(255,255,255,.8);
}
.words[data-bg="grau18"] .words-hint { color: rgba(255,255,255,.7); }

/* ---------- Leistungen ---------- */
.halves { display: flex; min-height: min(36vw, 720px); }   /* 36vw = halbe Breite / 1,4 —
   damit ist die Bildhaelfte nie flacher als das Foto und wird oben/unten nicht beschnitten */
.halves.reverse { flex-direction: row-reverse; }
.half { flex: 1 1 50%; min-height: 520px; }
.half.dark { background: var(--dark); color: #fff; text-align: center; padding: clamp(3.5rem, 9vw, 150px) clamp(1.2rem, 6vw, 5rem); display: flex; flex-direction: column; justify-content: center; }
.half.img { background-size: cover; background-position: center; }
.bg-1 { background-image: url("assets/img/bg-1.jpg"); }
.bg-2 { background-image: url("assets/img/bg-2.jpg"); }
.bg-3 { background-image: url("assets/img/bg-3.jpg"); }
.palette { list-style: none; padding: 0; margin: 0 0 1rem; font-size: clamp(1.02rem, 1.25vw, 1.2rem); line-height: 1.75; }
.palette li { display: inline; }
.palette li::after { content: " • "; color: var(--red); }
.palette li:last-child::after { content: ""; }
.palette-note { font-style: italic; }

/* ---------- Equipment ---------- */
.equipment { background: #fff; padding-block: clamp(4.5rem, 9vw, 8.5rem); text-align: center; }
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); }
.equipment .h1 { font-size: clamp(1.25rem, 2.1vw, 1.7rem); margin-bottom: 1.2rem; }
.eq-link { font-family: var(--med); text-transform: uppercase; letter-spacing: .08em; font-size: .9rem; }

/* ---------- Eye Candy ---------- */
.work { background: var(--dark) url("assets/img/video-cover2.jpg") center/cover; background-blend-mode: multiply; padding-block: clamp(4rem, 9vw, 7rem); color: #fff; }
.work-intro { text-align: center; color: rgba(255,255,255,.75); margin: -1rem auto 2.5rem; max-width: 640px; }
.reel { position: relative; aspect-ratio: 16 / 9; max-width: 1000px; margin: 0 auto clamp(3rem, 6vw, 5rem); background: #000 url("assets/img/hero-poster.jpg") center/cover; }
.reel iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.reel-facade { position: absolute; inset: 0; width: 100%; background: rgba(0,0,0,.45); border: 0; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; font-family: var(--std); font-style: italic; font-size: 1.3rem; }
.reel-facade small { font-style: normal; font-size: .7rem; letter-spacing: .08em; opacity: .6; }
.reel-facade img { transition: transform .25s; }
.reel-facade:hover img { transform: scale(1.1); }

.filters { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 0 auto 2rem; }
.filters button { background: transparent; color: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.25); border-radius: 99px; padding: .45rem .95rem; font-family: var(--med); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
.filters button[aria-pressed="true"] { background: #fff; color: #111; border-color: #fff; }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: clamp(1.2rem, 2.4vw, 2rem); }
.tile { background: none; border: 0; padding: 0; text-align: left; color: #fff; display: flex; flex-direction: column; justify-content: flex-start; }
.tile-media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: #141213; display: flex; align-items: center; justify-content: center; }
.tile-media > img:not(.play) { position: relative; width: 100%; height: 100%; transition: transform .6s ease; }
.tile-media.still > img:not(.play) { object-fit: cover; }
.tile-media.poster > img:not(.play) { object-fit: contain; padding: 6% 0; filter: drop-shadow(0 8px 20px rgba(0,0,0,.5)); }
.tile-media.breit > img:not(.play) { padding: 0; filter: drop-shadow(0 6px 18px rgba(0,0,0,.6)); }
.tile-blur { position: absolute; inset: -20px; background-size: cover; background-position: center; filter: blur(22px) brightness(.45) saturate(1.2); }
.tile-media.leer { background: repeating-linear-gradient(135deg, #1b1819 0 14px, #211d1e 14px 28px); }
.tile-missing { position: absolute; top: 10px; left: 10px; font: .6rem/1 var(--med); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.55); border: 1px dashed rgba(255,255,255,.35); padding: 5px 7px; }
.tile:hover .tile-media > img:not(.play) { transform: scale(1.04); }
.tile-logo { position: absolute; left: 10px; bottom: 10px; background: #f4f3f1; padding: 7px 10px; display: flex; align-items: center; height: 34px; }
.tile-logo img { height: 100%; width: auto; max-width: 120px; object-fit: contain; }
.tile-logo.big { position: relative; left: auto; bottom: auto; height: auto; padding: 18px 24px; }
.tile-logo.big img { height: 54px; max-width: 200px; }
.tile-media .play { position: absolute; right: 10px; bottom: 10px; width: 30px; height: 30px; z-index: 2; }
.tile h3 { font-family: var(--med); font-weight: normal; font-size: 1.15rem; margin: .9rem 0 .25rem; }
.tile h3 .year { color: rgba(255,255,255,.45); }
.tile p { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.62); line-height: 1.5; margin: 0; }

/* ---------- In Entwicklung ---------- */
.dev { margin-top: clamp(3.5rem, 7vw, 5.5rem); border-top: 1px solid rgba(255,255,255,.15); padding-top: clamp(2rem, 4vw, 3rem); }
.dev-title { font-family: var(--bold); font-weight: normal; text-transform: uppercase; letter-spacing: .2rem; text-align: center; font-size: clamp(1.1rem, 1.8vw, 1.4rem); margin: 0 0 .6rem; }
.dev-intro { text-align: center; color: rgba(255,255,255,.7); margin: 0 auto 2rem; }
.dev-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 340px)); justify-content: center; gap: 1.2rem; }
.dev-list li { border: 1px solid rgba(255,255,255,.18); padding: 1.3rem 1.2rem 1.1rem; position: relative; }
.dev-list li::before { content: ""; position: absolute; top: 1.35rem; right: 1.1rem; width: 10px; height: 10px; border-radius: 50%; background: var(--red); }
.dev-list h4 { font-family: var(--med); font-weight: normal; font-size: 1.2rem; margin: 0 1.5rem .3rem 0; }
.dev-meta { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.6); margin: 0 0 .7rem; line-height: 1.5; }
.dev-logline { font-size: .95rem; line-height: 1.6; margin: 0; }
.dev-logline.missing { color: rgba(255,255,255,.35); font-style: italic; }

/* ---------- Auftraggeber, Sender & Partner ---------- */
.partners { background: #f4f3f1; padding-block: clamp(2.5rem, 6vw, 4rem); text-align: center; }
.partners-title { font-family: var(--med); font-weight: normal; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: #555; margin: 0 0 .5rem; }
.partners-note { font-size: .85rem; color: #777; font-style: italic; margin: 0 0 1.6rem; }
.partner-row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem); }
.partner-row li { height: 44px; display: flex; align-items: center; }
.partner-row li img { height: 100%; width: auto; max-width: 170px; object-fit: contain; opacity: .78; transition: opacity .3s; }
.partner-row li:hover img { opacity: 1; }
.partner-row li.gross { height: 58px; }

/* Partner-Gruppen */
.partner-group + .partner-group { margin-top: 2.6rem; }
.partner-row li.ohne-logo { flex-direction: column; justify-content: center; height: 44px; }
.wortmarke { font-family: var(--bold); text-transform: uppercase; letter-spacing: .08em; font-size: 1.05rem; color: #231f20; opacity: .78; }
.partner-row li.ohne-logo small { font-size: .55rem; letter-spacing: .12em; text-transform: uppercase; color: #999; border: 1px dashed #bbb; padding: 1px 5px; margin-top: 3px; }

/* In Entwicklung mit Still */
.dev-still { position: relative; aspect-ratio: 16 / 9; margin: -1.3rem -1.2rem 1rem; background: #141213; overflow: hidden; }
.dev-still img { width: 100%; height: 100%; object-fit: cover; }
.dev-still.poster { aspect-ratio: 4 / 5; max-height: 24rem; width: auto; }
.dev-still.poster::before { content: ""; position: absolute; inset: -20px; background: var(--poster) center / cover no-repeat; filter: blur(18px) brightness(.45); }
.dev-still.poster img { position: relative; object-fit: contain; padding: 1rem 0; filter: drop-shadow(0 6px 18px rgba(0,0,0,.6)); }
.dev-still.leer { background: repeating-linear-gradient(135deg, #1b1819 0 14px, #211d1e 14px 28px); }
.dev-list li.mit-bild::before { display: none; }

/* ---------- Kontakt ---------- */
.contact { background: #2a2320 url("assets/img/blured-stripe.jpg") center/cover; color: #fff; text-align: center; padding-block: clamp(4rem, 9vw, 6rem); }
.contact-lead { font-family: var(--med); font-size: 1.35rem; }
.contact-logo { width: min(300px, 60vw); height: auto; margin: 2rem auto 1rem; display: block; }
.address a { color: #fff; font-style: italic; text-decoration: underline; }
.social { display: flex; justify-content: center; gap: 1rem; }
.social img { width: 34px; height: 34px; filter: invert(1); opacity: .85; }

.footer { background: var(--red); color: #111; text-align: center; padding: 1.2rem var(--gutter) calc(1.2rem + env(safe-area-inset-bottom, 0px)); }
.footer p { margin: 0; font-size: .9rem; }
.footer a { color: #111; }

/* ---------- Detailansicht ---------- */
dialog { overflow: auto; border: 0; padding: 0; background: #111; color: #fff; width: min(980px, calc(100% - 2 * var(--gutter))); max-height: 90vh; }
dialog::backdrop { background: rgba(0,0,0,.8); }
.detail-close { position: absolute; top: 10px; right: 10px; z-index: 2; background: #000; color: #fff; border: 1px solid #444; padding: .4rem .7rem; font-size: .8rem; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; }
.detail-media { background: #000; display: flex; align-items: center; justify-content: center; min-height: 300px; }
.detail-media img { max-height: 80vh; width: 100%; object-fit: contain; }
.detail-media.leer { background: #f1f0ee; padding: 15%; }
.detail-media.fehlt { position: relative; background: repeating-linear-gradient(135deg, #1b1819 0 14px, #211d1e 14px 28px); }
.detail-media-logo { max-width: 260px; }
.detail-logo { display: block; height: 30px; width: auto; background: #f4f3f1; padding: 5px 8px; margin: 0 0 1rem; }
.detail-logo[hidden] { display: none; }
.detail-text { padding: 3rem 2rem 2rem; }
.detail-type { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--red); }
.detail-text h3 { font-family: var(--bold); font-weight: normal; font-size: 1.8rem; margin: 0 0 1rem; }
.detail-inhalt { font-size: .98rem; color: rgba(255,255,255,.85); }
.detail-festivals { list-style: none; padding: 0; margin: .8rem 0 1rem; }
.detail-festivals li { font-size: .85rem; line-height: 1.5; padding: .35rem 0 .35rem 1.3rem; border-top: 1px solid rgba(255,255,255,.1); position: relative; }
.detail-festivals li::before { content: ""; position: absolute; left: 0; top: .78rem; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.detail-presse blockquote { margin: 1rem 0; padding-left: .9rem; border-left: 2px solid var(--red); }
.detail-presse p { font-style: italic; font-size: .95rem; margin: 0 0 .2rem; }
.detail-presse cite { font-style: normal; font-size: .75rem; letter-spacing: .06em; color: rgba(255,255,255,.6); }
.detail-note { color: rgba(255,255,255,.6); font-size: .9rem; }
.detail-links a { color: #fff; border-bottom: 1px solid var(--red); margin-right: 1rem; display: inline-block; white-space: nowrap; margin-bottom: .4rem; }

/* ---------- Mobil ---------- */
@media (max-width: 699px) {
  .words[data-wall="physik"] { align-items: flex-start; }
  .words[data-wall="physik"] .words-overlay { margin-top: 1.5rem; }
}
@media (max-width: 820px) {
  .nav { flex-wrap: wrap; height: auto; padding-top: 8px; }
  .nav-dot, header.open .nav-dot { order: -1; width: 100%; height: 40px; }
  .nav-dot img { opacity: 1; height: 34px; }
  .nav-side a { padding: .7rem .7rem .9rem; font-size: .7rem; }
  .lang { top: calc(env(safe-area-inset-top, 0px) + 14px); }
  .cols3 { grid-template-columns: 1fr; }
  .halves, .halves.reverse { flex-direction: column; }
  .half { min-height: 0; }
  .half.img { min-height: 62vw; }
  .halves .half.img { order: -1; }
  .detail-grid { grid-template-columns: 1fr; }
  .detail-media img { max-height: 55vh; }
  .hero-controls { bottom: auto; top: calc(env(safe-area-inset-top, 0px) + 100px); }
  .tiles { grid-template-columns: 1fr; }
  .cols2 { grid-template-columns: 1fr; }
  .partner-row li { height: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .chevron img { animation: none; }
  .w, .w i, .w-inner { transition: none; }
}