/* ---------- Immo Guy: gemeinsame Bausteine (Version 1510, Vorrat 881 = Teil (c) von 861; Zustaende V1533, Vorrat 894) ---------- WARUM: Der Nutzer will ueberall dieselben Kacheln, Zeilen, Knoepfe, Karten, Reiter, Dialoge und Formularfelder ("UEBERALL auf einen standart", 24.10.2026). Runde 203 hat den Bestand fotografiert und gezaehlt (73 Knoepfe, 44 Karten, 42 Zeilen, 31 Reiter, 21 Felder, 12 Kacheln auf 64 Seiten) und je Art einen Standard vorgeschlagen; der Nutzer hat alle acht so genommen und diese Datei dazu (Vorrat 861 "Entscheidungen"). Die Werte stammen aus dem Mietkonto (rent-vertrag-detail.html) bzw. von der Vergleichsseite runde-203-optik-bestand - nichts davon ist neu erfunden; wo diese Datei etwas ergaenzen musste (Zustaende, Dunkelmodus, Warnkasten), steht es beim Baustein. WIE: Diese Datei steht in jeder Seite mit responsive.css direkt DAHINTER (). Sie aendert von sich aus NICHTS an einer Seite: - jede Regel beginnt mit einer Klasse mit dem Vorsatz igb- (keine Elementselektoren, kein *, kein :root, keine vorhandene Variable wird ueberschrieben). Elemente stehen nur NACH einer igb-Klasse ("igb-feld input"). - Vorsatz igb- ("Immo Guy Baustein"): ig- ist belegt (.ig-sym in rent-kalender.html, iguy- in components.js und auf vielen Seiten); igb- kam am 24.10.2026 in keiner HTML-, JS- oder CSS-Datei des Frontends vor (grep "igb-"). - Farben nur ueber die Variablen der Seiten (:root jeder Seite; dunkel ist der Grundwert, hell steht unter :root[data-theme="light"]), mit dem hellen Wert als Rueckfall, falls eine Seite die Variable nicht kennt. Umgestellt wird Seite fuer Seite in den Buendeln 882-888 (je eine eigene Sitzung): Klasse tauschen, die eigene Regel der Seite LOESCHEN (nicht ueberschreiben). Vorlage mit jedem Baustein, jedem Zustand und dem HTML-Schnipsel: Musterseite C:\Projekte\Immo Guy\Praesentation-Fotos\runde-204-optik-grundlage\muster.html (ausserhalb des Repos); mit den Zustaenden aus V1533 (Vorrat 894): ...\runde-208-optik-bausteine\muster.html. FARBEN UND KONTRAST (WCAG: ab 4,5 : 1 fuer normale Schrift; Rahmen tragen nie eine Information). Gemessen 24.10.2026. Variable hell dunkel Verwendung --bg #FAF6F2 #1E1917 Kachelflaeche, Schrift auf Gold --surface #FFFFFF #2A2320 Karte, Zeilen-Karte, Zweitknopf, Chip, Dialog --surface-2 #F1E7DE #362D28 Feldgrund, Umschalter-Leiste --text #241C18 #F1EAE5 Text --text-dim #6B5A51 #AC9C93 Beschriftung, Nebentext --accent #94661F #E0A75C Gold als Schrift und Linie: Links, Reiter, Rahmen gewaehlter Chips, Fokus --accent-flaeche #DFBC84 #E0A75C Gold als Flaeche: Hauptknopf, aktiver Chip/Umschalter (V1580, components.js) --accent-flaeche-text #1E1917 #1E1917 Schrift auf dieser Flaeche --gefahr-farbe #BC5237 #D9704F Terrakotta (Logo): Gefahr-Knopf (V1580), Warnkasten und "Jetzt dran" (V1600) --zeichen #94661F #E0A75C Gold fuer Zeichen: Zeilensymbol, Standzeile (V1600, components.js) --petrol #B0472A #D9704F Rostrot: nur noch "ok"-Kasten und Seiten, die 958-966 noch umstellen --border #E6D8CC #473A34 Rahmen, Trennlinie (1,39 : 1 hell / 1,41 : 1 dunkel - nur Linie) Paar hell dunkel Text auf Karte #241C18/#FFFFFF 16,74 #F1EAE5/#2A2320 12,97 Text auf Kachel (--bg) #241C18/#FAF6F2 15,57 #F1EAE5/#1E1917 14,62 Text im Feld (--surface-2) #241C18/#F1E7DE 13,73 #F1EAE5/#362D28 11,29 Beschriftung auf Karte #6B5A51/#FFFFFF 6,55 #AC9C93/#2A2320 5,83 Beschriftung auf Kachel #6B5A51/#FAF6F2 6,09 #AC9C93/#1E1917 6,57 Beschriftung auf Feld / Umschalter #6B5A51/#F1E7DE 5,37 #AC9C93/#362D28 5,07 Hauptknopf, aktiver Chip und Umschalter #1E1917/#DFBC84 9,67 #1E1917/#E0A75C 8,16 Rahmen gewaehlter Chip auf Seitengrund #94661F/#FAF6F2 4,67 #E0A75C/#1E1917 8,16 Gefahr-Knopf (--gefahr-farbe) #BC5237/#FFFFFF 4,77 #D9704F/#2A2320 4,69 Zeilensymbol, Standzeile (--zeichen) #94661F/#FFFFFF 5,02 #E0A75C/#2A2320 7,25 (V1600) Warnung/Jetzt dran: Text auf Terrakotta 10 % #241C18/#F8EEEB 14,69 #F1EAE5/#3C2B25 11,28 (V1600) Nebentext (--text-dim) darauf #6B5A51/#F8EEEB 5,74 #AC9C93/#3C2B25 5,07 Rahmen und Symbol darauf (nur Form) #BC5237/#F8EEEB 4,19 #D9704F/#3C2B25 4,08 Jetzt dran Gold (--gold, V1609): Text #241C18/#F4F0E9 14,74 #F1EAE5/#3C3026 10,74 Nebentext darauf #6B5A51/#F4F0E9 5,77 #AC9C93/#3C3026 4,83 Rahmen darauf (nur Form) #94661F/#F4F0E9 4,42 #E0A75C/#3C3026 6,00 Hinweis: Text auf Gold-Toenung 8 % #6B5A51/#F6F3ED 5,91 #AC9C93/#392E25 4,98 Ok/Warnung: Text auf Rostrot-Toenung 10 % #241C18/#F7EDEA 14,56 #F1EAE5/#3C2B25 11,28 V1580 (Vorrat 946, Nutzer 25.10.2026 "rostbraun in den buttons ist zu krass"): Die Flaeche ist hell das Check-Gold aus dem Logo #DFBC84 mit dunkler Schrift statt #94661F mit heller - gewaehlt per Foto aus #BB8C5B/#DFBC84/#D9B06A/ #C8913F; dunkel bleibt #E0A75C. #DFBC84 hat auf dem Seitengrund nur 1,67 : 1, deshalb tragen gewaehlte Chips und Umschalter einen Rahmen in --accent (WCAG 1.4.11), und alles ohne Schrift (Punkte, Balken, Schalter) bleibt --accent. V1600 (Vorrat 957, Optik 947, Nutzer 26.10.2026 "2: Gold" und "3: A + D"): Zeichen (Symbol, Standzeile) in Gold ueber --zeichen, Roetlich nur noch fuer Warnung und "Jetzt dran" - im Terrakotta des Logos (--gefahr-farbe) wie auf dem gewaehlten Foto, nicht im Rostrot --petrol. Werte, Knoepfe, Karten-, Dialog- und Blatt-Titel in Inter 600 statt Space Grotesk (die Space-Grotesk-Stellen der Seiten folgen in 966). Inter liegt in fonts/ nur bis 600 - 700 wuerde kuenstlich gefettet. Rot-Gruen-Schwaeche: Gold und Rostrot unterscheiden sich vor allem im Rotanteil. Deshalb traegt nie die Farbe allein eine Bedeutung: "aktiv" ist zusaetzlich GEFUELLT und fett, "Gefahr" und "Warnung" haben zusaetzlich ein Wort oder Symbol, "deaktiviert" ist blasser UND zeigt keinen Zeiger. =================================================================================================================== BAUSTEINE - fuer die Buendel-Sitzungen (882-888) =================================================================================================================== Neu ersetzt (Bestand Runde 203, Fundstellen auf der Vergleichsseite) 1 Kachel .igb-kacheln > .igb-kachel .kopf-kacheln/.zeile und .zs-kacheln/.zs-kachel (Mietkonto, Portal), .stat-card .igb-kachel-art / -wert (immobilie-detail, dashboard, rent-dashboard, portfolio, rent-portfolio), .kpi-tile .igb-kachel--breit (rent-objekte, rent-vorgaenge), .vtr-kpi-tile (rent-mieter), .kennzahl-strip .igb-kacheln--drei / --vier (rent-objekt-detail), .kpi-box (admin). Nicht: .quick-tile (dashboard) - das ist ein Knopf, kein Wert. .igb-kachel--lang (+ --fliesstext) .kachel-lang (Mietkonto; Portal "Raeume" mit Fliesstext) (V1533, 894 f) .igb-kachel[href] a.igb-kachel (rent-dashboard): Link ohne Unterstrich, Hover, Fokus (V1533, 894 d) .igb-kachel-zusatz, .kpi-unter und --kpi-spalten (admin) (V1533, 894 k) .igb-kacheln--spalten (--igb-spalten) 2 Zeile .igb-wertzeile .zeile im Mietkonto, .cost-row (immobilie-detail, energie-sanierung, .igb-wertzeile-art / -wert gesamtkosten-rechner), .zeile (rent-jahresuebersicht), Vorschau-Zeilen .igb-wertzeile--summe .total (immobilie-detail, gesamtkosten-rechner), .summe (rent-jahresuebersicht) (V1533, 894 a) .igb-wertzeile--block .wertzeile-block (Portal-Profil) (V1533, 894 f) .igb-wertzeile--ohne-linie keine Linie unter Titeln (rent-jahresuebersicht; Kartentitel von selbst) (V1533, 894 i) .igb-zeilenkarte > .igb-zeile .einstell-karte/.einstell-zeile (Mietkonto, rent-objekt-detail, Portal), .row (mehr, .igb-zeile-kopf, -symbol, -text, rent-mehr, abo, wissen-recht, profil-einstellungen), .mieter-row (rent-mieter), -titel, -stand, -pfeil, -inhalt .prop-row (portfolio, rent-portfolio), .faq (hilfe), .zeile (rent-kosten - eine Zeilen-Karte, keine Wertzeile; berichtigt V1533, 894 h) .igb-zeile-wert .zeile-betrag (rent-kosten): Betrag rechts vor dem Pfeil (V1533, 894 h) .igb-zeile-symbol--gefahr .igb-zeile-symbol.gefahr (mehr, rent-mehr) (V1533, 894 d) .igb-zeile-kopf[aria-expanded] aufklappende Zeile per Knopf (rent-aufgaben); per Skript (.open in hilfe, glossar, wissen-recht, rent-wissen-recht) jetzt
(V1533, 894 d) .igb-zeilenkarte-kopf, .zeilen-karte-kopf, Karte ohne sichtbare Zeile ausblenden (Portal) (V1533, 894 m) .igb-zeilenkarte--ausblendbar 3 Knopf .igb-knopf.igb-knopf--haupt .btn-primary (28 Seiten, zehn Fassungen), .save-btn, .modal-btn.primary .igb-knopf.igb-knopf--zweit .btn-secondary, .btn-sekundaer, .btn-zweit, .btn-ghost, .modal-btn, .empf-knopf .igb-knopf.igb-knopf--gefahr .btn-secondary.danger, .modal-btn.danger (mit Symbol .igb-knopf-symbol oder Wort) + .igb-knopf--klein .btn-drucken und Knoepfe in Zeilen/Werkzeugleisten + .igb-knopf--anmelden .btn-primary der sechs Anmeldeseiten (Ausnahme aus 861) (V1533, 894 n) .igb-knopf-neu .add-btn (gestrichelt, in allen sieben Seiten schon wertgleich - nur zusammengelegt) .igb-knopf-reihe Knoepfe nebeneinander (z. B. Abbrechen + Speichern, .kontakt-knoepfe) .igb-knopf-reihe--umbruch darf umbrechen, je Knopf mind. 130 px (rent-bank) (V1533, 894 g) Knoepfe untereinander 8 px Abstand von selbst (bisher je Seite eine Zeile) (V1533, 894 c) 4 Karte .igb-karte, -titel, -sub section.karte, .card, .objekt-card, .aufgabe-card, .vergabe-card, .tool-card, .foerderung-card, .mode-card .igb-hinweis (+ --ok, --warnung) .hinweis, .hint-card (acht Fassungen), .hinweis-box, .info-box, .hm-banner, .igb-hinweis-symbol .detect-box; .ok-box -> --ok; .warnung (#DC6B3D) -> --warnung .igb-jetzt > .igb-jetzt-titel, .mahn-jetzt (Mietkonto "Jetzt dran", V1546): was faellig ist, je Sache eine .igb-jetzt-zeile (-was, -stand) Zeile mit Stand und Hauptknopf (V1599, 957) .igb-jetzt--gold Form fuer Check (Objektseite, Dashboard): Gold statt Terrakotta (V1609, 959) [hidden] an .igb-hinweis/-jetzt blendet aus (bis V1624 schlug display:block das Attribut) (V1625, 960) 5 Seitenkopf bleibt wie er ist (components.js) - kein Baustein hier. 6 Reiter .igb-chips > .igb-chip .filter-chip, .chip, .mini-chip, .context-chip .igb-chip mit .objekt-chip (rent-unterkonten): gewaehlt = gefuellt (V1533, 894 l) .igb-umschalter > .igb-umschalter-feld .segmented/.segment, .tabs/.tab (immobilie-detail), .view-toggle 7 Dialog .igb-dialog-grund > .igb-dialog .modal-overlay/.modal-card, .modal-title, .modal-text; Knoepfe darin = Knoepfe aus 3. .igb-dialog-titel, -text Breite weiter ueber die Klassen aus components.js: dlg-formular (~600 px), dlg-auswahl (~480 px), dlg-rueckfrage (~400 px), jeweils ab 700 px Fensterbreite. 8 Formularfeld .igb-feld (label + input/select/ .field label/input/select/textarea (sieben Fassungen), .modal-card input, textarea), .igb-feld-reihe, .suche-feld (rent-kontakte) .igb-feld-hilfe, .igb-feld-fehler .igb-feld-kaestchen label.umlage-zeile (rent-kosten): Kaestchen mit Text im Feld (V1533, 894 j) .igb-eingabe (+ --mehrzeilig), .vn-eingabe/.vn-zeile (rent-vorgaenge): Eingabe ohne Beschriftung (V1533, 894 e) .igb-eingabe-zeile in einer Zeile mit kleinem Knopf 9 Blatt (V1599, 957) .igb-blatt (), -kopf, -zu, dialog.blatt im Mietkonto (V1547/V1548): Schreiben oder Formular als eigenes -titel, -unter, -rumpf, -angaben, Blatt ueber der Seite. Gebaut und geoeffnet mit blatt.js (immoBlatt.html/ -papier, -fuss, -seite (Papier), zeigen/merken/zuhoeren); Angaben rechts, Papier links ab 900 px. -absatz, -luecke, -aktiv-kopf, -abschnitt, -zurueck, -neu -fuss > .igb-knopf-reihe, Knoepfe im Fuss (bisher je Seite: .mahn-knoepfe, #exposeKnoepfe) (V1632, 962) .igb-blatt--schmal Formular ohne Papier: am Desktop hoechstens 640 px (immoBlatt.formular) (V1632, 962) AUSNAHMEN (Nutzer 24.10.2026 mit den Vorschlaegen bestaetigt) - NICHT umstellen: - Anmelde-Knoepfe (login.html .btn-primary/.auth-btn, 14,5 px, 15 px Abstand) und die Eingangsseiten - der grosse Knopf steht seit V1533 als Variante .igb-knopf--anmelden hier (eine Regel statt sechs); .auth-btn bleibt in den Seiten - Rundgang- und Anmeldekopf (eigene Bildsprache); der Seitenkopf aus components.js bleibt ohnehin - Nebenkosten-Tabelle (rent-nebenkosten.html .nko-in, 12,5 px - dort zaehlt die Breite) - Rechner-Zeile (.field-row in finanzierungs-, gesamtkosten-, renditerechner), solange die Rechner nicht selbst umgebaut werden - untere Leiste im Mieterportal (.tab-bar - dort ist sie die Navigation) REGEL FUER DIE BUENDEL: Fehlt einem Buendel ein Standard (z. B. Suchfeld .search-box, vier Fassungen in acht Seiten - dafuer gibt es noch keine Entscheidung), wird er NICHT hier ergaenzt, sondern als Vorrat-Kandidat gemeldet. Die Buendel laufen parallel; aendert eines diese Datei, kollidiert es mit allen anderen. Auch die sechs Dialoge, die components.js selbst baut, gehoeren keinem Buendel (components.js ist gemeinsam) - eigener Eintrag. ------------------------------------------------------------------------------------------------------------------- */ /* ---------- 1 Kachel ---------- Mietkonto-Kachel (.kopf-kacheln, rent-vertrag-detail.html ~:77): Beschriftung oben 11 px --text-dim, Wert darunter, linksbuendig, Flaeche --bg, Rahmen --border, Ecken 10 px, 7 x 10 px, Raster mit 6 px. Wert 15 px 600 wie die Zaehlerstand-Kachel (.zs-kachel-wert ~:390) - vom Nutzer gewaehlt statt 13 px. Ziffern gleich breit, damit Zahlen in Spalten untereinander stehen. V1600 (955 "A"): Inter statt Space Grotesk - Nutzer 26.10.2026 zur alten Schrift: "wie mit einer Schreibmaschine". Ganze Saetze in einer Kachel tragen --fliesstext (unten). */ .igb-kacheln{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:6px; } .igb-kacheln--drei{ grid-template-columns:repeat(3, minmax(0,1fr)); } /* Vier Werte: am Handy zwei je Zeile (vier waeren bei 335 px Inhalt nur 80 px breit), ab 700 px - der Stufe von .phone/ .shell in responsive.css - alle vier nebeneinander. */ .igb-kacheln--vier{ grid-template-columns:repeat(2, minmax(0,1fr)); } @media (min-width:700px){ .igb-kacheln--vier{ grid-template-columns:repeat(4, minmax(0,1fr)); } } .igb-kachel{ box-sizing:border-box; display:flex; flex-direction:column; justify-content:flex-start; gap:2px; min-width:0; background:var(--bg, #FAF6F2); border:1px solid var(--border, #E6D8CC); border-radius:10px; padding:7px 10px; color:var(--text, #241C18); font-family:'Inter', sans-serif; font-size:12.5px; line-height:1.35; text-align:left; } .igb-kachel-art{ font-size:11px; color:var(--text-dim, #6B5A51); } .igb-kachel-wert{ font-family:'Inter', sans-serif; font-size:15px; font-weight:600; color:var(--text, #241C18); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; } /* Lange Werte (Status, Hinweis) ueber die ganze Breite, Beschriftung links, Wert rechts (Mietkonto .kachel-breit). */ .igb-kachel--breit{ grid-column:1 / -1; flex-direction:row; justify-content:space-between; align-items:center; gap:10px; } .igb-kachel--breit .igb-kachel-wert{ text-align:right; } /* V1533 (Vorrat 894 f): lange Kachel - Beschriftung OBEN, Wert darunter ueber die ganze Breite (Mietkonto .kachel-lang: Staffel, Befristung, Kuendigungsfrist). Mit --fliesstext ist der Wert ein Absatz statt einer Zahl (Portal "Raeume und Ausstattung": Inter 12,5 px 500, Zeilenumbrueche des Vermieters bleiben). Zwei Modifikatoren, weil beide Seiten Verschiedenes zeigen - beide Werte stehen so im Bestand, keiner ist neu. */ .igb-kachel--lang{ grid-column:1 / -1; } .igb-kachel--fliesstext .igb-kachel-wert{ font-family:'Inter', sans-serif; font-size:12.5px; font-weight:500; line-height:1.45; white-space:pre-line; } /* V1533 (Vorrat 894 d): Kachel als Link (Rent-Dashboard V1519) - kein Unterstrich, Rahmen --accent beim Ueberfahren, Fokusring wie ueberall. [href] statt a., damit die Regel mit der igb-Klasse beginnt. */ .igb-kachel[href]{ text-decoration:none; cursor:pointer; } .igb-kachel[href]:hover{ border-color:var(--accent, #94661F); } .igb-kachel[href]:focus-visible{ outline:2px solid var(--accent, #94661F); outline-offset:2px; } /* V1533 (Vorrat 894 k): dritte Zeile unter dem Wert (Admin-Kennzahlen .kpi-unter: 10,5 px --text-dim) und ein Raster, dessen Spaltenzahl die Seite setzt (--igb-spalten, z. B. aus der Zahl der Kacheln; ohne Angabe 4) - am Handy zwei je Zeile wie --vier (Stufe 700 px; der Admin hatte 620 px). */ .igb-kachel-zusatz{ margin-top:2px; font-size:10.5px; line-height:1.4; color:var(--text-dim, #6B5A51); } .igb-kacheln--spalten{ grid-template-columns:repeat(2, minmax(0,1fr)); } @media (min-width:700px){ .igb-kacheln--spalten{ grid-template-columns:repeat(var(--igb-spalten, 4), minmax(0,1fr)); } } /* ---------- 2a Wertzeile "Beschriftung - Wert" ---------- Mietkonto .zeile (~:160): 12,5 px, Beschriftung --text-dim, Wert 600 --text, 7 px oben und unten, Trennlinie --border; die erste Zeile einer Gruppe ohne Linie. V1533 (Vorrat 894 i): auch direkt unter einem Kartentitel oder dessen Unterzeile keine Linie (bisher nur beim ersten Kind; rent-jahresuebersicht hielt dafuer eine eigene Regel). Steht ein eigener Gruppentitel davor, setzt die Seite .igb-wertzeile--ohne-linie an die erste Zeile. Nicht "nach allem, was keine Wertzeile ist": eine eingeschobene Unterliste (Einheiten unter "Wohnflaeche", immobilie-detail) soll die Linie zur naechsten Zeile behalten. V1533 (Vorrat 894 b): Die Beschriftung darf nicht schmaler werden als ihr laengstes Wort - "Energieeffizienzklasse" lief bei 375 px unter den Wert (foerderinterview, angebot-anfordern hielten flex-shrink:0). Statt flex-shrink:0 (das wuerde eine lange Beschriftung aus mehreren Woertern gar nicht mehr umbrechen) faellt min-width:0 an der Beschriftung weg; der Wert gibt nach und bricht wie bisher ueberall um. */ .igb-wertzeile{ box-sizing:border-box; display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:7px 0; border-top:1px solid var(--border, #E6D8CC); font-family:'Inter', sans-serif; font-size:12.5px; line-height:1.4; color:var(--text, #241C18); } .igb-wertzeile:first-child, .igb-karte-titel + .igb-wertzeile, .igb-karte-sub + .igb-wertzeile, .igb-wertzeile--ohne-linie{ border-top:none; } .igb-wertzeile-art{ color:var(--text-dim, #6B5A51); } .igb-wertzeile-wert{ font-weight:600; color:var(--text, #241C18); text-align:right; min-width:0; overflow-wrap:anywhere; } /* V1533 (Vorrat 894 a): Summenzeile - Gold, 14,5 px, fett, 4 px Abstand nach oben. Bisher drei Fassungen: immobilie-detail Gold 14,5 px, gesamtkosten-rechner Gold 15 px (+4 px), rent-jahresuebersicht Textfarbe fett mit Linie in --text-dim. Gewaehlt: der Vorschlag aus 894 (a) - 14,5 px ist die Groesse, die schon zwei Seiten (immobilie-detail, Jahreswahl der Kostenseiten) fuer eine hervorgehobene Zahl nutzen; die Linie bleibt die normale Trennlinie. Gold traegt die Bedeutung nicht allein: Groesse und Gewicht unterscheiden die Summe auch ohne Farbe. Kontrast: hell #94661F auf #FFFFFF 5,02 : 1, dunkel #E0A75C auf #2A2320 7,25 : 1. */ .igb-wertzeile--summe{ margin-top:4px; font-weight:600; } .igb-wertzeile--summe .igb-wertzeile-art, .igb-wertzeile--summe .igb-wertzeile-wert{ color:var(--accent, #94661F); font-size:14.5px; } /* V1533 (Vorrat 894 f): lange Wertzeile - Beschriftung oben, Wert als Absatz darunter (Portal-Profil "Raeume und Ausstattung", V1258/V1518: 500, Zeilenumbrueche bleiben, linksbuendig). */ .igb-wertzeile--block{ display:block; } .igb-wertzeile--block .igb-wertzeile-art{ display:block; margin-bottom:3px; } .igb-wertzeile--block .igb-wertzeile-wert{ display:block; font-weight:500; line-height:1.45; white-space:pre-line; text-align:left; } /* ---------- 2b Zeilen-Karte ---------- Mietkonto .einstell-karte/.einstell-zeile (~:118-149, Muster aus rent-objekt-detail.html V1194): EINE Karte, darin Zeilen mit Symbol (--zeichen, V1600), Titel 13,5 px 500, Standzeile 11,5 px (--zeichen; "nichts eingetragen" neutral) und Pfeil, 13 x 14 px. Die Zeile kann ein
(aufklappen, .igb-zeile-kopf = ), ein oder ein */ .igb-jetzt-titel{ font-weight:600; font-size:12.5px; } .igb-jetzt-zeile{ margin-top:8px; } .igb-jetzt-zeile + .igb-jetzt-zeile{ padding-top:10px; border-top:1px solid rgba(217,112,79,0.3); border-top-color:color-mix(in srgb, var(--gefahr-farbe, #BC5237) 30%, transparent); } .igb-jetzt-was{ display:block; font-size:13.5px; color:var(--text, #241C18); } .igb-jetzt-stand{ display:block; font-size:12px; color:var(--text-dim, #6B5A51); margin-top:2px; line-height:1.45; } .igb-jetzt-zeile .igb-knopf{ margin-top:8px; } /* V1609 (Vorrat 959, Nutzer 27.10.2026 "Jetzt dran in Gold"): Form fuer Check. Auf der Check-Objektseite und dem Check- Dashboard ist "Jetzt dran" der naechste Schritt (z. B. "BEG EM · Antrag" mit "Antrag vorbereiten"), keine Mahnung - in Terrakotta las sich das wie ein Alarm. Rahmen, Balken links und Toenung (10 %) in --accent; Balken und Titel bleiben, sie unterscheiden den Kasten vom Hinweiskasten (4b, 1 px, 8 %). Das Mietkonto nimmt weiter .igb-jetzt ohne Zusatz. */ .igb-jetzt.igb-jetzt--gold{ border-color:var(--accent, #94661F); background:rgba(224,167,92,0.1); background:color-mix(in srgb, var(--accent, #94661F) 10%, transparent); } .igb-jetzt--gold .igb-jetzt-zeile + .igb-jetzt-zeile{ border-top-color:rgba(224,167,92,0.3); border-top-color:color-mix(in srgb, var(--accent, #94661F) 30%, transparent); } /* V1625 (Fund runde-224-optik-energie): "display:block" oben schlaegt das hidden-Attribut (Regel des Browsers) - ein Kasten mit hidden stand leer da ("Jetzt dran" ohne Zeile an Objekten, an denen nichts faellig ist: Objektseite V1605, Dashboard V1610, Energie & Sanierung). hidden gewinnt jetzt fuer Hinweis- und Jetzt-Kasten; bisher fing jede Seite das selbst ab (.foerder-diff-kopf[hidden] u. a.). */ .igb-hinweis[hidden], .igb-jetzt[hidden]{ display:none; } /* ---------- 6a Filter-Chip ---------- Wie Mieterliste (.filter-chip, rent-mieter.html ~:86): Pille, 12,5 px 500, 8 x 14 px, --surface mit Rahmen, Text --text-dim. Aktiv GEFUELLT in Gold mit Text --bg und fett (nicht nur getoent wie bisher - "aktiv" muss ohne Farbunterscheidung erkennbar sein). Aktiv ist: .ist-aktiv, aria-pressed="true" oder aria-selected="true". */ .igb-chips{ display:flex; flex-wrap:wrap; gap:6px; } .igb-chip{ box-sizing:border-box; display:inline-flex; align-items:center; gap:6px; flex-shrink:0; white-space:nowrap; margin:0; padding:8px 14px; background:var(--surface, #FFFFFF); border:1px solid var(--border, #E6D8CC); border-radius:99px; color:var(--text-dim, #6B5A51); cursor:pointer; font-family:'Inter', sans-serif; font-size:12.5px; font-weight:500; line-height:1.2; text-decoration:none; -webkit-appearance:none; appearance:none; } .igb-chip.ist-aktiv, .igb-chip[aria-pressed="true"], .igb-chip[aria-selected="true"]{ background:var(--accent-flaeche, #DFBC84); border-color:var(--accent, #94661F); color:var(--accent-flaeche-text, #1E1917); font-weight:600; } .igb-chip:focus-visible{ outline:2px solid var(--accent, #94661F); outline-offset:2px; } .igb-chip:disabled, .igb-chip[aria-disabled="true"]{ opacity:0.55; cursor:default; } /* V1533 (Vorrat 894 l): Chip als Auswahl mit verstecktem Kaestchen (