* { -webkit-tap-highlight-color: transparent; }
html, body { margin:0; padding:0; height:100%; font-family: Arial, Helvetica, sans-serif; overscroll-behavior:none; }
#app { position:relative; height:100vh; height:100dvh; width:100vw; overflow:hidden; }
#map { position:absolute; inset:0; height:100%; width:100%; }

/* Floating toggle button */
#toggleBtn {
  position:fixed; top:12px; right:12px; z-index:1200;
  width:46px; height:46px; border-radius:50%; background:white; border:1px solid #ccc;
  box-shadow:0 2px 8px rgba(0,0,0,.35); font-size:20px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; padding:0;
}

/* Standort-, Distanzmess- & Satelliten-Buttons: eigenes Leaflet-Control (siehe
   js/main.js), direkt unter dem Zoom-Control mit identischem Abstand/derselben
   Breite - Leaflet übernimmt Positionierung/Stacking über die .leaflet-bar-Klasse. */
#locateBtn, #measureBtn, #satelliteBtn {
  font-size:16px; display:flex; align-items:center; justify-content:center;
}
#locateBtn.locating { animation: locate-pulse 1s ease-in-out infinite; }
@keyframes locate-pulse { 0%,100% { opacity:1; } 50% { opacity:.35; } }
#measureBtn.active { background:#1565c0; color:white; }

.leaflet-tooltip.measure-tooltip {
  background:white; border:1px solid #1565c0; color:#1565c0; font-weight:700; font-size:11px;
  padding:2px 6px; box-shadow:0 1px 3px rgba(0,0,0,.3);
}
.leaflet-tooltip.measure-tooltip::before { border-top-color:#1565c0; }

/* Orts-/Adresssuche: eigenes Leaflet-Control oben links, unter dem Zoom-Control */
.search-control {
  background:white; border-radius:4px; box-shadow:0 1px 5px rgba(0,0,0,.4); overflow:hidden;
}
.search-control form { display:flex; transition:outline .15s; }
.search-control input {
  border:none; outline:none; padding:6px 8px; font-size:13px; width:170px; font-family:inherit;
}
.search-control input::-webkit-search-cancel-button { cursor:pointer; }
.search-control button {
  border:none; background:#1565c0; color:white; padding:0 12px; cursor:pointer; font-size:14px; flex:0 0 auto;
}
.search-control button:hover { background:#0d47a1; }
.search-control form.searching { opacity:.6; }
.search-control form.search-error { outline:2px solid #d32f2f; outline-offset:-2px; }

/* Backdrop shown behind panel on narrow screens */
#backdrop { position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:1090; display:none; }
#backdrop.show { display:block; }

#panel {
  position:fixed; top:0; right:0; height:100%; width:340px; max-width:88vw;
  background:#f7f7f8; border-left:1px solid #ccc; padding:14px 16px 30px 16px;
  overflow-y:auto; box-sizing:border-box; z-index:1100;
  transform:translateX(0); transition:transform .25s ease;
  padding-top:max(14px, env(safe-area-inset-top));
  padding-right:max(16px, env(safe-area-inset-right));
}
#panel.closed { transform:translateX(100%); }

#panel h2 { font-size:16px; margin:0 44px 12px 0; }
.card { background:white; border:1px solid #ddd; border-radius:8px; padding:10px 12px; margin-bottom:12px; font-size:13px; line-height:1.5; }
.card b { color:#222; }
.result-big { font-size:22px; font-weight:700; margin:4px 0; }
.zone1 { color:#b71c1c; }
.zone2 { color:#d32f2f; }
.zone3 { color:#f44336; }
.zone4 { color:#e57373; }
.zoneNone { color:#555; }
button.wide { width:100%; box-sizing:border-box; padding:9px 6px; margin-bottom:8px; font-size:14px; }
.warn { background:#fff8e1; border:1px solid #ffca28; border-radius:6px; padding:8px 10px; font-size:11.5px; color:#7a5b00; margin-top:10px; }
.muted { color:#777; font-size:11.5px; }
.placeholder { color:#888; font-style:italic; }
#loading { font-size:12px; color:#999; }
a { color:#1565c0; }

/* Betroffene Zonen: eine Zeile je Zone (CTR-Zone + DIPUL-Treffer) mit
   farbigem Punkt, Kurzerklärung der Einschränkung und Links. */
.zone-lines { display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.zone-line { display:flex; align-items:baseline; gap:7px; font-size:12px; line-height:1.5; }
.zone-line b { color:#222; }
.zone-dot { width:9px; height:9px; border-radius:50%; flex:0 0 auto; box-shadow:inset 0 0 0 1px rgba(0,0,0,.2); position:relative; top:-1px; }
.zone-line-links { font-size:11px; white-space:nowrap; }
.zone-line-links a { margin-left:2px; }

details.grp { margin-bottom:6px; }
details.grp summary { cursor:pointer; font-size:13px; font-weight:600; padding:6px 4px; list-style:none; display:flex; align-items:center; gap:6px; }
details.grp summary::-webkit-details-marker { display:none; }
details.grp summary .group-checkbox { width:16px; height:16px; margin:0; flex:0 0 auto; }
details.grp summary .grp-label { display:flex; align-items:center; flex:1 1 auto; min-width:0; }
details.grp summary .dot { width:11px; height:11px; border-radius:50%; margin-right:7px; flex:0 0 auto; }
details.grp summary .arrow { margin-left:auto; font-size:11px; color:#999; transition:transform .15s; }
details.grp[open] summary .arrow { transform:rotate(90deg); }
.layer-row { display:flex; align-items:center; padding:3px 0 3px 18px; font-size:12.5px; gap:6px; }
.layer-row label { flex:1 1 auto; cursor:pointer; display:flex; align-items:center; }
.layer-row input[type=checkbox] { width:16px; height:16px; margin:0; flex:0 0 auto; }
.layer-status { font-size:10.5px; color:#999; flex:0 0 auto; min-width:14px; text-align:right; }
.layer-dot { width:9px; height:9px; border-radius:50%; margin-right:6px; flex:0 0 auto; box-shadow:inset 0 0 0 1px rgba(0,0,0,.15); }

.version-tag { position:fixed; bottom:6px; left:6px; z-index:1050; font-size:10px; color:#888; background:rgba(255,255,255,.85); padding:2px 6px; border-radius:4px; }

@media (max-width: 768px) {
  #panel { width:100%; max-width:100vw; }
  #toggleBtn { top:max(12px, env(safe-area-inset-top)); }
}