/* Immobilienportal. Ruhige Flaechen, damit die Marker die Farbe tragen. */

:root {
  --papier: #f7f7f5;
  --karte: #ffffff;
  --linie: #e3e3df;
  --text: #24262b;
  --leise: #6d7178;
  --akzent: #2f6fd0;
  --rot: #c0392b;
  --radius: 8px;
  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  background: var(--papier);
}

a { color: var(--akzent); }

/* ---------------------------------------------------------------- Kopf */

.kopf {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 18px;
  background: var(--karte);
  border-bottom: 1px solid var(--linie);
}
.kopf .marke { font-weight: 650; text-decoration: none; color: var(--text); }
.kopf nav { display: flex; gap: 14px; }
.kopf nav a { text-decoration: none; color: var(--leise); }
.kopf nav a:hover { color: var(--text); }
.kopf .stand { margin-left: auto; color: var(--leise); font-size: 13px; }
.kopf .abmelden { font-size: 13px; color: var(--leise); text-decoration: none; }

/* ------------------------------------------------------------- Flaeche */

.arbeitsflaeche {
  display: grid;
  grid-template-columns: 280px 1fr;
  height: calc(100vh - 47px);
}

.leiste {
  overflow-y: auto;
  background: var(--karte);
  border-right: 1px solid var(--linie);
  padding: 14px 14px 30px;
}

.kartenfeld { position: relative; }
#karte { width: 100%; height: 100%; }

/* ------------------------------------------------------------ Filter */

.filter section { margin-bottom: 18px; }
.filter h3 {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--leise);
  display: flex;
  justify-content: space-between;
}
.filter ul { list-style: none; margin: 0; padding: 0; }
.filter li { margin: 1px 0; }
.filter label {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 5px;
  border-radius: 5px;
  cursor: pointer;
}
.filter label:hover { background: var(--papier); }
.filter label.ruht { opacity: .45; cursor: default; }
.filter .name { flex: 1; }
.filter .zahl { color: var(--leise); font-variant-numeric: tabular-nums; font-size: 13px; }
.filter .unterart .name { padding-left: 12px; font-size: 14px; }
.filter .oberart .name { font-weight: 600; }
.filter .punkt {
  width: 10px; height: 10px; border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .18); flex: none;
}
.filterfeld input[type="search"] {
  width: 100%; padding: 7px 9px;
  border: 1px solid var(--linie); border-radius: var(--radius);
  font: inherit; background: var(--papier);
}
.spanne { display: flex; align-items: center; gap: 5px; }
.spanne input {
  width: 100%; min-width: 0; padding: 5px 7px;
  border: 1px solid var(--linie); border-radius: 5px; font: inherit;
}
.spanne .einheit { color: var(--leise); font-size: 13px; }
.filter .hinweis { margin: 5px 3px 0; font-size: 12px; color: var(--leise); }
.knoepfe { display: flex; align-items: center; gap: 12px; }
.knoepfe button {
  flex: 1; padding: 8px; border: 0; border-radius: var(--radius);
  background: var(--akzent); color: #fff; font: inherit; font-weight: 600;
  cursor: pointer;
}
.zuruecksetzen { font-size: 13px; color: var(--leise); }

/* ------------------------------------------------------------- Karte */

.objektmarker { background: none; border: 0; }
.leaflet-popup-content .blase { display: grid; gap: 2px; min-width: 180px; }
.blase strong { font-size: 14px; }
.blase .art, .blase .ort, .blase .ungefaehr { color: var(--leise); font-size: 12px; }
.blase .preis { font-size: 16px; font-weight: 650; margin-top: 3px; }
.blase .termin, .blase .mehrfach { font-size: 12px; color: var(--rot); }
.blase a { margin-top: 5px; font-weight: 600; }

.legende {
  position: absolute; right: 12px; bottom: 22px; z-index: 500;
  background: rgba(255, 255, 255, .95);
  border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 9px 11px; font-size: 12px; max-width: 200px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
}
.legende strong { display: block; font-size: 10px; text-transform: uppercase;
                  letter-spacing: .06em; color: var(--leise); margin-top: 6px; }
.legende strong:first-child { margin-top: 0; }
.legende ul { list-style: none; margin: 4px 0; padding: 0; }
.legende li { display: flex; align-items: center; gap: 6px; }
.legende .punkt { width: 9px; height: 9px; border-radius: 50%;
                  border: 1px solid rgba(0, 0, 0, .18); }
.legende .hinweis { margin: 4px 0 0; color: var(--leise); }

.kartenzaehler, .kartenfehler {
  position: absolute; left: 12px; bottom: 22px; z-index: 500;
  background: rgba(255, 255, 255, .95);
  border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 6px 10px; font-size: 12px; color: var(--leise);
}
.kartenfehler { color: var(--rot); }

/* ------------------------------------------------------------- Liste */

.listenfeld { overflow-y: auto; padding: 16px 20px 40px; }
.listenkopf { display: flex; align-items: baseline; gap: 18px; margin-bottom: 10px; }
.listenkopf p { margin: 0; }
.sortierung { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; }
.sortierung a { color: var(--leise); text-decoration: none; }
.sortierung a.aktiv { color: var(--text); font-weight: 600; }

.objektliste { list-style: none; margin: 0; padding: 0; }
.objektliste li { border-bottom: 1px solid var(--linie); }
.objektliste a {
  display: grid;
  grid-template-columns: 14px 1fr 110px 130px 110px;
  align-items: center; gap: 12px;
  padding: 10px 6px; text-decoration: none; color: inherit;
}
.objektliste a:hover { background: var(--karte); }
.objektliste .punkt { width: 10px; height: 10px; border-radius: 50%;
                      border: 1px solid rgba(0, 0, 0, .18); }
.objektliste .haupt { display: grid; min-width: 0; }
.objektliste .titel { font-weight: 600; overflow: hidden;
                      text-overflow: ellipsis; white-space: nowrap; }
.objektliste .unter { color: var(--leise); font-size: 13px; }
.objektliste .masse { color: var(--leise); font-size: 13px; text-align: right; }
.objektliste .masse small { display: block; }
.objektliste .preisspalte { text-align: right; }
.objektliste .preis { font-weight: 650; font-variant-numeric: tabular-nums; }
.objektliste .preisspalte small { display: block; color: var(--leise); }
.statusmarke {
  justify-self: end; font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 99px;
  color: var(--farbe); border: 1px solid var(--farbe);
}
.blaettern { display: flex; gap: 16px; align-items: center;
             margin-top: 16px; color: var(--leise); font-size: 13px; }

/* ----------------------------------------------------------- Detail */

.objekt { max-width: 860px; margin: 0 auto; padding: 22px 20px 60px; }
.objektkopf { display: flex; justify-content: space-between;
              gap: 24px; align-items: flex-start; }
.objektkopf .art { margin: 0; color: var(--leise); font-size: 13px; }
.objektkopf h1 { margin: 2px 0 8px; font-size: 25px; line-height: 1.25; }
.quellenzeile { margin: 0; display: flex; gap: 8px; flex-wrap: wrap;
                align-items: center; }
.quellenmarke {
  font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 99px;
  color: #fff; background: var(--farbe);
}
.mehrfach { font-size: 12px; color: var(--rot); font-weight: 600; }
.preisblock { text-align: right; flex: none; }
.preisblock .preis { margin: 0; font-size: 26px; font-weight: 700;
                     font-variant-numeric: tabular-nums; }
.preisblock .preisqm { margin: 0; color: var(--leise); font-size: 13px; }
.preisblock .status {
  margin: 8px 0 0; display: inline-block; font-size: 12px; font-weight: 600;
  padding: 3px 10px; border-radius: 99px;
  color: var(--farbe); border: 1px solid var(--farbe);
}

.objekt section {
  margin-top: 22px; padding: 16px 18px;
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--radius);
}
.objekt h2 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase;
             letter-spacing: .06em; color: var(--leise); }
.objekt dl { display: grid; grid-template-columns: max-content 1fr;
             gap: 5px 18px; margin: 0; }
.objekt dt { color: var(--leise); }
.objekt dd { margin: 0; }
.objekt dd.betont { font-weight: 700; font-size: 17px; }
.zvg { border-left: 3px solid var(--rot); }
.warnung { color: var(--rot); font-weight: 600; margin-left: 8px; }

.eckdaten { display: flex; gap: 30px; flex-wrap: wrap;
            justify-content: space-between; }
.eckdaten address { font-style: normal; text-align: right; color: var(--text); }
.ungefaehr { display: block; margin-top: 6px; font-size: 12px; color: var(--leise); }

.angebotsvergleich table { width: 100%; border-collapse: collapse; }
.angebotsvergleich th { text-align: left; font-weight: 600; font-size: 12px;
                        color: var(--leise); padding-bottom: 4px; }
.angebotsvergleich td { padding: 5px 0; border-top: 1px solid var(--linie); }
.angebotsvergleich .punkt { display: inline-block; width: 9px; height: 9px;
                            border-radius: 50%; margin-right: 6px; }

.verlauf ol { list-style: none; margin: 0; padding: 0; }
.verlauf li { display: flex; gap: 16px; padding: 3px 0;
              font-variant-numeric: tabular-nums; }
.verlauf .datum { color: var(--leise); width: 92px; }
.verlauf .betrag { font-weight: 600; width: 120px; }
.verlauf .aenderung { font-size: 13px; }
.verlauf .runter .aenderung { color: #27823f; }
.verlauf .hoch .aenderung { color: var(--rot); }

.bilderreihe { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
               gap: 8px; }
.bilderreihe img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
                   border-radius: 6px; background: var(--papier); }

.statuswahl { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.statusknopf {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  padding: 6px 13px; border-radius: 99px;
  background: transparent; color: var(--farbe); border: 1px solid var(--farbe);
}
.statusknopf.gewaehlt { background: var(--farbe); color: #fff; }
.notizfeld { display: grid; gap: 4px; color: var(--leise); font-size: 13px; }
.notizfeld textarea {
  font: inherit; color: var(--text); padding: 8px;
  border: 1px solid var(--linie); border-radius: 6px; resize: vertical;
}
.speichern { margin-top: 8px; font: inherit; padding: 7px 16px; border: 0;
             border-radius: var(--radius); background: var(--text); color: #fff;
             cursor: pointer; }
.analyse .herkunft { margin: 10px 0 0; font-size: 12px; color: var(--leise); }

/* Unterlagen: eine Liste, in der die Art vorne steht und gleich breit bleibt.
   So laesst sich von oben nach unten lesen, was vorliegt, ohne jede Zeile
   ganz zu lesen - bei acht Anlagen zu einem Verfahren zaehlt das. */
.unterlagenliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.unterlagenliste li { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.unterlagenliste .marke {
  flex: 0 0 auto; min-width: 178px;
  font-size: 12px; font-weight: 650; letter-spacing: .02em;
  color: var(--leise); text-transform: uppercase;
}
/* Das Gutachten ist der Grund, warum diese Liste existiert. */
.unterlagenliste .marke-gutachten { color: var(--text); }
.unterlagenliste a { color: var(--text); }
.unterlagenliste .dateien { display: flex; flex-wrap: wrap; gap: 4px 7px; align-items: baseline; }
.unterlagenliste .trenner { color: var(--leise); }
.unterlagenliste .nebensache { font-size: 12px; color: var(--leise); }
.unterlagen .hinweis { margin: 12px 0 0; font-size: 12px; color: var(--leise); }

.merkmale { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; }
.merkmal {
  font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 99px;
  border: 1px solid var(--linie); color: var(--leise);
}

.objektfuss { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 22px; }
.objektfuss .original { font-weight: 600; }
.objektfuss .zurueck { color: var(--leise); }

/* Der Weg ins Justizportal ist ein Formular, kein Verweis - es muss die Suche
   nach dem Aktenzeichen abschicken. Aussehen soll er wie die Verweise daneben,
   deshalb werden Rahmen und Flaeche des Knopfes zurueckgenommen. */
.objektfuss .originalform { margin: 0; display: inline; }
.objektfuss button.original {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; font-weight: 600; color: var(--akzent);
  text-decoration: underline; cursor: pointer;
}

/* ------------------------------------------------------------ Sonstiges */

.leer { padding: 40px 20px; text-align: center; color: var(--leise); }

.anmeldeseite { display: grid; place-items: center; min-height: 100vh; }
.anmeldung {
  display: grid; gap: 14px; width: min(320px, 90vw);
  background: var(--karte); padding: 26px;
  border: 1px solid var(--linie); border-radius: 12px;
}
.anmeldung h1 { margin: 0; font-size: 19px; }
.anmeldung label { display: grid; gap: 5px; font-size: 13px; color: var(--leise); }
.anmeldung input {
  font: inherit; color: var(--text); padding: 8px 10px;
  border: 1px solid var(--linie); border-radius: 6px;
}
.anmeldung button {
  font: inherit; font-weight: 600; padding: 9px; border: 0;
  border-radius: var(--radius); background: var(--akzent); color: #fff;
  cursor: pointer;
}
.anmeldung .fehler { margin: 0; color: var(--rot); font-size: 13px; }

@media (max-width: 800px) {
  .arbeitsflaeche { grid-template-columns: 1fr; height: auto; }
  .leiste { border-right: 0; border-bottom: 1px solid var(--linie); }
  #karte { height: 65vh; }
  .objektliste a { grid-template-columns: 14px 1fr auto; }
  .objektliste .masse, .statusmarke { display: none; }
  .objektkopf { flex-direction: column; }
  .preisblock { text-align: left; }
  .eckdaten address { text-align: left; }
}

/* ---------------------------------------------------------------------------
   Abschnitt 14: eigene Gebiete zeichnen
   --------------------------------------------------------------------------- */

.zeichenknopf a {
  font-size: 18px;
  line-height: 26px;
  text-align: center;
  color: #c2410c;
}
.zeichenknopf.zeichnet a { background: #c2410c; color: #fff; }

/* Waehrend des Zeichnens ist jeder Klick eine Ecke - das Fadenkreuz sagt es,
   bevor jemand versucht, die Karte zu verschieben. */
.zeichnend { cursor: crosshair; }
.zeichnend .leaflet-marker-icon { cursor: crosshair; }

.zeichenleiste {
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  gap: .5rem;
  align-items: center;
  padding: .6rem .9rem;
  background: var(--flaeche, #fff);
  border: 1px solid var(--rahmen, #d4d4d8);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
  font-size: .9rem;
  max-width: 90%;
}
.zeichenleiste button {
  padding: .3rem .7rem;
  font-size: .85rem;
  white-space: nowrap;
}

.gebietsliste { list-style: none; margin: 0; padding: 0; }
.gebietsliste li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .4rem;
}
.gebiet-loeschen {
  border: 0;
  background: none;
  color: var(--gedaempft, #71717a);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 .3rem;
}
.gebiet-loeschen:hover { color: #b91c1c; }

/* Abschnitt 16: die Passung aus den bisherigen Entscheidungen */
.passung {
  margin: 0 0 .8rem;
  padding: .6rem .8rem;
  border-left: 3px solid var(--rahmen, #d4d4d8);
  border-radius: 4px;
  background: var(--flaeche2, #f4f4f5);
  font-size: .92rem;
}
.passung.gut     { border-left-color: #15803d; }
.passung.mittel  { border-left-color: #a1a1aa; }
.passung.schwach { border-left-color: #b45309; }
.passung .grund {
  display: block;
  margin-top: .25rem;
  color: var(--gedaempft, #71717a);
}