/* avsec-streifen.css · v1870 · Die Marktbewertung als Streifen - fuer die Haupt-App UND das QuickBoarding (eigenes Dokument, erbt kein style.css). Das Ergebnis-Modul avm-section.js bleibt unberuehrt; hier nur CSS mit ID-Spezifitaet. */ /* ===== v1868a · Marktbewertung als Streifen (Marcel: „schmaleren Streifen … ein bisschen mehr Platz"). Der Block kommt aus avm-section.js (nicht anfassen) - gemessen: .mc.dp = Kopf 46 + Body 142 + Fuss 57 + Legal 21 = 270 px. Hier nur CSS mit ID-Spezifitaet: Kopf, Kennzahlen und Knopf in EINER Zeile. ===== */ #avsec .av-cards.single .mc.dp { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto !important; grid-template-areas: "head body foot" "legal legal legal" !important; align-items: center !important; column-gap: 12px !important; } #avsec .av-cards.single .mc.dp .mhead.dphead { grid-area: head; height: auto !important; min-height: 0 !important; padding: 6px 10px !important; gap: 8px !important; } #avsec .av-cards.single .mc.dp .mperf { display: none !important; } #avsec .av-cards.single .mc.dp .mbody { grid-area: body; display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 2px 14px !important; padding: 4px 0 !important; } #avsec .av-cards.single .mc.dp .mbody .mw { font-size: 20px !important; line-height: 1.1 !important; margin: 0 !important; } #avsec .av-cards.single .mc.dp .mbody .avs-sub, #avsec .av-cards.single .mc.dp .mbody .miete { margin: 0 !important; min-height: 0 !important; } #avsec .av-cards.single .mc.dp .mbody .row3 { display: flex !important; gap: 12px !important; margin: 0 !important; } #avsec .av-cards.single .mc.dp .mbody .row3 .f3 { display: flex !important; align-items: baseline !important; gap: 5px !important; padding: 0 !important; border: 0 !important; background: none !important; width: auto !important; flex: 0 0 auto !important; } #avsec .av-cards.single .mc.dp .mbody .spacer { display: none !important; } #avsec .av-cards.single .mc.dp .mfoot { grid-area: foot; padding: 6px 10px !important; } #avsec .av-cards.single .mc.dp .mfoot .av-btn.full { width: auto !important; padding: 6px 10px !important; font-size: 11px !important; } #avsec .av-cards.single .mc.dp .legal { grid-area: legal; padding: 0 10px 4px !important; font-size: 9px !important; line-height: 1.2 !important; } @media (max-width: 900px) { #avsec .av-cards.single .mc.dp { grid-template-columns: 1fr !important; grid-template-areas: "head" "body" "foot" "legal" !important; } } #avsec .av-cards.single .mc.dp .mbody > * { width: auto !important; flex: 0 0 auto !important; text-align: left !important; margin: 0 !important; } #avsec .av-cards.single .mc.dp .mbody .row3 .f3 > * { display: inline !important; } #avsec .av-cards.single .mc.dp .mbody { flex-direction: row !important; } /* ===== v1869 · Streifen gegliedert (Marcel: „Markteinschätzung ist einfach nur so ein bisschen Gold … den Anfang vernünftig darstellen und besser darauf skalieren"). Kopfblock links fest (Obsidian, Logo und Zeile), dann Spalten mit Beschriftung über dem Wert, rechts der Knopf. Nur CSS, avm-section.js bleibt unberührt. ===== */ #avsec .av-cards.single .mc.dp { column-gap: 0 !important; border-left-width: 0 !important; } #avsec .av-cards.single .mc.dp .mhead.dphead { flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; gap: 3px !important; min-width: 168px !important; align-self: stretch !important; padding: 8px 14px !important; background: #0D0D0D !important; border-radius: 11px 0 0 11px !important; } #avsec .av-cards.single .mc.dp .mhead.dphead::after { display: none !important; } #avsec .av-cards.single .mc.dp .mhead.dphead .dplogo { font: 700 15px/1.1 "Space Grotesk", system-ui, sans-serif !important; color: var(--wl-e8cc7a, #E8CC7A) !important; background: none !important; -webkit-text-fill-color: var(--wl-e8cc7a, #E8CC7A) !important; } #avsec .av-cards.single .mc.dp .mhead.dphead .dplogo small, #avsec .av-cards.single .mc.dp .mhead.dphead .dplogo > * { display: block !important; font: 500 8.5px/1.2 "JetBrains Mono", monospace !important; letter-spacing: .12em !important; text-transform: uppercase !important; color: #f3ead0 !important; -webkit-text-fill-color: #f3ead0 !important; opacity: .85 !important; margin-top: 2px !important; } #avsec .av-cards.single .mc.dp .mhead.dphead .avs-cf { margin-top: 4px !important; } #avsec .av-cards.single .mc.dp .mbody { gap: 0 !important; padding: 6px 4px !important; align-items: stretch !important; } #avsec .av-cards.single .mc.dp .mbody > * { display: flex !important; flex-direction: column !important; justify-content: flex-end !important; gap: 3px !important; padding: 2px 14px !important; border-left: 1px solid var(--border-g, #ece2c8) !important; min-height: 0 !important; font: 12.5px/1.2 "JetBrains Mono", monospace !important; color: #2A2727 !important; } #avsec .av-cards.single .mc.dp .mbody > *:first-child { border-left: 0 !important; } #avsec .av-cards.single .mc.dp .mbody > *::before { font: 700 7.5px/1 "Space Grotesk", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #9a8f72; } #avsec .av-cards.single .mc.dp .mbody .mw::before { content: "Marktwert"; } #avsec .av-cards.single .mc.dp .mbody .avs-sub::before { content: "je m² · vs. Kaufpreis"; } #avsec .av-cards.single .mc.dp .mbody .miete::before { content: "Marktmiete"; } #avsec .av-cards.single .mc.dp .mbody .mw { font-size: 22px !important; font-weight: 700 !important; font-family: "Space Grotesk", system-ui, sans-serif !important; } #avsec .av-cards.single .mc.dp .mbody .row3 { flex-direction: row !important; padding: 0 !important; border-left: 0 !important; gap: 0 !important; } #avsec .av-cards.single .mc.dp .mbody .row3::before { display: none !important; } #avsec .av-cards.single .mc.dp .mbody .row3 .f3 { display: flex !important; flex-direction: column !important; gap: 3px !important; padding: 2px 14px !important; border-left: 1px solid var(--border-g, #ece2c8) !important; border-radius: 0 !important; align-items: flex-start !important; } #avsec .av-cards.single .mc.dp .mbody .row3 .f3 > * { display: block !important; } #avsec .av-cards.single .mc.dp .mbody .row3 .f3 .fk { font-size: 7.5px !important; } #avsec .av-cards.single .mc.dp .mbody .row3 .f3 .fv { font-size: 12.5px !important; margin: 0 !important; } #avsec .av-cards.single .mc.dp .mfoot { padding: 6px 14px !important; } #avsec .av-cards.single .mc.dp .legal { padding: 0 14px 5px 182px !important; } @media (max-width: 1100px) { #avsec .av-cards.single .mc.dp .mbody > * { padding: 2px 10px !important; } } @media (max-width: 900px) { #avsec .av-cards.single .mc.dp .mhead.dphead { border-radius: 11px 11px 0 0 !important; min-width: 0 !important; } #avsec .av-cards.single .mc.dp .legal { padding-left: 14px !important; } } #avsec .av-cards.single .mc.dp .mbody .avs-sub, #avsec .av-cards.single .mc.dp .mbody .miete { white-space: nowrap !important; } #avsec .av-cards.single .mc.dp .mbody .miete b { font-size: 13px !important; } #avsec .av-cards.single .mc.dp .mbody .avs-sub > *, #avsec .av-cards.single .mc.dp .mbody .miete > * { display: inline !important; } #avsec .av-cards.single .mc.dp .mbody .mw, #avsec .av-cards.single .mc.dp .mbody .avs-sub, #avsec .av-cards.single .mc.dp .mbody .miete { display: block !important; white-space: nowrap !important; } #avsec .av-cards.single .mc.dp .mbody .mw::before, #avsec .av-cards.single .mc.dp .mbody .avs-sub::before, #avsec .av-cards.single .mc.dp .mbody .miete::before { display: block; margin-bottom: 3px; } /* ===== v1870 · Marcel: Spanne (Unten · Ø · Oben) zum Übernehmen-Knopf, „Karten / Tabelle / min" weg, und die Lampe an den Pre-Flight-Kacheln „richtig schön in Grün". Ergebnisleiste und Karte kommen aus avm-section.js (nicht anfassen) - hier nur CSS: #avsec wird ein Raster, die Leiste wandert rechts neben die Karte, Konsens-Text und Ansichts-Schalter verschwinden. ===== */ #avsec { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; column-gap: 8px !important; } #avsec .av-body { order: 1 !important; padding-right: 0 !important; } #avsec .av-bar { order: 2 !important; border-bottom: 0 !important; background: transparent !important; padding: 0 14px 0 0 !important; flex-wrap: nowrap !important; } #avsec .av-bar .av-kons, #avsec .av-bar .av-vsw { display: none !important; } #avsec .av-bar .av-right { margin-left: 0 !important; flex-direction: column !important; align-items: flex-start !important; gap: 4px !important; } #avsec .av-bar .av-right .lab { font-size: 7.5px !important; letter-spacing: .08em !important; color: #9a8f72 !important; } #avsec.av-min-on .av-body { display: block !important; } @media (max-width: 900px) { #avsec { grid-template-columns: 1fr !important; } #avsec .av-bar { padding: 0 14px 8px !important; } } #avsec .av-bar .av-min, #avsec .av-bar button[data-view] { display: none !important; } /* ===== v1875 · Marcel: „die Spanne unten, durchschnittlich und oben einfach mit in die Karte setzen, nicht direkt daneben … und das direkt übernehmen, indem wir das anklicken." Die Kacheln baut js/avsec-spanne.js nach jedem render(); die Leiste rechts hat damit keinen Inhalt mehr. ===== */ #avsec .av-bar { display: none !important; } #avsec { grid-template-columns: minmax(0, 1fr) !important; } #avsec .mc.dp .avs-spanne { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; margin: 8px 0 4px; } #avsec .mc.dp .avs-spanne .avs-sp-lab { flex: 1 0 100%; font: 600 8px/1 "JetBrains Mono", monospace; letter-spacing: .1em; text-transform: uppercase; color: #9a8f72; } #avsec .mc.dp .avs-sp { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 6px 9px; border: 1px solid #E6E0D3; border-radius: 8px; background: #FFFDF8; cursor: pointer; font-family: inherit; text-align: left; } #avsec .mc.dp .avs-sp small { font: 600 8px/1 "JetBrains Mono", monospace; letter-spacing: .1em; text-transform: uppercase; color: #9a8f72; } #avsec .mc.dp .avs-sp b { font: 700 12.5px/1.1 "Space Grotesk", sans-serif; color: #1A1A18; white-space: nowrap; } #avsec .mc.dp .avs-sp:hover { border-color: var(--wl-b8932f, #b8932f); } #avsec .mc.dp .avs-sp.on { border-color: var(--wl-c9a84c, #C9A84C); box-shadow: inset 0 0 0 1px var(--wl-c9a84c, #C9A84C); background: #fff; } #avsec .mc.dp .avs-sp.on small { color: var(--wl-b8932f, #b8932f); } /* v1875c · Die Sammelregel `.mbody > *` (Z. 33) macht jedes Kind zur SPALTE (column + ::before-Beschriftung); die drei Kacheln standen deshalb untereinander (gemessen: 190 × 174 px, Streifen 234 px hoch). Hier als eigene Spalte mit Beschriftung, die Kacheln darin in einer Reihe. */ #avsec .av-cards.single .mc.dp .mbody .avs-spanne { flex-direction: column !important; justify-content: flex-end !important; gap: 3px !important; } #avsec .av-cards.single .mc.dp .mbody .avs-spanne::before { content: "Spanne · anklicken = übernehmen"; } #avsec .av-cards.single .mc.dp .mbody .avs-spanne .avs-sp-lab { display: none !important; } #avsec .av-cards.single .mc.dp .mbody .avs-spanne .avs-sp-reihe { display: flex !important; flex-direction: row !important; gap: 4px !important; } #avsec .mc.dp .avs-sp { flex: 0 0 auto; padding: 4px 8px; gap: 2px; } #avsec .mc.dp .avs-sp b { font-size: 12px; } /* ===== v1876a · Marcel: „die Karte mit der Markteinschätzung ist viel zu hoch … nicht schön aufgeteilt und formatiert". Gemessen: Handy 345 px (Kopf 66, Kacheln 65, Knopf 56), Desktop 125 px mit versetzten Spalten (flex-wrap). Jetzt ein RASTER mit drei Stufen nach KARTENBREITE (@container, nicht Fenster): ab 1180 px eine Zeile, darunter zwei (Marktwert · Spanne · je m² / Marktmiete · Einordnung · Genauigkeit), unter 700 px gestapelt mit schmalem Kopf. Die Kacheln sind Pillen in einer Zeile; sie übernehmen per Klick, der Knopf „übernehmen" entfällt (Marcel: „das sollte reichen"). ===== */ #avsec .av-cards.single { container-type: inline-size; } #avsec .av-cards.single .mc.dp .mfoot { display: none !important; } #avsec .av-cards.single .mc.dp { grid-template-columns: auto minmax(0, 1fr) !important; grid-template-areas: "head body" "legal legal" !important; } #avsec .mc.dp .avs-sp { flex-direction: row !important; align-items: baseline !important; gap: 5px !important; padding: 3px 9px !important; border-radius: 999px !important; } #avsec .mc.dp .avs-sp b { font-size: 12px !important; } #avsec .mc.dp .avs-sp small { font-size: 7.5px !important; } #avsec .av-cards.single .mc.dp .mbody .avs-spanne::before { content: "Spanne · Klick übernimmt"; } #avsec .av-cards.single .mc.dp .mbody { display: grid !important; grid-template-columns: max-content max-content max-content max-content minmax(0, 1fr) !important; grid-template-areas: "mw sp sub miete row3" !important; align-items: end !important; column-gap: 0 !important; row-gap: 0 !important; } #avsec .av-cards.single .mc.dp .mbody .mw { grid-area: mw; } #avsec .av-cards.single .mc.dp .mbody .avs-spanne { grid-area: sp; } #avsec .av-cards.single .mc.dp .mbody .avs-sub { grid-area: sub; } #avsec .av-cards.single .mc.dp .mbody .miete { grid-area: miete; } #avsec .av-cards.single .mc.dp .mbody .row3 { grid-area: row3; } @container (max-width: 1179px) { #avsec .av-cards.single .mc.dp .mbody { grid-template-columns: max-content max-content minmax(0, 1fr) !important; grid-template-areas: "mw sp sub" "miete row3 row3" !important; row-gap: 6px !important; } #avsec .av-cards.single .mc.dp .mbody .miete { border-left: 0 !important; } } @container (max-width: 699px) { #avsec .av-cards.single .mc.dp { grid-template-columns: 1fr !important; grid-template-areas: "head" "body" "legal" !important; } #avsec .av-cards.single .mc.dp .mhead.dphead { flex-direction: row !important; align-items: center !important; gap: 10px !important; padding: 6px 12px !important; min-height: 0 !important; border-radius: 11px 11px 0 0 !important; } #avsec .av-cards.single .mc.dp .mhead.dphead .dplogo { font-size: 13px !important; } #avsec .av-cards.single .mc.dp .mhead.dphead .dplogo small { display: inline !important; margin-left: 6px !important; } #avsec .av-cards.single .mc.dp .mhead.dphead .avs-cf { margin: 0 0 0 auto !important; } #avsec .av-cards.single .mc.dp .mbody { grid-template-columns: 1fr 1fr !important; grid-template-areas: "mw mw" "sp sp" "sub miete" "row3 row3" !important; row-gap: 4px !important; } #avsec .av-cards.single .mc.dp .mbody > * { border-left: 0 !important; padding: 2px 12px !important; } #avsec .av-cards.single .mc.dp .mbody .miete { white-space: normal !important; } #avsec .av-cards.single .mc.dp .mbody .avs-spanne .avs-sp-reihe { flex-wrap: wrap !important; } #avsec .av-cards.single .mc.dp .legal { padding-left: 12px !important; } } /* v1876b · Handy nachgemessen (390 px): Karte 289 px - die dritte Pille brach um (Spanne 106 px hoch), Marktmiete brach neben je m² zweizeilig um. Jetzt drei gleich breite Kacheln (Beschriftung über dem Betrag) und je m², Marktmiete, Einordnung untereinander in voller Breite. */ @container (max-width: 699px) { #avsec .av-cards.single .mc.dp .mbody { grid-template-areas: "mw mw" "sp sp" "sub sub" "miete miete" "row3 row3" !important; row-gap: 3px !important; } #avsec .av-cards.single .mc.dp .mbody .avs-spanne .avs-sp-reihe { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important; } #avsec .mc.dp .avs-sp { flex-direction: column !important; align-items: center !important; gap: 1px !important; padding: 3px 4px !important; border-radius: 8px !important; } #avsec .mc.dp .avs-sp b { font-size: 11.5px !important; } #avsec .av-cards.single .mc.dp .mbody .miete { white-space: nowrap !important; } } /* v1881c · Tablet nachgemessen (Karte 731 px, Koerper 606): in der Stufe ≤1179 bekommt "je m²" die Restspalte - 69 px fuer "466 €/m² · -74.5%", der Prozentwert ragt aus der Karte. Zwischen 700 und 899 px Kartenbreite: Marktwert · je m² · Marktmiete in einer Zeile, die Spanne darunter, Einordnung/Genauigkeit zuletzt. */ @container (min-width: 700px) and (max-width: 899px) { #avsec .av-cards.single .mc.dp .mbody { grid-template-columns: max-content max-content minmax(0, 1fr) !important; grid-template-areas: "mw sub miete" "sp sp sp" "row3 row3 row3" !important; row-gap: 6px !important; } #avsec .av-cards.single .mc.dp .mbody .miete { border-left: 1px solid var(--border-g, #ece2c8) !important; } #avsec .av-cards.single .mc.dp .mbody .avs-spanne, #avsec .av-cards.single .mc.dp .mbody .row3 { border-left: 0 !important; } #avsec .av-cards.single .mc.dp .mbody .row3 .f3:first-child { border-left: 0 !important; padding-left: 10px !important; } } /* ===== v2490 · Marcel 20.10.2026: „Oft ragen auf der Markteinschätzungskarte die Texte bei Marktmiete ins Feld Einordnung. Das passiert, wenn wir Mieten über 10 € haben." GEMESSEN (beide Dokumente, Kartenbreite per Stil gesetzt, 1300 -> 300 px in 10er-Schritten): nur die EINE-ZEILE-Stufe ab 1180 px ist betroffen. Ihre fünf Spalten sind max-content ×4 + minmax(0,1fr) für Einordnung/Genauigkeit; die beiden .f3 brauchen 231 px. Bei 1230 px Karte bleiben der Restspalte 210 px - und weil `.mbody > *` (Z. 33) ALLEN Kindern justify-content:flex-end gibt, quillt der Überhang nach LINKS über die Marktmiete (1180 px: 57 px). Über 10 € ist die Miete eine Ziffer breiter (+7 px), damit beginnt die Überlappung schon bei 1240 statt 1230. Ursache ist also die Schwelle, nicht die Zahl: die eine Zeile braucht rund 1.250-1.300 px. Darunter gilt jetzt die Zwei-Zeilen-Stufe, und falls es doch einmal eng wird, kürzt die Einordnung rechts (…), statt nach links zu wachsen (`safe flex-end`: bleibt rechtsbündig, solange es passt). ===== */ @container (min-width: 1180px) and (max-width: 1339px) { #avsec .av-cards.single .mc.dp .mbody { grid-template-columns: max-content max-content minmax(0, 1fr) !important; grid-template-areas: "mw sp sub" "miete row3 row3" !important; row-gap: 6px !important; } #avsec .av-cards.single .mc.dp .mbody .miete { border-left: 0 !important; } } #avsec .av-cards.single .mc.dp .mbody .row3 { justify-content: safe flex-end !important; min-width: 0 !important; overflow: hidden !important; } #avsec .av-cards.single .mc.dp .mbody .row3 .f3 { flex: 0 1 auto !important; min-width: 0 !important; } #avsec .av-cards.single .mc.dp .mbody .row3 .f3 .fv { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } /* ===== v2740 · Marcel 22.10.2026: „Einordnung und Genauigkeit steht irgendwie verschoben." GEMESSEN (Westerfeldstr. 140, Haupt-App und Quick-Check-Dokument, Kartenbreite 1400 -> 345 px): zwei Ursachen, beide hier in dieser Datei. (1) v2490 gab .row3 `justify-content: safe flex-end` - gedacht gegen den Ueberhang nach links, wirkte aber in JEDER Stufe: Einordnung/Genauigkeit standen am rechten Rand statt unter der Spaltenteilung (Karte 1264 px: Einordnung bei x=839 statt 240 unter der Spanne; Handy 345 px: x=88 statt 4, der einzige Block rechtsbuendig). (2) v1876a setzte das Raster auf `align-items: end` und jede Spalte auf `justify-content: flex-end` - jede Beschriftung sitzt so hoch, wie ihr Wert gross ist: Marktwert / Spanne / je m² standen bei 8 / 11 / 16 px, Marktmiete / Einordnung bei 53 / 54 px. Jetzt: Zellen gestreckt, Beschriftung oben (eine Oberkante je Zeile), Einordnung/Genauigkeit links in ihrer Zelle. Gegen Ueberlauf bleibt v2490: .f3 schrumpft, .fv kuerzt mit "…", .row3 overflow:hidden - nach links kann bei flex-start nichts mehr quellen. Die Abschlag-Zeile (v2672, .legal) liegt in eigener Rasterflaeche und war nicht beteiligt. ===== */ #avsec .av-cards.single .mc.dp .mbody { align-items: stretch !important; } #avsec .av-cards.single .mc.dp .mbody > *, #avsec .av-cards.single .mc.dp .mbody .avs-spanne { justify-content: flex-start !important; } #avsec .av-cards.single .mc.dp .mbody .row3 { justify-content: flex-start !important; align-items: stretch !important; } #avsec .av-cards.single .mc.dp .mbody .row3 .f3 { justify-content: flex-start !important; } /* ===== v2780 · Marcel 22.10.2026 (Bild Dateien/marktkarte.png): „Die Markteinschätzungskarte sieht auf dem Desktop jetzt nicht mehr richtig aus … eine Schwelle finden, wann wir umschalten. Einordnung und Genauigkeit können ja neben die −18,7 %." GEMESSEN (Bismarckstr. 27 = sein Bild, Westerfeldstr. 140; Breite der .av-cards.single per Stil gesetzt): die Reihe Kopf | Marktwert | Spanne | je m² | Einordnung | Genauigkeit braucht 1.036 px (Westerfeld) / 1.040 px (Bismarck), mit siebenstelligen Beträgen in Marktwert UND allen drei Spannen-Knöpfen 1.078 px, mit „Deutlich unter Markt" 1.085 px. SCHWELLE deshalb 1.100 px KARTENbreite (@container, nicht Fenster - die Seitenleiste nimmt 380 px). Darunter gilt die Kartenfassung v2760 (css/avsec-karte-neu.css, seit v2780 Standard) - ab 940 px erst die Zwischenstufe v2780a. Ab 1.100 px: Einordnung/Genauigkeit in Zeile 1 rechts neben „je m² · vs. Kaufpreis", Zeile 2 nur die Marktmiete unter dem Marktwert - sie spannt über alle Spalten, sonst macht ihre Breite die Marktwert-Spalte breit (gemessen 236 statt 124 px). Ohne Marktmiete (avm-section.js schreibt dann ein leeres .miete) fällt die Zelle weg und mit ihr die Zeile: keine Überschrift ohne Wert, Karte eine Zeile flach. Ab 1.340 px bleibt die Ein-Zeilen-Stufe von v1876a (Marktmiete in Zeile 1). `html ` vorn hebt die Spezifität über die gleichlautenden Stufen v1876a/v2490 - nicht auf Reihenfolge bauen. */ @container (min-width: 1100px) and (max-width: 1339px) { html #avsec .av-cards.single .mc.dp .mbody { grid-template-columns: max-content max-content max-content minmax(0, 1fr) !important; grid-template-areas: "mw sp sub row3" "miete miete miete miete" !important; row-gap: 4px !important; } html #avsec .av-cards.single .mc.dp .mbody:has(> .miete:empty) { grid-template-areas: "mw sp sub row3" !important; row-gap: 0 !important; } html #avsec .av-cards.single .mc.dp .mbody .miete { border-left: 0 !important; } } /* v2780a · ZWISCHENSTUFE 940-1.099 px (1.440er Fenster mit Seitenleiste = Karte 999 px). Die volle Reihe passt dort nicht, die Kartenfassung waere 250-265 px hoch statt 116. Gemessen passt die Reihe, wenn „je m² · vs. Kaufpreis" unter den Marktwert rueckt (wie in der Kartenfassung): Bismarckstr. 27 ohne Kuerzung bis unter 900 px, mit siebenstelligen Betraegen und „Deutlich unter Markt" erste Kuerzung bei 914 px. Schwelle 940 px. v2780b: die Marktmiete steht hier unter Einordnung/Genauigkeit (unter dem Marktwert steht schon je m²) - gemessen Westerfeldstr. 140 bei 999 px: Karte 143 -> 112 px hoch (eigene dritte Zeile entfaellt); sie darf dort umbrechen, falls eine fuenfstellige Miete die Spalte uebersteigt. */ @container (min-width: 940px) and (max-width: 1099px) { html #avsec .av-cards.single .mc.dp .mbody { grid-template-columns: max-content max-content minmax(0, 1fr) !important; grid-template-areas: "mw sp row3" "sub sp miete" !important; row-gap: 2px !important; } html #avsec .av-cards.single .mc.dp .mbody:has(> .miete:empty) { grid-template-areas: "mw sp row3" "sub sp row3" !important; } html #avsec .av-cards.single .mc.dp .mbody .avs-sub, html #avsec .av-cards.single .mc.dp .mbody .miete { border-left: 0 !important; } html #avsec .av-cards.single .mc.dp .mbody .miete { white-space: normal !important; } } @container (min-width: 940px) { html #avsec .av-cards.single .mc.dp .mbody > .miete:empty { display: none !important; } }