@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)}
/* Der Verweis auf das Schwesterprojekt traegt die Zeile – daher fett. */
.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;
}

/* Startseite: im Hero traegt die Unterzeile den Claim statt der Gattung.
   14 statt 10 Zeichen heisst weniger Sperrung auf derselben Titelbreite -
   1.019em bei EVENTMUSIC, 0.658em hier (aus den Vorschussbreiten von Bebas
   gerechnet). Mit dem geerbten 1.2em wuerde die Zeile 53 % zu breit
   aufschlagen und beim Nachlaufen von fitLockups sichtbar zusammenspringen. */
.lockup--claim .lockup__sub{letter-spacing:.658em;margin-right:-.658em}

/* --- 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}
  .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}
.gig{
  display:flex;flex-wrap:wrap;gap:6px 28px;align-items:baseline;
  padding:22px 0;border-bottom:1px solid var(--line);
}
.gig:first-child{border-top:2px solid var(--accent)}
.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;
}
.gig__meta{
  font-size:14px;line-height:1.55;color:var(--muted);font-weight:300;
  flex:none;margin:0;
}
.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);
}
.secret__row{display:flex;justify-content:space-between;gap:16px}
.secret__row--rule{padding-bottom:14px;border-bottom:1px solid var(--line)}
.secret__row dt{
  display:flex;align-items:center;gap:13px;margin:0;
  font-family:var(--cond);font-size:20px;font-weight:400;text-transform:uppercase;
}
.secret__row dt img{width:36px;height:36px;flex:none}
/* Der Text steht in einem eigenen Span, sonst zaehlt jedes Wort als
   Flex-Item und der gap oeffnet eine Luecke mitten im Namen. */
.secret__row dt > span{display:block}
.secret__row dd{margin:0;font-size:15px;color:var(--text-2);text-align:right;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)}