/*
 * Karte und Ortsliste.
 *
 * Die Media Query steht hier und nicht in responsive.css: Diese Datei gehoert
 * ganz zu den beiden Kartenseiten und wird nur dort geladen. responsive.css
 * bleibt fuer die Regeln zustaendig, die das gewachsene Layout ueberschreiben.
 */

#karte {
    height: 70vh;
    min-height: 320px;
    margin: 1em 0;
    border: 1px solid #999;
}

/*
 * Im Vollbild wird der Behaelter zum Bildschirm. Ohne diese Regel behielte er
 * seine 70vh beziehungsweise 480 Pixel und stuende als kleines Rechteck auf
 * schwarzem Grund.
 */
#karte:fullscreen,
#detailkarte:fullscreen,
#karte:-webkit-full-screen,
#detailkarte:-webkit-full-screen {
    width: 100%;
    height: 100%;
    margin: 0;
    border: 0;
}

/* Der Weg von der einzelnen Archivalie zur Karte des ganzen Bestandes. */
.detailkarte-mehr {
    margin: 0.3em 0 0 0;
    font-size: 0.85em;
}

/* Das Zeichen im Vollbildknopf sitzt sonst zu tief in der Leaflet-Schaltfläche. */
.karte-vollbild a {
    font-size: 18px;
    line-height: 26px;
    text-align: center;
    text-decoration: none;
}

/*
 * Der sichtbare Fokus steht nicht hier: Karte und Listenrahmen tragen beide
 * tabindex, und responsive.css faerbt [tabindex]:focus-visible bereits im
 * Orange, das die ganze Seite verwendet. Eine eigene Regel wuerde nur dafuer
 * sorgen, dass diese eine Seite aus der Reihe faellt.
 */

.karte-hinweis {
    margin: 1em 0;
}

.karte-legende {
    background: rgba(255, 255, 255, 0.9);
    padding: 0.6em 0.8em;
    border: 1px solid #999;
    line-height: 1.6;
    color: #222;
}

.karte-legende strong {
    display: block;
    margin-bottom: 0.3em;
}

.karte-legende span {
    display: inline-block;
    background: #b03000;
    border: 1px solid #601800;
    border-radius: 50%;
    margin-right: 0.4em;
    vertical-align: middle;
}

.karte-namen {
    margin: 0 0 0.5em 0;
    padding-left: 1.2em;
}

/*
 * Die Karte unter der Blaetterleiste der Detailseiten. Niedriger als die
 * grosse: Sie zeigt im Mittel acht Orte, meist dicht beieinander, und soll den
 * Rest der Seite nicht verdraengen.
 *
 * Zugeklappt, damit das Blaettern schnell bleibt. Das Dreieck kommt vom
 * Browser; der sichtbare Fokus ebenso, summary ist von Haus aus anspringbar.
 */
.detailkarte-akkordeon {
    clear: both;
    margin: 1.5em 0;
}

/*
 * Der Aufklapper muss als solcher zu erkennen sein: als Leiste mit Rahmen und
 * eigenem Winkel davor. Das Dreieck, das der Browser von sich aus setzt, ist
 * dafuer zu unscheinbar und sieht ausserdem in jedem Browser anders aus -
 * deshalb abgeschaltet und ersetzt.
 */
.detailkarte-akkordeon summary {
    cursor: pointer;
    font-weight: bold;
    padding: 0.6em 0.8em;
    background: #eef3f0;
    border: 1px solid #447f64;
    border-radius: 3px;
    list-style: none;          /* Firefox */
    display: flex;
    align-items: center;
    gap: 0.6em;
}

.detailkarte-akkordeon summary::-webkit-details-marker {
    display: none;             /* Safari und ältere Chromium-Fassungen */
}

.detailkarte-akkordeon summary::before {
    content: "";
    flex: none;
    width: 0;
    height: 0;
    border-left: 8px solid #447f64;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    transition: transform 0.15s;
}

.detailkarte-akkordeon[open] summary::before {
    transform: rotate(90deg);
}

.detailkarte-akkordeon summary:hover {
    background: #e2ebe6;
}

/* Die Wahl "offen halten" rueckt an den rechten Rand der Leiste. */
.detailkarte-offenhalten {
    margin-left: auto;
    font-weight: normal;
    font-size: 0.9em;
    white-space: nowrap;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.35em;
}

.detailkarte-offenhalten input {
    margin: 0;
}

/* Auf schmalen Bildschirmen unter den Titel statt daneben. */
@media (max-width: 480px) {
    .detailkarte-akkordeon summary {
        flex-wrap: wrap;
    }

    .detailkarte-offenhalten {
        margin-left: 1.4em;
        width: 100%;
    }
}

/* Wer die Bewegung nicht will, bekommt sie nicht. */
@media (prefers-reduced-motion: reduce) {
    .detailkarte-akkordeon summary::before {
        transition: none;
    }
}

#detailkarte {
    height: 480px;
    margin: 0.8em 0 1em 0;
    border: 1px solid #999;
}

@media (max-width: 480px) {
    #detailkarte {
        height: 340px;
    }
}

.karte-ohne-punkt {
    color: #665000;
    font-style: italic;
    margin-left: 0.4em;
}

@media (max-width: 480px) {
    #karte {
        height: 60vh;
    }
}

/* Die Bilanz unter der Karte: was sie zeigt und was nicht.
 *
 * Keine Zeilenbegrenzung. Eine Obergrenze von 70 Zeichen stand hier und ist
 * typografisch das Übliche - unter einer Karte über die volle Breite wirkt
 * der halb so breite Absatz aber wie ein abgeschnittener Rest. Die Breite
 * der Karte ist hier das stärkere Ordnungsmerkmal. */
.karte-bilanz {
    margin: 0.8em 0 1.5em 0;
    font-size: 0.9em;
    color: #444;
}