/* ==========================================================
   Schrift: Fira Sans, selbst gehostet (keine Verbindung zu Google)
   Lizenz: SIL Open Font License, siehe fonts/OFL-Lizenz-Fira-Sans.txt
   ========================================================== */
@font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/FiraSans-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Fira Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/FiraSans-Italic.woff2') format('woff2'); }
@font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/FiraSans-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/FiraSans-Bold.woff2') format('woff2'); }

/* ==========================================================
   Tokens
   ========================================================== */
:root {
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);

  color-scheme: light;
  --bg: #f4f6f7;
  --surface: #ffffff;
  --ink: #1c2b33;
  --ink-soft: #55676f;
  --line: rgba(49, 80, 94, 0.18);
  --grid: rgba(49, 80, 94, 0.08);
  --head: #31505e;
  --band: #0d1215;
  --on-band: #ffffff;

  --c-av: #bc2359;    /* Audiovisuelles Design */
  --c-web: #f59c2d;   /* Webdesign */
  --c-illu: #31505e;  /* Illustration */
  --c-musik: #2a8f43; /* Elektronische Musik (LED-Grün, vorläufig) */
  --c-neutral: #9db0b8;

  --rail-x: clamp(18px, 4vw, 56px);
  --indent: calc(var(--rail-x) + clamp(26px, 5vw, 76px));
  --pad-y: clamp(4rem, 10vw, 8rem);
  --bar-h: 30px;
  --head-h: 120px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head-h) + env(safe-area-inset-top, 0px));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Fira Sans', 'Segoe UI', Tahoma, sans-serif;
  font-size: clamp(1rem, 1.1vw, 1.1rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2 { margin: 0 0 .6em; font-weight: 500; line-height: 1.12; letter-spacing: -0.015em; }
p { margin: 0 0 1.1em; max-width: 64ch; }
p:last-child { margin-bottom: 0; }

:focus-visible { outline: 3px solid var(--c-web); outline-offset: 3px; }

.wrap { padding-left: var(--indent); padding-right: clamp(1.25rem, 5vw, 4rem); max-width: 1320px; }
.wrap--full { max-width: none; padding-right: clamp(1rem, 4vw, 3rem); }

/* ==========================================================
   Header
   ========================================================== */
.head {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: calc(var(--head-h) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.head__in {
  height: var(--head-h);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  /* Logo beginnt bündig mit Text und Videos (gleicher Einzug wie .wrap) */
  padding: 0 clamp(1rem, 4vw, 3rem) 0 var(--indent);
}
.logo { display: block; flex: 0 0 auto; text-decoration: none; }
.logo img { display: block; height: calc(var(--head-h) - 24px); width: auto; max-width: none; }

.nav ul { display: flex; gap: clamp(.9rem, 2.2vw, 2rem); margin: 0; padding: 0; list-style: none; }
.nav a { text-decoration: none; font-weight: 500; font-size: .95rem; color: var(--head); padding: .3rem 0; border-bottom: 2px solid transparent; }
.nav a[data-c="av"]:hover   { border-color: var(--c-av); }
.nav a[data-c="web"]:hover  { border-color: var(--c-web); }
.nav a[data-c="illu"]:hover { border-color: var(--c-illu); }
.nav a[data-c="musik"]:hover { border-color: var(--c-musik); }
.nav a[data-c="x"]:hover    { border-color: var(--head); }

.menu-btn { display: none; background: none; border: 1px solid var(--line); color: var(--head); font: inherit; font-weight: 500; padding: .45rem .9rem; cursor: pointer; }

@media (max-width: 1240px) {
  :root { --head-h: 96px; }
  .menu-btn { display: block; }
  /* Geschlossenes Menü ganz aus dem Bild schieben (Panel-Höhe + Header-Höhe), sonst hängt es über dem Header */
  .nav { position: fixed; left: 0; right: 0; top: calc(var(--head-h) + env(safe-area-inset-top, 0px));
         background: var(--surface); border-bottom: 1px solid var(--line);
         transform: translateY(calc(-100% - var(--head-h) - env(safe-area-inset-top, 0px) - 2px));
         visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s; }
  .nav.open { transform: none; visibility: visible; transition: transform .25s ease, visibility 0s; }
  .nav ul { flex-direction: column; gap: 0; padding: .6rem clamp(1rem, 4vw, 3rem) 1.2rem; }
  .nav a { display: block; padding: .8rem 0; font-size: 1.05rem; }
}

@media (max-width: 520px) {
  /* Logo doppelt so groß wie zuvor (108px), schrumpft nur, wenn der Bildschirm schmaler ist */
  :root { --head-h: calc(min(108px, (100vw - 28px) / 3.226) + 24px); }
  /* "Menü" sitzt in der freien Fläche links oben im Logo */
  /* Logo mittig, gleicher Abstand links und rechts */
  .head__in { position: relative; justify-content: center; padding-left: 14px; padding-right: 14px; }
  .menu-btn { position: absolute; top: 12px; left: var(--rail-x); background: var(--surface); }
}

/* ==========================================================
   Signal-Linie (Scroll-Fortschritt) + Sequencer
   ========================================================== */
main { position: relative; padding-top: var(--head-h); }

.rail { position: absolute; top: 0; bottom: 0; left: var(--rail-x); width: 2px; background: var(--line); pointer-events: none; }
.rail__fill { position: absolute; inset: 0; background: var(--head); transform-origin: top; transform: scaleY(0); }

.seq {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  height: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px));
  padding: 0 clamp(.6rem, 2vw, 1.5rem) env(safe-area-inset-bottom, 0px);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(16, 1fr); gap: 3px; align-items: center;
}
.seq button {
  height: 14px; padding: 0; border: 1px solid var(--line); background: transparent; cursor: pointer;
  transition: background .12s linear, border-color .12s linear;
}
.seq button.on { background: var(--s); border-color: var(--s); }
.seq button.now { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--s); }

/* ==========================================================
   Hero
   ========================================================== */
.hero { position: relative; padding: clamp(3rem, 8vw, 6.5rem) 0 var(--pad-y); overflow: hidden; }
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 44px 44px;
  background-position: calc(var(--rail-x) + 1px) 0;
  -webkit-mask-image: linear-gradient(#000 55%, transparent);
          mask-image: linear-gradient(#000 55%, transparent);
}
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); grid-template-areas: "head ." "text sigs"; gap: clamp(2rem, 6vw, 5rem); row-gap: 0; align-items: start; }
.hero__grid > h1 { grid-area: head; }
.hero__text { grid-area: text; }

h1.big { font-size: clamp(2.5rem, 6.4vw, 4.8rem); color: var(--head); margin-bottom: .5em; }
.lead { font-size: 1.12em; }

.sigs { grid-area: sigs; margin-top: .45rem; display: flex; gap: clamp(.8rem, 2.5vw, 2rem); justify-content: flex-start; }
.sig { text-decoration: none; display: block; width: clamp(78px, 11vw, 140px); }
.sig .ico { color: var(--c); }
.sig span { display: block; margin-top: .55rem; font-size: .82rem; line-height: 1.3; color: var(--ink-soft); }
.sig[data-c="av"]   { --c: var(--c-av); }
.sig[data-c="web"]  { --c: var(--c-web); }
.sig[data-c="web"] span { text-align: center; }
.sig[data-c="illu"] { --c: var(--c-illu); }

@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; grid-template-areas: "head" "text"; }
  /* Handy: die drei Icons stehen schon im Logo, hier entfallen sie */
  .sigs { display: none; }
}

/* Linien-Icons: zeichnen sich selbst */
svg.icon-orig { width: 100%; height: auto; overflow: visible; display: block; }
.icon-fade { transform-box: fill-box; transform-origin: center; }
.js .icon-fade { opacity: 0; transform: scale(.72) rotate(-5deg); transition: opacity .45s ease, transform .5s cubic-bezier(.3, 1.6, .5, 1); }
.in .icon-fade, .sigs.in .icon-fade { opacity: 1; transform: none; }

/* ==========================================================
   Säulen
   ========================================================== */
.pillar { position: relative; padding: var(--pad-y) 0; --c: var(--c-illu); }
.pillar[data-c="av"]   { --c: var(--c-av); }
.pillar[data-c="web"]  { --c: var(--c-web); }
.pillar[data-c="illu"] { --c: var(--c-illu); }
.pillar[data-c="musik"] { --c: var(--c-musik); }

/* Knoten auf der Signal-Linie */
.node {
  position: absolute; left: calc(var(--rail-x) - 6px); top: calc(var(--pad-y) + .55rem);
  width: 14px; height: 14px; background: var(--bg); border: 2px solid var(--c);
  transition: background .2s steps(2);
}
.in > .node, .node.in { background: var(--c); }

.pillar__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.pillar__ico { width: clamp(56px, 7vw, 84px); color: var(--c); margin-bottom: 1.1rem; }
.pillar h2 { font-size: clamp(1.8rem, 3.6vw, 2.75rem); color: var(--c); display: flex; align-items: baseline; gap: .1em; }
.pillar .sub { font-size: 1.2rem; font-weight: 500; color: var(--ink-soft); margin-bottom: 1rem; }

@media (max-width: 860px) { .pillar__grid { grid-template-columns: 1fr; } }
.pillar__grid--al { grid-template-areas: "head ." "text motif" "video video"; row-gap: 0; align-items: start; }
.pillar__grid--al > .pillar__head { grid-area: head; }
.pillar__grid--al > .pillar__text { grid-area: text; }
.pillar__grid--al > .motif, .pillar__grid--al > .pix { grid-area: motif; margin-top: .3rem; }
@media (max-width: 860px) {
  /* Handy: Animation als Streifen direkt unter der Überschrift, dann Text, dann Video.
     So stehen Grafik und Video nicht mehr direkt hintereinander. */
  .pillar__grid--al { grid-template-areas: "head" "motif" "text" "video"; }
  .pillar__grid--al > .motif, .pillar__grid--al > .pix { margin: .2rem 0 1.6rem; max-width: 460px; }
}
/* Animationen stehen im Text zwischen den Absätzen (PC).
   Auf dem Handy rückt sie wie bei den anderen Rubriken über den Text. */
.pillar .pillar__text .motif--inline { max-width: 560px; margin: 1.7rem 0 1.9rem; padding-inline: 0; } /* bündig mit dem Text */
.pillar svg.motif--inline { display: block; }
@media (max-width: 860px) {
  .pillar .pillar__text { display: flex; flex-direction: column; }
  .pillar .motif--inline { order: -1; margin: .2rem 0 1.6rem; max-width: 460px; }
}
/* Breite Bildschirme: Text links, Video rechts daneben; Animation oben rechts neben der Überschrift.
   Die rechte Spalte schließt bündig mit dem Hauptmenü ab. */
@media (min-width: 1800px) {
  .pillar > .wrap.pillar__grid--al, .stock > .wrap.pillar__grid--al { max-width: none; padding-right: clamp(1rem, 4vw, 3rem); }
  .pillar__grid--al { grid-template-columns: minmax(0, 44rem) minmax(0, 1fr); grid-template-areas: "head motif" "text video";
                      column-gap: clamp(4rem, 5vw, 7rem); }
  .pillar__grid--al > .motif, .pillar__grid--al > .pix { justify-self: end; align-self: end; width: 100%; max-width: 560px; margin: 0 0 1.6rem; }
  .pillar .pillar__grid--al > .motif, .pillar .pillar__grid--al > .pix { padding-inline: 0; }
  .pillar__grid--al > .pillar__video { margin-top: .3rem; justify-self: end; width: 100%; max-width: 1280px; }
  .pillar__video .vplayer { max-width: none; }
}

.motif { width: 100%; color: var(--c); }
/* Alle drei Rubrik-Grafiken gleich breit und gleich eingerückt.
   2.17 % entspricht dem bisherigen Einzug der Illustrations-Grafik. */
.pillar .motif, .pillar .pix { padding-inline: 2.17%; }

/* Audiovisuell: Schnitt-Timeline (Clips) + Audiospur (Wellenform) */
.track-div { stroke: var(--c); stroke-width: 1; opacity: .25; }
.clip { fill: var(--c); opacity: .22; transition: x 1.9s cubic-bezier(.3, .7, .3, 1), width 1.9s cubic-bezier(.3, .7, .3, 1); }
.clip-edge { fill: none; stroke: var(--c); stroke-width: 1.4; transition: x 1.9s cubic-bezier(.3, .7, .3, 1), width 1.9s cubic-bezier(.3, .7, .3, 1); }
.clip-tick { stroke: var(--c); stroke-width: 1; opacity: .4; }
.clip-fade { fill: var(--bg); }
.clipgrp { transform-box: fill-box; transform-origin: left center; }
.js .clipgrp { transform: scaleX(0); transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.in .clipgrp { transform: scaleX(1); }

.wavebar { stroke: var(--c); stroke-width: 2.4; stroke-linecap: round; transform-box: fill-box; transform-origin: center; }
.js .wavebar { transform: scaleY(0); transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.in .wavebar { transform: scaleY(1); }

/* Web: Pixel-Raster mit Dithering */
.pix { display: grid; grid-template-columns: repeat(28, 1fr); gap: 3px; }
.pix i { aspect-ratio: 1; border: 1px solid var(--line); }
.pix i.f { background: var(--c); border-color: var(--c); }
.js .pix i.f { opacity: 0; transition: opacity .01s linear; transition-delay: calc(var(--k) * 38ms + var(--r) * 3ms); }
.in .pix i.f { opacity: 1; }
.pix i.f.steady { transition-delay: 0s; transition-duration: .4s; }
.pix i.f.off { opacity: .14; }

h2.cur::after {
  content: ''; width: .5em; height: .9em; margin-left: .18em; background: var(--c);
  align-self: center; animation: blink 1.05s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* Illustration: Skizze wird Vektor */
.sk { fill: none; stroke: var(--c); stroke-width: 1.2; opacity: .5; }
.vec { fill: none; stroke: var(--c); stroke-width: 3.5; stroke-linecap: round; }
.h { stroke: var(--c); stroke-width: 1; fill: none; }
.hd { fill: var(--bg); stroke: var(--c); stroke-width: 1.5; }
.an { fill: var(--c); }
.js .sk, .js .vec { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .sk  { transition: stroke-dashoffset 1.4s ease; }
.js .vec { transition: stroke-dashoffset 1.3s cubic-bezier(.5, 0, .2, 1) 1.1s; }
.in .sk, .in .vec { stroke-dashoffset: 0; }
.js .ctl { opacity: 0; transition: opacity .3s steps(3) 2.3s; }
.in .ctl { opacity: 1; }

/* Elektronische Musik: 16-Step-Sequencer (Lauflicht) */
.st { fill: none; stroke: var(--c); stroke-width: 1; opacity: .3; }
.st.on { fill: var(--c); stroke: var(--c); opacity: .55; }
.st.now { opacity: .75; stroke-width: 2; }
.st.on.now { opacity: 1; }
.led { fill: none; stroke: var(--c); stroke-width: 1; opacity: .4; }
.led.now { fill: var(--c); opacity: 1; }
.lbl { fill: var(--c); font-size: 11px; font-weight: 500; letter-spacing: .06em; }
.js .seqgrid { opacity: 0; transform: translateY(6px); transition: opacity .3s steps(3), transform .3s steps(3); }
.in .seqgrid { opacity: 1; transform: none; }

/* Platzhalter, solange der Mitschnitt fehlt */
.vplayer--empty .vplayer__screen { display: grid; place-items: center; text-align: center; color: rgba(255,255,255,.7); font-size: .95rem;
  background: #0d1215 repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 44px); }
.vplayer--empty .vplayer__screen b { display: block; color: #fff; font-weight: 500; font-size: 1.1rem; margin-bottom: .2rem; }
.vplayer--empty .vp-btn, .vplayer--empty .vp-track { opacity: .45; cursor: default; pointer-events: none; }
/* Links als Schaltflächen wie bei Stockfootage, in Rubrik-Grün */
.musik-links { margin-top: 1.6rem; max-width: none; display: flex; flex-wrap: wrap; gap: .8rem 1rem; }
.musik-links .pbtn { border-color: var(--c); color: var(--c); }
.musik-links .pbtn::after { background: var(--head); }
.musik-links .pbtn:hover, .musik-links .pbtn:focus-visible { background: var(--c); color: #fff; }

/* ==========================================================
   Stockfootage
   ========================================================== */
.stock { position: relative; padding: var(--pad-y) 0; --c: var(--head); }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); margin-top: 2.25rem; }
@media (max-width: 700px) { .cards { grid-template-columns: 1fr; } }
.card { position: relative; display: block; text-decoration: none; background: var(--surface); border: 1px solid var(--line); }
.card__img { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.card__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card img.roll { opacity: 0; transition: opacity .3s steps(4); }
.card:hover img.roll, .card:focus-visible img.roll { opacity: 1; }
.card::after { /* Pixelkante */
  content: ''; position: absolute; right: 0; top: 0; width: 18px; height: 18px; background: var(--c-web); z-index: 2;
  transition: width .15s steps(3), height .15s steps(3);
}
.card:hover::after, .card:focus-visible::after { width: 36px; height: 36px; }
.card b { display: block; padding: .9rem 1.1rem; border-top: 1px solid var(--line); font-weight: 500; color: var(--head); }
@media (prefers-reduced-motion: reduce) { .card img.roll { transition: none; } }

/* Videoplayer (Audiovisuelles Design) */
/* Player sitzt im Rubrik-Grid. Standard: unter Text und Animation, volle Breite */
.pillar__video { grid-area: video; margin-top: clamp(2.5rem, 5vw, 4rem); min-width: 0; }
.vplayer { margin: 0; max-width: 1040px; --on-c: #fff; }
/* Akzent erbt von der Rubrik: Magenta bei Audiovisuell, Orange bei Webdesign.
   Auf Orange steht dunkler Text, Weiß hätte zu wenig Kontrast. */
.pillar[data-c="web"] .vplayer { --on-c: #1c2b33; }
.vplayer__screen { position: relative; aspect-ratio: 16 / 9; background: #000; border: 1px solid var(--line); overflow: hidden; }
.vplayer__screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.vplayer__screen::after { /* Pixelkante */
  content: ''; position: absolute; right: 0; top: 0; width: 18px; height: 18px; background: var(--c); z-index: 4; pointer-events: none;
  transition: width .15s steps(3), height .15s steps(3);
}
.vplayer__screen:hover::after { width: 36px; height: 36px; }
.vplayer__hit { position: absolute; inset: 0; z-index: 3; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; }
.vplayer__hit:focus-visible { outline-offset: -6px; }
.vplayer__big { width: clamp(56px, 9vw, 84px); aspect-ratio: 1; display: grid; place-items: center; border: 2px solid #fff; background: rgba(0, 0, 0, .45); color: #fff; opacity: 0; transition: opacity .15s steps(3); }
.vplayer__big svg { width: 42%; height: 42%; }
.vplayer.is-paused .vplayer__big { opacity: 1; }
.vplayer__err { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; padding: .7rem 1rem; background: rgba(0, 0, 0, .75); color: #fff; font-size: .9rem; }
.vplayer__err[hidden] { display: none; }
.vplayer__bar { display: flex; align-items: center; gap: clamp(.6rem, 2vw, 1rem); padding: .6rem .9rem; border: 1px solid var(--line); border-top: 0; background: var(--surface); }
.vp-btn { flex: none; width: 36px; height: 36px; padding: 0; display: grid; place-items: center; border: 1px solid var(--head); background: transparent; color: var(--head); cursor: pointer; transition: background .12s steps(2), color .12s steps(2), border-color .12s steps(2); }
.vp-btn svg { width: 16px; height: 16px; }
.vp-btn:hover { background: var(--c); border-color: var(--c); color: var(--on-c); }
.vplayer:not(.is-paused) .i-play { display: none; }
.vplayer.is-muted .i-sound, .vplayer:not(.is-muted) .i-muted { display: none; }
.vp-snd[aria-pressed="true"] { background: var(--c); border-color: var(--c); color: var(--on-c); }
.vplayer.is-paused .i-pause { display: none; }
.vp-track { --p: 0; position: relative; flex: 1; height: 32px; cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent; }
.vp-ruler { position: absolute; left: 0; right: 0; top: 6px; bottom: 6px; border-bottom: 1px solid var(--line);
  background:
    linear-gradient(90deg, var(--head) 1px, transparent 1px) 0 100% / 40px 12px repeat-x,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 100% / 8px 6px repeat-x; }
.vp-fill { position: absolute; left: 0; top: 6px; bottom: 6px; width: calc(var(--p) * 1%); background: color-mix(in srgb, var(--c) 24%, transparent); border-right: 1px solid var(--c); }
.vp-head { position: absolute; top: 2px; bottom: 2px; left: calc(var(--p) * 1%); width: 2px; margin-left: -1px; background: var(--c); pointer-events: none; }
.vp-head::before { content: ''; position: absolute; top: 0; left: 50%; width: 10px; height: 10px; margin-left: -5px; background: var(--c); }
.vp-track:focus-visible { outline-offset: 2px; }
/* Reduzierte Variante: keine Bedienleiste, nur ein feiner Zeitstrahl unter dem Bild.
   Anhalten/Weiterlaufen per Klick aufs Video. */
.vplayer__bar { padding: 0; margin-top: 8px; border: 0; background: none; gap: .9rem; min-height: 0; }
.vplayer .vp-track { height: 3px; flex: 1; background: var(--line); cursor: default; pointer-events: none; }
.vplayer .vp-fill { top: 0; bottom: 0; background: var(--c); border-right: 0; }
.vplayer .vp-ruler, .vplayer .vp-head { display: none; }
.vplayer .vp-snd { width: 32px; height: 32px; }
.vp-time { flex: none; font-size: .85rem; font-variant-numeric: tabular-nums; color: var(--ink-soft); white-space: nowrap; }
.vplayer figcaption { margin-top: .6rem; font-size: .82rem; color: var(--ink-soft); }
@media (max-width: 520px) { .vplayer__bar { padding: .5rem .6rem; gap: .6rem; } .vp-time { font-size: .78rem; } }
@media (prefers-reduced-motion: reduce) { .vplayer__screen::after, .vplayer__big, .vp-btn { transition: none; } }

.stock h2 { font-size: clamp(1.8rem, 3.6vw, 2.75rem); color: var(--head); }
/* Portfolio-Schaltflächen unter dem Text */
.portfolios { list-style: none; margin: 1.6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .8rem 1rem; }
.pbtn { position: relative; display: inline-flex; align-items: center; gap: .6rem; padding: .78rem 1.3rem; border: 2px solid var(--head);
        color: var(--head); font-weight: 500; text-decoration: none;
        transition: transform .12s steps(2), background .12s steps(2), color .12s steps(2); }
.pbtn::after { /* Pixelkante wie bei den Playern */
  content: ''; position: absolute; right: -2px; top: -2px; width: 10px; height: 10px; background: var(--c-web);
  transition: width .15s steps(3), height .15s steps(3); }
.pbtn:hover, .pbtn:focus-visible { background: var(--head); color: var(--bg); transform: translateY(-2px); }
.pbtn:hover::after, .pbtn:focus-visible::after { width: 16px; height: 16px; }

/* ==========================================================
   Ruhrpottromantik (Filmstreifen)
   ========================================================== */
.rpr { position: relative; background: var(--band); color: var(--on-band); padding: calc(var(--pad-y) * .85) 0; }
.rpr::before, .rpr::after {
  content: ''; position: absolute; left: 0; right: 0; height: 14px;
  background: radial-gradient(circle at 50% 50%, var(--bg) 0 3px, transparent 3.5px) 0 0 / 22px 14px repeat-x;
}
.rpr::before { top: 0; } .rpr::after { bottom: 0; }
.rpr .node { background: var(--band); border-color: #fff; top: calc(var(--pad-y) * .85 + .55rem); }
.rpr.in > .node { background: #fff; }
.rpr__grid { display: grid;
             /* Die Zitatspalte nimmt genau so viel Platz, wie die längste Zeile braucht.
                Der Rest geht an das Standbild. */
             grid-template-columns: minmax(min-content, .8fr) minmax(0, 1.75fr) max-content; /* Textspalte nie schmaler als die Überschrift */
             gap: clamp(1.5rem, 3vw, 3.25rem); align-items: start; }

/* Pressestimmen, rechts neben dem Standbild. Keine farbigen Balken, sondern
   feine Trennlinien zwischen den Stimmen. */
.press { list-style: none; margin: 0; padding: 0; }
.press-title { margin: 0 0 .9rem; font-size: .8rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.62); padding-bottom: .55rem; border-bottom: 1px solid rgba(255,255,255,.35); }
.press li { padding: .62rem 0; border-top: 1px solid rgba(255, 255, 255, .17); }
.press li:first-child { padding-top: 0; border-top: 0; }
.press li:last-child { padding-bottom: 0; }
.press q { display: block; quotes: "„" "“"; white-space: nowrap; font-size: 1rem; font-style: italic; line-height: 1.35; color: #fff; }
.press cite { display: block; margin-top: .1rem; font-size: .78rem; font-style: normal; letter-spacing: .03em; color: rgba(255, 255, 255, .58); }
.rpr h2 { font-size: clamp(1.8rem, 3.6vw, 2.75rem); }
.rpr p { color: rgba(255,255,255,.9); }
.frame { position: relative; aspect-ratio: 16 / 9; border: 1px solid rgba(255,255,255,.35); overflow: hidden; }
.frame img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.btn { display: inline-block; margin-top: 1.5rem; padding: .8rem 1.6rem; background: #fff; color: #1c2b33; text-decoration: none; font-weight: 500; transition: transform .12s steps(2); }
.btn:hover { transform: translate(2px, -2px); }
.rpr__btns { display: flex; flex-wrap: wrap; gap: 0 .9rem; }
.btn--ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px #fff; }
.btn--ghost:hover { background: #fff; color: #1c2b33; }
@media (max-width: 1240px) {
  /* Text über die volle Breite, darunter Standbild und Stimmen nebeneinander */
  .rpr__grid { grid-template-columns: minmax(0, 1fr) max-content; }
  .rpr__text { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .rpr__grid { grid-template-columns: 1fr; }
  .press q { white-space: normal; }
}

/* ==========================================================
   Footer
   ========================================================== */
.foot { position: relative; padding: clamp(3rem, 7vw, 5rem) 0 calc(var(--bar-h) + 3rem); font-size: .92rem; color: var(--ink-soft); border-top: 1px solid var(--line); }
.foot::before { /* Linienraster wie im Hero, um 180° gedreht: unten kräftig, nach oben auslaufend */
  content: ''; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 44px 44px;
  background-position: calc(var(--rail-x) + 1px) 100%;
  -webkit-mask-image: linear-gradient(to top, #000 55%, transparent);
          mask-image: linear-gradient(to top, #000 55%, transparent);
}
.foot__grid { display: flex; flex-wrap: wrap; gap: 2.5rem; justify-content: space-between; }
.foot a { text-decoration: none; } .foot a:hover { text-decoration: underline; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.foot strong { color: var(--head); }
/* Social-Links als hervorgehobene Schaltflächen */
.social { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; justify-items: start; }
.soc { display: inline-flex; align-items: center; gap: .7rem; padding: .58rem 1rem .58rem .72rem;
       border: 2px solid var(--head); color: var(--head); font-weight: 500; text-decoration: none;
       transition: transform .12s steps(2), background .12s steps(2), color .12s steps(2); }
.soc svg { flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.soc svg .solid { fill: currentColor; stroke: none; }
.foot .soc:hover, .soc:focus-visible { background: var(--head); color: var(--bg); text-decoration: none; transform: translateY(-2px); }

.foot__top { margin-top: 2.5rem; display: flex; justify-content: center; padding-left: clamp(1rem, 4vw, 3rem); } /* links = rechts, damit der Pfeil genau in der Fenstermitte steht */
/* Footer-Text wird am PC eingetippt: noch nicht getippte Zeichen sind unsichtbar, halten aber den Platz */
.ft-ghost { color: transparent; }
.ft-cursor { display: inline-block; width: .55em; height: 1.05em; margin-left: .08em; vertical-align: -.17em; background: var(--head); }
.ft-cursor.blink { animation: blink 1.05s steps(1) infinite; }
/* Zwei Päckchen links: Kontakt und Rechtliches, gleiche Schrift, gleicher Zeilenabstand */
.foot .foot__legal { margin-top: 1.4rem; gap: 0; }
/* Social-Schaltflächen am rechten Rand, auf dem Handy linksbündig */
.foot .social { justify-items: stretch; align-self: flex-start; }
.foot .social .soc { display: flex; }
.totop { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 2px solid var(--head); color: var(--head); background: transparent; text-decoration: none; transition: transform .12s steps(2), background .12s steps(2), color .12s steps(2); }
.totop svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: square; stroke-linejoin: miter; }
.foot .totop:hover, .totop:focus-visible { background: var(--head); color: var(--bg); transform: translateY(-3px); text-decoration: none; }

/* ==========================================================
   Reduzierte Bewegung
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .icon-fade, .seqgrid, .clipgrp, .wavebar, .sk, .vec, .ctl, .pix i.f, .pix i.f.off, .clip, .clip-edge, .totop { transition: none !important; }
  h2.cur::after { animation: none; }
}

/* ==========================================================
   Handy: Vollbild-Menü im Filmband-Look (nur bis 600 px)
   ========================================================== */
.fsmenu { display: none; }
@media (max-width: 600px) {
  .nav { display: none !important; }
  .fsmenu {
    display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 80; overflow-y: auto;
    background-color: var(--bg); color: var(--head);
    background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    background-size: 44px 44px; background-position: calc(var(--rail-x) + 1px) 0;
    padding: calc(env(safe-area-inset-top, 0px) + 28px) clamp(1.25rem, 7vw, 2.5rem) calc(env(safe-area-inset-bottom, 0px) + 32px) var(--indent);
    opacity: 0; transition: opacity .18s steps(3);
  }
  .fsmenu[hidden] { display: none; }
  .fsmenu.open { opacity: 1; }
  .fsmenu::before { /* Signal-Linie links wie auf der Seite */
    content: ''; position: fixed; top: 0; bottom: 0; left: var(--rail-x); width: 2px; background: var(--head); pointer-events: none;
  }
  .fsmenu__top { display: flex; align-items: center; justify-content: space-between; margin: .6rem 0 1.8rem; }
  .fsmenu__label { font-size: .78rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
  .fsmenu__close { position: relative; width: 44px; height: 44px; padding: 0; border: 2px solid var(--head); background: var(--bg); cursor: pointer; }
  .fsmenu__close span { position: absolute; left: 50%; top: 50%; width: 20px; height: 3px; margin: -1.5px 0 0 -10px; background: var(--head); }
  .fsmenu__close span:first-child { transform: rotate(45deg); } .fsmenu__close span:last-child { transform: rotate(-45deg); }
  .fsmenu__list { list-style: none; margin: 0; padding: 0; }
  .fsmenu__list a { display: flex; align-items: center; gap: .9rem; padding: .78rem 0; color: var(--head); text-decoration: none;
                    font-size: clamp(1.2rem, 5.4vw, 1.75rem); white-space: nowrap; font-weight: 500; line-height: 1.15; border-top: 1px solid var(--line); }
  .fsmenu__list li:first-child a { border-top: 0; }
  .fsmenu__list b { flex: none; width: 1.7em; font-size: .72rem; font-weight: 400; letter-spacing: .08em; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
  .fsmenu__list i { flex: none; width: 16px; height: 16px; background: var(--m); }
  .fsmenu__list a.is-current i { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--m); }
  .fsmenu__list a.is-current b { color: var(--head); font-weight: 500; }
  .fsmenu__foot { margin: auto 0 0; padding-top: 2rem; font-size: .92rem; color: var(--ink-soft); display: flex; align-items: center; }
  .fsmenu__foot a { color: inherit; text-decoration: none; }
  .fsmenu.typing .fsmenu__cursor { animation: none; }
  .fsmenu__cursor { display: inline-block; width: .55em; height: 1.05em; margin-left: .1em; background: var(--head); animation: blink 1.05s steps(1) infinite; }
  /* Terminal-Aufbau: Zeile für Zeile, ruckartig */
  .fsmenu__list li, .fsmenu__foot { opacity: 0; transform: translateX(-12px); transition: opacity .1s steps(2), transform .1s steps(2); transition-delay: calc(var(--i) * 55ms + 90ms); }
  .fsmenu.open .fsmenu__list li, .fsmenu.open .fsmenu__foot { opacity: 1; transform: none; }
}
@media (max-width: 600px) and (prefers-reduced-motion: reduce) {
  .fsmenu, .fsmenu__list li, .fsmenu__foot { transition: none; }
  .fsmenu__cursor { animation: none; }
}

/* ==========================================================
   WordPress: Admin-Leiste (nur sichtbar, wenn du eingeloggt bist)
   ========================================================== */
.admin-bar .head { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) { .admin-bar .head { top: 0; } }

/* ==========================================================
   Unterseiten: Impressum, Datenschutz
   ========================================================== */
.legal { position: relative; padding: clamp(3rem, 7vw, 5.5rem) 0 var(--pad-y); }
.legal::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 44px 44px; background-position: calc(var(--rail-x) + 1px) 0;
  -webkit-mask-image: linear-gradient(#000 0, transparent 420px); mask-image: linear-gradient(#000 0, transparent 420px);
}
.legal__rail { position: absolute; top: 0; bottom: 0; left: var(--rail-x); width: 2px; background: var(--head); }
.legal h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); color: var(--head); margin-bottom: .8em; }
.legal__content { max-width: 72ch; }
.legal__content h2 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); color: var(--head); margin: 2.2em 0 .6em; }
.legal__content h3 { font-size: 1.1rem; font-weight: 500; color: var(--head); margin: 1.8em 0 .5em; }
.legal__content p, .legal__content li { max-width: 72ch; }
.legal__content ul, .legal__content ol { padding-left: 1.2em; margin: 0 0 1.1em; }
.legal__content li { margin-bottom: .35em; }
.legal__content a { color: var(--head); text-decoration: underline; text-underline-offset: .15em; overflow-wrap: anywhere; }
.legal__content a:hover { color: var(--c-av); }
.legal__back { display: inline-flex; align-items: center; gap: .5rem; margin-top: 2.5rem; padding: .7rem 1.2rem; border: 2px solid var(--head);
               color: var(--head); font-weight: 500; text-decoration: none; transition: background .12s steps(2), color .12s steps(2); }
.legal__back:hover, .legal__back:focus-visible { background: var(--head); color: var(--bg); }