/* Farben wie auf der Landingpage (landing.html): dunkles Tintenblau bzw. warmes Hell, Markenrot */
:root {
  color-scheme: dark;
  --bg: #0b0e13;        /* Grundfläche (Trefferliste) */
  --surface: #151a22;   /* Karten/Flächen, z. B. Suchkarte */
  --surface2: #1d232e;  /* Eingabefelder, Chips */
  --fg: #f2f4f7;
  --muted: #9aa4b2;
  --line: #252c38;
  --accent: #ff5a4d;    /* Markenrot */
  --accent-fg: #1a0806;
  --danger: #ffb454;    /* Fehler in Bernstein, damit sie sich vom Markenrot abheben */
  --map-bg: #131922;
  --hover: #1a202a;
  --active: #2b1b1d;
  --faint: #6b7584;     /* Platzhalter, Fußzeile */
  --disabled: #3d4655;
  --glass: rgba(11, 14, 19, .74);
  --shadow: rgba(0, 0, 0, .45);
  --osm-filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.88) saturate(.55);
  --layers-icon-filter: invert(1) brightness(1.6);
}

/* Helles Theme, wenn Browser bzw. System auf hell stehen */
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --bg: #f6f4ef;
    --surface: #ffffff;
    --surface2: #efece5;
    --fg: #14171c;
    --muted: #5a6370;
    --line: #e2ddd2;
    --accent: #e8402f;
    --accent-fg: #ffffff;
    --danger: #b45309;
    --map-bg: #eef0ea;
    --hover: #efece5;
    --active: #fde9e5;
    --faint: #8a919c;
    --disabled: #c9c3b6;
    --glass: rgba(246, 244, 239, .8);
    --shadow: rgba(40, 30, 10, .16);
    --osm-filter: none;
    --layers-icon-filter: none;
  }
}

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; background: var(--bg); }
[hidden] { display: none !important; }

body {
  height: 100dvh;
  display: flex;
  font: 15px/1.45 ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

#panel {
  position: relative;
  width: 410px;
  max-width: 100%;
  flex: none;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border-right: 1px solid var(--line);
}
#sheetBody {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 18px 16px 10px;
}
#sheetBody > * { flex-shrink: 0; }
#grip { display: none; }

/* ---------- Ladeanimation ---------- */
#progress { position: absolute; top: 0; left: 0; right: 0; height: 3px; overflow: hidden; opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; z-index: 2; pointer-events: none; }
#progress span { position: absolute; top: 0; bottom: 0; width: 40%; border-radius: 3px; background: var(--accent); animation: progress 1.15s ease-in-out infinite; }
body.loading #progress { opacity: 1; visibility: visible; }
@keyframes progress { from { left: -40%; } to { left: 100%; } }

.spinner { display: inline-block; width: 15px; height: 15px; margin-right: 9px; vertical-align: -2px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .75s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

#results li.skeleton { cursor: default; pointer-events: none; }
.skeleton i { display: block; height: 13px; border-radius: 7px; margin: 4px 0 10px; background: linear-gradient(90deg, var(--surface) 25%, var(--surface2) 50%, var(--surface) 75%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; }
.skeleton i:nth-child(1) { width: 52%; height: 16px; }
.skeleton i:nth-child(2) { width: 34%; }
.skeleton i:nth-child(3) { width: 72%; height: 22px; border-radius: 11px; margin-bottom: 0; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { #progress span, .spinner, .skeleton i { animation-duration: 3s; } }

#map { flex: 1; min-width: 0; background: var(--map-bg); }

header { margin-bottom: 14px; }
header h1 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
header h1 b { color: var(--accent); font-weight: 800; }
header h1 { display: flex; align-items: center; gap: 8px; }
header h1 svg { width: 18px; height: 25px; flex: none; }
header p { margin: 2px 0 0; color: var(--muted); font-size: 14px; }

/* ---------- Suchkarte: hebt sich als eigene Fläche von der Trefferliste ab ---------- */
form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 14px;
  box-shadow: 0 6px 20px var(--shadow);
}
.row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 10px; }

label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 500; color: var(--muted); padding-left: 2px; }

input, select, button {
  font: inherit;
  font-size: 15px;
  color: var(--fg);
  border: 1px solid transparent;
  border-radius: 22px;
  padding: 9px 14px;
  background: var(--surface2);
  min-width: 0;
}
input::placeholder { color: var(--faint); }
input:focus, select:focus, button:focus-visible { outline: none; border-color: var(--accent); }

fieldset { border: 0; border-top: 1px solid var(--line); padding: 10px 0 0; margin: 0; min-width: 0; }
legend { float: left; width: 100%; font-size: 12px; font-weight: 500; color: var(--muted); padding: 0 0 8px 2px; }
#conds { clear: both; }

.cond { display: grid; grid-template-columns: 12px 1fr 96px 36px; gap: 8px; align-items: center; margin-bottom: 8px; }
.cond > * { min-width: 0; }
.combo { position: relative; display: block; }
.combo input { width: 100%; }
.picker { position: absolute; z-index: 1000; left: 0; right: -104px; top: calc(100% + 4px); margin: 0; padding: 4px 0;
  list-style: none; max-height: 260px; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 6px 20px var(--shadow); }
.picker[hidden] { display: none; }
.picker { touch-action: pan-y; overscroll-behavior: contain; }
.picker li { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.picker li { padding: 10px 14px; cursor: pointer; color: var(--fg); font-size: 15px; font-weight: 400; text-transform: none; letter-spacing: normal; }
.picker li:hover, .picker li.active { background: var(--line); }
.dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex: none; }
.cond .rm { padding: 8px 0; color: var(--muted); background: transparent; cursor: pointer; }
.cond .rm:hover { color: var(--danger); }

button { cursor: pointer; }
button[type="submit"] { background: var(--accent); color: var(--accent-fg); font-weight: 600; flex: 1; }
button[disabled] { opacity: .55; cursor: progress; }
.ghost { background: transparent; border-color: var(--line); color: var(--accent); }
.ghost:hover { background: var(--surface2); }
#addCond { width: 100%; border-style: dashed; }
.actions { display: flex; gap: 8px; }

/* Wo?-Feld mit Standort-Knopf */
.placeWrap { position: relative; display: flex; }
.placeWrap #place { flex: 1; padding-right: 42px; }
.placeWrap #useMe {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; min-height: 0; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--accent); font-size: 19px; line-height: 1;
}
.placeWrap #useMe:hover { background: var(--surface); }

/* Umschalter Datenquelle */
.source { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 500; color: var(--muted); padding-left: 2px; }
.seg { display: flex; flex: 1; gap: 3px; padding: 3px; background: var(--surface2); border-radius: 22px; }
#sourceRow .seg button { flex: 1; min-height: 0; padding: 6px 8px; font-size: 13px; border: 0; border-radius: 18px; background: transparent; color: var(--muted); }
#sourceRow .seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-fg); font-weight: 600; }

/* Zusammengeklappte Suche: Suchleiste wie in Google Maps */
#editSearch {
  display: flex; gap: 10px; align-items: center; text-align: left;
  background: var(--surface); border: 1px solid var(--line); color: var(--fg);
  border-radius: 26px; padding: 12px 16px;
  box-shadow: 0 6px 20px var(--shadow);
}
#editSearch::before { content: ""; flex: none; width: 15px; height: 15px; border: 2px solid var(--muted); border-radius: 50%; box-shadow: 6px 6px 0 -5px var(--muted); margin-right: 2px; }
#editSearch .what { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
#editSearch .edit { color: var(--accent); flex: none; font-weight: 500; }

/* ---------- Trefferliste: flach, mit Trennlinien ---------- */
#status { flex: none; margin: 20px 2px 0; padding-bottom: 10px; font-size: 14px; color: var(--muted); min-height: 20px; border-bottom: 1px solid var(--line); }
#status:empty { border-bottom: 0; }
#status.error { color: var(--danger); }
#status .osm-retry { display: block; width: 100%; margin-top: 10px; }
#status strong { color: var(--fg); font-weight: 600; }

#results { list-style: none; margin: 0; padding: 0; flex: 1 0 auto; }
#results li { padding: 14px 6px; border-bottom: 1px solid var(--line); border-radius: 0; cursor: pointer; }
#results li:hover { background: var(--hover); }
#results li.active { background: var(--active); box-shadow: inset 3px 0 0 var(--accent); }
.r-name { font-size: 16px; font-weight: 500; }
.r-sub { color: var(--muted); font-size: 13px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--fg); background: var(--surface2); border-radius: 999px; padding: 3px 10px 3px 8px;
}

#account { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 10px; font-size: 13px; }
#account summary { cursor: pointer; color: var(--muted); }
#account p { margin: 8px 0; color: var(--muted); }
#account #acctInfo { color: var(--fg); }
#account form { background: none; box-shadow: none; border: 0; border-radius: 0; padding: 0; margin: 0 0 4px; }
#acctIn { margin-bottom: 6px; }
#mapSettings { margin-top: 12px; }
.keyrow { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; margin-bottom: 4px; }
#account form.keyrow { grid-template-columns: 1fr auto; display: grid; }
#account form.keyrow[hidden] { display: none; }
#gmMsg.error { color: var(--danger); }

footer { color: var(--faint); font-size: 12px; padding-top: 8px; }

/* ---------- Karte (im dunklen Theme abgedunkelt) ---------- */
.osm-tiles { filter: var(--osm-filter); }
.leaflet-container { font: inherit; background: var(--map-bg); }
.leaflet-container a { color: var(--accent); }
.leaflet-bar { border: 0 !important; box-shadow: 0 2px 8px var(--shadow) !important; border-radius: 12px !important; overflow: hidden; }
.leaflet-bar a, .leaflet-bar a:hover { background: var(--surface); color: var(--fg); border-bottom-color: var(--line); }
.leaflet-bar a.leaflet-disabled { background: var(--surface); color: var(--disabled); }
.leaflet-control-layers { background: var(--surface); color: var(--fg); border: 0 !important; border-radius: 12px !important; box-shadow: 0 2px 8px var(--shadow) !important; }
.leaflet-control-layers-toggle { filter: var(--layers-icon-filter); }
.leaflet-control-attribution { background: var(--glass) !important; color: var(--muted) !important; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--surface); color: var(--fg); box-shadow: 0 4px 18px var(--shadow); }
.leaflet-popup-content-wrapper { border-radius: 16px; }
.leaflet-container a.leaflet-popup-close-button { color: var(--muted); }
.leaflet-tooltip { background: var(--surface); color: var(--fg); border-color: var(--line); }
.leaflet-tooltip-top::before { border-top-color: var(--surface); }
.leaflet-tooltip-bottom::before { border-bottom-color: var(--surface); }
.leaflet-tooltip-left::before { border-left-color: var(--surface); }
.leaflet-tooltip-right::before { border-right-color: var(--surface); }

.r-details { margin-top: 8px; font-size: 13.5px; color: var(--fg); cursor: default; }
.r-details div { margin-top: 3px; }
.r-details .links { margin-top: 8px; display: flex; gap: 16px; flex-wrap: wrap; }
.r-details .links a { color: var(--accent); font-weight: 500; text-decoration: none; }

/* ---------- Handy und Tablet hochkant ----------
   Die Karte steht fest oben (42 % der Höhe) und bleibt immer frei; das Blatt (#panel) füllt den
   Rest, gescrollt wird nur darin. Stufe "peek" (Karte im Vollbild) schiebt app.js per transform
   nach unten. Beim Tippen in ein Feld (Klasse .typing) darf das Blatt nach oben über die Karte,
   damit Auswahlliste und Tastatur Platz haben. */
@media (max-width: 760px) {
  html, body { overflow: hidden; overscroll-behavior: none; }
  body { display: block; height: 100dvh; }
  #map { position: fixed; top: 0; left: 0; right: 0; height: 42svh; }
  #panel {
    position: fixed; z-index: 1001; left: 0; right: 0; bottom: 0;
    top: calc(42svh - 18px);
    width: 100%;
    border: 0; border-radius: 20px 20px 0 0;
    box-shadow: 0 -6px 20px var(--shadow);
    transition: transform .3s cubic-bezier(.2, .8, .2, 1);
  }
  /* --vv-top/--kb setzt app.js aus visualViewport: Blatt endet oberhalb der Tastatur */
  body.typing #panel { top: calc(var(--vv-top, 0px) + env(safe-area-inset-top, 0px)); bottom: var(--kb, 0px); }
  body.typing #sheetBody { padding-bottom: 16px; }
  #grip {
    display: block; flex: none; width: 100%; height: 26px; min-height: 26px; padding: 0;
    background: transparent; border: 0; border-radius: 0; touch-action: none; cursor: grab;
  }
  #grip::before { content: ""; display: block; width: 36px; height: 4px; margin: 0 auto; border-radius: 2px; background: var(--disabled); }
  #progress { top: 24px; }
  #sheetBody {
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    /* unten Luft für Safaris schwebende Leiste bzw. den Home-Balken */
    padding: 0 max(14px, env(safe-area-inset-right)) calc(40px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  }
  header { margin-bottom: 12px; }
  header h1 { font-size: 20px; }
  .actions { flex-direction: column; }
  .leaflet-bottom { bottom: 18px; }
}

/* Als installierte App (Vollbild): Kartenelemente unter der iPhone-Statusleiste wegrücken */
@media (display-mode: standalone) {
  /* halb durchsichtige Fläche hinter der Statusleiste, wenn die Liste darunter scrollt */
  body::before {
    content: ""; position: fixed; top: 0; left: 0; right: 0; z-index: 1002;
    height: env(safe-area-inset-top, 0px); pointer-events: none;
    background: var(--glass);
    -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  }
  .leaflet-top { top: env(safe-area-inset-top, 0px); }
  .leaflet-left { left: env(safe-area-inset-left, 0px); }
  .leaflet-right { right: env(safe-area-inset-right, 0px); }
}

/* Touch-Geräte: 16px verhindert das automatische Hineinzoomen von iOS, größere Tippflächen */
@media (pointer: coarse) {
  input, select, button:not(#grip) { font-size: 16px; min-height: 44px; }
  .cond { grid-template-columns: 12px 1fr 100px 40px; gap: 6px; }
  .cond select { padding-left: 10px; padding-right: 4px; }
  .cond .rm { min-width: 0; padding: 0; }
  .chip { font-size: 13.5px; padding: 4px 11px 4px 9px; }
  .leaflet-popup-content { font-size: 15px; }
  .r-details .links a { padding: 6px 0; }
}

/* Freischalt-Dialog (Link aus der Betreiber-Mail) */
#approveBox { position: fixed; inset: 0; z-index: 5000; display: grid; place-items: center; padding: 16px; background: var(--shadow); }
#approveBox .card { width: min(420px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 20px; }
#approveBox h2 { margin: 0 0 8px; font-size: 18px; }
#approveBox p { margin: 0 0 16px; word-break: break-word; }
#approveBox .actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Stecknadel des ausgewählten Treffers */
.pin-icon { background: none; border: 0; }
.pin-icon svg { display: block; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .45)); }