/* ==========================================================================
   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;
    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; } }
.lk-map--compact .lk-map__canvas {
    height: 46vw;
    min-height: 200px;
    max-height: 260px;
}
@media (min-width: 640px) {
    .lk-map--compact .lk-map__canvas { height: 280px; max-height: none; }
}

/* 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; }
.lk-pin--own {
    outline: 2px solid var(--ok);
    box-shadow: 0 0 0 4px rgba(15, 122, 61, 0.4);
}
@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);
    scroll-margin-top: 110px;
}
.lk-event--own:hover { background: var(--ok-tint); }
.lk-event--flash {
    animation: lk-own-flash 0.75s var(--ease) 4;
}
@keyframes lk-own-flash {
    0%, 100% { background: var(--ok-tint); box-shadow: inset 3px 0 0 var(--ok); }
    50% {
        background: #c8ebd4;
        box-shadow: inset 3px 0 0 var(--ok), 0 0 0 3px rgba(15, 122, 61, 0.35);
    }
}
@media (prefers-reduced-motion: reduce) {
    .lk-event--flash { animation: none; }
}

/* 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-loudmini {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border: 1px solid var(--line);
    border-radius: var(--r-xs);
    background: var(--paper);
    font-family: var(--mono);
    font-size: 0.6875rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    color: var(--ink-2);
    white-space: nowrap;
}
.lk-event__title .lk-loudmini { margin-left: 4px; }
.lk-major__meta .lk-loudmini {
    display: inline;
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
}

.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); }

/* Stärke eines Ereignisses. Neben dem Mittelwert steht die Spannweite —
   eine 5 aus lauter Fünfern und eine 5 aus Zweien und Achten sind zwei
   verschiedene Ereignisse. */
.lk-loud__head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 12px;
}
.lk-loud__value {
    font-family: var(--mono);
    font-size: 2.25rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--ink);
}
.lk-loud__max {
    font-size: 0.9375rem;
    color: var(--ink-2);
}
.lk-loud__word {
    margin-left: 4px;
    font-size: 0.875rem;
    font-weight: 650;
    color: var(--ink-2);
}
.lk-loud__track {
    height: 6px;
    border-radius: 3px;
    background: var(--surface-2);
    overflow: hidden;
}
.lk-loud__fill {
    height: 100%;
    border-radius: 3px;
    background: var(--signal);
}
.lk-loud__ends {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 6px;
    font-size: 0.6875rem;
    color: var(--ink-3);
}
.lk-loud__note {
    margin: 10px 0 0;
    font-size: 0.8125rem;
    color: var(--ink-2);
}
.lk-loud__wave {
    margin: 4px 0 0;
    font-size: 0.8125rem;
    color: var(--ink-2);
}

/* Geschätzter Ursprung auf der Grossereignis-Karte: ein Fadenkreuz, kein
   Pin. Ein Pin behauptet eine Adresse, das Fadenkreuz eine Mitte. */
.lk-origin {
    position: relative;
    pointer-events: none;
}
.lk-origin__cross {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 22px;
    transform: translate(-50%, -50%);
}
.lk-origin__cross::before,
.lk-origin__cross::after {
    content: "";
    position: absolute;
    background: var(--signal);
}
.lk-origin__cross::before {
    top: 50%; left: 0;
    width: 100%; height: 1.5px;
    transform: translateY(-50%);
}
.lk-origin__cross::after {
    left: 50%; top: 0;
    width: 1.5px; height: 100%;
    transform: translateX(-50%);
}
.lk-origin__label {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    padding: 2px 6px;
    border-radius: var(--r-xs);
    background: var(--paper);
    box-shadow: 0 1px 3px rgba(12, 14, 18, 0.2);
    font-size: 0.625rem;
    font-weight: 650;
    line-height: 1.3;
    color: var(--signal-ink);
    white-space: nowrap;
}

.lk-loudtag {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border: 1px solid var(--line);
    border-radius: var(--r-xs);
    background: var(--paper);
    font-family: var(--mono);
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    color: var(--ink-2);
    white-space: nowrap;
}
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;
    /* Feste Höhe: sonst wächst und schrumpft das Sheet mit jedem Schritt
       und wirkt, als käme jedes Mal ein neues Modal hoch. */
    height: 88vh;
    height: 88dvh;
    max-height: 88vh;
    max-height: 88dvh;
    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;
        height: auto;
        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: 8px var(--gutter) 16px;
}
.lk-dialog.is-note .lk-dialog__sub { display: none; }
.lk-dialog__note .lk-watch__opt + .lk-watch__opt { margin-top: 8px; }
.lk-dialog__note .lk-input[type="email"] { font-size: 0.9375rem; }

/* Stärke-Schritt: ein Regler, eine Zahl, eine Zusatzfrage. Die Zahl steht
   gross da, weil sie die einzige Rückmeldung ist — auf einer Skala ohne
   Beschriftung sieht man sonst nicht, was man gerade eingestellt hat.

   Solange der Regler nicht berührt wurde, bleibt er grau und die Zahl ein
   Strich. Ein vorgefüllter Wert würde als Antwort mitgezählt, obwohl niemand
   ihn gewählt hat. */
.lk-rate {
    padding: 20px var(--gutter) 4px;
}
.lk-rate__head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 18px;
}
.lk-rate__value {
    flex: none;
    min-width: 1.6em;
    font-family: var(--mono);
    font-size: 2.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--line-2);
    transition: color 120ms ease;
}
.lk-rate__value.is-set { color: var(--ink); }
.lk-rate__word {
    font-size: 0.9375rem;
    line-height: 1.3;
    color: var(--ink-2);
}

.lk-rate__range {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 28px;
    background: none;
    cursor: pointer;
}
.lk-rate__range::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 2px;
    background: var(--line-2);
}
.lk-rate__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 24px; height: 24px;
    margin-top: -10px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--line-2);
    box-shadow: 0 1px 4px rgba(12, 14, 18, 0.28);
    transition: background 120ms ease;
}
.lk-rate__range.is-set::-webkit-slider-thumb { background: var(--signal); }
.lk-rate__range::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    background: var(--line-2);
}
.lk-rate__range::-moz-range-thumb {
    width: 24px; height: 24px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--line-2);
    box-shadow: 0 1px 4px rgba(12, 14, 18, 0.28);
}
.lk-rate__range.is-set::-moz-range-thumb { background: var(--signal); }
.lk-rate__range:focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; }

.lk-rate__ends {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 2px;
    font-size: 0.75rem;
    color: var(--ink-2);
}

.lk-rate__q {
    margin: 22px 0 8px;
    padding: 0 var(--gutter);
    font-size: 0.875rem;
    font-weight: 650;
    color: var(--ink);
}

/* Uhrzeit-Schritt: eine grosse Uhr, Hinweis darunter, Datum nur auf Wunsch. */
.lk-when {
    position: relative;
    padding: 28px var(--gutter) 12px;
    text-align: center;
}
.lk-when__time {
    display: block;
    width: 100%;
    max-width: 11.5rem;
    margin: 0 auto;
    padding: 4px 0 10px;
    border: 0;
    border-bottom: 1px solid var(--line-2);
    background: transparent;
    color: var(--ink);
    font-family: var(--mono);
    font-size: 2.5rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
    line-height: 1;
    text-align: center;
}
.lk-when__time:focus {
    outline: none;
    border-bottom-color: var(--ink);
}
.lk-when__time::-webkit-calendar-picker-indicator {
    opacity: 0.35;
    cursor: pointer;
    scale: 1.15;
}

/* Mobile: zwei Räder statt des Android-Uhren-Dialogs. Desktop behält type=time. */
.lk-wheels {
    display: none;
    position: relative;
    align-items: stretch;
    justify-content: center;
    gap: 4px;
    height: 220px;
    max-width: 17rem;
    margin: 0 auto;
}
.lk-wheels::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line);
    pointer-events: none;
    z-index: 0;
}
.lk-wheel {
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    scroll-snap-stop: always;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
}
.lk-wheel::-webkit-scrollbar { display: none; }
.lk-wheel__pad { height: 88px; flex: none; }
.lk-wheel__item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink-4);
    font-family: var(--mono);
    font-size: 1.35rem;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    scroll-snap-align: center;
    cursor: pointer;
}
.lk-wheel__item.is-on {
    color: var(--ink);
    font-size: 2rem;
    font-weight: 750;
}
.lk-wheel__sep {
    position: relative;
    z-index: 2;
    align-self: center;
    width: 0.7em;
    font-family: var(--mono);
    font-size: 1.75rem;
    font-weight: 750;
    line-height: 1;
    color: var(--ink);
}

@media (max-width: 639px) {
    .lk-when { padding-top: 12px; }
    .lk-when__time {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        border: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }
    .lk-wheels { display: flex; }
}

.lk-when__hint {
    margin-top: 12px;
    font-size: 0.875rem;
    color: var(--ink-2);
}
.lk-when__more {
    margin-top: 10px;
    border: 0;
    background: none;
    color: var(--ink-3);
    font: inherit;
    font-size: 0.8125rem;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.lk-when__more:hover { color: var(--ink); }
.lk-when__date {
    max-width: 16rem;
    margin: 14px auto 0;
}

.lk-seg {
    display: flex;
    gap: 8px;
    padding: 0 var(--gutter) 20px;
}
.lk-seg__opt {
    flex: 1;
    padding: 12px 10px;
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    font-size: 0.875rem;
    line-height: 1.3;
    cursor: pointer;
}
.lk-seg__opt:hover { background: var(--surface); }
.lk-seg__opt.is-on {
    border-color: var(--signal);
    background: var(--signal-tint);
    color: var(--signal-ink);
    font-weight: 650;
}

.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-search__hint {
    margin: 8px 0 0;
}
.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__sum {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px;
    cursor: pointer;
    list-style: none;
}
.lk-watch__sum::-webkit-details-marker { display: none; }
.lk-watch__hint {
    font-size: 0.8125rem;
    color: var(--ink-3);
    line-height: 1.35;
}
.lk-watch[open] .lk-watch__sum {
    border-bottom: 1px solid var(--line);
}
.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); }