/* ------------------------------------------------------------------
   Immo-Workflow — Gestaltung
   Schrift Ubuntu, selbst gehostet unter assets/fonts/.
   Fehlen die Dateien, greift die Systemschrift.
   ------------------------------------------------------------------ */

@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Ubuntu"), local("Ubuntu Regular"),
       url("fonts/ubuntu-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local("Ubuntu Medium"),
       url("fonts/ubuntu-medium.woff2") format("woff2");
}

:root {
  --grund: #ffffff;
  --flaeche: #f6f7f8;
  --rand: #dcdfe3;
  --rand-stark: #b9bec6;
  --text: #1c1f23;
  --gedaempft: #6b7280;
  --akzent: #545f7f;
  --akzent-hell: #eceef3;
  --gruen: #2f7d32;
  --gruen-hell: #eaf4ea;
  --gelb: #9a6b00;
  --gelb-hell: #fdf3e0;
  --rot: #b3261e;
  --rot-hell: #fbeceb;

  /* Ampel: kraeftige Signalfarben, getrennt von den Textfarben oben.
     Text in Grasgruen waere auf Weiss schlecht lesbar. */
  --ampel-rot:        #e4231b;   /* Feuerrot */
  --ampel-gelb:       #f2b705;   /* Gelb */
  --ampel-gruen:      #5cb130;   /* Grasgruen */
  --ampel-dunkelgruen:#1f6b1f;   /* Dunkelgruen */

  --orange: #e07b1a;
  --eingabe: #ffffff;
  --eingabe-rand: #b9bec6;
  --abgerufen: #4b7a1f;

  --schrift: "Ubuntu", -apple-system, BlinkMacSystemFont, "Segoe UI",
             Roboto, Helvetica, Arial, sans-serif;

  /* Ein Mass fuer die ganze Seite: Kopf, Inhalt und Fuss liegen exakt
     uebereinander. Aendern nur hier. */
  --seitenbreite: 1800px;
  --seitenrand: 50px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund: #16181b;
    --flaeche: #1e2126;
    --rand: #2f343a;
    --rand-stark: #454b53;
    --text: #e8eaed;
    --gedaempft: #9aa1a9;
    --akzent: #8e99bb;
    --akzent-hell: #23272f;
    --gruen-hell: #16301a;
    --gelb-hell: #33280f;
    --rot-hell: #331815;
    --eingabe: #24272c;
    --eingabe-rand: #454b53;
    --abgerufen: #92d050;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 400 15px/1.55 var(--schrift);
  color: var(--text);
  background: var(--grund);
}

/* ---------- Kopf ---------- */
.kopf {
  padding: 32px var(--seitenrand) 8px;
  max-width: var(--seitenbreite);
  margin: 0 auto;
}
.kopfzeile {
  display: flex;
  align-items: flex-end;   /* Unterkante der Tags auf der Grundlinie der Marke */
  gap: 2rem;
}
.kopf .marke {
  display: block;
  flex: none;
  font-size: 2.1rem;
  line-height: 37px;   /* ganze Pixel: sonst faellt in Safari die 1px-Unterkante der Tags weg */
  font-weight: 500;
  letter-spacing: -.01em;
  text-decoration: none;
  color: var(--akzent);
}
.kopf .marke .leicht { font-weight: 400; opacity: .72; }
.punkt { color: var(--orange); }

.kopf .leiste {
  display: flex;
  align-items: flex-end;
  gap: 2.2rem;
  margin-top: 14px;    /* ganze Pixel, damit die Trennlinie nicht auf halber Position liegt */
  padding-top: 9px;
  border-top: 1px solid var(--rand-stark);
}
.kopf .leiste nav { display: flex; gap: 2.2rem; margin-left: auto; }
.kopf .leiste nav a {
  text-decoration: none;
  color: var(--akzent);
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.kopf .leiste nav a:hover { color: var(--text); }
.kopf .leiste nav a.an { color: var(--text); border-bottom-color: var(--akzent); }

.kopf .rechts { text-align: right; line-height: 1.25; }
.benutzer { display: block; font-weight: 500; color: var(--akzent); }
.abmelden { color: var(--gedaempft); font-size: .82em; text-decoration: none; }
.abmelden:hover { text-decoration: underline; }

main { padding: .4rem var(--seitenrand) 3rem; max-width: var(--seitenbreite); margin: 0 auto; }
.fuss {
  padding: 1rem var(--seitenrand); max-width: var(--seitenbreite); margin: 0 auto;
  border-top: 1px solid var(--rand);
  color: var(--gedaempft); font-size: .85em;
}

h1 {
  font-size: 1.7rem; font-weight: 500; color: var(--akzent);
  margin: 1.1rem 0 1.1rem;
}
h2 { font-size: 1.1rem; margin: 2rem 0 .8rem; font-weight: 500; }
h3 { font-size: .95rem; font-weight: 500; }

/* ---------- Hilfe-Aufklapper ---------- */
.hilfe-knopf {
  position: relative;
  float: right;
  margin: 1.25rem 0 0 1rem;
}
.hilfe-knopf > summary {
  list-style: none;
  cursor: pointer;
  width: 1.15rem; height: 1.15rem;
  border: 1px solid var(--akzent);
  border-radius: 50%;
  color: var(--akzent);
  font-size: .78rem; line-height: 1.05rem;
  text-align: center;
  user-select: none;
}
.hilfe-knopf > summary::-webkit-details-marker { display: none; }
.hilfe-knopf > summary:hover { background: var(--akzent); color: #fff; }
.hilfe-flyover {
  position: absolute; right: 0; top: 1.7rem; z-index: 20;
  width: min(38rem, 80vw);
  background: var(--grund);
  border: 1px solid var(--rand-stark);
  border-radius: 5px;
  box-shadow: 0 6px 22px rgba(0,0,0,.13);
  padding: 1rem 1.2rem;
  font-size: .92em;
  text-align: left;
}
.hilfe-flyover h4 { margin: 0 0 .5rem; font-size: 1rem; font-weight: 500; color: var(--akzent); }
.hilfe-flyover p { margin: .45rem 0; }
.hilfe-flyover .mehr { display: inline-block; margin-top: .6rem; font-size: .92em; }

/* ---------- Filterleiste ---------- */
.filter {
  display: flex; gap: 1.6rem; flex-wrap: wrap; align-items: center;
  margin-bottom: 1.6rem;
}
.filter select, .filter input {
  padding: .4rem .6rem; border: 1px solid var(--eingabe-rand);
  border-radius: 4px; background: var(--eingabe); color: var(--text);
  font: inherit;
}
.filter input[type=search] { min-width: 15rem; }
.filter .anzahl { color: var(--gedaempft); }

/* ---------- Tabelle ---------- */
table { border-collapse: collapse; width: 100%; }
th, td {
  padding: .62rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--rand);
}
th:first-child, td:first-child { padding-left: 0; }
th:last-child,  td:last-child  { padding-right: 0; }
th {
  font-weight: 500; color: var(--text);
  white-space: nowrap;
  border-bottom: 1px solid var(--rand-stark);
}
td.zahl, th.zahl { text-align: right; font-variant-numeric: tabular-nums; }

/* Trennstrich zwischen zwei zusammenlaufenden Zahlenspalten */
th.trennt, td.trennt { border-left: 1px solid var(--rand); }

/* Objektspalte: harte Breite, Titel wird abgeschnitten */
.spalte-objekt { width: 30%; max-width: 0; }
.spalte-objekt a {
  display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
tbody tr:hover { background: var(--akzent-hell); }
td a { color: var(--akzent); text-decoration: none; }
td a:hover { text-decoration: underline; }
.tabellenrahmen { overflow-x: auto; }

/* ---------- Ampel ---------- */
.ampel {
  display: inline-block; width: .6rem; height: .6rem;
  border-radius: 50%; margin-right: .5rem; flex: none;
}
.ampel.gruen       { background: var(--ampel-gruen); }
.ampel.dunkelgruen { background: var(--ampel-dunkelgruen); }
.ampel.gelb        { background: var(--ampel-gelb); }
.ampel.rot         { background: var(--ampel-rot); }
.ampel.leer        { background: var(--rand-stark); }
.ampel.unvollstaendig {
  background: var(--grund);
  border: 2px solid var(--rand-stark);
}
.objektzelle { display: flex; align-items: center; min-width: 0; }
.objektzelle a { min-width: 0; }

.marke-status {
  display: inline-block; padding: .1rem .5rem; border-radius: 3px;
  font-size: .84em; background: var(--flaeche); color: var(--gedaempft);
  border: 1px solid var(--rand);
  white-space: nowrap;
}

/* ---------- Datenblöcke (objekt.php) ---------- */
.bloecke + .bloecke { margin-top: 1.8rem; }
.bloecke {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 1.4rem 2.4rem;
  align-items: start;
}
.block { min-width: 0; }
.block h3 {
  margin: 0 0 .2rem;
  padding-bottom: .3rem;
  border-bottom: 1px solid var(--rand-stark);
}
.block table {
  font-size: .95em;
  width: 100%;
  table-layout: fixed;   /* sonst sprengt ein langer Text den Block */
}
.block th, .block td {
  padding: .32rem .5rem;
  border-bottom: 1px dotted var(--rand);
  vertical-align: top;
}
.block td:first-child {
  padding-left: 0; color: var(--text);
  overflow-wrap: anywhere;
}
.block td.wert {
  text-align: right; font-variant-numeric: tabular-nums;
  border-left: 1px solid var(--rand);
  width: 45%;
  overflow-wrap: anywhere;
}
.block tr.summe td { font-weight: 500; border-top: 1px solid var(--rand-stark); }

.gruen-t { color: var(--gruen); }
.rot-t   { color: var(--rot); }
.abgerufen { color: var(--abgerufen); }

/* ---------- Hinweise ---------- */
.hinweis {
  padding: .6rem .9rem; border-radius: 4px; margin: .5rem 0;
  border-left: 3px solid;
}
.hinweis.warnung { background: var(--gelb-hell); border-color: var(--gelb); }
.hinweis.fehler  { background: var(--rot-hell);  border-color: var(--rot); }
.hinweis.gut     { background: var(--gruen-hell); border-color: var(--gruen); }

/* ---------- Formular ---------- */
form.bearbeiten { display: grid; gap: .6rem; }
.feld { display: grid; grid-template-columns: 12rem 1fr; gap: .9rem; align-items: center; }
.feld label { color: var(--gedaempft); }
.feld input, .feld select, .feld textarea {
  padding: .4rem .6rem; border: 1px solid var(--eingabe-rand);
  background: var(--eingabe); color: var(--text);
  border-radius: 3px; font: inherit; width: 100%;
}
.feld textarea { min-height: 4.5rem; resize: vertical; }

button, .knopf {
  padding: .42rem 1rem; border: 1px solid var(--eingabe-rand);
  background: var(--flaeche); color: var(--text);
  border-radius: 4px; font: inherit; cursor: pointer; text-decoration: none;
  display: inline-block;
}
button:hover, .knopf:hover { border-color: var(--akzent); }
button.wichtig { background: var(--akzent); color: #fff; border-color: var(--akzent); }

/* ---------- Quell-Links ---------- */
.quellen { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.quellen a {
  padding: .35rem .8rem; border: 1px solid var(--rand-stark); border-radius: 4px;
  text-decoration: none; color: var(--akzent);
}
.quellen a:hover { border-color: var(--akzent); background: var(--akzent-hell); }
.quellen a.haupt { background: var(--akzent); color: #fff; border-color: var(--akzent); }

/* ---------- Karten (Werkzeuge) ---------- */
.karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: 1.2rem; }
.karte {
  border: 1px solid var(--rand); border-radius: 6px;
  padding: 1rem 1.1rem; background: var(--grund);
}
.karte h3 { margin: 0 0 .6rem; }

/* ---------- Bilder ---------- */
.bilder { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .6rem; }
.bilder img { width: 100%; height: 120px; object-fit: cover; border-radius: 4px; }

.leer-hinweis { color: var(--gedaempft); padding: 2rem 0; }

/* ---------- Anmeldung ---------- */
body.anmeldeseite {
  min-height: 100vh;
  background: linear-gradient(140deg, #3d465e, #545f7f 55%, #78829f);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.anmeldehuelle {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 2rem;
}
.anmelden {
  width: min(24rem, 100%);
  margin: 0;
  padding: 1.8rem 1.8rem 1.4rem;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
  color: #1c1f23;
}
.anmelden h1 {
  text-align: center; font-size: 1.55rem; font-weight: 500;
  color: #545f7f; margin: 0 0 1.2rem;
}
.anmelden h1 .leicht { font-weight: 400; opacity: .72; }
.anmelden .feld { grid-template-columns: 1fr; gap: .3rem; margin-bottom: .7rem; }
.anmelden .feld label { color: #6b7280; }
.anmelden .feld input {
  background: #fff; border: 1px solid #b9bec6; color: #1c1f23;
  padding: .5rem .6rem;
}
.anmelden button.wichtig {
  width: 100%; padding: .55rem; margin-top: .3rem;
  background: #545f7f; border-color: #545f7f; color: #fff;
}
.anmelden button.wichtig:hover { background: #454e69; border-color: #454e69; }

/* Die Anmeldemaske bleibt hell, auch wenn das System auf dunkel steht —
   sie liegt auf einem Foto, nicht auf der Seitenflaeche. */

/* ---------- Hilfeseite ---------- */
.hilfeseite { max-width: 62rem; }
.hilfeseite h2 { border-bottom: 1px solid var(--rand); padding-bottom: .3rem; }
.hilfeseite p { margin: .6rem 0; }
.hilfeseite ol, .hilfeseite ul { line-height: 1.75; }

/* ---------- Beschriftung/Wert-Paare (Konflikte, Werkzeuge) ---------- */
.paar { display: flex; justify-content: space-between; gap: 1.2rem; padding: .25rem 0; }
.paar dt { color: var(--gedaempft); }
.paar dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; }
.paar.summe {
  border-top: 1px solid var(--rand); margin-top: .35rem;
  padding-top: .45rem; font-weight: 500;
}

/* ---------- Bilder: Kachel mit Lupe und Loeschknopf ---------- */
.anzahl-klein {
  font-size: .7em; font-weight: 400; color: var(--gedaempft);
  vertical-align: middle;
}
.bildkachel { position: relative; margin: 0; }
.bildkachel img {
  width: 100%; height: 120px; object-fit: cover; border-radius: 4px;
  cursor: zoom-in; display: block;
}
.bildkachel .bildweg {
  position: absolute; top: .25rem; right: .25rem;
  opacity: 0; transition: opacity .12s;
}
.bildkachel:hover .bildweg { opacity: 1; }
.bildkachel .bildweg button {
  width: 1.5rem; height: 1.5rem; padding: 0; line-height: 1;
  border-radius: 50%; border: none;
  background: rgba(0,0,0,.62); color: #fff; font-size: 1rem;
  cursor: pointer;
}
.bildkachel .bildweg button:hover { background: var(--rot); }

dialog#lupe {
  border: none; border-radius: 6px; padding: 0;
  max-width: 92vw; max-height: 92vh;
  background: var(--grund);
}
dialog#lupe::backdrop { background: rgba(0,0,0,.72); }
dialog#lupe img {
  display: block; max-width: 92vw; max-height: 84vh;
  object-fit: contain;
}
dialog#lupe form { padding: .5rem; text-align: right; }

/* ---------- Notizen ---------- */
.karte.notiz { max-width: 62rem; }
.notizkopf {
  display: flex; justify-content: space-between; gap: 1rem;
  color: var(--gedaempft); font-size: .87em; margin-bottom: .45rem;
}
.notizkopf a, .alslink {
  color: var(--akzent); text-decoration: none;
  background: none; border: none; padding: 0 0 0 .7rem;
  font: inherit; cursor: pointer;
}
.notizkopf a:hover, .alslink:hover { text-decoration: underline; }
.notizform textarea {
  width: 100%; font: inherit; line-height: 1.5;
  padding: .6rem; border: 1px solid var(--eingabe-rand);
  background: var(--eingabe); color: var(--text); border-radius: 4px;
  resize: vertical;
}

/* ---------- Suchkriterien ---------- */
.suchblock {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 0 1.6rem;
  padding: 1.4rem 0 1.8rem;
  border-top: 1px solid var(--rand-stark);
}
.suchblock:first-of-type { border-top: none; }

.suchmarke { display: flex; flex-direction: column; gap: .35rem; }
.suchkurz {
  display: inline-block;
  border: 1px solid var(--akzent);
  border-radius: 4px;
  padding: .45rem .7rem;
  text-align: center;
  font-weight: 500;
  color: var(--akzent);
}
.suchid, .suchstand { color: var(--gedaempft); font-size: .82em; text-align: center; }
.suchzahl { font-size: .85em; text-align: center; color: var(--akzent); text-decoration: none; }
.suchzahl:hover { text-decoration: underline; }

.suchinhalt { min-width: 0; }
.suchname {
  margin: 0 0 1rem;
  font-size: 1rem;
  font-weight: 400;
  color: var(--gedaempft);
  border-bottom: 1px solid var(--rand);
  padding-bottom: .4rem;
}
.suchspalten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1rem 2.2rem;
  align-items: start;
}
.suchgruppe { min-width: 0; }
.suchgruppe h3 {
  margin: 0 0 .3rem;
  font-size: .92rem;
  font-weight: 500;
  color: var(--akzent);
}
.suchgruppe table { width: 100%; table-layout: fixed; font-size: .9em; }
.suchgruppe td {
  padding: .28rem .5rem .28rem 0;
  border-bottom: 1px dotted var(--rand);
  vertical-align: top;
  overflow-wrap: anywhere;
}
.suchgruppe td.wert {
  text-align: right;
  border-left: 1px solid var(--rand);
  padding-left: .5rem;
  padding-right: 0;
  width: 52%;
}

@media (max-width: 700px) {
  .suchblock { grid-template-columns: 1fr; gap: .8rem; }
  .suchmarke { flex-direction: row; align-items: center; gap: .8rem; }
}

/* ---------- Objektliste: Nummer, Gitter, Archivknopf ---------- */
.spalte-nr { width: 3.2rem; color: var(--gedaempft); }

table.gitter th, table.gitter td { border: 1px solid var(--rand); }
table.gitter th:first-child, table.gitter td:first-child { padding-left: .6rem; }
table.gitter th:last-child,  table.gitter td:last-child  { padding-right: .6rem; }

.archivform { display: inline; }
.archivform button {
  border: none; background: none; padding: .1rem .2rem;
  color: var(--gedaempft); cursor: pointer; line-height: 1;
}
.archivform button:hover { color: var(--ampel-rot); }
.archivform svg { fill: currentColor; vertical-align: middle; }

/* ---------- Linkleiste über dem Kopf ---------- */
.linkleiste {
  flex: 1 1 auto;
  min-width: 0;
  display: flex; flex-wrap: wrap;
  justify-content: flex-end; align-items: flex-end;
  align-content: flex-end;
  /* 11 px waagrecht = 3 mm */
  gap: 3px 11px;
  padding: 0 0 6px;
  font-size: 9px;
  line-height: 13px;
}
.linkleiste a {
  display: block;
  padding: 2px 5px;
  border: 1px solid var(--rand);
  border-radius: 3px;
  background: var(--flaeche);
  color: var(--gedaempft);
  text-decoration: none;
  white-space: nowrap;
}
.linkleiste a:hover { color: var(--akzent); border-color: var(--akzent); }

/* Umschalter zwischen den beiden Fassungen */
.linkleiste a.wechsel {
  color: var(--orange);
  border-color: var(--orange);
  background: none;
}
.linkleiste a.wechsel strong { font-weight: 500; }
.linkleiste a.wechsel:hover {
  color: var(--grund);
  background: var(--orange);
  border-color: var(--orange);
}
.linkleiste .gruppe {
  color: var(--rand-stark);
  padding: 2px 1px;
  align-self: center;
}

.rechnerlinks { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 .2rem; }
.rechnerlinks a {
  font-size: .85em; padding: .15rem .5rem;
  border: 1px solid var(--rand); border-radius: 3px;
  color: var(--akzent); text-decoration: none;
}
.rechnerlinks a:hover { border-color: var(--akzent); }

/* ---------- Befehlsseite ---------- */
pre.befehl {
  margin: 1rem 0 .3rem;
  padding: .55rem .8rem;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-left: 3px solid var(--akzent);
  border-radius: 3px;
  font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow-x: auto;
}
.hilfeseite pre.befehl + p { margin-top: .2rem; color: var(--gedaempft); }

/* ---------- Sortierbare Spaltenkoepfe ---------- */
table.sortierbar th.sortkopf { cursor: pointer; user-select: none; }
table.sortierbar th.sortkopf:hover { color: var(--akzent); }
table.sortierbar th.sortkopf::after {
  content: ""; opacity: 0; margin-left: .35em; font-size: .85em;
}
table.sortierbar th.auf::after { content: "\2191"; opacity: .75; }
table.sortierbar th.ab::after  { content: "\2193"; opacity: .75; }

/* Quellen in der Offenen Bewertung: eine Zeile, keine Umbrueche */
td.quellenzelle { white-space: nowrap; }
.quellen { display: flex; gap: .3rem; flex-wrap: nowrap; }

/* Offene Bewertung: Objektname bekommt den freien Platz */
table.tab-offen .spalte-objekt { width: 46%; max-width: 0; }
table.tab-offen .spalte-objekt a {
  display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
table.tab-offen .spalte-nr { width: 3rem; }
.quellen a {
  padding: .1rem .45rem;
  border: 1px solid var(--rand); border-radius: 3px;
  background: var(--flaeche);
  color: var(--akzent); text-decoration: none; white-space: nowrap;
}
.quellen a:hover { color: var(--akzent); border-color: var(--akzent); }