/* 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; } }