/* ================== Startseite: Hero-Sektion ================== */
.s-hero{
  position: relative; isolation:isolate;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(182,18,38,.18), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(214,162,0,.16), transparent 60%);
  padding: clamp(28px, 6vw, 60px) 0;
}
.hero-grid{
  display:grid; grid-template-columns: 1.15fr .85fr; gap: clamp(22px, 4vw, 48px);
  align-items:center;
}
.hero-copy h1{
  font-family: PlayfairLocal, serif;
  font-size: clamp(26px, 3.6vw, 44px);
  line-height:1.15; letter-spacing:.2px; margin:0 0 12px;
  text-wrap: balance;
}
.hero-copy .lede{
  color: var(--muted); margin: 0 0 10px;
}
.hero-points{
  margin: 14px 0 18px; padding:0; list-style:none; display:grid; gap:8px;
}
.hero-points li{
  display:grid; grid-template-columns: 20px 1fr; gap:10px; align-items:start;
}
.hero-points li::before{
  content:""; width:12px; height:12px; margin-top:6px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, var(--brand), var(--brand-2));
  box-shadow: 0 0 0 3px rgba(214,162,0,.18);
}
.hero-cta{ display:flex; gap:10px; flex-wrap:wrap; }

/* Medien-Seite: Bunting + 3-Foto-Bogen */
.hero-media{ position: relative; padding-top: 12px; }
.bunting{
  position:absolute; inset: 0 0 auto 0; height: 54px; display:flex; gap:8px; justify-content:center;
  transform-origin: left center; animation: sway 4s ease-in-out infinite alternate;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.25));
  pointer-events:none;
}
.bunting li{
  width: 42px; height: 42px; list-style:none; clip-path: polygon(0 0,100% 0,100% 70%,50% 100%,0 70%);
  background: conic-gradient(from 40deg, var(--brand), var(--brand-2), var(--accent), var(--brand));
  opacity:.9;
}
@keyframes sway{
  from{ transform: rotate(-2.5deg); }
  to{ transform: rotate(2.5deg); }
}

.hero-photo{
  position: relative; width: min(90%, 340px);
  background: var(--surface); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow:hidden;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.hero-photo img{ aspect-ratio: 4 / 3; object-fit: cover; }
.hero-photo figcaption{
  font-size: 13px; color: var(--muted);
  padding: 8px 12px 10px; background: linear-gradient(180deg, rgba(255,255,255,.03), transparent);
}

/* schwebende, bogenförmige Anordnung */
.hero-media{
  display:grid; grid-template-columns: 1fr; justify-items:center; gap:16px;
}
.p1{ transform: translateY(0); }
.p2{ transform: translateY(6px) }
.p3{ transform: translateY(12px) }

.hero-photo:hover{ transform: translateY(-3px) scale(1.015); box-shadow: 0 14px 36px rgba(0,0,0,.45); filter: saturate(1.06); }

/* kleine Parallax-Bewegung beim Eintritt */
.is-in .p1{ animation: floatUp .8s ease both; }
.is-in .p2{ animation: floatUp .95s ease .05s both; }
.is-in .p3{ animation: floatUp 1.1s ease .1s both; }
@keyframes floatUp{
  from{ transform: translateY(18px) scale(.98); opacity: .0; }
  to{ transform: translateY(var(--ty, 0)) scale(1); opacity: 1; }
}

/* ====== Responsives Verhalten ====== */
@media (max-width: 1024px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-media{ order: -1; }
}
@media (max-width: 640px){
  .hero-points{ gap:6px; }
  .bunting{ height: 44px; }
  .bunting li{ width: 34px; height: 34px; }
}
@media (max-width: 380px){
  .hero-photo{ width: 100%; }
}

/* Sicher für reduzierte Bewegungen */
@media (prefers-reduced-motion: reduce){
  .bunting{ animation: none; }
  .is-in .p1, .is-in .p2, .is-in .p3{ animation: none; }
}
/* ================== Sektion 2: Zeitwelle ================== */
.s-zeitwelle{
  padding: clamp(28px, 6vw, 64px) 0;
  background:
    radial-gradient(900px 500px at 0% 20%, rgba(44,107,191,.12), transparent 60%),
    radial-gradient(900px 500px at 100% 80%, rgba(214,162,0,.10), transparent 60%);
}
.zw-wrap{ display:grid; gap: 18px; }
.zw-head{ position: relative; display:grid; gap:10px; }
.zw-head h2{
  font-family: PlayfairLocal, serif;
  font-size: clamp(22px, 3vw, 32px);
  margin: 0;
}
.zw-lede{ color: var(--muted); margin: 0; }

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

.zw-strip{
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 360px);
  gap: 16px; overflow-x: auto; padding: 6px 4px 10px; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; touch-action: pan-x; border-radius: 14px;
  background: rgba(255,255,255,.02);
  mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}
.zw-stop{
  scroll-snap-align: start; background: var(--surface); border-radius: var(--radius);
  padding: 14px; box-shadow: var(--shadow); display:grid; gap: 8px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.zw-stop:hover{ transform: translateY(-2px); box-shadow: 0 16px 38px rgba(0,0,0,.45); }
.zw-photo img{ aspect-ratio: 4 / 3; object-fit: cover; }
.zw-photo figcaption{ font-size: 12px; color: var(--muted); padding-top: 6px; }

/* ================== Sektion 3: Kartenband ================== */
.s-kartenband{ padding: clamp(28px, 6vw, 64px) 0; }
.s-kartenband h2{
  font-family: PlayfairLocal, serif;
  font-size: clamp(22px, 3vw, 32px);
  margin: 0 0 6px;
}
.kb-lede{ color: var(--muted); margin: 0 0 14px; }

.kb-lane{ display:grid; gap: 16px; }
.kb-region{
  display:grid; grid-template-columns: 1.2fr .8fr; gap: 18px; align-items:center;
  padding: 16px; border-radius: var(--radius);
  background:
    linear-gradient(90deg, rgba(214,162,0,.08), rgba(44,107,191,.04)),
    rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  transition: border-color .2s ease, background .2s ease;
}
.kb-region:hover{ border-color: rgba(255,255,255,.16); }
.kb-meta h3{ margin: 0 0 6px; }
.kb-meta p{ margin: 0; color: var(--muted); }
.kb-photo{
  justify-self:end; background: var(--surface); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow);
}
.kb-photo img{ aspect-ratio: 4 / 3; object-fit: cover; }
.kb-photo figcaption{ font-size: 12px; color: var(--muted); padding: 6px 10px; }

/* ================== Sektion 4: Klang & Kostüm ================== */
.s-klang-kostuem{
  padding: clamp(28px, 6vw, 64px) 0;
  background:
    radial-gradient(700px 400px at 20% 20%, rgba(214,162,0,.08), transparent 60%),
    radial-gradient(700px 400px at 80% 80%, rgba(44,107,191,.08), transparent 60%);
}
.kk-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(16px, 4vw, 28px); align-items:center; }
.kk-copy h2{
  font-family: PlayfairLocal, serif;
  font-size: clamp(22px, 3vw, 32px);
  margin: 0 0 6px;
}
.kk-lede{ color: var(--muted); margin: 0 0 10px; }
.kk-bullets{ list-style:none; padding:0; margin: 10px 0 0; display:grid; gap:8px; }
.kk-bullets li{ display:grid; grid-template-columns: 80px 1fr; gap: 10px; }
.kk-bullets span{ color: var(--brand); font-weight: 600; }

.kk-scene{
  position: relative; height: clamp(280px, 36vw, 380px);
  display:grid; place-items:center;
}
.kk-card{
  position:absolute; width: min(85%, 320px);
  background: var(--surface); border-radius: var(--radius); overflow:hidden;
  box-shadow: var(--shadow); transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.kk-card img{ aspect-ratio: 4 / 3; object-fit: cover; }
.kk-card figcaption{ font-size: 12px; color: var(--muted); padding: 6px 10px; background: linear-gradient(180deg, rgba(255,255,255,.03), transparent); }

.kk-card.c1{ transform: rotate(-4deg) translate(-18%, -6%); }
.kk-card.c2{ transform: rotate(0deg) translate(0, 6%); z-index:2; }
.kk-card.c3{ transform: rotate(5deg) translate(18%, 2%); }

.kk-card:hover{ transform: translateY(-6px) scale(1.02); box-shadow: 0 18px 42px rgba(0,0,0,.5); filter: saturate(1.08); }

/* ======= Responsive ======= */
@media (max-width: 1024px){
  .kb-region{ grid-template-columns: 1fr; }
  .kb-photo{ justify-self: start; }
  .kk-grid{ grid-template-columns: 1fr; }
  .kk-scene{ height: 340px; }
}
@media (max-width: 720px){
  .zw-strip{ grid-auto-columns: minmax(240px, 320px); }
  .kk-card{ width: min(92%, 300px); }
}
@media (max-width: 520px){
  .kb-bands{ grid-template-columns: 1fr; }
  .kk-scene{ height: 300px; }
}
@media (max-width: 400px){
  .kk-card{ width: 100%; }
}
@media (prefers-reduced-motion: reduce){
  .kk-card, .zw-stop{ transition: none; }
}
/* ===== FIX: Sektion 4 ohne Überlappung ===== */
.s-klang-kostuem .kk-scene{
  position: static;
  height: auto;                 /* вместо фиксированной */
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
  align-items: start;
}
.s-klang-kostuem .kk-card{
  position: relative;           /* убираем absolute-стек */
  width: 100%;
  max-width: 350px;             /* ограничение по ТЗ */
  margin-inline: auto;
  transform: none;              /* базово без смещения */
}
.s-klang-kostuem .kk-card.c1,
.s-klang-kostuem .kk-card.c2,
.s-klang-kostuem .kk-card.c3{
  transform: none;              /* отмена предыдущих rotate/translate */
}
.s-klang-kostuem .kk-card:hover{
  transform: translateY(-4px);  /* лёгкий hover без наезда на соседей */
  box-shadow: 0 18px 42px rgba(0,0,0,.5);
}

/* Небольшая ступенька по высоте — без перекрытий */
.s-klang-kostuem .kk-card.c1{ margin-top: 6px; }
.s-klang-kostuem .kk-card.c2{ margin-top: 0; }
.s-klang-kostuem .kk-card.c3{ margin-top: 10px; }

/* Респонсив: 2 колонки → 1 колонка */
@media (max-width: 920px){
  .s-klang-kostuem .kk-scene{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .s-klang-kostuem .kk-scene{ grid-template-columns: 1fr; }
}

/* На reduce-motion оставляем поведение прежним, просто без анимаций */
@media (prefers-reduced-motion: reduce){
  .s-klang-kostuem .kk-card{ transition: none; }
}
/* ================== Sektion 5: Brauchtumsbibliothek ================== */
.s-bibliothek{ padding: clamp(28px, 6vw, 64px) 0; }
.bib-head h2{
  font-family: PlayfairLocal, serif;
  font-size: clamp(22px, 3vw, 32px); margin: 0 0 6px;
}
.bib-lede{ color: var(--muted); margin: 0 0 16px; }

.bib-grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
  grid-auto-flow: dense;
}
.bib-card{
  grid-column: span 6;               /* 2 Spalten auf großen Screens */
  background: var(--surface);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow);
  display: grid; gap: 10px;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.bib-card:nth-child(2){ grid-column: 7 / -1; }     /* leichte Versetzung */
.bib-card:nth-child(3){ grid-column: 1 / 7; }
.bib-card:nth-child(4){ grid-column: 7 / -1; }

.bib-card:hover{ transform: translateY(-4px); box-shadow: 0 18px 42px rgba(0,0,0,.5); }
.bib-card figure{ margin:0; }
.bib-card img{ aspect-ratio: 4 / 3; object-fit: cover; }
.bib-card figcaption{ font-size:12px; color: var(--muted); padding-top: 6px; }
.bib-card h3{ margin: 0; }

/* Responsive für Bibliothek */
@media (max-width: 980px){
  .bib-grid{ grid-template-columns: repeat(6, 1fr); }
  .bib-card, .bib-card:nth-child(n){ grid-column: span 6; }
}
@media (max-width: 560px){
  .bib-grid{ grid-template-columns: repeat(4, 1fr); }
  .bib-card{ grid-column: 1 / -1; }
}

/* ================== Sektion 6: Festküche ================== */
.s-kueche{
  padding: clamp(28px, 6vw, 64px) 0;
  background:
    radial-gradient(800px 420px at 10% 90%, rgba(214,162,0,.10), transparent 60%),
    radial-gradient(800px 420px at 95% 10%, rgba(44,107,191,.09), transparent 60%);
}
.food-head h2{
  font-family: PlayfairLocal, serif;
  font-size: clamp(22px, 3vw, 32px); margin: 0 0 6px;
}
.food-lede{ color: var(--muted); margin: 0 0 14px; }

.food-tiles{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.food-card{
  background: var(--surface);
  border-radius: var(--radius);
  padding: 12px;
  box-shadow: var(--shadow);
  display:grid; gap: 8px;
  position: relative; overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.food-card:hover{ transform: translateY(-4px); filter: saturate(1.06); box-shadow: 0 18px 42px rgba(0,0,0,.5); }
.food-card figure{ margin:0; }
.food-card img{ aspect-ratio: 4 / 3; object-fit: cover; }
.food-card figcaption{ font-size:12px; color: var(--muted); padding-top:6px; }
.food-card h3{ margin:0; }

/* „Dampf“ für heiße Speisen */
.food-card.hot::before,
.food-card.hot::after{
  content:"";
  position:absolute; left: 16%; bottom: 34%;
  width: 18px; height: 18px;
  background: radial-gradient(circle, rgba(255,255,255,.35), transparent 60%);
  filter: blur(6px); opacity:.0;
  animation: rise 3.2s ease-in infinite;
}
.food-card.hot::after{
  left: 28%; animation-delay: .8s;
}
@keyframes rise{
  0%   { transform: translateY(6px) scale(.8); opacity: .0; }
  30%  { opacity:.5; }
  100% { transform: translateY(-36px) scale(1.2); opacity: 0; }
}

/* Responsive für Festküche */
@media (max-width: 1024px){
  .food-tiles{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .food-tiles{ grid-template-columns: 1fr; }
}

/* ================== Sektion 7: Schaustellerpfad ================== */
.s-schaustellerpfad{ padding: clamp(28px, 6vw, 64px) 0; }
.spf-head h2{
  font-family: PlayfairLocal, serif;
  font-size: clamp(22px, 3vw, 32px); margin: 0 0 6px;
}
.spf-lede{ color: var(--muted); margin: 0 0 12px; }
.spf-line{
  position: relative; height: 6px; border-radius: 6px;
  background: rgba(255,255,255,.08); overflow: hidden; margin-bottom: 16px;
}
.spf-fill{
  position:absolute; inset: 0 auto 0 0; width: 0%;
  background: linear-gradient(90deg, var(--brand), var(--accent));
}

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

/* „Erreichte“ Steps */
.spf-step.is-hit{ border-color: color-mix(in oklab, var(--brand) 40%, rgba(255,255,255,.06)); }

/* Responsive für Pfad */
@media (max-width: 1024px){
  .spf-steps{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .spf-steps{ grid-template-columns: 1fr; }
}
/* ===== Hero: Mobil zuerst Text, dann Bilder ===== */
@media (max-width: 1024px){
  .s-hero .hero-grid{ grid-template-columns: 1fr; }
  .s-hero .hero-copy{ order: 1; }   /* текст сверху */
  .s-hero .hero-media{ order: 2; }  /* изображения ниже */
  .s-hero .hero-media{ margin-top: 10px; }
}
/* ================== Sektion 8: Klangkarte ================== */
.s-klangkarte{ padding: clamp(28px, 6vw, 64px) 0; }
.kkarte-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(16px,4vw,28px); align-items:center; }
.kkarte-copy h2{
  font-family: PlayfairLocal, serif; font-size: clamp(22px,3vw,32px); margin:0 0 6px;
}
.kkarte-lede{ color: var(--muted); margin:0 0 10px; }
.kkarte-points{ list-style:none; padding:0; margin: 10px 0 0; display:grid; gap:8px; }
.kkarte-points li{ display:grid; grid-template-columns: 90px 1fr; gap:10px; }
.kkarte-points span{ color: var(--brand); font-weight:600; }

/* визуал: волны + фотополоса */
.kkarte-visual{ display:grid; gap:14px; }
.wave{
  position: relative; height: 60px; border-radius: 12px; overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.04), transparent);
}
.wave i{
  position:absolute; inset:auto 0 0 0; height: 100%;
  background: radial-gradient(100% 60% at 50% 90%, color-mix(in oklab, var(--accent) 60%, transparent), transparent 70%);
  opacity:.6; transform-origin: bottom center;
  animation: wobble 4s ease-in-out infinite;
}
.wave i:nth-child(1){ left: 0%;  width: 16%; animation-delay: 0s; }
.wave i:nth-child(2){ left: 14%; width: 18%; animation-delay: .2s; }
.wave i:nth-child(3){ left: 30%; width: 16%; animation-delay: .4s; }
.wave i:nth-child(4){ left: 46%; width: 20%; animation-delay: .6s; }
.wave i:nth-child(5){ left: 66%; width: 18%; animation-delay: .8s; }
.wave i:nth-child(6){ left: 82%; width: 16%; animation-delay: 1.0s; }

@keyframes wobble{
  0%   { transform: scaleY(calc(.6 * var(--amp, 1))); }
  50%  { transform: scaleY(calc(1.05 * var(--amp, 1))); }
  100% { transform: scaleY(calc(.6 * var(--amp, 1))); }
}

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

/* responsive */
@media (max-width: 1024px){
  .kkarte-grid{ grid-template-columns: 1fr; }
}

/* ================== Sektion 9: Licht & Fluss ================== */
.s-lichtfluss{ padding: clamp(28px, 6vw, 64px) 0; }
.lf-head h2{
  font-family: PlayfairLocal, serif; font-size: clamp(22px,3vw,32px); margin: 0 0 6px;
}
.lf-lede{ color: var(--muted); margin: 0 0 10px; }
.lf-controls{ display:flex; gap:8px; align-items:center; }
.lf-btn{
  background: rgba(255,255,255,.06); color: var(--ink);
  border: 1px solid rgba(255,255,255,.12);
  padding: 6px 10px; border-radius: 10px; cursor: pointer;
  transition: background .2s ease, transform .2s ease, border-color .2s ease, opacity .2s ease;
}
.lf-btn:hover{ background: rgba(255,255,255,.12); transform: translateY(-1px); }
.lf-btn:disabled{ opacity:.5; cursor: default; transform:none; }

.lf-strip{
  display:grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 360px);
  gap: 16px; overflow-x: auto; padding: 6px 4px 10px; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; touch-action: pan-x; border-radius: 14px;
  background: rgba(255,255,255,.02);
  mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}
.lf-photo{
  scroll-snap-align: start; background: var(--surface); border-radius: var(--radius);
  padding: 10px; box-shadow: var(--shadow); display:grid; gap:6px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.lf-photo:hover{ transform: translateY(-2px); box-shadow: 0 16px 38px rgba(0,0,0,.45); }
.lf-photo img{ aspect-ratio: 4 / 3; object-fit: cover; }
.lf-photo figcaption{ font-size:12px; color: var(--muted); }

/* ================== Sektion 10: Jahreszeiten ================== */
.s-jahreszeiten{ padding: clamp(28px, 6vw, 64px) 0; }
.jz-grid{ display:grid; grid-template-columns: .9fr 1.1fr; gap: clamp(16px,4vw,28px); align-items:start; }
.jz-aside h2{
  font-family: PlayfairLocal, serif; font-size: clamp(22px,3vw,32px); margin:0 0 6px;
}
.jz-lede{ color: var(--muted); margin:0; }
.jz-cells{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px;
}
.jz-cell{
  background: var(--surface); border-radius: var(--radius); padding: 12px;
  box-shadow: var(--shadow); display:grid; gap:8px;
  border: 1px solid rgba(255,255,255,.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.jz-cell:hover{ transform: translateY(-4px); box-shadow: 0 18px 42px rgba(0,0,0,.5); border-color: rgba(255,255,255,.16); }
.jz-cell figure{ margin:0; }
.jz-cell img{ aspect-ratio: 4 / 3; object-fit: cover; }
.jz-cell figcaption{ font-size:12px; color: var(--muted); padding-top:6px; }
.jz-cell h3{ margin:0; }

/* farbschimmer je nach Saison */
.jz-cell.fruehling{ background:
  linear-gradient(180deg, rgba(66,150,66,.10), transparent), var(--surface); }
.jz-cell.sommer{ background:
  linear-gradient(180deg, rgba(214,162,0,.10), transparent), var(--surface); }
.jz-cell.herbst{ background:
  linear-gradient(180deg, rgba(176,93,16,.12), transparent), var(--surface); }
.jz-cell.winter{ background:
  linear-gradient(180deg, rgba(44,107,191,.10), transparent), var(--surface); }

/* responsive */
@media (max-width: 1024px){
  .jz-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 720px){
  .jz-cells{ grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce){
  .lf-photo, .kkarte-photo, .jz-cell{ transition:none; }
  .wave i{ animation:none; }
}
/* ================== Sektion 11: Zunft & Verein ================== */
.s-zunftverein{ padding: clamp(28px, 6vw, 64px) 0; }
.zv-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(16px,4vw,28px); align-items:start; }
.zv-aside h2{
  font-family: PlayfairLocal, serif; font-size: clamp(22px,3vw,32px); margin:0 0 6px;
}
.zv-lede{ color: var(--muted); margin:0 0 10px; }
.zv-figure{ margin-top: 10px; background: var(--surface); border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow); }
.zv-figure figcaption{ font-size:12px; color: var(--muted); padding:6px 10px; }

.zv-band{ display:grid; gap: 10px; }
.band-item{
  border: 1px solid rgba(255,255,255,.08); border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent);
  overflow: hidden;
}
.band-item summary{
  cursor:pointer; list-style:none; padding:12px 14px; display:flex; align-items:baseline; gap:10px;
}
.band-item summary::-webkit-details-marker{ display:none; }
.band-item summary span{ color: var(--brand); font-weight:700; }
.band-item summary em{ color: var(--muted); font-style: normal; }
.band-item[open]{ border-color: rgba(255,255,255,.16); box-shadow: var(--shadow); }
.band-body{ padding: 0 14px 12px; }

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

/* ================== Sektion 12: Festökonomie ================== */
.s-oekonomie{
  padding: clamp(28px, 6vw, 64px) 0;
  background:
    radial-gradient(700px 380px at 15% 20%, rgba(214,162,0,.08), transparent 60%),
    radial-gradient(700px 380px at 85% 80%, rgba(44,107,191,.08), transparent 60%);
}
.oek-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(16px,4vw,28px); align-items:center; }
.oek-copy h2{
  font-family: PlayfairLocal, serif; font-size: clamp(22px,3vw,32px); margin:0 0 6px;
}
.oek-lede{ color: var(--muted); margin:0 0 10px; }

.oek-kpis{ display:flex; gap:14px; flex-wrap:wrap; }
.ok-kpi{
  background: var(--surface); border-radius: 14px; padding: 10px 12px; min-width: 140px;
  border: 1px solid rgba(255,255,255,.06); box-shadow: var(--shadow);
}
.ok-val{ display:block; font-size: 22px; font-weight:800; color: var(--brand); }
.ok-label{ color: var(--muted); font-size: 13px; }

.oek-fluss{
  margin-top: 14px; display:grid; grid-template-columns: auto 1fr auto 1fr auto; gap:8px; align-items:center;
  color: var(--muted);
}
.oek-fluss .arr{
  height: 6px; background: linear-gradient(90deg, var(--brand), var(--accent));
  border-radius: 999px; position: relative;
}
.oek-fluss .arr::after{
  content:""; position:absolute; right:-6px; top:50%; width:0; height:0; transform: translateY(-50%);
  border-left: 6px solid var(--accent); border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}

.oek-figure{ background: var(--surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.oek-figure figcaption{ font-size:12px; color: var(--muted); padding:6px 10px; }

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

/* ================== Sektion 13: Mini-Glossar ================== */
.s-glossar{ padding: clamp(28px, 6vw, 64px) 0; }
.gl-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(16px,4vw,28px); align-items:start; }
.gl-copy h2{
  font-family: PlayfairLocal, serif; font-size: clamp(22px,3vw,32px); margin:0 0 6px;
}
.gl-lede{ color: var(--muted); margin:0 0 10px; }

.gl-terms{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.gl-term{
  position: relative; background: var(--surface); border-radius: 14px; padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.06); box-shadow: var(--shadow);
}
.gl-term b{ color: var(--brand); }
.gl-pop{
  position:absolute; left: 12px; right: 12px; top: calc(100% + 6px);
  background: rgba(0,0,0,.7); color: var(--ink); padding: 10px 12px; border-radius: 12px;
  font-size: 14px; line-height: 1.5; opacity: 0; transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease; pointer-events:none;
}
.gl-term:focus-within .gl-pop,
.gl-term:hover .gl-pop{ opacity:1; transform: translateY(0); }

.gl-figure{ background: var(--surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.gl-figure figcaption{ font-size:12px; color: var(--muted); padding:6px 10px; }

@media (max-width: 1024px){
  .gl-grid{ grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce){
  .gl-pop{ transition:none; }
}
/* ================== Sektion 14: Redaktion & Leitlinien ================== */
.s-redaktion{ padding: clamp(28px, 6vw, 64px) 0; }
.red-grid{ display:grid; grid-template-columns: .95fr 1.05fr; gap: clamp(16px,4vw,28px); align-items:start; }
.red-aside h2{
  font-family: PlayfairLocal, serif; font-size: clamp(22px,3vw,32px); margin:0 0 6px;
}
.red-lede{ color: var(--muted); margin: 0 0 12px; }

.red-badges{
  list-style:none; padding:0; margin: 12px 0 0; display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px;
}
.red-badges li{
  display:flex; align-items:center; gap:10px;
  background: var(--surface); border-radius: 12px; padding: 10px;
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: var(--shadow);
}
.red-badges i{
  width:18px; height:18px; border-radius:50%;
  background: conic-gradient(from 30deg, var(--brand), var(--accent), var(--brand-2), var(--brand));
  filter: saturate(1.1);
  animation: spinBadge 6s linear infinite;
}
@keyframes spinBadge{
  0%{ transform: rotate(0deg); } 100%{ transform: rotate(360deg); }
}

.red-board{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px;
}
.red-principle{
  background: var(--surface); border-radius: var(--radius); padding: 14px;
  border: 1px solid rgba(255,255,255,.06); box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.red-principle:hover{ transform: translateY(-4px); box-shadow: 0 18px 42px rgba(0,0,0,.5); border-color: rgba(255,255,255,.16); }
.red-principle h3{ margin:0 0 6px; }
.red-principle details{ margin-top: 8px; }
.red-principle summary{ cursor:pointer; color: var(--brand); }

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

/* ================== Sektion 15: Auf Entdeckungsreise ================== */
.s-explore{ padding: clamp(28px, 6vw, 64px) 0; }
.exp-grid{ display:grid; gap: 14px; }
.exp-head h2{
  font-family: PlayfairLocal, serif; font-size: clamp(22px,3vw,32px); margin:0 0 6px;
}
.exp-lede{ color: var(--muted); margin:0 0 10px; }

.exp-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.exp-chip{
  background: rgba(255,255,255,.06); color: var(--ink);
  border: 1px solid rgba(255,255,255,.12); padding: 8px 12px; border-radius: 999px;
  transition: background .2s ease, transform .2s ease, border-color .2s ease, color .2s ease;
  cursor: pointer;
}
.exp-chip:hover{ background: rgba(255,255,255,.12); transform: translateY(-1px); }
.exp-chip.is-active{ color: var(--bg); background: linear-gradient(90deg, var(--brand), var(--accent)); border-color: transparent; }

.exp-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);
}

/* Drei überlagerte Routen als CSS-Linienflächen */
.route{
  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;
  /* „Lauflicht“ per maskierten Gradienten */
  mask-image: radial-gradient(300px 300px at var(--x,50%) var(--y,50%), black 40%, transparent 70%);
}
.route::after{
  /* leichter Sternenstaub */
  content:""; position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,.16) 1px, transparent 1px);
  background-size: 22px 22px;
  mix-blend-mode: screen; opacity:.4;
}

/* Linienmuster je Route */
.route.chronik{
  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: dashA 6s linear infinite;
}
.route.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: dashB 7s linear infinite;
}
.route.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: dashC 5.5s linear infinite;
}

/* Sichtbarkeiten je Auswahl */
.s-explore[data-route="chronik"] .route.chronik{ opacity: 1; }
.s-explore[data-route="kalender"] .route.kalender{ opacity: 1; }
.s-explore[data-route="staedte"] .route.staedte{ opacity: 1; }

@keyframes dashA{
  0%{ background-position: 0 0, 0 0, 0 0; }
  100%{ background-position: 80px 0, 0 80px, 0 0; }
}
@keyframes dashB{
  0%{ background-position: 0 0, 0 0, 0 0; }
  100%{ background-position: 80px 80px, -80px 80px, 0 0; }
}
@keyframes dashC{
  0%{ background-position: 0 0, 0 0, 0 0; }
  100%{ background-position: 0 80px, 80px 0, 0 0; }
}

/* CTA */
.exp-cta{ display:flex; gap:10px; flex-wrap:wrap; }

/* Responsiv */
@media (max-width: 640px){
  .red-badges{ grid-template-columns: 1fr; }
  .exp-canvas{ height: 240px; }
}
@media (prefers-reduced-motion: reduce){
  .route, .exp-chip{ transition: none; animation: none; }
}