/* CHROM — Stylesheet. Richtung "Nachtbild" (siehe DESIGN.md).
   Schwarz, Weiss, Grau. Farbe kommt ausschliesslich aus den Fotos.
   Chrom ist Material, kein Farbwert: Verlauf mit Lichtkante, wandert bei Interaktion. */

@font-face{font-family:'Bricolage';src:url(fonts/bricolage.woff2) format('woff2');font-weight:200 800;font-display:swap}
@font-face{font-family:'Archivo';src:url(fonts/archivo.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'BigShoulders';src:url(fonts/bigshoulders.woff2) format('woff2');font-weight:100 900;font-display:swap}

:root{
  --black:#000; --near:#0a0a0b; --lift:#141416; --line:rgba(255,255,255,.14);
  --ink:#fff; --ink-2:#b9b9bd; --ink-3:#8a8a90;
  --paper:#f4f4f2; --paper-ink:#111114; --paper-ink-2:#3c3c42; --paper-line:rgba(0,0,0,.16);
  --chrome:linear-gradient(100deg,#43474d 0%,#c6ccd4 14%,#f4f7fa 22%,#8b9199 34%,#4c5057 48%,
           #b6bdc6 64%,#eef2f6 74%,#767c85 88%,#3c4046 100%);
  --chrome-plate:linear-gradient(100deg,#aab1ba 0%,#d8dde3 14%,#f4f7fa 22%,#b9bfc7 36%,#a4abb4 48%,
           #cdd3da 64%,#eef2f6 74%,#b0b6be 88%,#9fa6af 100%); /* fuer Flaechen mit dunkler Schrift: mind. 8:1 */
  --chrome-type:linear-gradient(100deg,#8c9197 0%,#c6ccd4 14%,#f4f7fa 22%,#a3a9b1 34%,#868b92 48%,
           #b6bdc6 64%,#eef2f6 74%,#969ca4 88%,#868b92 100%); /* fuer Chromschrift: mind. 5:1 auf Schwarz */
  --chrome-soft:linear-gradient(100deg,rgba(255,255,255,.05),rgba(220,228,236,.55) 24%,
           rgba(120,128,138,.25) 50%,rgba(230,236,242,.5) 76%,rgba(255,255,255,.05));
  --pad:clamp(1.25rem,5vw,5rem);
  --out:cubic-bezier(.16,1,.3,1);
  --tap:44px;   /* gemeinsame Hoehe von Menueknopf und Sprachblock */
}

*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--black);color:var(--ink);font-family:'Archivo',system-ui,sans-serif;
  font-size:clamp(1rem,.95rem + .25vw,1.12rem);line-height:1.7;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;text-rendering:optimizeLegibility}
/* `height:auto` ist Pflicht, sobald Bilder `width`/`height` als Attribute tragen:
   sonst bleibt die Attributhoehe stehen, waehrend die Breite skaliert — das Bild
   wird gestaucht. Regeln mit eigener Hoehe (Hero, Fotostreifen) stechen das aus. */
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:'Bricolage','Archivo',sans-serif;font-weight:700;line-height:.98;
  letter-spacing:-.035em;text-wrap:balance;overflow-wrap:break-word}
:focus-visible{outline:2px solid #fff;outline-offset:3px}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:var(--pad)}
.narrow{max-width:760px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;background:#fff;color:#000;padding:.75rem 1rem;z-index:200}
.skip:focus{left:0}

/* Ohne mix-blend-mode: Der Modus zwingt die ganze Seite bei jedem Scrollschritt neu in die
   Mischung und zeigte ueber eigenen Ebenen graues Rauschen. */
.grain{position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.42'/></svg>")}

.chrome-rule{height:1px;background:var(--chrome);opacity:.75;border:0;margin:0}
.chrome-top{border-top:1px solid transparent;background-image:var(--chrome);
  background-size:100% 1px;background-repeat:no-repeat;background-position:0 0}

/* Chromschrift. Nur fuer kurze, grosse Woerter — nie fuer Fliesstext. */
.chrome-text{color:var(--ink);background:var(--chrome-type);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  color:transparent;filter:drop-shadow(0 2px 12px rgba(0,0,0,.55));
  animation:drift-sheen 14s ease-in-out infinite}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .chrome-text{color:var(--ink);-webkit-text-fill-color:currentColor;background:none;filter:none}
}
.invert .chrome-text{filter:drop-shadow(0 1px 6px rgba(0,0,0,.35))}

::selection{background:#c9ced6;color:#000}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--near)}
::-webkit-scrollbar-thumb{background-image:var(--chrome);border:2px solid var(--near)}

/* ---------- Kopf ---------- */
.site-head{position:sticky;top:0;z-index:95;background:rgba(0,0,0,.86);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line)}
.site-head.over{position:fixed;left:0;right:0;background:none;backdrop-filter:none;border:0}
/* Auf der Startseite steht die Kopfzeile zunaechst frei im Bild. Sobald gescrollt
   wird, legt sich der Grund darunter — sonst laeuft der Text der Seite durch die
   Reiter hindurch. `.solid` setzt ein kleines Skript beim Scrollen. */
.site-head.over.solid{background:rgba(0,0,0,.86);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line)}
.site-head{transition:background .25s ease,border-color .25s ease}
.bar{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  height:74px;gap:1rem}
.bar-left{grid-column:1;justify-self:start;display:flex;align-items:center;gap:.7rem;min-width:0}
.bar-right{grid-column:3;justify-self:end;display:flex;align-items:center;gap:.6rem}
.bar .logo img{height:30px;width:auto}
.nav{display:flex;align-items:center;justify-content:center;gap:clamp(.9rem,2.2vw,2rem);
  font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  justify-self:center}
@media(min-width:901px){
  /* Absolut zentriert: das Menue haengt an der Seitenmitte, nicht am Platz daneben.
     Das letzte Zeichen jedes Wortes traegt Sperrung, die rechts als Luft stehen bleibt —
     die wird abgezogen, damit die Schrift optisch mittig sitzt. Wert am Bildschirm
     ausgemessen: mit .62em stand die Zeile 5 px zu weit rechts. */
  .nav{position:absolute;top:0;height:74px;left:50%;transform:translateX(calc(-50% + .2em))}
}
.nav a{position:relative;text-decoration:none;color:var(--ink-2);padding-block:.35rem;transition:color .2s}
.nav a:hover,.nav a:focus-visible{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink)}
/* Chromstrich: faehrt beim Ueberfahren von links ein, bleibt auf der aktiven Seite stehen. */
.nav a::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--chrome);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--out)}
.nav a:hover::before,.nav a:focus-visible::before,.nav a[aria-current="page"]::before{transform:scaleX(1)}
.nav .ext::after{content:"↗";font-size:.85em;margin-left:.25em;opacity:.6}
.lang{display:flex;gap:.4rem;align-items:center;color:var(--ink-3)}
.lang a[aria-current]{color:var(--ink)}
/* Drei Striche statt des Wortes "Menue". Feste Hoehe, dieselbe wie beim
   Sprachblock — vorher sassen beide unterschiedlich hoch in der Zeile. */
.burger{display:none;align-items:center;justify-content:center;background:none;
  border:1px solid var(--line);color:var(--ink);width:42px;height:var(--tap);padding:0;
  cursor:pointer}
.burger span{position:relative;display:block;width:18px;height:1.5px;background:currentColor;
  transition:background-color .2s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;
  height:1.5px;background:currentColor;transition:transform .25s var(--out)}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background-color:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}
@media(max-width:900px){
  .bar{grid-template-columns:auto 1fr auto}
  .bar-left{grid-column:1}
  .bar-right{grid-column:3}
  .burger{display:flex}
  /* Breite ausdruecklich setzen: mit `left:0;right:0` allein zieht sich die
     Flaeche auf ihren Inhalt zusammen und steht als schmale Saeule in der Mitte. */
  .nav{position:fixed;top:74px;left:0;width:100vw;max-width:100vw;justify-self:stretch;
    background:#000;flex-direction:column;
    align-items:flex-start;justify-content:flex-start;gap:0;
    padding:1rem var(--pad) 2rem;border-bottom:1px solid var(--line);display:flex;
    visibility:hidden;clip-path:inset(0 0 100% 0);
    transition:clip-path .3s var(--out),visibility 0s .3s}
  .nav.open{visibility:visible;clip-path:inset(0 0 0 0);
    transition:clip-path .55s var(--out),visibility 0s}
  .nav a{padding-block:.9rem;font-size:.9rem;width:100%;border-bottom:1px solid var(--line)}
  .nav a::before{display:none}
  .nav.open a{animation:nav-in .5s var(--out) both}
  .nav.open a:nth-child(2){animation-delay:40ms}
  .nav.open a:nth-child(3){animation-delay:80ms}
  .nav.open a:nth-child(4){animation-delay:120ms}
  .nav.open a:nth-child(5){animation-delay:160ms}
  .nav.open a:nth-child(6){animation-delay:200ms}
}

/* ---------- Hero ---------- */
.hero{position:relative;height:min(84svh,780px);min-height:540px;display:grid;grid-template-rows:1fr auto}
.hero--page{height:auto;min-height:0;padding-block:clamp(6rem,14vw,10rem) clamp(2.5rem,6vw,4rem)}
.hero figure{position:absolute;inset:0;margin:0;overflow:hidden}
.hero figure picture{display:contents}
.hero figure img{width:100%;height:100%;object-fit:cover;object-position:50% 36%;
  filter:contrast(1.06) brightness(.62);animation:drift 22s var(--out) forwards,lights-on 1.8s var(--out) both}
@keyframes drift{from{transform:scale(1.08)}to{transform:scale(1)}}
.hero figure::after{content:"";position:absolute;inset:0;
  background:radial-gradient(56% 50% at 47% 57%,rgba(0,0,0,.74),rgba(0,0,0,0) 74%),
    linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.04) 42%,rgba(0,0,0,.9) 92%,#000)}
.hero-body{position:relative;padding-bottom:clamp(2rem,5.5vw,4rem);text-align:center;
  display:flex;flex-direction:column;align-items:center}
.kicker{font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-2);
  display:flex;align-items:center;justify-content:center;gap:.85rem}
.kicker::after{content:"";width:40px;height:1px;background:var(--chrome);flex:none}
.eyebrow .kicker::after{display:none}
.kicker::before{content:"";width:40px;height:1px;background:var(--chrome);flex:none}
.hero-body h1{font-size:clamp(3.4rem,15vw,11rem);letter-spacing:.02em;margin-block:1.1rem .6rem;
  line-height:.9}
/* Schmale Versalien statt Fliesstext: liest sich wie eine Zeile auf einer
   Plattenhuelle und haelt Abstand zum breiten Schriftzug darueber. */
.hero-sub{font-family:'BigShoulders','Archivo',sans-serif;font-weight:600;
  text-transform:uppercase;letter-spacing:.2em;
  font-size:clamp(1rem,2vw,1.3rem);color:var(--ink-2);
  margin:0 auto .8rem}
.hero-body h1 em{font-style:normal;color:var(--ink-3)}
.hero-next{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 2rem;align-items:center;font-size:.78rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.hero-next b{color:var(--ink);font-weight:700}
.hero-next a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line)}
.hero-next a:hover{color:var(--ink)}

/* Zeichen und Untertitel stehen zwischen zwei Haarlinien, die zu den Enden hin
   auslaufen. Kurz oben, lang unten — gleich lange Linien wirken wie ein Kasten. */
.hero-mark{display:flex;flex-direction:column;align-items:center;margin-bottom:1.6rem}
.hero-mark::before,.hero-mark::after{content:"";display:block;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5) 20%,
    rgba(255,255,255,.5) 80%,transparent)}
.hero-mark::before{width:min(150px,26vw)}
/* Dicht unter dem Untertitel — mit groesserem Abstand haengt der Strich optisch
   an der Terminzeile darunter statt am Schriftzug darueber. */
.hero-mark::after{width:min(330px,50vw)}

/* ---------- Logo im Hero, mit wanderndem Glanz ---------- */
.hero-logo{position:relative;display:block;width:min(33vw,265px);margin:1rem auto .9rem}
.hero-logo img{width:100%;height:auto;filter:drop-shadow(0 6px 24px rgba(0,0,0,.75))}
/* Der Glanz liegt als Lichtstreifen ueber dem Logo und wird von seiner eigenen
   Form beschnitten — dadurch wandert er nur durch die Buchstaben. */
.hero-logo .gloss{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(104deg,
    rgba(255,255,255,0) 38%,rgba(255,255,255,.28) 46%,rgba(255,255,255,.92) 50%,
    rgba(255,255,255,.28) 54%,rgba(255,255,255,0) 62%);
  background-size:260% 100%;background-repeat:no-repeat;background-position:-60% 0;
  -webkit-mask-image:url(logo-mask.png);mask-image:url(logo-mask.png);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  animation:gloss-sweep 5.5s cubic-bezier(.5,0,.35,1) infinite}
/* Der Streifen selbst laeuft gleich schnell wie vorher, nur die Pause davor
   ist kuerzer — deshalb 70 % statt 55 % bei kuerzerer Gesamtdauer. */
@keyframes gloss-sweep{
  0%{background-position:-60% 0}
  70%{background-position:160% 0}
  100%{background-position:160% 0}
}
/* Auf dem Telefon steht der Titelblock kleiner: das Foto liegt daneben, beide
   brauchen Platz nebeneinander statt uebereinander. */
@media(max-width:640px){
  .hero-logo{width:min(44vw,164px);margin-block:.7rem .6rem}
  .hero-sub{letter-spacing:.12em;font-size:.82rem;margin-bottom:.6rem}
  .hero-mark::before{width:min(104px,20vw)}
  .hero-mark::after{width:min(226px,44vw)}
  .hero-mark{margin-bottom:1.1rem}
  .hero-next{font-size:.68rem;gap:.45rem 1.2rem}
  /* Titelblock etwas hoeher, damit das Foto daneben nicht am unteren Rand klebt. */
  .hero-body{padding-bottom:clamp(4.5rem,20vw,6.5rem)}
  /* Die Abdunklung in der Bildmitte war fuer das breite Startbild gedacht. Auf dem
     Telefon liegt dort der Kopf — sie wuerde ihm ins Gesicht fallen. Hier bleibt
     nur der senkrechte Verlauf, dafuer steht das Foto etwas heller. */
  .hero figure::after{background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,.02) 38%,
    rgba(0,0,0,.86) 92%,#000)}
  .hero figure img{filter:contrast(1.05) brightness(.82)}
}

/* ---------- Platzhalter, bis bessere Fotos da sind ---------- */

/* ---------- Sprachwahl ---------- */
.langbox{position:relative}
.langbox summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.5rem;
  height:var(--tap);padding:0 .7rem;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--ink-2);border:1px solid transparent;
  background:linear-gradient(var(--black),var(--black)) padding-box,var(--chrome-soft) border-box;
  background-size:auto,220% 100%;background-position:0 0,12% 50%;
  transition:background-position .7s var(--out),color .2s}
.langbox summary::-webkit-details-marker{display:none}
.langbox summary:hover,.langbox summary:focus-visible{color:var(--ink);background-position:0 0,88% 50%}
.langbox summary::after{content:"";width:6px;height:6px;border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;transform:rotate(45deg) translateY(-2px);margin-left:.15rem}
.langbox[open] summary::after{transform:rotate(-135deg) translateY(-1px)}
.langbox ul{position:absolute;right:0;top:calc(100% + .45rem);z-index:80;margin:0;padding:.3rem;
  list-style:none;min-width:11rem;background:rgba(8,8,9,.98);border:1px solid transparent;
  background-image:linear-gradient(rgba(8,8,9,.98),rgba(8,8,9,.98)),var(--chrome-soft);
  background-origin:border-box;background-clip:padding-box,border-box}
.langbox li a{display:flex;align-items:center;gap:.6rem;padding:.6rem .7rem;text-decoration:none;
  font-size:.78rem;letter-spacing:.1em;color:var(--ink-2);text-transform:none}
.langbox li a:hover,.langbox li a:focus-visible{color:var(--ink);background:var(--lift)}
.langbox li a[aria-current]{color:var(--ink)}
.flag{width:20px;height:14px;flex:none;border:1px solid rgba(255,255,255,.25);display:block}

/* ---------- Abschnitte ---------- */
main section{padding-block:clamp(3.5rem,10vw,8rem)}
.eyebrow{font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-3);
  margin-bottom:1.8rem;display:flex;align-items:center;gap:.85rem}
.eyebrow::before{content:"";width:38px;height:1px;background:var(--chrome);flex:none}
.lead{font-size:clamp(1.25rem,3.2vw,2.05rem);line-height:1.35;letter-spacing:-.02em;max-width:26ch;
  font-family:'Bricolage',sans-serif;font-weight:500}
.prose p{max-width:68ch;color:var(--ink-2)}
.prose p+p{margin-top:1rem}
.prose h2{font-size:clamp(1.5rem,3.6vw,2.2rem);margin:2.5rem 0 .9rem}
.prose h3{font-size:1.1rem;margin:1.8rem 0 .5rem}
.prose a{color:var(--ink)}
.prose ul{color:var(--ink-2);padding-left:1.1rem;margin-top:.6rem}
.prose li{margin-bottom:.35rem}

/* ---------- Knoepfe ---------- */
.btn{display:inline-flex;align-items:center;gap:.7rem;padding:1rem 1.7rem;text-decoration:none;
  font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;font-weight:800;
  background:var(--chrome-plate);background-size:220% 100%;background-position:8% 50%;color:#0a0a0b;
  text-shadow:0 1px 0 rgba(255,255,255,.45);
  transition:transform .3s var(--out),background-position .7s var(--out)}
.btn:hover,.btn:focus-visible{transform:translateY(-2px);background-position:92% 50%}
.btn-ghost{display:inline-flex;align-items:center;gap:.7rem;padding:1rem 1.6rem;text-decoration:none;
  font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--ink);
  border:1px solid transparent;
  background:linear-gradient(var(--black),var(--black)) padding-box, var(--chrome-soft) border-box;
  background-size:auto,220% 100%;background-position:0 0,10% 50%;
  transition:background-position .8s var(--out),transform .3s var(--out)}
.btn-ghost:hover,.btn-ghost:focus-visible{background-position:0 0,90% 50%;transform:translateY(-2px)}
.btn-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}

/* ---------- Chrom-Bausteine ---------- */
.chip{display:inline-flex;align-items:center;gap:.45rem;padding:.4rem .8rem;font-size:.66rem;
  letter-spacing:.2em;text-transform:uppercase;font-weight:800;color:#0a0a0b;
  background:var(--chrome-plate);background-size:220% 100%;background-position:12% 50%;
  text-shadow:0 1px 0 rgba(255,255,255,.4);transition:background-position .7s var(--out)}
a:hover > .chip,.chip:hover{background-position:88% 50%}
.chip-ghost{display:inline-flex;align-items:center;padding:.4rem .8rem;font-size:.66rem;
  letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--ink-2);
  border:1px solid transparent;
  background:linear-gradient(var(--black),var(--black)) padding-box,var(--chrome-soft) border-box;
  background-size:auto,220% 100%;background-position:0 0,12% 50%;
  transition:background-position .7s var(--out),color .2s}
.invert .chip-ghost{color:var(--paper-ink-2);
  background:linear-gradient(var(--paper),var(--paper)) padding-box,
             linear-gradient(100deg,rgba(0,0,0,.12),rgba(0,0,0,.45) 26%,rgba(0,0,0,.14) 52%,rgba(0,0,0,.45) 78%,rgba(0,0,0,.12)) border-box}

/* Ruhiger Dauerglanz auf den Hauptknoepfen — Metall steht nie ganz still. */
@keyframes drift-sheen{0%{background-position:8% 50%}50%{background-position:64% 50%}100%{background-position:8% 50%}}
.btn{animation:drift-sheen 9s ease-in-out infinite}
.btn:hover,.btn:focus-visible{animation:none}

/* ---------- Termine ---------- */
.dates{}
.date-row{display:grid;grid-template-columns:11.5rem 1fr auto;gap:clamp(1rem,4vw,3rem);align-items:baseline;
  padding:clamp(1.1rem,2.6vw,1.8rem) 0;border-bottom:1px solid var(--line);text-decoration:none;
  position:relative;transition:opacity .25s,transform .35s var(--out)}
.date-row::before{content:"";position:absolute;left:-14px;top:18%;bottom:18%;width:2px;
  background:var(--chrome);opacity:0;transition:opacity .25s}
.date-row:hover,.date-row:focus-visible{transform:translateX(14px)}
.date-row:hover::before,.date-row:focus-visible::before{opacity:1}
.dates:hover .date-row{opacity:.42}
.dates .date-row:hover,.dates .date-row:focus-visible{opacity:1}
.date-row time{font-size:.8rem;letter-spacing:.16em;color:var(--ink-3);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.date-row h3{font-size:clamp(1.5rem,4.6vw,2.9rem);font-weight:600}
.date-row h3 sup{font-size:.32em;vertical-align:super;letter-spacing:.14em;color:var(--ink-3);
  font-family:'Archivo';font-weight:600}
.date-row p{font-size:.82rem;color:var(--ink-3);margin-top:.3rem}
.date-row .tix{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;
  font-weight:700;color:var(--ink-3);padding:.4rem .8rem;border:1px solid transparent;
  background:linear-gradient(var(--black),var(--black)) padding-box,var(--chrome-soft) border-box;
  background-size:auto,220% 100%;background-position:0 0,10% 50%;
  transition:background-position .7s var(--out),color .2s}
.date-row:hover .tix,.date-row:focus-visible .tix{color:var(--ink);background-position:0 0,90% 50%}
@media(max-width:720px){
  .date-row{grid-template-columns:1fr auto}
  .date-row time{grid-column:1/-1}
}
.past .date-row{pointer-events:none;opacity:.85}
/* Ausverkauft: Ort gedämpft; der matte rote Rahmen ist die einzige Buntfarbe, gewollt als Hinweis */
.date-row[data-soldout]{pointer-events:none}
.date-row[data-soldout] h3{color:#77777d}
.date-row[data-soldout] .tix{color:var(--ink-2);background:none;border-color:#a0413a}
.past .date-row .tix{display:none}
details.archive{margin-top:2.5rem;border-top:1px solid var(--line);padding-top:1.5rem}
details.archive summary{cursor:pointer;padding-block:.7rem;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-3);list-style:none}
details.archive summary::-webkit-details-marker{display:none}
details.archive summary::after{content:" +";}
details.archive[open] summary::after{content:" –";}

/* ---------- Live-Bilder ---------- */
.bleed{margin:0;position:relative}
.bleed img{width:100%;height:auto}
.cap{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.68rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);padding-top:.75rem}
.strip3{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;
  background:var(--chrome-soft);margin-top:clamp(2rem,5vw,3.5rem)}
.strip3 figure{margin:0;background:var(--black)}
.strip3 img{width:100%;height:auto}
.strip3 figcaption{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);
  padding:.7rem .9rem}

/* ---------- Release ---------- */
.disco{border-top:1px solid var(--line);margin-top:1rem}
.disco-row{display:grid;grid-template-columns:5rem 1fr auto;gap:1rem;align-items:baseline;
  padding:1rem 0;border-bottom:1px solid var(--line)}
.disco-row .yr{font-variant-numeric:tabular-nums;color:var(--ink-3);font-size:.85rem;letter-spacing:.1em}
.disco-row h3{font-size:clamp(1.1rem,2.6vw,1.5rem);font-weight:600}
.disco-row p{font-size:.85rem;color:var(--ink-3);margin-top:.2rem;max-width:52ch}
.disco-row .kind{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;
  font-weight:700;color:var(--ink-3);padding:.35rem .7rem;border:1px solid transparent;
  background:linear-gradient(var(--black),var(--black)) padding-box,var(--chrome-soft) border-box}
@media(max-width:640px){.disco-row{grid-template-columns:1fr auto}.disco-row .yr{grid-column:1/-1}}

/* ---------- invertierter Abschnitt ---------- */
.invert{background:var(--paper);color:var(--paper-ink)}
.invert .eyebrow{color:#6a6a70}
.invert .prose p{color:var(--paper-ink-2)}
.invert .btn-ghost{color:var(--paper-ink);
  background:linear-gradient(var(--paper),var(--paper)) padding-box,
             linear-gradient(100deg,rgba(0,0,0,.1),rgba(0,0,0,.45) 24%,rgba(0,0,0,.15) 50%,rgba(0,0,0,.45) 76%,rgba(0,0,0,.1)) border-box}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(1.5rem,5vw,4rem);
  align-items:center}
@media(max-width:880px){.split{grid-template-columns:1fr}}
.split img{width:100%}
.invert .split img{mix-blend-mode:multiply}
.roles{margin-top:2rem;border-top:1px solid var(--paper-line)}
.roles div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.3rem 1rem;padding:.7rem 0;
  border-bottom:1px solid var(--paper-line);font-size:.9rem}
.roles span{color:#6a6a70;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;align-self:center;
  text-align:right}

/* ---------- Neuigkeiten ---------- */
.news{border-top:1px solid transparent;background-image:var(--chrome);background-size:100% 1px;
  background-repeat:no-repeat;background-position:0 0}
.news-item{display:grid;grid-template-columns:9rem 1fr;gap:clamp(1rem,3vw,2.5rem);
  padding:clamp(1.4rem,3vw,2.2rem) 0;border-bottom:1px solid var(--line)}
.news-item time{font-size:.72rem;letter-spacing:.18em;color:var(--ink-3);font-variant-numeric:tabular-nums;
  padding-top:.45rem}
.news-item h3{font-size:clamp(1.25rem,3vw,1.9rem);margin-bottom:.6rem}
.news-item p{color:var(--ink-2);max-width:62ch;overflow-wrap:break-word}
.chr-row{margin-top:1.2rem;display:flex;gap:.7rem;flex-wrap:wrap}
@media(max-width:640px){.news-item{grid-template-columns:1fr;gap:.5rem}.news-item time{padding-top:0}}

/* ---------- Kurzangaben ---------- */
.facts{margin-top:2rem;border-top:1px solid var(--line)}
.facts div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.35rem 1rem;padding:.7rem 0;
  border-bottom:1px solid var(--line);font-size:.9rem;color:var(--ink-2)}
.facts b{overflow-wrap:anywhere}
.facts a{display:inline-block;padding-block:.35rem}
.facts b{color:var(--ink);font-weight:600}

/* ---------- Formular ---------- */
form{max-width:none}
label{display:block;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);
  margin-bottom:.5rem}
input,textarea,select{width:100%;background:var(--near);color:var(--ink);border:1px solid var(--line);
  padding:.85rem 1rem;font:inherit;font-size:1rem;margin-bottom:1.4rem}
input,textarea,select{transition:border-color .25s,box-shadow .35s var(--out)}
input:focus,textarea:focus,select:focus{border-color:#fff;outline:none;
  box-shadow:0 10px 34px -14px rgba(220,228,236,.55)}
textarea{min-height:170px;resize:vertical}
.hp{position:absolute;left:-9999px}
button[type=submit]{border:0;cursor:pointer;font-family:inherit}
.formnote{font-size:.8rem;color:var(--ink-3);margin-top:1rem;max-width:60ch}
.msg{padding:1rem 1.2rem;border:1px solid var(--line);margin-bottom:1.5rem;font-size:.92rem}
.msg.ok{border-color:#5c7f5c}
.msg.err{border-color:#8a5c5c}

/* ---------- Fuss ---------- */
.site-foot{padding-block:3rem;font-size:.8rem;color:var(--ink-3);margin-top:auto}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem}
.foot-grid h2{font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3);
  margin-bottom:.9rem;font-family:'Archivo';font-weight:700;display:flex;align-items:center;gap:.6rem}
.foot-grid h2::before{content:"";width:22px;height:1px;background:var(--chrome);flex:none}
.foot-grid a{display:block;color:var(--ink-2);text-decoration:none;padding-block:.28rem}
.foot-grid a:hover{color:var(--ink)}
.foot-item{display:block;color:var(--ink-2);padding-block:.28rem}
.foot-end{display:flex;flex-wrap:wrap;gap:.75rem 2rem;justify-content:space-between;
  margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--line)}

/* Einblenden: ohne JS ist alles sofort sichtbar, deshalb haengt es an .js */
.js .reveal{opacity:0;transform:translateY(24px);
  transition:opacity .75s var(--out),transform .75s var(--out)}
.js .reveal.in{opacity:1;transform:translateY(0)}
.js .news-item{opacity:0;transform:translateY(14px);
  transition:opacity .6s var(--out) calc(var(--i,0)*55ms),transform .6s var(--out) calc(var(--i,0)*55ms)}
.js .news-item.in{opacity:1;transform:translateY(0)}
.js.shown .reveal,.js.shown .news-item{
  opacity:1;transform:none}
.hero figure{will-change:transform;
  -webkit-mask-image:linear-gradient(#000 86%,transparent);mask-image:linear-gradient(#000 86%,transparent)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto}
  .js .reveal,.js .news-item{opacity:1!important;transform:none!important}
  .hero figure{transform:none!important}
}

.date-row[hidden]{display:none!important}
[hidden]{display:none!important}

/* ---------- Livefotos auf der Terminseite ---------- */
/* Erstes Bild ueber die volle Breite, die vier weiteren zu zweit daneben.
   Die Dateien liegen in voller Aufloesung vor; srcset entscheidet, was geladen wird. */
.shots{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(.5rem,1.2vw,.9rem)}
.shots figure{margin:0;overflow:hidden;aspect-ratio:16/9;background:var(--near)}
.shots figure:first-child{grid-column:1/-1}
.shots img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s var(--out)}
.shots figure:hover img{transform:scale(1.03)}
.shots-credit{margin:.9rem 0 0;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3)}
@media(max-width:640px){.shots{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.shots figure:hover img{transform:none}}

/* Erster Abschnitt unter dem Startbild: der Abstand wirkte dort als Loch,
   weil der Hero selbst schon unten Luft hat. */
.hero:not(.hero--page) + section{padding-top:clamp(2rem,5vw,3.5rem)}

/* Hochformat des Startbilds gilt bis 820px; der niedrigere Startbereich
   muss denselben Bereich abdecken, sonst passt die Bildaufteilung dort nicht. */
@media(max-width:820px){.hero:not(.hero--page){height:min(72svh,640px);min-height:460px}}

/* ---------- Bewegung und Licht (2026-11) ---------- */
/* Grundsatz: Licht wandert ueber Metall. Alles, was hier steht, ist ohne Skript sichtbar;
   motion.js legt nur obendrauf. Reduzierte Bewegung schaltet der Block weiter oben ab. */
@property --beam{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes beam{to{--beam:360deg}}
@keyframes lights-on{from{filter:contrast(1.06) brightness(0)}}
@keyframes wipe-in{from{clip-path:inset(-15% 100% -15% 0)}to{clip-path:inset(-15% 0 -15% 0)}}
@keyframes rise-in{from{opacity:0;transform:translateY(16px)}}
@keyframes rule-in{from{transform:scaleX(0)}}
@keyframes nav-in{from{opacity:0;transform:translateX(-14px)}}

html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto}
.lenis [data-lenis-prevent]{overscroll-behavior:contain}

/* Reflexe wie auf gebuerstetem Metall hinter den schwarzen Flaechen (Desktop, motion.js). */
.sheen{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}

.nav-cta{color:var(--ink)!important}
@media(min-width:901px){
  .nav a.nav-cta{padding:.45rem .85rem;border:1px solid transparent;
    background:linear-gradient(#050506,#050506) padding-box,var(--chrome-soft) border-box;
    background-size:auto,220% 100%;background-position:0 0,10% 50%;
    transition:background-position .8s var(--out),color .2s}
  .nav a.nav-cta:hover,.nav a.nav-cta:focus-visible{background-position:0 0,90% 50%}
  .nav a.nav-cta::before{display:none}
}

/* Startbild: Licht geht an, das Zeichen wird von links aufgedeckt. */
.hero-logo img{view-transition-name:chrom-logo;animation:wipe-in 1.2s .2s var(--out) both}
.bar .logo img{view-transition-name:chrom-logo}
.hero-sub{animation:rise-in .8s .7s var(--out) both}
.hero-next{animation:rise-in .8s .95s var(--out) both}
.hero-mark::before,.hero-mark::after{animation:rule-in 1.1s .35s var(--out) both}
.hero-logo .spot{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:var(--lo,0);
  transition:opacity .4s;
  background:radial-gradient(circle 95px at var(--lx,50%) var(--ly,50%),#fff,rgba(255,255,255,0) 72%);
  -webkit-mask:url(logo-mask.png) 0 0/100% 100% no-repeat;mask:url(logo-mask.png) 0 0/100% 100% no-repeat}
.hero-days{padding:.25rem .65rem;color:#0a0a0b;font-weight:800;background:var(--chrome-plate);
  background-size:220% 100%;animation:drift-sheen 9s ease-in-out infinite;
  text-shadow:0 1px 0 rgba(255,255,255,.4)}
.hero-days:empty{display:none}

/* Unterseiten: Titel faehrt mit dem Licht ein. */
.hero--page .chrome-rule{transform-origin:left;animation:rule-in 1s var(--out) both}
.hero--page h1{animation:wipe-in 1s .08s var(--out) both}
.hero--page h1.chrome-text{animation:wipe-in 1s .08s var(--out) both,drift-sheen 14s 1s ease-in-out infinite}
.hero--page .lead{animation:rise-in .7s .35s var(--out) both}

/* Abschnittstitel: das Licht haengt an der Scrollposition. */
.sec-title{font-size:clamp(2.6rem,9vw,6rem);margin-bottom:1rem;animation:none;width:fit-content;
  padding-bottom:.06em}

/* Lichtlinie zwischen Terminen und Neuigkeiten: Metall ohne Text. */
.lightline{position:relative;height:clamp(3rem,8vw,6rem);overflow:hidden}
.lightline::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--chrome);
  transform:scaleX(var(--ll,1))}
.lightline::after{content:"";position:absolute;left:var(--lp,50%);top:50%;width:min(70vw,720px);height:100%;
  transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(226,232,240,.3),rgba(226,232,240,.07) 55%,rgba(226,232,240,0))}

/* Leuchtrand, der der Maus folgt (nach Magic Card). Stoert weder Text noch Knoepfe:
   pointer-events sind aus, im Inneren liegt nur ein sehr schwacher Schein. */
[data-glow]{position:relative}
[data-glow]::before,[data-glow]::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  transition:opacity .35s}
[data-glow]::before{z-index:3;padding:1px;
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,0%),#fff,rgba(255,255,255,0) 72%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
[data-glow]::after{z-index:1;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,0%),rgba(220,228,236,.09),rgba(220,228,236,0) 70%)}
[data-glow]:hover::before,[data-glow]:hover::after{opacity:1}

/* Kontakt: das Formular steht vorn, die Adressen daneben. */
.contact{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);
  align-items:start;max-width:1180px}
@media(max-width:880px){.contact{grid-template-columns:1fr}}
.panel{padding:clamp(1.25rem,3.4vw,2.6rem);border:1px solid transparent;
  background:linear-gradient(var(--near),var(--near)) padding-box,
    conic-gradient(from var(--beam),transparent 0 76%,#fff 87%,transparent 95%) border-box,
    linear-gradient(var(--line),var(--line)) border-box;
  animation:beam 8s linear infinite paused}
.panel.live{animation-play-state:running}
.panel form>*{position:relative;z-index:2}
.panel .hp{position:absolute}
.panel .btn:disabled{opacity:.6;cursor:progress;transform:none}
.btn:active,.btn-ghost:active{transform:translateY(0) scale(.985)}
.form-status{margin-top:1.2rem;padding:.9rem 1rem;border:1px solid var(--line);font-size:.95rem;outline:none}
.form-status.ok{border-color:#fff;animation:rise-in .5s var(--out) both}
.form-status.err{border-color:#d98b8b;color:#f0c4c4}
.contact-direct .eyebrow{font-family:'Archivo',sans-serif;font-weight:400;line-height:inherit;margin-bottom:0}
.contact-direct .facts{margin-top:1rem}
.contact-direct .facts a{text-underline-offset:.2em}

/* Abschluss der Startseite: Lichtkegel folgt der Maus, waechst beim Scrollen. */
.cta{position:relative;overflow:hidden;isolation:isolate;text-align:center;
  padding-block:clamp(5rem,14vw,11rem)!important}
.cta::after{content:"";position:absolute;z-index:-1;left:var(--cx,50%);top:var(--cy,55%);
  width:min(120vw,1100px);aspect-ratio:1;border-radius:50%;
  transform:translate(-50%,-50%) scale(var(--cs,1));
  background:radial-gradient(closest-side,rgba(214,222,232,.2),rgba(214,222,232,.06) 48%,rgba(214,222,232,0))}
.cta h2{font-size:clamp(3rem,13vw,7.5rem);margin-bottom:1.2rem;padding-bottom:.08em}
.cta p{color:var(--ink-2);max-width:48ch;margin-inline:auto}
.cta .btn-row{justify-content:center}

/* Fotos: Link auf das Bild, Grossansicht als dialog. */
.shots figure a{display:block;width:100%;height:100%;cursor:zoom-in}
.lightbox{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:clamp(.5rem,2vw,1.5rem);border:0;
  color:#fff;background:rgba(0,0,0,.95);opacity:1;transition:opacity .3s,display .3s allow-discrete,overlay .3s allow-discrete}
.lightbox[open]{display:grid;place-items:center}
.lightbox img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  transition:transform .5s var(--out)}
.lightbox button{position:absolute;display:grid;place-items:center;width:48px;height:48px;padding:0;cursor:pointer;
  color:#fff;background:rgba(0,0,0,.6);border:1px solid var(--line);transition:border-color .2s}
.lightbox button:hover{border-color:#fff}
.lightbox .lb-close{top:.75rem;right:.75rem}
.lightbox .lb-prev{left:.75rem;top:50%;margin-top:-24px}
.lightbox .lb-next{right:.75rem;top:50%;margin-top:-24px}
.lightbox svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6}
@starting-style{.lightbox[open]{opacity:0}.lightbox[open] img{transform:scale(.96)}}

/* Seitenwechsel: das Licht laeuft einmal quer ueber die neue Seite, das Logo wandert mit. */
@media(prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:vt-out .2s ease-in both}
  ::view-transition-new(root){animation:vt-in .6s var(--out) both;
    -webkit-mask:linear-gradient(100deg,#000 42%,rgba(0,0,0,.4) 50%,transparent 58%) 0 0/320% 100% no-repeat;
    mask:linear-gradient(100deg,#000 42%,rgba(0,0,0,.4) 50%,transparent 58%) 0 0/320% 100% no-repeat}
  ::view-transition-group(chrom-logo){animation-duration:.55s;animation-timing-function:var(--out)}
}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{-webkit-mask-position:100% 0;mask-position:100% 0}to{-webkit-mask-position:0 0;mask-position:0 0}}

/* Daumenfreundliche Fusslinks am Telefon */
@media(hover:none){.foot-grid a{padding-block:.6rem}.formnote a{display:inline-block;padding-block:.75rem}}

/* Terminliste: Sprungziel von "Alle Termine", Luft unter der festen Kopfzeile */
#termine{scroll-margin-top:6.5rem}

/* Albumkreis. Ohne JS oder bei reduzierter Bewegung: flache Wischleiste. */
.ring{position:relative;overflow:clip;margin-top:1.5rem}
.ring-list{display:flex;gap:1rem;margin:0;padding:1rem 1.25rem;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory}
.ring-card{flex:0 0 min(62vw,280px);scroll-snap-align:center}
.ring-card figure{margin:0}
.ring-card img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;background:#111;border:1px solid rgba(255,255,255,.22);
  box-shadow:0 30px 70px -28px rgba(0,0,0,.95)}
.ring-card figcaption{margin-top:.9rem;text-align:center}
.ring-card strong{display:block;font-family:var(--display,inherit);font-size:clamp(1.05rem,2vw,1.4rem);font-weight:600;color:var(--ink)}
.ring-card span{display:block;margin-top:.2rem;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.ring-cta{justify-content:center;margin-top:1.5rem}
.ring.on{--w:clamp(190px,25vw,340px);--h:calc(var(--w) * .9);--d:calc(var(--w) * .085);
  height:calc(var(--h) * 1.34 + 3.5rem);perspective:1300px;perspective-origin:50% 40%;
  cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.ring.on.drag{cursor:grabbing}
.ring.on .ring-list{position:absolute;inset:0;display:block;padding:0;overflow:visible;transform-style:preserve-3d;will-change:transform}
.ring.on .ring-card{position:absolute;left:50%;top:2.25rem;width:var(--w);margin-left:calc(var(--w) / -2);transform-style:preserve-3d}
.ring.on figure{transform-style:preserve-3d}
.ring.on figcaption{display:none}
/* CD-Hülle: sechs Flächen, Vorderseite mit Scharnier, Cover und Glanz unter Plastik */
.case{position:relative;width:var(--w);height:var(--h);transform-style:preserve-3d;will-change:transform}
.face{position:absolute;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#0c0d0f}
.f-front{inset:0;transform:translateZ(calc(var(--d) / 2));box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.f-back{inset:0;transform:rotateY(180deg) translateZ(calc(var(--d) / 2));background:linear-gradient(120deg,#17181b,#07080a)}
.f-spine,.f-right{top:0;width:var(--d);height:100%}
.f-spine{left:calc(var(--d) / -2);transform:rotateY(-90deg);background:linear-gradient(90deg,#3b3e44,#17181b 40%,#26282d);display:grid;place-items:center}
.f-right{left:calc(var(--w) - var(--d) / 2);transform:rotateY(90deg);background:repeating-linear-gradient(0deg,#2a2c31 0 2px,#101114 2px 5px)}
.f-top,.f-bottom{left:0;width:100%;height:var(--d)}
.f-top{top:calc(var(--d) / -2);transform:rotateX(90deg);background:linear-gradient(90deg,#4a4e55,#c6ccd4 40%,#3a3d43)}
.f-bottom{top:calc(var(--h) - var(--d) / 2);transform:rotateX(-90deg);background:linear-gradient(90deg,#17181b,#3a3d43,#17181b)}
.spine-text{writing-mode:vertical-rl;white-space:nowrap;font-family:'Archivo',sans-serif;font-size:calc(var(--d) * .36);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#d7dbe0}
.hinge{position:absolute;left:0;top:0;bottom:0;width:10%;background:
  linear-gradient(90deg,rgba(255,255,255,.34),rgba(255,255,255,.02) 22%,rgba(255,255,255,.14) 78%,rgba(0,0,0,.6)),
  repeating-linear-gradient(0deg,#1b1c20 0 3px,#2d2f35 3px 5px)}
.ring.on .f-front img{position:absolute;left:10%;top:0;width:90%;height:100%;object-fit:cover;border:0;box-shadow:none;background:#111;-webkit-user-drag:none;pointer-events:none}
.shade{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none}
.case .gloss{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.glass{position:absolute;top:-10%;bottom:-10%;left:-100%;width:300%;will-change:transform;
  background:linear-gradient(112deg,transparent 30%,rgba(255,255,255,.05) 40%,rgba(255,255,255,.3) 47%,rgba(255,255,255,.07) 50%,rgba(255,255,255,.17) 55%,transparent 66%)}
.ring-card.front .f-front{box-shadow:inset 0 0 0 1px rgba(255,255,255,.75),0 0 60px rgba(255,255,255,.14)}
/* Spiegelung auf dem Boden */
.reflect{position:absolute;left:0;top:calc(100% + 3px);width:100%;height:32%;overflow:hidden;pointer-events:none;
  transform:translateZ(calc(var(--d) / 2));opacity:0;
  -webkit-mask-image:linear-gradient(#000,transparent);mask-image:linear-gradient(#000,transparent)}
.ring.on .reflect img{position:absolute;left:10%;top:0;width:90%;height:312.5%;object-fit:cover;border:0;box-shadow:none;transform:scaleY(-1);transform-origin:50% 16%;pointer-events:none}
/* CD: steckt im Körper und fährt seitlich heraus, sobald der Kreis steht */
.disc{position:absolute;left:14%;top:6%;width:82%;aspect-ratio:1;visibility:hidden;transition:transform .35s cubic-bezier(.23,1,.32,1),visibility 0s .35s}
.ring-card.out .disc{visibility:visible;transform:translate3d(52%,0,0);transition:transform .95s cubic-bezier(.32,.72,0,1) .08s,visibility 0s}
.disc-face{width:100%;height:100%;border-radius:50%;background:
  url(logo.png) center 24%/30% auto no-repeat,
  radial-gradient(circle,#000 0 8%,#d9dde2 8.4% 10%,rgba(40,42,46,.85) 10.4% 17%,rgba(255,255,255,.28) 17.3% 17.8%,transparent 18%),
  conic-gradient(from 20deg,#6d727a,#e9edf1,#8d939b,#c7ccd3,#f7f9fb,#70757d,#b3b9c1,#eef1f5,#6d727a);
  box-shadow:0 0 0 1px rgba(255,255,255,.35),0 18px 40px rgba(0,0,0,.7)}
.ring-card.out .disc-face{animation:disc-spin 7s linear infinite}
@keyframes disc-spin{to{transform:rotate(360deg)}}
/* Schallplatte und Single: dünne Cover ohne CD-Hülle, quadratisch und mittig auf dem Platz der Hülle */
.ring-card:not([data-format="cd"]) .case{--w:var(--h);margin-left:calc(var(--h) * .0556)}
.ring-card[data-format="vinyl"] .case{--d:calc(var(--h) * .03)}
.ring-card[data-format="digital"] .case{--d:calc(var(--h) * .012)}
.ring-card:not([data-format="cd"]) .hinge{display:none}
.ring.on .ring-card:not([data-format="cd"]) .f-front img,
.ring.on .ring-card:not([data-format="cd"]) .reflect img{left:0;width:100%}
.ring-card:not([data-format="cd"]) .f-right{background:linear-gradient(#2a2c31,#101114)}
/* Schallplatte, im Original durchsichtig: Rillen und Etikett drehen sich, das Licht auf der Platte bleibt stehen */
.disc.vinyl{left:6%;top:6%;width:88%}
.ring-card.out .disc.vinyl{transform:translate3d(54%,0,0)}
.vinyl .disc-face{position:relative;background:
  radial-gradient(circle,transparent 0 33%,rgba(255,255,255,.3) 33.4% 33.8%,transparent 34.2% 57%,rgba(255,255,255,.2) 57.3% 58%,transparent 58.4% 80%,rgba(255,255,255,.2) 80.3% 81%,transparent 81.4% 97%,rgba(255,255,255,.3) 98%),
  repeating-radial-gradient(circle,rgba(255,255,255,.11) 0 1.5px,rgba(255,255,255,.02) 1.5px 3px),
  rgba(226,233,240,.2);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.65),inset 0 0 26px rgba(255,255,255,.2),0 18px 40px rgba(0,0,0,.45)}
.vinyl-label{position:absolute;left:33%;top:33%;width:34%;height:34%;border-radius:50%;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.8)}
.ring.on .vinyl-label img{display:block;width:100%;height:100%;object-fit:cover;border:0;box-shadow:none;pointer-events:none}
.vinyl-label::after{content:"";position:absolute;left:44%;top:44%;width:12%;height:12%;border-radius:50%;background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.5)}
.vinyl-sheen{position:absolute;inset:0;border-radius:50%;pointer-events:none;background:conic-gradient(from 28deg,transparent 0 6%,rgba(255,255,255,.26) 11%,transparent 17% 50%,rgba(255,255,255,.2) 61%,transparent 67%);
  -webkit-mask-image:radial-gradient(circle,transparent 34%,#000 34.5%);mask-image:radial-gradient(circle,transparent 34%,#000 34.5%)}
.ring-card.out .vinyl .disc-face{animation-duration:1.8s}
/* Reine Online-Single: Handy mit laufendem Player fährt hinter dem Cover heraus */
.disc.digital{left:auto;right:3%;top:3%;width:calc(var(--h) * .47);height:calc(var(--h) * .94);aspect-ratio:auto;padding:calc(var(--h) * .012);
  font-size:calc(var(--h) * .036);border-radius:1.5em;background:linear-gradient(120deg,#6d727a,#eef1f5 30%,#70757d 58%,#c7ccd3);
  box-shadow:0 20px 44px rgba(0,0,0,.8),0 0 34px rgba(255,255,255,.14);transform:translateZ(calc(var(--d) * -2))}
.ring-card.out .disc.digital{transform:translate3d(calc(var(--h) * .43),0,calc(var(--d) * -2)) rotate(4deg)}
.ph-screen{display:flex;flex-direction:column;align-items:center;gap:.65em;height:100%;padding:1.5em .9em 1em;border-radius:1.4em;background:#050506;overflow:hidden;text-align:center}
.ring.on .ph-screen img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border:0;box-shadow:0 .5em 1.2em rgba(0,0,0,.9);pointer-events:none}
.ph-screen strong{font-family:'Bricolage',sans-serif;font-size:1em;line-height:1.15;color:#fff;font-weight:700}
.ph-eq{display:flex;align-items:center;justify-content:center;gap:.22em;height:2.1em;width:100%}
.ph-eq i{flex:1;height:100%;max-width:.42em;border-radius:.2em;background:linear-gradient(#f4f7fa,#8b9199);transform:scaleY(.2)}
.ring-card.out .ph-eq i{animation:eq .9s ease-in-out infinite alternate}
.ph-eq i:nth-child(3n){animation-delay:-.25s!important;animation-duration:.7s!important}
.ph-eq i:nth-child(3n+1){animation-delay:-.55s!important;animation-duration:1.1s!important}
.ph-eq i:nth-child(2n){animation-delay:-.8s!important}
@keyframes eq{from{transform:scaleY(.18)}to{transform:scaleY(1)}}
.ph-bar{width:100%;height:.16em;background:rgba(255,255,255,.2);overflow:hidden}
.ph-bar b{display:block;height:100%;background:#fff;transform-origin:0 50%;transform:scaleX(.08)}
.ring-card.out .ph-bar b{animation:ph-progress 26s linear infinite}
@keyframes ph-progress{from{transform:scaleX(.08)}to{transform:scaleX(1)}}
.ph-play{position:relative;display:grid;place-items:center;width:2.8em;height:2.8em;margin-top:auto;border-radius:50%;background:var(--chrome-plate);color:#050506}
.ph-play svg{width:58%;height:58%;fill:currentColor}
.ph-play::before,.ph-play::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid rgba(255,255,255,.7);opacity:0}
.ring-card.out .ph-play::before,.ring-card.out .ph-play::after{animation:ph-wave 2.2s cubic-bezier(.23,1,.32,1) infinite}
.ring-card.out .ph-play::after{animation-delay:.7s}
@keyframes ph-wave{from{transform:scale(1);opacity:.8}to{transform:scale(2.2);opacity:0}}
.ring-cap{text-align:center;margin-top:.25rem;min-height:4.8rem;padding-inline:var(--pad)}
.ring-cap strong{display:block;overflow:hidden;font-family:'Bricolage',sans-serif;font-size:clamp(1.7rem,4.4vw,3.2rem);font-weight:700;line-height:1.1;letter-spacing:-.02em;color:var(--ink)}
.ring-cap strong i{display:inline-block;font-style:normal;will-change:transform}
.ring-cap span{display:block;margin-top:.4rem;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.ring-aura{position:absolute;left:50%;top:0;width:min(100vw,1100px);height:100%;margin-left:calc(min(100vw,1100px) / -2);object-fit:cover;
  filter:blur(60px) saturate(1.25);opacity:0;transition:opacity .9s cubic-bezier(.23,1,.32,1);pointer-events:none;
  -webkit-mask-image:radial-gradient(closest-side,#000 35%,transparent);mask-image:radial-gradient(closest-side,#000 35%,transparent)}
.ring-aura.show{opacity:.34}
.ring-nav{position:absolute;top:calc(2.25rem + var(--h) / 2);z-index:2;width:48px;height:48px;margin-top:-24px;display:grid;place-items:center;
  color:var(--ink);background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.28);cursor:pointer;transition:border-color .2s ease,background-color .2s ease}
.ring-nav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6}
.ring-nav.prev{left:clamp(.5rem,4vw,4rem)}
.ring-nav.next{right:clamp(.5rem,4vw,4rem)}
.ring-nav:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media(hover:hover) and (pointer:fine){.ring-nav:hover{background:rgba(0,0,0,.85);border-color:#fff}}
@media(hover:none){.ring-nav{display:none}}