/* ---------- Palette ---------- */

:root {
  --dunkel: #101d16;
  --dunkel-alt: #16271d;
  --dunkel-tief: #0a140f;
  --gold: #c9a961;
  --gold-hell: #dcbe7c;
  --gold-tief: #8a6a15;
  --gold-tinte: #7a5d12;
  --creme: #f4efe4;
  --creme-alt: #ebe3d1;
  --tinte: #1c2a21;
  --breite: 1120px;
  --kopf-hoehe: 72px;
}

/* ---------- Themen: dunkel (Startseite, Rahmen) und hell (Inhalt der Unterseiten) ---------- */

:root, .topbar, .kopf, .seitenkopf, .fuss, .lightbox, .dummy-leiste {
  --bg: var(--dunkel);
  --bg-alt: var(--dunkel-alt);
  --flaeche: #132219;
  --text: var(--creme);
  --text-lesen: #d9d5c8;
  --text-gedaempft: #a8a89a;
  --linie: rgba(201, 169, 97, 0.22);
  --akzent: var(--gold);
  --knopf-bg: var(--gold);
  --knopf-text: var(--dunkel);
  --knopf-hover: var(--gold-hell);
  --rahmen: var(--gold);
  --wasserzeichen: rgba(201, 169, 97, 0.07);
  --schatten: rgba(0, 0, 0, 0.45);
  color-scheme: dark;
}

.thema-hell, .abschnitt-papier {
  --bg: var(--creme);
  --bg-alt: var(--creme-alt);
  --flaeche: #fbf8f1;
  --text: var(--tinte);
  --text-lesen: #2e3a31;
  --text-gedaempft: #5a6257;
  --linie: rgba(138, 106, 21, 0.24);
  --akzent: var(--gold-tinte);
  --knopf-bg: var(--dunkel);
  --knopf-text: var(--creme);
  --knopf-hover: var(--gold-tinte);
  --rahmen: var(--tinte);
  --wasserzeichen: rgba(138, 106, 21, 0.08);
  --schatten: rgba(28, 42, 33, 0.18);
  color-scheme: light;
}

/* ---------- Basis ---------- */

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf-hoehe) + 16px); }
html:has(.sprungnav) { scroll-padding-top: calc(var(--kopf-hoehe) + 64px); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

[hidden] { display: none !important; }

.serif { font-family: Georgia, "Iowan Old Style", "Times New Roman", serif; }

a { color: var(--akzent); }

h1, h2, h3 { font-weight: 400; line-height: 1.2; }

.huelle { width: 100%; max-width: var(--breite); margin: 0 auto; padding: 0 20px; }
.schmal { max-width: 760px; }
.mitte { text-align: center; }

.nur-vorlesen {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.sprunglink {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--gold);
  color: var(--dunkel);
  font-weight: 700;
}
.sprunglink:focus { top: 12px; }

:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }

/* ---------- Topbar ---------- */

.topbar {
  background: var(--dunkel-tief);
  border-bottom: 1px solid var(--linie);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}
.topbar .huelle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 22px;
  padding-top: 9px;
  padding-bottom: 9px;
}
.topbar-info { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.topbar-info span, .topbar a { display: inline-flex; align-items: center; gap: 7px; }
.topbar-info span { color: var(--text-gedaempft); }
.topbar a { color: var(--text-gedaempft); text-decoration: none; }
.topbar a:hover, .topbar a:focus-visible { color: var(--akzent); }
.topbar svg { width: 14px; height: 14px; flex: none; color: var(--akzent); }
.topbar .sozial svg { width: 17px; height: 17px; }
@media (max-width: 559px) {
  .topbar-info .anschrift { display: none; }
}

/* ---------- Kopf & Navigation ---------- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(16, 29, 22, 0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linie);
  color: var(--text);
}
.kopf-innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: var(--kopf-hoehe);
}

.marke {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  text-decoration: none;
  min-width: 0;
}
.marke-medaillon {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--creme);
  border: 1.5px solid var(--gold);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.marke-medaillon img { width: 36px; height: 36px; mix-blend-mode: multiply; }
.marke-text { display: flex; flex-direction: column; min-width: 0; }
.marke-name { font-size: 1.02rem; line-height: 1.25; letter-spacing: 0.02em; }
.marke-zusatz {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--akzent);
}

.hauptnav ul { list-style: none; margin: 0; padding: 0; }
.hauptnav a {
  display: block;
  color: var(--text);
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.hauptnav a:hover, .hauptnav a:focus-visible { color: var(--akzent); }
.hauptnav .ist-aktiv > a, .hauptnav a[aria-current="page"] { color: var(--akzent); }

.untermenue-schalter {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--text-gedaempft);
  cursor: pointer;
}
.untermenue-schalter svg { width: 16px; height: 16px; transition: transform 0.18s ease; }
.untermenue-schalter[aria-expanded="true"] svg { transform: rotate(180deg); }

.nav-schalter {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 1px solid var(--linie);
  color: var(--text);
  cursor: pointer;
  place-items: center;
}
.nav-schalter svg { width: 22px; height: 22px; }
.nav-schalter-zu { display: none; }
.nav-schalter[aria-expanded="true"] .nav-schalter-auf { display: none; }
.nav-schalter[aria-expanded="true"] .nav-schalter-zu { display: block; }

@media (min-width: 900px) {
  .hauptnav > ul { display: flex; align-items: center; gap: 30px; }
  .hauptnav > ul > li { position: relative; display: flex; align-items: center; }
  .hauptnav > ul > li > a { padding: 24px 0; border-bottom: 2px solid transparent; }
  .hauptnav > ul > li.ist-aktiv > a { border-bottom-color: var(--akzent); }
  .hat-kinder > a { padding-right: 2px; }
  .untermenue {
    position: absolute;
    top: 100%;
    left: -18px;
    min-width: 200px;
    padding: 8px 0 !important;
    background: var(--bg-alt);
    border: 1px solid var(--linie);
    box-shadow: 0 14px 34px var(--schatten);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
  }
  .untermenue a { padding: 10px 18px; letter-spacing: 0.1em; }
  .untermenue a:hover { background: rgba(201, 169, 97, 0.08); }
  .hat-kinder:hover .untermenue,
  .hat-kinder:focus-within .untermenue,
  .untermenue-schalter[aria-expanded="true"] + .untermenue {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}

@media (max-width: 899px) {
  :root { --kopf-hoehe: 64px; }
  .nav-schalter { display: grid; }
  .marke-medaillon { width: 40px; height: 40px; }
  .marke-medaillon img { width: 31px; height: 31px; }
  .marke-name { font-size: 0.95rem; }
  .hauptnav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100vh - var(--kopf-hoehe));
    overflow-y: auto;
    background: var(--bg-alt);
    border-bottom: 1px solid var(--linie);
    box-shadow: 0 18px 30px var(--schatten);
  }
  .hauptnav.ist-offen { display: block; }
  .hauptnav > ul { padding: 8px 20px 18px; }
  .hauptnav li { border-bottom: 1px solid var(--linie); }
  .hauptnav li:last-child { border-bottom: 0; }
  .hauptnav a { padding: 15px 0; font-size: 0.88rem; }
  .hat-kinder { display: grid; grid-template-columns: 1fr 44px; align-items: center; }
  .hat-kinder .untermenue-schalter { width: 44px; height: 44px; }
  .untermenue { display: none; grid-column: 1 / -1; padding: 0 0 8px 16px !important; }
  .untermenue li { border: 0; }
  .untermenue a { padding: 10px 0; font-size: 0.84rem; color: var(--text-gedaempft); }
  .untermenue-schalter[aria-expanded="true"] + .untermenue { display: block; }
}

/* ---------- Knoepfe ---------- */

.knopf {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 14px 26px;
  background: var(--knopf-bg);
  border: 1px solid var(--knopf-bg);
  color: var(--knopf-text);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.knopf:hover, .knopf:focus-visible { background: var(--knopf-hover); border-color: var(--knopf-hover); color: var(--knopf-text); }
.knopf svg { width: 16px; height: 16px; flex: none; }
.knopf-rahmen { background: transparent; border-color: var(--rahmen); color: var(--rahmen); }
.knopf-rahmen:hover, .knopf-rahmen:focus-visible { background: var(--rahmen); border-color: var(--rahmen); color: var(--bg); }

.knopf-reihe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.knopf-reihe-mitte { justify-content: center; }

/* ---------- Ornament, Kicker ---------- */

.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 22px 0;
}
.ornament i {
  display: block;
  width: clamp(48px, 14vw, 96px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--akzent));
}
.ornament i:last-child { background: linear-gradient(90deg, var(--akzent), transparent); }
.ornament svg { width: 16px; height: 16px; color: var(--akzent); flex: none; }
.ornament-links { justify-content: flex-start; }
.ornament-links i:first-child { display: none; }

.kicker {
  margin: 0 0 10px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--akzent);
}

/* ---------- Hero Startseite ---------- */

.hero {
  position: relative;
  isolation: isolate;
  padding: 64px 0 80px;
  text-align: center;
  overflow: hidden;
  text-shadow: 0 2px 14px rgba(8, 16, 12, 0.55);
}
.hero::before, .seitenkopf-bild {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url("hero-small.jpg");
  background-size: cover;
  background-position: center 38%;
}
.hero::after, .seitenkopf::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 70% 62% at 50% 44%, rgba(16, 29, 22, 0.5) 0%, rgba(16, 29, 22, 0.74) 100%),
    linear-gradient(180deg, rgba(16, 29, 22, 0.62) 0%, rgba(16, 29, 22, 0.4) 42%, rgba(16, 29, 22, 0.94) 100%);
}
@media (min-width: 760px) {
  .hero::before { background-image: url("hero.jpg"); }
  .hero { padding: 88px 0 104px; }
}

.medaillon {
  width: 122px;
  height: 122px;
  margin: 0 auto 26px;
  border-radius: 50%;
  background: var(--creme);
  border: 2px solid var(--gold);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.medaillon img { width: 96px; height: 96px; mix-blend-mode: multiply; }

.wortmarke {
  margin: 0;
  font-size: clamp(1.15rem, 4.4vw, 1.45rem);
  letter-spacing: 0.06em;
}
.zusatz {
  margin: 6px 0 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--akzent);
}
.hero h1 {
  margin: 0 auto 18px;
  max-width: 17ch;
  font-size: clamp(1.9rem, 7vw, 3.5rem);
  line-height: 1.16;
  letter-spacing: -0.01em;
}
.hero h1 em { color: var(--akzent); }
.hero-intro { margin: 0 auto; max-width: 48ch; color: var(--text-gedaempft); }

/* ---------- Seitenkopf Unterseiten ---------- */

.seitenkopf {
  position: relative;
  isolation: isolate;
  padding: 44px 0 56px;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  border-bottom: 2px solid var(--gold);
  text-shadow: 0 2px 14px rgba(8, 16, 12, 0.55);
}
.seitenkopf h1 { margin: 0; font-size: clamp(1.9rem, 6vw, 3rem); max-width: 22ch; }
.seitenkopf-intro { margin: 14px 0 0; max-width: 58ch; color: var(--text-gedaempft); }
@media (min-width: 760px) {
  .seitenkopf { padding: 60px 0 76px; }
}

.brotkrumen ol {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
  font-size: 0.8rem;
  color: var(--text-gedaempft);
}
.brotkrumen li + li::before { content: "/"; margin: 0 10px; color: var(--akzent); opacity: 0.6; }
.brotkrumen a { color: var(--text-gedaempft); text-decoration: none; }
.brotkrumen a:hover { color: var(--akzent); }

/* ---------- Abschnitte ---------- */

.abschnitt { position: relative; padding: 72px 0 80px; overflow: hidden; }
.abschnitt-alt { background: var(--bg-alt); }
.abschnitt-papier { background: var(--bg); color: var(--text); }
@media (min-width: 760px) {
  .abschnitt { padding: 92px 0 100px; }
}

.abschnitt-kopf { position: relative; margin-bottom: 44px; text-align: center; }
.abschnitt-kopf h2 { position: relative; margin: 0; font-size: clamp(1.6rem, 5.2vw, 2.4rem); }
.abschnitt-kopf .ornament { margin: 20px 0 0; }
.abschnitt-intro { position: relative; margin: 18px auto 0; max-width: 54ch; color: var(--text-gedaempft); }

.wasserzeichen {
  position: absolute;
  top: -34px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-size: clamp(3.6rem, 14vw, 8.5rem);
  line-height: 1;
  font-style: italic;
  white-space: nowrap;
  color: var(--wasserzeichen);
  user-select: none;
  pointer-events: none;
}

/* ---------- Highlight naechster Termin ---------- */

.highlight {
  display: grid;
  gap: 32px;
  align-items: center;
}
.highlight-bild {
  display: block;
  max-width: 420px;
  width: 100%;
  margin: 0 auto;
  border: 1px solid var(--linie);
  box-shadow: 0 24px 50px var(--schatten);
  transition: transform 0.25s ease;
}
.highlight-bild:hover { transform: translateY(-3px); }
.highlight-text h2 { margin: 0; font-size: clamp(1.8rem, 5.6vw, 2.8rem); }
.highlight-unter { margin: 6px 0 0; color: var(--akzent); font-style: italic; font-family: Georgia, serif; font-size: 1.1rem; }
.highlight-text > p:not(.kicker):not(.highlight-unter) { color: var(--text-gedaempft); max-width: 50ch; }
@media (min-width: 860px) {
  .highlight { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; }
  .highlight-bild { margin: 0; }
}

.fakten-kurz { margin: 22px 0 18px; padding: 0; list-style: none; display: grid; gap: 8px; }
.fakten-kurz li { display: flex; align-items: flex-start; gap: 10px; }
.fakten-kurz svg { width: 18px; height: 18px; margin-top: 4px; flex: none; color: var(--akzent); }

/* ---------- Event-Karten ---------- */

.karten-raster {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

.karte { background: var(--flaeche); border: 1px solid var(--linie); transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; }
.karte:hover { border-color: var(--akzent); transform: translateY(-3px); box-shadow: 0 14px 30px var(--schatten); }
.karte-link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.karte-bild { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--dunkel-tief); border-bottom: 1px solid var(--linie); }
.karte-bild img { width: 100%; height: 100%; object-fit: cover; }
.karte-bild img.ist-plakat { object-position: center 20%; }
.karte-ohne-bild {
  display: grid;
  place-items: center;
  height: 100%;
  background:
    radial-gradient(circle at 50% 45%, rgba(201, 169, 97, 0.14), transparent 60%),
    var(--dunkel-alt);
}
.karte-ohne-bild img { width: 74px; height: 74px; opacity: 0.35; filter: invert(1) sepia(1) saturate(2) hue-rotate(5deg); }

.datumsmarke {
  position: absolute;
  top: 14px;
  left: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 58px;
  padding: 7px 8px 6px;
  background: var(--gold);
  color: var(--dunkel);
  line-height: 1;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}
.datumsmarke-tag { font-family: Georgia, serif; font-size: 1.5rem; }
.datumsmarke-monat { margin-top: 3px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.datumsmarke-jahr { margin-top: 3px; font-size: 0.62rem; font-weight: 600; opacity: 0.75; }

.karte-text { display: flex; flex-direction: column; gap: 6px; padding: 20px 20px 22px; }
.karte-format { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--akzent); }
.karte-titel { font-size: 1.32rem; line-height: 1.25; margin-bottom: 6px; }
.karte-meta { display: flex; align-items: flex-start; gap: 8px; font-size: 0.86rem; color: var(--text-gedaempft); }
.karte-meta svg { width: 15px; height: 15px; margin-top: 3px; flex: none; color: var(--akzent); }

.abschnitt > .huelle > .mitte { margin: 40px 0 0; }

/* ---------- Jahreslauf ---------- */

.jahreslauf {
  display: grid;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}
.jahreslauf a {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
  border-top: 1px solid var(--akzent);
  padding-top: 18px;
}
.jahreslauf-bild { display: block; aspect-ratio: 3 / 2; overflow: hidden; margin-bottom: 16px; }
.jahreslauf-bild img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85); transition: transform 0.4s ease, filter 0.4s ease; }
.jahreslauf a:hover .jahreslauf-bild img { transform: scale(1.04); filter: none; }
.jahreslauf-zeit { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--akzent); }
.jahreslauf-titel { margin: 6px 0 8px; font-size: 1.45rem; }
.jahreslauf-text { font-size: 0.92rem; color: var(--text-gedaempft); }
.jahreslauf a:hover .jahreslauf-titel { color: var(--akzent); }

/* ---------- Geteilt: Bild + Text ---------- */

.geteilt { display: grid; gap: 40px; align-items: center; }
.geteilt-bild { margin: 0; }
.geteilt-bild img { width: 100%; box-shadow: 0 18px 40px var(--schatten); }
.abschnitt-papier .geteilt-bild img { filter: sepia(0.2); }
.geteilt-plakat { max-width: 360px; justify-self: center; }
.geteilt-bild figcaption { margin-top: 12px; font-size: 0.82rem; color: var(--text-gedaempft); font-style: italic; }
.geteilt-text h2 { margin: 0; font-size: clamp(1.6rem, 5vw, 2.3rem); }
.geteilt-text .ornament { margin: 18px 0 20px; }
@media (min-width: 860px) {
  .geteilt { grid-template-columns: 1fr 1fr; gap: 72px; }
}

.fakten-band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 30px 0 0;
  padding: 22px 0;
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
}
.fakten-band div { display: flex; flex-direction: column-reverse; }
.fakten-band dt { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-gedaempft); }
.fakten-band dd { margin: 0 0 4px; font-size: clamp(1.7rem, 5vw, 2.3rem); color: var(--akzent); line-height: 1; }

/* ---------- Instagram ---------- */

.insta-feed { position: relative; }
.insta-raster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 760px) {
  .insta-raster { grid-template-columns: repeat(6, 1fr); gap: 8px; }
}
.insta-raster a { display: block; aspect-ratio: 1; overflow: hidden; pointer-events: none; }
.insta-raster img { width: 100%; height: 100%; object-fit: cover; filter: blur(14px) grayscale(0.6) brightness(0.55); transform: scale(1.15); transition: filter 0.5s ease, transform 0.5s ease; }

.insta-einwilligung {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
  background: rgba(10, 20, 15, 0.45);
}
.insta-einwilligung p { margin: 10px 0 0; max-width: 46ch; font-size: 0.9rem; }
.insta-einwilligung .knopf-reihe { justify-content: center; margin-top: 18px; }
.insta-symbol svg { width: 30px; height: 30px; color: var(--akzent); }
@media (max-width: 759px) {
  .insta-einwilligung { position: static; background: none; padding: 26px 0 0; }
}

.insta-feed.ist-geladen .insta-einwilligung { display: none; }
.insta-feed.ist-geladen .insta-raster a { pointer-events: auto; }
.insta-feed.ist-geladen .insta-raster img { filter: none; transform: none; }
.insta-feed.ist-geladen .insta-raster a:hover img { transform: scale(1.05); }
.insta-hinweis { margin: 18px 0 0; text-align: center; font-size: 0.86rem; color: var(--text-gedaempft); }

/* ---------- Kontakt ---------- */

.kontakt-abschnitt { text-align: center; }
.kontaktdaten { font-size: 1.06rem; line-height: 2; }
.kontaktdaten p { margin: 0; }
.kontaktdaten svg { width: 1em; height: 1em; margin-right: 0.55em; vertical-align: -0.13em; color: var(--akzent); }
.kontaktdaten a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--linie); }
.kontaktdaten a:hover, .kontaktdaten a:focus-visible { color: var(--akzent); border-bottom-color: var(--akzent); }

/* ---------- Events: Termine ---------- */

.termine { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.termin a {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 18px;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.termin a:hover { border-color: var(--akzent); box-shadow: 0 12px 26px var(--schatten); }
.termin .datumsmarke { position: static; min-width: 68px; padding: 10px 10px 8px; }
.termin-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.termin-titel { font-size: clamp(1.25rem, 3.6vw, 1.7rem); line-height: 1.2; }
.termin-meta { font-size: 0.88rem; color: var(--text-gedaempft); }
.termin-bild { display: none; width: 96px; aspect-ratio: 3 / 4; overflow: hidden; }
.termin-bild img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.termin-pfeil svg { width: 22px; height: 22px; color: var(--akzent); }
@media (min-width: 700px) {
  .termin a { grid-template-columns: auto 1fr auto auto; padding: 20px 26px; gap: 28px; }
  .termin-bild { display: block; }
}
@media (max-width: 479px) {
  .termin a { grid-template-columns: auto 1fr; }
  .termin-pfeil { display: none; }
}

.leer-hinweis { margin: 0; padding: 28px; text-align: center; color: var(--text-gedaempft); border: 1px dashed var(--linie); }

/* ---------- Events: Filter & Jahre ---------- */

.filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0 0 44px;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  background: transparent;
  border: 1px solid var(--linie);
  border-radius: 999px;
  color: var(--text);
  font: inherit;
  font-size: 0.84rem;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.filter-chip span { font-size: 0.74rem; color: var(--text-gedaempft); }
.filter-chip:hover { border-color: var(--akzent); }
.filter-chip[aria-pressed="true"] { background: var(--knopf-bg); border-color: var(--knopf-bg); color: var(--knopf-text); font-weight: 600; }
.filter-chip[aria-pressed="true"] span { color: var(--knopf-text); opacity: 0.7; }

.jahr-gruppe + .jahr-gruppe { margin-top: 48px; }
.jahr-titel {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 22px;
  font-size: 1.9rem;
  color: var(--akzent);
}
.jahr-titel::after { content: ""; flex: 1; height: 1px; background: var(--linie); }

/* ---------- Events: Formate ---------- */

.formate { display: grid; gap: 72px; }
.format-reihe .geteilt-text h3 { margin: 0; font-size: clamp(1.6rem, 4.6vw, 2.2rem); }
.format-reihe .geteilt-text > p:not(.kicker) { color: var(--text-lesen); }
.format-reihe .geteilt-bild img { aspect-ratio: 4 / 3; object-fit: cover; object-position: top; border: 1px solid var(--linie); }
@media (min-width: 860px) {
  .geteilt-umgekehrt .geteilt-bild { order: 2; }
}

/* ---------- Event-Detail ---------- */

.event-raster { display: grid; gap: 40px; }
@media (min-width: 960px) {
  .event-raster { grid-template-columns: 360px minmax(0, 1fr); gap: 64px; align-items: start; }
  .event-seite { position: sticky; top: calc(var(--kopf-hoehe) + 24px); }
}
.event-seite { display: grid; gap: 20px; align-content: start; }

.event-bild { position: relative; display: block; max-width: 360px; border: 1px solid var(--linie); box-shadow: 0 20px 44px var(--schatten); }
.event-bild-lupe {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 5px 10px;
  background: rgba(10, 20, 15, 0.85);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.event-bild:hover .event-bild-lupe, .event-bild:focus-visible .event-bild-lupe { opacity: 1; }

.fakten-box { display: grid; gap: 12px; padding: 24px; background: var(--flaeche); border: 1px solid var(--linie); }
.fakten-box .kicker { margin: 0; }
.fakten { display: grid; gap: 12px; margin: 0 0 8px; }
.fakten div { display: grid; gap: 2px; padding-bottom: 12px; border-bottom: 1px solid var(--linie); }
.fakten dt { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-gedaempft); }
.fakten dd { margin: 0; }
.knopf-voll { justify-content: center; width: 100%; }

.termin-liste { margin: 0 0 8px; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 0.92rem; }
.termin-liste li { padding-left: 14px; border-left: 2px solid var(--akzent); }
.termin-liste span { color: var(--text-gedaempft); }

.event-haupt { max-width: 68ch; }
.event-haupt > p { color: var(--text-lesen); }
.event-lead { margin-top: 0; font-size: clamp(1.25rem, 3.4vw, 1.55rem); line-height: 1.45; color: var(--text) !important; }

.event-block { margin-top: 52px; }
.event-block > h2 {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 22px;
  font-size: 1.6rem;
}
.event-block > h2::after { content: ""; flex: 1; height: 1px; background: var(--linie); }

.mitwirkende { display: grid; gap: 16px 28px; margin: 0; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.mitwirkende dt { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--akzent); }
.mitwirkende dd { margin: 3px 0 0; }

.galerie { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.galerie a { display: block; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--linie); }
.galerie img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.galerie a:hover img { transform: scale(1.04); }

.presse {
  display: grid;
  gap: 24px;
  align-items: center;
  padding: 26px;
  background: var(--flaeche);
  border: 1px solid var(--linie);
}
.presse + .presse { margin-top: 16px; }
.presse h3 { margin: 0 0 18px; font-size: 1.35rem; }
.presse-bild { display: block; max-width: 220px; box-shadow: 0 10px 26px var(--schatten); }
.presse-bild img { filter: sepia(0.15); }
@media (min-width: 600px) {
  .presse { grid-template-columns: 180px 1fr; }
}

.intern { margin-top: 52px; border: 1px dashed var(--akzent); background: rgba(201, 169, 97, 0.07); }
.intern summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 18px 22px;
  cursor: pointer;
  list-style: none;
}
.intern summary::-webkit-details-marker { display: none; }
.intern summary svg { width: 20px; height: 20px; margin-left: auto; color: var(--akzent); transition: transform 0.18s ease; }
.intern[open] summary svg { transform: rotate(180deg); }
.intern-marke {
  padding: 3px 9px;
  background: var(--gold);
  color: var(--dunkel);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.intern-titel { font-family: Georgia, serif; font-size: 1.2rem; }
.intern-inhalt { padding: 0 22px 22px; }
.intern-inhalt > p { color: var(--text-gedaempft); font-size: 0.92rem; }
.probenplan { margin: 0; display: grid; }
.probenplan div { display: grid; gap: 2px 20px; padding: 11px 0; border-top: 1px solid var(--linie); }
.probenplan dt { font-weight: 600; }
.probenplan dd { margin: 0; color: var(--text-gedaempft); }
@media (min-width: 600px) {
  .probenplan div { grid-template-columns: 190px 1fr; }
}

.blaettern {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 64px;
  padding-top: 28px;
  border-top: 1px solid var(--linie);
}
.blaettern a { display: flex; flex-direction: column; gap: 4px; color: inherit; text-decoration: none; }
.blaettern span { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--akzent); }
.blaettern strong { font-weight: 400; font-size: 1.1rem; }
.blaettern a:hover strong { color: var(--akzent); }
.blaettern-vor { text-align: right; }
.blaettern-zurueck span::before { content: "← "; }
.blaettern-vor span::after { content: " →"; }

/* ---------- Sprungnavigation ---------- */

.sprungnav {
  position: sticky;
  top: var(--kopf-hoehe);
  z-index: 40;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--linie);
}
.sprungnav ul {
  display: flex;
  gap: 6px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.sprungnav a {
  display: block;
  padding: 14px 0;
  white-space: nowrap;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
}
.sprungnav a {
  border-bottom: 2px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.sprungnav a:hover, .sprungnav a:focus-visible { color: var(--akzent); }
.sprungnav a[aria-current="true"] { color: var(--akzent); border-bottom-color: var(--akzent); }

/* ---------- Zeitleiste ---------- */

.zeitleiste { position: relative; max-width: 920px; margin: 0 auto; padding: 0; list-style: none; }
.zeitleiste::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 7px;
  width: 1px;
  background: var(--linie);
}
.zeit-eintrag { position: relative; display: grid; gap: 4px; padding: 0 0 44px 40px; }
.zeit-eintrag:last-child { padding-bottom: 0; }
.zeit-eintrag::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 15px;
  height: 15px;
  border: 2px solid var(--akzent);
  border-radius: 50%;
  background: var(--bg);
}
.abschnitt-alt .zeit-eintrag::before { background: var(--bg-alt); }
.zeit-jahr { margin: 0; font-size: 1.9rem; line-height: 1.1; color: var(--akzent); }
.zeit-inhalt h3 { margin: 0 0 4px; font-size: 1.35rem; }
.zeit-inhalt > p { margin: 8px 0 0; color: var(--text-lesen); max-width: 64ch; }
.zeit-inhalt > .zeit-ort { margin-top: 0; font-style: italic; color: var(--text-gedaempft); }
.zeit-quelle { font-size: 0.82rem; color: var(--text-gedaempft) !important; }
.zeit-bilder { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.zeit-bilder a { display: block; width: min(100%, 260px); border: 1px solid var(--linie); box-shadow: 0 10px 24px var(--schatten); }
.zeit-bilder img { width: 100%; }
@media (min-width: 760px) {
  .zeitleiste::before { left: 147px; }
  .zeit-eintrag { grid-template-columns: 110px 1fr; gap: 0 70px; padding-left: 0; }
  .zeit-eintrag::before { left: 140px; }
  .zeit-jahr { text-align: right; }
}

.zeit-event {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 460px;
  margin-top: 14px;
  padding: 12px;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s ease;
}
.zeit-event:hover { border-color: var(--akzent); }
.zeit-event img { width: 64px; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; flex: none; }
.zeit-event > span { display: flex; flex-direction: column; gap: 3px; }
.zeit-event strong { font-weight: 400; font-size: 1.1rem; }
.zeit-event-mehr { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--akzent); }
.zeit-event-mehr svg { width: 14px; height: 14px; }

.chronik-lead { max-width: 64ch; margin: -12px auto 56px; text-align: center; color: var(--text-lesen); }

.aufruf { margin-top: 28px; padding: 26px; border: 1px dashed var(--akzent); background: var(--flaeche); }
.aufruf p { margin: 0; font-size: 1.2rem; line-height: 1.45; }
.aufruf .knopf { margin-top: 20px; }

/* ---------- Ueber uns: Teaser ---------- */

.teaser-raster { display: grid; gap: 24px; }
@media (min-width: 760px) {
  .teaser-raster { grid-template-columns: 1fr 1fr; }
}
.teaser {
  display: flex;
  flex-direction: column;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.teaser:hover { border-color: var(--akzent); transform: translateY(-3px); box-shadow: 0 16px 34px var(--schatten); }
.teaser-bild { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 1px solid var(--linie); }
.teaser-bild img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.teaser-text { display: flex; flex-direction: column; gap: 8px; padding: 26px 28px 30px; }
.teaser-text .kicker { margin: 0; }
.teaser-titel { font-size: 2rem; line-height: 1.1; }
.teaser-beschreibung { color: var(--text-lesen); }
.teaser-mehr { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--akzent); }
.teaser-mehr svg { width: 15px; height: 15px; }

/* ---------- Verein ---------- */

.portrait { text-align: center; }
.portrait h2 { margin: 0; font-size: clamp(1.7rem, 5vw, 2.5rem); }
.portrait > p:not(.kicker) { color: var(--text-lesen); font-size: 1.08rem; }
.portrait-medaillon { width: 72px; height: 72px; margin: 0 auto 22px; }
.portrait-medaillon img { width: 56px; height: 56px; }

.vorstand {
  display: grid;
  gap: 1px;
  margin: 0;
  background: var(--linie);
  border: 1px solid var(--linie);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
}
.vorstand div { padding: 22px 24px; background: var(--bg); }
.vorstand dt { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--akzent); }
.vorstand dd { margin: 6px 0 0; font-size: 1.2rem; line-height: 1.3; }
.quelle-hinweis { margin: 16px 0 0; font-size: 0.8rem; color: var(--text-gedaempft); text-align: right; }

.spalten { display: grid; gap: 48px; }
@media (min-width: 860px) {
  .spalten { grid-template-columns: 1fr 1fr; gap: 72px; }
}
.spalten h3 { margin: 0 0 12px; font-size: 1.6rem; }
.spalten p { color: var(--text-lesen); }
.spalten h4 { margin: 26px 0 12px; }
.tagesordnung { margin: 0; padding: 0; list-style: none; counter-reset: punkt; }
.tagesordnung li { counter-increment: punkt; display: flex; gap: 14px; padding: 9px 0; border-top: 1px solid var(--linie); }
.tagesordnung li::before { content: counter(punkt) "."; min-width: 1.6em; font-family: Georgia, serif; color: var(--akzent); }
.ehrennadel { margin: 24px 0 0; max-width: 260px; }
.ehrennadel a { display: block; border: 1px solid var(--linie); box-shadow: 0 12px 26px var(--schatten); }
.ehrennadel figcaption { margin-top: 10px; font-size: 0.82rem; font-style: italic; color: var(--text-gedaempft); }
.unterkopf { margin: 64px 0 24px; font-size: 1.5rem; text-align: center; }

.vereinsdaten { margin-top: 32px; }

/* ---------- Kontakt & Rechtliches ---------- */

.kontakt-raster { display: grid; gap: 48px; align-items: start; }
@media (min-width: 900px) {
  .kontakt-raster { grid-template-columns: 5fr 6fr; gap: 72px; }
}
.kontakt-karte { padding: 34px; background: var(--flaeche); border: 1px solid var(--linie); box-shadow: 0 18px 40px var(--schatten); }
.kontakt-karte h2 { margin: 0; font-size: clamp(1.8rem, 5vw, 2.4rem); }
.kontakt-funktion { margin: 4px 0 0; color: var(--text-gedaempft); }
.kontakt-liste { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; font-size: 1.05rem; }
.kontakt-liste li { display: flex; gap: 12px; align-items: flex-start; }
.kontakt-liste svg { width: 20px; height: 20px; margin-top: 4px; flex: none; color: var(--akzent); }
.kontakt-liste a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--linie); }
.kontakt-liste a:hover, .kontakt-liste a:focus-visible { color: var(--akzent); border-bottom-color: var(--akzent); }

.anliegen > .kicker { margin-bottom: 18px; }
.anliegen-eintrag { padding: 22px 0; border-top: 1px solid var(--linie); }
.anliegen-eintrag:last-child { border-bottom: 1px solid var(--linie); }
.anliegen-eintrag h3 { margin: 0 0 6px; font-size: 1.35rem; }
.anliegen-eintrag p { margin: 0 0 10px; color: var(--text-lesen); }
.anliegen-eintrag a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.anliegen-eintrag a svg { width: 15px; height: 15px; flex: none; }
.anliegen-eintrag a:hover { text-decoration: underline; }

.rechtstext h3 {
  margin: 28px 0 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--akzent);
}
.rechtstext h3:first-child { margin-top: 0; }
.rechtstext p { margin: 0; color: var(--text-lesen); }

.platzhalter { padding: 28px; border: 2px dashed var(--akzent); background: var(--flaeche); }
.platzhalter-marke {
  display: inline-block;
  margin: 0 0 14px;
  padding: 3px 10px;
  background: var(--gold);
  color: var(--dunkel);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.platzhalter p, .platzhalter li { color: var(--text-lesen); }
.platzhalter ul { margin: 12px 0 0; padding-left: 20px; }

/* ---------- Lightbox ---------- */

.lightbox {
  max-width: min(96vw, 1100px);
  max-height: 94vh;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--text);
  overflow: visible;
}
.lightbox::backdrop { background: rgba(6, 12, 9, 0.9); }
.lightbox figure { margin: 0; }
.lightbox img { max-width: 100%; max-height: 84vh; margin: 0 auto; object-fit: contain; }
.lightbox figcaption { margin-top: 12px; text-align: center; font-size: 0.86rem; color: var(--text-gedaempft); }
.lightbox-zu {
  position: fixed;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: var(--dunkel-alt);
  border: 1px solid var(--gold);
  color: var(--gold);
  cursor: pointer;
}
.lightbox-zu svg { width: 22px; height: 22px; }

/* ---------- Fusszeile ---------- */

.fuss {
  background: var(--dunkel-tief);
  border-top: 1px solid var(--linie);
  font-size: 0.86rem;
  color: var(--text-gedaempft);
}
.thema-hell .fuss { border-top: 2px solid var(--gold); }
.fuss-raster {
  display: grid;
  gap: 34px;
  padding-top: 52px;
  padding-bottom: 40px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}
.fuss h2 {
  margin: 0 0 14px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--akzent);
}
.fuss ul { margin: 0; padding: 0; list-style: none; line-height: 2; }
.fuss p { margin: 0 0 10px; }
.fuss a { color: var(--text-gedaempft); text-decoration: none; }
.fuss a:hover, .fuss a:focus-visible { color: var(--akzent); }
.fuss-name { margin: 14px 0 2px !important; font-size: 1.05rem; color: var(--text); }
.fuss-zusatz { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--akzent); }
.fuss-insta { display: inline-flex; align-items: center; gap: 9px; }
.fuss-insta svg { width: 18px; height: 18px; color: var(--akzent); }
.fuss-basis {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 20px;
  padding-top: 18px;
  padding-bottom: 64px;
  border-top: 1px solid var(--linie);
  font-size: 0.78rem;
}
.fuss-basis p { margin: 0; }

/* ---------- Dummy-Leiste ---------- */

.dummy-leiste {
  position: fixed;
  left: 50%;
  bottom: 12px;
  z-index: 60;
  transform: translateX(-50%);
  margin: 0;
  padding: 7px 14px;
  width: max-content;
  max-width: calc(100% - 24px);
  background: rgba(10, 20, 15, 0.92);
  border: 1px dashed var(--gold);
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--gold);
  text-align: center;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}