/* ===================== Seiten: Home, Mehr, Umgebung, Vergleich, Rangliste, Inseln, Pegel, Besuche, Detail-Ergänzungen ===================== */
.h-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: color-mix(in srgb, var(--farbe) 18%, transparent); color: var(--farbe); flex: none; }
.h-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.h-titel { margin: 40px 0 16px; font-size: 1.6rem; }
.reiter button { display: inline-flex; align-items: center; gap: 6px; }
.hinweis-box { padding: 12px 16px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); background: color-mix(in srgb, var(--warn) 10%, transparent); margin-bottom: 16px; }
.hinweis-box a { color: var(--brand); }

/* Home */
.h-gruss { margin-bottom: 24px; display: flex; flex-direction: column; gap: 10px; }
.h-gruss h1 { text-transform: none; font-size: clamp(2.2rem, 4.5vw, 3.4rem); }
.h-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 18px; align-items: stretch; }
@media (max-width: 900px) { .h-raster { grid-template-columns: 1fr; } }
.h-tagesquiz { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 22px; border-radius: 24px; text-decoration: none;
  background: linear-gradient(135deg, color-mix(in srgb, #FF5722 22%, var(--bg-raised)), var(--bg-raised)); border: 1px solid color-mix(in srgb, #FF5722 35%, var(--line)); }
.h-tagesquiz .flamme { font-size: 2.6rem; line-height: 1; }
.h-tagesquiz.erledigt .flamme { filter: saturate(.6); }
.h-tq-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.h-tq-text strong { font: 800 1.7rem/1.05 var(--font-display); text-transform: uppercase; }
.h-tq-knopf { display: grid; place-items: center; min-width: 56px; height: 56px; padding: 0 14px; border-radius: 28px; background: #FF5722; color: #fff; font-weight: 700; }
.h-tagesquiz.erledigt .h-tq-knopf { background: var(--ok); }
.h-ldt { position: relative; display: flex; align-items: flex-end; min-height: 260px; border-radius: 24px; overflow: hidden; text-decoration: none; color: #fff; background: var(--bg-raised); }
.h-ldt-bild { position: absolute; inset: 0; }
.h-ldt-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.h-ldt-text { position: relative; padding: 22px; display: flex; flex-direction: column; gap: 6px; }
.h-ldt-text strong { font: 800 2.4rem/1 var(--font-display); text-transform: uppercase; }
.h-besucht { position: absolute; top: 14px; right: 14px; background: var(--ok); }
.h-jubilaeum { margin-top: 18px; padding: 16px 20px; border-radius: 18px; border: 1px solid var(--line); background: var(--bg-raised); display: flex; flex-direction: column; gap: 6px; }
.h-jubilaeum a { text-decoration: none; }
.h-kacheln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .h-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.h-kachel { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 20px; border: 1px solid var(--line); background: var(--bg-raised); text-decoration: none; }
.h-kachel:hover { border-color: var(--farbe); }
.h-kachel strong { margin-top: 8px; font-size: 1.05rem; }
.h-kachel .muted { font-size: .88rem; }
.h-mehr, .h-ueber { margin-top: 14px; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border-radius: 20px; border: 1px solid var(--line); background: var(--bg-raised); text-decoration: none; cursor: pointer; text-align: left; }
.h-mehr > span, .h-ueber > span { display: flex; flex-direction: column; gap: 2px; }
.h-mehr:hover, .h-ueber:hover { border-color: var(--muted); }
.h-mehr svg, .h-ueber svg { width: 20px; height: 20px; fill: none; stroke: var(--muted); stroke-width: 2; flex: none; }
.h-ueber { margin-top: 40px; }
.h-region { margin-bottom: 22px; }
.h-region h3 { margin-bottom: 10px; }
.h-portraits { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) { .h-portraits { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 42%; overflow-x: auto; padding-bottom: 6px; } }
.h-portrait { display: flex; flex-direction: column; gap: 8px; text-decoration: none; min-width: 0; }
.h-portrait .bild { position: relative; aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; background: var(--bg-raised); border: 1px solid var(--line); }
.h-portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.h-portrait:hover img { transform: scale(1.04); }
.h-portrait .name { font-weight: 600; font-size: .92rem; line-height: 1.3; }

/* Dialog */
.filter-schleier.mittig { justify-content: center; align-items: center; padding: 16px; }
.dialog { width: min(560px, 100%); max-height: 90vh; overflow: auto; background: var(--bg); border: 1px solid var(--line); border-radius: 22px; padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.auswahl-dialog { width: min(520px, 100%); }

/* Mehr entdecken */
.werkzeuge { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-top: 24px; }
.werkzeug { display: flex; gap: 16px; align-items: flex-start; padding: 18px; border-radius: 20px; border: 1px solid var(--line); background: var(--bg-raised); text-decoration: none; }
.werkzeug:hover { border-color: var(--farbe); }
.werkzeug > span:last-child { display: flex; flex-direction: column; gap: 4px; }
.werkzeug .muted { font-size: .88rem; }

/* Karte: Titel im Panel, Suche */
.karten-titel { font: 800 1.4rem/1 var(--font-display); text-transform: uppercase; }

/* Suche: Seitenzahlen */
.seiten { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 22px; }
.seiten button { min-width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-raised); cursor: pointer; font: 500 .95rem var(--font-mono); }
.seiten button[aria-current="page"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.seiten button:disabled { opacity: .4; cursor: default; }
.seiten span { align-self: center; color: var(--muted); padding: 0 4px; }

/* Umgebung */
.umgebung { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 980px) { .umgebung { grid-template-columns: 1fr; } }
.umgebung-karte { position: sticky; top: 16px; height: 70vh; min-height: 360px; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); }
@media (max-width: 980px) { .umgebung-karte { position: relative; top: 0; height: 360px; } }
.blink-punkt { width: 14px; height: 14px; border-radius: 50%; background: var(--lampe); opacity: .15; transition: opacity .08s linear; }
.blink-punkt[data-an="1"] { opacity: 1; box-shadow: 0 0 10px 2px color-mix(in srgb, var(--lampe) 70%, transparent); }

/* Vergleich */
.v-kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px; align-items: center; margin-top: 22px; }
.v-slot { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 20px; border: 1px solid var(--line); background: var(--bg-raised); min-width: 0; }
.v-slot strong { font-size: 1.1rem; }
.v-slot.leer { align-items: center; justify-content: center; min-height: 240px; cursor: pointer; border-style: dashed; color: var(--muted); }
.v-slot .plus { font-size: 2.4rem; line-height: 1; }
.v-bild { position: relative; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: var(--bg-hover); }
.v-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v-luftlinie { margin: 16px 0 6px; }
.tabelle.vergleich th { width: 22%; }
.tabelle.vergleich td { width: 39%; padding-right: 12px; }
.tabelle.vergleich td.besser { font-weight: 600; }
.tabelle.vergleich .gruppe th { padding-top: 22px; color: var(--fg); font: 800 1.1rem/1 var(--font-display); text-transform: uppercase; }
.v-karte { height: 360px; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); margin-top: 22px; }

/* Rangliste */
.sortier-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 24px; }
.sortier-kachel { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 18px; border: 1px solid var(--line); background: var(--bg-raised); text-decoration: none; font-weight: 600; }
.sortier-kachel:hover { border-color: var(--beacon); }
.sortier-kachel svg { width: 24px; height: 24px; fill: none; stroke: var(--beacon); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Inseln */
.insel-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.insel-kachel { position: relative; display: block; height: 170px; border-radius: 20px; overflow: hidden; color: #fff; text-decoration: none; background: #1d3a4a center / cover no-repeat; }
.insel-kachel .k-text strong { font-size: 1.6rem; }
.insel-karte { position: sticky; top: 16px; height: 70vh; min-height: 360px; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); }
@media (max-width: 980px) { .insel-karte { position: relative; top: 0; height: 340px; } }

/* Richtfeuerlinien */
.rf-liste { display: flex; flex-direction: column; gap: 12px; }
.rf-karte { padding: 14px; border-radius: 18px; border: 1px solid var(--line); background: var(--bg-raised); display: flex; flex-direction: column; gap: 10px; }
.rf-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; }
.rf-kopf .mono { font-size: .82rem; }
.rf-paar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
@media (max-width: 560px) { .rf-paar { grid-template-columns: 1fr; } }
.rf-turm { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px; border-radius: 14px; background: var(--bg); text-decoration: none; }
.rf-turm:hover { outline: 1px solid var(--muted); }
.rf-turm .mini-bild { position: relative; width: 48px; height: 48px; border-radius: 10px; overflow: hidden; background: var(--bg-hover); }
.rf-turm .mini-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Leuchtfeuer erkennen */
.tipp-bereich { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; margin: 24px 0; }
@media (max-width: 560px) { .tipp-bereich { grid-template-columns: 1fr; justify-items: center; } }
.tipp-knopf { width: 180px; height: 180px; border-radius: 50%; border: 2px solid var(--line); background: var(--bg-raised); font: 800 2rem/1 var(--font-display); cursor: pointer; transition: background .05s, box-shadow .05s; }
.tipp-knopf[data-an="1"] { background: #ffd600; color: #1b1400; border-color: #b8960c; box-shadow: 0 0 40px 8px rgb(255 214 0 / .45); }
.tipp-info { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tipp-info .mono { font-size: .82rem; overflow-wrap: anywhere; }

/* Pegel */
.pegel-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.pegel-tuerme { font-size: .85rem; }
.pegel-tuerme a { color: var(--brand); }

/* Besuche & Statistik */
.statistik { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 24px; }
@media (max-width: 640px) { .statistik { grid-template-columns: 1fr; } }
.stat-gross { padding: 18px; border-radius: 20px; border: 1px solid var(--line); background: var(--bg-raised); display: flex; flex-direction: column; gap: 4px; }
.stat-gross b { font: 800 2.8rem/1 var(--font-display); color: var(--beacon); }
.stat-kategorien { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.stat-kat { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--bg-raised); text-decoration: none; }
.stat-kat:hover { border-color: var(--akzent); }
.kalender-kopf { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.kalender-kopf strong { min-width: 160px; text-align: center; font-size: 1.1rem; }
.kalender { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.kal-kopf { font: 500 .75rem var(--font-mono); color: var(--muted); text-align: center; padding-bottom: 4px; }
.kal-tag { min-height: 74px; border-radius: 12px; border: 1px solid var(--line); padding: 6px; display: flex; flex-direction: column; gap: 3px; font-size: .72rem; min-width: 0; overflow: hidden; }
.kal-tag b { font: 500 .8rem var(--font-mono); color: var(--muted); }
.kal-tag.besucht { background: color-mix(in srgb, var(--ok) 14%, var(--bg-raised)); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.kal-tag.besucht b { color: var(--ok); }
.kal-tag a { text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) { .kal-tag { min-height: 46px; } .kal-tag a { display: none; } }

/* Detail-Ergänzungen */
.knopf.besucht { background: color-mix(in srgb, var(--ok) 18%, var(--bg-raised)); border-color: var(--ok); color: var(--ok); font-weight: 600; }
.info-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.info-karte { padding: 18px; border-radius: 20px; border: 1px solid var(--line); background: var(--bg-raised); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.info-karte .pille { white-space: normal; line-height: 1.3; max-width: 100%; }
.info-karte strong { font: 800 1.7rem/1.05 var(--font-display); text-transform: uppercase; }
.info-karte.leuchtet { border-color: color-mix(in srgb, var(--beacon) 55%, transparent); box-shadow: inset 0 0 40px color-mix(in srgb, var(--beacon) 12%, transparent); }
.zeiten { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin: 4px 0 0; }
.zeiten div { display: flex; flex-direction: column; }
.zeiten dt { font-size: .75rem; color: var(--muted); }
.zeiten dd { margin: 0; font: 500 1rem var(--font-mono); }
.pegel-kurve { width: 100%; border-radius: 10px; background: #fff; margin-top: 4px; }
.besuche { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.besuch-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 6px 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--ok) 15%, var(--bg-raised)); border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent); font: 500 .9rem var(--font-mono); }
.besuch-chip button { width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgb(0 0 0 / .15); cursor: pointer; line-height: 1; }
.besuch-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.besuch-form input { padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-raised); }

/* Konto */
.konto-link { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; text-decoration: none; color: var(--fg); font-weight: 500; }
.konto-link:hover, .konto-link[aria-current="page"] { background: var(--bg-hover); }
.konto-link span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.konto-avatar { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--beacon); color: var(--on-beacon); font-weight: 700; font-size: .85rem; overflow: hidden; flex: none; }
.konto-avatar img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) { .konto-link { padding: 6px 8px; } .konto-link span:last-child { display: none; } }
.konto-seite { max-width: 640px; }
.konto-text { margin: 12px 0 22px; max-width: 58ch; }
.konto-karte { padding: 22px; border-radius: 22px; border: 1px solid var(--line); background: var(--bg-raised); display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.konto-form { display: flex; flex-direction: column; gap: 10px; }
.konto-form input { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); font-size: 1rem; }
.konto-form input:focus { outline: none; border-color: var(--beacon); }
.konto-form.zeile { display: grid; grid-template-columns: 1fr auto; align-items: end; }
.konto-form.zeile label { grid-column: 1 / -1; }
.code-feld { font: 600 1.6rem/1 var(--font-mono) !important; letter-spacing: .3em; text-align: center; }
.konto-links { color: var(--muted); font-size: .88rem; }
.link-knopf { background: none; border: 0; padding: 0; color: var(--brand); cursor: pointer; font: inherit; text-decoration: underline; }
.konto-hinweis { padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--ok) 12%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent); }
.konto-fehler { padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--bad) 12%, transparent); border: 1px solid color-mix(in srgb, var(--bad) 45%, transparent); color: var(--bad); }
.oder { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .85rem; }
.oder::before, .oder::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.google-knopf { display: flex; justify-content: center; min-height: 44px; }
.profil-kopf { display: flex; align-items: center; gap: 18px; margin-bottom: 8px; }
.profil-bild { position: relative; width: 84px; height: 84px; border-radius: 50%; background: var(--beacon); color: var(--on-beacon); display: grid; place-items: center; font: 800 2.4rem/1 var(--font-display); cursor: pointer; flex: none; }
.profil-bild img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.profil-bild i { position: absolute; right: -2px; bottom: -2px; width: 28px; height: 28px; border-radius: 50%; background: var(--bg-raised); border: 1px solid var(--line); color: var(--fg); display: grid; place-items: center; font-style: normal; font-size: .85rem; }
.profil-kopf h1 { text-transform: none; }
a.stat-gross { text-decoration: none; }
a.stat-gross:hover { border-color: var(--beacon); }
details.gefahr { margin-top: 36px; padding: 16px 18px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--bad) 40%, var(--line)); display: flex; flex-direction: column; gap: 10px; }
details.gefahr[open] { display: flex; }
details.gefahr summary { cursor: pointer; color: var(--bad); font-weight: 600; }
details.gefahr p, details.gefahr label { margin: 10px 0 0; color: var(--muted); display: block; }
details.gefahr input { margin-top: 8px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); width: 100%; max-width: 260px; display: block; }
.gefahr-knopf { margin-top: 12px; background: var(--bad); color: #fff; border-color: transparent; }

/* Besuche auf der Detailseite */
.besuch-liste { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.besuch-eintrag { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--ok) 35%, var(--line)); background: var(--bg-raised); }
.besuch-kopf { display: flex; flex-direction: column; min-width: 0; }
.besuch-kopf .muted { font-size: .85rem; }
.umschalter.klein { padding: 6px 10px; font-size: .85rem; }
@media (max-width: 640px) { .besuch-eintrag { grid-template-columns: 1fr auto; } .besuch-eintrag .umschalter { grid-row: 2; } }
.besuch-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px; border-radius: 16px; border: 1px dashed var(--line); }
.besuch-form > label:first-child { font-weight: 600; }
.bildnachweis a { color: var(--brand); }

/* Bestwerte */
.bestwert-liste { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.bestwert-liste li { display: grid; grid-template-columns: 2em 4.5em 1fr; gap: 10px; align-items: baseline; }
.bestwert-liste b { font: 700 1.1rem var(--font-mono); color: var(--akzent); }

/* Fotorecht */
.foto-gesperrt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; color: var(--muted); font-size: .9rem; }
.detail-bild { position: relative; }
.foto-gesperrt svg { width: 72px; height: 72px; color: var(--line); }
.foto-gesperrt span { max-width: 32ch; }
.foto-recht { color: var(--warn); }
.fotorecht-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fotorecht-liste li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: 10px; background: var(--bg); color: var(--fg); flex-wrap: wrap; }