/* ============================================================
   Pina Colada — Gestaltungsebene
   Wird nach theme.css geladen und schärft die Optik entlang der
   drei Referenzen im Ordner „inspiration":
     · Envens  — Basis-Pink #e21e8c, Violett #554bb9, Grund #030215
     · Tanzstudio-Entwurf — Verlaufsbänder und Lichtschein-Bögen
     · Musiker-Seite — großes Foto, ruhige Typografie
   Das Marken-Magenta #E2007A stammt aus dem Logo und bleibt gesetzt.
   ============================================================ */

:root {
  /* Grund ist kein reines Schwarz, sondern blauschwarz — wie in der Vorlage.
     Das lässt Violett und Magenta wärmer wirken. */
  --body-bg:       #050214;
  --secondary-bg:     #0b0722;
  --tertiary-bg:    #130c2e;
  --border-color:    #241a45;

  --secondary:  #6a4fd8;
  --secondary-dark: #554bb9;

  --gradient:  linear-gradient(-65deg, var(--secondary-dark) 0%, var(--primary) 100%);
  --gradient-soft: linear-gradient(135deg, rgba(106,79,216,.9), rgba(226,0,122,.9));

  --glow:   0 0 60px rgba(226, 0, 122, .35);
  --zindex-navbar:   100;
  --zindex-back-to-top: 90;
}

/* ---------- Bögen ------------------------------------------- */

/* Der große Verlaufsbogen, der in der Vorlage aus der Ecke schwingt */
.section { position: relative; overflow: hidden; }
/* [HB 2.5] */
.section-arc::before {
  content: ""; position: absolute; z-index: 0;
  inset-block-start: -35%; inset-inline-end: -22%;
  inline-size: min(72vw, 900px); aspect-ratio: 1;
  background: radial-gradient(circle closest-side at 50% 50%,
              rgba(106,79,216,.34) 0%,
              rgba(150,55,180,.20) 38%,
              rgba(226,0,122,.10) 62%,
              rgba(226,0,122,.03) 80%,
              transparent 100%);
  filter: blur(70px);
  opacity: .9;
  pointer-events: none;
}

/* Auf schmalen Geräten kleiner und schwächer — dort nimmt der Schein
   sonst den halben Bildschirm ein und kostet unnötig Rechenzeit. */
@media (max-width: 640px) {
  .section-arc::before {
    inline-size: 120vw;
    filter: blur(45px);
    opacity: .65;
  }
}
.section > .container { position: relative; z-index: 1; }

/* ---------- Verlaufs-Band mit Handlungsaufruf ---------------- */

.cta-banner {
  position: relative;
  background: var(--gradient);
  border-radius: var(--border-radius);
  padding: clamp(1.8rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3.2rem);
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(1.2rem, 3vw, 2.5rem);
  flex-wrap: wrap;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(106,79,216,.25);
}
.cta-banner::after {
  content: ""; position: absolute;
  inset-block-start: -60%; inset-inline-end: -8%;
  inline-size: 340px; aspect-ratio: 1; border-radius: 50%;
  background: rgba(255,255,255,.09);
  pointer-events: none;
}
.cta-banner-text { position: relative; z-index: 1; max-inline-size: 46ch; }
.cta-banner h2 { color: #fff; font-size: clamp(1.4rem, 2.6vw, 2rem); margin: 0 0 0.4rem; }
.cta-banner p  { color: rgba(255,255,255,.92); margin: 0; }
/* Links im Band: die Magenta-Linkfarbe verschwindet auf dem Verlauf */
.cta-banner-text a {
  color: #fff;
  border-block-end: 1px solid rgba(255,255,255,.5);
}
.cta-banner-text a:hover { border-block-end-color: #fff; }
.cta-banner .btn {
  position: relative; z-index: 1;
  background: #fff; color: var(--body-bg); border-color: #fff;
  min-block-size: 44px;            /* Mindestgröße für Touch */
  display: inline-flex; align-items: center;
}
.cta-banner .btn:hover { background: var(--body-bg); color: #fff; border-color: #fff; }

/* ---------- Kopfbereich, Feinschliff ------------------------ */

.navbar-scrolled { background: rgba(5, 2, 20, 0.92); }

/* Beim Scrollen rückt der Kopf zusammen — das Logo schrumpft mit,
   sonst frisst die Leiste ein Sechstel des Bildschirms.

   `width` ist eine Layout-Eigenschaft. Nachgemessen am 02.09.2026 über
   40 Überquerungen der Scroll-Marke: 80,8 ms Layoutzeit mit, 46,3 ms
   ohne diesen Übergang — er kostet also rund 2 ms je Überquerung,
   verteilt auf 300 ms Animation. Das sind 0,11 ms je Bild bei 16 ms
   Budget, und es läuft nicht beim Scrollen, sondern nur beim Passieren
   der Marke.

   Bewusst so belassen: `transform: scale()` ließe die Box unverändert,
   die Leiste würde nicht niedriger — und die Höhe der Leiste hängt genau
   an diesem Bild. Den Übergang allein zu streichen, hieße: das Logo
   springt, während die Leiste noch gleitet. */
.navbar-brand img { transition: width .3s ease; }
.navbar-scrolled .navbar-brand img { width: clamp(112px, 11vw, 142px); }

/* Mindestgröße für Berührung — 44 × 44 px */
.navbar-collapse a { min-block-size: 44px; display: inline-flex; align-items: center; }
.navbar-toggler { min-inline-size: 44px; min-block-size: 44px; cursor: pointer; }

/* Zeigefinger auf allem Anklickbaren */
a[href], button, .card, .event-link, summary { cursor: pointer; }

/* ---------- Nach-oben-Schaltfläche -------------------------- */

.back-to-top {
  position: fixed; z-index: var(--zindex-back-to-top);
  inset-block-end: 2rem; inset-inline-end: 2rem;
  inline-size: 48px; block-size: 48px;
  border: 0; border-radius: 50%;
  background: var(--gradient);
  color: #fff; cursor: pointer;
  display: grid; place-items: center;
  opacity: 0; visibility: hidden;
  transform: translateY(12px);
  transition: opacity .3s, transform .3s, visibility .3s;
  box-shadow: 0 10px 30px rgba(226,0,122,.35);
}
.back-to-top[data-visible="true"] { opacity: 1; visibility: visible; transform: none; }
.back-to-top svg { inline-size: 20px; block-size: 20px; }
.back-to-top:hover { filter: brightness(1.15); }

/* ---------- Karten, Feinschliff ----------------------------- */

.card-img { box-shadow: 0 18px 50px rgba(0,0,0,.55); }
.card:hover .card-img { box-shadow: 0 24px 64px rgba(226,0,122,.28); }
.card-img, .card-img img { transition: transform .5s ease, box-shadow .35s ease; }
.card:hover .card-img img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
  .card:hover .card-img img { transform: none; }
}

.event { background: var(--secondary-bg); }
.event:hover { box-shadow: 0 18px 46px rgba(226,0,122,.18); }

/* ---------- Fußbereich, Feinschliff ------------------------- */

.footer {
  position: relative;
  background: var(--secondary-bg);
  margin-block-start: 0;   /* der letzte Abschnitt bringt seinen Abstand schon mit */
}
.footer::before {
  content: ""; position: absolute;
  inset-block-start: 0; inset-inline: 0; block-size: 2px;
  background: var(--gradient);
}

/* ---------- Formular, Feinschliff --------------------------- */

.contact-form { box-shadow: 0 24px 70px rgba(0,0,0,.45); }
.contact-form button[type="submit"] { min-block-size: 44px; }

/* ---------- Fließtext, Feinschliff -------------------------- */

/* [HB 2.12] */
.prose { max-inline-size: 68ch; }
/* Mittiger Fließtext unter einem mittigen Seitenkopf (Vorlagenschalter
   `zentriert` bzw. die Impressionen-Seite). Steht hier und nicht in
   theme.css: die Breitenangabe eine Zeile darüber hat dieselbe
   Spezifität und würde sonst gewinnen, weil design.css später geladen
   wird. Die 60ch sind die Breite des Seitenkopfs darüber — sonst
   stehen zwei verschieden breite mittige Blöcke übereinander. */
.prose-mittig { text-align: center; max-inline-size: 60ch; }
.section-header p:not(.eyebrow) { max-inline-size: 60ch; }

/* ---------- Bandmitglieder (team-one) ----------------------- */

/* [HB 2.10] */
.team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.4rem, 3vw, 2.2rem);
}
@media (min-width: 560px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .team-grid { grid-template-columns: repeat(3, 1fr); }
}
.team-member { text-align: center; }
.team-member-img {
  position: relative;
  aspect-ratio: 4 / 5;   /* dreispaltig sind die Karten breiter — sonst zu hoch */
  border-radius: var(--border-radius);
  overflow: hidden;
  background: linear-gradient(150deg, rgba(106,79,216,.45), rgba(226,0,122,.35)), var(--secondary-bg);
  display: grid; place-items: center;
  box-shadow: 0 18px 50px rgba(0,0,0,.5);
  transition: box-shadow .35s ease;
}
.team-member:hover .team-member-img { box-shadow: 0 22px 60px rgba(226,0,122,.3); }
/* [HB 2.10] <picture> braucht eigene Hoehe, sonst faellt block-size:100% am Bild auf auto zurueck */
.team-member-img picture { display: block; inline-size: 100%; block-size: 100%; }
.team-member-img img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.team-member-initials {
  font-family: var(--heading-font-family);
  font-weight: 600;
  font-size: clamp(2.2rem, 6vw, 3rem);
  color: rgba(255,255,255,.85);
  letter-spacing: 0.02em;
}
.team-member-body {
  position: relative;
  margin-block-start: -1.6rem;
  margin-inline: auto;
  inline-size: min(92%, 260px);
  background: var(--tertiary-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  padding: 0.85rem 1rem 0.95rem;
}
.team-member-role {
  margin: 0 0 0.15rem;
  font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--primary-light); font-weight: 600;
}
/* [HB 2.10] */
.team-member-name { margin: 0; font-size: 1.05rem; text-transform: uppercase; }

/* ---------- Masonry-Galerie --------------------------------- */

.gallery {
  columns: 4 260px;
  column-gap: clamp(0.4rem, 0.8vw, 0.6rem);
}
.gallery-item {
  display: block;
  inline-size: 100%;
  margin: 0 0 clamp(0.4rem, 0.8vw, 0.6rem);
  padding: 0;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  overflow: hidden;
  background: var(--secondary-bg);
  cursor: pointer;
  break-inside: avoid;          /* verhindert, dass ein Bild über zwei Spalten reißt */
  -webkit-column-break-inside: avoid;
  position: relative;
  transition: border-color .25s ease, transform .25s ease;
}
.gallery-item img { display: block; inline-size: 100%; block-size: auto; }
.gallery-item::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(226,0,122,.35));
  opacity: 0; transition: opacity .25s ease;
}
.gallery-item:hover { border-color: var(--primary); transform: translateY(-2px); }
.gallery-item:hover::after { opacity: 1; }
.gallery-item:focus-visible { outline: 2px solid var(--primary-light); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .gallery-item:hover { transform: none; }
}

/* ---------- Einleitung mit Bildkreisen (about-one) ----------
   Zweispaltig ab 900px: Text links, Bildgruppe rechts. Die Bildgruppe
   ist ein Rahmen im Verhältnis 5:4, in dem die drei Kreise prozentual
   sitzen — dadurch bleibt die Anordnung bei jeder Breite gleich. */

.about {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacer-3);
  align-items: center;
}
.about-text {
  margin-inline: 0;
  max-inline-size: 58ch;
}

/* [HB 2.9] */
.about-figures {
  position: relative;
  inline-size: 100%;
  aspect-ratio: 640 / 594;
  isolation: isolate;      /* eigene Stapelebene für die Ringe */
  container-type: inline-size;   /* für den Versatz in cqw, siehe unten */
}
/* [HB 2.9] */
.about-circle {
  position: absolute;
  aspect-ratio: 1;
}
.about-circle img {
  display: block;
  inline-size: 100%; block-size: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* [HB 2.9] */
.about-circle::before {
  content: ""; position: absolute; z-index: -1;
  inset: 0;
  border-radius: 50%;
  transform: translateX(-3cqw);

  /* Ein border kann keinen Farbverlauf tragen. Stattdessen liegt hier
     eine Verlaufsfläche, aus der die Mitte ausgestanzt wird — übrig
     bleibt ein Ring in Stärke des padding-Werts. */
  padding: 3px;
  background: linear-gradient(150deg,
    var(--primary) 0%,
    rgba(226, 0, 122, .12) 42%,
    rgba(226, 0, 122, .55) 68%,
    var(--primary) 100%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

/* Position und Größe der drei Kreise, abgemessen an der Formgrafik. */
.about-circle-1 { inset-inline-start: 0;     inset-block-start: 20.1%; inline-size: 55.5%; }
.about-circle-2 { inset-inline-start: 53.2%; inset-block-start: 0.7%;  inline-size: 43.6%; }
.about-circle-3 { inset-inline-start: 53.9%; inset-block-start: 52.2%; inline-size: 43.4%; }

@media (min-width: 900px) {
  .about {
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 4.5rem);
  }
}

/* ---------- Referenzliste ----------------------------------
   Dreispaltig auf breiten Bildschirmen. Über columns statt Grid,
   damit die Liste bei jeder Länge gleichmäßig umbricht und auf
   schmalen Geräten von selbst auf zwei und eine Spalte fällt. */

.venue-list-title {
  font-size: var(--font-size-h3);
  margin-block: 0 var(--spacer-2);
}
.venue-list {
  columns: 3 260px;
  column-gap: clamp(1.5rem, 4vw, 3.5rem);
  list-style: none;
  margin: var(--spacer-3) 0 0;
  padding: 0;
}
.venue-list li {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-block-end: 0.8rem;
  color: var(--body-color);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.4;
}

/* ---------- Leuchtkasten ------------------------------------ */

.lightbox {
  border: 0; padding: 0; background: transparent;
  max-inline-size: 100vw; max-block-size: 100vh;
  inline-size: 100%; block-size: 100%;
  display: none;
  place-items: center;
  overflow: hidden;
}
.lightbox[open] { display: grid; }
.lightbox::backdrop { background: rgba(5, 2, 20, .93); backdrop-filter: blur(6px); }

.lightbox-img {
  max-inline-size: min(92vw, 1400px);
  max-block-size: 86vh;
  inline-size: auto; block-size: auto;
  border-radius: var(--border-radius-sm);
  box-shadow: 0 30px 90px rgba(0,0,0,.7);
}

.lightbox-close, .lightbox-nav {
  position: fixed; z-index: 2;
  inline-size: 48px; block-size: 48px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50%;
  background: rgba(5,2,20,.7);
  color: #fff; cursor: pointer;
  display: grid; place-items: center;
  transition: background .2s, border-color .2s;
}
.lightbox-close:hover, .lightbox-nav:hover { background: var(--primary); border-color: var(--primary); }
.lightbox-close svg, .lightbox-nav svg { inline-size: 22px; block-size: 22px; }
.lightbox-close { inset-block-start: 1.2rem; inset-inline-end: 1.2rem; }
.lightbox-nav-prev { inset-inline-start: 1.2rem; inset-block-start: 50%; transform: translateY(-50%); }
.lightbox-nav-next     { inset-inline-end: 1.2rem;   inset-block-start: 50%; transform: translateY(-50%); }

.lightbox-counter {
  position: fixed; inset-block-end: 1.4rem; inset-inline: 0;
  text-align: center; color: var(--tertiary-color);
  font-size: 0.9rem; margin: 0;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .lightbox-nav-prev { inset-inline-start: 0.6rem; }
  .lightbox-nav-next     { inset-inline-end: 0.6rem; }
  .lightbox-img { max-inline-size: 94vw; }
}

/* Zweispalter mit Bild statt Häkchenliste */
.studio-img {
  border-radius: var(--border-radius);
  overflow: hidden;
  border: 1px solid var(--border-color);
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.studio-img img { inline-size: 100%; block-size: auto; display: block; }

/* ============================================================
   Korrekturen — Stand 01.09.2026
   ============================================================ */

/* ---------- Kopfleiste auf schmalen Geräten ----------------- */

/* Logo und Menüschalter waren auf dem Handy zu klein: die Wortmarke
   kaum lesbar, der Schalter knapp zu treffen. Beide wachsen deutlich. */
@media (max-width: 1200px) {
  .navbar-brand img            { width: clamp(168px, 44vw, 205px); }
  .navbar-scrolled .navbar-brand img { width: clamp(140px, 36vw, 172px); }
  /* Die Leiste ist mittig ausgerichtet — der Abstand unter dem Logo hebt
     es aus der Unterkante heraus, statt es dort kleben zu lassen. */
  .navbar-brand { margin-block-end: 0.7rem; }
  .navbar-toggler { padding: 0.45rem; }
  .navbar-toggler svg { width: 40px; height: 40px; }
}

/* ---------- Mobiles Menü schließen -------------------------- */

/* [HB 2.11] */
.navbar-backdrop {
  position: fixed; z-index: 1;
  inset: 0;
  background: rgba(5, 2, 20, .62);
  backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.navbar-backdrop[data-open="true"] { opacity: 1; visibility: visible; }

/* [HB 2.11] */
.navbar-close {
  display: none;
  position: absolute; z-index: 1;
  inset-block-start: 1.15rem; inset-inline-end: 1.15rem;
  inline-size: 44px; block-size: 44px;
  padding: 0; border: 0; background: none;
  color: var(--body-color); cursor: pointer;
  place-items: center;
}
.navbar-close svg { inline-size: 26px; block-size: 26px; }
.navbar-close:hover { color: var(--primary-light); }

@media (max-width: 1200px) {
  .navbar-collapse    { z-index: 2; }   /* über dem Schleier */
  .navbar-close { display: grid; }
}
@media (min-width: 1201px) {
  .navbar-backdrop { display: none; }
}

/* Hinter dem offenen Menü soll die Seite nicht mitscrollen */
body[data-menu="open"] { overflow: hidden; }

/* Der Kopfbereich ist auf schmalen Geräten gewachsen. Seiten ohne
   Kopfbild — Impressum, Datenschutz — brauchen oben entsprechend mehr
   Vorlauf, sonst rutscht die Überschrift unter die feste Leiste. */
.page-header-tall { padding-block-start: clamp(10.5rem, 15vh, 12rem); }

/* Impressum und Datenschutz: reiner Fließtext ohne Zwischenbilder. Die
   Überschrift stand zu weit weg, der Fußbereich klebte am letzten Satz.
   Oben trägt der Seitenkopf den Abstand bereits allein, der Textblock
   braucht dort keinen zweiten. Unten dafür rund die anderthalbfache
   Höhe, damit der Text erkennbar endet, bevor der Fuß beginnt. */
.rechtstext { padding-block: 0 calc(var(--spacer-5) * 1.6); }

/* ---------- Kopfbereich der Startseite ---------------------- */

/* Text und Schaltflächen stehen mittig und groß. Die ersten beiden
   Zeilen sind im Seitenkopf von Hand umbrochen, der Rest bricht selbst:
   26ch machen daraus zwei Zeilen — auf jeder Bildschirmbreite. */
.hero-body {
  max-inline-size: none;
  padding-block: 9.5rem 5rem;
  text-align: center;
}
.hero h1 {
  /* Der Deckel hält den gewünschten Zeilenfall: „Pina Colada
     interessieren" misst knapp 17ch und bleibt in einer Zeile, der
     Schlusssatz misst 28ch und bricht damit auf zwei. */
  max-inline-size: 24ch;
  margin-inline: auto;
  margin-block-end: 1.6rem;
  text-wrap: balance;
}
.hero-actions { justify-content: center; }
.hero-actions .btn {
  font-size: clamp(1rem, 0.95rem + 0.4vw, 1.18rem);
  padding: 1rem 2.2rem;
}

/* „Tourplan ansehen": weiß mit Magenta-Schrift.

   Hier steht bewusst --primary und nicht --primary-light: auf WEISSEM
   Grund dreht sich das Verhältnis um. #E2007A erreicht dort 4,63:1,
   #ff2e9a nur 3,42:1. Der hellere Ton gilt für dunklen Grund. */
.btn-white {
  background: #fff;
  color: var(--primary);
  border-color: #fff;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .3);
}
.btn-white:hover,
.btn-white:focus-visible {
  background: var(--primary);
  color: #fff;
  border-color: #fff;
  box-shadow: 0 12px 34px rgba(226, 0, 122, .5);
}

/* Im Kopfbereich verlieren beide Knöpfe beim Überfahren ihre Füllung und
   stehen als weiße Umrandung mit weißer Schrift auf dem Video. */
.hero-actions .btn:hover,
.hero-actions .btn:focus-visible,
.hero-actions .btn-white:hover,
.hero-actions .btn-white:focus-visible {
  background: transparent;
  color: #fff;
  border-color: #fff;
  box-shadow: none;
}

/* ---------- Einleitungstext der Startseite ------------------ */

/* [HB 2.12] Früher Blocksatz mit automatischer Silbentrennung. Auf
   schmalen Zeilen riss der Blocksatz die Wortabstände auseinander,
   deshalb jetzt linksbündig — die Trennung braucht es dann nicht mehr. */
.about-text p { text-align: start; hyphens: manual; }

@media (min-width: 560px) {
  .about-text   { margin-inline: auto; }
  .about-text p { text-align: center; hyphens: manual; }
}
@media (min-width: 900px) {
  .about-text   { margin-inline: 0; }
  .about-text p { text-align: start; }
}

/* Die drei Kreisbilder brauchen Breite neben dem Text. Auf hochkant
   gehaltenen Geräten unterhalb der Zweispaltigkeit bleiben sie weg. */
@media (max-width: 899px) and (orientation: portrait) {
  .about-figures { display: none; }
}

/* ---------- Besetzungen: XL, M, XS, Solo -------------------- */

/* Schmal untereinander, ab 560px zwei Reihen mit je zwei Kacheln. */
.card-grid { grid-template-columns: 1fr; }

@media (min-width: 560px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Referenzen -------------------------------------- */

.venue-list-title { text-align: center; }

/* ---------- Lesbarkeit: kleine Schriften nachgezogen --------- */

/* Die Token in theme.css sind eine Stufe größer geworden. Diese Stellen
   setzen ihre Größe fest und müssen mitwachsen. */
.eyebrow { font-size: 0.9rem; }

.cta-banner h2 { font-size: clamp(1.55rem, 2.8vw, 2.1rem); }

.card-subtitle,
.card-text,
.card-action a { font-size: 1.02rem; }

.team-member-role { font-size: 0.85rem; }
.team-member-name  { font-size: 1.18rem; }
.team-member-body  { inline-size: min(94%, 285px); }

.venue-list li { font-size: 1rem; }

.event-date  { font-size: 0.86rem; }
.event-time  { white-space: nowrap; }
.event-note { font-size: 0.98rem; }
.badge,
.event-status { font-size: 0.8rem; }

.footer p, .footer li, .footer a { font-size: 1.02rem; }
.footer-heading { font-size: 1.15rem; }
.footer-bottom  { font-size: 0.9rem; }
/* Ohne diese Zeile erbt der Link die 1.02rem der uebrigen
   Fusszeilenlinks und steht groesser als der Text daneben. */
.footer-bottom a { font-size: inherit; }

.contact-form label { font-size: 1rem; }
.contact-form .checkbox,
.contact-form .form-field-checkbox label { font-size: 0.98rem; }
.form-note, .verify { font-size: 0.98rem; }

/* ---------- Kontaktseite ------------------------------------ */

/* Unterhalb der Zweispaltigkeit steht das Formular unter den
   Kontaktdaten, nicht in einer gequetschten Spalte daneben. */
@media (max-width: 899px) {
  .contact-grid { grid-template-columns: 1fr; }
}

/* ---------- Fußbereich -------------------------------------- */

/* Reichen drei Spalten nebeneinander nicht mehr, wandert das Logo als
   eigene Reihe nach oben und steht dort mittig; Bandkontakt und
   Information bleiben nebeneinander. Erst ab 900 px stehen alle drei
   in einer Reihe, das Logo dann wieder linksbündig. Feste Spalten statt
   auto-fit, damit die Marke etwas mehr Raum bekommt als die Listen. */
/* Auf dem Handy steht alles untereinander und mittig. Das Logo ist ein
   Blockelement (globale Regel für img), mittig stellt es deshalb der
   eigene Außenabstand, nicht text-align. */
.footer-top { grid-template-columns: 1fr; text-align: center; }
.footer-brand img { margin-inline: auto; }
@media (max-width: 459px) {
  .footer-bottom { justify-content: center; text-align: center; }
}

/* Zwei Spalten: das Logo bekommt eine eigene Reihe oben und steht dort
   mittig über den beiden Listen. Der seitliche Einzug rückt das
   Spaltenpaar zusammen, damit es unter dem Logo sitzt statt bis an beide
   Ränder zu laufen. Die Texte stehen ab hier wieder linksbündig. */
@media (min-width: 460px) {
  .footer-top {
    grid-template-columns: 1fr 1fr;
    padding-inline: clamp(0rem, 6vw, 4rem);
    text-align: start;
  }
  .footer-brand { grid-column: 1 / -1; }
}

/* Ab hier passen alle drei nebeneinander, das Logo steht wieder links. */
@media (min-width: 900px) {
  .footer-top { grid-template-columns: 1.2fr 1fr 1fr; padding-inline: 0; }
  .footer-brand { grid-column: auto; }
  .footer-brand img { margin-inline: 0; }
}

/* Der Nach-oben-Knopf liegt fest in der rechten unteren Ecke und stand
   am Seitenende auf Impressum und Datenschutz. Diese Reserve hält die
   Zeile über ihm frei. */
.footer-bottom { padding-block-end: 5.25rem; }

/* ============================================================
   Durchgang Responsive · Typografie · Abstände · Fehler- und
   Leerzustände — Stand 01.09.2026
   ============================================================ */

/* ---------- Fehlerzustände im Formular ---------------------- */

/* Ein Feld mit Fehler trägt .has-errors. Ohne Markierung sieht der
   Besucher nur die Meldung und muss selbst suchen, welches Feld gemeint
   ist. Rot allein reicht nicht — die Meldung darunter benennt es. */
.contact-form .has-errors input,
.contact-form .has-errors select,
.contact-form .has-errors textarea {
  border-color: rgba(239, 68, 68, .75);
  background: rgba(239, 68, 68, .07);
}
.contact-form .has-errors input:focus,
.contact-form .has-errors select:focus,
.contact-form .has-errors textarea:focus {
  border-color: #ef4444;
}

.contact-form .form-errors {
  margin-block-start: 0.45rem;
}
.contact-form .form-errors .form-message {
  margin: 0;
  color: #ffb4b4;
  font-size: 0.92rem;
  line-height: 1.5;
  display: flex;
  gap: 0.45rem;
  align-items: baseline;
}
/* Das Plugin setzt ein Font-Awesome-Zeichen davor, das hier nicht
   geladen ist. Das Ausrufezeichen kommt deshalb aus dem Stylesheet. */
.contact-form .form-errors .form-message i { display: none; }
.contact-form .form-errors .form-message::before {
  content: "!";
  flex: 0 0 auto;
  inline-size: 1.15em; block-size: 1.15em;
  border-radius: 50%;
  background: rgba(239, 68, 68, .85);
  color: #fff;
  font-size: 0.82em; font-weight: 700; font-style: normal;
  line-height: 1.15em;
  text-align: center;
  align-self: center;
}

/* Pflichtfeld-Sternchen. Stand vorher in Fließtextfarbe und war damit
   von der Beschriftung nicht zu unterscheiden. */
.contact-form .required {
  color: var(--primary-light);
  margin-inline-start: 0.15em;
  font-weight: 700;
}

/* Beim Ankreuzfeld gibt das Plugin zusätzlich eine leere Beschriftung
   aus — die Fassung mit Text steht daneben im Feld selbst. */
.contact-form .form-label:has(label:empty) { display: none; }
.contact-form label:empty { display: none; }

/* ---------- Trefferflächen auf Touchgeräten ----------------- */

/* Fußzeilenlinks und die Direktkontakte standen mit 20 bis 30 px Höhe
   deutlich unter der Mindestgröße von 44 px. Das Polster vergrößert die
   Fläche, ohne die Zeilen optisch auseinanderzuziehen. */
@media (pointer: coarse) {
  .footer li a,
  .footer-bottom a,
  .contact-info-direct a {
    display: inline-block;
    padding-block: 0.62rem;
  }
  .footer li { margin-block-end: 0; }
  .footer-bottom { row-gap: 0.25rem; }

  /* Telefon und E-Mail in der Fußzeile, im Studio-Kontaktband und im
     Fließtext der Rechtsseiten blieben mit 21 bis 22 px unter den 24 px
     aus WCAG 2.5.8. Das Polster steht hier bewusst OHNE inline-block:
     an einem inline-Element vergrößert senkrechtes Polster die
     Trefferfläche, verändert den Textfluss aber nicht. Die etwas
     größere Zeilenhöhe hält die Flächen benachbarter Zeilen
     auseinander, damit sie sich nicht überlappen. */
  .footer-top p { line-height: 1.9; }
  .footer-top p a,
  .cta-banner-text p a,
  .prose p a { padding-block: 0.22rem; }

  /* 1,35 rem sind 21,6 px und damit unter der Mindestgröße. Das
     Ankreuzfeld ist ein Bedienelement, keine Textstelle — für es gilt
     die Ausnahme für Links im Satz nicht. */
  .contact-form input[type="checkbox"] {
    inline-size: 1.5rem; block-size: 1.5rem;
  }
}

/* ---------- Fließtext: Rhythmus der Abschnitte -------------- */

/* Impressum und Datenschutzerklärung tragen ein Dutzend Abschnitte.
   Ohne Vorlauf stand über jeder Überschrift weniger Luft als darunter —
   die Gliederung war dadurch nicht zu sehen. */
.prose h2 + *, .prose h3 + * { margin-block-start: 0; }
.prose h2:not(:first-child) { margin-block-start: calc(var(--spacer-3) + 0.5rem); }
.prose h3:not(:first-child) { margin-block-start: var(--spacer-2); }

/* Lange deutsche Komposita brechen in schmalen Spalten sonst nicht und
   reißen den Flattersatz auf. */
.prose { hyphens: auto; }
.prose li { margin-block-end: 0.55em; }

/* ---------- Leerzustand Termine ----------------------------- */

/* Der Handlungsaufruf stand 18 px unter dem Text und 48 px über der
   Kante — er wirkte an den Text geklebt. */
.event-empty p { margin-block-end: 0; }
.event-empty .btn { margin-block-start: var(--spacer-2); }
.event-empty-title { margin-block-end: 0.6rem; }

/* ---------- Fehlerseite ------------------------------------- */

.error-code {
  font-family: var(--heading-font-family);
  font-size: clamp(3.5rem, 12vw, 6rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--border-color);
  margin: 0 0 0.4rem;
}

.error-action { text-align: center; margin-block-start: var(--spacer-3); }

/* Ankreuzfeld im Fehlerfall. Ein Rahmen greift bei nativen Ankreuzfeldern
   nicht — der Umriss schon. Die Beschriftung färbt mit, damit die Stelle
   auch ohne die Meldung darunter zu finden ist. */
.contact-form .has-errors input[type="checkbox"] {
  outline: 2px solid rgba(239, 68, 68, .85);
  outline-offset: 2px;
  accent-color: #ef4444;
}
.contact-form .has-errors label.inline { color: #ffb4b4; }
.contact-form .has-errors .form-errors { margin-block-start: 0.6rem; }

/* ---------- Lesbarkeit auf schmalen Schirmen ---------------- */

/* Die Spannen in theme.css sind unten angehoben und wachsen dadurch von
   selbst mit. Diese Stellen setzen ihre Größe fest; sie bekommen den
   Zuschlag nur dort, wo er gebraucht wird — auf großen Schirmen bleibt
   das Verhältnis wie es war.

   Ausgenommen bleibt die Kopfzeile der Startseite: ihr Mindestwert hält
   bei 320 px „Pina Colada interessieren" in einer Zeile. Größer, und der
   von Hand gesetzte Zeilenfall bricht auf. */
@media (max-width: 640px) {
  .eyebrow          { font-size: 0.96rem; }

  .card-subtitle,
  .card-text,
  .card-action a    { font-size: 1.08rem; }
  .card-title       { font-size: 1.35rem; }

  .team-member-role { font-size: 0.92rem; }
  .team-member-name { font-size: 1.24rem; }

  .venue-list li    { font-size: 1.06rem; }

  .event-date       { font-size: 0.92rem; }
  .event-note       { font-size: 1.04rem; }
  .badge,
  .event-status     { font-size: 0.86rem; }

  .footer p,
  .footer li,
  .footer a         { font-size: 1.08rem; }
  .footer-heading   { font-size: 1.2rem; }
  .footer-bottom    { font-size: 0.95rem; }

  .contact-form label { font-size: 1.06rem; }
  .contact-form .checkbox,
  .contact-form .form-field-checkbox label,
  .contact-form label.inline { font-size: 1.04rem; }
  .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 { font-size: 1.06rem; }

  .form-note,
  .verify           { font-size: 1.04rem; }
  .contact-form .form-errors .form-message { font-size: 0.98rem; }

  .cta-banner p     { font-size: 1.08rem; }
  .btn              { font-size: 1.02rem; }
}

/* Die Bildgruppe der Einleitung ist auf drei Kreise ausgelegt. Bleibt nur
   einer übrig, stünde er nach der festen Prozentanordnung oben links in
   einem sonst leeren Rahmen — mittig und größer liest er sich als
   gewollt. (Zwei der drei Aufnahmen mussten mangels Nutzungsrechten
   weichen, siehe home/home.md.) */
.about-figures .about-circle:only-child {
  inset-block-start: 50%;
  inset-inline-start: 50%;
  translate: -50% -50%;
  inline-size: 74%;
}

/* Kachel ohne Bild. Der Textkasten ist als Unterteil unter dem Bild
   gebaut — er hat oben weder Rahmen noch Rundung. Fehlt das Bild, muss
   er beides selbst mitbringen. Das Polster oben schafft dem Kürzelkreis
   Platz, der sonst in die Überschrift ragt. */
.card-textonly .card-body {
  border-block-start: 1px solid var(--border-color);
  border-start-start-radius: var(--border-radius);
  border-start-end-radius: var(--border-radius);
  padding-block-start: 5rem;
}

/* ---------- Schalter für das Hintergrundvideo ---------------- */

/* Sitzt unauffällig in der unteren Ecke des Kopfbereichs. Er muss da
   sein (WCAG 2.2.2 verlangt eine Anhaltemöglichkeit für automatisch
   startende Bewegung über fünf Sekunden), soll aber nicht mit den
   beiden Handlungsaufrufen konkurrieren. */
.hero-video-schalter {
  position: absolute;
  inset-block-end: 1.4rem; inset-inline-end: 1.4rem;
  z-index: 2;
  inline-size: 44px; block-size: 44px;
  display: grid; place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  background: rgba(5, 2, 20, .55);
  backdrop-filter: blur(4px);
  color: rgba(255, 255, 255, .85);
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
.hero-video-schalter svg { inline-size: 18px; block-size: 18px; }
.hero-video-schalter:hover {
  background: rgba(5, 2, 20, .8);
  border-color: #fff;
  color: #fff;
}
/* Angehalten: aus den zwei Balken wird ein Dreieck */
.hero-video-schalter[data-laeuft="false"] svg rect:first-child {
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  width: 14px;
}
.hero-video-schalter[data-laeuft="false"] svg rect:last-child { display: none; }