/* ============================================================
   STARTHAUS — spur.css
   Die waagerechte Scroll-Strecke.

   Grundzustand ist absichtlich der EINFACHE: ein waagerecht
   scrollbares Band. Erst wenn spur.js läuft und der Bildschirm
   breit genug ist, kommt `.sp-gepinnt` dazu und der vertikale
   Scroll übernimmt die Führung. So ist die Strecke auch ohne
   JavaScript und auf jedem Handy vollständig benutzbar.
   ============================================================ */

.spur{position:relative;padding:0}
.sp-halt{padding:clamp(48px,7vh,90px) 0 clamp(36px,5vh,64px)}
.sp-fenster{display:block}

/* Der Kopf trug erst `max-width:56ch` UND die zentrierende `.wrap` —
   das Ergebnis war eine Überschrift, die mitten im Bild stand statt am
   linken Rasterrand. Die Breite begrenzt jetzt der Text selbst. */
.sp-kopf{margin-bottom:clamp(18px,2.4vw,30px)}
.sp-kopf h2,.sp-kopf .lead{max-width:34ch}
/* Bewusst kleiner als eine normale Abschnittsüberschrift: in der
   gepinnten Bühne teilt sich der Kopf die Bildschirmhöhe mit dem Band.
   Vierzeilig verdrängte er die Karten aus dem Bild. */
.sp-kopf h2{margin:.1em 0 .35em;font-size:clamp(1.55rem,3.1vw,2.5rem);line-height:1.06}
.sp-kopf .lead{color:var(--soft);font-size:clamp(.92rem,1.5vw,1.02rem)}

/* ---------------- Band ---------------- */
.sp-fenster{
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  padding:4px 0 18px;
}
.sp-fenster::-webkit-scrollbar{display:none}
.sp-band{
  display:flex;gap:clamp(14px,2vw,26px);
  padding-inline:max(24px,calc((100vw - var(--wrap,1280px)) / 2));
  will-change:transform;
}
.sp-station{
  flex:0 0 min(86vw,420px);scroll-snap-align:center;
  border-radius:var(--r-l,18px);overflow:hidden;
  background:linear-gradient(170deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
  border:1px solid var(--line);
  box-shadow:0 26px 60px -34px rgba(0,0,0,.8);
  transition:border-color .35s var(--ease-out),transform .45s var(--ease-out),
             box-shadow .45s var(--ease-out);
}
/* Die aktive Station tritt hervor — sonst sind es fünf gleich laute
   Karten und man weiß nicht, welche gerade dran ist. */
.sp-station.an{
  border-color:rgba(143,211,244,.45);
  box-shadow:0 34px 74px -32px rgba(0,0,0,.85),0 0 0 1px rgba(143,211,244,.12);
}
.sp-station:not(.an){opacity:.62}
.sp-station.an{opacity:1}

.sp-bild{position:relative;aspect-ratio:4/3;overflow:hidden}
.sp-bild .ph-wrap{height:100%;border-radius:0}
.sp-bild picture,.sp-bild img{width:100%;height:100%;object-fit:cover;display:block}
.sp-bild::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 45%,rgba(10,16,23,.75));
}

.sp-text{padding:16px 18px 20px;position:relative}
.sp-nr{
  font-family:var(--mono,monospace);font-size:.68rem;letter-spacing:.12em;
  color:var(--ice);opacity:.85;
}
.sp-nr em{font-style:normal;color:var(--soft);opacity:.7}
.sp-text h3{
  font-family:var(--disp);font-size:clamp(1.05rem,2.2vw,1.35rem);font-weight:750;
  color:var(--snow);margin:6px 0 0;
}
.sp-marke{
  display:inline-block;margin-top:7px;padding:3px 9px;border-radius:999px;
  border:1px solid rgba(255,178,92,.4);background:rgba(255,178,92,.1);
  font-family:var(--mono,monospace);font-size:.64rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--flut);
}
.sp-text p{margin:10px 0 0;font-size:.88rem;line-height:1.55;color:var(--text)}
/* Mindesthöhe statt reiner Textzeile — 25 px waren als Tippziel zu wenig. */
.sp-mehr{
  display:inline-flex;align-items:center;gap:6px;margin-top:12px;
  min-height:44px;
  font-size:.82rem;font-weight:650;color:var(--ice);text-decoration:none;
  border-bottom:1px solid rgba(143,211,244,.35);padding-bottom:2px;
  transition:border-color .2s var(--ease-out),gap .2s var(--ease-out);
}
.sp-mehr::after{content:"→"}
.sp-mehr:hover{border-color:var(--ice);gap:10px}

/* ---------------- Fortschritt ---------------- */
.sp-leiste{
  display:flex;align-items:center;gap:18px;
  width:min(var(--wrap,1280px),100% - 48px);margin:14px auto 0;
}
.sp-punkte{display:flex;gap:8px}
/* 44 px Tippfläche, auch wenn der Punkt darin nur 8 px groß ist.
   Der Geometrie-Prüfer hat die 26 px zu Recht angemahnt: auf dem Handy
   trifft man das nicht zuverlässig. Der negative Rand hält die Leiste
   trotzdem kompakt. */
.sp-punkte{margin:-9px 0}
.sp-punkte button{
  width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;
  display:grid;place-items:center;
}
.sp-punkte i{
  display:block;width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,.2);
  transition:background .25s var(--ease-out),transform .25s var(--ease-out);
}
.sp-punkte button.an i{background:var(--ice);transform:scale(1.5)}
.sp-punkte button:hover i{background:var(--soft)}
.sp-punkte button:focus-visible{outline:2px solid var(--ice);outline-offset:2px;border-radius:50%}
.sp-bahn{flex:1;height:3px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.sp-bahn i{display:block;height:100%;width:0;background:var(--ice);border-radius:999px}

/* ---------------- Gepinnt ----------------
   Nur wenn spur.js läuft. Die Höhe ergibt sich aus der Zahl der
   Stationen: jede bekommt eine gute halbe Bildschirmhöhe Scrollweg. */
.spur.sp-gepinnt{height:calc(100vh + var(--sp-n,4) * 58vh)}
/* Drei Reihen statt zentrierter Flex-Spalte: Kopf oben, Band nimmt den
   Rest, Leiste unten. Zentriert schoben sich Kopf und Band gegenseitig
   aus dem Bild — die Karten waren unten abgeschnitten. */
.spur.sp-gepinnt .sp-halt{
  position:sticky;top:0;height:100vh;
  display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  align-content:center;padding-top:calc(var(--nav-h,72px) + 18px);padding-bottom:22px;
}
.spur.sp-gepinnt .sp-fenster{min-height:0;display:flex;align-items:center}
.spur.sp-gepinnt .sp-station{max-height:100%}
.spur.sp-gepinnt .sp-bild{aspect-ratio:3/2}
.spur.sp-gepinnt .sp-fenster{overflow:hidden;scroll-snap-type:none}
.spur.sp-gepinnt .sp-band{transition:none}
.spur.sp-gepinnt .sp-station{flex-basis:min(32vw,400px)}

@media (max-width:780px){
  .sp-station{flex-basis:min(86vw,360px)}
  /* Sechs Tippziele à 44 px sind 264 px — daneben passt auf einem 390er
     Schirm keine Fortschrittsbahn mehr. Also untereinander. */
  .sp-leiste{width:calc(100% - 40px);flex-wrap:wrap;gap:6px 18px}
  .sp-punkte{margin:-9px 0 0}
  .sp-bahn{flex:1 0 100%}
}
@media (prefers-reduced-motion:reduce){
  .sp-station,.sp-punkte i,.sp-mehr{transition:none}
  .sp-station:not(.an){opacity:1}
}

/* ══════════════════════════════════════════════════════════════
   Regal — das Sortiment des Sportshops
   ══════════════════════════════════════════════════════════════ */
/* Ohne regal.js bleibt die Filterleiste unsichtbar und alles steht da.
   Ein Filter, der ohne Skript ein leeres Regal zeigen könnte, wäre
   schlimmer als gar kein Filter. */
.rg-filter{display:none;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:20px}
.regal.rg-bereit .rg-filter{display:flex}
/* `.chip` erbt aus dem Preis-Finder ein `flex:1` — in einer Leiste mit vier
   Knöpfen wurde daraus vier gleich breite Balken über die halbe Seite.
   Hier sollen die Knöpfe so breit sein wie ihre Beschriftung. */
.rg-filter .chip{flex:0 0 auto}
.rg-zahl{
  margin-left:6px;font-family:var(--mono,monospace);font-size:.7rem;
  letter-spacing:.1em;color:var(--soft);
}

.rg-gitter{
  display:grid;gap:clamp(12px,1.6vw,20px);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));
}
.rg-kachel{
  position:relative;border-radius:var(--r-m,14px);overflow:hidden;
  border:1px solid var(--line);background:rgba(255,255,255,.02);
  transition:opacity .24s var(--ease-out),transform .24s var(--ease-out),
             border-color .24s var(--ease-out);
}
.rg-kachel.aus{opacity:0;transform:scale(.97);pointer-events:none}
.rg-kachel:hover{border-color:rgba(143,211,244,.42)}
.rg-kachel .ph-wrap{aspect-ratio:4/3}
.rg-kachel picture,.rg-kachel img{width:100%;height:100%;object-fit:cover;display:block}
/* Der Verlauf trägt die Schrift. Ohne ihn steht heller Text auf hellem
   Schnee — auf genau zwei der zehn Fotos, aber die reichen. */
.rg-kachel::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 38%,rgba(8,13,19,.86));
}
.rg-text{position:absolute;left:0;right:0;bottom:0;padding:14px 15px;z-index:1}
.rg-text h3{
  font-family:var(--disp);font-size:clamp(.95rem,1.7vw,1.1rem);font-weight:700;
  color:#fff;margin:6px 0 0;line-height:1.25;
  text-shadow:0 1px 12px rgba(0,0,0,.7);
}
.rg-sais{
  display:inline-block;padding:2px 8px;border-radius:999px;
  font-family:var(--mono,monospace);font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;backdrop-filter:blur(6px);
}
.rg-sais--winter{background:rgba(143,211,244,.2);color:#cfeeff;border:1px solid rgba(143,211,244,.4)}
.rg-sais--sommer{background:rgba(127,169,140,.22);color:#d6ecdd;border:1px solid rgba(127,169,140,.45)}
.rg-sais--ganz{background:rgba(255,178,92,.18);color:#ffdcb4;border:1px solid rgba(255,178,92,.38)}
.rg-zg{margin-top:18px;color:var(--soft)}
@media (prefers-reduced-motion:reduce){.rg-kachel{transition:none}}

/* ══════════════════════════════════════════════════════════════
   Service-Berater — „Was braucht dein Ski?"
   ══════════════════════════════════════════════════════════════ */
.sb{
  display:grid;gap:clamp(18px,2.6vw,32px);margin-top:clamp(20px,3vw,32px);
  grid-template-columns:1fr;
}
@media (min-width:900px){.sb{grid-template-columns:1fr 1fr;align-items:start}}
.sb-lead{margin:0 0 16px;color:var(--soft);font-size:.94rem;line-height:1.6;max-width:44ch}
.sb-fragen{display:grid;gap:9px}

.sb-frage{
  display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;
  padding:14px 16px;border-radius:var(--r-m,14px);cursor:pointer;
  background:rgba(255,255,255,.028);border:1px solid var(--line);
  transition:border-color .2s var(--ease-out),background .2s var(--ease-out);
  /* 44 px Mindesthöhe: das ist ein Tippziel, kein Textabsatz. */
  min-height:44px;
}
.sb-frage:hover{border-color:rgba(143,211,244,.4);background:rgba(255,255,255,.05)}
.sb-frage input{position:absolute;opacity:0;width:0;height:0}
.sb-haken{
  width:22px;height:22px;border-radius:7px;border:1.5px solid var(--line-2,rgba(255,255,255,.25));
  display:grid;place-items:center;margin-top:1px;
  transition:background .18s var(--ease-out),border-color .18s var(--ease-out);
}
.sb-haken::after{
  content:"";width:10px;height:6px;border-left:2px solid #06222f;border-bottom:2px solid #06222f;
  transform:rotate(-45deg) scale(.4);opacity:0;
  transition:opacity .16s var(--ease-out),transform .16s var(--ease-out);
}
.sb-frage input:checked ~ .sb-haken{background:var(--ice);border-color:var(--ice)}
.sb-frage input:checked ~ .sb-haken::after{opacity:1;transform:rotate(-45deg) scale(1)}
.sb-frage input:focus-visible ~ .sb-haken{outline:2px solid var(--ice);outline-offset:3px}
.sb-txt{font-size:.9rem;line-height:1.5;color:var(--text)}

.sb-rechts{
  padding:clamp(18px,2.4vw,26px);border-radius:var(--r-l,18px);
  background:linear-gradient(165deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.sb-kopf{display:flex;align-items:baseline;gap:12px;margin-bottom:16px}
.sb-zahl{
  font-family:var(--disp);font-weight:850;font-size:2rem;line-height:1;
  color:var(--ice);font-variant-numeric:tabular-nums;
}
.sb-kopf-txt{
  font-family:var(--mono,monospace);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--soft);
}
.sb-treffer-liste{display:grid;gap:10px}
.sb-treffer{
  padding:14px 16px;border-radius:var(--r-m,14px);
  border:1px solid var(--line);background:rgba(0,0,0,.2);
  transition:opacity .22s var(--ease-out),border-color .22s var(--ease-out),
             transform .22s var(--ease-out);
}
/* Ausgefiltert heißt hier NICHT weg: die Arbeit bleibt lesbar, tritt aber
   zurück. Wer sich unsicher ist, sieht weiter das ganze Angebot. */
.sb-treffer.aus{opacity:.3;transform:scale(.995)}
.sb.sb-gewaehlt .sb-treffer:not(.aus){border-color:rgba(143,211,244,.45)}
.sb-treffer h3,.sb-treffer h4{
  margin:0;font-family:var(--disp);font-size:1rem;font-weight:750;color:var(--snow);
}
/* Zeilenlänge begrenzen: bei 834 px lief die Beschreibung auf 99 Zeichen
   je Zeile, gut ein Drittel über dem, was sich noch flüssig liest. */
.sb-treffer p{margin:6px 0 0;font-size:.85rem;line-height:1.55;color:var(--text);max-width:62ch}
.sb-hinweis{margin-top:16px}
.sb-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
@media (prefers-reduced-motion:reduce){
  .sb-frage,.sb-haken,.sb-haken::after,.sb-treffer{transition:none}
}