/* ===== Fonts (lokal, keine Drittanbieter) ===== */
/* Oswald ist eine variable Schrift: eine Datei deckt 500-700 ab */
@font-face{font-family:Oswald;src:url("../fonts/oswald-500.woff2")format("woff2");font-weight:500 700;font-display:swap}
@font-face{font-family:Barlow;src:url("../fonts/barlow-400.woff2")format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Barlow;src:url("../fonts/barlow-500.woff2")format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Barlow;src:url("../fonts/barlow-600.woff2")format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Barlow;src:url("../fonts/barlow-400-italic.woff2")format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:FreeScript;src:url("../fonts/freescript.ttf")format("truetype");font-weight:400;font-display:swap}

/* ===== Tokens ===== */
:root{
  --black:#100e0c; --surface:#151311; --card:#1d1b19; --line:#2b2724;
  --gold:#FFB703; --cream:#FDFBF7; --muted:#aba49b;
  --gutter:clamp(20px,5vw,64px); --maxw:1180px; --section-pad:clamp(70px,9vw,124px);
  --r-btn:4px; --r-box:6px;
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-in-out:cubic-bezier(.77,0,.175,1);
  --ease-drawer:cubic-bezier(.22,.61,.36,1);
  /* Header-Hoehe inkl. unterer 1px-Linie – daran haengen Leiste, Klebeposition des Hero,
     Sprungziele und das mobile Menue. Das Logo ragt darueber hinaus und zaehlt nicht mit.
     --logo-top: Luft ueber dem Logo; waechst sie, muss --header-h um denselben Betrag mit.
     --head-h: Abstand Logo-Oberkante bis obere Linie (so weit ragt der Gitarrenkopf heraus).
     --logo-w: aus dem Seitenverhaeltnis von logo.svg (viewBox 94 x 155). */
  --header-h:141px; --logo-h:160px; --logo-top:26px; --head-h:44px;
  --logo-w:calc(var(--logo-h) * 94 / 155);
}
/* Skalierung des Header-Logos (1 = gross, .5 = kompakt). Registriert, damit der Wert
   animierbar ist: Logo und Linien-Aussparungen rechnen beide damit und laufen so in
   jedem Frame exakt synchron. Browser ohne @property springen ohne Animation um. */
@property --logo-s{syntax:"<number>";inherits:true;initial-value:1}
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
/* Ohne JS scrollt der Browser selbst weich; mit JS uebernimmt main.js die Kurve,
   damit das Tempo in allen Browsern gleich ist (die native Dauer ist nicht steuerbar).
   text-size-adjust: iOS vergroessert sonst im Querformat eigenmaechtig die Schrift. */
/* Hintergrund am Wurzelelement explizit: Safari faerbt Leisten und Rand aus der Seitenfarbe (wie bei der Referenz) */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;background-color:var(--black);color-scheme:dark}
html.js{scroll-behavior:auto}
/* Sprungziel: Die obere Linie der Sektion verschwindet 1–2px oberhalb der Header-Unterkante
   hinter dem Header – sichtbar bleibt nur die Header-Linie mit den Logo-Aussparungen. */
section[id]{scroll-margin-top:calc(var(--header-h) - 2px)}
/* main.js fokussiert das Sprungziel (tabindex -1), damit die Tastatur dort weitermacht. Der Abschnitt
   ist kein bedienbares Element: kein Fokusrahmen. Safari/iPadOS setzt :focus-visible bei so einem
   Programmfokus mal ja, mal nein – dann stand ein gelber Rahmen um den ganzen Abschnitt (z. B. Fotos). */
section[id]:focus{outline:none}
/* Sanftes Erscheinen jeder Seite. Bewusst reines CSS ohne JS und ohne Vorhang-
   Overlay: kennt ein Browser die Animation nicht, ist die Seite einfach sofort
   da – sie kann nie unsichtbar haengenbleiben. */
@keyframes page-in{from{opacity:0}to{opacity:1}}
/* overflow-wrap: lange Links/Adressen brechen um statt ueber den Rand zu ragen */
body{background:var(--black);color:var(--cream);font:400 19px/1.65 Barlow,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip;overflow-wrap:break-word;animation:page-in .5s ease backwards}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
h1,h2,h3{font-family:Oswald,"Arial Narrow",sans-serif;font-weight:600;line-height:1.15;letter-spacing:.01em}
/* Plakat-Ueberschriften: gross, fett, eng gesetzt. Rechtsseiten setzen ihre h2 selbst klein (.legal-page h2). */
/* line-height 1.04: darunter stossen Umlaut-Punkte (BÜHNE) an die Zeile darueber */
h2{font-size:clamp(44px,8.6vw,112px);font-weight:700;line-height:1.04;text-transform:uppercase;letter-spacing:.01em}
h3{font-size:clamp(22px,2.6vw,28px)}
p{max-width:65ch}
/* Fliesstext im Blocksatz; Silbentrennung (lang="de") verhindert grosse Wortluecken in
   schmalen Spalten. Zentrierte Stellen (Hero, CTA-Band, Dankestext) setzen center selbst. */
p,li{text-align:justify;-webkit-hyphens:auto;hyphens:auto}
/* Adressen sind kein Fliesstext: Blocksatz zieht die Zeilen sonst auseinander */
address,address p{font-style:normal;text-align:start;-webkit-hyphens:manual;hyphens:manual}
/* Keine Trennstriche in Links – Web- und Mailadressen duerfen nicht verfaelscht werden */
a{color:inherit;-webkit-hyphens:manual;hyphens:manual}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--gold);color:#17130b;
  padding:12px 20px;font-family:Oswald,sans-serif;font-weight:600;z-index:200;text-decoration:none}
.skip-link:focus{left:var(--gutter);top:12px}

/* Honeypot: für Menschen unsichtbar, für Screenreader ausgeblendet, für Bots erreichbar */
.hp-field{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}

/* Klebeband-Geste */
.tape{display:inline-block;padding:11px 30px;background:linear-gradient(176deg,#ffca3e,#eda100);
  color:#1a1307;font-family:Oswald,sans-serif;font-weight:600;font-size:15px;letter-spacing:.2em;
  text-transform:uppercase;transform:rotate(-2.2deg);box-shadow:0 7px 22px rgba(0,0,0,.55);
  clip-path:polygon(1.2% 0,98.6% 2.5%,100% 97%,.4% 100%);opacity:.95}

/* Kopierer-Korn */
body::before{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Edding-Unterstrich unter Sektions-Überschriften */
main h2{position:relative;display:inline-block;padding-bottom:max(16px,.19em)}
main h2::after{content:"";position:absolute;left:-6px;right:-14px;bottom:2px;height:max(9px,.1em);
  background:var(--gold);opacity:.92;transform:rotate(-.6deg);
  clip-path:polygon(0 46%,9% 10%,21% 54%,34% 14%,47% 58%,60% 18%,73% 56%,86% 20%,100% 48%,99% 100%,1% 94%)}
/* Plakat-Look: leicht schiefe Ueberschrift mit gelbem Versatzschatten und Scheinwerferlicht dahinter.
   isolation macht h2 zum eigenen Stapelkontext (kein Bezugsrahmen fuer fixed), damit das Licht
   (z-index:-1) ueber dem Sektionshintergrund, aber unter dem Text liegt. */
main h2{isolation:isolate;transform:rotate(-.8deg);text-shadow:.035em .035em 0 rgba(255,183,3,.26)}
/* Schluesselwort in Gold, Versatzschatten in dunklem Gold (wie ein zweifarbiger Plakatdruck) */
main h2 .hl{color:var(--gold);text-shadow:.035em .035em 0 #7a4e00}
main h2::before{content:"";position:absolute;z-index:-1;inset:-70px -16px;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(255,183,3,.16),rgba(255,183,3,0) 68%)}
.scribble{font-family:FreeScript,cursive;color:var(--gold);font-size:clamp(21px,2.2vw,27px);
  display:inline-block;transform:rotate(-5deg);opacity:.92}

/* ===== Header ===== */
/* Der Blur liegt bewusst auf dem Pseudo-Element, nicht auf dem header selbst:
   backdrop-filter macht ein Element zum Bezugsrahmen fuer position:fixed-
   Nachfahren. Am header wuerde das mobile Menue dadurch auf Header-Hoehe
   zusammenfallen statt am Viewport zu haengen.
   -webkit-Prefix: Safari (auch aktuelles iOS) kennt backdrop-filter sonst nicht. */
/* overflow-x:clip schneidet die weit ueberstehenden Linien seitlich ab (keine Scrollbreite),
   laesst das Logo unten aber sichtbar ueberstehen und ist kein Bezugsrahmen fuer fixed. */
header{position:sticky;top:0;z-index:50;overflow-x:clip}
header::before{content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(16,14,12,.92);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.bar{display:flex;align-items:center;justify-content:space-between;height:var(--header-h)}
/* Logo: oben in der Leiste, der Gitarrenkopf ragt ueber die obere, der Korpus unter die
   untere Linie (Ueberlauf der festen Leistenhoehe, verschiebt nichts). Menue, Telefon-Button
   und Menue-Knopf sitzen mittig zwischen den Linien; position:relative ist dafuer
   unbedenklich (kein Bezugsrahmen fuer fixed). Mobil setzt der 900px-Block das Menue wieder fixed. */
/* Kompaktes Logo (main.js setzt header.is-compact, sobald der Hero unter der Header-Linie
   verschwunden bzw. die Rechtsseite gescrollt ist): scale() auf dem img, Ursprung links
   mittig – die Layoutbox bleibt gross, Menue und Telefon-Button ruecken also nicht, die
   linke Kante bleibt am Seitenraster, die Mitte zwischen den Linien. Header-Hoehe und
   Linien bleiben stehen. Klickflaeche nur das sichtbare Logo (pointer-events), der
   Fokusrahmen sitzt am img und wird gegen die Skalierung ausgeglichen (bleibt 2px).
   Kurve/Dauer: Groessenwechsel auf der Stelle -> ease-in-out, 300ms. Langform, denn var()
   im transition-Kurzschreiber animiert in Firefox nicht. */
header .signet{position:relative;align-self:flex-start;flex-shrink:0;margin-top:var(--logo-top);
  pointer-events:none;--logo-s:1;
  transition-property:--logo-s;transition-duration:.3s;transition-timing-function:var(--ease-in-out)}
header.is-compact .signet{--logo-s:.7}
header .signet img{width:auto;max-width:none;height:var(--logo-h);pointer-events:auto;
  transform:scale(var(--logo-s));transform-origin:50% 50%}
header .signet:focus-visible{outline:none}
header .signet:focus-visible img{outline:calc(2px / var(--logo-s)) solid var(--gold);outline-offset:calc(3px / var(--logo-s))}
/* Reduzierte Bewegung: Groesse wechselt ohne Zoomfahrt, direkt in den Endzustand */
@media (prefers-reduced-motion:reduce){header .signet{transition-duration:0s}}
nav.main-nav,.callbtn,.nav-toggle{position:relative;top:calc((var(--logo-top) + var(--head-h)) / 2)}
/* Obere und untere Linie: vom Logo aus je 100vw nach links und rechts (reicht immer bis an
   den Rand). Wo sie hinter dem Logo verlaufen, spart eine Maske sie in Logoform aus:
   Ebene 3 (logo-cutout.svg) liegt auf dem um den Rand --cut-p vergroesserten Logokasten
   und ist deckend ausser im verdickten Logo-Umriss (reicht ueber den engen Logokasten
   hinaus); Ebene 1 und 2 zeigen die Linie links und rechts davon und ragen 1px in diesen
   Kasten (sonst Antialiasing-Naht in WebKit). Das setzt voraus, dass die Aussparung nicht
   bis an die Kastenkante reicht (10,5 Einheiten Abstand, klein mobil noch ca. 3,8px).
   Alle Masse laufen ueber --logo-s mit (gleicher Ursprung wie beim img: Mitte des
   Logokastens), daher folgen die Aussparungen dem Logo auch mitten in der Animation.
   Die linke Logokante liegt in der Linie genau bei 100vw – dieselbe Einheit wie left,
   daher pixelgenau. Ohne Masken-Unterstuetzung erscheint die Linie durchgehend (hinter
   dem Logo, z-index:-1). Bewusst ohne mask-composite (uneinheitlich unterstuetzt).
   --cut-p: 30 = Erweiterung der viewBox von logo-cutout.svg (in viewBox-Einheiten).
   Nach jeder Aenderung an logo-cutout.svg das ?v= der URL hochzaehlen (sonst Cache-Treffer). */
header .signet::before,header .signet::after{content:"";position:absolute;z-index:-1;top:var(--line-y);
  left:-100vw;right:-100vw;height:1px;background:var(--line);pointer-events:none;
  --cut-p:calc(var(--logo-h) * 30 / 155);
  --cut-x:calc(var(--logo-w) / 2 - (var(--logo-w) / 2 + var(--cut-p)) * var(--logo-s));
  --cut-w:calc((var(--logo-w) + 2 * var(--cut-p)) * var(--logo-s));
  --cut-h:calc((var(--logo-h) + 2 * var(--cut-p)) * var(--logo-s));
  --cut-y:calc(var(--logo-h) / 2 - (var(--logo-h) / 2 + var(--cut-p)) * var(--logo-s) - var(--line-y));
  -webkit-mask-image:linear-gradient(#000,#000),linear-gradient(#000,#000),url("../img/logo-cutout.svg?v=20260928t");
  mask-image:linear-gradient(#000,#000),linear-gradient(#000,#000),url("../img/logo-cutout.svg?v=20260928t");
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:calc(100vw + var(--cut-x) + 1px) 100%,calc(100vw + var(--logo-w)) 100%,var(--cut-w) var(--cut-h);
  mask-size:calc(100vw + var(--cut-x) + 1px) 100%,calc(100vw + var(--logo-w)) 100%,var(--cut-w) var(--cut-h);
  -webkit-mask-position:0 0,calc(100vw + var(--cut-x) + var(--cut-w) - 1px) 0,calc(100vw + var(--cut-x)) var(--cut-y);
  mask-position:0 0,calc(100vw + var(--cut-x) + var(--cut-w) - 1px) 0,calc(100vw + var(--cut-x)) var(--cut-y)}
/* --line-y: Oberkante der Linie, gemessen ab Logo-Oberkante */
header .signet::before{--line-y:var(--head-h)}
header .signet::after{--line-y:calc(var(--header-h) - 1px - var(--logo-top))}
/* Text-Schriftzug im Footer. 43px: genau so breit wie die Unterzeile "FINEST ROCK'N'ROLL" (gemessen). Bei Aenderung der Unterzeile neu abgleichen. */
.signet{font-family:FreeScript,cursive;font-size:43px;color:var(--cream);line-height:1;text-decoration:none}
.signet small{display:block;font-family:Oswald,sans-serif;font-size:11px;letter-spacing:.34em;
  color:var(--gold);text-transform:uppercase;margin-top:2px}
nav.main-nav{display:flex;gap:6px}
nav.main-nav a{font-family:Oswald,sans-serif;font-size:15px;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;color:#cfc9c1;padding:9px 15px;position:relative;isolation:isolate;
  transition-property:color;transition-duration:.18s}
/* Klebeband-Streifen wie .tape: wird beim Hover/Fokus unter den Link "geklebt", jeder Link
   mit eigenem Schiefstand. Liegt als Pseudo-Element hinter dem Text (z-index:-1 im eigenen
   Stapel durch isolation), verschiebt also nichts. Langform, denn var() im transition-
   Kurzschreiber animiert in Firefox nicht. */
nav.main-nav a::before{content:"";position:absolute;inset:3px 4px;z-index:-1;
  background:linear-gradient(176deg,#ffca3e,#eda100);box-shadow:0 5px 14px rgba(0,0,0,.5);
  clip-path:polygon(1.2% 0,98.6% 6%,100% 94%,.4% 100%);
  opacity:0;transform:rotate(var(--tilt,-2deg)) scale(.82);
  transition-property:opacity,transform;transition-duration:.14s,.26s;
  transition-timing-function:ease,cubic-bezier(.34,1.56,.64,1)}
/* nth-of-type statt nth-child: der Drawer-Kopf steht davor, die Rechtliches-Links zaehlen eigen */
nav.main-nav a:nth-of-type(1){--tilt:-2.4deg}
nav.main-nav a:nth-of-type(2){--tilt:1.8deg}
nav.main-nav a:nth-of-type(3){--tilt:-1.4deg}
nav.main-nav a:nth-of-type(4){--tilt:2.2deg}
nav.main-nav a:nth-of-type(5){--tilt:-1.8deg}
/* Rechtliches (nur mobil sichtbar) dezenter; steht vor den Hover-/Fokus-Regeln, damit dort Schwarz gewinnt */
nav.main-nav .nav-legal a{color:var(--muted)}
nav.main-nav a:focus-visible,nav.main-nav a:active{color:#000}
nav.main-nav a:focus-visible::before,nav.main-nav a:active::before{opacity:1;transform:rotate(var(--tilt,-2deg)) scale(1)}
@media (hover:hover){
  nav.main-nav a:hover{color:#000}
  nav.main-nav a:hover::before{opacity:1;transform:rotate(var(--tilt,-2deg)) scale(1)}
}
@media (prefers-reduced-motion:reduce){nav.main-nav a::before{transition-property:opacity}}
.callbtn{font-family:Oswald,sans-serif;font-size:15px;letter-spacing:.12em;text-decoration:none;
  border:1px solid var(--line);padding:9px 16px;color:var(--cream);transition:border-color .18s;white-space:nowrap}
.callbtn:hover{border-color:var(--gold);color:var(--gold)}
.nav-toggle,.nav-close{display:flex;flex-shrink:0;background:none;border:1px solid var(--line);color:var(--cream);
  width:53px;height:53px;align-items:center;justify-content:center;cursor:pointer;
  transition-property:transform,border-color;transition-duration:.16s,.18s;
  transition-timing-function:var(--ease-out),ease}
.nav-toggle:active,.nav-close:active{transform:scale(.93)}
.nav-close svg{width:20px;height:20px}
/* Hamburger aus drei Strichen; offen (aria-expanded) werden sie zum X */
.nav-toggle{display:none;flex-direction:column;gap:3px}
.nav-toggle span{display:block;width:16px;height:2px;background-color:currentColor;
  transition-property:transform,opacity;transition-duration:.3s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
/* Drawer-Kopf, Rechtliches und Abdunklung gibt es nur im mobilen Menue */
.nav-head,.nav-legal,.nav-backdrop{display:none}
@keyframes nav-item-in{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes nav-item-fade{from{opacity:0}to{opacity:1}}

/* ===== Hero: scrollgesteuerte Bildsequenz ===== */
/* Hero und "Johnny Stone live" kleben gemeinsam unter der Menueleiste (--header-h),
   bis die Sequenz durchgelaufen ist; erst dann scrollt die Seite weiter.
   Kein overflow:hidden auf .hero-pin oder Vorfahren – das wuerde position:sticky abschalten. */
.hero-pin__sticky{position:sticky;top:var(--header-h)}
/* Scrollstrecke fuer die Sequenz – groesser = langsamer. Ohne JS und bei
   reduzierter Bewegung gibt es keine Strecke, nur das Standbild mit Text. */
@media (prefers-reduced-motion:no-preference){
  html.js .hero-pin::after{content:"";display:block;height:300vh}
}
/* Abstaende oben/unten wie bei jeder Sektion. svh statt vh, damit die Hoehe auf
   Mobil stabil bleibt, wenn die Browserleiste ein- und ausfaehrt. */
.hero-sequence{--stage-h:calc(100vh - var(--header-h));padding-inline:var(--gutter);border-bottom:1px solid var(--line)}
@supports (height:100svh){.hero-sequence{--stage-h:calc(100svh - var(--header-h))}}
/* Breite bestimmt die Hoehe (immer 16:9, max. 1180px). Zusaetzlich begrenzt, damit das
   Bild unter Menueleiste und Sektionsabstand ganz in den Bildschirm passt.
   container-type: Textgroessen in cqw = Prozent der Bildbreite, so bleibt der Text
   immer im Bild. Macht das Element zum Bezugsrahmen – keine fixed-Elemente hier hinein.
   4px Reserve: waren 24px, die 20px mehr Luft ueber dem Logo (--logo-top/--header-h)
   gehen davon ab – so bleibt das Bild exakt so gross wie vorher (1440x900: 1122px breit). */
.hero-sequence__frame{position:relative;container-type:inline-size;margin-inline:auto;
  width:min(100%,var(--maxw),calc((var(--stage-h) - var(--section-pad) - 4px) * 16 / 9))}
#hero-canvas{display:block;width:100%;height:auto;aspect-ratio:16/9;background:var(--surface)}
html:not(.js) #hero-canvas{background:url("../img/hero/frame-0073.webp") center/cover}
/* Nur unten abdunkeln: hinter dem Text dunkel, die Gesichter bleiben hell */
.hero-sequence__scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(16,14,12,.85),rgba(16,14,12,.55) 40%,rgba(16,14,12,0) 72%)}
.hero-sequence__loader{position:absolute;left:0;right:0;bottom:8px;max-width:none;text-align:center;line-height:1;
  font-family:Oswald,sans-serif;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--cream);
  text-shadow:0 1px 6px rgba(0,0,0,.8)}
.hero-sequence__overlay{position:absolute;inset:0;display:grid;place-content:end center;text-align:center;
  padding:4% 4% 5%}
/* Tastatur: fokussierte Buttons nie unsichtbar lassen */
.hero-sequence__overlay:focus-within [data-fade]{opacity:1!important;pointer-events:auto!important}
.hero-sequence h1{font-family:FreeScript,cursive;font-weight:400;text-transform:none;letter-spacing:0;line-height:1;
  font-size:clamp(40px,8.5vw,118px);font-size:clamp(40px,10cqw,118px);
  text-shadow:0 4px 40px rgba(0,0,0,.6);transform:rotate(-1.6deg)}
.hero-sequence .claim{font-family:Oswald,sans-serif;letter-spacing:.42em;text-transform:uppercase;
  font-size:clamp(12px,1.9vw,26px);font-size:clamp(12px,2.2cqw,26px);
  color:var(--cream);max-width:none;text-align:inherit;margin:clamp(0px,.35vw,5px) 0 0 .42em;margin-top:clamp(0px,.4cqw,5px)}
.hero-sequence .cta-row{gap:clamp(8px,1.2cqw,14px);margin-top:clamp(8px,1.5vw,22px);margin-top:clamp(8px,1.8cqw,22px)}
.hero-sequence .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  font-size:clamp(12px,1.2vw,16px);font-size:clamp(12px,1.4cqw,16px);
  padding:clamp(8px,1.1vw,15px) clamp(12px,2.2vw,30px);padding:clamp(8px,1.3cqw,15px) clamp(12px,2.5cqw,30px)}
/* Sehr schmale Handys (z. B. iPhone SE): sonst brechen die Buttons um und ragen aus dem Bild */
@container (max-width:300px){
  .hero-sequence h1{font-size:34px}
  .hero-sequence .claim{font-size:11px}
  .hero-sequence .cta-row{gap:6px}
  .hero-sequence .btn{font-size:11px;padding:7px 10px}
}
.cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:38px}
.btn{font-family:Oswald,sans-serif;font-size:16px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;padding:15px 30px;text-decoration:none;display:inline-block;border:1px solid transparent;
  cursor:pointer;transition:transform .16s,background .18s,border-color .18s;background:none}
.btn-gold{background:var(--gold);color:#17130b}
.btn-gold:hover{background:#ffc63a;transform:translateY(-2px)}
.btn-ghost{border-color:rgba(253,251,247,.55);color:var(--cream)}
.btn-ghost:hover{border-color:var(--cream);transform:translateY(-2px)}

/* ===== Sections & scroll reveal ===== */
section{padding:var(--section-pad) 0}
.sec-head{margin-bottom:46px}
.sec-head p{color:var(--muted);max-width:52ch;margin-top:14px}
/* Nur verstecken, wenn JS läuft – ohne JS bleibt alles sichtbar */
html.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
html.js .reveal.is-visible{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion:reduce){
  html.js .reveal{opacity:1;transform:none;transition:none}
}

/* ===== Termine ===== */
/* Naechster Termin als Plakat: riesiges Datum, kraeftige Goldkante */
.gig-next{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(26px,3.4vw,44px);align-items:center;
  background:linear-gradient(100deg,#221e19,#1a1714);border:1px solid #4a4036;
  border-left:8px solid var(--gold);padding:clamp(26px,3vw,40px) clamp(24px,3.4vw,44px);position:relative}
.datebox{text-align:center;min-width:104px;display:block}
.datebox .d{display:block;font-family:Oswald,sans-serif;font-weight:700;font-size:clamp(72px,10vw,136px);
  line-height:.82;color:var(--gold);text-shadow:.035em .035em 0 #7a4e00}
.datebox .m{display:block;font-family:Oswald,sans-serif;font-weight:600;font-size:clamp(17px,1.6vw,22px);letter-spacing:.26em;
  text-transform:uppercase;color:var(--cream);margin-top:10px}
.datebox .y{display:block;font-size:14px;color:var(--muted);letter-spacing:.14em}
.gig-next h3{font-size:clamp(28px,4vw,50px);font-weight:700;line-height:1;text-transform:uppercase}
.gig-next .loc{color:var(--muted);margin-top:10px;font-size:17.5px}
.gig-next+.gig-next{margin-top:20px}
.gig-acts{display:flex;gap:10px;flex-wrap:wrap}
.btn-sm{font-family:Oswald,sans-serif;font-size:14.5px;letter-spacing:.12em;text-transform:uppercase;
  padding:11px 19px;text-decoration:none;border:1px solid var(--line);color:var(--cream);cursor:pointer;
  background:none;transition:border-color .18s,color .18s}
.btn-sm:hover{border-color:var(--gold);color:var(--gold)}

.past-label{margin:52px 0 20px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.past-label .scribble{font-family:FreeScript,cursive;font-size:clamp(30px,3.2vw,38px);line-height:1}
.past-label .tape{font-size:13.5px;padding:8px 20px;transform:rotate(-3.2deg)}
.gigs-past{list-style:none}
.gig-past{display:grid;grid-template-columns:78px 1fr;gap:22px;align-items:center;
  padding:17px 0;border-top:1px solid var(--line);color:var(--muted)}
.gig-past .pd{font-family:Oswald,sans-serif;font-size:21px;color:var(--muted)}
.gig-past .pt{font-size:18px}

/* ===== Lauftext-Band ===== */
/* Goldenes Klebeband quer ueber die volle Breite. .ticker steht gerade und schneidet ab (overflow:hidden):
   Das schraege, beidseitig 24px ueberstehende Band erzeugt so keine Scrollbreite (iPhone/iPad wischen sonst
   seitlich). Rueckt mit der halben Sektionsluft in den Termine-Abstand hinein, sonst doppelte Luecke.
   Die Bewegung setzt main.js als transform am Track (nur beim Scrollen, nie von selbst). */
.ticker{position:relative;overflow:hidden;padding-block:clamp(22px,3vw,40px);margin-top:calc(var(--section-pad) * -.5)}
.ticker__band{margin-inline:-24px;background:linear-gradient(176deg,#ffca3e,#eda100);color:#1a1307;
  transform:rotate(-1.6deg);clip-path:polygon(0 3%,100% 0,100% 100%,0 97%)}
.ticker__track{display:flex;width:max-content}
.ticker__list{display:flex;flex-shrink:0;list-style:none}
.ticker__list li{font-family:Oswald,sans-serif;font-weight:700;font-size:clamp(20px,2.6vw,34px);line-height:1;
  letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;text-align:start;-webkit-hyphens:manual;hyphens:manual;
  padding-block:.5em}
/* Stern als Trenner; "/ ''" = fuer Vorleseprogramme stumm (aeltere Browser nehmen die erste Zeile) */
.ticker__list li::after{content:"\2605";content:"\2605" / "";padding-inline:.9em;font-size:.7em;vertical-align:.18em}

/* ===== Band ===== */
/* Anfrage-Abschnitt: dezenter Scheinwerfer-Hintergrund (warmer Verlauf, schwache gelbe Strahlen von oben-mitte nach unten, zum Rand hin ausgeblendet, schraege Kanten).
   Strahlen auf ::before (z-index:-1, isolation); weich ueber Verlaufsstufen, bewusst ohne filter:blur (iPad/Safari kachelt grosse gefilterte Flaechen sichtbar); im Abschnitt liegt kein fixed-Element. "Die Band" bleibt schlicht. */
.band{background:var(--surface);border-block:1px solid var(--line)}
#booking{position:relative;z-index:1;isolation:isolate;overflow:hidden;overflow:clip;padding-block:calc(var(--section-pad) + 18px);
  background:linear-gradient(180deg,#221c16,#191511);
  -webkit-clip-path:polygon(0 0,100% 18px,100% 100%,0 calc(100% - 18px));clip-path:polygon(0 0,100% 18px,100% 100%,0 calc(100% - 18px))}
#booking::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(180deg,rgba(25,21,17,0) 25%,rgba(25,21,17,.9)),
    repeating-conic-gradient(from 0deg at 50% -5%,rgba(255,183,3,0) 0,rgba(255,183,3,.0144) 2deg,rgba(255,183,3,0) 4deg,rgba(255,183,3,0) 8deg)}
.band-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(30px,5vw,64px);align-items:center}
.photo-ph{aspect-ratio:4/3;background:radial-gradient(ellipse 70% 50% at 50% 0%, rgba(255,183,3,.18), transparent 60%),
  linear-gradient(#232019,#16130f);border:1px solid var(--line);display:grid;place-items:center;position:relative}
.photo-band{transform:rotate(-1.2deg)}
.photo-band{aspect-ratio:16/9}
.photo-band .tape{position:absolute;top:-36px;left:26px;z-index:1}
/* Rahmen = Schnittmaske: Foto ist auf die Band herangezoomt, Klick zeigt das ganze Bild */
.band-zoom{position:absolute;inset:0;margin:0;padding:0;border:0;border-radius:inherit;overflow:hidden;
  background:none;cursor:zoom-out;display:block}
.band-zoom img{position:absolute;inset:0;margin:auto;width:100%;height:auto;max-width:none;
  transform:translate(5.9%,18.7%) scale(2.1);transform-origin:50% 50%;
  transition-property:transform;transition-duration:.6s;transition-timing-function:cubic-bezier(.4,0,.2,1)}
.band-zoom.is-full{cursor:zoom-in}
.band-zoom.is-full img{transform:none}
@media (prefers-reduced-motion:reduce){.band-zoom img{transition-duration:.01s}}
.band-text p{color:#e2ddd5;margin-bottom:17px}
.band-text h2,.book-left h2{margin-bottom:22px}
.band-text .scribble{margin-top:10px;transform:rotate(-2.5deg);font-family:FreeScript,cursive;font-size:clamp(30px,3.2vw,38px);line-height:1}

.members{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:60px;list-style:none}
.member{background:linear-gradient(#37302a,#2a2520);border:1px solid #4a4036;border-top:5px solid var(--gold);padding:22px 18px;
  transition:border-color .18s,transform .18s}
.member:nth-child(1){transform:rotate(-2.4deg) translateY(5px)}
.member:nth-child(2){transform:rotate(1.7deg) translateY(-4px)}
.member:nth-child(3){transform:rotate(-1deg) translateY(7px)}
.member:nth-child(4){transform:rotate(2.3deg) translateY(-3px)}
.member:nth-child(5){transform:rotate(-1.8deg) translateY(4px)}
.member:hover,.member:focus-within{border-color:#6b5a3f;transform:rotate(0deg) translateY(-4px)}
.member .role{font-family:Oswald,sans-serif;font-size:14px;letter-spacing:.16em;color:var(--gold);
  text-transform:uppercase;text-align:left}
.member .nm{font-family:Oswald,sans-serif;font-size:20px;margin-top:9px;line-height:1.2}

/* ===== Fotos / Slider ===== */
.slider{position:relative;aspect-ratio:16/9;border:1px solid var(--line);overflow:hidden}
/* z-index:0 = eigener Stapelkontext, damit die aktive Folie nicht ueber den Pfeilen liegt */
.slider-track{position:relative;height:100%;z-index:0}
/* Umblaettern = kurzes Aus-/Einblenden. visibility nimmt verdeckte Folien nach dem Ausblenden
   aus Klick- und Vorlesereihenfolge. Opacity ist keine Bewegung -> auch bei reduced-motion. */
.slide{position:absolute;inset:0;display:grid;place-items:center;
  background:radial-gradient(ellipse 70% 60% at 50% 30%, rgba(255,183,3,.16), transparent 65%),
  linear-gradient(#211d17,#15120e);
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s .3s}
.slide.is-active{opacity:1;visibility:visible;z-index:1;transition-delay:0s}
/* absolut statt Grid-Element: Safari/iOS bemisst die Grid-Zeile sonst nach dem 4:3-Bildformat
   und schiebt das Bild nach unten (oben sichtbarer Rand) */
.slide img,.slide video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.slide img.top{object-position:50% 0}
/* Klick aufs Foto vergroessert (Lightbox); Hintergrund weich per backdrop-filter, Rueckfall: dunkle Flaeche.
   Die Lightbox ist selbst fixed und hat keine fixed-Nachfahren. */
.slide img{-webkit-user-select:none;user-select:none;cursor:zoom-in}
.slide .video-play img{cursor:pointer}
.lightbox{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;touch-action:none;
  background:rgba(16,14,12,.62);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.lightbox[hidden]{display:none}
.lightbox img{max-width:min(92vw,1400px);max-height:86vh;max-height:86dvh;width:auto;height:auto;object-fit:contain;
  box-shadow:0 12px 50px rgba(0,0,0,.6);-webkit-user-select:none;user-select:none}
.lightbox:fullscreen{background:#000;-webkit-backdrop-filter:none;backdrop-filter:none}
.lightbox:-webkit-full-screen{background:#000}
.lightbox:fullscreen img{max-width:100vw;max-height:100vh;box-shadow:none}
.lightbox:-webkit-full-screen img{max-width:100vw;max-height:100vh;box-shadow:none}
.lightbox-close{position:absolute;top:14px;right:14px;width:46px;height:46px;border:1px solid rgba(253,251,247,.3);
  background:rgba(16,14,12,.75);color:var(--cream);font-size:30px;line-height:1;cursor:pointer}
.lightbox-close:hover,.lightbox-ctrl:hover{border-color:var(--gold);color:var(--gold)}
.lightbox-ctrl{position:absolute;top:50%;translate:0 -50%;width:46px;height:46px;border:1px solid rgba(253,251,247,.3);
  background:rgba(16,14,12,.75);color:var(--cream);display:grid;place-items:center;cursor:pointer;padding:0}
.lightbox-ctrl svg{width:22px;height:22px}
.lightbox-stage{position:relative;display:flex}
.lightbox-ctrl.prev{left:8px}
.lightbox-ctrl.next{right:8px}
/* ab Tablet-Breite sitzen die Pfeile mit kleinem Abstand neben dem Bild statt darauf */
@media (min-width:700px){
  .lightbox-ctrl.prev{left:-62px}
  .lightbox-ctrl.next{right:-62px}
  .lightbox img{max-width:min(calc(100vw - 150px),1400px)}
  .lightbox:fullscreen img{max-width:calc(100vw - 150px)}
  .lightbox:-webkit-full-screen img{max-width:calc(100vw - 150px)}
}
.lightbox-count{position:absolute;left:0;right:0;bottom:16px;text-align:center;font-family:Oswald,sans-serif;
  font-size:15px;letter-spacing:.1em;color:var(--cream);text-shadow:0 1px 4px rgba(0,0,0,.8)}
.slide video{object-fit:contain;background:#000}
/* Vorschaubild als grosser Startknopf ueber dem Video: Klick irgendwo aufs Bild startet es */
.video-play{position:absolute;inset:0;padding:0;border:0;background:#000;cursor:pointer}
.video-play::after{content:"";position:absolute;left:50%;top:50%;width:76px;height:76px;translate:-50% -50%;
  box-sizing:border-box;border:2px solid var(--gold);border-radius:50%;
  background:rgba(16,14,12,.75) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFB703' d='M8 5v14l11-7z'/%3E%3C/svg%3E") 55% 50%/34px no-repeat;
  transition:background-color .18s}
.video-play:hover::after{background-color:rgba(16,14,12,.92)}
.video-play:focus-visible{outline-offset:-4px}
.slider-ctrl{position:absolute;top:50%;translate:0 -50%;width:46px;height:46px;border:1px solid rgba(253,251,247,.3);
  background:rgba(16,14,12,.75);color:var(--cream);display:grid;place-items:center;cursor:pointer}
.slider-ctrl svg{width:22px;height:22px}
.slider-ctrl:hover{border-color:var(--gold);color:var(--gold)}
.slider-ctrl.prev{left:16px}
.slider-ctrl.next{right:16px}
.slider-meta{display:flex;justify-content:space-between;align-items:center;margin-top:16px}
/* Punkte: sichtbar 9px (::before), Klickflaeche 25px breit und per ::after 45px hoch (Touch). */
.slider-dots{display:flex;gap:0;margin-left:-8px}
.slider-dots button{position:relative;width:25px;height:25px;border:0;border-radius:50%;background:none;
  padding:0;cursor:pointer}
.slider-dots button::before{content:"";position:absolute;inset:8px;box-sizing:border-box;border-radius:50%;
  border:1px solid var(--muted)}
.slider-dots button::after{content:"";position:absolute;inset:-10px 0}
.slider-dots button[aria-current="true"]::before{background:var(--gold);border-color:var(--gold)}
.slider-count{font-family:Oswald,sans-serif;font-size:15px;color:var(--muted);letter-spacing:.1em}

/* ===== Booking ===== */
.book-grid{display:grid;grid-template-columns:1fr 1.1fr;grid-template-rows:auto 1fr;grid-template-areas:"intro form" "contact form";gap:clamp(30px,5vw,60px)}
.book-left{position:relative;grid-area:intro}
.book-contact{grid-area:contact}
.book-grid>.form-card{grid-area:form}
.book-left>p{color:var(--muted);margin-bottom:32px;max-width:40ch}
.contact-row{display:flex;gap:16px;align-items:center;border:1px solid #4a4036;padding:17px 20px;
  margin-bottom:12px;text-decoration:none;transition:border-color .18s}
.contact-row:hover,.contact-row:focus-visible{border-color:var(--gold)}
.contact-row .lb{font-family:Oswald,sans-serif;font-size:14px;letter-spacing:.18em;color:var(--gold);
  text-transform:uppercase}
.contact-row .vl{font-family:Oswald,sans-serif;font-size:22px;color:var(--cream);margin-top:3px}

.form-card{background:linear-gradient(#332d26,#28231e);border:1px solid #4a4036;border-top:5px solid var(--gold);padding:clamp(24px,3.4vw,38px)}
.form-card h3{text-transform:uppercase;margin-bottom:6px}
.form-card>p{font-size:16.5px;color:var(--muted);margin-bottom:24px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.f{display:flex;flex-direction:column;gap:7px;min-width:0}
.f.full{grid-column:1/-1}
label{font-family:Oswald,sans-serif;font-size:14px;letter-spacing:.17em;text-transform:uppercase;color:var(--gold)}
/* Mindestens 16px: darunter zoomt iOS Safari beim Antippen ins Feld hinein */
input,select,textarea{background:#131110;border:1px solid #7a736a;color:var(--cream);padding:12px 13px;
  font:400 18px Barlow,sans-serif;width:100%}
input::placeholder,textarea::placeholder{color:#8a847c}
/* iOS zeichnet Datumsfelder sonst kleiner, mit mittig gesetztem Wert und anderem Mass als die anderen Felder.
   appearance:none gleicht Hoehe/Breite an; nur auf iOS kommt dazu ein Kalendersymbol, weil das Feld sonst leer wirkt. */
input[type="date"]{-webkit-appearance:none;appearance:none;display:block;min-width:0;min-height:50px;text-align:left}
input[type="date"]::-webkit-date-and-time-value{text-align:left;min-height:1.4em}
@supports (-webkit-touch-callout:none){
  input[type="date"]{padding-right:44px;background-repeat:no-repeat;background-position:right 13px center;background-size:20px 20px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFB703' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E")}
}
input:focus,select:focus,textarea:focus{border-color:var(--gold);outline:2px solid var(--gold);outline-offset:2px}
/* Fehler: Rahmen + Text am Feld (main.js setzt aria-invalid und .f-err), nicht nur Farbe */
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:#e08a6c}
.f-err{max-width:none;margin:0;font-size:15.5px;line-height:1.4;color:#e08a6c;text-align:start}
.check+.f-err{grid-column:1/-1;margin-top:-4px}
.check{display:flex;gap:11px;align-items:flex-start;grid-column:1/-1;margin-top:6px;font-size:15.5px;color:var(--muted)}
.check-label{font-family:Barlow,sans-serif;letter-spacing:0;text-transform:none;font-size:15.5px;
  color:var(--muted);line-height:1.5}
.check input{accent-color:var(--gold);margin-top:0;width:24px;height:24px;flex-shrink:0}
.check a{color:var(--gold);text-decoration:none}
.form-card .btn{width:100%;text-align:center;margin-top:18px;grid-column:1/-1}
.form-msg{grid-column:1/-1;font-size:16.5px;padding:12px 14px;display:none}
.form-msg.is-visible{display:block}
.form-msg.ok{background:rgba(255,183,3,.12);border:1px solid rgba(255,183,3,.35);color:var(--gold)}
.form-msg.err{background:rgba(198,90,58,.14);border:1px solid rgba(198,90,58,.4);color:#e08a6c}

/* ===== Bestaetigungsdialog (externe Karte) ===== */
.confirm-dlg{margin:auto;width:min(92vw,460px);padding:clamp(22px,4vw,32px);background:var(--card);
  color:var(--cream);border:1px solid var(--line);border-top:4px solid var(--gold);border-radius:var(--r-box)}
.confirm-dlg::backdrop{background:rgba(16,14,12,.75)}
.confirm-dlg h3{text-transform:uppercase;margin-bottom:12px}
.confirm-dlg p{color:#cfc9c1;font-size:17px;margin-bottom:24px}
.confirm-dlg__acts{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.confirm-dlg .btn-sm{min-height:44px}

/* ===== CTA-Band ===== */
/* Abschluss als Plakatflaeche: volles Gold, schwarze Schrift, ohne Foto – die einzige helle Flaeche der Seite.
   Schiebt sich 18px unter die schraege Unterkante von #booking (z-index:1 dort), damit statt eines
   schwarzen Keils die Schraege direkt auf dem Gold steht. Fokusrahmen schwarz, Gold waere hier unsichtbar. */
.cta-band{background-color:var(--gold);color:#17130b;text-align:center;margin-top:-18px;
  padding-top:calc(var(--section-pad) + 18px)}
/* line-height 1.16: das Ü von BÜHNE steht genau unter dem E von ABEND */
.cta-band h2{margin-bottom:18px;line-height:1.16;color:#17130b;text-shadow:.035em .035em 0 rgba(122,78,0,.45)}
.cta-band h2::before{display:none}
.cta-band h2::after{background:#17130b}
.cta-band p{max-width:48ch;margin:0 auto 30px;color:#2b2214;text-align:inherit;font-size:1.1em;font-weight:500}
.cta-band .cta-row{margin-top:0}
.cta-band .btn-gold{background:#17130b;color:var(--gold)}
.cta-band .btn-gold:hover{background:#2e271d}
.cta-band .btn{border-width:2px}
.cta-band .btn-ghost{border-color:#17130b;color:#17130b}
.cta-band .btn-ghost:hover{border-color:#17130b;background-color:rgba(23,19,11,.08)}
.cta-band :focus-visible{outline-color:#17130b}

/* ===== Footer ===== */
footer{background:#0b0a09;border-top:1px solid var(--line);padding:64px 0 28px;font-size:16.5px;color:var(--muted)}
/* .f-col a setzt Grau mit gleicher Spezifitaet; der Schriftzug steht in .f-col, also staerker schreiben */
footer .f-col .signet,footer .f-col .signet:hover{color:#fff}
.f-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px;padding-bottom:40px}
.f-intro{margin-top:16px;max-width:30ch}
.f-col-label{font-family:Oswald,sans-serif;font-size:14px;letter-spacing:.2em;color:var(--cream);
  text-transform:uppercase;margin-bottom:12px}
/* Navigation und Kontakt im selben Zeilenraster */
.f-col ul{list-style:none}
.f-col ul,.f-col address,.f-col .f-rider{line-height:2.1}
.f-col .f-social{display:flex;gap:26px;line-height:0;margin-top:20px}
.f-social a{display:block;width:53px;height:53px}
.f-social img{display:block;width:53px;height:53px;transition-property:transform;transition-duration:.25s;transition-timing-function:ease;transform-origin:center}
.f-social a:hover img,.f-social a:focus-visible img{transform:scale(1.25)}
.f-col a{text-decoration:none;color:var(--muted)}
.f-col a:hover{color:var(--gold)}
.thanks{max-width:none;text-align:center;border-top:1px solid var(--line);
  padding:26px 0;font-style:italic;color:var(--muted);font-size:16px}
.legal-row{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid var(--line);
  padding-top:22px;font-size:15.5px}
.legal-row a{text-decoration:none;color:var(--muted)}
.legal-row a:hover{color:var(--gold)}
.legal-row span:first-child a{color:var(--gold)}
.legal-row span:first-child a:hover{color:var(--cream)}

/* ===== Rechtsseiten ===== */
.legal-page{padding-top:70px;padding-bottom:100px}
.legal-page h1{font-size:clamp(32px,4.5vw,46px);text-transform:uppercase;margin-bottom:28px}
/* Mobil: laengster Titel (Erklaerung zur Barrierefreiheit, ca. 14,7em) soll ohne Umbruch in die Breite passen */
@media (max-width:519px){.legal-page h1{font-size:calc((100vw - 40px) / 15)}}
.legal-page h2{font-size:24px;font-weight:600;line-height:1.15;text-transform:none;letter-spacing:0;margin:36px 0 12px;padding-bottom:0}
.legal-page h2::after,.legal-page h2::before{display:none}
.legal-page h2{transform:none;text-shadow:none}
.legal-page p,.legal-page li{color:#cfc9c1;margin-bottom:12px;max-width:none;text-align:justify;-webkit-hyphens:auto;hyphens:auto}
.legal-page ul{padding-left:22px}
.legal-page address{font-style:normal;color:#cfc9c1;margin-bottom:12px}
.legal-page address p{margin-bottom:2px}
.legal-page p a,.legal-page li a{color:var(--gold);text-decoration:none}
.legal-page p a:hover,.legal-page li a:hover,.legal-page p a:focus-visible,.legal-page li a:focus-visible{color:var(--cream)}
.legal-page .layout-credit{display:flex;align-items:center;gap:20px;flex-wrap:wrap;text-align:start}
/* negativer Rand: Logo ragt ueber die Textzeile hinaus, ohne die Zeile (und den Abstand zur Ueberschrift) zu vergroessern */
.legal-page .br-logo{flex:0 0 auto;display:inline-block;width:56px;height:56px;margin-block:-12px}
.legal-page .br-logo img{display:block;width:100%;height:100%}
@media (max-width:480px){.legal-page .layout-credit{flex-wrap:nowrap}.legal-page .br-logo{width:53px;height:53px;margin-block:-6px}}

/* ===== Cookie-Hinweis (Vorlage tierheilpraxis-eider.de) ===== */
/* z-index 53: ueber Inhalt und Header (50), unter Abdunklung/Drawer (54/55) - offenes Menue bleibt bedienbar.
   transform nur auf dem fixierten Banner selbst, nie auf einem Vorfahren. */
.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:53;background-color:var(--surface);
  border-top:1px solid rgba(255,183,3,.3);box-shadow:0 -6px 32px rgba(0,0,0,.45);transform:translateY(100%);
  transition-property:transform;transition-duration:.42s;transition-timing-function:var(--ease-out)}
.cookie-banner.show{transform:none}
.cookie-inner{max-width:var(--maxw);margin-inline:auto;padding:18px var(--gutter);
  display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.cookie-icon{flex-shrink:0;width:40px;height:40px;border-radius:50%;background:rgba(255,183,3,.14);
  display:grid;place-items:center}
.cookie-icon svg{width:20px;height:20px;stroke:var(--gold);fill:none;stroke-width:1.5}
.cookie-text{flex:1;min-width:240px;max-width:none;margin:0;font-size:15px;line-height:1.6;color:#cfc9c1;text-align:start}
.cookie-text strong{color:var(--cream);font-weight:600}
.cookie-actions{display:flex;align-items:center;gap:16px;flex-shrink:0;flex-wrap:wrap}
.cookie-link{color:var(--gold);font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap}
.cookie-link:hover{color:var(--cream)}
.cookie-btn{padding:11px 22px;font-size:14px}
@media (max-width:600px){
  .cookie-inner{gap:14px;padding:16px var(--gutter) calc(16px + env(safe-area-inset-bottom,0px))}
  .cookie-icon{display:none}
  .cookie-text{min-width:0;font-size:14px}
  .cookie-actions{width:100%;justify-content:space-between}
  .cookie-link{display:inline-block;padding:12px 0;white-space:normal}
}
@media (prefers-reduced-motion:reduce){.cookie-banner{transition-duration:.01s}}

/* ===== Rundungen (dezent) ===== */
/* Zentral fuer alle Buttons und Kaesten. Klebeband und Edding-Striche bleiben bewusst kantig. */
.btn,.btn-sm,.callbtn,.nav-toggle,.nav-close,nav.main-nav a,.slider-ctrl,.skip-link,
input,select,textarea{border-radius:var(--r-btn)}
.gig-next,.photo-ph,.member,.slider,.contact-row,.form-card,
#hero-canvas,.hero-sequence__scrim{border-radius:var(--r-box)}

/* Safari 26 (iPhone/iPad) fuellt die Flaeche hinter Statusleiste und Adressleiste mit der
   background-color des fixed/sticky-Elements, das es ca. 4px unter der Oberkante trifft – sonst
   scheint der Seiteninhalt durch. Pseudo-Elemente zaehlen dabei als ihr Wirt (body::before = body),
   pointer-events:none hilft nicht. Daher: Korn unter den Header (z 49 < 50), damit Safari den
   Header trifft; der Header selbst deckend (Querformat-iPad hat sonst nur header::before). */
@media (max-width:900px),(pointer:coarse){
  body::before{z-index:49}
  header{background-color:var(--black)}
}

/* ===== Mobile ===== */
@media (max-width:900px){
  /* Kompakte Leiste: 52px zwischen den Linien (Platz fuer den 44px-Menueknopf),
     Gitarrenkopf und Korpus ragen etwa gleich weit heraus. 20px Luft ueber dem Logo
     (14px mehr als frueher, proportional zu +20px am Desktop; Header waechst mit). */
  :root{--header-h:104px;--logo-h:112px;--logo-top:20px;--head-h:30px}
  .callbtn{display:none}
  /* Mobil: Kopf deckend bis knapp unter das Logo (Logo-Oberkante + Logo-Hoehe + 12px Rand), damit
     Inhalte beim Scrollen nicht durchscheinen. Die Leiste bleibt 104px hoch. Der Bereich darunter
     ist ein Box-Schatten des Headers: Safari (iPhone/iPad) schneidet Pseudo-Elemente am Kasten des
     Headers ab (overflow-x:clip), der Schatten dagegen nicht. Kein Blur mehr auf Mobil. */
  header{background-color:var(--black);
    box-shadow:0 calc(var(--logo-top) + var(--logo-h) + 12px - var(--header-h)) 0 0 var(--black)}
  /* Mobil mit viewport-fit=cover: Der Streifen oberhalb des Kopfs fuellt die Statusleiste (Safe-Area)
     mit der Kopffarbe. Liegt ausserhalb des Kopf-Kastens, veraendert also kein Layout. */
  header::before{display:block;top:calc(-1 * env(safe-area-inset-top,0px));bottom:auto;
    height:env(safe-area-inset-top,0px);background-color:var(--black);
    -webkit-backdrop-filter:none;backdrop-filter:none}
  /* Logo wie am Desktop zwischen Bildkante und Kopf der ersten Person: Mitte bei 9,5 % der
     Bildbreite (Bild = 100vw minus beide Raender). left verschiebt nur; Linien und Aussparung
     wandern als Kinder mit. */
  header .signet{left:calc((100vw - 2 * var(--gutter)) * .095 - var(--logo-w) / 2)}
  .nav-toggle{display:flex}
  /* Drawer von rechts ueber die volle Hoehe, auch ueber den Header. Menue und Abdunklung liegen
     im header: dort ist nichts Bezugsrahmen fuer fixed (Blur sitzt auf header::before), und der
     Stapelkontext des header (z 50) liegt ueber der Seite – Menue (55) und Abdunklung (54) also
     ueber allem. 100dvh = sichtbare Hoehe, auch wenn die Browserleiste ein-/ausfaehrt (100vh als
     Rueckfall). Unten Platz fuer Home-Indikator/Toolbar (env, ohne viewport-fit=cover 0).
     overscroll-behavior: Scrollen am Listenende reicht nicht an die Seite durch.
     visibility mit Verzoegerung: geschlossen nicht fokussierbar, die Rausfahrt bleibt sichtbar.
     Langform statt transition-Kurzschreibweise: var() im Shorthand animiert in Firefox nicht. */
  nav.main-nav{display:flex;position:fixed;top:0;right:0;bottom:0;height:100vh;height:100dvh;
    width:min(89vw,366px);background-color:var(--black);opacity:1;flex-direction:column;gap:2px;
    padding:0 22px calc(28px + env(safe-area-inset-bottom,0px));
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    border-left:1px solid var(--line);box-shadow:-18px 0 40px rgba(0,0,0,.5);
    transform:translateX(100%);pointer-events:none;visibility:hidden;z-index:55;
    /* Eigene Ebene von Anfang an: iOS-Safari malte beim Erstaufruf die 1px-Linien der Leiste
       nicht, bis das Menue einmal geoeffnet war (erst dann bekam das Menue seine Ebene).
       Steht am Menue selbst, nicht an einem Vorfahren – unbedenklich fuer fixed. */
    will-change:transform;
    transition-property:transform,visibility;transition-duration:.42s,0s;
    transition-delay:0s,.42s;transition-timing-function:var(--ease-drawer),linear}
  /* Bewusst keine Deckkraft-Animation am Panel: der Hintergrund muss jederzeit deckend
     bleiben, sonst scheint waehrend der Bewegung die Seite durch. */
  nav.main-nav.is-open{transform:none;pointer-events:auto;visibility:visible;transition-delay:0s,0s}
  /* main.js setzt beim Oeffnen den Fokus aufs Menue selbst (kein Bedienelement, kein Rahmen) */
  nav.main-nav:focus{outline:none}
  nav.main-nav a{display:flex;align-items:center;min-height:52px;padding:12px 15px;font-size:17px}
  /* Kopf spiegelt die Leiste: gleiche Hoehe, beide Linien an derselben Stelle, das X sitzt genau
     dort, wo der Menueknopf war. Klebt oben, wenn die Liste scrollt (Querformat). */
  .nav-head{display:flex;flex-shrink:0;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:1;
    height:var(--header-h);margin:0 -22px 14px;padding-inline:37px;
    background-color:var(--black);border-bottom:1px solid var(--line)}
  /* Schriftzug aus dem Footer, Name weiss, Unterzeile gelb. 37px = Menue-Rand + Link-Innenabstand,
     damit er buendig mit den Menuepunkten steht. Zwischen den Linien: top wie beim X-Knopf
     (Mitte des Feldes unter der oberen Linie). Groesse so, dass Name + Unterzeile (~46px) in
     die 54px zwischen den Linien passen. */
  /* Als Link zur Seitenspitze. Ueberschreibt die Menue-Link-Regeln (Schrift, Hoehe, Klebeband, Hover). */
  nav.main-nav a.nav-brand{display:block;position:relative;top:calc((var(--logo-top) + var(--head-h)) / 2);
    min-height:0;padding:0;font-family:FreeScript,cursive;font-size:32px;line-height:1;letter-spacing:normal;
    text-transform:none;text-decoration:none;color:#fff}
  nav.main-nav a.nav-brand::before{display:none}
  nav.main-nav a.nav-brand:hover,nav.main-nav a.nav-brand:focus-visible,nav.main-nav a.nav-brand:active{color:#fff}
  nav.main-nav a.nav-brand:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
  .nav-brand small{display:block;font-family:Oswald,sans-serif;font-size:10px;line-height:1.2;letter-spacing:.34em;
    color:var(--gold);text-transform:uppercase;margin-top:2px}
  .nav-head::before{content:"";position:absolute;left:0;right:0;top:calc(var(--logo-top) + var(--head-h));
    height:1px;background-color:var(--line)}
  .nav-close{position:relative;top:calc((var(--logo-top) + var(--head-h)) / 2)}
  /* Rechtliches: abgesetzt, kleiner und dezenter als die Hauptpunkte (Muster wie im Footer) */
  .nav-legal{display:flex;flex-direction:column;gap:2px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
  .nav-legal__title{padding:0 15px 6px;font-family:Oswald,sans-serif;font-size:14px;letter-spacing:.2em;
    text-transform:uppercase;color:var(--cream)}
  nav.main-nav .nav-legal a{min-height:44px;padding:8px 15px;font-size:14px;letter-spacing:.14em}
  /* Eintraege beim Oeffnen gestaffelt einblenden (Kopf ausgenommen); beim Schliessen kein Staffeln */
  nav.main-nav.is-open > :not(.nav-head){animation-name:nav-item-in;animation-duration:.45s;
    animation-timing-function:ease-in-out;animation-fill-mode:both}
  nav.main-nav.is-open > :nth-child(2){animation-delay:.04s}
  nav.main-nav.is-open > :nth-child(3){animation-delay:.08s}
  nav.main-nav.is-open > :nth-child(4){animation-delay:.12s}
  nav.main-nav.is-open > :nth-child(5){animation-delay:.16s}
  nav.main-nav.is-open > :nth-child(6){animation-delay:.2s}
  nav.main-nav.is-open > :nth-child(7){animation-delay:.24s}
  nav.main-nav.is-open .nav-brand{animation-name:nav-item-in;animation-duration:.45s;
    animation-timing-function:ease-in-out;animation-fill-mode:both}
  /* Abdunklung hinter dem Menue, ein Tipp darauf schliesst (main.js) */
  .nav-backdrop{display:block;position:fixed;inset:0;z-index:54;background-color:rgba(16,14,12,.6);
    -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;visibility:hidden;
    transition-property:opacity,visibility;transition-duration:.35s,0s;transition-delay:0s,.35s}
  .nav-backdrop.is-open{opacity:1;visibility:visible;transition-delay:0s}
  /* Seite hinter dem offenen Menue festhalten. Nur am body: der Wert geht an den Viewport,
     Scrollposition und sticky Header bleiben stehen. overflow:hidden zusaetzlich am html macht
     body zum eigenen Scrollcontainer – der Header rutscht dann aus dem Bild (getestet). */
  body.nav-open{overflow:hidden}
  .band-grid,.book-grid{grid-template-columns:1fr}
  .book-grid{grid-template-rows:none;grid-template-areas:"intro" "form" "contact"}
  .book-left>p{max-width:none}
  .members{grid-template-columns:repeat(2,1fr)}
  .gig-next{grid-template-columns:1fr;gap:20px;text-align:left}
  .datebox{display:flex;align-items:baseline;gap:12px;text-align:left}
  .datebox .d{font-size:76px}
  .f-grid{grid-template-columns:1fr}
  .member{transform:none!important}
  .photo-band{transform:none}
}
/* Hero auf Handy und Tablet: nur Standbild Frame 1 (main.js), kein Pinning, keine Scrollstrecke.
   pointer:coarse erfasst auch iPads im Querformat. Muss nach der Regel
   (prefers-reduced-motion:no-preference) stehen, sonst gewinnt dort der 300vh-Spacer. */
@media (max-width:900px),(pointer:coarse){
  .hero-pin__sticky{position:static}
  html.js .hero-pin::after{display:none}
  .hero-sequence__frame{width:min(100%,var(--maxw))}
}
@media (max-width:520px){
  .fields{grid-template-columns:1fr}
  .members{grid-template-columns:1fr}
}
@media (max-width:600px){
  body{font-size:22px}
  .br-desk{display:none} /* CTA-Umbruch nur am Handy hochkant aus */
  .gig-next .loc,.gig-past .pt,.band-text p,.sec-head p{font-size:19.5px}
  .form-card>p,.check,.check-label{font-size:17.5px}
  input,select,textarea{font-size:18.5px}
  .btn{font-size:17px}
  .btn-sm{font-size:15.5px}
  footer{font-size:18px}
}
/* Reduzierte Bewegung gezielt behandeln statt pauschal per *{transition:none}:
   Firefox meldet "reduce" auch bei aktivem Fingerprinting-Schutz, die Seite
   wuerde dort sonst vollstaendig tot wirken. Farbuebergaenge duerfen bleiben,
   Bewegung im Raum faellt weg. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn:hover,.btn-gold:hover,.btn-ghost:hover{transform:none}
  .nav-toggle:active,.nav-close:active{transform:none}
  .nav-toggle span{transition-property:opacity}
}
/* Bei reduzierter Bewegung erscheint das Menue ohne Fahrt – aber deckend,
   nie ueber die Deckkraft, sonst scheint die Seite durch das Panel.
   Eintraege ohne Staffel und ohne Versatz kurz einblenden, die Abdunklung blendet kurz. */
@media (max-width:900px) and (prefers-reduced-motion:reduce){
  nav.main-nav{transition-property:visibility;transition-duration:0s;transition-delay:0s}
  nav.main-nav.is-open > :not(.nav-head),nav.main-nav.is-open .nav-brand{animation-name:nav-item-fade;animation-duration:.2s;animation-delay:0s}
  .nav-backdrop{transition-duration:.2s,0s;transition-delay:0s,.2s}
}