/* werkzeug.css - das Aussehen des Abfragewerkzeugs.
 *
 * HERAUSGELOEST AM 2026-09-10 aus dem <style>-Block von static/index.html, nachdem
 * der Umzug von Markup und Skript eine Karte der HOEHE NULL hinterlassen hatte: Die
 * Kartenhoehe haengt an einer eigenen Variablen (--karte-hoehe auf #karteListe), und
 * die stand nur in index.html. Auf der Landesseite war die Karte damit im Dokument,
 * aber null Pixel hoch - dieselbe Klasse Fehler wie die Zone, die gezeichnet und
 * trotzdem unsichtbar war (CLAUDE.md Abschnitt 5).
 *
 * Geladen von der Startseite UND von jeder Landesseite. Markup, Verhalten und
 * Aussehen liegen damit an je einer Stelle statt an zwei.
 */
  /* Ein leerer Bereich erzeugt auch keinen Abstand. Sein Aussenabstand wirkte
     weiter, obwohl er null Pixel hoch war. */
  #einzelErgebnis:empty{ margin-top:0 }
  /* Karte: feste Hoehe von Beginn an, 16:9 Desktop / 4:3 mobil (Designsystem 8.4).
     UEBER aspect-ratio, NICHT ueber vw - und das ist eine Korrektur vom 2026-09-09.
     Hier stand `min(56.25vw, 560px)`; genau die Falle, die drei Zeilen tiefer fuer
     den mobilen Fall schon beschrieben war: vw rechnet gegen die VIEWPORT-Breite.
     Solange die Karte die volle Breite hatte, stimmte das Ergebnis zufaellig. Seit
     sie in einer Spalte NEBEN der Liste steht, waere sie damit fast doppelt so hoch
     wie breit. `aspect-ratio` bezieht sich auf die tatsaechliche Elementbreite und
     stimmt in jeder Spaltenbreite.
     Merksatz: Eine Laengeneinheit, die sich auf etwas anderes bezieht als das
     Element selbst, ist nur so lange richtig, wie beide dasselbe sind. */
  /* EINE HOEHE FUER BEIDE SPALTEN (2026-09-09). Karte und Liste sollen oben und
     unten buendig stehen. Das geht nicht ueber `align-items:stretch` allein: Die
     Liste wuerde mit ihrem Inhalt wachsen und die Zeilenhoehe bestimmen, sobald
     mehr Eintraege da sind, als Platz haben. Beide bekommen deshalb DIESELBE
     ausdrueckliche Hoehe aus einer Variablen, und die Liste rollt in sich.
     `--karte-hoehe` steht am gemeinsamen Behaelter, damit "Vergroessern" beide
     zugleich aendert - eine Karte, die waechst, waehrend die Liste stehenbleibt,
     waere genau der Versatz, den diese Aenderung beseitigen soll. */
  .karte-liste{ --karte-hoehe:540px }
  #karte{ height:var(--karte-hoehe); border-radius:12px; z-index:0;
          transition:height .2s }
  /* Huelle fuer die Bedienelemente IN der Karte. */
  .karte-huelle{ position:relative }
  /* ---- VOLLBILD (2026-09-09)
     "Vergroessern" hob vorher nur die Hoehe von 540 auf 78vh - die Karte blieb in
     ihrer Spalte und damit halb so breit wie der Bildschirm. Fuer das, wofuer man
     vergroessert (Flurstuecke suchen und anklicken), ist die BREITE das Knappe.
     Jetzt tritt sie in den Vordergrund.
     Die Huelle wird `fixed`; ihre Spalte faellt damit auf 0 zusammen, aber die
     Zeilenhoehe bleibt, weil die Liste daneben ihre max-height behaelt - die Seite
     darunter springt also nicht.
     Der Schirm liegt DARUNTER und faengt jeden Klick ab: Was hinter ihm liegt, ist
     unscharf und nicht bedienbar. Ohne ihn koennte man blind auf Schaltflaechen
     treffen, die man gar nicht sieht. */
  .karte-schirm{ position:fixed; inset:0; z-index:999; border:0;
    background:rgba(15,43,87,.45); backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px); cursor:zoom-out }
  body.karte-gross{ overflow:hidden }

  /* DER KAUFPREIS-RECHNER ALS FENSTER (2026-09-15, Entscheidung Max).
     Dieselbe Bauform wie die vergroesserte Karte: ein Schirm, der alles
     dahinter abdeckt und jeden Klick abfaengt, und darueber der Inhalt. Grund
     ist derselbe wie dort - was hinter dem Schirm liegt, soll nicht blind
     bedienbar sein.
     Anders als die Karte rollt dieses Fenster selbst: Das Formular ist auf einem
     Telefon laenger als der Schirm hoch ist. */
  /* ZENTRIERT UEBER `inset:0` PLUS `margin:auto`, NICHT ueber translate.
     Der erste Versuch rechnete: `inset:6vh 50%` und `translateX(50%)`. Das
     Vorzeichen war falsch - der Kasten wurde nach RECHTS statt in die Mitte
     geschoben und lag zum Teil ausserhalb des Bildschirms. Sichtbar war nur der
     Schirm (gemeldet von Max, 15.09.2026).
     Mit auto-Raendern verteilt der Browser den freien Platz selbst; daran laesst
     sich nichts falsch ausrechnen. Eine Regel, die ohne Arithmetik auskommt, ist
     hier die bessere - ich kann das Ergebnis nicht im Browser nachsehen. */
  .kn-fenster{ position:fixed; z-index:1000; inset:0; margin:auto;
    width:min(46rem, 94vw); height:max-content; max-height:92vh;
    background:#fff; border-radius:14px; overflow:auto;
    box-shadow:0 24px 60px -12px rgba(15,43,87,.5) }
  body.kn-offen{ overflow:hidden }
  /* DER HINWEIS AUF EINE UEBERHOLTE FASSUNG (15.09.2026, siehe core/stand.py).
     Ueber ALLEM, auch ueber dem Kaufpreis-Fenster (z-index 1000): Wer gerade in
     einer alten Fassung klickt, soll es erfahren, bevor er einen Fehler meldet,
     den es nicht gibt. */
  .stand-balken{ position:fixed; z-index:2000; top:0; left:0; right:0;
    display:flex; align-items:center; justify-content:center; gap:.75rem;
    flex-wrap:wrap; padding:.55rem 1rem;
    background:#FFFBEB; border-bottom:1px solid #FCD34D;
    font-size:13px; color:#78350F;
    box-shadow:0 2px 10px rgba(15,43,87,.12) }
  .stand-balken b{ font-weight:600; font-family:ui-monospace,Menlo,Consolas,monospace }
  .stand-balken .stand-neu{ border:1px solid #B45309; border-radius:7px;
    background:#fff; color:#B45309; font-weight:600;
    padding:.2rem .7rem; cursor:pointer }
  .stand-balken .stand-neu:hover{ background:#B45309; color:#fff }
  .stand-balken .stand-zu{ border:0; background:transparent; color:#92400E;
    font-size:17px; line-height:1; padding:0 .3rem; cursor:pointer }
  body.karte-gross .karte-huelle{ position:fixed; inset:3vh 3vw; z-index:1000 }
  body.karte-gross #karte{ height:100%; border-radius:14px;
    box-shadow:0 24px 60px -12px rgba(15,43,87,.5) }
  .karte-knopf{ position:absolute; z-index:800;
    display:inline-flex; align-items:center; gap:.35rem;
    background:#fff; border:1px solid #C9D4E4; border-radius:8px;
    padding:.4rem .6rem; font-size:13px; font-weight:500; color:#334155;
    box-shadow:0 1px 4px rgba(15,43,87,.18); cursor:pointer }
  .karte-knopf:hover{ background:#F7FAFF; color:#1D4ED8; border-color:#1D4ED8 }
  .karte-knopf.oben-rechts{ top:10px; right:10px }
  .karte-knopf.unten-links{ bottom:10px; left:10px;
    width:30px; height:30px; padding:0; justify-content:center;
    font-size:15px; font-weight:700; font-style:italic; font-family:Georgia,serif }
  /* Das Fenster hinter dem i. Es liegt IN der Karte und rollt bei Bedarf selbst -
     auf einem Telefon ist die Karte 4:3, und der Text ist laenger als das. */
  .karte-info{ position:absolute; z-index:801; bottom:48px; left:10px;
    width:min(30rem, calc(100% - 20px)); max-height:calc(100% - 60px);
    overflow-y:auto; background:#fff; border:1px solid #C9D4E4; border-radius:10px;
    box-shadow:0 8px 24px rgba(15,43,87,.22); padding:.9rem 1rem;
    font-size:13px; line-height:1.55; color:#44403C }
  .karte-info h4{ font-weight:600; color:#0F2B57; margin-bottom:.35rem }
  .karte-info dl{ display:grid; grid-template-columns:auto 1fr; gap:.35rem .6rem;
    align-items:start; margin:.25rem 0 .6rem }
  .karte-info dt{ margin-top:.15rem }
  .karte-info i.probe{ display:inline-block; width:1.05rem; height:1.05rem;
    border-radius:3px; vertical-align:-2px }
  /* Die Liste fuellt ihre Spalte und rollt in sich - mit SICHTBAREM Balken.
     Ein duenner, nur beim Rollen eingeblendeter Balken (macOS-Vorgabe) verschweigt,
     dass es weitergeht; genau das war die Anforderung. */
  /* DIE LISTE WAECHST MIT, BIS SIE SO HOCH IST WIE DIE KARTE - dann rollt sie.
     Vorher stand hier `height`, also IMMER die volle Kartenhoehe: Ein leerer oder
     kurzer Kasten war dadurch genauso hoch wie die Karte und bestand zum groessten
     Teil aus Weissraum. Mit `max-height` sind Karte und Liste oben immer buendig
     und unten genau dann, wenn die Liste voll ist. */
  .liste-spalte{ display:flex; flex-direction:column }
  @media (min-width:1024px){
    .liste-spalte{ max-height:var(--karte-hoehe); align-self:start }
  }
  /* SICHTBARER ROLLBALKEN, kein eingeblendeter Overlay-Streifen.
     DIE BEIDEN WEGE SCHLIESSEN EINANDER AUS, und genau daran ist der erste Versuch
     gescheitert: Sobald scrollbar-color gesetzt ist, ignoriert Chromium die
     ::-webkit-scrollbar-Regeln vollstaendig - der Balken blieb ein Overlay und
     belegte 0 px Breite (im Browser gemessen). Deshalb bekommt Chromium die
     webkit-Regeln und Firefox die genormten, sauber getrennt.
     scrollbar-gutter:stable haelt den Platz frei, damit die Zeilen nicht
     springen, sobald der Balken erscheint. */
  #auswahlListe{ flex:1 1 auto; min-height:0; overflow-y:auto;
    scrollbar-gutter:stable }
  #auswahlListe::-webkit-scrollbar{ width:12px }
  #auswahlListe::-webkit-scrollbar-track{ background:#EEF2F7; border-radius:8px }
  #auswahlListe::-webkit-scrollbar-thumb{ background:#94A3B8; border-radius:8px;
    border:2px solid #EEF2F7 }
  #auswahlListe::-webkit-scrollbar-thumb:hover{ background:#64748B }
  @supports not selector(::-webkit-scrollbar){
    #auswahlListe{ scrollbar-width:auto; scrollbar-color:#94A3B8 #EEF2F7 }
  }
  /* Die Liste bekommt einen eigenen Rollbereich erst, wenn sie hoeher als die Karte
     wird - sonst waechst die Seite bei jeder Auswahl. Nur ab der zweispaltigen
     Breite: gestapelt gibt es nichts, wogegen sie sich messen muesste. */

  .leaflet-container{ background:#F5F5F4; font:inherit }
  .leaflet-popup-content-wrapper,.leaflet-popup-tip{ background:#fff; color:#44403C;
    box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1) }
  .leaflet-popup-content{ font-size:.8125rem; line-height:1.55 }
  .leaflet-popup-content b{ color:#1C1917 }
  /* Bedienelemente als weisse Flaechen auf der Karte (shadow-md). */
  .leaflet-bar a,.leaflet-control-layers{ background:#fff; color:#44403C;
    border-color:#E7E5E4; box-shadow:0 4px 6px -1px rgba(0,0,0,.1) }
  .leaflet-bar a:hover{ background:#F5F5F4 }
  /* Der Quellenvermerk sitzt unten rechts und waechst nach links. Bei fuenf
     Landesdiensten reicht er ueber die ganze Breite - und lag damit UNTER dem
     i-Knopf unten links, der seit dem 2026-09-09 dort steht (im Bild gesehen).
     Die Begrenzung haelt ihn von der linken Ecke fern; verkuerzt wird er NICHT,
     er ist Lizenzpflicht (Grundregel 5). */
  .leaflet-control-attribution{ background:rgba(255,255,255,.85)!important;
    color:#78716C!important; max-width:calc(100% - 48px) }
  .leaflet-control-attribution a{ color:#1D4ED8!important }
  /* Legende bleibt Leaflet-Control (Bestandsschutz laut Auftrag), nur die Optik folgt
     dem hellen System. Der Rahmen um das Farbfeld ist Pflicht: die Flurstueck-Signatur
     ist weiss und waere auf hellem Grund sonst unsichtbar. */
  .karte-legende{ background:#fff; border:1px solid #E7E5E4; border-radius:8px;
    padding:.5rem .625rem; font-size:.75rem; color:#44403C; line-height:1.6;
    box-shadow:0 4px 6px -1px rgba(0,0,0,.1) }
  .karte-legende i{ display:inline-block; width:.75rem; height:.75rem; border-radius:2px;
    margin-right:.4rem; vertical-align:-1px; box-shadow:0 0 0 1px rgba(28,25,23,.28) }
    /* Reiter der drei Zugangswege. Der gewaehlte ist deutlich abgesetzt - es muss
       auf einen Blick erkennbar sein, WELCHER Weg gilt, weil die API zwei
       gleichzeitige Wege mit 400 abweist. */
    /* KARTEIKARTEN (2026-09-05). Vorher waren das drei freistehende Knoepfe, der
       aktive blau gefuellt. Als Register sitzen sie auf der Eingabebox und der aktive
       verschmilzt mit ihr: gleicher weisser Grund, und ein 2px-Streifen ueberdeckt die
       Randlinie der Box darunter. Das sagt ohne Worte, dass der Reiter zur Box gehoert
       und genau EINER gilt - die API weist zwei gleichzeitige Wege mit 400 ab. */
    /* REITER ALS UNTERSTRICH (2026-09-09, nach dem Entwurf). Vorher Karteikarten,
       die auf der Box sassen. Der Unterstrich sitzt INNEN auf einer gemeinsamen
       Trennlinie: Damit ist die Box ein Block statt eines Kastens mit Aufsatz, und
       auf schmalen Geraeten bricht nichts mehr ueber die Kante. */
    .weg-tab{ position:relative; background:none; border:none; color:#64748B;
      padding:14px 4px; margin-right:28px; font-size:15px; cursor:pointer }
    .weg-tab:hover{ color:#0F2B57 }
    .weg-tab[aria-selected="true"]{ color:#1D4ED8; font-weight:600 }
    .weg-tab[aria-selected="true"]::after{ content:''; position:absolute;
      left:0; right:0; bottom:-1px; height:2px; background:#1D4ED8 }
    /* Eingabezeile: ein Rahmen um Nadel, Feld und Entfernen-Knopf. */
    .such-zeile{ display:flex; align-items:center; gap:.5rem;
      border:1px solid #D6DEEB; border-radius:10px; background:#fff;
      padding:0 .5rem 0 .75rem }
    .such-zeile:focus-within{ border-color:#1D4ED8;
      box-shadow:0 0 0 3px rgba(29,78,216,.14) }
    .such-zeile .such-feld{ border:none; outline:none; background:none;
      padding:.8rem 0; flex:1 1 auto; min-width:0; font-size:15px }
    .such-zeile .such-feld:focus{ box-shadow:none }
    .zeile-weg{ flex:none; width:26px; height:26px; border-radius:9999px;
      border:none; background:none; color:#94A3B8; font-size:17px; line-height:1;
      cursor:pointer }
    .zeile-weg:hover{ background:#F1F5F9; color:#475569 }
    /* Eine Reihe aus mehreren Feldern (Koordinate, Flurstueck) darf umbrechen. */
    .such-zeile.mehrfeldrig{ flex-wrap:wrap; padding:.35rem .5rem .35rem .75rem }
    .such-zeile.mehrfeldrig .such-feld{ padding:.45rem 0 }
    /* Zeile "hinzufuegen" / "Datei" - wie eine Eingabezeile, nur gestrichelt. */
    .zusatz-zeile{ display:flex; align-items:center; gap:.6rem; width:100%;
      border:1px dashed #C6D4E8; border-radius:10px; background:#fff;
      padding:.7rem .9rem; font-size:14px; color:#1D4ED8; cursor:pointer;
      text-align:left }
    .zusatz-zeile:hover{ background:#F7FAFF; border-color:#1D4ED8 }
  /* Legende UNTER der Karte (Testplan 3.3). Kein Kasten mit Schlagschatten mehr:
     ausserhalb der Karte muss sie nicht mehr gegen Kartengrafik ankaempfen, sondern
     sich in die Seite einfuegen - Flaechenfuellung statt Schwebeeffekt
     (docs/DESIGNSYSTEM.md 2.4/3). Waagerecht umbrechend, damit sie auf breiten
     Schirmen eine Zeile bleibt und auf schmalen sauber umbricht. */
  .karte-legende-block{ display:flex; flex-wrap:wrap; gap:.5rem 2rem;
    background:#FAFAF9; border:1px solid #E7E5E4; border-radius:8px;
    padding:.625rem .875rem; font-size:.8125rem; color:#44403C; line-height:1.6 }
  .drop-aktiv{ border-color:#00A9FF!important; background:#EFF5FF!important }