/* Permaplans · Freie Karte — Styles. Handgeschrieben, wird von
   tool/web/build_public_map.py nur eingebunden (Cache-Buster ?v=). */
:root {
  --primary: #2D5016;
  --primary-dark: #1e3810;
  --accent: #E8A020;
  --bg: #F5F0E8;
  --ink: #1f2a16;
  --muted: #5b6652;
  --line: #e3dccd;
  --card: #ffffff;
  --shadow: 0 4px 18px rgba(20, 30, 10, .18);
  --radius: 14px;
  --header-h: 62px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body.pp-map-page {
  font-family: Lato, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
}
h1, h2, h3 { font-family: Merriweather, Georgia, serif; color: var(--primary-dark); }
a { color: var(--primary); }

/* ---------------------------------------------------------- Karte */
.map-hero { background: #dfe8d3; }
.map-shell {
  position: relative;
  height: calc(100vh - 78px);
  height: calc(100dvh - 78px);
  min-height: 460px;
  overflow: hidden;
}
#map { position: absolute; inset: 0; background: #dfe8d3; }
#map:focus { outline: none; }
.leaflet-container { font: inherit; }
.leaflet-control-attribution {
  font-size: 10.5px; background: rgba(255,255,255,.85); border-radius: 8px 0 0 0;
  max-width: min(70vw, 720px); white-space: normal;
}
.leaflet-tile-pane .parcels-opaque { mix-blend-mode: multiply; }
/* Flurstueckslinien lesbar machen. Die Dienste zeichnen duennes Gelb — auf
   einem hellen Acker- oder Betonluftbild ist das fast unsichtbar. Der
   Schlagschatten legt einen dunklen Saum um jede Linie und jede Ziffer, damit
   sie auf JEDEM Untergrund stehen. Kontrast und Saettigung heben das Gelb
   zusaetzlich an. */
.leaflet-tile-pane .parcels {
  filter: drop-shadow(0 0 1.2px rgba(0, 0, 0, .95)) drop-shadow(0 0 1.2px rgba(0, 0, 0, .55))
          saturate(1.5) contrast(1.25);
}
.leaflet-interactive.draw-cursor { cursor: crosshair; }
.map-shell.mode-draw #map, .map-shell.mode-measure #map, .map-shell.mode-pipette #map { cursor: crosshair; }

/* Steuerelemente */
.ctl { position: absolute; z-index: 800; }
.ctl-search { top: 12px; left: 12px; width: min(420px, calc(100% - 92px)); }
#search-form {
  display: flex; align-items: center; gap: 6px;
  background: var(--card); border-radius: 999px; box-shadow: var(--shadow);
  padding: 4px 8px 4px 12px; border: 1px solid rgba(0,0,0,.06);
}
#search-form svg { width: 20px; height: 20px; fill: var(--muted); flex: none; }
#search-input {
  flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 15px;
  padding: 8px 4px; color: var(--ink); outline: none;
}
#search-input::-webkit-search-cancel-button { display: none; }
#search-clear { border: 0; background: transparent; font-size: 22px; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 6px; }
.search-results {
  list-style: none; margin: 6px 0 0; padding: 6px 0; background: var(--card);
  border-radius: 12px; box-shadow: var(--shadow); max-height: 50vh; overflow: auto;
}
.search-results li { padding: 8px 14px; cursor: pointer; font-size: 14px; }
.search-results li:hover, .search-results li.active { background: #eef3e6; }
.search-results li small { display: block; color: var(--muted); font-size: 12px; }
.search-results li.hint { color: var(--muted); cursor: default; font-size: 12.5px; }

.ctl-tools {
  top: 12px; right: 12px; display: flex; flex-direction: column; gap: 4px;
  background: var(--card); border-radius: 12px; box-shadow: var(--shadow); padding: 4px;
}
/* Karten und Fachkarten unten links — dort sucht sie jeder, der Kartendienste
   kennt. Waagerecht, damit die Legenden darueber Platz behalten. */
.ctl-layers {
  bottom: 22px; left: 12px; display: flex; gap: 4px;
  background: var(--card); border-radius: 12px; box-shadow: var(--shadow); padding: 4px;
}
/* Zoom unten rechts, ueber dem Quellenvermerk. */
.ctl-zoom {
  bottom: 34px; right: 12px; display: flex; flex-direction: column; gap: 4px;
  background: var(--card); border-radius: 12px; box-shadow: var(--shadow); padding: 4px;
}
/* Standort-Knopf in der Suchleiste. */
#search-form .sb {
  border: 0; background: transparent; cursor: pointer; padding: 0 2px; flex: none;
  width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px;
  color: var(--muted);
}
#search-form .sb:hover { background: #eef3e6; color: var(--primary-dark); }
#search-form .sb svg { width: 19px; height: 19px; fill: currentColor; }
.tb {
  position: relative; width: 40px; height: 40px; border: 0; border-radius: 9px; background: transparent;
  cursor: pointer; display: grid; place-items: center; color: var(--primary-dark);
  font: 700 20px/1 Lato, sans-serif;
}
.tb svg { width: 22px; height: 22px; fill: currentColor; }
.tb:hover { background: #eef3e6; }
.tb.on { background: var(--primary); color: #fff; }
.tb.open { outline: 2px solid var(--accent); outline-offset: -2px; }
.tb-sep { height: 1px; background: var(--line); margin: 2px 6px; }
.tb-badge {
  position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; background: var(--accent); color: #241a04; font-size: 10px; font-weight: 700;
  display: grid; place-items: center;
}

.ctl-actions {
  bottom: 22px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px; flex-wrap: wrap; justify-content: center;
  background: rgba(255,255,255,.92); border-radius: 999px; box-shadow: var(--shadow); padding: 6px;
  max-width: calc(100% - 24px);
}
.ab {
  border: 0; border-radius: 999px; padding: 9px 14px; font: 700 13.5px Lato, sans-serif;
  background: #eef3e6; color: var(--primary-dark); cursor: pointer; white-space: nowrap;
}
.ab:hover { filter: brightness(.96); }
.ab.primary { background: var(--accent); color: #241a04; }

.ctl-legends { bottom: 78px; left: 12px; display: flex; flex-direction: column; gap: 8px; max-width: min(320px, 60vw); pointer-events: none; }
.legend {
  pointer-events: auto; background: rgba(255,255,255,.94); border-radius: 12px; box-shadow: var(--shadow);
  padding: 8px 10px; font-size: 12px; color: var(--ink);
}
.legend h4 { margin: 0 0 4px; font: 700 12.5px Lato, sans-serif; color: var(--primary-dark); display: flex; align-items: center; gap: 6px; }
.legend h4 .unit { font-weight: 400; color: var(--muted); }
.legend .bar { height: 12px; border-radius: 6px; border: 1px solid rgba(0,0,0,.15); }
.legend .ticks { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--muted); margin-top: 2px; gap: 6px; }
.legend .swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 2px 8px; max-height: 140px; overflow: auto; }
.legend .swatches span { display: flex; align-items: center; gap: 5px; font-size: 10.5px; white-space: nowrap; }
.legend .swatches i { width: 12px; height: 10px; border-radius: 2px; border: 1px solid rgba(0,0,0,.15); flex: none; }
.legend .hint, .legend .attr { color: var(--muted); font-size: 11px; margin-top: 4px; }
.legend .value { margin-top: 4px; font-weight: 700; }
.legend .value.nodata { color: var(--muted); font-weight: 400; }
.legend button.info { border: 0; background: #eef3e6; border-radius: 999px; width: 20px; height: 20px; cursor: pointer; font-weight: 700; color: var(--primary-dark); }
.legend .contour-rows { display: flex; flex-direction: column-reverse; gap: 2px; }
.legend .contour-rows span { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.legend .contour-rows i { width: 20px; height: 4px; border-radius: 2px; }
.legend .wetbar { height: 12px; border-radius: 6px; background: linear-gradient(90deg, #0f2daf, #00c3c8, #96d778, #f0e14b, #f5961e, #d75000); }

.panel {
  top: 12px; right: 62px; width: min(360px, calc(100% - 86px)); max-height: calc(100% - 24px);
  position: absolute; z-index: 850; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  display: flex; flex-direction: column; overflow: hidden;
}
.panel header { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 8px 14px; border-bottom: 1px solid var(--line); }
.panel h2 { margin: 0; font-size: 16px; }
.panel-close { border: 0; background: transparent; font-size: 24px; line-height: 1; cursor: pointer; color: var(--muted); }
.panel-body { padding: 10px 14px 14px; overflow: auto; font-size: 14px; }
.panel-body p { margin: 6px 0; }
.panel-body .muted { color: var(--muted); font-size: 12.5px; }
.opt { display: flex; align-items: center; gap: 10px; padding: 8px 8px; border-radius: 10px; cursor: pointer; border: 1.5px solid transparent; }
.opt:hover { background: #f4f7ef; }
.opt.sel { border-color: var(--primary); background: #eef3e6; }
.opt.dis { opacity: .5; cursor: default; }
.opt .sw { width: 14px; height: 14px; border-radius: 4px; flex: none; border: 1px solid rgba(0,0,0,.15); }
.opt small { display: block; color: var(--muted); font-size: 12px; }
.opt .flag { font-size: 10.5px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 0 6px; margin-left: auto; }
.grp { font: 700 11.5px Lato, sans-serif; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 10px 0 4px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn { border: 0; border-radius: 999px; padding: 8px 14px; font: 700 13px Lato, sans-serif; background: #eef3e6; color: var(--primary-dark); cursor: pointer; }
.btn.primary { background: var(--primary); color: #fff; }
.btn.accent { background: var(--accent); color: #241a04; }
.btn.danger { background: #fbe6e1; color: #8a2a12; }
.btn:disabled { opacity: .5; cursor: default; }
.btn.small { padding: 5px 10px; font-size: 12px; }
input.txt { width: 100%; font: inherit; font-size: 14px; padding: 8px 10px; border: 1.5px solid var(--line); border-radius: 10px; outline: none; }
input.txt:focus { border-color: var(--primary); }
.feature-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.feature-list li { display: flex; align-items: center; gap: 8px; padding: 6px 6px; border-radius: 10px; }
.feature-list li:hover { background: #f4f7ef; }
.feature-list .sw { width: 12px; height: 12px; border-radius: 3px; flex: none; border: 1px solid rgba(0,0,0,.2); }
.feature-list .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feature-list .nm small { color: var(--muted); font-size: 11.5px; margin-left: 4px; }
.feature-list .ic { border: 0; background: transparent; cursor: pointer; color: var(--muted); font-size: 15px; padding: 2px 4px; }
.feature-list .ic:hover { color: var(--primary-dark); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: 13.5px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-weight: 700; }
.rules-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rules-table td { padding: 5px 4px; border-bottom: 1px solid var(--line); vertical-align: top; }
.rules-table td:last-child { white-space: nowrap; font-weight: 700; text-align: right; }
.conf { display: inline-block; font-size: 11px; padding: 1px 8px; border-radius: 999px; background: #fff3d6; color: #7a4d00; margin-left: 6px; }
.conf.low { background: #f1f1f1; color: #666; }
.disclaimer { font-size: 12px; color: var(--muted); border-left: 3px solid var(--accent); padding-left: 8px; margin-top: 10px; }
.tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tool-grid .opt { padding: 8px 6px; }
.geo-list .opt { padding: 6px 8px; }

.ctl-hint {
  top: 64px; left: 50%; transform: translateX(-50%); background: rgba(30,56,16,.92); color: #fff;
  padding: 8px 14px; border-radius: 999px; font-size: 13px; max-width: calc(100% - 24px); text-align: center;
  display: flex; gap: 10px; align-items: center;
}
.ctl-hint button { border: 0; background: var(--accent); color: #241a04; border-radius: 999px; padding: 4px 10px; font: 700 12px Lato, sans-serif; cursor: pointer; }
.toast {
  position: absolute; z-index: 900; bottom: 84px; left: 50%; transform: translateX(-50%);
  background: rgba(30,56,16,.95); color: #fff; padding: 9px 16px; border-radius: 999px; font-size: 13.5px;
  box-shadow: var(--shadow); max-width: calc(100% - 24px); text-align: center;
}
.busy {
  position: absolute; z-index: 860; top: 64px; right: 62px; background: rgba(255,255,255,.94); border-radius: 999px;
  padding: 6px 12px 6px 8px; font-size: 12.5px; display: flex; align-items: center; gap: 8px; box-shadow: var(--shadow);
}
.spin { width: 14px; height: 14px; border: 2px solid var(--line); border-top-color: var(--primary); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Marker/Labels auf der Karte */
.pp-label { background: rgba(255,255,255,.9); border: 1px solid rgba(0,0,0,.2); border-radius: 6px; padding: 1px 6px; font: 700 12px Lato, sans-serif; color: var(--primary-dark); white-space: nowrap; }
.pp-label.contour { color: #fff; border-color: rgba(0,0,0,.4); font-size: 10px; padding: 0 5px; }
.pp-poi { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.pp-vertex { width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid var(--primary); }
.pp-measure { background: rgba(30,56,16,.9); color: #fff; border-radius: 6px; padding: 1px 6px; font: 700 12px Lato, sans-serif; white-space: nowrap; }
/* Flurstuecksnummer + Flaeche auf dem angeklickten Grundstueck. Amber wie die
   Umrandung, damit erkennbar bleibt, wozu die Beschriftung gehoert. */
.pp-parcel {
  display: inline-block; transform: translate(-50%, -50%);
  background: var(--accent); color: #241a04; border: 1px solid rgba(0,0,0,.35);
  border-radius: 7px; padding: 2px 8px; font: 700 12.5px Lato, sans-serif;
  white-space: nowrap; box-shadow: 0 1px 5px rgba(0,0,0,.4);
}

/* Flurstueck-Fenster am Klickpunkt */
.pp-pop .leaflet-popup-content-wrapper { border-radius: 12px; box-shadow: var(--shadow); }
.pp-pop .leaflet-popup-content { margin: 12px 14px; font: inherit; font-size: 13px; width: auto !important; }
.pop h4 { margin: 0 0 8px; font-family: Merriweather, Georgia, serif; font-size: 15px; color: var(--primary-dark); }
.pop .kv { grid-template-columns: auto 1fr; gap: 2px 12px; font-size: 12.5px; }
.pop .kv dt { white-space: nowrap; }
.pop .kv dd { text-align: right; }
.pop .grp { margin: 8px 0 3px; }
.pop .row { margin-top: 9px; gap: 6px; }
.pop .muted { color: var(--muted); font-size: 11px; margin: 8px 0 0; }
.pop .btn.small { margin-top: 8px; }
.pop .btn.primary { background: var(--primary); color: #fff; }

/* Selbst gezeichnete Flurstuecksnummer: gross, mit dunklem Saum, damit sie auf
   Acker wie auf Asphalt steht. Nicht anklickbar — der Klick gehoert der Karte. */
.pp-fnum {
  display: inline-block; transform: translate(-50%, -50%);
  color: #FFE9A8; font: 700 12px/1 Lato, sans-serif; white-space: nowrap;
  text-shadow: 0 0 3px #000, 0 0 3px #000, 0 1px 2px #000;
  pointer-events: none;
}

/* Pflanzen-Wähler */
.plant-list { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; }
.plant { display: flex; gap: 9px; align-items: center; padding: 6px; border-radius: 10px; cursor: pointer; border: 1.5px solid transparent; }
.plant:hover { background: #f4f7ef; }
.plant.sel { border-color: var(--primary); background: #eef3e6; }
.plant img { width: 42px; height: 42px; object-fit: cover; border-radius: 8px; flex: none; background: #eef3e6; }
.plant .nm { min-width: 0; }
.plant .nm b { display: block; font-size: 13.5px; }
.plant .nm small { display: block; color: var(--muted); font-size: 11.5px; }
.plant .nm b { display: inline; }
.plant-head { margin: 8px 0 2px; }
.fit { margin-left: 6px; font-size: 11px; color: var(--accent); letter-spacing: -1px; white-space: nowrap; }
.fit i { color: var(--line); font-style: normal; }
.rates { display: flex; gap: 8px; margin-top: 3px; }
.rb { display: inline-flex; align-items: center; gap: 2px; }
.rb img { width: 16px; height: 16px; opacity: .8; }
.rb b { font-size: 11px; font-weight: 700; }
.v-low { color: #a2694a; } .v-mid { color: #8a7a1e; } .v-high { color: #2E7D32; }
.pp-plant { display: block; width: 12px; height: 12px; border-radius: 50%; background: #2D5016; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.45); }
.plantpop .ph { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.plantpop .ph img { width: 54px; height: 54px; object-fit: cover; border-radius: 9px; flex: none; }
.plantpop .ph h4 { margin: 0; }
.plantpop .ph small { color: var(--muted); font-style: italic; font-size: 11.5px; }

/* Modal */
.modal-bg { position: fixed; inset: 0; z-index: 2000; background: rgba(20,30,10,.55); display: grid; place-items: center; padding: 16px; }
.modal { background: var(--card); border-radius: 16px; box-shadow: var(--shadow); max-width: 480px; width: 100%; padding: 20px 22px; max-height: 90vh; overflow: auto; }
.modal h3 { margin: 0 0 8px; font-size: 20px; }
.modal p { margin: 6px 0 12px; font-size: 14.5px; }
.modal .row { justify-content: flex-end; margin-top: 12px; }
.modal .err { color: #8a2a12; font-size: 13px; }

/* ------------------------------------------------------ SEO-Inhalt */
.map-copy { padding-top: 34px; padding-bottom: 10px; }
.map-copy h1 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin: 0 0 8px; }
.map-copy .lead { font-size: 1.1rem; color: var(--muted); max-width: 70ch; }
.map-copy h2 { font-size: 1.35rem; margin: 30px 0 8px; }
.feat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-top: 12px; }
.feat { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.feat h3 { margin: 0 0 6px; font-size: 1.02rem; }
.feat p { margin: 0; font-size: .94rem; color: #3f4a37; }
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; margin-bottom: 8px; }
.faq summary { cursor: pointer; font-weight: 700; }
.faq p { margin: 8px 0 2px; font-size: .95rem; }
.sources { font-size: .9rem; color: var(--muted); }

@media (max-width: 720px) {
  .map-shell { height: calc(100vh - 62px); height: calc(100dvh - 62px); }
  .ctl-search { width: calc(100% - 76px); }
  .ctl-tools { top: 64px; }
  .tb { width: 38px; height: 38px; }
  .panel { top: auto; right: 0; left: 0; bottom: 0; width: 100%; max-height: 62%; border-radius: var(--radius) var(--radius) 0 0; }
  .ctl-actions { bottom: 10px; padding: 4px; gap: 4px; }
  .ctl-layers { bottom: 58px; left: 8px; }
  .ctl-zoom { bottom: 58px; right: 8px; }
  .ab { padding: 8px 10px; font-size: 12.5px; }
  .ctl-legends { bottom: 116px; max-width: 62vw; max-height: 34vh; overflow: auto; }
  /* Auf dem Handy nur die zwei wichtigen Aktionen in der Leiste; Export und
     Link stehen zusätzlich im Ebenen-Panel. */
  #btn-export, #btn-share { display: none; }
  .toast { bottom: 64px; }
  .busy { top: auto; bottom: 62px; right: 12px; }
}