/* ===== Grundabstände ===== */
.k-hero, .k-monatsband, .k-laender{
  padding: clamp(28px, 6vw, 64px) 0;
}

/* ===== Sektion 1: Kalender-Hero ===== */
.khero-grid{
  display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(16px,4vw,28px); align-items:center;
}
.khero-copy h1{
  font-family: PlayfairLocal, serif;
  font-size: clamp(24px, 3.6vw, 40px);
  line-height:1.15; margin:0 0 8px; text-wrap: balance;
}
.khero-lede{ color: var(--muted); margin: 0 0 10px; }
.khero-points{ list-style:none; padding:0; margin: 10px 0 0; display:grid; gap:8px; }
.khero-points li{ display:grid; grid-template-columns: 90px 1fr; gap: 10px; }
.khero-points span{ color: var(--brand); font-weight: 600; }

.khero-media{
  display:flex; gap: 12px; flex-wrap: wrap; justify-content: flex-start;
}
.khero-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;
}
.khero-photo:hover{ transform: translateY(-4px); box-shadow: 0 18px 42px rgba(0,0,0,.5); filter: saturate(1.06); }
.khero-photo img{ aspect-ratio: 4 / 3; object-fit: cover; }
.khero-photo figcaption{ font-size: 12px; color: var(--muted); padding: 6px 10px; }

/* Monatschips + Progress */
.khero-months{ margin-top: 12px; display:grid; gap: 10px; }
.m-chips{ display:flex; flex-wrap: wrap; gap: 8px; }
.m-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;
}
.m-chip:hover{ background: rgba(255,255,255,.12); transform: translateY(-1px); }
.m-chip.is-active{ color: var(--bg); background: linear-gradient(90deg, var(--brand), var(--accent)); border-color: transparent; }

.m-progress{ height: 6px; background: rgba(255,255,255,.08); border-radius: 6px; overflow: hidden; }
.m-progress .bar{ display:block; width: calc((1 / 12) * 100%); height:100%; background: linear-gradient(90deg, var(--brand), var(--accent)); transition: width .25s ease; }

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

/* ===== Sektion 2: Monatsband (Jan–März) ===== */
.kmb-wrap{ display:grid; gap: 14px; }
.kmb-head h2{
  font-family: PlayfairLocal, serif; font-size: clamp(22px,3vw,32px); margin:0 0 6px;
}
.kmb-lede{ color: var(--muted); margin:0 0 10px; }
.kmb-progress{ height: 4px; background: rgba(255,255,255,.08); border-radius: 4px; overflow:hidden; }
.kmb-progress .bar{ display:block; width: 0%; height:100%; background: linear-gradient(90deg, var(--brand), var(--accent)); }

.kmb-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);
}
.kmb-card{
  scroll-snap-align: start; 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;
}
.kmb-card:hover{ transform: translateY(-4px); box-shadow: 0 18px 42px rgba(0,0,0,.5); border-color: rgba(255,255,255,.16); }
.kmb-card figure{ margin:0; }
.kmb-card img{ aspect-ratio: 4 / 3; object-fit: cover; }
.kmb-card figcaption{ font-size:12px; color: var(--muted); padding-top: 6px; }

@media (prefers-reduced-motion: reduce){
  .kmb-card, .m-chip{ transition: none; }
}

/* ===== Sektion 3: Länderfächer ===== */
.kl-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(16px,4vw,28px); align-items:start; }
.kl-aside h2{
  font-family: PlayfairLocal, serif; font-size: clamp(22px,3vw,32px); margin:0 0 6px;
}
.kl-lede{ color: var(--muted); margin:0 0 10px; }

.kl-chips{ display:flex; gap:8px; flex-wrap:wrap; }
.kl-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;
}
.kl-chip:hover{ background: rgba(255,255,255,.12); transform: translateY(-1px); }
.kl-chip.is-active{ color: var(--bg); background: linear-gradient(90deg, var(--brand), var(--accent)); border-color: transparent; }

.kl-faecher{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px;
}
.kl-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; justify-self:center;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease, border-color .2s ease;
}
.kl-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); }
.kl-card img{ aspect-ratio: 4 / 3; object-fit: cover; }
.kl-card figcaption{ font-size:12px; color: var(--muted); padding: 6px 10px; }

/* Sichtbarkeit je State (wir blenden NICHT aus, sondern akzentuieren) */
.k-laender[data-state="bayern"] .c-bayern{ outline: 1px solid rgba(214,162,0,.35); }
.k-laender[data-state="nrw"]    .c-nrw   { outline: 1px solid rgba(214,162,0,.35); }
.k-laender[data-state="nord"]   .c-nord  { outline: 1px solid rgba(214,162,0,.35); }

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

/* входная анимация элементов */
[data-reveal].is-in .khero-photo,
[data-reveal].is-in .kmb-card,
[data-reveal].is-in .kl-card{
  animation: kFloatUp .75s ease both;
}
@keyframes kFloatUp{
  from{ transform: translateY(14px); opacity: .0; }
  to{ transform: translateY(0); opacity: 1; }
}
/* ================== Sektion 4: Frühling II ================== */
.kf2-grid{ display:grid; grid-template-columns: .95fr 1.05fr; gap: clamp(16px,4vw,28px); align-items:start; }
.kf2-aside h2{
  font-family: PlayfairLocal, serif; font-size: clamp(22px,3vw,32px); margin:0 0 6px;
}
.kf2-lede{ color: var(--muted); margin:0 0 10px; }
.kf2-meter{ height:6px; background: rgba(255,255,255,.08); border-radius:6px; overflow:hidden; }
.kf2-meter .bar{ display:block; width:0%; height:100%; background: linear-gradient(90deg, var(--brand), var(--accent)); }

.kf2-steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px;
}
.kf2-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;
}
.kf2-step:hover{ transform: translateY(-4px); box-shadow: 0 18px 42px rgba(0,0,0,.5); border-color: rgba(255,255,255,.16); }
.kf2-step figure{ margin:0; }
.kf2-step img{ aspect-ratio: 4 / 3; object-fit: cover; }
.kf2-step figcaption{ font-size:12px; color: var(--muted); padding-top:6px; }
.kf2-step h3{ margin: 6px 0 4px; }

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

/* ================== Sektion 5: Sommerband ================== */
.ksm-grid{ display:grid; gap: 14px; }
.ksm-head h2{
  font-family: PlayfairLocal, serif; font-size: clamp(22px,3vw,32px); margin:0 0 6px;
}
.ksm-lede{ color: var(--muted); margin:0 0 10px; }

.ksm-rail{ display:flex; gap:12px; flex-wrap: wrap; }
.ksm-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;
}
.ksm-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); }
.ksm-card img{ aspect-ratio: 4 / 3; object-fit: cover; }
.ksm-card figcaption{ font-size:12px; color: var(--muted); padding:6px 10px; }

/* ================== Sektion 6: Herbstband ================== */
.khb-grid{ display:grid; grid-template-columns: .95fr 1.05fr; gap: clamp(16px,4vw,28px); align-items:start; }
.khb-aside h2{
  font-family: PlayfairLocal, serif; font-size: clamp(22px,3vw,32px); margin:0 0 6px;
}
.khb-lede{ color: var(--muted); margin:0 0 10px; }
.khb-meter{ height:6px; background: rgba(255,255,255,.08); border-radius:6px; overflow:hidden; }
.khb-meter .bar{ display:block; width:0%; height:100%; background: linear-gradient(90deg, var(--brand), var(--accent)); }

.khb-steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px;
}
.khb-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;
}
.khb-step:hover{ transform: translateY(-4px); box-shadow: 0 18px 42px rgba(0,0,0,.5); border-color: rgba(255,255,255,.16); }
.khb-step figure{ margin:0; }
.khb-step img{ aspect-ratio: 4 / 3; object-fit: cover; }
.khb-step figcaption{ font-size:12px; color: var(--muted); padding-top:6px; }
.khb-step h3{ margin: 6px 0 4px; }

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

/* ================== Sektion 7: Winterband ================== */
.kwt-grid{ display:grid; gap: 14px; }
.kwt-head h2{
  font-family: PlayfairLocal, serif; font-size: clamp(22px,3vw,32px); margin:0 0 6px;
}
.kwt-lede{ color: var(--muted); margin:0 0 10px; }

.kwt-rail{ display:flex; gap:12px; flex-wrap: wrap; }
.kwt-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;
}
.kwt-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); }
.kwt-card img{ aspect-ratio: 4 / 3; object-fit: cover; }
.kwt-card figcaption{ font-size:12px; color: var(--muted); padding:6px 10px; }

/* входные анимации */
[data-reveal].is-in .kf2-step,
[data-reveal].is-in .ksm-card,
[data-reveal].is-in .khb-step,
[data-reveal].is-in .kwt-card{
  animation: kFloatUp .75s ease both;
}
/* ================== Sektion 8: Sommernächte ================== */
.c-sommernacht{ padding: clamp(28px,6vw,64px) 0; }
.sn-grid{ display:grid; gap: 14px; }
.sn-head h2{
  font-family: PlayfairLocal, serif; font-size: clamp(22px,3vw,32px); margin:0 0 6px;
}
.sn-lede{ color: var(--muted); margin:0 0 10px; }
.sn-meter{
  position: relative; height: 36px; border-radius: 10px; overflow: hidden;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  display:flex; align-items:flex-end; gap:6px; padding: 6px 8px;
}
.sn-meter i{
  flex:1 1 0; height: 30%; border-radius: 6px;
  background: linear-gradient(180deg, var(--accent), var(--brand));
  transform-origin: bottom center;
  transform: scaleY(var(--y, .6));
  transition: transform .25s ease;
}
.sn-rail{ display:flex; gap:12px; flex-wrap: wrap; }
.sn-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;
}
.sn-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); }
.sn-card img{ aspect-ratio: 4 / 3; object-fit: cover; }
.sn-card figcaption{ font-size:12px; color: var(--muted); padding:6px 10px; }

/* ================== Sektion 9: Herbstzüge ================== */
.c-herbstzuege{ padding: clamp(28px,6vw,64px) 0; }
.hz-grid{ display:grid; grid-template-columns: .95fr 1.05fr; gap: clamp(16px,4vw,28px); align-items:start; }
.hz-aside h2{
  font-family: PlayfairLocal, serif; font-size: clamp(22px,3vw,32px); margin:0 0 6px;
}
.hz-lede{ color: var(--muted); margin:0 0 10px; }

.hz-map{
  position: relative; border-radius: 14px; padding: 18px;
  background: rgba(255,255,255,.02); box-shadow: var(--shadow);
}
.hz-line{
  position:absolute; left: 18px; right: 18px; top: 50%;
  height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--brand), var(--accent));
  opacity:.5;
}
.hz-node{
  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;
}
.hz-node:hover{ transform: translateY(-4px); box-shadow: 0 18px 42px rgba(0,0,0,.5); border-color: rgba(255,255,255,.16); }
.hz-node figure{ margin:0; }
.hz-node img{ aspect-ratio: 4 / 3; object-fit: cover; }
.hz-node figcaption{ font-size:12px; color: var(--muted); padding-top:6px; }
.hz-node h3{ margin:8px 0 4px; }

.hz-node.n1{ margin-left: 0; margin-bottom: 16px; }
.hz-node.n2{ margin-left: 34%; }

@media (max-width: 1024px){
  .hz-grid{ grid-template-columns: 1fr; }
  .hz-node.n2{ margin-left: 0; }
}

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

.ah-accord{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.ah-item{
  background: var(--surface); border-radius: var(--radius); border:1px solid rgba(255,255,255,.06);
  box-shadow: var(--shadow); overflow: hidden;
}
.ah-item summary{
  cursor:pointer; list-style:none; padding: 12px 14px; display:flex; align-items:baseline; gap: 10px;
  transition: background .2s ease;
}
.ah-item summary::-webkit-details-marker{ display:none; }
.ah-item summary span{ color: var(--brand); font-weight: 700; }
.ah-item summary em{ color: var(--muted); font-style: normal; }
.ah-item[open]{ border-color: rgba(255,255,255,.16); }
.ah-body{ padding: 0 14px 12px; display:grid; gap: 8px; }
.ah-body figure{ margin:0; }
.ah-body img{ aspect-ratio: 4 / 3; object-fit: cover; }
.ah-body figcaption{ font-size:12px; color: var(--muted); padding-top:6px; }

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

/* входные анимации */
[data-reveal].is-in .sn-card,
[data-reveal].is-in .hz-node,
[data-reveal].is-in .ah-item{
  animation: kFloatUp .75s ease both;
}
/* ================== Sektion 11: Kalenderkarte ================== */
.k-wochenkarte{ padding: clamp(28px,6vw,64px) 0; }
.wk-wrap{ display:grid; gap: 14px; }
.wk-head h2{
  font-family: PlayfairLocal, serif; font-size: clamp(22px,3vw,32px); margin:0 0 6px;
}
.wk-lede{ color: var(--muted); margin:0 0 10px; }
.wk-progress{ height: 4px; background: rgba(255,255,255,.08); border-radius: 4px; overflow:hidden; }
.wk-progress .bar{ display:block; width:0%; height:100%; background: linear-gradient(90deg, var(--brand), var(--accent)); }

.wk-ruler{
  height: 14px; position: relative; border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  overflow: hidden; display:flex; gap: 8px; padding: 0 8px; align-items:center;
}
.wk-ruler i{
  flex: 1 1 0; height: 6px; border-radius: 6px; background: rgba(255,255,255,.16);
}

.wk-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);
}
.wk-seg{
  scroll-snap-align: start; background: var(--surface); border-radius: var(--radius); padding: 12px;
  border:1px solid rgba(255,255,255,.06); box-shadow: var(--shadow);
  display:grid; gap:4px; align-content:start;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.wk-seg:hover{ transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0,0,0,.45); border-color: rgba(255,255,255,.16); }
.wk-seg h3{ margin:0; color: var(--brand); }
.wk-seg p{ margin:0; color: var(--muted); }

.wk-photo{
  scroll-snap-align: start; background: var(--surface); border-radius: var(--radius);
  overflow:hidden; box-shadow: var(--shadow); border:1px solid rgba(255,255,255,.06);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease, border-color .2s ease;
  max-width: 350px; justify-self:center;
}
.wk-photo: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); }
.wk-photo img{ aspect-ratio: 4 / 3; object-fit: cover; }
.wk-photo figcaption{ font-size:12px; color: var(--muted); padding: 6px 10px; }

@media (prefers-reduced-motion: reduce){
  .wk-seg, .wk-photo{ transition: none; }
}

/* ================== Sektion 12: Städtische Serien ================== */
.k-serien{ padding: clamp(28px,6vw,64px) 0; }
.ks-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(16px,4vw,28px); align-items:start; }
.ks-aside h2{
  font-family: PlayfairLocal, serif; font-size: clamp(22px,3vw,32px); margin:0 0 6px;
}
.ks-lede{ color: var(--muted); margin:0 0 10px; }
.ks-aside{ position: sticky; top: 84px; align-self:start; }

.ks-list{ display:grid; gap: 14px; }
.ks-item{
  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, outline .2s ease;
}
.ks-item:hover{ transform: translateY(-4px); box-shadow: 0 18px 42px rgba(0,0,0,.5); border-color: rgba(255,255,255,.16); }
.ks-item figure{ margin:0; }
.ks-item img{ aspect-ratio: 4 / 3; object-fit: cover; }
.ks-item figcaption{ font-size:12px; color: var(--muted); padding-top:6px; }
.ks-item h3{ margin: 6px 0 4px; }
.ks-item.is-on{ outline: 1px solid rgba(214,162,0,.35); }

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

/* ================== Sektion 13: Küche im Jahreslauf ================== */
.k-kueche{ padding: clamp(28px,6vw,64px) 0; }
.kk-grid{ display:grid; gap: 14px; }
.kk-head 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-chips{ display:flex; gap:8px; flex-wrap:wrap; }
.kk-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;
}
.kk-chip:hover{ background: rgba(255,255,255,.12); transform: translateY(-1px); }
.kk-chip.is-active{ color: var(--bg); background: linear-gradient(90deg, var(--brand), var(--accent)); border-color: transparent; }

.kk-cards{ display:flex; gap:12px; flex-wrap: wrap; }
.kk-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;
}
.kk-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); }
.kk-card img{ aspect-ratio: 4 / 3; object-fit: cover; }
.kk-card figcaption{ font-size:12px; color: var(--muted); padding: 6px 10px; }

/* Themenfarbigkeit */
.k-kueche[data-mode="suess"]  { background:
  radial-gradient(900px 480px at 20% 30%, rgba(214,162,0,.08), transparent 60%),
  rgba(255,255,255,.00); }
.k-kueche[data-mode="herzhaft"]{ background:
  radial-gradient(900px 480px at 80% 70%, rgba(44,107,191,.10), transparent 60%),
  rgba(255,255,255,.00); }

/* входные анимации */
[data-reveal].is-in .wk-seg,
[data-reveal].is-in .wk-photo,
[data-reveal].is-in .ks-item,
[data-reveal].is-in .kk-card{
  animation: kFloatUp .75s ease both;
}
/* ================== Sektion 14: Festlogistik & Sicherheit ================== */
.k-logistik{ padding: clamp(28px,6vw,64px) 0; }
.klg-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(16px,4vw,28px); align-items:start; }
.klg-aside h2{
  font-family: PlayfairLocal, serif; font-size: clamp(22px,3vw,32px); margin:0 0 6px;
}
.klg-lede{ color: var(--muted); margin:0 0 10px; }
.klg-chips{ display:flex; gap:8px; flex-wrap:wrap; }
.klg-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;
}
.klg-chip:hover{ background: rgba(255,255,255,.12); transform: translateY(-1px); }
.klg-chip.is-active{ color: var(--bg); background: linear-gradient(90deg, var(--brand), var(--accent)); border-color: transparent; }

.klg-map{
  position: relative; border-radius: 14px; padding: 16px;
  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);
}
.klg-path{
  position:absolute; left: 14px; right: 14px; top: 50%;
  height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--brand), var(--accent));
  opacity:.55;
}
.klg-pillars{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom: 12px; }
.klg-pillar{
  background: var(--surface); border-radius: 12px; padding: 10px 12px;
  border:1px solid rgba(255,255,255,.06); box-shadow: var(--shadow);
}
.klg-pillar b{ color: var(--brand); }
.klg-pillar span{ color: var(--muted); display:block; font-size: 12px; }

.klg-photos{ display:flex; gap: 12px; flex-wrap:wrap; }
.klg-photo{
  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;
}
.klg-photo: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); }
.klg-photo img{ aspect-ratio: 4 / 3; object-fit: cover; }
.klg-photo figcaption{ font-size:12px; color: var(--muted); padding: 6px 10px; }

/* Farbakzente je Phase */
.k-logistik[data-phase="aufbau"]{ --phaseHue: var(--brand-2); }
.k-logistik[data-phase="betrieb"]{ --phaseHue: var(--brand); }
.k-logistik[data-phase="abbau"]{ --phaseHue: var(--accent); }
.k-logistik .klg-pillar{ outline: 1px solid color-mix(in oklab, var(--phaseHue) 30%, transparent); }

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

/* ================== Sektion 15: Kinder & Laterne ================== */
.k-kinder{ padding: clamp(28px,6vw,64px) 0; }
.kki-grid{ display:grid; gap: 14px; }
.kki-head h2{
  font-family: PlayfairLocal, serif; font-size: clamp(22px,3vw,32px); margin:0 0 6px;
}
.kki-lede{ color: var(--muted); margin:0 0 10px; }
.kki-meter{
  position: relative; height: 40px; border-radius: 20px; overflow: hidden; margin-top: 8px;
  background: radial-gradient(60% 100% at 0% 50%, rgba(214,162,0,.20), transparent 60%),
              radial-gradient(60% 100% at 100% 50%, rgba(44,107,191,.20), transparent 60%),
              rgba(255,255,255,.06);
}
.kki-meter .dot{
  position:absolute; top: 50%; left: 8px; width: 18px; height: 18px; border-radius: 50%;
  background: linear-gradient(180deg, var(--brand), var(--accent)); transform: translateY(-50%);
  box-shadow: 0 0 18px rgba(214,162,0,.6);
}
.kki-rail{ display:flex; gap:12px; flex-wrap:wrap; }
.kki-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;
}
.kki-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); }
.kki-card img{ aspect-ratio: 4 / 3; object-fit: cover; }
.kki-card figcaption{ font-size:12px; color: var(--muted); padding: 6px 10px; }

/* ================== Sektion 16: Fluss & Feuerwerk ================== */
.k-fluss{ padding: clamp(28px,6vw,64px) 0; }
.kfl-grid{ display:grid; grid-template-columns: .95fr 1.05fr; gap: clamp(16px,4vw,28px); align-items:start; }
.kfl-aside h2{
  font-family: PlayfairLocal, serif; font-size: clamp(22px,3vw,32px); margin:0 0 6px;
}
.kfl-lede{ color: var(--muted); margin:0 0 10px; }

.kfl-canvas{
  position: relative; height: clamp(200px, 26vw, 320px); border-radius: 14px; overflow: hidden;
  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);
}
.kfl-canvas .river{
  position:absolute; inset: 30% 0 30% 0; background:
    linear-gradient(180deg, rgba(44,107,191,.45), rgba(44,107,191,.20));
  filter: blur(1px); opacity:.9;
}
.kfl-canvas .sparks{
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,.7) 1px, transparent 1px);
  background-size: 24px 24px; mix-blend-mode: screen; opacity:.35;
  mask-image: radial-gradient(240px 240px at var(--x,50%) var(--y,50%), black 40%, transparent 70%);
}

.kfl-photos{ display:flex; gap:12px; flex-wrap:wrap; }
.kfl-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;
}
.kfl-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); }
.kfl-card img{ aspect-ratio: 4 / 3; object-fit: cover; }
.kfl-card figcaption{ font-size:12px; color: var(--muted); padding: 6px 10px; }

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

/* ================== Sektion 17: Ausblick & Routen ================== */
.k-ausblick{ padding: clamp(28px,6vw,64px) 0; }
.kau-grid{ display:grid; gap: 14px; }
.kau-head h2{
  font-family: PlayfairLocal, serif; font-size: clamp(22px,3vw,32px); margin:0 0 6px;
}
.kau-lede{ color: var(--muted); margin:0 0 10px; }
.kau-chips{ display:flex; gap:8px; flex-wrap:wrap; }
.kau-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;
}
.kau-chip:hover{ background: rgba(255,255,255,.12); transform: translateY(-1px); }
.kau-chip.is-active{ color: var(--bg); background: linear-gradient(90deg, var(--brand), var(--accent)); border-color: transparent; }

.kau-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);
}
.kau-canvas .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%);
}
.kau-canvas .layer.monate{
  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: kauA 6s linear infinite;
}
.kau-canvas .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: kauB 5.5s linear infinite;
}
.kau-canvas .layer.themen{
  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: kauC 7s linear infinite;
}
.k-ausblick[data-route="monate"] .layer.monate{ opacity:1; }
.k-ausblick[data-route="staedte"] .layer.staedte{ opacity:1; }
.k-ausblick[data-route="themen"] .layer.themen{ opacity:1; }

@keyframes kauA{ 0%{ background-position:0 0,0 0,0 0 } 100%{ background-position:80px 80px,-80px 80px,0 0 } }
@keyframes kauB{ 0%{ background-position:0 0,0 0,0 0 } 100%{ background-position:0 80px,80px 0,0 0 } }
@keyframes kauC{ 0%{ background-position:0 0,0 0,0 0 } 100%{ background-position:80px 0,0 80px,0 0 } }

.kau-photos{ display:flex; gap:12px; flex-wrap:wrap; }
.kau-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;
}
.kau-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); }
.kau-card img{ aspect-ratio: 4 / 3; object-fit: cover; }
.kau-card figcaption{ font-size:12px; color: var(--muted); padding: 6px 10px; }

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

/* входные анимации */
[data-reveal].is-in .klg-photo,
[data-reveal].is-in .kki-card,
[data-reveal].is-in .kfl-card,
[data-reveal].is-in .kau-card{
  animation: kFloatUp .75s ease both;
}