/* ============================================================
   ALCHEMYSTA MUSIC — Design System
   Abgeleitet aus dem YouTube-Kanal: Mitternachtsblau + Messing,
   Cover-Fotografie in warmem Bernstein gegen tiefes Petrol.
   ============================================================ */

@font-face{
  font-family:'Playfair';
  src:url('/assets/fonts/playfair.woff2') format('woff2-variations');
  font-weight:400 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'InterVar';
  src:url('/assets/fonts/inter.woff2') format('woff2-variations');
  font-weight:100 900; font-style:normal; font-display:swap;
}

:root{
  /* Grundflächen — aus dem Kanalbanner gemessen */
  --ink:#080A0D;
  --bg:#0B0F14;
  --bg-2:#101720;
  --surface:#141C26;
  --line:rgba(233,224,205,.11);
  --line-strong:rgba(233,224,205,.22);

  /* Messing — der Kanal ist gebürstetes Gold, kein flaches Gelb */
  --gold:#C9A227;
  --gold-lit:#E7C56A;
  --gold-deep:#8C6B1F;
  --brass:linear-gradient(135deg,#8C6B1F 0%,#E7C56A 38%,#F5E3A8 50%,#C9A227 62%,#7A5C18 100%);

  /* Petrol — der zweite Kanalton, aus dem Logo-Glow */
  --teal:#3E8FA3;
  --teal-lit:#6FD0E0;

  /* Schrift */
  --fg:#F3EFE6;
  --fg-dim:#A9AFB7;
  --fg-mute:#8A939E;

  /* Pro Release überschreibbar */
  --accent:var(--gold-lit);

  --maxw:1280px;
  --gut:clamp(1.25rem,4vw,3rem);
  --radius:2px;
  --player-h:0px;

  --ease:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:6.5rem}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:'InterVar',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:clamp(.95rem,.9rem + .2vw,1.0625rem);
  line-height:1.65;
  font-feature-settings:'ss01','cv05';
  overflow-x:hidden;
  padding-bottom:var(--player-h);
}

/* Feinkorn — 0 Requests, sofort „analog" */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:200;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img{max-width:100%; height:auto; display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold-lit); outline-offset:3px; border-radius:2px}

/* ---------- Typografie ---------- */
.display{
  font-family:'Playfair',Georgia,serif;
  font-weight:800;
  line-height:.94;
  letter-spacing:-.015em;
  text-wrap:balance;
  margin:0;
}
h1.display{font-size:clamp(2.6rem,9vw,6.5rem)}
h2.display{font-size:clamp(2rem,5.2vw,3.75rem)}
h3.display{font-size:clamp(1.4rem,2.6vw,2rem)}

.eyebrow{
  font-size:.6875rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent); margin:0 0 .9rem;
}
.meta{
  font-size:.6875rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--fg-mute);
}
.lede{font-size:clamp(1.05rem,1.4vw,1.3rem); line-height:1.6; color:var(--fg-dim); max-width:56ch; text-wrap:pretty}
p{max-width:68ch; text-wrap:pretty}

.rule{height:1px; background:var(--line); border:0; margin:0}
.hairline{width:3.5rem; height:2px; background:var(--brass); border:0; margin:1.25rem 0}

/* ---------- Layout ---------- */
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut)}
.section{padding-block:clamp(3.5rem,9vw,7.5rem)}
.section--tight{padding-block:clamp(2.5rem,5vw,4rem)}

/* ---------- Kopf ---------- */
.site-head{
  position:sticky; top:0; z-index:120;
  backdrop-filter:blur(14px) saturate(140%);
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  border-bottom:1px solid var(--line);
}
.site-head__in{
  max-width:var(--maxw); margin-inline:auto; padding:.7rem var(--gut);
  display:flex; align-items:center; gap:clamp(1rem,3vw,2.5rem);
}
.brand{display:flex; align-items:center; gap:.7rem; text-decoration:none; flex:0 0 auto}
.brand img{width:38px; height:38px}
.brand b{
  font-family:'Playfair',serif; font-weight:700; font-size:1.02rem;
  letter-spacing:.06em; text-transform:uppercase;
  background:var(--brass); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.nav{display:flex; gap:clamp(.9rem,2vw,1.75rem); margin-left:auto; align-items:center}
.nav a{
  text-decoration:none; font-size:.7rem; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase; color:var(--fg-dim);
  padding:.4rem 0; position:relative; white-space:nowrap;
}
.nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--gold-lit); transition:right .35s var(--ease);
}
.nav a:hover::after,.nav a[aria-current]::after{right:0}
.nav a[aria-current]{color:var(--fg)}
@media (max-width:720px){
  .nav{gap:.9rem; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none}
  .nav::-webkit-scrollbar{display:none}
  .brand b{display:none}
}

/* ---------- Hero ---------- */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line)}
.hero__bg{position:absolute; inset:0; z-index:0}
.hero__bg img{width:100%; height:100%; object-fit:cover; object-position:var(--bgpos,50% 50%); opacity:var(--bgop,.42); transform:scaleX(var(--bgflip,1))}
@media (prefers-reduced-motion:no-preference){
  .hero__bg img{animation:kenburns 26s ease-out both}
}
@keyframes kenburns{
  from{transform:scaleX(var(--bgflip,1)) scale(1.12)}
  to{transform:scaleX(var(--bgflip,1)) scale(1)}
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(120% 90% at 20% 10%, transparent 0%, var(--bg) 78%),
    linear-gradient(180deg, color-mix(in srgb,var(--ink) 55%, transparent) 0%, transparent 35%, var(--bg) 100%);
}
.hero__in{position:relative; z-index:2; padding-block:clamp(5rem,17vw,11rem)}
.hero h1{margin-bottom:1.25rem}
.hero h1 em{font-style:normal; background:var(--brass); -webkit-background-clip:text; background-clip:text; color:transparent}

.btnrow{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem}
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  padding:.85rem 1.5rem; border-radius:999px; text-decoration:none;
  border:1px solid var(--line-strong); color:var(--fg); background:transparent;
  cursor:pointer; transition:background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
  font-family:inherit;
}
.btn:hover{background:rgba(233,224,205,.07); border-color:var(--gold)}
.btn--gold{background:var(--brass); color:#12100A; border-color:transparent; text-shadow:0 1px 0 rgba(255,255,255,.25)}
.btn--gold:hover{filter:brightness(1.1); background:var(--brass)}
.btn svg{width:1em; height:1em; flex:0 0 auto}

/* ---------- Release-Gitter ---------- */
.grid{display:grid; gap:clamp(1rem,2.5vw,2rem)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr))}
.grid--4{grid-template-columns:repeat(auto-fill,minmax(min(100%,16rem),1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}

.card{
  position:relative; display:block; text-decoration:none;
  background:var(--surface); border:1px solid var(--line);
  overflow:hidden; border-radius:var(--radius);
  transition:border-color .3s var(--ease), transform .4s var(--ease);
}
.card:hover{border-color:color-mix(in srgb,var(--accent) 55%, transparent); transform:translateY(-3px)}
.card__art{position:relative; aspect-ratio:1; overflow:hidden; background:var(--bg-2)}
.card__art img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease), filter .4s var(--ease)}
.card:hover .card__art img{transform:scale(1.045)}
.card__body{padding:1rem 1.1rem 1.2rem}
.card__title{font-family:'Playfair',serif; font-weight:700; font-size:1.15rem; line-height:1.2; margin:.15rem 0 .4rem}
.card__no{
  position:absolute; top:.6rem; left:.7rem; z-index:2;
  font-size:.62rem; font-weight:700; letter-spacing:.14em;
  padding:.25rem .5rem; border-radius:2px;
  background:rgba(8,10,13,.72); backdrop-filter:blur(6px);
  color:var(--accent); border:1px solid var(--line);
}
.card__ai{
  position:absolute; top:.6rem; right:.7rem; z-index:2;
  font-size:.55rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  padding:.25rem .45rem; border-radius:2px;
  background:rgba(8,10,13,.72); backdrop-filter:blur(6px);
  color:var(--fg-dim); border:1px solid var(--line);
}

/* Play-Knopf auf dem Cover */
.playdot{
  position:absolute; inset:auto .7rem .7rem auto; z-index:3;
  width:2.9rem; height:2.9rem; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  background:var(--brass); color:#12100A; border:0;
  box-shadow:0 6px 24px rgba(0,0,0,.5);
  opacity:0; transform:translateY(6px) scale(.9);
  transition:opacity .3s var(--ease), transform .3s var(--ease), filter .2s;
}
.card:hover .playdot,.playdot:focus-visible{opacity:1; transform:none}
.playdot:hover{filter:brightness(1.12)}
.playdot svg{width:1.05rem; height:1.05rem; margin-left:2px}
@media (hover:none){ .playdot{opacity:1; transform:none} }
.card.is-playing .playdot{opacity:1; transform:none}
.card.is-playing{border-color:var(--accent)}

/* ---------- Tracklist ---------- */
.tracks{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.track{
  display:grid; grid-template-columns:2.6rem 1fr auto;
  align-items:center; gap:1rem;
  padding:.85rem .5rem; border-bottom:1px solid var(--line);
  transition:background .25s var(--ease);
}
.track:hover{background:rgba(233,224,205,.035)}
.track.is-playing{background:color-mix(in srgb,var(--accent) 8%, transparent)}
.track.is-playing .track__no{color:var(--accent)}
.track__no{font-variant-numeric:tabular-nums; font-size:.8rem; color:#949CA6; text-align:right}
.track__t{min-width:0}
.track__t a{text-decoration:none; font-weight:600; font-size:1.02rem; letter-spacing:-.005em}
.track__t a:hover{color:var(--accent)}
.track__t .meta{display:block; margin-top:.15rem}
.track__act{display:flex; align-items:center; gap:.5rem}
.tplay{
  width:2.25rem; height:2.25rem; border-radius:50%; display:grid; place-items:center;
  background:transparent; border:1px solid var(--line-strong); color:var(--fg);
  cursor:pointer; transition:background .2s,border-color .2s,color .2s;
}
.tplay:hover{background:var(--accent); border-color:var(--accent); color:#12100A}
.tplay svg{width:.85rem; height:.85rem; margin-left:1px}
.track__dur{font-variant-numeric:tabular-nums; font-size:.8rem; color:#949CA6; min-width:3.2rem; text-align:right}
@media (max-width:560px){ .track__dur{display:none} }

/* ---------- Künstler ---------- */
.artist-card{
  position:relative; display:grid; align-content:end; min-height:26rem;
  padding:clamp(1.5rem,4vw,2.5rem); overflow:hidden;
  border:1px solid var(--line); text-decoration:none; border-radius:var(--radius);
  isolation:isolate;
}
.artist-card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform .8s var(--ease)}
.artist-card::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(8,10,13,.15) 0%,rgba(8,10,13,.55) 45%,rgba(8,10,13,.93) 100%);
}
.artist-card:hover img{transform:scale(1.05)}
.artist-card h3{margin:.35rem 0 .5rem}

/* ---------- Lyrics ---------- */
.lyrics{
  font-family:'Playfair',serif; font-size:clamp(1.05rem,1.5vw,1.3rem); line-height:1.75;
  white-space:pre-wrap; color:var(--fg); max-width:44ch;
}
.lyrics .tag{
  display:block; font-family:'InterVar',sans-serif; font-size:.65rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--accent);
  margin:1.9rem 0 .5rem;
}
.lyrics .tag:first-child{margin-top:0}

/* ---------- Datenblock ---------- */
.datasheet{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.datasheet li{display:flex; justify-content:space-between; gap:1.5rem; padding:.6rem 0; border-bottom:1px solid var(--line); font-size:.82rem}
.datasheet dt,.datasheet b{color:#949CA6; font-weight:500; letter-spacing:.1em; text-transform:uppercase; font-size:.65rem}
.datasheet span{font-variant-numeric:tabular-nums; text-align:right}

/* ---------- Notiz / KI-Hinweis ---------- */
.note{
  border-left:2px solid var(--gold-deep); padding:.85rem 0 .85rem 1.1rem;
  font-size:.8rem; line-height:1.6; color:var(--fg-dim); max-width:60ch;
}
.note b{color:var(--fg); font-weight:600}

/* ---------- YouTube-Fassade (Zwei-Klick) ---------- */
.yt{position:relative; margin:0; border:1px solid var(--line); background:var(--bg-2); border-radius:var(--radius); overflow:hidden}
.yt__frame{position:relative; aspect-ratio:16/9; background:var(--ink)}
.yt__frame img{width:100%; height:100%; object-fit:cover; opacity:.75}
.yt__frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.yt__btn{
  position:absolute; inset:0; display:grid; place-items:center;
  background:transparent; border:0; cursor:pointer; color:var(--fg);
}
.yt__btn span{
  width:4.5rem; height:4.5rem; border-radius:50%; display:grid; place-items:center;
  background:var(--brass); color:#12100A; box-shadow:0 10px 40px rgba(0,0,0,.6);
  transition:transform .3s var(--ease);
}
.yt__btn:hover span{transform:scale(1.08)}
.yt__btn svg{width:1.4rem; height:1.4rem; margin-left:3px}
.yt figcaption{padding:.75rem .9rem; font-size:.72rem; line-height:1.55; color:#9AA2AC}
.yt figcaption a{color:var(--fg-dim)}

/* ---------- Mini-Player (überlebt Seitenwechsel) ---------- */
.player{
  position:fixed; left:0; right:0; bottom:0; z-index:150;
  background:color-mix(in srgb,var(--ink) 92%, transparent);
  backdrop-filter:blur(18px) saturate(150%);
  border-top:1px solid var(--line-strong);
  transform:translateY(110%);
  transition:transform .45s var(--ease);
}
.player[data-open="true"]{transform:none}
.player__in{
  max-width:var(--maxw); margin-inline:auto; padding:.6rem var(--gut);
  display:flex; align-items:center; gap:1rem;
}
.player__video{
  flex:0 0 auto; width:clamp(7rem,16vw,10.5rem); aspect-ratio:16/9;
  background:#000; border:1px solid var(--line); border-radius:2px; overflow:hidden;
}
.player__video iframe{width:100%; height:100%; border:0; display:block}
.player__txt{min-width:0; flex:1 1 auto}
.player__txt strong{display:block; font-size:.92rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.35}
.player__txt strong a{text-decoration:none}
.player__txt strong a:hover{color:var(--accent)}
.player__txt .meta{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.player__ctl{display:flex; align-items:center; gap:.35rem; flex:0 0 auto}
.pbtn{
  width:2.4rem; height:2.4rem; border-radius:50%; display:grid; place-items:center;
  background:transparent; border:1px solid var(--line); color:var(--fg-dim); cursor:pointer;
  transition:color .2s,border-color .2s,background .2s;
}
.pbtn:hover{color:var(--fg); border-color:var(--line-strong); background:rgba(233,224,205,.06)}
.pbtn svg{width:.95rem; height:.95rem}
@media (max-width:640px){
  .player__in{gap:.7rem; padding-inline:.9rem}
  .player__video{width:5.6rem}
  .pbtn:not(.pbtn--close){display:none}
}

/* Einwilligungs-Blende beim ersten Abspielen */
.consent{
  position:fixed; inset:auto 0 0 0; z-index:180;
  background:var(--surface); border-top:2px solid var(--gold);
  padding:1.25rem var(--gut) 1.5rem;
  display:none;
}
.consent[data-open="true"]{display:block}
.consent__in{max-width:52rem; margin-inline:auto}
.consent h4{margin:0 0 .5rem; font-family:'Playfair',serif; font-size:1.15rem}
.consent p{font-size:.82rem; color:var(--fg-dim); margin:0 0 1rem}

/* ---------- Fuß ---------- */
.site-foot{border-top:1px solid var(--line); background:var(--bg-2); padding-block:clamp(2.5rem,6vw,4.5rem); margin-top:auto}
.foot-grid{display:grid; gap:2rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
.foot-grid h5{font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:#949CA6; margin:0 0 .9rem; font-weight:600}
.foot-grid ul{list-style:none; margin:0; padding:0; display:grid; gap:.5rem}
.foot-grid a{font-size:.85rem; color:var(--fg-dim); text-decoration:none}
.foot-grid a:hover{color:var(--gold-lit)}
.foot-bar{margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; font-size:.72rem; color:#949CA6}

/* ---------- Rechtsseiten ---------- */
.prose{max-width:70ch}
.prose h2{font-family:'Playfair',serif; font-size:1.55rem; margin:2.5rem 0 .75rem; font-weight:700}
.prose h3{font-size:1rem; margin:1.75rem 0 .5rem; letter-spacing:.02em}
.prose ul{padding-left:1.15rem}
.prose li{margin-bottom:.4rem}
.prose a{color:var(--gold-lit)}

/* ---------- Reveal (nur additiv, Firefox-sicher) ---------- */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .reveal{animation:fadeup linear both; animation-timeline:view(); animation-range:entry 5% cover 28%}
    @keyframes fadeup{from{opacity:0; transform:translateY(1.5rem)} to{opacity:1; transform:none}}
  }
}

/* ---------- Seitenübergang ---------- */
@media (prefers-reduced-motion:no-preference){
  html.is-changing .transition-fade{transition:opacity .28s var(--ease); opacity:1}
  html.is-animating .transition-fade{opacity:0}
}

.visually-hidden{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip{position:absolute; left:-999px; top:0; z-index:999; background:var(--gold); color:#12100A; padding:.7rem 1.1rem; font-weight:700}
.skip:focus{left:.5rem; top:.5rem}

/* ============================================================
   KACHEL — 1:1 die Bildsprache der Kanal-Cover:
   Foto, Verlauf, Gold-Künstlername, grosser Serifen-Titel,
   Haarlinie, Metazeile, „AI GENERATED"-Chip, Messing-Siegel.
   ============================================================ */
.tile{
  position:relative; display:grid; align-content:end; isolation:isolate;
  aspect-ratio:1; overflow:hidden; text-decoration:none;
  border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(.9rem,2.2vw,1.4rem);
  transition:border-color .35s var(--ease), transform .45s var(--ease);
}
.tile--wide{aspect-ratio:16/9}
.tile:hover{border-color:color-mix(in srgb,var(--accent) 60%, transparent); transform:translateY(-3px)}
.tile__pic{position:absolute; inset:0; z-index:-2}
.tile__pic img,.tile__pic picture{width:100%; height:100%; object-fit:cover; display:block}
.tile__pic img{transition:transform .8s var(--ease), filter .5s var(--ease)}
.tile:hover .tile__pic img{transform:scale(1.05)}
.tile::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(6,9,13,.62) 0%, rgba(6,9,13,0) 30%),
    linear-gradient(0deg, rgba(5,8,11,.96) 0%, rgba(5,8,11,.88) 22%, rgba(5,8,11,.55) 45%, rgba(5,8,11,0) 78%);
}
.tile__artist{
  font-size:.6rem; font-weight:700; letter-spacing:.26em; text-transform:uppercase;
  color:var(--accent); margin:0 0 .55rem; line-height:1;
  text-shadow:0 1px 10px rgba(0,0,0,.8);
}
.tile__title{
  font-family:'Playfair',Georgia,serif; font-weight:800; text-transform:uppercase;
  line-height:1.02; letter-spacing:-.005em; margin:0;
  font-size:clamp(1.15rem,2.4vw,1.9rem);
  text-shadow:0 2px 18px rgba(0,0,0,.55);
  text-wrap:balance;
}
.tile--wide .tile__title{font-size:clamp(1.6rem,4.2vw,3.1rem)}
.tile__rule{width:2.5rem; height:2px; background:var(--brass); border:0; margin:.8rem 0 .6rem}
.tile__meta{
  font-size:.58rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(243,239,230,.86); margin:0; line-height:1.4;
  text-shadow:0 1px 10px rgba(0,0,0,.7);
}
.tile__ai{
  position:absolute; top:.7rem; right:.7rem; z-index:1;
  font-size:.5rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  padding:.3rem .5rem; color:rgba(243,239,230,.85);
  background:rgba(6,9,13,.62); backdrop-filter:blur(4px);
  border:1px solid rgba(243,239,230,.16); border-radius:2px;
}
.tile__seal{
  position:absolute; right:.8rem; bottom:.8rem; z-index:1;
  width:1.9rem; height:1.9rem; opacity:.8; pointer-events:none;
}
.tile--wide .tile__seal{width:2.4rem; height:2.4rem}
.tile .playdot{inset:auto auto .7rem .7rem; opacity:0}
.tile:hover .playdot,.tile.is-playing .playdot{opacity:1; transform:none}
@media (hover:none){ .tile .playdot{opacity:1; transform:none} }
.tile.is-playing{border-color:var(--accent)}

/* Der Kachel-Link deckt die ganze Fläche ab, der Play-Knopf liegt darüber. */
.tile__link{position:absolute; inset:0; z-index:0}

/* Held ---------------------------------------------------- */
.hero--big .hero__in{padding-block:clamp(6rem,20vw,13rem); max-width:none}
.hero__grid{
  max-width:var(--maxw); margin-inline:auto;
  display:grid; gap:clamp(2rem,5vw,4rem);
  grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr); align-items:center;
}
@media (max-width:900px){ .hero__grid{grid-template-columns:1fr} .hero__side{display:none} }
.hero__bg img{opacity:.55}
.hero--big::before{
  background:
    radial-gradient(90% 75% at 78% 40%, transparent 0%, color-mix(in srgb,var(--bg) 92%, transparent) 72%),
    linear-gradient(100deg, var(--bg) 8%, color-mix(in srgb,var(--bg) 55%, transparent) 46%, transparent 72%),
    linear-gradient(180deg, color-mix(in srgb,var(--ink) 60%, transparent) 0%, transparent 30%, var(--bg) 97%);
}
.hero__side{position:relative}
.hero__side .tile{box-shadow:0 30px 90px rgba(0,0,0,.55)}

.marquee{
  border-block:1px solid var(--line); overflow:hidden; padding-block:.85rem;
  background:var(--bg-2); white-space:nowrap;
}
.marquee__in{display:inline-flex; gap:2.5rem; padding-left:2.5rem; will-change:transform}
@media (prefers-reduced-motion:no-preference){
  .marquee__in{animation:slide 42s linear infinite}
  @keyframes slide{to{transform:translateX(-50%)}}
}
.marquee span{
  font-size:.68rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:#949CA6;
}
.marquee b{color:var(--gold-lit); font-weight:700}


/* ============================================================
   BAND — ein Bild, das gross genug ist, um etwas zu sagen.
   Fuer die Sanduhr: Zeit und Handschrift, die beiden Dinge,
   aus denen dieses Label besteht.
   ============================================================ */
.band{position:relative; isolation:isolate; overflow:hidden; border-block:1px solid var(--line)}
.band__pic{position:absolute; inset:0; z-index:-2}
.band__pic img,.band__pic picture{width:100%; height:100%; object-fit:cover; object-position:var(--bgpos,50% 50%); display:block}
@media (prefers-reduced-motion:no-preference){
  .band__pic img{animation:kenburns 30s ease-out both}
}
.band::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(90deg, rgba(8,11,15,.94) 0%, rgba(8,11,15,.72) 38%, rgba(8,11,15,.18) 72%, rgba(8,11,15,.45) 100%),
    linear-gradient(180deg, rgba(8,11,15,.55) 0%, rgba(8,11,15,0) 30%, rgba(8,11,15,.55) 100%);
}
.band__in{
  position:relative; max-width:var(--maxw); margin-inline:auto;
  padding:clamp(4.5rem,13vw,9rem) var(--gut);
  max-width:min(var(--maxw), 100%);
}
.band__in > *{max-width:34ch}
.band h2{
  font-family:'Playfair',Georgia,serif; font-weight:800; line-height:1.02;
  font-size:clamp(1.9rem,4.6vw,3.4rem); margin:0; text-wrap:balance;
  text-shadow:0 2px 30px rgba(0,0,0,.7);
}
.band h2 em{font-style:normal; background:var(--brass); -webkit-background-clip:text; background-clip:text; color:transparent}
.band p{margin:1.1rem 0 0; color:var(--fg-dim); font-size:clamp(.95rem,1.2vw,1.1rem)}
@media (max-width:800px){
  .band::after{background:linear-gradient(180deg, rgba(8,11,15,.5) 0%, rgba(8,11,15,.86) 55%, rgba(8,11,15,.96) 100%)}
  .band__in > *{max-width:none}
}

/* Held mit Figur: der Verlauf verdunkelt links fuer die Typo und laesst
   die rechte Haelfte stehen, damit die Figur ueberhaupt zu sehen ist. */
.hero--figure::before{
  background:
    linear-gradient(90deg, var(--bg) 4%, color-mix(in srgb,var(--bg) 82%, transparent) 34%,
                    color-mix(in srgb,var(--bg) 25%, transparent) 62%, color-mix(in srgb,var(--bg) 55%, transparent) 100%),
    linear-gradient(180deg, color-mix(in srgb,var(--ink) 55%, transparent) 0%, transparent 32%, var(--bg) 98%);
}

/* Held, der ein Bild ganz zeigt: die Typo bekommt links Grund,
   die rechte Haelfte bleibt dem Motiv. */
.hero--wide .hero__in > .wrap > :is(h1,p){max-width:min(46ch, 60%)}
.hero--wide .hero__in > .wrap > .btnrow{max-width:none}
.hero--wide::before{
  background:
    linear-gradient(90deg, var(--bg) 2%, color-mix(in srgb,var(--bg) 88%, transparent) 30%,
                    color-mix(in srgb,var(--bg) 42%, transparent) 52%,
                    color-mix(in srgb,var(--bg) 8%, transparent) 74%,
                    color-mix(in srgb,var(--bg) 35%, transparent) 100%),
    linear-gradient(180deg, color-mix(in srgb,var(--ink) 62%, transparent) 0%, transparent 30%, var(--bg) 99%);
}
@media (max-width:860px){
  .hero--wide .hero__in > .wrap > :is(h1,p){max-width:none}
  .hero--wide::before{
    background:linear-gradient(180deg, rgba(8,11,15,.35) 0%, rgba(8,11,15,.6) 30%, rgba(8,11,15,.86) 62%, var(--bg) 97%);
  }
}