/* havel-sup – SUP & Verleih (/sup/) und Stationsseiten (/sup/station/…/), Designsystem 2026-10 (Welle 2).
   Nur auf diesen Seiten geladen. Tokens und Bausteine (.hs-kurs, .hs-chip, .hs-karte …) stehen in basis.css.
   Zustände kommen aus aria-Attributen (aria-pressed, aria-selected), sup.js setzt nur diese. */

/* ---------------------------------------------------------------- Kopf */
.sup-kopf{padding-bottom:0}
.sup-kopf__raster{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s5) var(--s7);align-items:end}
.sup-kopf__text{display:flex;flex-direction:column;gap:var(--s4)}
.sup-kopf__text .hs-h1{max-width:18ch}
.sup-saison{margin:0;display:flex;flex-direction:column;gap:2px;min-width:240px;padding:var(--s4) var(--s5);border-radius:var(--r-l);background:var(--c-flaeche);border:1px solid var(--c-linie);box-shadow:var(--schatten-m)}
.sup-saison>div{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);padding:8px 0}
.sup-saison>div+div{border-top:1px dashed var(--c-linie)}
.sup-saison dt{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--c-leise)}
.sup-saison dt .hs-i{color:var(--sup-ink);width:18px;height:18px}
.sup-saison dd{margin:0;font-family:var(--f-kopf);font-weight:800;font-size:20px;color:var(--c-ink);white-space:nowrap}
.sup-saison dd.sup-saison__klein{font-family:var(--f-text);font-weight:600;font-size:15px}
@media (max-width:820px){.sup-kopf__raster{grid-template-columns:1fr}.sup-saison{min-width:0}}

/* Panoramafoto (1200 × 284), schmal auf 16:9 zugeschnitten – Paddlerin bleibt im Bild */
.sup-panorama{position:relative;margin-top:var(--s6);aspect-ratio:1200/284;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--schatten-l);background:var(--sup-hauch)}
.sup-panorama img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:66% 50%;display:block}
.sup-panorama .hs-sticker{z-index:1}
@media (max-width:760px){.sup-panorama{aspect-ratio:16/10;border-radius:var(--r-l)}}
@media (max-width:420px){.sup-panorama .hs-sticker{left:10px!important;right:10px;bottom:10px!important}}

/* ---------------------------------------------------------------- Saisonhinweis (Winter) + Brücke zu Fitness */
.hs-saisonhinweis{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--s4) var(--s5);padding:var(--s5);border-radius:var(--r-l);background:var(--k-hauch);border:1px solid color-mix(in srgb,var(--k) 25%,transparent)}
.hs-saisonhinweis__ico{width:56px;height:56px;border-radius:var(--r-m);display:grid;place-items:center;background:#fff;color:var(--k-ink);align-self:start}
.hs-saisonhinweis p{margin:0;color:var(--c-text)}
.hs-saisonhinweis__titel{font-family:var(--f-kopf);font-weight:800;font-size:21px;line-height:1.25;color:var(--k-ink);margin:0 0 4px}
@media (max-width:700px){.hs-saisonhinweis{grid-template-columns:auto 1fr}.hs-saisonhinweis>.hs-btn{grid-column:1/-1;justify-self:start}}
.sup-bruecke{list-style:none;margin:var(--s3) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s2)}
.sup-bruecke a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border-radius:var(--r-rund);background:#fff;border:1px solid var(--c-linie);color:var(--c-ink);font-weight:600;font-size:15px;text-decoration:none;transition:border-color var(--t-kurz),transform var(--t-kurz) var(--ease)}
.sup-bruecke a:hover{border-color:var(--k);transform:translateY(-1px);color:var(--c-ink)}
.sup-bruecke b{font-family:var(--f-kopf);color:var(--k-ink)}

/* ---------------------------------------------------------------- SUP-Kurskarten (Ergänzung zu .hs-kurs) */
#sup-kurse .hs-kurse,.sup-st-kurse .hs-kurse{list-style:none;margin:0;padding:0}
.hs-kurs{scroll-margin-top:96px}
.sup-kurs__titel{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.hs-erwartet{border-top:1px solid var(--c-linie)}
.hs-erwartet summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:6px 0;font-weight:700;color:var(--c-ink);cursor:pointer;list-style:none}
.hs-erwartet summary::-webkit-details-marker{display:none}
.hs-erwartet summary .hs-i{width:32px;height:32px;padding:8px;border-radius:50%;background:var(--k-hauch);color:var(--k-ink);transition:transform var(--t-mittel) var(--ease)}
.hs-erwartet[open] summary .hs-i{transform:rotate(180deg)}
.hs-erwartet summary:hover{color:var(--k-ink)}
.hs-erwartet ul{list-style:none;margin:0 0 var(--s3);padding:0;display:flex;flex-direction:column;gap:8px}
.hs-erwartet li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.5;color:var(--c-text)}
.hs-erwartet li .hs-i{color:var(--k-ink);margin-top:3px}
.hs-erwartet[open] ul{animation:hs-ein .35s var(--ease)}

/* ---------------------------------------------------------------- Partnerkarte */
.sup-kartenkarte{background:var(--c-flaeche);border:1px solid var(--c-linie);border-radius:var(--r-xl);box-shadow:var(--schatten-m);overflow:hidden}
.sup-kartenkarte__raster{display:flex;flex-wrap:wrap}
.sup-karte{flex:999 1 560px;min-width:0;position:relative;background:var(--c-sand);display:flex;flex-direction:column;container:sup-karte / inline-size}
/* Feste Höhe nötig: bei Größen-Containment liefert min-height allein in Chrome cqh = 0 */
.sup-flaeche{position:relative;flex:1 1 auto;height:min(620px,70cqw);overflow:hidden;container-type:size}
.sup-flaeche.ist-osm{height:max(360px,min(620px,70cqw))}
/* Kasten im Seitenverhältnis der Zeichnung (1000 × 700): Pins (x/y in %) sitzen immer auf ihrem Gewässer */
.sup-schema{position:absolute;left:50%;top:50%;width:min(100cqw,142.857cqh);height:min(100cqh,70cqw);transform:translate(-50%,-50%)}
.sup-schema__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sup-osm{position:absolute;inset:0;z-index:0;isolation:isolate;background:var(--c-sand)}

.pin{position:absolute;transform:translate(-50%,-100%);width:48px;height:58px;display:flex;align-items:flex-start;justify-content:center;padding:0;border:0;background:none;cursor:pointer}
.pin svg{transition:transform var(--t-kurz) var(--ease);transform-origin:50% 100%;filter:drop-shadow(0 4px 6px rgba(31,26,46,.25))}
.pin:hover svg{transform:scale(1.12)}
.pin[aria-pressed="true"] svg{animation:hs-schweben 3s ease-in-out infinite}
.pin:disabled{cursor:default;opacity:.28}
.pin:disabled:hover svg{transform:none}

/* Legende + Zustimmung: breit über der Karte, schmal als Leiste darunter */
.sup-leiste{position:absolute;left:20px;right:20px;bottom:20px;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:12px;pointer-events:none}
.sup-leiste>*{pointer-events:auto}
.sup-legende,.sup-zust{background:rgba(255,255,255,.95);border-radius:var(--r-m);padding:12px 16px;box-shadow:var(--schatten-m);font-size:14px;line-height:1.5;color:var(--c-text)}
.sup-legende{display:flex;flex-direction:column;gap:6px}
.sup-legende span{display:flex;align-items:center;gap:8px}
.sup-legende i{width:12px;height:12px;border-radius:50%;flex:none}
.sup-legende__leise{color:var(--c-leise)}
.sup-zust{display:flex;flex-direction:column;align-items:flex-start;gap:10px;max-width:320px}
.sup-zust p{margin:0}
.sup-zust strong{color:var(--c-ink)}
.sup-zust a{font-weight:700}
@container sup-karte (max-width: 600px){
  .sup-leiste{position:static;padding:12px 16px 16px;flex-wrap:wrap;align-items:stretch}
  .sup-leiste>*{flex:1 1 auto}
  .sup-legende,.sup-zust{box-shadow:none;border:1px solid var(--c-linie)}
  .sup-zust{max-width:none}
}

/* Panel rechts */
.sup-panel{flex:1 1 380px;min-width:0;border-left:1px solid var(--c-linie);display:flex;flex-direction:column}
.sup-panel__kopf{padding:var(--s5) var(--s5) var(--s4);display:flex;flex-direction:column;gap:var(--s3)}
.sup-panel__text{margin:0;color:var(--c-leise);font-size:16px}
.sup-panel__kopf .hs-text-link{align-self:flex-start;margin:-6px 0 -10px}
.sup-tabs{display:flex;gap:4px;padding:0 var(--s5);border-bottom:1px solid var(--c-linie)}
.sup-tabs [role="tab"]{min-height:48px;padding:10px 14px;border:0;border-bottom:3px solid transparent;background:none;color:var(--c-leise);font-weight:700;font-size:15px;cursor:pointer;transition:color var(--t-kurz),border-color var(--t-kurz)}
.sup-tabs [role="tab"]:hover{color:var(--c-ink)}
.sup-tabs [role="tab"][aria-selected="true"]{color:var(--c-ink);border-bottom-color:var(--c-marke)}
.sup-panel__inhalt{padding:var(--s4) var(--s5) var(--s5);display:flex;flex-direction:column;gap:var(--s3);flex:1}
.sup-zeilen{display:flex;flex-direction:column;gap:8px}
.sup-zeile{margin:0;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;border-radius:var(--r-m);background:var(--c-bg);border:1px solid var(--c-linie)}
.sup-zeile>span{display:flex;flex-direction:column;gap:2px;min-width:0}
.sup-zeile strong{color:var(--c-ink)}
.sup-zeile small{font-size:13px;color:var(--c-leise)}
.sup-zeile__preis{align-items:flex-end;white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right}
.sup-zeile__preis strong{font-family:var(--f-kopf);font-weight:800}
.sup-zeile--leer{color:var(--c-leise);background:transparent;border-style:dashed}
.sup-panel__knoepfe{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:auto;padding-top:var(--s3)}
.sup-panel__knoepfe .hs-btn:first-child{flex:1 1 auto}
@media (max-width:960px){.sup-panel{border-left:0;border-top:1px solid var(--c-linie)}}

/* Liste aller Stationen */
.sup-liste{border-top:1px solid var(--c-linie);padding:var(--s4) var(--s5) var(--s5);display:flex;flex-direction:column;gap:var(--s3)}
.sup-liste ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));gap:10px}
.sup-liste li{display:flex;border-radius:var(--r-m);border:1.5px solid var(--c-linie);background:var(--c-flaeche);transition:border-color var(--t-kurz),background-color var(--t-kurz)}
.sup-liste li:has([aria-pressed="true"]){border-color:var(--sup);background:var(--sup-hauch)}
.sup-liste li:hover{border-color:var(--c-ink)}
.sup-liste button{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px;min-height:64px;padding:12px 16px;border:0;border-radius:var(--r-m);background:none;text-align:left;cursor:pointer;color:var(--c-ink)}
.sup-liste button small{font-size:13px;color:var(--c-leise)}
.sup-liste a{flex:none;width:48px;display:grid;place-items:center;border-left:1px solid var(--c-linie);color:var(--sup-ink)}

/* Leaflet im Look der Seite: warm gedämpfte Kacheln */
.sup-osm .leaflet-container,.sup-osm.leaflet-container{background:var(--c-sand);font-family:var(--f-text)}
.sup-osm .leaflet-tile-pane{filter:grayscale(.45) sepia(.12) saturate(.9) brightness(1.04) contrast(.9)}
.sup-osm .leaflet-control-attribution{font-size:11px;background:rgba(255,255,255,.88);color:var(--c-text)}
.sup-osm .leaflet-control-attribution a{color:var(--c-marke-dunkel)}
.sup-osm .leaflet-bar{border:0;box-shadow:var(--schatten-m);border-radius:12px;overflow:hidden}
.sup-osm .leaflet-bar a{width:40px;height:40px;line-height:40px;color:var(--c-ink);font-size:20px}
.sup-lpin{display:flex;align-items:flex-end;justify-content:center;background:none;border:0;cursor:pointer}
.sup-lpin svg{transition:transform var(--t-kurz) var(--ease);transform-origin:50% 100%;filter:drop-shadow(0 4px 6px rgba(31,26,46,.25))}
.sup-lpin:hover svg{transform:scale(1.12)}
.sup-lpin[aria-disabled="true"]{cursor:default}
.sup-lpin[aria-disabled="true"]:hover svg{transform:none}

/* ---------------------------------------------------------------- Boardtypen, Sicherheit, Partner */
.sup-boards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:var(--s4)}
.sup-boards .hs-karte{padding:var(--s5);display:flex;flex-direction:column;gap:var(--s3)}
.sup-boards svg{width:100%;height:56px}
.sup-boards svg .b{fill:var(--k-hauch);stroke:var(--k);stroke-width:2}
.sup-boards svg .s{fill:none;stroke:var(--k-ink);stroke-width:2;stroke-linecap:round}
.sup-boards .hs-h3{font-size:20px}
.sup-boards p{margin:0;color:var(--c-leise);font-size:16px}

.sup-sicher{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--s6) var(--s7);padding:clamp(24px,4vw,48px);border-radius:var(--r-xl);background:var(--c-sand)}
.sup-sicher__text{display:flex;flex-direction:column;gap:var(--s3);align-items:flex-start}
.sup-sicher ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:var(--s5)}
.sup-sicher li{display:flex;flex-direction:column;gap:6px}
.sup-sicher li strong{font-family:var(--f-kopf);font-size:18px;color:var(--c-ink)}
.sup-sicher li>span:last-child{color:var(--c-leise);font-size:16px;line-height:1.55}
.sup-sicher__ico{width:44px;height:44px;border-radius:var(--r-s);display:grid;place-items:center;background:#fff;color:var(--sup-ink);margin-bottom:4px}
@media (max-width:820px){.sup-sicher{grid-template-columns:1fr}}

.sup-partner{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s5);padding:clamp(24px,4vw,48px);border-radius:var(--r-xl);background:linear-gradient(120deg,var(--sup-hauch) 0%,#FBE7F4 100%);border:1px solid color-mix(in srgb,var(--sup) 22%,transparent)}
.sup-partner>div{display:flex;flex-direction:column;gap:var(--s2);max-width:640px}
.sup-partner p{margin:0;color:var(--c-text);font-size:18px}

/* ---------------------------------------------------------------- Stationsseite */
.sup-st-kopf .hs-h1{max-width:20ch}
.sup-st-preis{margin:0;display:flex;flex-direction:column;gap:4px;min-width:240px;padding:var(--s4) var(--s5);border-radius:var(--r-l);background:var(--c-flaeche);border:1px solid var(--c-linie);box-shadow:var(--schatten-m)}
.sup-st-preis dt{font-size:14px;font-weight:700;color:var(--sup-ink)}
.sup-st-preis dd{margin:0;font-family:var(--f-kopf);font-weight:800;font-size:28px;line-height:1.1;color:var(--c-ink)}
.sup-st-preis dd small{font-family:var(--f-text);font-size:15px;font-weight:600;color:var(--c-leise)}
.sup-st-preis dd.sup-st-preis__neben{font-family:var(--f-text);font-weight:500;font-size:15px;color:var(--c-leise)}

.sup-st{display:flex;flex-wrap:wrap;background:var(--c-flaeche);border:1px solid var(--c-linie);border-radius:var(--r-xl);box-shadow:var(--schatten-m);overflow:hidden}
.sup-st__inhalt{flex:999 1 560px;min-width:0;padding:clamp(20px,3.4vw,40px);display:flex;flex-direction:column;gap:var(--s6)}
.sup-st__block{display:flex;flex-direction:column;gap:var(--s3)}
.sup-st__block>h2{font-family:var(--f-kopf);font-weight:800;font-size:24px;line-height:1.2;color:var(--c-ink);margin:0}
.sup-st__text{margin:0;color:var(--c-text);font-size:17px;max-width:66ch}
.sup-st__fakten{margin:0;display:flex;flex-wrap:wrap;gap:12px 32px;font-size:15px;color:var(--c-text)}
.sup-st__fakten>div{display:flex;align-items:flex-start;gap:8px}
.sup-st__fakten dt{display:flex;padding-top:2px;color:var(--sup-ink)}
.sup-st__fakten dd{margin:0}
.sup-st__aside{flex:1 1 360px;min-width:0;border-left:1px solid var(--c-linie);padding:clamp(20px,2.6vw,28px);display:flex;flex-direction:column;gap:var(--s4);background:var(--c-bg)}
@media (max-width:960px){.sup-st__aside{border-left:0;border-top:1px solid var(--c-linie)}}
.sup-st__einstieg{display:flex;flex-direction:column;gap:2px}
.sup-st__einstieg span:first-child{font-size:14px;font-weight:700;color:var(--sup-ink)}
.sup-st__einstieg strong{color:var(--c-ink);line-height:1.5}
.sup-knoepfe{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

/* Tabelle der Boards */
.sup-tab{width:100%;border-collapse:collapse;font-size:15px}
.sup-tab th{font-size:13px;font-weight:700;color:var(--c-leise);text-align:left;padding:0 12px 10px 0;border-bottom:1px solid var(--c-linie)}
.sup-tab td,.sup-tab tbody th{padding:14px 12px 14px 0;border-bottom:1px solid var(--c-linie);vertical-align:top}
.sup-tab tbody th{font-size:15px;font-weight:400;color:var(--c-ink)}
.sup-tab tbody th strong{display:block}
.sup-tab tbody th small{display:block;font-size:13px;color:var(--c-leise)}
.sup-tab .zahl{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;padding-left:16px;padding-right:0}
.sup-tab td.zahl:first-of-type{font-family:var(--f-kopf);font-weight:800;color:var(--c-ink)}

/* Kleine Karte, Zustimmung immer unter der Karte */
.sup-mini{border-radius:var(--r-l);overflow:hidden;border:1px solid var(--c-linie);flex:none}
.sup-mini .sup-flaeche{height:260px;flex:none}
.sup-mini .sup-flaeche.ist-osm{height:300px}
.sup-mini .sup-leiste{position:static;padding:12px 16px 16px;flex-wrap:wrap;align-items:stretch;background:#fff}
.sup-mini .sup-leiste>*{flex:1 1 auto}
.sup-mini .sup-zust{max-width:none;box-shadow:none;padding:0;background:none}
.sup-mini__pin{position:absolute;transform:translate(-50%,-100%);width:48px;height:58px;display:flex;align-items:flex-end;justify-content:center}
.sup-mini__pin svg{filter:drop-shadow(0 4px 6px rgba(31,26,46,.25))}

/* Weitere Stationen */
.sup-andere{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:var(--s3)}
.sup-andere a{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:64px;padding:14px 16px;text-decoration:none;color:var(--c-ink)}
.sup-andere a>span:first-child{display:flex;flex-direction:column;gap:2px}
.sup-andere small{font-size:13px;color:var(--c-leise)}
.sup-andere .hs-i{color:var(--sup-ink)}