/* Region-Übersicht region.html (erzeugt von tools/site/hub.py): Raster der Themenkarten, Legende ↔ Übersichtskarte.
   Ergänzt region.css / region-magazin.css / region-themen.css (Karten-Stile .mag-cat, .mm, .mag-legend). Verhalten: region-hub.js. */
.hub-cats{list-style:none;margin:0;padding:0;display:grid;gap:var(--mag-gap);grid-template-columns:repeat(2,minmax(0,1fr))}
.hub-cats > :first-child{grid-column:1 / -1}
.hub-cats .mag-cat a{min-height:clamp(11.5rem,44vw,16rem)}
.hub-cats > :first-child a{min-height:clamp(16rem,66vw,24rem)}
.hub-cats .mag-cat a:focus-visible{outline:3px solid var(--c-primary);outline-offset:3px}
@media (max-width:599px){
.hub-cats .mag-cat__tx{padding:.8rem .85rem .85rem;gap:.2rem}
.hub-cats > :not(:first-child) .mag-cat__t{display:none}
.hub-cats > :not(:first-child) b{font-size:1.06rem;hyphens:auto}
.hub-cats > :not(:first-child) small{font-size:.7rem}
}
@media (min-width:900px){
.hub-cats{grid-template-columns:repeat(3,minmax(0,1fr))}
.hub-cats > :first-child{grid-column:span 2}
.hub-cats .mag-cat a,.hub-cats > :first-child a{min-height:clamp(16rem,22vw,20rem)}
.hub-cats > :first-child b{font-size:clamp(1.6rem,1rem + 1.5vw,2.4rem)}
}
/* Übersichtskarte: Thema der Legende zeigen / fokussieren → andere Punkte treten zurück */
.mm--hub .mm-pin{transition:opacity .2s}
.mm--hub .mm-pin.is-dim{opacity:.16}
.mm--hub .mm-pin--dot.is-hl .mm-l{opacity:1}
.mag-legend li.is-on a{border-color:var(--pc);background:color-mix(in srgb,var(--pc) 10%,var(--c-bg))}
@media (prefers-reduced-motion:reduce){.mm--hub .mm-pin{transition:none}}

/* Die beiden Seeseiten unter den Themen (tools/site/hub.py lakes) – gleiche Karten wie die Themen */
.hub-lakes__h{margin:clamp(2rem,5vw,3rem) 0 1rem}
.hub-lakes{list-style:none;margin:0;padding:0;display:grid;gap:var(--mag-gap,1rem)}
@media (min-width:700px){.hub-lakes{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hub-lakes .mag-cat a{min-height:clamp(15rem,30vw,22rem)}