/* ------------------------------------------------------------------
   Halloween-Karte Straelen

   Die beiden Grundfarben stehen nicht hier, sondern werden aus der
   config.php im <head> als CSS-Variablen gesetzt:
       --primary   Orange
       --bg        dunkles Nachtblau
   Alles andere leitet sich davon ab.
   ------------------------------------------------------------------ */

:root {
    --text: #ffffff;
    --muted: #b9c2de;
    --surface: rgba(255, 255, 255, 0.06);
    --surface-strong: rgba(255, 255, 255, 0.12);
    --line: rgba(255, 255, 255, 0.18);

    /*
       Die Farbe der Marker auf der Karte.
       Alle Punkte bedeuten dasselbe: hier wird mitgemacht. Deshalb gibt es
       nur diese eine Farbe. Damit sie auffällt, bleibt die Grundkarte
       entsättigt, siehe weiter unten.
    */
    --marker: var(--primary);

    /* Grün für Rückmeldungen, die geklappt haben. */
    --ok: #3ddc97;

    /*
       Farbe für den Unterwegs-Modus.
       Die beiden großen Knöpfe oben richten sich an verschiedene Leute:
       Der Unterwegs-Modus an Kinder und Eltern am Abend selbst, das Schild
       an die Haushalte, die mitmachen. Deshalb haben sie verschiedene Farben.
       Blau passt zum blauen Standortpunkt auf der Karte und beißt sich nicht
       mit dem Orange der Marker: blau heißt hier unterwegs sein.
    */
    --tour: #5aa9ff;

    --radius: 14px;
    --tap: 48px;

    --pumpkin: var(--primary);
    --pumpkin-face: var(--bg);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 .6rem; font-weight: 700; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.25rem; margin-top: 2rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 1rem; }

a { color: var(--primary); }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
    border-radius: 6px;
}

.skip-link {
    position: absolute;
    left: -9999px;
}
.skip-link:focus {
    left: 1rem;
    top: 1rem;
    z-index: 2000;
    background: var(--primary);
    color: #17110a;
    padding: .7rem 1rem;
    border-radius: 8px;
    font-weight: 700;
}

.wrap {
    max-width: 46rem;
    margin: 0 auto;
    padding: 1rem 1rem 2rem;
}

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.muted { color: var(--muted); }


/* ---------------- Kopfbereich der Startseite ----------------

   Nachthimmel mit Mond, Fledermäusen und einer Dächersilhouette am
   unteren Rand. Die Seite soll in den ersten zwei Sekunden sagen,
   worum es geht und wann es losgeht.

   Alle Formen sind SVG aus src/lib/deko.php, es wird nichts nachgeladen.
   Alle Bewegung schaltet sich bei prefers-reduced-motion ab.
*/

.hero {
    position: relative;
    overflow: hidden;
    padding: 2.5rem 1rem 0;
    text-align: center;
    /*
       Von oben nach unten: tiefes Nachtblau, dann ein Hauch Orange über
       den Dächern, so wie der Himmel über einem beleuchteten Ort aussieht.
    */
    background:
        radial-gradient(120% 90% at 50% 100%, rgba(238, 114, 3, .22) 0%, transparent 60%),
        linear-gradient(180deg, #060a1c 0%, #0b1026 55%, #121a3a 100%);
}

.hero__himmel {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/*
   Der Mond sitzt oben rechts und ragt über den Rand hinaus, den .hero
   abschneidet. Am Handy ist er kleiner und weiter in der Ecke, sonst
   steht er dem Kürbis im Weg.
*/
.deko__mond {
    position: absolute;
    top: -3.5rem;
    right: -3.5rem;
    width: 11rem;
    height: 11rem;
    opacity: .8;
}

@media (min-width: 34rem) {
    .deko__mond {
        top: -2.5rem;
        right: -2.5rem;
        width: 15rem;
        height: 15rem;
        opacity: .85;
    }
}

/*
   Die Fledermäuse sind etwas heller als der Himmel, nicht dunkler.
   Eine schwarze Silhouette wäre auf einem Nachthimmel unsichtbar; so
   wirken sie, als fiele Mondlicht auf sie.
*/
.deko__fledermaus {
    position: absolute;
    fill: #2b3566;
    opacity: .9;
    width: 2.6rem;
    height: 1.3rem;
}
.deko__fledermaus--1 { top: 18%; left: 8%;  animation: flattern 7s ease-in-out infinite; }
.deko__fledermaus--2 { top: 34%; left: 22%; width: 1.7rem; height: .85rem;
                       animation: flattern 9s ease-in-out infinite reverse; }
.deko__fledermaus--3 { top: 12%; right: 26%; width: 2.1rem; height: 1.05rem;
                       animation: flattern 11s ease-in-out infinite; }

@keyframes flattern {
    0%, 100% { transform: translate(0, 0) rotate(-3deg); }
    50%      { transform: translate(1.6rem, -.7rem) rotate(4deg); }
}

/*
   Das Vereinslogo oben links im Kopfbereich. Eine Navigationsleiste gibt
   es bewusst nicht, die Seite hat nur eine Ebene. Der Mond sitzt oben
   rechts, links ist also frei.
*/
.hero__logo {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 2;
    height: 32px;
    width: auto;
    display: block;
}

@media (min-width: 34rem) {
    .hero__logo { top: 1.2rem; left: 1.4rem; height: 40px; }
}

.hero__inhalt {
    position: relative;
    max-width: 44rem;
    margin: 0 auto;
    padding-bottom: 4.5rem;
}

.hero__kuerbis {
    width: 6.5rem;
    height: 6.5rem;
    /*
       Der Kürbis sitzt über der Schrift und bekommt einen warmen Schein,
       als stünde eine Kerze darin.
    */
    filter: drop-shadow(0 0 1.6rem rgba(238, 114, 3, .55));
}

.hero__titel {
    font-size: clamp(2.3rem, 11vw, 4rem);
    line-height: .95;
    letter-spacing: -.02em;
    margin: .5rem 0 .6rem;
    text-transform: uppercase;
}
.hero__titel span {
    display: block;
    font-size: .46em;
    letter-spacing: .14em;
    color: var(--primary);
    margin-top: .35em;
}

.hero__datum {
    margin: 0 0 1rem;
    color: #ffd7ae;
}
.hero__datum-tag {
    display: block;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: .02em;
}
.hero__datum-zeit {
    display: block;
    font-size: .95rem;
    opacity: .8;
    margin-top: .1rem;
}

.hero__lead {
    font-size: 1.08rem;
    line-height: 1.55;
    color: #d8dff5;
    margin: 0 auto 1.6rem;
    max-width: 34rem;
}
/* Der erste Satz trägt das Konzept und steht deshalb heller und fetter. */
.hero__lead strong { color: var(--text); }

/* ---------------- Die zwei Wege im Kopfbereich ----------------

   Zwei Arten von Besuchern, zwei gleichwertige Einstiege. Beide sind
   richtige Links auf die Abschnitte weiter unten, funktionieren also
   auch ohne JavaScript und lassen sich mit der Tastatur bedienen.
*/

.wege {
    display: grid;
    gap: .7rem;
    margin-top: 1.6rem;
    text-align: left;
}

.weg {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: .9rem;
    align-items: center;
    padding: .9rem 1rem;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .07);
    color: var(--text);
    text-decoration: none;
    min-height: var(--tap);
}
.weg:hover,
.weg:focus-visible {
    border-color: var(--primary);
    background: rgba(238, 114, 3, .16);
}

.weg__bild {
    grid-row: 1 / 3;
    width: 2.6rem;
    height: 2.6rem;
    flex: none;
    color: var(--primary);
}

.weg__titel { font-weight: 700; line-height: 1.25; }
.weg__text {
    color: var(--muted);
    font-size: .92rem;
}
/* Der Pfeil macht aus dem Kasten sichtbar einen Weg, nicht nur einen Hinweis. */
.weg__text::after {
    content: " →";
    color: var(--primary);
    font-weight: 700;
}

@media (min-width: 34rem) {
    .wege { grid-template-columns: 1fr 1fr; }
}

/* Die Dächer schließen den Kopfbereich nach unten ab. */
.deko__daecher {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    width: 100%;
    height: 4.5rem;
    fill: var(--bg);
    display: block;
}

/* ---------------- Abschnitte ---------------- */

.block { margin: 2.6rem 0; }
/*
   Die beiden Wege im Kopfbereich springen hierher. Ohne den Abstand klebte
   die Überschrift danach am oberen Bildschirmrand.
*/
.block > h2 { margin-top: 0; scroll-margin-top: 1.5rem; }
.block__intro {
    color: var(--muted);
    max-width: 38rem;
    margin-top: -.2rem;
}

.block__aktion { margin: 1.4rem 0 0; }
/* Steht vor der Karte und braucht deshalb Abstand nach unten statt nach oben. */
.block__aktion--vor { margin: 1rem 0 1.2rem; }
.block__aktion-hinweis {
    display: block;
    color: var(--muted);
    font-size: .92rem;
    margin-top: .5rem;
}

/* ---------------- Karte noch leer ----------------

   Steht an der Stelle der Karte, solange kein Haus eingetragen ist.
*/

.leer {
    text-align: center;
    padding: 2rem 1.2rem 2.2rem;
    border-radius: var(--radius);
    border: 2px dashed var(--line);
    background: var(--surface);
}
.leer .pumpkin { opacity: .85; }
.leer__titel {
    font-size: 1.2rem;
    font-weight: 700;
    margin: .7rem 0 .5rem;
}
.leer p {
    color: var(--muted);
    max-width: 30rem;
    margin-left: auto;
    margin-right: auto;
}
.leer__aufruf { color: var(--text) !important; margin-top: 1.1rem !important; }

/* ---------------- Auf die Karte melden ----------------

   Der wichtigste Knopf für den Verein: Hier kommen die Adressen her.
   Abgesetzt mit eigenem Rand, damit er im Mitmach-Abschnitt nicht
   zwischen den Vorlagen untergeht.
*/

.melden {
    margin-top: 1.6rem;
    padding: 1.1rem 1rem 1.2rem;
    border-radius: var(--radius);
    border: 2px solid var(--primary);
    background: rgba(238, 114, 3, .10);
}
.melden__titel,
.zeichen__titel {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0 0 .5rem;
    font-size: 1.1rem;
}
.melden p { margin: 0 0 .9rem; }

/* Die Nummer vor den beiden Schritten im Mitmach-Abschnitt. */
.melden__nr {
    flex: none;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background: var(--primary);
    color: #17110a;
    font-weight: 800;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Schritt 2: das Zeichen am Haus. Kein eigener Rahmen, damit die beiden
   Schritte zusammen einen Abschnitt bilden und nicht zwei Kästen. */
.zeichen { margin-top: 1.8rem; }
.zeichen > p { color: var(--muted); }
.zeichen h4 { margin: 0 0 .3rem; font-size: 1.02rem; }

/*
   Der Hinweis, dass Deko am Haus nicht genügt. Steht abgesetzt, weil er
   dem widerspricht, was die meisten unter "Halloween-Zeichen" verstehen.
*/
.zeichen__warnung {
    background: var(--surface);
    border-left: 4px solid var(--muted);
    border-radius: 8px;
    padding: .8rem 1rem;
    margin: 1.2rem 0 0;
    font-size: .98rem;
}
.zeichen__warnung strong { color: var(--text); }

.melden__knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    margin: 0 0 .7rem !important;
}
.melden__knoepfe .btn { flex: 1 1 13rem; }

.melden__hinweis {
    color: var(--muted);
    font-size: .9rem;
    margin: 0 !important;
}

/*
   Der Hinweis, dass auch etwas Selbstgemachtes zählt. Steht bewusst
   gleichwertig neben den Vorlagen und nicht als Kleingedrucktes darunter.
*/
.block__eigenes {
    background: var(--surface);
    border-left: 4px solid var(--primary);
    border-radius: 8px;
    padding: .8rem 1rem;
    margin: 1.2rem 0 0;
    font-size: .98rem;
}

.block__fussnote {
    color: var(--muted);
    font-size: .95rem;
    border-top: 1px solid var(--line);
    padding-top: 1rem;
    margin-top: 1.5rem;
}

/*
   Der Mitmach-Abschnitt richtet sich an andere Leute als der Rest der
   Seite und ist deshalb abgesetzt: eigener Hintergrund, eigener Rand.
*/
.block--mitmachen {
    background: linear-gradient(180deg, rgba(238, 114, 3, .10), rgba(238, 114, 3, .03));
    border: 1px solid rgba(238, 114, 3, .35);
    border-radius: var(--radius);
    padding: 1.4rem 1.2rem 1.6rem;
}

/* ---------------- Zwei Kästen beim Mitmachen ---------------- */

.karten {
    display: grid;
    gap: 1rem;
    margin: 1.2rem 0 0;
}
.karte-box {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1rem;
}
.karte-box .pumpkin,
.karte-box__bild { margin-bottom: .4rem; }
.karte-box__bild { width: 40px; height: 40px; color: var(--primary); display: block; }
.karte-box h3 { margin: 0 0 .3rem; font-size: 1.05rem; }
.karte-box p { margin: 0; color: var(--muted); font-size: .95rem; }

@media (min-width: 38rem) {
    .karten { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .deko__fledermaus { animation: none; }
}

/* ---------------- Kopfbereich ---------------- */

.site-header {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding-top: .6rem;
}
.site-header .pumpkin { flex: none; }
.lead { color: var(--muted); }

/* ---------------- Kürbis-Regel ---------------- */

.rule {
    display: flex;
    gap: .8rem;
    align-items: flex-start;
    background: var(--surface);
    border: 2px solid var(--primary);
    border-radius: var(--radius);
    padding: .9rem 1rem;
    margin: 1rem 0 1.2rem;
}
.rule .pumpkin { flex: none; margin-top: .1rem; }
.rule__text { margin: 0; }
.rule__text strong { display: block; font-size: 1.05rem; }
.rule__text span { color: var(--muted); font-size: .95rem; }

/* ---------------- Knöpfe ---------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: var(--tap);
    padding: .75rem 1.2rem;
    border-radius: var(--radius);
    border: 2px solid var(--line);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    text-align: center;
}
.btn:hover { background: var(--surface-strong); }

.btn--primary {
    background: var(--primary);
    border-color: var(--primary);
    color: #17110a;
}
.btn--primary:hover { filter: brightness(1.08); }

.btn--big {
    width: 100%;
    min-height: 60px;
    font-size: 1.15rem;
}

/* Knopf zum Unterwegs-Modus. Gleich groß wie der orange, nur andere Farbe. */
.btn--tour {
    background: var(--tour);
    border-color: var(--tour);
    color: #0a1430;
}
.btn--tour:hover { filter: brightness(1.08); }

/*
   Die Hausfarbe von WhatsApp, damit der Knopf sofort erkannt wird.
   Muss hier stehen und nicht beim Melde-Kasten: Die Grundregel .btn weiter
   oben hat dieselbe Spezifität, also gewinnt die Regel, die später kommt.
*/
.btn--whatsapp {
    background: #25d366;
    border-color: #25d366;
    color: #09301a;
    font-weight: 700;
}
.btn--whatsapp:hover { background: #1fbb59; border-color: #1fbb59; }

.btn--small {
    min-height: 40px;
    padding: .3rem .75rem;
    font-size: .9rem;
}

.btn--danger {
    border-color: #ff7b7b;
    color: #ffc9c9;
}
.btn--danger:hover { background: rgba(255, 123, 123, .15); }

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    margin: 1rem 0;
}
.btn-row .btn { flex: 1 1 14rem; }

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

.map-shell {
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--line);
    background: #10152e;
}
#karte { height: 62vh; min-height: 340px; }

.leaflet-container { background: #10152e; font: inherit; }

/*
   Die Kachelebene wird zurückgenommen, damit die Marker die einzigen
   kräftigen Farben auf dem Bildschirm sind. Sonst konkurriert das Orange
   der Marker mit den orangen Landstraßen der OpenStreetMap.
   Ortsnamen und Straßen bleiben lesbar.

   Gefiltert wird nur die Kachelebene. Die Marker darüber liegen in einer
   anderen Ebene und bleiben unverändert.
*/
.karte-hell .leaflet-tile-pane {
    filter: saturate(.12) contrast(1.04) brightness(1.03);
}

/*
   Dunkle Karte im Unterwegs-Modus.

   Achtung beim Ändern dieser Zeile: Die OpenStreetMap-Karte unterscheidet
   Straßen und Flächen nur um wenige Prozent Helligkeit. Wer hier Kontrast
   hinzufügt, drückt mehrere Elemente auf denselben Wert, und dann
   verschwindet das Straßennetz komplett. Genau deshalb steht hier kein
   contrast() und eine Helligkeit über 1.

   Gemessen mit dieser Einstellung (Kontrast zur Landfläche #171b21):
     Straßenrand    3,75:1
     Hauptstraße    9,04:1
     Beschriftung  17,11:1
   Der Untergrund ist ein dunkles Blaugrau, kein reines Schwarz. Das ist
   nachts angenehmer und passt zum Rest der Seite.
*/
.karte-dunkel .leaflet-tile-pane {
    filter: grayscale(1) invert(1) brightness(1.55) sepia(.5) hue-rotate(178deg) saturate(2);
}

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
    background: #141a36;
    color: var(--text);
    box-shadow: 0 8px 26px rgba(0, 0, 0, .5);
}
.leaflet-popup-content-wrapper { border-radius: var(--radius); border: 1px solid var(--line); }
.leaflet-popup-content { margin: .85rem 1rem; font-size: .98rem; line-height: 1.45; }
.leaflet-popup-close-button {
    color: var(--muted) !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 22px !important;
    padding: 4px 0 0 0 !important;
}
.leaflet-control-attribution {
    background: rgba(10, 14, 32, .82) !important;
    color: var(--muted) !important;
}
.leaflet-control-attribution a { color: var(--primary) !important; }
.leaflet-bar a {
    background: #141a36 !important;
    color: var(--text) !important;
    border-bottom-color: var(--line) !important;
    width: 34px !important;
    height: 34px !important;
    line-height: 34px !important;
}

/* Marker */
.mk {
    display: block;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .6);
    position: relative;
}
.mk--lg { width: 38px; height: 38px; border-width: 3px; }

/*
   Bündel: mehrere Adressen, die zu nah beieinander liegen, um sie
   einzeln zu zeigen. Die Zahl ist die Anzahl der Adressen.

   Damit man ein Bündel nicht mit einem Mehrfamilienhaus verwechselt:
   Das Bündel ist größer, hat einen hellen Ring und die Zahl steht
   groß in der Mitte. Beim Mehrfamilienhaus steht eine kleine Zahl
   unten rechts am Rand.
*/
.mk-cluster {
    width: 44px;
    height: 44px;
    border-width: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 0 0 4px rgba(255, 255, 255, .22),
        0 3px 10px rgba(0, 0, 0, .65);
}
.mk-cluster.mk--lg { width: 52px; height: 52px; }

.mk-cluster__zahl {
    font-size: 15px;
    font-weight: 800;
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
    line-height: 1;
}
.mk-cluster.mk--lg .mk-cluster__zahl { font-size: 18px; }
.mk__count {
    position: absolute;
    right: -7px;
    bottom: -7px;
    min-width: 19px;
    height: 19px;
    padding: 0 4px;
    border-radius: 10px;
    background: #141a36;
    border: 1.5px solid #ffffff;
    color: #ffffff;
    font-size: 11px;
    line-height: 16px;
    font-weight: 700;
    text-align: center;
}
.mk--lg .mk__count { min-width: 22px; height: 22px; line-height: 19px; font-size: 12px; }

/*
   Der eigene Standort im Unterwegs-Modus.
   Er muss sich deutlich von den Haus-Markern unterscheiden: kräftiges
   Blau statt Orange, Lila oder Grün, dazu ein Ring, der langsam
   nach außen läuft.
*/
.me-dot {
    position: relative;
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #2f8fff;
    border: 3px solid #ffffff;
    box-shadow:
        0 0 0 2px rgba(0, 0, 0, .5),
        0 0 16px 5px rgba(47, 143, 255, .9);
}

/* Der pulsierende Ring */
.me-dot::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    border-radius: 50%;
    border: 2px solid #6bb4ff;
    animation: me-puls 2.2s ease-out infinite;
}

@keyframes me-puls {
    0%   { transform: scale(1);   opacity: .95; }
    100% { transform: scale(3.4); opacity: 0; }
}

/*
   Wer Bewegung im Browser abgeschaltet hat, bekommt statt des Pulsierens
   einen festen Ring. Sichtbar bleibt der Standort damit trotzdem.
*/
@media (prefers-reduced-motion: reduce) {
    .me-dot::before {
        transform: scale(2.6);
        opacity: .45;
    }
}

/* Popup-Inhalt */
.pop__addr { font-weight: 700; font-size: 1.05rem; margin: 0 0 .3rem; }
.pop__multi { margin: 0 0 .4rem; }

/*
   Die Klingeln einer Adresse. Bei einem Mehrfamilienhaus stehen hier
   mehrere untereinander, sonst nur eine Zeile oder gar keine.
*/
.pop__bells { list-style: none; margin: 0; padding: 0; }
.pop__bells li {
    margin: .25rem 0;
    padding-left: .9rem;
    position: relative;
}
.pop__bells li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .55em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--marker);
}
.pop__bell--symbol { color: var(--muted); font-style: italic; }

/* ---------------- Punkte in der Legende ---------------- */

.chip__dot {
    width: 13px; height: 13px;
    border-radius: 50%;
    flex: none;
}
.dot-marker { background: var(--marker); }
.dot-me { background: var(--tour); }

.count-line { color: var(--muted); font-size: .95rem; margin: .5rem 0; }

/* ---------------- Legende ---------------- */

.legend {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    font-size: .9rem;
    color: var(--muted);
    margin: .8rem 0 0;
    padding: 0;
    list-style: none;
}
.legend li { display: flex; align-items: center; gap: .4rem; }

/*
   Die Legende unter der großen Karte erklärt ganze Sachverhalte, nicht nur
   Farben. Nebeneinander ergäbe das eine Textwand, in der nicht zu erkennen
   ist, wo ein Punkt aufhört. Deshalb hier untereinander.
*/
.legend--spalte { flex-direction: column; gap: .45rem; align-items: flex-start; }
.legend--spalte li { align-items: flex-start; }
.legend--spalte .chip__dot { margin-top: .35rem; }

/* ---------------- Anmeldung im Admin-Bereich ---------------- */

/*
   Das einzige Formular, das es auf der Seite noch gibt. Haushalte tragen
   sich nicht mehr selbst ein, die Einträge kommen über tools/import.php.
*/
.form { margin-top: 1rem; }
.field { margin-bottom: 1.3rem; }
.field > label {
    display: block;
    font-weight: 600;
    margin-bottom: .35rem;
}
.hint { color: var(--muted); font-size: .9rem; margin: .25rem 0 1rem; }

input[type="password"] {
    width: 100%;
    min-height: var(--tap);
    padding: .65rem .8rem;
    border-radius: 10px;
    border: 2px solid var(--line);
    background: #131936;
    color: var(--text);
    font: inherit;
}

/* ---------------- Meldungen ---------------- */

.notice {
    border-radius: var(--radius);
    padding: .9rem 1rem;
    margin: 0 0 1.2rem;
    border: 2px solid var(--line);
    background: var(--surface);
}
.notice--error { border-color: #ff8f8f; background: rgba(255, 143, 143, .12); }
.notice--ok { border-color: var(--ok); background: rgba(61, 220, 151, .12); }
.notice--info { border-color: var(--primary); background: rgba(238, 114, 3, .12); }
.notice p:last-child { margin-bottom: 0; }
.notice ul { margin: .4rem 0 0; padding-left: 1.2rem; }

/* ---------------- Fragen und Antworten ---------------- */

.faq details {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin-bottom: .6rem;
    background: var(--surface);
}
.faq summary {
    min-height: var(--tap);
    display: flex;
    align-items: center;
    padding: .7rem 1rem;
    font-weight: 600;
    cursor: pointer;
}
.faq details[open] summary { border-bottom: 1px solid var(--line); }
.faq .faq__body { padding: .9rem 1rem; }
.faq .faq__body p:last-child { margin-bottom: 0; }

/* ---------------- Tabelle im Admin-Bereich ---------------- */

.table-scroll { overflow-x: auto; margin: 1rem 0; }
table.admin {
    width: 100%;
    border-collapse: collapse;
    font-size: .93rem;
    min-width: 34rem;
}
table.admin th, table.admin td {
    text-align: left;
    padding: .55rem .6rem;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}
table.admin th { color: var(--muted); font-weight: 600; white-space: nowrap; }
table.admin tr:last-child td { border-bottom: 0; }

/* ---------------- Fußbereich ---------------- */

.site-footer {
    border-top: 1px solid var(--line);
    padding: 1.5rem 1rem 2rem;
    text-align: center;
    color: var(--muted);
    font-size: .92rem;
}
.site-footer__logo { height: 40px; width: auto; opacity: .9; }
.site-footer__name { margin: .5rem 0 .6rem; }
.site-footer__links { display: flex; gap: 1.2rem; justify-content: center; }
.site-footer__links a { min-height: 44px; display: inline-flex; align-items: center; }

/* ---------------- Unterwegs-Modus ---------------- */

body.unterwegs { height: 100dvh; overflow: hidden; }

.tour {
    display: flex;
    flex-direction: column;
    height: 100dvh;
}
.tour__bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .6rem;
    background: rgba(8, 11, 26, .95);
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
    flex: none;
}
.tour__titel { margin: 0; font-weight: 600; }
.tour__back {
    flex: none;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 2px solid var(--line);
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    font-size: 1.2rem;
}
.tour__map { flex: 1 1 auto; min-height: 0; }
/*
   Hinweis zum Standort, zum Beispiel wenn die Ortung gerade grob ist.
   Steht über der Fußleiste und ist nur da, wenn es etwas zu sagen gibt.
*/
/* Blau, weil der Hinweis vom Standort handelt und nicht von einem Haus. */
.tour__hinweis {
    flex: none;
    margin: 0;
    padding: .6rem .8rem;
    background: rgba(90, 169, 255, .16);
    border-top: 2px solid var(--tour);
    color: var(--text);
    font-size: .9rem;
    line-height: 1.4;
}
.tour__hinweis[hidden] { display: none; }

.tour__foot {
    flex: none;
    padding: .45rem .7rem calc(.45rem + env(safe-area-inset-bottom));
    background: rgba(8, 11, 26, .95);
    border-top: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: .8rem;
    justify-content: space-between;
}
.tour__foot .legend { margin: 0; font-size: .82rem; }

/*
   Der Knopf ist blau wie der Standortpunkt, den er ansteuert, und wie der
   Knopf, über den man in den Unterwegs-Modus kommt. Orange ist hier die
   Farbe der Häuser auf der Karte und soll das auch bleiben.
*/
.tour__locate {
    flex: none;
    min-height: 44px;
    padding: .5rem .9rem;
    border-radius: 10px;
    border: 2px solid var(--tour);
    background: rgba(90, 169, 255, .18);
    color: var(--text);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

/* ---------------- Größere Bildschirme ---------------- */

@media (min-width: 40rem) {
    body { font-size: 18px; }
    h1 { font-size: 2rem; }
    .wrap { padding: 1.5rem 1.5rem 2.5rem; }
    #karte { height: 60vh; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}