:root {
  --tinte: #1b2733;
  --tinte-leise: #667684;
  --flaeche: #f5f6f7;
  --karte: #ffffff;
  --rand: #dfe4e8;
  --akzent: #2c6382;
  --gut: #2e7d5b;
  --offen: #b4531f;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--tinte);
  background: var(--flaeche);
}

/* Strassenansicht des Objekts als ruhiger Hintergrund aller Seiten.
   Der Schleier darueber haelt die Inhaltskarten lesbar - das Haus soll
   erkennbar sein, nicht mit dem Text konkurrieren. */
body.seite {
  background-color: var(--flaeche);
  background-image:
    linear-gradient(180deg, rgba(246, 247, 248, .55) 0%, rgba(246, 247, 248, .82) 60%),
    url("/static/hintergrund.jpg");
  background-size: cover, cover;
  background-position: center, center top;
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;
}

a { color: var(--akzent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- Kopf --- */
.kopf { background: var(--tinte); color: #fff; }
.kopf-innen {
  max-width: 1180px; margin: 0 auto; padding: 14px 24px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.marke { color: #fff; font-weight: 600; font-size: 17px; }
.marke:hover { text-decoration: none; }
.objekt { color: #9fb0bd; margin-left: 14px; font-size: 14px; }
.kopf-rechts { display: flex; align-items: center; gap: 14px; }
.abzeichen {
  background: #2c3d4d; padding: 4px 11px; border-radius: 3px;
  font-size: 13px; color: #d6e0e7;
}
.abzeichen-intern { background: #3a4b3f; }
.abmelden { color: #9fb0bd; font-size: 14px; }

/* --- Rumpf --- */
.rumpf {
  max-width: 1180px; margin: 0 auto; padding: 26px 24px;
  display: grid; grid-template-columns: 232px 1fr; gap: 30px;
  align-items: start;
}
@media (max-width: 820px) {
  .rumpf { grid-template-columns: 1fr; }
}

.seitenleiste {
  background: var(--karte); border: 1px solid var(--rand);
  border-radius: 5px; padding: 8px; font-size: 14px;
}
.seitenleiste a {
  display: block; padding: 6px 10px; border-radius: 3px; color: var(--tinte);
}
.seitenleiste a:hover { background: var(--flaeche); text-decoration: none; }
.seitenleiste a.aktiv { background: var(--akzent); color: #fff; }
.gruppe {
  padding: 12px 10px 4px; font-size: 11px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--tinte-leise);
}

/* Akkordeon der Seitenleiste - <details> statt JavaScript */
.navgruppe { border-top: 1px solid #eef1f3; }
.navgruppe:first-of-type { border-top: none; }
.navgruppe > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 7px;
  padding: 10px 10px 9px; margin: 0;
  font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--tinte-leise); font-weight: 600;
  border-radius: 3px;
}
.navgruppe > summary::-webkit-details-marker { display: none; }
.navgruppe > summary:hover { background: var(--flaeche); color: var(--tinte); }
.navgruppe > summary:focus-visible { outline: 2px solid var(--akzent); outline-offset: -2px; }
/* eigener Pfeil, dreht sich beim Aufklappen */
.navgruppe > summary::before {
  content: ""; flex: 0 0 auto;
  width: 0; height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform .18s ease;
}
.navgruppe[open] > summary::before { transform: rotate(90deg); }
.navgruppe > a { margin-left: 6px; }
.navgruppe[open] { padding-bottom: 6px; }

/* Interner Bereich sichtbar abgesetzt - nichts davon geht an eine Bank */
.navgruppe-intern { margin-top: 6px; border-top: 2px solid var(--rand); }
.navgruppe-intern > summary { color: #8a6410; }
.navgruppe-intern > summary::after {
  content: "nicht sichtbar"; margin-left: auto;
  font-size: 10px; letter-spacing: 0; text-transform: none;
  color: var(--tinte-leise); font-weight: 400;
}
.index-form { padding: 8px 10px 4px; }
.index-form button {
  width: 100%; padding: 7px; font-size: 13px; cursor: pointer;
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: 3px;
  color: var(--tinte);
}
.index-form button:hover { background: #e9edf0; }

.inhalt {
  background: var(--karte); border: 1px solid var(--rand);
  border-radius: 5px; padding: 26px 30px; min-height: 60vh;
  /* Ohne min-width: 0 waechst dieses Grid-Feld mit seinem breitesten Kind
     (dem Bilderstreifen) statt bei der Spaltenbreite zu bleiben - der
     Streifen liesse sich dann nicht scrollen und die Seite liefe seitlich
     ueber. Gilt ebenso fuer breite Tabellen. */
  min-width: 0;
}

h1 { font-size: 23px; margin: 0 0 8px; font-weight: 600; }
h2 { font-size: 16px; margin: 30px 0 10px; font-weight: 600; }
h2 .klein { font-weight: 400; }
.fuehrungstext { color: var(--tinte-leise); margin: 0 0 22px; max-width: 68ch; }

/* --- Kacheln --- */
.kacheln { display: flex; gap: 14px; flex-wrap: wrap; margin: 20px 0 6px; }
.kachel {
  flex: 1 1 130px; background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: 4px; padding: 14px 16px;
}
.kachel-offen { border-color: #e6c5ae; background: #fdf6f1; }
.zahl { font-size: 26px; font-weight: 600; line-height: 1.1; }
.etikett { font-size: 13px; color: var(--tinte-leise); margin-top: 2px; }

.fussnotiz { font-size: 12px; color: var(--tinte-leise); margin-top: 5px; line-height: 1.35; }

/* Merkposten: Sachverhalt, den die Bank ohnehin findet - besser selbst nennen */
.merkposten {
  background: #fdf6f1; border: 1px solid #e6c5ae; border-left: 3px solid var(--offen);
  border-radius: 4px; padding: 12px 16px; margin: 20px 0; font-size: 14.5px;
}
.merkposten a { margin-left: 6px; white-space: nowrap; }

/* Datenblatt: schmale Beschriftungsspalte links */
.tabelle.daten th {
  width: 190px; text-transform: none; letter-spacing: 0; font-size: 14px;
  color: var(--tinte-leise); font-weight: 500; vertical-align: top;
  border-bottom: 1px solid #eef1f3; padding-top: 9px;
}

/* Fotogalerie: Titelbild gross, darunter ein scrollbarer Streifen.
   Bewusst ohne JavaScript - die Sicherheitsrichtlinie verbietet Skripte,
   und scroll-snap leistet dasselbe wie ein Karussell. */
.galerie-bild {
  position: relative; display: block; overflow: hidden;
  border-radius: 4px; border: 1px solid var(--rand); background: var(--flaeche);
  aspect-ratio: 4 / 3;
}
.galerie-gross { display: block; aspect-ratio: 16 / 7; margin: 22px 0 8px; }
.galerie-bild img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .35s ease;
}
.galerie-bild:hover img { transform: scale(1.03); }
.galerie-text {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 16px 12px 8px; font-size: 12.5px; color: #fff;
  background: linear-gradient(180deg, rgba(16, 24, 33, 0), rgba(16, 24, 33, .78));
}

.streifen {
  max-width: 100%; overflow: hidden; padding-bottom: 4px;
}
.streifen:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }

.laufband {
  display: flex; gap: 8px; width: max-content;
  /* Ruhiges Tempo: eine volle Runde dauert drei Minuten. */
  animation: laufband 180s linear infinite;
}
/* Anhalten, sobald jemand hinsieht oder mit der Tastatur hineingeht */
.streifen:hover .laufband,
.streifen:focus-within .laufband { animation-play-state: paused; }

/* Das Band enthaelt zwei Durchgaenge. Eine halbe Bandbreite entspricht
   genau einem Durchgang - abzueglich der halben Luecke zwischen beiden,
   damit der Uebergang nicht springt. */
@keyframes laufband {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 4px)); }
}

/* Wer Bewegung reduziert haben moechte, bekommt den scrollbaren Streifen */
@media (prefers-reduced-motion: reduce) {
  .laufband { animation: none; }
  .streifen {
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    scrollbar-width: thin; scrollbar-color: var(--rand) transparent;
  }
}

.streifen-bild {
  position: relative; display: block; overflow: hidden; flex: 0 0 auto;
  width: 230px; aspect-ratio: 4 / 3;
  border-radius: 4px; border: 1px solid var(--rand); background: var(--flaeche);
  scroll-snap-align: start;
}
.streifen-bild img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .35s ease;
}
.streifen-bild:hover img { transform: scale(1.04); }
.streifen-hinweis { margin-top: 2px; }

@media (max-width: 700px) {
  .galerie-gross { aspect-ratio: 4 / 3; }
  .streifen-bild { width: 190px; }
}

/* Bildregister: Vorschau mit Dateiname - so ist erkennbar, welcher
   kryptische Aufnahmename zu welchem Motiv gehoert. */
.bildraster {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px; margin: 14px 0 6px;
}
.bildkachel { margin: 0; }
.bildkachel a {
  display: block; overflow: hidden; border-radius: 4px;
  border: 1px solid var(--rand); background: var(--flaeche); aspect-ratio: 4 / 3;
}
.bildkachel img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .3s ease;
}
.bildkachel a:hover img { transform: scale(1.04); }
.bildkachel figcaption {
  font-size: 12px; margin-top: 5px; line-height: 1.35;
  overflow-wrap: anywhere; color: var(--tinte);
}
.bildkachel figcaption .leise { display: block; }

/* Belege: direkter Sprung von der Zahl zum Nachweis */
.belege { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 10px; margin: 10px 0 4px; }
.beleg {
  display: flex; flex-direction: column; gap: 3px;
  border: 1px solid var(--rand); border-radius: 4px; padding: 10px 13px;
  background: var(--flaeche); color: var(--tinte);
}
a.beleg:hover { background: #eef5f9; border-color: #c8dceb; text-decoration: none; }
.beleg-titel { font-weight: 600; font-size: 14px; }
.beleg-datei { font-size: 12px; color: var(--tinte-leise); overflow-wrap: anywhere; }
.beleg-fehlt { opacity: .55; }
.beleg-fehlt .beleg-datei { color: var(--offen); }

/* Registerübersicht als Kacheln statt als Liste */
.registerliste { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 8px; margin: 10px 0 4px; }
.registerkachel {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  border: 1px solid var(--rand); border-radius: 4px; padding: 9px 13px;
  background: var(--karte); color: var(--tinte); font-size: 14px;
}
.registerkachel:hover { background: var(--flaeche); text-decoration: none; }
.registerzahl { color: var(--tinte-leise); font-variant-numeric: tabular-nums; }

/* Rechner: Eingabefelder und nachvollziehbarer Rechenweg */
.rechnerform {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 12px 16px; align-items: end;
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: 5px; padding: 15px 17px; margin: 10px 0 18px;
}
.rechnerform label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12.5px; color: var(--tinte-leise);
}
.rechnerform input { width: 100%; font-variant-numeric: tabular-nums; }
.rechnerform button {
  background: var(--akzent); color: #fff; border-color: var(--akzent);
  padding: 8px 20px; align-self: end;
}

.rechenweg { margin-bottom: 20px; }
.rechenweg th {
  font-weight: 400; text-transform: none; letter-spacing: 0;
  font-size: 14px; color: var(--tinte); border-bottom: none;
  padding: 6px 10px;
}
.rechenweg td { font-variant-numeric: tabular-nums; padding: 6px 10px; border-bottom: none; }
.rechenweg tr.zwischensumme th,
.rechenweg tr.zwischensumme td {
  border-top: 1px solid var(--rand); font-weight: 600;
}
.rechenweg tr.ergebnis th,
.rechenweg tr.ergebnis td {
  border-top: 2px solid var(--tinte); font-weight: 700; font-size: 15.5px;
  padding-top: 9px;
}

/* Portrait: gross, ohne Unterschrift */
.portrait { margin: 6px 0 24px; }
.portrait img {
  display: block; width: 100%; max-width: 460px; height: auto;
  border: 1px solid var(--rand); border-radius: 5px;
}

/* Straßenansicht mit Zuordnung der Mieteinheiten */
.fassade { margin: 4px 0 26px; }
.fassade-bild {
  position: relative; line-height: 0;
  border: 1px solid var(--rand); border-radius: 5px; overflow: hidden;
}
.fassade-bild img { width: 100%; height: auto; display: block; }
.fassade-bild svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.flaeche rect {
  fill-opacity: .16; stroke-width: 6; transition: fill-opacity .2s ease;
}
.flaeche a:hover rect { fill-opacity: .34; }
.flaeche text {
  font-size: 78px; font-weight: 600; text-anchor: middle; fill: #fff;
  paint-order: stroke; stroke: rgba(16, 24, 33, .75); stroke-width: 10;
  pointer-events: none;
}
.flaeche-wohnen rect { fill: #2c6382; stroke: #2c6382; }
.flaeche-gewerbe rect { fill: #b4531f; stroke: #b4531f; }
.fassade figcaption {
  display: flex; flex-direction: column; gap: 5px;
  margin: 10px 0 18px; font-size: 13.5px; line-height: 1.45;
}
.legendenpunkt-wohnen { border-color: #2c6382; background: rgba(44, 99, 130, .16); }
.legendenpunkt-gewerbe { border-color: #b4531f; background: rgba(180, 83, 31, .16); }

/* Technische Anlage: Bild links, Beschreibung rechts */
.anlage {
  display: grid; grid-template-columns: minmax(220px, 300px) 1fr;
  gap: 22px; align-items: start; margin: 6px 0 4px;
}
.anlage-bild { margin: 0; }
.anlage-bild img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--rand); border-radius: 5px;
}
.anlage-bild figcaption { margin-top: 6px; }
.anlage-text .tabelle.daten th { width: 150px; }
@media (max-width: 760px) {
  .anlage { grid-template-columns: 1fr; }
}

/* Liegenschaftskarte mit Markierung der beiden Grundstuecke */
.flurkarte { margin: 4px 0 26px; }
.flurkarte-bild {
  position: relative; line-height: 0;
  border: 1px solid var(--rand); border-radius: 5px; overflow: hidden;
  background: #fff;
}
.flurkarte-bild img { width: 100%; height: auto; display: block; }
.flurkarte-bild svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.flurkarte figcaption {
  display: flex; flex-direction: column; gap: 5px;
  margin-top: 10px; font-size: 13.5px; line-height: 1.45;
}
.kartenlegende { display: flex; align-items: baseline; gap: 8px; }
/* NICHT ".marke" nennen - so heisst bereits der Titel-Link in der Kopfzeile,
   der dadurch einen elliptischen Rahmen bekommen hat. */
.legendenpunkt {
  flex: 0 0 auto; width: 13px; height: 13px; border-radius: 50%;
  border: 2.5px solid; transform: translateY(2px);
}
.legendenpunkt-vorder { border-color: #2c6382; background: rgba(44, 99, 130, .16); }
.legendenpunkt-hinter { border-color: #b4531f; background: rgba(180, 83, 31, .16); }
/* das jeweils nicht betroffene Grundstueck tritt zurueck */
.legende-blass { opacity: .5; }

/* Trennt Vorderhaus und Hintergrundstueck in den Registerlisten */
.gruppentitel {
  font-size: 13px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: var(--akzent);
  margin: 22px 0 2px; padding-bottom: 4px;
  border-bottom: 2px solid var(--rand);
}
.gruppentitel:first-of-type { margin-top: 10px; }

.brotkrume { font-size: 13px; color: var(--tinte-leise); margin: 0 0 10px; }
.mini-gewerbe { background: #e5eef3; color: #2c6382; }

/* --- Tabellen --- */
.tabelle { width: 100%; border-collapse: collapse; margin: 6px 0 4px; }
.tabelle th {
  text-align: left; font-size: 12px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--tinte-leise); font-weight: 600;
  padding: 8px 10px; border-bottom: 1px solid var(--rand);
}
.tabelle td { padding: 9px 10px; border-bottom: 1px solid #eef1f3; vertical-align: top; }
.tabelle tr:last-child td { border-bottom: none; }
.rechts { text-align: right; }
.leise { color: var(--tinte-leise); }
.klein { font-size: 13px; }
.leer { color: var(--tinte-leise); padding: 22px 0; }
.inaktiv { opacity: .5; }

.mini {
  font-size: 11px; background: #eef1f3; color: var(--tinte-leise);
  padding: 1px 6px; border-radius: 8px; margin-left: 5px;
}

/* --- Fortschritt --- */
.fortschritt-liste { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.fortschritt-zeile { display: grid; grid-template-columns: 190px 1fr 54px; gap: 12px; align-items: center; }
.fortschritt-name { font-size: 14px; }
.balken { background: #eef1f3; border-radius: 3px; height: 9px; overflow: hidden; }
.balken-fuellung { display: block; height: 100%; background: var(--gut); }
.fortschritt-zahl { font-size: 13px; color: var(--tinte-leise); text-align: right; }

/* Vollstaendigkeit: Blockdarstellung statt Tabelle. In einer schmalen
   dritten Spalte brachen die Fundstellen staendig um - hier steht jeder
   Position die volle Breite zur Verfuegung. */
.anforderungen { margin: 6px 0 4px; }
.anforderung { padding: 11px 0 12px; border-bottom: 1px solid #eef1f3; }
.anforderung:last-child { border-bottom: none; }

.anforderung-kopf { display: flex; align-items: baseline; gap: 9px; }
.anforderung-titel { font-weight: 600; }
.anforderung-status { margin-left: auto; white-space: nowrap; }
.anforderung-hinweis {
  margin: 3px 0 0 18px; font-size: 13px; color: var(--tinte-leise);
  line-height: 1.4; max-width: 76ch;
}

/* Fundstellen: bei genug Platz zweispaltig, damit lange Listen nicht
   endlos nach unten laufen. */
.trefferliste {
  list-style: none; margin: 7px 0 0 18px; padding: 0;
  columns: 2; column-gap: 26px; font-size: 13.5px;
}
.trefferliste li { margin: 0 0 3px; break-inside: avoid; }
.trefferliste li::before { content: "→ "; color: var(--tinte-leise); }
@media (max-width: 900px) {
  .trefferliste { columns: 1; }
}

.status-spalte { width: 26px; }
.punkt { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; }
.punkt-gut { background: var(--gut); }
.punkt-offen { background: var(--offen); }
/* bewusst nicht geliefert - weder erledigt noch Luecke */
.punkt-entfaellt { background: transparent; border: 1.5px solid var(--rand); }
/* angefordert, aber noch unterwegs */
.punkt-beschaffung { background: #d9a521; }
.beschaffung-text { color: #8a6410; }
.anforderung:has(.punkt-entfaellt) { opacity: .72; }
.offen-text { color: var(--offen); }

/* --- Formulare --- */
.formular { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; margin-top: 10px; }
.formular label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--tinte-leise); }
input, button {
  font: inherit; padding: 7px 10px; border: 1px solid var(--rand);
  border-radius: 3px; background: #fff; color: var(--tinte);
}
button { cursor: pointer; }
.formular button { background: var(--akzent); color: #fff; border-color: var(--akzent); padding: 8px 18px; }
.knopf-an { background: #e3f0e9; border-color: #b9d8c8; color: var(--gut); font-size: 13px; padding: 4px 10px; }
.knopf-aus { background: var(--flaeche); font-size: 13px; padding: 4px 10px; }
.knopf-link { display: inline-block; margin-top: 6px; font-size: 14px; }
.link-feld { font-size: 12px; background: var(--flaeche); padding: 2px 6px; border-radius: 3px; word-break: break-all; }

.hinweis {
  background: #eef5f9; border: 1px solid #c8dceb; color: #1d4b66;
  padding: 10px 14px; border-radius: 4px; margin-bottom: 20px; font-size: 14px;
}

/* --- Fuss --- */
/* Dasselbe Raster wie der Rumpf, damit der Hinweis unter dem Inhaltsfeld
   steht und nicht unter der ganzen Seite - sonst zoege ihn die
   Seitenleiste nach links aus der Mitte. */
.fuss {
  max-width: 1180px; margin: 0 auto; padding: 6px 24px 34px;
  display: grid; grid-template-columns: 232px 1fr; gap: 30px;
  color: var(--tinte-leise); font-size: 12.5px;
}
.fusstext { grid-column: 2; margin: 0; text-align: center; }
@media (max-width: 820px) {
  .fuss { grid-template-columns: 1fr; }
  .fusstext { grid-column: 1; }
}

/* --- Anmeldeseite --- */
/* Anmeldeseite: dasselbe Bild, aber abgedunkelt - hier steht das Objekt
   im Vordergrund, die Karte muss trotzdem sicher lesbar bleiben. */
.anmeldeseite {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; margin: 0;
  background-color: var(--tinte);
  background-image:
    linear-gradient(180deg, rgba(16, 24, 33, .50) 0%, rgba(16, 24, 33, .76) 100%),
    url("/static/hintergrund.jpg");
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;
}
.anmeldekarte {
  position: relative; z-index: 1;
  background: #fff; padding: 34px 38px; border-radius: 6px;
  width: 100%; max-width: 366px; display: flex; flex-direction: column; gap: 8px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
}
.anmeldekarte h1 { font-size: 20px; margin: 0; }
.unterzeile { color: var(--tinte-leise); margin: 0 0 14px; font-size: 14px; }
.anmeldekarte label { font-size: 13px; color: var(--tinte-leise); }
.anmeldekarte button { background: var(--akzent); color: #fff; border-color: var(--akzent); margin-top: 12px; padding: 9px; }
.fehler { color: var(--offen); font-size: 14px; margin: 0; }
.fussnote { font-size: 12.5px; color: var(--tinte-leise); margin: 16px 0 0; line-height: 1.45; }


/* Passwort einer Bank direkt in der Zeile setzen. */
.passwortzeile { display: flex; gap: 4px; margin-top: 5px; }
.passwortzeile input {
  flex: 1 1 auto; min-width: 0; padding: 3px 6px; font-size: .74rem;
  border: 1px solid var(--rand); border-radius: 3px;
}
.passwortzeile button {
  padding: 3px 8px; font-size: .7rem; cursor: pointer;
  border: 1px solid var(--rand); border-radius: 3px; background: var(--flaeche);
}

/* Zwischenüberschrift innerhalb eines Rechenwegs. */
.zwischenueberschrift {
  margin: 22px 0 6px; font-size: .82rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--tinte-leise);
}
/* Begründung unter einer Zeilenbezeichnung - erklärt, warum ein Posten
   angesetzt oder abgezogen wird. */
.erlaeuterung {
  display: block; margin-top: 3px; font-weight: 400; font-size: 12.5px;
  text-transform: none; letter-spacing: 0;
  line-height: 1.45; color: var(--tinte-leise); max-width: 46em;
}

/* Wortgruppe, die nicht auseinandergerissen werden darf - Umbruch nur an
   den Trennzeichen zwischen den Gruppen. */
.zusammen { white-space: nowrap; }

/* Quellenangabe unter den Kennzahlen - gehoert zu den Zahlen, soll aber
   den Einstiegstext nicht belasten. */
.quellenzeile {
  margin: 10px 0 0; font-size: 12.5px; color: var(--tinte-leise);
}

/* Einstiegstext ueber die volle Breite des Inhaltsfelds. */
.fuehrungstext.breit { max-width: none; }

/* Hinweis passend dazu, ob das Bilderband laeuft oder ruht. */
.wenn-ruhig { display: none; }
@media (prefers-reduced-motion: reduce) {
  .wenn-bewegt { display: none; }
  .wenn-ruhig { display: inline; }
}

/* Bilder am Kopf der Lage-Seite: zwei nebeneinander, auf schmalen
   Bildschirmen untereinander. */
.lagebilder {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; margin: 4px 0 26px;
}
.lagebilder .galerie-bild { margin: 0; }

/* Bedarfsskala des Energieausweises - breit, aber nicht formatfuellend. */
.energiebild { aspect-ratio: auto; display: block; margin: 0 0 22px; }
.energiebild img { height: auto; }
/* Merkposten, der eine Chance beschreibt statt einer Luecke. */
.merkposten-gut { border-left-color: var(--gut); background: #f2f8f5; }

/* Ansicht des Grundstuecks ueber seinen Stammdaten. */
.stammdatenbild { aspect-ratio: 16 / 8; margin: 2px 0 16px; }

/* --- Beteiligungsstruktur --- */
/* Text statt Bild: durchsuchbar, druckbar, skaliert mit der Schriftgroesse. */
.organigramm { margin: 6px 0 20px; max-width: 640px; }
.orgstufe { display: flex; }
.orgkarte {
  flex: 1; background: var(--karte); border: 1px solid var(--rand);
  border-left: 4px solid var(--akzent); border-radius: 4px; padding: 14px 18px;
}
.orgkarte-person { border-left-color: var(--tinte-leise); }
.orgkarte-holding { border-left-color: var(--gut); }
.orgkarte-tochter { border-left-color: var(--akzent); }
.orgrolle {
  font-size: .68rem; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--tinte-leise);
}
.orgname { font-size: 1.02rem; font-weight: 600; margin: 3px 0 6px; }
.orgzeile { font-size: 13px; color: var(--tinte-leise); }
.orgdaten {
  display: grid; grid-template-columns: 8.6rem 1fr; gap: 3px 12px;
  margin: 0; font-size: 13px;
}
.orgdaten dt { color: var(--tinte-leise); }
.orgdaten dd { margin: 0; }
/* Verbindung zwischen zwei Stufen samt Beschriftung der Beziehung. */
.orgpfeil {
  position: relative; text-align: center; padding: 7px 0;
  font-size: 12px; color: var(--tinte-leise);
}
.orgpfeil::before {
  content: ""; position: absolute; left: 22px; top: 0; bottom: 0;
  border-left: 2px solid var(--rand);
}
.orgpfeil span { display: inline-block; padding-left: 34px; }
@media (max-width: 560px) {
  .orgdaten { grid-template-columns: 1fr; gap: 0 0; }
  .orgdaten dt { margin-top: 6px; }
}

/* Die beiden Grundstuecksansichten etwas groesser als die Lagebilder. */
.stammdatenbilder { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* Portrait neben dem Kurzprofil; auf schmalen Bildschirmen untereinander. */
.personenkopf {
  display: grid; grid-template-columns: 250px 1fr; gap: 22px;
  align-items: start; margin: 2px 0 24px;
}
.personenkopf .portrait { margin: 0; }
.personentext p { margin: 0 0 11px; color: var(--tinte-leise); }
.personentext p:last-child { margin-bottom: 0; }
@media (max-width: 700px) {
  .personenkopf { grid-template-columns: 1fr; }
}