/* Seite „Standorte“ – nur Variablen aus tokens.css */

/* ---- Standort-Kacheln ---------------------------------------------------- */
.st-grid { --gap: 60px 40px; margin-top: var(--space-4); align-items: start; }
.st-card { scroll-margin-top: 40px; }
.st-card .location__img { margin-bottom: 28px; }
.st-card__name { font-size: var(--fs-h2); line-height: 1.2; margin-bottom: 14px; text-wrap: balance; }
.st-card__firma { margin: 0; font-weight: 500; display: flex; flex-direction: column; align-items: center; }
.st-card__art {
  margin-top: 6px; font-size: var(--fs-xs); font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--c-gold);
}
.st-card__angebot { margin: 12px 0 0; font-size: var(--fs-small); line-height: 1.6; color: var(--c-text-dim); max-width: 32ch; }
.st-card__addr { margin-top: 18px; align-items: center; }
.st-card__tel { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; }
.st-card__tel svg { color: var(--c-gold); }
.st-card__extra { color: var(--c-text-dim); }
.st-card__actions { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--c-gold-20); width: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.st-card__menu { margin: 0; font-size: var(--fs-small); }
.st-card__menu-label { color: var(--c-text-dim); }
.st-card__menu a { color: var(--c-gold); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.st-card__menu a:hover, .st-card__menu a:focus-visible { color: var(--c-text); }
.st-card__sep { color: var(--c-text-dim); }
.st-card__buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.st-card:target .frame { box-shadow: 0 0 0 1px var(--c-gold); }
.st-card__hours:empty, .st-card__maps:empty, .st-card__actions:empty { display: none; }

/* Desktop: drei Kacheln nebeneinander, jede Zeile (Bild, Name, Art, Text, Adresse, Zeiten, Maps, Speisekarte)
   steht über alle Kacheln auf gleicher Höhe – die Kachel übernimmt die 8 Zeilen des Rasters (subgrid). */
@media (min-width: 1025px) {
  .st-grid.grid-3 { row-gap: 0; }
  .st-card { display: grid; grid-row: span 8; grid-template-rows: subgrid; row-gap: 0; justify-items: center; align-content: start; }
  .st-card > * { align-self: start; }
  .st-card__hours:empty, .st-card__maps:empty, .st-card__actions:empty { display: block; }
  .st-card__actions:empty { border-top-color: transparent; }
}

@media (max-width: 1024px) and (min-width: 768px) {
  .st-grid.grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-card__name { font-size: 34px; }
}
@media (max-width: 767px) {
  .st-grid { --gap: 70px; }
  .st-card__name { font-size: 34px; }
}

/* ---- Einleitung ---------------------------------------------------------- */
.st-intro { max-width: 760px; margin: var(--space-3) auto 0; text-align: center; }


/* ---- Interaktive Karte (eigenes SVG, page.js) ------------------------------ */
.st-karte .container--wide { position: relative; }
.km {
  --km-land: var(--c-bg-2);
  --km-wasser: color-mix(in srgb, var(--c-hero-base) 48%, var(--c-bg));
  --km-linie: var(--c-text);
  display: grid; grid-template-columns: minmax(0, 2.05fr) minmax(0, 1fr); gap: 28px;
  margin-top: var(--space-4); align-items: start;
}
.km--nur-berlin { grid-template-columns: minmax(0, 1fr); }
.km__seite { display: flex; flex-direction: column; gap: 28px; min-width: 0; }

/* Kartenfeld mit Goldrahmen */
.km__feld {
  position: relative; aspect-ratio: var(--km-ratio); background: var(--c-bg);
  border: var(--frame-thin); isolation: isolate;
}
.km__feld::after {
  content: ""; position: absolute; inset: 7px; border: 1px solid var(--c-gold-20); pointer-events: none; z-index: 3;
}
.km__titel {
  position: absolute; left: 22px; top: 14px; z-index: 4; margin: 0; pointer-events: none;
  font-family: var(--f-display); font-style: italic; font-size: 34px; line-height: 1.2; color: var(--c-gold);
  text-shadow: 0 0 14px var(--c-bg), 0 0 4px var(--c-bg);
}
.km__feld--stralsund .km__titel { font-size: 28px; }
.km__buehne { position: absolute; inset: 0; overflow: hidden; touch-action: pan-x pan-y; outline: none; user-select: none; -webkit-user-select: none; }
.km--js .km__buehne { cursor: grab; }
.km__buehne.is-ziehen { cursor: grabbing; }
.km__feld.is-gezoomt .km__buehne { touch-action: none; }
.km__buehne:focus-visible { box-shadow: inset 0 0 0 2px var(--c-gold); }
.km__svg { display: block; width: 100%; height: 100%; }

/* Grundkarte */
.km__basis path { fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.km__grund { fill: var(--c-bg); }
.km__feld--stralsund .km__grund { fill: var(--km-wasser); }
.km__raster { fill: none; stroke: var(--c-gold); stroke-opacity: .07; stroke-width: .6; vector-effect: non-scaling-stroke; }
.km__basis .km__land { fill: var(--km-land); }
.km__basis .km__wasser { fill: var(--km-wasser); stroke: var(--c-gold); stroke-opacity: .32; stroke-width: .7; }
.km__basis .km__fluss { stroke: var(--c-gold); stroke-opacity: .28; stroke-width: 1.2; }
.km__basis .km__kueste { stroke: var(--c-gold); stroke-opacity: .7; stroke-width: 1.1; }
.km__basis .km__bezirke { stroke: var(--km-linie); stroke-opacity: .16; stroke-width: .8; }
.km__basis .km__grenze { stroke: var(--c-gold); stroke-opacity: .85; stroke-width: 1.4; }
.km__basis .km__autobahn { stroke: var(--km-linie); stroke-opacity: .2; stroke-width: 1.3; }
.km__basis .km__haupt { stroke: var(--km-linie); stroke-opacity: 0; stroke-width: .9; transition: stroke-opacity .4s ease; }
.km__basis .km__haupt--immer { stroke-opacity: .3; stroke-width: 1.2; }
.km__basis .km__neben { stroke: var(--km-linie); stroke-opacity: .16; stroke-width: .8; }
.km__basis .km__altstadt { stroke: var(--km-linie); stroke-opacity: .14; stroke-width: .7; transition: stroke-opacity .4s ease; }
.km__basis .km__bahn { stroke: var(--c-gold); stroke-opacity: .35; stroke-width: 1; stroke-dasharray: 5 4; }
.km__basis .km__ring { stroke: var(--c-gold); stroke-opacity: .55; stroke-width: 1.5; stroke-dasharray: 7 5; }
.km__detail { opacity: 0; transition: opacity .45s ease; }
.km__basis .km__d-gebaeude { fill: var(--km-linie); fill-opacity: .045; stroke: var(--km-linie); stroke-opacity: .2; stroke-width: .6; }
.km__basis .km__d-neben { stroke: var(--km-linie); stroke-opacity: .2; stroke-width: 1.1; }
.km__basis .km__d-strasse { stroke: var(--km-linie); stroke-opacity: .38; stroke-width: 1.8; }
.km__basis .km__d-gleis { stroke: var(--c-gold); stroke-opacity: .45; stroke-width: 1.2; stroke-dasharray: 4 3; }
.km__feld[data-z~="z2"] .km__haupt { stroke-opacity: .2; }
.km__feld[data-z~="z2"] .km__altstadt { stroke-opacity: .32; }
.km__feld[data-z~="z4"] .km__detail { opacity: 1; }
.km__feld[data-z~="z4"] .km__haupt { stroke-opacity: .28; }

/* Beschriftungen (Größe in Bildschirm-px, page.js gleicht den Zoom aus) */
.km__lbl {
  font-family: var(--f-text); font-size: 10.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  fill: var(--c-text); fill-opacity: .4; text-anchor: middle; dominant-baseline: middle;
  paint-order: stroke; stroke: var(--km-land); stroke-width: 3px; stroke-opacity: .9; stroke-linejoin: round;
  transition: opacity .4s ease; pointer-events: none;
}
.km__lbl--wasser { font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: 13px; letter-spacing: .03em; text-transform: none; fill: var(--c-gold); fill-opacity: .75; stroke: var(--km-wasser); }
.km__lbl--ort { font-size: 9.5px; fill-opacity: .62; letter-spacing: .12em; }
.km__lbl--strasse { font-size: 10px; font-weight: 400; letter-spacing: .04em; text-transform: none; fill-opacity: .7; opacity: 0; }
.km__feld--stralsund .km__lbl--bezirk { font-family: var(--f-display); font-style: italic; text-transform: none; letter-spacing: .02em; font-size: 15px; fill-opacity: .55; }
.km__feld[data-z~="z8"] .km__lbl--strasse { opacity: 1; }
/* kleine Kartenfelder (Handy): Namen erst nach dem Hineinzoomen, damit nichts übereinanderliegt */
.km__feld.is-klein:not([data-z~="z2"]) .km__lbl { opacity: 0; }
.km__feld--stralsund.is-klein:not([data-z~="z2"]) .km__lbl--wasser, .km__feld--stralsund.is-klein:not([data-z~="z2"]) .km__lbl--ort { opacity: 1; }
.km__feld[data-z~="z8"] .km__lbl--bezirk { opacity: .45; }

/* Fähnchen */
.km__pin { cursor: pointer; outline: none; }
.km__treffer { fill: transparent; }
.km__schatten { fill: var(--c-hero-base); opacity: .6; }
.km__loch { fill: var(--c-hero-base); }
.km__nadel { stroke: var(--c-text); stroke-opacity: .9; stroke-width: 1.3; stroke-linecap: round; }
.km__kopf { fill: var(--c-gold); transition: fill .25s ease; }
.km__gruen { fill: var(--c-flag-green); }
.km__weiss { fill: var(--c-text); }
.km__rot { fill: var(--c-flag-red); }
.km__tuchrand { fill: none; stroke: var(--c-hero-base); stroke-opacity: .35; stroke-width: .6; }
.km__puls { fill: none; stroke: var(--c-gold); stroke-width: 1.4; opacity: 0; }
.km__kipp { transform: rotate(var(--tilt, 0deg)); transition: transform .5s cubic-bezier(.3, 1.4, .5, 1); }
.km__fall { transition: translate .25s ease, scale .25s ease; }
.km__pin:hover .km__fall, .km__pin:focus-visible .km__fall, .km__pin.is-hl .km__fall, .km__pin.is-aktiv .km__fall { translate: 0 -3px; scale: 1.14; }
.km__pin:hover .km__kopf, .km__pin.is-hl .km__kopf, .km__pin.is-aktiv .km__kopf { fill: var(--c-text); }
.km__pin:focus-visible .km__puls { opacity: 1; r: 9px; }
.km__pin.is-aktiv .km__puls { opacity: .9; }
@media (prefers-reduced-motion: no-preference) {
  .km--js .km__fall, .km--js .km__schatten { opacity: 0; }
  .km--js .km__feld.is-live .km__fall { animation: km-stecken .75s cubic-bezier(.2, .9, .3, 1.15) both; animation-delay: calc(var(--i, 0) * .16s + .15s); }
  .km--js .km__feld.is-live .km__schatten { animation: km-schatten .75s ease both; animation-delay: calc(var(--i, 0) * .16s + .15s); }
  .km__pin.is-aktiv .km__puls { animation: km-puls 1.8s ease-out infinite; }
}
@keyframes km-stecken {
  0% { opacity: 0; transform: translateY(-38px) rotate(-8deg); }
  55% { opacity: 1; transform: translateY(1.5px) rotate(1deg); }
  75% { transform: translateY(-1px) rotate(0deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes km-schatten { 0%, 45% { opacity: 0; } 100% { opacity: .6; } }
@keyframes km-puls { 0% { opacity: .9; r: 3px; } 100% { opacity: 0; r: 16px; } }

/* Bedienelemente */
.km__steuer { position: absolute; right: 16px; top: 16px; z-index: 4; display: flex; flex-direction: column; gap: 6px; }
.km__steuer[hidden] { display: none; }
.km__knopf {
  width: 38px; height: 38px; display: grid; place-items: center; padding: 0; cursor: pointer;
  color: var(--c-gold); background: color-mix(in srgb, var(--c-bg) 88%, transparent);
  border: 1px solid var(--c-gold-20); border-radius: 50%; transition: border-color var(--t), color var(--t), background var(--t);
}
.km__knopf:hover, .km__knopf:focus-visible { border-color: var(--c-gold); color: var(--c-text); outline: none; }
.km__knopf:focus-visible { box-shadow: 0 0 0 2px var(--c-gold); }
.km__knopf:disabled { opacity: .35; cursor: default; }
.km__knopf--reset { margin-top: 4px; }
.km__hinweis {
  position: absolute; inset: 0; z-index: 5; margin: 0; display: grid; place-items: center; padding: 20px; text-align: center;
  font-size: var(--fs-small); color: var(--c-text); background: color-mix(in srgb, var(--c-bg) 72%, transparent);
  pointer-events: none; opacity: 0; transition: opacity .3s ease;
}
.km__hinweis.is-an { opacity: 1; }
.km__hinweis[hidden] { display: none; }

/* Popup */
.km__pop {
  position: absolute; z-index: 6; left: 0; top: 0; width: min(330px, calc(100% - 24px));
  background: var(--c-bg-2); border: 1px solid var(--c-gold); padding: 20px 22px 18px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .55); font-size: var(--fs-xs); line-height: 1.55; text-align: left;
  transform: translate(var(--px, -50%), calc(-100% - 48px));
}
.km__pop.is-unten { transform: translate(var(--px, -50%), 18px); }
.km__pop::after {
  content: ""; position: absolute; left: var(--pfeil, 50%); bottom: -7px; width: 12px; height: 12px; margin-left: -6px;
  background: var(--c-bg-2); border-right: 1px solid var(--c-gold); border-bottom: 1px solid var(--c-gold); transform: rotate(45deg);
}
.km__pop.is-unten::after { bottom: auto; top: -7px; transform: rotate(225deg); }
.km__pop[hidden] { display: none; }
.km__feld.has-pop { z-index: 10; }
.km__pop.is-blatt { left: 0; right: 0; top: calc(100% + 12px); width: auto; transform: none; }
.km__pop.is-blatt::after { bottom: auto; top: -7px; transform: rotate(225deg); }
@media (prefers-reduced-motion: no-preference) {
  .km__pop:not([hidden]) { animation: km-pop .28s ease both; }
}
@keyframes km-pop { from { opacity: 0; margin-top: 6px; } to { opacity: 1; margin-top: 0; } }
.km__pop-zu {
  position: absolute; right: 8px; top: 8px; width: 32px; height: 32px; display: grid; place-items: center;
  background: none; border: 0; color: var(--c-text-dim); cursor: pointer; padding: 0;
}
.km__pop-zu:hover, .km__pop-zu:focus-visible { color: var(--c-gold); outline: none; }
.km__pop-zu:focus-visible { box-shadow: 0 0 0 1px var(--c-gold); }
.km__pop-art { margin: 0 0 4px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-gold); padding-right: 28px; }
.km__pop-titel { margin: 0; font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: 26px; line-height: 1.15; color: var(--c-gold); outline: none; padding-right: 20px; }
.km__pop-firma { margin: 2px 0 10px; color: var(--c-text-dim); }
.km__pop-einheiten { list-style: none; margin: 0 0 12px; padding: 10px 0 0; border-top: 1px solid var(--c-gold-20); display: grid; gap: 4px; font-size: 13px; line-height: 1.45; }
.km__pop-einheiten strong { font-weight: 500; color: var(--c-text); }
.km__pop-zeile { margin: 0 0 6px; display: flex; gap: 10px; align-items: flex-start; }
.km__pop-zeile svg { flex: none; margin-top: 3px; color: var(--c-gold); }
.km__pop-zeile a:hover, .km__pop-zeile a:focus-visible { color: var(--c-gold); }
.km__pop-links { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--c-gold-20); display: flex; flex-wrap: wrap; gap: 8px 18px; }
.km__pop-link { display: inline-flex; align-items: center; gap: 6px; color: var(--c-gold); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.km__pop-link:hover, .km__pop-link:focus-visible { color: var(--c-text); }

/* Legende */
.km__legende { border: 1px solid var(--c-gold-20); padding: 18px 20px 10px; }
.km__legende-titel { margin: 0 0 6px; font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: var(--fs-h3); color: var(--c-gold); }
.km__liste { list-style: none; margin: 0; padding: 0; }
.km__liste li + li { border-top: 1px solid var(--c-gold-20); }
.km__eintrag {
  display: flex; align-items: center; gap: 14px; padding: 7px 8px; margin: 0 -8px;
  color: var(--c-text); text-decoration: none; transition: background var(--t);
}
.km__eintrag:hover, .km__eintrag:focus-visible, .km__eintrag.is-hl { background: color-mix(in srgb, var(--c-gold) 8%, transparent); outline: none; }
.km__eintrag:focus-visible { box-shadow: inset 0 0 0 1px var(--c-gold); }
.km__mini { flex: none; overflow: visible; }
.km__mini line { stroke: var(--c-text); stroke-width: 1.4; stroke-linecap: round; }
.km__mini circle { fill: var(--c-gold); }
.km__eintrag-text { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.km__eintrag-name { font-family: var(--f-display); font-style: italic; font-size: 18px; }
.km__eintrag:hover .km__eintrag-name, .km__eintrag.is-hl .km__eintrag-name { color: var(--c-gold); }
.km__eintrag-firma { font-size: 13px; color: var(--c-text-dim); }
.km__quelle { margin: 14px 0 0; font-size: 12px; color: var(--c-text-dim); text-align: right; }

@media (max-width: 1024px) {
  .km { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .km__seite { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
}
@media (max-width: 767px) {
  .km { margin-top: var(--space-3); }
  .km__seite { display: grid; grid-template-columns: minmax(0, 1fr); }
  .km__feld { width: 100%; }
  .km__titel { font-size: 26px; left: 16px; top: 10px; }
  .km__feld--stralsund .km__titel { font-size: 24px; }
  .km__steuer { right: 12px; top: 12px; }
  .km__knopf { width: 40px; height: 40px; }
  .km__quelle { text-align: center; }
}

/* ---- Runde 2: stadtweite Ebenen, Bündel-Fähnchen, Auswahl ------------------ */
/* Grünflächen immer leicht sichtbar, Straßen/Bahn erscheinen mit dem Zoom */
.km__basis .km__gruen-flaeche { fill: var(--c-flag-green); fill-opacity: .07; stroke: none; }
.km__basis .km__s-primaer { stroke: var(--km-linie); stroke-opacity: .1; stroke-width: 1; transition: stroke-opacity .4s ease; }
.km__basis .km__s-sekundaer, .km__basis .km__s-tertiaer { stroke: var(--km-linie); stroke-opacity: 0; stroke-width: .8; transition: stroke-opacity .4s ease; }
.km__basis .km__s-bahn { stroke: var(--c-gold); stroke-opacity: 0; stroke-width: 1; stroke-dasharray: 3 3; transition: stroke-opacity .4s ease; }
.km__feld[data-z~="z2"] .km__s-primaer { stroke-opacity: .3; stroke-width: 1.3; }
.km__feld[data-z~="z2"] .km__s-sekundaer { stroke-opacity: .2; }
.km__feld[data-z~="z2"] .km__s-bahn { stroke-opacity: .32; }
.km__feld[data-z~="z4"] .km__s-sekundaer { stroke-opacity: .28; stroke-width: 1.1; }
.km__feld[data-z~="z4"] .km__s-tertiaer { stroke-opacity: .16; }
.km__feld[data-z~="z4"] .km__s-primaer { stroke-opacity: .4; stroke-width: 1.8; }
.km__feld[data-z~="z8"] .km__s-tertiaer { stroke-opacity: .24; stroke-width: 1; }
/* Ortsteile und große Straßen beschriften */
.km__lbl--ortsteil { font-size: 9.5px; letter-spacing: .1em; fill-opacity: .5; opacity: 0; }
.km__lbl--hauptstrasse { font-size: 9.5px; font-weight: 400; letter-spacing: .04em; text-transform: none; fill-opacity: .6; opacity: 0; }
.km__feld[data-z~="z2"] .km__lbl--ortsteil { opacity: 1; }
.km__feld[data-z~="z2"] .km__lbl--bezirk { opacity: .3; }
.km__feld[data-z~="z4"] .km__lbl--hauptstrasse { opacity: 1; }
.km__feld[data-z~="z4"] .km__lbl--bezirk { opacity: 0; }
.km__feld.is-klein:not([data-z~="z4"]) .km__lbl--ortsteil { opacity: 0; }
/* Titel „Berlin“ tritt beim Zoomen zurück, damit er keine Namen verdeckt */
.km__titel { transition: opacity .35s ease; }
.km__feld.is-gezoomt .km__titel { opacity: 0; }

/* gebündelte Fähnchen: nur das wichtigste bleibt, mit Zahl */
.km__pin.is-versteckt { visibility: hidden; pointer-events: none; }
.km__zahl { display: none; pointer-events: none; }
.km__pin.is-cluster .km__zahl { display: inline; }
.km__zahl circle { fill: var(--c-gold); stroke: var(--c-bg); stroke-width: 1.2; }
.km__zahl-text { font-family: var(--f-text); font-size: 9.5px; font-weight: 700; fill: var(--c-bg); text-anchor: middle; dominant-baseline: middle; }

/* Auswahl-Popup */
.km__pop--wahl { width: min(300px, calc(100% - 24px)); padding: 18px 18px 12px; }
.km__wahl { list-style: none; margin: 8px 0 0; padding: 0; }
.km__wahl li + li { border-top: 1px solid var(--c-gold-20); }
.km__wahl-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: calc(100% + 16px); margin: 0 -8px; padding: 9px 8px;
  background: none; border: 0; color: var(--c-text); font: inherit; text-align: left; cursor: pointer; transition: background var(--t);
}
.km__wahl-btn:hover, .km__wahl-btn:focus-visible { background: color-mix(in srgb, var(--c-gold) 9%, transparent); outline: none; }
.km__wahl-btn:focus-visible { box-shadow: inset 0 0 0 1px var(--c-gold); }
.km__wahl-name { font-family: var(--f-display); font-style: italic; font-size: 19px; line-height: 1.25; color: var(--c-gold); }
.km__wahl-firma { font-size: 13px; color: var(--c-text-dim); }