/* ==========================================================================
   PÄNTHER PISS
   Schwarz, Weiß, sparsam Säuregelb. Kantig, laut, roh.
   Schriften liegen lokal (keine Verbindung zu Google Fonts o. Ä.).
   ========================================================================== */

@font-face{font-family:"Anton";src:url("../fonts/anton-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Sans";src:url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Sans";src:url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

:root{
  --bg:#000;
  --fg:#fff;
  --text:#ececec;
  --muted:#b3b3b3;
  --acid:#e6ff00;
  --focus:#fff;
  --nav-h:56px;
  --gut:clamp(16px,4vw,48px);
  --max:1320px;
  --display:"Anton","Impact","Haettenschweiler","Arial Narrow Bold",sans-serif;
  --body:"Plex Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"Plex Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  /* Fotofilter: Kopierer-Look. Auf "none" setzen für Originalfarben. */
  --photo-filter:grayscale(1) contrast(1.12);
  --cut:18px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:#000}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:400 1.0625rem/1.65 var(--body);
  overflow-x:hidden;
  counter-reset:sec;
}
img{max-width:100%;height:auto}
a{color:inherit}
code{font-family:var(--mono);font-size:.9em}
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}

.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
[hidden]{display:none!important}

/* Körnung: einmal gerendert, gekachelt, ohne Bewegung */
body::after{
  content:"";position:fixed;inset:0;z-index:100;pointer-events:none;opacity:.38;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .75 -.3'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
@media (prefers-contrast:more){body::after{display:none}}

/* Fokus */
:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.skip{position:fixed;left:12px;top:-100px;z-index:200;background:var(--acid);color:#000;padding:14px 18px;font:400 1.1rem var(--display);text-transform:uppercase;letter-spacing:.06em;text-decoration:none}
.skip:focus{top:12px}

.rough{filter:url(#rough)}

/* ---------- Navigation ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;background:#000;border-bottom:3px solid #fff}
/* Kein Logo in der Leiste: Menü sitzt zentriert. */
.nav__bar{height:var(--nav-h);display:flex;align-items:center;justify-content:center;gap:16px}
.nav__toggle{display:none;min-height:44px;min-width:44px;padding:0 16px;border:2px solid #fff;background:#000;color:#fff;font:400 1.05rem var(--display);text-transform:uppercase;letter-spacing:.08em;cursor:pointer}
.nav__toggle:hover{background:#fff;color:#000}
.nav__menu ul{list-style:none;margin:0;padding:0;display:flex;justify-content:center}
.nav__menu a{
  display:flex;align-items:center;height:calc(var(--nav-h) - 3px);padding:0 16px;
  font:400 1rem var(--display);text-transform:uppercase;letter-spacing:.09em;text-decoration:none;color:#fff;
  transition:background-color .12s,color .12s;
}
.nav__menu a:hover{background:#fff;color:#000}
.nav__menu a[aria-current="true"]{box-shadow:inset 0 -5px 0 #fff}
.nav__menu a:focus-visible{outline-offset:-4px}

/* Mobil: Vollflächen-Menü mit großen Touchflächen */
@media (max-width:899px){
  .js .nav__toggle{display:inline-flex;align-items:center}
  .js .nav__menu{
    position:fixed;inset:var(--nav-h) 0 0 0;background:#000;overflow:auto;
    padding:8px var(--gut) 40px;
    visibility:hidden;opacity:0;transition:opacity .15s,visibility 0s .15s;
  }
  .js .nav--open .nav__menu{visibility:visible;opacity:1;transition:opacity .15s}
  .js .nav__menu ul{flex-direction:column}
  .js .nav__menu li{border-bottom:2px solid #fff}
  .js .nav__menu a{height:auto;min-height:72px;padding:12px 4px;font-size:clamp(2.4rem,11vw,3.4rem);letter-spacing:.03em;line-height:1}
  .js .nav__menu a[aria-current="true"]{box-shadow:none;color:var(--acid)}
  .js body.menu-open{overflow:hidden}
  .no-js .nav__bar{flex-wrap:wrap;height:auto;padding-bottom:8px}
  .no-js .nav__menu{width:100%}
  .no-js .nav__menu ul{flex-wrap:wrap}
  .no-js .nav__menu a{height:44px}
}
@media (max-width:899px){
  .nav__bar{height:var(--nav-h)}
}

/* ---------- Buttons ---------- */
.btn{
  --b:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:56px;padding:0 30px;border:0;cursor:pointer;
  font:400 1.25rem/1 var(--display);text-transform:uppercase;letter-spacing:.07em;text-decoration:none;
  transition:background-color .12s,color .12s,transform .12s;
}
.btn--acid{background:var(--acid);color:#000;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px))}
.btn--acid:hover{background:#fff}
.btn--line{background:transparent;color:#fff;border:3px solid #fff}
.btn--line:hover{background:#fff;color:#000}
.btn--ink{background:#000;color:#fff;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px))}
.btn--ink:hover{background:#222}
.btn--sm{min-height:48px;padding:0 20px;font-size:1.05rem}
.btn:focus-visible{clip-path:none;outline-offset:4px}
.btn:active{transform:translateY(1px)}

/* ---------- Einstieg ---------- */
.hero{padding-top:calc(var(--nav-h) + 24px);padding-bottom:clamp(28px,5vw,56px);min-height:min(100svh,980px);display:flex;align-items:center}
.hero > .wrap{width:100%}
.hero__logo{margin:clamp(8px,2vw,24px) auto clamp(24px,4vw,48px);width:min(100%,900px);line-height:0}
.hero__logo img{display:block;width:100%;height:auto}
.hero__body{display:grid;gap:clamp(24px,4vw,56px);align-items:start}
.hero__headline{
  margin:0 0 clamp(24px,3vw,36px);
  font:400 clamp(2.7rem,8.4vw,7.2rem)/1 var(--display);text-transform:uppercase;color:#fff;letter-spacing:.005em;
}
.hero__headline .outline{display:block;color:transparent;-webkit-text-stroke:2px #fff;paint-order:stroke fill;white-space:nowrap;margin-top:.12em}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px}
.hero__photo{margin:0;position:relative}
.hero__photo img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;filter:var(--photo-filter);border:3px solid #fff}
.hero__photo figcaption,.photo-credit{font:500 .72rem/1.4 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-top:8px}
.has-photo .hero__body{grid-template-columns:1fr}
@media (min-width:900px){
  .has-photo .hero__body{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
}

.draft-note{
  margin:0 0 20px;padding:12px 16px;border:2px dashed #8a8a8a;
  font:500 .8rem/1.5 var(--mono);color:#d4d4d4;text-transform:none;letter-spacing:.02em;
}
.draft-note b{color:#fff;text-transform:uppercase;letter-spacing:.08em}

.facts{
  display:grid;grid-template-columns:1fr;margin:clamp(32px,5vw,64px) 0 0;padding:0;
  border-top:3px solid #fff;
}
.facts > div{padding:14px 0;border-bottom:2px solid #444}
.facts dt{font:500 .72rem/1.4 var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}
.facts dd{margin:2px 0 0;font:400 1.35rem/1.2 var(--display);text-transform:uppercase;letter-spacing:.05em;color:#fff}
.facts a{text-decoration:none;border-bottom:3px solid #fff}
.facts a:hover{background:#fff;color:#000}
@media (min-width:760px){
  .facts{grid-template-columns:repeat(3,1fr)}
  .facts > div{padding:18px 24px 18px 0;border-bottom:0}
  .facts > div + div{padding-left:24px;border-left:2px solid #444}
}

/* Tropfkante: weißer Balken mit hängenden Zacken */
.saw{
  height:30px;
  background:
    linear-gradient(#fff,#fff) 0 0/100% 6px no-repeat,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24'><polygon points='0,0 48,0 30,24' fill='white'/></svg>") 0 6px/48px 24px repeat-x;
}

/* ---------- Abschnitte ---------- */
.block{padding:clamp(48px,8vw,104px) 0 clamp(56px,8vw,112px);position:relative}
.block + .block{border-top:3px solid #fff}
.block + .block::before{
  content:"";position:absolute;left:0;right:0;top:3px;height:9px;pointer-events:none;
  background:repeating-linear-gradient(90deg,#fff 0 2px,transparent 2px 14px);opacity:.55;
}
.block:not([hidden]){counter-increment:sec}
.block{scroll-margin-top:calc(var(--nav-h) - 3px)}
.saw + .block{padding-top:clamp(40px,6vw,80px)}
.block__head{display:flex;align-items:flex-end;gap:clamp(14px,3vw,36px);margin-bottom:clamp(28px,5vw,56px)}
.block__no{font:500 .85rem/1 var(--mono);letter-spacing:.12em;color:#000;background:#fff;padding:6px 9px;align-self:flex-start;margin-top:.8em;min-width:2.4em;text-align:center}
.block__no::before{content:counter(sec,decimal-leading-zero)}
.block h2{
  margin:0;font:400 clamp(4.2rem,16vw,12rem)/.82 var(--display);text-transform:uppercase;color:#fff;letter-spacing:.005em;
}
.block__body{max-width:100%}

.empty{margin:0;max-width:34ch;font:400 clamp(1.6rem,4vw,2.6rem)/1.12 var(--display);text-transform:uppercase;letter-spacing:.02em;color:#fff}
.empty a{color:#000;background:var(--acid);padding:0 .22em;text-decoration:none}
.empty a:hover{background:#fff}
.empty a:focus-visible{outline-color:#fff}

/* Platzhalter */
.ph{
  position:relative;border:2px dashed #8a8a8a;color:#d2d2d2;
  background:repeating-linear-gradient(135deg,transparent 0 11px,rgba(255,255,255,.07) 11px 13px);
}
.ph__tag{
  display:inline-block;font:500 .68rem/1 var(--mono);text-transform:uppercase;letter-spacing:.14em;
  color:#000;background:#d2d2d2;padding:5px 7px;
}
.ph__text{font:500 .8rem/1.5 var(--mono);color:#d2d2d2;margin:0}
.sub{margin:clamp(36px,5vw,56px) 0 12px;font:500 .8rem/1.4 var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}
.sub:first-child{margin-top:0}

/* ---------- Live ---------- */
.shows{list-style:none;margin:0;padding:0;border-top:3px solid #fff}
.show{
  display:grid;grid-template-columns:auto 1fr;grid-template-areas:"date where" "tix tix";gap:6px 20px;align-items:center;
  padding:20px 8px 20px 0;border-bottom:2px solid #fff;
  transition:background-color .12s,box-shadow .12s,padding .12s;
}
.show:hover{background:#111;box-shadow:inset 8px 0 0 #fff;padding-left:22px}
.show__date{grid-area:date;display:flex;flex-direction:column;font:400 clamp(2.4rem,7vw,4rem)/.95 var(--display);color:#fff;text-transform:uppercase}
.show__date small{font:500 .72rem/1.4 var(--mono);letter-spacing:.12em;color:var(--muted)}
.show__where{grid-area:where;display:flex;flex-direction:column;gap:2px;min-width:0}
.show__city{font:400 clamp(1.6rem,4vw,2.4rem)/1 var(--display);text-transform:uppercase;letter-spacing:.03em;color:#fff;overflow-wrap:anywhere}
.show__venue{color:var(--text)}
.show__tix{grid-area:tix;margin-top:8px}
.show__tix .free{font:500 .8rem var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
@media (min-width:760px){
  .show{grid-template-columns:minmax(150px,230px) 1fr auto;grid-template-areas:"date where tix";gap:24px}
  .show__tix{margin-top:0}
}
.shows--past .show{opacity:.72;padding-block:14px}
.shows--past .show__date{font-size:clamp(1.6rem,4vw,2.4rem)}
.shows--past .show__city{font-size:clamp(1.2rem,3vw,1.7rem)}
.shows--ph{margin-top:28px;border-top:0}
.show.ph{margin-bottom:12px;padding:18px 18px;border-bottom-width:2px}
.show.ph:hover{background:transparent;box-shadow:none;padding-left:18px}
.show.ph .ph__tag{grid-column:1/-1;justify-self:start}
.show.ph .show__date,.show.ph .show__city{color:#d2d2d2}

/* ---------- Musik ---------- */
.releases{list-style:none;margin:0;padding:0;display:grid;gap:clamp(28px,4vw,48px);grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}
.release__cover{position:relative;margin:0 0 18px;box-shadow:10px 10px 0 #fff;border:3px solid #fff;background:#111;aspect-ratio:1/1}
.release__cover img{display:block;width:100%;height:100%;object-fit:cover;filter:var(--photo-filter)}
.release h3{margin:0;font:400 clamp(1.8rem,4vw,2.5rem)/1 var(--display);text-transform:uppercase;letter-spacing:.03em;color:#fff}
.release__meta{margin:4px 0 14px;font:500 .78rem/1.4 var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.links a{display:inline-flex;align-items:center;min-height:48px;padding:0 18px;border:2px solid #fff;text-decoration:none;font:400 1rem var(--display);text-transform:uppercase;letter-spacing:.08em;transition:background-color .12s,color .12s}
.links a:hover{background:#fff;color:#000}
.release.ph{padding:18px}
.release.ph .release__cover{border:2px dashed #8a8a8a;box-shadow:none;display:grid;place-items:center;background:transparent}
.consent{margin-top:16px;padding:16px;border:2px solid #fff;max-width:520px}
.consent p{margin:0 0 14px;font-size:.95rem;color:var(--text)}
.embed iframe{display:block;width:100%;border:0;margin-top:16px;background:#111}
.profiles{margin-top:clamp(28px,4vw,48px)}

/* ---------- Die Band ---------- */
.band{display:grid;gap:clamp(28px,5vw,64px)}
@media (min-width:900px){.band{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:start}}
.band__photo{margin:0}
.band__photo img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;filter:var(--photo-filter);border:3px solid #fff}
.band__photo.ph{aspect-ratio:3/2;display:grid;place-items:center;padding:20px;text-align:center}
.band__text p{margin:0 0 1.1em;max-width:60ch;font-size:clamp(1.1rem,1.6vw,1.3rem);line-height:1.6;color:#f2f2f2}
.band__text .ph p{max-width:none}
.members{list-style:none;margin:clamp(24px,4vw,40px) 0 0;padding:0;border-top:3px solid #fff}
.members li{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 20px;padding:14px 0;border-bottom:2px solid #fff}
.members .name{font:400 clamp(1.5rem,3vw,2.1rem)/1 var(--display);text-transform:uppercase;letter-spacing:.03em;color:#fff}
.members .role{font:500 .78rem/1.4 var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.members li.ph{padding:14px 14px;border-width:2px;margin-top:10px}

/* ---------- Galerie ---------- */
.gallery{list-style:none;margin:0 0 clamp(28px,4vw,44px);padding:0;display:grid;gap:10px;grid-template-columns:repeat(2,1fr);grid-auto-rows:34vw;grid-auto-flow:dense}
.g{position:relative;margin:0;overflow:hidden;border:2px solid #fff;background:#111;min-height:0}
.g img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:var(--photo-filter);transition:transform .25s}
.g:hover img{transform:scale(1.03)}
.g--gross{grid-column:span 2;grid-row:span 2}
.g--hoch{grid-column:span 1;grid-row:span 2}
.g--breit{grid-column:span 2;grid-row:span 1}
.g--klein{grid-column:span 1;grid-row:span 1}
.g figcaption{position:absolute;left:0;bottom:0;z-index:1;max-width:100%;background:#000;color:#fff;font:500 .66rem/1.3 var(--mono);text-transform:uppercase;letter-spacing:.08em;padding:5px 8px}
.g.ph{display:grid;place-items:center;border:2px dashed #8a8a8a;text-align:center;padding:12px}
.g.ph .ph__text{max-width:22ch}
@media (min-width:760px){
  .gallery{grid-template-columns:repeat(6,1fr);grid-auto-rows:clamp(110px,14vw,190px);gap:12px}
  .g--gross{grid-column:span 4;grid-row:span 2}
  .g--hoch{grid-column:span 2;grid-row:span 2}
  .g--breit{grid-column:span 3;grid-row:span 1}
  .g--klein{grid-column:span 2;grid-row:span 1}
}
.ig-cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;padding:22px 0;border-top:3px solid #fff}
.ig-cta__text{margin:0;font:400 clamp(1.6rem,4vw,2.6rem)/1 var(--display);text-transform:uppercase;letter-spacing:.03em;color:#fff}
.ig-embed{margin-top:24px}
.ig-embed .grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));margin-top:20px}

/* ---------- Booking ---------- */
.contact{display:grid;gap:clamp(24px,4vw,48px)}
@media (min-width:900px){.contact{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:stretch}}
.contact__lead{margin:0;font:400 clamp(1.8rem,4.4vw,3.2rem)/1.05 var(--display);text-transform:uppercase;letter-spacing:.02em;color:#fff;max-width:14ch}
.contact__note{margin:14px 0 0;font-size:1.05rem;color:var(--text);max-width:36ch}
.panel{
  --focus:#000;
  background:#fff;color:#000;padding:clamp(24px,4vw,44px);
  clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,26px 100%,0 calc(100% - 26px));
  display:flex;flex-direction:column;align-items:flex-start;gap:12px;
}
.panel__label{margin:0;font:500 .76rem/1.4 var(--mono);text-transform:uppercase;letter-spacing:.16em;color:#333}
.panel__big{margin:0;font:400 clamp(1.9rem,5vw,3.4rem)/1.02 var(--display);text-transform:uppercase;letter-spacing:.02em;overflow-wrap:anywhere}
.panel__mail{display:inline-block;margin:0;padding:0;font:400 clamp(1.5rem,4.2vw,3rem)/1.1 var(--display);letter-spacing:.02em;color:#000;text-decoration:none;border-bottom:6px solid var(--acid);overflow-wrap:anywhere;transition:background-color .12s}
.panel__mail:hover{background:var(--acid)}
.panel .btn{margin-top:8px}
.panel .btn:focus-visible{outline-color:#000}
.panel.ph{background:transparent;color:#d2d2d2;clip-path:none}
.panel.ph .panel__label{color:#d2d2d2}

/* ---------- Footer ---------- */
.footer{padding:clamp(36px,6vw,64px) 0 calc(clamp(36px,6vw,64px) + env(safe-area-inset-bottom))}
.footer__in{display:grid;gap:24px;align-items:center}
.footer__logo{display:block;line-height:0;width:min(220px,60vw)}
.footer__logo img{width:100%;height:auto;display:block}
.footer__links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 8px}
.footer__links li{display:flex;align-items:center;gap:8px}
.footer__links a{display:inline-flex;align-items:center;min-height:48px;padding:0 12px 0 0;font:400 1.05rem var(--display);text-transform:uppercase;letter-spacing:.08em;text-decoration:none}
.footer__links a:hover{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px}
.open{font:500 .66rem/1 var(--mono);text-transform:uppercase;letter-spacing:.12em;border:1px dashed #b3b3b3;color:#d2d2d2;padding:4px 6px;margin-right:10px}
.footer__copy{margin:0;font:500 .75rem/1.4 var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
@media (min-width:900px){
  .footer__in{grid-template-columns:auto 1fr auto;gap:40px}
  .footer__links{justify-content:center}
}

/* ---------- Rechtstexte ---------- */
.legal{padding:calc(var(--nav-h) + 48px) 0 72px}
.legal h1{margin:0 0 28px;font:400 clamp(3rem,10vw,6.5rem)/.9 var(--display);text-transform:uppercase;color:#fff}
.legal h2{margin:40px 0 10px;font:400 clamp(1.5rem,3.4vw,2.1rem)/1.05 var(--display);text-transform:uppercase;letter-spacing:.03em;color:#fff}
.legal p,.legal li{max-width:68ch}
.legal .ph{padding:12px 16px;margin:10px 0}
.legal a{color:#fff;text-underline-offset:4px}
.legal .back{display:inline-flex;align-items:center;min-height:48px;margin-bottom:24px;font:400 1rem var(--display);text-transform:uppercase;letter-spacing:.08em;text-decoration:none;border-bottom:3px solid #fff}

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.001ms!important;animation-duration:.001ms!important;scroll-behavior:auto!important}
  .g:hover img{transform:none}
}