/* Startseite (Stand 11.11.2026) – nur Tokens aus base.css */

/* ---------- Kopfleiste in Tiefblau, nur diese Seite ---------- */
.site-head--deep{border-bottom:2px solid var(--yellow);background:var(--deep)}
.site-head--deep .site-nav a{color:#fff}
.site-head--deep .site-nav a[aria-current="page"]{color:#fff;text-decoration-color:var(--yellow)}
.site-head--deep .site-nav .btn{color:var(--yellow-ink)}
.site-head--deep .nav-toggle{color:#fff}
@media (hover:hover) and (pointer:fine){.site-head--deep .site-nav a:not(.btn):hover{color:var(--yellow)}}
@media (max-width:860px){.site-head--deep .site-nav{background:var(--deep)}}

/* ---------- 1 Hero: tiefblaues Feld, Stadtfoto randlos rechts, davor die Karte als Objekt ---------- */
.hero{padding:0;overflow:hidden}
.hero{--grid-gap:clamp(24px,3vw,48px)}
.hero__grid{
  display:grid;align-items:stretch;min-height:min(78svh,820px);
  grid-template-columns:
    calc(max(var(--gutter),(100% - var(--max))/2) + 7*((min(100% - 2*var(--gutter),var(--max)) - 11*var(--grid-gap))/12 + var(--grid-gap)))
    minmax(0,1fr);
}
.hero__copy{
  padding-block:clamp(32px,4vw,56px) clamp(40px,4vw,64px);
  padding-left:max(var(--gutter),calc((100vw - var(--max))/2));
  padding-right:clamp(24px,4vw,64px);
  align-self:center;
}
.hero__copy h1{font-size:clamp(40px,5.2vw,78px);line-height:.9;letter-spacing:-.03em;max-width:none;color:var(--yellow);margin-bottom:.35em}
.hero__copy .lede{color:#fff;max-width:46ch}
/* Live-Zeile: wie viele Geschäfte haben gerade geöffnet */
.live{margin:1.1em 0 0;max-width:none}
.live__link{display:inline-flex;align-items:center;gap:.7em;padding:.7em 1em .7em .85em;background:var(--blue);color:#fff;text-decoration:none;font-weight:500;line-height:1.25;transition:transform .25s var(--ease-out),background var(--t-hover) ease}
.live__link strong{font-family:var(--display);font-weight:600;font-size:var(--step-1);color:var(--yellow);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.field-deep a.live__link:hover{color:#fff;transform:translateX(4px)}
.live__dot{position:relative;flex:none;width:12px;height:12px;border-radius:50%;background:var(--yellow)}
.live__dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--yellow);opacity:0}
.live.is-closed .live__dot{background:#9FB6C8}
@media (prefers-reduced-motion:no-preference){
  .live.is-open .live__dot::after{animation:live-pulse 2.2s var(--ease-out) infinite}
  @keyframes live-pulse{0%{opacity:.7;transform:scale(1)}80%,100%{opacity:0;transform:scale(3.2)}}
}
/* Drei Fakten als ruhige Textzeilen */
.hero__facts{list-style:none;margin:clamp(24px,2.6vw,36px) 0 0;padding:0;display:grid;gap:8px}
.hero__facts li{min-width:0;font-size:var(--step-0);line-height:1.3;color:#fff}
.hero__facts strong{display:inline;margin-right:.35em;font-family:var(--display);font-weight:600;font-size:var(--step-1);letter-spacing:-.01em;color:var(--yellow)}
/* Suchformular „Wo kann ich einlösen?“ */
.hero-search{position:relative;margin-top:1.3em;max-width:560px}
.hero--suggest{overflow:visible}
.hero-search__label{display:block;margin-bottom:.5em;font-family:var(--display);font-weight:600;font-size:var(--step-1);line-height:1.1;letter-spacing:-.01em;color:#fff}
.hero-search__row{display:flex;align-items:stretch;gap:8px}
.hero-search input{flex:1 1 auto;min-width:0;width:100%;margin:0;padding:0 18px;min-height:58px;border:0;border-radius:0;background:var(--paper);color:var(--blue);font:500 var(--step-0) var(--text);-webkit-appearance:none;appearance:none}
.hero-search input::placeholder{color:var(--ink-2);opacity:1}
.hero-search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.hero-search input:focus-visible{outline:3px solid var(--yellow);outline-offset:0}
.hero-search__btn{flex:0 0 auto;padding-inline:1.7em;font-size:var(--step-1)}
.hero-search__suggest{position:absolute;left:0;right:0;top:100%;z-index:20;margin:4px 0 0;padding:6px 0;list-style:none;background:var(--paper);outline:3px solid var(--sky)}
.hero-search__suggest[hidden]{display:none}
.hero-search__suggest li{display:flex;flex-direction:column;gap:2px;padding:10px 18px;cursor:pointer;line-height:1.3}
.hero-search__suggest li:hover,.hero-search__suggest li[aria-selected="true"]{background:var(--cream)}
.hero-search__suggest strong{color:var(--blue);font-weight:600}
.hero-search__suggest small{color:var(--ink-2);font-size:var(--step--1)}
/* Bühne */
.hero__stage{position:relative;margin:0;height:100%;min-height:100%}
.hero__photo{position:absolute;inset:0;background:var(--blue)}
.hero__img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.winter .hero__img{object-position:22% 50%}
.hero__card{position:absolute;left:7%;bottom:17%;width:min(64%,400px);transform:rotate(-6deg)}
@media (prefers-reduced-motion:no-preference){
  .js .hero__card{animation:card-settle 1s var(--ease-out) .3s both}
  @keyframes card-settle{from{opacity:0;transform:rotate(-13deg) translateY(36px) scale(.94)}to{opacity:1;transform:rotate(-6deg)}}
}
.hero__card .card3d__turn{transform-origin:0 0}

/* ---------- 2 So funktioniert der Gutschein: Bühne bleibt stehen, die Karte wandert durch drei Schritte ---------- */
.story{padding-block:calc(var(--gap-section)*.7) calc(var(--gap-section)*.8)}
.story__head{margin-bottom:clamp(32px,5vw,72px)}
.story__head .lede{margin:0}
.story__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,7vw,128px);align-items:start}
.story__stage{position:sticky;top:96px;height:min(calc(100svh - 128px),660px);min-height:420px;display:grid;place-items:center;overflow:hidden;background:var(--deep);transition:background-color .7s var(--ease-out)}
.story__stage[data-step="2"]{background:var(--blue)}
.story__stage--inline{display:none}
.story__scene{position:relative;width:min(68%,400px)}
.story__card{transform:rotate(-6deg);transition:transform 1s var(--ease-expo)}
.story__stage[data-step="2"] .story__card{transform:translate(6%,6%) rotate(5deg) scale(.92)}
.story__stage[data-step="3"] .story__card{transform:rotate(-2deg) scale(1.05)}
.story__stage[data-step="3"] .card3d__inner{transform:rotateY(180deg)}
.story__stage[data-step="3"] .story__card .card3d__back,.story__card.is-turning .card3d__back{display:block}
.story__stage[data-step="3"] .story__card .card3d__front{visibility:hidden;transition:visibility 0s .5s}
.story__stage[data-step="3"] .story__card:not(.is-turning) .card3d__back{backface-visibility:visible;-webkit-backface-visibility:visible}
.story__stage:not([data-step="2"]) .story__sticker{visibility:hidden;transition:transform .55s cubic-bezier(.3,1.5,.5,1),opacity .2s ease,visibility 0s .25s}
.story__back .cardback{align-items:flex-start;gap:3cqw}
.story__back .cardback__title{position:relative;z-index:1}
.story__rest{margin:0;font-family:var(--display);font-weight:700;font-size:min(20cqw,var(--step-3));line-height:1.05;letter-spacing:-.03em;color:var(--blue);font-variation-settings:"opsz" 144,"SOFT" 30;font-variant-numeric:tabular-nums}
.story__sticker{position:absolute;left:-10%;top:-38%;z-index:2;--sticker-w:clamp(92px,10.5vw,148px);--sticker-rot:-9deg;opacity:0;transform:rotate(-26deg) scale(1.8);transition:transform .55s cubic-bezier(.3,1.5,.5,1),opacity .2s ease}
.story__stage[data-step="2"] .story__sticker{opacity:1;transform:rotate(-9deg) scale(1);transition-delay:.25s}
.story__caption{position:absolute;left:-20%;right:-20%;top:calc(100% + clamp(28px,5vh,56px));margin:0;max-width:none;text-align:center;font-weight:600;color:#fff;transition:opacity .3s ease}
.story__caption.is-swap{opacity:0}
.story__marks{position:absolute;left:24px;bottom:24px;display:flex;gap:6px}
.story__marks span{width:34px;height:6px;background:#fff;opacity:.28;transition:opacity .4s ease,background-color .4s ease}
.story__stage[data-step="1"] .story__marks span:nth-child(1),
.story__stage[data-step="2"] .story__marks span:nth-child(-n+2),
.story__stage[data-step="3"] .story__marks span{background:var(--yellow);opacity:1}
.step{min-height:74vh;display:flex;flex-direction:column;justify-content:center;padding-block:clamp(24px,4vh,48px)}
.step:first-child{justify-content:flex-start;padding-top:0}
.step--last{min-height:min(74vh,560px)}
.step h3{font-size:var(--step-3);margin-bottom:.35em;transition:color .4s ease}
.step p{font-size:var(--step-1);line-height:1.4;max-width:46ch}
.step__pic{margin:clamp(16px,2vw,28px) 0 0;aspect-ratio:16/9;background:var(--paper)}
.step__pic--tall img{object-position:50% 62%}
.step__pic img{display:block;width:100%;height:100%;object-fit:cover}
.step p.step__more{margin:1em 0 0;font-size:var(--step-0);font-weight:600}
/* Guthaben-Formular */
.balance-form{margin-top:.6em;max-width:560px}
.balance-form__label{display:block;margin-bottom:.5em;font-family:var(--display);font-weight:600;font-size:var(--step-0);line-height:1.1;color:var(--blue)}
.balance-form__row{display:flex;align-items:stretch;gap:8px}
.balance-form input{flex:1 1 auto;min-width:0;width:100%;margin:0;padding:0 16px;min-height:56px;border:0;border-radius:0;background:var(--paper);outline:3px solid var(--paper);color:var(--ink);font:500 var(--step-0) var(--text);letter-spacing:.04em;-webkit-appearance:none;appearance:none}
.balance-form input::placeholder{color:var(--ink-2);opacity:1;letter-spacing:0}
.balance-form input:focus-visible{outline:3px solid var(--yellow);outline-offset:0}
.balance-form__btn{flex:0 0 auto;margin:0;padding:0 1.4em}
.step p.balance-form__note{margin:.9em 0 0;font-size:var(--step--1);line-height:1.5;max-width:52ch;color:var(--ink-2)}
@media (prefers-reduced-motion:reduce){.story__card,.story__sticker,.story__stage{transition:none}}

/* ---------- 3 Hier gilt der Gutschein: Stadtplan + Geschenk-Finder ---------- */
.where{padding-block:calc(var(--gap-section)*.8)}
.where__head{margin-bottom:clamp(28px,4vw,56px)}
.where__head .lede{margin:0;max-width:56ch}
.where__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);align-items:start}
.where__map{position:relative;background:var(--deep)}
.smap{height:clamp(440px,68vh,680px);background:var(--deep) url(../img/luftbild-800.jpg) center/cover no-repeat;z-index:0}
.where__count{position:absolute;left:0;bottom:0;z-index:500;margin:0;max-width:78%;display:flex;align-items:flex-end;gap:14px;padding:clamp(12px,1.6vw,20px) clamp(16px,2vw,28px);background:var(--blue);font-size:var(--step--1);line-height:1.25;color:#fff;pointer-events:none}
.where__count strong{font-family:var(--display);font-weight:600;font-size:var(--step-3);line-height:.9;letter-spacing:-.03em;color:var(--yellow);font-variant-numeric:tabular-nums}
.where__actions{margin:20px 0 0}
/* Infokarte zum angeklickten Geschäft */
.where__card{position:absolute;right:12px;top:12px;z-index:600;width:min(300px,calc(100% - 24px));padding:16px 44px 16px 16px;background:var(--paper);color:var(--ink)}
.where__card[hidden]{display:none}
.where__card h4{margin:0 0 .2em;font-family:var(--display);font-weight:600;font-size:var(--step-1);line-height:1.15;letter-spacing:-.01em;color:var(--blue)}
.where__card p{margin:0 0 .5em;font-size:var(--step--1);line-height:1.4}
.where__card .wc__cat{color:var(--ink-2)}
.where__card .wc__state{display:inline-block;padding:.3em .6em;font-weight:600;background:var(--yellow);color:var(--yellow-ink)}
.where__card .wc__state--closed,.where__card .wc__state--unknown{background:var(--sky);color:var(--blue)}
.where__card .wc__more{margin:0;font-weight:600}
.where__card button{position:absolute;right:6px;top:6px;width:34px;height:34px;border:0;border-radius:0;background:var(--sky);color:var(--blue);font:600 var(--step-1)/34px var(--text);cursor:pointer}
.where__card button:hover{background:var(--cream)}
@media (prefers-reduced-motion:no-preference){.where__card:not([hidden]){animation:wc-in .35s var(--ease-out)}@keyframes wc-in{from{opacity:0;transform:translateY(-8px)}}}
/* Kartenpunkte: jede Akzeptanzstelle ist eine kleine Gutscheinkarte */
.cpin-wrap{background:transparent;border:0}
.cpin{position:relative;display:block;width:30px;height:27px;transform-origin:50% 100%;transition:transform .3s var(--ease-out),opacity .3s ease}
.cpin svg{display:block;overflow:visible}
.cpin__b{fill:var(--blue);stroke:#fff;stroke-width:2}
.cpin__y{fill:var(--yellow)}
.cpin--closed,.cpin--unknown{opacity:.72}
.cpin--closed .cpin__y,.cpin--unknown .cpin__y{fill:#C9D6E2}
.cpin::before{content:"";position:absolute;left:1px;top:1px;width:28px;height:18px;border-radius:3px;background:var(--yellow);opacity:0;pointer-events:none}
.leaflet-marker-icon:hover .cpin,.cpin--active{transform:scale(1.45)}
.cpin--active .cpin__b{fill:var(--deep)}
.smap.has-route .cpin:not(.cpin--route){opacity:.3}
.cpin--route{transform:scale(1.6);opacity:1}
.cpin--route .cpin__b{fill:var(--deep);stroke:var(--yellow)}
.cpin--route .cpin__y{fill:var(--yellow)}
@media (prefers-reduced-motion:no-preference){
  .cpin{animation:cpin-in .55s cubic-bezier(.3,1.4,.5,1) both;animation-delay:var(--d,0ms)}
  @keyframes cpin-in{from{opacity:0;transform:translateY(-22px) scale(.3)}}
  .cpin--open::before{animation:cpin-pulse 2.6s var(--ease-out) infinite;animation-delay:calc(var(--d,0ms) + 900ms)}
  @keyframes cpin-pulse{0%{opacity:.75;transform:scale(1)}70%,100%{opacity:0;transform:scale(2.4)}}
}
.route-line{stroke-linecap:round;stroke-linejoin:round}
/* Leaflet im Hausstil */
.smap.leaflet-container{font-family:var(--text);font-size:var(--step--1)}
.smap .leaflet-control-attribution{margin:0;padding:2px 8px;background:rgba(255,255,255,.8);color:var(--ink-2);font:400 var(--step--1)/1.3 var(--text);white-space:nowrap}
.smap .leaflet-control-attribution a{color:var(--blue)}
.smap .leaflet-bar{border:0;border-radius:0;box-shadow:none}
.smap .leaflet-bar a{border-radius:0;border-bottom:0;background:var(--paper);color:var(--blue);width:34px;height:34px;font:600 var(--step-1)/34px var(--text)}
.smap .leaflet-bar a+a{margin-top:2px}
.smap .leaflet-bar a:hover{background:var(--cream)}
.smap .leaflet-top.leaflet-left{top:auto;bottom:34px;left:auto;right:0}
.smap .leaflet-top.leaflet-left .leaflet-control{margin:0 10px 0 0}

/* Geschenk-Finder (dritte Fassung, 12.11.2026): drei Fragen, Vorschläge mit Begründung, Ergebnis mit „Dazu passt“ */
.finder{background:var(--sky);padding:clamp(24px,3vw,40px);scroll-margin-top:96px}
.finder h3{font-size:var(--step-3);margin-bottom:.3em}
.finder__intro{margin:0 0 1.4em;color:var(--ink)}
.finder [hidden]{display:none !important}
.finder__q{display:none;margin:0;padding:0;border:0;min-width:0}
.finder__q.is-on{display:block}
.finder__q legend,.finder__legend{padding:0;margin:0 0 .7em;max-width:none;font-family:var(--display);font-weight:600;font-size:var(--step-1);line-height:1.15;letter-spacing:-.01em;color:var(--blue)}
.finder__hint{margin:-.2em 0 1em;max-width:none;font-size:var(--step--1);color:var(--ink-2)}
.finder__opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.finder__opts button,.finder__top button{padding:1em .9em;border:0;border-radius:0;background:var(--paper);color:var(--blue);font:600 var(--step-0)/1.2 var(--text);text-align:left;cursor:pointer;transition:transform .25s var(--ease-out),background var(--t-hover) ease,color var(--t-hover) ease}
.finder__opts button:last-child:nth-child(odd){grid-column:1 / -1}
.finder__opts button:hover,.finder__top button:hover{background:var(--yellow);color:var(--yellow-ink);transform:translateY(-2px)}
.finder__opts button:active,.finder__top button:active{transform:translateY(1px) scale(.97)}
/* Mehrfachauswahl „Was mag sie?“: gewählte Antworten bleiben blau stehen */
.finder__opts--multi button{position:relative;padding-right:2.4em}
.finder__opts--multi button.is-active{background:var(--blue);color:#fff}
.finder__opts--multi button.is-active::after{content:"";position:absolute;right:.9em;top:50%;width:.5em;height:.9em;border:solid var(--yellow);border-width:0 3px 3px 0;transform:translateY(-65%) rotate(45deg)}
.finder__opts--multi button.is-active:hover{background:var(--deep);color:#fff}
.finder__go{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;margin:1.2em 0 0;max-width:none}
.finder__go .btn[disabled]{opacity:.45;cursor:default}
.finder__prev{margin:1.2em 0 0;max-width:none}
.finder__trail{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 1em;padding:0;list-style:none}
.finder__trail li{padding:.45em .7em;background:var(--blue);color:#fff;font:600 var(--step--1)/1 var(--text)}
@media (prefers-reduced-motion:no-preference){
  .finder__q.is-on{animation:fq-in .45s var(--ease-out)}
  @keyframes fq-in{from{opacity:0;transform:translateX(18px)}}
}
/* Vorschläge: große gelbe Felder mit Begründung */
.finder__top{display:grid;gap:8px}
.finder__top button{display:grid;gap:4px;padding:.9em 1em;background:var(--yellow);color:var(--yellow-ink)}
.finder__top button:hover{background:#ffe04a}
.finder__top button > span:first-child{font-family:var(--display);font-weight:600;font-size:var(--step-1);line-height:1.15;letter-spacing:-.01em}
.fidea__why{font:600 var(--step--1)/1.3 var(--text)}
.finder__top small{font:500 var(--step--1)/1.3 var(--text)}
@media (prefers-reduced-motion:no-preference){
  .finder__top button{animation:fq-in .5s var(--ease-out) both}
  .finder__top button:nth-child(2){animation-delay:70ms}.finder__top button:nth-child(3){animation-delay:140ms}
  .finder__top button:nth-child(4){animation-delay:210ms}.finder__top button:nth-child(5){animation-delay:280ms}.finder__top button:nth-child(6){animation-delay:350ms}
}
.finder__search{margin:1.4em 0 .8em;max-width:none}
.finder__search input{width:100%;padding:.9em 1em;border:0;border-radius:0;background:var(--paper);color:var(--ink);font:500 var(--step-0)/1.2 var(--text)}
.finder__search input::placeholder{color:var(--ink-2);opacity:1}
.finder__search input:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.finder__none,.finder__alle{margin:.8em 0 0;max-width:none}
.finder__more{margin:0;max-width:none}
.finder__grp{margin:1.3em 0 .5em;max-width:none;font-weight:600;color:var(--blue)}
.finder__opts--ideas button{display:flex;flex-direction:column;gap:3px;justify-content:center;padding:.8em .9em;min-height:64px}
.finder__opts--ideas small{font:500 var(--step--1)/1.2 var(--text);color:var(--ink-2)}
.finder__opts--ideas button:hover small{color:var(--yellow-ink)}
/* Ergebnis */
.finder__sum{margin:0 0 .15em;max-width:none;font-family:var(--display);font-weight:600;font-size:var(--step-1);line-height:1.1;letter-spacing:-.015em;color:var(--blue)}
.finder__for{margin:0 0 .9em;max-width:none;font-weight:600;color:var(--deep)}
.finder__fact{margin:0 0 1.1em;max-width:none;color:var(--ink)}
.finder__list,.finder__walk{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.fshop{position:relative;background:var(--paper)}
.fshop a{display:grid;gap:2px;padding:14px 16px;text-decoration:none;color:var(--ink);transition:background var(--t-hover) ease,transform .25s var(--ease-out)}
.fshop a:hover{background:var(--cream);transform:translateX(4px);color:var(--ink)}
.fshop strong,.fstop strong{font-family:var(--display);font-weight:600;font-size:var(--step-1);line-height:1.15;letter-spacing:-.01em;color:var(--blue)}
.fshop__meta{font-size:var(--step--1);color:var(--ink-2)}
.fshop__state{font-size:var(--step--1);font-weight:600;color:var(--deep)}
.fshop__state--closed,.fshop__state--unknown{font-weight:500;color:var(--ink-2)}
/* „Dazu passt“: nur was der Besucher antippt, kommt in den Bummel */
.finder__plus{margin-top:1.8em}
.finder__h{margin:0 0 .5em;max-width:none;font-family:var(--display);font-weight:600;font-size:var(--step-1);line-height:1.15;color:var(--blue)}
.finder__switch{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 1.1em;max-width:none}
.finder__switch button{padding:.7em .9em;border:0;border-radius:0;background:var(--paper);color:var(--blue);font:600 var(--step--1)/1.1 var(--text);cursor:pointer;transition:transform .25s var(--ease-out),background var(--t-hover) ease,color var(--t-hover) ease}
.finder__switch button::before{content:"+ "}
.finder__switch button:hover{background:var(--cream);transform:translateY(-1px)}
.finder__switch button:active{transform:translateY(1px) scale(.97)}
.finder__switch button.is-active{background:var(--blue);color:#fff}
.finder__switch button.is-active::before{content:"\2713\00a0";color:var(--yellow)}
.fstop{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);background:var(--paper)}
.fstop__n{display:grid;place-items:center;background:var(--deep);color:var(--yellow);font-family:var(--display);font-weight:600;font-size:var(--step-1)}
.fstop a{display:grid;gap:2px;padding:12px 14px;text-decoration:none;color:var(--ink);transition:background var(--t-hover) ease}
.fstop a:hover{background:var(--cream);color:var(--ink)}
.fstop__idea{font:600 var(--step--1)/1.2 var(--text);color:var(--ink-2)}
.fstop__swap{grid-column:2;justify-self:start;margin:0 14px 12px;padding:0;border:0;background:none;color:var(--blue);font:600 var(--step--1)/1.2 var(--text);text-decoration:underline;text-underline-offset:.2em;cursor:pointer}
.fstop__swap:hover{color:var(--deep)}
.fwalk{padding:2px 0 2px 58px;font-size:var(--step--1);font-weight:600;color:var(--blue)}
.finder__route{margin:1em 0 0;max-width:none;font-weight:600;color:var(--deep)}
.finder__gift{margin:1.8em 0 0;max-width:none}
.finder__again{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;margin:.8em 0 0;max-width:none}
@media (prefers-reduced-motion:no-preference){
  .finder__result:not([hidden]) .fshop{animation:fq-in .5s var(--ease-out) both;animation-delay:calc(var(--n,0) * 70ms)}
  .fstop,.fwalk{animation:fq-in .4s var(--ease-out) both}
}
/* Stadtplan bleibt neben dem Finder stehen, solange dessen Liste länger ist */
@media (min-width:1025px){.where__mapcol{position:sticky;top:88px}}
/* alle Treffer des Finders leuchten auf dem Stadtplan, die Bummel-Stationen sind größer */
.smap.has-route .cpin.cpin--hit{opacity:1;transform:scale(1.2)}
.smap.has-route .cpin.cpin--hit .cpin__y{fill:var(--yellow)}
.where__count[hidden]{display:none}
@media (prefers-reduced-motion:no-preference){
  .finder__result:not([hidden]) .fshop{animation:fq-in .5s var(--ease-out) both;animation-delay:calc(var(--n,0) * 120ms)}
}

/* ---------- 4 Bildstrecke ---------- */
.strip{padding-block:calc(var(--gap-section)*.7)}
.strip__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(24px,3vw,48px)}
.strip__head .lede{margin:0;color:#fff}
.strip__nav{display:flex;gap:8px;margin:0;flex:none}
.strip__nav .btn[disabled]{background:var(--blue);color:#C9D6E2;cursor:default;transform:none}
.strip__track{display:flex;gap:clamp(12px,2vw,28px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:max(var(--gutter),calc((100vw - var(--max))/2));padding-inline:max(var(--gutter),calc((100vw - var(--max))/2));scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.strip__track::-webkit-scrollbar{display:none}
.strip__track:focus-visible{outline-offset:-3px}
.strip__item{flex:0 0 min(62vw,920px);margin:0;scroll-snap-align:start}
.strip__item .pfx{aspect-ratio:3/2;background:var(--blue)}
.strip__item img{display:block;width:100%;height:100%;object-fit:cover}
.strip__item figcaption{margin-top:12px;font-size:var(--step-0);color:#fff}
.strip__credit{margin-top:clamp(20px,2.5vw,36px);margin-bottom:0;max-width:none;font-size:var(--step--1);color:#C9D6E2}

/* ---------- 5 Zwei Vereine ---------- */
.clubs{padding-block:calc(var(--gap-section)*.8) var(--gap-section)}
.clubs__grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(32px,6vw,112px);align-items:center}
.clubs__fig{margin:0}
.clubs__fig .pfx{aspect-ratio:4/3;background:var(--paper)}
.clubs__fig img{display:block;width:100%;height:100%;object-fit:cover}
.clubs blockquote{margin:2em 0;padding:0 0 0 clamp(20px,3vw,40px);border-left:10px solid var(--yellow)}
.clubs blockquote p{font-family:var(--display);font-weight:500;font-size:var(--step-1);line-height:1.15;color:var(--deep);margin:0 0 .4em;font-variation-settings:"opsz" 144,"SOFT" 50}
.clubs blockquote cite{font-style:normal;font-size:var(--step--1);color:var(--ink-2)}

/* ---------- Tablet ≤ 1024 ---------- */
@media (max-width:1024px){
  .hero__grid{grid-template-columns:minmax(0,1fr);min-height:0}
  .hero__copy{padding:40px var(--gutter) 48px}
  .hero__copy h1{font-size:clamp(40px,8.6vw,78px)}
  .hero__stage{height:min(62svh,600px);min-height:400px}
  .hero__card{left:6%;bottom:18%;width:min(48%,380px)}
  .where__grid,.clubs__grid{grid-template-columns:1fr}
  .strip__item{flex-basis:min(78vw,820px)}
}

/* ---------- Mobil ≤ 860: Bühne der Schritte klebt oben, Schritte laufen darunter durch ---------- */
@media (max-width:860px){
  .story{padding-bottom:calc(var(--gap-section)*.6)}
  .story__grid{grid-template-columns:1fr;gap:0}
  .story__stage{top:72px;z-index:3;height:38svh;min-height:250px;margin-inline:calc(-1*var(--gutter))}
  .story__scene{width:min(50%,230px);margin-top:-6%}
  .story__caption{top:calc(100% + 18px);font-size:var(--step--1)}
  .story__marks{left:var(--gutter);bottom:12px}
  .story__marks span{width:26px;height:5px}
  .story__sticker{--sticker-w:78px;left:-34%;top:-30%}
  .story--split #story-stage{display:none}
  .story--split .story__stage--inline{display:grid;position:relative;top:auto;z-index:auto;height:auto;min-height:250px;max-height:400px;aspect-ratio:16/10;width:auto;margin-bottom:32px}
  .story--split .step,.story--split .step:first-child{padding-top:0;padding-bottom:56px}
  .story--split .step--last{padding-bottom:8px}
  .story--split .story__stage--inline .story__rest{font-size:40px}
  .story--split .story__stage--inline .story__caption{left:50%;right:auto;width:min(84vw,420px);transform:translateX(-50%)}
  .step{min-height:0;padding-block:44px 28px}
  .step:first-child{padding-top:36px}
  .step--last{min-height:0;padding-bottom:8px}
  .step__pic{aspect-ratio:4/3}
}

/* ---------- Mobil ≤ 640: eigene Komposition ---------- */
@media (max-width:640px){
  .where{overflow:hidden}
  .hero__grid{gap:0}
  .hero__stage{order:1;height:46svh;min-height:330px;max-height:440px;width:100%;margin:0}
  .hero__copy{order:2;padding:32px var(--gutter) 40px}
  .hero__copy h1{margin-top:0}
  .hero__card{left:var(--gutter);bottom:22%;width:min(66%,270px)}
  .hero-search{margin-top:1.1em;max-width:none}
  .hero-search__row{flex-direction:column;gap:10px}
  .hero-search input{min-height:54px}
  .hero-search__btn{width:100%;text-align:center;font-size:var(--step-0)}
  .hero__facts{margin-top:28px;gap:6px}
  .live__link{display:flex}
  .balance-form__row{flex-direction:column;gap:10px}
  .balance-form__btn{width:100%;text-align:center;padding:1em 1.4em}
  .where__map{width:calc(100% + 2*var(--gutter));margin-inline:calc(-1*var(--gutter))}
  .smap{height:62svh;min-height:380px}
  .where__count{padding:10px var(--gutter) 12px}
  .where__count strong{font-size:40px}
  .where__card{left:12px;right:12px;width:auto}
  .smap .leaflet-control-attribution{padding:2px 18px 2px 8px;font-size:var(--step--1)}
  .finder{margin-inline:calc(-1*var(--gutter));padding:28px var(--gutter)}
  .strip__head{flex-direction:column;align-items:flex-start}
  .strip__item{flex-basis:86vw}
  .clubs__fig{order:-1}
  .clubs blockquote p{font-size:var(--step-1)}
}