/* ============================================================
   IMOS - Objekt- und Anfragenverwaltung von DG Immomakler

   Gestaltung (überarbeitet 2026-09-06):
   Vorher war alles dieselbe weisse Schachtel mit Rahmen - Kennzahlen,
   Karten, Tabellen, alles gleich laut. Dazu ein grosser schwarzer Block
   oben. Das wirkte nüchtern und aus der Zeit gefallen.

   Jetzt: eine schlanke dunkle Leiste als Werkzeugkopf, darunter eine helle,
   luftige Arbeitsfläche. Flächen entstehen durch Licht und feine Linien,
   nicht durch Rahmen um alles. Die Kennzahlen sind EINE Fläche mit
   Trennstrichen statt sechs Kästchen. Ein einziger warmer Akzent (Messing)
   markiert, was gerade gilt - sonst bleibt es schwarz auf Creme.

   Schrift durchgängig Lato, wie auf der Website.
   ============================================================ */

:root {
  /* Farben */
  --tinte: #17160F;          /* Überschriften, Hauptknöpfe */
  --tief: #0C0B08;           /* dunkelste Fläche: Leiste, Anmeldeseite */
  --text: #26251F;
  --gedaempft: #6B675F;
  --label: #9C978B;
  --grund: #F3F1EB;          /* Arbeitsfläche */
  --flaeche: #FAF8F3;        /* ruhige Füllung in Karten */
  --linie: #E7E3D9;
  --linie-zart: rgba(23,22,15,.07);
  --akzent: #A9741B;         /* Messing - sparsam, nur für "das gilt gerade" */
  --akzent-zart: #F7EFDE;

  /* Form */
  --r-gross: 18px;
  --r: 12px;
  --r-klein: 10px;

  /* Tiefe: zwei Lagen, damit Karten wie Papier liegen und nicht wie Kästen */
  --schatten: 0 1px 2px rgba(23,22,15,.035), 0 14px 30px -18px rgba(23,22,15,.20);
  --schatten-hoch: 0 2px 4px rgba(23,22,15,.04), 0 24px 48px -24px rgba(23,22,15,.28);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Lato', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--grund);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--tinte); }

/* ---------- Kopf: schlanke dunkle Leiste über heller Fläche ----------
   Die Leiste läuft über die volle Breite, ihr Inhalt bleibt trotzdem in der
   Spaltenbreite - deshalb die Innenabstände über max()/calc statt über einen
   zusätzlichen Kasten im HTML. */
/* Dennis wollte den hohen dunklen Block zurueck (07.09.): Titel steht wieder
   darin, das Monogramm liegt als Wasserzeichen rechts, und die erste Karte
   ragt von unten hinein. Bewusst OHNE `overflow: hidden` - das wuerde das
   Klebenbleiben der Leiste beim Scrollen aufheben. Stattdessen bleibt das
   Wasserzeichen von sich aus innerhalb der Flaeche. */
.dg-kopfband {
  position: relative;
  background: var(--tief);
  background-image:
    radial-gradient(1100px 340px at 78% -60%, rgba(255,255,255,.10), rgba(255,255,255,0) 70%),
    linear-gradient(160deg, #14130E 0%, #0A0A08 62%);
  color: #fff;
  padding-bottom: 96px;   /* Platz, in den die erste Karte hineinragt */
}
.dg-kopfband::after {
  content: ''; position: absolute; right: 3%; top: 60%; width: 230px; height: 250px;
  transform: translateY(-50%);
  background: url('/assets/monogramm-white.png') center / contain no-repeat;
  opacity: .055; pointer-events: none;
}

.dg-nav {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 26px;
  max-width: none; margin: 0;
  padding: 0 max(24px, calc((100% - 1280px) / 2));
  min-height: 82px;
  background: var(--tief);
  background-image: linear-gradient(180deg, #14130E 0%, var(--tief) 100%);
}
.dg-nav-brand { display: flex; align-items: center; gap: 15px; flex: none; text-decoration: none; }
.dg-nav-brand img { height: 56px; width: auto; display: block; }
.dg-marken-trenner { flex: none; width: 1px; height: 32px; background: rgba(255,255,255,.20); }
/* Die Wortmarke ist Schrift, keine Grafik - bleibt in jeder Grösse scharf.
   Das negative margin-right nimmt die Sperrung hinterm letzten Buchstaben zurück. */
.dg-wortmarke {
  display: inline-block; line-height: 1; color: #fff;
  font-size: 20px; font-weight: 900; letter-spacing: .2em; margin-right: -.2em;
}

.dg-nav nav { display: flex; gap: 2px; flex: 1; flex-wrap: wrap; align-self: stretch; }
.dg-nav nav a {
  position: relative;
  display: flex; align-items: center;
  color: rgba(255,255,255,.60); text-decoration: none; font-size: 13.5px; font-weight: 700;
  padding: 0 14px; transition: color .18s;
}
.dg-nav nav a:hover { color: #fff; }
/* Die laufende Seite wird durch einen Messingstrich markiert, nicht durch eine
   weisse Pille - das ist ruhiger und verrät sofort, wo man steht. */
.dg-nav nav a.active { color: #fff; background: none; }
.dg-nav nav a.active::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px;
  background: var(--akzent); border-radius: 2px 2px 0 0;
}
.dg-logout {
  color: rgba(255,255,255,.45); text-decoration: none; font-size: 12.5px; font-weight: 700;
  padding: 8px 0; flex: none; transition: color .18s;
}
.dg-logout:hover { color: #fff; }

/* Seitentitel steht auf der hellen Fläche, nicht mehr im dunklen Block */
/* Gleiche Innenabstaende wie die Leiste darueber, damit Logo und Seitentitel
   auf einer Kante stehen - vorher war der Titel 28 px weiter eingerueckt. */
.dg-kopfband-inhalt {
  position: relative; z-index: 2;
  max-width: none; margin: 0;
  padding: 34px max(24px, calc((100% - 1280px) / 2)) 0;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.dg-kopf-eyebrow {
  font-size: 11px; letter-spacing: .17em; text-transform: uppercase;
  color: var(--akzent); font-weight: 800; margin: 0 0 9px;
}
.dg-kopfband-inhalt h1 {
  font-size: clamp(26px, 3.1vw, 36px); font-weight: 900; letter-spacing: -.032em;
  line-height: 1.06; margin: 0; color: #fff; max-width: 760px;
}
/* Auf dunklem Grund muss der Hauptknopf hell sein - sonst schwarz auf schwarz. */
.dg-kopf-aktion .dg-knopf-hell { background: #fff; color: var(--tinte); border-color: #fff; }
.dg-kopf-aktion .dg-knopf-hell:hover { background: #EFEBE1; }
.dg-kopf-aktion .dg-knopf-dunkel {
  background: rgba(255,255,255,.10); color: #fff; border-color: rgba(255,255,255,.24); box-shadow: none;
}
.dg-kopf-aktion .dg-knopf-dunkel:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.34); }
.dg-kopf-aktion { flex: none; display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- Inhaltsbereich ---------- */
.dg-container {
  max-width: 1100px; margin: -74px auto 0; padding: 0 28px 96px;
  position: relative; z-index: 3;
}
.dg-container-weit { max-width: 1280px; }

h2 {
  font-size: 17px; font-weight: 800; letter-spacing: -.015em; margin: 0 0 18px; color: var(--tinte);
}
.dg-muted { color: var(--label); font-weight: 400; font-size: 14px; }

/* ---------- Kennzahlen: eine Fläche, nicht sechs Kästchen ----------
   Der Reihe nach gelesen wie eine Zeile im Bericht. Die Trennstriche liegen
   innen, damit aussen eine einzige ruhige Karte stehen bleibt. */
.dg-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 0; margin-bottom: 26px;
  background: #fff; border-radius: var(--r-gross);
  box-shadow: var(--schatten); overflow: hidden;
}
.dg-kpi {
  position: relative;
  display: flex; flex-direction: column; gap: 9px;
  padding: 24px 24px 22px;
  background: none; border: none; border-radius: 0; box-shadow: none;
}
/* Haarfeine Trennung zwischen den Zellen - auch beim Umbruch in neue Zeilen */
.dg-kpi::before {
  content: ''; position: absolute; left: 0; top: 16px; bottom: 16px; width: 1px;
  background: var(--linie);
}
.dg-kpi:first-child::before { content: none; }
.dg-kpi-value {
  font-size: 34px; font-weight: 900; letter-spacing: -.04em; line-height: .95; color: var(--tinte);
  font-variant-numeric: tabular-nums;
}
.dg-kpi-label { font-size: 12px; color: var(--gedaempft); line-height: 1.45; }
.dg-kpi-label a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--linie); }
/* Veraenderung zum Vormonat - steht als eigene Zeile unter der Beschriftung */
.dg-trend { display: block; margin-top: 4px; font-size: 11.5px; font-weight: 800; color: var(--label); }
.dg-trend.ist-auf { color: #1F8A5B; }
.dg-trend.ist-ab { color: #B3261E; }
.dg-kpi-label a:hover { color: var(--tinte); border-bottom-color: var(--akzent); }

/* ---------- Karten ---------- */
.dg-card {
  background: #fff; border: none; border-radius: var(--r-gross); padding: 26px 28px;
  margin-bottom: 22px; box-shadow: var(--schatten);
}
.dg-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }

/* ---------- Balkendiagramm ---------- */
/* 30 Tage nebeneinander. Die Datumsbeschriftung steht **ausserhalb des
   Flusses**: als normales Kind zwang ihre ungedrehte Breite (rund 25 px)
   jede Spalte auf mindestens 25 px, macht 30 x 25 = 750 px - das Diagramm
   lief auf dem Handy weit aus der Karte heraus. Absolut gesetzt bestimmt nur
   noch der Balken die Spaltenbreite, und `min-width: 0` erlaubt das
   Schrumpfen (Flex-Elemente werden sonst nie schmaler als ihr Inhalt). */
.dg-bars {
  display: flex; align-items: flex-end; gap: 5px;
  height: 176px; padding-bottom: 30px;
}
.dg-bar-col {
  position: relative; flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; justify-content: flex-end; height: 100%;
}
.dg-bar {
  width: 100%; background: linear-gradient(180deg, #34322A 0%, var(--tinte) 100%);
  border-radius: 5px 5px 2px 2px; min-height: 3px; transition: background .18s;
}
.dg-bar-col:hover .dg-bar { background: var(--akzent); }
.dg-bar-label {
  position: absolute; top: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) rotate(-45deg);
  font-size: 9px; color: var(--label); white-space: nowrap; pointer-events: none;
}

/* ---------- Tabellen: als Liste lesen, nicht als Raster ---------- */
.dg-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.dg-table td, .dg-table th { padding: 14px 14px; border-bottom: 1px solid var(--linie-zart); text-align: left; }
.dg-table tr:last-child td { border-bottom: none; }
.dg-table th {
  color: var(--label); font-weight: 800; font-size: 10px; letter-spacing: .13em;
  text-transform: uppercase; border-bottom: 1px solid var(--linie); padding-top: 0;
}
.dg-table td:first-child, .dg-table th:first-child { padding-left: 4px; }
.dg-table td:last-child, .dg-table th:last-child { padding-right: 4px; }
.dg-num { text-align: right; font-variant-numeric: tabular-nums; }
.dg-row-link { cursor: pointer; }
.dg-row-link:hover td { background: var(--flaeche); }
.dg-row-link:hover td:first-child { border-radius: var(--r-klein) 0 0 var(--r-klein); }
.dg-row-link:hover td:last-child { border-radius: 0 var(--r-klein) var(--r-klein) 0; }
.dg-break { word-break: break-all; }
/* Lange Pfade und Herkunftsadressen duerfen umbrechen, statt die Tabelle
   breiter zu machen als die Karte. */
.dg-break-weich { overflow-wrap: anywhere; }

/* Adressen und E-Mails sind Zeichenketten ohne Leerzeichen. Ohne diese
   Erlaubnis zum Umbrechen macht ein einziger langer Wert die ganze Tabelle
   breiter als den Bildschirm und schiebt die rechten Spalten aus dem Bild. */
.dg-z-seite, .dg-z-kontakt { overflow-wrap: anywhere; }
.dg-z-seite { max-width: 340px; }

/* ---------- Trichter (Bewertungs-Assistent) ---------- */
.dg-t-schritt { width: 130px; }
.dg-t-abgang { width: 150px; text-align: right; font-variant-numeric: tabular-nums; }
.dg-t-abgang.ist-abgang { color: #8A2020; }
.dg-tbalken { position: relative; height: 22px; background: var(--flaeche); border-radius: 4px; overflow: hidden; }
.dg-tbalken-fuell { height: 100%; background: var(--tinte); border-radius: 4px; }
.dg-tbalken span {
  position: absolute; top: 0; left: 8px; height: 22px; display: flex; align-items: center;
  font-size: 12px; font-weight: 700; color: var(--tinte);
}
.dg-tbalken span.ist-innen { color: #fff; }

/* ---------- Marken ---------- */
.dg-status-pills { display: flex; gap: 10px; flex-wrap: wrap; }
.dg-pill {
  display: inline-block; padding: 5px 12px; border-radius: 100px; font-size: 11.5px;
  font-weight: 800; letter-spacing: .02em; background: #EFEBE1; color: var(--gedaempft);
}
.dg-pill-neu { background: #E7EDF6; color: #2C4C7C; }
.dg-pill-kontaktiert { background: #F8EEDA; color: #855700; }
.dg-pill-termin { background: #EAE5F4; color: #4C3391; }
.dg-pill-gewonnen { background: #E2F0E5; color: #1F6634; }
.dg-pill-verloren { background: #F6E3E3; color: #8A2626; }
.dg-pill-entwurf { background: #EDE8DD; color: #5B584F; }
.dg-pill-aktiv { background: #E2F0E5; color: #1F6634; }
.dg-pill-reserviert { background: #F8EEDA; color: #855700; }
.dg-pill-verkauft { background: #E7EDF6; color: #2C4C7C; }
.dg-pill-archiviert { background: #EDECE8; color: #7A766F; }

/* ---------- Formularelemente ----------
   Auswahlfelder bekommen überall dasselbe Aussehen samt eigenem Pfeil. Ohne
   das zeichnet der Browser sein eigenes Feld, und genau eines davon steht
   mitten in der Objektliste - das fiel als einziges Element aus dem Bild. */
select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B675F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 15px;
  padding-right: 32px !important;
}
.dg-inline-form select {
  padding: 9px 12px; border: 1px solid #E2DDD1; border-radius: var(--r-klein);
  font-size: 13.5px; font-family: inherit; background-color: #fff; color: var(--text);
  font-weight: 700; cursor: pointer; width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
.dg-inline-form select:hover { border-color: #D3CCBB; }
.dg-inline-form select:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 3px rgba(169,116,27,.14); }

.dg-filters { display: flex; gap: 10px; margin-bottom: 22px; flex-wrap: wrap; }
/* Filterzeile innerhalb einer Karte: durch eine feine Linie vom Inhalt
   getrennt. Ausserhalb der Karte saessen die grauen Beschriftungen auf dem
   dunklen Band - schlecht lesbar und oben gedraengt. */
.dg-filter-kopf {
  margin: 0 0 20px; padding-bottom: 18px; border-bottom: 1px solid var(--linie-zart);
}
.dg-filters label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--label); font-weight: 700; }
.dg-filters select, .dg-filters input,
.dg-edit-form select, .dg-edit-form input, .dg-edit-form textarea {
  padding: 10px 12px; border: 1px solid #E2DDD1; border-radius: var(--r-klein); font-size: 14px;
  font-family: inherit; background: #fff; color: var(--text);
}
.dg-filters select:focus, .dg-edit-form input:focus, .dg-edit-form textarea:focus,
.dg-feld input:focus, .dg-feld select:focus, .dg-feld textarea:focus {
  outline: none; border-color: var(--akzent); box-shadow: 0 0 0 3px rgba(169,116,27,.14);
}
.dg-edit-form { display: flex; flex-direction: column; gap: 16px; max-width: 480px; }
.dg-edit-form label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--label); font-weight: 700; }
.dg-edit-form button {
  align-self: flex-start; background: var(--tinte); color: #fff; border: none; border-radius: var(--r-klein);
  padding: 12px 26px; font-size: 14px; font-weight: 800; cursor: pointer; font-family: inherit;
}
.dg-edit-form button:hover { opacity: .88; }
.dg-success {
  color: #1F6634; font-weight: 700; background: #EAF5EC; border: 1px solid #CFE6D5;
  border-radius: var(--r); padding: 14px 17px; font-size: 14px; line-height: 1.5;
}
.dg-error { color: #8A2626; font-weight: 700; font-size: 14px; }

/* ============ Objektverwaltung ============ */
.dg-seitenkopf { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

.dg-knopf {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--tinte); color: #fff; text-decoration: none; border: 1px solid var(--tinte);
  border-radius: var(--r-klein); padding: 12px 22px; font-size: 14px; font-weight: 800;
  cursor: pointer; font-family: inherit; letter-spacing: -.005em;
  box-shadow: 0 1px 2px rgba(23,22,15,.10);
  transition: transform .16s, box-shadow .16s, background .16s, border-color .16s, color .16s;
}
.dg-knopf:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -8px rgba(23,22,15,.5); }
.dg-knopf:active { transform: none; }
.dg-knopf-klein { padding: 9px 16px; font-size: 13px; }
/* Die beiden Nebenformen sitzen jetzt auf hellem Grund - "hell" ist der
   Hauptknopf der Seite, "dunkel" der zweitrangige daneben. Die Namen bleiben,
   damit die Seiten unverändert bleiben können. */
.dg-knopf-hell { background: var(--tinte); color: #fff; border-color: var(--tinte); }
.dg-knopf-hell:hover { background: #23211A; }
.dg-knopf-dunkel {
  background: #fff; color: var(--tinte); border-color: var(--linie);
  box-shadow: 0 1px 2px rgba(23,22,15,.05);
}
.dg-knopf-dunkel:hover { background: #fff; border-color: #D3CCBB; }

.dg-tab {
  display: inline-block; text-decoration: none; font-size: 13px; font-weight: 700; color: var(--gedaempft);
  background: #fff; border: 1px solid transparent; border-radius: 100px; padding: 9px 17px;
  box-shadow: 0 1px 2px rgba(23,22,15,.05);
  transition: color .15s, background .15s, box-shadow .15s;
}
.dg-tab:hover { color: var(--tinte); box-shadow: 0 2px 8px -3px rgba(23,22,15,.22); }
.dg-tab.is-aktiv { background: var(--tinte); color: #fff; border-color: var(--tinte); }

.dg-link-klein {
  background: none; border: none; padding: 0 0 0 14px; font-family: inherit; font-size: 13px;
  font-weight: 700; color: var(--gedaempft); text-decoration: none; cursor: pointer;
  transition: color .15s;
}
.dg-link-klein:hover { color: var(--tinte); text-decoration: underline; }
.dg-link-loeschen { color: #9B3131; }
.dg-link-loeschen:hover { color: #7E2020; }
.dg-inline-form { display: inline-flex; margin: 0; }
.dg-warn { color: #8A5A00; font-weight: 800; }

.dg-tabelle-objekte td { vertical-align: middle; }
.dg-objekt-titel { font-weight: 800; font-size: 15.5px; text-decoration: none; letter-spacing: -.018em; color: var(--tinte); }
.dg-objekt-titel:hover { text-decoration: underline; text-underline-offset: 3px; }
.dg-mini {
  display: block; width: 92px; height: 66px; border-radius: var(--r-klein); overflow: hidden;
  background: var(--flaeche); box-shadow: 0 1px 2px rgba(23,22,15,.10);
}
.dg-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dg-mini-leer {
  display: flex; align-items: center; justify-content: center; height: 100%;
  font-size: 10px; color: var(--label); text-align: center; line-height: 1.3;
}

/* --- Objektformular --- */
.dg-feldgruppe { display: flex; flex-wrap: wrap; gap: 18px 20px; margin-bottom: 18px; }
.dg-feld { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--gedaempft); font-weight: 700; flex: 1 1 220px; }
.dg-feld-schmal { flex: 0 1 150px; }
.dg-feld-breit { flex: 1 1 100%; margin-bottom: 18px; }
.dg-feld input, .dg-feld select, .dg-feld textarea {
  padding: 11px 12px; border: 1px solid #E2DDD1; border-radius: var(--r-klein); font-size: 14.5px;
  font-family: inherit; color: var(--text); background: #fff; width: 100%; font-weight: 400;
}
.dg-feld textarea { resize: vertical; line-height: 1.6; }
.dg-hilfe { font-size: 12px; color: var(--label); line-height: 1.45; font-weight: 400; }

.dg-haken { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--text); cursor: pointer; font-weight: 400; }
.dg-haken input { margin-top: 3px; flex: none; width: 17px; height: 17px; accent-color: var(--tinte); }
.dg-haken-klein { font-size: 12.5px; }
.dg-hakenraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px 18px; }

.dg-energie-felder { display: flex; flex-wrap: wrap; gap: 18px 20px; flex: 1 1 100%; }

.dg-fehlerkasten { background: #FDF6F5; box-shadow: inset 0 0 0 1px #EACFCB, var(--schatten); }
.dg-fehlerkasten ul { margin: 10px 0 12px; padding-left: 20px; font-size: 14px; line-height: 1.65; }

.dg-speicherleiste {
  position: sticky; bottom: 0; background: rgba(243,241,235,.92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-top: 1px solid var(--linie); padding: 16px 0; display: flex; align-items: center;
  gap: 12px; margin-bottom: 22px; z-index: 5;
}

/* --- Bilder --- */
.dg-dropzone {
  border: 1.5px dashed #DCD5C6; border-radius: var(--r); padding: 32px 20px; text-align: center;
  cursor: pointer; background: var(--flaeche); transition: border-color .2s, background .2s;
}
.dg-dropzone:hover, .dg-dropzone.ist-bereit { border-color: var(--akzent); background: var(--akzent-zart); }
.dg-dropzone p { margin: 0 0 6px; font-size: 14.5px; }

.dg-fortschritt { position: relative; height: 30px; margin-top: 12px; background: #EDE9DF; border-radius: 100px; overflow: hidden; }
.dg-fortschritt > div { height: 100%; width: 0; background: var(--tinte); transition: width .25s ease; }
.dg-fortschritt span {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 800; mix-blend-mode: difference; color: #fff;
}

.dg-bildraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 16px; margin-top: 18px; }
.dg-bildkarte {
  border: 1px solid var(--linie); border-radius: var(--r); background: #fff; padding: 9px;
  display: flex; flex-direction: column; gap: 8px; cursor: grab;
  transition: box-shadow .16s, border-color .16s;
}
.dg-bildkarte:hover { box-shadow: var(--schatten); border-color: #DBD5C7; }
.dg-bildkarte.wird-gezogen { opacity: .35; }
.dg-bildkarte-bild { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-klein); overflow: hidden; background: var(--flaeche); }
.dg-bildkarte-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dg-bildkarte-rang {
  position: absolute; left: 8px; top: 8px; background: rgba(12,11,8,.78); color: #fff;
  font-size: 10.5px; font-weight: 800; letter-spacing: .04em; padding: 4px 10px; border-radius: 100px;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.dg-bildkarte-rang.ist-titel { background: var(--akzent); }
.dg-bildkarte-rang.ist-grundriss { background: #2C4C7C; }
.dg-bildtitel { padding: 8px 10px; border: 1px solid var(--linie); border-radius: 8px; font-size: 12.5px; font-family: inherit; width: 100%; }
.dg-bildkarte-fuss { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dg-bildkarte-fuss .dg-link-klein { padding-left: 0; }

/* ============ Anmeldeseite ============
   Bleibt bewusst dunkel: die Tür ins System darf anders aussehen als die
   Arbeitsfläche dahinter. */
.dg-login-body {
  margin: 0; min-height: 100vh; background: var(--tief);
  background-image:
    radial-gradient(900px 420px at 50% -10%, rgba(255,255,255,.08), rgba(255,255,255,0) 70%),
    linear-gradient(160deg, #141310 0%, #070604 70%);
}
.dg-login-wrap { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 40px 20px; }
.dg-login-card {
  background: rgba(22,21,16,.84); border: 1px solid rgba(255,255,255,.09); border-radius: 20px;
  padding: 44px 40px 32px; display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 420px;
  box-shadow: 0 40px 90px -34px rgba(0,0,0,.8);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.dg-login-logo { display: flex; align-items: center; justify-content: center; gap: 15px; flex-wrap: wrap; margin-bottom: 6px; }
.dg-login-logo img { height: 62px; width: auto; }
.dg-login-logo .dg-wortmarke { font-size: 27px; letter-spacing: .24em; margin-right: -.24em; }
.dg-login-logo .dg-marken-trenner { height: 38px; }
.dg-login-eyebrow { text-align: center; font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--akzent); font-weight: 800; }
.dg-login-card h1 { font-weight: 900; font-size: 25px; letter-spacing: -.03em; margin: 0; text-align: center; color: #fff; }
.dg-login-sub { text-align: center; font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,.55); margin: 0 0 8px; }
.dg-login-card label { display: flex; flex-direction: column; gap: 6px; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.45); font-weight: 800; }
.dg-login-card input {
  padding: 13px 14px; border: 1px solid rgba(255,255,255,.13); border-radius: var(--r-klein); font-size: 14.5px;
  background: rgba(255,255,255,.04); color: #fff; font-family: inherit;
}
.dg-login-card input:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 3px rgba(169,116,27,.2); }
.dg-login-card button {
  margin-top: 8px; background: #fff; color: var(--tief); border: none; border-radius: var(--r-klein); padding: 14px;
  font-size: 14.5px; font-weight: 800; letter-spacing: .01em; cursor: pointer; transition: opacity .2s; font-family: inherit;
}
.dg-login-card button:hover { opacity: .88; }
.dg-login-card .dg-error {
  background: rgba(196,64,64,.12); border: 1px solid rgba(196,64,64,.32); color: #E2A0A0;
  padding: 10px 14px; border-radius: 8px; font-size: 13px; font-weight: 500; margin: 0;
}
.dg-login-footer {
  text-align: center; font-size: 12px; color: rgba(255,255,255,.32); margin-top: 18px;
  padding-top: 18px; border-top: 1px solid rgba(255,255,255,.07);
}
.dg-login-footer strong { color: rgba(255,255,255,.6); }

/* ============ Kleine Bildschirme ============ */
@media (max-width: 900px) {
  .dg-nav { min-height: 0; padding: 12px 20px; flex-wrap: wrap; gap: 12px; }
  .dg-nav-brand img { height: 46px; }
  .dg-nav-brand .dg-marken-trenner { height: 26px; }
  .dg-nav-brand .dg-wortmarke { font-size: 17px; }
  .dg-nav nav { order: 3; flex-basis: 100%; gap: 0; margin: 0 -6px; }
  .dg-nav nav a { padding: 10px 12px; font-size: 13.5px; align-items: flex-end; }
  .dg-nav nav a.active::after { left: 12px; right: 12px; }
  .dg-logout { margin-left: auto; }
  .dg-kopfband { padding-bottom: 82px; }
  .dg-kopfband::after { width: 140px; height: 152px; right: 6px; opacity: .05; }
  .dg-kopfband-inhalt { padding: 26px 20px 0; align-items: flex-start; }
  .dg-container { margin-top: -66px; }
  /* Auf schmalen Bildschirmen dürfen die Knöpfe nicht rechts hinauslaufen -
     sie bekommen die volle Breite und brechen sauber untereinander um. */
  .dg-kopf-aktion { width: 100%; justify-content: flex-start; }
  .dg-kopf-aktion .dg-knopf { flex: 1 1 200px; }
  .dg-container { padding-left: 20px; padding-right: 20px; }
  .dg-grid-2 { grid-template-columns: 1fr; }
  .dg-kpi { padding: 20px; }
  .dg-kpi-value { font-size: 30px; }
}
@media (max-width: 720px) {
  .dg-feld, .dg-feld-schmal { flex: 1 1 100%; }

  /* Diagramm: bei 30 Balken auf Handybreite ueberlagern sich die gedrehten
     Datumsangaben. Es bleibt jede fuenfte stehen - der letzte Tag ist dabei. */
  .dg-bars { gap: 3px; height: 150px; }
  .dg-bar-col:not(:nth-child(5n)) .dg-bar-label { display: none; }

  /* Tabellen sind auf dem Handy Listen, keine Raster. */
  .dg-table { font-size: 13.5px; }
  .dg-table td, .dg-table th { padding: 11px 8px; }
  .dg-table td:first-child, .dg-table th:first-child { padding-left: 0; }
  .dg-table td:last-child, .dg-table th:last-child { padding-right: 0; }

  /* Trichter: Beschriftung ueber den Balken, Abgang darunter. Nebeneinander
     braeuchte die Zeile rund 420 px. */
  .dg-tabelle-trichter tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--linie-zart); }
  .dg-tabelle-trichter tr:last-child { border-bottom: none; }
  .dg-tabelle-trichter td { display: block; width: auto; padding: 0; border: none; }
  .dg-t-schritt { font-weight: 700; margin-bottom: 7px; }
  .dg-t-abgang { text-align: left; font-size: 12px; margin-top: 5px; }
  .dg-t-abgang:empty { display: none; }

  /* Anfragen: fuenf Spalten mit E-Mail passen nie. Als Block gelesen:
     Name gross, darunter E-Mail, darueber Datum und Status. */
  .dg-tabelle-anfragen thead { display: none; }
  .dg-tabelle-anfragen tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 14px 0; border-bottom: 1px solid var(--linie-zart); }
  .dg-tabelle-anfragen tr:last-child { border-bottom: none; }
  .dg-tabelle-anfragen td { display: block; padding: 0; border: none; }
  .dg-z-datum { grid-column: 1; order: 1; font-size: 12px; color: var(--label); }
  .dg-z-status { grid-column: 2; grid-row: 1 / span 2; order: 2; align-self: center; text-align: right; }
  .dg-z-name { grid-column: 1; order: 3; font-weight: 700; }
  .dg-z-mail { grid-column: 1; order: 4; font-size: 12.5px; color: var(--gedaempft); overflow-wrap: anywhere; }
  .dg-z-formular { grid-column: 1; order: 5; font-size: 12px; color: var(--label); }
  .dg-row-link:hover td { background: none; }

  /* Breite Listen (Anfragen, Vormerkungen) mit 7-9 Spalten: als Tabelle
     bräuchten sie über 900 px. Jede Zeile wird deshalb zu einem Block, jede
     Zelle zu einer Zeile mit ihrer Spaltenüberschrift davor - die steht in
     `data-label` am <td>, damit die Beschriftung nicht doppelt im Text steht. */
  .dg-tabelle-liste thead { display: none; }
  .dg-tabelle-liste tr { display: block; padding: 15px 0; border-bottom: 1px solid var(--linie-zart); }
  .dg-tabelle-liste tr:last-child { border-bottom: none; }
  /* Zelle bewusst als Block mit eingerueckter Beschriftung, NICHT als Flex:
     in einem Flex-Container wird das <br> zwischen E-Mail und Telefonnummer
     wirkungslos, beide wuerden nebeneinander stehen und zerfasern. */
  .dg-tabelle-liste td {
    display: block; position: relative;
    padding: 3px 0 3px 104px; border: none; overflow-wrap: anywhere;
  }
  /* Die allgemeine Regel `.dg-table td:first-child { padding-left: 0 }` ist
     staerker als die Regel oben und legte sonst die erste Beschriftung
     ("Datum") ueber ihren eigenen Wert. */
  .dg-tabelle-liste td:first-child { padding-left: 104px; }
  .dg-tabelle-liste td::before {
    content: attr(data-label); position: absolute; left: 0; top: 4px; width: 98px;
    font-size: 10px; font-weight: 800; letter-spacing: .07em; line-height: 1.3;
    text-transform: uppercase; color: var(--label);
  }
  .dg-tabelle-liste td.ist-haupt { font-size: 15px; font-weight: 700; }
  .dg-tabelle-liste td[colspan] { display: block; }
  .dg-tabelle-liste td[colspan]::before { content: none; }
  .dg-tabelle-objekte thead { display: none; }
  .dg-tabelle-objekte td { display: block; border: none; padding: 3px 0; }
  .dg-tabelle-objekte tr { display: block; border-bottom: 1px solid var(--linie); padding: 16px 0; }
  .dg-card { padding: 22px 20px; }
  /* Bei zwei Spalten müssen die Trennstriche in der linken Spalte weg */
  .dg-kpis { grid-template-columns: 1fr 1fr; }
  .dg-kpi:nth-child(odd)::before { content: none; }
}
@media (max-width: 420px) {
  .dg-kpis { grid-template-columns: 1fr; }
  .dg-kpi::before { content: none; }
  .dg-kpi + .dg-kpi { border-top: 1px solid var(--linie); }
}

/* Interne Notiz deutlich als nicht-öffentlich kennzeichnen */
.dg-intern { background: #FFFCF4; box-shadow: inset 0 0 0 1px #EADFC2, var(--schatten); }
.dg-intern-marke {
  display: inline-block; margin-left: 8px; background: var(--akzent-zart); color: #7C540F;
  font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 100px; vertical-align: middle;
}

/* Geplante Energiewerte: optisch als Prognose abgesetzt */
.dg-planblock {
  border: 1px dashed #DCD0B2; border-radius: var(--r); background: #FFFCF4;
  padding: 20px 22px 16px; margin: 4px 0 20px;
}
.dg-planblock h3 { font-size: 14px; font-weight: 800; margin: 0 0 8px; color: var(--tinte); }

@media (max-width: 460px) {
  .dg-login-logo { flex-direction: column; gap: 12px; }
  .dg-login-logo .dg-marken-trenner { display: none; }
  .dg-login-logo img { height: 58px; }
  .dg-login-logo .dg-wortmarke { font-size: 24px; }
}