/* DOSIGNY — Seitentyp Stadt: Karte mit eigener Strecke, Textblöcke aus der Bestands-Datenbasis in neuer Form.
 * Erstellt durch Dominik Baurhenn - DOSIGNY — https://www.dosigny.com */
.dz-stkopf .dz-fallkopf__titel { max-width: 24ch; text-wrap: balance; hyphens: none; }
.dz-stkopf .dz-fallkopf__lead { max-width: 60ch; }
.dz-stkopf .dz-fallkopf__media { -webkit-mask-image: linear-gradient(#000 72%, transparent); mask-image: linear-gradient(#000 72%, transparent); }
@media (max-width: 480px) { .dz-stkopf .dz-fallkopf__titel { font-size: clamp(1.3rem, 7vw, 2.4rem); max-width: none; } }
/* Lange Ortsnamen wie Unterschleißheim passen so ungetrennt in jede Spalte */
.dz-faq .dz-h-gross, .dz-fallanfrage .dz-h-gross { font-size: clamp(1.15rem, 2.9vw, 2.8rem); hyphens: none; }
@media (max-width: 960px) { .dz-faq .dz-h-gross, .dz-fallanfrage .dz-h-gross { font-size: clamp(1.15rem, 5.4vw, 2.6rem); } }

/* Karte */
.dz-strecke .dz-werk__rahmen { padding: 0; overflow: hidden; }
.dz-strecke .w-svg { display: block; overflow: hidden; aspect-ratio: 640 / 830; max-height: calc(100svh - 12rem); }
.dz-strecke.is-pin .w-svg { aspect-ratio: auto; height: calc(100svh - 12rem); }
.ka text { font-family: var(--f-text); font-weight: 600; fill: rgba(var(--c-hell-rgb),.9); paint-order: stroke; stroke: var(--c-nacht); stroke-width: .25em; stroke-linejoin: round; }
.ka .ka-stadt { font-family: var(--f-display); font-weight: 800; fill: var(--c-weiss); }
.ka-punkt { fill: rgba(var(--c-hell-rgb),.55); }
.ka-heim { fill: var(--c-violett); }
.ka-kern { fill: var(--c-tuerkis); }
.ka-ring { fill: none; stroke: var(--c-tuerkis); stroke-width: .12em; opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
.dz-werk.is-fertig .ka-ring, .dz-werk:not(.is-pin) .ka-ring { animation: dz-ka-ring 2.4s ease-out infinite; }
.dz-werk.is-fertig .ka-ring--2, .dz-werk:not(.is-pin) .ka-ring--2 { animation-delay: 1.2s; }
@keyframes dz-ka-ring { 0% { transform: scale(.3); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
.dz-ktafel { position: absolute; left: clamp(.5rem, 1.2vw, 1rem); top: clamp(.5rem, 1.2vw, 1rem); display: grid; gap: .1rem; margin: 0; padding: .55rem .85rem; border: 1px solid rgba(var(--c-tuerkis-rgb),.35); border-radius: 12px; background: rgba(var(--c-nacht-rgb),.86); font: 500 var(--fs-mini)/1.3 var(--f-mono); color: rgba(var(--c-hell-rgb),.85); }
.dz-ktafel b { font: var(--fw-h) var(--fs-gross)/1.1 var(--f-display); color: var(--c-tuerkis); font-variant-numeric: lining-nums; white-space: nowrap; }
.dz-ktafel small { font-size: var(--fs-mini); color: var(--c-hell); }
@media (max-width: 1023px) {
  .dz-strecke.is-pin .w-svg { height: 42svh; max-height: 42svh; }
  .dz-ktafel { padding: .3rem .55rem; font-size: .62rem; }
  .dz-ktafel b { font-size: .95rem; }
  .dz-ktafel small { font-size: .62rem; }
}
@media (prefers-reduced-motion: reduce) { .ka-ring { animation: none !important; } }

/* Text */
.dz-stzwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: var(--a-fluss-l); align-items: start; }
.dz-stzwei .k-h2 { margin-top: var(--a-fluss-m); }
.dz-stzwei .dz-linhalt h3 { margin-top: var(--a-fluss-m); font: var(--fw-h) var(--fs-h4)/var(--lh-titel) var(--f-display); }
.dz-labschnitt .k-h2, .dz-gs .k-h2 { font-size: clamp(1.15rem, 5.6vw, min(var(--fs-h2), 2.7rem)); text-wrap: balance; hyphens: none; overflow-wrap: normal; margin-bottom: var(--a-fluss-s); }
.dz-stblick { position: sticky; top: clamp(5rem, 11svh, 6.5rem); display: grid; gap: var(--a-4); padding: var(--a-5); border: 1px solid rgba(var(--c-weiss-rgb),.1); border-radius: 18px; background: var(--c-flaeche); }
.dz-stblick__knopf { display: flex; justify-content: center; width: 100%; padding-inline: var(--a-3); font-size: var(--fs-klein); text-align: center; white-space: normal; }
.geo-quick-answer__title { margin: 0 0 var(--a-3); font: 600 var(--fs-mini)/1.3 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--c-tuerkis); }
.geo-quick-answer__list { display: grid; gap: var(--a-2); margin: 0; font-size: var(--fs-klein); line-height: 1.45; }
.geo-quick-answer__list dt { font-weight: 600; color: var(--c-weiss); }
.geo-quick-answer__list dd { margin: -.2rem 0 var(--a-1); color: rgba(var(--c-hell-rgb),.82); }
.geo-definition-lead { font-size: var(--fs-gross, 1.1rem); line-height: 1.6; }
.geo-definition-lead strong { color: var(--c-weiss); }
.geo-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: var(--a-3); margin-top: var(--a-fluss-m); }
.geo-stats__item { display: grid; gap: var(--a-1); padding: var(--a-4); border: 1px solid rgba(var(--c-weiss-rgb),.1); border-radius: 14px; }
.geo-stats__number { font: var(--fw-h) var(--fs-h4)/1.15 var(--f-display); color: var(--c-tuerkis); font-variant-numeric: lining-nums; }
.geo-stats__label { font-size: var(--fs-klein); color: rgba(var(--c-hell-rgb),.82); }
.geo-stats__source { font: 500 var(--fs-mini)/1.3 var(--f-mono); font-style: normal; color: rgba(var(--c-hell-rgb),.6); }
.dz-stleist { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: var(--a-4); margin-block: var(--a-fluss-m); }
.dz-stleist h3 { margin: 0 0 var(--a-2); hyphens: none; }
.dz-stleist h3 a { color: inherit; text-decoration: underline; text-decoration-color: rgba(var(--c-tuerkis-rgb),.5); text-underline-offset: .2em; }
.dz-stleist h3 a:hover { color: var(--c-tuerkis); }
.dz-stpreis { margin: var(--a-2) 0 0; font-weight: 700; color: var(--c-tuerkis); }
.dz-stvergleich caption { padding: var(--a-3) var(--a-4); font-weight: 600; text-align: left; }
.dz-stvergleich td:nth-child(2) { color: var(--c-tuerkis); font-weight: 500; }
.dz-stgesucht { display: grid; gap: var(--a-2); margin: var(--a-4) 0 0; }
.dz-stgesucht dt { margin-top: var(--a-3); font-weight: 600; color: var(--c-weiss); }
.dz-stgesucht dd { margin: 0; }

.dz-gs > .k-wrap.dz-linhalt, .dz-labschnitt > .k-wrap.dz-linhalt { max-width: none; }
/* Großstadt-Leistung: vorhandene Inhaltsblöcke */
.dz-gs { padding-block: calc(var(--raum) * .5); }
.dz-gs--alt { background: rgba(var(--c-weiss-rgb),.02); }
.dz-gs .lead { font-size: var(--fs-gross, 1.1rem); }
.gs-branchen-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: var(--a-4); margin-top: var(--a-fluss-s); }
.gs-branche { padding: var(--a-5); border: 1px solid rgba(var(--c-weiss-rgb),.1); border-radius: 14px; background: var(--c-flaeche); }
.gs-branche h3 { margin: 0 0 var(--a-2); font: var(--fw-h) var(--fs-h5, 1.1rem)/var(--lh-titel) var(--f-display); hyphens: none; }
.gs-branche p { margin: 0; font-size: var(--fs-klein); line-height: 1.55; color: rgba(var(--c-hell-rgb),.85); }

/* Übersicht Großstädte */
.dz-hubkarte { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--a-fluss-l); align-items: start; }
.dz-hubkarte__karte { position: sticky; top: clamp(5rem, 11svh, 6.5rem); }
.dz-hubkarte__karte svg { display: block; width: 100%; max-height: calc(100svh - 7.5rem); }
.dz-hubliste { display: grid; gap: var(--a-3); margin: 0; padding: 0; list-style: none; counter-reset: rang; }
.dz-hubstadt { padding: var(--a-5); border: 1px solid rgba(var(--c-weiss-rgb),.1); border-radius: 16px; background: var(--c-flaeche); transition: border-color .25s; }
.dz-hubstadt.is-aktiv, .dz-hubstadt:hover, .dz-hubstadt:focus-within { border-color: var(--c-tuerkis); }
.dz-hubstadt h3 { margin: 0; font: var(--fw-h) var(--fs-h4)/var(--lh-titel) var(--f-display); }
.dz-hubstadt h3 b { margin-right: var(--a-2); font: 600 var(--fs-klein)/1 var(--f-mono); color: var(--c-tuerkis); }
.dz-hubstadt h3 a { color: inherit; }
.dz-hubstadt__zeile { margin: var(--a-1) 0 var(--a-3); font-weight: 600; color: var(--c-tuerkis); font-size: var(--fs-klein); }
.dz-hubstadt p { font-size: var(--fs-klein); line-height: 1.55; color: rgba(var(--c-hell-rgb),.85); }
.dz-hubstadt ul { display: flex; flex-wrap: wrap; gap: var(--a-2); margin: var(--a-3) 0 0; padding: 0; list-style: none; }
.dz-hubstadt li a { text-decoration: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--a-3); border: 1px solid rgba(var(--c-weiss-rgb),.2); border-radius: 99px; font-size: var(--fs-mini); color: var(--c-hell); }
.dz-hubstadt li a:hover { border-color: var(--c-tuerkis); color: var(--c-tuerkis); }
.ka-hubpunkt { fill: rgba(var(--c-hell-rgb),.5); transition: fill .2s; }
.ka-hubpunkt:hover, a:focus-visible .ka-hubpunkt { fill: var(--c-tuerkis); }
.ka-gross { fill: var(--c-tuerkis); }
.ka-hubbogen { fill: none; stroke: var(--c-tuerkis); stroke-width: 1.6; stroke-linecap: round; opacity: .35; transition: stroke-dashoffset .7s ease, opacity .3s; }
.is-bereit .ka-hubbogen { stroke-dashoffset: var(--laenge); opacity: 0; }
.is-bereit .ka-hubbogen.is-aktiv { stroke-dashoffset: 0; opacity: 1; }
.ka-hubname { font-family: var(--f-text); font-size: 15px; font-weight: 600; fill: var(--c-weiss); paint-order: stroke; stroke: var(--c-nacht); stroke-width: 4px; stroke-linejoin: round; }
@media (max-width: 960px) {
  .dz-stzwei, .dz-hubkarte { grid-template-columns: minmax(0, 1fr); }
  .dz-stblick, .dz-hubkarte__karte { position: static; }
  .dz-hubkarte__karte svg { max-height: 62svh; }
}
@media (prefers-reduced-motion: reduce) { .ka-hubbogen { transition: none; } }

/* Großstädte: Wirtschaftsraum mit Branchen, Stadtteilen und Leistungen im Detail (03.11.2026) */
.dz-stmarkt__raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--a-5); margin-block: var(--a-fluss-s) var(--a-fluss-m); }
.dz-stmarkt__feld { padding: var(--a-5); border: 1px solid rgba(var(--c-hell-rgb), .12); border-radius: 14px; background: rgba(var(--c-hell-rgb), .03); }
.dz-stmarkt__feld h3, .dz-stmarkt__unter { margin: 0 0 var(--a-3); hyphens: none; }
.dz-stmarkt__chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.dz-stmarkt__chips li { padding: .4rem .8rem; border: 1px solid rgba(var(--c-tuerkis-rgb), .4); border-radius: 99px; background: rgba(var(--c-tuerkis-rgb), .07); font-size: var(--fs-klein); line-height: 1.3; transition: background .3s, border-color .3s, transform .3s; }
/* Chips sind keine Links → kein Anheben beim Überfahren (Prüfung 03.11.); Auftritt über data-ps="reveal" */
.dz-stmarkt__chips--orte { margin-bottom: var(--a-4); }
.dz-stmarkt__chips--orte li { border-color: rgba(var(--c-hell-rgb), .22); background: rgba(var(--c-hell-rgb), .05); }
.dz-stmarkt__feld { position: relative; overflow: hidden; }
.dz-stmarkt__feld::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, transparent, var(--c-tuerkis), transparent); opacity: .7; }
.dz-stleist--vier .dz-l-karte { display: flex; flex-direction: column; }
.dz-stleist--vier .dz-stpreis { margin-top: auto; }
.dz-stleist--vier { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .dz-stmarkt__chips li { transition: none; }  }