/* ============================================================
   Pina Colada — Theme
   Farbwelt aus dem Logo abgeleitet: Magenta #E2007A auf Schwarz.
   Keine Fremdressourcen, kein jQuery, kein Framework.
   ============================================================ */

/* ---------- 1. Token ---------------------------------------- */

:root {
  /* Marke */
  /* [HB 2.1] */
  --primary:        #E2007A;   /* Flächen */
  --primary-light:   #ff2e9a;   /* Schrift auf dunklem Grund */
  --primary-lighter: #ff6fb8;   /* Schrift beim Überfahren */
  --secondary:     #7B2FF7;   /* zweiter Verlaufston */

  /* Flächen */
  --body-bg:          #07070a;
  --secondary-bg:        #0b0b12;
  --tertiary-bg:       #101016;
  --border-color:       #22222c;

  /* Schrift */
  --body-color:         #f4f4f6;
  --secondary-color:   #cfcfda;
  --tertiary-color:   #9b9baa;

  /* Schriftfamilien */
  --heading-font-family:  'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --body-font-family:   'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Maße — clamp() statt Breakpoint-Treppen */
  --container-max-width:      1200px;
  /* [HB 2.1] */
  --gutter:        clamp(1.25rem, 5vw, 2.5rem);
  --spacer-2:      clamp(1rem, 2vw, 1.5rem);
  --spacer-3:      clamp(1.75rem, 4vw, 3rem);
  --spacer-5:      clamp(3rem, 8vw, 6rem);
  --border-radius:      16px;
  --border-radius-sm:    10px;

  /* [HB 2.1] */
  --mist-bg: #07062a;
  --mist:
    radial-gradient( 32% 52% at 43% 29%, rgba(120, 35, 95, .27), rgba(120, 35, 95, 0)),
    radial-gradient( 40% 50% at 79% 85%, rgba(150, 45, 88, .41), rgba(150, 45, 88, 0)),
    radial-gradient(139% 57% at  6% 59%, rgba(150, 45, 88, .47), rgba(150, 45, 88, 0));

  /* Schriftgrößen */
  /* [HB 2.2] */
  --font-size-h1:       clamp(1.5rem, 7.1vw, 3.4rem);
  --font-size-h2:       clamp(1.92rem, 3.6vw, 2.6rem);
  --font-size-h3:       clamp(1.35rem, 1.9vw, 1.5rem);
  --font-size-lead:     clamp(1.2rem, 1.6vw, 1.3rem);
  --body-font-size:     clamp(1.12rem, 1.04rem + 0.36vw, 1.18rem);
  --font-size-sm:    0.95rem;    /* nur für Bedienelemente, Chips, Navigation */
  --font-size-card:    1.05rem;    /* Fließtext in Karten */
}

/* ---------- 2. Grundlagen ----------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* [HB 2.3] */
  scroll-padding-block-start: 9rem;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--body-bg);
  color: var(--body-color);
  font-family: var(--body-font-family);
  font-size: var(--body-font-size);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--primary-light); text-decoration: none; }
a:hover { color: var(--primary-lighter); }

:focus-visible {
  outline: 2px solid var(--primary-light);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2, h3, h4, h5 {
  font-family: var(--heading-font-family);
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 var(--spacer-2);
  letter-spacing: -0.012em;   /* Outfit läuft von Haus aus etwas weit */
}

/* Die großen Überschriften dürfen leichter stehen — das nimmt die
   weite, dünne Anmutung der Wortmarke auf. */
.hero h1, .section-header h2 { font-weight: 400; }

/* Akzentwort in Überschriften, wie im Envens-Vorbild */
h1 em, h2 em, h3 em { font-style: normal; color: var(--primary-light); }

p { margin: 0 0 1em; }

.skip-link {
  position: absolute; left: -9999px;
  background: var(--primary); color: #fff;
  padding: 0.7rem 1.2rem; border-radius: 0 0 var(--border-radius-sm) 0;
  z-index: 999; font-weight: 600;
}
.skip-link:focus { left: 0; top: 0; color: #fff; }

.container {
  width: min(100% - 2 * var(--gutter), var(--container-max-width));
  margin-inline: auto;
}

.eyebrow {
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tertiary-color);
  margin: 0 0 0.9rem;
  font-weight: 500;
  /* Der Buchstabenabstand hängt auch hinter dem letzten Zeichen. Beim
     Zentrieren zählt er mit und schiebt die Zeile um die Hälfte nach
     links — der Einzug gleicht das wieder aus. */
  text-indent: 0.09em;
}

.btn {
  display: inline-block;
  background: var(--primary);
  color: #fff;
  padding: 0.8rem 1.6rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: var(--font-size-sm);
  letter-spacing: 0.03em;
  border: 1px solid var(--primary);
  transition: background .2s, transform .2s;
}
.btn:hover { background: var(--primary-light); color: #fff; transform: translateY(-1px); }


/* ---------- 3. Kopfbereich ---------------------------------- */

.navbar {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100;
  padding-block: 1rem;
  /* [HB 2.3] */
  transition: background .3s, padding .3s, border-color .3s;
  border-block-end: 1px solid transparent;
}
.navbar-scrolled {
  background: rgba(7, 7, 10, 0.92);
  backdrop-filter: blur(10px);
  border-block-end-color: var(--border-color);
  padding-block: 0.65rem;
}
.navbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.navbar-brand img { width: clamp(140px, 16vw, 190px); }

.navbar-collapse ul { display: flex; gap: clamp(0.75rem, 1.4vw, 1.6rem); list-style: none; margin: 0; padding: 0; }
.navbar-collapse a {
  color: var(--body-color);
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  padding-block: 0.4rem;
  border-block-end: 2px solid transparent;
}
.navbar-collapse a:hover, .navbar-collapse a[aria-current="page"] { color: var(--primary-light); border-block-end-color: var(--primary-light); }

.navbar-toggler {
  display: none; background: none; border: 0; cursor: pointer;
  padding: 0.5rem; color: var(--body-color);
}
.navbar-toggler svg { width: 26px; height: 26px; }

/* Mit „Startseite" trägt das Menü sieben Punkte, darunter das lange
   „Tonstudio Heiner Wolf". Waagerecht nebeneinander passt das erst ab
   1200px — bis dahin fährt das Panel aus. */
@media (max-width: 1200px) {
  .navbar-toggler { display: block; }
  .navbar-collapse {
    position: fixed; inset-block-start: 0; inset-inline-end: 0;
    block-size: 100svh; inline-size: min(100%, 480px);
    background: var(--tertiary-bg); border-inline-start: 1px solid var(--border-color);
    transform: translateX(100%);
    padding: 5.5rem 5rem 2rem; overflow-y: auto;
    /* Ohne visibility bleibt das weggeschobene Panel bedienbar: die
       Tabulatortaste läuft dann durch acht unsichtbare Menüpunkte weit
       rechts außerhalb des Bildschirms, und Screenreader lesen das
       geschlossene Menü mit. */
    visibility: hidden;
    /* visibility ist keine stetige Eigenschaft. Steht sie mit in der
       0,3-Sekunden-Transition, ist das Panel im ersten Bild nach dem
       Klick noch unsichtbar — focus() darauf scheitert lautlos. Also
       beim Öffnen sofort schalten, beim Schließen erst nach dem
       Hinausschieben. */
    transition: transform .3s ease, visibility 0s linear .3s;
  }
  .navbar-collapse[data-open="true"] {
    transform: translateX(0); visibility: visible;
    transition: transform .3s ease, visibility 0s linear 0s;
  }
  .navbar-collapse ul { flex-direction: column; gap: 1.3rem; }
  .navbar-collapse a { font-size: 1.12rem; letter-spacing: 0.08em; }
}

/* Ist der Schirm schmaler als das Panel, füllt es ihn ganz aus. Dann
   grenzt links nichts mehr an, die trennende Linie entfällt. Zum
   Schließen gibt es das Kreuz im Panel und die Esc-Taste.

   Das seitliche Polster geht hier auf die Hälfte zurück: 5rem ist auf
   das 480 Pixel breite Panel gerechnet. Auf einem 400 Pixel breiten
   Schirm blieben davon 240 Pixel Text übrig, und „Tonstudio Heiner
   Wolf“ bricht auf zwei Zeilen um. */
@media (max-width: 480px) {
  .navbar-collapse {
    border-inline-start: 0;
    padding-inline: 2.5rem;
  }
}

/* ---------- 4. Hero Startseite ------------------------------ */

/* [HB 2.4] */
.hero {
  position: relative;
  min-block-size: 100svh;
  display: grid;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}
.hero-video {
  position: absolute; inset: 0; z-index: -2;
  inline-size: 100%; block-size: 100%;
  object-fit: cover;
}
.hero-overlay {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 130% at 78% 0%, rgba(123,47,247,.42), transparent 62%),
    radial-gradient(95% 120% at 0% 100%, rgba(226,0,122,.36), transparent 62%),
    linear-gradient(180deg, rgba(7,7,10,.72), rgba(7,7,10,.88));
}
.hero-body { padding-block: 8rem 5rem; max-inline-size: 62ch; }
.hero h1 { font-size: var(--font-size-h1); margin-block-end: 1.1rem; }
.hero-actions { display: flex; gap: 0.9rem; flex-wrap: wrap; }

/* ---------- 5. Kopfbild der Unterseiten --------------------- */

/* [HB 2.5] */

.hero-sub {
  min-block-size: min(88svh, 780px);
  --arc: clamp(200px, 32vw, 620px);
}

/* Hintergrundbild über die volle Breite, hinter dem Foto. z-index -3
   hält es unter .hero-figure (-2). Der Verlauf darüber dunkelt oben ab,
   damit die Kopfleiste lesbar bleibt, und blendet unten in den
   Seitengrund aus. */
.hero-sub {
  /* Der Schleier steht in einer Eigenschaft, weil er unten zweimal
     gebraucht wird — einmal mit JPG, einmal mit WebP. */
  --kopf-schleier: linear-gradient(180deg,
      rgba(5, 2, 20, .90) 0,
      rgba(5, 2, 20, .55) 34%,
      rgba(5, 2, 20, .80) 78%,
      var(--body-bg) 100%);
}
.hero-sub::before {
  content: ""; position: absolute; z-index: -3;
  inset: 0;
  background-image: var(--kopf-schleier), url("../images/hero-hintergrund.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
/* Das Bild liegt unter einem 55 bis 90 % deckenden Schleier und wird nur
   links neben dem Seitenfoto sichtbar. Es war 2048 px breit und 133 KB
   schwer — auf jeder Unterseite. Jetzt 1400 px: 41 KB als JPG, 17 KB als
   WebP. Browser ohne image-set() bekommen das JPG. */
@supports (background-image: image-set(url("../images/hero-hintergrund.webp") type("image/webp"))) {
  .hero-sub::before {
    background-image: var(--kopf-schleier),
      image-set(url("../images/hero-hintergrund.webp") type("image/webp"),
                url("../images/hero-hintergrund.jpg") type("image/jpeg"));
  }
}

/* [HB 2.5] */
.hero-figure {
  position: absolute; z-index: -2;
  inset-block: 0; inset-inline-end: 0;
  inline-size: min(70%, 1280px);
}
/* [HB 2.5] */
.hero-figure picture {
  display: block; block-size: 100%;
  background: linear-gradient(180deg,
    var(--body-bg) 0,
    rgba(5, 2, 20, .65) 14%,
    transparent 38%);
}
.hero-figure img {
  inline-size: 100%; block-size: 100%;
  object-fit: cover;
  border-end-start-radius: var(--arc);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.35) 14%, #000 38%);
          mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.35) 14%, #000 38%);
}

/* Der Verlaufsbogen liegt deckungsgleich hinter dem Foto. Weil sein
   Radius kleiner ist, schaut er genau dort hervor, wo der große Bogen
   das Foto wegnimmt — das ergibt den Rahmen unten links. Er blendet
   nach oben aus, damit seine gerade Oberkante nirgends als Kante
   auftaucht, auch nicht in der Ausblendung des Fotos. */
.hero-figure::before {
  content: ""; position: absolute; z-index: -1;
  inset-block: 20% 0; inset-inline: 0;
  background: var(--gradient);
  border-end-start-radius: calc(var(--arc) * 0.75);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%);
          mask-image: linear-gradient(180deg, transparent 0, #000 30%);
}

/* Schmale Geräte: Foto über die volle Breite, flacherer Bogen. */
@media (max-width: 900px) {
  .hero-sub { min-block-size: 56svh; --arc: clamp(70px, 18vw, 150px); }
  .hero-figure { inline-size: 100%; }
}

/* ---------- 5b. Seitenkopf ---------------------------------- */

/* Unten kein eigenes Polster — den Abstand bringt der Kopf selbst mit,
   sonst stünde vor dem nächsten Abschnitt doppelte Luft.
   Die Doppelung der Klasse ist nötig: .section setzt padding-block
   weiter unten in dieser Datei und hätte sonst das letzte Wort. */
.section.page-header { padding-block-end: 0; }
.page-header h1 { font-size: var(--font-size-h2); }
/* Ohne Kopfbild liegt die feste Kopfleiste direkt darüber */
.page-header-tall { padding-block-start: clamp(8.5rem, 15vh, 11rem); }

/* ---------- 6. Abschnitte ----------------------------------- */

.section { padding-block: var(--spacer-5); }
.section-dark {
  background-color: var(--mist-bg);
  background-image: var(--mist);
}
.section-header { text-align: center; max-inline-size: 60ch; margin-inline: auto; margin-block-end: var(--spacer-3); }
.section-header h2 { font-size: var(--font-size-h2); }

/* ---------- 7. Besetzungen (feature-one) -------------------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(1.5rem, 3vw, 2.4rem);
  padding-inline-start: 28px;   /* Platz für den überstehenden Kreis */
}

.card {
  container-type: inline-size;   /* Karte reagiert auf eigene Breite */
  position: relative;
  border-radius: var(--border-radius);
  overflow: visible;
}

/* [HB 2.6] */
.card-img {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-start-start-radius: var(--border-radius);
  border-start-end-radius: var(--border-radius);
}
.card-img img { inline-size: 100%; block-size: 100%; object-fit: cover; }

/* [HB 2.6] */
.card-badge {
  position: absolute; z-index: 3;
  inset-block-start: -6px; inset-inline-start: -26px;
  inline-size: 78px; block-size: 78px;
  border-radius: 50%;
  /* Der Verlauf liegt in der Fläche, das Zeichen steht weiß darauf. Als
     Schriftfarbe war der Verlauf auf dem dunklen Grund grenzwertig
     kontrastarm — vor allem am violetten Ende. */
  background-image: linear-gradient(150deg, var(--secondary) 10%, var(--primary) 85%);
  /* Der Ring in Seitenfarbe trennt den Kreis vom Foto darunter. */
  box-shadow: 0 0 0 4px var(--body-bg);
  display: grid; place-items: center;
  font-family: var(--heading-font-family);
  font-weight: 600;
  font-size: 1.9rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
}
.card-badge i { font-style: normal; }
/* „M" ist ein Zeichen, „XS"/„XL" sind zwei — sonst wirkt M verloren */
.card-badge[data-size="m"] { font-size: 2.3rem; }

/* Kasten unter dem Bild. Die untere Polsterung ist die Reserve für den
   Knopf — deshalb sitzt der Text im Ruhezustand um --card-reserve tiefer
   und rückt beim Überfahren genau um diesen Betrag nach oben. So steht
   der Knopf immer unter dem Text statt darauf. */
.card-body {
  --card-reserve: 1.4rem;
  position: relative;
  overflow: hidden;
  background: var(--tertiary-bg);
  border: 1px solid var(--border-color);
  border-block-start: 0;
  border-end-start-radius: var(--border-radius);
  border-end-end-radius: var(--border-radius);
  padding: 1.3rem 1.3rem calc(1.3rem + var(--card-reserve) + 1.6rem);
  text-align: center;
}
.card-content {
  transform: translateY(var(--card-reserve));
  transition: transform .35s ease;
}
.card-title {
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  margin: 0 0 0.35rem;
}

.card-subtitle {
  margin: 0 0 0.4rem;
  color: var(--body-color);
  font-weight: 600;
  font-size: 0.95rem;
}

.card-text {
  margin: 0;
  color: var(--secondary-color);
  font-size: 0.95rem;
  line-height: 1.62;
  letter-spacing: 0.005em;
}

/* [HB 2.6] */
.card-action {
  position: absolute; z-index: 4;
  inset-inline: 0; inset-block-end: 0;
  background: var(--body-bg);
  text-align: center;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .35s ease;
}
.card-action a {
  display: block;
  padding: 0.85rem 1rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--primary-light);
}
.card-action a::after { content: " \2192"; }

.card:hover .card-action,
.card:focus-within .card-action { transform: scaleY(1); }
.card:hover .card-content,
.card:focus-within .card-content { transform: translateY(0); }

@media (hover: none) {
  .card-action { transform: scaleY(1); }
  .card-content { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .card-action, .card-content { transition: none; }
}

/* ---------- 8. Termine -------------------------------------- */

.event-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: clamp(1.2rem, 2.4vw, 1.8rem);
}

.event {
  container-type: inline-size;
  background: var(--secondary-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .2s, transform .2s;
}
.event:hover { border-color: var(--primary); transform: translateY(-2px); }

.event-img { aspect-ratio: 3 / 2; overflow: hidden; position: relative; }
.event-img img { inline-size: 100%; block-size: 100%; object-fit: cover; }

/* [HB 2.7] */
.event-img-fallback {
  aspect-ratio: 3 / 2;
  display: grid; place-items: center;
  background-color: var(--mist-bg);
  background-image: var(--mist);
  position: relative;
}
.event-img-fallback picture { display: block; }
.event-img-fallback-logo {
  inline-size: clamp(120px, 46cqi, 220px);
  block-size: auto;
  opacity: .92;
}

.event-body { padding: 1.1rem 1.3rem 1.35rem; display: flex; flex-direction: column; flex: 1; }
.event-date {
  display: block;
  font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--primary-light); font-weight: 600; margin-block-end: 0.5rem;
}
.event-title { font-size: var(--font-size-h3); margin: 0 0 0.35rem; }
.event-location { color: var(--secondary-color); font-size: var(--font-size-card); line-height: 1.6; margin: 0; }
.badge {
  align-self: flex-start; margin-block-start: 0.9rem;
  background: var(--primary); color: #fff;
  border-radius: 999px; padding: 0.15rem 0.75rem;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
}
.event-cancelled .event-title { text-decoration: line-through; opacity: .65; }
.event-status {
  align-self: flex-start; margin-block-start: 0.6rem;
  border: 1px solid var(--border-color); border-radius: 999px;
  padding: 0.15rem 0.7rem; font-size: 0.72rem; color: var(--tertiary-color);
}

/* Leerzustand — kommt beim Livegang garantiert vor */
.event-empty {
  text-align: center; max-inline-size: 52ch; margin-inline: auto;
  padding: var(--spacer-3); border: 1px dashed var(--border-color);
  border-radius: var(--border-radius); background: var(--secondary-bg);
}

/* ---------- 9. Fußbereich ----------------------------------- */

.footer {
  background: var(--secondary-bg);
  border-block-start: 1px solid var(--border-color);
  padding-block: var(--spacer-3) var(--spacer-2);
  margin-block-start: var(--spacer-5);
}
.footer-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--spacer-3); }
.footer-brand img { width: 170px; margin-block-end: 0.55rem; }
.footer-heading {
  font-size: 0.92rem; margin-block-end: 0.8rem;
  text-transform: uppercase; letter-spacing: 0.09em;
}
.footer p, .footer li, .footer a { color: var(--secondary-color); font-size: 0.95rem; line-height: 1.7; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-block-end: 0.45rem; }
.footer a:hover { color: var(--primary-lighter); }
.footer-bottom {
  margin-block-start: var(--spacer-3);
  padding-block-start: var(--spacer-2);
  border-block-start: 1px solid var(--border-color);
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; flex-wrap: wrap;
  color: var(--tertiary-color); font-size: 0.8rem;
}

/* ---------- 10. Sanftes Einblenden -------------------------- */

.fade { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.fade.show { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .fade { opacity: 1; transform: none; }
}

/* ---------- 11. Fließtext ----------------------------------- */

/* [HB 2.12] */
.prose { margin-inline: auto; }
.prose h2 { font-size: var(--font-size-h2); margin-block: 0 var(--spacer-2); }
.prose h3 { font-size: var(--font-size-h3); margin-block: var(--spacer-3) 0.6rem; }
.prose p { color: var(--secondary-color); margin-block-end: 1.15em; }
.prose p:last-child { margin-block-end: 0; }
.prose ul { color: var(--secondary-color); padding-inline-start: 1.2em; }
.prose li { margin-block-end: 0.4em; }
.prose a { border-block-end: 1px solid rgba(255,46,154,.4); }
.prose a:hover { border-block-end-color: var(--primary-lighter); }

/* Der Kreis sitzt jetzt auf .card (overflow: visible) statt auf .card-img */
.card { overflow: visible; }
.card-img { overflow: hidden; }

/* ---------- 12. Termine, Ergänzungen ------------------------ */

.event-link { text-decoration: none; color: inherit; }
.event-link:hover { color: inherit; }
.event-link .event-title::after {
  content: "\2197"; font-size: 0.75em; margin-inline-start: 0.35em;
  color: var(--primary-light); vertical-align: 0.15em;
}

.event-note {
  color: var(--tertiary-color);
  font-size: 0.9rem;
  line-height: 1.6;
  margin-block: 0.6rem 0;
}

.event-badges { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-block-start: 0.9rem; }
.badge { margin-block-start: 0; align-self: auto; }
.event-status { margin-block-start: 0; align-self: auto; }
.event-status-abgesagt { border-color: rgba(239,68,68,.55); color: #ff9b9b; }
.event-status-ausverkauft { border-color: rgba(245,158,11,.55); color: #ffcf7a; }

.event-cancelled .event-img img,
.event-cancelled .event-img-fallback { filter: grayscale(.85) brightness(.75); }

.event-empty-title { font-size: var(--font-size-h3); }
.event-empty p { color: var(--secondary-color); }

/* ---------- 13. Besetzungen, Zusatzzeile --------------------- */

.card-grid-note {
  text-align: center;
  color: var(--secondary-color);
  margin-block-start: var(--spacer-3);
  font-size: var(--font-size-lead);
}

/* ---------- 14. Zweispalter mit Häkchenliste (Studio) -------- */

.two-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--spacer-3);
  align-items: start;
}
.two-col h2 { font-size: var(--font-size-h2); }

.check-list { list-style: none; margin: 0; padding: 0; }
.check-list li {
  display: flex; gap: 0.75rem; align-items: flex-start;
  color: var(--secondary-color);
  margin-block-end: 0.85rem;
  line-height: 1.65;
}
.check-list-icon {
  flex: 0 0 auto;
  inline-size: 22px; block-size: 22px;
  margin-block-start: 0.28rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--secondary), var(--primary));
  position: relative;
}
.check-list-icon::after {
  content: ""; position: absolute;
  inset-block-start: 6px; inset-inline-start: 7px;
  inline-size: 5px; block-size: 9px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Chip an den Terminkacheln muss jetzt auch „TRIO" und „BAND" tragen */
.badge { letter-spacing: 0.08em; padding-inline: 0.85rem; }

/* ---------- 15. Kontakt und Formular ------------------------ */

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--spacer-3);
  align-items: start;
}

.contact-info { margin-block-start: var(--spacer-2); }
.contact-info h2 { font-size: var(--font-size-h2); }
.contact-info p { color: var(--secondary-color); }
.contact-info strong { color: var(--body-color); font-weight: 600; }
.contact-info-direct a { display: block; font-size: var(--font-size-lead); margin-block-end: 0.3rem; }

.contact-form {
  background-color: var(--mist-bg);
  background-image: var(--mist);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: clamp(1.4rem, 3vw, 2.2rem);
}
.contact-form .form-field { margin-block-end: 1.15rem; }
.contact-form label {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--body-color);
  margin-block-end: 0.4rem;
}
.contact-form label a { border-block-end: 1px solid rgba(226,0,122,.5); }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form input[type="date"],
.contact-form input[type="number"],
.contact-form select,
.contact-form textarea {
  inline-size: 100%;
  background: var(--secondary-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  color: var(--body-color);
  font: inherit;
  font-size: 1rem;
  padding: 0.7rem 0.85rem;
  transition: border-color .2s;
}
/* Der Rahmenwechsel allein ist 1 px stark und genügt WCAG 2.4.11 nicht;
   im Windows-Kontrastmodus verschwindet er ganz, weil dort Farben
   ersetzt, Umrisse aber beibehalten werden. Deshalb bleibt der globale
   Fokusring stehen und der Rahmen kommt zusätzlich. */
.contact-form input:focus-visible,
.contact-form select:focus-visible,
.contact-form textarea:focus-visible {
  border-color: var(--primary-light);
  outline: 2px solid var(--primary-light);
  outline-offset: 2px;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus { border-color: var(--primary-light); }
.contact-form textarea { resize: vertical; min-block-size: 7rem; }

.contact-form .checkbox,
.contact-form .form-field-checkbox label {
  display: flex; gap: 0.65rem; align-items: flex-start;
  font-weight: 400; font-size: 0.92rem; color: var(--secondary-color);
  line-height: 1.6;
}
.contact-form input[type="checkbox"] {
  inline-size: 1.15rem; block-size: 1.15rem;
  margin-block-start: 0.2rem;
  accent-color: var(--primary);
  flex: 0 0 auto;
}

.form-altcha { margin-block: 1.4rem; }

/* Nachweis gegen automatisierte Zusendungen — läuft von selbst durch,
   der Besucher sieht nur den Stand. */
.verify {
  display: flex; align-items: center; gap: 0.7rem;
  background: var(--secondary-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  padding: 0.75rem 0.95rem;
  color: var(--secondary-color);
  font-size: 0.92rem;
}
.verify-icon {
  flex: 0 0 auto;
  inline-size: 20px; block-size: 20px;
  border-radius: 50%;
  border: 2px solid var(--border-color);
  position: relative;
  transition: border-color .3s, background .3s;
}
.verify[data-state="running"] .verify-icon {
  border-block-start-color: var(--primary);
  animation: pruefung-dreht 0.9s linear infinite;
}
@keyframes pruefung-dreht { to { transform: rotate(360deg); } }

.verify[data-state="done"] .verify-icon {
  border-color: var(--primary);
  background: var(--primary);
}
/* Häkchen */
.verify[data-state="done"] .verify-icon::after {
  content: ""; position: absolute;
  inset-block-start: 2px; inset-inline-start: 5px;
  inline-size: 4px; block-size: 9px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.verify[data-state="done"] { color: var(--body-color); border-color: rgba(226,0,122,.45); }

.verify[data-state="error"] .verify-icon { border-color: #ef4444; }
.verify[data-state="error"] { color: #ffb4b4; border-color: rgba(239,68,68,.5); }

@media (prefers-reduced-motion: reduce) {
  .verify[data-state="running"] .verify-icon { animation: none; }
}
.form-note { color: var(--tertiary-color); font-size: 0.9rem; }

.contact-form button[type="submit"],
.contact-form .button {
  background: var(--primary); color: #fff;
  border: 1px solid var(--primary); border-radius: 999px;
  padding: 0.85rem 1.8rem;
  font: inherit; font-weight: 600; font-size: 0.95rem;
  letter-spacing: 0.03em; cursor: pointer;
  transition: background .2s, transform .2s;
}
.contact-form button[type="submit"]:hover { background: var(--primary-light); transform: translateY(-1px); }

/* Rückmeldung nach dem Absenden. Das Formular-Plugin gibt sie als
   .notices mit dem Zustand als zweiter Klasse aus — .form-messages und
   .alert stehen für andere Plugins mit in der Liste. */
.notices, .form-messages, .alert {
  border-radius: var(--border-radius-sm);
  padding: 0.9rem 1.1rem;
  margin-block-end: 1.2rem;
  border: 1px solid var(--border-color);
  background: var(--secondary-bg);
  color: var(--secondary-color);
  font-size: 0.95rem;
}
.notices p, .form-messages p, .alert p { margin: 0; }

.notices.error, .notices.red,
.form-messages .error, .alert.error {
  border-color: rgba(239,68,68,.55);
  background: rgba(239,68,68,.10);
  color: #ffb4b4;
}
.notices.success, .notices.green {
  border-color: rgba(226,0,122,.45);
  background: rgba(226,0,122,.10);
  color: var(--body-color);
}
.notices.warning, .notices.yellow {
  border-color: rgba(245,158,11,.5);
  background: rgba(245,158,11,.10);
  color: #ffcf7a;
}