/* ====== Hero sectie (S1) ====== */
.s-hero{
  position:relative;
  padding: clamp(42px, 6vw, 72px) 0 28px;
  overflow: clip;
}
.hero-inner{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(18px, 3vw, 32px);
  align-items:center;
}
.hero-copy h1{
  font-family:"Merriweather", serif;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height:1.2; margin: 0 0 10px 0;
}
.hero-copy p{ color: var(--muted); margin: 0 0 10px 0 }
.hero-highlights{
  display:grid; gap:8px; list-style:none; padding:0; margin:14px 0 0 0;
}
.hero-highlights li{
  padding:8px 12px; border:1px dashed var(--line); border-radius: 12px; background: rgba(255,255,255,.03);
}

/* Collage */
.hero-collage{
  position:relative;
  min-height: 420px;
}
.postkaart{
  position:absolute;
  background: var(--card);
  box-shadow: var(--shadow);
  border-radius: 14px;
  padding: 10px;
  transform-origin: center;
  transition: transform .3s ease, box-shadow .3s ease;
}
.postkaart figcaption{
  margin-top:8px; font-size:12px; letter-spacing:.3px; color:#aeb9c3;
}

/* Posities (zonder inline) */
.pk-1{ left: 4%;  top: 6%;  rotate: -3deg; }
.pk-2{ right: 2%; top: 14%; rotate: 4deg; }
.pk-3{ left: 18%; bottom: 2%; rotate: 1deg; }

/* Hover/active tilt (JS voegt .tilt-armed) */
.tilt:hover{ transform: translateY(-4px) }
.tilt-armed:hover{ box-shadow: 0 16px 40px rgba(0,0,0,.45) }

/* Decoratief kaartgrid achter de kaarten */
.kaartgrid{
  position:absolute; inset: -12% -10% -8% -10%;
  background:
    radial-gradient(1200px 600px at 20% 20%, rgba(87,193,201,.06), transparent 60%),
    radial-gradient(1200px 600px at 80% 70%, rgba(228,179,99,.06), transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 38px, rgba(255,255,255,.03) 38px 39px),
    repeating-linear-gradient(90deg, transparent 0 38px, rgba(255,255,255,.03) 38px 39px);
  border-radius: 28px;
  filter: saturate(1.05);
}

/* ====== Media queries voor S1 ====== */
@media (max-width: 980px){
  .hero-inner{ grid-template-columns: 1fr; }
  .hero-collage{ min-height: 520px; }
  .pk-1{ left: 2%; top: 2% }
  .pk-2{ right: 2%; top: 28% }
  .pk-3{ left: 10%; bottom: 4% }
}
@media (max-width: 640px){
  .hero-collage{ min-height: 460px; }
  .postkaart{ padding:8px }
  .pk-1{ left: 0; top: 0; rotate: -2deg }
  .pk-2{ right: 0; top: 34%; rotate: 3deg }
  .pk-3{ left: 4%; bottom: 2%; rotate: 0deg }
  .hero-highlights li{ font-size: 14px }
}
/* ДО было: .hero-collage { position:relative; min-height:420px; } */
.hero-collage{
  position: relative;
  min-height: 460px;          /* немного выше, чтобы карточки поместились */
  isolation: isolate;         /* создаёт отдельный стек слоёв */
  z-index: 1;
}
.hero-copy{                   /* текстовый столбец всегда поверх фона коллажа */
  position: relative;
  z-index: 2;
}

/* ДО было: inset: -12% -10% -8% -10%; — из-за этого фон вылазил влево к тексту */
.kaartgrid{
  position: absolute;
  inset: 0;                   /* фон-сетка теперь строго внутри области коллажа */
  background:
    radial-gradient(1200px 600px at 20% 20%, rgba(87,193,201,.06), transparent 60%),
    radial-gradient(1200px 600px at 80% 70%, rgba(228,179,99,.06), transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 38px, rgba(255,255,255,.03) 38px 39px),
    repeating-linear-gradient(90deg, transparent 0 38px, rgba(255,255,255,.03) 38px 39px);
  border-radius: 28px;
  z-index: -1;                /* точно за карточками */
}
.postkaart{
  position: absolute;
  background: var(--card);
  box-shadow: var(--shadow);
  border-radius: 14px;
  padding: 10px;
  width: clamp(230px, 32vw, 340px); /* фиксируем разумную ширину */
  transform-origin: center;
  transition: transform .3s ease, box-shadow .3s ease;
}

/* Новые безопасные позиции */
.pk-1{ left: 3%;  top: 4%;   rotate: -2deg; }
.pk-2{ right: 3%; top: 38%;  rotate:  2deg; }  /* опущена ниже, чтобы не касаться pk-1 */
.pk-3{ left: 10%; bottom: 5%; rotate: 0deg; }
/* ====== S2 Tijdlagen ====== */
.s-tijdlagen{ padding: clamp(42px,6vw,72px) 0 }
.tijdlagen-inner{
  display:grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(16px,3vw,32px);
  align-items:start;
}
.tijd-labels h2{ font-family:"Merriweather", serif; margin:0 0 8px 0 }
.tijd-labels p{ color: var(--muted); margin:0 }

.lagen{
  list-style:none; padding:0; margin:0;
  display:grid; gap:16px;
  counter-reset: laag;
}
.laag{
  display:grid;
  grid-template-columns: 82px 1fr;
  gap:12px;
  align-items:center;
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent 40%);
  border:1px solid var(--line);
  border-radius: 16px;
  padding:12px;
}
.laag .bubble{
  width:70px; height:70px; border-radius:50%; overflow:hidden;
  outline: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow);
}
.laag .strook h3{ margin:.2rem 0 .3rem 0; font-size: clamp(16px,1.8vw,18px) }
.laag .strook p{ margin:0; color: var(--muted) }

/* ====== S3 Routes (horizontale snap) ====== */
.s-routes{ padding: clamp(42px,6vw,72px) 0; position:relative }
.routes-head h2{ font-family:"Merriweather", serif; margin:0 0 8px 0 }
.routes-head p{ color: var(--muted); margin:0 0 16px 0 }

.route-controls{
  display:flex; gap:8px; justify-content:flex-end; margin-bottom:8px;
}
.route-btn{
  appearance:none; border:1px solid var(--line); background: rgba(255,255,255,.04);
  color:#fff; padding:8px 10px; border-radius:12px; cursor:pointer;
  transition: transform .2s ease, background .2s ease;
}
.route-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.07) }

.route-track{
  display:grid; grid-auto-flow: column; grid-auto-columns: min(92%, 690px);
  gap: 14px; overflow-x:auto; scroll-snap-type: x mandatory; padding-bottom: 8px;
  border-radius: 16px; border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent 45%);
}
.route-track:focus{ outline:2px solid rgba(87,193,201,.6) }
.pane{
  scroll-snap-align: start;
  display:grid; grid-template-columns: 140px 1fr; gap:12px; align-items:start;
  padding:14px; background: rgba(0,0,0,.18); border-radius: 14px; margin:8px;
}
.pane figure{ margin:0 }
.pane figcaption{ font-size:12px; color:#aeb9c3; margin-top:6px }
.pane-copy h3{ margin:.2rem 0 .3rem 0 }
.pane-copy p{ margin:0; color: var(--muted) }

.route-progress{ height:4px; background: rgba(255,255,255,.06); border-radius:4px; margin-top:10px }
.route-progress i{ display:block; height:100%; width:12%; background: linear-gradient(90deg,var(--brand),var(--brand-2)); border-radius:inherit }

/* ====== S4 Materiaal-mozaïek ====== */
.s-materiaal{ padding: clamp(42px,6vw,72px) 0 }
.materiaal-inner{
  display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(16px,3vw,32px); align-items:start;
}
.mat-copy h2{ font-family:"Merriweather", serif; margin:0 0 8px 0 }
.mat-copy p{ color: var(--muted); margin:0 0 10px 0 }
.mat-punten{ list-style: square inside; margin:0; padding:0; color: var(--muted) }

.mat-mozaiek{
  position:relative; min-height: 360px; display:grid; place-items:center;
}
.mat-mozaiek figure{ margin:0; position:absolute; }
.tegel{ left:6%; top:10%; transform: rotate(-2deg) }
.baksteen{ right:4%; bottom:8%; transform: rotate(2deg) }
.mat-mozaiek figure img{ clip-path: path("M10 30 Q 25 0 50 10 T 90 30 Q 100 50 90 70 T 50 90 Q 25 100 10 70 T 10 30 Z"); }
.mat-mozaiek figure:hover{ filter: saturate(1.12); transform: translateY(-3px) scale(1.02) }

.mat-raster{
  position:absolute; inset:0; border-radius:24px;
  background:
    radial-gradient(900px 400px at 20% 30%, rgba(87,193,201,.05), transparent 60%),
    radial-gradient(800px 400px at 80% 70%, rgba(228,179,99,.05), transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 32px, rgba(255,255,255,.03) 32px 33px),
    repeating-linear-gradient(90deg, transparent 0 32px, rgba(255,255,255,.03) 32px 33px);
  z-index:-1;
  pointer-events:none;
}

/* ====== Responsive ====== */
@media (max-width: 980px){
  .tijdlagen-inner{ grid-template-columns: 1fr }
  .materiaal-inner{ grid-template-columns: 1fr }
  .pane{ grid-template-columns: 120px 1fr }
}
@media (max-width: 720px){
  .laag{ grid-template-columns: 64px 1fr }
  .route-track{ grid-auto-columns: 92% }
  .pane{ grid-template-columns: 1fr }
  .mat-mozaiek{ min-height: 320px }
  .tegel,.baksteen{ position:relative; left:auto; right:auto; top:auto; bottom:auto; transform:none }
}
/* ==== FIX: S4 mozaïek — mobile stacking, no overlap ==== */
@media (max-width: 980px){
  .mat-mozaiek{
    min-height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;   /* 2 колонки на планшете */
    gap: 12px;
    place-items: stretch;
  }
  /* переопределяем ОБЩЕЕ правило .mat-mozaiek figure { position:absolute } */
  .mat-mozaiek figure{
    position: relative !important;
    left: auto !important; right: auto !important;
    top: auto !important;  bottom: auto !important;
    transform: none !important;
    width: 100%;
  }
  .mat-mozaiek figure img{
    clip-path: none;        /* на мобильных делаем проще, чтобы ничего не резало текст */
    border-radius: 14px;
  }
  .mat-mozaiek figcaption{
    margin-top: 6px;
    line-height: 1.25;
  }
}

/* ещё уже — одна колонка */
@media (max-width: 640px){
  .mat-mozaiek{
    grid-template-columns: 1fr;       /* 1 колонка на телефонах */
  }
}
/* ====== S5 Waterlijnen ====== */
.s-waterlijnen{ padding: clamp(42px,6vw,72px) 0 }
.water-inner{
  display:grid; grid-template-columns: .95fr 1.05fr;
  gap: clamp(16px,3vw,32px); align-items:start;
}
.water-copy h2{ font-family:"Merriweather", serif; margin:0 0 8px 0 }
.water-copy p{ color: var(--muted); margin:0 0 10px 0 }
.water-punten{ margin: 10px 0 0 0; padding-left: 1.2rem; color: var(--muted) }
.water-punten .w-punt{ margin: 6px 0 }
.water-punten .w-punt.is-active{ color: #fff }

/* делаем боковую колонку «липкой» на десктопе */
.water-copy{ position: sticky; top: 84px }

/* вертикальная лента панелей */
.water-panelen{ display:grid; gap: 14px }
.w-pane{
  background: var(--card); border:1px solid var(--line);
  border-radius: 16px; padding: 12px; box-shadow: var(--shadow);
}
.w-pane figure{ margin:0 }
.w-pane figcaption{ font-size:12px; color:#aeb9c3; margin-top:6px }
.w-pane p{ margin:.5rem 0 0 0; color: var(--muted) }

/* адаптив */
@media (max-width: 980px){
  .water-inner{ grid-template-columns: 1fr }
  .water-copy{ position: static }
}

/* ====== S6 Dijkprofiel ====== */
.s-dijk{ padding: clamp(42px,6vw,72px) 0 }
.dijk-inner{
  display:grid; grid-template-columns: .9fr 1.1fr; gap: clamp(16px,3vw,32px); align-items:start;
}
.diagram{
  position:relative; height: 240px; border:1px solid var(--line); border-radius:18px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent 50%);
  overflow:hidden;
}
.diagram .laag{ position:absolute; inset:0 }
.diagram .water{
  background: linear-gradient(0deg, rgba(87,193,201,.25), transparent 45%);
  clip-path: polygon(0 100%, 0 65%, 35% 65%, 50% 62%, 70% 64%, 100% 60%, 100% 100%);
}
.diagram .teen{
  background: linear-gradient(0deg, rgba(228,179,99,.18), transparent 44%);
  clip-path: polygon(0 100%, 0 74%, 40% 74%, 55% 68%, 72% 72%, 100% 68%, 100% 100%);
}
.diagram .kruin{
  background: linear-gradient(0deg, rgba(255,255,255,.06), transparent 40%);
  clip-path: polygon(0 100%, 0 84%, 45% 84%, 56% 78%, 70% 80%, 100% 76%, 100% 100%);
}
.diagram .markering{
  position:absolute; width:4px; background: rgba(255,255,255,.25); top:10%; bottom:10%; border-radius:2px;
}
.diagram .m1{ left:35% } .diagram .m2{ left:70% }
.diagram .label{
  position:absolute; background: rgba(0,0,0,.35); border:1px solid var(--line); padding:3px 6px; border-radius:10px;
  font-size:12px; color:#dfe8ef;
}
.diagram .l1{ left:6px; top:6px }
.diagram .l2{ right:6px; top:6px }

.dijk-copy h2{ font-family:"Merriweather", serif; margin:0 0 8px 0 }
.dijk-copy p{ color: var(--muted); margin:0 0 10px 0 }

.dijk-beeld{ display:grid; grid-template-columns: 1fr 1fr; gap:12px }
.dijk-beeld figure{ margin:0; background: var(--card); border-radius:14px; padding:10px; box-shadow: var(--shadow) }
.dijk-beeld figcaption{ font-size:12px; color:#aeb9c3; margin-top:6px }

/* ====== S7 Ambachtsatlas (flip) ====== */
.s-ambacht{ padding: clamp(42px,6vw,72px) 0 }
.ambacht-head h2{ font-family:"Merriweather", serif; margin:0 0 8px 0 }
.ambacht-head p{ color: var(--muted); margin:0 0 12px 0 }

.flipgrid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:14px }
.flipcard{ perspective: 1000px }
.flipcard .card{
  position:relative; border-radius:16px; height: 260px; transform-style: preserve-3d;
  transition: transform .6s ease; background: var(--card); box-shadow: var(--shadow);
}
.flipcard .face{
  position:absolute; inset:0; padding:12px; border-radius:16px; backface-visibility: hidden;
  display:flex; flex-direction:column; justify-content:flex-end;
}
.flipcard .front h3{ margin:8px 6px 2px 6px }
.flipcard .back{
  transform: rotateY(180deg);
  background: linear-gradient(180deg, rgba(87,193,201,.12), rgba(0,0,0,.3));
}
.flipcard:hover .card{ transform: rotateY(180deg) }

@media (prefers-reduced-motion: reduce){
  .flipcard .card{ transition:none }
  .flipcard:hover .card{ transform:none }
}

/* ====== Responsive ====== */
@media (max-width: 1100px){
  .flipgrid{ grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 980px){
  .kompas-inner{ grid-template-columns: 1fr }
  .kompas-stapel{
    min-height:auto; display:grid; grid-template-columns: 1fr 1fr; gap:12px;
  }
  .kompas-stapel .kaart{ position:relative; rotate:0deg; left:auto; right:auto; top:auto; bottom:auto; width:100% }
  .dijk-inner{ grid-template-columns: 1fr }
  .dijk-beeld{ grid-template-columns: 1fr 1fr }
}
@media (max-width: 640px){
  .kompas-stapel{ grid-template-columns: 1fr }
  .dijk-beeld{ grid-template-columns: 1fr }
  .flipgrid{ grid-template-columns: 1fr }
}
/* ====== S8 Klank ====== */
.s-klank{ padding: clamp(42px,6vw,72px) 0 }
.klank-inner{
  display:grid; grid-template-columns: .9fr 1.1fr; gap: clamp(16px,3vw,32px); align-items:start;
}
.klank-copy h2{ font-family:"Merriweather", serif; margin:0 0 8px 0 }
.klank-copy p{ color: var(--muted); margin:0 0 10px 0 }

.eq{ display:flex; gap:4px; align-items:flex-end; height:44px; margin-top:8px }
.eq .b{
  width:6px; height:10px; background: linear-gradient(180deg,var(--brand),var(--brand-2));
  border-radius:4px; transform-origin: bottom;
  animation: eqPulse 1.2s ease-in-out infinite;
}
.eq .b:nth-child(3n){ animation-delay: .1s }
.eq .b:nth-child(4n){ animation-delay: .25s }
.eq .b:nth-child(5n){ animation-delay: .4s }
@keyframes eqPulse{
  0%,100%{ transform: scaleY(.3) }
  50%{ transform: scaleY(1) }
}

.klank-beeld{ display:grid; grid-template-columns: 1fr 1fr; gap:12px }
.klank-beeld figure{ margin:0; background: var(--card); padding:10px; border-radius:14px; box-shadow: var(--shadow) }
.klank-beeld figcaption{ font-size:12px; color:#aeb9c3; margin-top:6px }

/* ====== S9 Gevelvergelijker ====== */
.s-gevels{ padding: clamp(42px,6vw,72px) 0 }
.gevels-head h2{ font-family:"Merriweather", serif; margin:0 0 8px 0 }
.gevels-head p{ color: var(--muted); margin:0 0 12px 0 }

.gevel-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:14px }
.gevel-card{
  background: var(--card); border:1px solid var(--line); border-radius:16px; padding:12px; box-shadow: var(--shadow);
}
.gevel-card figure{ margin:0 }
.gevel-card figcaption{ font-size:12px; color:#aeb9c3; margin-top:6px }
.gevel-card p{ margin:.5rem 0 0 0; color: var(--muted) }

.meterset{ list-style:none; padding:0; margin:8px 0; display:grid; gap:6px }
.meterset li{ display:grid; grid-template-columns: 100px 1fr; gap:8px; align-items:center }
.meterset span{ font-size:14px }
.meterset i{
  display:block; height:8px; border-radius:6px; background: rgba(255,255,255,.08);
  position:relative; overflow:hidden;
}
.meterset i::after{
  content:""; position:absolute; inset:0; width:var(--w,60%); background: linear-gradient(90deg,var(--brand),var(--brand-2));
}
/* простые модификаторы ширины без инлайна */
.m-55{ --w:55% } .m-60{ --w:60% } .m-65{ --w:65% } .m-70{ --w:70% } .m-75{ --w:75% } .m-80{ --w:80% } .m-85{ --w:85% } .m-90{ --w:90% }

/* ====== S10 Tips ====== */
.s-tips{ padding: clamp(42px,6vw,72px) 0 }
.tips-inner{
  display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(16px,3vw,32px); align-items:start;
}
.tips-copy h2{ font-family:"Merriweather", serif; margin:0 0 8px 0 }
.tips-list{ margin:.4rem 0 0 1rem; color: var(--muted); line-height:1.55 }

.tips-beeld{ display:grid; grid-template-columns: 1fr 1fr; gap:12px }
.tips-beeld figure{ margin:0; background: var(--card); padding:10px; border-radius:14px; box-shadow: var(--shadow) }
.tips-beeld figcaption{ font-size:12px; color:#aeb9c3; margin-top:6px }

/* ====== Responsive ====== */
@media (max-width: 1100px){
  .gevel-grid{ grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 980px){
  .klank-inner{ grid-template-columns: 1fr }
  .t ips-inner{ grid-template-columns: 1fr } /* пробел в селекторе не нужен — см. фикс ниже */
  .tips-inner{ grid-template-columns: 1fr }
}
@media (max-width: 640px){
  .klank-beeld{ grid-template-columns: 1fr }
  .gevel-grid{ grid-template-columns: 1fr }
  .tips-beeld{ grid-template-columns: 1fr }
}

/* уважение к reduce-motion */
@media (prefers-reduced-motion: reduce){
  .eq .b{ animation: none }
}
/* ====== S11 Stadsweefsel ====== */
.s-weefsel{ padding: clamp(42px,6vw,72px) 0 }
.weefsel-head h2{ font-family:"Merriweather", serif; margin:0 0 8px 0 }
.weefsel-head p{ color: var(--muted); margin:0 0 12px 0 }
.weefsel-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:14px }
.wev-card{
  background: var(--card); border:1px solid var(--line); border-radius:16px; padding:12px; box-shadow: var(--shadow);
}
.wev-card figure{ margin:0 }
.wev-card figcaption{ font-size:12px; color:#aeb9c3; margin-top:6px }
.wev-card ul{ margin:.5rem 0 0 1rem; color: var(--muted) }

@media (max-width: 1100px){ .weefsel-grid{ grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 640px){  .weefsel-grid{ grid-template-columns: 1fr } }

/* ====== S12 Weerslag ====== */
.s-weer{ padding: clamp(42px,6vw,72px) 0 }
.weer-inner{
  display:grid; grid-template-columns: .95fr 1.05fr; gap: clamp(16px,3vw,32px); align-items:start;
}
.weer-copy h2{ font-family:"Merriweather", serif; margin:0 0 8px 0 }
.weer-copy p{ color: var(--muted); margin:0 0 10px 0 }
.weer-tabs{ display:flex; gap:8px; margin-bottom:8px }
.weer-tab{
  appearance:none; border:1px solid var(--line); background: rgba(255,255,255,.04);
  color:#fff; padding:8px 12px; border-radius:12px; cursor:pointer;
  transition: background .2s ease, transform .2s ease;
}
.weer-tab:hover{ background: rgba(255,255,255,.07); transform: translateY(-1px) }
.weer-tab.is-active{ background: rgba(255,255,255,.12) }
.weer-note{ color: var(--muted); margin:4px 0 0 0 }

.weer-stage{ position:relative; border:1px solid var(--line); border-radius:16px; padding:10px; background: var(--card) }
.weer-stage figure{ margin:0; display:none }
.weer-stage figure.show{ display:block }
.weer-stage figcaption{ font-size:12px; color:#aeb9c3; margin-top:6px }

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

/* ====== S13 Avondlijnen ====== */
.s-nacht{ padding: clamp(42px,6vw,72px) 0 }
.nacht-head h2{ font-family:"Merriweather", serif; margin:0 0 8px 0 }
.nacht-head p{ color: var(--muted); margin:0 0 12px 0 }

.nacht-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:14px }
.nacht-card{ margin:0; background: var(--card); padding:10px; border-radius:16px; box-shadow: var(--shadow); position:relative }
.nacht-card figcaption{ font-size:12px; color:#aeb9c3; margin-top:6px }
.glow::before{
  content:""; position:absolute; inset:-2px; border-radius:18px; pointer-events:none;
  background: radial-gradient(240px 120px at 30% 20%, rgba(87,193,201,.18), transparent 60%),
              radial-gradient(240px 120px at 70% 80%, rgba(228,179,99,.14), transparent 60%);
  opacity:.0; transition: opacity .25s ease;
}
.glow:hover::before{ opacity:1 }

@media (max-width: 1100px){ .nacht-grid{ grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 640px){  .nacht-grid{ grid-template-columns: 1fr } }
/* ====== S14 Silhouetten ====== */
.s-silhouet{ padding: clamp(42px,6vw,72px) 0 }
.sil-head h2{ font-family:"Merriweather", serif; margin:0 0 8px 0 }
.sil-head p{ color: var(--muted); margin:0 0 12px 0 }

.sil-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:14px }
.sil-card{
  position:relative; margin:0; background: var(--card); border-radius:16px;
  padding:10px; box-shadow: var(--shadow); overflow:hidden;
}
.sil-card figcaption{
  position:absolute; left:10px; right:10px; bottom:10px;
  background: rgba(0,0,0,.45); border:1px solid var(--line);
  border-radius:12px; padding:8px 10px; color:#e7eef3;
  transform: translateY(12px); opacity:.95; transition: transform .25s ease, opacity .25s ease;
}
.sil-card:hover figcaption{ transform: translateY(0); opacity:1 }
.sil-card figcaption strong{ display:block; font-weight:700; }
.sil-card figcaption span{ display:block; font-size:12px; color:#cbd6df }

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

/* ====== S15 Slot ====== */
.s-slot{ padding: clamp(42px,6vw,72px) 0 }
.slot-head h2{ font-family:"Merriweather", serif; margin:0 0 8px 0 }
.slot-head p{ color: var(--muted); margin:0 0 12px 0 }

.slot-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:14px }
.slot-card{ margin:0; background: var(--card); border-radius:16px; padding:10px; box-shadow: var(--shadow) }
.slot-card figcaption{ font-size:12px; color:#aeb9c3; margin-top:6px }

.slot-progress{ height:6px; background: rgba(255,255,255,.06); border-radius:6px; margin-top:14px; overflow:hidden }
.slot-progress i{ display:block; height:100%; width:8%; background: linear-gradient(90deg,var(--brand),var(--brand-2)); }

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