/* ══════════════════════════════════════════════════════════════════════════
   KRYPTIK — Seite 03 (Releases + Spotify) und Seite 04 (Merch)
   Überarbeitung 2026-10-01. Dieselbe Manga-Sprache wie Seite 01/02:
   geklippte, gekippte Panels mit Tuschkontur aus Schlagschatten, Rasterpunkte,
   senkrechte Lautmalerei. Bauregel: Form (clip-path) und Schatten (filter)
   liegen nie auf demselben Element.
   Bewegung: nur zeitbasiert oder auf Zeiger/Tastatur — nichts am Scrollrad.
   ══════════════════════════════════════════════════════════════════════ */

.mg-page3, .mg-page4{
  padding-top:clamp(2.6rem,6vh,5rem);
  padding-bottom:clamp(2.6rem,6vh,5rem);
  z-index:2;
}
.p3, .p4{ position:relative; z-index:1; }
.mg-page3 .mg-page2__head, .mg-page4 .mg-page2__head{ margin-bottom:clamp(1.4rem,3.4vh,2.6rem); }
.mg-speedlines--c{ top:-6%; left:auto; right:-10%; width:62%; height:70%; opacity:.22; }

/* ── Kopf der Seite: Titel · Kastentext · Lautmalerei ── */
.p3__intro, .p4__intro{
  display:grid;
  grid-template-columns:auto minmax(0,30rem) 1fr;
  align-items:end;
  gap:clamp(1rem,3vw,3rem);
  padding:0 var(--mg-gut);
  margin-bottom:clamp(.6rem,2vh,1.4rem);
}
.p3__title, .p4__title{
  margin:0;
  font-family:var(--mg-disp); font-weight:400;
  text-transform:uppercase; line-height:.86;
}
.p3__title span, .p4__title span{ display:block; white-space:nowrap; }
.p3__title span:first-child, .p4__title span:first-child{
  font-size:clamp(2.1rem,5.6vw,5.2rem);
  color:var(--mg-paper);
  text-shadow:7px 7px 0 var(--mg-neon-lo);
  transform:rotate(-1.4deg);
}
.p3__title span:last-child, .p4__title span:last-child{
  font-size:clamp(2.5rem,7vw,6.4rem);
  color:transparent; -webkit-text-stroke:2.4px var(--mg-paper);
  transform:rotate(.8deg) translateX(clamp(8px,2vw,30px));
}
.p3__sub, .p4__sub{
  position:relative; margin:0;
  padding:clamp(.9rem,1.6vw,1.4rem) clamp(1.1rem,2.2vw,2rem);
  font-weight:500; font-size:clamp(.72rem,.9vw,.92rem);
  line-height:1.7; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(242,237,251,.86);
  filter:drop-shadow(8px 9px 0 rgba(2,1,5,.9)) drop-shadow(0 0 1.6px rgba(242,237,251,.85));
  isolation:isolate;
}
.p3__sub::before, .p4__sub::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(120deg,var(--mg-ink-3),var(--mg-ink) 68%);
  clip-path:polygon(0 6%, 98.5% 0, 100% 91%, 2.2% 100%);
}
.p3__sfx, .p4__sfx{
  justify-self:end; align-self:start;
  display:flex; align-items:flex-start; gap:.5em;
  transform:rotate(-4deg);
}
.p3__sfx b, .p4__sfx b{
  writing-mode:vertical-rl; font:inherit; font-weight:900;
  font-size:clamp(1.8rem,3.6vw,3.6rem);
  color:rgba(176,38,255,.95);
  -webkit-text-stroke:1.8px var(--mg-paper); paint-order:stroke fill;
  text-shadow:5px 6px 0 rgba(2,1,5,.9), 0 0 30px rgba(176,38,255,.8);
}
.p3__sfx i, .p4__sfx i{
  writing-mode:vertical-rl; font-family:var(--mg-body); font-style:normal; font-weight:900;
  font-size:clamp(.5rem,.68vw,.68rem); letter-spacing:.5em; text-transform:uppercase;
  color:rgba(242,237,251,.72); -webkit-text-stroke:0; margin-top:.4em;
}

/* ── Karussell: die fünf neuesten Releases ── */
.rc{ position:relative; }
.rc__track{
  display:grid; grid-auto-flow:column;
  grid-auto-columns:clamp(240px,26vw,370px);
  gap:clamp(1.4rem,3vw,3rem);
  overflow-x:auto; overflow-y:visible;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--mg-gut);
  padding:clamp(2.6rem,5vh,3.4rem) var(--mg-gut) clamp(1.6rem,3vh,2.4rem);
  scrollbar-width:none;
  overscroll-behavior-x:contain;
}
.rc__track::-webkit-scrollbar{ display:none; }
.rc__track:focus-visible{ outline:2px solid var(--mg-neon-hi); outline-offset:-2px; }

.rc__card{ position:relative; display:flex; flex-direction:column; scroll-snap-align:start; min-width:0; }
.rc__panel{
  display:block; position:relative;
  filter:
    drop-shadow(1.7px 0 0 rgba(242,237,251,.92))
    drop-shadow(-1.7px 0 0 rgba(242,237,251,.92))
    drop-shadow(0 1.7px 0 rgba(242,237,251,.92))
    drop-shadow(0 -1.7px 0 rgba(242,237,251,.92))
    drop-shadow(11px 13px 0 rgba(2,1,5,.94))
    drop-shadow(0 0 28px rgba(176,38,255,.3));
  transition:transform .4s var(--mg-ease);
}
.rc__p{
  display:block; position:relative; aspect-ratio:1; overflow:hidden;
  background:var(--mg-ink-2);
  clip-path:polygon(0 2.5%, 100% 0, 98.5% 100%, 1.5% 97%);
  transform:rotate(-1.2deg);
}
.rc__card:nth-child(even) .rc__p{ clip-path:polygon(2% 0, 100% 3%, 100% 97.5%, 0 100%); transform:rotate(1.1deg); }
.rc__p::before{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background-image:radial-gradient(rgba(227,176,255,.55) 1px, transparent 1.7px);
  background-size:6px 6px;
  -webkit-mask-image:linear-gradient(215deg,#000 0%,transparent 30%);
          mask-image:linear-gradient(215deg,#000 0%,transparent 30%);
  opacity:.55;
}
.rc__p img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s var(--mg-ease), filter .5s ease;
  filter:contrast(1.06) saturate(.95);
}
.rc__panel:hover, .rc__panel:focus-visible{ transform:translate(-3px,-6px); }
.rc__panel:hover img, .rc__panel:focus-visible img{ transform:scale(1.05); filter:contrast(1.12) saturate(1.1); }
.rc__panel:focus-visible{ outline:none; }
.rc__panel:focus-visible .rc__p{ outline:3px solid var(--mg-neon-hi); outline-offset:-3px; }

.rc__no{
  position:absolute; z-index:4; top:clamp(-2.2rem,-2.6vw,-1.4rem); left:-.3rem;
  font-family:var(--mg-disp); font-size:clamp(2rem,3.4vw,3.2rem); line-height:1;
  color:transparent; -webkit-text-stroke:2px var(--mg-neon-hi);
  text-shadow:0 0 22px rgba(176,38,255,.7);
  pointer-events:none;
}
.rc__new{
  position:absolute; z-index:5; top:clamp(-1.9rem,-2vw,-1.2rem); right:clamp(-1rem,-1vw,-.4rem);
  width:clamp(4.4rem,6vw,5.6rem); aspect-ratio:1;
  display:grid; place-items:center;
  font-family:var(--mg-disp); font-size:clamp(.8rem,1.1vw,1.05rem); letter-spacing:.04em;
  color:#fff; text-shadow:2px 2px 0 var(--mg-neon-dk);
  background:linear-gradient(150deg,var(--mg-neon),var(--mg-neon-lo));
  clip-path:polygon(50% 0%,57% 17%,73% 5%,72% 25%,90% 19%,83% 37%,100% 43%,86% 55%,97% 71%,78% 69%,80% 89%,61% 78%,50% 100%,38% 79%,21% 91%,22% 69%,3% 73%,14% 55%,0% 45%,16% 37%,6% 19%,27% 25%,26% 5%,43% 17%);
  transform:rotate(12deg);
  pointer-events:none;
}
.rc__meta{
  margin:1.25rem 0 0;
  font-weight:900; font-size:clamp(.56rem,.7vw,.7rem);
  letter-spacing:.32em; text-transform:uppercase; color:var(--mg-neon-hi);
}
.rc__name{
  margin:.4rem 0 .3rem;
  font-family:var(--mg-disp); font-weight:400;
  font-size:clamp(1.2rem,1.9vw,1.85rem); line-height:1.02;
  text-transform:uppercase; color:var(--mg-paper);
  text-shadow:4px 4px 0 rgba(4,2,9,.8);
  overflow-wrap:anywhere;
}
.rc__artists{
  margin:0;
  font-weight:500; font-size:clamp(.62rem,.8vw,.8rem);
  letter-spacing:.16em; text-transform:uppercase; color:rgba(242,237,251,.66);
}
.rc__play{
  align-self:flex-start; margin-top:auto;
  display:inline-flex; align-items:center; min-height:44px;
  margin-top:1rem;
  padding:0 1.5rem 0 1.7rem;
  font-weight:900; font-size:clamp(.56rem,.7vw,.7rem); letter-spacing:.24em; text-transform:uppercase;
  color:#fff; background:linear-gradient(100deg,var(--mg-neon),var(--mg-neon-lo));
  clip-path:polygon(9% 0, 100% 0, 91% 100%, 0 100%);
  transition:letter-spacing .28s ease, box-shadow .28s ease;
}
.rc__play:hover, .rc__play:focus-visible{ letter-spacing:.3em; box-shadow:inset 0 0 0 100px rgba(255,255,255,.14); outline:none; }
.rc__card.is-new .rc__panel{ filter:
    drop-shadow(1.7px 0 0 rgba(242,237,251,.95))
    drop-shadow(-1.7px 0 0 rgba(242,237,251,.95))
    drop-shadow(0 1.7px 0 rgba(242,237,251,.95))
    drop-shadow(0 -1.7px 0 rgba(242,237,251,.95))
    drop-shadow(11px 13px 0 rgba(2,1,5,.94))
    drop-shadow(0 0 40px rgba(176,38,255,.6)); }

.rc__ctrl{
  display:flex; align-items:center; justify-content:flex-end; gap:1rem;
  padding:0 var(--mg-gut);
}
.rc.is-static .rc__ctrl{ display:none; }
.rc__btn{
  width:52px; height:46px; border:0; cursor:pointer;
  font-size:.85rem; color:var(--mg-paper);
  background:var(--mg-ink-3);
  clip-path:polygon(12% 0, 100% 0, 88% 100%, 0 100%);
  box-shadow:inset 0 0 0 100px rgba(176,38,255,0);
  transition:box-shadow .25s ease, opacity .25s ease;
}
.rc__btn:hover, .rc__btn:focus-visible{ box-shadow:inset 0 0 0 100px var(--mg-neon-lo); outline:none; }
.rc__btn:focus-visible{ box-shadow:inset 0 0 0 100px var(--mg-neon); }
.rc__btn[disabled]{ opacity:.35; cursor:default; box-shadow:none; }
.rc__count{
  margin:0; min-width:5.5em; text-align:center;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.78rem; letter-spacing:.2em; color:rgba(242,237,251,.6);
}
.rc__count b{ color:var(--mg-neon-hi); font-weight:400; }

/* ── Spotify-Bereich ── */
.sp{
  /* Seit 2026-10-01 ohne eingebetteten Spotify-Player (Owner): nur die Profilkarte */
  display:grid; grid-template-columns:minmax(0,40rem);
  gap:clamp(1.4rem,3vw,3rem); align-items:center;
  padding:clamp(2.4rem,6vh,4.2rem) var(--mg-gut) 0;
  scroll-margin-top:1.5rem;
}
.sp__card{
  position:relative; isolation:isolate;
  display:flex; align-items:center; gap:clamp(1rem,2vw,1.8rem);
  padding:clamp(1.3rem,2.4vw,2.2rem) clamp(1.3rem,2.6vw,2.4rem);
  filter:drop-shadow(8px 9px 0 rgba(2,1,5,.9)) drop-shadow(0 0 1.6px rgba(242,237,251,.85));
}
.sp__card::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(90% 120% at 88% 6%, rgba(176,38,255,.28), transparent 62%),
    linear-gradient(140deg,var(--mg-ink-3),var(--mg-ink) 68%);
  clip-path:polygon(0 5%, 98.5% 0, 100% 93%, 1.8% 100%);
}
.sp__avatar{
  flex:none; width:clamp(84px,9vw,132px); height:auto; aspect-ratio:1; object-fit:cover;
  border-radius:50%;
  box-shadow:0 0 0 3px var(--mg-paper), 0 0 0 7px var(--mg-neon-lo), 0 0 30px rgba(176,38,255,.6);
}
.sp__body{ min-width:0; }
.sp__kind{
  margin:0; font-weight:900; font-size:clamp(.52rem,.66vw,.66rem);
  letter-spacing:.42em; text-transform:uppercase; color:var(--mg-neon-hi);
}
.sp__name{
  margin:.3rem 0 .4rem;
  font-family:var(--mg-disp); font-weight:400;
  font-size:clamp(2rem,4.2vw,3.6rem); line-height:.9; text-transform:uppercase;
  color:var(--mg-paper); text-shadow:6px 6px 0 var(--mg-neon-lo);
}
.sp__latest{
  margin:0; font-weight:500; font-size:clamp(.66rem,.82vw,.84rem);
  letter-spacing:.12em; text-transform:uppercase; color:rgba(242,237,251,.72);
}
.sp__latest b{ color:var(--mg-paper); font-weight:900; }
.sp__follow{
  display:inline-flex; align-items:center; min-height:44px; margin-top:1rem;
  padding:0 1.5rem 0 1.7rem;
  font-weight:900; font-size:clamp(.56rem,.72vw,.72rem); letter-spacing:.22em; text-transform:uppercase;
  color:#05140a; background:#1ed760;
  clip-path:polygon(9% 0, 100% 0, 91% 100%, 0 100%);
  transition:letter-spacing .28s ease, filter .28s ease;
}
.sp__follow:hover, .sp__follow:focus-visible{ letter-spacing:.28em; filter:brightness(1.08); outline:none; }

/* ── Seite 04: Merch ── */
.p4__intro{ grid-template-columns:auto minmax(0,24rem) 1fr; }
.p4__cta{
  justify-self:end; align-self:end;
  display:inline-flex; align-items:center; min-height:46px;
  padding:0 1.6rem 0 1.9rem;
  font-weight:900; font-size:clamp(.58rem,.74vw,.74rem); letter-spacing:.24em; text-transform:uppercase;
  color:#fff; background:linear-gradient(100deg,var(--mg-neon),var(--mg-neon-lo));
  clip-path:polygon(9% 0, 100% 0, 91% 100%, 0 100%);
  transition:letter-spacing .28s ease, box-shadow .28s ease;
}
.p4__cta:hover, .p4__cta:focus-visible{ letter-spacing:.3em; box-shadow:inset 0 0 0 100px rgba(255,255,255,.14); outline:none; }
.mc{
  list-style:none; margin:0;
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(1rem,2.2vw,2.2rem);
  padding:clamp(1.4rem,3vh,2.2rem) var(--mg-gut) 0;
}
.mc__item{
  min-width:0;
  filter:drop-shadow(9px 11px 0 rgba(2,1,5,.92)) drop-shadow(0 0 22px rgba(176,38,255,.35));
}
.mc__panel{
  display:flex; flex-direction:column; gap:.7rem; height:100%;
  padding:.7rem .7rem 1rem;
  background:var(--mg-paper); color:var(--mg-ink);
  clip-path:polygon(0 1.6%, 100% 0, 98.6% 100%, 1% 98%);
  transform:rotate(-1.2deg);
  transition:transform .35s var(--mg-ease);
}
.mc__item:nth-child(even) .mc__panel{ clip-path:polygon(1.4% 0, 100% 2%, 100% 98.4%, 0 100%); transform:rotate(1.4deg); }
.mc__panel:hover, .mc__panel:focus-visible{ transform:rotate(0) translateY(-6px); outline:none; }
.mc__panel:focus-visible .mc__name{ text-decoration:underline; text-decoration-thickness:3px; text-underline-offset:4px; }
.mc__p{ display:block; aspect-ratio:1; overflow:hidden; background:#fff; }
.mc__p img{ width:100%; height:100%; object-fit:contain; }
.mc__name{
  font-family:var(--mg-disp); font-size:clamp(.95rem,1.35vw,1.3rem); line-height:1;
  text-transform:uppercase;
}
.mc__go{
  margin-top:auto;
  font-weight:900; font-size:clamp(.52rem,.64vw,.64rem); letter-spacing:.24em; text-transform:uppercase;
  color:var(--mg-neon-lo);
}
.p4__sfx{ position:absolute; right:calc(var(--mg-gut) * 2); top:clamp(4rem,9vh,7rem); z-index:0; opacity:.9; }

/* ── Kleine Bildschirme (Schwelle wie die Doppelseiten) ── */
@media (max-width: 900px){
  /* Fünf Reiter seit 2026-10: mobil umbrechen statt über den Rand laufen */
  .mg-head{ flex-wrap:wrap; row-gap:.7rem; }
  .mg-tabs{ flex-wrap:wrap; justify-content:flex-start; gap:.35rem; }
  .mg-tab{ display:inline-flex; align-items:center; min-height:44px; padding:0 1.05rem 0 1.25rem; }
  .p3__intro, .p4__intro{ grid-template-columns:1fr; gap:1.2rem; padding:0; }
  .p3__sfx{ display:none; }
  .p4__sfx{ display:none; }
  .p4__cta{ justify-self:start; }
  .rc__track{ grid-auto-columns:min(78vw,340px); padding-inline:0; scroll-padding-inline:0; }
  .rc__ctrl{ justify-content:center; padding:0; }
  .sp{ grid-template-columns:1fr; padding-inline:0; }
  .mc{ grid-template-columns:repeat(2,minmax(0,1fr)); padding-inline:0; }
  .mc__item:last-child{ grid-column:1 / -1; justify-self:center; width:calc(50% - .5rem); }
}
@media (max-width: 420px){
  .sp__card{ flex-direction:column; align-items:flex-start; }
  .rc__track{ grid-auto-columns:82vw; }
}
@media (prefers-reduced-motion: reduce){
  .rc__track{ scroll-behavior:auto; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SEITE 02 · UMBAU 2026-10-01 (Owner): Pressefoto oben links, Kapuzengestalt
   darunter, Spotify-Biografie rechts neben dem Pressefoto, Label/Management
   darunter, die Genres weiter unten, Kastentext am Schluss.
   Nur ab 901 px; darunter gilt die Spaltenfassung aus style.css und die
   Reihenfolge im HTML (Pressefoto, Biografie, Gestalt, Label, Management, Genres).
   ══════════════════════════════════════════════════════════════════════ */
@media (min-width: 901px){
  /* Zeilen so hoch wie ihr Inhalt; Bildpanels spannen über zwei Textzeilen */
  .mg-page2 .mg-grid{ grid-template-rows:auto auto auto auto auto; min-height:0; }
  .mg-page2 .mg-panel--press{ grid-area:2 / 1 / 4 / 6; z-index:4; }
  .mg-page2:has(.mg-panel--press) .mg-panel--figure{ grid-area:4 / 1 / 6 / 6; z-index:2; }
  .mg-panel--bio{ grid-area:2 / 6 / 3 / 13; }
  .mg-page2 .mg-panel--label{ grid-area:3 / 6 / 4 / 10; }
  .mg-page2 .mg-panel--mgmt{ grid-area:3 / 10 / 4 / 13; }
  .mg-page2 .mg-panel--type{ grid-area:4 / 5 / 5 / 13; }
  .mg-page2 .mg-page2__cap{ grid-area:5 / 6 / 6 / 12; }
  .mg-page2 .mg-sfx--dodo{ grid-area:4 / 2 / 5 / 5; align-self:start; justify-self:end; margin:clamp(2rem,5vw,4.5rem) clamp(1rem,3vw,3rem) 0 0; }
  .mg-page2 .mg-panel--label > .mg-p, .mg-page2 .mg-panel--mgmt > .mg-p{ min-height:clamp(220px,20vw,300px); }
  .mg-page2 .mg-panel--type > .mg-p{ min-height:clamp(300px,28vw,420px); }
}

/* Biografie-Panel: Ink + Raster wie die übrigen Textpanels */
.mg-panel--bio{
  --mg-tilt:-.4deg;
  --mg-clip:polygon(2% 0, 100% 2.2%, 100% 100%, 0 97%);
  z-index:3;
}
.mg-panel--bio > .mg-p{
  background:
    radial-gradient(rgba(227,176,255,.16) 1.1px, transparent 2px) 0 0/11px 11px,
    radial-gradient(90% 120% at 88% 6%, rgba(176,38,255,.26), transparent 62%),
    linear-gradient(155deg, var(--mg-ink-3), var(--mg-ink) 62%);
}
.mg-panel--bio > .mg-p::after{ mix-blend-mode:normal; background:none; }
.mg-bio{
  position:relative; z-index:3; height:100%;
  display:flex; flex-direction:column; justify-content:center; gap:.85rem;
  padding:clamp(1.3rem,2.8vw,2.8rem) clamp(1.4rem,3.2vw,3.2rem);
}
.mg-bio__h{
  margin:0 0 .2rem;
  font-family:var(--mg-disp); font-weight:400;
  font-size:clamp(1.5rem,2.8vw,2.6rem); line-height:.95; text-transform:uppercase;
  color:var(--mg-paper); text-shadow:5px 5px 0 var(--mg-neon-lo);
}
.mg-bio p:not(.mg-stack__key){
  margin:0; max-width:62ch;
  font-size:clamp(.84rem,1vw,1.02rem); line-height:1.68;
  color:rgba(242,237,251,.88);
}
@media (max-width: 900px){
  .mg-panel--bio > .mg-p{ height:auto; }
}

/* Barrierefreiheit (axe, 2026-10-01): „weiter“-Hinweis im Einstieg lag mit
   4,14:1 knapp unter WCAG AA. Minimal heller, Gestaltung sonst unverändert. */
.nr-cue > span{ color:#8a789e; }