/* Baumkataster — mobile-first */
* { box-sizing: border-box; }
body {
  margin: 0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: #f2f4f1; color: #222; font-size: 16px;
}
a { color: #2e6b34; }
h1 { font-size: 1.4rem; margin: .8rem 0 .3rem; }
h2 { font-size: 1.1rem; margin: .2rem 0 .6rem; }

.topbar {
  display: flex; justify-content: space-between; align-items: center;
  background: #2e6b34; color: #fff; padding: .6rem .9rem;
}
.topbar a { color: #fff; text-decoration: none; }
.topbar .marke { font-weight: 700; font-size: 1.05rem; }
.topbar nav { display: flex; gap: .9rem; align-items: center; }
.topbar .benutzer { opacity: .8; font-size: .9rem; }
.mandant-wahl {
  background: #24562a; color: #fff; border: 1px solid #4a8a52;
  border-radius: 6px; padding: .2rem .4rem; font-size: .85rem; max-width: 11rem;
}

.inhalt { padding: .7rem .9rem 3rem; max-width: 1000px; margin: 0 auto; }
.flash { background: #fff8d6; border-bottom: 1px solid #e0d890; padding: .5rem .9rem; }
.flash p { margin: .2rem 0; }
.pfad { font-size: .85rem; margin: .4rem 0; }
.hinweis { color: #666; font-size: .88rem; margin: .3rem 0; }
.versteckt { display: none !important; }

.karte-box {
  background: #fff; border: 1px solid #dde2da; border-radius: 10px;
  padding: .8rem .9rem; margin: .8rem 0;
}
.karte-box.schmal { max-width: 420px; margin: 2rem auto; }
.karte-box.warn { border-color: #e6b800; background: #fffbe8; }

/* Formulare */
.formular label { display: block; margin: .55rem 0; font-size: .92rem; font-weight: 600; }
.formular input, .formular select, .formular textarea {
  display: block; width: 100%; margin-top: .25rem; padding: .55rem .6rem;
  font-size: 1rem; font-weight: 400;
  border: 1px solid #c6cec2; border-radius: 8px; background: #fff;
}
.formular .zeile { display: flex; gap: .7rem; flex-wrap: wrap; align-items: end; }
.formular .zeile > label { flex: 1 1 10rem; }
.formular fieldset { border: 1px solid #dde2da; border-radius: 8px; margin: .6rem 0; }
label.kontroll { display: flex; align-items: center; gap: .5rem; font-weight: 400; margin: .35rem 0; }
label.kontroll input { width: auto; margin: 0; transform: scale(1.3); }

/* Buttons */
.btn {
  display: inline-block; padding: .55rem .9rem; border-radius: 8px; cursor: pointer;
  background: #e8ece6; border: 1px solid #c6cec2; color: #222;
  font-size: .95rem; text-decoration: none; line-height: 1.2;
}
.btn.primaer { background: #2e6b34; border-color: #2e6b34; color: #fff; font-weight: 600; }
.btn.gefahr { background: #fbe9e7; border-color: #d0342c; color: #a02620; }
.btn.klein { padding: .25rem .55rem; font-size: .85rem; }
.btn.gross { width: 100%; padding: .8rem; font-size: 1.05rem; }
.werkzeuge { display: flex; gap: .5rem; flex-wrap: wrap; margin: .6rem 0; }
summary.btn { list-style: none; width: fit-content; }

/* Tabellen */
.tabelle { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabelle th { text-align: left; padding: .45rem .5rem; background: #eef1ec; }
.tabelle td { padding: .45rem .5rem; border-top: 1px solid #e4e8e1; vertical-align: top; }
.tabelle.daten th { background: none; color: #666; font-weight: 600; width: 8rem; }
tr.erledigt td { color: #999; }
tr.gefaellt td { color: #999; text-decoration: line-through; }
td.ueberfaellig, tr.ueberfaellig td:first-child { color: #d0342c; font-weight: 700; }

/* Badges / Kacheln */
.badge {
  display: inline-block; padding: .1rem .5rem; border-radius: 99px;
  background: #e8ece6; font-size: .8rem;
}
.badge.orange, .badge.d-hoch { background: #ffe3c2; color: #8a4b00; }
.badge.d-sofort { background: #ffd4d1; color: #a02620; font-weight: 700; }
.badge.gelb { background: #fff3bf; color: #7a6400; }
.badge.grau { background: #ddd; color: #555; }
.kachel-reihe { display: flex; gap: .6rem; flex-wrap: wrap; }
.kachel {
  flex: 1 1 8rem; background: #fff; border: 1px solid #dde2da; border-radius: 10px;
  padding: .6rem .8rem; font-size: .85rem;
}
.kachel strong { display: block; font-size: 1.5rem; }
.kachel.rot { border-color: #d0342c; background: #fff5f4; }
.kachel.orange { border-color: #e08c00; background: #fff9f0; }
a.kachel { text-decoration: none; color: inherit; }
a.kachel:hover { border-color: #2e6b34; }

/* Sofortmaßnahmen — der Grund, warum es den Maßnahmenmanager gibt */
.sofort-warnung { border: 2px solid #d0342c; background: #fff5f4; }
.sofort-warnung h2 { color: #a02620; }
tr.sofort-zeile td { background: #fff5f4; }

/* Karte */
.karten-rahmen { position: relative; }
/* Vollbild-Modus: Karte füllt den ganzen Bildschirm, Werkzeuge schweben oben */
body.karte-vollbild { overflow: hidden; }
body.karte-vollbild .karten-rahmen {
  position: fixed; inset: 0; z-index: 3000; background: #fff;
}
body.karte-vollbild #karte {
  height: 100%; min-height: 100%; border-radius: 0; border: none;
}
body.karte-vollbild .karten-werkzeuge {
  position: fixed; top: .45rem; left: 50%; transform: translateX(-50%);
  z-index: 3001; margin: 0; flex-wrap: nowrap; max-width: 98vw; overflow-x: auto;
  background: rgba(255,255,255,.93); padding: .3rem .45rem; border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
body.karte-vollbild .karten-werkzeuge .no-vollbild { display: none; }
body.karte-vollbild .karten-werkzeuge .btn { white-space: nowrap; }
#karte { height: 62vh; min-height: 320px; border-radius: 10px; border: 1px solid #dde2da; }
#karte.fadenkreuz { cursor: crosshair; }
/* Gesamtkarte des Mandanten in der Übersicht */
#uebersichtskarte { height: 45vh; min-height: 280px; border-radius: 10px; border: 1px solid #dde2da; }
body.karte-vollbild #uebersichtskarte { height: 100%; min-height: 100%; border-radius: 0; border: none; }
.btn.aktiv { background: #1e4a23; border-color: #1e4a23; color: #fff; font-weight: 700; }
.karten-status {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: .8rem; z-index: 1000;
  background: rgba(30, 40, 30, .88); color: #fff; padding: .4rem .9rem;
  border-radius: 99px; font-size: .88rem; margin: 0; max-width: 90%;
}
.schnell-panel {
  position: absolute; left: .6rem; right: .6rem; bottom: .6rem; z-index: 1001;
  background: #fff; border: 1px solid #c6cec2; border-radius: 12px;
  padding: .6rem .8rem; box-shadow: 0 4px 16px rgba(0,0,0,.25);
}
.schnell-panel label { font-size: .85rem; font-weight: 600; }
.flaeche-hinweis {
  margin: 0 0 .4rem; padding: .25rem .5rem; border-radius: 6px;
  background: #fff3bf; color: #7a6400; font-size: .82rem; font-weight: 600;
}
.schnell-panel input {
  display: block; width: 100%; padding: .5rem .6rem; margin-top: .2rem;
  border: 1px solid #c6cec2; border-radius: 8px; font-size: 1rem;
}
.schnell-panel .zeile { display: flex; gap: .6rem; }
.schnell-panel .zeile label:first-child { flex: 0 0 5.5rem; }
.schnell-panel .zeile label:last-child { flex: 1; }
.baum-marker {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid #fff; box-shadow: 0 0 4px rgba(0,0,0,.6);
}
.baum-marker.neu { background: #1976d2; animation: pulsieren 1s infinite alternate; }
@keyframes pulsieren { from { transform: scale(1); } to { transform: scale(1.35); } }
.flaeche-etikett {
  background: rgba(255,255,255,.75); border: none; box-shadow: none;
  font-weight: 700; font-size: .8rem; color: #333; padding: 0 .3rem;
}
.flaeche-legende {
  display: inline-block; width: 1.4em; height: .85em; vertical-align: -.1em;
  border: 2px dashed #2e8b57; background: rgba(46,139,87,.15);
}
.rahmen-legende {
  display: inline-block; width: 1.4em; height: .85em; vertical-align: -.1em;
  border: 2px dashed #1976d2;
}
.baum-nr {
  position: absolute; top: -1.25em; left: 50%; transform: translateX(-50%);
  background: rgba(255,255,255,.85); border-radius: 4px; padding: 0 .25em;
  font-size: .78rem; font-weight: 700; white-space: nowrap; pointer-events: none;
}
.popup-knoepfe { display: flex; gap: .4rem; margin-top: .5rem; }
.legende { font-size: .85rem; color: #555; }
.punkt {
  display: inline-block; width: .85em; height: .85em; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 0 2px #888; vertical-align: -.1em;
}
.punkt.gruen { background: #2e8b57; } .punkt.gelb { background: #e6b800; }
.punkt.rot { background: #d0342c; } .punkt.grau { background: #888; }
.punkt.blau { background: #1976d2; }
.baum-marker.vorlaeufig { border-style: dashed; opacity: .85; }

/* Baumliste: Suche + Einklappen */
.baum-suche {
  width: 100%; padding: .55rem .6rem; margin-bottom: .5rem;
  border: 1px solid #c6cec2; border-radius: 8px; font-size: 1rem;
}
#baum-liste summary { margin-bottom: .5rem; }
#baum-liste[open] summary { background: #1e4a23; border-color: #1e4a23; color: #fff; }

/* Laufender GPS-Standort (standort.js) */
.standort-punkt {
  width: 18px; height: 18px; border-radius: 50%; position: relative;
  background: #4285f4; border: 3px solid #fff;
  box-shadow: 0 0 6px rgba(0,0,0,.5);
}
.standort-puls {
  position: absolute; inset: -3px; border-radius: 50%;
  border: 2px solid #4285f4; opacity: .7;
  animation: standort-pulsieren 2s ease-out infinite;
}
@keyframes standort-pulsieren {
  from { transform: scale(1); opacity: .7; }
  to   { transform: scale(2.6); opacity: 0; }
}
.baum-etikett {
  background: rgba(255,255,255,.85); border: none; box-shadow: none;
  font-weight: 700; font-size: .78rem; padding: 0 .3rem;
}

/* Dynamische Zeilen im Kontrollformular */
.dyn-zeile {
  display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
  padding: .4rem 0; border-bottom: 1px dashed #e4e8e1;
}
.dyn-zeile select { flex: 2 1 12rem; } .dyn-zeile input { flex: 3 1 12rem; }
.dyn-zeile select, .dyn-zeile input { padding: .45rem .5rem; border: 1px solid #c6cec2; border-radius: 8px; }
.dyn-block { border: 1px solid #e4e8e1; border-radius: 8px; padding: .5rem .6rem; margin: .5rem 0; }

/* Kontrollhistorie */
.kontrolle-eintrag { border-left: 4px solid #c6cec2; padding: .3rem .7rem; margin: .7rem 0; }
.kontrolle-eintrag.offen { border-color: #e6b800; background: #fffdf2; }
.liste { margin: .3rem 0; padding-left: 1.2rem; }

/* Fotos */
.foto-galerie { display: flex; gap: .6rem; flex-wrap: wrap; }
.foto-galerie figure { margin: 0; width: 140px; }
.foto-galerie img { width: 140px; height: 105px; object-fit: cover; border-radius: 8px; }
.foto-galerie figcaption { font-size: .75rem; color: #666; display: flex; gap: .3rem; justify-content: space-between; }

/* Druck */
@media print {
  .no-print, .topbar, .flash { display: none !important; }
  body { background: #fff; font-size: 11px; }
  .tabelle th { background: #eee !important; }
}
body.druck { background: #fff; padding: 1.5cm; font-size: 12px; }
.druck-kopf { display: flex; justify-content: space-between; border-bottom: 2px solid #2e6b34; margin-bottom: 1rem; }
.druck-kopf h1 { margin: 0 0 .3rem; }
.druck .rechts { text-align: right; }

@media (min-width: 700px) {
  h1 { font-size: 1.7rem; }
  .inhalt { padding: 1rem 1.5rem 3rem; }
}