/* ==========================================================================
   MGV Concordia 1855 Neckarsulm e.V. · Website
   --------------------------------------------------------------------------
   Datei     assets/css/chor.css
   Zweck     Gesamte Gestaltung der Website
   (c) 2026 emefka.bewegtbildmanufaktur · Projekt-ID CON-20261006-EMFK

   Gestaltungsgrundsatz: ruhig, groß gesetzt, gut lesbar. 19 px Grundschrift,
   großzügiger Zeilenabstand und große Bedienflächen. Modern wird die Seite
   über Raum, Typografie und Ruhe.
   ========================================================================== */

@font-face{
  font-family:"Fraunces";
  src:url("../fonts/fraunces-latin.woff2") format("woff2");
  font-weight:100 900; 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:"Fraunces";
  src:url("../fonts/fraunces-latin-ext.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Inter";
  src:url("../fonts/inter-latin.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}

:root{
  /* Farben aus dem Festbanner des Vereins: Blau auf Weiss */
  --blau:#1C4E96;
  --blau-tief:#123566;
  --blau-hell:#4F86CE;
  --nacht:#0B1B33;
  --nacht-2:#122744;

  --creme:#F6F3ED;
  --creme-2:#EFEBE2;
  --weiss:#FFFFFF;
  --tinte:#16202E;
  --grau:#5B6779;
  --rot:#A8272E;          /* Chorfarbe von Sing'n'Fun */

  --linie:rgba(22,32,46,.13);
  --linie-hell:rgba(246,243,237,.20);

  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --kopf-h:74px;
  --hero-h:100svh;
  --rand:clamp(1.15rem,4.5vw,2.75rem);
  --bahn:1180px;
  --schmal:760px;
}
@media (max-width:760px){ :root{ --kopf-h:62px; } }
/* Auf sehr hohen Fenstern (und bei Vollseiten-Aufnahmen) soll der Aufmacher
   nicht die ganze Fläche fressen — 100svh wäre dort schlicht zu viel. */
@media (min-height:1100px){ :root{ --hero-h:1000px; } }

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

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--kopf-h) + 14px);
  -webkit-text-size-adjust:100%;
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--creme);
  color:var(--tinte);
  font-family:var(--sans);
  font-size:19px;
  line-height:1.72;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
@media (max-width:560px){ body{ font-size:18px; } }

img,svg{ max-width:100%; height:auto; display:block; }
a{ color:var(--blau); text-underline-offset:.22em; text-decoration-thickness:.07em; }
a:hover{ color:var(--blau-tief); }

h1,h2,h3{
  font-family:var(--serif);
  font-weight:600;
  font-variation-settings:"SOFT" 0,"WONK" 0;
  line-height:1.12;
  letter-spacing:-.012em;
  margin:0 0 .6em;
  text-wrap:balance;
}
h1{ font-size:clamp(2.5rem,7.2vw,4.6rem); }
h2{ font-size:clamp(1.95rem,4.6vw,3.1rem); }
h3{ font-size:clamp(1.28rem,2.4vw,1.72rem); line-height:1.24; }
p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }

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

/* Dachzeile — schlichte Zeile, kein Kasten (siehe Vorgabe: keine Pillen) */
.dach{
  font-family:var(--sans);
  font-size:.86rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--blau);
  margin:0 0 .85rem;
}
.dach--hell{ color:var(--blau-hell); }

.vor{ font-size:1.16rem; color:var(--grau); line-height:1.66; }
.vor--hell{ color:rgba(246,243,237,.80); }

/* ---------- Sprungmarke ---------- */
.spring{
  position:absolute; left:.6rem; top:.6rem; z-index:400;
  transform:translateY(-160%);
  background:var(--blau); color:#fff;
  padding:.65rem 1.1rem; border-radius:4px; font-weight:600;
  text-decoration:none;
}
.spring:focus-visible{ transform:none; }

:focus-visible{ outline:3px solid var(--blau-hell); outline-offset:3px; }

/* ============================================================
   Kopfzeile — auf der Startseite erst beim Scrollen sichtbar,
   damit das Vereinszeichen im Aufmacher nicht doppelt steht.
   ============================================================ */
.kopf{
  position:fixed; inset:0 0 auto 0; z-index:200;
  height:var(--kopf-h);
  display:flex; align-items:center;
  background:rgba(246,243,237,.88);
  backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid transparent;
  transform:translateY(-102%);
  transition:transform .42s cubic-bezier(.22,.7,.3,1),border-color .42s;
}
.kopf.ist-da{ transform:none; border-bottom-color:var(--linie); }
.kopf__bahn{
  width:min(100% - var(--rand)*2,var(--bahn));
  margin-inline:auto;
  display:flex; align-items:center; gap:1rem;
}

.marke{
  display:flex; align-items:center; gap:.7rem;
  text-decoration:none; color:var(--tinte); margin-right:auto;
}
.marke svg{ width:30px; flex:none; color:var(--blau); }
.marke__name{
  font-family:var(--serif); font-weight:600;
  font-size:1.12rem; line-height:1.05; display:block;
}
.marke__zusatz{
  font-size:.74rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--grau); display:block; margin-top:.18rem;
}

.nav{ display:flex; align-items:center; gap:.2rem; }
.nav a{
  color:var(--tinte); text-decoration:none;
  font-size:.95rem; font-weight:500;
  padding:.55rem .72rem; border-radius:5px;
  transition:background .2s,color .2s;
}
.nav a:hover{ background:rgba(28,78,150,.09); color:var(--blau-tief); }
.nav a.jetzt{ color:var(--blau); font-weight:650; }

.burger{
  display:none; width:46px; height:40px;
  background:none; border:1px solid var(--linie); border-radius:6px;
  cursor:pointer; padding:0; position:relative;
}
.burger span{
  position:absolute; left:11px; right:11px; height:2px;
  background:var(--tinte); border-radius:2px;
  transition:transform .28s,opacity .2s;
}
.burger span:nth-child(1){ top:13px; }
.burger span:nth-child(2){ top:19px; }
.burger span:nth-child(3){ top:25px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

@media (max-width:940px){
  .burger{ display:block; }
  .nav{
    position:fixed; inset:var(--kopf-h) 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--creme);
    border-bottom:1px solid var(--linie);
    padding:.5rem var(--rand) 1.3rem;
    box-shadow:0 22px 40px rgba(11,27,51,.14);
    display:none;
  }
  .nav.offen{ display:flex; }
  .nav a{ padding:.9rem .2rem; font-size:1.05rem; border-bottom:1px solid var(--linie); border-radius:0; }
  .nav a:last-child{ border-bottom:0; }
}

/* ============================================================
   Aufmacher
   ============================================================ */
.hero{
  position:relative;
  min-height:var(--hero-h);
  display:grid; place-items:center;
  padding:calc(var(--kopf-h) + 3.5rem) var(--rand) 7rem;
  text-align:center;
  overflow:hidden;
  background:var(--nacht);
}
.hero__bild{
  position:absolute; inset:-8% 0 -8%;
  width:100%; height:116%;
  object-fit:cover;
  will-change:transform;
}
.hero::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 78% at 50% 34%,rgba(11,27,51,.30) 0%,rgba(11,27,51,.72) 62%,rgba(11,27,51,.90) 100%),
    linear-gradient(to bottom,rgba(11,27,51,.62) 0%,rgba(11,27,51,0) 26%);
}
.hero__inhalt{ position:relative; z-index:2; max-width:940px; }

/* Vereinszeichen gross und mittig */
.zeichen{ color:#F6F3ED; width:min(420px,72vw); margin:0 auto 1.6rem; }
.zeichen--klein{ width:min(300px,60vw); }

.hero h1{
  color:#FBF8F2;                  /* einfarbig, kein Verlauf */
  font-size:clamp(2.6rem,6.6vw,4.9rem);
  margin-bottom:.32em;
  text-shadow:0 2px 30px rgba(11,27,51,.55);
}
.hero__unter{
  font-size:clamp(1.05rem,2.1vw,1.32rem);
  color:rgba(246,243,237,.90);
  /* Volle Breite wie die Ueberschrift. Wo die Zeile bricht, entscheidet die
     Redaktion im Textfeld — nicht eine kuenstlich schmale Spalte. */
  margin:0 auto 2.2rem;
  line-height:1.6;
}
.hero__jahr{
  display:block;
  font-family:var(--sans);
  font-size:.82rem; font-weight:600; letter-spacing:.32em;
  text-transform:uppercase;
  color:rgba(246,243,237,.66);
  margin-bottom:1.35rem;
}

.knopfreihe{ display:flex; flex-wrap:wrap; gap:.85rem; justify-content:center; }
.knopf{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--sans); font-size:1rem; font-weight:600;
  padding:.92rem 1.6rem;
  border-radius:6px; border:1.5px solid transparent;
  text-decoration:none; cursor:pointer;
  transition:transform .18s,background .22s,color .22s,border-color .22s,box-shadow .22s;
}
.knopf--voll{
  background:var(--blau); color:#fff;
  box-shadow:0 10px 26px rgba(28,78,150,.34);
}
.knopf--voll:hover{ background:#1a5aae; color:#fff; transform:translateY(-2px); }
/* Auf dunklem Grund trägt das Vereinsblau zu wenig — heller Knopf. */
.bloc--nacht .knopf--voll{ background:var(--blau-hell); color:#07142A; box-shadow:0 10px 26px rgba(79,134,206,.26); }
.bloc--nacht .knopf--voll:hover{ background:#6D9EDC; color:#07142A; }
.knopf--rand{
  border-color:rgba(246,243,237,.55); color:#F6F3ED; background:rgba(246,243,237,.04);
}
.knopf--rand:hover{ background:rgba(246,243,237,.14); color:#fff; transform:translateY(-2px); }
.knopf--dunkel{ border-color:rgba(22,32,46,.28); color:var(--tinte); }
.knopf--dunkel:hover{ background:rgba(28,78,150,.08); border-color:var(--blau); color:var(--blau-tief); }

.hero__runter{
  position:absolute; left:50%; bottom:2.2rem; z-index:3;
  transform:translateX(-50%);
  color:rgba(246,243,237,.6);
  font-size:.74rem; letter-spacing:.2em; text-transform:uppercase;
  text-decoration:none;
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
}
.hero__runter b{ display:block; width:1px; height:34px; background:currentColor; opacity:.55; animation:zieh 2.6s ease-in-out infinite; transform-origin:top; }
@keyframes zieh{ 0%,100%{ transform:scaleY(.35); opacity:.25; } 50%{ transform:scaleY(1); opacity:.7; } }
@media (max-width:620px),(max-height:700px){ .hero__runter{ display:none; } }

/* ============================================================
   Abschnitte
   ============================================================ */
.bloc{ padding:clamp(4rem,9vw,7.5rem) 0; }
.bloc--eng{ padding:clamp(3rem,6vw,5rem) 0; }
.bloc--creme2{ background:var(--creme-2); }
.bloc--weiss{ background:var(--weiss); }
.bloc--nacht{ background:var(--nacht); color:#EDE9E1; }
.bloc--nacht h2,.bloc--nacht h3{ color:#FBF8F2; }
.bloc--nacht a{ color:var(--blau-hell); }

.kopfzeile{ max-width:var(--schmal); margin-bottom:clamp(2.2rem,4vw,3.4rem); }
.kopfzeile--mitte{ margin-inline:auto; text-align:center; }

/* Notenlinie als Trenner — das Motiv aus dem Vereinsbanner */
.linien{ display:block; width:100%; height:38px; color:var(--blau); opacity:.30; }
.linien--hell{ color:var(--blau-hell); opacity:.42; }

/* ---------- Der Verein: Zahlen ---------- */
.zahlen{
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  background:var(--linie);
  border:1px solid var(--linie);
  border-radius:10px; overflow:hidden;
  margin-top:clamp(2.2rem,4vw,3.2rem);
}
.zahl{ background:var(--creme); padding:1.9rem 1.5rem; }
.bloc--weiss .zahl{ background:var(--weiss); }
.zahl b{
  display:block;
  font-family:var(--serif); font-weight:600;
  font-size:clamp(2.3rem,5vw,3.2rem); line-height:1;
  color:var(--blau); letter-spacing:-.02em;
}
.zahl span{ display:block; margin-top:.5rem; font-size:.95rem; color:var(--grau); line-height:1.45; }

/* ---------- Jubiläum ---------- */
.jubi{
  display:grid; gap:clamp(2rem,5vw,4rem);
  grid-template-columns:minmax(0,300px) minmax(0,1fr);
  align-items:center;
}
@media (max-width:820px){ .jubi{ grid-template-columns:1fr; } }
.jubi__plakat{
  border-radius:8px; overflow:hidden;
  box-shadow:0 26px 60px rgba(0,0,0,.45);
  border:1px solid rgba(246,243,237,.14);
  transform:rotate(-1.4deg);
  transition:transform .5s cubic-bezier(.22,.7,.3,1);
}
.jubi__plakat:hover{ transform:rotate(0) scale(1.015); }
@media (max-width:820px){ .jubi__plakat{ max-width:320px; margin-inline:auto; } }

.eckdaten{ list-style:none; margin:1.8rem 0 2.2rem; padding:0; display:grid; gap:.1rem; }
.eckdaten li{
  display:flex; gap:1.1rem; align-items:baseline;
  padding:.8rem 0; border-bottom:1px solid var(--linie-hell);
}
.eckdaten li:last-child{ border-bottom:0; }
.eckdaten dt,.eckdaten b{
  flex:0 0 8.5rem;
  font-size:.8rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  color:rgba(246,243,237,.55);
}
.eckdaten span{ flex:1; font-size:1.08rem; }

.countdown{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.05rem,2.2vw,1.3rem);
  color:var(--blau-hell);
  margin:0 0 1.6rem;
}

/* ---------- Die Chöre ---------- */
.chor{
  display:grid; gap:clamp(1.8rem,5vw,4rem);
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:center;
  padding:clamp(2.6rem,5vw,4.4rem) 0;
  border-top:1px solid var(--linie);
}
.chor:first-of-type{ border-top:0; padding-top:0; }
@media (max-width:860px){ .chor{ grid-template-columns:1fr; } }
.chor--gedreht .chor__bild{ order:2; }
@media (max-width:860px){ .chor--gedreht .chor__bild{ order:0; } }

.chor__bild{ position:relative; border-radius:10px; overflow:hidden; background:#DCD8D0; }
.chor__bild img{ width:100%; aspect-ratio:3/2; object-fit:cover; transition:transform .8s cubic-bezier(.22,.7,.3,1); }
.chor__bild:hover img{ transform:scale(1.035); }

.chor__name{ display:flex; align-items:baseline; gap:.8rem; flex-wrap:wrap; margin-bottom:.35em; }
.chor__name h3{ margin:0; font-size:clamp(1.7rem,3.4vw,2.35rem); }
.chor__seit{ font-size:.86rem; letter-spacing:.1em; text-transform:uppercase; color:var(--grau); }
.chor--fun .chor__name h3{ color:var(--rot); }

.leitung{
  margin-top:1.4rem; padding-top:1.2rem; border-top:1px solid var(--linie);
  font-size:.98rem; color:var(--grau);
}
.leitung b{ color:var(--tinte); font-weight:600; }

/* ---------- Termine ---------- */
.jahr{
  font-family:var(--serif); font-weight:600;
  font-size:1.45rem; color:var(--blau);
  margin:2.6rem 0 .6rem; padding-bottom:.5rem;
  border-bottom:2px solid var(--blau);
}
.jahr:first-of-type{ margin-top:0; }

.termine{ list-style:none; margin:0; padding:0; }
.termin{
  display:grid;
  grid-template-columns:8.5rem minmax(0,1fr) 8.5rem;
  gap:1.4rem; align-items:baseline;
  padding:1.15rem .5rem 1.15rem 0;
  border-bottom:1px solid var(--linie);
}
.termin__wann{
  font-family:var(--serif); font-weight:600; font-size:1.06rem;
  color:var(--tinte); font-variant-numeric:tabular-nums;
}
.termin__was b{ display:block; font-weight:600; font-size:1.08rem; }
.termin__was span{ display:block; font-size:.93rem; color:var(--grau); margin-top:.2rem; }
.termin__wer{ font-size:.84rem; letter-spacing:.09em; text-transform:uppercase; color:var(--grau); text-align:right; }
.termin--naechst{
  background:var(--weiss);
  border:1px solid var(--linie); border-left:4px solid var(--blau);
  border-radius:8px; padding:1.25rem 1.2rem;
  box-shadow:0 8px 22px rgba(11,27,51,.07);
}
.termin--naechst .termin__wann{ color:var(--blau); }
.termin--vorbei{ opacity:.48; }
@media (max-width:720px){
  .termin{ grid-template-columns:1fr; gap:.3rem; padding-block:1rem; }
  .termin__wer{ text-align:left; }
}

.schalter{
  margin-top:1.6rem;
  background:none; border:0; padding:.6rem 0;
  font-family:var(--sans); font-size:.95rem; font-weight:600;
  color:var(--blau); cursor:pointer;
  border-bottom:1.5px solid currentColor;
}
.schalter:hover{ color:var(--blau-tief); }
.vergangen[hidden]{ display:none; }

/* ---------- Vereinsjahr / Feste ---------- */
.feste{
  display:grid; gap:1.4rem;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
@media (max-width:980px){ .feste{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px){ .feste{ grid-template-columns:1fr; } }
.fest{
  background:var(--weiss);
  border:1px solid var(--linie);
  border-radius:10px; overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .3s,box-shadow .3s;
}
.fest:hover{ transform:translateY(-4px); box-shadow:0 18px 38px rgba(11,27,51,.12); }
.fest img{ width:100%; aspect-ratio:3/2; object-fit:cover; }
.fest__text{ padding:1.4rem 1.5rem 1.6rem; }
.fest__text h3{ font-size:1.22rem; margin-bottom:.35em; }
.fest__text p{ font-size:.97rem; color:var(--grau); line-height:1.6; }
.fest__wann{
  display:block; margin-top:.9rem;
  font-size:.79rem; letter-spacing:.1em; text-transform:uppercase; color:var(--blau);
  font-weight:600;
}

/* ---------- Galerie ---------- */
.galerie{
  display:grid; gap:1rem .9rem;
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:clamp(2.6rem,5vw,4rem);
}
@media (max-width:980px){ .galerie{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){ .galerie{ grid-template-columns:1fr; } }
.galerie figure{ margin:0; }
.galerie figure > span{ display:block; border-radius:8px; overflow:hidden; background:#DCD8D0; }
.galerie img{ width:100%; aspect-ratio:3/2; object-fit:cover; transition:transform .7s cubic-bezier(.22,.7,.3,1); }
.galerie figure:hover img{ transform:scale(1.05); }
.galerie figcaption{ font-size:.85rem; color:var(--grau); padding:.6rem .15rem 0; line-height:1.4; }

/* ---------- Mitsingen ---------- */
.mitsingen{
  display:grid; gap:clamp(2rem,5vw,3.6rem);
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.karte{
  background:rgba(246,243,237,.05);
  border:1px solid var(--linie-hell);
  border-radius:10px;
  padding:clamp(1.6rem,3vw,2.3rem);
}
.karte h3{ margin-bottom:.4em; }
.karte p{ font-size:1rem; color:rgba(246,243,237,.80); }
.karte--rot h3{ color:#F0A3A6; }

/* ---------- Ansprechpartner ---------- */
.leute{
  display:grid; gap:clamp(.9rem,2vw,1.25rem);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.person{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column;
  background:var(--weiss); border:1px solid var(--linie); border-radius:14px;
  padding:1.5rem 1.5rem 1.35rem;
  transition:transform .22s cubic-bezier(.22,.7,.3,1), box-shadow .22s, border-color .22s;
}
.person::before{
  content:""; position:absolute; inset:0 0 auto 0; height:4px;
  background:linear-gradient(90deg,var(--blau),var(--blau-hell));
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s cubic-bezier(.22,.7,.3,1);
}
.person:hover,.person:focus-within{
  transform:translateY(-4px); border-color:transparent;
  box-shadow:0 14px 34px rgba(11,27,51,.12);
}
.person:hover::before,.person:focus-within::before{ transform:scaleX(1); }
.person__ini{
  display:grid; place-items:center; width:2.7rem; height:2.7rem; border-radius:50%;
  background:rgba(28,78,150,.09); color:var(--blau);
  font-family:var(--serif); font-weight:600; font-size:1rem; margin-bottom:.8rem;
  transition:background .22s, color .22s;
}
.person:hover .person__ini,.person:focus-within .person__ini{ background:var(--blau); color:#fff; }
.person__amt{
  font-size:.74rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--blau); margin:0;
}
.person__name{ font-family:var(--serif); font-weight:600; font-size:1.22rem; margin:.15rem 0 .6rem; }
.person__mail{
  margin-top:auto; font-size:.92rem; word-break:break-word; text-decoration:none;
  color:var(--grau); display:inline-flex; align-items:center; gap:.45rem;
}
.person__mail::before{ content:"\2709"; color:var(--blau); }
.person__mail:hover{ color:var(--blau); text-decoration:underline; }
@media (prefers-reduced-motion:reduce){
  .person,.person::before,.person__ini{ transition:none; }
  .person:hover,.person:focus-within{ transform:none; }
}

/* ---------- Kontakt ---------- */
.kontakt{
  display:grid; gap:clamp(2rem,5vw,4rem);
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
}
.anschrift{ font-style:normal; font-size:1.1rem; line-height:1.85; }
.anschrift a{ text-decoration:none; }
.anschrift a:hover{ text-decoration:underline; }

/* ---------- Hinweiskasten ---------- */
.hinweis{
  border-left:3px solid var(--blau);
  background:rgba(28,78,150,.06);
  padding:1.1rem 1.35rem;
  border-radius:0 8px 8px 0;
  font-size:.95rem; line-height:1.6; color:var(--grau);
  margin:1.6rem 0;
}
.hinweis b{ color:var(--tinte); }
.bloc--nacht .hinweis{
  background:rgba(246,243,237,.06);
  border-left-color:var(--blau-hell);
  color:rgba(246,243,237,.78);
}
.bloc--nacht .hinweis b{ color:#FBF8F2; }

/* ---------- Fußzeile ---------- */
.fuss{ background:var(--nacht); color:rgba(246,243,237,.72); padding:clamp(3rem,6vw,4.5rem) 0 2.5rem; font-size:.95rem; }
.fuss a{ color:rgba(246,243,237,.86); }
.fuss__oben{
  display:grid; gap:2.2rem;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  padding-bottom:2.4rem; border-bottom:1px solid var(--linie-hell);
}
.fuss h4{
  font-family:var(--sans); font-size:.78rem; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase;
  color:rgba(246,243,237,.52); margin:0 0 .9rem;
}
.fuss ul{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.fuss__zeichen{ color:rgba(246,243,237,.9); width:190px; margin-bottom:1rem; }
.fuss__unten{ padding-top:1.8rem; display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; font-size:.87rem; color:rgba(246,243,237,.55); }
.fuss__unten a{ color:rgba(246,243,237,.72); }

/* ---------- Rechtstexte ---------- */
.recht{ padding:calc(var(--kopf-h) + 4rem) 0 5rem; }
.recht h1{ font-size:clamp(2rem,5vw,2.9rem); }
.recht h2{ font-size:clamp(1.3rem,2.6vw,1.65rem); margin-top:2.4rem; }
.recht{ font-size:1.02rem; }
.recht .bahn{ max-width:var(--schmal); }

/* ---------- Veranstaltungskarte mit Diashow ---------- */
.fest__bild{
  position:relative; display:block; overflow:hidden;
  background:#DCD8D0; line-height:0;
}
.fest__bild img{ width:100%; aspect-ratio:3/2; object-fit:cover; transition:transform .7s cubic-bezier(.22,.7,.3,1); }
.fest:hover .fest__bild img{ transform:scale(1.04); }
.fest__zahl{
  position:absolute; right:.7rem; bottom:.7rem;
  background:rgba(11,27,51,.82); color:#F6F3ED;
  font-family:var(--sans); font-size:.78rem; font-weight:600; line-height:1;
  padding:.42rem .62rem; border-radius:5px;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.fest__bild:focus-visible{ outline:3px solid var(--blau-hell); outline-offset:-3px; }

/* ---------- Diashow ---------- */
body.steht{ overflow:hidden; }
.diashow{
  position:fixed; inset:0; z-index:500;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:clamp(.5rem,2vw,1.5rem); padding:clamp(1rem,4vw,3rem);
  background:rgba(7,16,32,.94);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.diashow[hidden]{ display:none; }
.diashow__rahmen{ margin:0; display:flex; flex-direction:column; align-items:center; gap:.9rem; min-width:0; }
.diashow__rahmen img{
  max-width:100%; max-height:76svh; width:auto; height:auto;
  border-radius:8px; box-shadow:0 30px 70px rgba(0,0,0,.6);
}
.diashow figcaption{
  color:rgba(246,243,237,.82); font-size:.95rem; text-align:center;
  max-width:60ch; line-height:1.5;
}
.diashow__pfeil,.diashow__zu{
  font-family:var(--sans); cursor:pointer;
  background:rgba(246,243,237,.10); color:#F6F3ED;
  border:1px solid rgba(246,243,237,.26); border-radius:50%;
  width:52px; height:52px; font-size:1.7rem; line-height:1;
  display:grid; place-items:center; padding:0;
  transition:background .2s,transform .15s;
}
.diashow__pfeil:hover,.diashow__zu:hover{ background:rgba(246,243,237,.22); transform:scale(1.06); }
.diashow__pfeil[hidden]{ visibility:hidden; display:grid; }
.diashow__zu{ position:absolute; top:clamp(.8rem,3vw,1.6rem); right:clamp(.8rem,3vw,1.6rem); font-size:1.9rem; }
.diashow__zahl{
  position:absolute; left:50%; bottom:clamp(.6rem,2.5vw,1.4rem); transform:translateX(-50%);
  margin:0; color:rgba(246,243,237,.6); font-size:.84rem; letter-spacing:.08em;
}
@media (max-width:620px){
  .diashow{ grid-template-columns:1fr; grid-template-rows:1fr auto; padding:3.5rem 1rem 3.5rem; }
  .diashow__pfeil{ position:absolute; bottom:2.6rem; width:46px; height:46px; }
  .diashow__pfeil--vor{ left:1rem; }
  .diashow__pfeil--zur{ right:1rem; }
  .diashow__zahl{ bottom:.5rem; }
}

/* Plakatlose Konzerte: statt eines Bildes das Datum als Marke */
.jubi__ohne{
  display:grid; place-items:center;
  aspect-ratio:3/4; border-radius:8px;
  border:1px solid rgba(246,243,237,.18);
  background:rgba(246,243,237,.05);
  font-family:var(--serif); font-weight:600;
  font-size:clamp(2.4rem,6vw,3.6rem); color:#F6F3ED;
  letter-spacing:-.02em;
}

/* ---------- Berichte aus dem Vereinsleben ---------- */
.berichte{
  display:grid; gap:1.4rem;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
@media (max-width:980px){ .berichte{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px){ .berichte{ grid-template-columns:1fr; } }

.bericht-karte{
  display:flex; flex-direction:column;
  background:var(--creme);
  border:1px solid var(--linie);
  border-radius:10px; overflow:hidden;
  text-decoration:none; color:inherit;
  transition:transform .3s,box-shadow .3s;
}
.bericht-karte:hover{ transform:translateY(-4px); box-shadow:0 18px 38px rgba(11,27,51,.12); color:inherit; }
.bericht-karte img{ width:100%; aspect-ratio:3/2; object-fit:cover; background:#DCD8D0; }
.bericht-karte__text{ padding:1.3rem 1.45rem 1.5rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.bericht-karte__datum{
  font-size:.78rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--blau); margin:0;
}
.bericht-karte h3{ font-size:1.18rem; margin:0; }
.bericht-karte p{ font-size:.96rem; color:var(--grau); line-height:1.6; margin:0; }
.bericht-karte__mehr{ margin-top:auto; padding-top:.7rem; font-size:.92rem; font-weight:600; color:var(--blau); }

.berichte-leer{
  border:1px dashed var(--linie); border-radius:10px;
  padding:2.2rem 1.6rem; text-align:center; color:var(--grau);
}

/* ---------- Einzelner Bericht ---------- */
.bericht{ padding:calc(var(--kopf-h) + 3.5rem) 0 5rem; }
.bericht .bahn{ max-width:var(--schmal); }
.bericht h1{ font-size:clamp(2rem,5vw,3.1rem); margin-bottom:.35em; }
.bericht .dach a{ text-decoration:none; }
.bericht__datum{
  font-size:.95rem; color:var(--grau);
  margin:0 0 2.2rem; padding-bottom:1.3rem; border-bottom:1px solid var(--linie);
}
.bericht h2{ font-size:clamp(1.3rem,2.6vw,1.7rem); margin-top:2.2rem; }
.bericht figure{ margin:2.2rem 0; }
.bericht figure img{ width:100%; border-radius:10px; background:#DCD8D0; }
.bericht figcaption{ font-size:.86rem; color:var(--grau); padding-top:.6rem; line-height:1.45; }
.bericht__bilder{ display:grid; gap:1rem; grid-template-columns:repeat(2,minmax(0,1fr)); margin:2.2rem 0; }
@media (max-width:620px){ .bericht__bilder{ grid-template-columns:1fr; } }
.bericht__bilder figure{ margin:0; }
.bericht__zurueck{ margin-top:3rem; padding-top:1.6rem; border-top:1px solid var(--linie); }

/* ---------- Singstunden (Mitsingen) ---------- */
.singstunde{
  margin-top:1.3rem; padding-top:1.1rem;
  border-top:1px solid var(--linie-hell);
  display:grid; gap:.45rem;
}
.singstunde div{ display:flex; gap:.9rem; align-items:baseline; font-size:.98rem; }
.singstunde b{
  flex:0 0 6.2rem;
  font-size:.76rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  color:rgba(246,243,237,.55);
}
.singstunde span{ flex:1; color:rgba(246,243,237,.88); }
.singstunde--offen span{ color:rgba(246,243,237,.55); font-style:italic; }

/* ============================================================
   Einblenden beim Scrollen.
   Verstecken NUR unter html.js, damit die Seite ohne JavaScript
   vollständig sichtbar bleibt.
   ============================================================ */
@media (prefers-reduced-motion:no-preference){
  html.js .auf{ opacity:0; transform:translateY(22px); }
  html.js .auf.da{
    opacity:1; transform:none;
    transition:opacity .7s cubic-bezier(.22,.7,.3,1),transform .7s cubic-bezier(.22,.7,.3,1);
  }
  html.js .auf--2.da{ transition-delay:.09s; }
  html.js .auf--3.da{ transition-delay:.18s; }
}

@media print{
  .kopf,.hero__runter,.schalter,.entwurf{ display:none !important; }
  body{ background:#fff; font-size:11pt; }
}


/* ---------- Fehlerseite 404 ---------- */
.fehlerseite{
  min-height:100vh; display:flex; align-items:center;
  padding:calc(var(--kopf-h) + 3rem) 0 4rem; background:var(--creme); text-align:center;
}
.fehlerseite .bahn{ max-width:46rem; }
.fehler-noten{ display:block; width:min(560px,94%); height:auto; margin:0 auto clamp(1.4rem,4vw,2.4rem); overflow:visible; }
.fehler-noten .linien line{ stroke:var(--blau); stroke-width:2; opacity:.25; }
.fehler-noten .ziffer{ font-family:var(--serif); font-weight:600; font-size:182px; fill:var(--nacht); }
.fehler-noten .note{
  fill:none; stroke:var(--blau); stroke-width:11;
  transform-box:fill-box; transform-origin:center; transform:rotate(-18deg);
  animation:note-wippen 2.8s ease-in-out infinite;
}
@keyframes note-wippen{
  0%,100%{ transform:translateY(0) rotate(-18deg); }
  50%    { transform:translateY(-14px) rotate(-10deg); }
}
.fehlerseite h1{ font-size:clamp(2rem,5vw,3.1rem); line-height:1.1; margin:.35rem 0 1rem; }
.fehlerseite .vor{ max-width:34em; margin:0 auto 2rem; }
.fehler-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem; margin-top:2.2rem; }
.fehler-links a{
  display:inline-block; padding:.5rem 1rem; border-radius:999px;
  border:1px solid var(--linie); background:var(--weiss); color:var(--tinte);
  font-size:.95rem; text-decoration:none;
  transition:border-color .2s,color .2s,transform .2s;
}
.fehler-links a:hover{ border-color:var(--blau); color:var(--blau); transform:translateY(-2px); }
@media (prefers-reduced-motion:reduce){
  .fehler-noten .note{ animation:none; }
  .fehler-links a{ transition:none; }
}