@font-face{font-family:'Barlow';font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/barlow-300.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/barlow-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/barlow-600.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/bebas-neue-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ==========================================================================
   Guilty Pleasure Eventmusic – Design-System
   ========================================================================== */

:root{
  --bg:#0b0b0c;
  --bg-soft:rgba(242,239,233,.03);
  --bg-soft-2:rgba(242,239,233,.05);
  --text:#f2efe9;
  --text-2:#cdc8bf;
  --muted:#9a958c;
  --line:rgba(242,239,233,.1);
  --line-2:rgba(242,239,233,.14);
  --line-3:rgba(242,239,233,.24);
  --accent:#d63f2c;            /* Flächen, Rahmen, Buttons */
  --accent-text:#dc4a35;       /* dieselbe Farbe, minimal aufgehellt für Text auf Dunkel (WCAG AA) */
  --accent-soft:rgba(214,63,44,.2);
  --accent-line:rgba(214,63,44,.65);
  --wrap:1240px;
  --pad:32px;
  /* Auszeichnungsschrift: alles Versale. Bebas hat nur einen Schnitt (400),
     die Fettungsangaben werden am Dateiende neutralisiert. Nie im Fliesstext
     einsetzen - .wordmark und .caps stehen versal, aber in --body.
     Siehe docs/design-system.md, Abschnitt Schrift. */
  --cond:'Bebas Neue',"Helvetica Neue",Arial,sans-serif;
  --body:'Barlow',system-ui,-apple-system,"Segoe UI",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}

html{scroll-behavior:smooth;scroll-padding-top:88px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  /* Bebas hat nur einen Schnitt: der Browser darf nie eine Fettung
     dazurechnen. Barlow bringt 300/400/600 selbst mit. */
  font-synthesis:none;
  font-weight:400;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
.lockup picture,.secret__row dt picture,
.site-footer__brand picture,.tile picture{flex:none;display:block;line-height:0}
a{color:var(--text);text-decoration:none;transition:color .18s ease,border-color .18s ease,background .18s ease}
a:hover{color:var(--accent-text)}
h1,h2,h3,h4,p{margin:0}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--accent);color:var(--text);padding:12px 20px;
  font-family:var(--cond);font-weight:400;letter-spacing:.14em;text-transform:uppercase;
}
.skip-link:focus{left:0}

.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Links im Fließtext zusätzlich unterstreichen – Farbe allein reicht nicht (WCAG 1.4.1) */
.body-text a,.lead a,.note a,.prose p a,.prose li a,.callout a:not(.btn),.consent a,.embed__hint a{
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em;
}

/* --- Typografie ---------------------------------------------------------- */

.eyebrow{
  font-family:var(--cond);font-size:13px;font-weight:400;
  letter-spacing:.34em;text-transform:uppercase;color:var(--accent-text);
}
.eyebrow--muted{color:var(--muted)}
.eyebrow--hero{font-size:12px;letter-spacing:.3em;color:var(--text);margin-bottom:16px}

h1,.h1{
  font-family:var(--cond);font-weight:400;
  font-size:clamp(38px,3.6vw,64px);line-height:.94;letter-spacing:-.01em;
  text-transform:uppercase;overflow-wrap:break-word;text-wrap:balance;
}
h2,.h2{
  font-family:var(--cond);font-weight:400;
  font-size:clamp(34px,4.4vw,58px);line-height:1;text-transform:uppercase;
}
h3,.h3{
  font-family:var(--cond);font-weight:400;font-size:23px;
  letter-spacing:.06em;text-transform:uppercase;line-height:1.15;
}
.lead{font-size:19px;line-height:1.55;color:var(--text);font-weight:400}
.body-text{font-size:16px;line-height:1.65;color:var(--text);font-weight:400}
.note{font-size:14px;line-height:1.55;color:var(--muted);font-weight:300}
/* In den Formatkarten traegt die Zusatzzeile Inhalt, kein Kleingedrucktes. */
.card__body .note{color:var(--text)}
/* Die Wortmarke traegt diese Zeilen – Schwesterprojekt wie Power Duo. Fett,
   damit die Zusatzzeile nicht als Kleingedrucktes gelesen wird. */
.card__body .note .wordmark{font-weight:600}
.measure{max-width:52ch}

/* Wortmarke im Fliesstext – versal wie im Logo, PLEASURE in Akzentfarbe.
   Versalien brauchen etwas Laufweite, sonst kleben sie im Satz. */
.wordmark{text-transform:uppercase;letter-spacing:.03em}
/* Kurzes Versal-Label im Fliesstext – Versalien brauchen etwas Laufweite. */
.caps{text-transform:uppercase;letter-spacing:.06em}
/* Verlinkte Wortmarken (Partneragentur, Schwesterprojekt) stehen weiss und
   fett statt rot – als Link erkennbar bleiben sie durch die Unterstreichung. */
a.wordmark,a.caps{color:var(--text);font-weight:600}

.label{
  font-family:var(--cond);font-size:13px;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}

/* --- Buttons ------------------------------------------------------------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  max-width:100%;
  font-family:var(--cond);font-size:19px;font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;
  padding:15px 30px;border-radius:2px;border:1px solid transparent;
  cursor:pointer;text-align:center;
}
.btn--primary{background:var(--accent);color:var(--text);border-color:var(--accent)}
.btn--primary:hover,.btn--primary:focus-visible{background:var(--text);color:var(--bg);border-color:var(--text)}
.btn--ghost{border-color:rgba(242,239,233,.4);background:transparent;color:var(--text)}
.btn--ghost:hover,.btn--ghost:focus-visible{border-color:var(--accent);color:var(--accent-text)}
.btn--sm{font-size:19px;padding:12px 22px}

/* --- Logo-Scheibe --------------------------------------------------------- */

.disc{border-radius:50%;box-shadow:0 0 0 2.5px var(--text);display:block;flex:none;background:#000}


/* --- Marken-Lockup ---------------------------------------------------------
   Logoscheibe links, rechts zweizeilig "GUILTY PLEASURE" über "EVENTMUSIC".
   Die Unterzeile wird per JS exakt auf die Ink-Breite der Titelzeile gesperrt
   (siehe fitLockups in site.js). Die Werte hier sind der Zustand davor und
   der Rückfall, falls kein JavaScript läuft.
   -------------------------------------------------------------------------- */

.lockup{display:flex;align-items:center;flex:none;max-width:100%}
.lockup__mark{flex:none}
.lockup__text{
  flex:none;font-family:var(--cond);text-transform:uppercase;line-height:1;
  font-synthesis:none;
}
.lockup__title{
  display:block;white-space:nowrap;font-weight:400;
  font-size:1em;letter-spacing:.02em;color:var(--text);
}
/* Seit Bebas ist kein Text mehr fett, damit faellt die WCAG-Ausnahme fuer
   grossen fetten Text weg: --accent kommt auf --bg nur auf 4.32:1. Roter Text
   steht deshalb durchgehend auf --accent-text (4.75:1). --accent bleibt den
   Flaechen, Rahmen und Buttons. .accent--sm ist nur noch ein Alias. */
.accent,.accent--sm{color:var(--accent-text)}
.lockup__sub{
  display:block;white-space:nowrap;font-weight:400;
}

/* Header: kompakt, feste Größen */
.lockup--header{font-size:24px;gap:11px}
.lockup--header .lockup__mark{width:46px;height:46px}
.lockup--header .lockup__sub{
  font-size:11px;color:var(--text);margin-top:5px;
  letter-spacing:1.1em;margin-right:-1.1em;
}
@media (max-width:400px){
  .lockup--header{font-size:20px;gap:9px}
  .lockup--header .lockup__mark{width:40px;height:40px}
}

/* Karte: liegt zwischen Header und Hero. Wie im Header bekommt die Scheibe
   hier relativ mehr Gewicht als im Hero (2em statt 1.53em) - auf kleinen
   Groessen traegt sie sonst nicht gegen die Titelzeile an. */
.lockup--card{font-size:clamp(26px,3.4vw,32px);gap:.5em}
.lockup--card .lockup__mark{width:1.94em;height:1.94em}
.lockup--card .lockup__sub{
  font-size:.44em;color:var(--text);margin-top:.14em;
  letter-spacing:1.1em;margin-right:-1.1em;
}

/* Hero: groß, skaliert mit dem Viewport.
   Alle Maße hängen an der Schriftgröße der Titelzeile, damit das Verhältnis
   Logo / Titel / Unterzeile (104 / 68 / 29 px) auf jeder Breite erhalten bleibt. */
.lockup--hero{font-size:clamp(30px,7.4vw,68px);gap:.32em;margin-bottom:32px}
.lockup--hero .lockup__mark{width:1.53em;height:1.53em}
.lockup--hero .lockup__sub{
  font-size:.4265em;color:var(--text);margin-top:.147em;
  letter-spacing:1.2em;margin-right:-1.2em;
}

/* Secret-Abschnitt: dort traegt das Lockup die H2 des Abschnitts, eine Groesse
   unter dem Hero. Die Unterzeile steht auf .3em statt .4265em - 19 Zeichen auf
   der kuerzeren Titelzeile GUILTY SECRET sperrten mit der Hero-Proportion nur
   .268em, halb so offen wie dort. Bei .3em treffen sich beide Sperrungen. */
.lockup--secret{font-size:clamp(24px,4.6vw,44px);gap:.32em}
.lockup--secret .lockup__mark{width:1.53em;height:1.53em}
.lockup--secret .lockup__sub{font-size:.3em;color:var(--text);margin-top:.147em}

/* Vergleichskasten "Kurz gesagt": beide Lockups uebereinander, Zielgroesse
   30 px. Beide Zeilen haengen an derselben Klasse und skalieren gemeinsam -
   sie bleiben also immer gleich gross. Nach unten muessen sie mitgehen: der
   Kasten steht in einer Rasterspalte ab 300 px und traegt selbst Innenabstand,
   bei festen 30 px liefe das Lockup auf dem Telefon heraus.

   Die Sperrung der beiden Unterzeilen ist dabei bewusst ungleich. Sie ergibt
   sich aus Zeichenzahl geteilt durch Titelbreite und ist damit
   massstabsunabhaengig - .589em bei GUILTY PLEASURE, .268em beim kuerzeren
   GUILTY SECRET, bei jeder Schriftgroesse. Angleichen liesse sich das nur
   ueber verschiedene Schriftgroessen; ungleiche Versalhoehe in zwei
   benachbarten Zeilen liest sich als Fehler, ungleiche Dichte nur als
   Textlaenge. */
.lockup--box{font-size:clamp(23px,6.6vw,30px);gap:.32em}
.lockup--box .lockup__mark{width:1.53em;height:1.53em}
.lockup--box .lockup__sub{font-size:.4265em;color:var(--text);margin-top:.147em}

/* Claim als Unterzeile: gebundene Wortgruppen -------------------------------
   Traegt die Unterzeile den Claim statt der Gattung, steht sie mit Punkten.
   Dann darf nicht mehr Zeichen fuer Zeichen gesperrt werden - der Punkt loeste
   sich sonst von seinem Wort und schwebte frei. Die Zeile ist deshalb eine
   Reihe aus Wortgruppen: gesperrt wird innerhalb der Gruppe, der Rest der
   Titelbreite geht in die Wortluecken (fitBound in site.js).

   Das Rot wandert dabei nicht mit: es bleibt auf PLEASURE beziehungsweise
   SECRET in der Titelzeile, die Claim-Zeile steht weiss. Der Header ist
   sticky und zeigt dieselbe Wortmarke an jeder Scrollposition gleichzeitig -
   saesse das Rot in der Unterzeile, stuenden auf der Startseite durchgehend
   zwei Rotsetzungen desselben Lockups im Bild. Ein Rot pro Lockup, und immer
   dasselbe Wort. */
/* Zwei Klassen, damit die Regel die groessenspezifische
   '.lockup--x .lockup__sub' schlaegt - sonst erben die Wortgruppen vor dem
   Skriptlauf deren Sperrung. */
.lockup__sub.lockup__sub--bound{
  display:flex;justify-content:space-between;
  letter-spacing:0;margin-right:0;column-gap:.5em;  /* Stand ohne Skript */
}
.lockup__sub--bound .unit{white-space:nowrap;flex:none}
.lockup__sub--bound .dot{display:inline-block}

/* --- Header --------------------------------------------------------------- */

.site-header{
  position:sticky;top:0;z-index:30;
  background:rgba(11,11,12,.9);
  border-bottom:1px solid var(--line);
}
@supports (backdrop-filter:blur(14px)){
  .site-header{background:rgba(11,11,12,.82);backdrop-filter:blur(14px)}
}
.site-header__inner{
  max-width:var(--wrap);margin:0 auto;padding:18px var(--pad);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;
}

.nav{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;
  font-family:var(--cond);font-size:17px;font-weight:400;
  letter-spacing:.12em;text-transform:uppercase;
}
/* Nur die direkten Navigationslinks – nicht die Eintraege in den Dropdowns.
   Ohne den Kindkombinator schlug diese Regel den Hover der Panels und
   faerbte deren Text rot auf rotem Grund. */
.nav > a:not(.btn):hover{color:var(--accent-text)}

/* --- Icon-Menues im Header ---------------------------------------------------
   Zwei Dropdowns vor dem Anfragen-Button. Ab 900 px abwaerts loest sich das
   Panel auf und steht als aufgeklappte Gruppe im Burger-Overlay (siehe unten).
   -------------------------------------------------------------------------- */

.menu{position:relative}
.menu__btn{
  display:inline-flex;align-items:center;gap:8px;
  background:transparent;border:0;padding:6px;margin:-6px;cursor:pointer;color:inherit;
  font:inherit;letter-spacing:inherit;text-transform:inherit;
}
.menu__btn .icon{width:20px;height:20px}
.menu__btn:hover{color:var(--accent-text)}
/* Ab 901 px zeigt der Button nur das Icon. Das Label bleibt im DOM: es ist der
   Accessible Name des Buttons und wird im Burger-Overlay wieder sichtbar. */
.menu__btn-label{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.menu__panel{
  position:absolute;top:calc(100% + 14px);right:0;z-index:40;
  min-width:200px;margin:0;padding:6px 0;list-style:none;
  background:#141315;border:1px solid var(--line-2);
}
.menu__panel[hidden]{display:none}
.menu__panel a{
  display:block;padding:11px 16px;white-space:nowrap;
  font-size:15px;letter-spacing:.1em;
}
.menu__panel a:hover,.menu__panel a:focus-visible{background:var(--accent);color:var(--text)}
/* Auf rotem Hover-Grund muss das rote PLEASURE mitziehen, sonst verschwindet es. */
.menu__panel a:hover .accent--sm,.menu__panel a:focus-visible .accent--sm{color:inherit}

.nav-toggle{
  display:none;align-items:center;gap:10px;
  background:transparent;border:1px solid var(--line-3);border-radius:2px;
  padding:10px 14px;cursor:pointer;
  font-family:var(--cond);font-size:15px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;
}
.nav-toggle__bars{position:relative;width:18px;height:12px;flex:none}
.nav-toggle__bars span{position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .2s ease,opacity .2s ease}
.nav-toggle__bars span:nth-child(1){top:0}
.nav-toggle__bars span:nth-child(2){top:5px}
.nav-toggle__bars span:nth-child(3){top:10px}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

@media (max-width:900px){
  :root{--pad:20px}
  /* Enger, damit das Lockup im Vergleichskasten mehr Breite bekommt. */
  .secret__box{padding:26px 22px}
  .nav-toggle{display:inline-flex}
  .nav{
    display:none;order:3;width:100%;
    flex-direction:column;align-items:stretch;gap:0;
    border-top:1px solid var(--line);margin-top:12px;
  }
  .nav.is-open{display:flex}
  .nav > a{padding:15px 2px;border-bottom:1px solid var(--line)}
  .nav .btn{margin:16px 0 6px;justify-content:center}

  /* Aufgeklappte Gruppen statt Dropdown */
  .menu{border-bottom:1px solid var(--line)}
  /* Gruppentitel: gleiche Groesse und Farbe wie die uebrigen Menuepunkte.
     Als Ueberschrift erkennbar bleiben sie durch Icon und die eingerueckten
     Eintraege darunter – nicht mehr dadurch, dass sie blasser sind. */
  .menu__btn{width:100%;padding:15px 2px;margin:0;cursor:default}
  .menu__btn:hover{color:inherit}
  .menu__btn .icon{width:18px;height:18px}
  .menu__btn-label{
    position:static;width:auto;height:auto;padding:0;margin:0;
    overflow:visible;clip:auto;white-space:nowrap;
  }
  .menu__panel,.menu__panel[hidden]{
    display:block;position:static;border:0;background:transparent;
    min-width:0;margin:0 0 8px;padding:0;
  }
  .menu__panel a{padding:11px 2px 11px 26px;font-size:16px;letter-spacing:.12em}
  .menu__panel a:hover,.menu__panel a:focus-visible{background:transparent;color:var(--accent-text)}
}

/* --- Hero ----------------------------------------------------------------- */

@keyframes gpfade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

.hero{
  position:relative;overflow:hidden;
  border-bottom:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:stretch;
}
.hero__copy{
  flex:1 1 460px;min-width:min(100%,420px);
  display:flex;align-items:flex-end;
  padding:72px 40px 72px max(var(--pad),calc((100vw - var(--wrap)) / 2));
}
.hero__inner{max-width:660px;width:100%;animation:gpfade .8s ease both}
.hero__inner h1{margin-top:18px}
.hero__inner .lead{margin-top:26px;max-width:52ch}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.hero__media{flex:1 1 520px;position:relative;min-height:min(78vh,660px)}
.hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 58%}
/* Bewegtbild ueber dem Foto. Blendet erst auf, wenn es abspielbereit ist –
   bis dahin steht das Foto, so blitzt nichts auf. Der Verlauf aus ::after
   liegt als letztes Kind ohnehin darueber. */
.hero__video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 58%;
  opacity:0;transition:opacity .6s ease;
}
.hero__video[data-bereit]{opacity:1}
@media (prefers-reduced-motion:reduce){ .hero__video{transition:none} }
.hero__media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(11,11,12,.9) 0%,rgba(11,11,12,.3) 26%,rgba(11,11,12,0) 60%);
}
@media (max-width:900px){
  .hero__copy{padding:56px var(--pad) 48px;order:2}
  .hero__media{order:1;flex-basis:100%;min-height:56vh}
  .hero__media::after{background:linear-gradient(180deg,rgba(11,11,12,.35) 0%,rgba(11,11,12,.1) 45%,rgba(11,11,12,.95) 100%)}
}

/* --- Anlässe-Leiste -------------------------------------------------------- */

.occasions{border-bottom:1px solid var(--line)}
.occasions__inner{
  display:flex;flex-wrap:wrap;gap:10px 18px;align-items:baseline;
  padding-top:30px;padding-bottom:30px;
  font-family:var(--cond);font-size:20px;font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.occasions__claim{color:var(--text)}   /* nur das LIVE ist rot – wie im Hero */
.occasions__inner a{color:inherit}
.occasions__inner a:hover{color:var(--accent-text)}
.occasions__sep{color:#3b3936}
@media (max-width:700px){.occasions__inner{font-size:17px;gap:8px 14px}}

/* --- Referenzen -------------------------------------------------------------
   Namen stehen bewusst in Gemischtschreibung: Eigennamen wie "me and all hotel"
   oder "IhmeRauschen" wuerden von text-transform zerstoert. Struktur traegt
   hier die Spaltenueberschrift, nicht die Versalie.
   -------------------------------------------------------------------------- */

.refs{display:flex;flex-direction:column;gap:11px;margin:0}
.refs li{font-size:16px;line-height:1.45;color:var(--text);font-weight:400}
.refs .ref__sub{display:block;font-size:14px;color:var(--muted);font-weight:300}

/* --- Termine ---------------------------------------------------------------
   Flache Liste mit Trennlinien statt Karten – eine Terminliste soll man
   scannen, nicht lesen. Das Datum traegt die Akzentfarbe, weil es der Anker
   fuers Auge ist; pro Zeile bleibt es bei genau einem roten Element.
   -------------------------------------------------------------------------- */

.gigs{display:flex;flex-direction:column;border-top:2px solid var(--accent)}
.gig{
  display:flex;flex-wrap:wrap;gap:6px 28px;align-items:baseline;
  padding:22px 0;border-bottom:1px solid var(--line);
}
/* Die rote Oberkante haengt an der Liste, nicht am ersten Eintrag: abgelaufene
   Termine blendet site.js aus, und :first-child bliebe dann an einer
   unsichtbaren Zeile haengen - der erste sichtbare Termin stuende ohne Kante. */
.gig__date{
  font-family:var(--cond);font-size:16px;font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text);
  flex:none;min-width:124px;
}
.gig__title{
  font-family:var(--cond);font-size:22px;font-weight:400;
  letter-spacing:.04em;text-transform:uppercase;line-height:1.15;
  flex:1 1 240px;margin:0;
}
/* Bewusst nicht das 14px/300-Muster der Beistellzeilen (.note, .ref__sub,
   .tile__sub). Die stehen dicht unter ihrem Hauptelement; diese Zeile steht
   allein am rechten Rand und traegt Ort und Uhrzeit - also das, weswegen
   jemand hinfaehrt. Der Kontrast war nie das Problem (--muted kommt auf
   6.61:1), das duenne 300 war es: auf Dunkel frisst der Grund die Strichenden.
   400 liegt bereits geladen, kostet also keinen weiteren Font. */
/* Die Besetzung als Beistellzeile unter dem Titel - hier ist das Muster von
   .ref__sub und .tile__sub richtig, weil sie direkt an ihrem Hauptelement
   haengt. Sie muss aus dem Bebas des Titels heraus: Versalien und Sperrung
   wuerden sie zu einer zweiten Ueberschrift machen. */
.gig__crew{
  display:block;margin-top:5px;
  font-family:var(--body);font-size:14px;font-weight:300;
  letter-spacing:0;text-transform:none;color:var(--muted);
}

.gig__meta{
  font-size:15px;line-height:1.55;color:var(--muted);font-weight:400;
  flex:none;margin:0;
}
/* Die Location fuehrt zur Location. Farbe traegt das nicht: das Rot ist in
   dieser Zeile schon fuers Datum vergeben, und ein zweiter heller Ton machte
   aus der Meta-Zeile eine zweite Ueberschrift. Also bleibt sie --muted und
   zeigt sich als Link ueber die Unterstreichung - so, wie es die Regel weiter
   oben fuer Fliesstext verlangt. Erst beim Hover kommt die Akzentfarbe. */
.gig__meta a{
  color:inherit;
  text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.18em;text-decoration-color:var(--line-3);
}
.gig__meta a:hover,.gig__meta a:focus-visible{
  color:var(--accent-text);text-decoration-color:currentColor;
}

.gig__cta{flex:none}
/* Unter 640 px bricht jede Angabe auf eine eigene Zeile um. */
@media (max-width:640px){
  .gig{gap:4px 0;padding:18px 0}
  .gig__date,.gig__title,.gig__meta,.gig__cta{flex:1 1 100%;min-width:0}
  .gig__title{font-size:20px}
}

/* --- Sections -------------------------------------------------------------- */

.section{padding-top:96px;padding-bottom:96px}
.section--tight{padding-top:72px;padding-bottom:72px}
.section--soft{border-top:1px solid var(--line);background:var(--bg-soft)}
.section__head{
  display:flex;flex-wrap:wrap;gap:24px;align-items:flex-end;
  justify-content:space-between;margin-bottom:48px;
}
.section__head .eyebrow{margin-bottom:14px}
.section__head p{max-width:40ch}
.section__head__aside{display:flex;flex-direction:column;gap:14px;max-width:40ch}
.section__head__aside p{max-width:none}
@media (max-width:700px){.section{padding-top:64px;padding-bottom:64px}}

/* --- Grids ----------------------------------------------------------------- */

.grid{display:grid;gap:22px}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid--tiles{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}

/* --- Format-Karten ---------------------------------------------------------- */

.card{
  border:1px solid var(--line-2);
  background:linear-gradient(180deg,var(--bg-soft-2),rgba(242,239,233,.015));
  display:flex;flex-direction:column;
  transition:border-color .2s ease;
}
.card:hover{border-color:rgba(214,63,44,.7)}
/* Kein roter Verlauf mehr: auf warmem Grund wirkt dasselbe Grau heller als
   auf neutralem – die Musiker-Zeilen sahen dadurch verschieden aus.
   Hervorgehoben bleibt die Karte durch ihren roten Rahmen. */
.card--accent{border-color:var(--accent-line)}
.card__media{position:relative;aspect-ratio:16/9;overflow:hidden;background:#141415}
.card__media img{width:100%;height:100%;object-fit:cover}
/* Nach dem Klick ersetzt das Skript den Inhalt durch ein iframe. Ohne diese
   Regel bliebe es auf der HTML-Standardgroesse 300x150 stehen - eine
   Briefmarke im 16:9-Kasten. Gleiche Regel wie bei .embed weiter unten. */
.card__media iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.card__media--trio img{object-position:center 62%}
.card__media--band img{object-position:center 38%}
.card__body{padding:26px 26px 30px;display:flex;flex-direction:column;gap:16px;flex:1}
/* Die Musikerzahl gehoert nicht zum Lockup: sie beschreibt das Angebot,
   nicht den Namen. Steht deshalb darunter, buendig zum Kartenrand. */
.card__meta{
  font-family:var(--cond);font-size:13px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--muted);margin-top:12px;
}
.card__cta{margin-top:auto;align-self:flex-start;font-size:19px;padding:15px 24px}

.video-badge{
  position:absolute;right:12px;bottom:12px;
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(11,11,12,.72);border:1px solid rgba(242,239,233,.45);
  padding:8px 13px;
  font-family:var(--cond);font-size:13px;font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;cursor:pointer;
}
.video-badge:hover{border-color:var(--accent);color:var(--accent-text)}

.callout{
  margin-top:30px;display:flex;flex-wrap:wrap;gap:20px;
  align-items:center;justify-content:space-between;
  border:1px solid rgba(242,239,233,.16);padding:22px 26px;background:var(--bg-soft);
}
.callout p{font-size:17px;line-height:1.55;color:var(--text);font-weight:400;max-width:58ch}
.callout .btn{flex:none}
@media (max-width:640px){
  .callout{padding:20px}
  .callout .btn{flex:1 1 100%;padding:15px 16px;letter-spacing:.08em}
}

/* --- Guilty Secret ---------------------------------------------------------- */

.secret{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:linear-gradient(120deg,rgba(242,239,233,.055),rgba(11,11,12,0) 65%);
}
.secret__inner{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:48px;align-items:center;padding-top:76px;padding-bottom:76px;
}
.secret__col{display:flex;flex-direction:column;gap:20px}
.secret__links{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:4px}
.secret__box{
  border:1px solid var(--line-2);padding:34px;
  display:flex;flex-direction:column;gap:18px;background:rgba(11,11,12,.5);
}
/* Seit die Zeile ein volles Lockup mit gesperrtem Claim traegt, steht die
   Beschreibung nicht mehr rechts daneben: das Lockup ist auf 30 px Titelzeile
   rund 260 px breit und passt in der 300-px-Spalte nicht mehr neben einen
   zweiten Block. Lockup oben, Beschreibung darunter. */
.secret__row{display:flex;flex-direction:column;gap:12px}
.secret__row--rule{padding-bottom:20px;border-bottom:1px solid var(--line)}
.secret__row dt{margin:0}
.secret__row dd{margin:0;font-size:15px;color:var(--text-2);font-weight:300}


/* Quadratischer Icon-Button – gleiche Optik wie .btn--ghost, aber ohne Text.
   Bewusst schmaler als der Haupt-Button, damit die Hierarchie erhalten bleibt. */
.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:62px;height:62px;
  border:1px solid rgba(242,239,233,.4);border-radius:2px;
  background:transparent;color:var(--text);
}
.icon-btn:hover,.icon-btn:focus-visible{border-color:var(--accent);color:var(--accent-text)}
.icon-btn .icon{width:22px;height:22px}
.icon{width:1em;height:1em;fill:currentColor;flex:none}
.icon--18{width:18px;height:18px}
.icon--17{width:17px;height:17px}

/* --- Videos (Consent-Embeds) ------------------------------------------------ */

.embed{
  border:1px solid var(--line-2);aspect-ratio:16/9;
  position:relative;overflow:hidden;background:#141415;
}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.embed__poster{
  position:absolute;inset:0;width:100%;height:100%;
  border:0;padding:0;margin:0;background:transparent;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;
  color:var(--text);
}
.embed__poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.embed__play{
  position:relative;width:72px;height:72px;border:1.5px solid rgba(242,239,233,.85);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(11,11,12,.45);
}
.embed__play svg{width:22px;height:22px;fill:currentColor;margin-left:4px}
.embed__poster:hover .embed__play{border-color:var(--accent);color:var(--accent-text)}
.embed__hint{
  position:relative;max-width:44ch;text-align:center;padding:0 20px;
  font-size:14px;line-height:1.5;color:var(--text-2);font-weight:300;
  background:rgba(11,11,12,.6);
}
.embed__hint strong{font-family:var(--cond);font-weight:400;letter-spacing:.14em;text-transform:uppercase;display:block;font-size:16px;margin-bottom:6px;color:var(--text)}

.tile{
  display:flex;gap:14px;align-items:center;
  border:1px solid rgba(242,239,233,.12);padding:14px;
}
.tile:hover{border-color:var(--accent)}
.tile__thumb{
  width:86px;height:56px;flex:none;object-fit:cover;background:#141415;
  display:flex;align-items:center;justify-content:center;
}
.tile__thumb--ig{background:linear-gradient(135deg,rgba(214,63,44,.35),rgba(242,239,233,.08))}
/* Songkacheln tragen bewusst kein Foto: sieben Kacheln mit denselben zwei
   Pressebildern sahen aus wie ein Fehler. Das Play-Zeichen genuegt als Signal. */
.tile__thumb--play{background:rgba(242,239,233,.06);color:var(--accent-text)}
.tile:hover .tile__thumb--play{background:rgba(214,63,44,.18)}
.tile__thumb--play svg{fill:currentColor}
.tile__text{min-width:0}
.tile__title{
  display:block;font-family:var(--cond);font-size:18px;font-weight:400;
  text-transform:uppercase;letter-spacing:.06em;
}
.tile__sub{display:block;font-size:14px;color:var(--muted);font-weight:300;overflow-wrap:anywhere}

/* --- Service ---------------------------------------------------------------- */

.service{border-top:2px solid rgba(242,239,233,.25);padding-top:22px;display:flex;flex-direction:column;gap:12px}
.service--first{border-top-color:var(--accent)}

/* --- Anfrage-Formular -------------------------------------------------------- */

.contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:56px;align-items:start}
.contact__col{display:flex;flex-direction:column;gap:22px}
.contact__mail{
  color:var(--accent-text);font-family:var(--cond);font-size:22px;
  font-weight:400;letter-spacing:.04em;
}

.form-panel{
  border:1px solid rgba(242,239,233,.16);padding:32px;
  display:flex;flex-direction:column;gap:20px;background:var(--bg-soft);
}
@media (max-width:520px){.form-panel{padding:22px}}

.step{display:flex;flex-direction:column;gap:18px;border:0;padding:0;margin:0}

.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field > span{
  font-family:var(--cond);font-size:13px;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}
.field input,.field textarea,.field select{
  width:100%;min-width:0;background:transparent;
  border:1px solid var(--line-3);border-radius:0;
  color:var(--text);padding:12px;
  font-family:var(--body);font-size:15px;
}
.field textarea{resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#6f6b64}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.field input[type="date"]{color-scheme:dark}
.field-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}

.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{
  cursor:pointer;padding:11px 16px;
  border:1px solid var(--line-3);background:transparent;color:var(--text-2);
  font-family:var(--cond);font-size:15px;font-weight:400;
  letter-spacing:.1em;text-transform:uppercase;border-radius:0;
  transition:border-color .15s ease,background .15s ease,color .15s ease;
}
.chip:hover{border-color:rgba(214,63,44,.6);color:var(--text)}
.chip[aria-pressed="true"]{border:1px solid var(--accent);background:var(--accent-soft);color:var(--text)}

.consent{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--text-2);font-weight:300}
.consent input{margin:3px 0 0;width:17px;height:17px;flex:none;accent-color:var(--accent)}

.form-send{display:flex;border-top:1px solid rgba(242,239,233,.12);padding-top:18px}
.form-error{color:#f0907f;font-size:14px;font-weight:400}
.form-error[hidden]{display:none}

.thanks{display:flex;flex-direction:column;gap:16px;padding:18px 0}
.thanks h3{font-size:32px;letter-spacing:0}
/* Zusammenfassung zum Kopieren – dieselbe Optik wie die Eingabefelder. */
.summary-copy{
  font-family:var(--body);font-size:14px;line-height:1.6;
  color:var(--text-2);resize:vertical;
}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* --- Prose (Unterseiten, Recht) ---------------------------------------------- */

.prose{max-width:72ch;display:flex;flex-direction:column;gap:20px}
.prose p,.prose li{font-size:17px;line-height:1.7;color:var(--text);font-weight:400}
.prose h2{font-size:clamp(28px,3.2vw,40px);margin-top:24px}
.prose h3{margin-top:16px}
.prose strong{color:var(--text);font-weight:600}
.prose a{color:var(--accent-text)}
.prose ul{display:flex;flex-direction:column;gap:10px;padding-left:22px;list-style:disc}
.prose ul li::marker{color:var(--accent)}

.crumbs{font-family:var(--cond);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);padding-top:28px}
.crumbs a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.crumbs a:hover{color:var(--accent-text)}
.crumbs span{color:#3b3936;margin:0 8px}

.todo{border-left:2px solid var(--accent);padding:12px 16px;background:rgba(214,63,44,.08);font-size:15px;color:var(--text-2)}

/* --- Footer ------------------------------------------------------------------ */

.site-footer{border-top:1px solid var(--line)}
.site-footer__inner{
  display:flex;flex-wrap:wrap;gap:28px;align-items:center;justify-content:space-between;
  padding-top:44px;padding-bottom:44px;
}
.site-footer__brand{display:flex;align-items:center;gap:14px}
.site-footer__copy{
  font-family:var(--cond);font-size:13px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted);
}
.site-footer__reach{display:block;letter-spacing:.16em;margin-top:5px}
.site-footer__links{
  display:flex;flex-wrap:wrap;gap:16px 24px;
  font-family:var(--cond);font-size:16px;font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;
}
.site-footer__links a{display:inline-flex;align-items:center;gap:8px}
.site-footer__links .muted{color:var(--muted)}
.site-footer__links .muted:hover{color:var(--accent-text)}