/* ==========================================================================
   Munich Souls — Designsystem
   Farbwelt abgeleitet aus den Konzertplakaten: Aquarell-Spektrum auf Papier.
   Layout durchgehend Flexbox (Elementor-Flex-Container-kompatibel).
   ========================================================================== */

/* --- 1. Tokens ---------------------------------------------------------- */
:root {
  /* Papier & Tinte */
  --paper:        #FBF7F0;
  --paper-warm:   #F4EDE1;
  --paper-deep:   #EBE1D1;
  --ink:          #1E1836;
  --ink-soft:     #4A4266;
  --ink-faint:    #7B738F;
  --line:         rgba(30, 24, 54, .12);

  /* Aquarell-Spektrum */
  --c-red:        #E4453A;
  --c-orange:     #F2953B;
  --c-gold:       #EFC54A;
  --c-green:      #5FB03F;
  --c-teal:       #1F9C92;
  --c-blue:       #2C6FD1;
  --c-violet:     #7B4FC4;
  --c-magenta:    #D4419B;

  /* Bereichsakzent — wird pro Section überschrieben */
  --accent:       var(--c-teal);
  --accent-2:     var(--c-blue);

  /* Typografie */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-hero:  clamp(2.75rem, 7.5vw, 6rem);
  --fs-h1:    clamp(2.25rem, 5.5vw, 4rem);
  --fs-h2:    clamp(1.85rem, 4vw, 3rem);
  --fs-h3:    clamp(1.3rem, 2.2vw, 1.75rem);
  --fs-lead:  clamp(1.075rem, 1.6vw, 1.3rem);
  --fs-body:  1.0625rem;
  --fs-small: .9375rem;

  /* Raster */
  --wrap:     1200px;
  --wrap-narrow: 820px;
  --gutter:   clamp(1.25rem, 4vw, 3rem);
  --sp-section: clamp(4.5rem, 9vw, 8.5rem);

  --radius:    18px;
  --radius-lg: 28px;

  --shadow-s: 0 2px 8px rgba(30,24,54,.06), 0 8px 24px rgba(30,24,54,.05);
  --shadow-m: 0 4px 16px rgba(30,24,54,.08), 0 18px 48px rgba(30,24,54,.09);
  --shadow-l: 0 8px 28px rgba(30,24,54,.10), 0 32px 80px rgba(30,24,54,.14);

  --ease: cubic-bezier(.22,.75,.28,1);
}

/* --- 2. Reset ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Feines Korn über der ganzen Seite — gibt dem Papier Textur */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9999;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- 3. Typografie ------------------------------------------------------ */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.02em;
  margin: 0 0 .5em;
  font-variation-settings: "SOFT" 30, "WONK" 1;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.22; }
h4 { font-size: 1.125rem; line-height: 1.3; }
p  { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--ink-soft);
}

/* Augenbraue als Farbchip */
.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .42rem 1rem .42rem .8rem;
  border-radius: 100px;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  font-family: var(--font-body);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--accent) 80%, var(--ink));
  margin: 0 0 1.2rem;
}
.eyebrow::before {
  content: ""; width: .5rem; height: .5rem;
  background: var(--accent); border-radius: 50%;
  flex: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent);
}
.section--ink .eyebrow,
.chronik .eyebrow,
.cta-band .eyebrow {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  color: color-mix(in srgb, var(--accent) 45%, #fff);
}

/* Wort im Akzent hervorheben, mit Aquarell-Unterstrich */
.hl {
  color: var(--accent);
  position: relative;
  white-space: nowrap;
}
.hl::after {
  content: ""; position: absolute;
  left: -.08em; right: -.08em; bottom: .02em; height: .34em;
  background: currentColor; opacity: .22;
  border-radius: .2em;
  transform: rotate(-.7deg);
  z-index: -1;
}

/* Überschrift im vollen Spektrum */
.grad {
  background: linear-gradient(100deg,
    var(--c-magenta), var(--c-violet) 18%, var(--c-blue) 36%,
    var(--c-teal) 54%, var(--c-green) 70%, var(--c-orange) 86%, var(--c-red));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Regenbogenlinie als Trenner und Akzent */
.rainbow-rule {
  height: 5px; border-radius: 5px; border: 0;
  margin: 0 0 1.75rem;
  width: clamp(120px, 18vw, 200px);
  background: linear-gradient(90deg,
    var(--c-red), var(--c-orange), var(--c-gold), var(--c-green),
    var(--c-teal), var(--c-blue), var(--c-violet), var(--c-magenta));
}
.section-head--center .rainbow-rule { margin-inline: auto; }

/* --- 4. Layout ---------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--wrap-narrow); }

.section {
  position: relative;
  padding-block: var(--sp-section);
}
/* Ungetönte Sektionen bekommen einen zarten Aquarellhauch in ihrer Farbe */
.section:not(.section--warm):not(.section--deep):not(.section--ink)::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(48% 42% at 92% 12%,
      color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    radial-gradient(42% 38% at 6% 88%,
      color-mix(in srgb, var(--accent-2, var(--accent)) 14%, transparent), transparent 70%);
}
.section > * { position: relative; z-index: 1; }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }
/* Getönte Flächen: jede Sektion badet in ihrer eigenen Akzentfarbe */
.section--warm {
  background:
    radial-gradient(70% 60% at 88% 8%,
      color-mix(in srgb, var(--accent-2, var(--accent)) 22%, transparent), transparent 70%),
    radial-gradient(60% 55% at 4% 95%,
      color-mix(in srgb, var(--accent) 20%, transparent), transparent 68%),
    color-mix(in srgb, var(--accent) 15%, var(--paper-warm));
}
.section--deep  { background: color-mix(in srgb, var(--accent) 24%, var(--paper-deep)); }
.section--ink   { background: var(--ink); color: var(--paper); }
.section--ink .lead { color: rgba(251,247,240,.72); }
.section--ink .eyebrow { color: var(--accent); }

/* Flex-Reihen — bilden 1:1 Elementor-Flex-Container ab */
.row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 3vw, 2.75rem);
}
.row--center  { align-items: center; }
.row--between { justify-content: space-between; }
.row--middle  { justify-content: center; }
.col      { flex: 1 1 320px; min-width: 0; }
.col--half { flex: 1 1 min(420px, 100%); min-width: 0; }
.col--third { flex: 1 1 min(300px, 100%); min-width: 0; }
.col--quarter { flex: 1 1 min(220px, 100%); min-width: 0; }
.col--wide { flex: 2 1 min(480px, 100%); min-width: 0; }

.stack > * + * { margin-top: 1.15rem; }
.section-head { max-width: 42rem; margin-bottom: clamp(2.25rem, 4vw, 3.5rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow::before { display: none; }

/* --- 5. Header & Navigation --------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(251,247,240,.82);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.site-header.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 6px 24px rgba(30,24,54,.06);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  min-height: clamp(92px, 15vw, 124px);
  transition: min-height .3s var(--ease);
}
.site-header.is-stuck .site-header__inner { min-height: clamp(78px, 12vw, 100px); }

.brand {
  display: inline-flex; align-items: center; gap: .7rem;
  text-decoration: none; flex: none;
}
.brand__mark {
  width: 40px; height: 41px; flex: none;
  object-fit: contain;
  /* Graues Logo in den Markenton einfärben */
  filter: brightness(0) saturate(100%) invert(11%) sepia(28%) saturate(2200%) hue-rotate(228deg) brightness(95%) contrast(97%);
}
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.32rem; font-weight: 700;
  letter-spacing: -.02em;
}
.brand__tag {
  font-size: .66rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-faint); margin-top: .28rem;
}

/* Marke im Seitenkopf in doppelter Größe.
   Auf schmalen Schirmen staffelt clamp() herunter, damit Logo, Schriftzug
   und Menüknopf nebeneinander passen — ab ca. 640px greift der volle Wert. */
.site-header .brand {
  gap: clamp(.7rem, 2.4vw, 1.4rem);
  min-width: 0;
}
.site-header .brand__mark {
  width: clamp(46px, 11.5vw, 80px);
  height: auto;
  aspect-ratio: 1250 / 1280;
}
.site-header .brand__name {
  font-size: clamp(1.28rem, 5.4vw, 2.64rem);
  white-space: nowrap;
}
.site-header .brand__tag {
  font-size: clamp(.68rem, 2.2vw, 1.32rem);
  letter-spacing: .18em;
  white-space: nowrap;
  margin-top: .45rem;
}

.nav { display: flex; align-items: center; gap: .15rem; }
.nav__link {
  position: relative;
  padding: .55rem .78rem;
  font-size: .945rem; font-weight: 500;
  text-decoration: none;
  border-radius: 9px;
  white-space: nowrap;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.nav__link::after {
  content: ""; position: absolute;
  left: .78rem; right: .78rem; bottom: .3rem; height: 2px;
  background: var(--accent); border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav__link:hover { color: var(--accent); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--accent); font-weight: 650; }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.nav-toggle {
  display: none;
  width: 46px; height: 46px;
  padding: 0; border: 1px solid var(--line);
  border-radius: 12px;
  background: transparent; cursor: pointer;
  align-items: center; justify-content: center;
  flex: none;
}
.nav-toggle__bars { position: relative; width: 20px; height: 14px; display: block; }
.nav-toggle__bars span {
  position: absolute; left: 0; width: 100%; height: 2px;
  background: var(--ink); border-radius: 2px;
  transition: transform .34s var(--ease), opacity .2s var(--ease);
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 6px; }
.nav-toggle__bars span:nth-child(3) { top: 12px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(6px) 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(-6px) rotate(-45deg); }

/* --- 6. Buttons --------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .55rem;
  padding: .92rem 1.7rem;
  font-size: .97rem; font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  border: 1.5px solid transparent;
  border-radius: 100px;
  cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn__arrow { transition: transform .25s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

.btn--primary {
  background: linear-gradient(118deg,
    var(--accent),
    color-mix(in srgb, var(--accent) 62%, var(--accent-2, var(--c-orange))));
  color: #fff;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 38%, transparent);
}
.btn--primary:hover {
  box-shadow: 0 12px 30px color-mix(in srgb, var(--accent) 48%, transparent);
}
.btn--ghost {
  border-color: var(--line); color: var(--ink);
  background: transparent;
}
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn--light {
  background: rgba(251,247,240,.14); color: var(--paper);
  border-color: rgba(251,247,240,.3);
}
.btn--light:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--lg { padding: 1.08rem 2.1rem; font-size: 1.04rem; }

.btn-group { display: flex; flex-wrap: wrap; gap: .85rem; }

/* Textlink mit Pfeil */
.arrow-link {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 650; font-size: .95rem;
  color: var(--accent); text-decoration: none;
}
.arrow-link span { transition: transform .25s var(--ease); }
.arrow-link:hover span { transform: translateX(4px); }

/* --- 7. Karten, Icon-Boxen, Testimonials -------------------------------- */
.card {
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-m);
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
}
.card__media { position: relative; overflow: hidden; background: var(--paper-deep); }
.card__media img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  transition: transform .7s var(--ease);
}
.card:hover .card__media img { transform: scale(1.045); }
.card__body { padding: 1.5rem 1.6rem 1.7rem; display: flex; flex-direction: column; flex: 1; }
.card__meta {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  font-size: .8rem; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: .7rem;
}
.card__title { font-size: 1.32rem; margin-bottom: .55rem; }
.card__text { color: var(--ink-soft); font-size: var(--fs-small); margin-bottom: 1.15rem; }
.card__body .arrow-link { margin-top: auto; }

/* Farbbalken oben auf der Karte */
.card--accent { position: relative; background: color-mix(in srgb, var(--accent) 6%, var(--paper)); }
.card--accent::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: linear-gradient(90deg, var(--accent),
              color-mix(in srgb, var(--accent) 45%, var(--c-gold)));
  z-index: 2;
}
/* Bildmedien bekommen beim Zeigen einen Farbschleier */
.card__media::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top,
              color-mix(in srgb, var(--accent) 55%, transparent), transparent 62%);
  opacity: 0; transition: opacity .45s var(--ease);
  pointer-events: none;
}
.card:hover .card__media::after { opacity: 1; }

/* Icon-Box */
.iconbox {
  position: relative;
  display: flex; flex-direction: column;
  gap: 1rem;
  padding: 1.9rem 1.7rem;
  background: color-mix(in srgb, var(--accent) 7%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.iconbox::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--accent);
}
.iconbox:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px color-mix(in srgb, var(--accent) 24%, transparent);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}
.iconbox__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; flex: none;
  border-radius: 15px;
  background: linear-gradient(135deg, var(--accent),
              color-mix(in srgb, var(--accent) 55%, var(--c-gold)));
  color: #fff;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 34%, transparent);
}
.iconbox__icon svg { width: 26px; height: 26px; }
.iconbox__title { font-size: 1.2rem; margin: 0 0 .4rem; }
.iconbox__text { color: var(--ink-soft); font-size: var(--fs-small); margin: 0; }

/* Zahlen-Statistik */
.stat { text-align: center; padding: .5rem; }
.stat__num {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  font-weight: 700; line-height: 1;
  color: var(--accent);
  letter-spacing: -.03em;
  display: block;
}
.stat__label {
  margin-top: .7rem;
  font-size: .86rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-faint);
}

/* Testimonial */
.testimonial {
  display: flex; flex-direction: column; gap: 1.2rem;
  padding: 2rem 1.9rem;
  background: color-mix(in srgb, var(--accent) 8%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line));
  border-radius: var(--radius);
  position: relative;
}
.testimonial::before {
  content: "\201C";
  position: absolute; top: .3rem; right: 1.4rem;
  font-family: var(--font-display);
  font-size: 5.5rem; line-height: 1;
  color: var(--accent); opacity: .16;
}
.testimonial__text { font-size: 1.04rem; color: var(--ink-soft); margin: 0; font-style: italic; }
.testimonial__person { display: flex; align-items: center; gap: .85rem; margin-top: auto; }
.testimonial__avatar {
  width: 46px; height: 46px; border-radius: 50%;
  object-fit: cover; flex: none;
  background: var(--paper-deep);
}
.testimonial__name { font-weight: 650; font-size: .95rem; }
.testimonial__role { font-size: .83rem; color: var(--ink-faint); }

/* Sternebewertung */
.stars { display: inline-flex; gap: .18rem; color: var(--c-gold); }
.stars svg { width: 17px; height: 17px; }

/* --- 8. Galerie --------------------------------------------------------- */
.gallery { display: flex; flex-wrap: wrap; gap: 1rem; }
.gallery__item {
  flex: 1 1 260px;
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: var(--paper-deep);
  border: 0; padding: 0; cursor: zoom-in;
  display: block;
}
.gallery__item img {
  width: 100%; height: 100%;
  aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform .65s var(--ease), filter .4s var(--ease);
}
.gallery__item:hover img { transform: scale(1.06); }
.gallery__item::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(30,24,54,.5), transparent 55%);
  opacity: 0; transition: opacity .35s var(--ease);
}
.gallery__item:hover::after { opacity: 1; }
.gallery__cap {
  position: absolute; left: 1rem; right: 1rem; bottom: .85rem;
  z-index: 2; color: #fff;
  font-size: .86rem; font-weight: 600;
  text-align: left;
  opacity: 0; transform: translateY(8px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.gallery__item:hover .gallery__cap { opacity: 1; transform: translateY(0); }
.gallery__item--tall { flex: 1 1 320px; }
.gallery__item--tall img { aspect-ratio: 3 / 4; }

/* --- 9. Akkordeon ------------------------------------------------------- */
.accordion { border-top: 1px solid var(--line); }
.accordion__item { border-bottom: 1px solid var(--line); }
.accordion__trigger {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.25rem; width: 100%;
  padding: 1.35rem 0;
  background: none; border: 0; cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  font-weight: 600; letter-spacing: -.015em;
  transition: color .25s var(--ease);
}
.accordion__trigger:hover { color: var(--accent); }
.accordion__sign {
  position: relative; width: 22px; height: 22px; flex: none;
  color: var(--accent);
}
.accordion__sign::before, .accordion__sign::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  background: currentColor; border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform .35s var(--ease), opacity .25s var(--ease);
}
.accordion__sign::before { width: 16px; height: 2px; }
.accordion__sign::after  { width: 2px; height: 16px; }
.accordion__trigger[aria-expanded="true"] .accordion__sign::after { transform: translate(-50%,-50%) rotate(90deg); opacity: 0; }
.accordion__panel {
  overflow: hidden;
  height: 0;
  transition: height .4s var(--ease);
}
.accordion__panel-inner { padding: 0 0 1.6rem; color: var(--ink-soft); max-width: 60ch; }

/* --- 10. Formular ------------------------------------------------------- */
.form { display: flex; flex-direction: column; gap: 1.15rem; }
.field { display: flex; flex-direction: column; gap: .45rem; }
.field__label { font-size: .875rem; font-weight: 650; }
.field__hint  { font-size: .8rem; color: var(--ink-faint); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: .85rem 1.05rem;
  font: inherit; font-size: .98rem;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 15%, transparent);
}
.field--check { flex-direction: row; align-items: flex-start; gap: .7rem; }
.field--check input { width: auto; flex: none; margin-top: .3rem; accent-color: var(--accent); }
.field--check label { font-size: .875rem; color: var(--ink-soft); }
.form__note { font-size: .82rem; color: var(--ink-faint); }
.form__status {
  display: none;
  padding: 1rem 1.2rem;
  border-radius: 12px;
  font-size: .93rem; font-weight: 600;
  background: color-mix(in srgb, var(--c-green) 13%, transparent);
  color: #2F6B22;
  border: 1px solid color-mix(in srgb, var(--c-green) 32%, transparent);
}
.form__status.is-visible { display: block; }

/* --- 11. Seitenkopf (Unterseiten) --------------------------------------- */
.pagehead {
  position: relative;
  padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(2.75rem, 5vw, 4.5rem);
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 82% 0%,
      color-mix(in srgb, var(--accent) 26%, transparent), transparent 62%),
    radial-gradient(90% 80% at 6% 100%,
      color-mix(in srgb, var(--accent-2) 22%, transparent), transparent 58%),
    var(--paper-warm);
}
/* Regenbogenkante am Fuß jedes Seitenkopfs */
.pagehead::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
  background: linear-gradient(90deg,
    var(--c-red), var(--c-orange), var(--c-gold), var(--c-green),
    var(--c-teal), var(--c-blue), var(--c-violet), var(--c-magenta));
}
.pagehead__blob {
  position: absolute; pointer-events: none;
  border-radius: 50%;
  filter: blur(64px);
  opacity: .5;
}
.pagehead__blob--a { width: 40vw; height: 40vw; top: -18vw; right: -8vw; background: var(--accent); }
.pagehead__blob--b { width: 30vw; height: 30vw; bottom: -18vw; left: -8vw; background: var(--accent-2); opacity: .42; }
.pagehead__inner { position: relative; z-index: 1; max-width: 46rem; }
.pagehead h1 { margin-bottom: .45rem; }
.pagehead .lead { margin-top: 1.1rem; }

/* Seitenkopf mit Bild daneben. Der Textblock behält seine 46rem, das Bild
   nutzt den rechts ohnehin freien Raum — die Schrift muss dafür nicht
   kleiner werden. Unter 1000px stehen beide untereinander. */
.pagehead__inner--mit-bild { max-width: none; }
.pagehead__text { max-width: 46rem; }
/* Hält Zusammengehöriges auf einer Zeile, z. B. eine Jahresspanne. */
.ms-zusammen { white-space: nowrap; }
.pagehead__bild { margin: 2rem 0 0; }
.pagehead__bild img {
  width: 100%; display: block;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-l);
}
@media (min-width: 1000px) {
  .pagehead__inner--mit-bild {
    display: flex;
    align-items: center;
    /* Mittig statt an die Ränder gedrückt: Text und Bild rücken zusammen. */
    justify-content: center;
    gap: clamp(2rem, 3vw, 3rem);
  }
  /* Schmaler als die üblichen 46rem — der Einleitungssatz würde die Spalte
     sonst aufziehen und das Bild an den rechten Rand schieben. 35rem ist das
     Maß, bei dem „Neue Probensaison" (559px bei 64px Schrift) noch auf eine
     Zeile passt; enger müsste die Schrift kleiner werden. */
  .pagehead__text { flex: 0 1 35rem; min-width: 0; }
  .pagehead__bild { flex: 0 0 min(420px, 38%); margin: 0; }
}

/* Brotkrumen */
.crumbs {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  font-size: .82rem; color: var(--ink-faint);
  margin-bottom: 1.4rem;
}
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs span[aria-hidden] { opacity: .5; }

/* --- 12. Footer --------------------------------------------------------- */
.site-footer {
  position: relative;
  background:
    radial-gradient(80% 120% at 88% 0%, rgba(212,65,155,.22), transparent 60%),
    radial-gradient(70% 100% at 10% 20%, rgba(31,156,146,.20), transparent 62%),
    var(--ink);
  color: rgba(251,247,240,.74);
  padding-block: clamp(3.5rem, 7vw, 5.5rem) 2rem;
  font-size: var(--fs-small);
}
.site-footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: linear-gradient(90deg,
    var(--c-red), var(--c-orange), var(--c-gold), var(--c-green),
    var(--c-teal), var(--c-blue), var(--c-violet), var(--c-magenta));
}
.site-footer h4 {
  color: var(--paper);
  font-family: var(--font-body);
  font-size: .8rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase;
  margin-bottom: 1.1rem;
}
.site-footer a { text-decoration: none; transition: color .2s var(--ease); }
.site-footer a:hover { color: var(--paper); }
.footer-nav { display: flex; flex-direction: column; gap: .6rem; }
.site-footer .brand__name { color: var(--paper); }
.site-footer .brand__mark {
  filter: brightness(0) invert(1); opacity: .9;
}
.site-footer .brand__tag { color: rgba(251,247,240,.5); }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: center; justify-content: space-between;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.75rem;
  border-top: 1px solid rgba(251,247,240,.14);
  font-size: .82rem;
  color: rgba(251,247,240,.5);
}
.footer-bottom nav { display: flex; gap: 1.4rem; flex-wrap: wrap; }

/* --- 13. Reveal-Animationen --------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }

/* --- 14. Lightbox ------------------------------------------------------- */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(18,14,32,.93);
  backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden;
  transition: opacity .35s var(--ease), visibility .35s var(--ease);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__figure {
  margin: 0; display: flex; flex-direction: column;
  align-items: center; gap: 1rem;
  max-height: 100%;
}
.lightbox__img {
  max-width: min(92vw, 1000px);
  max-height: 78vh;
  width: auto; object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 30px 90px rgba(0,0,0,.6);
  transform: scale(.94);
  transition: transform .4s var(--ease);
}
.lightbox.is-open .lightbox__img { transform: scale(1); }
.lightbox__cap {
  color: rgba(251,247,240,.85);
  font-size: .92rem; text-align: center;
  max-width: 44rem;
}
.lightbox__btn {
  position: absolute;
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(251,247,240,.1);
  border: 1px solid rgba(251,247,240,.22);
  border-radius: 50%;
  color: var(--paper);
  cursor: pointer;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.lightbox__btn:hover { background: rgba(251,247,240,.22); transform: scale(1.06); }
.lightbox__btn svg { width: 22px; height: 22px; }
.lightbox__close { top: clamp(1rem,3vw,2rem); right: clamp(1rem,3vw,2rem); }
.lightbox__prev  { left: clamp(.5rem,2.5vw,2rem);  top: 50%; margin-top: -26px; }
.lightbox__next  { right: clamp(.5rem,2.5vw,2rem); top: 50%; margin-top: -26px; }

/* --- 15. Hilfsklassen --------------------------------------------------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  padding: .85rem 1.4rem;
  background: var(--ink); color: var(--paper);
  border-radius: 0 0 10px 0; text-decoration: none; font-weight: 600;
}
.skip-link:focus { left: 0; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.tag {
  display: inline-flex; align-items: center;
  padding: .32rem .78rem;
  font-size: .76rem; font-weight: 650;
  letter-spacing: .05em;
  border-radius: 100px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}
.media-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-l);
  background: var(--paper-deep);
}
.media-frame img { width: 100%; }
.media-frame--tilt { transform: rotate(-1.4deg); }

/* Durchgestrichenes Wort im Fließtext — für das Motto von 2022, auf dessen
   Plakat „must“ gestrichen und durch „can“ ersetzt wurde. */
.ms-gestrichen {
  text-decoration: line-through;
  text-decoration-thickness: .1em;
  color: var(--ink-faint);
}

/* Das Bild neben „Aus einer kleinen Gruppe" nimmt ein Viertel mehr Breite
   ein als die halbe Zeile: 62,5 statt 50 Prozent. Die Textspalte gibt sie ab,
   damit die Zeile nicht überläuft — Prozentbreiten plus Abstand sprengen
   sonst die 100 Prozent. Erst ab 1000px, darunter stehen beide untereinander. */
@media (min-width: 1000px) {
  .ms-spalte-bild { flex: 5 1 0; }
  .ms-spalte-text { flex: 3 1 0; }
}

/* Platzhalter-Markierung für noch zu redigierende Inhalte */
.tbd {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .12rem .5rem;
  border-radius: 5px;
  font-size: .85em; font-weight: 650;
  background: repeating-linear-gradient(45deg, rgba(242,149,59,.16) 0 7px, rgba(242,149,59,.05) 7px 14px);
  border: 1px dashed rgba(242,149,59,.55);
  color: #9A5511;
}

/* --- 16. Responsiv ------------------------------------------------------ */
@media (max-width: 1280px) {
  .nav__link { padding: .55rem .58rem; font-size: .9rem; }
}

/* Die vergrößerte Marke braucht mehr Platz — das Burger-Menü übernimmt
   deshalb früher als zuvor, damit die Navigation nie überläuft. */
@media (max-width: 1100px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed;
    inset: 0 0 auto;
    top: var(--header-h, 78px);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1rem var(--gutter) 2.25rem;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 50px rgba(30,24,54,.12);
    max-height: calc(100dvh - var(--header-h, 78px));
    overflow-y: auto;
    transform: translateY(-12px);
    opacity: 0; visibility: hidden;
    transition: transform .34s var(--ease), opacity .34s var(--ease), visibility .34s var(--ease);
  }
  .nav.is-open { transform: none; opacity: 1; visibility: visible; }
  .nav__link {
    padding: .95rem .25rem;
    font-size: 1.12rem;
    font-family: var(--font-display);
    font-weight: 600;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
  }
  .nav__link::after { display: none; }
  .nav__link[aria-current="page"] { padding-left: .8rem; border-left: 3px solid var(--accent); }
  body.nav-open { overflow: hidden; }
}

@media (max-width: 600px) {
  .gallery__item, .gallery__item--tall { flex-basis: 100%; }
  .btn-group .btn { flex: 1 1 100%; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* --- 17. Bewegung reduzieren -------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

@media print {
  .site-header, .site-footer, .nav-toggle, .lightbox { display: none !important; }
  body { background: #fff; }
}