/*
 * Zuständigkeitskarte (docs/zustaendigkeitskarte.md) – beide Designs, CMS- und Laravel-Seiten. Farben aus public/css/tokens.css
 * (mit Ersatzwerten, falls eine Seite die Tokens nicht lädt). Tipp-Ziele der Listen mindestens 44 px.
 */
.zk { --zk-rot: var(--ee-rot, #bd3122); --zk-rot-dunkel: var(--ee-rot-dunkel, #a52719); --zk-zart: var(--ee-rot-zart, #fdd0cb);
    --zk-text: var(--ee-text, #191919); --zk-grau: var(--ee-grau-200, #e1e1e1); --zk-grau-dunkel: var(--ee-grau-800, #5c5c5c);
    --zk-flaeche: #f6e9e7; --zk-hover: #f1b9b2;
    max-width: 46rem; margin: 1.5rem 0; text-align: left; color: var(--zk-text); font-size: inherit; }
.zk p { margin: 0 0 .75rem; }
.zk-einleitung { font-size: inherit; }
.zk-svg { display: block; width: 100%; height: auto; max-height: min(75vh, 40rem); margin: 0 auto; -webkit-tap-highlight-color: transparent; }
.zk-svg path, .zk-svg circle { vector-effect: non-scaling-stroke; }
.zk-flaeche path { fill: var(--zk-flaeche); stroke: var(--zk-rot); stroke-width: 1px; stroke-linejoin: round; cursor: pointer; transition: fill .15s; }
.zk-flaeche:hover path, .zk-flaeche:focus path { fill: var(--zk-hover); }
.zk-flaeche:focus { outline: none; }
.zk-flaeche:focus-visible path { fill: var(--zk-hover); stroke: var(--zk-text); stroke-width: 3px; }
.zk-flaeche.zk-aktiv path { fill: var(--zk-rot); }
.zk-punkt circle { fill: var(--zk-rot); stroke: #fff; stroke-width: 2px; cursor: pointer; }
.zk-punkt:hover circle, .zk-punkt.zk-aktiv circle { fill: var(--zk-text); }
.zk-beschriftung { font-family: inherit; font-size: 170px; font-weight: 700; fill: var(--zk-text); stroke: #fff; stroke-width: 3px; paint-order: stroke; stroke-linejoin: round; pointer-events: none; }
@media (max-width: 30rem) { .zk-beschriftung { font-size: 210px; } }
.zk-zeiger { min-height: 1.5em; margin: 0 0 .25rem; font-weight: 700; text-align: center; }
.zk-liste { margin: .75rem 0; }
.zk-liste > summary, .zk-bezirk > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; padding: .4rem .25rem; font-weight: 700; color: var(--zk-rot-dunkel); }
.zk-liste > summary:focus-visible, .zk-bezirk > summary:focus-visible, .zk-zurueck:focus-visible, .zk-chip:focus-visible { outline: 3px solid var(--zk-text); outline-offset: 2px; }
.zk-chips { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.zk-chips li { margin: 0; padding: 0; }
.zk-chips li::before { content: none !important; }
.zk-chip { display: inline-flex; align-items: center; min-height: 44px; padding: .35rem .9rem; border: 1px solid var(--zk-rot); border-radius: 22px; background: #fff; color: var(--zk-rot-dunkel); text-decoration: none; }
.zk-chip:hover { background: var(--zk-zart); }
.zk-kreise, .zk-stellen, .zk-bezirke { list-style: none; margin: 0; padding: 0; }
.zk-kreise > li, .zk-stellen > li, .zk-bezirke > li { margin: 0; padding: 0; border-top: 1px solid var(--zk-grau); }
.zk-kreise > li::before, .zk-stellen > li::before, .zk-bezirke > li::before { content: none !important; }
.zk-kreis-inhalt { padding: .25rem .25rem 1rem; }
.zk-stellen > li { padding: .75rem 0; }
.zk-stellen > li:first-child { border-top: 0; }
.zk-ergebnis:empty { display: none; }
.zk-ergebnis { margin: 1rem 0; padding: 1rem; border: 2px solid var(--zk-rot); border-radius: 8px; background: #fff; }
.zk-ergebnis:focus { outline: none; }
.zk-stelle-name { font-size: 1.05rem; }
.zk-wege { list-style: none; margin: 0 0 .5rem; padding: 0; }
.zk-wege li { margin: 0 0 .35rem; padding: 0; }
.zk-wege li::before { content: none !important; }
.zk-wege a, .zk-stelle a, .zk-quelle a, .zk-land a:not(.zk-chip) { color: var(--zk-rot-dunkel); text-decoration: underline; overflow-wrap: anywhere; }
.zk-etikett { font-weight: 700; }
.zk-fuer { font-style: italic; }
.zk-hinweis { padding: .5rem .75rem; border-left: 4px solid var(--zk-rot); background: var(--ee-grau-50, #f7f7f7); }
.zk-klein, .zk-quelle { font-size: .875rem; color: var(--zk-grau-dunkel); }
.zk-zurueck { min-height: 44px; margin: 0 0 .75rem; padding: .4rem 1rem; border: 1px solid var(--zk-rot); border-radius: 22px; background: #fff; color: var(--zk-rot-dunkel); font: inherit; cursor: pointer; }
.zk-zurueck:hover { background: var(--zk-zart); }
.zk-kopf:focus { outline: none; }
.zk-laden { font-style: italic; }
.zk-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) { .zk-flaeche path { transition: none; } }
@media print { .zk-svg, .zk-zurueck, .zk-zeiger { display: none; } .zk-liste[open] > summary { display: none; } }
.zk-gruppe { padding: .75rem 0; border-top: 1px solid var(--zk-grau); }
.zk-mit-js .zk-ergebnisse:not(.zk-ergebnisse-einzeln) { display: none; }
.zk-bezirk .zk-stelle { padding: 0 .25rem .75rem; }
.zk-land-bereich, .zk-ergebnis { scroll-margin-top: 6rem; }
.zk-liste > summary::before, .zk-bezirk > summary::before { content: '\25B8'; display: inline-block; width: 1.1em; flex: none; transition: transform .15s; }
.zk-liste[open] > summary::before, .zk-bezirk[open] > summary::before { transform: rotate(90deg); }
.zk-liste > summary::-webkit-details-marker, .zk-bezirk > summary::-webkit-details-marker { display: none; }
.zk-seiten-body { margin: 0; font-family: "Open Sans", Arial, sans-serif; line-height: 1.5; color: #191919; background: #fff; }
.zk-seite { max-width: 46rem; margin: 0 auto; padding: 1rem; }
.zk-seite > p > a { color: var(--ee-rot-dunkel, #a52719); }