/* ==========================================================================
   Zack Ahoi – zack-ahoi.de
   Design "Sturmfahrt": dunkel & kinoreif, Dunkelpetrol + Gold, Piratenschrift
   ========================================================================== */

@font-face{font-family:'Pirata One';src:url('../fonts/pirata-one-400.woff2') format('woff2');font-display:swap}
@font-face{font-family:'EB Garamond';src:url('../fonts/eb-garamond-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'EB Garamond';src:url('../fonts/eb-garamond-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'EB Garamond';src:url('../fonts/eb-garamond-400-italic.woff2') format('woff2');font-style:italic;font-display:swap}

:root{
  --bg:#0b1517;      /* Grundton: fast schwarzes Petrol */
  --bg2:#102024;     /* Kartenflächen */
  --ink:#e9dfc8;     /* Creme-Text */
  --muted:#a9a08a;   /* gedämpfter Text */
  --accent:#c9a95c;  /* Gold */
  --line:rgba(233,223,200,.18);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:'EB Garamond',Georgia,serif;font-size:1.15rem;line-height:1.65;overflow-x:hidden}
h1,h2,h3,.brand{font-family:'Pirata One',serif;font-weight:400;letter-spacing:.04em}
a{color:var(--accent)}
img{max-width:100%;height:auto;display:block}/* height:auto: nie verzerren, Breite/Höhe-Attribute dienen nur der Platzreservierung */
.wrap{max-width:1150px;margin:0 auto;padding:0 1.25rem}

.skip{position:absolute;left:-999px;top:0;background:var(--accent);color:var(--bg);padding:.6rem 1rem;z-index:99}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ===== Animiertes Wasser: wabernde Farbflächen + treibende Meerestextur ===== */
.sea{position:fixed;inset:0;z-index:-3;background:linear-gradient(180deg,#0b1517,#0d1c20 55%,#0b1517)}
.sea::before,.sea::after{content:"";position:absolute;inset:-35%;border-radius:50%;filter:blur(70px);opacity:.85;will-change:transform}
.sea::before{background:radial-gradient(circle at 35% 45%,#1b5a66 0 28%,transparent 60%),radial-gradient(circle at 70% 65%,#124049 0 24%,transparent 55%);animation:drift1 14s ease-in-out infinite alternate}
.sea::after{background:radial-gradient(circle at 60% 30%,#265449 0 22%,transparent 55%),radial-gradient(circle at 30% 75%,#175263 0 26%,transparent 60%);animation:drift2 19s ease-in-out infinite alternate}
@keyframes drift1{from{transform:translate(-9%,-6%) scale(1) rotate(0deg)}to{transform:translate(10%,8%) scale(1.25) rotate(10deg)}}
@keyframes drift2{from{transform:translate(9%,5%) scale(1.18) rotate(8deg)}to{transform:translate(-10%,-8%) scale(.95) rotate(-8deg)}}
.sea-tex{position:fixed;inset:0;z-index:-2;background:url('../img/tex-sea.jpg') center/cover;opacity:.22;mix-blend-mode:screen;animation:swell 10s ease-in-out infinite alternate;will-change:transform}
@keyframes swell{from{transform:scale(1.03) translateY(-2%)}to{transform:scale(1.14) translateY(2.5%)}}
@media (prefers-reduced-motion: reduce){.sea::before,.sea::after,.sea-tex{animation:none}}

/* ===== Navigation (Burger-Menü rein per CSS-Checkbox) ===== */
header{position:fixed;inset:0 0 auto 0;z-index:10;background:linear-gradient(rgba(11,21,23,.94),rgba(11,21,23,.78) 70%,transparent);backdrop-filter:blur(4px)}
.nav{display:flex;align-items:center;justify-content:space-between;max-width:1150px;margin:0 auto;padding:.7rem 1.25rem;gap:1rem}
.brand{font-size:1.6rem;color:var(--ink);text-decoration:none;white-space:nowrap}
.nav input{display:none}
.nav ul{display:flex;gap:1.6rem;list-style:none;align-items:center}
.nav ul a{color:var(--ink);text-decoration:none;font-size:1.02rem;text-transform:uppercase;letter-spacing:.13em}
.nav ul a:hover{color:var(--accent)}
.nav ul a.cta{background:var(--accent);color:var(--bg);padding:.45rem 1.1rem;border-radius:3px;font-weight:600}
.nav ul a.cta:hover{filter:brightness(1.1);color:var(--bg)}
.burger{display:none;cursor:pointer;font-size:1.8rem;color:var(--ink)}
@media(max-width:860px){
  .burger{display:block}
  .nav ul{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--bg2);padding:1rem 1.25rem 1.5rem;border-bottom:1px solid var(--line);align-items:stretch;text-align:center}
  .nav input:checked ~ ul{display:flex}
}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;line-height:1;border:1px solid var(--accent);color:var(--accent);text-decoration:none;padding:.85rem 2.2rem;text-transform:uppercase;letter-spacing:.16em;font-size:1.05rem;transition:.2s;border-radius:3px;cursor:pointer;background:transparent;font-family:inherit}
.btn svg{width:1.25em;height:1.25em;fill:currentColor;flex:none}
.btn:hover{background:var(--accent);color:var(--bg)}
.btn.fill{background:var(--accent);color:var(--bg);font-weight:600;box-shadow:0 6px 24px rgba(201,169,92,.35)}
.btn.fill:hover{filter:brightness(1.12)}
.btn.big{font-size:1.3rem;padding:1.1rem 3rem}
.btnrow{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* ===== Hero ===== */
.hero{min-height:100svh;display:grid;place-items:center;text-align:center;position:relative;isolation:isolate;padding:6rem 1rem 4rem}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background:url('../img/hero-band-1920.jpg') center 30%/cover no-repeat}
@media(max-width:960px){.hero::before{background-image:url('../img/hero-band-960.jpg')}}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,21,23,.28),rgba(11,21,23,.46) 60%,var(--bg))}
.hero img.logo{width:min(430px,70vw);margin:0 auto 1.5rem;filter:drop-shadow(0 4px 24px rgba(0,0,0,.6))}
.hero p.claim{font-size:1.5rem;font-style:italic;max-width:34ch;margin:0 auto 2.2rem;text-shadow:0 2px 14px rgba(0,0,0,.85)}
.hero h1{position:absolute;left:-9999px}/* Für Suchmaschinen/Screenreader; visuell steht das Logo */

/* Foto-Credit: klebt an der Ecke des jeweiligen Fotos, unabhängig vom Zuschnitt */
.photo-credit{position:absolute;z-index:5;font-size:.7rem;letter-spacing:.02em;color:rgba(233,223,200,.7);text-shadow:0 1px 5px rgba(0,0,0,.95);pointer-events:none}
.photo-credit.bl{left:.6rem;bottom:.5rem}
.photo-credit.br{right:.6rem;bottom:.5rem}
.pic{position:relative}
button.pic{display:block;width:100%;padding:0;margin:0;border:none;background:none;font:inherit;color:inherit;text-align:inherit;cursor:zoom-in}
button.pic:hover img{filter:brightness(1.08)}

/* Lightbox: Klick-Vergrößerung für freistehende Fotos (kein Hintergrundbild) */
dialog.lightbox{margin:auto;border:none;background:transparent;padding:0;max-width:96vw;max-height:96vh;overflow:visible}
dialog.lightbox::backdrop{background:rgba(5,10,11,.88);backdrop-filter:blur(3px)}
dialog.lightbox .inner{position:relative;display:inline-block;max-width:96vw;max-height:96vh;line-height:0}
dialog.lightbox img{display:block;max-width:96vw;max-height:96vh;width:auto;height:auto;border:1px solid var(--accent);box-shadow:0 30px 80px rgba(0,0,0,.7)}
dialog.lightbox .close{position:absolute;z-index:6;top:.6rem;right:.6rem;background:rgba(11,21,23,.65);border:none;color:var(--ink);font-size:1.6rem;cursor:pointer;line-height:1;padding:.3rem .6rem;border-radius:3px}
dialog.lightbox .close:hover{color:var(--accent)}
dialog.lightbox .photo-credit{font-size:.85rem}

/* ===== Sektionen ===== */
#band,#crew,#termine,#presse,#veranstalter,#buchen{scroll-margin-top:4.6rem}
section{padding:5rem 0;border-top:1px solid var(--line);background:rgba(11,21,23,.55)}
h2{font-size:2.6rem;color:var(--accent);margin-bottom:1.2rem}
h2::after{content:" ⚓";font-size:1.4rem;opacity:.5}
.cols{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center}
@media(max-width:780px){.cols{grid-template-columns:1fr}}
.cols img{border:1px solid var(--line);box-shadow:0 10px 40px rgba(0,0,0,.5)}
.kurs{list-style:none;margin:1rem 0}
.kurs li{padding-left:1.8em;position:relative;margin:.35rem 0}
.kurs li::before{content:"⚓";position:absolute;left:0;color:var(--accent)}
.songs{font-style:italic;color:var(--muted)}

/* ===== Crew: Vollbreite-Scroller, pendelt von allein ===== */
.strip{overflow-x:auto;padding:0 0 1.4rem;width:100%;scrollbar-color:var(--accent) transparent}
.strip::-webkit-scrollbar{height:8px}
.strip::-webkit-scrollbar-thumb{background:var(--accent);border-radius:99px}
.strip::-webkit-scrollbar-track{background:rgba(233,223,200,.08);border-radius:99px}
.track{display:flex;gap:1.2rem;width:max-content;padding:0 1.25rem}
.member{flex:0 0 240px;position:relative;background:var(--bg2);border:1px solid var(--line);overflow:hidden;padding:0;text-align:left;color:inherit;font:inherit;cursor:pointer}
.member .imgs{display:block;position:relative;aspect-ratio:3/4;overflow:hidden}
.member .imgs img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .45s ease,filter .45s ease,transform .45s ease}
.member .imgs img.first{z-index:1}
.member .imgs img.second{opacity:0;z-index:2;filter:grayscale(1) contrast(1.08)}
.member:hover .imgs img.second,.member:focus-visible .imgs img.second{opacity:1;transform:scale(1.04)}
.member .imgs .alias{position:absolute;z-index:3;inset:auto 0 .8rem 0;text-align:center;font-family:'Pirata One',serif;font-size:2rem;color:var(--accent);text-shadow:0 2px 10px rgba(0,0,0,.9);opacity:0;transform:translateY(8px);transition:.35s;pointer-events:none}
.member:hover .imgs .alias,.member:focus-visible .imgs .alias{opacity:1;transform:none}
.member .imgs .photo-credit{font-size:.62rem;transition:opacity .35s ease}
.member:hover .imgs .photo-credit,.member:focus-visible .imgs .photo-credit{opacity:0}
.member .t{display:block;position:relative;z-index:4;padding:.8rem 1rem .95rem;background:var(--bg2)}
.member .n{display:block;font-family:'Pirata One',serif;font-size:1.35rem}
.member .r{display:block;font-size:.98rem;color:var(--muted);font-style:italic}
.hint{color:var(--muted);font-style:italic;margin:.4rem 0 1.2rem}

/* ===== Crew-Dialog (Steckbrief) ===== */
dialog.bio{margin:auto;border:1px solid var(--accent);background:var(--bg2);color:var(--ink);max-width:min(680px,92vw);max-height:min(88vh,900px);overflow:auto;padding:0;box-shadow:0 30px 80px rgba(0,0,0,.7)}
dialog.bio::backdrop{background:rgba(5,10,11,.8);backdrop-filter:blur(3px)}
dialog.bio .inner{display:grid;grid-template-columns:240px 1fr;gap:0}
dialog.bio img{width:100%;height:100%;object-fit:cover}
dialog.bio .photo-credit{font-size:.62rem}
dialog.bio .txt{padding:1.6rem 1.8rem 1.8rem}
dialog.bio h3{font-size:1.9rem;color:var(--accent)}
dialog.bio .rolle{font-style:italic;color:var(--muted);margin-bottom:.9rem}
dialog.bio .close{position:absolute;z-index:6;top:.5rem;right:.6rem;background:rgba(11,21,23,.5);border:none;color:var(--ink);font-size:1.7rem;cursor:pointer;line-height:1;padding:.2rem .5rem;border-radius:3px}
dialog.bio .close:hover{color:var(--accent)}
@media(max-width:620px){dialog.bio .inner{grid-template-columns:1fr}dialog.bio img{max-height:44vh}}

/* ===== Termine ===== */
.gig{display:grid;grid-template-columns:130px 1fr;gap:1.2rem;align-items:baseline;padding:1.1rem 0;border-bottom:1px solid var(--line)}
.gig .d{font-family:'Pirata One',serif;font-size:1.5rem;color:var(--accent)}
.gig .v{color:var(--muted);font-style:italic}
.gig a{white-space:nowrap}
@media(max-width:600px){.gig{grid-template-columns:100px 1fr}}
#gigs .leer{font-style:italic;color:var(--muted);padding:1rem 0}
#gigs h3.vergangen{font-size:1.6rem;color:var(--muted);margin:2.2rem 0 .3rem}
.gig.past{opacity:.55}

/* ===== Downloads ===== */
.dl{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
@media(max-width:700px){.dl{grid-template-columns:1fr}}
.dl .box{border:1px solid var(--line);background:var(--bg2);padding:2rem}
.dl h3{font-size:1.8rem;color:var(--accent);margin-bottom:.6rem}
.dl .meta{font-size:.95rem;color:var(--muted);margin-top:.6rem}

/* ===== Booking: groß & unübersehbar ===== */
.booking{text-align:center;padding:6.5rem 1rem;position:relative;isolation:isolate;border-top:1px solid var(--line)}
.booking::before{content:"";position:absolute;inset:0;z-index:-2;background:url('../img/hero-stage-1920.jpg') center 20%/cover}
@media(max-width:960px){.booking::before{background-image:url('../img/hero-stage-960.jpg')}}
.booking::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(11,21,23,.52)}
.booking h2{font-size:clamp(2.8rem,7vw,4.5rem);margin-bottom:.4rem;text-shadow:0 2px 18px rgba(0,0,0,.9)}
.booking h2::after{content:""}
.booking p.sub{font-size:1.4rem;font-style:italic;max-width:44ch;margin:0 auto 2.4rem;text-shadow:0 2px 14px rgba(0,0,0,.85)}
.booking .mail{display:block;margin-top:1.4rem;font-size:1.15rem;color:var(--muted);text-shadow:0 1px 8px rgba(0,0,0,.85)}

/* ===== Footer ===== */
footer{border-top:1px solid var(--line);padding:2rem 0;color:var(--muted);font-size:1rem;text-align:center;background:rgba(11,21,23,.8)}
footer a{color:var(--muted)}

/* ===== Unterseiten (Impressum/Datenschutz) ===== */
.page{max-width:820px;margin:0 auto;padding:8rem 1.25rem 4rem;background:rgba(11,21,23,.55);min-height:100svh}
.page h1{font-size:2.6rem;color:var(--accent);margin-bottom:1.6rem}
.page h2{font-size:1.7rem;margin:2.2rem 0 .7rem}
.page h2::after{content:""}
.page p,.page ul{margin-bottom:1rem}
.page ul{padding-left:1.4rem}
.platzhalter{background:rgba(201,169,92,.16);border:1px dashed var(--accent);padding:.05em .35em;border-radius:3px}