/* erikhaffner.de – Stil. Quelle: quelle/vorlagen/stil.css (der Build kopiert nach site/assets/). */

/* Farbwelt „Kino-Bernstein“ (31.10.2026): warmes Gold als Akzent, Elfenbein statt Reinweiß, warmes Grau
   für leisen Text, Kupfer als Zweitfarbe. Kontrast auf --bg (#0C0C0D) nach WCAG: Elfenbein 16,2:1,
   leise 7,6:1, label 5,8:1, Gold 10:1, Gold leise 7,5:1, Kupfer 6,3:1 – alles AA für Fließtext. */
:root {
  /* Grund: dezenter Verlauf von Schwarz zu sehr dunklem Blau (Erik, 31.10.2026). --bg ist der Mittelton
     für Stellen, die eine einzelne Farbe brauchen (Text auf Gold, Deckstriche im Filmpfad). */
  --bg-oben: #09090B;
  --bg-unten: #0E1D3C;
  --bg: #0A0D15;
  --bg-fuss: rgba(3, 5, 11, .55);
  --flaeche: #17140F;
  --elfenbein: #F1E9DA;
  --gold: #E8B04A;
  --gold-leise: #C29A5E;
  --kupfer: #CF7F45;
  --rost: #C0613F;
  --champagner: #F4DDA8;
  --text: var(--elfenbein);
  --leise: #AAA090;
  --label: #958B7C;
  --akzent: var(--gold);
  --linie: #221E19;
  --linie-stark: #352E25;
  --linie-hover: #6E5B40;
  --rand: clamp(20px, 5vw, 72px);
  --titel: "Inter Tight", Inter, system-ui, sans-serif;
  --text-schrift: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --weich: cubic-bezier(.2, .7, .2, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
/* Der Verlauf liegt fest hinter der Seite (eigene Ebene statt background-attachment: fixed, das iOS ignoriert) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(165deg, var(--bg-oben) 0%, #0A0D16 35%, #0C1428 68%, var(--bg-unten) 100%);
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 110px; }
body {
  margin: 0;
  background: var(--bg-oben);
  color: var(--text);
  font-family: var(--text-schrift);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; }
a { color: var(--text); text-decoration: none; }
a:hover { color: var(--akzent); }
strong { font-weight: 500; color: var(--text); }
h1, h2, h3 { font-family: var(--titel); font-weight: 700; letter-spacing: -.02em; margin: 0; }
p { margin: 0; }

::selection { background: rgba(232, 176, 74, .32); color: var(--elfenbein); }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }
.tile:focus-visible, .play:focus-visible { outline-offset: 6px; }

.nur-vorleser {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skiplink {
  position: absolute; left: 12px; top: -100px; z-index: 60;
  background: var(--akzent); color: var(--bg); padding: 12px 18px;
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
}
.skiplink:focus { top: 12px; color: var(--bg); }

/* Kleine Großbuchstaben-Beschriftungen */
.label { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-leise); }
.label-hell { font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.mehr {
  display: inline-block; font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); border-bottom: 1px solid rgba(232, 176, 74, .5); padding-bottom: 6px;
  transition: color .2s ease, border-color .2s ease;
}
.mehr:hover { color: var(--elfenbein); border-bottom-color: var(--elfenbein); }

/* ---------- Kopf ---------- */
.kopf {
  display: flex; flex-wrap: wrap; gap: 16px 40px; justify-content: space-between; align-items: center;
  padding: 28px var(--rand); border-bottom: 1px solid var(--linie);
  position: sticky; top: 0; z-index: 30;
  background: rgba(9, 9, 11, .82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.marke {
  font-family: var(--titel); font-weight: 600; font-size: 26px; letter-spacing: .08em; color: var(--text);
  line-height: 1.2;
}
/* Neun Punkte (mit „App“): der Abstand schrumpft mit der Breite, damit das Menü bis etwa 1180 px neben
   dem Namen und darunter bis 821 px in einer Zeile bleibt (unter 1000 px etwas kleinere Schrift). */
.nav ul { display: flex; flex-wrap: wrap; gap: 8px clamp(16px, 2vw, 28px); list-style: none; margin: 0; padding: 0; }
.nav a { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--leise); display: inline-block; padding: 6px 0; }
@media (min-width: 821px) and (max-width: 1000px) { .nav a { font-size: 12px; letter-spacing: .1em; } }
.nav a:hover { color: var(--elfenbein); }
.menue-knopf { display: none; font: 500 12px/1 Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--text); background: transparent; border: 1px solid var(--linie-stark, #2C2C2E); padding: 0 18px; min-height: 44px; cursor: pointer; }
.menue-knopf:hover, .menue-knopf[aria-expanded="true"] { color: var(--gold); border-color: rgba(232, 176, 74, .55); }
.nav a[aria-current], .nav a.ist-bereich { color: var(--gold); }
/* Eriks App: dezent abgesetzt durch einen kleinen goldenen Punkt davor, beim Überfahren ganz in Gold */
.nav a[data-nav="app"]::before {
  content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 9px; border-radius: 50%;
  background: var(--gold); vertical-align: middle; transform: translateY(-1px);
}
.nav a[data-nav="app"]:hover { color: var(--gold); }

/* ---------- Abschnitte ---------- */
.rand { padding-left: var(--rand); padding-right: var(--rand); }
.oben { padding-top: clamp(24px, 4vw, 56px); }
.h2 { font-size: 56px; line-height: 1; }
.h2-klein { font-size: 48px; line-height: 1; }
.riesig {
  font-size: clamp(48px, 8.3vw, 120px); line-height: .9;
  hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word;
}
.riesig.lang { font-size: clamp(40px, 6.2vw, 88px); line-height: .95; }

/* Kinoformat-Rahmen */
.rahmen { position: relative; aspect-ratio: 2.39 / 1; overflow: hidden; background: #000; }
.rahmen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.rahmen.projekt img { object-position: center 35%; opacity: .85; }

/* Bühne der Startseite: Filmstreifen läuft links aus dem Porträt heraus, weicher Übergang dazwischen */
.buehne { --buehne-h: clamp(190px, 25vw, 360px); position: relative; height: var(--buehne-h); display: flex; justify-content: flex-end; overflow: hidden; background: transparent; --perf: clamp(14px, 1.9vw, 26px); }
.filmstreifen {
  position: absolute; inset: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 55%, transparent 80%);
  mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 55%, transparent 80%);
}
/* Perforation: ein abgerundetes Loch je 26 Einheiten, oben und unten; läuft mit dem Streifen mit */
.streifen-lauf {
  display: flex; width: max-content; height: 100%; box-sizing: border-box; padding-block: var(--perf);
  background-color: #080706;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='32'%3E%3Crect x='6' y='10' width='14' height='12' rx='2.5' fill='%233B2D19'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='32'%3E%3Crect x='6' y='10' width='14' height='12' rx='2.5' fill='%233B2D19'/%3E%3C/svg%3E");
  background-repeat: repeat-x; background-position: left top, left bottom;
  background-size: calc(var(--perf) * 26 / 32) var(--perf);
}
/* Die Bilder blenden weich ineinander: Ränder ausgeblendet und überlappend statt harter Bildstriche */
.streifen-bild {
  display: block; height: 100%; aspect-ratio: 16 / 9; overflow: hidden; flex: 0 0 auto;
  --ueber: calc((var(--buehne-h) - 2 * var(--perf)) * .14);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.streifen-bild { margin-left: calc(-1 * var(--ueber)); } /* auch das erste: dann ist ein Satz genau 50 % lang */
.streifen-bild img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .88; transition: opacity .3s ease; }
.streifen-bild:hover img, .streifen-bild:focus-visible img { opacity: 1; }
/* Lauf von rechts nach links: die Filme kommen hinter dem Porträt hervor. Nur mit Skript (Pause-Knopf). */
@keyframes streifen-lauf { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.buehne.laeuft .streifen-lauf { animation: streifen-lauf var(--dauer, 80s) linear infinite; }
/* Bremsen beim Überfahren und Pause steuert seite.js weich über die Abspielgeschwindigkeit;
   ohne diese Möglichkeit (alte Browser) hält der Pause-Knopf hart an. */
.buehne.ist-angehalten.ohne-bremse .streifen-lauf { animation-play-state: paused; }
/* Lauf per Skript (seite.js, seit 31.10.2026): jedes Bild liegt einzeln und wird per transform verschoben,
   damit keine riesige Ebene entsteht, die der Browser nur stückweise nachzeichnet. */
.buehne.js-lauf .streifen-lauf { position: relative; width: 100%; }
.buehne.js-lauf .streifen-bild {
  position: absolute; left: 0; top: var(--perf); height: calc(100% - 2 * var(--perf)); width: auto;
  margin: 0; will-change: transform;
}
.buehne-portrait {
  position: relative; z-index: 1; height: 100%; width: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 30%;
  filter: grayscale(1); pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 38%);
  mask-image: linear-gradient(to right, transparent 0, #000 38%);
}
/* Timecode und Pause-Knopf entfernt (Erik, 31.10.2026). Überfahren bremst den Streifen, reduzierte Bewegung hält ihn an. */
@media (prefers-reduced-motion: reduce) {
  .buehne .streifen-lauf { animation: none !important; }
  .tile img { transition: none !important; }
}

.split { display: flex; gap: 32px; justify-content: space-between; align-items: flex-end; padding-top: 40px; }
/* Startseite: Name steht rechtsbündig unter dem Porträt (Erik, 30.10.2026) */
.oben .split { flex-direction: column; align-items: flex-end; gap: 16px; text-align: right; padding-top: 48px; }
.oben .unterzeile { max-width: none; padding-bottom: 0; }
.name { font-size: clamp(64px, 8.9vw, 128px); line-height: .9; letter-spacing: -.01em; }
.unterzeile { max-width: 360px; padding-bottom: 12px; }
.unterzeile .label-hell { margin-bottom: 14px; }
.unterzeile p + p { font-size: 15px; line-height: 1.6; color: var(--leise); }

/* ---------- Kachel-Raster ---------- */
.arbeiten { padding-top: 120px; padding-bottom: 40px; }
.oben + .arbeiten { padding-top: 40px; }
.arbeiten-kopf { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: flex-end; margin-bottom: 40px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font: 500 12px/1 var(--text-schrift); letter-spacing: .14em; text-transform: uppercase;
  padding: 14px 18px; min-height: 44px; border: 1px solid var(--linie-stark); background: transparent;
  color: var(--leise); cursor: pointer;
}
.chip:hover { color: var(--elfenbein); border-color: var(--linie-hover); }
.chip[aria-pressed="true"] { color: var(--bg); background: var(--gold); border-color: var(--gold); }

.raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; list-style: none; margin: 0; padding: 0; }
.raster > li[hidden] { display: none; }
.tile { display: block; color: var(--text); }
/* Kachel: Infos liegen im Bild und erscheinen beim Überfahren bzw. mit Tastaturfokus */
.tile-bild { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--flaeche); }
.tile-bild img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--weich); }
.tile-info {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
  padding: clamp(16px, 2vw, 28px); background: rgba(13, 11, 9, .78); opacity: 0; transition: opacity .45s var(--weich);
}
/* Mit Maus: zwei schwarze Balken machen aus 16:9 Cinemascope (2,39:1, je 12,8 % der Höhe),
   die Infos stehen knapp über dem unteren Balken und gleiten 12 px hoch. Der Schleier ist dafür leichter.
   Eine goldene Haarlinie säumt die Bildkante der Balken (außen geparkt mit 2 px Luft, damit sie nicht hereinblitzt);
   die Balken liegen über dem Schleier, sonst grauen Balken und Linie mit ein. */
@media (hover: hover) {
  .tile-bild::before, .tile-bild::after {
    content: ""; position: absolute; left: 0; right: 0; z-index: 3; height: 12.8%; background: #000;
    pointer-events: none; transition: transform .5s var(--weich);
  }
  .tile-bild::before { top: 0; transform: translateY(calc(-100% - 2px)); box-shadow: 0 1px 0 rgba(232, 176, 74, .7); }
  .tile-bild::after { bottom: 0; transform: translateY(calc(100% + 2px)); box-shadow: 0 -1px 0 rgba(232, 176, 74, .7); }
  .tile:hover .tile-bild::before, .tile:hover .tile-bild::after,
  .tile:focus-visible .tile-bild::before, .tile:focus-visible .tile-bild::after { transform: none; }
  /* Prozent-Innenabstand misst an der Breite: 12,8 % von 9/16 der Breite = 7,2 % */
  .tile-info { background: rgba(13, 11, 9, .74); padding-bottom: calc(7.2% + clamp(12px, 1.4vw, 20px)); }
  .tile-info > span { transform: translateY(12px); transition: transform .55s var(--weich); }
  .tile:hover .tile-info > span, .tile:focus-visible .tile-info > span { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tile-bild::before, .tile-bild::after, .tile-info, .tile-info > span { transition: none; }
}
.tile:hover .tile-info, .tile:focus-visible .tile-info { opacity: 1; }
.tile:hover img, .tile:focus-visible img { transform: scale(1.04); }
.tile-titel { font-family: var(--titel); font-weight: 600; letter-spacing: -.01em; font-size: clamp(22px, 2vw, 30px); line-height: 1.1; color: var(--text); }
.tile-sender { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.tile-funktion { font-size: 14px; color: var(--leise); }
/* Ohne Maus (Handy, Tablet) gibt es kein Überfahren: Infos dauerhaft als Leiste unten im Bild */
@media (hover: none) {
  .tile-info { opacity: 1; inset: auto 0 0 0; flex-direction: row-reverse; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 12px; background: rgba(13, 11, 9, .84); }
  .tile-titel { font-size: 16px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tile-sender { font-size: 11px; white-space: nowrap; }
  .tile-funktion { display: none; }
}
.alle-links { margin-top: 56px; display: flex; flex-wrap: wrap; gap: 20px 40px; }

/* ---------- Vita-Teaser ---------- */
.teaser { padding-top: 40px; padding-bottom: 120px; }
.teaser-innen { display: flex; gap: 72px; align-items: center; border-top: 1px solid var(--linie); padding-top: 56px; }
.portrait { display: block; filter: grayscale(1); object-fit: cover; flex: 0 0 auto; height: auto; }
.portrait.rund { width: 380px; max-width: 100%; aspect-ratio: 1; border-radius: 50%; transform: scale(1); clip-path: circle(48.5% at 50% 50%); }
.portrait.hoch { width: 380px; max-width: 100%; aspect-ratio: 4 / 5; object-position: center 25%; }
.teaser-text { max-width: 620px; }
.teaser-text .label-hell { margin-bottom: 20px; }
.lead { font-family: var(--titel); font-weight: 500; letter-spacing: -.01em; font-size: 36px; line-height: 1.25; }
.teaser-text .lead { margin-bottom: 28px; }
.teaser-text .lead + p { margin-bottom: 36px; font-size: 16px; line-height: 1.7; color: var(--leise); }

/* ---------- Fuß ---------- */
.fuss { background: var(--bg-fuss); padding: 96px var(--rand) 40px; border-top: 1px solid var(--linie); }
main + .fuss { margin-top: 140px; }
main.ohne-abstand + .fuss { margin-top: 0; }
.fuss-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.fuss .label { margin-bottom: 16px; }
/* Agentur-Logo (Weihrauch Künstlerbedarf), helle Fassung für dunklen Grund */
.agentur-logo { display: block; width: 150px; height: auto; margin: 4px 0 20px; }
.kontakt .agentur-logo { width: 200px; margin-top: 28px; }
/* Fußlinks: auf Touch-Geräten mindestens 24 px hohe Tippfläche (WCAG 2.2) */
.fuss-raster a, .fuss-leiste a, .kontakt p a, .kicker a { display: inline-block; padding: 3px 0; }
.fuss-raster p:not(.label) { font-size: 15px; line-height: 1.7; }
.fuss-leiste {
  display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: space-between;
  margin-top: 80px; padding-top: 28px; border-top: 1px solid var(--linie); font-size: 13px; color: var(--label);
}
.fuss-leiste a { color: var(--label); }
.fuss-leiste a:hover { color: var(--gold); }
.fuss-leiste span { display: flex; flex-wrap: wrap; gap: 8px 28px; }

/* ---------- Projektseite ---------- */
.projekt-kopf { gap: 32px; }
.kicker { margin-bottom: 18px; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-leise); }
.kicker a { color: var(--gold-leise); }
.kicker a:hover { color: var(--gold); }
.funktion { padding-bottom: 14px; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); white-space: nowrap; }

.inhalt { display: flex; gap: 96px; padding-top: 112px; align-items: flex-start; }
.zitat { margin: 0; flex: 3 1 0; min-width: 0; }
/* Projekttext: bewusst klein und ruhig (Erik, 30.10.2026: 34px erschlug einen) */
.zitat blockquote { margin: 0; max-width: 60ch; font-family: var(--text-schrift); font-size: 18px; line-height: 1.75; font-weight: 400; letter-spacing: .005em; color: #DCD3C4; }
.zitat blockquote p { margin: 0; }
.zitat figcaption { margin-top: 24px; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--kupfer); }
.absaetze { margin-top: 40px; }
.absaetze p { font-size: 16px; line-height: 1.75; color: var(--leise); margin-bottom: 20px; }
.credits { flex: 2 1 0; min-width: 0; border-left: 1px solid var(--linie); padding-left: 48px; }
.credits > .label { margin-bottom: 28px; }
.credit { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-top: 1px solid var(--linie); margin: 0; }
.credit .k { font-size: 13px; color: var(--gold-leise); line-height: 1.65; }
.credit .v { margin: 0; font-size: 14px; line-height: 1.65; color: var(--leise); }
.credit.voll { grid-template-columns: minmax(0, 1fr); }
.credit.voll .k { font-size: 14px; }
.logos { list-style: none; margin: 0; padding: 24px 0 0; border-top: 1px solid var(--linie); display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center; }
/* Logos liegen als weiße Silhouette vor; Breite/Höhe setzt der Build (gleiche optische Größe) */
.logos img { display: block; height: auto; max-width: 100%; opacity: .8; transition: opacity .2s ease; }
.logos img:hover { opacity: 1; }
/* alte Rasterlogos ohne weiße Fassung (Umfärben per Filter) */
.logos img:not(.logo-weiss) { max-height: 36px; max-width: 120px; width: auto; opacity: .72; }
.logo-silhouette { filter: brightness(0) invert(1); }
.logo-invert { filter: grayscale(1) invert(1); mix-blend-mode: screen; }
.logo-grau { filter: grayscale(1) brightness(1.2); }

.band { margin-top: 120px; aspect-ratio: 3 / 1; overflow: hidden; background: #000; }
.band img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .85; }

.videos { padding-top: 120px; }
.videos-kopf { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: flex-end; margin-bottom: 36px; }
.videos-kopf p { font-size: 13px; color: var(--label); max-width: 460px; line-height: 1.6; }
.video-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 28px; list-style: none; margin: 0; padding: 0; }
.video-flaeche { aspect-ratio: 16 / 9; position: relative; background: #000; }
.play { cursor: pointer; border: 0; padding: 0; background: #000; display: block; width: 100%; height: 100%; position: relative; color: var(--text); }
.play img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .8; }
.play-knopf {
  position: absolute; left: 24px; bottom: 24px; width: 56px; height: 56px; border-radius: 50%;
  background: var(--elfenbein); color: var(--bg); display: flex; align-items: center; justify-content: center;
  transition: background-color .2s ease;
}
.play:hover .play-knopf, .play:focus-visible .play-knopf { background: var(--gold); }
.hinweis-box {
  position: absolute; inset: 0; background: var(--flaeche); border: 1px solid var(--linie-stark);
  display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 24px; overflow: auto;
}
.hinweis-box p { font-size: 14px; line-height: 1.6; color: var(--leise); }
.hinweis-box a { color: var(--text); text-decoration: underline; text-decoration-color: var(--gold-leise); }
.btn {
  font: 500 12px/1 var(--text-schrift); letter-spacing: .14em; text-transform: uppercase;
  padding: 14px 20px; min-height: 44px; border: 1px solid var(--akzent); background: var(--akzent); color: var(--bg); cursor: pointer;
}
.btn:hover { background: var(--elfenbein); border-color: var(--elfenbein); }
.video-flaeche iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-titel { margin-top: 14px; font-size: 14px; color: var(--text); }
.video-text { margin-top: 8px; font-size: 13px; line-height: 1.6; color: var(--label); }

.blaettern { display: flex; justify-content: space-between; gap: 24px; margin: 140px var(--rand) 0; padding: 48px 0; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.blaettern a { display: block; max-width: 48%; }
.blaettern a.weiter { text-align: right; margin-left: auto; }
.blaettern .label { display: block; margin-bottom: 10px; }
.blaettern .ziel { font-family: var(--titel); font-weight: 600; letter-spacing: -.01em; font-size: 36px; line-height: 1.15; }

/* ---------- Seitenkopf allgemein ---------- */
.seitenkopf { padding-top: 96px; }
.seitenkopf .riesig { margin-bottom: 24px; }
.seitenkopf .intro { max-width: 720px; font-size: 16px; line-height: 1.75; color: var(--leise); }
.abschnitt { padding-top: 120px; }
.abschnitt > h2 { margin-bottom: 40px; }

/* ---------- Vita ---------- */
.vita-kopf { display: flex; gap: 96px; padding-top: 96px; align-items: flex-start; }
.vita-kopf .portrait.rund { width: 420px; }
.vita-kopf .portrait.hoch { width: 420px; aspect-ratio: 4 / 5; object-position: center 30%; }
.vita-text { flex: 1 1 0; min-width: 0; max-width: 720px; }
.vita-text h1 { margin-bottom: 48px; }
.vita-text .lead { font-size: 30px; line-height: 1.3; margin-bottom: 24px; }
.vita-text p:not(.lead) { margin-bottom: 20px; font-size: 16px; line-height: 1.75; color: var(--leise); }
.preise { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 28px; list-style: none; margin: 0; padding: 0; }
.preise li { border-top: 1px solid var(--linie-stark); padding: 22px 0 32px; }
.preise h3 { font-family: var(--text-schrift); font-weight: 400; margin: 0 0 10px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--akzent); }
.preise p { font-size: 14px; line-height: 1.7; color: var(--leise); }
/* Trophäe über dem Preisnamen (Datei in doppelter Auflösung), hebt sich beim Überfahren kurz an */
.preis-icon { display: block; height: 64px; width: auto; margin: 0 0 18px; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.preise li:hover .preis-icon { transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) { .preis-icon { transition: none; } .preise li:hover .preis-icon { transform: none; } }
/* ---------- Filmografie als Filmpfad (31.10.2026) ----------
   Ohne Skript eine schlichte, farbige Liste: Jahreszahl in Gold, die Einträge als lockere Karten.
   seite.js setzt „mit-pfad“: dann hängen die Karten abwechselnd links und rechts an einem geschwungenen
   Pfad (SVG, zeichnet sich beim Scrollen selbst), schmal läuft der Pfad links und alle Karten stehen rechts.
   Jede Karte: Sender (Gold) und Zusatz (Kupfer) als Versalien-Zeile, darunter der Titel (Elfenbein),
   dann Umfang (warmes Grau) und Ehrungen (Kupfer). Der Punkt am Titel zeigt die Sparte. */
.filmografie { --gasse: 220px; --jahr-gr: clamp(44px, 4.7vw, 68px); overflow-x: clip; }
.filmografie-kopf { display: flex; flex-wrap: wrap; gap: 20px 48px; justify-content: space-between; align-items: flex-end; margin-bottom: 72px; }
.sparten { display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 11px; line-height: 1.4; letter-spacing: .18em; text-transform: uppercase; color: var(--label); }
.sparten span { display: inline-flex; align-items: center; gap: 10px; }
.sparten span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sparte); }
[data-sparte="serie"] { --sparte: var(--gold); }
[data-sparte="film"] { --sparte: var(--champagner); }
[data-sparte="werbung"] { --sparte: var(--kupfer); }
[data-sparte="live"] { --sparte: var(--rost); }
.pfad-buehne { position: relative; }
.jahr { padding-bottom: 64px; }
.jahr > h3 { margin: 0 0 28px; font-size: var(--jahr-gr); line-height: 1; letter-spacing: -.03em; color: var(--gold); font-variant-numeric: tabular-nums; }
.jahr ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 36px 56px; list-style: none; margin: 0; padding: 0; }
.karte { --seite: 1; position: relative; display: flex; flex-direction: column; gap: 7px; min-width: 0; padding-left: 24px; }
.k-titel {
  position: relative; font-family: var(--titel); font-weight: 600; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.15;
  letter-spacing: -.012em; color: var(--elfenbein); overflow-wrap: break-word;
}
.k-titel a {
  color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em;
  text-decoration-color: rgba(232, 176, 74, .4); transition: color .2s ease, text-decoration-color .2s ease;
}
.k-titel a:hover, .k-titel a:focus-visible { color: var(--gold); text-decoration-color: var(--gold); }
/* Sparten-Punkt: sitzt auf der Seite der Karte, die zum Pfad zeigt */
.karte[data-sparte] .k-titel::before {
  content: ""; position: absolute; left: -24px; top: calc(.575em - 4px); width: 8px; height: 8px; border-radius: 50%;
  background: var(--sparte); transition: transform .35s var(--weich);
}
.k-meta { order: -1; display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 11.5px; line-height: 1.5; letter-spacing: .18em; text-transform: uppercase; }
.k-sender { color: var(--gold); }
.k-zusatz { color: var(--kupfer); }
.k-sender + .k-zusatz::before { content: "·"; margin-right: 10px; color: var(--label); }
.k-umfang { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; font-size: 14px; line-height: 1.55; color: var(--leise); }
.k-ehrung { position: relative; padding-left: 15px; font-size: 13px; line-height: 1.5; color: var(--kupfer); }
.k-ehrung::before { content: ""; position: absolute; left: 1px; top: .6em; width: 5px; height: 5px; background: var(--gold-leise); transform: rotate(45deg); }
.aufklapper {
  margin-top: 8px; font: 500 13px/1 var(--text-schrift); letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); background: transparent; border: 0; border-bottom: 1px solid rgba(232, 176, 74, .5);
  padding: 0 0 6px; cursor: pointer; min-height: 44px; transition: color .2s ease, border-color .2s ease;
}
.aufklapper:hover { color: var(--elfenbein); border-bottom-color: var(--elfenbein); }
/* Frühere Jahre klappen weich auf: Raster von 0fr auf 1fr (seite.js setzt „klappbar“ und „ist-zu“,
   ganz zu ist der Bereich wieder hidden). Ohne Skript steht alles offen da. overflow: clip statt hidden
   (schafft keinen Scroll-Container). Der Filmpfad misst sich dabei Bild für Bild neu und wächst mit. */
.fruehere.klappbar { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .6s var(--weich); }
.fruehere.klappbar.ist-zu { grid-template-rows: 0fr; }
.fruehere-innen { min-height: 0; }
.fruehere.klappt > .fruehere-innen { overflow: clip; }
/* Breit: Pfad in der Mitte, Jahreszahl abwechselnd links und rechts davon, die erste Karte gegenüber,
   die übrigen im Zickzack (dense: jede Zeile ein Paar, die ungeraden Karten hängen 30 px tiefer). */
@media (min-width: 821px) {
  .filmografie.mit-pfad .jahr { position: relative; padding-bottom: 88px; }
  .filmografie.mit-pfad .jahr > h3 { position: absolute; top: 0; width: calc((100% - var(--gasse)) / 2); margin: 0; }
  .filmografie.mit-pfad .jahr-links > h3 { left: 0; text-align: right; }
  .filmografie.mit-pfad .jahr-rechts > h3 { right: 0; }
  .filmografie.mit-pfad .jahr ul { grid-template-columns: minmax(0, 1fr) var(--gasse) minmax(0, 1fr); grid-auto-flow: row dense; gap: 40px 0; }
  .filmografie.mit-pfad .jahr ul::before { content: ""; grid-row: 1; min-height: calc(var(--jahr-gr) + 8px); }
  .filmografie.mit-pfad .jahr-links ul::before { grid-column: 1; }
  .filmografie.mit-pfad .jahr-rechts ul::before { grid-column: 3; }
  .filmografie.mit-pfad .karte { max-width: 480px; }
  .filmografie.mit-pfad .jahr-links .karte:nth-child(odd), .filmografie.mit-pfad .jahr-rechts .karte:nth-child(even) { grid-column: 3; justify-self: start; }
  .filmografie.mit-pfad .jahr-links .karte:nth-child(even), .filmografie.mit-pfad .jahr-rechts .karte:nth-child(odd) {
    --seite: -1; grid-column: 1; justify-self: end; text-align: right; padding-left: 0; padding-right: 24px;
  }
  .filmografie.mit-pfad .karte:nth-child(odd) { top: 30px; }
  .filmografie.mit-pfad .jahr-links .karte:nth-child(even) .k-meta,
  .filmografie.mit-pfad .jahr-rechts .karte:nth-child(odd) .k-meta { justify-content: flex-end; }
  .filmografie.mit-pfad .jahr-links .karte:nth-child(even) .k-umfang,
  .filmografie.mit-pfad .jahr-rechts .karte:nth-child(odd) .k-umfang { align-items: flex-end; }
  .filmografie.mit-pfad .jahr-links .karte:nth-child(even) .k-titel::before,
  .filmografie.mit-pfad .jahr-rechts .karte:nth-child(odd) .k-titel::before { left: auto; right: -24px; }
  .filmografie.mit-pfad .aufklapper { display: block; margin: 0 auto; }
}
@media (min-width: 821px) and (max-width: 1100px) { .filmografie { --gasse: 150px; } }
/* Schmal: Pfad am linken Rand, alle Karten rechts davon */
@media (max-width: 820px) {
  .filmografie-kopf { margin-bottom: 64px; }
  .sparten { gap: 8px 20px; }
  .jahr { padding-bottom: 52px; }
  .jahr ul { gap: 28px; }
  .filmografie.mit-pfad .pfad-buehne { padding-left: 30px; }
  .filmografie.mit-pfad .jahr > h3 { margin-bottom: 22px; }
}
/* Spot: zeigt die Maus auf eine Karte, treten alle anderen zurück (die Jahreszahlen bleiben hell); die
   Verzögerung beim Aufhellen überbrückt die Lücken zwischen den Karten. Die Karte selbst neigt sich
   leicht um ihren Aufhängepunkt am Pfad, der Sparten-Punkt wächst. */
@media (hover: hover) {
  .filmografie .karte > * { transition: opacity .35s ease .14s; }
  .filmografie:has(.karte:hover, .karte a:focus-visible) .karte:not(:hover):not(:has(a:focus-visible)) > * {
    opacity: .32; transition-duration: .3s; transition-delay: .06s;
  }
  .filmografie .karte:hover .k-titel::before { transform: scale(1.5); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .filmografie .karte { transform-origin: calc(50% - var(--seite) * 50%) 24px; transition: rotate .5s var(--weich); }
  .filmografie .karte:hover { rotate: calc(var(--seite) * 1.2deg); }
}

/* ---------- Werbung, Bücher, Live ---------- */
.kunden { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; list-style: none; margin: 0; padding: 0; }
.kunden li { border-top: 1px solid var(--linie-stark); padding: 22px 0 36px; display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
.kunden h3 { font-family: var(--text-schrift); font-weight: 400; margin: 0 0 10px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--akzent); }
.kunden p { font-size: 14px; line-height: 1.7; color: var(--leise); }
.kunden img { max-height: 32px; max-width: 96px; width: auto; height: auto; opacity: .72; flex: 0 0 auto; }

.eintraege { list-style: none; margin: 0; padding: 0; }
.eintrag { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 56px; border-top: 1px solid var(--linie); padding: 48px 0; align-items: start; }
.eintrag img { width: 100%; height: auto; display: block; }
.eintrag h2 { font-size: 40px; line-height: 1.05; margin-bottom: 10px; }
.eintrag .label { margin-bottom: 24px; }
.eintrag-text { max-width: 720px; }
.eintrag-text p:not(.label) { font-size: 16px; line-height: 1.75; color: var(--leise); margin-bottom: 18px; }

/* ---------- Galerie: Collage der Drehtag-Fotos ----------
   Raster aus kleinen quadratischen Zellen (Zellbreite = Zeilenhöhe über die Breite des Rahmens, cqw);
   hochkant 2×3, quer 3×2, quadratisch 2×2, „groß“ etwa doppelt. dense füllt die Lücken.
   Die Lupe (seite.js) ist ein einziges festes Element über der Seite. */
.collage-rahmen { container-type: inline-size; }
.collage {
  --n: 24; --luecke: 4px;
  display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  grid-auto-rows: calc((100cqw - (var(--n) - 1) * var(--luecke)) / var(--n));
  grid-auto-flow: dense; gap: var(--luecke); list-style: none; margin: 0; padding: 0;
}
.collage li { grid-column: span 2; grid-row: span 3; transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .35s ease, filter .35s ease; }
.collage li.c-quer { grid-column: span 3; grid-row: span 2; }
.collage li.c-quadrat { grid-row: span 2; }
.collage li.c-hoch.c-gross { grid-column: span 4; grid-row: span 5; }
.collage li.c-quer.c-gross { grid-column: span 5; grid-row: span 4; }
.collage li.c-quadrat.c-gross { grid-column: span 4; grid-row: span 4; }
.collage a { display: block; width: 100%; height: 100%; overflow: hidden; background: var(--flaeche); }
.collage img { width: 100%; height: 100%; object-fit: cover; display: block; }
.collage a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* Während die Lupe offen ist, treten die übrigen Fotos zurück */
.collage.lupe-an li { opacity: .5; filter: saturate(.4); }
.collage.lupe-an li.ist-lupe { opacity: 0; filter: none; }
/* Beim Laden blenden die Kacheln nacheinander auf (Reihenfolge von seite.js gemischt) */
.collage.gemischt li { animation: kachel-rein .7s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 14ms); }
@keyframes kachel-rein { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } }
.lupe {
  position: fixed; left: 0; top: 0; z-index: 25; pointer-events: none; overflow: hidden;
  background: #000 center / cover no-repeat; opacity: 0; transform-origin: 0 0;
  box-shadow: 0 0 0 1px rgba(232, 176, 74, .55), 0 24px 70px rgba(0, 0, 0, .65);
}
.lupe img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .25s ease; }
.lupe img.da { opacity: 1; }
.lupe.an { opacity: 1; }
@media (max-width: 1000px) { .collage { --n: 16; } }
@media (max-width: 560px) { .collage { --n: 8; --luecke: 3px; } }
@media (prefers-reduced-motion: reduce) {
  .collage li, .lupe img { transition: none; }
  .collage.gemischt li { animation: none; }
}
/* Bildansicht der Galerie */
.leuchtkasten {
  position: fixed; inset: 0; z-index: 50; background: rgba(10, 9, 7, .96);
  display: grid; grid-template-columns: 72px minmax(0, 1fr) 72px; align-items: center;
  padding: max(64px, env(safe-area-inset-top, 0px)) max(8px, env(safe-area-inset-right, 0px)) max(48px, env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px));
}
.leuchtkasten[hidden] { display: none; }
.leuchtkasten:focus { outline: none; }
.lk-bild { grid-column: 2; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; min-height: 0; }
.lk-bild img { max-width: 100%; max-height: calc(100vh - 170px); max-height: calc(100svh - 170px); object-fit: contain; display: block; }
.lk-bild figcaption { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-leise); }
.lk-zu {
  position: absolute; top: max(16px, env(safe-area-inset-top, 0px)); right: max(16px, env(safe-area-inset-right, 0px));
  min-height: 44px; padding: 0 18px; background: transparent; border: 1px solid var(--linie-stark, #2C2C2E); color: var(--text);
  font: 500 12px/1 var(--text-schrift); letter-spacing: .16em; text-transform: uppercase; cursor: pointer;
}
.lk-pfeil { width: 56px; height: 56px; justify-self: center; border: 0; border-radius: 50%; background: transparent; color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.lk-pfeil:hover, .lk-zu:hover { background: #1F1A13; color: var(--gold); }
.lk-zu:hover { border-color: rgba(232, 176, 74, .55); }
.lk-zurueck { grid-column: 1; grid-row: 1; }
.lk-weiter { grid-column: 3; grid-row: 1; }
.lk-zahl { position: absolute; left: 0; right: 0; bottom: max(16px, env(safe-area-inset-bottom, 0px)); margin: 0; text-align: center; font-size: 12px; letter-spacing: .14em; color: var(--label); font-variant-numeric: tabular-nums; }
@media (max-width: 820px) {
  .leuchtkasten { grid-template-columns: minmax(0, 1fr); padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); }
  .lk-bild { grid-column: 1; }
  .lk-pfeil { position: absolute; bottom: max(4px, env(safe-area-inset-bottom, 0px)); }
  .lk-zurueck { left: max(8px, env(safe-area-inset-left, 0px)); }
  .lk-weiter { right: max(8px, env(safe-area-inset-right, 0px)); }
}

/* ---------- Kontakt ---------- */
.kontakt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; padding-top: 96px; }
.kontakt .label { margin-bottom: 16px; }
.kontakt p:not(.label) { font-size: 18px; line-height: 1.7; }
.kontakt img { margin-top: 28px; width: 220px; height: auto; display: block; }

/* ---------- Rechtstexte ---------- */
.text-seite { max-width: 760px; padding-top: 96px; }
.text-seite h1 { margin-bottom: 40px; }
.text-seite h2 { font-size: 28px; line-height: 1.2; margin: 56px 0 16px; letter-spacing: -.01em; }
.text-seite h3 { font-size: 19px; line-height: 1.3; margin: 32px 0 10px; font-weight: 600; letter-spacing: -.005em; color: var(--gold-leise); }
.text-seite p { font-size: 15px; line-height: 1.75; color: var(--leise); margin-bottom: 12px; overflow-wrap: anywhere; }
.text-seite a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(232, 176, 74, .5); }
.text-seite .stand { margin-top: 40px; color: var(--label); }

/* ---------- Bewegung ----------
   Alles hier ist Zusatz. Was etwas versteckt, gilt nur unter html.js-bewegung (setzt das kleine
   Skript im Kopf, nie bei „Bewegung reduzieren“). Bewegt werden nur transform und opacity. */
@keyframes auf-schwarz { from { opacity: 1; } to { opacity: 0; } }
@keyframes zeile-hoch { from { transform: translateY(105%); } to { transform: none; } }
@keyframes einblenden { from { opacity: 0; } to { opacity: 1; } }
@keyframes notausgang { to { opacity: 1; } }

/* Auftakt der Startseite: aus Schwarz aufblenden, Name zeilenweise aus der Maske, dann die Unterzeile */
html.js-auftakt body::after {
  content: ""; position: fixed; inset: 0; z-index: 50; background: #000; pointer-events: none;
  animation: auf-schwarz .6s ease-out both;
}
html.js-auftakt .name .zeile { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
html.js-auftakt .name .zeile > span { display: inline-block; animation: zeile-hoch .9s var(--weich) .45s both; }
html.js-auftakt .name .zeile + .zeile > span { animation-delay: .57s; }
html.js-auftakt .unterzeile > * { animation: einblenden .6s ease-out .85s both; }
html.js-auftakt .unterzeile > * + * { animation-delay: .97s; }

/* Kacheln und Vita-Jahre tauchen beim ersten Hereinscrollen auf (seite.js setzt „beobachtet“ und „ist-da“).
   Notausgang: läuft seite.js nicht, erscheint nach 2,5 s trotzdem alles. */
html.js-bewegung:not(.js-zurueck) .raster > li, html.js-bewegung .filmografie .karte { opacity: 0; animation: notausgang 0s 2.5s forwards; }
html.js-bewegung .raster > li.beobachtet {
  animation: none; transform: translateY(16px); transition: opacity .7s var(--weich), transform .7s var(--weich);
}
html.js-bewegung .raster > li.ist-da { opacity: 1; transform: none; }
/* Vita: die Karten gleiten von ihrer Seite herein (links von links, rechts von rechts, schmal alle von
   rechts) und richten sich dabei aus einer kleinen Schräglage auf. Nur translate/rotate/opacity; seite.js
   setzt --verzug (60 ms je Karte) und nimmt ihn nach dem Auftritt wieder weg, damit das Neigen beim
   Überfahren ohne Verzögerung kommt. */
html.js-bewegung .filmografie .karte.beobachtet {
  animation: none;
  transition: opacity .7s var(--weich) var(--verzug, 0ms), translate .9s var(--weich) var(--verzug, 0ms), rotate .6s var(--weich) var(--verzug, 0ms);
}
html.js-bewegung .filmografie .karte.beobachtet:not(.ist-da) { translate: calc(var(--seite) * 64px) 0; rotate: calc(var(--seite) * 2.5deg); }
html.js-bewegung .filmografie .karte.ist-da { opacity: 1; }
@media (max-width: 820px) {
  html.js-bewegung .filmografie .karte.beobachtet:not(.ist-da) { translate: 32px 0; rotate: 1.5deg; }
}
/* Jahreszahlen, die der Pfad noch nicht erreicht hat, stehen gedimmt (Gold bei 50 %: 3,2:1, große Schrift) */
.filmografie.zeichnet .jahr > h3 { opacity: .5; transition: opacity .6s ease; }
.filmografie.zeichnet .jahr.erreicht > h3 { opacity: 1; }

/* Vita: Standbild am Zeiger über verlinkten Titeln (nur Maus, legt seite.js an). Öffnet sich wie die
   Cinemascope-Balken der Kacheln: von einem waagerechten Spalt aus auseinander. */
.vorschau {
  position: fixed; left: 0; top: 0; z-index: 40; width: 320px; aspect-ratio: 16 / 9; pointer-events: none;
  background: var(--flaeche); clip-path: inset(50% 0 50% 0); transition: clip-path .5s var(--weich);
}
.vorschau.ist-an { clip-path: inset(0); }
.vorschau img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media not all and (hover: hover) and (pointer: fine) { .vorschau { display: none; } }
@media (prefers-reduced-motion: reduce) { .vorschau { display: none; } }

/* Vita: der Filmpfad (SVG, legt seite.js an). Er beginnt 48 px über dem ersten Jahr. Spur: matte
   Perforation und Linie, immer zu sehen; darüber dasselbe in Gold, freigelegt von einer Maske, deren
   Strich per stroke-dashoffset mit dem Scrollen wächst. Die Perforation entsteht aus einem breiten,
   gestrichelten Strich, dessen Mitte ein schmaler Strich in Hintergrundfarbe deckt. */
.pfad-svg { position: absolute; left: 0; top: -48px; width: 100%; height: calc(100% + 48px); overflow: hidden; pointer-events: none; }
.pfad-svg path { fill: none; }
.pfad-loecher { stroke-width: 13; stroke-dasharray: 4 7; }
.pfad-deck { stroke: var(--bg); stroke-width: 7; }
.pfad-spur .pfad-loecher { stroke: #2C251B; }
.pfad-spur .pfad-linie { stroke: #3B3125; stroke-width: 1; }
.pfad-gold .pfad-loecher { stroke: rgba(232, 176, 74, .55); }
.pfad-gold .pfad-linie { stroke: var(--gold); stroke-width: 1.6; }
.pfad-maske-strich { stroke: #fff; stroke-width: 40; stroke-dasharray: 1000 1000; }
.station .st-ring { fill: var(--bg); stroke: #4A3D2C; stroke-width: 1.5; }
.station .st-glut, .station .st-ring-gold, .station .st-kern { transform-box: fill-box; transform-origin: center; }
.station .st-glut { opacity: 0; transform: scale(.3); transition: opacity .6s ease, transform .9s var(--weich); }
.station .st-ring-gold { fill: none; stroke: var(--gold); stroke-width: 1.5; opacity: 0; transition: opacity .4s ease; }
.station .st-kern { fill: var(--gold); opacity: 0; transform: scale(.2); transition: opacity .4s ease, transform .6s var(--weich); }
.station.ist-erreicht .st-glut { opacity: .9; transform: none; }
.station.ist-erreicht .st-ring-gold, .station.ist-erreicht .st-kern { opacity: 1; transform: none; }
.pfad-kopf { opacity: 0; transition: opacity .3s ease; }
.pfad-kopf.ist-an { opacity: 1; }
@media (max-width: 820px) {
  .pfad-loecher { stroke-width: 11; stroke-dasharray: 3 6; }
  .pfad-deck { stroke-width: 6; }
}

/* Parallaxe im Titelbild der Projektseite: das Bild ist etwas höher als der Rahmen und
   wandert beim Scrollen nach unten (seite.js), läuft also mit 0,85-facher Geschwindigkeit */
.rahmen.projekt.mit-parallaxe img { top: -16%; bottom: auto; height: 122%; }
.rahmen.projekt.ganz img, .rahmen.projekt.ganz.mit-parallaxe img { top: 0; height: 100%; object-position: center; }

/* Seitenwechsel: Kachelbild wird zum Titelbild (gleicher view-transition-name), sonst kurzes Überblenden.
   Browser ohne Unterstützung wechseln einfach die Seite. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-group(*) { animation-duration: .5s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .25s; }
::view-transition-old(*), ::view-transition-new(*) { height: 100%; object-fit: cover; }

/* ---------- Schmal ---------- */
@media (max-width: 1100px) {
  .preise { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inhalt { gap: 56px; }
}
@media (max-width: 820px) {
  .raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .video-raster, .fuss-raster, .kunden, .kontakt { grid-template-columns: minmax(0, 1fr); }
  .preise { grid-template-columns: minmax(0, 1fr); }
  .split, .inhalt, .teaser-innen, .vita-kopf { flex-direction: column; align-items: flex-start; }
  .oben .split { align-items: flex-end; }
  .teaser-innen, .vita-kopf { gap: 48px; }
  .teaser { padding-top: 32px; padding-bottom: 80px; }
  .teaser-innen { padding-top: 48px; }
  .arbeiten, .abschnitt, .videos { padding-top: 80px; }
  .oben + .arbeiten { padding-top: 32px; }
  .inhalt { padding-top: 64px; }
  .h2 { font-size: 44px; }
  .h2-klein { font-size: 40px; }
  .lead { font-size: 28px; }
  .zitat blockquote { font-size: 17px; }
  .credits { border-left: 0; padding-left: 0; border-top: 1px solid var(--linie); padding-top: 28px; width: 100%; }
  .eintrag { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .eintrag img { max-width: 280px; }
  .blaettern { margin-top: 96px; flex-direction: column; }
  .blaettern a { max-width: none; }
  .blaettern .ziel { font-size: 28px; }
  .band { margin-top: 80px; aspect-ratio: 2 / 1; }
  .menue-knopf { display: inline-block; }
  .filmstreifen {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 38%, transparent 60%);
    mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 38%, transparent 60%);
  }
  .buehne-portrait { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 50%); mask-image: linear-gradient(to right, transparent 0, #000 50%); }
  .kopf .nav { flex-basis: 100%; }
  .nav ul { display: none; flex-direction: column; gap: 0; padding-top: 8px; }
  .nav ul.offen { display: flex; }
  .nav a { padding: 12px 0; font-size: 14px; }
  .kopf { padding-top: 20px; padding-bottom: 20px; }
  .funktion { white-space: normal; }
  .fuss { padding-top: 72px; }
  main + .fuss { margin-top: 96px; }
}

@media (max-width: 560px) { .raster { grid-template-columns: minmax(0, 1fr); } }

/* ---------- App-Seite (/app/): Eriks eigene Apps als Karten nebeneinander ---------- */
.app-kopf { padding-top: 112px; padding-bottom: 56px; }
.app-kopf .label-hell { margin-bottom: 16px; }
.app-text { max-width: 720px; padding-top: 32px; }
.app-text p { font-size: 18px; line-height: 1.75; color: var(--leise); margin: 0; }
.app-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding-bottom: 40px; }
.app-karte {
  display: flex; flex-direction: column; gap: 28px; padding: 40px;
  background: rgba(255, 255, 255, .025); border: 1px solid var(--linie);
  transition: border-color .3s ease, background-color .3s ease, transform .4s cubic-bezier(.2, .8, .2, 1);
}
.app-karte:hover { border-color: rgba(232, 176, 74, .45); background: rgba(255, 255, 255, .04); transform: translateY(-3px); }
.app-karte-kopf { display: flex; align-items: center; gap: 24px; }
.app-icon { width: 96px; height: 96px; border-radius: 22px; flex: 0 0 auto; transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.app-karte:hover .app-icon { transform: scale(1.04) rotate(-2deg); }
.app-name { font-family: var(--titel); font-size: 34px; line-height: 1.1; font-weight: 600; margin: 0 0 8px; }
.app-karte .label { margin: 0; }
.app-karte-text { flex: 1; }
.app-karte-text p { font-size: 17px; line-height: 1.75; color: var(--leise); margin: 0 0 16px; }
.app-links { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; }
.app-badge img { display: block; height: 48px; width: auto; }
@media (max-width: 900px) { .app-raster { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 820px) {
  .app-kopf { padding-top: 64px; padding-bottom: 40px; }
  .app-kopf .riesig { white-space: nowrap; font-size: clamp(40px, 13vw, 64px); }
  .app-text p { font-size: 17px; }
  .app-karte { padding: 28px 24px; gap: 22px; }
  .app-icon { width: 72px; height: 72px; border-radius: 17px; }
  .app-name { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) { .app-karte, .app-icon { transition: none; } .app-karte:hover, .app-karte:hover .app-icon { transform: none; } }

/* Handy-Prüfung 31.10.2026: hereingleitende Filmografie-Karten und lange Wörter/Links nicht über den Rand */
.filmografie { overflow-x: clip; }
.text-seite a, .kontakt a { overflow-wrap: anywhere; }
/* Lange Einzelwörter („Verbraucherstreitbeilegung“, „Auszeichnungen“) sprengten bei 320 px die Breite */
h1, h2, h3 { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
@media (max-width: 380px) { .h2 { font-size: 38px; } .text-seite h2 { font-size: 24px; } .marke { font-size: 20px; } .menue-knopf { padding: 0 12px; } }