/* ==========================================================================
   Sing 4 Charity e.V. – Stylesheet
   Basis: NEXT LEVEL Design System. Farben als Hex (aus OKLCH umgerechnet),
   damit sie auch in älteren Browsern stimmen.
   Aufbau: Schriften · Tokens · Basis · Bausteine · Seitenbereiche · Unterseiten
   ========================================================================== */

/* ---------- Schriften (selbst gehostet, keine externen Anfragen) ---------- */
@font-face{font-family:"Montserrat";src:url("/fonts/montserrat-latin.woff2") format("woff2");font-weight:400 800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Montserrat";src:url("/fonts/montserrat-latin-ext.woff2") format("woff2");font-weight:400 800;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Roboto";src:url("/fonts/roboto-latin.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Roboto";src:url("/fonts/roboto-latin-ext.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- Tokens ---------- */
:root{
  --ink-950:#080d18;--ink-900:#111827;--ink-800:#1f2634;
  --slate-700:#404857;--slate-400:#8f96a6;--slate-300:#acb1bb;--slate-200:#d1d4da;
  --gold-700:#927548;--gold-600:#b29360;--gold-500:#c8a96e;--gold-400:#d9c197;
  --paper-050:#fbfaf8;--paper-100:#f5f3f0;
  --green-600:#3e815d;

  /* Text-Töne: gegenüber dem Design System minimal abgedunkelt, damit kleiner Text WCAG AA (4,5:1) erreicht */
  --c-head:var(--ink-900);--c-body:var(--slate-700);--c-muted:#626977;--c-accent:#7f6438;
  --c-line:var(--slate-200);--c-line-strong:var(--slate-300);--c-hover:var(--ink-900);--c-focus:#7f6438;

  --font-display:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --font-sans:"Roboto","Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.32,.72,0,1);
  --gutter:clamp(20px,5vw,64px);
  --wrap:1200px;
}
/* Dunkle Bereiche drehen die Textfarben um */
.inverse{--c-head:#fff;--c-body:var(--slate-300);--c-muted:var(--slate-400);--c-accent:var(--gold-400);--c-line:rgba(255,255,255,.14);--c-line-strong:rgba(255,255,255,.35);--c-hover:#fff;--c-focus:var(--gold-400)}

/* ---------- Basis ---------- */
[hidden]{display:none!important}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:76px;background:var(--ink-900)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--ink-900);color:var(--c-body);font:400 17px/1.65 var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
h1,h2,h3,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0}
img,video{display:block;max-width:100%}
img{height:auto}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--c-focus);outline-offset:2px}
.page{background:var(--paper-050);color:var(--c-body);overflow-x:clip}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-100px;z-index:100;padding:12px 18px;background:var(--gold-500);color:var(--ink-900);font-weight:600;border-radius:4px;text-decoration:none}
.skip:focus{top:12px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Textlinks (Unterstrich als Rahmen, wie im Design System) */
.lnk{color:var(--c-accent);text-decoration:none;border-bottom:1px solid rgba(178,147,96,.55);transition:color 160ms var(--ease),border-color 160ms var(--ease)}
.lnk:hover{color:var(--c-hover);border-bottom-color:var(--gold-500)}
.lnk--icon{display:inline-flex;align-items:center;gap:8px;font-weight:500}

/* ---------- Bausteine ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.section{padding:clamp(80px,10vw,140px) 0}
.section--s{padding:clamp(64px,8vw,112px) 0}
.bg-paper{background:var(--paper-100)}
.bg-ink{background:var(--ink-900)}
.bg-white{background:#fff}

.eyebrow{display:flex;align-items:center;gap:12px;font:600 12px/1.2 var(--font-sans);letter-spacing:.18em;text-transform:uppercase;color:var(--c-accent)}
.eyebrow::before,.eyebrow--center::after{content:"";flex:none;width:32px;height:2px;background:var(--gold-500)}
.h2{margin-top:16px;font:800 clamp(34px,4.6vw,56px)/1.02 var(--font-display);letter-spacing:-.03em;color:var(--c-head);text-wrap:balance}
.h3{font:700 clamp(26px,2.6vw,34px)/1.15 var(--font-display);letter-spacing:-.02em;color:var(--c-head);text-wrap:balance}
.card-title{font:700 22px/1.25 var(--font-display);letter-spacing:-.01em;color:var(--c-head)}
.lede{font-size:19px;line-height:1.6;color:var(--ink-800);text-wrap:pretty}
.p{font-size:17px;line-height:1.65;text-wrap:pretty}
.meta{font-size:15px;line-height:1.5;color:var(--c-muted)}
.small{font-size:13px;line-height:1.5;color:var(--c-muted)}
.strong{font-weight:700;color:var(--ink-900)}
.num{font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--ink-900);font-variant-numeric:tabular-nums}

/* Fotos mit Hover-Zoom */
.ph{margin:0;overflow:hidden;background:var(--ink-800)}
.ph--light{background:var(--paper-100)}
.ph img{width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--ease)}
.ph:hover img{transform:scale(1.06)}

/* Buttons – Navigation als <a>, Aktionen als <button> */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 20px;border:1px solid transparent;border-radius:4px;background:var(--gold-500);color:var(--ink-900);font:600 15px/1 var(--font-sans);letter-spacing:.01em;text-decoration:none;white-space:nowrap;cursor:pointer;transition:color 160ms var(--ease),background-color 160ms var(--ease),border-color 160ms var(--ease),transform 160ms var(--ease)}
.btn:hover{background:var(--gold-600);color:var(--ink-900);border-color:transparent}
.btn:active{background:var(--gold-700);transform:translateY(1px)}
.btn--sm{height:34px;padding:0 14px;font-size:13px}
.btn--lg{height:52px;padding:0 28px;font-size:17px}
.btn--full{width:100%}
.btn--secondary{background:var(--ink-900);color:#fff}
.btn--secondary:hover{background:var(--ink-800);color:#fff}
.btn--secondary:active{background:var(--ink-950)}
.btn--ghost{background:transparent;color:var(--c-head);border-color:var(--c-line-strong)}
.btn--ghost:hover{background:rgba(17,24,39,.05);color:var(--c-head);border-color:var(--c-line-strong)}
.inverse .btn--ghost{color:#fff}
.inverse .btn--ghost:hover{background:rgba(255,255,255,.1);color:#fff}
.btn--icon{width:34px;padding:0}
.btn .ic{width:18px;height:18px}
.btn--sm .ic{width:16px;height:16px}
@media (pointer:coarse){.btn--sm{height:40px}.btn--icon{width:40px}}

/* Einblenden beim Scrollen – nur wenn JS läuft, sonst bleibt alles sichtbar */
.js-reveal [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity 800ms var(--ease),transform 800ms var(--ease)}
.js-reveal [data-reveal].is-in{opacity:1;transform:none}

/* ---------- Kopfzeile ---------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:50;border-bottom:1px solid transparent;transition:background-color 240ms var(--ease),border-color 240ms var(--ease)}
.site-header__in{max-width:var(--wrap);margin:0 auto;padding:18px var(--gutter);display:flex;align-items:center;gap:32px;transition:padding 240ms var(--ease)}
.site-header.is-scrolled{background:rgba(17,24,39,.84);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:rgba(255,255,255,.1)}
.site-header.is-scrolled .site-header__in{padding-top:10px;padding-bottom:10px}
.site-header--solid{position:sticky;background:var(--ink-900);border-bottom-color:rgba(255,255,255,.1)}
.site-header--solid .site-header__in{padding-top:12px;padding-bottom:12px}
.brand{display:flex;align-items:center;gap:12px;color:#fff;font:700 16px/1.2 var(--font-display);text-decoration:none}
.brand__logo{display:flex;background:#fff;border-radius:8px;padding:3px 5px}
.brand__logo img{height:36px;width:auto}
.site-nav{display:none;margin-left:auto;gap:28px;font-size:15px;font-weight:500}
.site-nav a{color:var(--slate-200);text-decoration:none;padding:8px 0;transition:color 160ms var(--ease)}
.site-nav a:hover{color:#fff}
.site-header__cta{margin-left:auto}
@media (min-width:960px){.site-nav{display:flex}.site-header__cta{margin-left:0}}

/* ---------- Hero ---------- */
.hero{position:relative;display:flex;align-items:center;min-height:max(680px,100vh);min-height:max(680px,100svh);background:var(--ink-900);overflow:hidden}
.hero__bg{position:absolute;left:0;top:-8%;width:100%;height:120%;max-width:none;object-fit:cover;object-position:center 40%;transform:scale(1.06);will-change:transform}
.hero__scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(17,24,39,.92) 0%,rgba(17,24,39,.72) 45%,rgba(17,24,39,.25) 100%)}
.hero__scrim--b{inset:auto 0 0 0;height:40%;background:linear-gradient(to top,rgba(17,24,39,.9),rgba(17,24,39,0))}
.hero__in{position:relative;width:100%;max-width:var(--wrap);margin:0 auto;padding:140px var(--gutter) 200px;display:flex;flex-wrap:wrap;align-items:center;gap:48px clamp(40px,5vw,72px)}
.hero__text{flex:1 1 440px;min-width:0}
.hero__video{flex:1 1 420px;min-width:0}
.hero h1{margin-top:20px;max-width:12ch;font:800 clamp(44px,6.2vw,84px)/.98 var(--font-display);letter-spacing:-.035em;color:#fff;text-wrap:balance}
.hero__sub{margin-top:28px;max-width:44ch;font-size:clamp(17px,1.6vw,20px);line-height:1.6;color:var(--slate-200);text-wrap:pretty}
.hero__cta{margin-top:40px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.hero__hint{margin-top:24px;display:flex;align-items:center;gap:8px;font-size:15px;color:var(--slate-200)}
.hero__hint .ic{color:var(--gold-400)}
.rise{animation:heroIn 900ms var(--ease) both}
.rise--1{animation-delay:120ms}.rise--2{animation-delay:240ms}.rise--3{animation-delay:360ms}.rise--4{animation-delay:480ms}
.hero__video.rise{animation-duration:1000ms;animation-delay:420ms}
@keyframes heroIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

.video{position:relative;aspect-ratio:854/480;border-radius:22px;overflow:hidden;background:var(--ink-800);border:1px solid rgba(255,255,255,.16);box-shadow:0 32px 80px -24px rgba(0,0,0,.6)}
.video video{width:100%;height:100%;object-fit:cover}
.video__ctrl{position:absolute;left:12px;bottom:12px;display:flex;gap:8px}
.video__big{position:absolute;inset:0;margin:auto;width:64px;height:64px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(17,24,39,.72);color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background-color 160ms var(--ease),transform 160ms var(--ease)}
.video__big:hover{background:rgba(17,24,39,.9);transform:scale(1.05)}
.video__big .ic{margin-left:3px;fill:currentColor}

/* ---------- Terminkarte ---------- */
.termin{position:relative;z-index:2;margin-top:-140px}
.termin__card{background:#fff;border-radius:22px;box-shadow:0 24px 64px -24px rgba(17,24,39,.35),0 2px 6px rgba(17,24,39,.06);overflow:hidden;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.termin__count{background:var(--ink-800);padding:clamp(28px,4vw,48px);border-top:2px solid var(--gold-500)}
.termin__facts{padding:clamp(28px,4vw,48px)}
.cd{margin-top:20px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.cd[data-state="init"]{visibility:hidden}
.cd div{display:flex;flex-direction:column;gap:6px}
.cd b{font:700 clamp(36px,5vw,60px)/1 var(--font-display);letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums}
.cd div:last-child b{color:var(--gold-500)}
.cd span{font-size:13px;color:var(--slate-300)}
.termin__date{margin-top:28px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);font:700 clamp(28px,3vw,36px)/1.2 var(--font-display);letter-spacing:-.02em;color:#fff}
.termin__date span{font:400 15px/1.5 var(--font-sans);letter-spacing:0;color:var(--slate-300);margin-left:4px}
.facts{margin-top:20px;display:grid;grid-template-columns:max-content minmax(0,1fr);gap:12px 24px;font-size:15px;line-height:1.5}
.facts dt{font-weight:500;color:var(--c-muted)}
.facts dd{color:var(--ink-900)}
.facts dd .lnk{margin-top:4px}
.facts__stack{display:flex;flex-wrap:wrap;gap:4px 20px;margin-top:4px}

/* ---------- Musik, die hilft ---------- */
.music{padding:clamp(80px,10vw,140px) 0 clamp(64px,8vw,112px)}
.music__in{display:flex;flex-wrap:wrap;gap:56px clamp(48px,7vw,96px);align-items:center}
.music__img{flex:1 1 420px;min-width:0;position:relative;padding:0 12% 12% 0}
.music__main{aspect-ratio:4/3;border-radius:22px}
.music__small{position:absolute;right:0;bottom:0;width:52%;aspect-ratio:4/3;border-radius:18px;border:8px solid var(--paper-050);box-shadow:0 20px 48px -20px rgba(17,24,39,.4)}
.music__text{flex:1 1 420px;min-width:0}
.music__text .lede{margin-top:28px;max-width:58ch}
.music__text .p{margin-top:18px;max-width:62ch}
.stats{margin-top:clamp(56px,7vw,96px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:0 32px}
.stat{padding:28px 0;border-top:2px solid var(--ink-900)}
.stat--gold{border-top-color:var(--gold-500)}
.stat .num{font-size:clamp(44px,5vw,64px)}
.stat p:last-child{margin-top:12px;font-size:15px;color:var(--c-muted)}

/* ---------- Tickets ---------- */
.head-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 32px}
.head-row--wide{gap:24px 48px}
.head-row .meta-hint{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--ink-800)}
.head-row .meta-hint .ic{color:var(--c-accent)}
.tickets{margin-top:48px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:24px}
.ticket{background:#fff;border-radius:22px;padding:clamp(28px,4vw,44px);border-top:2px solid var(--slate-200);box-shadow:0 1px 2px rgba(17,24,39,.06);transition:transform 240ms var(--ease),box-shadow 240ms var(--ease)}
.ticket--main{border-top-color:var(--gold-500)}
.ticket:hover{transform:translateY(-4px);box-shadow:0 24px 48px -24px rgba(17,24,39,.3)}
.ticket .price{margin-top:24px;font-size:clamp(48px,5.5vw,68px)}
.ticket .meta{margin-top:10px}
.ticks{margin:28px 0 0;list-style:none;display:flex;flex-direction:column;gap:12px;font-size:17px;line-height:1.5}
.ticks li{display:flex;gap:12px;align-items:flex-start}
.ticks .ic{margin-top:3px;width:18px;height:18px;color:var(--c-accent)}
.ticket__cta{margin-top:32px}

/* ---------- Herzensprojekte 2026 ---------- */
.intro{max-width:760px}
.intro .lede{margin-top:24px}
.project{margin-top:clamp(48px,6vw,80px);display:flex;flex-wrap:wrap;gap:40px clamp(40px,6vw,80px);align-items:center}
.project--flip{margin-top:clamp(64px,8vw,112px);flex-wrap:wrap-reverse}
.project__media{flex:1.1 1 440px;min-width:0}
.project__body{flex:1 1 400px;min-width:0}
.project__media--grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.project__media--grid .wide{grid-column:1 / -1;aspect-ratio:716/365;border-radius:22px}
.project__media--grid .ph:not(.wide){aspect-ratio:4/3;border-radius:14px}
.project__media--grid .ph:not(.wide):hover img{transform:scale(1.08)}
.share{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.share b{font:800 40px/1 var(--font-display);letter-spacing:-.03em;color:var(--c-accent)}
.share span{font-size:15px;color:var(--c-muted)}
.project .h3{margin-top:20px}
.project .meta{margin-top:10px}
.project .p{margin-top:20px}
.project .p + .p{margin-top:14px}
.project .more{margin-top:24px}
.timeline{margin:28px 0 0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;border-top:1px solid var(--c-line)}
.timeline li{padding-top:16px}
.timeline b{display:block;font:700 20px/1.2 var(--font-display);color:var(--ink-900)}
.timeline span{display:block;margin-top:4px;font-size:13px;line-height:1.5;color:var(--c-muted)}
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:12px;align-items:end}
.duo .tall{aspect-ratio:4/5;border-radius:22px}
.duo .tall img{object-position:center 60%}
.duo__side{display:flex;flex-direction:column;gap:8px}
.duo .sq{aspect-ratio:1/1;border-radius:22px}
.duo .sq img{object-position:left center}

/* ---------- Band ---------- */
.band-list{margin:56px 0 0;list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:16px}
.member{position:relative;aspect-ratio:4/5;border-radius:18px}
.member img{object-position:center 30%}
.member:hover img{transform:scale(1.07)}
/* Bildausschnitte je Person */
.member:nth-child(1) img{object-position:center 20%}
.member:nth-child(5) img{object-position:center 25%}
.member:nth-child(6) img{object-position:center 15%}
.member__cap{position:absolute;inset:auto 0 0 0;padding:48px 20px 18px;background:linear-gradient(to top,rgba(17,24,39,.92),rgba(17,24,39,0));pointer-events:none}
.member__cap b{display:block;font:700 18px/1.3 var(--font-display);color:#fff}
.member__cap span{display:block;margin-top:2px;font-size:14px;color:var(--gold-400)}
.band-intro{max-width:46ch;font-size:17px;line-height:1.65;color:var(--slate-200);text-wrap:pretty}

/* ---------- Spenden ---------- */
.give{display:flex;flex-wrap:wrap;gap:48px clamp(48px,7vw,96px);align-items:flex-start}
.give__intro{flex:1 1 380px;min-width:0}
.give__intro .lede{margin-top:28px;max-width:52ch}
.give__intro .meta{margin-top:28px}
.give__cards{flex:1.2 1 460px;min-width:0;display:grid;gap:16px}
.paypal{background:var(--ink-900);border-radius:22px;padding:clamp(28px,4vw,40px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}
.paypal__text{flex:1 1 240px}
.paypal__head{display:flex;align-items:center;gap:12px}
.paypal__head .ic{width:24px;height:24px;color:var(--gold-400)}
.paypal__head h3{color:#fff}
.paypal p{margin-top:12px;font-size:15px;line-height:1.6;color:var(--slate-300);text-wrap:pretty}
.bank{background:#fff;border:1px solid var(--c-line);border-radius:22px;padding:clamp(28px,4vw,40px)}
.bank__head{display:flex;align-items:center;gap:12px}
.bank__head .ic{width:24px;height:24px;color:var(--c-accent)}
.bank .facts{margin-top:20px;gap:10px 24px}
.bank .facts .iban-l{grid-column:1 / -1;margin-top:6px}
.bank .facts .iban{grid-column:1 / -1;margin:-6px 0 6px;font:700 clamp(14px,4.2vw,24px)/1.3 var(--font-display);font-variant-numeric:tabular-nums;white-space:nowrap;-webkit-user-select:all;user-select:all}
.bank__act{margin-top:24px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.copy-msg{font-size:15px;font-weight:500;color:var(--green-600)}

/* ---------- Wohin das Geld geht ---------- */
.total{max-width:420px}
.total .num{font-size:clamp(48px,6vw,80px);letter-spacing:-.035em}
.total p:last-child{margin-top:12px;font-size:17px;line-height:1.6;text-wrap:pretty}
.years{margin:clamp(48px,6vw,80px) 0 0;list-style:none;display:flex;flex-direction:column}
.year{display:flex;flex-wrap:wrap;gap:20px 48px;padding:40px 0;border-top:2px solid var(--ink-900)}
.year:last-child{border-bottom:1px solid var(--c-line)}
.year__head{flex:0 0 200px}
.year__head h3{font:800 40px/1 var(--font-display);letter-spacing:-.03em;color:var(--ink-900)}
.year__head .sum{margin-top:8px;font:600 18px/1.3 var(--font-display);color:var(--c-accent)}
.year__head .small{margin-top:12px;max-width:26ch}
.year__items{flex:1 1 480px;min-width:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px;align-content:start}
.gift{background:#fff;border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.gift__body{padding:24px;display:flex;flex-direction:column;gap:10px}
.gift .amount{font:800 26px/1.2 var(--font-display);letter-spacing:-.02em;color:var(--ink-900)}
.gift .to{font-size:17px;font-weight:500;line-height:1.4;color:var(--ink-900)}
.gift .why{font-size:15px;line-height:1.6;color:var(--c-body)}
.gift .ph{aspect-ratio:16/10}
.gift .ph:hover img{transform:scale(1.07)}
.gift--felix{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap}
.gift--felix .pair{flex:1 1 300px;display:grid;grid-template-columns:1.4fr 1fr;gap:4px;min-height:220px}
.gift--felix .pair .ph{aspect-ratio:auto}
.gift--felix .gift__body{flex:1 1 280px}

/* ---------- Geschichte ---------- */
.story{overflow:hidden}
.story__in{max-width:900px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center}
.story .eyebrow{justify-content:center}
.story blockquote{margin-top:32px}
.story blockquote p{font:600 italic clamp(26px,3.6vw,44px)/1.25 var(--font-display);letter-spacing:-.02em;color:#fff;text-wrap:balance}
.story blockquote footer{margin-top:28px;font-size:15px;color:var(--slate-300)}
.story__text{margin-top:40px;max-width:62ch;font-size:17px;line-height:1.7;color:var(--slate-200);text-wrap:pretty}
.gallery{margin-top:clamp(56px,7vw,96px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));grid-auto-rows:200px;grid-auto-flow:dense;gap:12px}
.gallery .ph{border-radius:18px}
.gallery .ph:hover img{transform:scale(1.07)}
.gallery .g-tall{grid-row:span 2}
@media (min-width:640px){.gallery .g-wide{grid-column:span 2}}

/* ---------- Verein ---------- */
.club{display:flex;flex-wrap:wrap;gap:48px clamp(48px,7vw,96px);align-items:flex-start}
.club__text{flex:1.5 1 420px;min-width:0}
.club__text .p{margin-top:28px;max-width:62ch}
.club__text .facts{margin-top:32px}
.club__text .more{margin-top:32px}
.club__list{flex:1 1 320px;min-width:0;background:#fff;border:1px solid var(--c-line);border-radius:22px;padding:clamp(28px,4vw,40px)}
.club__list ul{margin:20px 0 0;list-style:none;font-size:15px;line-height:1.5}
.club__list li{padding:14px 0;border-top:1px solid var(--c-line)}
.club__list li:not(:has(a)){color:var(--ink-900)}

/* ---------- Häufige Fragen ---------- */
.faq-wrap{border-top:1px solid var(--c-line)}
.faq-sec{background:#fff;border-top:1px solid var(--c-line);padding:clamp(80px,10vw,140px) 0}
.faq-row{display:flex;flex-wrap:wrap;gap:40px clamp(48px,7vw,96px);align-items:flex-start}
.faq-row > div:first-child{flex:.8 1 280px;min-width:0}
.faq-row > div:last-child{flex:1.6 1 440px;min-width:0}
details{border-bottom:1px solid var(--c-line)}
summary{cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0;font:600 18px/1.35 var(--font-display);color:var(--ink-900);list-style:none}
summary::-webkit-details-marker{display:none}
summary .ic{width:18px;height:18px;color:var(--c-accent);transition:transform 240ms var(--ease)}
details[open] summary .ic{transform:rotate(45deg)}
details > p{padding:0 0 24px;max-width:62ch;font-size:17px;line-height:1.65}

/* ---------- Abschluss ---------- */
.closing{position:relative;background:var(--ink-900);overflow:hidden}
.closing > img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;opacity:.35}
.closing__scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(17,24,39,.95),rgba(17,24,39,.6))}
.closing__in{position:relative;max-width:900px;margin:0 auto;padding:clamp(80px,10vw,128px) var(--gutter);text-align:center;display:flex;flex-direction:column;align-items:center}
.closing__date{font:800 clamp(44px,6vw,76px)/1 var(--font-display);letter-spacing:-.03em;color:var(--gold-500)}
.closing__where{margin-top:16px;font-size:19px;line-height:1.6;color:var(--slate-200)}
.closing__cta{margin-top:36px;display:flex;flex-wrap:wrap;justify-content:center;gap:12px 16px}

/* ---------- Fußzeile ---------- */
.site-footer{background:var(--ink-950);padding:clamp(56px,6vw,80px) 0 40px;color:var(--c-body)}
.site-footer__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:40px}
.site-footer__brand{display:flex;flex-direction:column;gap:20px}
.site-footer__logo{display:flex;width:max-content;background:#fff;border-radius:14px;padding:8px 12px}
.site-footer__logo img{height:72px;width:auto}
.site-footer address{font-style:normal;font-size:15px;line-height:1.6;color:var(--slate-300)}
.site-footer address b{font:600 16px/1.6 var(--font-display);color:#fff}
.site-footer h2{font:600 12px/1.2 var(--font-sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-400)}
.site-footer ul{margin:16px 0 0;list-style:none;display:flex;flex-direction:column;gap:10px;font-size:15px}
.site-footer ul a{display:inline-block;padding:2px 0}
.site-footer__copy{margin-top:56px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14);font-size:13px;color:var(--slate-400)}

/* ---------- Feste Leiste (nur Handy) ---------- */
.dock{display:none}
@media (max-width:719.98px){
  .dock{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(17,24,39,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid rgba(255,255,255,.14)}
  .dock .btn{height:44px}
  .site-footer{padding-bottom:96px}
}

/* ---------- Unterseiten (Impressum, Datenschutz, Satzung, 404) ---------- */
.doc-page{min-height:100vh;display:flex;flex-direction:column;background:var(--paper-050)}
.doc{flex:1;padding:clamp(48px,7vw,96px) 0 clamp(64px,8vw,112px)}
.doc__in{max-width:760px;margin:0 auto;padding:0 var(--gutter)}
.doc .back{font-size:15px}
.doc .eyebrow{margin-top:40px;font-size:11px}
.doc .eyebrow::before{display:none}
.doc h1{margin-top:12px;font:700 clamp(36px,5vw,60px)/1.08 var(--font-display);letter-spacing:-.02em;color:var(--ink-900);text-wrap:balance}
.doc .rule{margin-top:20px;width:56px;height:2px;background:var(--gold-500)}
.doc .lede{margin-top:24px;font-size:19px;line-height:1.65;color:var(--ink-800)}
.doc h2{margin-top:48px;font:700 22px/1.25 var(--font-display);letter-spacing:-.01em;color:var(--ink-900)}
.doc h3{margin-top:28px;font:600 17px/1.35 var(--font-display);color:var(--ink-900)}
.doc p{margin-top:12px;font-size:17px;line-height:1.65;color:var(--c-body);text-wrap:pretty}
.doc ul,.doc ol{margin:12px 0 0;padding-left:22px;display:flex;flex-direction:column;gap:8px}
.doc li{font-size:17px;line-height:1.65;color:var(--c-body);text-wrap:pretty}
.doc strong{font-weight:700;color:var(--ink-900)}
.doc .btn{margin-top:8px}

/* ---------- Weniger Bewegung ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:0.01ms!important}
  .hero__bg{transform:scale(1.06)!important}
  .js-reveal [data-reveal]{opacity:1;transform:none}
}

/* ---------- Druck ---------- */
@media print{
  .site-header,.dock,.video,.skip{display:none!important}
  .hero{min-height:0;background:#fff}.hero__bg,.hero__scrim{display:none}
  .hero h1,.hero__sub{color:#000}
  .termin{margin-top:0}
}