/* ===== Chronik: Grundlayout ===== */
.c-epochenband, .c-quellenkabinett, .c-wendepunkte{
  padding: clamp(28px, 6vw, 64px) 0;
}

/* ===== Sektion 1: Epochenband ===== */
.eb-grid{
  display:grid; grid-template-columns: .9fr 1.1fr; gap: clamp(16px,4vw,28px); align-items:start;
}
.eb-rail{ position: sticky; top: 84px; align-self: start; display:grid; gap: 12px; }
.eb-rail h1{
  font-family: PlayfairLocal, serif;
  font-size: clamp(24px, 3.6vw, 40px); line-height: 1.15; margin: 0;
  text-wrap: balance;
}
.eb-nav{ display:grid; gap: 6px; }
.rail-link{
  display:block; padding:10px 12px; border-radius: 12px;
  border:1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.02);
  transition: background .2s ease, color .2s ease, transform .2s ease, border-color .2s ease;
}
.rail-link:hover{ background: rgba(255,255,255,.08); transform: translateY(-1px); }
.rail-link.is-active{ color: var(--bg); background: linear-gradient(90deg, var(--brand), var(--accent)); border-color: transparent; }

.eb-progress{ height: 6px; background: rgba(255,255,255,.08); border-radius: 6px; overflow: hidden; }
.eb-progress .bar{ display:block; width: 0%; height:100%; background: linear-gradient(90deg, var(--brand), var(--accent)); }

.eb-flow{ display:grid; gap: 26px; }
.eb-epoch{ background: var(--surface); border: 1px solid rgba(255,255,255,.06); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
.eb-epoch header h2{
  font-family: PlayfairLocal, serif; margin: 0 0 6px; font-size: clamp(20px, 2.6vw, 28px);
}
.eb-epoch .lede{ color: var(--muted); margin: 0 0 10px; }
.eb-media{ display:flex; gap: 12px; flex-wrap: wrap; }
.eb-photo{
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent);
  border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  max-width: 350px;
}
.eb-photo:hover{ transform: translateY(-4px); box-shadow: 0 18px 42px rgba(0,0,0,.5); filter: saturate(1.06); }
.eb-photo img{ aspect-ratio: 4 / 3; object-fit: cover; }
.eb-photo figcaption{ font-size: 12px; color: var(--muted); padding: 6px 10px; }

/* Responsive Epochenband */
@media (max-width: 1024px){
  .eb-grid{ grid-template-columns: 1fr; }
  .eb-rail{ position: static; }
}

/* ===== Sektion 2: Quellenkabinett (аккордеоны-ящики) ===== */
.qk-grid{ display:grid; gap: 16px; }
.qk-head h2{
  font-family: PlayfairLocal, serif; font-size: clamp(22px,3vw,32px); margin:0 0 6px;
}
.qk-lede{ color: var(--muted); margin:0 0 10px; }

.qk-cabinet{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px;
}
.qk-drawer{
  background: var(--surface); border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.06); box-shadow: var(--shadow);
  overflow:hidden; display:grid; align-content:start;
}
.qk-tab{
  width:100%; text-align:left; background: transparent; color: var(--ink); border:0;
  padding: 12px 14px; display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.qk-tab:hover{ background: rgba(255,255,255,.06); transform: translateY(-1px); }
.qk-tab span{ color: var(--brand); font-weight:700; }
.qk-tab em{ color: var(--muted); font-style: normal; }
.qk-panel{ padding: 0 14px 12px; display:grid; gap: 8px; }
.qk-panel figure{ margin:0; }
.qk-panel img{ aspect-ratio: 4 / 3; object-fit: cover; }
.qk-panel figcaption{ font-size:12px; color: var(--muted); padding-top:6px; }

@media (max-width: 980px){
  .qk-cabinet{ grid-template-columns: 1fr; }
}

/* ===== Sektion 3: Wendepunkte (линии и узлы) ===== */
.wp-grid{ display:grid; gap: 16px; }
.wp-head h2{
  font-family: PlayfairLocal, serif; font-size: clamp(22px,3vw,32px); margin:0 0 6px;
}
.wp-lede{ color: var(--muted); margin:0 0 10px; }

.wp-map{
  position: relative; background: rgba(255,255,255,.02);
  border-radius: 14px; padding: 16px; box-shadow: var(--shadow);
}
.wp-line{
  position:absolute; left: 10px; right: 10px; top: 50%;
  height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--brand), var(--accent));
  opacity:.5;
}
.wp-node{
  position: relative; background: var(--surface); border:1px solid rgba(255,255,255,.06);
  border-radius: 14px; padding: 10px 12px; box-shadow: var(--shadow);
  max-width: 520px;
}
.wp-node h3{ margin:0 0 6px; }
.wp-node.n1{ margin-left: 0; margin-bottom: 16px; }
.wp-node.n2{ margin-left: 24%; margin-bottom: 16px; }
.wp-node.n3{ margin-left: 48%; }

.wp-photos{ display:flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.wp-photo{
  background: var(--surface); border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; max-width: 350px;
}
.wp-photo:hover{ transform: translateY(-4px); box-shadow: 0 18px 42px rgba(0,0,0,.5); filter: saturate(1.06); }
.wp-photo img{ aspect-ratio: 4 / 3; object-fit: cover; }
.wp-photo figcaption{ font-size:12px; color: var(--muted); padding:6px 10px; }

/* Responsive Wendepunkte */
@media (max-width: 980px){
  .wp-node.n2{ margin-left: 0; }
  .wp-node.n3{ margin-left: 0; }
}

/* ===== Общие reveal-анимации (уже есть в style.css; здесь — дополнения при необходимости) */
[data-reveal].is-in .eb-photo,
[data-reveal].is-in .wp-photo{
  animation: floatUp .75s ease both;
}
@keyframes floatUp{
  from{ transform: translateY(14px); opacity: .0; }
  to{ transform: translateY(0); opacity: 1; }
}
/* ===== Sektion 4: Städtische Bühnen ===== */
.c-stadtbuehnen{ padding: clamp(28px,6vw,64px) 0; }
.sb-grid{ display:grid; grid-template-columns: 1fr 1.1fr; gap: clamp(16px,4vw,28px); align-items:start; }
.sb-notes{ position: sticky; top: 84px; align-self:start; }
.sb-notes h2{
  font-family: PlayfairLocal, serif; font-size: clamp(22px,3vw,32px); margin: 0 0 6px;
}
.sb-lede{ color: var(--muted); margin: 0 0 10px; }
.sb-points{ list-style:none; padding:0; margin:10px 0 0; display:grid; gap:8px; }
.sb-points li{ display:grid; grid-template-columns: 90px 1fr; gap:10px; }
.sb-points span{ color: var(--brand); font-weight:600; }

.sb-strip{ display:flex; gap:12px; flex-wrap: wrap; }
.sb-photo{
  background: var(--surface); border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; max-width: 350px;
}
.sb-photo:hover{ transform: translateY(-4px); box-shadow: 0 18px 42px rgba(0,0,0,.5); filter: saturate(1.06); }
.sb-photo img{ aspect-ratio: 4 / 3; object-fit: cover; }
.sb-photo figcaption{ font-size: 12px; color: var(--muted); padding: 6px 10px; }

@media (max-width: 980px){
  .sb-grid{ grid-template-columns: 1fr; }
  .sb-notes{ position: static; }
}

/* ===== Sektion 5: Rituale & Masken ===== */
.c-rituale{ padding: clamp(28px,6vw,64px) 0; }
.ri-head h2{
  font-family: PlayfairLocal, serif; font-size: clamp(22px,3vw,32px); margin:0 0 6px;
}
.ri-lede{ color: var(--muted); margin:0 0 10px; }

.ri-band{
  position: relative; display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px; padding: 6px 0;
}
.ri-card{
  background: var(--surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
  max-width: 350px; justify-self: center;
}
.ri-card img{ aspect-ratio: 4 / 3; object-fit: cover; }
.ri-card figcaption{ font-size: 12px; color: var(--muted); padding: 6px 10px; }

/* diagonale „Bandraise“ */
.ri-card:nth-child(1){ transform: rotate(-3deg) translateY(6px); }
.ri-card:nth-child(2){ transform: rotate(0deg) translateY(0); }
.ri-card:nth-child(3){ transform: rotate(3deg) translateY(6px); }

.ri-card:hover{ transform: translateY(-6px) scale(1.02); box-shadow: 0 20px 46px rgba(0,0,0,.52); filter: saturate(1.08); }

/* tilt auf Pointer */
.tilt{ will-change: transform; }

@media (max-width: 980px){
  .ri-band{ grid-template-columns: 1fr; }
  .ri-card:nth-child(n){ transform: none; }
}

/* ===== Sektion 6: Handwerk & Technik ===== */
.c-handwerk{ padding: clamp(28px,6vw,64px) 0; }
.hw-grid{ display:grid; grid-template-columns: 1fr 1.1fr; gap: clamp(16px,4vw,28px); align-items:start; }
.hw-copy h2{
  font-family: PlayfairLocal, serif; font-size: clamp(22px,3vw,32px); margin:0 0 6px;
}
.hw-lede{ color: var(--muted); margin:0 0 10px; }
.hw-meter{ height: 6px; background: rgba(255,255,255,.08); border-radius: 6px; overflow: hidden; }
.hw-fill{ display:block; width: 0%; height: 100%; background: linear-gradient(90deg, var(--brand), var(--accent)); }

.hw-steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px;
}
.hw-step{
  background: var(--surface); border-radius: var(--radius); padding: 12px;
  border: 1px solid rgba(255,255,255,.06); box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.hw-step:hover{ transform: translateY(-4px); box-shadow: 0 18px 42px rgba(0,0,0,.5); border-color: rgba(255,255,255,.16); }
.hw-step figure{ margin:0; }
.hw-step img{ aspect-ratio: 4 / 3; object-fit: cover; }
.hw-step figcaption{ font-size:12px; color: var(--muted); padding-top:6px; }
.hw-step h3{ margin:0; }

@media (max-width: 1024px){
  .hw-grid{ grid-template-columns: 1fr; }
  .hw-steps{ grid-template-columns: 1fr; }
}

/* легкая входная анимация тех. карточек */
[data-reveal].is-in .hw-step,
[data-reveal].is-in .ri-card,
[data-reveal].is-in .sb-photo{
  animation: cFloatUp .75s ease both;
}
@keyframes cFloatUp{
  from{ transform: translateY(14px); opacity: .0; }
  to{ transform: translateY(0); opacity: 1; }
}
/* ===== Sektion 7: Feste & Medien ===== */
.c-medien{ padding: clamp(28px,6vw,64px) 0; }
.med-grid{ display:grid; grid-template-columns: .95fr 1.05fr; gap: clamp(16px,4vw,28px); align-items:start; }
.med-aside h2{
  font-family: PlayfairLocal, serif; font-size: clamp(22px,3vw,32px); margin:0 0 6px;
}
.med-lede{ color: var(--muted); margin:0 0 10px; }

/* Ticker */
.med-ticker{
  position: relative; height: 34px; border-radius: 10px; overflow: hidden;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.ticker-track{
  position:absolute; inset:0; display:flex; align-items:center; gap: 80px;
  white-space: nowrap; padding-inline: 16px;
  animation: ticker 18s linear infinite;
}
.ticker-track span{ opacity:.9; }
@keyframes ticker{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); }
}

/* Medien-rail */
.med-rail{ display:flex; gap: 12px; flex-wrap: wrap; }
.med-card{
  background: var(--surface); border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; max-width: 350px;
}
.med-card:hover{ transform: translateY(-4px); box-shadow: 0 18px 42px rgba(0,0,0,.5); filter: saturate(1.06); }
.med-card img{ aspect-ratio: 4 / 3; object-fit: cover; }
.med-card figcaption{ font-size: 12px; color: var(--muted); padding: 6px 10px; }

@media (max-width: 980px){
  .med-grid{ grid-template-columns: 1fr; }
}

/* ===== Sektion 8: Regionale Linien ===== */
.c-regionlinien{ padding: clamp(28px,6vw,64px) 0; }
.rl-grid{ display:grid; grid-template-columns: .9fr 1.1fr; gap: clamp(16px,4vw,28px); align-items:start; }
.rl-aside h2{
  font-family: PlayfairLocal, serif; font-size: clamp(22px,3vw,32px); margin:0 0 6px;
}
.rl-lede{ color: var(--muted); margin:0 0 10px; }

.rl-map{
  position: relative; border-radius: 14px; padding: 18px;
  background:
    radial-gradient(800px 420px at 20% 20%, rgba(214,162,0,.10), transparent 60%),
    radial-gradient(800px 420px at 80% 80%, rgba(44,107,191,.10), transparent 60%),
    rgba(255,255,255,.02);
  box-shadow: var(--shadow);
}
.rl-path{
  position:absolute; left: 18px; right: 18px; top: 50%;
  height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--brand), var(--accent));
  opacity:.55;
}
.rl-pin{
  position: relative; background: var(--surface); border-radius: var(--radius); padding: 12px;
  border: 1px solid rgba(255,255,255,.06); box-shadow: var(--shadow); max-width: 350px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.rl-pin:hover{ transform: translateY(-4px); box-shadow: 0 18px 42px rgba(0,0,0,.5); border-color: rgba(255,255,255,.16); }
.rl-pin figure{ margin:0; }
.rl-pin img{ aspect-ratio: 4 / 3; object-fit: cover; }
.rl-pin figcaption{ font-size:12px; color: var(--muted); padding-top:6px; }
.rl-pin h3{ margin:8px 0 4px; }

.p-nord{ margin-bottom: 16px; }
.p-mitte{ margin: 0 0 16px 24%; }
.p-sued{ margin-left: 48%; }

@media (max-width: 980px){
  .rl-grid{ grid-template-columns: 1fr; }
  .p-mitte, .p-sued{ margin-left: 0; }
}

/* ===== Sektion 9: Umkehr & Fastnacht ===== */
.c-umkehr{ padding: clamp(28px,6vw,64px) 0; }
.uk-grid{ display:grid; gap: 14px; }
.uk-head h2{
  font-family: PlayfairLocal, serif; font-size: clamp(22px,3vw,32px); margin:0 0 6px;
}
.uk-lede{ color: var(--muted); margin:0 0 10px; }
.uk-toggle{ display:flex; gap: 8px; flex-wrap: wrap; }
.uk-chip{
  background: rgba(255,255,255,.06); color: var(--ink);
  border:1px solid rgba(255,255,255,.12); padding: 8px 12px; border-radius: 999px; cursor: pointer;
  transition: background .2s ease, transform .2s ease, border-color .2s ease, color .2s ease;
}
.uk-chip:hover{ background: rgba(255,255,255,.12); transform: translateY(-1px); }
.uk-chip.is-active{ color: var(--bg); background: linear-gradient(90deg, var(--brand), var(--accent)); border-color: transparent; }

.uk-contrast{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px;
}
.uk-card{
  position: relative; overflow: hidden;
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, filter .2s ease;
  max-width: 350px; justify-self: center;
}
.uk-card img{ aspect-ratio: 4 / 3; object-fit: cover; }
.uk-card figcaption{ font-size:12px; color: var(--muted); padding: 6px 10px; }
.uk-card:hover{ transform: translateY(-4px); box-shadow: 0 18px 42px rgba(0,0,0,.5); border-color: rgba(255,255,255,.16); filter: saturate(1.06); }

/* Kontrastmodus via data-mode */
.c-umkehr[data-mode="narr"] .uk-card{ background:
  linear-gradient(180deg, rgba(214,162,0,.08), transparent), var(--surface); }
.c-umkehr[data-mode="ordnung"] .uk-card{ background:
  linear-gradient(180deg, rgba(44,107,191,.10), transparent), var(--surface); }

/* Responsive */
@media (max-width: 980px){
  .uk-contrast{ grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce){
  .med-card, .rl-pin, .uk-card, .uk-chip{ transition: none; }
  .ticker-track{ animation: none; }
}

/* kleine Entrance-Anim. */
[data-reveal].is-in .med-card,
[data-reveal].is-in .rl-pin,
[data-reveal].is-in .uk-card{
  animation: cFloatUp .75s ease both;
}
/* ===== Sektion 10: Prozession & Pause ===== */
.c-prozession{ padding: clamp(28px,6vw,64px) 0; }
.pz-grid{ display:grid; grid-template-columns: .9fr 1.1fr; gap: clamp(16px,4vw,28px); align-items:start; }
.pz-aside{ position: sticky; top: 84px; align-self:start; }
.pz-aside h2{
  font-family: PlayfairLocal, serif; font-size: clamp(22px,3vw,32px); margin:0 0 6px;
}
.pz-lede{ color: var(--muted); margin:0 0 10px; }
.pz-progress{ height: 6px; background: rgba(255,255,255,.08); border-radius: 6px; overflow: hidden; }
.pz-progress .bar{ display:block; width: 0%; height:100%; background: linear-gradient(90deg, var(--brand), var(--accent)); }

.pz-steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px;
}
.pz-step{
  background: var(--surface); border-radius: var(--radius); padding: 12px;
  border: 1px solid rgba(255,255,255,.06); box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pz-step:hover{ transform: translateY(-4px); box-shadow: 0 18px 42px rgba(0,0,0,.5); border-color: rgba(255,255,255,.16); }
.pz-step figure{ margin:0; }
.pz-step img{ aspect-ratio: 4 / 3; object-fit: cover; }
.pz-step figcaption{ font-size:12px; color: var(--muted); padding-top:6px; }
.pz-step h3{ margin: 6px 0 4px; }

.pz-step.is-hit{ border-color: color-mix(in oklab, var(--brand) 40%, rgba(255,255,255,.06)); }

@media (max-width: 1024px){
  .pz-grid{ grid-template-columns: 1fr; }
  .pz-aside{ position: static; }
  .pz-steps{ grid-template-columns: 1fr; }
}

/* ===== Sektion 11: Festarchitektur ===== */
.c-architektur{ padding: clamp(28px,6vw,64px) 0; }
.ar-head h2{
  font-family: PlayfairLocal, serif; font-size: clamp(22px,3vw,32px); margin:0 0 6px;
}
.ar-lede{ color: var(--muted); margin:0 0 10px; }

.ar-mosaic{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px;
}
.ar-tile{
  position: relative; overflow: hidden; background: var(--surface); border-radius: var(--radius);
  box-shadow: var(--shadow); border: 1px solid rgba(255,255,255,.06); max-width: 350px; justify-self: center;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease, border-color .2s ease;
}
.ar-tile::before{
  /* dekorativer Bogen oben */
  content:""; position:absolute; left: -20%; right: -20%; top: -30%;
  height: 60%; border-radius: 0 0 70% 70% / 0 0 100% 100%;
  background: radial-gradient(80% 80% at 50% 100%, rgba(214,162,0,.18), transparent 70%);
  pointer-events:none;
}
.ar-tile:hover{ transform: translateY(-4px); box-shadow: 0 18px 42px rgba(0,0,0,.5); filter: saturate(1.06); border-color: rgba(255,255,255,.16); }
.ar-tile img{ aspect-ratio: 4 / 3; object-fit: cover; }
.ar-tile figcaption{ font-size:12px; color: var(--muted); padding: 6px 10px; }

@media (max-width: 980px){
  .ar-mosaic{ grid-template-columns: 1fr; }
}

/* ===== Sektion 12: Publikum & Stadt ===== */
.c-publikum{ padding: clamp(28px,6vw,64px) 0; }
.pb-grid{ display:grid; grid-template-columns: .95fr 1.05fr; gap: clamp(16px,4vw,28px); align-items:start; }
.pb-notes h2{
  font-family: PlayfairLocal, serif; font-size: clamp(22px,3vw,32px); margin:0 0 6px;
}
.pb-lede{ color: var(--muted); margin:0 0 10px; }
.pb-points{ list-style:none; padding:0; margin:10px 0 0; display:grid; gap:8px; }
.pb-points li{ display:grid; grid-template-columns: 110px 1fr; gap:10px; }
.pb-points span{ color: var(--brand); font-weight:600; }

.pb-gallery{ display:flex; gap: 12px; flex-wrap: wrap; }
.pb-card{
  background: var(--surface); border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,.06); max-width: 350px;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease, border-color .2s ease;
}
.pb-card:hover{ transform: translateY(-4px); box-shadow: 0 18px 42px rgba(0,0,0,.5); filter: saturate(1.06); border-color: rgba(255,255,255,.16); }
.pb-card img{ aspect-ratio: 4 / 3; object-fit: cover; }
.pb-card figcaption{ font-size:12px; color: var(--muted); padding: 6px 10px; }

@media (max-width: 980px){
  .pb-grid{ grid-template-columns: 1fr; }
}

/* входные анимации */
[data-reveal].is-in .pz-step,
[data-reveal].is-in .ar-tile,
[data-reveal].is-in .pb-card{
  animation: cFloatUp .75s ease both;
}
/* ===== Sektion 13: Debatte & Deutung ===== */
.c-debatte{ padding: clamp(28px,6vw,64px) 0; }
.db-grid{ display:grid; gap: 14px; }
.db-head h2{
  font-family: PlayfairLocal, serif; font-size: clamp(22px,3vw,32px); margin:0 0 6px;
}
.db-lede{ color: var(--muted); margin:0 0 10px; }
.db-toggle{ display:flex; gap:8px; flex-wrap:wrap; }
.db-chip{
  background: rgba(255,255,255,.06); color: var(--ink);
  border:1px solid rgba(255,255,255,.12); padding: 8px 12px; border-radius: 999px; cursor: pointer;
  transition: background .2s ease, transform .2s ease, border-color .2s ease, color .2s ease;
}
.db-chip:hover{ background: rgba(255,255,255,.12); transform: translateY(-1px); }
.db-chip.is-active{ color: var(--bg); background: linear-gradient(90deg, var(--brand), var(--accent)); border-color: transparent; }

.db-panels{
  display:grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.db-panel{
  background: var(--surface); border-radius: var(--radius); padding: 14px;
  border:1px solid rgba(255,255,255,.06); box-shadow: var(--shadow);
}
.db-panel h3{ margin:0 0 6px; }
.db-points{ list-style:none; padding:0; margin:8px 0 0; display:grid; gap:6px; }
.db-points li{ display:grid; grid-template-columns: 100px 1fr; gap:10px; }
.db-points span{ color: var(--brand); font-weight:600; }

.c-debatte[data-view="mythos"] .db-panel.mythos{ display:block; }
.c-debatte[data-view="mythos"] .db-panel.befund{ display:block; opacity:.95; }
.c-debatte[data-view="befund"] .db-panel.mythos{ opacity:.6; filter: grayscale(.1); }
.c-debatte[data-view="befund"] .db-panel.befund{ outline: 1px solid rgba(255,255,255,.14); }

@media (max-width: 880px){
  .db-panels{ grid-template-columns: 1fr; }
}

/* ===== Sektion 14: Wege der Erinnerung (Fußnoten) ===== */
.c-wege{ padding: clamp(28px,6vw,64px) 0; }
.wg-grid{ display:grid; gap:14px; }
.wg-head h2{
  font-family: PlayfairLocal, serif; font-size: clamp(22px,3vw,32px); margin:0 0 6px;
}
.wg-lede{ color: var(--muted); margin:0 0 10px; }

.wg-text{ background: var(--surface); border-radius: var(--radius); padding: 14px; border:1px solid rgba(255,255,255,.06); box-shadow: var(--shadow); }
.fn{
  appearance: none; border:0; background: rgba(255,255,255,.06); color: var(--ink);
  border-radius: 10px; padding: 0 6px; cursor: pointer;
  transition: background .2s ease, transform .2s ease, color .2s ease;
}
.fn:hover{ background: rgba(255,255,255,.12); transform: translateY(-1px); }
.fn[aria-expanded="true"]{ color: var(--bg); background: linear-gradient(90deg, var(--brand), var(--accent)); }

.wg-footnotes{ display:grid; gap:8px; margin-top: 10px; }
.wg-footnotes .note{
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px; padding: 10px 12px;
}

/* ===== Sektion 15: Ethik & Sorgfalt ===== */
.c-ethik{ padding: clamp(28px,6vw,64px) 0; }
.et-grid{ display:grid; gap: 14px; }
.et-head h2{
  font-family: PlayfairLocal, serif; font-size: clamp(22px,3vw,32px); margin:0 0 6px;
}
.et-lede{ color: var(--muted); margin:0 0 10px; }

.et-board{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.et-item{
  background: var(--surface); border-radius: var(--radius); border:1px solid rgba(255,255,255,.06);
  padding: 10px 12px; box-shadow: var(--shadow);
}
.et-item summary{ cursor:pointer; display:flex; align-items:baseline; gap:10px; }
.et-item summary span{ color: var(--brand); font-weight:700; }
.et-item summary em{ color: var(--muted); font-style:normal; }
.et-item[open]{ border-color: rgba(255,255,255,.16); }

@media (max-width: 900px){
  .et-board{ grid-template-columns: 1fr; }
}

/* ===== Sektion 16: Weiterblättern (Routen) ===== */
.c-weiter{ padding: clamp(28px,6vw,64px) 0; }
.wt-grid{ display:grid; gap: 14px; }
.wt-head h2{
  font-family: PlayfairLocal, serif; font-size: clamp(22px,3vw,32px); margin:0 0 6px;
}
.wt-lede{ color: var(--muted); margin:0 0 10px; }
.wt-chips{ display:flex; gap:8px; flex-wrap:wrap; }
.wt-chip{
  background: rgba(255,255,255,.06); color: var(--ink);
  border:1px solid rgba(255,255,255,.12); padding: 8px 12px; border-radius: 999px; cursor: pointer;
  transition: background .2s ease, transform .2s ease, border-color .2s ease, color .2s ease;
}
.wt-chip:hover{ background: rgba(255,255,255,.12); transform: translateY(-1px); }
.wt-chip.is-active{ color: var(--bg); background: linear-gradient(90deg, var(--brand), var(--accent)); border-color: transparent; }

.wt-canvas{
  position: relative; height: clamp(220px,28vw,360px);
  border-radius: 14px; overflow: hidden; background:
    radial-gradient(900px 480px at 20% 30%, rgba(214,162,0,.10), transparent 60%),
    radial-gradient(900px 480px at 80% 70%, rgba(44,107,191,.10), transparent 60%),
    rgba(255,255,255,.02);
  box-shadow: var(--shadow);
}

/* Layers imitieren Routen (reine CSS-Muster) */
.wt-layer{
  position:absolute; inset:0; opacity:0; transition: opacity .35s ease;
  background-size: 40px 40px, 40px 40px, 100% 100%;
  background-repeat: no-repeat, no-repeat, no-repeat;
  mask-image: radial-gradient(320px 320px at var(--x,50%) var(--y,50%), black 40%, transparent 70%);
}
.wt-layer.kalender{
  background-image:
    linear-gradient(45deg, color-mix(in oklab, var(--accent) 75%, transparent) 50%, transparent 0),
    linear-gradient(-45deg, color-mix(in oklab, var(--brand) 75%, transparent) 50%, transparent 0),
    linear-gradient(180deg, transparent, rgba(255,255,255,.02));
  animation: wtA 6s linear infinite;
}
.wt-layer.staedte{
  background-image:
    linear-gradient(0deg,  color-mix(in oklab, var(--brand-2) 75%, transparent) 50%, transparent 0),
    linear-gradient(90deg, color-mix(in oklab, var(--accent) 75%, transparent) 50%, transparent 0),
    linear-gradient(180deg, transparent, rgba(255,255,255,.02));
  animation: wtB 5.5s linear infinite;
}
.wt-layer.start{
  background-image:
    linear-gradient(90deg, color-mix(in oklab, var(--brand) 75%, transparent) 50%, transparent 0),
    linear-gradient(0deg,  color-mix(in oklab, var(--accent) 75%, transparent) 50%, transparent 0),
    linear-gradient(180deg, transparent, rgba(255,255,255,.02));
  animation: wtC 7s linear infinite;
}

/* Sichtbarkeit */
.c-weiter[data-route="kalender"] .wt-layer.kalender{ opacity:1; }
.c-weiter[data-route="staedte"]  .wt-layer.staedte { opacity:1; }
.c-weiter[data-route="start"]    .wt-layer.start   { opacity:1; }

@keyframes wtA{
  0%{ background-position: 0 0, 0 0, 0 0; }
  100%{ background-position: 80px 80px, -80px 80px, 0 0; }
}
@keyframes wtB{
  0%{ background-position: 0 0, 0 0, 0 0; }
  100%{ background-position: 0 80px, 80px 0, 0 0; }
}
@keyframes wtC{
  0%{ background-position: 0 0, 0 0, 0 0; }
  100%{ background-position: 80px 0, 0 80px, 0 0; }
}

.wt-cta{ display:flex; gap:10px; flex-wrap:wrap; }

@media (prefers-reduced-motion: reduce){
  .db-chip, .fn, .et-item, .wt-chip, .wt-layer{ transition:none; animation:none; }
}