/* kv-netz.css — Verbindungen zwischen den Seiten ("Spinnennetz").
   Teil 1 (Bestand, unveraendert): Fachbegriffe einer Seite als Chips (.kvn, .kvn-list, .kvn-all, .kvn-hero).
   Teil 2 (neu, Linie B): Textlink im Fliesstext (.kvn-a), Hinweis "Im Lexikon erklaert" (.kvn-lex),
   "Weiter"-Zeile am Abschnittsende (.kvn-next).

   Regeln fuer den Einsatz
   - .kvn-a          Link auf eine andere Seite. Teal-dunkel, ohne Unterstrich (design.md, Fabio 29.10./05.11.).
   - .kvn-a--lex     Link auf einen Lexikon-Begriff. Wie .kvn-a, ohne Unterstrich.
                     Je Begriff nur beim ersten Vorkommen im Artikel, nie in Ueberschriften.
   - .kvn-lex        hoechstens einmal je Abschnitt, hoechstens drei Begriffe. Kein Hintergrund, kein Rahmen.
   - .kvn-next       genau ein Ziel am Abschnittsende, hoechstens eine Weiter-Zeile je Abschnitt.
                     Mehrere untereinander nur im Abschlussblock am Seitenende (.kvn-nexts).
                     Ein Ziel, das im Text als Weiter-Zeile steht, kommt im Abschlussblock nicht noch einmal vor.
   Abstaende: 28px ueber/unter einem Baustein im Text, 16px Zeilenpolster — wie .kvn (padding-top:28px). */

/* Variablen: bisher nur auf .kvn, jetzt auch fuer die Bausteine, die ausserhalb eines .kvn-Blocks stehen */
.kvn,.kvn-a,.kvn-lex,.kvn-next,.kvn-nexts{--kvn-ink:#1C2B3A;--kvn-muted:#5C6473;--kvn-teal:#3D8B7A;--kvn-tealD:#2D6B5C;--kvn-hair:#E0DFD9}

/* ── Teil 1: Chip-Liste (Bestand) ───────────────────────────────────────── */
.kvn{border-top:1px solid var(--kvn-hair);margin-top:52px;padding-top:28px;font-family:'DM Sans',system-ui,sans-serif}
.kvn-title{font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--kvn-muted);margin-bottom:14px}
.kvn-list{display:flex;flex-wrap:wrap;gap:8px}
.kvn-list a{font-size:14px;line-height:1.3;padding:6px 12px;border:1px solid var(--kvn-hair);border-radius:999px;background:#fff;color:var(--kvn-ink);text-decoration:none;transition:border-color .2s,color .2s}
.kvn-list a:hover{border-color:var(--kvn-teal);color:var(--kvn-tealD)}
.kvn-all{display:inline-block;margin-top:14px;font-size:14px;font-weight:600;color:#2D6B5C;text-decoration:none}
.kvn-all::after{content:" →"}
.kvn-all:hover{color:var(--kvn-ink)}
.kvn--city{margin-top:56px}
.kvn-hero{margin:18px 0 0}.kvn-hero .kvn-all{margin-top:0;font-size:15px}

/* ── Teil 2.1: Textlink im Fliesstext ───────────────────────────────────── */
.kvn-a{color:var(--kvn-tealD);font-weight:inherit;text-decoration:none;transition:color .15s}
.kvn-a:hover{color:var(--kvn-ink)}
.kvn-a--lex{cursor:help}
.kvn-a:focus-visible,.kvn-next:focus-visible,.kvn-lex a:focus-visible{outline:2px solid var(--kvn-teal);outline-offset:3px;border-radius:2px}

/* ── Teil 2.2: "Im Lexikon erklaert" ────────────────────────────────────── */
.kvn-lex{display:grid;grid-template-columns:180px minmax(0,1fr);gap:6px 24px;align-items:baseline;margin:28px 0;padding:16px 0;border-top:1px solid var(--kvn-hair);border-bottom:1px solid var(--kvn-hair);font-family:'DM Sans',system-ui,sans-serif}
.kvn-lex-l{font-size:12px;line-height:1.5;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--kvn-muted)}
.kvn-lex-b{display:grid;gap:10px}
.kvn-lex-b>span{display:block;font-size:15px;line-height:1.5;color:var(--kvn-muted)}
.kvn-lex-b a{display:inline;margin-right:6px;font-size:16px;font-weight:600;color:var(--kvn-tealD);text-decoration:none;transition:color .15s}
.kvn-lex-b a:hover{color:var(--kvn-ink)}

/* ── Teil 2.3: "Weiter"-Zeile ───────────────────────────────────────────── */
.kvn-next{display:grid;grid-template-columns:180px minmax(0,1fr) auto;gap:4px 24px;align-items:baseline;margin:28px 0;padding:16px 2px;border-top:1px solid var(--kvn-hair);border-bottom:1px solid var(--kvn-hair);color:var(--kvn-ink);text-decoration:none;font-family:'DM Sans',system-ui,sans-serif;transition:padding .25s cubic-bezier(.22,1,.36,1)}
.kvn-next-l{font-size:13px;line-height:1.5;font-weight:600;color:var(--kvn-muted)}
.kvn-next-t{display:block;font-size:17px;line-height:1.35;font-weight:600;color:var(--kvn-ink);transition:color .15s}
.kvn-next-s{display:block;margin-top:3px;font-size:15px;line-height:1.5;font-weight:400;color:var(--kvn-muted)}
.kvn-next::after{content:"→";font-size:17px;line-height:1.35;font-weight:600;color:var(--kvn-tealD);transition:transform .25s cubic-bezier(.22,1,.36,1)}
.kvn-next:hover{padding-left:12px}
.kvn-next:hover .kvn-next-t{color:var(--kvn-tealD)}
.kvn-next:hover::after{transform:translateX(4px)}
/* mehrere Ziele am Seitenende: Linien teilen sich, kein doppelter Strich */
.kvn-nexts{margin:28px 0;border-top:1px solid var(--kvn-hair)}
.kvn-nexts .kvn-next{margin:0;border-top:0}

@media (max-width:640px){
  .kvn-lex,.kvn-next{grid-template-columns:minmax(0,1fr) auto}
  .kvn-lex-l,.kvn-lex-b{grid-column:1 / -1}
  .kvn-next-l{grid-column:1 / -1}
  .kvn-next:hover{padding-left:2px}
}
@media (prefers-reduced-motion:reduce){.kvn-next,.kvn-next::after,.kvn-a{transition:none}}
@media print{.kvn-next::after{content:""}}