/* ==========================================================================
   LAUTERKNALL — Design System v2
   --------------------------------------------------------------------------
   Haltung: Die Seite ist ein Messinstrument, kein Lifestyle-Produkt.
   Wer hier landet, hat gerade einen Knall gehört und will in Sekunden wissen,
   ob andere ihn auch gehört haben. Darum: Daten zuerst, Dekoration zuletzt.

   Konsequenzen für die Optik:
   - Struktur entsteht durch 1px-Linien und Typografie, nicht durch verschachtelte
     Kacheln mit grossen Radien. Auf Mobile laufen Listen randlos durch, damit
     der Text die volle Zeilenbreite bekommt.
   - Radius maximal 10px. Grosse Radien fressen auf kleinen Displays Platz und
     zwingen Text in schmale Spalten.
   - Rot ist Signalfarbe, nicht Deko: Live-Zustand, Meldeaktion, frische
     Ereignisse. Alles andere ist Tinte auf Papier.
   ========================================================================== */

/* --- Schrift: selbst gehostet (kein Render-blockierender Fremd-CDN) ------- */
@font-face {
    font-family: 'Inter var';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/assets/v2/fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122,
        U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter var';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/assets/v2/fonts/inter-latin-ext-wght-normal.woff2') format('woff2-variations');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Tokens -------------------------------------------------------------- */
:root {
    --ink:        #0c0e12;
    --ink-2:      #414750;
    --ink-3:      #767d89;
    --ink-4:      #9aa1ac;

    --paper:      #ffffff;
    --surface:    #f6f7f9;
    --surface-2:  #eceff3;

    --line:       #e3e6eb;
    --line-2:     #cfd4dc;

    --signal:     #d81824;
    --signal-ink: #a5111a;
    --signal-tint:#fdedee;

    --ok:         #0f7a3d;
    --ok-tint:    #eaf6ee;
    --warn:       #a15c07;
    --warn-tint:  #fdf3e4;

    --night:      #0c0e12;
    --night-2:    #1a1e25;
    --night-line: #2b313b;

    --r-xs: 2px;
    --r-sm: 4px;
    --r-md: 7px;
    --r-lg: 10px;

    --gutter: 16px;
    --shell:  1200px;
    --topbar: 52px;

    --font: 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
            'Helvetica Neue', Arial, sans-serif;
    --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

    --ease: cubic-bezier(0.2, 0, 0.15, 1);
}

@media (min-width: 640px) {
    :root { --gutter: 24px; }
}

/* --- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* Ohne diese Zeile gewinnt jede eigene display-Regel gegen das
   hidden-Attribut: die Ortssuche im Melde-Dialog würde weiterhin alle
   Gemeinden zeigen und der Zurück-Knopf stünde von Anfang an da. */
[hidden] { display: none !important; }

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

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.55;
    font-feature-settings: 'cv05' 1, 'ss03' 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

a {
    color: inherit;
    text-decoration: none;
}

:focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 2px;
    border-radius: var(--r-xs);
}

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

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   Typografie
   ========================================================================== */

/* Nur die Wortmarke und die Seiten-H1 tragen den fetten, engen Duktus.
   Alles andere bleibt ruhig — sonst schreit die Seite überall gleich laut. */
.lk-display {
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.02;
    text-wrap: balance;
}

.lk-h1 {
    font-size: clamp(1.75rem, 6.2vw, 2.7rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.05;
    text-wrap: balance;
}

.lk-h2 {
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.25;
}

.lk-h3 {
    font-size: 0.9375rem;
    font-weight: 650;
    letter-spacing: -0.01em;
}

/* Kleine Grossbuchstaben-Zeile über einem Block. Ersetzt die früheren
   bunten Badges: gleiche Orientierung, ein Bruchteil der visuellen Last. */
.lk-eyebrow {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.lk-lead {
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--ink-2);
    max-width: 62ch;
}

.lk-text  { font-size: 0.9375rem; line-height: 1.6; color: var(--ink-2); }
.lk-small { font-size: 0.8125rem; line-height: 1.5; color: var(--ink-3); }
.lk-micro { font-size: 0.75rem;   line-height: 1.45; color: var(--ink-3); }

/* Zahlen und Zeiten müssen untereinander stehen, sonst zappelt die Liste. */
.lk-num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

.lk-mono {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.75rem;
    letter-spacing: -0.01em;
}

.lk-link {
    color: var(--signal);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    text-decoration-color: color-mix(in srgb, var(--signal) 35%, transparent);
    transition: text-decoration-color 0.15s var(--ease);
}
.lk-link:hover { text-decoration-color: var(--signal); }

.lk-muted { color: var(--ink-3); }

/* ==========================================================================
   Shell & Raster
   ========================================================================== */
.lk-shell {
    width: 100%;
    max-width: var(--shell);
    margin: 0 auto;
    padding-inline: var(--gutter);
}

.lk-shell--narrow { max-width: 780px; }

/* Zweispaltig erst ab 1040px. Darunter würde die Rail den Textkorpus auf
   unlesbare Breite quetschen — schlimmer als keine Rail. */
.lk-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}

@media (min-width: 1040px) {
    .lk-cols {
        grid-template-columns: minmax(0, 1fr) 300px;
        gap: 56px;
    }
}

.lk-rail { display: none; }
@media (min-width: 1040px) {
    .lk-rail {
        display: block;
        position: sticky;
        top: calc(var(--topbar) + 20px);
    }
    .lk-rail > * + * { margin-top: 28px; }
}

/* Randlos auf Mobile: Listen und Karte dürfen die Gutter überschreiben,
   damit Zeilen die ganze Displaybreite nutzen. */
.lk-bleed {
    margin-inline: calc(var(--gutter) * -1);
}
@media (min-width: 640px) {
    .lk-bleed { margin-inline: 0; }
}

.lk-stack > * + * { margin-top: 12px; }
.lk-stack-lg > * + * { margin-top: 24px; }

.lk-section { padding-block: 40px; }
.lk-section--tight { padding-block: 26px; }
.lk-section + .lk-section { border-top: 1px solid var(--line); }

/* Blockkopf: Titel links, Nebenaktion rechts, darunter eine Haarlinie. */
.lk-blockhead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 10px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--ink);
}
.lk-blockhead__title {
    font-size: 0.8125rem;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.lk-blockhead__aside {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ink-3);
    white-space: nowrap;
}

/* ==========================================================================
   Topbar
   ========================================================================== */
.lk-topbar {
    position: sticky;
    top: 0;
    z-index: 900;
    background: var(--night);
    color: #fff;
    border-bottom: 1px solid var(--night-line);
}

.lk-topbar__inner {
    display: flex;
    align-items: center;
    gap: 16px;
    height: var(--topbar);
}

.lk-brand {
    display: inline-flex;
    align-items: baseline;
    font-size: 0.9375rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}
.lk-topbar .lk-brand {
    font-size: 1.375rem;
    letter-spacing: -0.035em;
}
.lk-brand__dot { color: var(--signal); }

.lk-topbar__spacer { flex: 1; }

@media (max-width: 420px) {
    .lk-topbar .lk-brand { font-size: 1.125rem; }
}

.lk-locale {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
}
.lk-locale__bars {
    display: none;
    align-items: center;
    gap: 8px;
}
.lk-locale__pop { position: relative; }
.lk-locale__btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    list-style: none;
    padding: 6px 10px;
    border: 1px solid var(--night-line);
    border-radius: var(--r-sm);
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    cursor: pointer;
    user-select: none;
}
.lk-locale__btn::-webkit-details-marker { display: none; }
.lk-locale__btn::after {
    content: '';
    width: 0;
    height: 0;
    margin-left: 2px;
    border-left: 3.5px solid transparent;
    border-right: 3.5px solid transparent;
    border-top: 4px solid rgba(255, 255, 255, 0.55);
}
.lk-locale__pop[open] .lk-locale__btn {
    background: rgba(255, 255, 255, 0.08);
}
.lk-locale__sep { color: rgba(255, 255, 255, 0.4); font-weight: 500; }
.lk-locale__panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 20;
    width: min(16.5rem, calc(100vw - 32px));
    padding: 10px;
    background: var(--night-2);
    border: 1px solid var(--night-line);
    border-radius: var(--r-md);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}
.lk-locale__label {
    margin: 8px 8px 4px;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}
.lk-locale__label:first-child { margin-top: 2px; }
.lk-locale__list { display: grid; gap: 2px; }
.lk-locale__list a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.875rem;
    font-weight: 600;
}
.lk-locale__list a span {
    width: 1.6rem;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.6875rem;
    font-weight: 750;
    letter-spacing: 0.04em;
}
.lk-locale__list a:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.lk-locale__list a[aria-current] {
    background: var(--signal);
    color: #fff;
}
.lk-locale__list a[aria-current] span { color: rgba(255, 255, 255, 0.75); }

@media (min-width: 720px) {
    .lk-locale__pop { display: none; }
    .lk-locale__bars { display: flex; }
}

/* Ländermenü als Text, nicht als Flaggen-Emoji: Emoji rendern je Plattform
   unterschiedlich gross und rutschen aus der Baseline. */
.lk-countries {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--night-line);
    border-radius: var(--r-sm);
    overflow: hidden;
}
.lk-countries a {
    padding: 5px 9px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.55);
    transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.lk-countries a + a { border-left: 1px solid var(--night-line); }
.lk-countries a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.lk-countries a[aria-current] { color: #fff; background: var(--signal); }

/* Zweite Zeile: die eigentliche Navigation. Auf Mobile horizontal scrollbar
   statt Burger-Menü — ein Tap statt zwei, und Google sieht die Links direkt. */
.lk-navbar {
    position: sticky;
    top: var(--topbar);
    z-index: 880;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
}

.lk-nav {
    display: flex;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.lk-nav::-webkit-scrollbar { display: none; }

.lk-nav a {
    position: relative;
    flex: none;
    padding: 12px 12px 10px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ink-2);
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.lk-nav a:first-child { padding-left: 0; }
.lk-nav a:hover { color: var(--ink); }
.lk-nav a[aria-current] {
    color: var(--ink);
    font-weight: 700;
    border-bottom-color: var(--signal);
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.lk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 16px;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    background: none;
    font-size: 0.875rem;
    font-weight: 650;
    letter-spacing: -0.005em;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s var(--ease), border-color 0.15s var(--ease),
                color 0.15s var(--ease), transform 0.08s var(--ease);
}
.lk-btn:active { transform: translateY(1px); }
.lk-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.lk-btn[disabled]:active { transform: none; }

.lk-btn--primary {
    background: var(--signal);
    color: #fff;
}
.lk-btn--primary:hover { background: var(--signal-ink); }

.lk-btn--dark {
    background: var(--ink);
    color: #fff;
}
.lk-btn--dark:hover { background: var(--night-2); }

.lk-btn--outline {
    border-color: var(--line-2);
    background: var(--paper);
    color: var(--ink);
}
.lk-btn--outline:hover { border-color: var(--ink); background: var(--surface); }

.lk-btn--quiet {
    color: var(--ink-2);
    padding-inline: 10px;
}
.lk-btn--quiet:hover { background: var(--surface-2); color: var(--ink); }

.lk-btn--block { width: 100%; }
.lk-btn--sm { padding: 7px 11px; font-size: 0.75rem; }
.lk-btn--lg { padding: 14px 22px; font-size: 1rem; }

/* Die eine Handlung, um die es auf dieser Website geht.
   Grosszügige Fläche, aber flach — kein 12px-Bodenrand, kein 3rem-Radius. */
.lk-report {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 18px 20px;
    border: 0;
    border-radius: var(--r-md);
    background: var(--signal);
    color: #fff;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s var(--ease), transform 0.08s var(--ease);
}
.lk-report:hover { background: var(--signal-ink); }
.lk-report:active { transform: translateY(1px); }

.lk-report__label {
    font-size: clamp(1.125rem, 4.4vw, 1.375rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
}
.lk-report__hint {
    display: block;
    margin-top: 3px;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0;
    color: rgba(255, 255, 255, 0.78);
}
.lk-report__arrow {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    font-size: 1rem;
}

.lk-report[data-state="blocked"] {
    background: var(--surface-2);
    color: var(--ink-2);
    cursor: not-allowed;
}
.lk-report[data-state="blocked"] .lk-report__hint { color: var(--ink-3); }
.lk-report[data-state="blocked"] .lk-report__arrow {
    background: rgba(12, 14, 18, 0.08);
}

/* ==========================================================================
   Live-Indikator & Datenzeile
   ========================================================================== */
.lk-live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.6875rem;
    font-weight: 750;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--signal);
}
.lk-live__dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--signal);
    animation: lk-breathe 2.4s ease-in-out infinite;
}
@keyframes lk-breathe {
    0%, 100% { opacity: 1;   box-shadow: 0 0 0 0 rgba(216, 24, 36, 0.45); }
    50%      { opacity: 0.6; box-shadow: 0 0 0 5px rgba(216, 24, 36, 0); }
}

/* Kennzahlen als eine Zeile mit Trennlinien statt als vier Kacheln. */
.lk-figures {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--paper);
}
.lk-figure { padding: 12px 14px; }
.lk-figure + .lk-figure { border-left: 1px solid var(--line); }
.lk-figure__value {
    display: block;
    font-size: 1.375rem;
    font-weight: 750;
    letter-spacing: -0.03em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.lk-figure__label {
    display: block;
    margin-top: 2px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--ink-3);
}
.lk-figure--hot .lk-figure__value { color: var(--signal); }

/* ==========================================================================
   Karte
   ========================================================================== */
.lk-map {
    position: relative;
    background: var(--surface-2);
    border-block: 1px solid var(--line);
    isolation: isolate;
}
@media (min-width: 640px) {
    .lk-map {
        border: 1px solid var(--line);
        border-radius: var(--r-md);
        overflow: hidden;
    }
}

.lk-map__stage { position: relative; z-index: 1; }

.lk-map__canvas {
    height: 62vw;
    min-height: 280px;
    max-height: 380px;
    width: 100%;
    background: var(--surface-2);
}
@media (min-width: 640px) { .lk-map__canvas { height: 400px; max-height: none; } }
@media (min-width: 1040px) { .lk-map__canvas { height: 460px; } }

/* Vollbild: kein modaler Dialog, sondern die Karte nimmt den Viewport ein.
   Der Zeitregler bleibt dabei am selben Platz — kein Umlernen. */
.lk-map.is-full {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    border: 0;
    border-radius: 0;
    margin: 0;
}
.lk-map.is-full .lk-map__stage {
    flex: 1;
    min-height: 0;
}
.lk-map.is-full .lk-map__canvas {
    height: 100%;
    max-height: none;
}
body.lk-map-open { overflow: hidden; }

.lk-map__tools {
    position: absolute;
    top: 10px; right: 10px;
    z-index: 500;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lk-maptool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 10px;
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(6px);
    font-size: 0.6875rem;
    font-weight: 650;
    color: var(--ink);
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(12, 14, 18, 0.08);
    transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.lk-maptool--icon {
    width: 34px;
    height: 34px;
    padding: 0;
}
.lk-maptool--icon[aria-busy="true"] { opacity: 0.55; }
.lk-maptool:hover { background: #fff; color: var(--signal); }
.lk-maptool[aria-pressed="true"] {
    background: var(--signal);
    border-color: var(--signal);
    color: #fff;
}
.lk-mapfilter {
    position: absolute;
    top: 10px;
    right: 52px;
    z-index: 500;
    width: min(220px, calc(100% - 62px));
    padding: 8px;
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(6px);
    box-shadow: 0 8px 24px rgba(12, 14, 18, 0.12);
}
.lk-mapfilter__title {
    margin: 0 4px 6px;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.lk-mapfilter__opt {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 7px 8px;
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 0.8125rem;
    text-align: left;
    cursor: pointer;
}
.lk-mapfilter__opt:hover { background: var(--surface); }
.lk-mapfilter__opt.is-on {
    background: var(--signal-tint);
    color: var(--signal-ink);
    font-weight: 650;
}
.lk-mapfilter__opt .lk-glyph { font-size: 1rem; }

/* Legende: die Karte erklärt sich selbst. Vorher musste man raten, was
   grosse Kreise gegenüber kleinen Punkten bedeuten.

   Auf dem Telefon steht sie als Streifen über der Karte statt als Kasten
   darin: ein 150px breites Overlay verdeckt auf 390px Displaybreite einen
   Viertel der Karte — genau den Teil, den man sehen will. */
.lk-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 14px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--line);
    background: var(--paper);
    font-size: 0.6875rem;
    line-height: 1.35;
}
.lk-legend__row {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--ink-2);
    font-weight: 550;
}
.lk-legend__note { color: var(--ink-3); }

@media (min-width: 640px) {
    .lk-legend {
        position: absolute;
        top: 10px; left: 10px;
        z-index: 500;
        display: block;
        padding: 8px 10px;
        border: 1px solid var(--line-2);
        border-radius: var(--r-sm);
        background: rgba(255, 255, 255, 0.94);
        backdrop-filter: blur(6px);
        box-shadow: 0 1px 2px rgba(12, 14, 18, 0.08);
    }
    .lk-legend__row + .lk-legend__row,
    .lk-legend__note { margin-top: 5px; }
}
.lk-legend__swatch {
    flex: none;
    width: 12px; height: 12px;
    border-radius: 50%;
}
.lk-legend__swatch--hot {
    background: #d01824;
    border: 1.5px solid #9b1018;
}
.lk-legend__swatch--mid {
    background: #e85d04;
    border: 1.5px solid #b44503;
}
.lk-legend__swatch--old {
    background: #e0b000;
    border: 1.5px solid #a07c00;
}
.lk-legend__swatch--area {
    width: 15px; height: 15px;
    background: rgba(224, 176, 0, 0.16);
    border: 1.5px dashed #a07c00;
}

/* Zeitregler — jetzt immer sichtbar, nicht nur im Vollbild. Das war der
   grösste blinde Fleck: die Zeitreise war ein Geheimfeature. */
.lk-scrub {
    position: relative;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    background: var(--paper);
    border-top: 1px solid var(--line);
}
.lk-map.is-full .lk-scrub {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(8px);
    padding-bottom: max(9px, env(safe-area-inset-bottom));
}

.lk-scrub__btn {
    flex: none;
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    background: var(--paper);
    font-size: 0.6875rem;
    cursor: pointer;
    transition: border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.lk-scrub__btn:hover { border-color: var(--ink); color: var(--signal); }
.lk-scrub__btn[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); }
.lk-scrub__span { position: relative; flex: none; }
.lk-spanmenu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 6px);
    z-index: 30;
    display: grid;
    min-width: 9.5rem;
    padding: 4px;
    background: var(--paper);
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    box-shadow: 0 10px 28px rgba(12, 14, 18, 0.12);
}
.lk-spanmenu__opt {
    display: block;
    width: 100%;
    padding: 7px 10px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--ink);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}
.lk-spanmenu__opt:hover { background: var(--surface); }
.lk-spanmenu__opt.is-on { background: var(--ink); color: #fff; }
.lk-scrub__meta {
    min-width: 2.6rem;
    padding: 0 6px;
    font-family: var(--mono);
    font-size: 0.6875rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

.lk-scrub__track { flex: 1; min-width: 0; }

.lk-scrub__range {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 18px;
    background: none;
    cursor: pointer;
}
.lk-scrub__range::-webkit-slider-runnable-track {
    height: 3px;
    border-radius: 2px;
    background: var(--line-2);
}
.lk-scrub__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 15px; height: 15px;
    margin-top: -6px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--signal);
    box-shadow: 0 1px 3px rgba(12, 14, 18, 0.3);
}
.lk-scrub__range::-moz-range-track {
    height: 3px;
    border-radius: 2px;
    background: var(--line-2);
}
.lk-scrub__range::-moz-range-thumb {
    width: 15px; height: 15px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--signal);
}

.lk-scrub__time {
    flex: none;
    min-width: 96px;
    text-align: right;
    font-family: var(--mono);
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    color: var(--ink-2);
    white-space: nowrap;
}
.lk-scrub__time[data-live="1"] { color: var(--signal); font-weight: 700; }

.lk-scrub__live {
    flex: none;
    padding: 6px 9px;
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    background: var(--paper);
    font-size: 0.625rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
    cursor: pointer;
}
.lk-scrub__live[aria-pressed="true"] {
    background: var(--signal);
    border-color: var(--signal);
    color: #fff;
}

/* Trefferfläche grösser als der sichtbare Punkt — sonst sind 11px kaum tappbar. */
.lk-pinwrap {
    background: none !important;
    border: none !important;
    display: grid;
    place-items: center;
}
.leaflet-marker-icon.lk-pinwrap { cursor: pointer; }

/* Marker wie auf einer Blitzkarte: viele kleine Einschläge, Farbe = Alter. */
.lk-pin {
    cursor: pointer;
    border-radius: 50%;
    background: rgba(216, 24, 36, 0.55);
    border: 1.5px solid #9b1018;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55) inset, 0 0 8px rgba(216, 24, 36, 0.35);
    transition: transform 0.12s var(--ease);
}
.lk-pin:hover { transform: scale(1.18); }
.lk-pin--mid {
    background: rgba(232, 93, 4, 0.6);
    border-color: #b44503;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5) inset, 0 0 7px rgba(232, 93, 4, 0.4);
}
.lk-pin--old {
    background: rgba(224, 176, 0, 0.7);
    border-color: #a07c00;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.45) inset, 0 0 6px rgba(224, 176, 0, 0.4);
}
.lk-pin--hot { animation: lk-ping 2.2s ease-out infinite; }
@keyframes lk-ping {
    0%   { box-shadow: 0 0 0 0 rgba(216, 24, 36, 0.45); }
    70%  { box-shadow: 0 0 0 12px rgba(216, 24, 36, 0); }
    100% { box-shadow: 0 0 0 0 rgba(216, 24, 36, 0); }
}
.lk-pin__count {
    display: grid;
    place-items: center;
    width: 100%; height: 100%;
    font-family: var(--font);
    font-size: 0.625rem;
    font-weight: 750;
    color: #fff;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}
.lk-pin--old .lk-pin__count { color: #3d2f00; text-shadow: none; }

/* Ortsungenauer Marker: gestrichelt = "irgendwo in dieser Gemeinde". */
.lk-pin--area {
    background: rgba(216, 24, 36, 0.18);
    border-style: dashed;
}
.lk-pin--area.lk-pin--mid {
    background: rgba(232, 93, 4, 0.2);
}
.lk-pin--area.lk-pin--old {
    background: rgba(224, 176, 0, 0.22);
}

/* Einzelne GPS-Meldung: satter Kernpunkt. */
.lk-pin--single {
    background: #d01824;
    border-color: #fff;
    border-width: 2px;
    box-shadow: 0 0 8px rgba(216, 24, 36, 0.55);
}
.lk-pin--single.lk-pin--mid {
    background: #e85d04;
    box-shadow: 0 0 7px rgba(232, 93, 4, 0.5);
}
.lk-pin--single.lk-pin--old {
    background: #e0b000;
    box-shadow: 0 0 6px rgba(224, 176, 0, 0.45);
}

/* Ausgewählt und "gehört zum selben Ereignis": macht die Streuung eines
   Knalls über mehrere Standorte sichtbar. */
.lk-pin--active {
    transform: scale(1.25);
    border-color: var(--ink);
    border-width: 2.5px;
    z-index: 1;
}
.lk-pin--linked {
    border-color: var(--ink);
    border-style: solid;
    box-shadow: 0 0 0 3px rgba(12, 14, 18, 0.16);
}

/* ==========================================================================
   Karten-Detail als zentriertes Modal
   Ersetzt Leaflet-Popups: die klebten am Marker, wurden vom Displayrand
   abgeschnitten und boten keinen Platz für Handlungen.
   ========================================================================== */
.lk-sheet {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 1200;
    width: min(400px, calc(100vw - 32px));
    max-height: min(82vh, 640px);
    background: var(--paper);
    border: 1px solid var(--line-2);
    border-radius: var(--r-md);
    box-shadow: 0 18px 48px rgba(12, 14, 18, 0.22);
    transform: translate(-50%, -46%) scale(0.98);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.22s var(--ease), opacity 0.22s var(--ease);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
}
.lk-sheet.is-open {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    pointer-events: auto;
}

.lk-sheet__grip { display: none; }

.lk-sheet__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--line);
}
.lk-sheet__body { padding: 14px 16px 16px; }
.lk-sheet__close {
    flex: none;
    display: grid;
    place-items: center;
    width: 28px; height: 28px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--paper);
    color: var(--ink-3);
    cursor: pointer;
}
.lk-sheet__close:hover { border-color: var(--ink); color: var(--ink); }

.lk-sheet__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 14px;
}

.lk-scrim {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(12, 14, 18, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s var(--ease);
}
.lk-scrim.is-open { opacity: 1; pointer-events: auto; }

/* ==========================================================================
   Ereignis-Liste
   Zeilen mit Haarlinien statt Kacheln. Auf 360px Breite gewinnt der Text
   dadurch rund 60px — genau das Problem, das die runden Kacheln erzeugt haben.
   ========================================================================== */
.lk-feed { border-top: 1px solid var(--line); }

.lk-event {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    column-gap: 12px;
    padding: 14px var(--gutter);
    border-bottom: 1px solid var(--line);
    background: var(--paper);
    transition: background 0.15s var(--ease);
}
@media (min-width: 640px) {
    .lk-event { padding-inline: 14px; grid-template-columns: 54px minmax(0, 1fr); }
}
.lk-event:hover { background: var(--surface); }

.lk-event--own {
    background: var(--ok-tint);
    box-shadow: inset 3px 0 0 var(--ok);
}
.lk-event--own:hover { background: var(--ok-tint); }

/* Zeitspalte links, monospaced: die Liste wird dadurch scanbar wie ein
   Fahrplan. Uhrzeit oben, relative Angabe darunter. */
.lk-event__when {
    padding-top: 1px;
    text-align: left;
}
.lk-event__clock {
    display: block;
    font-family: var(--mono);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.lk-event__ago {
    display: block;
    margin-top: 1px;
    font-size: 0.625rem;
    color: var(--ink-4);
    white-space: nowrap;
}
.lk-event--hot .lk-event__clock { color: var(--signal); }

.lk-event__main { min-width: 0; }

.lk-event__title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--ink);
}
.lk-glyph {
    display: inline-block;
    line-height: 1;
    font-style: normal;
    font-weight: 400;
}
.lk-event__title:hover { color: var(--signal); }

.lk-event__place {
    margin-top: 2px;
    font-size: 0.8125rem;
    color: var(--ink-2);
}
.lk-event__place strong { font-weight: 650; color: var(--ink); }

.lk-event__aside {
    margin-top: 3px;
    font-size: 0.75rem;
    color: var(--ink-3);
}

.lk-event__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

/* Anzahl der Meldungen — das wichtigste Signal für "war das ein Ereignis
   oder nur einer?". */
.lk-count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 6px;
    border-radius: var(--r-xs);
    background: var(--signal);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}
.lk-count--quiet { background: var(--surface-2); color: var(--ink-2); }

.lk-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border: 1px solid var(--line);
    border-radius: var(--r-xs);
    background: var(--paper);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--ink-2);
    white-space: nowrap;
}
.lk-tag--own {
    border-color: var(--ok);
    background: var(--ok-tint);
    color: var(--ok);
    font-weight: 700;
}

.lk-empty {
    padding: 32px var(--gutter);
    border-bottom: 1px solid var(--line);
    text-align: center;
}
.lk-empty__title { font-size: 0.9375rem; font-weight: 650; }
.lk-empty__text { margin-top: 5px; font-size: 0.8125rem; color: var(--ink-3); }

/* ==========================================================================
   Panels, Listen, Balken
   ========================================================================== */
.lk-panel {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--paper);
}
.lk-panel__head {
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
}
.lk-panel__body { padding: 14px; }
.lk-panel--tinted { background: var(--surface); }
.lk-panel--night {
    background: var(--night);
    border-color: var(--night-line);
    color: #fff;
}
.lk-panel--night .lk-panel__head { border-color: var(--night-line); }

.lk-list { border-top: 1px solid var(--line); }
.lk-list__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
    font-size: 0.875rem;
    transition: background 0.15s var(--ease);
}
.lk-list__item:hover { background: var(--surface); }
.lk-list__item strong { font-weight: 650; }
.lk-list__meta {
    flex: none;
    font-family: var(--mono);
    font-size: 0.6875rem;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

/* Ursachenverteilung: ein Balken pro Typ, Zahl rechts.
   Keine Prozent-Donuts, keine Farbcodes zum Nachschlagen. */
.lk-bars > * + * { margin-top: 10px; }
.lk-bar__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
    font-size: 0.8125rem;
}
.lk-bar__name { font-weight: 600; }
.lk-bar__val {
    font-family: var(--mono);
    font-size: 0.6875rem;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}
.lk-bar__track {
    height: 6px;
    border-radius: 3px;
    background: var(--surface-2);
    overflow: hidden;
}
.lk-bar__fill {
    height: 100%;
    border-radius: 3px;
    background: var(--signal);
}
.lk-bar:nth-child(n+2) .lk-bar__fill { background: var(--ink-2); }
.lk-bar:nth-child(n+4) .lk-bar__fill { background: var(--ink-4); }
button.lk-bar {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    border-radius: 6px;
}
button.lk-bar:hover .lk-bar__name,
button.lk-bar:focus-visible .lk-bar__name { color: var(--signal); }
button.lk-bar:focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 3px;
}

/* ==========================================================================
   Hinweise
   ========================================================================== */
.lk-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--ink-3);
    border-radius: var(--r-sm);
    background: var(--surface);
    font-size: 0.875rem;
    line-height: 1.5;
}
.lk-note--ok      { border-left-color: var(--ok);     background: var(--ok-tint);     border-color: color-mix(in srgb, var(--ok) 22%, var(--line)); }
.lk-note--warn    { border-left-color: var(--warn);   background: var(--warn-tint);   border-color: color-mix(in srgb, var(--warn) 22%, var(--line)); }
.lk-note--signal  { border-left-color: var(--signal); background: var(--signal-tint); border-color: color-mix(in srgb, var(--signal) 22%, var(--line)); }
.lk-note__title { font-weight: 700; }

/* Grossereignis: die einzige Stelle, an der die Seite laut werden darf. */
.lk-major {
    display: block;
    padding: 14px 16px;
    border: 1px solid var(--signal);
    border-left-width: 4px;
    border-radius: var(--r-sm);
    background: var(--signal-tint);
    transition: background 0.15s var(--ease);
}
.lk-major + .lk-major { margin-top: 8px; }
.lk-major:hover { background: color-mix(in srgb, var(--signal) 10%, #fff); }
.lk-major__title {
    font-size: 1rem;
    font-weight: 750;
    letter-spacing: -0.02em;
    color: var(--signal-ink);
}
.lk-major__meta {
    margin-top: 3px;
    font-size: 0.8125rem;
    color: var(--ink-2);
}

/* ==========================================================================
   Werbeflächen
   --------------------------------------------------------------------------
   Drei harte Anforderungen:
   1. Platz ist im Layout reserviert (min-height) — sonst springt der Inhalt
      beim Nachladen und ruiniert CLS.
   2. Immer als "Anzeige" gekennzeichnet, weil AdSense das verlangt.
   3. Deutlicher Abstand zu Bedienelementen. Ein Werbeblock direkt unter dem
      Melde-Button erzeugt Fehlklicks — genau das, wofür Konten gesperrt werden.
   ========================================================================== */
.lk-ad {
    margin-block: 28px;
    padding-block: 8px;
    border-block: 1px solid var(--line);
    text-align: center;
}
.lk-ad--rail {
    margin: 0;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
}
/* In der Ereignisliste sitzt die Anzeige als eigene Zeile — gleiche
   Innenabstände wie eine Meldung, klar abgetrennt durch die Haarlinien. */
.lk-feed > .lk-ad {
    margin: 0;
    padding: 18px var(--gutter);
    border-top: 0;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}
@media (min-width: 640px) {
    .lk-feed > .lk-ad { padding-inline: 14px; }
}
.lk-ad__label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-4);
}
.lk-ad__frame {
    display: block;
    width: 100%;
    overflow: hidden;
}
/* Reservierte Höhen je Platzierung – entsprechen den gängigen Formaten. */
.lk-ad__frame[data-slot="feed"]   { min-height: 280px; }
.lk-ad__frame[data-slot="banner"] { min-height: 100px; }
.lk-ad__frame[data-slot="rail"]   { min-height: 600px; }
.lk-ad__frame > ins { display: block; width: 100%; }

/* Solange in AdSense keine Slot-ID hinterlegt ist, bleibt die Fläche leer
   statt einen kaputten Anzeigenblock auszuliefern. */
.lk-ad--reserved .lk-ad__frame {
    display: grid;
    place-items: center;
    border: 1px dashed var(--line-2);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--ink-4);
    font-size: 0.8125rem;
}
.lk-ad__offer {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-height: inherit;
    padding: 16px;
    color: inherit;
    text-decoration: none;
}
.lk-ad__offer:hover,
.lk-ad__offer:focus-visible {
    color: var(--signal);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ==========================================================================
   Melde-Dialog
   Bottom-Sheet auf Mobile, zentriert ab Tablet. Kein Vollbild-Blur-Overlay
   mit 4rem-Radius mehr.
   ========================================================================== */
.lk-dialog {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: none;
}
.lk-dialog.is-open { display: block; }

.lk-dialog__scrim {
    position: absolute;
    inset: 0;
    background: rgba(12, 14, 18, 0.5);
}

.lk-dialog__panel {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    display: flex;
    flex-direction: column;
    max-height: 88vh;
    background: var(--paper);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    overflow: hidden;
    animation: lk-rise 0.24s var(--ease);
}
@keyframes lk-rise { from { transform: translateY(14px); opacity: 0.6; } }

@media (min-width: 640px) {
    .lk-dialog__panel {
        left: 50%; right: auto; bottom: auto; top: 50%;
        width: 460px;
        max-height: 84vh;
        transform: translate(-50%, -50%);
        border: 1px solid var(--line-2);
        border-radius: var(--r-md);
    }
    @keyframes lk-rise {
        from { transform: translate(-50%, calc(-50% + 10px)); opacity: 0.6; }
    }
}

.lk-dialog__head {
    flex: none;
    padding: 16px var(--gutter) 13px;
    border-bottom: 1px solid var(--line);
}
.lk-dialog__step {
    display: block;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--signal);
}
.lk-dialog__title {
    margin-top: 5px;
    font-size: 1.25rem;
    font-weight: 750;
    letter-spacing: -0.03em;
    line-height: 1.15;
}
.lk-dialog__sub { margin-top: 5px; font-size: 0.8125rem; color: var(--ink-3); }

.lk-dialog__scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.lk-dialog__note {
    padding: 16px var(--gutter) 20px;
}
.lk-dialog__note .lk-btn {
    width: 100%;
}

.lk-dialog__foot {
    flex: none;
    display: flex;
    gap: 10px;
    padding: 12px var(--gutter);
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: var(--paper);
}

.lk-search {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 12px var(--gutter);
    background: var(--paper);
    border-bottom: 1px solid var(--line);
}
.lk-input {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    background: var(--paper);
    font: inherit;
    font-size: 0.9375rem;
    color: var(--ink);
}
.lk-input:focus {
    outline: none;
    border-color: var(--ink);
    box-shadow: 0 0 0 3px rgba(12, 14, 18, 0.07);
}
.lk-input::placeholder { color: var(--ink-4); }

/* Auswahlzeile: Ort oder Geräuschtyp. Eine Zeile, ganze Breite tappbar,
   48px hoch — Fitts' law statt dekorativer Kacheln. */
.lk-pick {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 13px var(--gutter);
    border: 0;
    border-bottom: 1px solid var(--line);
    background: var(--paper);
    text-align: left;
    cursor: pointer;
    transition: background 0.12s var(--ease);
}
.lk-pick:hover, .lk-pick:focus-visible { background: var(--surface); }
.lk-pick__icon {
    flex: none;
    width: 30px;
    font-size: 1.25rem;
    line-height: 1;
    text-align: center;
}
.lk-pick__body { flex: 1; min-width: 0; }
.lk-pick__name {
    display: block;
    font-size: 0.9375rem;
    font-weight: 650;
    letter-spacing: -0.01em;
}
.lk-pick__note {
    display: block;
    margin-top: 1px;
    font-size: 0.75rem;
    color: var(--ink-3);
}
.lk-pick__meta {
    flex: none;
    font-family: var(--mono);
    font-size: 0.6875rem;
    color: var(--ink-4);
    font-variant-numeric: tabular-nums;
}
.lk-pick--primary {
    background: var(--signal-tint);
    box-shadow: inset 3px 0 0 var(--signal);
}
.lk-pick--primary:hover { background: color-mix(in srgb, var(--signal) 9%, #fff); }
.lk-pick--primary .lk-pick__name { color: var(--signal-ink); }

.lk-pick__empty {
    padding: 24px var(--gutter);
    font-size: 0.875rem;
    color: var(--ink-3);
    text-align: center;
}

/* ==========================================================================
   Formulare
   ========================================================================== */
.lk-form { display: flex; flex-direction: column; gap: 10px; }
.lk-form__row { display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 480px) {
    .lk-form__row { flex-direction: row; }
    .lk-form__row .lk-input { flex: 1; min-width: 0; }
}
.lk-panel--night .lk-input {
    background: var(--night-2);
    border-color: var(--night-line);
    color: #fff;
}
.lk-panel--night .lk-input::placeholder { color: #6b7382; }
.lk-panel--night .lk-input:focus {
    border-color: #fff;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}
.lk-nl__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}
@media (min-width: 560px) {
    .lk-nl__grid { grid-template-columns: 1.1fr 1.4fr 1fr; }
}
.lk-nl__field span {
    display: block;
    margin-bottom: 5px;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8b93a2;
}
.lk-panel--night .lk-nl__field select.lk-input {
    color-scheme: dark;
}

/* ==========================================================================
   Prosa (Wissens- und SEO-Blöcke)
   ========================================================================== */
.lk-prose {
    max-width: 68ch;
    font-size: 1rem;
    line-height: 1.68;
    color: var(--ink-2);
}
.lk-prose > * + * { margin-top: 1em; }
.lk-prose h2 {
    margin-top: 1.9em;
    font-size: 1.1875rem;
    font-weight: 750;
    letter-spacing: -0.02em;
    color: var(--ink);
}
.lk-prose h3 {
    margin-top: 1.5em;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
}
.lk-prose strong { color: var(--ink); font-weight: 650; }
.lk-prose ul { padding-left: 1.15em; list-style: disc; }
.lk-prose li + li { margin-top: 0.35em; }
.lk-prose a { color: var(--signal); text-decoration: underline; text-underline-offset: 0.15em; }

/* ==========================================================================
   Footer
   ========================================================================== */
.lk-footer {
    margin-top: 56px;
    background: var(--night);
    color: #fff;
    border-top: 1px solid var(--night-line);
}
.lk-footer__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 20px;
    padding-block: 40px;
}
@media (min-width: 780px) {
    .lk-footer__grid { grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 40px; }
}
.lk-footer__title {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #7d8595;
}
.lk-footer__links { margin-top: 12px; }
.lk-footer__links li + li { margin-top: 8px; }
.lk-footer__links a {
    font-size: 0.875rem;
    color: #d3d8e0;
    transition: color 0.15s var(--ease);
}
.lk-footer__links a:hover { color: #fff; }
.lk-footer__note {
    margin-top: 12px;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: #8b93a2;
}
.lk-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-block: 18px;
    border-top: 1px solid var(--night-line);
    font-size: 0.75rem;
    color: #7d8595;
}
.lk-footer__emergency {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 650;
    color: #ff8a90;
}

/* ==========================================================================
   Leaflet-Anpassungen
   ========================================================================== */
.leaflet-container {
    font-family: var(--font);
    background: var(--surface-2);
}
.leaflet-control-zoom {
    border: 1px solid var(--line-2) !important;
    border-radius: var(--r-sm) !important;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(12, 14, 18, 0.08) !important;
}
.leaflet-control-zoom a {
    width: 28px !important;
    height: 28px !important;
    line-height: 28px !important;
    color: var(--ink) !important;
    background: rgba(255, 255, 255, 0.94) !important;
    border: 0 !important;
    font-weight: 600;
}
.leaflet-control-zoom a:hover { background: #fff !important; color: var(--signal) !important; }
.leaflet-control-zoom a + a { border-top: 1px solid var(--line) !important; }

/* Attribution ist Lizenzpflicht von OSM und CARTO — bleibt sichtbar,
   nur optisch zurückgenommen. */
.leaflet-control-attribution {
    background: rgba(255, 255, 255, 0.82) !important;
    font-size: 9px !important;
    color: var(--ink-4) !important;
    padding: 1px 5px !important;
}
.leaflet-control-attribution a { color: var(--ink-3) !important; }

/* ==========================================================================
   Hilfsklassen (bewusst wenige)
   ========================================================================== */
.lk-hide  { display: none !important; }
.lk-flex  { display: flex; }
.lk-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lk-wrap  { display: flex; flex-wrap: wrap; gap: 8px; }
.lk-mt-0  { margin-top: 0 !important; }
.lk-mt-4  { margin-top: 4px; }
.lk-mt-8  { margin-top: 8px; }
.lk-mt-12 { margin-top: 12px; }
.lk-mt-16 { margin-top: 16px; }
.lk-mt-24 { margin-top: 24px; }
.lk-mt-32 { margin-top: 32px; }

/* ==========================================================================
   Artikel, Kommentare, Statistik, 404
   ========================================================================== */
.lk-card {
    display: block;
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
    color: inherit;
}
.lk-card:first-child { padding-top: 0; }
.lk-card__title {
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
}
.lk-card:hover .lk-card__title { color: var(--signal); }
.lk-card__teaser { margin-top: 6px; color: var(--ink-2); font-size: 0.9375rem; }
.lk-card__meta { margin-top: 8px; font-size: 0.75rem; color: var(--ink-3); }

.lk-comment {
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
}
.lk-comment__head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.lk-comment__head-end { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.lk-comment--ident {
    padding-left: 12px;
    border-left: 3px solid var(--ok);
}
.lk-idents {
    border: 1px solid var(--ok);
    border-radius: var(--r-md);
    background: var(--ok-tint);
    padding: 12px 14px;
}
.lk-idents__item {
    margin: 10px 0 0;
    padding: 0;
    border: 0;
}
.lk-idents__item p { margin: 0; font-size: 0.9375rem; line-height: 1.45; }
.lk-idents__item cite {
    display: block;
    margin-top: 4px;
    font-style: normal;
    font-size: 0.75rem;
    color: var(--ink-3);
}
.lk-comment__name { font-weight: 700; font-size: 0.875rem; }
.lk-comment__when { font-size: 0.75rem; color: var(--ink-4); }
.lk-comment__body { margin-top: 8px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.9375rem; line-height: 1.55; }
.lk-comment__body .lk-link { font-weight: 550; }
.lk-comment__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.lk-vote {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--ink-2);
    font-size: 0.75rem;
    font-weight: 650;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.15s var(--ease), color 0.15s var(--ease), background 0.15s var(--ease);
}
.lk-vote:hover { border-color: var(--ink); color: var(--ink); background: #fff; }
.lk-vote.vote-up.is-on,
.lk-vote.vote-up.bg-green-100 {
    border-color: var(--ok);
    background: var(--ok-tint);
    color: var(--ok);
}
.lk-vote.vote-down.is-on,
.lk-vote.vote-down.bg-red-100 {
    border-color: var(--signal);
    background: var(--signal-tint);
    color: var(--signal);
}
.lk-comment__reply {
    appearance: none;
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 10px;
    border: 0;
    border-radius: var(--r-sm);
    background: none;
    color: var(--ink-2);
    font-size: 0.75rem;
    font-weight: 650;
    cursor: pointer;
}
.lk-comment__reply:hover { color: var(--signal); background: var(--signal-tint); }
.hidden { display: none !important; }
.lk-replies { margin-left: 16px; padding-left: 14px; border-left: 2px solid var(--line); }

.lk-filters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
@media (min-width: 720px) {
    .lk-filters { grid-template-columns: minmax(10rem, 14rem) minmax(12rem, 22rem); }
}
.lk-filter span {
    display: block;
    margin-bottom: 6px;
    font-size: 0.75rem;
    font-weight: 650;
    color: var(--ink-3);
}
.lk-filter .lk-input {
    padding: 8px 10px;
    font-size: 0.875rem;
}

.lk-combo__wrap { position: relative; }
.lk-combo__wrap .lk-input { padding-right: 2rem; }
.lk-combo__clear {
    position: absolute;
    top: 50%;
    right: 6px;
    width: 1.5rem;
    height: 1.5rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--ink-3);
    font: inherit;
    font-size: 1.1rem;
    line-height: 1;
    transform: translateY(-50%);
}
.lk-combo__clear:hover { color: var(--ink); }
.lk-combo__list {
    position: absolute;
    z-index: 8;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 17rem;
    margin: 0;
    padding: 4px 0;
    overflow: auto;
    list-style: none;
    background: var(--paper);
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    box-shadow: 0 10px 28px rgba(12, 14, 18, 0.12);
}
.lk-combo__opt {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    border: 0;
    background: none;
    color: var(--ink);
    font: inherit;
    font-size: 0.875rem;
    text-align: left;
    cursor: pointer;
}
.lk-combo__opt:hover,
.lk-combo__opt.is-on { background: var(--surface); }
.lk-combo__opt strong { font-weight: 650; }
.lk-combo__opt span {
    flex-shrink: 0;
    margin: 0;
    font-size: 0.75rem;
    font-weight: 550;
    color: var(--ink-3);
}
.lk-combo__empty {
    padding: 10px 12px;
    font-size: 0.8125rem;
    color: var(--ink-3);
}

.lk-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.lk-tab {
    padding: 6px 12px;
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    font-size: 0.8125rem;
    font-weight: 650;
}
.lk-tab[aria-current="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }

.lk-cal {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.lk-cal__dow {
    text-align: center;
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--ink-3);
    padding: 4px 0;
}
.lk-cal__day {
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border: 1px solid transparent;
    border-radius: var(--r-xs);
    font-size: 0.75rem;
    background: var(--surface);
}
.lk-cal__day.has-reports {
    background: var(--signal-tint);
    color: var(--signal);
    font-weight: 700;
    cursor: pointer;
}
.lk-cal__day.is-today { border-color: var(--ink); }

.lk-chart { width: 100%; max-width: 100%; height: 280px; }

.lk-404 { padding: 64px 0 80px; max-width: 36rem; }
.lk-404__code {
    font-size: 4.5rem;
    font-weight: 800;
    letter-spacing: -0.06em;
    line-height: 1;
    color: var(--signal);
}
.lk-cal__day small { display: block; font-size: 0.625rem; }
.lk-media-toolbar {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}
@media (max-width: 900px) {
    .lk-media-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.lk-media-map { height: 560px; width: 100%; }
#embedPreviewFrame { width: 100%; min-height: 360px; border: 0; background: var(--surface); }
.lk-modal {
    position: fixed;
    inset: 0;
    z-index: 960;
    display: grid;
    place-items: end center;
}
.lk-modal__scrim { position: absolute; inset: 0; background: rgba(12, 14, 18, 0.45); }
.lk-modal__panel {
    position: relative;
    width: min(40rem, calc(100% - 24px));
    max-height: 80vh;
    overflow: auto;
    background: var(--paper);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    padding: 20px 20px 28px;
}
.lk-modal--map {
    place-items: start center;
    padding: 12px;
    padding-top: max(12px, env(safe-area-inset-top));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.lk-modal--map .lk-modal__panel {
    width: min(56rem, 100%);
    max-height: min(92dvh, calc(100dvh - 24px));
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: var(--r-lg);
    padding: 16px 16px 0;
}
.lk-modal--map .lk-map {
    margin-top: 12px;
    flex: 1 1 auto;
    min-height: 0;
    border: 0;
    border-radius: var(--r-md) var(--r-md) 0 0;
}
.lk-map--modal .lk-map__canvas {
    height: min(48dvh, 440px);
    min-height: 200px;
    max-height: none;
}
@media (max-width: 639px) {
    .lk-modal--map .lk-modal__panel {
        width: 100%;
        max-height: calc(100dvh - 16px);
        border-radius: var(--r-md);
    }
    .lk-map--modal .lk-map__canvas {
        height: min(42dvh, 360px);
        min-height: 180px;
    }
}
.lk-mappeek {
    position: fixed;
    z-index: 950;
    width: min(300px, calc(100vw - 24px));
    pointer-events: none;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: 0 12px 32px rgba(12, 14, 18, 0.16);
    overflow: hidden;
    cursor: pointer;
}
.lk-mappeek__title {
    margin: 0;
    padding: 10px 12px 0;
    font-size: 0.875rem;
    font-weight: 650;
}
.lk-mappeek__map {
    height: 176px;
    margin-top: 8px;
    background: var(--surface-2);
}
.lk-mappeek__meta {
    margin: 0;
    padding: 8px 12px 10px;
    font-size: 0.75rem;
    color: var(--ink-3);
}
.pulse-gps {
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border-radius: 50%;
    background: radial-gradient(circle, #c81e1e 3px, rgba(200, 30, 30, 0.18) 4px);
    border: 1.5px solid rgba(200, 30, 30, 0.4);
}
.pulse-city {
    background: rgba(200, 30, 30, 0.2);
    border: 2px solid rgba(200, 30, 30, 0.3);
    border-radius: 50%;
}
.snapshot-header-overlay {
    position: absolute;
    top: 16px;
    left: 0;
    right: 0;
    z-index: 1200;
    text-align: center;
    pointer-events: none;
}
.snapshot-header-watermark {
    display: inline-block;
    background: rgba(0, 0, 0, 0.92);
    color: #fff;
    border-radius: 16px;
    padding: 16px 24px;
}
.snapshot-logo-main { font-weight: 800; font-style: italic; }
.snapshot-logo-domain { color: #ef4444; font-weight: 800; font-style: italic; }
.snapshot-meta-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    z-index: 1001;
    text-align: center;
    pointer-events: none;
}
.snapshot-meta-bubble {
    display: inline-block;
    background: #000;
    color: #fff;
    border-radius: 999px;
    padding: 6px 16px;
    font-size: 12px;
}

/* ==========================================================================
   Teilen
   --------------------------------------------------------------------------
   Unten als Sheet auf dem Telefon, zentriert am Schreibtisch. Das Kartenbild
   ist eine Vorschaukarte: Titel und Unterschrift ändern sich sofort, das
   fertige PNG entsteht erst beim Speichern.
   ========================================================================== */
.lk-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

body.lk-share-open { overflow: hidden; }

.lk-map.is-capturing .lk-map__tools,
.lk-map.is-capturing .leaflet-control-zoom,
.lk-map.is-capturing .leaflet-control-attribution {
    visibility: hidden !important;
}

.lk-share {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    place-items: end center;
}
.lk-share[hidden] { display: none !important; }

.lk-share__scrim {
    position: absolute;
    inset: 0;
    background: rgba(12, 14, 18, 0.45);
}

.lk-share__panel {
    position: relative;
    width: min(28rem, 100%);
    max-height: min(88vh, 40rem);
    overflow: auto;
    background: var(--paper);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    padding: 18px 18px calc(20px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -8px 32px rgba(12, 14, 18, 0.12);
}

@media (min-width: 640px) {
    .lk-share { place-items: center; }
    .lk-share__panel {
        border-radius: var(--r-lg);
        width: min(30rem, calc(100% - 32px));
        padding: 22px 22px 24px;
        box-shadow: 0 16px 48px rgba(12, 14, 18, 0.18);
    }
}

.lk-share__tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin-bottom: 14px;
    padding: 3px;
    background: var(--surface);
    border: 1px solid var(--line);
}
.lk-share__tab {
    padding: 8px 10px;
    border: 0;
    border-radius: var(--r-sm);
    background: none;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 650;
    color: var(--ink-2);
    cursor: pointer;
}
.lk-share__tab[aria-selected="true"] {
    background: var(--paper);
    color: var(--ink);
    box-shadow: 0 1px 2px rgba(12, 14, 18, 0.08);
}

.lk-share__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.lk-share__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.lk-share__x {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    margin: -6px -6px -6px 0;
    border: 0;
    border-radius: var(--r-sm);
    background: none;
    color: var(--ink-3);
    cursor: pointer;
}
.lk-share__x:hover { color: var(--ink); background: var(--surface); }

.lk-share__link {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    margin-top: 12px;
}
.lk-share__link .lk-input {
    min-width: 0;
    font-size: 0.8125rem;
    color: var(--ink-2);
}

.lk-share__channels {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    margin-top: 12px;
}
.lk-share__ch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 4px 8px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--paper);
    color: var(--ink-2);
    font-size: 0.6875rem;
    font-weight: 650;
    line-height: 1.2;
    cursor: pointer;
}
.lk-share__ch:hover {
    border-color: var(--ink);
    color: var(--ink);
    background: var(--surface);
}

.lk-share__image {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}
.lk-share__label {
    margin: 0 0 4px;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.lk-share__field {
    display: block;
    margin-top: 12px;
}
.lk-share__field > span {
    display: block;
    margin-bottom: 6px;
    font-size: 0.75rem;
    font-weight: 650;
    color: var(--ink-3);
}
.lk-share__field--msg { margin-top: 14px; }
.lk-share__field--msg textarea {
    resize: vertical;
    min-height: 4.5rem;
    line-height: 1.45;
}
.lk-share__field--msg .lk-micro { display: block; margin-top: 6px; }

.lk-sharepreview {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    min-height: 72px;
    border: 1px solid var(--line);
    background: var(--surface);
    overflow: hidden;
}
.lk-sharepreview__img {
    background: var(--surface-2);
    overflow: hidden;
}
.lk-sharepreview__img[hidden] { display: none !important; }
.lk-sharepreview__img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.lk-sharepreview__body { padding: 10px 12px 12px; }
.lk-sharepreview__kicker {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    color: var(--ink-3);
}
.lk-sharepreview__title {
    margin: 4px 0 0;
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.3;
}
.lk-sharepreview__text {
    margin: 4px 0 0;
    font-size: 0.8125rem;
    color: var(--ink-2);
    line-height: 1.4;
}
.lk-sharepreview__text:empty { display: none; }
.lk-share__row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}
.lk-share__row--main {
    margin-top: 12px;
}
.lk-share__row--main .lk-btn { flex: 1; }

.lk-share__more {
    display: inline-flex;
    margin-top: 10px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 650;
    color: var(--ink-3);
    cursor: pointer;
}
.lk-share__more:hover { color: var(--ink); }
.lk-share__msg { margin-top: 8px; }
.lk-share__msg textarea {
    min-height: 4rem;
    resize: vertical;
}

.lk-sharecard {
    margin-top: 0;
    padding: 12px;
    background: var(--paper);
    border: 1px solid var(--line);
}
.lk-sharecard__brand {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.lk-sharecard__brand span { color: var(--signal); }
.lk-sharecard__title {
    margin: 8px 0 0;
    font-size: 1rem;
    font-weight: 650;
    letter-spacing: -0.02em;
    line-height: 1.25;
}
.lk-sharecard__map {
    margin-top: 8px;
    min-height: 110px;
    max-height: 150px;
    background: var(--surface);
    border: 1px solid var(--line);
    overflow: hidden;
    display: grid;
    place-items: center;
}
.lk-sharecard__map img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.lk-sharecard__ph {
    padding: 24px 12px;
    font-size: 0.75rem;
    color: var(--ink-3);
    text-align: center;
}
.lk-sharecard__caption {
    margin: 10px 0 0;
    font-size: 0.8125rem;
    color: var(--ink-2);
    line-height: 1.4;
}

.lk-share .lk-btn.is-done {
    border-color: var(--ok);
    color: var(--ok);
}

/* ==========================================================================
   Ereignis: Berichte + beobachten
   ========================================================================== */
.lk-empty--inset {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 22px 16px;
}
.lk-news {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--paper);
}
.lk-news__item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    text-decoration: none;
    color: inherit;
}
.lk-news__item:last-child { border-bottom: 0; }
.lk-news__item:hover { background: var(--surface); }
.lk-news__title {
    font-size: 0.9375rem;
    font-weight: 650;
    letter-spacing: -0.015em;
    line-height: 1.3;
}
.lk-news__meta {
    font-size: 0.75rem;
    color: var(--ink-3);
}
.lk-watch__opts {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}
.lk-watch__opt {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.875rem;
    line-height: 1.35;
    cursor: pointer;
}
.lk-watch__opt input {
    margin-top: 3px;
    accent-color: var(--signal);
}
#eventWatchMsg.is-ok { color: var(--ok); }
#eventWatchMsg.is-err { color: var(--signal); }