/* Netzwerk & Chronik (/netzwerk).

   Breiter als der übrige Auftritt: die Karte braucht Fläche, und die
   Einträge darunter tragen mehrzeilige Beschreibungen. Gilt nur hier,
   weil diese Datei nur hier eingebunden wird. */
.container {
    width: 92%;
    max-width: 1240px;
    text-align: left;
}
.container h1, .container h2 { text-align: left; }

.netz-einleitung {
    max-width: 80ch;
    line-height: 1.55;
}

/* ------------------------------------------------------------------ */
/* Karte                                                               */
/* ------------------------------------------------------------------ */

.karte-rahmen {
    position: relative;
    margin: 16px 0 26px;
    border: 1px solid #ccc;
    background: #fcfcfc;
}
#karte {
    display: block;
    width: 100%;
    /* Feste Höhe statt Seitenverhältnis: die Karte ist ein Fenster auf
       eine größere Fläche, kein Bild mit eigenem Format. */
    height: 68vh;
    min-height: 380px;
    /* pan-y statt none: EIN Finger scrollt die Seite weiter, wie überall
       sonst auch. Verschoben und gezoomt wird die Karte mit zwei Fingern
       (netzwerk.js) — sonst bleibt der Daumen beim Scrollen in der Karte
       hängen und man kommt an der halben Seite nicht vorbei. */
    touch-action: pan-y;
    cursor: grab;
    background: #fcfcfc;
}
#karte.zieht { cursor: grabbing; }

/* Die Leiste lag bis zum 13.08.2026 ÜBER der Karte. Am Schirm ging das
   gut, auf dem Telefon verdeckte sie neun Knoten (Heidegger, Husserl,
   Posdzech …) — sie waren dort weder lesbar noch antippbar, weil die
   Karte auf 393 Pixeln rund dreimal so stark verkleinert ist. Jetzt
   steht sie in einer eigenen Zeile darüber und nimmt der Karte nichts. */
.karte-werkzeuge {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px;
    background: #f6f6f6;
    border-bottom: 1px solid #ddd;
}
.karte-werkzeuge button {
    width: 32px;
    height: 32px;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    color: #222;
    background: #fff;
    border: 1px solid #bbb;
    border-radius: 4px;
}
.karte-werkzeuge button:hover { background: #eee; }
.karte-werkzeuge button.frei {
    width: auto;
    padding: 0 12px;
    font-size: 13px;
    color: #a03000;
    border-color: #e0b09a;
}
/* Der Knopf bleibt im Platz stehen, auch wenn er nicht zu sehen ist:
   erschiene er erst bei einer Auswahl, umbräche die Leiste auf dem
   Telefon in eine zweite Zeile und die ganze Karte ruckte nach unten —
   genau in dem Moment, in dem man auf sie zeigt. */
.karte-werkzeuge button.frei[hidden] {
    display: block;
    visibility: hidden;
}

/* Hinweis, wenn jemand mit einem Finger in der Karte zieht. */
.karte-fingerzeig {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95em;
    color: #fff;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}
.karte-fingerzeig.sichtbar { opacity: 1; }

/* Rückweg zur Karte, sobald weiter unten etwas ausgewählt ist. Auf dem
   Telefon ist der Weg nach oben sonst eine lange Wischerei. */
.zur-karte {
    position: fixed;
    right: 14px;
    bottom: 16px;
    z-index: 900;
    display: none;
    padding: 10px 16px;
    font-size: 0.9em;
    color: #fff;
    background: #222;
    border: none;
    border-radius: 22px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}
.zur-karte.sichtbar { display: block; }
.karte-werkzeuge input {
    flex: 1 1 160px;
    min-width: 0;
    max-width: 260px;
    padding: 5px 9px;
    font-size: 14px;
    border: 1px solid #bbb;
    border-radius: 4px;
}

.kante {
    stroke: #9a9a9a;
    stroke-width: 1.2;
}
.kante.unsicher { stroke-dasharray: 6 5; stroke: #b5b5b5; }
.kante.hervor { stroke: #FF4500; stroke-width: 2.4; }

.knoten { cursor: pointer; }
.knoten rect {
    stroke: #555;
    stroke-width: 1.2;
    transition: stroke 0.15s ease, stroke-width 0.15s ease;
}
.knoten:hover rect, .knoten:focus rect { stroke: #FF4500; stroke-width: 2.6; }
.knoten:focus { outline: none; }
.knoten.zentrum rect { stroke: #FF4500; stroke-width: 2.4; }
.knoten.hervor rect { stroke: #FF4500; stroke-width: 3; }
.knoten.gedimmt { opacity: 0.22; }
.kante.gedimmt { opacity: 0.15; }

.knoten-name {
    font: 600 11px Arial, sans-serif;
    text-anchor: middle;
    fill: #111;
    pointer-events: none;
}
.knoten-zusatz {
    font: 9.5px Arial, sans-serif;
    text-anchor: middle;
    fill: #444;
    pointer-events: none;
}
.knoten.zentrum .knoten-name { font-size: 13px; }

.karte-legende {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    padding: 8px 10px;
    font-size: 0.8em;
    color: #555;
    background: #f6f6f6;
    border-top: 1px solid #ddd;
}
.legende-titel { font-weight: 600; }
.legende-feld { display: inline-flex; align-items: center; gap: 5px; }
.legende-punkt {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 1px solid #999;
}
.legende-punkt.rund { border-radius: 50%; background: #fff; }
.legende-strich {
    display: inline-block;
    width: 20px;
    border-top: 2px dashed #b5b5b5;
}
.karte-hinweis {
    margin: 8px 0 0;
    padding: 0 10px 8px;
    font-size: 0.8em;
    color: #777;
}

/* ------------------------------------------------------------------ */
/* Verzeichnis                                                          */
/* ------------------------------------------------------------------ */

.netz-suche {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 10px 0 16px;
}
.netz-suche input {
    flex: 1 1 280px;
    min-width: 0;
    padding: 9px 12px;
    font-size: 16px;   /* unter 16px zoomt iOS beim Antippen hinein */
    border: 1px solid #bbb;
    border-radius: 4px;
}
.netz-zahl { font-size: 0.85em; color: #666; }

.netz-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
    /* Zwei Spalten, wo Platz ist: 87 Einträge sind sonst eine sehr
       lange Bahn. Ein Eintrag wird nie umbrochen. */
    columns: 2 420px;
    column-gap: 26px;
}
.netz-eintrag {
    break-inside: avoid;
    display: inline-block;   /* hält den Eintrag in einer Spalte zusammen */
    width: 100%;
    /* Ohne dies zählen Rand und Innenabstand zur Breite hinzu und der
       Eintrag ragt aus seiner Spalte heraus — sichtbar als abgeschnittene
       Karte. Die Seite setzt border-box nicht global. */
    box-sizing: border-box;
    margin: 0 0 18px;
    padding: 12px 14px;
    background: #fafafa;
    border: 1px solid #e2e2e2;
    border-left: 4px solid #ddd;
    border-radius: 3px;
    scroll-margin-top: 16px;
}
.netz-eintrag[hidden] { display: none; }
.netz-eintrag.hervor {
    background: #fff8f2;
    border-left-color: #FF4500;
    box-shadow: 0 0 0 2px rgba(255, 69, 0, 0.18);
}
.netz-eintrag h3 {
    margin: 0 0 4px;
    font-size: 1.02em;
    line-height: 1.3;
}
.netz-punkt {
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-right: 5px;
    border: 1px solid #999;
    border-radius: 2px;
    vertical-align: baseline;
}
.netz-daten { font-weight: 400; color: #666; font-size: 0.9em; }
.netz-marke {
    color: #bbb;
    text-decoration: none;
    font-weight: 400;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.netz-eintrag:hover .netz-marke { opacity: 1; }

.netz-zeile {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 9px;
    margin: 0 0 6px;
    font-size: 0.78em;
    color: #777;
}
.netz-art {
    padding: 1px 7px;
    color: #fff;
    background: #6b7f95;
    border-radius: 9px;
}
.netz-art.institution { background: #7a6a95; }
.netz-art.ereignis { background: #95836a; }
.netz-ungeprueft { color: #a06000; }
.netz-ohne-karte { color: #999; font-style: italic; }

.netz-text {
    margin: 0 0 8px;
    font-size: 0.9em;
    line-height: 1.5;
    color: #222;
}

.netz-block { margin: 8px 0 0; }
.netz-block-titel {
    display: block;
    margin-bottom: 3px;
    font-size: 0.72em;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.netz-kanten, .netz-chronikbezug {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
    font-size: 0.85em;
    line-height: 1.45;
}
/* Eine Zeile je Verbindung, und zwar wirklich eine: Name, Grund, fertig.
   Vorher standen dort zusätzlich das Wort „Quelle" und „nicht gesichert"
   als eigene Marken — auf dem Telefon brach das jede Verbindung über
   zwei bis drei Zeilen und die Kachel wurde unlesbar. Die Quelle steckt
   jetzt in der gepunkteten Unterlegung des Grundes (antippen/zeigen),
   die Unsicherheit in einem einzelnen Fragezeichen. */
.netz-kanten li, .netz-chronikbezug li {
    display: block;
    margin: 0 0 2px;
    padding-left: 11px;
    text-indent: -11px;
    /* Lange Namen und Gründe brechen um, statt die Kachel zu sprengen. */
    overflow-wrap: anywhere;
}
.netz-kanten li.unsicher { color: #8a8a8a; }
.netz-warum {
    color: #666;
}
.netz-warum::before { content: " — "; color: #bbb; }
.netz-warum.mit-quelle {
    border-bottom: 1px dotted #ccc;
    cursor: help;
}
.netz-unsicher-marke {
    margin-left: 4px;
    padding: 0 4px;
    font-size: 0.8em;
    color: #a06000;
    background: #fdf2e2;
    border-radius: 3px;
    cursor: help;
}
.netz-sprung { color: #234; text-decoration: none; border-bottom: 1px solid #cdd6e0; }
.netz-sprung:hover { color: #0645ad; border-bottom-color: #0645ad; }
.netz-chronikbezug a {
    display: block;
    color: #444;
    text-decoration: none;
}
.netz-chronikbezug a strong { color: #222; margin-right: 5px; }
.netz-chronikbezug a span { color: #666; }
.netz-chronikbezug a:hover { color: #0645ad; }
.netz-chronikbezug a:hover span { color: #0645ad; }
.netz-quelle {
    margin-left: 6px;
    font-size: 0.85em;
    color: #aaa;
    border-bottom: 1px dotted #ccc;
    cursor: help;
}

.netz-wege {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin: 9px 0 0;
    font-size: 0.85em;
}
.netz-wege {
    padding-top: 8px;
    border-top: 1px solid #ececec;
    color: #999;
}
.netz-wege a { color: #556; text-decoration: none; }
.netz-wege a:hover { color: #0645ad; text-decoration: underline; }

/* ------------------------------------------------------------------ */
/* Chronik                                                              */
/* ------------------------------------------------------------------ */

.chronik { max-width: 900px; text-align: left; }
.chronik-jahrzehnt {
    margin: 22px 0 8px;
    padding-bottom: 3px;
    font-size: 1em;
    color: #666;
    border-bottom: 1px solid #e2e2e2;
    scroll-margin-top: 12px;
}
.chronik-marken {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    font-size: 0.82em;
}
.chronik-marken a {
    padding: 2px 7px;
    color: #444;
    text-decoration: none;
    background: #f0f0f0;
    border-radius: 10px;
}
.chronik-marken a:hover { background: #111; color: #fff; }

.chronik-eintrag {
    display: flex;
    gap: 14px;
    padding: 7px 0 7px 14px;
    border-left: 3px solid #ddd;
    line-height: 1.5;
    scroll-margin-top: 16px;
}
.chronik-eintrag[hidden] { display: none; }
.chronik-eintrag:hover { border-left-color: #FF4500; background: #fafafa; }
.chronik-eintrag.hervor { border-left-color: #FF4500; background: #fff8f2; }
.chronik-jahr {
    flex: 0 0 78px;
    text-align: right;
    font-weight: bold;
    color: #333;
    font-size: 0.92em;
}
.chronik-text { font-size: 0.93em; color: #222; }
.chronik-personen { margin-left: 6px; }
.chronik-personen a {
    margin-right: 5px;
    padding: 1px 7px;
    font-size: 0.85em;
    color: #333;
    text-decoration: none;
    background: #eef2f7;
    border-radius: 9px;
}
.chronik-personen a:hover { background: #d8e2ee; }

.netz-fussnote {
    max-width: 80ch;
    margin-top: 20px;
    font-size: 0.82em;
    color: #888;
    line-height: 1.5;
}

@media (max-width: 700px) {
    /* Auf dem Telefon zählt jede Zeile: Beschreibung auf vier Zeilen
       kürzen (der ganze Text steht im Dialogsystem und im Archiv), und
       die Kachel bekommt mehr Luft zwischen den Blöcken. */
    .netz-eintrag { padding: 11px 12px; }
    .netz-text {
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .netz-eintrag.hervor .netz-text { -webkit-line-clamp: unset; }
    .netz-block { margin-top: 10px; }
    .container { width: 96%; padding: 12px; }
    .netz-liste { columns: 1; }
    #karte { height: 46vh; min-height: 260px; }
    .chronik-eintrag { gap: 10px; }
    .chronik-jahr { flex-basis: 58px; }
}