/* ==========================================================================
   GUILTY SECRET Eventmusic – Stylesheet
   Umsetzung der Designvorlage "Guilty Secret Website v3".
   Reihenfolge: Schriften, Tokens, Grundlagen, Bausteine, Abschnitte, Responsive.
   ========================================================================== */

/* --------------------------------------------------------------- Schriften
   Selbst ausgeliefert (gwfh.mranftl.com, latin). Keine externe Verbindung,
   deshalb kommt die Seite ohne Cookie-Banner aus.
   Zwei Rollen, streng getrennt: Bebas Neue zeichnet aus (alles Versale),
   Barlow trägt den Inhalt. Bebas gibt es nur in einem Schnitt – siehe die
   Notiz an --cond. */
@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;}

/* ----------------------------------------------------------------- Tokens */
:root{
  --bg:#0b0b0c;
  --bg-soft:rgba(242,239,233,.03);
  --bg-video:#141314;
  --bg-menu-hover:#161516;
  --text:#f2efe9;
  --muted:#9a958c;
  --muted-2:#5d5a55;
  /* Kein Text ist mehr fett (siehe --cond), damit fällt die WCAG-Ausnahme für
     großen fetten Text weg. Deshalb zwei Nuancen desselben Rots: --accent
     trägt Flächen, Rahmen und Buttons, --accent-text jeden farbigen TEXT. */
  --accent:#d1373c;            /* Red Fiesta – Flächen und Rahmen, 4.05:1 */
  --accent-text:#dd4a4f;       /* jeder rote Text auf --bg, 4.84:1 */
  --accent-hi:#e6595d;         /* Links und Hover, 5.58:1 */
  --on-accent:#fff;            /* Schrift auf --accent-Flächen, 4.86:1 */
  --line:rgba(242,239,233,.1);
  --line-2:rgba(242,239,233,.14);
  --line-3:rgba(242,239,233,.25); /* Spaltenkopf sekundär */
  --field:rgba(242,239,233,.24);
  --btn-line:rgba(242,239,233,.4);
  --sep:#3b3936;               /* Schrägstrich in den Versalzeilen */
  --wrap:1304px;
  --pad:32px;
  /* Auszeichnung: Wortmarke, Überschriften, Labels, Buttons, Navigation,
     Termine, Chips, Footer – alles Versale. Bebas hat nur den Schnitt 400,
     jede Fettung wäre gefälscht. Hierarchie entsteht hier über Größe und
     Laufweite, nie über Strichstärke. Nie mitten im Satz einsetzen –
     dafür gibt es .wordmark und .caps in --body. */
  --cond:'Bebas Neue',"Helvetica Neue",Arial,sans-serif;
  /* Inhalt: alles, was jemand als Satz liest. 300 / 400 / 600. */
  --body:'Barlow',system-ui,-apple-system,"Segoe UI",sans-serif;
  --radius:2px;
}

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

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

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  /* Bebas liegt nur in 400 vor – der Browser darf nie hochrechnen. Ab hier
     gehört jede font-weight-Angabe einem Barlow-Element. */
  font-weight:400;
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{display:block;max-width:100%}
a{color:var(--accent-hi);text-decoration:none;transition:color .18s ease,border-color .18s ease,background .18s ease}
a:hover{color:var(--text)}
h1,h2,h3,p{margin:0}
/* Barlow liegt in 300/400/600 vor – 700 würde der Browser künstlich
   verfetten, deshalb ist "fett" hier durchgehend 600. */
strong{font-weight:600}
input,textarea,select,button{font:inherit;color:inherit}

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

/* Ankerziele sollen nicht unter dem Sticky-Header landen. */
#top,#anlaesse,#besetzung,#walking,#technik,#ablauf,#referenzen,
#termine,#kontakt,#recht,#impressum,#datenschutz{scroll-margin-top:92px}

.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;
}

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

.red{color:var(--accent-text)}
.light{color:var(--text)}
.muted{color:var(--muted)}
.small{font-size:15px}

.mb-4{margin-bottom:4px}
.mb-8{margin-bottom:8px}
.mb-10{margin-bottom:10px}
.mb-14{margin-bottom:14px}
.mb-16{margin-bottom:16px}
.mb-22{margin-bottom:22px}
.mb-24{margin-bottom:24px}
.mb-30{margin-bottom:30px}

/* ------------------------------------------------------------- Typografie */
.kicker{
  font-family:var(--cond);font-size:13px;letter-spacing:.34em;
  text-transform:uppercase;color:var(--accent-text);margin:0 0 16px;
}
.meta{
  font-family:var(--cond);font-size:13px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);margin:0;
}
h2{
  font-family:var(--cond);font-size:clamp(34px,4.4vw,58px);
  line-height:1;text-transform:uppercase;text-wrap:balance;
}
h3{
  font-family:var(--cond);font-size:23px;letter-spacing:.06em;
  text-transform:uppercase;
}
.lead{font-size:19px;line-height:1.55;text-wrap:pretty}
.body{font-size:17px;line-height:1.65;text-wrap:pretty}
p{text-wrap:pretty}
.narrow{max-width:52ch}

/* Regel: die Auszeichnungsschrift steht nie mitten im Satz. Kommt der
   Markenname im Fließtext vor, bleibt er versal – aber in Barlow. Ein
   Schriftwechsel innerhalb einer Zeile fällt sofort auf, und Bebas ist auf
   Fließtextgröße zu dünn. */
.wordmark{text-transform:uppercase;letter-spacing:.03em}
.caps{text-transform:uppercase;letter-spacing:.06em}
.narrow-54{max-width:54ch;margin-bottom:16px}

/* Wortmarke: die Unterzeile wird nicht per letter-spacing gesperrt, sondern
   über zehn Spans mit space-between – nur so steht sie exakt bündig unter
   dem Schriftzug darüber, unabhängig von dessen Breite. */
.lockup{
  display:flex;justify-content:space-between;
  font-family:var(--cond);font-size:clamp(15px,1.42vw,25px);
  text-transform:uppercase;color:var(--text);white-space:nowrap;
}
.lockup--sm{font-size:11px}

/* ---------------------------------------------------------------- Buttons */
.btn{
  display:inline-block;border:0;border-radius:var(--radius);cursor:pointer;
  padding:15px 30px;font-family:var(--cond);font-size:19px;
  letter-spacing:.14em;text-transform:uppercase;text-align:center;
}
.btn--fill{background:var(--accent);color:var(--on-accent)}
.btn--fill:hover{background:var(--text);color:var(--bg)}
.btn--line{background:transparent;border:1px solid var(--btn-line);color:var(--text)}
.btn--line:hover{border-color:var(--accent);color:var(--accent-hi)}
.btn--sm{padding:13px 26px;font-size:17px}

.link-more{
  font-family:var(--cond);font-size:17px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-hi);
}
.link-more:hover{color:var(--text)}
.plain{color:var(--text)}
.plain:hover{color:var(--accent-hi)}

/* ----------------------------------------------------------------- Header */
.head{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:14px var(--pad);
  background:rgba(11,11,12,.96);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:14px;color:var(--text);flex:0 0 auto}
.brand:hover{color:var(--text)}
.brand__disc{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:50%;
  background:var(--bg);border:2.5px solid var(--text);
  flex:0 0 auto;overflow:hidden;
}
.brand__disc img{width:40px;height:40px}
.brand__disc--sm{width:30px;height:30px;}
.brand__disc--sm img{width:26px;height:26px}
.brand__text{display:inline-flex;flex-direction:column;gap:3px}
.brand__mark{
  font-family:var(--cond);font-size:24px;letter-spacing:.02em;
  line-height:1;text-transform:uppercase;white-space:nowrap;
}

.nav{
  display:flex;align-items:center;gap:26px;
  font-family:var(--cond);font-size:15px;letter-spacing:.14em;
  text-transform:uppercase;
}
.nav a{color:var(--text)}
.nav a:hover{color:var(--accent-hi)}

.head__tools{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.head__cta{padding:12px 24px;font-size:16px;white-space:nowrap}

/* --------------------------------------------------------- Social-Menüs
   Icons rein aus CSS – keine Icon-Font, kein SVG-Sprite. */
.social{position:relative;display:inline-flex}
.social__btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;
  border:1px solid var(--btn-line);border-radius:var(--radius);
  background:transparent;color:var(--text);cursor:pointer;
  transition:color .18s ease,border-color .18s ease;
}
.social__btn[aria-expanded="true"]{color:var(--accent-hi);border-color:var(--accent)}

.ico{position:relative;display:inline-block}
.ico--ig{width:19px;height:19px;border:1.6px solid currentColor;border-radius:6px}
.ico--ig span:first-child{
  position:absolute;top:3.6px;left:3.6px;width:8.4px;height:8.4px;
  border:1.6px solid currentColor;border-radius:50%;
}
.ico--ig span:last-child{
  position:absolute;top:2px;right:2px;width:2.5px;height:2.5px;
  background:currentColor;border-radius:50%;
}
.ico--yt{width:22px;height:15.4px;border:1.6px solid currentColor;border-radius:5px}
.ico--yt span{
  position:absolute;top:50%;left:50%;transform:translate(-38%,-50%);
  width:0;height:0;
  border-top:3.4px solid transparent;border-bottom:3.4px solid transparent;
  border-left:5.5px solid currentColor;
}

.social__menu{
  position:absolute;top:calc(100% + 12px);right:0;min-width:230px;z-index:60;
  background:var(--bg);border:1px solid var(--line-2);
  box-shadow:0 18px 44px rgba(0,0,0,.5);
  /* visibility muss mit: opacity:0 blendet nur optisch aus, die Links
     blieben sonst mit der Tabulatortaste erreichbar. Die Verzögerung sorgt
     dafür, dass das Ausblenden sichtbar bleibt statt hart zu springen. */
  transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s;
  opacity:0;transform:translateY(-6px);pointer-events:none;visibility:hidden;
}
.social__menu[data-open]{
  opacity:1;transform:translateY(0);pointer-events:auto;visibility:visible;
  transition:opacity .18s ease,transform .18s ease,visibility 0s;
}
.social__menu a{
  display:block;padding:12px 18px;
  font-family:var(--cond);font-size:15px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text);white-space:nowrap;
}
.social__menu a + a{border-top:1px solid var(--line)}
.social__menu a:hover{background:var(--bg-menu-hover);color:var(--accent-hi)}

/* ------------------------------------------------------------ Burger-Menü
   Ergänzung zur Vorlage: dort verschwindet die Navigation unter 1080px
   ersatzlos. Ab hier übernimmt dieses Menü. */
.burger{
  display:none;width:44px;height:44px;
  border:1px solid var(--btn-line);border-radius:var(--radius);
  background:transparent;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:4px;
  transition:color .18s ease,border-color .18s ease;
}
.burger span{display:block;width:19px;height:1.6px;background:currentColor}
.burger[aria-expanded="true"]{color:var(--accent-hi);border-color:var(--accent)}

.navmob{
  display:none;position:absolute;top:100%;left:0;right:0;
  background:var(--bg);border-bottom:1px solid var(--line-2);
  box-shadow:0 18px 44px rgba(0,0,0,.5);
}
.navmob a{
  display:block;padding:14px var(--pad);
  font-family:var(--cond);font-size:16px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text);
}
.navmob a + a{border-top:1px solid var(--line)}
.navmob a:hover{background:var(--bg-menu-hover);color:var(--accent-hi)}

/* ------------------------------------------------------------------- Hero */
.hero{display:grid;grid-template-columns:1fr 1.2fr;background:var(--bg)}
.hero__text{
  display:flex;flex-direction:column;justify-content:center;
  padding:96px var(--pad);
}
.hero__h1{
  font-family:var(--cond);font-size:clamp(38px,3.6vw,64px);
  line-height:.94;letter-spacing:-.01em;text-transform:uppercase;
  margin:0 0 20px;max-width:12ch;
  text-wrap:balance;
}
.hero__lockup{
  display:inline-flex;flex-direction:column;gap:6px;
  margin:0 0 26px;align-self:flex-start;
}
.hero__mark{
  font-family:var(--cond);font-size:clamp(38px,3.6vw,64px);
  letter-spacing:.02em;line-height:.94;text-transform:uppercase;
  white-space:nowrap;
}
.hero .lead{margin:0 0 22px;max-width:48ch}
.hero__note{
  padding:14px 0 0;border-top:2px solid var(--accent);
  margin:0 0 32px;max-width:48ch;
  font-family:var(--cond);font-size:16px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text);
}
.hero__actions{display:flex;gap:12px;flex-wrap:wrap;margin:0}

.hero__media{position:relative;min-height:620px;overflow:hidden}
.hero__media img{
  position:absolute;inset:0;width:100%;height:100%;
  /* Gleicher Anschnitt wie das Video darüber, sonst springt das Bild beim
     Einblenden. */
  object-fit:cover;object-position:50% 36%;
}
/* Bewegtbild über dem Foto. Erscheint erst, wenn es abspielbereit ist –
   bis dahin steht das Foto, so blitzt nichts auf. */
.hero__video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 36%;
  opacity:0;transition:opacity .6s ease;
}
.hero__video[data-bereit]{opacity:1}
.hero__veil{
  position:absolute;inset:0;
  background:linear-gradient(270deg,rgba(11,11,12,0) 58%,rgba(11,11,12,.92) 100%);
}

/* ------------------------------------------------------------ Faktenzeile */
.strip{
  display:flex;flex-wrap:wrap;align-items:baseline;
  padding:20px var(--pad);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  font-family:var(--cond);font-size:16px;letter-spacing:.14em;
  text-transform:uppercase;
}
.strip a{color:var(--muted)}
.strip a:hover{color:var(--accent-hi)}
.strip a.light{color:var(--text)}
.strip a.light:hover{color:var(--accent-hi)}
.strip > * + *::before{content:"/";color:var(--sep);margin:0 16px 0 12px}

/* -------------------------------------------------------------- Abschnitt */
.sec{padding:96px var(--pad);max-width:var(--wrap);margin:0 auto}
.sec--soft{background:var(--bg-soft)}
.sec--legal{padding:80px var(--pad);color:var(--muted)}

.sec__head{margin-bottom:48px}

/* Spalte mit Oberlinie – erste Spalte rot, alle weiteren gedämpft. */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
.cols--wide{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.cols--narrow{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.col{border-top:2px solid var(--line-3);padding-top:22px}
.col--first{border-top-color:var(--accent)}
.col h3{margin:0 0 12px}
.col p:not(.meta){font-size:16px;line-height:1.65}

/* ----------------------------------------------------- Anlässe (Karten) */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
.card{
  display:flex;flex-direction:column;
  border:1px solid var(--line-2);
  background:linear-gradient(180deg,rgba(242,239,233,.05),rgba(242,239,233,0) 60%);
  transition:border-color .18s ease;
}
.card:hover{border-color:rgba(209,55,60,.65)}
.card--hl{border-color:rgba(209,55,60,.65)}
.card__body{padding:26px;display:flex;flex-direction:column;flex:1}
.card__body h3{margin:0 0 6px}
.card__body .meta{margin-bottom:16px}
.card__body p:not(.meta){font-size:16px;line-height:1.65;margin:0 0 22px}
.card__body .btn{margin-top:auto;align-self:flex-start}

/* ----------------------------------------------------------------- Videos
   Vor dem Klick entsteht keine Verbindung zu Google: kein vorgeladenes
   iframe, kein Vorschaubild von ytimg.com. */
.slot{
  position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;
  background:var(--bg-video);
  display:flex;align-items:center;justify-content:center;
}
.slot--live{cursor:pointer}
.slot__ph{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-family:var(--cond);font-size:15px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted-2);
}
.slot__circle{
  width:50px;height:50px;border-radius:50%;
  border:1px solid var(--field);
  display:flex;align-items:center;justify-content:center;
}
.slot__tri{
  width:0;height:0;margin-left:4px;
  border-top:8px solid transparent;border-bottom:8px solid transparent;
  border-left:13px solid rgba(242,239,233,.3);
}
/* Vorschaubild. Liegt bei uns, nicht bei Google – vor dem Klick geht keine
   Anfrage nach außen. Darüber eine Abdunklung, damit Kreis und Schrift auf
   jedem Motiv lesbar bleiben. */
.slot__img{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;
  /* Die Ausschnitte sind Hochformat. Etwas oberhalb der Mitte anschneiden,
     dort sind die Gesichter. */
  object-position:center 28%;
  transition:transform .5s ease, filter .3s ease;
}
.slot--live::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,11,.15),rgba(10,10,11,.42));
  transition:background .3s ease;
}
.slot--live .slot__ph{
  position:relative;z-index:2;color:var(--text);
  text-shadow:0 1px 10px rgba(10,10,11,.8);   /* trägt auch über hellen Stellen */
}
.slot--live .slot__circle{
  border-color:var(--accent);
  background:rgba(10,10,11,.45);
  backdrop-filter:blur(2px);
  transition:background .3s ease, transform .3s ease;
}
.slot--live .slot__tri{border-left-color:var(--accent)}

.slot--live:hover .slot__img{transform:scale(1.04)}
.slot--live:hover::after{background:linear-gradient(180deg,rgba(10,10,11,.06),rgba(10,10,11,.32))}
.slot--live:hover .slot__circle{background:var(--accent);transform:scale(1.06)}
.slot--live:hover .slot__tri{border-left-color:var(--bg)}
.slot--live:focus-within .slot__circle{outline:2px solid var(--accent);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  .slot__img,.slot--live::after,.slot--live .slot__circle{transition:none}
  .slot--live:hover .slot__img{transform:none}
}

.slot iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:4}
.slot__btn{
  position:absolute;inset:0;width:100%;height:100%;z-index:3;
  background:transparent;border:0;padding:0;cursor:pointer;
}

/* -------------------------------------------------------------- Bildband */
.band{position:relative;height:520px;overflow:hidden;background:var(--bg)}
.band img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 34%;
}

/* Bilderreihe unter der Besetzung */
.shots{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:22px;margin-top:34px;
}
.shots img{width:100%;height:300px;object-fit:cover}

/* ------------------------------------------- Zweispalter Text / Bild */
.split{display:grid;grid-template-columns:1fr .9fr;gap:48px;align-items:center}
.split__img{width:100%;object-fit:cover}
/* Medienfläche: Bild als Vorschau, Video legt sich beim Abspielen darüber. */
.mediabox{position:relative;overflow:hidden}
.mediabox img,.mediabox video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 50%;
}
.mediabox video{opacity:0;transition:opacity .6s ease;border:0}
.mediabox video[data-bereit]{opacity:1}
@media (prefers-reduced-motion:reduce){ .mediabox video{transition:none} }
.h440{height:440px;object-position:50% 40%}
.h460{height:460px;object-position:50% 32%}

/* ------------------------------------------------------------ Referenzen */
.refs{border-top:2px solid var(--line-3);padding-top:20px;margin-bottom:34px}
.refs--first{border-top-color:var(--accent)}
.refs--last{margin-bottom:0}
.refs .meta{margin-bottom:14px}
.strip--refs{
  padding:0;border:0;
  font-size:21px;letter-spacing:.06em;line-height:1.9;
}
.strip--refs span{color:var(--text)}
.strip--refs a{color:var(--text)}
.strip--refs a:hover{color:var(--accent-hi)}

/* --------------------------------------------------------------- Termine */
.dates{display:grid}
.dates__list{list-style:none;margin:0;padding:0;display:grid}

/* Eine Terminliste wird gescannt, nicht gelesen: pro Zeile trägt genau ein
   Element die Auszeichnung, und das ist das Datum. Titel und Meta bleiben
   Fließtext – ruhiger und großzügiger als die übliche Gig-Liste. Die
   Trennlinie liegt auf jeder Zeile, damit sie auch dann noch stimmt, wenn
   das Skript vorne abgelaufene Termine ausblendet. */
.date{
  display:grid;grid-template-columns:210px 1fr;gap:6px 32px;align-items:baseline;
  padding:26px 0;border-top:1px solid var(--line-2);
}
.date__when{
  font-family:var(--cond);font-size:22px;line-height:1.1;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent-text);
}
.date__title{font-size:17px;color:var(--text)}
.date__meta{display:flex;flex-wrap:wrap;font-size:15px;color:var(--muted);margin-top:4px}
.date__meta span::after{content:'·';margin:0 8px;color:var(--muted-2)}
.date__meta span:last-child::after{content:none}
/* Fünf Abende an derselben Location: der Name steht eine Spur heller als der
   Rest der Zeile, aber ohne eigene Auszeichnung – sonst schlägt die
   Wiederholung durch. */
.date__venue{color:var(--text)}
.dates__foot{
  padding-top:26px;border-top:1px solid var(--line-2);
  font-size:15px;line-height:1.7;color:var(--muted);
}
.dates__foot a{color:var(--text)}
.dates__foot a:hover{color:var(--accent-hi)}

/* --------------------------------------------------------------- Anfrage */
.contact{display:grid;grid-template-columns:.82fr 1.18fr;gap:56px;align-items:start}
.vcard{
  border-top:2px solid var(--accent);padding-top:20px;
  display:grid;gap:8px;font-size:16px;line-height:1.6;
}
.vcard a{justify-self:start}

#anfrage-form{position:relative}

.chips{border:0;padding:0;margin:0 0 28px;min-width:0}
.chips legend{padding:0;margin-bottom:12px}
.chips__row{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  padding:10px 16px;border-radius:var(--radius);
  border:1px solid var(--field);background:transparent;color:var(--text);
  font-family:var(--cond);font-size:16px;letter-spacing:.08em;
  text-transform:uppercase;cursor:pointer;transition:border-color .18s ease,background .18s ease;
}
.chip:hover{border-color:var(--accent)}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

.fields{display:grid;gap:20px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{display:grid;gap:7px}
.field input,.field select,.field textarea{
  background:transparent;border:1px solid var(--field);border-radius:var(--radius);
  padding:13px 14px;font-size:16px;color:var(--text);outline:none;
  transition:border-color .18s ease;
}
.field textarea{resize:vertical}
.field select{height:48px}
/* Grau nur, solange "Noch offen" steht – sonst sieht eine getroffene Wahl
   aus wie ein Platzhalter. */
.field select:has(option[value=""]:checked){color:var(--muted)}
.field select option{color:#0b0b0c}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent)}
.field input::placeholder,.field textarea::placeholder{color:var(--muted-2)}
.req{color:var(--accent-text)}

.check{display:flex;gap:12px;align-items:flex-start;cursor:pointer}
.check input{width:18px;height:18px;margin:3px 0 0;accent-color:var(--accent);flex:0 0 auto}
.check span{font-size:15px;line-height:1.6;color:var(--muted)}

.formerr{
  font-size:15px;line-height:1.6;color:var(--accent-hi);
  padding:12px 16px;border-left:2px solid var(--accent);
  background:rgba(209,55,60,.1);
}
.submit{display:flex;gap:16px;align-items:center;flex-wrap:wrap}

/* Honeypot – für Menschen unsichtbar, Bots füllen es aus. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.danke h3{
  font-size:34px;line-height:1;letter-spacing:.02em;margin:0 0 16px;outline:none;
}
.danke p{font-size:16px;line-height:1.65;margin:0 0 22px;max-width:60ch}
.danke textarea{
  width:100%;background:var(--bg-soft);
  border:1px solid var(--field);border-radius:var(--radius);
  padding:16px;font-size:15px;line-height:1.6;color:var(--text);
  outline:none;resize:vertical;
}
.danke .btn{margin-top:20px}

/* ----------------------------------------------------- Impressum / Recht */
.sec--legal .col{border-top-color:var(--line-3)}
.sec--legal h3{margin:0 0 14px;color:var(--text)}
/* Höher gewichtet als .col p:not(.meta) – sonst gewinnt dort die 16px-Regel. */
.sec--legal .col p:not(.meta){font-size:14px;font-weight:300;line-height:1.7;margin:0 0 12px}
.sec--legal .col p:not(.meta):last-child{margin-bottom:0}
.imp{display:flex;gap:16px;align-items:flex-start;margin-bottom:14px}
.imp img{width:64px;height:64px;flex:0 0 auto}
.imp p{margin:0}

/* ----------------------------------------------------------------- Footer */
.foot{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  flex-wrap:wrap;padding:28px var(--pad);
  border-top:1px solid var(--line);
  font-size:14px;font-weight:300;color:var(--muted);
}
.foot__brand{display:flex;align-items:center;gap:12px}
.foot__links{
  display:flex;gap:20px;flex-wrap:wrap;
  font-family:var(--cond);font-size:15px;letter-spacing:.14em;
  text-transform:uppercase;
}
.foot__links a{color:var(--muted)}
.foot__links a:hover{color:var(--accent-hi)}

/* ------------------------------------------------------------- Responsive */
@media (max-width:1400px){
  .nav{gap:18px;font-size:14px;letter-spacing:.1em}
}
@media (max-width:1080px){
  .nav{display:none}
  .burger{display:flex}
  .navmob[data-open]{display:block}
  /* Ab hier wird die Medienspalte schmaler als 460px hoch – die feste Höhe
     macht die Fläche hochkant und schnitte vom 16:9-Video die Hälfte der
     Breite weg. Gleiches Seitenverhältnis wie die Videoflächen der Karten. */
  .mediabox{height:auto;aspect-ratio:16/9}
}
@media (max-width:900px){
  :root{--pad:20px}
  .hero{grid-template-columns:1fr}
  .hero__media{min-height:400px;order:-1}
  /* Schmales Fenster: die Fläche ist fast quadratisch, deshalb höher
     anschneiden als am Desktop – sonst wird der Kopf oben knapp. */
  .hero__media img,.hero__video{object-position:50% 20%}
  .split,.contact,.pair{grid-template-columns:1fr}
  .split,.contact{gap:32px}
}
@media (max-width:760px){
  .social{display:none}
}
@media (max-width:700px){
  .sec{padding-top:64px;padding-bottom:64px}
  .cols,.cards,.shots{grid-template-columns:1fr}
  .band{height:340px}
}
@media (max-width:640px){
  /* Unter 640 px bekommt jede Angabe ihre eigene Zeile, die Mittelpunkte
     entfallen – gestapelt wären sie nur noch Zierrat. */
  .date{grid-template-columns:1fr;gap:8px;padding:22px 0}
  .date__meta{display:block;margin-top:6px}
  .date__meta span{display:block}
  .date__meta span::after{content:none}
}
@media (max-width:520px){
  .head{gap:10px;padding:14px 16px}
  .head__tools{gap:8px}
  .brand{gap:10px}
  .brand__disc{width:40px;height:40px}
  .brand__disc img{width:34px;height:34px}
  .brand__mark{font-size:20px}
  .lockup--sm{display:none}
  .head__cta{padding:11px 16px;font-size:15px;letter-spacing:.08em}
  .burger{width:40px;height:40px}
  .navmob a{padding:14px 16px}
}
/* Unter 380px reicht die Kopfzeile für Wortmarke, Button und Menü nicht mehr.
   Der Button weicht – "ANFRAGEN" steht im Menü direkt darunter. */
@media (max-width:380px){
  .head__cta{display:none}
}