/* ── Fonts: self-hosted (DSGVO: keine Google-Requests) ── */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: swap; /* sichtbarer Text zuerst — kein FOIT (Best Practice web.dev) */
  src: url("fonts/cormorant-garamond-italic-400.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap; /* sichtbarer Text zuerst — kein FOIT (Best Practice web.dev) */
  src: url("fonts/cormorant-garamond-normal-400.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap; /* sichtbarer Text zuerst — kein FOIT (Best Practice web.dev) */
  src: url("fonts/cormorant-garamond-normal-500.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap; /* sichtbarer Text zuerst — kein FOIT (Best Practice web.dev) */
  src: url("fonts/cormorant-garamond-normal-600.woff2") format("woff2");
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 300;
  font-display: swap; /* sichtbarer Text zuerst — kein FOIT (Best Practice web.dev) */
  src: url("fonts/jost-normal-300.woff2") format("woff2");
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 400;
  font-display: swap; /* sichtbarer Text zuerst — kein FOIT (Best Practice web.dev) */
  src: url("fonts/jost-normal-400.woff2") format("woff2");
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 500;
  font-display: swap; /* sichtbarer Text zuerst — kein FOIT (Best Practice web.dev) */
  src: url("fonts/jost-normal-500.woff2") format("woff2");
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 600;
  font-display: swap; /* sichtbarer Text zuerst — kein FOIT (Best Practice web.dev) */
  src: url("fonts/jost-normal-600.woff2") format("woff2");
}

/* ─────────────────────────────────────────────────────────────
   SunDowner / Soundspritzer — gemeinsame Site-Styles
   Geteilt zwischen index.html und partner.html.
   Seiten-spezifische Regeln (Offerings, Perks, …) stehen inline
   in den jeweiligen <style>-Blöcken.
   ───────────────────────────────────────────────────────────── */

html {
  scroll-behavior: smooth; /* sanftes Scrollen bei Ankern */
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; } /* kein Smooth-Scroll bei reduzierter Bewegung (WCAG 2.3.3) */
}

html, body {
  overflow-x: hidden; /* Sky/Track überlaufen bewusst — nie horizontal scrollen */
}

/* Thematische Textauswahl statt Browser-Blau */
::selection {
  background: rgba(232, 176, 75, .35);
  color: #fff8ea;
}

/* Dünne, thematische Scrollbar (WebKit) */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #221528; }
::-webkit-scrollbar-thumb {
  background: rgba(232, 176, 75, .3);
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(232, 176, 75, .5); }

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --dusk-top: #221528;
  --dusk-mid: #4d2334;
  --dusk-low: #8f3d28;
  --horizon: #e08a3c;
  --cream: #f7ead8;
  --cream-soft: rgba(247, 234, 216, .7); /* .7 statt .6: Support-CTA 3.9→4.7:1, Dusk-Low 3.3→3.9:1 (WCAG 1.4.3) */
  --gold: #e8b04b;
  --coral: #f2795c;
  --rose: #e05c74;
  --terracotta: #dd7a4a; /* Datumstrenner */
  --ink: #2b1a20;        /* dunkle Tinte für Text auf heller Horizontzone (Footer) */
  --hairline: rgba(247, 234, 216, .28);
}

body {
  font-family: "Jost", sans-serif;
  font-weight: 300;
  background:
    linear-gradient(to bottom,
      var(--dusk-top) 0%,
      var(--dusk-mid) 42%,
      var(--dusk-low) 74%,
      var(--horizon) 115%);
  color: var(--cream);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

/* ── lebendiger Abendhimmel ─────────────────── */
.sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.sky .glow {
  position: absolute;
  left: 50%; bottom: -22%;
  width: 130vw; height: 60vh;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center,
    rgba(240, 158, 66, .5), rgba(226, 112, 60, .22) 45%, transparent 70%);
  filter: blur(30px);
  animation: breathe 11s ease-in-out infinite;
}
.sky .cloud {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .35;
}
.sky .cloud.c1 {
  width: 55vw; height: 22vh;
  top: 26%; left: -12%;
  background: radial-gradient(ellipse, rgba(240, 170, 90, .5), transparent 70%);
  animation: drift1 46s ease-in-out infinite alternate;
}
.sky .cloud.c2 {
  width: 42vw; height: 18vh;
  top: 14%; right: -10%;
  background: radial-gradient(ellipse, rgba(224, 92, 116, .4), transparent 70%);
  animation: drift2 58s ease-in-out infinite alternate;
}
@keyframes breathe {
  0%, 100% { opacity: .75; transform: translateX(-50%) scaleY(1); }
  50%      { opacity: 1;   transform: translateX(-50%) scaleY(1.12); }
}
@keyframes drift1 {
  from { transform: translateX(0) translateY(0); }
  to   { transform: translateX(16vw) translateY(2vh); }
}
@keyframes drift2 {
  from { transform: translateX(0) translateY(0); }
  to   { transform: translateX(-14vw) translateY(3vh); }
}
@media (prefers-reduced-motion: reduce) {
  .sky .glow, .sky .cloud { animation: none; }
}

/* ── Grundgerüst Main ───────────────────────── */
main {
  position: relative; z-index: 2; /* über dem Footer (z-index 1): lässt das Teilen-Popover vor ihm aufklappen */
  flex: 1;
  text-align: center;
  animation: reveal .6s ease-out both;
}
@keyframes reveal {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { main { animation: none; } }

/* ── Kicker / H1 ────────────────────────────── */
.kicker {
  font-size: clamp(.7rem, 1.6vw, .8rem);
  letter-spacing: .55em;
  text-indent: .55em; /* optically center tracked caps */
  text-transform: uppercase;
  color: var(--gold);
}
h1 {
  font-family: "Cormorant Garamond", serif;
  color: var(--cream);
}
h1 em {
  font-style: italic;
  font-weight: 500;
  background: linear-gradient(100deg, var(--gold) 5%, var(--coral) 45%, var(--rose) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── classy button ──────────────────────────── */
.btn {
  display: inline-block;
  margin-top: 2rem;
  font-size: clamp(.68rem, 1.6vw, .78rem);
  letter-spacing: .32em;
  text-indent: .32em;
  text-transform: uppercase;
  color: var(--cream);
  text-decoration: none;
  padding: 1.15em 2.35em; /* ≈ 44px hoch — primäre CTAs (WCAG 2.5.5 Best Practice) */
  border: 1px solid var(--hairline);
  border-radius: 2px;
  background: rgba(247, 234, 216, .04);
  transition: border-color .3s ease, color .3s ease, background .3s ease, transform .3s ease;
}
.btn:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(232, 176, 75, .06);
  transform: translateY(-2px);
}
.btn:focus-visible,
.award:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Skip-Link: erster Tab-Stop, springt zu #main (WCAG 2.4.1 Bypass Blocks).
   Unsichtbar außerhalb des Viewports, bis er Tastatur-Fokus bekommt. */
/* Nur für Screenreader: Inhalt bleibt für assistive Technik lesbar
   (die Caption wird beim Teilen ausgelesen), ist aber nicht sichtbar.
   Wichtig: position:absolute statt display:none — display:none würde den
   Text auch aus dem A11y-Baum nehmen. clip-path statt overflow:hidden
   allein, weil „hidden" die height auf 0 kollabiert. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  top: .8rem; left: .8rem;
  z-index: 10;
  padding: .7em 1.4em;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--dusk-top);
  background: var(--gold);
  border-radius: 2px;
  box-shadow: 0 6px 24px rgba(34, 21, 40, .4);
  transform: translateY(calc(-100% - 1.6rem));
  transition: transform .2s ease;
}
.skip-link:focus-visible {
  transform: none;
  outline: 2px solid var(--cream);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } }



/* ═══════════════════════════════════════════════════════════════
   MODULE
   05 · Unterseiten-Shell („Unterstützen“ = partner.html)
   06 · „Unterstützen“: Perks, Paket-Karten, Fineprint
   07 · Startseite: Header-Link + Hero (Claim, Bar, Tabor, Sonne)
   08 · Startseite: Facts-Banner
   09 · Startseite: Offerings (Livemusik · Foodtruck · Spritzerbar)
   10 · Startseite: Logo-Wand „Unterstützer & Partner“
   11 · Startseite: About
   12 · Mobile (≤640px, Startseite)
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   05+06 · UNTERSTÜTZEN-SEITE (partner.html)
   ───────────────────────────────────────────────────────────── */

    /* ── seiten-spezifisch: Unterstützen (Sponsoren + Privat, gemerged) ── */
    main {
      max-width: 880px;
      width: 100%;
      margin: 0 auto;
      padding: clamp(3.5rem, 8vw, 6rem) clamp(1.5rem, 5vw, 4rem);
    }

    .page-main .kicker { margin-bottom: 1.4rem; }

    .page-main h1 {
      font-weight: 600;
      font-size: clamp(2.2rem, 6.5vw, 3.6rem);
      line-height: 1.1;
    }

    .rule {
      width: min(340px, 60vw);
      height: 1px;
      background: var(--hairline);
      margin: clamp(1.6rem, 4vw, 2.4rem) auto;
      position: relative;
    }
    .rule::after {
      content: "◆";
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -52%);
      font-size: .5rem;
      color: var(--gold);
      padding: 0 .9em;
    }

    p.lead {
      font-size: clamp(.95rem, 2.2vw, 1.08rem);
      line-height: 1.8;
      color: var(--cream-soft);
      max-width: 560px;
      margin: 0 auto;
    }

    /* ── Sektions-Labels ── */
    /* Sektions-Titel: groß & serif — Firmen- vs. Privat-Sektion klar unterscheidbar */
    /* Paket-Reihe: flexibel, zentriert, gleiche Kartenbreite —
       eine Leiter von „Freier Betrag“ bis „Exklusiv-Partner“, keine Firmen/Privat-Trennung */
    .packs {
      margin-top: 2.6rem; /* Luft unter Lead/Rule — Platz für den „Beliebt“-Badge (ragt -11px über) */
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: stretch;
      gap: 1.4rem;
      text-align: left;
    }
    .pack {
      position: relative;
      display: flex;
      flex-direction: column;
      width: min(252px, 100%);
      padding: clamp(1.6rem, 4vw, 2.2rem);
      background: rgba(247, 234, 216, .04);
      border: 1px solid var(--hairline);
      border-radius: 4px;
      transition: border-color .3s ease, transform .3s ease, background .3s ease;
    }
    .pack:hover {
      border-color: var(--gold);
      background: rgba(232, 176, 75, .05);
      transform: translateY(-2px);
    }
    .pack--top {
      border-color: rgba(232, 176, 75, .55);
      box-shadow: 0 0 0 1px rgba(232, 176, 75, .18), 0 10px 30px -12px rgba(0,0,0,.5);
    }
    .pack--top::before {
      content: "Beliebt";
      position: absolute;
      top: -11px; left: 1.4rem;
      font-size: .6rem;
      letter-spacing: .3em;
      text-indent: .3em;
      text-transform: uppercase;
      color: var(--dusk-top);
      background: var(--gold);
      padding: .35em 1em;
      border-radius: 2px;
    }
    .pack--premium {
      border-color: rgba(232, 176, 75, .5);
      background: rgba(232, 176, 75, .06);
    }
    .pack-name {
      font-family: "Cormorant Garamond", serif;
      font-size: clamp(1.3rem, 3vw, 1.6rem);
      font-weight: 600;
      color: var(--cream);
      line-height: 1.2; /* explizit — damit min-height exakt 2 Zeilen entspricht */
      min-height: 2.4em; /* 2-Zeilen-Reserve → Preise aller Karten auf einer Höhe */
    }
    .pack-price {
      margin-top: .2rem;
      font-size: clamp(1.1rem, 2.6vw, 1.3rem);
      letter-spacing: .08em;
      color: var(--gold);
    }
    .pack-desc {
      margin-top: 1rem;
      font-size: .9rem;
      line-height: 1.7;
      color: var(--cream-soft);
      flex: 1;
    }
    .pack ul {
      margin: 1.1rem 0 0;
      padding: 0;
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: .55rem;
    }
    .pack li {
      font-size: .86rem;
      line-height: 1.55;
      color: var(--cream-soft);
      display: flex;
      gap: .7rem;
      align-items: baseline;
    }
    .pack li::before {
      content: "◆";
      font-size: .45rem;
      color: var(--gold);
      flex-shrink: 0;
      transform: translateY(-1px);
    }
    .pack li b { font-weight: 400; color: var(--cream); }
    .pack .btn { margin-top: 1.8rem; text-align: center; }
    .btn--disabled {
      opacity: .45;
      pointer-events: none;
      cursor: not-allowed;
    }

    /* ── Impressum & Datenschutz (impressum.html) ── */
    .legal-block { max-width: 620px; margin: 0 auto; text-align: left; }
    .legal-title {
      font-family: "Cormorant Garamond", serif;
      font-style: italic;
      font-weight: 600;
      font-size: clamp(1.2rem, 2.6vw, 1.5rem);
      color: var(--cream);
      margin: 0 0 .9rem;
    }
    .legal-text {
      font-size: .9rem;
      line-height: 1.8;
      color: var(--cream-soft);
      margin: 0 0 1.1rem;
    }
    .legal-text b { font-weight: 400; color: var(--cream); }
    .legal-text a { color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(232,176,75,.4); }
    .legal-text a:hover { color: var(--cream); border-color: var(--cream); }
    .legal-text a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
    .legal-sub {
      font-family: "Jost", sans-serif;
      font-weight: 500;
      font-size: .78rem;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--gold);
      margin: 1.6rem 0 .6rem;
    }
    .legal-list {
      margin: 0 0 1.1rem;
      padding: 0;
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: .45rem;
    }
    .legal-list li {
      font-size: .9rem;
      line-height: 1.75;
      color: var(--cream-soft);
      display: flex;
      gap: .7rem;
      align-items: baseline;
    }
    .legal-list li::before {
      content: "◆";
      font-size: .45rem;
      color: var(--gold);
      flex-shrink: 0;
    }
    .legal-list li b { font-weight: 400; color: var(--cream); }

    .fineprint {
      margin-top: 2.6rem;
      font-size: .8rem;
      line-height: 1.8;
      color: var(--cream-soft);
      max-width: 560px;
      margin-left: auto;
      margin-right: auto;
    }
    .fineprint b { font-weight: 400; color: var(--cream); }
    .fineprint a {
      color: var(--gold);
      text-decoration: none;
      border-bottom: 1px solid rgba(232, 176, 75, .4);
      transition: color .25s ease, border-color .25s ease;
    }
    .fineprint a:hover { color: var(--cream); border-color: var(--cream); }
    .fineprint a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

    .back {
      display: inline-block;
      margin-top: 2.6rem;
      padding: .9em 0; /* Touch-Target ≥ 24px (WCAG 2.5.8) */
      font-size: .68rem;
      letter-spacing: .3em;
      text-indent: .3em;
      text-transform: uppercase;
      color: var(--cream-soft);
      text-decoration: none;
      border-bottom: 1px solid transparent;
      transition: color .3s ease, border-color .3s ease;
    }
    .back:hover { color: var(--gold); border-color: var(--gold); }
    /* Back-Link oben auf allen Unterseiten — immer derselbe erste Ausstieg */
    .back--top {
      display: block;
      width: fit-content;
      margin: 0 0 2.2rem;
      padding: .5em 0;
    }

    .subpage footer {
      color: rgba(247, 234, 216, .88); /* vorher cream-soft × opacity .75 = 3.5:1 (WCAG 1.4.3) — jetzt ≥ 5:1 */
    }

    /* Index: Footer sitzt auf der hellen Horizont-Zone — warmer Glow-Lift hebt den
       Hintergrund, sodass die solide Tinte ≥ 4.5:1 hält (gemessen 5.0–6.5:1, WCAG 1.4.3).
       Der Rampe startet erst 3rem unten → wirkt wie das nachleuchtende Horizontrauen. */
    .home .site-footer {
      background: linear-gradient(to bottom,
        rgba(238, 158, 84, 0),
        rgba(238, 158, 84, .38) 3rem,
        rgba(238, 158, 84, .52));
    }
  

/* ─────────────────────────────────────────────────────────────
   07–12 · STARTSEITE (index.html)
   Unterteilung über die ── Sektions-Marker ── im Block.
   ───────────────────────────────────────────────────────────── */

    /* Home-Shell: eigene Flex-Spalte, bewusst OHNE justify-content:center —
       die Seite ist länger als der Viewport; Center würde Überlauf nach OBEN
       verteilen, der nie scrollbar wäre („Rand verschluckt“). */
    .home-main {
      display: flex;
      flex-direction: column;
      align-items: center;
      /* KEIN justify-content: center — die Seite ist längler als der Viewport.
         Center würde Überlauf nach OBEN verteilen, der nie scrollbar wäre
         („Seite verschluckt den oberen Rand“). */
      /* Symmetrisch: das alte „rechts ohne Padding" klebte den Foto-Slider an
         die Kante und ließ die Seite links auseinandergezogen wirken. Beide
         Seiten gleich — der Inhalt sitzt mittig, wie der Rest der Seite. */
      padding: clamp(2rem, 6vw, 5rem) clamp(1.25rem, 3vw, 3rem);
      max-width: 100%;
      overflow-x: hidden; /* Death Defense gegen Mobile-Overflow */
    }
    /* ── Vertikaler Rhythmus ──
       Sektionen folgen einer steigenden Skala: oben kompakt, unten luftig.
       Sektions-Abstände (XXL): Titel→Divider→Datum→Offerings→Partners→Footer */

    /* ── Medienkit-Tag oben rechts — direkter Einstieg ins Material (Poster/Bilder/Embed) ── */
    /* Header-Zeile oben rechts: Medienkit + Teilen als Pill-Paar.
       Positionierung steuert der Container (früher .top-tag selbst). */
    .top-actions {
      position: absolute;
      top: clamp(1.25rem, 3vw, 2rem);
      right: clamp(1.25rem, 3vw, 3rem); /* spiegelbildlich zum linken Main-Padding */
      display: flex;
      gap: .55rem;
    }
    button.top-tag {
      font-family: inherit; /* Button-Font-Default (system-ui) ausgleichen */
      cursor: pointer;
    }
    /* Hover/Fokus-Tipp an den Share-Icons (Touch: kein Hover — dort bleibt
       der Aufruf weg, die native Sheet-Einladung trägt ihn nicht). Text über
       data-tip, verzögertes Einblenden gegen Flacker-Hostilität beim
       Drüberfahren. Spezialfall Topbar: Tooltip UNTERHALB des Knopfes, da
       oben der Viewport endet. */
    [data-tip] { position: relative; }
    [data-tip]::after {
      content: attr(data-tip);
      position: absolute;
      bottom: calc(100% + 10px);
      left: 50%;
      transform: translateX(-50%);
      width: max-content;
      max-width: 230px;
      padding: .5em .8em;
      background: var(--dusk-top);
      color: var(--cream);
      font-size: .72rem;
      line-height: 1.45;
      letter-spacing: .02em;
      text-transform: none;
      text-indent: 0;
      white-space: normal;
      border-radius: 6px;
      border: 1px solid rgba(247, 234, 216, .25);
      box-shadow: 0 8px 24px rgba(34, 21, 40, .45);
      opacity: 0;
      pointer-events: none;
      transition: opacity .2s ease .35s;
    }
    [data-tip]::before {
      content: "";
      position: absolute;
      bottom: calc(100% + 6px);
      left: 50%;
      transform: translateX(-50%) rotate(45deg);
      width: 8px;
      height: 8px;
      background: var(--dusk-top);
      border-right: 1px solid rgba(247, 234, 216, .25);
      border-bottom: 1px solid rgba(247, 234, 216, .25);
      opacity: 0;
      pointer-events: none;
      transition: opacity .2s ease .35s;
    }
    [data-tip]:hover::after, [data-tip]:focus-visible::after,
    [data-tip]:hover::before, [data-tip]:focus-visible::before { opacity: 1; }
    .top-share[data-tip]::after { bottom: auto; top: calc(100% + 10px); }
    .top-share[data-tip]::before { bottom: auto; top: calc(100% + 6px); transform: translateX(-50%) rotate(225deg); }

    /* Teilen-Icon-Knopf in der Topbar — gleiche Share-Grafik wie im Facts-Banner,
     Topbar-Farbwelt: Cream-Icon auf Dusk, Gold bei Hover/Fokus; nach dem
     Kopieren (ohne Web-Share-API) kurzer Gold-Flash via .copied (site.js). */
    .top-share {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: clamp(30px, 3.4vw, 36px);
      height: clamp(30px, 3.4vw, 36px);
      padding: 0;
      color: var(--cream);
      background: var(--dusk-top);
      border: 1px solid rgba(247, 234, 216, .45);
      border-radius: 50%;
      cursor: pointer;
      transition: color .25s ease, border-color .25s ease, background-color .25s ease;
    }
    .top-share svg { width: 15px; height: 15px; }
    .top-share:hover { color: var(--gold); border-color: var(--gold); }
    .top-share:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
    .top-share.copied { color: var(--ink); background: var(--gold); border-color: var(--gold); }
    .top-tag {
      display: inline-block;
      z-index: 5;
      display: inline-flex;
      align-items: center;
      padding: .55em 1.1em;
      font-size: clamp(.62rem, 1.3vw, .72rem);
      font-weight: 500;
      letter-spacing: .22em;
      text-indent: .22em;
      text-transform: uppercase;
      color: var(--cream);
      background: var(--dusk-top); /* solide statt transparent — Cream-auf-Dusk ≈ 13:1 */
      border: 1px solid rgba(247, 234, 216, .45);
      border-radius: 999px;
      text-decoration: none;
      box-shadow: 0 6px 18px rgba(34, 21, 40, .35);
      transition: color .25s ease, border-color .25s ease;
    }
    .top-tag:hover { color: var(--gold); border-color: var(--gold); }
    .top-tag:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

    /* ── Hero: 2 Spalten — links Marke+Claim, rechts Tabor+Sonne ── */
    .hero {
      display: grid;
      grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.3fr); /* Danke-Phase: der Foto-Slider ist das Bild — er führt, der Text stützt */
      align-items: center;
      gap: clamp(1rem, 2vw, 2rem); /* enger — mehr Breite fürs Motiv */
      width: 100%;
      max-width: none; /* füllt die ganze Breite — Motiv immer randnah rechts */
      padding: clamp(1.5rem, 3vw, 2.5rem) 0; /* vertikale Entfaltung des Heros */
    }
    .hero-left {
      text-align: center;
      position: relative;
      z-index: 2; /* Text VORNE — darf über das Tabor ragen */
    }
    /* Danke-Abschluss unter dem Claim: leise, sans, auf einem Blick lesbar —
       der Claim ist die Überschrift, das Danke der Nachsatz. */
    .hero-danke {
      margin-top: clamp(.7rem, 1.4vw, 1rem);
      font-size: clamp(.9rem, 1.9vw, 1.12rem);
      font-weight: 500;
      line-height: 1.3;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--cream-soft);
    }
    .hero-danke em {
      font-family: "Cormorant Garamond", serif;
      font-style: italic;
      font-weight: 600;
      font-size: 1.24em; /* „EUCH" etwas größer — es ist der wichtigste Satzteil */
      letter-spacing: .06em;
      background: linear-gradient(100deg, var(--gold) 5%, var(--coral) 45%, var(--rose) 90%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .brand-sub {
      margin-top: clamp(.8rem, 1.6vw, 1.2rem); /* Rhythmus M: Claim→Name, eng als Einheit */
      font-family: "Cormorant Garamond", serif;
      font-style: italic;
      font-weight: 500;
      font-size: clamp(1.35rem, 3vw, 1.9rem);
      line-height: 1.15; /* zweizeilig (schmale Spalte): enger, als Lockup-Einheit */
      letter-spacing: .04em;
      text-wrap: balance; /* schmale Hero-Spalte: keine Einzelwort-Witwe wie „…/Zweck“ */
      /* gleicher Sonnen-Gradient wie „Spritzer“ im Claim → eine Stimme, klar zugeordnet */
      background: linear-gradient(100deg, var(--gold) 5%, var(--coral) 45%, var(--rose) 90%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    /* Sub-Zeile: Pill ÜBER der Marke — Jost-Versalien, gleiche Stimme wie Facts-Banner */
    /* Datums-Badge (Danke-Phase): größer & höher — das Datum ist die
       Headline-Zeile über dem Sticker */
    .hero-sub.hero-sub--band {
      font-size: clamp(.88rem, 2vw, 1.15rem);
      padding: .7em 1.5em;
      margin-bottom: clamp(.8rem, 1.6vw, 1.2rem);
      display: inline-flex; /* Badge + Knopf als eine Box */
      align-items: center;
    }
    /* Teilen-Knopf IN der gelben DANKE-Box: Knopf als Kind des Badges
       (inline-flex, vertikal zentriert), 40px Klickfläche — groß genug für
       Touch, klein genug, dass das Badge als Ganzes liest. Die Box bekommt
       links ein little Innen-Padding, damit der Knopf nicht am Text klebt. */
    .hero-share {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      margin-left: .5rem;
      padding: 0;
      vertical-align: middle;
      color: var(--gold);
      background: var(--dusk-top);
      border: 0;
      border-radius: 50%;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(34, 21, 40, .4);
      transition: transform .2s ease, background .2s ease, color .2s ease;
    }
    .hero-share:hover { transform: scale(1.08); background: var(--gold); color: var(--dusk-top); }
    .hero-share:active { transform: scale(.96); }
    .hero-share:focus-visible { outline: 3px solid var(--cream); outline-offset: 2px; }
    /* Feedback-Zustände: copied (Erfolg) und failed (blockiert). failed
       ist rot + wackelt kurz — „nichts passiert" ist die schlechteste
       Antwort auf einen Klick, den der Nutzer gemacht hat. */
    .hero-share.copied { background: var(--cream); color: var(--dusk-top); }
    .hero-share.failed { background: #c1453a; color: var(--cream); animation: share-wobble .5s ease; }
    @keyframes share-wobble {
      0%, 100% { transform: translateX(0); }
      25% { transform: translateX(-4px); }
      75% { transform: translateX(4px); }
    }
    @media (prefers-reduced-motion: reduce) {
      .hero-share.failed { animation: none; }
    }
    .hero-share svg { width: 20px; height: 20px; }
    /* Countdown-Sticker ÜBER dem Datum — absolut über die Streifenkante,
       Banner-Höhe bleibt unangetastet (Anforderung). Drei Zustände (site.js):
       „Noch X Tage“ → „Heute!“ → weg (hidden, keine Lücke). Echo der Hero-Pills:
       Gold mit Tinte, Stempel-Optik. */
    .facts-facts .fact-col:first-child { position: relative; }
    .fact-count {
      position: absolute;
      bottom: calc(100% + .45rem);
      left: 0;
      width: fit-content;
      padding: .32em .75em;
      background: var(--gold);
      color: var(--ink);
      border-radius: 2px;
      font-size: clamp(.66rem, 1.3vw, .8rem);
      font-weight: 700;
      letter-spacing: .16em;
      text-indent: .16em;
      text-transform: uppercase;
      white-space: nowrap;
      transform: rotate(-1.2deg);
      box-shadow: 0 4px 14px rgba(34, 21, 40, .35);
    }
    .hero-sub {
      display: block;
      width: fit-content; /* Badges immer untereinander — nie nebeneinander */
      margin-left: auto;
      margin-right: auto;
      white-space: nowrap; /* eine Zeile — darf nach rechts ausstreuen */
      margin-bottom: clamp(.45rem, 1vw, .7rem); /* Rhythmus S: Bar→Marke, eng als Einheit */
      padding: .6em 1.2em;
      border: 2px solid var(--dusk-top); /* Tinten-Kontur wie die Sticker + LIVE-Stempel */
      border-radius: 2px; /* eckig, nur Kanten entscharts */
      font-size: clamp(.8rem, 1.8vw, .95rem); /* größer — Band-Pill darf auffallen (vorher .6–.7rem) */
      font-weight: 600;
      letter-spacing: .22em;
      text-indent: .22em;
      text-transform: uppercase;
      color: var(--dusk-top);
      background: var(--gold);
      box-shadow: 4px 4px 0 rgba(34, 21, 40, .85); /* harter Versatz-Schatten = Stempel-Look */
      transform: rotate(-1.2deg); /* leicht schräg — handgesetzt */
    }
    /* ── Hero rechts: Tabor-Gruppe ── */
    .hero-right {
      display: flex;
      justify-content: center;
      min-width: 0;
    }
    /* Danke-Phase: zurück zur Marken-Serif — „Danke für diesen Abend!“ ist
       ein Emotional-Moment, der Cormorant trägt (der Sans-Test galt der
       Veranstaltungs-Ansicht). em = Basis-Regel oben (Kursiv + Gradient). */
    .home-main h1 {
      font-family: "Cormorant Garamond", serif;
      font-weight: 600;
      font-size: clamp(3rem, 8vw, 6rem);
      line-height: 1.02;
      letter-spacing: .01em;
      text-shadow:
        0 0 30px rgba(232, 148, 58, .5),
        0 0 90px rgba(232, 148, 58, .3);
    }
    .home-main h1 .l1, .home-main h1 .l2, .home-main h1 .l3 {
      display: block;
      line-height: .88; /* enger gestapelt (vorher .96) — Zeile 1/2 ohne Descender, „p“ in Spritzer ist letzte Zeile */
    }
    .home-main h1 .l2 { white-space: nowrap; }
    /* ── Hero rechts: Best-of-Slider ──
       Nach dem Event ersetzt der Foto-Slider die Tabor-Illustration: die
       sechs stärksten Galeriefotos (scripts/gen-slider.mjs, liegt im Repo,
       weil die Galerie-Originale nach ~90 Tagen ablaufen) als Crossfade-
       Stapel mit Pfeilen, Dots und Zähler. Ohne JS stapeln sich die Fotos
       einfach untereinander (Progressive Enhancement, keine Bedienung). */
    .hero-slider {
      width: 100%;
      max-width: 820px; /* größer als der Textblock — der Slider ist das Bild der Seite */
      position: relative;
      z-index: 1;
    }
    .slider-frame { position: relative; }
    .slide { margin: 0; }
    .slide img {
      display: block;
      width: 100%;
      height: auto;
      border: 4px solid rgba(247, 234, 216, .9); /* Sticker-Rahmen */
      border-radius: 10px;
      background: var(--dusk-mid); /* Platzhalter während des Ladens */
      box-shadow: 0 18px 50px rgba(34, 21, 40, .55);
    }
    /* JS-Modus: Folien absolut im 16:9-Fenster, Crossfade */
    .slider--fade .slider-frame { aspect-ratio: 16 / 9; overflow: hidden; }
    .slider--fade .slide {
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity .9s ease;
    }
    .slider--fade .slide.is-active { opacity: 1; z-index: 1; }
    .slider--fade .slide img { height: 100%; object-fit: cover; }
    /* Pfeile + Dots + Zähler: nur im JS-Modus sichtbar (ohne JS sinnlos) */
    .slider-arrow, .slider-dots, .slider-count { display: none; }
    .slider--fade .slider-arrow {
      display: inline-flex;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 2;
      align-items: center;
      justify-content: center;
      width: 44px; /* Touch-Target (WCAG 2.5.5) */
      height: 44px;
      padding: 0;
      color: var(--cream);
      background: rgba(34, 21, 40, .55);
      border: 1px solid rgba(247, 234, 216, .4);
      border-radius: 50%;
      cursor: pointer;
      backdrop-filter: blur(3px);
      transition: color .25s ease, border-color .25s ease;
    }
    .slider--fade .slider-arrow:hover { color: var(--gold); border-color: var(--gold); }
    .slider--fade .slider-arrow:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
    .slider--fade .slider-arrow--prev { left: .8rem; }
    .slider--fade .slider-arrow--next { right: .8rem; }
    .slider-arrow svg { width: 20px; height: 20px; }
    .slider--fade .slider-dots {
      display: flex;
      justify-content: center;
      gap: .6rem;
      margin-top: .9rem;
    }
    .slider-dot {
      position: relative;
      width: 26px; /* Touch-Target, optisch nur der Punkt (→ ::after) */
      height: 26px;
      padding: 0;
      border: 0;
      background: transparent;
      cursor: pointer;
    }
    .slider-dot::after {
      content: "";
      position: absolute;
      left: 50%; top: 50%;
      width: 9px; height: 9px;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      border: 1px solid rgba(247, 234, 216, .65);
      transition: background .25s ease, border-color .25s ease;
    }
    .slider-dot[aria-current="true"]::after { background: var(--gold); border-color: var(--gold); }
    .slider-dot:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 50%; }
    .slider--fade .slider-count {
      display: block;
      position: absolute;
      right: 1rem; bottom: 1rem;
      z-index: 2;
      padding: .3em .75em;
      font-size: .66rem;
      font-weight: 600;
      letter-spacing: .18em;
      color: var(--cream);
      background: rgba(34, 21, 40, .55);
      border-radius: 2px;
      backdrop-filter: blur(3px);
    }
    .slider-hint {
      margin-top: .8rem;
      font-size: clamp(.72rem, 1.4vw, .82rem);
      letter-spacing: .06em;
      color: var(--cream-soft);
    }
    .slider-hint a { color: var(--gold); text-decoration: none; font-weight: 600; }
    .slider-hint a:hover, .slider-hint a:focus-visible { text-decoration: underline; }
    /* Hero-CTAs unter dem Claim: Primär-Button + flacher Upload-Link */
    .hero-cta {
      margin-top: clamp(1.2rem, 2.4vw, 1.8rem);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: .9rem;
    }
    .hero-cta .btn { margin-top: 0; } /* .btn bringt eigenes margin-top mit — hier Reihe */
    .hero-cta-sub {
      font-size: .78rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--cream-soft);
      text-decoration: none;
      border-bottom: 1px solid var(--hairline);
      padding-bottom: .25em;
      transition: color .25s ease, border-color .25s ease;
    }
    .hero-cta-sub:hover { color: var(--gold); border-color: var(--gold); }
    .hero-cta-sub:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
    @media (prefers-reduced-motion: reduce) {
      .slider--fade .slide { transition: none; }
    }

    /* Facts-Banner: durchgehender heller Balken unter dem Hero,
       edge-to-edge (Plakat-Streifen), Tinte auf Creme. Ersetzt die when-card. */
    .facts-banner {
      /* edge-to-edge, scrollbar-sicher: beidseitig negatives Margin um das main-Padding */
      width: calc(100% + 2 * clamp(2rem, 6vw, 5rem));
      margin-left: calc(clamp(2rem, 6vw, 5rem) * -1);
      margin-right: calc(clamp(2rem, 6vw, 5rem) * -1);
      margin-top: clamp(2rem, 4vw, 3rem); /* XXL 1: Hero→Facts — kompakt, damit Termin/Ort sofort im ersten Viewport sichtbar sind */
      /* links: Padding = negatives Margin (clamp(2rem,6vw,5rem)) → Facts-Text
         startet bündig mit der Hero-Headline (main-Padding clamp(1.25rem,3vw,3rem)) */
      padding: clamp(1.4rem, 2.8vw, 2rem) clamp(3rem, 8vw, 7rem) clamp(1.4rem, 2.8vw, 2rem) clamp(2rem, 6vw, 5rem);
      background: var(--cream);
      color: var(--ink);
      box-shadow: 0 10px 50px rgba(34, 21, 40, .45);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: clamp(1rem, 2.5vw, 1.75rem); /* Facts↔Teilen: enger gruppiert */
    }
    /* Spalte: Logos — Akwi/Joes überstehen die Oberkante, Reisinger darunter
       ragt passend unten heraus.
       align-self: flex-start statt Mittig-Zentrierung → die negativen Margins
       wirken 1:1, die Flex-Zentrierung verteilt den Überstand nicht mehr um
       (früher: unten nur 6px sichtbar, obwohl −2.4rem gesetzt war). */
    .facts-logos {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: .15rem;
      align-self: flex-start;
      /* Logos ragen 20px über die Oberkante: Banner-Padding + fixer Überstand */
      margin-top: calc(-1 * (clamp(1.4rem, 2.8vw, 2rem) + 20px));
    }
    .facts-logo-row--reisinger {
      margin-top: 2rem; /* treibt den unteren Überstand — wächst mit, seit die Facts größer sind (Banner höher) */
      margin-bottom: -3.5rem; /* hält die Spalte layoutschmal (unter Fakten-Höhe), damit der Streifen nicht mitwächst — Überschuss wirkt sich nicht aus */
    }
    .facts-logo-row {
      display: flex;
      align-items: center;
      gap: 1rem;
    }
    .facts-logo-row a { display: inline-flex; transition: transform .25s ease; }
    .facts-logo-row a:hover { transform: translateY(-2px); }
    .facts-logo-row img[src*="akwi"] { height: clamp(64px, 8vw, 88px); width: auto; border-radius: 6px; }
    .facts-logo-row img[src*="joes"] { height: clamp(64px, 8vw, 88px); width: auto; }
    .facts-logo-row img[src*="reisinger"] { height: clamp(52px, 6.5vw, 72px); width: auto; border-radius: 6px; } /* gleiche Rundung wie AKWI-Kachel */
    .facts-logo-row a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
    /* Teilen-Icon in der Leiste — erster Teilen-Einstieg im ersten Viewport.
       margin-right:auto rückt es nahe an die Facts (Gruppe links), Logos rechts */
    .facts-share {
      flex: 0 0 auto;
      margin-right: auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 44px; /* Touch-Target (WCAG 2.5.5), wirkt durch Icon klein */
      height: 44px;
      padding: 0;
      color: var(--ink);
      background: transparent;
      border: 1px solid rgba(34, 21, 40, .35);
      border-radius: 50%;
      cursor: pointer;
      transition: color .25s ease, background-color .25s ease, border-color .25s ease;
    }
    .facts-share svg { width: 18px; height: 18px; }
    .facts-share:hover { color: var(--cream); background: var(--ink); border-color: var(--ink); }
    .facts-share:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
    .facts-share.copied { color: var(--ink); background: var(--gold); border-color: var(--gold); }

    /* Tabor-Krake im weißen Band (Danke-Phase): sie füllt die Lücke zwischen
       Teilen-Knopf und Sponsoren-Logos. `order` schiebt sie in die Mitte,
       ohne das Markup umzubauen. Bewusst ohne Filter/Glow — auf hellem
       Grund muss das Motiv nicht erst sichtbar gemacht werden. */
    .facts-tabor {
      order: 1; /* zwischen facts-share (order 0 per Markup) und facts-logos (order 2) */
      flex: none;
      /* Höhe = die volle Logo-Spalte (zwei Reihen übereinander, von der
         Band-Innenkante gemessen), damit Krake und Logos dieselbe
         Ober- und Unterkante haben. align-items: center im Banner
         zentriert sie; `position: relative` erlaubt die Feinjustierung,
         falls die Abstände im Banner je nach Logo-Zahl kippen. */
      width: auto;
      /* Höhe = die Logo-Spalte (zwei Reihen à 88px + 12px Gap = 195px bei
         1280er Viewport). Bewusst als eigener Wert: das Band ist eine
         Flex-Zeile, %-Höhen lösen hier auf die Bildhöhe auf. Skaliert über
         --facts-mark-h, das die Mobile-Regel unten überschreibt. */
      height: var(--facts-mark-h, 195px);
      object-fit: contain;
      align-self: flex-start;      /* wie .facts-logos — sonst hängt sie zentriert statt an der Logo-Oberkante */
      margin-top: calc(-1 * (clamp(1.4rem, 2.8vw, 2rem) + 20px)); /* gleicher Überstand oben wie die Logos */
      /* Unten gleicher Überstand, damit das Band NICHT um die Krake wächst:
         ohne das blieben unter ihr ~57px tote Fläche (gemessen). */
      margin-bottom: calc(-1 * (clamp(1.4rem, 2.8vw, 2rem) + 20px));
      opacity: .9;
      pointer-events: none;
      user-select: none;
    }
    .facts-share { order: 0; }
    .facts-logos { order: 2; }

    /* Facts-Band (Danke-Phase): der helle Balken trägt jetzt den DANK.
       Termin/Ort bleiben drin — aus Referenzgründen (der Abend ist das
       Ereignis, die Seite ist das Gedächtnis) — aber deutlich kleiner und
       zurückhaltender als der Danke-Satz, der jetzt führt. */
    /* Termin = reine Referenz, nicht Plakat: eine einzige schmale Zeile,
       bewusst NICHT die ehemalige zweizeilige Haupt-Information. */
    .fact-thanks {
      font-size: clamp(.78rem, 1.4vw, .95rem);
      line-height: 1.2;
      font-weight: 600;
      letter-spacing: .22em;
      text-transform: uppercase;
      /* Umbruch ist erlaubt (kein nowrap), aber nur wenn die Zeile es
         wirklich braucht: max-width so hoch, dass der Termin auf Desktop
         EINE Zeile bleibt und erst schmal umbricht. */
      max-width: 32ch;
      text-wrap: pretty;
    }
    .fact-col--thanks { text-align: left; }
    .fact-col--thanks .fact-sub {
      display: none; /* einzeilig: Ort steckt bereits in der Zeile darüber */
    }

    /* Spalten 2+3: Facts zweireihig — Hauptzeile + Sub-Zeile */
    /* Datum+Ort gehören als EIN Fakten-Paar zusammen → gruppiert, enger Gap */
    .facts-facts {
      display: flex;
      align-items: center;
      gap: clamp(1.4rem, 3.4vw, 2.6rem);
    }
    .fact-col {
      display: flex;
      flex-direction: column;
      gap: .05rem; /* Zeilenabstand Datum↔Uhr — zweimal entschärft (.25→.12→.05) */
      text-align: left;
    }
    .fact-main {
      line-height: 1.12; /* enge Zeilen — der Streifen soll plakathaft dicht wirken */
      font-weight: 600;
      font-size: clamp(1.55rem, 3.6vw, 2.5rem); /* Plakat-Rang: Wann/Wo ist die Kerninfo — groß, wie ein Plakatstreifen */
      letter-spacing: .12em;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .fact-sub {
      line-height: 1.2;
      font-size: clamp(.85rem, 1.8vw, 1.05rem);
      font-weight: 500;
      letter-spacing: .24em;
      text-transform: uppercase;
      color: var(--ink);
    }
    /* Termin klein und leise — Referenz, nicht Plakat (Danke führt).
       MUSS nach .fact-main/.fact-sub stehen: gleiche Spezifität,
       deshalb gewinnt die spätere Regel. */
    .fact-main--small {
      font-size: clamp(.8rem, 1.45vw, .95rem);
      font-weight: 600;
      letter-spacing: .2em;
      white-space: nowrap;
    }
    .fact-sub--small {
      font-size: clamp(.66rem, 1.15vw, .78rem);
      letter-spacing: .18em;
    }
    /* Nutzungs-Hinweis unterm Facts-Banner (facts.mjs → charityHead/charity):
       „Feiern für den guten Zweck — Einnahmen gehen an den Elternverein HAK“.
       Linksbündig zu den Facts, max-width skaliert mit: Bei schmalen
       Viewports bricht die Zeile früh auf zwei Zeilen, BEVOR sie in den
       Reisinger-Überstand läuft (Logos ragen rechts ~3.5rem unter den
       Streifen). Cormorant-Kursiv wie brand-sub — leise Stimme, Gold-Vorspann
       im Sonnen-Gradient des Claims. */
    /* Hochgestelltes Referenzzeichen (*) an „guten Zweck“ (Hero) und
       Elternverein-Zeile (unterm Banner) — Fußnoten-Paar: oben * verweist auf
       die Zeile unten (#zweck-Sprung), unten * zurück nach oben. Gold,
       Serifen-Kursiv, dezent. */
    .info-i {
      display: inline; /* inline-block bricht vertical-align:super des <sup> */
      margin-left: .18em;
      text-decoration: none;
      color: var(--gold);
      line-height: 1;
      transition: color .25s ease;
    }
    .info-i sup {
      font-family: "Cormorant Garamond", serif;
      font-style: italic;
      font-weight: 600;
      font-size: .58em;
      vertical-align: super;
      line-height: 0;
      letter-spacing: 0;
      text-indent: 0;
    }
    .info-i:hover, .info-i:focus-visible { color: var(--coral); }
    .info-i:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 2px; }
    /* Charity-Zeile unterm Facts-Banner (facts.mjs → charity):
       „50% der Einnahmen gehen an den Elternverein HAK“ — links im Korridor
       zwischen Streifenrand und dem Reisinger-Überstand (Logos ragen rechts
       ~3.5rem unter den Streifen). align-self:stretch löst das Shrink-to-Fit
       von home-main (Flex+align-center) auf, negatives Margin hebt das
       main-Padding auf, kleiner Inset hält ~12px Luft zum Rand.
       Cormorant-Kursiv wie brand-sub — leise Stimme in Cream.
       (Achtung Kommentar-Kopplung: Der Opener /* dieser Regel wurde einmal
       versehentlich überschrieben — der Parser schluckte dann die komplette
       Regel. Kommentar-Blöcke vor Regeln immer GANZ lesen vor Selector-Edits.) */
    .charity-note {
      scroll-margin-top: 1.5rem; /* Ankersprung #zweck landet mit Luft */
      align-self: stretch;
      text-align: left;
      margin: clamp(.35rem, .7vw, .55rem) 0 0;
      margin-left: calc(-1 * clamp(1.25rem, 3vw, 3rem) + .75rem);
      max-width: min(70vw, 900px);
      font-family: "Cormorant Garamond", serif;
      font-style: italic;
      font-weight: 500;
      font-size: clamp(.95rem, 1.8vw, 1.18rem);
      letter-spacing: .02em;
      color: var(--cream);
    }
    /* About: Schülertext gerahmt von zwei Hairlines — Rhythmus XXL 2 nach dem Facts-Banner */
    .about {
      margin: clamp(5.5rem, 11vw, 8.5rem) auto 0; /* mehr Luft zur About-Sektion */
      width: min(920px, 100%); /* breiter: füllt den Hero-Bereich, nicht Miniteilung */
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .about-icon {
      display: block;
      width: clamp(110px, 14vw, 189px); /* +50%: 189px auf Desktop */
      height: auto;
      margin: clamp(1.2rem, 2.5vw, 1.8rem) auto clamp(.6rem, 1.5vw, 1rem);
      filter: drop-shadow(0 4px 14px rgba(34, 21, 40, .3));
    }
    .about-title {
      margin: 0 0 clamp(.4rem, 1.5vw, .8rem);
      font-family: "Cormorant Garamond", serif;
      font-style: italic;
      font-weight: 600;
      font-size: clamp(1.6rem, 3.6vw, 2.2rem);
      color: var(--gold); /* gleiche Stimme wie die Offerings-Headings */
    }
    /* Namen vertikal ausgeschrieben — LAJ stark (erster Buchstabe je Name), Rest schwächer */
    /* LAJ-Stempel + Namen nebeneinander: als <crew-stamp names row> gekapselt */
    .about .about-crew {
      display: block;
      margin: clamp(1.2rem, 2.4vw, 1.8rem) auto 0;
      text-align: center;
    }
    .about-text {
      max-width: 62ch; /* Lesbarkeit: 45–75 Zeichen pro Zeile */
      margin-left: auto;
      margin-right: auto;
      padding: clamp(1.6rem, 3.5vw, 2.4rem) clamp(.5rem, 2vw, 1.5rem);
      font-family: "Cormorant Garamond", serif;
      font-style: italic;
      font-size: clamp(1.05rem, 2.4vw, 1.35rem);
      line-height: 1.75;
      color: var(--cream);
    }
    .about-text a {
      color: var(--gold);
      text-decoration: none;
      border-bottom: 1px solid rgba(232, 176, 75, .4);
      transition: color .25s ease, border-color .25s ease;
    }
    .about-text a:hover { color: var(--cream); border-color: var(--cream); }
    .about-text a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }
    .about-text--sub {
      padding-top: 0;
      font-size: clamp(.95rem, 2vw, 1.15rem);
      line-height: 1.8;
      color: var(--cream-soft);
    }
    .about-text--sub em {
      font-style: italic;
      color: var(--gold);
    }

    .offerings {
      margin-top: clamp(5.5rem, 11vw, 8.5rem); /* XXL 3: Facts→Offerings — mehr Luft */
      display: flex;
      align-items: stretch;
      justify-content: center;
      gap: clamp(1.8rem, 5vw, 3.8rem);
    }
    .offering {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: .3rem;
      text-align: center;
    }
    .offering--live { position: relative; /* Anker für den Live-Stempel */ }
    /* LIVE-Stempel: Mega-Feature — aufgeklebter Badge mit Tinten-Kontur + Puls */
    .live-badge {
      position: absolute;
      top: clamp(-1.1rem, -2vw, -.55rem);
      right: clamp(-1.6rem, -2.5vw, -.9rem);
      z-index: 2;
      padding: .5em 1.1em;
      background: var(--gold);
      color: var(--dusk-top);
      font-size: clamp(.6rem, 1.4vw, .74rem);
      font-weight: 500;
      letter-spacing: .3em;
      text-indent: .3em;
      text-transform: uppercase;
      border: 2px solid var(--dusk-top); /* Tinten-Kontur wie die Sticker */
      border-radius: 3px;
      transform: rotate(-8deg); /* Stempel-Kippe */
      box-shadow: 0 3px 14px rgba(34, 21, 40, .4); /* statisch — kein Blinken */
    }
    /* Icon-Slot: feste Höhe (= XL-Gitarre), Icons mittig zentriert → alle drei
       sitzen auf einer optischen Linie; Headings starten dennoch exakt gleich */
    .icon-slot {
      height: clamp(110px, 19vw, 165px);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: .4rem;
    }
    .offering .icon {
      height: clamp(92px, 15.5vw, 138px); /* einheitliche Icon-Höhe, Breite folgt dem Motiv */
      width: auto;
      filter: drop-shadow(0 0 14px rgba(232, 176, 75, .18));
    }
    .offering .icon--xl {
      height: 100%; /* füllt den Slot — Musik ist das Mega-Feature (LIVE-Stempel) */
    }
    .offering .icon--sm {
      height: clamp(80px, 13vw, 120px); /* Glas dezenter — weniger Real Estate als Pizza */
    }
    .offering .what {
      font-family: "Jost", sans-serif;
      font-weight: 600;
      font-size: clamp(1.5rem, 4vw, 2.3rem); /* prägnanter: größere Offerings-Headings */
      color: var(--gold);
    }
    .offering .what a {
      color: var(--gold);
      text-decoration: none;
      transition: color .25s ease;
      padding: .7em 0; /* Inline-Link: Hit-Area ≥ 24px ohne Layout-Shift (WCAG 2.5.8) */
    }
    .offering .what a:hover { color: var(--cream); }
    .offering .what a:focus-visible {
      outline: 2px solid var(--gold);
      outline-offset: 3px;
      border-radius: 2px;
    }
    .offering .who {
      font-size: clamp(.9rem, 2vw, 1.1rem); /* größer + lesbarer als vorher (.7–.8rem) */
      letter-spacing: .22em; /* etwas enger — bei größerer Schrift sonst zu breit */
      text-transform: uppercase;
      color: var(--cream-soft);
    }
    .award {
      /* gleicher Style wie .who (& Drinks) — gesperrte Sans statt Serif-Kursiv */
      font-size: clamp(.9rem, 2vw, 1.1rem);
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--cream-soft);
      text-decoration: none;
      transition: color .25s ease;
      /* Touch-Target ≥ 44px ohne Layout-Shift (A11y hit targets) */
      padding: .45em .8em;
      margin: -.35em -.8em 0;
    }
    .award:hover { color: var(--cream); }

    .partners {
      margin-top: clamp(6.5rem, 12.5vw, 10rem); /* XXL 4: Offerings→Logo-Wand — mehr Luft */
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1.2rem;
    }
    .partners-sub {
      font-size: clamp(.6rem, 1.4vw, .68rem);
      letter-spacing: .3em;
      text-transform: uppercase;
      color: var(--cream-soft);
    }
    .offering .who a {
      color: var(--gold);
      text-decoration: none;
      transition: color .25s ease;
      padding: .7em 0; /* Inline-Link: Hit-Area ≥ 24px ohne Layout-Shift (WCAG 2.5.8) */
    }
    .offering .who a:hover { color: var(--cream); }
    .offering .who a:focus-visible {
      outline: 2px solid var(--gold);
      outline-offset: 3px;
      border-radius: 2px;
    }

    .divider {
      width: 1px;
      background: var(--hairline);
    }

    /* ── Sponsoren & Partner: einheitliche Karten (Logo-Slot + Name + Rolle) ── */
    .sponsor-track {
      position: relative; z-index: 1;
      margin-top: clamp(2.6rem, 5vw, 4rem); /* M: Label→Cards — mehr Luft */
      width: 100%;
      display: flex;
      justify-content: center;
    }
    .sponsor-run {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: clamp(.6rem, 1.5vw, 1.2rem);
      width: 100%;
    }
    /* Drei getrennte Segmente nach Tier (Gold/Medium/Small). Jedes Segment
       füllt die volle Breite; Logos wachsen per flex-grow, erst dann umbrechen */
    .sponsor-group {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      column-gap: clamp(1rem, 2.6vw, 1.8rem);
      row-gap: clamp(.8rem, 1.6vw, 1.2rem);
      width: 100%;
    }
    .sponsor-group--gold {
      /* Gold ggf. mit dezenter Abtrennung */
      padding-bottom: clamp(.2rem, .6vw, .6rem);
    }
    /* Logo-Wand: Segmente nach Tier (Gold/Medium/Small). JS setzt je Logo
       Breite/Höhe inline für Realestate ∝ Sponsorbetrag — bewusst ohne
       Reihen-Streckung, damit Größen fair bleiben. */
    .sponsor-card {
      display: flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      padding: 0;
      transition: opacity .25s ease, transform .25s ease;
    }
    .sponsor-card:hover {
      opacity: .8;
      transform: translateY(-2px);
    }
    .sponsor-card:focus-visible {
      outline: 2px solid var(--gold);
      outline-offset: 4px;
      border-radius: 2px;
    }
    /* Freie Größe; JS setzt width/height inline für Flächen-Konstanz */
    .sponsor-logo {
      width: auto;
      height: auto;
    }
    /* Kachel je Logo (Sheet-Spalte „Hintergrund“, Default hellgrau) — dezentes
       Polster, damit das Logo nicht randlos aufliegt */
    .sponsor-card--tile {
      border-radius: clamp(.35rem, .8vw, .6rem);
      padding: clamp(.5rem, .9vw, .9rem);
    }
    /* Logo oben, Etikett(en) darunter (Name2 = Rolle, optional Typ) */
    .sponsor-card--typed {
      flex-direction: column;
      gap: clamp(.3rem, .6vw, .5rem);
    }
    .sponsor-role,
    .sponsor-type {
      font-size: clamp(.5rem, .85vw, .62rem);
      letter-spacing: .22em;
      text-transform: uppercase;
      color: rgba(43, 26, 32, .72); /* dunkle Tinte auf hellen Kacheln */
      text-align: center;
    }
    .sponsor-role {
      line-height: 1.5;
      max-width: 12em;
      overflow-wrap: anywhere; /* lange Einzelwörter (z. B. Malermeisterbetrieb) umbrechen */
    }
    .sponsor-type {
      white-space: nowrap;
    }
    /* Dunkle Kacheln (z. B. bg=black): Etiketten in heller Komplementärfarbe */
    .sponsor-card--dark .sponsor-role,
    .sponsor-card--dark .sponsor-type {
      color: var(--cream);
    }
    .sponsor-card--tile.sponsor-card--typed .sponsor-type {
      color: var(--ink);
    }

        /* CTA unter der Reihe — Funnel zur Unterstützen-Seite */
    .support-cta {
      display: inline-block;
      margin-top: clamp(1.4rem, 3vw, 2rem);
      padding: .55rem 0; /* Touch-Target ≥ 24px (WCAG 2.5.8) */
      font-size: clamp(.62rem, 1.2vw, .72rem);
      letter-spacing: .3em;
      text-indent: .3em;
      text-transform: uppercase;
      color: var(--cream-soft);
      text-decoration: none;
      border-bottom: 1px solid transparent;
      transition: color .3s ease, border-color .3s ease;
    }
    .support-cta:hover { color: var(--gold); border-color: var(--gold); }
    .support-cta:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 2px; }

    /* ── Share: native sheet first (mobil), Links/Copy als Fallback (desktop) ──
       Keine SDK-Buttons: reine Links = kein Tracking, keine Consent-Pflicht.
       Touch-Targets ≥ 44px (WCAG 2.5.5), sichtbarer Fokus (2.4.13). */
    .share {
      margin: clamp(2.2rem, 5vw, 3.2rem) auto 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: .9rem;
    }
    .share-label {
      font-size: clamp(.6rem, 1.4vw, .68rem);
      letter-spacing: .3em;
      text-indent: .3em;
      text-transform: uppercase;
      color: var(--cream-soft);
    }
    .share-row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: .6rem;
    }
    .share-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px; /* WCAG 2.5.5 */
      padding: 0 1.3em;
      font-size: clamp(.62rem, 1.2vw, .72rem);
      letter-spacing: .28em;
      text-indent: .28em;
      text-transform: uppercase;
      font-weight: 500;
      color: var(--cream-soft);
      background: transparent;
      border: 1px solid var(--hairline);
      border-radius: 2px;
      cursor: pointer;
      text-decoration: none;
      transition: color .25s ease, border-color .25s ease; /* 200–300ms ease-out */
    }
    .share-btn:hover { color: var(--gold); border-color: var(--gold); }
    .share-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
    .share-btn[hidden] { display: none !important; } /* display:inline-flex würde [hidden] sonst übersteuern */
    /* Primär: Gold-Sticker wie die Hero-Bars — der eine hervorgehobene Weg */
    .share-btn--primary {
      color: var(--dusk-top);
      background: var(--gold);
      border-color: var(--dusk-top);
      font-weight: 600;
      box-shadow: 3px 3px 0 rgba(34, 21, 40, .85);
      transform: rotate(-1.2deg);
    }
    .share-btn--primary:hover { color: var(--dusk-top); background: var(--cream); border-color: var(--dusk-top); }
    /* Sekundäre Ziele als Text-Micro-Links — schmal statt Icon-Wand */
    .share-via {
      font-size: clamp(.6rem, 1.2vw, .68rem);
      letter-spacing: .18em;
      color: var(--cream-soft);
    }
    .share-via a {
      color: var(--cream);
      text-decoration: none;
      padding: .7em .35em; /* Hit-Area hoch, WCAG 2.5.8 */
      transition: color .25s ease;
    }
    .share-via a:hover { color: var(--gold); }
    .share-via a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 2px; }
    .share-via a + a::before { content: "·"; margin-right: .7em; color: var(--cream-soft); }

    /* Aufklapp-Menü hinter dem Teilen-Button (Disclosure-Pattern, site.js):
       alle Ziele an einem Ort statt Link-Zeilen — schließt bei Klick
       außerhalb / Escape / Menü-Link. */
    /* Zwei Aktionen nebeneinander: „Teilen …" (direkt, wie die Icons oben)
       und „Mehr Wege …" (öffnet das Menü). Beide gleich gewichtet, das
       Menü hängt am zweiten — deshalb liegt es im Wrapper, nicht am
       einzelnen Button. */
    .share-wrap {
      position: relative;
      display: inline-flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: .7rem;
    }
    .share-menu {
      position: absolute;
      bottom: calc(100% + .55rem); /* klappt ÜBER dem Button auf: der sitzt am Seitenende — nach unten läge das Menü im Footer/hinter dem Seitenende */
      left: 50%;
      transform: translateX(-50%);
      z-index: 40;
      display: grid;
      min-width: 16rem;
      max-width: min(20rem, 84vw);
      padding: .4rem;
      background: var(--dusk-mid);
      border: 1px solid var(--hairline);
      border-radius: 10px;
      box-shadow: 0 18px 44px rgba(34, 21, 40, .6);
      animation: share-menu-in .18s ease-out;
    }
    @keyframes share-menu-in {
      from { opacity: 0; transform: translate(-50%, 6px); } /* startet 6px tiefer, gleitet nach oben */
    }
    .share-menu[hidden] { display: none; } /* display:grid würde [hidden] sonst übersteuern */
    .share-menu__item {
      display: flex;
      align-items: center;
      min-height: 44px; /* Touch-Targets wie .share-btn (WCAG 2.5.5) */
      padding: 0 .85rem;
      font-size: .78rem;
      letter-spacing: .12em;
      color: var(--cream);
      text-align: left;
      text-decoration: none;
      background: none;
      border: 0;
      border-radius: 6px;
      cursor: pointer;
      width: 100%;
      transition: background-color .2s ease, color .2s ease;
    }
    .share-menu__item:hover { background: rgba(247, 234, 216, .08); color: var(--gold); }
    .share-menu__item:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
    .share-menu__item--gold { color: var(--gold); font-weight: 600; } /* Web Share, nativer Dialog */
    .share-menu__item--more { color: var(--cream-soft); }
    .share-menu__sep {
      height: 1px;
      margin: .3rem .5rem;
      background: var(--hairline);
    }

    /* ── Embed-Box (partner.html): Vorschau + Codebox + Copy ── */
    .embed-box {
      margin: clamp(3rem, 7vw, 5rem) auto 0;
      padding: clamp(1.4rem, 4vw, 2.4rem);
      max-width: 720px;
      display: flex; flex-direction: column; align-items: center; gap: .9rem;
      text-align: center;
      border: 1px solid var(--hairline); border-radius: 10px;
      background: rgba(34, 21, 40, .35);
    }
    .embed-title {
      font-family: "Cormorant Garamond", Georgia, serif;
      font-style: italic; font-weight: 500;
      font-size: clamp(1.5rem, 4vw, 2rem);
      color: var(--cream);
    }
    .embed-hint { font-size: .82rem; line-height: 1.65; color: var(--cream-soft); max-width: 46ch; }
    .embed-preview {
      border: 0; border-radius: 10px;
      box-shadow: 0 14px 44px rgba(34, 21, 40, .55);
      max-width: 100%;
    }
    .embed-codelabel {
      font-size: .6rem; font-weight: 600; letter-spacing: .28em; text-indent: .28em;
      text-transform: uppercase; color: var(--cream-soft); margin-top: .4rem;
    }
    .embed-code {
      width: 100%; max-width: 560px;
      padding: .8rem 1rem; border-radius: 6px;
      background: rgba(34, 21, 40, .65);
      color: var(--cream); border: 1px solid var(--hairline);
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: .72rem; line-height: 1.6; word-break: break-all;
      resize: none;
    }
    .embed-code:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

    /* ── Share-Kit (/share): Assets zum Mitnehmen ── */
    .kit-intro {
      max-width: 52ch; margin: .4rem auto 0; text-align: center;
      color: var(--cream-soft); line-height: 1.7;
    }
    .kit-block {
      margin: clamp(2.4rem, 6vw, 4rem) auto 0;
      padding-top: clamp(1.6rem, 4vw, 2.6rem);
      border-top: 1px solid var(--hairline);
      max-width: 860px;
      display: flex; flex-direction: column; align-items: center; gap: .9rem;
    }
    .kit-title {
      font-family: "Cormorant Garamond", Georgia, serif;
      font-style: italic; font-weight: 500;
      font-size: clamp(1.6rem, 4.5vw, 2.2rem);
      color: var(--cream);
    }
    .kit-hint { max-width: 56ch; text-align: center; font-size: .85rem; line-height: 1.7; color: var(--cream-soft); }
    .kit-hint a { color: var(--gold); text-decoration: none; }
    .kit-hint a:hover { text-decoration: underline; }
    /* Gruppenlabel in Block 2 — Herkunft der Bilder (Website vs. Poster) */
    .kit-group {
      margin: 1.6rem 0 .3rem;
      text-align: center;
      font-size: .66rem;
      font-weight: 600;
      letter-spacing: .22em;
      text-indent: .22em;
      text-transform: uppercase;
      color: var(--cream-soft);
    }
    .kit-block .kit-group:first-of-type { margin-top: .2rem; }
    .kit-thumb-row {
      display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 1.4rem;
      margin-top: .4rem;
    }
    .kit-thumb {
      display: flex; flex-direction: column; gap: .55rem;
      text-decoration: none;
    }
    /* Einheitliche Bildhöhe je Reihe — ruhige Linie statt Bildermauer */
    .kit-thumb img {
      height: 170px; width: auto; max-width: 100%; display: block; margin: 0 auto;
      border-radius: 8px;
      box-shadow: 0 10px 30px rgba(34, 21, 40, .5);
      transition: transform .25s ease; /* 200–300ms ease-out */
    }
    .kit-thumb--sm img { height: 132px; }
    .kit-thumb:hover img, .kit-thumb:focus-visible img { transform: translateY(-4px) rotate(-.5deg); }
    .kit-thumb:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 8px; }
    .kit-thumb span {
      font-size: .62rem; font-weight: 600; letter-spacing: .22em; text-indent: .22em;
      text-transform: uppercase; color: var(--cream-soft); text-align: center;
      transition: color .25s ease;
    }
    .kit-thumb:hover span { color: var(--gold); }

    /* Button-Reihe (Block 1: Teilen / Link kopieren) */
    .kit-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; }

    /* Einklapper für Sekundäres (Carousel, Caption) — hält die Seite ruhig */
    .kit-collapse { width: 100%; }
    .kit-collapse > summary {
      cursor: pointer; list-style: none;
      display: inline-flex; align-items: center; gap: .55em;
      font-size: .66rem; font-weight: 600; letter-spacing: .22em;
      text-transform: uppercase; color: var(--cream-soft);
      padding: .6em .4em;
      transition: color .25s ease;
    }
    .kit-collapse > summary::-webkit-details-marker { display: none; }
    .kit-collapse > summary::before { content: "+"; color: var(--gold); letter-spacing: 0; }
    .kit-collapse[open] > summary::before { content: "–"; }
    .kit-collapse > summary:hover { color: var(--gold); }
    .kit-collapse > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 2px; }
    .kit-collapse[open] > summary { margin-bottom: .9rem; }

    /* Poster-Karten: ein .kit-poster-Block pro Poster — neue Poster einfach
       ergänzen, das Grid bricht von selbst um */
    .kit-poster-row {
      display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
      gap: 1.8rem; margin-top: .4rem;
    }
    .kit-poster { display: flex; flex-direction: column; align-items: center; gap: .55rem; }
    .kit-poster .kit-thumb img { height: 280px; }
    .kit-formats { display: flex; justify-content: center; gap: .5rem; }
    .kit-formats a {
      font-size: .62rem; font-weight: 600; letter-spacing: .18em; text-indent: .18em;
      text-transform: uppercase; color: var(--cream);
      text-decoration: none; padding: .6em .9em;
      border: 1px solid var(--hairline); border-radius: 2px;
      transition: color .25s ease, border-color .25s ease;
    }
    .kit-formats a:hover { color: var(--gold); border-color: var(--gold); }
    .kit-formats a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

    /* Lightbox: Klick auf ein Poster → Download + große Vorschau (native <dialog>) */
    dialog.lightbox {
      padding: .8rem;
      max-width: min(92vw, 920px);
      background: var(--dusk-mid);
      color: var(--cream);
      border: 1px solid var(--hairline);
      border-radius: 12px;
      box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
    }
    dialog.lightbox::backdrop { background: rgba(34, 21, 40, .82); }
    .lightbox-img {
      display: block;
      max-width: 100%;
      max-height: 74vh;
      margin: 0 auto;
      border-radius: 8px;
      box-shadow: 0 14px 40px rgba(34, 21, 40, .55);
    }
    .lightbox-bar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: .9rem;
      padding: .8rem .2rem 0;
    }
    .lightbox-title {
      margin-right: auto;
      font-size: .66rem; font-weight: 600;
      letter-spacing: .22em; text-transform: uppercase;
      color: var(--cream-soft);
    }
    /* Caption-Vorschau im Lightbox: zeigt, was beim Teilen mitgepostet wird */
    .lightbox-caption {
      flex-basis: 100%;
      font-size: .74rem;
      line-height: 1.45;
      color: var(--cream-soft);
      font-style: italic;
    }
    .lightbox-caption[hidden] { display: none; }

    .kit-caption {
      width: 100%; max-width: 560px; text-align: left;
      border: 1px solid var(--hairline); border-radius: 8px;
      padding: .8rem 1rem;
    }
    .kit-caption summary {
      cursor: pointer; font-size: .66rem; font-weight: 600;
      letter-spacing: .22em; text-transform: uppercase; color: var(--cream-soft);
    }
    .kit-caption summary:hover { color: var(--gold); }
    .kit-caption[open] summary { margin-bottom: .7rem; }
    .kit-caption textarea {
      width: 100%; margin-bottom: .6rem;
      padding: .7rem .9rem; border-radius: 6px;
      background: rgba(34, 21, 40, .65); color: var(--cream);
      border: 1px solid var(--hairline);
      font-family: inherit; font-size: .78rem; line-height: 1.65;
      resize: vertical;
    }
    .kit-caption .embed-codelabel { display: block; margin: 1rem 0 .45rem; }
    .kit-caption label:first-of-type { margin-top: 0; }
    .kit-caption .kit-hint { margin-top: 1.1rem; }

    
    /* Mobile: Hero stapeln, Slider in die volle Breite, Offerings untereinander */
    @media (max-width: 640px) {
      .hero {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 1.2rem;
      }
      .hero-left { text-align: center; }
      /* Gelbe Bars immer untereinander — inline-block könnte auf breiten
         Phones nebeneinander rutschen, das Plakat will sie gestapelt */
      .hero-sub {
        display: block;
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
      }
      /* Slider: zentriert, volle Breite bis auf Rand; Pfeile etwas kleiner */
      .hero-slider { max-width: min(100%, 480px); margin: 0 auto; }
      .slider--fade .slider-arrow { width: 38px; height: 38px; }
      /* Facts-Banner stapeln: Logos oben (kleiner Überstand), Fakten-Paar darunter.
         Kompakt (Anforderung „Streifen sehr hoch"): Gap + vertikales Padding
         gesenkt — die Logos dominieren die Höhe, nicht der Zwischenraum. */
      /* Mobil stapelt das Band → die Krake darf nicht die volle Zeilenhöhe
         fressen, sonst schiebt sie alles nach unten. */
      .facts-banner { --facts-mark-h: 120px; }
      .facts-banner {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        padding-top: 1.1rem;
        padding-bottom: 1.1rem;
        padding-left: clamp(1rem, 5vw, 2rem);
        padding-right: clamp(1rem, 5vw, 2rem);
      }
      .facts-logos {
        /* kein Überstand im Stapel-Layout: negatives Margin würde in den
           Fact-Text darüber ziehen (Desktop: Logos ragen seitlich über die
           Oberkante — im Mobile-Stapel stehen sie UNTER den Fakten).
           align-self zurück auf Mitte: im Spalten-Layout steuert es die
           horizontale Ausrichtung (zentriert). */
        margin-top: 0;
        align-self: center;
        align-items: center;
      }
      .facts-logo-row--reisinger { margin-bottom: 0; } /* kein Überstand unten im Stapel-Layout */
      .facts-share { margin-right: 0; } /* Stapel: auto-Margin würde den Button links verankern */
      .charity-note {
        text-align: center;
        max-width: none; /* Stapel: Logos hängen nicht über → zentriert in voller Breite */
        margin-left: auto;
        margin-right: auto;
      }
      .facts-facts {
        flex-direction: column;
        gap: 1.2rem;
      }
      .fact-col { align-items: center; text-align: center; }
      /* Sonne folgt demselben container-relativen Bogen — kein Override nötig */
      .offerings {
        flex-direction: column;
        gap: 1.6rem;
      }
      .divider {
        width: min(200px, 50vw);
        height: 1px;
      }
    }
  

/* ─────────────────────────────────────────────────────────────
   13 · FOOTER (alle Seiten)
   Drei Zonen: Brand · Seiten-Navigation · Kontakt + Small-Print-Basis.
   Arbeitet durchgängig mit currentColor → funktioniert auf der hellen
   Horizont-Zone (Startseite, Tinte) wie auf Dusk (Unterseiten, Creme).
   Best Practices: Kontakt immer erreichbar, Legal gruppiert,
   Navigationshilfe (Nach oben), Touch-Targets, Fokus-Ringe.
   ───────────────────────────────────────────────────────────── */
.site-footer {
  color: #241820; /* solide Tinte — rgba(…,.8) bräche auf 2.7–3.2:1 ein (WCAG 1.4.3) */
  position: relative; z-index: 1;
  padding: clamp(2.8rem, 6vw, 4.5rem) clamp(2rem, 6vw, 5rem) clamp(1.6rem, 3vw, 2.2rem);
  text-align: left;
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(2rem, 5vw, 3.5rem) clamp(2.5rem, 6vw, 5rem);
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1200px;
  margin: 0 auto;
}
.footer-mark {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.5rem, 3.2vw, 1.9rem);
  line-height: 1.1;
}
.footer-tag {
  margin-top: .45rem;
  font-size: .8rem;
  line-height: 1.65;
  max-width: 30ch; /* keine Opacity — verschachtelte Alpha bräche den Kontrast (WCAG 1.4.3) */
}
.footer-nav, .footer-contact {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.footer-nav a, .footer-contact a, .footer-base a {
  color: inherit;
  text-decoration: none;
  font-size: .68rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  padding: .6em 0; /* Touch-Target ≥ 24px (WCAG 2.5.8) */
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, opacity .25s ease;
}
.footer-nav a:hover, .footer-contact a:hover, .footer-base a:hover {
  border-color: currentColor; /* zonensicher: Tinte auf hell, Creme auf dunkel */
  opacity: .82;
}
.footer-nav a:focus-visible, .footer-contact a:focus-visible, .footer-base a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}
.footer-base a { padding: .8em 0; /* Basis ist nur .6rem — braucht mehr em-Polster für 24px (WCAG 2.5.8) */ }
.footer-base {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 2rem;
  justify-content: space-between;
  align-items: baseline;
  max-width: 1200px;
  margin: clamp(1.8rem, 4vw, 2.8rem) auto 0;
  padding-top: clamp(1rem, 2.5vw, 1.4rem);
  border-top: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  font-size: .6rem;
  letter-spacing: .24em;
  text-transform: uppercase;
}
/* Tinten-Farbe durchgängig: alle Footer sitzen im unteren Gradient-Bereich
     (Body-Gradient läuft auf Horizont-Orange) → dunkle Tinte, WCAG-sicher */


/* ─────────────────────────────────────────────────────────────
   13 · DANKE-SEITE — Galerie-Rhythmus + Upload-Hero (danke.html)
   Eigene Klassen (.upload-hero, .u-chip, .gal-frame): .pack/.packs
   bleiben exklusiv für die Sponsoring-Karten (partner.html).
   ───────────────────────────────────────────────────────────── */

    /* Rhythmus: Lead → Galerie-Head → Intro → Upload-Hero →
       Galerie-Rahmen → Fineprint — je ein klarer Atemzug dazwischen */
    #galerie { margin-top: clamp(3rem, 8vw, 5rem); }

    /* Bilder dürfen breiter als der 880px-Textkorpus sein: `main` ist auf
       880px gedeckelt (gute Zeilenlänge für Fließtext), eine Fotoreihe
       darin wirkt wie ein Briefkastenschlitz. Der Block bricht aus der
       Content-Box aus (negative Margins = dieselbe Technik wie das
       Facts-Band) und nutzt die volle Viewport-Breite. */
    /* Achtung, Reihenfolge: diese Regeln MÜSSEN nach .kit-block stehen
       (gleiche Spezifität, spätere gewinnt) — sonst greifen wieder
       max-width: 860px und align-items: center. */
    #galerie, .press-fotos {
      max-width: min(1500px, calc(100vw - 2 * clamp(1rem, 3vw, 3rem)));
      width: 100%;
      margin-left: auto;
      margin-right: auto;
      align-items: stretch; /* Kinder (Rahmen, Upload-Box) füllen die Breite */
    }
    #galerie .gal-frame, .press-fotos .kit-thumb-row { width: 100%; }
    /* Auf der Medien-Seite selbst darf der Rahmen weiter als 880px:
       `main` ist für Fließtext gedacht, die Galerie braucht Bildbreite. */
    body:has(#galerie) main { max-width: 1600px; }
    body:has(#galerie) .kit-block { max-width: min(1200px, 100%); }
    /* Upload-Hero und Rahmen dürfen ihre volle Breite nutzen, nicht
       auf Textbreite schrumpfen */
    #galerie .upload-hero, #galerie .kit-hint, #galerie .fineprint,
    #galerie .gal-frame, .press-fotos .kit-hint { max-width: none; }
    #galerie h2 {
      font-family: "Cormorant Garamond", serif;
      font-weight: 600;
      font-size: clamp(1.9rem, 5vw, 2.8rem);
      line-height: 1.15;
      color: var(--cream);
      margin: 0 0 1rem;
    }
    .galerie-intro {
      max-width: 620px;
      margin: 0 auto clamp(1.9rem, 4.5vw, 2.6rem);
      font-size: clamp(.95rem, 2.2vw, 1.05rem);
      line-height: 1.8;
      color: var(--cream-soft);
    }
    .galerie-intro b { font-weight: 400; color: var(--gold); }

    /* Upload-Hero: Dropzone-Einladung — die ganze Karte ist der Link */
    .upload-hero {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: .55rem;
      max-width: 680px;
      margin: 0 auto clamp(2rem, 5vw, 2.8rem);
      padding: clamp(1.7rem, 4.5vw, 2.5rem) clamp(1.4rem, 4vw, 3rem) clamp(1.5rem, 3.5vw, 2.1rem);
      text-decoration: none;
      border: 1.5px dashed rgba(232, 176, 75, .45);
      border-radius: 4px;
      background:
        radial-gradient(130% 150% at 50% 0%, rgba(232, 176, 75, .09), transparent 62%),
        rgba(247, 234, 216, .04);
      transition: border-color .3s ease, background .3s ease, transform .3s ease;
    }
    .upload-hero:hover {
      border-color: var(--gold);
      transform: translateY(-2px);
      background:
        radial-gradient(130% 150% at 50% 0%, rgba(232, 176, 75, .15), transparent 62%),
        rgba(232, 176, 75, .05);
    }
    .upload-hero:focus-visible {
      outline: 2px solid var(--gold);
      outline-offset: 4px;
    }
    .upload-hero-icon {
      width: clamp(34px, 6vw, 42px);
      height: clamp(34px, 6vw, 42px);
      color: var(--gold);
      margin-bottom: .2rem;
    }
    .upload-hero-title {
      font-size: clamp(.78rem, 1.8vw, .86rem);
      font-weight: 500;
      letter-spacing: .32em;
      text-indent: .32em;
      text-transform: uppercase;
      color: var(--cream);
    }
    .upload-hero-sub {
      font-size: clamp(.85rem, 2vw, .95rem);
      line-height: 1.7;
      color: var(--cream-soft);
      max-width: 46ch;
    }
    .upload-hero-chips {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: .5rem .6rem;
      margin-top: .5rem;
    }
    .u-chip {
      display: inline-flex;
      align-items: center;
      gap: .5em;
      padding: .55em 1.05em;
      border: 1px solid var(--hairline);
      border-radius: 999px;
      background: rgba(247, 234, 216, .05);
      font-size: .68rem;
      font-weight: 500;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--cream-soft);
    }
    .u-chip svg {
      width: 13px;
      height: 13px;
      color: var(--gold);
      flex-shrink: 0;
    }
    .upload-hero-cta {
      margin-top: 1.1rem;
      padding: .95em 2.1em;
      border-radius: 2px;
      background: linear-gradient(100deg, var(--gold), var(--coral));
      color: var(--ink);
      font-size: clamp(.68rem, 1.6vw, .76rem);
      font-weight: 600;
      letter-spacing: .3em;
      text-indent: .3em;
      text-transform: uppercase;
      transition: transform .3s ease, box-shadow .3s ease;
    }
    .upload-hero:hover .upload-hero-cta {
      transform: translateY(-1px);
      box-shadow: 0 10px 28px -10px rgba(232, 176, 75, .55);
    }

    /* Galerie-Rahmen: sanfte Bühne fürs Embed */
    .gal-frame {
      border: 1px solid rgba(255, 255, 255, .14);
      border-radius: 16px;
      background: rgba(255, 255, 255, .04);
      overflow: hidden;
      box-shadow: 0 22px 55px -22px rgba(0, 0, 0, .6);
    }
    .gal-frame iframe {
      display: block;
      width: 100%;
      height: 640px;
      border: 0;
    }

    @media (max-width: 640px) {
      .gal-frame { border-radius: 12px; }
      .gal-frame iframe { height: 480px; }
      .upload-hero-chips { gap: .45rem .5rem; }
    }