/* ===================================================================
   PIXELDIENST - sections.css
   Eine Sektion nach der anderen, in der Reihenfolge der Seite.
   =================================================================== */

/* ===== Abstand unter den grossen Sektionstiteln ==================
   Die Titel laufen mit line-height .92 (--lh-tight). Unterlaengen wie
   das g in "by design." ragen dadurch rund .21em unter die Zeilenbox
   hinaus. Ein Abstand, der kleiner ist als dieser Ueberstand, wird
   davon aufgefressen, bei "by design." stand der Fliesstext deshalb
   im Unterschnitt.

   .5em traegt den Ueberstand mit und laesst rund .3em echte Luft. Weil
   der Wert in em steht, waechst er mit der clamp()-Schriftgroesse mit.
   Der Sockel von 1.75rem haelt dagegen, wenn die Titel auf dem Telefon
   klein werden, dort blieben von .5em sonst nur rund 10px Luft uebrig.
   Nachbarabstaende (etwa margin-top der Lead-Absaetze) fallen damit
   zusammen, der groessere gewinnt, es addiert sich also nichts. */
.services__title,
.refs__title,
.videos__title,
.music__title { margin-bottom: max(1.75rem, .5em); }

/* Alle Abschnittsueberschriften kleingeschrieben, wie "ai by design." */
.services__title,
.refs__title,
.videos__title,
.music__title,
.stack__heading { text-transform: lowercase; }

/* ===== 1 · Hero ================================================== */

.hero {
  position: relative; min-height: 100svh;
  display: grid; align-items: end;
  padding: var(--header-h) var(--pad-x) calc(var(--footer-h) + 2.5rem);
  padding-left: calc(var(--pad-x) + var(--rail-w));
  overflow: hidden;
}

/* Generatives AI-Visual, ersetzt das Portraitfoto der Vorlage. */
.hero__canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0;
}
/* Vignette, damit die Typo auf dem Partikelfeld lesbar bleibt. */
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 0%, rgba(13,13,16,.55) 62%, rgba(13,13,16,.92) 100%),
    linear-gradient(to top, rgba(13,13,16,.9) 0%, transparent 38%);
  pointer-events: none;
}

/* Die drei Umlaufkoerper. Positioniert von hero.js, Stil von hier. */
.hero__orbits { position: absolute; inset: 0; z-index: 2; }
.orbit-path {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(244, 243, 239, .13);
  border-radius: 50%;
  pointer-events: none;
}
.body {
  position: absolute; top: 0; left: 0;
  border-radius: 50%;
  touch-action: none;
  will-change: transform;
  opacity: .4;            /* Deckkraft aller Zierformen, siehe Manifest + Ringe */
}
.body--ring   { width: 76px;  height: 76px;  border: 15px solid var(--violet); background: transparent; }
/* Violett statt des fast schwarzen Kreises: auf dem Dunkel verschwand er
   mit 40 % Deckkraft. Hier wird die Deckkraft deshalb angehoben. */
.body--dark   { width: 58px;  height: 58px;  background: var(--violet); opacity: .85; box-shadow: 0 0 0 1px rgba(244,243,239,.25); }
.body--violet { width: 104px; height: 104px; background: var(--violet); }

/* Die Kreise sind Links. Beim Zeigen werden sie voll deckend und zeigen
   ihr Ziel. Das Label erbt sonst die 40 % Deckkraft des Kreises, deshalb
   die Deckkraft auf dem Kreis selbst anheben. */
a.body { text-decoration: none; color: var(--fg-on-light); }
a.body:hover, a.body:focus-visible { opacity: 1; }
a.body:focus-visible { outline: 2px solid var(--violet-text); outline-offset: 6px; }
.body__label {
  position: absolute; left: 50%; bottom: calc(100% + 12px);
  transform: translate(-50%, 6px); white-space: nowrap; pointer-events: none;
  font-family: var(--ff-mono); font-size: var(--fs-label); letter-spacing: .14em;
  text-transform: uppercase; padding: .45rem .7rem; border-radius: 999px;
  background: var(--violet); color: var(--fg-on-light);
  opacity: 0; transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
a.body:hover .body__label, a.body:focus-visible .body__label { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 640px) {
  .body--ring   { width: 48px; height: 48px; border-width: 10px; }
  .body--dark   { width: 36px; height: 36px; }
  .body--violet { width: 66px; height: 66px; }
}

.hero__inner {
  position: relative; z-index: 3;
  display: grid; gap: 1.6rem;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end; width: 100%;
}
@media (max-width: 900px) { .hero__inner { grid-template-columns: 1fr; } }

.hero__id { display: grid; gap: .3rem; }
.hero__name { font-size: var(--fs-small); font-weight: 600; letter-spacing: -.01em; }
.hero__role { font-family: var(--ff-mono); font-size: var(--fs-label); letter-spacing: .1em; color: var(--fg-dim); }

.hero__claim {
  font-family: var(--ff-mono); font-size: clamp(.75rem, 1.4vw, .9rem);
  letter-spacing: .22em; text-transform: lowercase;
  color: var(--violet-text);
}

.hero__hint {
  position: absolute; z-index: 3; left: 50%; bottom: calc(var(--footer-h) + .75rem);
  transform: translateX(-50%);
  font-family: var(--ff-mono); font-size: 9px;
  letter-spacing: .24em; color: var(--fg-faint);
}

/* ===== 2 · Manifest ============================================== */

.manifest { overflow: hidden; }
.manifest__lines {
  line-height: 1.04;   /* etwas mehr Luft als --lh-tight */
  letter-spacing: var(--ls-tight); color: var(--fg-on-light);
  text-transform: lowercase;
  container-type: inline-size;
}
.manifest__line { display: block; font-size: min(var(--fs-mega), 12.4cqi); }
.manifest__line:nth-child(2) { font-weight: 300; }
.manifest__line:nth-child(3) { font-weight: 800; }

/* Die Zeilen richten sich nach der Breite ihrer Spalte, nicht nach dem
   Viewport. "WIRKUNGSVOLL." ist rund 7,5 x Schriftgrad breit. Bei 13cqi
   passt die laengste Zeile knapp in die Spalte, sonst schiebt sie sich
   ueber den Fliesstext rechts daneben. */

/* Kreise, die im Parallax durchs Bild ziehen (scroll.js bewegt sie). */
.floaters { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
/* Jeder Kreis folgt seinem eigenen Pfad. Die Bewegung laeuft ueber die
   CSS-Eigenschaft translate, die neben dem transform von scroll.js liegt
   und sich nicht ueberschreibt. Jeder Pfad startet und endet bei 0,0. */
.floater {
  position: absolute; border-radius: 50%; will-change: transform; opacity: .4;
  pointer-events: auto; animation-timing-function: linear; animation-iteration-count: infinite;
}
.floater--a { animation-name: floaterPathA; animation-duration: 16s; }
.floater--b { animation-name: floaterPathB; animation-duration: 20s; }
.floater--c { animation-name: floaterPathC; animation-duration: 14s; }
.floater--d { animation-name: floaterPathD; animation-duration: 22s; }
@media (prefers-reduced-motion: reduce) { .floater { animation: none; } }
.no-motion .floater { animation: none; }

/* Pfade: 16 Stuetzpunkte je Kreis, linear dazwischen. */
@keyframes floaterPathA { /* lange Ellipse */
  0.0% { translate: 0.0px 0.0px; }
  6.2% { translate: -4.6px 9.9px; }
  12.5% { translate: -17.6px 18.4px; }
  18.8% { translate: -37.0px 24.0px; }
  25.0% { translate: -60.0px 26.0px; }
  31.2% { translate: -83.0px 24.0px; }
  37.5% { translate: -102.4px 18.4px; }
  43.8% { translate: -115.4px 9.9px; }
  50.0% { translate: -120.0px 0.0px; }
  56.2% { translate: -115.4px -9.9px; }
  62.5% { translate: -102.4px -18.4px; }
  68.8% { translate: -83.0px -24.0px; }
  75.0% { translate: -60.0px -26.0px; }
  81.2% { translate: -37.0px -24.0px; }
  87.5% { translate: -17.6px -18.4px; }
  93.8% { translate: -4.6px -9.9px; }
  100.0% { translate: 0.0px 0.0px; }
}
@keyframes floaterPathB { /* liegende Acht */
  0.0% { translate: 0.0px 0.0px; }
  6.2% { translate: 26.8px 21.2px; }
  12.5% { translate: 49.5px 30.0px; }
  18.8% { translate: 64.7px 21.2px; }
  25.0% { translate: 70.0px 0.0px; }
  31.2% { translate: 64.7px -21.2px; }
  37.5% { translate: 49.5px -30.0px; }
  43.8% { translate: 26.8px -21.2px; }
  50.0% { translate: 0.0px 0.0px; }
  56.2% { translate: -26.8px 21.2px; }
  62.5% { translate: -49.5px 30.0px; }
  68.8% { translate: -64.7px 21.2px; }
  75.0% { translate: -70.0px 0.0px; }
  81.2% { translate: -64.7px -21.2px; }
  87.5% { translate: -49.5px -30.0px; }
  93.8% { translate: -26.8px -21.2px; }
  100.0% { translate: 0.0px 0.0px; }
}
@keyframes floaterPathC { /* weiter Schwung mit Welle */
  0.0% { translate: 0.0px 0.0px; }
  6.2% { translate: 34.4px -5.3px; }
  12.5% { translate: 63.6px -18.0px; }
  18.8% { translate: 83.1px -30.7px; }
  25.0% { translate: 90.0px -36.0px; }
  31.2% { translate: 83.1px -30.7px; }
  37.5% { translate: 63.6px -18.0px; }
  43.8% { translate: 34.4px -5.3px; }
  50.0% { translate: 0.0px 0.0px; }
  56.2% { translate: -34.4px -5.3px; }
  62.5% { translate: -63.6px -18.0px; }
  68.8% { translate: -83.1px -30.7px; }
  75.0% { translate: -90.0px -36.0px; }
  81.2% { translate: -83.1px -30.7px; }
  87.5% { translate: -63.6px -18.0px; }
  93.8% { translate: -34.4px -5.3px; }
  100.0% { translate: 0.0px 0.0px; }
}
@keyframes floaterPathD { /* Kreis mit Schlinge */
  0.0% { translate: 0.0px 0.0px; }
  6.2% { translate: 9.9px 9.1px; }
  12.5% { translate: -1.8px 11.2px; }
  18.8% { translate: -30.1px 17.7px; }
  25.0% { translate: -54.0px 30.0px; }
  31.2% { translate: -60.7px 36.2px; }
  37.5% { translate: -58.4px 25.4px; }
  43.8% { translate: -64.0px 1.5px; }
  50.0% { translate: -80.0px -20.0px; }
  56.2% { translate: -89.9px -29.1px; }
  62.5% { translate: -78.2px -31.2px; }
  68.8% { translate: -49.9px -37.7px; }
  75.0% { translate: -26.0px -50.0px; }
  81.2% { translate: -19.3px -56.2px; }
  87.5% { translate: -21.6px -45.4px; }
  93.8% { translate: -16.0px -21.5px; }
  100.0% { translate: 0.0px 0.0px; }
}

/* Die Sektion ist selbst violett. Ein gleichfarbiger Kreis wuerde
   verschwinden, deshalb das dunklere Violett aus den Tokens. */
.floater--a { width: 86px;  height: 86px;  background: var(--violet-dark); left: 24%; top: 8%; }
.floater--b { width: 132px; height: 132px; background: var(--violet-dark); left: 48%; top: 26%; }
.floater--c { width: 54px;  height: 54px;  background: var(--violet-dark); left: 70%; top: 62%; }
.floater--d { width: 210px; height: 210px; background: var(--violet-dark); left: 12%; top: 58%; }
.manifest > *:not(.floaters) { position: relative; z-index: 1; }

/* ===== 3 · Statement ============================================= */

.statement { background: var(--violet); padding-top: 0; }
/* Zwei Spalten wie das Manifest (.split): Ueberschrift links, Text rechts. */
.statement__inner { container-type: inline-size; }
/* Dreizeilig wie das Manifest, gleicher Gewichtsrhythmus: fett, hell, extrafett.
   Auf dem Telefon richtet sich die Groesse nach der Breite, damit das
   laengste Wort passt. Ab 901px hat das Manifest nur eine Spalte von rund
   der halben Breite; dort nimmt die Ueberschrift dieselbe Groesse, 6vw. */
.statement__title {
  font-size: min(var(--fs-mega), 12cqi); line-height: 1.04;
  letter-spacing: var(--ls-tight); color: var(--fg-on-light);
  text-transform: lowercase;
}
@media (min-width: 901px) {
  .statement__title { font-size: min(var(--fs-mega), 6vw); }
}
.statement__line { display: block; }
.statement__line:nth-child(1) { font-weight: 700; }
.statement__line:nth-child(2) { font-weight: 300; }
.statement__line:nth-child(3) { font-weight: 800; }
.statement__body {
  max-width: 62ch; color: var(--fg-on-light);
  font-size: var(--fs-body); line-height: var(--lh-body);
}
.statement__body p + p { margin-top: 1.1em; }

/* ===== 4 · Drag to orbit ========================================= */

.orbit3d {
  position: relative; min-height: 100svh;
  display: grid; place-items: center;
  background: var(--black); overflow: hidden;
}
.orbit3d__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.orbit3d__hint {
  position: relative; z-index: 1; text-align: center;
  font-family: var(--ff-mono); font-size: var(--fs-label);
  letter-spacing: .3em; color: var(--fg-faint);
  line-height: 2.1; pointer-events: none;
}
.orbit3d__hint span { display: block; }
.orbit3d__fallback {
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(circle at 50% 50%, var(--violet-deep) 0%, transparent 58%);
  opacity: .5;
}

/* ===== 5 · Leistungen (Ringdiagramm) ============================= */

.services { overflow: hidden; }
.services__title {
  font-size: var(--fs-giant); line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight); font-weight: 700;
}
.services__title .t1 { color: var(--violet-dark); }
.services__title .t2 { display: block; color: var(--fg-on-light); }

.services__layout {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center; margin-top: clamp(2rem, 5vw, 4rem);
}
@media (max-width: 1000px) { .services__layout { grid-template-columns: 1fr; } }

.rings { width: 100%; max-width: 620px; margin-inline: auto; overflow: visible; }
.rings__circle { fill: none; stroke: rgba(20, 20, 26, .16); stroke-width: 1; }
.rings__text { font-family: var(--ff-mono); font-size: 11px; letter-spacing: .14em; fill: var(--fg-on-light-dim); text-transform: uppercase; }
.rings__group, .rings__arm, .rings__rail { transform-origin: 300px 300px; }
.rings__hub { fill: var(--violet); }
/* Die Knoten sind lila statt weiss; der dunkle Rand von vorher wuerde
   die Farbe nur truebe machen und faellt deshalb weg. Die Transparenz
   staffelt sich nach Ringebene: innen kraeftig, nach aussen schwaecher.
   Das gibt der Scheibe Tiefe und nimmt den aeusseren Knoten das
   Gewicht, wo sie neben der Beschriftung liegen. */
.rings__node { fill: var(--violet); stroke: none; }
.rings__node--1 { opacity: .80; }   /* innerster Ring,  r=120 */
.rings__node--2 { opacity: .62; }   /*                  r=175 */
.rings__node--3 { opacity: .45; }   /*                  r=230 */
.rings__node--4 { opacity: .28; }   /* aeusserster Ring, r=285 */

.rings__rail { fill: var(--violet); }
.rings__spoke { stroke: rgba(20,20,26,.3); stroke-width: 1; }
/* Gleiche Deckkraft wie die Zierformen in Hero und Manifest. Die
   Ringlinien und die Beschriftung bleiben voll, die tragen Inhalt.
   Die Knoten stehen oben mit ihren eigenen Werten. */
.rings__hub, .rings__rail, .rings__spoke { opacity: .4; }

.services__list {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-top: 1.8rem;
}
.services__list li {
  padding: .45rem .85rem; border: 1px solid var(--line-light);
  border-radius: 100px; font-size: var(--fs-small);
  color: var(--fg-on-light);
}

/* ===== 6 · Marquee =============================================== */

.marquee {
  background: var(--black); color: var(--fg);
  padding: clamp(3rem, 7vw, 6rem) 0; overflow: hidden;
}
.marquee__claim {
  padding: 0 var(--pad-x) clamp(1.5rem, 4vw, 3rem);
  padding-left: calc(var(--pad-x) + var(--rail-w));
  font-size: var(--fs-mid); color: var(--violet-text);
}
.marquee__track {
  display: flex; width: max-content; gap: 0;
  will-change: transform;
}
.marquee__item {
  display: flex; align-items: center; gap: 2.2rem;
  padding-right: 2.2rem; white-space: nowrap;
  font-size: clamp(1.4rem, 3.4vw, 2.9rem);
  font-weight: 300; letter-spacing: -.02em;
}
.marquee__item::after {
  content: ''; width: 9px; height: 9px; border-radius: 50%;
  background: var(--violet); flex: 0 0 auto;
}

/* ===== 7 · Referenzen ============================================ */

.refs { background: var(--black); }
.refs__title {
  font-size: var(--fs-giant); line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight); font-weight: 300;
}
.refs__title b { font-weight: 800; display: block; color: var(--violet-text); }

.refs__list { margin-top: clamp(2rem, 5vw, 4rem); border-top: 1px solid var(--line-dark); }

.ref { border-bottom: 1px solid var(--line-dark); }

.ref__head {
  display: grid; width: 100%; text-align: left;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center; gap: clamp(.8rem, 2.5vw, 2rem);
  padding: clamp(1.2rem, 2.8vw, 2.2rem) 0;
  transition: color var(--dur) var(--ease);
}
.ref__head:hover { color: var(--violet-text); }
.ref__num {
  font-family: var(--ff-mono); font-size: var(--fs-label);
  letter-spacing: .14em; color: var(--fg-faint);
}
.ref__name {
  font-size: var(--fs-large); font-weight: 500;
  letter-spacing: var(--ls-tight); line-height: 1.05;
}
.ref__kicker {
  font-family: var(--ff-mono); font-size: var(--fs-label);
  letter-spacing: .1em; color: var(--fg-dim);
  text-align: right;
}
@media (max-width: 760px) { .ref__kicker { display: none; } }

.ref__toggle {
  position: relative; width: 38px; height: 38px; flex: 0 0 auto;
  border: 1px solid var(--line-dark); border-radius: 50%;
}
.ref__toggle::before, .ref__toggle::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 13px; height: 1.5px; background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.ref__toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.ref[data-open='true'] .ref__toggle::after { opacity: 0; transform: translate(-50%, -50%) rotate(0deg); }

/* Panel: wird von media/refs per max-height aufgeklappt. */
.ref__panel {
  overflow: hidden; max-height: 0;
  transition: max-height var(--dur-slow) var(--ease);
}
.ref[data-open='true'] .ref__panel { max-height: 1400px; }

.ref__body {
  display: grid; gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  padding-bottom: clamp(2rem, 5vw, 3.5rem);
}
@media (max-width: 860px) { .ref__body { grid-template-columns: 1fr; } }

/* Cover aus den Eigenfarben des Projekts, kein Bild noetig.
   --c1/--c2/--c3 setzt refs.js pro Karte inline. */
.ref__cover {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-lg);
  overflow: hidden; background: var(--ink);
  background-image:
    radial-gradient(90% 80% at 18% 20%, var(--c2, var(--violet)) 0%, transparent 62%),
    radial-gradient(70% 70% at 82% 78%, var(--c3, var(--violet-deep)) 0%, transparent 58%),
    linear-gradient(142deg, var(--c1, var(--ink)) 0%, var(--black) 100%);
}
.ref__cover img { width: 100%; height: 100%; object-fit: cover; }
.ref__cover::after {
  content: attr(data-title);
  position: absolute; left: 1.4rem; bottom: 1.2rem;
  font-family: var(--ff-mono); font-size: var(--fs-label);
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .7);
}

.ref__lead {
  font-size: var(--fs-mid); color: var(--fg);
  letter-spacing: -.015em; margin-bottom: 1rem;
}
.ref__text { color: var(--fg-dim); max-width: 60ch; }
.ref__tags { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.4rem; }
.ref__tags li {
  padding: .35rem .75rem; border: 1px solid var(--line-dark);
  border-radius: 100px; font-family: var(--ff-mono);
  font-size: 10px; letter-spacing: .08em; color: var(--fg-dim);
}
.ref__year {
  font-family: var(--ff-mono); font-size: var(--fs-label);
  letter-spacing: .14em; color: var(--fg-faint); margin-top: 1rem;
}

/* Link auf die Projektseite im Portfolio. Gleiche Anmutung wie
   .cta-line, nur ohne SVG: der Pfeil kommt aus ::after. */
.ref__link {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: 1.1rem; font-size: var(--fs-small);
  border-bottom: 1px solid var(--line-dark); padding-bottom: .2rem;
  color: var(--fg-dim);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.ref__link::after { content: '↗'; font-size: .9em; }
.ref__link:hover,
.ref__link:focus-visible { color: var(--violet-text); border-color: currentColor; }

/* ===== 8 · Videos ================================================ */

.videos { background: var(--cream); color: var(--fg-on-light); }
.videos__title {
  font-size: var(--fs-giant); line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight); font-weight: 300;
}
.videos__title b { font-weight: 800; display: block; color: var(--violet-dark); }
.videos__lead { max-width: 52ch; margin-top: 1.4rem; color: var(--fg-on-light-dim); }

.videos__grid {
  display: grid; gap: clamp(1rem, 2.2vw, 1.6rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
  margin-top: clamp(2rem, 5vw, 3.5rem);
}

.vcard {
  display: flex; flex-direction: column;
  background: var(--white); border-radius: var(--radius);
  overflow: hidden; border: 1px solid var(--line-light);
}
.vcard__frame {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  background: var(--ink); display: grid; place-items: center;
  cursor: pointer; border: 0; padding: 0;
}
/* Absolut, nicht im Grid-Fluss: sonst legt das Grid des Frames eine
   zweite Zeile an (Poster oben, Play-Knopf darunter) und das Poster
   wird gestaucht. Platzhalter und iframe machen es genauso. */
.vcard__frame img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.vcard__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Platzhalter-Grafik, solange keine YouTube-ID gesetzt ist. */
.vcard__ph {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(60% 60% at 30% 30%, rgba(177, 140, 255, .45) 0%, transparent 60%),
    radial-gradient(50% 50% at 75% 70%, rgba(139, 108, 255, .35) 0%, transparent 60%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 10px, transparent 10px 20px),
    linear-gradient(140deg, #1b1b22 0%, #0d0d10 100%);
}
.vcard__play {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 62px; height: 62px; border-radius: 50%;
  background: rgba(13, 13, 16, .66);
  border: 1px solid rgba(255, 255, 255, .35);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.vcard__frame:hover .vcard__play { background: var(--violet); transform: scale(1.08); }
.vcard__play svg { width: 18px; height: 18px; fill: #fff; margin-left: 3px; }
.vcard__frame:hover .vcard__play svg { fill: #15121f; }

.vcard__meta { padding: 1rem 1.1rem 1.2rem; }
.vcard__title { font-size: 1rem; font-weight: 600; letter-spacing: -.012em; }
.vcard__sub {
  margin-top: .3rem; font-family: var(--ff-mono);
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-on-light-dim);
}
.vcard__sub.is-todo { color: var(--violet-dark); }

.videos__consent {
  margin-top: 1.4rem; font-size: var(--fs-small);
  color: var(--fg-on-light-dim); max-width: 60ch;
}

/* ===== 9 · Musik ================================================= */

.music { background: var(--black); }
.music__title {
  font-size: var(--fs-giant); line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight); font-weight: 300;
}
.music__title b { font-weight: 800; display: block; color: var(--violet-text); }
.music__lead { max-width: 52ch; margin-top: 1.4rem; color: var(--fg-dim); }

.player {
  margin-top: clamp(2rem, 5vw, 3.5rem);
  border: 1px solid var(--line-dark); border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--ink) 0%, var(--black) 100%);
  overflow: hidden;
}

.player__tabs {
  display: flex; gap: .3rem; padding: 1rem 1rem 0;
  border-bottom: 1px solid var(--line-dark);
}
.player__tab {
  padding: .75rem 1.1rem; border-radius: 10px 10px 0 0;
  font-family: var(--ff-mono); font-size: var(--fs-label);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg-dim); min-height: 44px;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.player__tab[aria-selected='true'] { color: var(--black); background: var(--violet); }
.player__tab:hover { color: var(--fg); }
.player__tab[aria-selected='true']:hover { color: var(--black); }

.player__body {
  display: grid; gap: 0;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
}
@media (max-width: 860px) { .player__body { grid-template-columns: 1fr; } }

.player__stage {
  padding: clamp(1.4rem, 3vw, 2.2rem);
  border-right: 1px solid var(--line-dark);
  display: flex; flex-direction: column; gap: 1.1rem;
}
@media (max-width: 860px) { .player__stage { border-right: 0; border-bottom: 1px solid var(--line-dark); } }

.player__viz {
  width: 100%; height: 132px; border-radius: var(--radius);
  background: rgba(255, 255, 255, .03);
}
.player__nowlabel { font-family: var(--ff-mono); font-size: var(--fs-label); letter-spacing: .14em; color: var(--fg-faint); text-transform: uppercase; }
.player__now { font-size: var(--fs-mid); letter-spacing: -.015em; }
.player__note { font-size: var(--fs-small); color: var(--violet-text); min-height: 1.4em; }

.player__seek {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 26px; background: transparent; cursor: pointer;
}
.player__seek::-webkit-slider-runnable-track { height: 3px; background: var(--line-dark); border-radius: 3px; }
.player__seek::-moz-range-track { height: 3px; background: var(--line-dark); border-radius: 3px; }
.player__seek::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 13px; height: 13px; margin-top: -5px;
  border-radius: 50%; background: var(--violet);
}
.player__seek::-moz-range-thumb { width: 13px; height: 13px; border: 0; border-radius: 50%; background: var(--violet); }

.player__times {
  display: flex; justify-content: space-between;
  font-family: var(--ff-mono); font-size: 10px; color: var(--fg-faint);
}

.player__controls { display: flex; align-items: center; gap: .6rem; }
.player__btn {
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--line-dark); color: var(--fg);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.player__btn:hover { background: rgba(255, 255, 255, .07); }
.player__btn--main { background: var(--violet); color: #15121f; border-color: transparent; width: 54px; height: 54px; }
.player__btn--main:hover { background: var(--violet-text); }
.player__btn svg { width: 17px; height: 17px; fill: currentColor; }

.player__list { padding: .6rem; max-height: 420px; overflow-y: auto; }
.track {
  display: grid; width: 100%; text-align: left;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: .9rem;
  padding: .75rem .9rem; border-radius: 10px;
  min-height: 44px;
  transition: background var(--dur-fast) var(--ease);
}
.track:hover { background: rgba(255, 255, 255, .05); }
.track[aria-current='true'] { background: rgba(177, 140, 255, .14); }
.track__num { font-family: var(--ff-mono); font-size: 10px; color: var(--fg-faint); }
.track__title { font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track[aria-current='true'] .track__title { color: var(--violet-text); }
.track__flag {
  font-family: var(--ff-mono); font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--fg-faint);
  border: 1px solid var(--line-dark); border-radius: 100px; padding: .15rem .5rem;
}
.track__flag.is-live { color: var(--violet-text); border-color: rgba(177, 140, 255, .4); }

.cta-line {
  display: inline-flex; align-items: center; gap: .6rem;
  margin-top: 1.6rem; font-size: var(--fs-small);
  border-bottom: 1px solid currentColor; padding-bottom: .2rem;
}
.cta-line svg { width: 13px; height: 13px; fill: currentColor; }

/* ===== 10 · Sticky-Stack (Bio / Kunden / Skills) ================== */

.stack { background: var(--black); }
.stack__row {
  display: grid; gap: clamp(1.5rem, 4vw, 4rem);
  grid-template-columns: minmax(0, .6fr) minmax(0, 1fr);
  align-items: start;
  padding: clamp(2rem, 6vw, 5rem) 0;
  border-top: 1px solid var(--line-dark);
}
@media (max-width: 860px) { .stack__row { grid-template-columns: 1fr; } }

.stack__heading {
  position: sticky; top: calc(var(--header-h) + 1.5rem);
  font-size: clamp(2rem, 5.5vw, 4.4rem);
  font-weight: 700; letter-spacing: var(--ls-tight); line-height: 1;
  color: var(--fg-faint);
  transition: color var(--dur-slow) var(--ease);
}
.stack__row.is-active .stack__heading { color: var(--violet-text); }

.stack__chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.2rem 0; }
.stack__chips li {
  padding: .4rem .85rem; border: 1px solid var(--line-dark);
  border-radius: 100px; font-size: var(--fs-small); color: var(--fg);
}

/* ===== 11 · Zitat ================================================ */

.quote { background: var(--black); text-align: center; }
.quote__text {
  font-size: clamp(1.5rem, 4.4vw, 3.6rem);
  line-height: 1.16; letter-spacing: var(--ls-tight);
  font-weight: 300; max-width: 22ch; margin-inline: auto;
}
.quote__text::before { content: '\201E'; color: var(--violet-text); }
.quote__text::after  { content: '\201C'; color: var(--violet-text); }
.quote__author {
  margin-top: 1.6rem; font-family: var(--ff-mono);
  font-size: var(--fs-label); letter-spacing: .18em;
  text-transform: uppercase; color: var(--fg-dim);
}

/* ===== 12 · Kontakt ============================================== */

.contact {
  position: relative; background: var(--cream); color: var(--fg-on-light);
  display: grid; align-content: center; justify-items: center;
  min-height: 100svh; overflow: hidden;
  padding: calc(var(--header-h) + 2rem) var(--pad-x) calc(var(--footer-h) + 3rem);
}
/* Die Schrift sitzt innerhalb der viewBox, also darf hier geschnitten
   werden, das haelt den Bogen aus dem Header heraus. */
.contact__arc { width: min(92vw, 760px); }
.contact__arc text {
  font-size: 38px; font-weight: 300;
  letter-spacing: -.01em; fill: var(--fg-on-light);
}

.contact__disc {
  position: relative; display: grid; place-items: center;
  width: min(74vw, 430px); aspect-ratio: 1; border-radius: 50%;
  background: var(--violet); color: var(--fg-on-light);
  margin-top: clamp(-5rem, -6vw, -2rem);
  transition: transform var(--dur-slow) var(--ease), background var(--dur) var(--ease);
}
.contact__disc:hover { background: var(--black); color: var(--cream); }
.contact__cta {
  font-size: clamp(2rem, 7vw, 4.6rem); line-height: .96;
  letter-spacing: var(--ls-tight); text-align: center;
}
.contact__cta b { display: block; font-weight: 800; }
.contact__mail {
  margin-top: 1.8rem; font-family: var(--ff-mono);
  font-size: var(--fs-small); letter-spacing: .06em;
  border-bottom: 1px solid currentColor; padding-bottom: .15rem;
}
.contact__note {
  margin-top: .9rem; font-family: var(--ff-mono);
  font-size: 10px; letter-spacing: .06em;
  color: var(--fg-on-light-dim); text-align: center; max-width: 42ch;
}