/* Der Makler „Lage, Lage, Lage“ (A.0.94.0) — alle Tafeln des Maklers als Exposé der Maklerei (tafeln/makler-seiten.js,
   pachtvogt.js): Kopf in Marine mit goldener Kante wie das Firmenschild, Papier statt Holz. Das Foto trägt oben links das Band
   „Zu vermieten“ (blau) bzw. „Zu verkaufen“ (orange) — dieselben Farben wie die Spaltenköpfe an der Wand —, Weggeschnapptes
   einen roten Stempel. Maklerdeutsch in PT Serif, „Im Klartext“ in Schreibmaschine: die Schönfärberei und die Wahrheit
   sehen verschieden aus. */

.tafel.makler-tafel {
  --m-marine: #1f3a68; --m-marine2: #142a4e; --m-gold: #e2a72e; --m-papier: #fbfaf6; --m-grau: #eef0f4;
  --m-text: #1d2433; --m-leise: #5a6476; --m-linie: #d9dde6; --m-miete: #3a7cc2; --m-kauf: #d0621c; --m-stempel: #c0262d;
  --m-gut: #1f7a45;
  background: var(--m-papier); color: var(--m-text); border: 1px solid #7f8aa3; border-radius: .55em;
}
.makler-tafel .tafel-kopf { background: var(--m-marine); color: #fff; border-bottom: .22em solid var(--m-gold); }
.makler-tafel .tafel-kopf h2 { font-family: var(--zier); font-weight: 600; letter-spacing: .01em; }
.makler-tafel .tafel-zu { color: #fff; background: transparent; border-color: rgba(255, 255, 255, .45); box-shadow: none; }
.makler-tafel .tafel-zu:hover, .makler-tafel .tafel-zu:focus-visible { background: var(--m-gold); color: var(--m-marine2); }
.makler-tafel .tafel-inhalt { display: flex; flex-direction: column; min-height: 0; }
.makler-tafel .tafel-fuss { background: var(--m-grau); border-top: 1px solid var(--m-linie); }
.makler-tafel .hinweis { background: var(--m-grau); border-left-color: var(--m-marine); color: var(--m-text); }
.makler-tafel .wahl-zeile, .makler-tafel .zeile { border-bottom-color: var(--m-linie); }
.makler-tafel .liste th { color: var(--m-marine); }
.mk-seite { min-height: 0; overflow: auto; overscroll-behavior: contain; }

/* Das Exposé: Foto links, Eckdaten rechts, die Beschreibung darunter über die ganze Breite */
.mk-expose { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: .5em 1.1em; align-items: start; }
.mk-foto { position: relative; margin: 0; border-radius: .35em; overflow: hidden; background: var(--m-grau); aspect-ratio: 16 / 10;
  box-shadow: 0 .1em .35em rgba(20, 42, 78, .25); }
.mk-foto > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-foto figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4em .7em .45em; color: #fff; font-weight: 800; font-size: .92em;
  background: linear-gradient(transparent, rgba(12, 22, 40, .78)); text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.mk-band { position: absolute; left: 0; top: .7em; padding: .22em .75em .22em .6em; color: #fff; font: 700 .82em/1.2 var(--zier);
  background: var(--m-miete); border-radius: 0 .3em .3em 0; box-shadow: 0 .1em .25em rgba(0, 0, 0, .25); }
.kauf > .mk-band, .kauf .mk-band { background: var(--m-kauf); }
.mk-stempel { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%) rotate(-14deg); padding: .1em .45em; white-space: nowrap;
  font: 700 1.6em/1.1 var(--zier); color: var(--m-stempel); border: .14em solid var(--m-stempel); border-radius: .2em;
  background: rgba(255, 255, 255, .78); letter-spacing: .04em; }
.mk-plan { position: absolute; right: .5em; bottom: 2.3em; width: 23%; aspect-ratio: 1; background: #fff; border: .18em solid #fff;
  border-radius: .25em; box-shadow: 0 .1em .4em rgba(0, 0, 0, .35); overflow: hidden; }
.mk-plan img { width: 100%; height: 100%; object-fit: contain; display: block; }

.mk-kopfdaten { min-width: 0; }
.makler-tafel .mk-titel { margin: 0 0 .35em; font: italic 700 1.32em/1.2 'PT Serif', Georgia, serif; color: var(--m-marine); letter-spacing: 0; }
.mk-kopfdaten .geb-titel { margin: 0 0 .3em; color: var(--m-leise); font-weight: 700; font-size: .95em; }
.mk-spieltext { margin: 0 0 .4em; font-size: .92em; color: var(--m-text); }
.mk-eck { margin: .35em 0 .4em; }
.mk-eck-zeile { display: flex; justify-content: space-between; gap: .8em; padding: .28em 0; border-bottom: 1px solid var(--m-linie); }
.mk-eck-zeile dt { color: var(--m-leise); font-weight: 600; }
.mk-eck-zeile dd { margin: 0; text-align: right; font-weight: 700; }
.mk-eck-zeile dd small { font-weight: 600; color: var(--m-leise); }
.mk-eck-zeile.warn dd { color: #9a3b12; }
.mk-fuer { margin: .3em 0 0; font-weight: 700; color: var(--m-gut); font-size: .92em; }
/* A.0.110.0 (Audit 07.10., M9): was ein Kauf nach Maß von deiner gemieteten Fläche übernimmt — in der Farbe der Warnzeilen */
.mk-uebernahme { margin: .3em 0 0; font-weight: 700; color: #9a3b12; font-size: .92em; }

.mk-text { grid-column: 1 / -1; margin-top: .2em; padding-top: .55em; border-top: 2px solid var(--m-gold); }
.mk-text h4 { margin: 0 0 .25em; font: 700 .85em var(--zier); color: var(--m-marine); }
.mk-text > p:first-of-type { margin: 0; font: 1.02em/1.6 'PT Serif', Georgia, serif; max-width: 70ch; }
.mk-klartext { margin: .55em 0 0; padding: .45em .7em; max-width: 72ch; font: .9em/1.45 'Courier Prime', 'Courier New', monospace;
  background: #f3f1e8; border-left: .25em solid #b9b29a; color: #2e2b22; }
.mk-klartext b { font-weight: 700; }
.mk-vergleich { margin: .7em 0 .2em; color: var(--m-leise); font-weight: 600; }
.mk-vergleich .knopf { margin-left: .3em; }
.mk-zu-spaet { margin: .7em 0 0; padding: .5em .7em; border-radius: .3em; background: #fbe9e7; color: #8c1d1d; font-weight: 700; }
.makler-tafel .summe-zeile small { color: var(--m-leise); font-weight: 600; }

/* Kennzeichen */
.mk-marken { display: flex; flex-wrap: wrap; gap: .3em; }
.mk-kopfdaten .mk-marken { margin-bottom: .2em; }
.mk-marke { font-style: normal; font-weight: 800; font-size: .74em; padding: .14em .5em; border-radius: 999px; background: #e7ebf3; color: var(--m-marine); white-space: nowrap; }
.mk-marke.passt { background: #dff3e6; color: #17603a; }
.mk-marke.schnaeppchen { background: #fff0c9; color: #7a5300; }
.mk-marke.frei { background: #dcf1f4; color: #135a66; }
.mk-marke.bindung { background: #ecebf7; color: #3e3a7a; }
.mk-marke.neu { background: var(--m-marine); color: #fff; }
.mk-marke.bald { background: #fff; color: #a3261d; box-shadow: inset 0 0 0 1.5px #d56b63; }
.mk-marke.immer { background: rgba(255, 255, 255, .92); color: var(--m-marine); }

/* Liste aller Angebote */
.mk-lead { margin: 0 0 .5em; color: var(--m-leise); font-weight: 600; max-width: 75ch; }
.mk-sorten { display: flex; flex-wrap: wrap; gap: .35em; margin: 0 0 .7em; }
.makler-tafel .knopf.mk-sorte, .makler-tafel .knopf.mk-stufe { padding: .25em .75em; border-radius: 999px; font-size: .86em; font-weight: 700;
  background: #fff; color: var(--m-marine); border: 1px solid #b7c0d2; box-shadow: none; }
.makler-tafel .knopf.mk-sorte.an, .makler-tafel .knopf.mk-stufe.an { background: var(--m-marine); color: #fff; border-color: var(--m-marine); }
.mk-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5em, 1fr)); gap: .75em; }
.mk-karten.klein { grid-template-columns: repeat(auto-fill, minmax(11em, 1fr)); }
.mk-karte { display: flex; flex-direction: column; padding: 0; text-align: left; cursor: pointer; overflow: hidden; border-radius: .4em;
  background: #fff; border: 1px solid var(--m-linie); color: var(--m-text); font: inherit; box-shadow: 0 .08em .25em rgba(20, 42, 78, .12); }
.mk-karte:hover, .mk-karte:focus-visible { border-color: var(--m-gold); outline: 2px solid var(--m-gold); outline-offset: 0; }
.mk-karte-foto { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--m-grau); }
.mk-karte-foto > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-karte-foto .mk-band { top: .5em; font-size: .72em; }
.mk-karte-foto .mk-marken { position: absolute; right: .4em; bottom: .4em; justify-content: flex-end; max-width: 80%; }
.mk-karte-foto .mk-stempel { font-size: 1.15em; }
.mk-karte-text { display: flex; flex-direction: column; gap: .05em; padding: .45em .6em .55em; }
.mk-karte-text > b { font-size: .98em; line-height: 1.2; }
.mk-karte-text .mk-qm { color: var(--m-leise); font-weight: 700; font-size: .85em; }
.mk-karte-text .mk-preis { font: 700 1.12em/1.2 var(--zier); color: var(--m-miete); }
.mk-karte.kauf .mk-preis { color: var(--m-kauf); }
.mk-karte-text small { color: var(--m-leise); font-weight: 600; font-size: .78em; }
.mk-karte.nachmass { border-style: dashed; border-color: #9aa6bd; }
.mk-karte.weg { cursor: pointer; opacity: .85; }
.mk-karte.weg .mk-karte-foto > img { filter: grayscale(.85) brightness(1.05); }
.mk-karte.weg .mk-preis { color: var(--m-leise); text-decoration: line-through; }
.mk-zwischen { margin: 1em 0 .45em; font: 700 .9em var(--zier); color: var(--m-leise); }

/* Räume: alle Größen nebeneinander */
.mk-groessen { width: 100%; border-collapse: collapse; margin: .8em 0 .3em; font-size: .95em; table-layout: fixed; }
.mk-groessen thead th:first-child, .mk-groessen tbody th { width: 34%; }
.mk-groessen th, .mk-groessen td { padding: .3em .5em; border-bottom: 1px solid var(--m-linie); text-align: right; }
.mk-groessen tbody th { text-align: left; color: var(--m-leise); font-weight: 600; }
.mk-groessen thead th { border-bottom: 2px solid var(--m-marine); }
.mk-groessen td.an { background: #fdf3da; font-weight: 800; }
.mk-arten { grid-template-columns: repeat(auto-fill, minmax(10.5em, 1fr)); }
.makler-tafel .knopf.arten-knopf { padding: 0 0 .45em; overflow: hidden; background: #fff; border: 1px solid var(--m-linie); color: var(--m-text); }
.makler-tafel .knopf.arten-knopf:hover { border-color: var(--m-gold); }
.mk-arten-foto { display: block; width: 100%; aspect-ratio: 16 / 10; background: var(--m-grau); margin-bottom: .3em; }
.mk-arten-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.makler-tafel .arten-knopf small { color: var(--m-leise); padding: 0 .3em; text-align: center; }

/* Der Stempel auf dem Aushang an der Wand (raeume/aushang.js) */
.expose-marke.weg { background: #fff; color: #c0262d; box-shadow: inset 0 0 0 .1cqw #c0262d; }

@media (max-width: 760px) {
  .mk-expose { grid-template-columns: minmax(0, 1fr); }
  .mk-foto { aspect-ratio: 16 / 7; }
}
@media (max-width: 760px), (max-height: 520px) {
  .makler-tafel .mk-titel { font-size: 1.12em; }
  .mk-karten { grid-template-columns: repeat(auto-fill, minmax(11em, 1fr)); }
}
/* Handy quer: Foto und Eckdaten bleiben nebeneinander, das Foto flacher */
@media (max-height: 520px) and (min-width: 761px) {
  .mk-expose { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: .4em .8em; }
  .mk-foto { aspect-ratio: 4 / 3; }
  .mk-text > p:first-of-type { font-size: .95em; line-height: 1.5; }
}
@media (prefers-reduced-motion: reduce) { .mk-karte { transition: none; } }