/* ============================================================
   Angebots- und Objektseiten.

   Gestaltungsprinzip: hell und luftig. Das Foto der Immobilie ist der
   Hauptdarsteller, deshalb steht es weit oben und bekommt Platz. Schwarz
   wird nur noch als Akzent eingesetzt (Schaltflaechen, Marken), nicht mehr
   als grossflaechiger Hintergrund.
   Schrift durchgaengig Lato (SIL Open Font License, selbst gehostet):
   Ueberschriften in 900/700, Fliesstext in 400.
   ============================================================ */

:root {
  --dg-schwarz: #0E0E0E;
  --dg-text: #2B2A27;
  --dg-gedaempft: #64615A;
  --dg-label: #9A958A;
  --dg-linie: #E8E4DB;
  --dg-flaeche: #F7F5F0;
  --dg-warm: #FAF8F4;
  --dg-rand: 10px;
}

*, *::before, *::after { box-sizing: border-box; }
/* Ohne diese Zeile ueberstimmt jede display-Regel das hidden-Attribut: das
   Anfrageformular waere unsichtbar und stattdessen stuende sofort die
   Dankesmeldung da. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body.dg-seite {
  margin: 0;
  background: #fff;
  color: var(--dg-text);
  font-family: 'Lato', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.dg-seite ::selection { background: var(--dg-schwarz); color: #fff; }
body.dg-seite img { max-width: 100%; }
.dg-seite input, .dg-seite textarea, .dg-seite select, .dg-seite button { font-family: inherit; }

/* ---------- Kopfleiste ---------- */
.dg-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50; min-height: 96px;
  display: flex; flex-direction: column; justify-content: center;
  background: transparent; color: #fff; border-bottom: 1px solid rgba(255,255,255,0);
  transition: transform .4s ease, background .35s, color .35s, border-color .35s, box-shadow .35s;
}
.dg-header.ist-fest {
  background: #fff; color: var(--dg-schwarz);
  border-bottom: 1px solid var(--dg-linie); box-shadow: 0 1px 12px rgba(0,0,0,.04);
}
.dg-header.ist-versteckt { transform: translateY(-100%); }
.dg-header-inner {
  width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.dg-header-logo { display: flex; align-items: center; text-decoration: none; flex: none; }
.dg-logo { height: 66px; width: auto; filter: none; transition: filter .3s; }
.dg-header.ist-fest .dg-logo { filter: invert(1); }
.dg-desktop-nav { display: flex; align-items: center; gap: 32px; }
.dg-desktop-nav a {
  font-size: 14px; font-weight: 500; color: inherit; text-decoration: none;
  opacity: .9; padding: 6px 0;
}
.dg-desktop-nav a:hover { opacity: 1; }
.dg-cta {
  flex: none; display: inline-block; text-decoration: none; border: none; border-radius: 3px;
  padding: 11px 22px; font-size: 14px; font-weight: 600; white-space: nowrap;
  background: #fff; color: var(--dg-schwarz); transition: background .25s, color .25s, opacity .2s;
}
.dg-header.ist-fest .dg-cta { background: var(--dg-schwarz); color: #fff; }
.dg-cta:hover { opacity: .87; }
.dg-burger {
  position: relative; width: 44px; height: 44px; background: none; border: none;
  cursor: pointer; padding: 0; flex: none; color: inherit;
}
.dg-burger span {
  position: absolute; left: 50%; top: 50%; width: 24px; height: 2px; margin-left: -12px;
  background: currentColor; border-radius: 2px; transform-origin: center;
  transition: transform .3s ease, opacity .2s ease;
}
.dg-burger span:nth-child(1) { transform: translateY(-7px); }
.dg-burger span:nth-child(2) { transform: translateY(-1px); }
.dg-burger span:nth-child(3) { transform: translateY(5px); }
.dg-burger.ist-offen span:nth-child(1) { transform: translateY(-1px) rotate(45deg); }
.dg-burger.ist-offen span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.dg-burger.ist-offen span:nth-child(3) { transform: translateY(-1px) rotate(-45deg); }

/* ---------- Grundbausteine ---------- */
.dg-innen { max-width: 1240px; margin: 0 auto; padding: 0 40px; }
.dg-innen-schmal { max-width: 1000px; margin: 0 auto; padding: 0 40px; }

.dg-h1 {
  font-weight: 900; font-size: clamp(26px, 3.2vw, 40px); line-height: 1.16;
  letter-spacing: -.022em; margin: 0; color: var(--dg-schwarz);
}
.dg-h2 {
  font-weight: 700; font-size: clamp(20px, 1.9vw, 25px); line-height: 1.25;
  letter-spacing: -.015em; margin: 0 0 18px; color: var(--dg-schwarz);
}
.dg-label {
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--dg-label); font-weight: 600; margin: 0 0 6px;
}

.dg-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none; background: var(--dg-schwarz); color: #fff; border: 1px solid var(--dg-schwarz);
  border-radius: 3px; padding: 15px 28px; font-size: 15px; font-weight: 600; cursor: pointer;
  transition: opacity .2s;
}
.dg-knopf:hover { opacity: .86; }
.dg-knopf-rand {
  background: #fff; color: var(--dg-schwarz); border: 1px solid #D8D3C8;
}
.dg-knopf-rand:hover { border-color: var(--dg-schwarz); opacity: 1; }

.dg-marke {
  display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; padding: 6px 12px; border-radius: 100px;
  background: var(--dg-flaeche); color: var(--dg-gedaempft);
}
.dg-marke::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.dg-marke-verfuegbar { background: #E4F0E7; color: #1E6B34; }
.dg-marke-reserviert { background: #FBEED2; color: #8A5A00; }
.dg-marke-verkauft { background: #EAE7E1; color: #55534D; }

/* ============================================================
   Objektseite
   ============================================================ */
.dg-obj-kopf { padding: 128px 0 24px; }
.dg-brotkrume {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  color: var(--dg-gedaempft); font-size: 14px; font-weight: 600; margin-bottom: 26px;
}
.dg-brotkrume:hover { color: var(--dg-schwarz); }
.dg-obj-kopfzeile { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.dg-obj-kopfzeile .dg-label { margin: 0; }
.dg-obj-titel { max-width: 900px; }
.dg-obj-untertitel { font-size: 17px; line-height: 1.55; color: var(--dg-gedaempft); margin: 12px 0 0; max-width: 720px; }
.dg-obj-standort {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 18px 0 0;
  font-size: 16px;
}
.dg-obj-standort .dg-label { margin: 0; }
.dg-obj-standort strong { font-weight: 600; color: var(--dg-schwarz); }

/* ---------- Galerie ---------- */
.dg-galerie { padding: 8px 0 0; }
.dg-galerie-buehne {
  position: relative; width: 100%; aspect-ratio: 16 / 10;
  /* Die Hoehendeckelung bestimmt, wie stark ein Querformat-Foto beschnitten
     wird: je flacher die Buehne, desto mehr faellt oben und unten weg.
     Bei 540 px waren es 30 % - deutlich zu viel. Mit dieser Deckelung bleibt
     das Foto nahezu vollstaendig und passt trotzdem auf einen Bildschirm. */
  max-height: min(70vh, 700px);
  background: var(--dg-flaeche); overflow: hidden; border-radius: var(--dg-rand);
}
/* Hochformat-Fotos (typisch vom Handy) bekommen eine höhere Bühne, sonst bliebe
   links und rechts sehr viel Leerraum. */
.dg-galerie.ist-hochformat .dg-galerie-buehne { aspect-ratio: 4 / 3; max-height: 620px; }

.dg-galerie-bild {
  position: absolute; inset: 0; opacity: 0; transition: opacity .3s ease;
  pointer-events: none;
}
.dg-galerie-bild.ist-sichtbar { opacity: 1; pointer-events: auto; }
/* Das Foto wird vollständig gezeigt (nie beschnitten). Damit der Rahmen
   trotzdem gefüllt wirkt, liegt dasselbe Bild unscharf und abgedunkelt
   dahinter - so bleibt kein toter grauer Rand. */
.dg-galerie-unterlage {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  filter: blur(28px) brightness(.7) saturate(1.1); transform: scale(1.15);
}
.dg-galerie-bild img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; cursor: zoom-in;
}
/* Querformat-Fotos füllen die Bühne (minimaler Beschnitt oben/unten fällt nicht
   auf). Nur bei Hochformat wird das Bild vollständig gezeigt - dort würde ein
   Beschnitt die halbe Aufnahme kosten. */
.dg-galerie.ist-hochformat .dg-galerie-bild img { object-fit: contain; }
.dg-galerie-pfeil {
  position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px;
  background: rgba(14,14,14,.55); border: none; border-radius: 50%; cursor: pointer;
  color: #fff; font-size: 22px; line-height: 1; display: flex; align-items: center;
  justify-content: center; z-index: 3; transition: background .2s;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.dg-galerie-pfeil:hover { background: rgba(14,14,14,.8); }
.dg-galerie-pfeil.links { left: 18px; }
.dg-galerie-pfeil.rechts { right: 18px; }
.dg-galerie-zaehler {
  position: absolute; right: 18px; bottom: 18px; background: rgba(14,14,14,.62); color: #fff;
  font-size: 12.5px; font-weight: 600; padding: 7px 13px; border-radius: 100px; z-index: 3;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.dg-galerie-marke { position: absolute; left: 18px; top: 18px; z-index: 3; }
.dg-galerie-streifen {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; margin-top: 10px;
}
.dg-galerie-streifen button {
  aspect-ratio: 4 / 3; border: none; padding: 0; cursor: pointer; background: var(--dg-flaeche);
  border-radius: 6px; overflow: hidden; position: relative;
}
.dg-galerie-streifen img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.dg-galerie-streifen button:hover img { transform: scale(1.06); }
.dg-galerie-streifen button.ist-aktiv::after {
  content: ''; position: absolute; inset: 0; border: 2px solid var(--dg-schwarz); border-radius: 6px;
}
.dg-galerie-streifen .dg-mehr {
  position: absolute; inset: 0; background: rgba(14,14,14,.58); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 13.5px; font-weight: 600;
}

/* ---------- Faktenband ---------- */
.dg-fakten {
  margin-top: 34px; background: var(--dg-warm); border: 1px solid var(--dg-linie);
  border-radius: var(--dg-rand); padding: 30px 34px;
  display: flex; gap: 34px; align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.dg-fakten-preis { flex: 0 0 auto; }
/* Preise fett und mit enger Laufweite - sie sind die wichtigste Zahl der Seite. */
.dg-fakten-preis .dg-preis {
  font-size: clamp(27px, 2.9vw, 36px); font-weight: 700; line-height: 1.05;
  letter-spacing: -.015em; color: var(--dg-schwarz); margin: 0;
}
.dg-fakten-preis .dg-preis-zusatz { font-size: 13px; color: var(--dg-gedaempft); margin: 8px 0 0; }
.dg-fakten-werte {
  flex: 1 1 340px; display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 20px 26px;
}
.dg-fakt dt { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--dg-label); font-weight: 600; margin-bottom: 5px; }
.dg-fakt dd { margin: 0; font-size: 19px; font-weight: 600; color: var(--dg-schwarz); line-height: 1.2; }
.dg-fakten-knoepfe { flex: 0 0 auto; display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Inhalt: Text links, Kontakt rechts ---------- */
.dg-obj-inhalt { padding: 62px 0 90px; }
.dg-obj-spalten { display: flex; gap: 70px; align-items: flex-start; flex-wrap: wrap; }
.dg-obj-text { flex: 1 1 580px; min-width: 300px; }
.dg-obj-seite { flex: 0 1 340px; min-width: 280px; position: sticky; top: 122px; }

.dg-abschnitt { margin-bottom: 54px; }
.dg-abschnitt:last-child { margin-bottom: 0; }
.dg-abschnitt p { font-size: 16.5px; line-height: 1.75; color: var(--dg-text); margin: 0 0 18px; }
.dg-abschnitt p:last-child { margin-bottom: 0; }

/* Objektdaten als Beschriftung-Wert-Raster (keine Tabellenoptik) */
.dg-daten { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 40px; }
.dg-daten > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 13px 0; border-bottom: 1px solid var(--dg-linie);
}
.dg-daten dt { font-size: 14.5px; color: var(--dg-gedaempft); }
.dg-daten dd { margin: 0; font-size: 15px; font-weight: 600; color: var(--dg-schwarz); text-align: right; }

/* Ausstattungshaken */
.dg-haken-liste {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px 28px;
}
.dg-haken-liste li { display: flex; align-items: flex-start; gap: 11px; font-size: 15.5px; line-height: 1.45; }
.dg-haken-liste li::before {
  content: '';
  flex: none; width: 18px; height: 18px; border-radius: 50%; margin-top: 1px;
  background: var(--dg-flaeche) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3l2.3 2.3 4.7-5' fill='none' stroke='%230E0E0E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px 12px no-repeat;
}

/* Grundrisse */
.dg-grundrisse { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
.dg-grundrisse figure { margin: 0; }
.dg-grundrisse a {
  display: block; border: 1px solid var(--dg-linie); border-radius: 8px; overflow: hidden; background: #fff;
}
.dg-grundrisse img { width: 100%; display: block; }
.dg-grundrisse figcaption { font-size: 13px; color: var(--dg-gedaempft); padding: 10px 2px 0; }

/* Energieausweis */
.dg-energie { background: var(--dg-warm); border: 1px solid var(--dg-linie); border-radius: var(--dg-rand); padding: 26px 28px; }
.dg-energie .dg-daten > div:last-child, .dg-energie .dg-daten > div:nth-last-child(2) { border-bottom: none; }
.dg-energieskala { display: flex; gap: 4px; margin: 0 0 22px; }
.dg-energieskala span {
  flex: 1; text-align: center; font-size: 11px; font-weight: 700; color: #fff;
  padding: 7px 0; border-radius: 4px; opacity: .26; transition: opacity .2s;
}
.dg-energieskala span.ist-aktiv { opacity: 1; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--dg-schwarz); }

/* Video */
.dg-video-platzhalter {
  position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--dg-schwarz); color: #fff;
  border-radius: var(--dg-rand); display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 14px; text-align: center; padding: 30px;
}
.dg-video-platzhalter p { font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,.66); margin: 0; max-width: 420px; }
.dg-video-rahmen { width: 100%; aspect-ratio: 16 / 9; border: none; border-radius: var(--dg-rand); }

.dg-vorbehalt {
  font-size: 12.5px; line-height: 1.7; color: var(--dg-label);
  border-top: 1px solid var(--dg-linie); padding-top: 22px; margin-top: 46px;
}

/* Kontaktkarte */
.dg-kontaktkarte {
  border: 1px solid var(--dg-linie); border-radius: var(--dg-rand); padding: 28px 26px;
  background: #fff; box-shadow: 0 10px 40px -24px rgba(0,0,0,.28);
}
.dg-kontaktkarte h3 {
  font-size: 19px; font-weight: 700; letter-spacing: -.015em;
  margin: 0 0 8px; color: var(--dg-schwarz); line-height: 1.3;
}
.dg-kontaktkarte > p { font-size: 14.5px; line-height: 1.6; color: var(--dg-gedaempft); margin: 0 0 20px; }
.dg-kontaktkarte .dg-knopf { display: flex; width: 100%; margin-bottom: 10px; }
.dg-person {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 4px; margin: 0 0 24px; padding-bottom: 24px; border-bottom: 1px solid var(--dg-linie);
}
.dg-person img {
  width: 132px; height: 132px; border-radius: 50%; object-fit: cover;
  object-position: center 18%; background: var(--dg-flaeche); margin-bottom: 14px;
}
.dg-person-rolle { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--dg-label); font-weight: 600; }
.dg-person-name { font-size: 19px; font-weight: 700; letter-spacing: -.01em; color: var(--dg-schwarz); }
.dg-person a { font-size: 14px; color: var(--dg-gedaempft); text-decoration: none; margin-top: 2px; }
.dg-person a:hover { color: var(--dg-schwarz); }

/* Fester Anfrage-Balken auf dem Handy */
.dg-handybalken {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: #fff; border-top: 1px solid var(--dg-linie); padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  gap: 10px; align-items: center; box-shadow: 0 -4px 20px rgba(0,0,0,.07);
}
.dg-handybalken .dg-handypreis { flex: 1; font-weight: 700; font-size: 16px; color: var(--dg-schwarz); }
.dg-handybalken .dg-knopf { padding: 13px 22px; font-size: 14.5px; }

/* ---------- Vollbild ---------- */
.dg-lightbox {
  position: fixed; inset: 0; background: rgba(10,10,10,.97); z-index: 200;
  display: none; align-items: center; justify-content: center; padding: 56px 24px;
}
.dg-lightbox.ist-offen { display: flex; }
.dg-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; }
.dg-lightbox-zu, .dg-lightbox-pfeil {
  position: absolute; background: rgba(255,255,255,.13); color: #fff; border: none;
  cursor: pointer; border-radius: 50%; width: 48px; height: 48px; font-size: 21px;
  display: flex; align-items: center; justify-content: center; transition: background .2s;
}
.dg-lightbox-zu:hover, .dg-lightbox-pfeil:hover { background: rgba(255,255,255,.26); }
.dg-lightbox-zu { top: 20px; right: 22px; }
.dg-lightbox-pfeil.links { left: 22px; top: 50%; transform: translateY(-50%); }
.dg-lightbox-pfeil.rechts { right: 22px; top: 50%; transform: translateY(-50%); }
.dg-lightbox-zaehler { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.68); font-size: 13px; }

/* ============================================================
   Angebotsübersicht
   ============================================================ */
.dg-liste-kopf { padding: 124px 0 30px; }
.dg-liste-kopf .dg-h1 { max-width: 780px; }
.dg-liste-kopf p { font-size: 17px; line-height: 1.65; color: var(--dg-gedaempft); max-width: 620px; margin: 18px 0 0; }

.dg-filterband { padding: 6px 0 0; }
.dg-filterband .dg-innen { display: flex; gap: 9px; flex-wrap: wrap; }
.dg-chip {
  font-size: 13.5px; font-weight: 600; color: var(--dg-gedaempft); background: var(--dg-flaeche);
  border: 1px solid transparent; border-radius: 100px; padding: 9px 17px; white-space: nowrap;
  text-decoration: none; transition: background .2s, color .2s, border-color .2s;
}
.dg-chip:hover { border-color: #DBD6CB; }
.dg-chip.ist-aktiv { background: var(--dg-schwarz); color: #fff; }

.dg-raster { padding: 38px 0 96px; }
.dg-karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 30px; align-items: stretch; }
/* Die Karte ist eine Spalte, nicht ein Block: nur so laesst sich die Preiszeile
   unten verankern. Sonst rutscht sie bei jeder Karte auf eine andere Hoehe,
   weil Titel und Kurztext unterschiedlich lang sind. */
.dg-karte {
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column; height: 100%;
}
.dg-karte-bild {
  position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden;
  margin-bottom: 16px; background: var(--dg-flaeche); border-radius: 8px;
}
.dg-karte-bild img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .55s ease; }
.dg-karte:hover .dg-karte-bild img { transform: scale(1.04); }
.dg-karte-marke { position: absolute; left: 12px; top: 12px; pointer-events: none; background: rgba(255,255,255,.94); }
.dg-karte-leer {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  color: var(--dg-label); font-size: 13.5px;
}
.dg-karte-kat { font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--dg-label); font-weight: 600; margin-bottom: 8px; }
/* Zwei Zeilen sind gesetzt - auch bei einem kurzen Titel. Damit stehen die
   Merkmale darunter auf allen Karten auf derselben Hoehe. Laengere Titel
   werden nach zwei Zeilen abgeschnitten; vollstaendig steht der Titel auf der
   Objektseite. */
.dg-karte-titel {
  font-size: 19px; font-weight: 700; letter-spacing: -.015em;
  margin: 0 0 10px; line-height: 1.3; color: var(--dg-schwarz);
  min-height: 2.6em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dg-karte-text {
  font-size: 14.5px; line-height: 1.6; color: var(--dg-gedaempft); margin: 0 0 16px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dg-karte-daten {
  display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 0 0 16px; padding: 0;
}
.dg-karte-daten div {
  background: var(--dg-flaeche); border-radius: 100px; padding: 6px 13px;
  font-size: 13px; font-weight: 600; color: var(--dg-text);
}
/* margin-top: auto schiebt die Preiszeile ans untere Ende der Karte -
   dadurch stehen Preis und Trennlinie in einer Reihe immer auf einer Hoehe. */
.dg-karte-preis {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  border-top: 1px solid var(--dg-linie); padding-top: 14px; margin-top: auto;
}
.dg-karte-preis .dg-wert { font-size: 21px; font-weight: 700; letter-spacing: -.015em; color: var(--dg-schwarz); }
.dg-karte-preis .dg-mehr { font-size: 13.5px; font-weight: 600; color: var(--dg-gedaempft); }
.dg-karte:hover .dg-karte-preis .dg-mehr { color: var(--dg-schwarz); }
.dg-karte-verkauft .dg-karte-bild img { filter: grayscale(.6); }

.dg-hinweisbox {
  margin-top: 70px; background: var(--dg-flaeche); border-radius: var(--dg-rand); padding: 46px 44px;
  display: flex; gap: 32px; align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.dg-hinweisbox p { font-size: 16px; line-height: 1.65; color: var(--dg-gedaempft); margin: 0; }
.dg-leerhinweis { text-align: center; padding: 30px 0 6px; }
.dg-leerhinweis p { font-size: 16.5px; line-height: 1.7; color: var(--dg-gedaempft); max-width: 560px; margin: 0 auto 14px; }
.dg-leerhinweis .dg-h2 { margin-bottom: 14px; }

.dg-referenzen { background: var(--dg-warm); padding: 78px 0 90px; margin-top: 20px; }

/* ============================================================
   Anfrageblock (dunkel - der einzige grosse dunkle Bereich)
   ============================================================ */
.dg-anfrage { background: var(--dg-schwarz); color: #fff; padding: 88px 0; }
.dg-anfrage .dg-innen { display: flex; gap: 70px; flex-wrap: wrap; align-items: flex-start; }
.dg-anfrage-links { flex: 1 1 380px; min-width: 290px; }
.dg-anfrage-links .dg-h1, .dg-anfrage-links .dg-h2 { color: #fff; }
.dg-anfrage-links .dg-label { color: rgba(255,255,255,.5); }
.dg-anfrage-links > p { font-size: 16.5px; line-height: 1.7; color: rgba(255,255,255,.72); max-width: 460px; margin: 16px 0 32px; }
.dg-anfrage-kontakte { display: flex; flex-direction: column; border-top: 1px solid rgba(255,255,255,.14); }
.dg-anfrage-kontakte a {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 19px 2px;
  border-bottom: 1px solid rgba(255,255,255,.14); text-decoration: none; color: #fff;
}
.dg-anfrage-kontakte span:first-child { font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.dg-anfrage-kontakte span:last-child { font-size: 17px; font-weight: 600; }
.dg-anfrage-karte { flex: 1 1 400px; min-width: 290px; background: #fff; color: var(--dg-text); border-radius: var(--dg-rand); padding: 36px 34px; }
.dg-felder { display: flex; flex-direction: column; gap: 17px; }
.dg-anfrage-karte input, .dg-anfrage-karte textarea {
  border: none; border-bottom: 1px solid #DDD8CD; padding: 12px 2px; font-size: 15px;
  outline: none; background: transparent; color: var(--dg-schwarz); width: 100%;
}
.dg-anfrage-karte textarea { resize: none; }
.dg-anfrage-karte input:focus, .dg-anfrage-karte textarea:focus { border-bottom-color: var(--dg-schwarz); }
.dg-anfrage-karte button.dg-knopf { width: 100%; margin-top: 26px; }
.dg-anfrage-marke {
  display: inline-block; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--dg-gedaempft); background: var(--dg-flaeche); padding: 7px 13px; border-radius: 100px;
  font-weight: 600; margin-bottom: 18px;
}
.dg-klein { font-size: 12px; color: var(--dg-label); margin: 15px 0 0; line-height: 1.55; }
.dg-klein a { color: var(--dg-label); }
.dg-danke { display: flex; flex-direction: column; justify-content: center; min-height: 380px; }
.dg-danke-titel { font-size: 30px; font-weight: 900; letter-spacing: -.02em; line-height: 1.2; margin-bottom: 14px; color: var(--dg-schwarz); }
.dg-danke p { font-size: 16px; line-height: 1.7; color: var(--dg-gedaempft); margin: 0 0 14px; }

/* ---------- Fussbereich ---------- */
.dg-footer { background: #0A0A0A; color: rgba(255,255,255,.62); padding: 68px 0 34px; }
.dg-footer-inner { max-width: 1240px; margin: 0 auto; padding: 0 40px; }
.dg-footer-oben {
  display: flex; gap: 60px; flex-wrap: wrap; justify-content: space-between;
  padding-bottom: 50px; border-bottom: 1px solid rgba(255,255,255,.1);
}
.dg-footer-marke { flex: 1 1 280px; max-width: 350px; }
.dg-footer-marke img { height: 92px; width: auto; margin-bottom: 20px; }
.dg-footer-marke p { font-size: 14.5px; line-height: 1.65; margin: 0; }
.dg-footer-spalten { display: flex; gap: 54px; flex-wrap: wrap; }
.dg-footer-spalten > div { display: flex; flex-direction: column; gap: 11px; }
.dg-footer-titel { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 6px; font-weight: 600; }
.dg-footer-spalten a { font-size: 14.5px; color: rgba(255,255,255,.7); text-decoration: none; }
.dg-footer-spalten a:hover { color: #fff; }
.dg-footer-unten { padding-top: 24px; font-size: 13px; color: rgba(255,255,255,.4); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dg-footer-unten a { color: rgba(255,255,255,.4); text-decoration: none; }
.dg-footer-punkt { color: rgba(255,255,255,.2); }

/* ---------- Vorschauhinweis (nur fuer angemeldete Nutzer) ----------
   Bewusst eine kleine schwebende Marke unten links: so verdeckt sie weder die
   Kopfleiste noch den Inhalt und die Seite sieht genauso aus wie spaeter live. */
.dg-vorschauband {
  position: fixed; left: 16px; bottom: 16px; z-index: 130; max-width: calc(100vw - 32px);
  background: #F5A623; color: #2A1D00; font-size: 12.5px; line-height: 1.4; font-weight: 600;
  padding: 9px 16px; border-radius: 100px; box-shadow: 0 6px 22px rgba(0,0,0,.22);
}
.dg-vorschauband a { color: #2A1D00; text-decoration: underline; margin-left: 8px; }

/* ============================================================
   Tablet und Handy
   ============================================================ */
@media (max-width: 1080px) {
  .dg-karten { grid-template-columns: repeat(2, 1fr); }
  .dg-obj-seite { position: static; flex: 1 1 100%; }
  .dg-obj-spalten { gap: 50px; }
}

@media (max-width: 880px) {
  .dg-innen, .dg-innen-schmal, .dg-header-inner, .dg-footer-inner { padding-left: 22px; padding-right: 22px; }
  .dg-logo { height: 46px; }
  .dg-header { min-height: 66px; }
  .dg-obj-kopf { padding-top: 92px; }
  .dg-liste-kopf { padding-top: 92px; }
}

@media (max-width: 700px) {
  .dg-obj-kopf { padding: 88px 0 18px; }
  .dg-brotkrume { margin-bottom: 18px; font-size: 13.5px; }
  .dg-galerie-buehne { aspect-ratio: 4 / 3; border-radius: 8px; }
  .dg-galerie.ist-hochformat .dg-galerie-buehne { aspect-ratio: 3 / 4; max-height: none; }
  .dg-galerie-pfeil { width: 40px; height: 40px; font-size: 19px; }
  .dg-galerie-pfeil.links { left: 10px; }
  .dg-galerie-pfeil.rechts { right: 10px; }
  .dg-galerie-streifen { grid-auto-columns: 84px; grid-auto-flow: column; overflow-x: auto; scrollbar-width: none; }
  .dg-galerie-streifen::-webkit-scrollbar { display: none; }

  .dg-fakten { margin-top: 24px; padding: 22px; gap: 22px; }
  .dg-fakten-preis { flex: 1 1 100%; }
  .dg-fakten-werte { flex: 1 1 100%; grid-template-columns: 1fr 1fr; gap: 18px; }
  .dg-fakten-knoepfe { display: none; }   /* auf dem Handy uebernimmt der feste Balken unten */

  .dg-obj-inhalt { padding: 44px 0 80px; }
  .dg-obj-spalten { gap: 40px; }
  .dg-abschnitt { margin-bottom: 42px; }
  .dg-abschnitt p { font-size: 16px; }
  .dg-daten { grid-template-columns: 1fr; gap: 0; }
  .dg-haken-liste { grid-template-columns: 1fr 1fr; gap: 11px 18px; font-size: 14.5px; }
  .dg-energie { padding: 20px; }
  .dg-energieskala span { font-size: 9.5px; padding: 6px 0; }

  .dg-handybalken { display: flex; }
  body.hat-handybalken { padding-bottom: 74px; }
  body.hat-handybalken .dg-vorschauband { bottom: 84px; }

  .dg-karten { grid-template-columns: 1fr; gap: 36px; }
  .dg-raster { padding: 28px 0 70px; }
  .dg-hinweisbox { padding: 30px 24px; margin-top: 48px; }
  .dg-referenzen { padding: 56px 0 66px; }
  .dg-anfrage { padding: 62px 0; }
  .dg-anfrage .dg-innen { gap: 40px; }
  .dg-anfrage-karte { padding: 28px 22px; }
  .dg-footer { padding: 52px 0 30px; }
  .dg-footer-spalten { gap: 30px; }
  .dg-lightbox { padding: 60px 12px; }
}
.dg-marke-entwurf { background: #FBEED2; color: #8A5A00; }

/* Hochgestelltes Zwei in Einheiten (m², kWh/(m²·a)) sauber setzen */
.dg-seite sup { font-size: .62em; vertical-align: .38em; line-height: 0; font-weight: inherit; }

/* Geplante Energiewerte nach einer Sanierung: bewusst anders gestaltet als der
   amtliche Teil - gestrichelter Rahmen statt Farbskala, damit die Prognose auf
   keinen Fall wie ein Energieausweis wirkt. */
.dg-energie-plan-info {
  margin-top: 22px; padding: 18px 20px 6px;
  border: 1px dashed #D5CEBF; border-radius: 8px; background: #fff;
}
.dg-plan-titel { font-size: 15px; font-weight: 700; color: var(--dg-schwarz); margin: 0 0 6px; }
.dg-plan-hinweis { font-size: 13px; line-height: 1.6; color: var(--dg-gedaempft); margin: 0 0 12px; }

/* Prognose-Skala: gleiche Farben (die kennt jeder Käufer), aber die aktive
   Klasse wird nur zurückhaltend umrandet statt hervorgehoben - so bleibt sie
   von der amtlichen Skala unterscheidbar. */
.dg-energieskala.ist-prognose { margin-bottom: 6px; }
.dg-energieskala.ist-prognose span { opacity: .34; }
.dg-energieskala.ist-prognose span.ist-aktiv {
  opacity: 1; transform: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--dg-gedaempft);
}
.dg-plan-skalahinweis { font-size: 12px; color: var(--dg-label); margin: 0 0 14px; }

/* Fehlermeldung, wenn eine Anfrage nicht gespeichert werden konnte. Eigene
   Flaeche mit rotem Rand, damit sie auch neben dem Formular sofort auffaellt. */
.dg-sendefehler {
  margin: 18px 0 0; background: #FBEDEC; color: #8A2020; border-left: 3px solid #B3261E;
  padding: 13px 15px; font-size: 14px; line-height: 1.55;
}
.dg-sendefehler strong { display: block; margin-bottom: 3px; }
.dg-sendefehler a { color: inherit; font-weight: 700; white-space: nowrap; }