/* K&K Einzugsgebiet-Karte
   Farben kommen aus dem Theme, sofern die Variablen dort gesetzt sind.
   Die Werte hinter dem Komma sind der Rückfall, damit die Karte auch
   ohne Theme-Variablen richtig aussieht. */
.kks-karte{
  --kks-void:var(--void,#0F1A15);
  --kks-paper:var(--paper,#FAF8F3);
  --kks-brass:var(--brass,#C9A227);
  --kks-brass-d:var(--brass-d,#7E6212);
  --kks-ink:var(--ink,#141A16);
  --kks-ink-45:rgba(20,26,22,.5);
  --kks-ink-70:rgba(20,26,22,.72);
  --kks-lite-40:rgba(240,236,226,.55);
  --kks-lite-70:rgba(240,236,226,.8);
  --kks-hair:rgba(240,236,226,.17);
  --kks-hair-d:rgba(20,26,22,.15);
  --kks-display:var(--display,Georgia,serif);
  --kks-tech:var(--tech,ui-monospace,monospace);
  color:var(--kks-ink);
}
.kks-karte *{box-sizing:border-box}

/* ── Dunkles Schema ──
   Auf dunklem Sektionshintergrund kippen die Textfarben ins Helle.
   Ein Block, der alle Textstellen mitnimmt, weil sie über Variablen laufen. */
.kks-dunkel{
  --kks-ink:var(--kks-paper,#FAF8F3);
  --kks-ink-70:rgba(240,236,226,.78);
  --kks-ink-45:rgba(240,236,226,.5);
  --kks-hair-d:rgba(240,236,226,.18);
  --kks-brass-d:var(--kks-brass,#C9A227);   /* helleres Gold, sonst zu dunkel */
}
.kks-dunkel .kks-buehne{border-color:rgba(240,236,226,.16)}
.kks-dunkel .kks-og .kks-eintrag[data-t="erweitert"]::before,
.kks-dunkel .kks-legende i[data-t="erweitert"],
.kks-dunkel .kks-bl-pt[data-t="erweitert"]{background:rgba(201,162,39,.55)}
.kks-dunkel .kks-og .kks-eintrag[data-t="anfrage"]::before,
.kks-dunkel .kks-legende i[data-t="anfrage"],
.kks-dunkel .kks-bl-pt[data-t="anfrage"]{background:transparent;border-color:rgba(201,162,39,.65)}

/* Das Panel als eigener Baustein: füllt die Breite, die ihm gegeben wird,
   und klebt nicht am Scrollrand, weil es frei platziert wird. */
.kks-nur-panel .kks-tafel{position:static;min-height:0;width:100%}

/* Layout karte: nur die Karte, die Infos kommen aus [kk_panel] */
.kks-l-karte .kks-grid{grid-template-columns:1fr}

/* Layout tafel: Karte plus Infotafel daneben */
.kks-grid{display:grid;grid-template-columns:1fr 320px;gap:clamp(20px,2.5vw,34px);align-items:start}
/* Layout solo: nur die Karte, Angaben als Tooltip */
.kks-l-solo .kks-grid{grid-template-columns:1fr}

/* ── Layout overlay ──
   Die Karte nutzt die volle Breite ihres Containers, die Infotafel liegt
   darüber statt daneben. So bleibt die Karte groß. */
.kks-l-overlay .kks-grid{grid-template-columns:1fr}
.kks-l-overlay .kks-tafel{position:absolute;z-index:4;left:20px;bottom:20px;
  width:min(300px,calc(100% - 40px));min-height:0;padding:20px 20px 18px;
  background:rgba(15,26,21,.93);border:1px solid rgba(201,162,39,.28);
  box-shadow:0 18px 44px rgba(0,0,0,.5);backdrop-filter:blur(3px)}
.kks-l-overlay .kks-tafel h3,.kks-l-overlay .kks-name{font-size:1.24rem}
.kks-l-overlay .kks-text,.kks-l-overlay .kks-hint{font-size:.9rem;line-height:1.5}
.kks-l-overlay .kks-btn{padding:11px;font-size:.66rem;margin-top:12px}
.kks-l-overlay .kks-dist{margin-top:12px;padding-top:11px}

/* Die Ortsliste ist ein eigener Baustein und steht für sich.
   Sie passt sich der Spaltenbreite an, in die sie gesetzt wird. */
.kks-nur-liste .kks-orte{margin-top:0;border-top:0;padding-top:0}
.kks-nur-liste .kks-bl-inhalt{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}

/* Tooltip auf der Karte (split und solo) */
.kks-tip{position:absolute;z-index:5;transform:translateY(-50%);pointer-events:none;
  background:rgba(15,26,21,.94);border:1px solid rgba(201,162,39,.4);
  padding:9px 13px;line-height:1.35;box-shadow:0 14px 34px rgba(0,0,0,.45);
  /* natürliche Breite, aber gedeckelt. Ohne max-content presst der Browser
     lange Ortsnamen in eine schmale Säule. */
  width:max-content;max-width:min(230px,70%);
  overflow-wrap:normal;word-break:normal;hyphens:none}
.kks-tip[hidden]{display:none}
.kks-tip-name{display:block;font-family:var(--kks-display);font-size:1.02rem;color:var(--kks-paper)}
.kks-tip-status{display:block;font-family:var(--kks-tech);font-size:.6rem;letter-spacing:.12em;
  text-transform:uppercase;margin-top:3px}
.kks-tip-status[data-t="kern"]{color:var(--kks-brass)}
.kks-tip-status[data-t="erweitert"]{color:rgba(201,162,39,.75)}
.kks-tip-status[data-t="anfrage"]{color:var(--kks-lite-40)}
.kks-tip-km{display:block;font-family:var(--kks-tech);font-size:.6rem;letter-spacing:.08em;
  color:var(--kks-lite-40);margin-top:2px}

/* Bei solo bleiben die Namen ruhig, bis man drübergeht.
   51 Beschriftungen in einer schmalen Spalte wären sonst unlesbar. */
.kks-l-solo .kks-nm{opacity:0;transition:opacity .2s}
.kks-l-solo .kks-ist-basis .kks-nm{opacity:1}
.kks-l-solo .kks-ort:hover .kks-nm,
.kks-l-solo .kks-ort.on .kks-nm,
.kks-l-solo .kks-ort.hl .kks-nm{opacity:1}
.kks-l-solo .kks-ort:focus-visible .kks-nm{opacity:1}

/* Abschluss-Link unter Karte oder Liste */
.kks-cta{display:inline-flex;align-items:center;gap:9px;margin-top:20px;
  font-family:var(--kks-tech);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--kks-brass-d);text-decoration:none;border-bottom:1px solid currentColor;
  padding-bottom:3px;transition:.2s}
.kks-cta::after{content:'\2192';transition:transform .2s}
.kks-cta:hover::after{transform:translateX(4px)}
/* Verschieben: erst ab Zoomstufe 1. Auf Stufe 0 bleibt Wischen normales Scrollen. */
.kks-buehne[data-zoom="1"],.kks-buehne[data-zoom="2"]{cursor:grab;touch-action:none}
.kks-buehne.kks-zieht{cursor:grabbing}
.kks-buehne.kks-zieht .kks-ort{cursor:grabbing}

/* Zoom-Bedienung, oben rechts auf der Karte */
.kks-zoom{position:absolute;top:14px;right:14px;z-index:6;display:flex;flex-direction:column;gap:6px}
.kks-zoom-btn{width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  background:rgba(15,26,21,.82);color:var(--kks-paper);border:1px solid rgba(201,162,39,.35);
  font-family:var(--kks-body,inherit);font-size:1.05rem;line-height:1;cursor:pointer;
  padding:0;transition:.18s;-webkit-appearance:none;appearance:none}
.kks-zoom-btn:hover:not(:disabled){background:var(--kks-brass);color:var(--kks-void);border-color:var(--kks-brass)}
.kks-zoom-btn:focus-visible{outline:2px solid var(--kks-brass);outline-offset:2px}
.kks-zoom-btn:disabled{opacity:.3;cursor:default}
/* Beim Zoomen die Namen zeigen, dort ist ja Platz */
.kks-buehne[data-zoom="1"] .kks-nm,.kks-buehne[data-zoom="2"] .kks-nm{opacity:1}

.kks-kartenspalte{min-width:0}
.kks-buehne{position:relative;background:var(--kks-void);overflow:hidden;border:1px solid rgba(20,26,22,.12)}
.kks-buehne svg{display:block;width:100%;height:auto;touch-action:manipulation}

.kks-folio{font-family:var(--kks-tech);font-size:.76rem;letter-spacing:.19em;text-transform:uppercase;
  color:var(--kks-brass-d);display:flex;align-items:center;gap:12px;margin:0 0 16px}
.kks-folio::before{content:'';width:22px;height:1px;background:currentColor}

/* ── Kartenelemente ── */
.kks-ring{fill:none;stroke:rgba(201,162,39,.16);stroke-width:1}
.kks-ring-label{font-family:var(--kks-tech);font-size:8px;letter-spacing:.14em;
  fill:rgba(201,162,39,.45);text-transform:uppercase}
.kks-fluss{fill:none;stroke:rgba(240,236,226,.14);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.kks-fluss-label{font-family:var(--kks-display);font-style:italic;font-size:9px;fill:rgba(240,236,226,.28)}
.kks-basisring{fill:none;stroke:var(--kks-brass);stroke-width:1;opacity:.5}

.kks-ort{cursor:pointer;outline:none;transition:opacity .28s}
.kks-pt{transition:r .18s cubic-bezier(.2,.7,.3,1),fill .18s}
.kks-halo{fill:none;stroke:var(--kks-brass);stroke-width:1;opacity:0;transition:opacity .2s}
.kks-nm{font-size:8.5px;fill:rgba(240,236,226,.62);paint-order:stroke;
  stroke:var(--kks-void);stroke-width:2.4px;stroke-linejoin:round;
  transition:fill .18s,font-size .18s;pointer-events:none}

.kks-ort[data-t="kern"] .kks-pt{fill:var(--kks-brass)}
.kks-ort[data-t="erweitert"] .kks-pt{fill:rgba(201,162,39,.55)}
.kks-ort[data-t="anfrage"] .kks-pt{fill:none;stroke:rgba(201,162,39,.6);stroke-width:1.1}
.kks-ist-basis .kks-pt{fill:#fff}
.kks-ist-basis .kks-nm{fill:#fff;font-weight:600}

.kks-ort:hover .kks-pt,.kks-ort:focus-visible .kks-pt,.kks-ort.on .kks-pt{fill:#fff;stroke:#fff}
.kks-ort:hover .kks-nm,.kks-ort:focus-visible .kks-nm,.kks-ort.on .kks-nm{fill:#fff;font-size:9.5px}
.kks-ort:hover .kks-halo,.kks-ort:focus-visible .kks-halo,.kks-ort.on .kks-halo{opacity:1}
.kks-ort:focus-visible .kks-halo{stroke-dasharray:2 2}

/* Fokus auf eine Gruppe: der Rest tritt zurück */
.kks-fokus .kks-ort{opacity:.14}
.kks-fokus .kks-ort.hl{opacity:1}
/* Der ausgewählte Ort bleibt auch dann sichtbar, wenn er nicht zur Gruppe gehört */
.kks-fokus .kks-ort.on{opacity:1}
.kks-fokus .kks-ort.hl .kks-nm{fill:#fff;font-size:9.5px}
.kks-fokus .kks-ort.hl .kks-halo{opacity:.55}
.kks-fokus .kks-fluss,.kks-fokus .kks-ring{opacity:.4;transition:opacity .28s}
.kks-fokus .kks-ring-label,.kks-fokus .kks-fluss-label{opacity:.25;transition:opacity .28s}

/* ── Infotafel ── */
.kks-tafel{background:var(--kks-void);color:var(--kks-paper);padding:26px 24px;
  position:sticky;top:24px;min-height:300px;display:flex;flex-direction:column}
/* display:flex würde das hidden-Attribut sonst überstimmen */
.kks-tafel[hidden]{display:none}

/* ── Invertiertes Panel ──
   Helle Karte mit grüner Kontur statt dunkler Fläche. Über einer dunklen
   Karte hebt sich das deutlich stärker ab. */
.kks-invers .kks-tafel{background:var(--kks-paper);color:var(--kks-ink-dunkel,#141A16);
  border:1px solid var(--kks-void);box-shadow:0 18px 44px rgba(20,26,22,.22)}
.kks-invers .kks-folio{color:var(--kks-void)}
.kks-invers .kks-tafel h3,.kks-invers .kks-name{color:var(--kks-void)}
.kks-invers .kks-reg{color:var(--kks-brass-d,#7E6212)}
.kks-invers .kks-text,.kks-invers .kks-hint{color:rgba(20,26,22,.75)}
.kks-invers .kks-dist{color:rgba(20,26,22,.5);border-top-color:rgba(20,26,22,.15)}
.kks-invers .kks-status{border-color:rgba(20,26,22,.2)}
.kks-invers .kks-status[data-t="kern"]{color:#7E6212;border-color:rgba(126,98,18,.5)}
.kks-invers .kks-status[data-t="kern"]::before{background:#7E6212}
.kks-invers .kks-status[data-t="erweitert"]{color:rgba(126,98,18,.8)}
.kks-invers .kks-status[data-t="erweitert"]::before{background:rgba(126,98,18,.5)}
.kks-invers .kks-status[data-t="anfrage"]{color:rgba(20,26,22,.5)}
.kks-invers .kks-status[data-t="anfrage"]::before{background:transparent;border:1px solid rgba(126,98,18,.6)}
.kks-invers .kks-zu{color:rgba(20,26,22,.45)}
.kks-invers .kks-zu:hover{color:var(--kks-void)}
.kks-invers .kks-btn{background:var(--kks-void);color:var(--kks-paper)}
.kks-invers .kks-btn:hover{background:var(--kks-brass,#C9A227);color:var(--kks-void)}
.kks-invers .kks-btn-mehr{background:transparent;color:var(--kks-void);border:1px solid var(--kks-void)}
.kks-invers .kks-btn-mehr:hover{background:var(--kks-void);color:var(--kks-paper)}
.kks-invers .kks-mehr a{color:var(--kks-void)}
.kks-tafel .kks-folio{color:var(--kks-brass)}
.kks-tafel h3,.kks-name{font-family:var(--kks-display);font-size:1.5rem;font-weight:500;line-height:1.2;margin:0 0 4px}
/* Container: erben die Spaltenrichtung, damit Text und Button unten sauber sitzen */
.kks-leer,.kks-inhalt{display:flex;flex-direction:column;flex:1;min-height:0}
.kks-inhalt[hidden],.kks-leer[hidden]{display:none}
.kks-reg{font-family:var(--kks-tech);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--kks-brass);margin:0 0 16px}
.kks-status{display:inline-flex;align-items:center;gap:8px;font-family:var(--kks-tech);font-size:.66rem;
  letter-spacing:.12em;text-transform:uppercase;padding:5px 11px;border:1px solid var(--kks-hair);
  margin-bottom:14px;align-self:flex-start}
.kks-status::before{content:'';width:7px;height:7px;border-radius:50%}
.kks-status[data-t="kern"]{color:var(--kks-brass);border-color:rgba(201,162,39,.45)}
.kks-status[data-t="kern"]::before{background:var(--kks-brass)}
.kks-status[data-t="erweitert"]{color:rgba(201,162,39,.8)}
.kks-status[data-t="erweitert"]::before{background:rgba(201,162,39,.55)}
.kks-status[data-t="anfrage"]{color:var(--kks-lite-40)}
.kks-status[data-t="anfrage"]::before{background:transparent;border:1px solid rgba(201,162,39,.6)}
.kks-text{font-size:.98rem;line-height:1.62;color:var(--kks-lite-70);flex:1;margin:0}
.kks-hint{font-size:.95rem;color:var(--kks-lite-40);line-height:1.6;flex:1;margin:0}
.kks-dist{font-family:var(--kks-tech);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--kks-lite-40);margin:16px 0 0;padding-top:14px;border-top:1px solid var(--kks-hair)}
.kks-mehr{margin:10px 0 0}
.kks-mehr a{color:var(--kks-brass);font-size:.93rem}
/* Aktionen: „Mehr über …“ erscheint nur, wenn der Ort eine eigene Seite hat */
.kks-aktionen{display:flex;flex-direction:column;gap:9px;margin-top:16px}
.kks-btn{display:block;text-align:center;background:var(--kks-brass);color:var(--kks-void);padding:13px;
  font-family:var(--kks-tech);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;
  text-decoration:none;transition:.2s}
.kks-btn:hover{background:var(--kks-paper);color:var(--kks-void)}
.kks-btn[hidden]{display:none}
.kks-btn-mehr{background:transparent;color:var(--kks-brass);border:1px solid rgba(201,162,39,.5)}
.kks-btn-mehr:hover{background:var(--kks-brass);color:var(--kks-void);border-color:var(--kks-brass)}

/* Auswahl aufheben */
.kks-inhalt{position:relative}
.kks-zu{position:absolute;top:-4px;right:-4px;width:28px;height:28px;background:none;border:0;
  color:var(--kks-lite-40);font-size:1.2rem;line-height:1;cursor:pointer;padding:0;transition:.18s}
.kks-zu:hover{color:var(--kks-paper)}
.kks-zu:focus-visible{outline:1px solid var(--kks-brass);outline-offset:2px}

/* ── Legende ── */
.kks-legende{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:18px;
  font-family:var(--kks-tech);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--kks-ink-45)}
.kks-legende span{display:inline-flex;align-items:center;gap:8px}
.kks-legende i{width:9px;height:9px;border-radius:50%;display:block}
.kks-legende i[data-t="kern"]{background:var(--kks-brass-d)}
.kks-legende i[data-t="erweitert"]{background:rgba(126,98,18,.5)}
.kks-legende i[data-t="anfrage"]{background:transparent;border:1px solid rgba(126,98,18,.7)}

/* ── Accordion ── */
.kks-orte{margin-top:clamp(30px,4vw,48px);border-top:1px solid var(--kks-hair-d);padding-top:clamp(22px,3vw,32px)}
.kks-accordion{margin-top:4px}
.kks-bl{border-bottom:1px solid var(--kks-hair-d)}
.kks-bl summary{display:flex;align-items:center;gap:14px;padding:17px 34px 17px 0;cursor:pointer;
  list-style:none;position:relative}
.kks-bl summary::-webkit-details-marker{display:none}
.kks-bl summary:hover .kks-bl-name{color:var(--kks-brass-d)}
.kks-bl summary:focus-visible{outline:1px dashed var(--kks-brass-d);outline-offset:3px}
.kks-bl-pt{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.kks-bl-pt[data-t="kern"]{background:var(--kks-brass-d)}
.kks-bl-pt[data-t="erweitert"]{background:rgba(126,98,18,.5)}
.kks-bl-pt[data-t="anfrage"]{background:transparent;border:1px solid rgba(126,98,18,.7)}
.kks-bl-name{font-family:var(--kks-display);font-size:1.24rem;transition:color .2s}
.kks-bl-zahl{font-family:var(--kks-tech);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--kks-ink-45);margin-left:auto;padding-right:6px}
.kks-bl summary::after{content:'';position:absolute;right:6px;top:50%;width:12px;height:1px;background:var(--kks-brass-d)}
.kks-bl summary::before{content:'';position:absolute;right:11px;top:50%;width:1px;height:12px;
  background:var(--kks-brass-d);transform:translateY(-50%);transition:.22s}
.kks-bl[open] summary::before{opacity:0}

.kks-bl-inhalt{display:grid;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:22px 30px;padding:4px 0 26px}
.kks-og h4{font-family:var(--kks-tech);font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--kks-brass-d);margin:0 0 9px;font-weight:400;cursor:pointer;display:inline-block;
  border-bottom:1px solid transparent;transition:.18s;outline:none}
.kks-og h4:hover,.kks-og h4:focus-visible{color:var(--kks-ink);border-bottom-color:var(--kks-brass-d)}
.kks-og ul{list-style:none;margin:0;padding:0}
.kks-og li{padding-block:2px}
.kks-og .kks-eintrag{background:none;border:0;padding:0;font:inherit;font-size:.97rem;color:var(--kks-ink-70);
  text-decoration:none;
  cursor:pointer;text-align:left;border-bottom:1px solid transparent;transition:.16s;
  display:inline-flex;align-items:center;gap:8px}
.kks-og .kks-eintrag::before{content:'';width:6px;height:6px;border-radius:50%;flex-shrink:0}
.kks-og .kks-eintrag[data-t="kern"]::before{background:var(--kks-brass-d)}
.kks-og .kks-eintrag[data-t="erweitert"]::before{background:rgba(126,98,18,.45)}
.kks-og .kks-eintrag[data-t="anfrage"]::before{background:transparent;border:1px solid rgba(126,98,18,.6)}
.kks-og .kks-eintrag:hover,.kks-og .kks-eintrag:focus-visible{color:var(--kks-brass-d);border-bottom-color:var(--kks-brass-d);outline:none}
.kks-og .kks-b-basis{font-weight:600;color:var(--kks-ink)}
/* Der ausgewählte Ort bleibt in der Liste sichtbar markiert */
.kks-og .kks-aktiv{color:var(--kks-brass-d);border-bottom-color:var(--kks-brass-d);font-weight:600}
.kks-og .kks-aktiv::before{box-shadow:0 0 0 3px rgba(201,162,39,.25)}

.kks-noscript{columns:3;font-size:.95rem}

@media(max-width:900px){
  .kks-grid{grid-template-columns:1fr}
  .kks-tafel{position:static;min-height:0}
  /* Overlay wird auf kleinen Schirmen zur normalen Box unter der Karte,
     sonst deckt sie die halbe Karte zu. */
  .kks-l-overlay .kks-tafel{position:static;width:auto;margin-top:14px;backdrop-filter:none}
}
@media(max-width:600px){
  .kks-nm{font-size:0}
  .kks-ort.on .kks-nm,.kks-ort:focus-visible .kks-nm{font-size:11px}
  .kks-noscript{columns:2}
}