/* Landkarte der Konzepte (landkarte.html). Wird nach style.css und design.css geladen.
   Alle Klassen beginnen mit lk-, damit nichts mit den übrigen Seiten kollidiert. */
:root { --lk-rand: clamp(1rem, 2.5vw, 1.8rem); --lk-L: .6; --lk-C: .13; --lk-huelle-a: 9%; --lk-huelle-s: 28%; --lk-netz: .07; --lk-rel: #7c8499; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --lk-L: .78; --lk-C: .12; --lk-huelle-a: 10%; --lk-huelle-s: 30%; --lk-netz: .09; --lk-rel: #8d97b0; } }
:root[data-theme="dark"] { --lk-L: .78; --lk-C: .12; --lk-huelle-a: 10%; --lk-huelle-s: 30%; --lk-netz: .09; --lk-rel: #8d97b0; }

.lk-seite { padding: clamp(1rem, 2.5vw, 2rem) clamp(1rem, 3vw, 2.5rem) 2rem; }
/* Ein gemeinsamer Kasten: oben „Was ist dir wichtig?“, darunter die Karte */
.lk-rahmen { scroll-margin-top: calc(var(--kopf-h) + 1rem); overflow: hidden; border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); border-radius: 22px; background: var(--glas); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--shadow); }
.lk-rahmen .wolke, .lk-rahmen .wolke-klappe { margin: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* Ohne Trennlinie über „Weitere Themen“; der Abstand entspricht dem zwischen den Gruppen */
.lk-rahmen .wolke-weitere { margin-top: 1.1rem; padding-top: 0; border-top: 0; }
.lk-noscript { margin: 0 0 1rem; color: var(--muted); }

/* Kasten der Karte */
.lk-karte { position: relative; height: calc(100dvh - var(--kopf-h) - 2rem); min-height: 520px; overflow: hidden; border-top: 1px solid var(--line); }
.lk-svg { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.lk-svg.lk-zieht { cursor: grabbing; }

/* Bedienelemente auf der Karte */
/* Die Kästen auf der Karte beginnen auf derselben Flucht wie die Knöpfe von „Was ist dir wichtig?“ (Innenabstand von .wolke) */
.lk-leiste { position: absolute; top: 16px; left: var(--lk-rand); z-index: 4; display: flex; flex-direction: column; gap: 10px; width: var(--lk-spalte, min(350px, calc(100% - 2 * var(--lk-rand)))); }
.lk-einleitung, .lk-legende, .lk-filterstand { background: color-mix(in srgb, var(--surface-raised) 88%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.lk-einleitung { padding: 14px 16px; font-size: .86rem; line-height: 1.5; color: var(--muted); }
.lk-zahlen { display: flex; gap: 18px; margin-bottom: 8px; }
.lk-zahl { font-size: 1.4rem; font-weight: 750; color: var(--ink); line-height: 1.1; }
.lk-zahl small { display: block; font-size: .74rem; font-weight: 500; color: var(--muted); }
.lk-einleitung p { margin: 0; }
.lk-suche { position: relative; }
.lk-suche input { width: 100%; height: 44px; padding: 0 14px 0 40px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-raised); color: var(--ink); font: inherit; font-size: .92rem; box-shadow: var(--shadow); outline: none; }
.lk-suche input:focus { border-color: var(--accent); }
.lk-suche input { padding-right: 44px; }
.lk-suche input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.lk-suche .suche-leeren[hidden] { display: none; }
.lk-suche > svg { position: absolute; left: 13px; top: 13px; width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
.lk-treffer { position: absolute; top: 48px; left: 0; right: 0; z-index: 6; overflow: hidden; background: var(--surface-raised); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.lk-treffer button { display: block; width: 100%; padding: 8px 14px; border: 0; background: none; color: var(--ink); font: inherit; font-size: .9rem; font-weight: 600; text-align: left; cursor: pointer; }
.lk-treffer button:hover, .lk-treffer button.lk-aktiv { background: var(--accent-soft); }
.lk-treffer small { display: block; color: var(--muted); font-size: .78rem; font-weight: 450; }
.lk-filterstand { padding: 8px 12px; font-size: .84rem; color: var(--ink); }
.lk-filterstand button { margin-left: .3rem; padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 650; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.lk-legende { position: absolute; left: var(--lk-rand); bottom: 16px; box-sizing: border-box; width: var(--lk-spalte, auto); z-index: 4; display: flex; flex-direction: column; gap: 5px; padding: 10px 14px; font-size: .78rem; color: var(--muted); }
.lk-legende span { display: flex; align-items: center; gap: 8px; }
.lk-strich { display: inline-block; flex: none; width: 24px; height: 0; border-top: 2.5px solid; }
.lk-strich-alt { border-color: var(--coral); }
.lk-strich-ein { border-color: color-mix(in srgb, var(--coral) 55%, transparent); }
.lk-strich-rel { border-color: var(--lk-rel); }
.lk-werkzeuge { position: absolute; right: var(--lk-rand); bottom: 16px; z-index: 4; display: flex; flex-direction: column; gap: 6px; transition: right .35s cubic-bezier(.2, .8, .2, 1); }
.lk-werkzeuge-oben { position: absolute; right: var(--lk-rand); top: 16px; z-index: 4; display: flex; gap: 8px; transition: right .35s cubic-bezier(.2, .8, .2, 1); }
.lk-knopf { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 38px; height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-raised); color: var(--ink); font: inherit; font-size: .88rem; font-weight: 600; white-space: nowrap; cursor: pointer; box-shadow: var(--shadow); }
.lk-knopf:hover { border-color: var(--accent); }
.lk-knopf[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.lk-knopf svg { width: 18px; height: 18px; }
.lk-zoomtipp { position: absolute; left: 50%; top: 50%; z-index: 7; transform: translate(-50%, -50%); padding: .7rem 1.1rem; border-radius: 12px; background: color-mix(in srgb, var(--ink) 82%, transparent); color: var(--bg); font-size: .92rem; font-weight: 600; pointer-events: none; opacity: 0; transition: opacity .2s; }
.lk-zoomtipp.lk-an { opacity: 1; }
.lk-hinweis { position: absolute; z-index: 8; max-width: 280px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-raised); font-size: .82rem; box-shadow: var(--shadow); pointer-events: none; opacity: 0; transition: opacity .12s; }
.lk-hinweis.lk-an { opacity: 1; }
.lk-hinweis b { display: block; color: var(--ink); }
.lk-hinweis span { color: var(--muted); font-size: .76rem; }

/* Zeichnung */
.lk-huelle { opacity: 0; transition: opacity .8s; }
.lk-huelle.lk-sichtbar { opacity: 1; }
.lk-huelle circle { fill: oklch(var(--lk-L) var(--lk-C) var(--h) / var(--lk-huelle-a)); stroke: oklch(var(--lk-L) var(--lk-C) var(--h) / var(--lk-huelle-s)); stroke-width: 1.2; vector-effect: non-scaling-stroke; transition: opacity .4s; }
.lk-huelle text { fill: oklch(calc(var(--lk-L) - .08) var(--lk-C) var(--h)); font-size: calc(15px / var(--k, 1)); font-weight: 700; text-anchor: middle; paint-order: stroke; stroke: var(--bg); stroke-width: calc(5px / var(--k, 1)); stroke-linejoin: round; pointer-events: none; transition: opacity .4s; }
.lk-kanten-alle path { fill: none; stroke: var(--ink); stroke-opacity: var(--lk-netz); stroke-width: 1; vector-effect: non-scaling-stroke; transition: stroke-opacity .4s; }
.lk-ohne-netz .lk-kanten-alle path { stroke-opacity: 0; }
/* Die Linien erscheinen erst mit den Punkten */
.lk-kanten-alle { opacity: 0; transition: opacity 1s .5s; }
.lk-gestartet .lk-kanten-alle { opacity: 1; }
.lk-n { cursor: pointer; transition: transform 1.1s cubic-bezier(.2, .8, .2, 1), opacity .35s; }
.lk-fokus .lk-n { transition: transform .75s cubic-bezier(.2, .8, .2, 1), opacity .35s; }
.lk-punkt { fill: oklch(var(--lk-L) var(--lk-C) var(--h)); stroke: var(--bg); stroke-width: 1.6; vector-effect: non-scaling-stroke; transition: r .25s; }
.lk-ring { fill: none; stroke: var(--accent); stroke-width: 2.5; opacity: 0; vector-effect: non-scaling-stroke; }
.lk-n text { fill: var(--ink); font-size: calc(11.5px / var(--k, 1)); font-weight: 560; paint-order: stroke; stroke: var(--bg); stroke-width: calc(4px / var(--k, 1)); stroke-linejoin: round; pointer-events: none; opacity: 0; transition: opacity .25s; }
/* Sichtbare Namen lassen sich anklicken wie der Punkt selbst */
.lk-n.lk-text-an text { opacity: 1; cursor: pointer; pointer-events: auto; pointer-events: bounding-box; }
.lk-n.lk-text-an:hover text { fill: var(--accent); }
.lk-fokus .lk-huelle circle { opacity: .35; }
.lk-fokus .lk-huelle text { opacity: .15; }
.lk-fokus .lk-kanten-alle path { stroke-opacity: 0; }
.lk-fokus .lk-n { opacity: .12; }
.lk-fokus .lk-n.lk-nb, .lk-fokus .lk-n.lk-sel { opacity: 1; }
.lk-n.lk-sel text { display: none; }
.lk-n.lk-sel .lk-ring { opacity: 1; animation: lk-puls 1.8s ease-out infinite; }
@keyframes lk-puls { 0% { stroke-opacity: .9; stroke-width: 2.5; } 100% { stroke-opacity: 0; stroke-width: 12; } }
.lk-gefiltert .lk-kanten-alle path { stroke-opacity: 0; }
.lk-gefiltert .lk-kanten-alle path.lk-passt { stroke-opacity: .55; stroke-width: 1.4; }
.lk-gefiltert .lk-kanten-alle path.lk-passt.lk-k-alt { stroke: var(--coral); }
.lk-gefiltert .lk-kanten-alle path.lk-passt.lk-k-rel { stroke: var(--lk-rel); }
.lk-fokus .lk-kanten-alle path.lk-passt, .lk-ohne-netz .lk-kanten-alle path.lk-passt { stroke-opacity: 0; }
.lk-gefiltert .lk-n.lk-aus { opacity: .08; }
/* Beim gewählten Konzept bleiben alle Nachbarn lesbar; die nicht zur Auswahl passen, etwas blasser */
.lk-fokus .lk-n.lk-nb.lk-aus { opacity: .5; }
.lk-fokus .lk-n.lk-sel.lk-aus { opacity: 1; }
.lk-kanten-sel path { fill: none; stroke-width: 2.2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.lk-kanten-sel path.lk-alt { stroke: var(--coral); }
.lk-kanten-sel path.lk-ein { stroke: var(--coral); stroke-opacity: .55; }
.lk-kanten-sel path.lk-rel { stroke: var(--lk-rel); stroke-opacity: .85; }
.lk-kanten-sel path.lk-zeichnen { animation: lk-zeichnen .7s cubic-bezier(.3, .7, .3, 1) forwards; }
.lk-kanten-sel path.lk-hervor { stroke-width: 4; }
@keyframes lk-zeichnen { to { stroke-dashoffset: 0; } }

/* Schild unter dem gewählten Punkt */
.lk-schild { position: absolute; z-index: 3; display: flex; flex-direction: column; align-items: center; padding: 5px 12px 6px; border: 1px solid var(--accent); border-radius: 12px; background: var(--surface-raised); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; white-space: nowrap; line-height: 1.25; }
.lk-schild b { font-size: .9rem; font-weight: 750; }
.lk-schild span { color: var(--accent); font-size: .76rem; font-weight: 650; }
.lk-schild:hover { background: var(--accent-soft); color: var(--ink); }
.lk-schild[hidden] { display: none; }

/* Tafel mit dem gewählten Konzept */
.lk-tafel { position: absolute; top: 0; right: 0; bottom: 0; z-index: 5; display: flex; flex-direction: column; width: 400px; max-width: 100%; background: var(--surface); border-left: 1px solid var(--line); box-shadow: var(--shadow); transform: translateX(102%); transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.lk-mit-tafel .lk-tafel { transform: none; }
.lk-mit-tafel .lk-werkzeuge, .lk-mit-tafel .lk-werkzeuge-oben { right: calc(400px + var(--lk-rand)); }
.lk-mit-tafel .lk-einleitung { display: none; }
.lk-tafel-kopf { position: relative; padding: 18px 20px 14px; border-bottom: 1px solid var(--line); }
.lk-tafel-zu { position: absolute; top: 14px; right: 14px; box-shadow: none; }
.lk-weg { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-height: 18px; margin: 0 48px 10px 0; color: var(--muted); font-size: .76rem; }
.lk-weg button { padding: 0; border: 0; background: none; color: var(--muted); font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.lk-weg button:hover { color: var(--accent); }
.lk-kat { display: inline-flex; align-items: center; gap: 6px; color: oklch(calc(var(--lk-L) - .08) var(--lk-C) var(--h)); font-size: .76rem; font-weight: 650; }
.lk-kat::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: oklch(var(--lk-L) var(--lk-C) var(--h)); }
.lk-tafel h2 a { color: inherit; text-decoration: none; }
.lk-tafel h2 a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.lk-tafel h2 { margin: 6px 48px 2px 0; font-size: 1.45rem; font-weight: 740; letter-spacing: -.015em; line-height: 1.2; }
.lk-idee { margin: 0 0 12px; color: var(--muted); font-size: .92rem; }
.lk-seite-link { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 10px; background: var(--accent); color: #fff; font-size: .88rem; font-weight: 650; text-decoration: none; }
.lk-seite-link:hover { filter: brightness(1.08); color: #fff; }
.lk-tafel-inhalt { flex: 1; overflow: auto; padding: 4px 20px 28px; }
.lk-tafel-inhalt h3 { display: flex; align-items: center; gap: 8px; margin: 20px 0 8px; color: var(--muted); font-size: .74rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.lk-eintrag { margin-bottom: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-raised); font-size: .85rem; transition: border-color .15s; }
.lk-eintrag:hover { border-color: var(--accent); }
.lk-eintrag p { margin: 0 0 6px; color: var(--muted); }
.lk-eintrag-ein p { margin: 4px 0 0; }
.lk-eintrag-alt { border-left: 3px solid var(--coral); }
.lk-eintrag-ein { border-left: 3px solid color-mix(in srgb, var(--coral) 55%, transparent); }
.lk-rel-liste { display: flex; flex-wrap: wrap; gap: 6px; }
.lk-rel-liste .lk-eintrag { margin: 0; padding: 7px 10px; }
.lk-ziel { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-weight: 650; text-align: left; cursor: pointer; }
.lk-ziel::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: oklch(var(--lk-L) var(--lk-C) var(--h)); }
.lk-ziel:hover { color: var(--accent); }
.lk-leer { margin: 0; padding: 4px 0; color: var(--muted); font-size: .84rem; font-style: italic; }
.lk-treffer .lk-leer { padding: 10px 14px; }

@media (max-width: 900px) {
  .lk-karte { height: calc(100dvh - 1.5rem); }
}
@media (max-width: 760px) {
  .lk-einleitung, .lk-legende { display: none; }
  .lk-leiste { top: 12px; width: calc(100% - 2 * var(--lk-rand) - 50px); }
  .lk-werkzeuge { bottom: 12px; }
  .lk-werkzeuge-oben { top: 12px; }
  .lk-werkzeuge-oben .lk-text { display: none; }
  .lk-tafel { top: auto; width: 100%; height: 58%; border-left: 0; border-top: 1px solid var(--line); border-radius: 18px 18px 0 0; transform: translateY(104%); }
  .lk-mit-tafel .lk-leiste, .lk-mit-tafel .lk-werkzeuge, .lk-mit-tafel .lk-werkzeuge-oben { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lk-n, .lk-huelle, .lk-tafel, .lk-kanten-sel path { transition: none !important; animation: none !important; }
  .lk-kanten-sel path { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
}