/* hagen-roesler.com – festes Layout. Schwarz, Gold, Oswald + Raleway (lokal, ohne Google-Server) */
@font-face{font-family:Oswald;font-weight:300;font-display:swap;src:url(fonts/oswald-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:Oswald;font-weight:400;font-display:swap;src:url(fonts/oswald-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Oswald;font-weight:600;font-display:swap;src:url(fonts/oswald-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:Raleway;font-weight:400;font-display:swap;src:url(fonts/raleway-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Raleway;font-weight:400;font-style:italic;font-display:swap;src:url(fonts/raleway-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:Raleway;font-weight:500;font-display:swap;src:url(fonts/raleway-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Raleway;font-weight:700;font-display:swap;src:url(fonts/raleway-latin-700-normal.woff2) format("woff2")}

:root{
  --bg:#000;--band:#191919;--linie:#2c2c2c;--fg:#fff;--leise:#bdb8ad;--gold:#FFC03A;--gold-tinte:#000;
  --display:Oswald,"Arial Narrow",Impact,sans-serif;--text:Raleway,"Segoe UI",Helvetica,Arial,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:17px/1.7 var(--text)}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold)}
a:hover{color:#ffd27a}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.wrap{max-width:1100px;margin:0 auto;padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}
.sprung{position:absolute;left:-999px;top:0;background:var(--gold);color:#000;padding:8px 12px;z-index:20}
.sprung:focus{left:8px}
.vorschau-band{background:var(--gold);color:#000;font:600 13px/1.4 var(--text);text-align:center;padding:6px 12px}

h1,h2,h3{font-family:var(--display);text-transform:uppercase;font-weight:400;letter-spacing:.06em;line-height:1.15;margin:0;text-wrap:balance;overflow-wrap:anywhere;hyphens:auto}
h1{font-size:clamp(34px,6.5vw,68px);font-weight:300}
h2{font-size:clamp(26px,3.8vw,38px)}
h2.klein{font-size:clamp(21px,2.6vw,26px);margin-top:14px}
h3{font-size:20px;letter-spacing:.08em}
p{margin:0;max-width:70ch}
.eyebrow{font:600 13px/1.4 var(--display);letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.fluss{display:flex;flex-direction:column;gap:18px;min-width:0}
section{padding-block:72px}
section.band{background:var(--band)}
.hinweis{color:var(--leise);font-size:14px}

/* Kopf */
.kopf{position:sticky;top:0;z-index:10;background:rgba(0,0,0,.94);border-bottom:1px solid var(--linie);backdrop-filter:blur(6px)}
.kopf-innen{display:flex;align-items:center;gap:20px;padding-block:12px;flex-wrap:wrap}
.logo{line-height:0;margin-right:auto}
.logo img{height:46px;width:auto}
.logo-text{font:600 22px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--fg)}
.logo-text b{color:var(--gold);font-weight:600}
.hauptmenue{display:flex;flex-wrap:wrap;gap:4px 20px;align-items:center}
.hauptmenue a{color:var(--fg);text-decoration:none;font:500 15px/2 var(--text);letter-spacing:.03em}
.hauptmenue a:hover,.hauptmenue a[aria-current]{color:var(--gold)}
.hauptmenue a.sprache{border:1px solid var(--linie);padding:0 9px;font:600 13px/28px var(--display);letter-spacing:.12em}
.menue-knopf{display:none;background:none;border:1px solid var(--linie);color:var(--fg);font:600 13px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;padding:10px 14px;cursor:pointer}
@media (max-width:900px){
  .menue-knopf{display:block}
  .hauptmenue{display:none;width:100%;flex-direction:column;align-items:flex-start;gap:0;padding-block:8px}
  .hauptmenue.offen{display:flex}
  .hauptmenue a{font-size:18px;line-height:2.4}
  .hauptmenue a.sprache{margin-top:8px}
}

/* Knöpfe */
.knoepfe{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;font:600 14px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;padding:15px 22px;text-decoration:none;border:1px solid var(--gold);color:var(--gold);background:none;cursor:pointer}
.btn:hover{background:rgba(255,192,58,.1);color:var(--gold)}
.btn.voll{background:var(--gold);color:var(--gold-tinte)}
.btn.voll:hover{background:#ffd27a}

/* Startseite */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:0;min-height:min(78vh,720px)}
.hero-bild{position:relative;overflow:hidden}
.hero-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-text{padding:64px max(18px,env(safe-area-inset-right)) 64px clamp(24px,5vw,64px);display:flex;flex-direction:column;justify-content:center;gap:20px;max-width:640px}
.hero-text h1 b{display:block;font-weight:600}
.hero:not(:has(.hero-bild)){grid-template-columns:minmax(0,1fr)}
@media (max-width:760px){.hero{grid-template-columns:minmax(0,1fr);min-height:0}.hero-bild{height:300px}.hero-text{padding:40px max(18px,env(safe-area-inset-right)) 48px max(18px,env(safe-area-inset-left))}}

.zwei{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
.zwei.schmal{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:28px}
@media (max-width:760px){.zwei,.zwei.schmal{grid-template-columns:minmax(0,1fr);gap:32px}}
figure{margin:0}
.bild img{width:100%;object-fit:cover}
.bild.quer img{aspect-ratio:4/3}
.bild.hoch img{aspect-ratio:3/4}
.bild.quadrat img{aspect-ratio:1}
.ueber .seitlich{position:sticky;top:96px}
@media (max-width:760px){.ueber .seitlich{position:static;order:-1;max-width:420px}}

blockquote{margin:0;border-left:3px solid var(--gold);padding-left:24px;font:italic 400 21px/1.6 var(--text);max-width:62ch}
blockquote cite{display:block;font:600 13px/1.4 var(--display);font-style:normal;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-top:14px}

/* Termine */
.termine{list-style:none;margin:0;padding:0}
.termin{display:grid;grid-template-columns:110px minmax(0,1fr) auto;gap:20px;align-items:start;padding-block:20px;border-top:1px solid var(--linie)}
.termin:last-child{border-bottom:1px solid var(--linie)}
.termin .datum{font:600 15px/1.25 var(--display);letter-spacing:.08em;color:var(--gold);text-transform:uppercase;font-variant-numeric:tabular-nums}
.termin .datum b{display:block;font-size:34px;font-weight:400;color:var(--fg)}
.termin-text{display:flex;flex-direction:column;gap:6px;min-width:0}
.termin .ort{color:var(--leise);font-size:15px}
.termin-beschr{font-size:15px}
.termin.abgesagt h3,.termin.abgesagt .datum{text-decoration:line-through;opacity:.6}
.marke{font:600 11px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--gold);color:var(--gold);padding:6px 8px;white-space:nowrap}
.leer{color:var(--leise)}
@media (max-width:560px){.termin{grid-template-columns:72px minmax(0,1fr)}.termin .datum b{font-size:28px}.termin .marke{grid-column:2;justify-self:start}}

/* Musik */
.album{display:grid;grid-template-columns:220px minmax(0,1fr);gap:32px;padding-block:32px;border-top:1px solid var(--linie)}
.cover-leer{aspect-ratio:1;background:repeating-radial-gradient(circle,#161616 0 2px,#0c0c0c 2px 5px);border-radius:50%}
.album .unter{color:var(--gold);font:400 14px/1.4 var(--display);letter-spacing:.14em;text-transform:uppercase;margin-top:-8px}
@media (max-width:600px){.album{grid-template-columns:minmax(0,1fr)}.album figure,.cover-leer{max-width:260px}}
.spotify{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between;border:1px solid var(--linie);padding:28px}

/* Videos */
.videos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 28px}
@media (max-width:900px){.videos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.videos{grid-template-columns:minmax(0,1fr)}}
.video{display:flex;flex-direction:column;gap:10px}
.video-bild{position:relative;aspect-ratio:16/9;width:100%;padding:0;border:1px solid var(--linie);background:#111;cursor:pointer;overflow:hidden}
.video-bild img{width:100%;height:100%;object-fit:cover;opacity:.85;transition:opacity .2s}
.video-bild:hover img{opacity:1}
.video-bild:hover{border-color:var(--gold)}
.play{position:absolute;inset:0;margin:auto;width:64px;height:64px;border-radius:50%;background:rgba(0,0,0,.65);border:2px solid var(--gold)}
.play::after{content:"";position:absolute;left:25px;top:19px;border-left:20px solid var(--gold);border-top:13px solid transparent;border-bottom:13px solid transparent}
.video iframe{aspect-ratio:16/9;width:100%;height:auto;border:0;display:block}
.video h3{font-size:17px}
.video-info{color:var(--leise);font-size:14px}

/* Buchung */
.angebote{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
@media (max-width:960px){.angebote{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.angebote{grid-template-columns:minmax(0,1fr)}}
.angebot{display:flex;flex-direction:column;gap:12px}
.angebot-bild img{aspect-ratio:295/323}
.angebot h3{border-top:2px solid var(--gold);padding-top:14px;font-size:18px}
.angebot p{font-size:15px}

/* Galerie, Stimmen */
.galerie{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:700px){.galerie{grid-template-columns:repeat(2,minmax(0,1fr))}}
.galerie img{aspect-ratio:1;object-fit:cover;width:100%}
.galerie figcaption{color:var(--leise);font-size:13px;padding-top:6px}
.stimme{display:flex;flex-direction:column;gap:14px;padding-block:32px;border-top:1px solid var(--linie)}
.stimme .quelle{font:600 13px/1.4 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.text p+p{margin-top:0}

/* Formular */
.anfrage{display:grid;gap:16px;max-width:640px}
.anfrage label{display:flex;flex-direction:column;gap:6px;font:600 12px/1.3 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--leise)}
.anfrage .paar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
@media (max-width:560px){.anfrage .paar{grid-template-columns:minmax(0,1fr)}}
.anfrage input,.anfrage textarea,.anfrage select{background:#0d0d0d;border:1px solid #3a3a3a;color:var(--fg);font:16px/1.4 var(--text);padding:12px;width:100%;border-radius:0}
.anfrage input:focus,.anfrage textarea:focus,.anfrage select:focus{outline:none;border-color:var(--gold)}
.anfrage .haken{flex-direction:row;align-items:flex-start;gap:10px;text-transform:none;letter-spacing:0;font:400 14px/1.5 var(--text)}
.anfrage .haken input{width:auto;margin-top:4px}
.feld-falle{position:absolute;left:-5000px;width:1px;height:1px;overflow:hidden}
.formular-meldung{font-weight:500;color:var(--gold)}
address{font-style:normal;display:flex;flex-direction:column;gap:10px}

/* Fuß */
.fuss{border-top:1px solid var(--linie);padding-block:36px;color:var(--leise);font-size:14px}
.fuss-innen{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;align-items:center}
.fuss nav,.social{display:flex;gap:18px;flex-wrap:wrap}
.fuss a{color:var(--leise)}
.fuss a:hover{color:var(--gold)}
.social a{text-decoration:none;font:600 13px/1 var(--display);letter-spacing:.14em;text-transform:uppercase}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}