/* Virtueller Friedhof Rochlitz an der Iser
   Zurueckhaltende Gestaltung: Steinfarben, Serifenschrift fuer Namen. */

:root {
  --stein:      #f4f2ee;
  --stein-tief: #e6e2db;
  --linie:      #d4cec4;
  --text:       #2c2a26;
  --text-leise: #6d675e;
  --akzent:     #6b5d43;
  --akzent-hell:#8a7a5c;
  --warn:       #9a5b2c;
  --weiss:      #fffefb;
  --serif:      "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans:       system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --kopf-hoehe: 64px;
  --fuss-hoehe: 34px;
}

* { box-sizing: border-box; }

/* Eigene display-Regeln (z. B. .tafel { display: flex }) haben Vorrang vor
   der Browserregel [hidden] { display: none }. Ohne diese Zeile bliebe die
   Detailtafel trotz hidden-Attribut sichtbar. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  font-family: var(--sans);
  color: var(--text);
  background: var(--stein);
}

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

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

.kopf {
  height: var(--kopf-hoehe);
  display: flex;
  align-items: center;
  padding: 0 20px;
  background: var(--weiss);
  border-bottom: 1px solid var(--linie);
}

.kopf h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: .01em;
}

.untertitel {
  margin: 2px 0 0;
  font-size: .8rem;
  color: var(--text-leise);
}

/* ---------- Grundraster ---------- */

.rahmen {
  display: grid;
  grid-template-columns: 340px 1fr;
  height: calc(100% - var(--kopf-hoehe) - var(--fuss-hoehe));
}

.seitenleiste {
  border-right: 1px solid var(--linie);
  background: var(--weiss);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.kartenspalte { position: relative; min-height: 0; }
#karte { position: absolute; inset: 0; background: var(--stein-tief); }

/* ---------- Suche ---------- */

.suchfeld { position: relative; padding: 12px; border-bottom: 1px solid var(--linie); }

.suchfeld input {
  width: 100%;
  padding: 9px 30px 9px 11px;
  font: inherit;
  font-size: .9rem;
  color: var(--text);
  background: var(--stein);
  border: 1px solid var(--linie);
  border-radius: 3px;
}

.suchfeld input:focus {
  outline: none;
  border-color: var(--akzent-hell);
  background: var(--weiss);
}

.loeschen {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px; height: 22px;
  border: 0;
  background: none;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--text-leise);
  cursor: pointer;
}

.such-hinweis {
  margin: 0;
  padding: 8px 14px;
  font-size: .75rem;
  color: var(--text-leise);
  border-bottom: 1px solid var(--linie);
}

/* ---------- Trefferliste ---------- */

.trefferliste {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex: 1;
}

.treffer {
  display: flex;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--stein-tief);
  cursor: pointer;
}

.treffer:hover, .treffer.aktiv { background: var(--stein); }

.treffer img {
  width: 44px; height: 56px;
  object-fit: cover;
  border-radius: 2px;
  background: var(--stein-tief);
  flex: none;
}

.treffer-text { min-width: 0; }

.treffer-name {
  font-family: var(--serif);
  font-size: .95rem;
  line-height: 1.25;
}

.treffer-name .maedchen { color: var(--text-leise); font-style: italic; }

.treffer-daten {
  font-size: .76rem;
  color: var(--text-leise);
  margin-top: 2px;
}

.treffer-grab {
  font-size: .72rem;
  color: var(--akzent-hell);
  margin-top: 3px;
}

.marke {
  display: inline-block;
  font-size: .65rem;
  padding: 1px 5px;
  border-radius: 2px;
  background: var(--stein-tief);
  color: var(--text-leise);
  margin-left: 4px;
  vertical-align: 1px;
}

.marke.unverortet { background: #f0e4d6; color: var(--warn); }

/* ---------- Karte: Marker und Tooltip ---------- */

.grabmarke {
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--akzent);
  border: 2px solid var(--weiss);
  box-shadow: 0 1px 3px rgba(0,0,0,.5);
}

.grabmarke.hervor { background: var(--warn); transform: scale(1.35); }

.leaflet-tooltip.vorschau {
  padding: 0;
  border: 1px solid var(--linie);
  border-radius: 3px;
  box-shadow: 0 3px 14px rgba(0,0,0,.3);
  background: var(--weiss);
  width: 190px;
  white-space: normal;
}

.vorschau img { width: 100%; height: 150px; object-fit: cover; display: block; }
.vorschau .vorschau-text { padding: 7px 9px; }

.vorschau .vorschau-titel {
  font-family: var(--serif);
  font-size: .88rem;
  margin-bottom: 2px;
}

.vorschau .vorschau-namen {
  font-size: .74rem;
  color: var(--text-leise);
  line-height: 1.35;
}

.karten-hinweis {
  position: absolute;
  left: 12px; bottom: 22px;
  z-index: 500;
  max-width: 300px;
  padding: 9px 12px;
  font-size: .78rem;
  line-height: 1.4;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-left: 3px solid var(--warn);
  border-radius: 3px;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}

/* ---------- Detailtafel ---------- */

.tafel-hintergrund {
  position: fixed; inset: 0;
  background: rgba(30,28,24,.55);
  z-index: 1000;
}

/* Die Tafel ist an der rechten unteren Ecke frei ziehbar (resize: both).
   Damit das wirkt, muss sie ihre eigene Groesse besitzen - deshalb wird sie
   ueber top/left positioniert und nicht ueber transform zentriert. */
.tafel {
  position: fixed;
  z-index: 1001;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(1100px, calc(100vw - 40px));
  height: min(760px, calc(100vh - 60px));
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  min-width: 380px;
  min-height: 260px;
  /* Die Tafel selbst scrollt nicht - sonst wandern die Knöpfe oben rechts
     beim Blättern mit aus dem Bild. Gescrollt wird der Inhalt darunter. */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  resize: both;
  background: var(--weiss);
  border-radius: 4px;
  box-shadow: 0 12px 48px rgba(0,0,0,.4);
}

/* Vollbreite fuer sehr breite Stammbaeume */
.tafel.breit {
  width: calc(100vw - 24px);
  height: calc(100vh - 24px);
}

.tafel-zu, .tafel-breit, .tafel-edit {
  position: absolute;
  top: 10px;
  width: 30px; height: 30px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  line-height: 1;
  color: var(--text-leise);
  cursor: pointer;
  z-index: 2;
}

.tafel-zu { right: 12px; font-size: 1.4rem; }
.tafel-breit { right: 48px; font-size: 1rem; }
.tafel-edit { right: 84px; font-size: 1rem; }

.tafel-zu:hover, .tafel-breit:hover, .tafel-edit:hover { background: var(--stein-tief); }

.tafel-edit.an { background: var(--akzent); color: #fff; }

/* ---------- Bearbeitungsformular ---------- */

.bearbeiten-hinweis {
  margin: 0 0 14px;
  padding: 8px 11px;
  font-size: .76rem;
  line-height: 1.45;
  background: #eef2e8;
  border-left: 3px solid #6d8a52;
  border-radius: 2px;
  color: #45543a;
}

.person.form { padding: 13px 0; }

.feldzeile {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 6px 10px;
  align-items: center;
  margin-bottom: 5px;
}

.feldzeile > label {
  font-size: .74rem;
  color: var(--text-leise);
  text-align: right;
}

.feldzeile input[type=text],
.feldzeile textarea {
  width: 100%;
  font: inherit;
  font-size: .84rem;
  padding: 5px 7px;
  color: var(--text);
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: 3px;
}

.feldzeile input:focus, .feldzeile textarea:focus {
  outline: none;
  border-color: var(--akzent-hell);
  background: #fffdf6;
}

.feldzeile input.fehler { border-color: var(--warn); background: #fdf3ec; }

.feldzeile textarea { min-height: 46px; resize: vertical; }

.feld-hilfe {
  grid-column: 2;
  font-size: .7rem;
  color: var(--text-leise);
  margin-top: -2px;
}

.feld-hilfe.warnung { color: var(--warn); }

.haken {
  grid-column: 2;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: .74rem;
  color: var(--text-leise);
}

.haken label { display: flex; align-items: center; gap: 4px; cursor: pointer; }

.form-leiste {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 20px;
  padding: 12px 0 2px;
  background: linear-gradient(to bottom, rgba(255,254,251,0), var(--weiss) 28%);
}

.knopf {
  font: inherit;
  font-size: .82rem;
  padding: 7px 13px;
  border: 1px solid var(--linie);
  border-radius: 3px;
  background: var(--stein);
  color: var(--text);
  cursor: pointer;
}

.knopf:hover { background: var(--stein-tief); }
.knopf.wichtig { background: var(--akzent); color: #fff; border-color: var(--akzent); }
.knopf.wichtig:hover { background: var(--akzent-hell); }

.form-meldung { font-size: .76rem; color: var(--text-leise); }
.form-meldung.gut { color: #4a7c4a; }
.form-meldung.schlecht { color: var(--warn); }

/* Den Anfasser zum Ziehen zeichnet der Browser selbst (resize: both). */

/* ---------- Verweis zu FamilySearch ---------- */

.person-links { margin-top: 6px; }

.fs-link {
  display: inline-block;
  font-size: .74rem;
  padding: 3px 9px;
  border: 1px solid var(--linie);
  border-radius: 11px;
  color: var(--akzent);
  text-decoration: none;
  background: var(--weiss);
}

.fs-link:hover { background: var(--stein); border-color: var(--akzent-hell); }

/* Direkter Treffer statt Suche - etwas kräftiger hervorgehoben */
.fs-link.fs-direkt {
  background: var(--stein);
  border-color: var(--akzent-hell);
  font-weight: 600;
}

.tafel-inhalt {
  display: grid;
  grid-template-columns: 340px 1fr;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.tafel-bild {
  background: var(--stein-tief);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tafel-bild img {
  width: 100%;
  border-radius: 3px;
  box-shadow: 0 2px 10px rgba(0,0,0,.2);
}

/* min-width:0 ist noetig, damit die Spalte schmaler werden darf als ihr
   breitester Inhalt. Ohne das sprengt ein breiter Stammbaum das Raster und
   der Text rechts wird abgeschnitten. */
.tafel-daten { padding: 22px 26px 26px; min-width: 0; }

.tafel-daten h2 {
  margin: 0 0 3px;
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 600;
}

.tafel-haus { font-size: .84rem; color: var(--text-leise); margin: 0 0 18px; }

.tafel-warnung {
  margin: 0 0 16px;
  padding: 9px 12px;
  font-size: .8rem;
  line-height: 1.45;
  background: #faf1e6;
  border-left: 3px solid var(--warn);
  border-radius: 2px;
  color: #7a4a22;
}

.person {
  padding: 11px 0;
  border-top: 1px solid var(--stein-tief);
}

.person-name {
  font-family: var(--serif);
  font-size: 1.02rem;
}

.person-beruf { font-size: .8rem; color: var(--akzent-hell); font-style: italic; }

.person-daten { font-size: .84rem; color: var(--text-leise); margin-top: 2px; }

.person-notiz {
  font-size: .76rem;
  color: var(--text-leise);
  margin-top: 4px;
  padding-left: 9px;
  border-left: 2px solid var(--linie);
  line-height: 1.45;
}

.unsicher { color: var(--warn); }

.abschnitt-titel {
  margin: 22px 0 6px;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--text-leise);
}

.inschrift {
  margin: 0;
  padding: 12px 14px;
  font-family: var(--serif);
  font-size: .86rem;
  line-height: 1.6;
  white-space: pre-wrap;
  background: var(--stein);
  border-radius: 3px;
  color: #413d36;
}

/* Ahnenbaeume werden mit jeder Generation doppelt so breit und mit vielen
   Kindern zusaetzlich hoch. Darum ein Fenster mit fester Hoehe, in dem in
   beide Richtungen geschoben wird; die Groesse regelt die Zoomleiste. */
.stammbaum {
  overflow: auto;
  max-height: 62vh;
  background: var(--stein);
  border-radius: 3px;
  padding: 4px;
  overscroll-behavior: contain;
}

.stammbaum img, .stammbaum svg {
  max-width: none;
  display: block;
}

.stammbaum-fuss {
  margin: 6px 0 0;
  font-size: .72rem;
  color: var(--text-leise);
}

.kein-stammbaum {
  font-size: .8rem;
  color: var(--text-leise);
  padding: 12px 14px;
  background: var(--stein);
  border-radius: 3px;
}

/* ---------- Fuss ---------- */

.fuss {
  height: var(--fuss-hoehe);
  display: flex;
  align-items: center;
  padding: 0 20px;
  background: var(--weiss);
  border-top: 1px solid var(--linie);
}

.fuss p { margin: 0; font-size: .68rem; color: var(--text-leise); }

/* ---------- Schmale Bildschirme ---------- */

@media (max-width: 800px) {
  .rahmen { grid-template-columns: 1fr; grid-template-rows: 260px 1fr; }
  .seitenleiste { border-right: 0; border-bottom: 1px solid var(--linie); }
  .tafel-inhalt { grid-template-columns: 1fr; }
  .kopf h1 { font-size: 1.02rem; }
}

/* ---------- Hausangaben mit Verweis auf OpenStreetMap ---------- */

.person-haus {
  font-size: .8rem;
  color: var(--text-leise);
  margin-top: 3px;
}

a.haus {
  color: var(--akzent);
  text-decoration: none;
  border-bottom: 1px dotted var(--akzent-hell);
}

a.haus:hover { border-bottom-style: solid; background: var(--stein); }

/* Nummer ohne Entsprechung in OSM: bleibt Text, nur dezent gekennzeichnet */
.haus-ohne {
  border-bottom: 1px dotted var(--linie);
  cursor: help;
}

.tafel-haus a.haus { color: var(--akzent); }

/* ---------- Kurzhinweis ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(12px);
  z-index: 1100;
  max-width: min(620px, calc(100vw - 40px));
  padding: 10px 16px;
  font-size: .8rem;
  line-height: 1.45;
  color: var(--weiss);
  background: #4a4339;
  border-radius: 4px;
  box-shadow: 0 4px 18px rgba(0,0,0,.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s, transform .18s;
}

.toast.an { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Todesursache, Quellen, Herkunftsvermerk ---------- */

.person-ursache {
  font-size: .8rem;
  color: var(--text-leise);
  margin-top: 3px;
}

.person-quellen {
  font-size: .78rem;
  margin-top: 4px;
}

.person-quellen a {
  color: var(--akzent);
  text-decoration: none;
  border-bottom: 1px dotted var(--akzent-hell);
}

.person-quellen a:hover { border-bottom-style: solid; }

/* Angaben, die nicht vom Grabstein stammen, sondern aus der GEDCOM-Datei */
.herkunft {
  font-size: .68rem;
  font-style: normal;
  color: var(--text-leise);
  background: var(--stein);
  border: 1px solid var(--linie);
  border-radius: 9px;
  padding: 0 6px;
  white-space: nowrap;
  cursor: help;
}

/* ---------- Störungsmeldung und Entwurfswiederherstellung ---------- */

.stoerung {
  position: fixed;
  left: 0; right: 0; top: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: .82rem;
  line-height: 1.45;
  color: #fff;
  background: #8a3a2a;
  box-shadow: 0 2px 10px rgba(0,0,0,.3);
}

.stoerung button {
  font: inherit;
  font-size: .78rem;
  padding: 4px 10px;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 3px;
  background: rgba(255,255,255,.12);
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
}

.stoerung button:hover { background: rgba(255,255,255,.24); }
.stoerung #stoerung-zu { margin-left: auto; border: 0; font-size: 1.1rem; padding: 0 6px; }

.entwurf-hinweis {
  margin: 16px 0 0;
  padding: 9px 12px;
  font-size: .78rem;
  line-height: 1.5;
  background: #f6efdc;
  border-left: 3px solid #b08d3a;
  border-radius: 2px;
  color: #5c4a1e;
}

.entwurf-hinweis .knopf { margin-left: 4px; }

/* ---------- Auswahl zwischen mehreren Stammbäumen ---------- */

.baum-wahl {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 7px;
}

.baum-knopf {
  font: inherit;
  font-family: var(--serif);
  font-size: .8rem;
  padding: 4px 10px;
  border: 1px solid var(--linie);
  border-radius: 12px;
  background: var(--weiss);
  color: var(--text-leise);
  cursor: pointer;
}

.baum-knopf:hover { background: var(--stein); }

.baum-knopf.an {
  background: var(--akzent);
  border-color: var(--akzent);
  color: #fff;
}

/* ---------- Zoomleiste über dem Stammbaum ---------- */

.baum-zoom {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 7px;
}

.baum-zoom button {
  font: inherit;
  font-family: var(--serif);
  font-size: .8rem;
  line-height: 1;
  padding: 5px 9px;
  border: 1px solid var(--linie);
  border-radius: 12px;
  background: var(--weiss);
  color: var(--text-leise);
  cursor: pointer;
}

.baum-zoom button:hover:not(:disabled) { background: var(--stein); }

.baum-zoom button:disabled {
  opacity: .4;
  cursor: default;
}

.baum-zoom-wert {
  font-size: .74rem;
  color: var(--text-leise);
  min-width: 3.4em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.baum-zoom-pass { margin-left: 4px; }

/* ---------- Erfolglos durchsuchte Quellen ---------- */

.person-gesucht {
  font-size: .78rem;
  line-height: 1.45;
  color: var(--text-leise);
  margin-top: 4px;
  padding: 5px 9px;
  background: var(--stein);
  border-left: 2px solid var(--linie);
  border-radius: 2px;
}

.person-gesucht strong { font-weight: 600; color: #5d5750; }
.person-gesucht .stand { opacity: .75; }

/* Schließknopf im Karten-Hinweis */
.karten-hinweis { position: absolute; padding-right: 26px; }

.hinweis-zu {
  position: absolute;
  top: 4px; right: 5px;
  width: 20px; height: 20px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: none;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--text-leise);
  cursor: pointer;
}

.hinweis-zu:hover { background: var(--stein-tief); color: var(--text); }