/* Design-System "Immobilien Manager" — siehe design_handoff_immobilien_manager/README.md */ :root { --bg: #eef2ea; --sidebar-bg: #143a2c; --sidebar-active: #1f5540; --sidebar-hover: #17402f; --green: #1e6b4f; --green-hover: #185840; --green-tile: #2a8f66; --green-strong: #22795a; --success-text: #1e7d59; --success-bg: #dcefe4; --card-bg: #ffffff; --card-border: #e4ebde; --divider: #f1f5ee; --divider-soft: #eef2ea; --text-heading: #16241d; --text-body: #1c2a22; --text-body-soft: #3d4a42; --text-muted: #6b7a70; --text-muted2: #6e7971; --text-faint: #6a7168; --sidebar-text-muted: #a9c6b8; --sidebar-dot: #34614c; --sidebar-label: #5f907c; --sidebar-owner-name: #7fb59d; --accent: #7c5cdb; --accent-soft: #ece7fb; /* Nein-Toggle & Schieberegler: bewusst nicht das dominante --green (Marlon 2026-09-22: "zu dominant, beißt sich") - gedecktes Salbeigrün statt dunklem Waldgrün. */ --sage: #6fa588; --sage-hover: #5f9277; /* Gedämpftes Lila fürs Ja-Toggle, die Sozialwohnung-Blase & den Gesamtmiete-Text - Pendant zu --sage, nicht das kräftige --accent (Marlon 2026-09-22: "im Vergleich zu kräftig"). */ --lila: #75669e; /* Noch heller/sanfter, nur für den Regler-BALKEN der Sozialwohnungen - als Flächenfarbe wirkt selbst --lila zu kräftig (Marlon 2026-09-22: "sanftes, helles lila, stiltechnisch zum Salbeigrün passend"). */ --lila-hell: #d5d0e2; /* Gold fuer den Verkauf-Schalter/-Regler bei Zielmieten (2026-09-23) - Pendant zu --lila, bewusst gedaempft in derselben Saettigung/Helligkeit-Familie statt des kraeftigeren --badge-frei-text (Marlon: "etwas dunkler und blasser, damit es besser zu Mintgruen und Lila passt"), und ein grauhelles --gold-hell fuer den Reglerbalken analog --lila-hell ("hell-grauere Abstufung, damit sie nicht so dominant sind"). */ --gold: #af9664; --gold-hell: #e0dbd1; --badge-renovierung-text: #6a4bcf; --badge-renovierung-bg: #ece7fb; --badge-frei-text: #a5750f; --badge-frei-bg: #faf1d3; --dot-urgent: #db5c5c; --dot-medium: #e0a92e; --dot-normal: #2a8f66; --radius-card: 16px; --radius-pill: 20px; --radius-btn: 11px; --radius-nav: 10px; --label-spalte: 260px; --wert-spalte: 170px; --spalte-3: 150px; /* Steuer-Tab: Blau/Petrol-Farbfamilie, je Herleitungs-Karte eine Tönung (Option A, entschieden 2026-08-28) */ --steuer-afa-bg: #e6eaf6; --steuer-afa-border: #c7d1ec; --steuer-afa-text: #3c548f; --steuer-bwg-bg: #dcf1ee; --steuer-bwg-border: #b7e0d9; --steuer-bwg-text: #1a7a6e; --steuer-geld-bg: #ddf0fa; --steuer-geld-border: #b7dff2; --steuer-geld-text: #1f6f96; --steuer-erh-bg: #e1ecec; --steuer-erh-border: #c3d9d9; --steuer-erh-text: #2c6363; --steuer-verlauf-bg: #e9ebee; --steuer-verlauf-border: #ccd2da; --steuer-verlauf-text: #44515f; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: 'Inter', system-ui, sans-serif; background: var(--bg); color: var(--text-body); -webkit-font-smoothing: antialiased; } a { color: var(--green); text-decoration: none; } a:hover { color: var(--green-hover); } /* ---------- Shell / Sidebar ---------- */ .app-shell { display: flex; min-height: 100vh; width: 100%; } .sidebar { width: 256px; flex-shrink: 0; background: var(--sidebar-bg); display: flex; flex-direction: column; padding: 48px 18px 22px; } .logo-block { display: flex; align-items: flex-start; gap: 13px; padding: 4px 6px 56px; } .logo-svg { flex-shrink: 0; } .wordmark-title { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 17px; line-height: 1.12; color: #ffffff; letter-spacing: -0.2px; } .wordmark-by { font-size: 12.5px; font-style: italic; color: var(--sidebar-owner-name); margin-top: 5px; margin-left: 16px; } .side-nav { display: flex; flex-direction: column; gap: 3px; } .nav-label { font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--sidebar-label); padding: 4px 12px 8px; font-weight: 600; } .nav-item { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: var(--radius-nav); color: var(--sidebar-text-muted); font-size: 14.5px; cursor: pointer; transition: background 140ms ease, color 140ms ease; } .nav-item:hover { background: var(--sidebar-hover); color: #ffffff; } .nav-item .nav-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sidebar-dot); } .nav-item.active { background: var(--sidebar-active); color: #ffffff; font-weight: 600; } .nav-item.active .nav-dot { background: var(--accent); } /* Optische Abgrenzung von "Daten-Input" zu den CRUD-Listenpunkten darüber (Marlon 2026-09-16: "mit einem kleinen Strich darüber") - eigene Kategorie (Dateneingabe statt Objektverwaltung), kein .nav-label-Text noetig fuer nur einen Punkt, ein duenner Trenner genuegt. */ .nav-item-abgesetzt { margin-top: 11px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.1); } .owner-card { margin-top: auto; display: flex; align-items: center; gap: 11px; padding: 12px; border-radius: 12px; background: var(--sidebar-hover); } .owner-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--green-tile); display: flex; align-items: center; justify-content: center; font-family: 'Inter', sans-serif; font-weight: 600; color: #ffffff; font-size: 15px; } .owner-name { color: #ffffff; font-size: 13.5px; font-weight: 600; } .owner-role { color: var(--sidebar-owner-name); font-size: 12px; } /* ---------- Main ---------- */ .main-area { flex: 1; overflow-y: auto; background: var(--bg); } .main-inner { max-width: 1800px; margin: 0 auto; padding: 48px 48px 48px; container-type: inline-size; } .page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 56px; flex-wrap: wrap; } .page-date { font-size: 13px; color: var(--text-muted); margin-bottom: 6px; } .page-header h1 { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 30px; margin: 0; letter-spacing: -0.6px; color: var(--text-heading); } .page-subtitle { margin: 6px 0 0; color: var(--text-muted); font-size: 14.5px; } .page-actions { display: flex; align-items: center; gap: 12px; } /* ---------- Buttons / Links / Formulare ---------- */ .btn-primary { border: none; background: var(--green); color: #ffffff; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 14px; padding: 12px 18px; border-radius: var(--radius-btn); cursor: pointer; box-shadow: 0 6px 16px rgba(30, 107, 79, 0.24); transition: background 140ms ease; display: inline-block; } .btn-primary:hover { background: var(--green-hover); color: #ffffff; } .actions { margin-bottom: 1rem; } .actions a { font-size: 13px; font-weight: 600; } form { display: flex; flex-direction: column; gap: 0.75rem; max-width: 480px; } label { font-weight: 600; font-size: 13px; color: var(--text-body-soft); } input, select, textarea { padding: 10px 14px; font-size: 14px; font-family: 'Inter', sans-serif; border: 1px solid #dde5d7; border-radius: var(--radius-btn); background: #ffffff; color: var(--text-body); } input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; } .form-tabelle { display: block; max-width: none; } .form-tabelle input { width: 100%; padding: 8px 10px; } .form-tabelle button { margin-top: 0.75rem; } .objekte-tabelle { table-layout: fixed; width: 100%; } .objekte-tabelle th, .objekte-tabelle td { vertical-align: top; overflow-wrap: break-word; } .zwei-boxen { display: flex; align-items: stretch; gap: 24px; flex-wrap: wrap; } .zwei-boxen .bereich { flex: 0 0 640px; margin-bottom: 0; padding: 66px 144px 120px; } /* Zwei kompakte Eigenschaft:Wert-Listen NEBENEINANDER innerhalb EINER Karte (statt getrennter .bereich-Karten wie .zwei-boxen) - nutzt den sonst ungenutzten weißen Platz rechts bei schmalen, hohen Tabellen (Marlon 2026-09-14: "Mietverhältnis"-Feld). GEÄNDERT 2026-09-15 (vorher: flex mit content-breiten Spalten + 40px gap): die "Kaltmiete..."-Liste soll jetzt exakt mit Spalte 4 ("Umlagefähig/Monat") der gleichmäßig verteilten .mietperioden-tabelle darunter fluchten (Marlon: "linksbündig in der Vertikale ... angeordnet"). Bei content- breiten Flex-Spalten hängt die Startposition der 2. Liste vom längsten Wert-Text der 1. Liste ab und lässt sich nicht auf einen festen Prozentsatz der Mietperioden-Tabelle fixieren. Zwei exakte 50%-Grid-Spalten OHNE column-gap lösen das robust bei jeder Bildschirmbreite (kein gap, weil ein gap bei %-Spalten vom Inhaltsraum abgezogen würde und die 50%-Grenze verschöbe - die 1. Spalte bekommt ihren "Abstand" stattdessen implizit durch die eigene, viel schmalere Label+Wert-Breite plus den Dokument-Link rechts daneben, siehe .vertragsdaten-spalte). */ .spalten-zwei { display: grid; grid-template-columns: 1fr 1fr; align-items: start; } /* Erste Grid-Spalte: die Vertragsdaten-Liste UND der "Mietvertrag einsehen"-Link nebeneinander (Marlon 2026-09-15: "Rechts von der VERTRAGSDATEN-Tabelle ist noch viel Platz. Ordne da ein Symbol an ... Mietvertrag einsehen"). 40px fester Abstand zur Liste statt space-between (das würde den Link bis ganz an den 50%-Rand schieben, optisch von der Tabelle losgelöst). min-width:0 verhindert einen CSS-Grid-"Blowout": ohne das erzwingt der Inhalt (Liste + Link nebeneinander, white-space:nowrap) seine eigene Mindestbreite auch dann, wenn die verfügbare 50%-Spalte schmaler ist - die 1fr-Spaltenaufteilung von .spalten-zwei wuerde dann zugunsten dieser Spalte verschoben und die exakte 50%-Flucht mit "Umlagefähig/Monat" darunter brechen (gemessen: 24px Versatz auf einer 851px breiten Karte). flex-wrap:wrap laesst den Link bei wenig Platz stattdessen eine Zeile unter die Liste rutschen statt die Spalte zu sprengen. */ .vertragsdaten-spalte { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 40px; min-width: 0; } .mietvertrag-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 2px; font-family: 'Inter', sans-serif; font-size: 13.5px; font-weight: 600; color: var(--green); white-space: nowrap; } .mietvertrag-link:hover { text-decoration: underline; } /* .mv-liste ersetzt hier bewusst eine , deren globale --label-spalte (260px) für die längsten Labels der ganzen App kalibriert ist und bei den viel kürzeren Labels hier riesigen Leerraum vor dem Wert ließ (Marlon 2026-09-14, zweimal korrigiert: erst zu schmale feste Tabellenspalte - Leerraum blieb riesig bei kurzen Labels wie "Mieter" - dann eigene Flexbox pro Zeile - dadurch fluchteten die Werte nicht mehr in einer Spalte, "hinter die Kriterien geklebt"). CSS Grid löst beides: EINE gemeinsame, aber bewusst schmale Spaltenbreite für alle Zeilen (echte linksbündige Werte-Spalte), UND ein expliziter column-gap (16px) statt variabler Leerraum - kleiner als die 40px zwischen den beiden .mv-liste. Die längsten Labels ("Unterzeichnet am", "Kleinreparatur-Klausel") sind dafür bewusst kürzer benannt/mit Trennzeichen versehen, damit 140px ohne Abschneiden reichen (ein Bindestrich ist ein gültiger Zeilenumbruch- Punkt, falls eine Spalte doch mal enger wird). mv-label/mv-wert übernehmen Schriftgröße/-familie explizit von .tabelle-kompakt (13.5px) - als statt , egal ob echte Summe oder einzeiliges Herleitungsergebnis, und egal ob die Zellen
/ erben sie sonst nicht die globale th,td{font-size:13.5px}-Regel und wirken dadurch zu groß. */ .mv-liste { display: grid; grid-template-columns: 152px 1fr; column-gap: 16px; row-gap: 10px; align-items: baseline; } .mv-label { font-family: 'Inter', sans-serif; font-weight: 600; color: var(--text-muted); font-size: 13.5px; white-space: nowrap; } .mv-wert { font-family: 'Inter', sans-serif; font-size: 13.5px; color: var(--text-body); text-align: left; } /* Mietperioden-Tabelle: 6 gleich breite Spalten (Marlon 2026-09-15: "Verteile die Spalten ... gleichmäßig über den Screen") statt vormals 3 fest an die .mv-liste-Spaltenbreiten oben angepixelten + 3 den Rest teilenden Spalten. table-layout:fixed OHNE jede width-Angabe teilt den verfügbaren Platz automatisch zu gleichen Teilen auf alle Spalten auf (UA-Standardverhalten, wenn keine Spalte eine explizite Breite hat) - Spalte 4 ("Umlagefähig/Monat") beginnt dadurch exakt bei 50%, was wiederum die 2. .mv-liste ("Kaltmiete...") oben exakt darauf ausrichtet (siehe .spalten-zwei: grid-template-columns:1fr 1fr, ebenfalls exakt 50/50 ohne gap). Beide Ausrichtungen hängen also an derselben 50%-Marke - table-layout:fixed bemisst dafür wie gehabt nur die ERSTE Zeile (Kopfzeile) verbindlich für die ganze Spalte (derselbe Kniff wie bei den BWG-Tabellen im Steuer-Tab, siehe deren Kommentare). */ .mietperioden-tabelle { table-layout: fixed; } /* Eigenständige, wiederverwendbare Label-Überschrift für "Vertragsdaten"/"Mietperioden (Staffel/Verlauf)" im Mietverhältnis-Feld (Marlon 2026-09-14) - dieselbe Label-Optik wie tr.kopfzeile th/.kachel-label/.chart-parameter-titel (grau, Großbuchstaben), nicht die dunklere/größere .unterabschnitt-titel-Optik (die ist für echte Formular-Unterabschnitte gedacht, z.B. "Kontaktdaten" im Mieter-Formular). "+ Neue Mietperiode" wurde entfernt (Vertragsmanagement läuft künftig über den Mieter-Bereich, hier nur noch reine Anzeige) - ohne die vorher zusätzlichen Abstand beitragende .actions-Zeile bekommt "Mietperioden..." per Selektor gezielt mehr Abstand (40px) zur .spalten-zwei-Liste direkt darüber; "Vertragsdaten" als allererstes Element im Kartenkörper braucht das nicht (Standard-Innenabstand der Karte reicht). */ .abschnitt-label { margin: 0 0 16px; color: var(--text-muted2); font-size: 12.5px; letter-spacing: 0.3px; text-transform: uppercase; font-weight: 600; } .spalten-zwei + .abschnitt-label { margin-top: 40px; } /* Karten-Raster: mehrere gleichrangige Bereiche nebeneinander, echt responsiv (Marlon 2026-09-01: "damit es auch bei künftigen Nutzern mit anderen Bildschirmen ordentlich aussieht" — abgelöst die frühere Fixbreiten-Strategie unten in der Historie). FRÜHER (bis 2026-09-01): Flexbox mit flex:0 0 auto — jede Karte wurde so breit wie ihre eigene breiteste Tabelle (feste px-Spaltenbreiten). Funktionierte nur für EINE Bildschirmbreite exakt; bei jeder anderen Breite blieb entweder eine Lücke zum rechten Rand, oder die feste Breite passte nicht mehr nebeneinander und die Karten fielen unerwartet in eine Spalte. Nicht praktikabel, sobald mehrere Personen mit unterschiedlichen Bildschirmen dieselbe Seite sehen. DANN (2026-09-01, kurzzeitig): CSS Grid mit zwei gleich breiten Spalten (1fr 1fr) + benannte grid-areas, um Erhaltungsaufwendungen bei kurzer BWG-Karte direkt darunter zu setzen (statt in der Lücke unter der viel höheren AfA-Karte zu verharren). Live getestet und wieder verworfen: CSS Grid weist jeder ZEILE eine gemeinsame Höhe über BEIDE Spalten zu (Höhe des größten Items der Zeile) — dadurch blieb die Lücke bestehen, sie wanderte nur an eine andere Stelle (z.B. zwischen BWG und der als "nächstes" platzierten Karte, sobald die BEIDEN Spalten in dieser Zeile unterschiedlich hohe Nachbarn hatten). Ein echtes Nebeneinander mit lückenlosem Stapeln pro Spalte ("Masonry") kennt CSS ohne grid-template-rows:masonry (in Chrome noch nicht verfügbar) nicht. JETZT: zwei UNABHÄNGIGE Flexbox-Spalten (.karten-spalte, je display:flex;flex-direction:column) — jede Spalte stapelt ihre Karten rein nach deren EIGENER Höhe, ganz ohne Kopplung an die andere Spalte. .karten-raster selbst ist nur noch der äußere Rahmen (flex-direction:row ab ausreichend Platz, sonst column). WELCHE Karte in welcher Spalte UND an welcher Position landet, wird nicht mehr über CSS entschieden, sondern per JS aus den tatsächlich gerenderten Kartenhöhen (app.js, layoutAbschreibungenRaster) — die Karten werden dafür zwischen den beiden .karten-spalte-Containern verschoben (echtes DOM-appendChild, keine bloße CSS-Klasse), siehe dortiger Kommentar für die 3 möglichen Anordnungen. Der Umschaltpunkt (eine Spalte auf schmalen Screens, zwei ab ausreichend Platz) hängt an einer Container-Query auf .main-inner (container-type:inline-size dort gesetzt) statt an der Fensterbreite — das misst den tatsächlich verfügbaren Platz (nach Sidebar/Padding), nicht die rohe Bildschirmbreite, und bleibt daher korrekt egal wie breit Sidebar/Fenster sind. */ .karten-raster { display: flex; flex-direction: column; gap: 18px; margin-bottom: 18px; } .karten-spalte { display: flex; flex-direction: column; gap: 18px; min-width: 0; } @container (min-width: 900px) { .karten-raster { flex-direction: row; } .karten-spalte { flex: 1 1 0; } } .karten-raster .bereich { margin-bottom: 0; padding: 0; overflow: hidden; } /* Tabellen und ihre Tabellenkopf-Kappe (.tabellen-einheit) füllen jetzt die volle, fluide Kartenbreite (statt sich auf ihre eigene feste Spaltensumme zu schrumpfen) — siehe die Prozent-Spaltenbreiten unten, die diese Fläche proportional statt in festen px aufteilen. */ .karten-raster .tabellen-einheit { width: 100%; overflow-x: auto; } /* table-layout bewusst NICHT fixed: bei fixed bemisst Chrome Spaltenbreiten strikt nach den Prozentwerten und ignoriert dabei jedes min-width auf den Zellen komplett (getestet 2026-09-01 — Datumsspalten liefen bei schmaler Kartenbreite trotz min-width sichtbar über den Rand). Mit dem Standard-table-layout:auto bleiben die Prozentwerte weiterhin die Zielgröße, aber der Browser respektiert zusätzlich den Inhalt (z.B. "09.02.2026" kann nicht umbrechen) als harte Untergrenze je Spalte — dadurch wächst die Tabelle im Zweifel etwas über die Prozentsumme hinaus, statt Text abzuschneiden. .tabellen-einheit { overflow-x:auto } fängt den (seltenen) Rest ab, falls selbst das nicht mehr in die Karte passt. */ .karten-raster .tabelle-kompakt { width: 100%; } .karten-raster .bereich .unterabschnitt-titel:first-of-type { margin-top: 12px; } .tabelle-kompakt { width: auto; margin-bottom: 0; } .tabelle-kompakt th, .tabelle-kompakt td { white-space: normal; padding: 0.6rem 0.85rem 0.6rem 0.35rem; } .tabelle-kompakt th:last-of-type, .tabelle-kompakt td:last-child { padding-right: 0.7rem; } /* Zahlenspalten: rechtsbündig, gleich breite Ziffern, nie umbrechen (statt pauschalem nowrap auf allen Zellen) */ /* Linksbündig wie alle anderen Werte (homogen mit den Eigenschaft:Wert-Tabellen) — tabular-nums und nowrap bleiben, damit Beträge nie mitten im Wort/der Zahl umbrechen; das wird jetzt durch die feste Spaltenbreite unten sichergestellt, statt durch Rechtsbündigkeit. */ .tabelle-kompakt td.zahl, .tabelle-kompakt th.zahl { text-align: left; font-variant-numeric: tabular-nums; white-space: nowrap; } .tabelle-kompakt td.zahl:last-child, .tabelle-kompakt th.zahl:last-child { padding-right: 0.7rem; } /* Label-Spalte: feste Breite für die erste Spalte JEDER Tabelle (ob 2-spaltig "eigenschaften" oder mehrspaltig "daten") — sorgt dafür, dass alle Tabellen innerhalb einer Karte auf derselben x-Position fluchten, statt nur innerhalb ihres eigenen Tabellentyps. Kopfzeilen (tr.kopfzeile) sind ausgenommen, die haben ihren eigenen Stil (siehe unten). */ .tabelle-kompakt tr:not(.kopfzeile):not(.summe) > :first-child { width: var(--label-spalte); min-width: var(--label-spalte); max-width: var(--label-spalte); } /* Spalte 2 und 3: dieselbe Logik, jetzt auch für die zweite/dritte Spalte — sorgt dafür, dass eine dreispaltige Tabelle (z.B. Anschaffungsnebenkosten: Kostenart/Betrag/Gebäudeanteil) exakt an denselben Spalten-Grenzen fluchtet wie eine zweispaltige Tabelle (z.B. Parameter: Eigenschaft/Wert) darüber oder darunter — "Gebäudeanteil" beginnt erst dort, wo eine hypothetische zweite Spalte bei den anderen Tabellen enden würde, nicht früher. */ .tabelle-kompakt tr:not(.kopfzeile):not(.summe) > :nth-child(2) { width: var(--wert-spalte); min-width: var(--wert-spalte); max-width: var(--wert-spalte); } .tabelle-kompakt tr:not(.kopfzeile):not(.summe) > :nth-child(3) { width: var(--spalte-3); min-width: var(--spalte-3); max-width: var(--spalte-3); } /* Ausnahme (.tabelle-kompakt.schmal): für Tabellen, deren erste Spalte gar kein Beschriftungs-Label ist, sondern selbst ein kurzer Datenwert (z.B. eine Jahreszahl) oder eine von ohnehin schon 5+ Spalten — dort würde die feste 260px-Breite entweder absurd viel Leerraum erzeugen oder die Tabelle über den Kartenrand hinaustreiben. Diese Tabellen fluchten bewusst NICHT mit den Eigenschaft:Wert-Tabellen der Karte, weil ihre erste Spalte strukturell etwas anderes ist. */ .tabelle-kompakt.schmal tr:not(.kopfzeile):not(.summe) > :first-child, .tabelle-kompakt.schmal tr:not(.kopfzeile):not(.summe) > :nth-child(2), .tabelle-kompakt.schmal tr:not(.kopfzeile):not(.summe) > :nth-child(3) { width: auto; min-width: 0; max-width: none; } /* Karten-Raster-Tabellen (AfA/Geldbeschaffungskosten): Prozent statt fester px, damit die Spalten mit der fluiden Kartenbreite mitwachsen (siehe .karten-raster oben) statt bei jeder Fensterbreite entweder Leerraum zu lassen oder zu überlaufen. Nur Spalte 1 (+ Spalte 2 bei 3-spaltigen Tabellen) bekommt eine feste Prozentzahl; die jeweils letzte Spalte bleibt unangetastet (kein width) und füllt automatisch den Rest — table-layout:fixed verteilt unbestimmte Spalten gleichmäßig auf den Restplatz. .eigenschaften-Tabellen (nur 2 Spalten, z.B. "Ergebnis AfA-Berechnung") bekommen daher NUR die Spalte-1-Regel; ihre 2. Spalte ist dort automatisch "die letzte" und füllt den Rest. WICHTIG bei table-layout:fixed: der Browser bemisst die Spaltenbreiten NUR an der ersten Tabellen- zeile (hier die Kopfzeile), nicht an allen Zeilen wie bei table-layout:auto (dem Standard, den die restliche App weiter nutzt) — die Regel muss deshalb auf tr.kopfzeile sitzen, nicht auf den Datenzeilen, sonst greift sie stillschweigend gar nicht (so gefunden und korrigiert 2026-09-01). */ .karten-raster .tabelle-kompakt:not(.schmal) tr:not(.summe) > :first-child { width: 45%; } .karten-raster .tabelle-kompakt:not(.schmal):not(.eigenschaften) tr:not(.summe) > :nth-child(2) { width: 30%; } /* .lange-bezeichnung (BWG Regulär/Nachträglich): bis 2026-09-01 ein fester max-width:230px-Deckel gegen zu breite Freitext-Bezeichnungen. Jetzt durch die Prozent-Spaltenbreiten unten abgelöst (Bezeichnung ist dort selbst eine feste Prozentzahl der fluiden Tabellenbreite) — kein separater Deckel mehr nötig, die Klasse bleibt nur noch als Markierung "hat lange Freitext-Bezeichnung" im Markup stehen, ohne eigene CSS-Regel. */ /* GRUNDSATZ: Stehen mehrere Tabellen mit identischer Spaltenzahl/-bedeutung untereinander in derselben Karte (hier: Erhaltungsaufwand "nach 3 Jahren" / "innerhalb der ersten 3 Jahre"), müssen ihre Spalten exakt gleich breit sein. Seit der responsiven Umstellung (2026-09-01) genügt dafür, dass beide Tabellen dieselben Prozentwerte bekommen UND beide (via .karten-raster .tabelle-kompakt { width:100% }) dieselbe fluide Kartenbreite ausfüllen — beides zusammen garantiert exakt gleiche Pixelbreite bei jeder Bildschirmgröße, ganz ohne die früher nötige px-Messung an der "breiteren" Tabelle. Bei table-layout:fixed bemisst der Browser die Spalten- breiten NUR an der ersten Zeile (Kopfzeile) — die Regel muss deshalb auf tr.kopfzeile sitzen, nicht auf den Datenzeilen (anders als beim alten table-layout:auto-System, das noch an anderer Stelle in dieser Datei läuft). Kopf-/Summen-/Datenzeilen bekommen die Spaltenbreite dann automatisch identisch, weil sie dieselbe (feste) Tabellenspalte teilen. */ .bereich.erhaltung .tabelle-kompakt.schmal tr:not(.summe) >:nth-child(1) { width: 22%; } .bereich.erhaltung .tabelle-kompakt.schmal tr:not(.summe) >:nth-child(2) { width: 20%; min-width: 78px; } .bereich.erhaltung .tabelle-kompakt.schmal tr:not(.summe) >:nth-child(3) { width: 16%; min-width: 78px; } .bereich.erhaltung .tabelle-kompakt.schmal tr:not(.summe) >:nth-child(4) { width: 22%; min-width: 78px; } /* Spalte 5 (Summe) bewusst ohne width-Regel (nur min-width): table-layout:fixed füllt die letzte unbestimmte Spalte automatisch mit dem Rest (100% - 22-20-16-22 = 20%) — kein manuelles Nachrechnen nötig. min-width wie bei den anderen Zahlenspalten, siehe BWG-Kommentar oben. */ .bereich.erhaltung .tabelle-kompakt.schmal tr:not(.summe) >:nth-child(5) { min-width: 78px; } /* Nur bei -Zellen (echte "Eigenschaft"-Label wie in zweispaltigen Tabellen) auch die Label-Optik (gedämpfte Farbe, fett). Der erste einer mehrspaltigen Datenzeile (z.B. "Makler" in der Kostenart-Spalte) ist ein normaler Datenwert und bleibt normal gestylt — nur die BREITE wird oben universell angeglichen, damit die zweite Spalte überall auf derselben x-Position beginnt. */ .tabelle-kompakt tr:not(.kopfzeile):not(.summe) th:first-child { text-align: left; color: var(--text-muted); font-weight: 600; font-size: 13.5px; text-transform: none; letter-spacing: normal; background: transparent; } /* Kopfzeile: EINZIGE Stelle, die die Uppercase-Label-Optik setzt — jede Tabelle braucht eine (Konsistenz-Regel), egal ob "eigenschaften" oder "daten". Bewusst nicht mehr über einen pauschalen ".daten th"-Selektor gelöst, der versehentlich auch -Summenzeilen traf (Ursache des Schriftgrößen-/Großschreibungs-Bugs). */ .tabelle-kompakt tr.kopfzeile th { color: var(--text-muted2); font-size: 12.5px; letter-spacing: 0.3px; text-transform: uppercase; font-weight: 600; text-align: left; border-bottom: 1px solid var(--divider-soft); } /* Ergebniszeile: Doppelstrich statt Fläche, entschieden 2026-08-28 (Variante C im A/B/C-Vergleich). Grund: der Tabellenkopf (h3.abschnitt-band) bekam eine Farbfläche zurück — wenn die Summenzeile dieselbe Fläche+Rahmen-Optik hätte, wären Kopf und Ergebnis beim Scannen mehrerer Tabellen untereinander nicht mehr unterscheidbar. Ein echter Doppelstrich (CSS border-style:double) ohne Fläche macht die Ergebniszeile weiterhin eindeutig als "das ist die Antwort" erkennbar, ohne mit dem Kopf zu kollidieren. Gilt für
oder sind. */ .tabelle-kompakt tr.summe th, .tabelle-kompakt tr.summe td { border-top: 4px double var(--green); border-bottom: none; background: transparent; font-weight: 700; font-size: 13.5px; color: var(--success-text); padding-top: 11px; padding-bottom: 11px; text-transform: none; letter-spacing: normal; } /* Farbige Kopf-Leiste je Bereich (Banner) — globaler Baustein, Farbe kommt von einer Modifier-Klasse wie .afa/.bwg/.geld/.erhaltung (siehe Steuer-Tab). Ohne Modifier-Klasse bleibt ein Bereich wie bisher neutral. */ .bereich-kopf { padding: 20px 30px 18px; border-bottom: 1px solid var(--card-border); } .bereich-kopf h2 { margin: 0; font-size: 18px; letter-spacing: -0.1px; } /* Feste Mindesthöhe für 2 Zeilen: verhindert, dass nebeneinanderstehende Karten im .karten-raster (align-items:start, jede Kopfzeile wächst sonst nur mit ihrem eigenen Text) unterschiedlich hohe Kopfzeilen bekommen und der Tabelleninhalt darunter dadurch versetzt startet. */ .bereich-untertitel { font-size: 13px; line-height: 1.45; color: var(--text-muted); margin: 4px 0 0; min-height: calc(1.45em * 2); max-width: 480px; } .bereich-inner { padding: 30px 30px 30px; } /* Unterabschnitts-Überschrift als "Tabellenkopf-Kappe": exaktes Spiegelbild der Summenzeile, nur oben statt unten. Gleiche Breite wie die Tabelle selbst (nicht die ganze Karte — keine Vollbreite/negativer Margin mehr), gleiche Eckenrundung (oben statt unten), dieselbe Farbfläche, aber die dicke Trennlinie sitzt UNTER der Überschrift statt darüber (trennt Titel von den Dateneilen, nicht von dem was davor kam). Text startet bei padding-left:0, exakt wie th:first-child in der Tabelle darunter. */ /* Keine Farbfläche mehr dahinter: mit Fläche war der Tabellenkopf einer Tabelle optisch nicht mehr von der Summenzeile der VORHERIGEN Tabelle zu unterscheiden, sobald mehrere Tabellen untereinander stehen (beide gleich getönt + gleich gerundet). Nur noch Text + Unterstrich, kein Kasten. */ /* Variante C (entschieden nach A/B/C-Vergleich 2026-08-28): Farbfläche + Trennlinie unter dem Kopf (gespiegelt zur Summenzeile, oben abgerundet), UND eine eigene, klar andere Behandlung für die Ergebniszeile (Doppelstrich statt Fläche) — dadurch bleiben Kopf und Summenzeile trotz beide "farbig" klar unterscheidbar, auch wenn mehrere Tabellen untereinanderstehen. 20px Innenabstand links (statt der sonst üblichen 0,35rem), damit der Kopf-Text nicht an der Rundung klebt. */ /* .tabellen-einheit: Kopf und Tabelle stecken in einem gemeinsamen, auf Inhaltsbreite schrumpfenden Wrapper (width:fit-content) — dadurch übernimmt der Kopf automatisch exakt die Breite SEINER Tabelle, statt immer die volle Kartenbreite zu füllen. Zwei Tabellen mit unterschiedlicher Spaltenzahl dürfen dadurch weiterhin unterschiedlich breite Köpfe haben (gewollt), aber Kopf und Doppelstrich-Zeile derselben Tabelle sind immer exakt gleich breit. Live gegen die App getestet (2026-08-28), aber erst jetzt tatsächlich in style.css/properties_detail.html übernommen. */ .tabellen-einheit { display: block; width: fit-content; margin-bottom: 0; } h3.abschnitt-band { margin: 30px 0 0; padding: 10px 20px 9px 20px; font-size: 15px; font-weight: 700; text-transform: none; letter-spacing: normal; border-bottom: 2px solid var(--divider); color: var(--text-body-soft); border-radius: 10px 10px 0 0; } /* Abstand Kopf→erste Kachel-Tabelle = Abstand zwischen zwei Tabellen = linker/rechter Kartenrand: alle drei einheitlich 30px, sonst wirkt es optisch schief (Marlon 2026-08-28). Zwei Selektoren, weil noch nicht jede Karte den .tabellen-einheit-Wrapper hat (nur AfA-Karte, Stand 2026-08-28) — beide Strukturen (mit/ohne Wrapper) müssen die erste Überschrift trotzdem randbündig ohne zusätzlichen oberen Abstand zeigen. */ .bereich-inner > h3.abschnitt-band:first-child { margin-top: 0; } .bereich-inner > .tabellen-einheit:first-child h3.abschnitt-band { margin-top: 0; } /* Die Tabelle direkt unter einer Kopf-Kappe fluchtet auf denselben 20px wie der Kopf-Text. */ h3.abschnitt-band + table.tabelle-kompakt tr > :first-child { padding-left: 20px; } .grau td, .grau th { color: var(--text-muted) !important; font-weight: 400 !important; } /* Für Herleitungs-Zwischenschritte, die in eine darunterstehende Summe/Bemessungsgrundlage einfließen (z.B. die drei Komponenten der AfA-Bemessungsgrundlage): optisch als Unterpunkt erkennbar durch zusätzlichen Einzug, nicht durch eigene Fläche/Linie wie tr.summe. */ .einrueckung th { padding-left: 40px !important; font-weight: 400 !important; color: var(--text-muted) !important; } .prozent { color: var(--text-muted2); font-weight: 400; font-size: 12.5px; } .bereich.afa .bereich-kopf { background: var(--steuer-afa-bg); border-bottom-color: var(--steuer-afa-border); } .bereich.afa .bereich-kopf h2 { color: var(--steuer-afa-text); } .bereich.afa h3.abschnitt-band { background: var(--steuer-afa-bg); color: var(--steuer-afa-text); border-bottom-color: var(--steuer-afa-text); } .bereich.afa .tabelle-kompakt tr.summe th, .bereich.afa .tabelle-kompakt tr.summe td { border-top-color: var(--steuer-afa-text); color: var(--steuer-afa-text); } .bereich.bwg .bereich-kopf { background: var(--steuer-bwg-bg); border-bottom-color: var(--steuer-bwg-border); } .bereich.bwg .bereich-kopf h2 { color: var(--steuer-bwg-text); } .bereich.bwg h3.abschnitt-band { background: var(--steuer-bwg-bg); color: var(--steuer-bwg-text); border-bottom-color: var(--steuer-bwg-text); } .bereich.bwg .tabelle-kompakt tr.summe th, .bereich.bwg .tabelle-kompakt tr.summe td { border-top-color: var(--steuer-bwg-text); color: var(--steuer-bwg-text); } .bereich.geld .bereich-kopf { background: var(--steuer-geld-bg); border-bottom-color: var(--steuer-geld-border); } .bereich.geld .bereich-kopf h2 { color: var(--steuer-geld-text); } .bereich.geld h3.abschnitt-band { background: var(--steuer-geld-bg); color: var(--steuer-geld-text); border-bottom-color: var(--steuer-geld-text); } .bereich.geld .tabelle-kompakt tr.summe th, .bereich.geld .tabelle-kompakt tr.summe td { border-top-color: var(--steuer-geld-text); color: var(--steuer-geld-text); } .bereich.erhaltung .bereich-kopf { background: var(--steuer-erh-bg); border-bottom-color: var(--steuer-erh-border); } .bereich.erhaltung .bereich-kopf h2 { color: var(--steuer-erh-text); } .bereich.erhaltung h3.abschnitt-band { background: var(--steuer-erh-bg); color: var(--steuer-erh-text); border-bottom-color: var(--steuer-erh-text); } .bereich.erhaltung .tabelle-kompakt tr.summe th, .bereich.erhaltung .tabelle-kompakt tr.summe td { border-top-color: var(--steuer-erh-text); color: var(--steuer-erh-text); } /* Abschreibungsverlauf-Karte: steht (anders als die 4 Herleitungs-Karten) allein außerhalb des .karten-raster, braucht daher dieselbe Padding-Nullung wie sonst .karten-raster .bereich leistet, damit .bereich-kopf/.bereich-inner nicht zusätzlich zur eigenen Basis-Polsterung von .bereich gepolstert werden. Eigene, neutrale Graphit-Tönung (--steuer-verlauf-*, Marlon 2026-09-01: "wie auf den anderen Feldern") statt einer der 4 Themenfarben, weil die Karte über allen 4 Karten steht statt zu einer davon zu gehören. */ .bereich.verlauf { padding: 0; overflow: hidden; } /* Die generelle 2-zeilige Höhenreservierung + 480px-Deckel auf .bereich-untertitel (siehe oben) ist nur für die nebeneinanderstehenden .karten-raster-Karten nötig (gleich hohe Köpfe, Text darf die Breitenberechnung nicht aufblähen) - die Verlauf-Karte steht allein, ist bereits die volle Kartenbreite, und der Untertitel ist kurz genug für eine Zeile (Marlon 2026-09-01: "bessere Auslastung des breiten Bildschirms"). Kein max-width mehr, damit er sich bei ausreichend Platz auf eine Zeile setzt; auf schmalen Bildschirmen bricht er bei Bedarf ganz normal um. */ .bereich.verlauf .bereich-untertitel { max-width: none; min-height: 0; } .bereich.verlauf .bereich-kopf { background: var(--steuer-verlauf-bg); border-bottom-color: var(--steuer-verlauf-border); } .bereich.verlauf .bereich-kopf h2 { color: var(--steuer-verlauf-text); } /* Summenzeile der Jahres-Tabelle im selben Doppelstrich-Design wie tr.summe in den anderen Karten' .tabelle-kompakt-Tabellen (siehe oben) - dort bisher nicht definiert, weil .jahres-tabelle ursprünglich nur für die Dashboard-Prognose ohne eigene Summenzeile gedacht war. */ .jahres-tabelle tr.summe th, .jahres-tabelle tr.summe td { border-top: 4px double var(--steuer-verlauf-text); font-weight: 700; color: var(--steuer-verlauf-text); } /* Aufgliederung eines Postens in seine Bestandteile (z.B. "umlagefähige Kosten" -> Hausgeld/ Grundsteuer/Sonstiges, "Hausgeld" -> davon WEG-Instandhaltungsrücklage): eingerückt + grau, analog zur AfA-Bemessungsgrundlage-Herleitung im Steuer-Tab (.einrueckung) - hier auf die jahres-tabelle übertragen (dort statt als erste Spalte, siehe Grundsatz "bündige Ausrichtung" [[feedback_bündige_ausrichtung_als_designprinzip]]). Rein informativ, kein Einfluss auf die Summenbildung der darüberstehenden Zeile. */ .jahres-tabelle tr.bestandteil td { color: var(--text-muted); font-weight: 400; } .jahres-tabelle tr.bestandteil td.kennzahl-spalte { padding-left: 40px; } /* ---------- Miete-Tab: Kalkulationsparameter, Diagramm, Verlaufskarten ---------- */ /* Generischer kleiner/sekundärer Button (bisher nur der grosse gruene Primär-Button vorhanden) - erster Einsatz beim "Zurücksetzen"-Button des Kalkulationsparameter- Feldes, Farbe kommt wie bei .bereich-Modifiern von aussen (hier --steuer-verlauf-*). */ .btn-klein { padding: 8px 14px; font-size: 12.5px; background: #ffffff; color: var(--steuer-verlauf-text); border: 1px solid var(--steuer-verlauf-border); border-radius: var(--radius-btn); box-shadow: none; font-family: 'Inter', sans-serif; font-weight: 600; cursor: pointer; flex-shrink: 0; } .btn-klein:hover { background: var(--steuer-verlauf-bg); } /* Kalkulationsparameter: bewusst kein Herleitungs-Kartendesign (.tabelle-kompakt) - hier gibt es keine Formel zum Nachvollziehen, nur Eingabewerte fuer einen Was-waere-wenn- Rechner. Kompakte, dichte Zeilen statt der grosszuegigen Herleitungs-Abstaende, damit die Karte schnell ueberflogen werden kann (Marlon 2026-09-02: "die stelle ich einmal ein... relevant sind die Ergebnistabellen und das Diagramm"). Kopf-Design (Farbbanner) wiederverwendet die neutrale .verlauf-Graphittoenung (Marlon: "wie auf den anderen Feldern"), waehrend die beiden Ergebnis-Verlaufskarten stattdessen eingefaerbt sind (.miete-farbe/.bewirtschaftung-farbe unten) - umgekehrte Rollenverteilung zum Abschreibungs-Tab, wo die uebergreifende Verlaufskarte grau und die 4 Einzelkarten bunt sind, hier ist die uebergreifende Annahmen-Karte grau und die (nur 2) Ergebnis- karten bunt. */ .bereich.kalkparam .bereich-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .bereich.kalkparam .bereich-untertitel { min-height: 0; max-width: none; white-space: nowrap; } /* Alle drei Gruppen (Prognose/Ruecklagen/Bewirtschaftungskosten-Matrix) sind dieselbe Tabellenform (1 Kopfzeile + 2 Datenzeilen, bei der Matrix + 1 Summenzeile) - dadurch fluchten sie auf breiten Screens auf gleicher Hoehe (Kopf zu Kopf, Zeile 1 zu Zeile 1), und die Eingabefelder je Gruppe stehen untereinander linksbuendig (echte Tabellenspalte statt einzeln positionierter Zeilen mit unterschiedlich langen Labels). */ .kalkparam-raster { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; } .kalkparam-gruppe { flex: 0 0 auto; } /* min-width:0 hebelt den Flexbox-Default "min-width:auto" aus - ohne das weigert sich die darin, unter ihre eigene (bei table-layout:auto sehr grosszuegig berechnete) Content-Breite zu schrumpfen, und sprengt dadurch die Flex-Zeile (gemessen: Tabelle 1443px breit in einem nur 1055px breiten .kalkparam-raster, Posten-Spalte 880px, Betrag-Spalte 563px fuer wenige Zeichen Text - "Ausrichtung ... seltsam, ... ganz links, ... ganz rechts ... in der Mitte weiß", 2026-09-17). Bekannter CSS-Table-in-Flexbox-Quirk. flex-GROW bewusst 0 (nicht 1): seit die zweite Gruppe (Kalkulationsparameter-Matrix) entfernt wurde, ist .kalkparam-herleitung allein im Raster - mit "flex:1" streckte sie sich auf die volle Kartenbreite (~1008px), wodurch table-layout:auto der Betrag-Spalte viel zu viel Platz zuteilte und dieselbe "Luecke in der Mitte weiss"-Optik zurueckbrachte (2026-09-17, zweite Runde). Ohne Gegenstueck soll die Tabelle nur so breit wie ihr Inhalt sein. */ /* Alle drei Themen (Bewirtschaftungskosten Ist, Abschlagzahlung, Übersicht Sonstige Kosten) sind seit 2026-09-19 EIN gemeinsames "Bewirtschaftungskosten (Ist)"-Feld (Marlon: "Dann haben wir jetzt alle aktuellen Themen sauber in einem IST-Feld zusammengezogen") - je Thema eine .sonstige-kosten-karte mit eigenem farbigen .sonstige-kosten-kopf, untereinander gestapelt statt wie zuvor nebeneinander (kein Flex-Grid mehr noetig, da alle drei Themen inhaltlich unabhaengig sind und nicht auf Augenhoehe verglichen werden muessen). */ .bewirtschaftung-ist-raster { display: flex; align-items: flex-start; gap: 24px; flex-wrap: wrap; } .bewirtschaftung-ist-links, .bewirtschaftung-ist-rechts { flex: 1 1 400px; min-width: 0; } .bewirtschaftung-ist-links .sonstige-kosten-karte:last-child, .bewirtschaftung-ist-rechts .sonstige-kosten-karte:last-child { margin-bottom: 0; } /* Rechte Spalte (Uebersicht Sonstige Kosten) soll unten buendig mit der unteren Tabelle der linken Spalte abschliessen (Marlon: "rechte Tabelle sauber unten mit der linken unteren Tabelle abschliessen lassen"). Reines align-items:stretch WUERDE beide Spalten auf die Hoehe der JEWEILS HOEHEREN strecken - bei vielen Sonstiges-Buchungen also die kurze linke Spalte unnoetig weit aufblasen (leerer Raum unter deren zwei Karten), statt die rechte an die linke anzupassen. Deshalb stattdessen JS (syncSonstigeKostenHoehe in app.js): misst die tatsaechliche Hoehe der linken Spalte und setzt die max-height der rechten Scroll-Liste passend dazu - die Liste bekommt bei Bedarf einen eigenen Scrollbalken, der Rest der Karte (Kopf/Summenzeilen) bleibt unveraendert. */ .bewirtschaftung-ist-rechts .sonstige-kosten-tabelle-scroll { max-height: 286px; } /* Ist-Jahrestabelle steht jetzt in der schmaleren linken Spalte statt ueber die volle Bereichsbreite - table-layout:fixed verhindert, dass die (sonst width:auto) Zahl-Spalten die Kartenbreite sprengen. Alle 6 Spalten gleichmäßig verteilt statt Jahr flexibel + 5 feste Spalten (Marlon 2026-09-19: "Verteile die Spalten ... gleichmäßig ... Sie müssen dafür nicht zwingend mit der Tabelle darunter aligned sein" - die vorherige Kopplung an die Abschlagzahlung-Tabelle war ohnehin nie echt vorhanden, beide Tabellen haben immer schon eigene, unabhaengige Spaltenbreiten). KEINE width-Angabe je Spalte = table-layout:fixed verteilt die 100% Kartenbreite automatisch zu gleichen Teilen (CSS-Standardverhalten ohne Breitenangabe in der ersten Zeile). min-width auf der Tabelle (statt pro Spalte) verhindert, dass "JAHR" bei sehr schmaler Karte wieder mitten im Wort umbricht ("JA"/"HR", das eigentliche Ärgernis) - 6 Spalten x 105px (kleinster Wert, bei dem auch Beträge wie "2.172,46 €" ohne Umbruch passen) = 630px Mindestbreite, darunter scrollt die Karte horizontal statt zu quetschen (siehe .sonstige-kosten-tabelle-scroll{overflow-x:auto}). Spaltenkopf-Text darf bei laengeren Bezeichnungen ("Hausgeld (umlagefähig)") weiterhin an Wortgrenzen umbrechen (2 Zeilen) - das ist app-weit akzeptierte Konvention, nur der KAPUTTE Umbruch mitten im Wort war das Problem. */ .bewirtschaftung-ist-links .sonstige-kosten-tabelle-scroll { overflow-x: auto; } .bewirtschaftung-ist-links .bewirtschaftung-ist-tabelle { table-layout: fixed; width: 100%; min-width: 630px; } .bewirtschaftung-ist-links .bewirtschaftung-ist-tabelle th, .bewirtschaftung-ist-links .bewirtschaftung-ist-tabelle td { overflow-wrap: break-word; } .bewirtschaftung-ist-links .bewirtschaftung-ist-tabelle th.zahl { white-space: normal; } /* Rechtsbuendig statt der .tabelle-kompakt-Standardregel (linksbuendig) - Marlon 2026-09-19: "ordne alle Werte rechtsbündig an - wie auch bei den anderen Tabellen" (Abschlagzahlung nutzt bereits .herleitung-tabelle mit text-align:right). Bei rechtsbuendigen Betraegen endet die letzte Ziffer aller Zeilen an derselben x-Position - der eigentliche Vergleichspunkt bei Geldbetraegen, den Marlon als "nicht sauber aligned" wahrgenommen hatte (linksbuendige Zahlen unterschiedlicher Laenge beginnen zwar an derselben Stelle, enden aber unterschiedlich weit rechts, was beim schnellen Ueberfliegen einer Spalte wie eine Verschiebung wirkt). */ .bewirtschaftung-ist-links .bewirtschaftung-ist-tabelle th.zahl, .bewirtschaftung-ist-links .bewirtschaftung-ist-tabelle td.zahl { text-align: right; } .sonstige-kosten-karte { min-width: 0; margin-bottom: 24px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-card); padding: 16px; } .sonstige-kosten-karte:last-child { margin-bottom: 0; } /* Kopfzeile im .abschnitt-band-Stil der Nachbarkarten (Marlon 2026-09-18: "Design der Überschriften ... an die anderen Felder anpassen"), aber als Flex-Reihe statt reinem

, damit die Jahres-Reiter rechts auf gleicher Hoehe wie die Überschrift Platz finden ("in der rechten oberen Ecke ... auf der Höhe der Überschrift. Damit gewinnen wir Platz in der Vertikale") - dieselben --steuer-bwg-*-Farben wie h3.abschnitt-band in .bereich.bwg, weil die "Sonstige Kosten"-Karte insgesamt schon in der bewirtschaftung-farbe (=bwg-Gruen) steht. */ .sonstige-kosten-kopf { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; padding: 9px 16px; background: color-mix(in srgb, var(--steuer-bwg-bg) 55%, #fff); border-bottom: 2px solid var(--steuer-bwg-text); border-radius: 10px 10px 0 0; /* Ohne dies waren die reinen

-Koepfe (Ist-Tabelle/Abschlagzahlung) niedriger als der Kopf mit Jahres-Reitern (Übersicht Sonstige Kosten) - dessen Buttons brauchen mehr Zeilenhoehe als reiner Ueberschriften-Text (Marlon 2026-09-19: "Höhe der Header ... anpassen"). */ min-height: 46.7px; } .sonstige-kosten-kopf h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--steuer-bwg-text); } .sonstige-kosten-kopf .unter-tab-leiste { margin-bottom: 0; } /* table-layout:fixed haelt die Tabelle innerhalb der Karte (Marlon 2026-09-18: "Grafikfehler, dass die 'Laufend'-Spalten über dem Kachelrand liegen") - ohne das ragte die Betrag-/Laufend- Spalte bei langen Posten-Beschreibungen ueber den rechten Kartenrand hinaus, weil .tabelle-kompakt standardmaessig width:auto (Inhaltsbreite) nutzt. Dieselbe Technik wie .wp-tabelle (table-layout:fixed + overflow-wrap:break-word + feste Spaltenbreiten). */ /* Datum/Art/Betrag/Laufend fest in px (brauchen nie mehr als ihren Inhalt, alles kurze, vorhersehbare Werte - "Da kommt keine Überraschung durch übermäßig lange Texte", Marlon 2026-09-19), Posten ohne width - bekommt bei table-layout:fixed automatisch den kompletten Rest der Kartenbreite und waechst dadurch mit der Karte mit, statt dass die festen Spalten ungenutzten Leerraum ansammeln. Reihenfolge seit 2026-09-19 Datum/Posten/Art/Betrag/Laufend (Datum vor Posten, "das erste wichtige Sortierungskriterium") - Posten bleibt trotzdem Spalte 2 statt Spalte 1, weil die Summenzeilen ihr Label ueber Spalte 1+2 spannen (colspan="2" in _sonstige_kosten.html) und dafuer die volle Restbreite brauchen, sonst umbricht "Summe umlagefähig" & Co. wieder. Art auf 145px verbreitert (vorher 130px reichte nicht ganz fuer "nicht umlagefähig" - Marlon: "die Pillen mit 'nicht umlagefähig' sind umgebrochen"), Laufend im Gegenzug von 130px auf 122px verschmälert (Marlon: "die 'Laufend?'-Pillen [Select-Boxen] sind übermäßig breit gezogen, da wäre Platz zu holen"). */ .sonstige-kosten-tabelle { table-layout: fixed; width: 100%; min-width: 572px; } .sonstige-kosten-tabelle th, .sonstige-kosten-tabelle td { overflow-wrap: break-word; } /* Datum nur in der Datentabelle als eigene Spalte (nth-child) - die Summenzeilen-Tabelle hat dort stattdessen die Ueber-2-Spalten-gemergte Label-Zelle (th[colspan="2"]), die absichtlich OHNE feste Breite bleiben muss (siehe :not(.sonstige-kosten-summe) unten). Art/Betrag/Laufend dagegen ueber nth-LAST-child adressiert, damit sie in BEIDEN Tabellen dieselbe (letzte, zweitletzte, drittletzte) Spalte treffen, obwohl die Summenzeile durch das Colspan ein DOM-Kind weniger hat als die Datenzeilen - nth-child waere dort um eins versetzt. */ .sonstige-kosten-uebersicht-tabelle:not(.sonstige-kosten-summe) th:nth-child(1), .sonstige-kosten-uebersicht-tabelle:not(.sonstige-kosten-summe) td:nth-child(1) { width: 96px; } .sonstige-kosten-uebersicht-tabelle th:nth-last-child(3), .sonstige-kosten-uebersicht-tabelle td:nth-last-child(3) { width: 150px; } .sonstige-kosten-uebersicht-tabelle .badge { white-space: nowrap; } .sonstige-kosten-uebersicht-tabelle th:nth-last-child(2), .sonstige-kosten-uebersicht-tabelle td:nth-last-child(2) { width: 92px; } .sonstige-kosten-uebersicht-tabelle th:nth-last-child(1), .sonstige-kosten-uebersicht-tabelle td:nth-last-child(1) { width: 104px; } .sonstige-kosten-tabelle td { vertical-align: middle; } /* Rechtsbuendig statt der .tabelle-kompakt-Standardregel (linksbuendig) - Marlon 2026-09-19: "ordne alle Werte rechtsbündig an - wie auch bei den anderen Tabellen" (urspruenglich als Reaktion auf "Die Summenbeträge ... sind nicht sauber mit den Beträgen darüber aligned" - die Betraege waren technisch schon exakt gleich positioniert, wirkten aber trotzdem "verschoben", weil linksbuendige Zahlen unterschiedlicher Laenge am Ende unterschiedlich weit reichen; rechtsbuendig loest das). */ .sonstige-kosten-uebersicht-tabelle th.zahl, .sonstige-kosten-uebersicht-tabelle td.zahl { text-align: right; } /* Sicherheitsnetz gegen Spalten-Kollaps bei normaler (nicht extra breiter) Fensterbreite (Marlon 2026-09-19: "Die Formatierung ist komplett zerschossen" - bei ~1440px Fensterbreite, einem ganz gewöhnlichen Laptop-Bildschirm, reichte die Kartenbreite (~490px) nicht für alle festen Spalten UND die flexible Posten-Spalte gleichzeitig - table-layout:fixed quetschte dadurch die Posten-Spalte auf wenige Pixel (Text lief buchstabenweise untereinander), statt sie einfach schmal, aber lesbar zu lassen. min-width auf der Tabelle oben verhindert das: ist die Karte breiter als 570px, füllt die Tabelle sie wie gewohnt aus (width:100%, Posten wächst); ist sie schmaler, bleibt die Tabelle bei 570px und dieser Wrapper scrollt stattdessen horizontal. Muss die Summenzeilen-Tabelle MIT umschliessen (nicht nur die Datenliste), sonst wuerden beide Tabellen bei Bedarf unabhaengig und unterschiedlich breit ueberlaufen und nicht mehr zueinander fluchten. */ .sonstige-kosten-horizontal-scroll { overflow-x: auto; } /* Vertikale Scrollleiste ab ca. 6 Zeilen (2026-09-18, "damit das Feld bei vielen Posten nicht beliebig lang wird ... 6 Einträge der linken Tabelle sind ein guter Orientierungswert") - Hoehe von Kopfzeile + 6 Datenzeilen bei ETW-1 gemessen (282,3px), aber knapp aufgerundet: bei exakt 282px zeigte der Browser trotzdem schon eine Scrollleiste (Marlon: "Links z.B. sind alle Einträge sichtbar, aber die Scrollleiste bereits vorhanden") - Sub-Pixel-Rundung von table-layout:fixed liess den tatsaechlichen Inhalt hauchdünn ueber das Max erreichen. */ .sonstige-kosten-tabelle-scroll { max-height: 286px; overflow-y: auto; } .sonstige-kosten-laufend-form { margin: 0; } .sonstige-kosten-laufend-select { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; padding: 3px 6px; border-radius: var(--radius-pill); border: none; cursor: pointer; } .sonstige-kosten-laufend-select.laufend { color: var(--success-text); background: var(--success-bg); } .sonstige-kosten-laufend-select.einmalig { color: var(--text-muted2); background: var(--divider-soft); } .sonstige-kosten-laufend-select.unbekannt { color: var(--badge-frei-text); background: var(--badge-frei-bg); } /* Ohne dies liess die Browser-Standardspanne unter

(~16px) die gestreckte Kachel sichtbar tiefer enden als die Tabelle selbst (Marlon 2026-09-17: "sollte nicht höher sein als die Tabelle, das ist unschön") - beide Boxen matchen jetzt exakt dieselbe Höhe. */ .herleitung-tabelle { margin-bottom: 0; } /* Herleitung des Nebenkosten-Abschlags (2026-09-17): dieselbe .kalkparam-tabelle-Optik, nur mit Art-Spalte (Badge statt Text) und rechtsbuendiger Betrag-Spalte. */ .herleitung-tabelle th.zahl, .herleitung-tabelle td.zahl { text-align: right; } .herleitung-tabelle tr.kopfzeile th.zahl { text-align: right; } /* table-layout:fixed + feste Betrag-Spaltenbreiten (Marlon 2026-09-19: "übermäßig viele weiße Stellen ... bei der Abschlagszahlung rechts von Posten. [...] Da kannst du mit festen Breiten arbeiten und dafür ... die erste Spalte mit den Kostennamen flexibilisieren") - ohne table-layout:fixed verteilte der Browser (table-layout:auto) ungenutzten Platz proportional auf ALLE Spalten inkl. Posten, die dadurch breiter als ihr eigentlicher Inhalt wurde und sichtbaren Leerraum vor der Betrag-Spalte liess. Posten (Spalte 1) bleibt bewusst ohne width - absorbiert jetzt den Rest der Kartenbreite statt die beiden Betrag-Spalten. */ /* 6 logische Spalten (Posten per colspan="3", Betrag/Monat, eine leere Abstandsspalte, Betrag/Jahr) statt frueher 3, KEINE explizite width je Spalte - table-layout:fixed verteilt dadurch alle 6 automatisch gleich breit, exakt wie bei .bewirtschaftung-ist-tabelle (auch 6 gleich breite Spalten, kein Zufall). Dadurch fluchten Betrag/Monat mit Grundsteuer (Spalte 4) und Betrag/Jahr mit Summe (Spalte 6) der Ist-Tabelle darueber, weil beide Tabellen dieselbe Kartenbreite durch dieselbe Spaltenzahl teilen (Marlon 2026-09-19: "Ordne ... die beiden Betragspalten der Abschlag-Tabelle so an, dass Betrag/Jahr in derselben Flucht steht wie Summe. Und Betrag/Monat in derselben Flucht wie Grundsteuer"). Die leere Spalte 5 steht fuer "Sonstiges" (hat in dieser Tabelle keine Entsprechung) und bleibt deshalb ohne Inhalt. */ .herleitung-tabelle-scroll { overflow-x: auto; } .kalkparam-tabelle.herleitung-tabelle { table-layout: fixed; width: 100%; min-width: 630px; } .kalkparam-tabelle.herleitung-tabelle td { overflow-wrap: break-word; } /* Die Posten-Spalte ist durch colspan="3" jetzt auf 50% der Kartenbreite begrenzt statt unbegrenzt breit - die .kalkparam-tabelle-Basisregel (white-space:nowrap auf th:first-child, gedacht fuer die fruehere unbegrenzte Breite) liess lange Bezeichnungen wie "Empfohlener Nebenkosten-Abschlag" dadurch in die Betrag-Spalte hineinlaufen statt umzubrechen. */ .kalkparam-tabelle.herleitung-tabelle tr:not(.kopfzeile) th:first-child { white-space: normal; overflow-wrap: break-word; } /* Schriftgroessen an die Nachbartabellen dieses Tabs angeglichen (.wp-tabelle) - die .kalkparam-tabelle-Basiswerte (11.5px Kopf/12.5px Zeilenlabel, gedeckte --text-body-soft) stammen noch aus dem Ankauf-Modul, das dieselbe Klasse nutzt und hier unveraendert bleiben muss; nur .herleitung-tabelle bekommt die groesseren/dunkleren Werte der uebrigen Tabellen im Bewirtschaftung-Tab (Marlon 2026-09-17: "Schriftart und -stil ... an den Stil der anderen Kacheln anpassen"). */ /* .herleitung-tabelle allein reicht als Selektor NICHT (gleiche Spezifitaet wie die .kalkparam-tabelle-Basisregeln unten, die aber SPAETER im Stylesheet stehen und damit trotz dieses "Overrides" gewinnen wuerden) - deshalb wie bei tr.summe unten beide Klassen verketten, das erzwingt hoehere Spezifitaet unabhaengig von der Reihenfolge im Stylesheet. */ .kalkparam-tabelle.herleitung-tabelle tr.kopfzeile th { font-size: 12.5px; letter-spacing: 0.3px; } .kalkparam-tabelle.herleitung-tabelle tr:not(.kopfzeile) th:first-child { font-size: 13.5px; color: var(--text-body); } /* Zeilenhoehe an die Nachbartabellen angeglichen (Marlon 2026-09-19: "Abschlagzahlung sieht recht gestaucht aus") - die .kalkparam-tabelle-Basiswerte (4px vertikales Padding, aus dem Ankauf-Modul) liessen Zeilen dort sichtbar niedriger wirken als die 9.6px vertikales Padding von .tabelle-kompakt (Ist-Tabelle/Übersicht Sonstige Kosten). */ .kalkparam-tabelle.herleitung-tabelle th, .kalkparam-tabelle.herleitung-tabelle td { padding-top: 9.6px; padding-bottom: 9.6px; } .kalkparam-tabelle.herleitung-tabelle tr.summe th, .kalkparam-tabelle.herleitung-tabelle tr.summe td { padding-top: 11px; padding-bottom: 11px; } /* Nur die Summenzeilen (Empfohlener Nebenkosten-Abschlag/Differenz) sind fett - Posten wie Hausgeld/Grundsteuer/Sonstiges bleiben regulaer (Marlon 2026-09-17: "nur die Summenbeträge ... fett machen. Dafür aber auch links den Summenposten"). Ueberschreibt gezielt das font-weight:400 der allgemeinen Zeilenbeschriftungsregel oben (gleiche Spezifitaet, aber spaeter in der Kaskade). Die Bewertungs-Pille wanderte in die Empfohlener-Abschlag-Kachel rechts neben die Tabelle (Marlon: "Das macht keinen Sinn ... die soll rechts neben die Tabelle") - hier bleibt nur noch der Zahlenwert. Label UND Wert einer Summenzeile bekommen dieselbe Farbe (Marlon 2026-09-17: "bei den anderen Tabellen ist die Summe grün ... den Summenposten links grün. Folge da einem einheitlichen Stil.") - dieselbe steuer-bwg-Farbe wie die Werte-Spalte (.ergebnis-Regel weiter unten), statt einer eigenen Textfarbe. */ .kalkparam-tabelle.herleitung-tabelle tr.summe th:first-child { font-weight: 700; color: var(--steuer-bwg-text); } /* Differenz-Zeile (2026-09-17, "58,05 nur grün, wenn der Abschlag größer ist. Aber rot, wenn er zu niedrig ist."): Vorzeichen-basierte Ausnahme von der einheitlichen Summen-Gruenfarbe oben - rot, wenn der aktuelle Vertrags-Abschlag den empfohlenen unterschreitet (delta_monat > 0, Erhöhung noetig), gruen sonst. ID-Selektoren statt Klassenketten, damit die Kaskade unabhaengig von der Anzahl umgebender .bewirtschaftung-farbe-Klassen zuverlaessig gewinnt (siehe renderParamSummary() in app.js fuer die Live-Variante). */ #out-abschlag-delta-label.positiv, #out-abschlag-delta.positiv, #out-abschlag-delta-jahr.positiv { color: var(--success-text); } #out-abschlag-delta-label.negativ, #out-abschlag-delta.negativ, #out-abschlag-delta-jahr.negativ { color: #b3453f; } .badge-neutral { color: var(--text-muted2); background: var(--divider-soft); } .kalkparam-einheit { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; margin-left: 6px; } /* .param-input jetzt eigene Regel (statt nur ueber .kalkparam-tabelle input erreichbar) - dieselbe Klasse wird auch in .chart-parameter-eintrag verwendet (PROGNOSE/RUECKLAGEN-Zeile ueber den Diagrammen), die faellt sonst auf die viel breitere Browser-Standardbreite eines zurueck. Breite deutlich schmaler als vorher (72px -> 56px bzw. 42px fuer Prozentwerte, Marlon 2026-09-14: "passend zur tatsaechlichen Ziffernzahl, vorher wirkte es seltsam breit"). */ .param-input { width: 56px; padding: 4px 6px; font-size: 12.5px; text-align: right; border-radius: 6px; border: 1px solid #dde5d7; font-family: 'Inter', sans-serif; } .param-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; } .param-input.prozent { width: 42px; } /* Chrome/Edge reservieren fuer die Spinner-Pfeile eines ca. 16-20px, die bei so schmalen Boxen der eigentlichen Zahl fehlten (dadurch wurde z.B. "180,97" auf "180,9" abgeschnitten) - Pfeile sind bei Dezimalwerten ohnehin kein sinnvolles Bedienelement, daher ausgeblendet statt die Box wieder breiter zu machen. */ .param-input::-webkit-outer-spin-button, .param-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .param-input { -moz-appearance: textfield; } .kalkparam-tabelle { border-collapse: collapse; } .kalkparam-tabelle th, .kalkparam-tabelle td { padding: 4px 16px 4px 0; text-align: left; } /* Gleiche Optik wie die uebrigen Tabellenkoepfe der App (z.B. "Miete pro Monat & Jahr" in der jahres-tabelle unten) - das ist der normale
-Stil aus dieser Datei (11.5px/600/0.4px), hier nur explizit wiederholt statt implizit geerbt, plus die eigene Trennlinie unter der Kopfzeile. Selektor jetzt tr.kopfzeile statt tr:first-child (Marlon 2026-09-15: "Entferne ... die Spalten PROGNOSE und RÜCKLAGEN" - diese beiden Gruppen- Kopfzeilen sind aus dem HTML entfernt, nur die Bewirtschaftungskosten-Matrix behält ihre echte Spaltenkopfzeile und bekommt dafür explizit class="kopfzeile", statt sich implizit auf "erste Zeile der Tabelle" zu verlassen - bei den anderen beiden Tabellen wäre das nach dem Entfernen der Kopfzeile sonst die erste Parameter-Zeile gewesen). */ .kalkparam-tabelle tr.kopfzeile th { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600; color: var(--text-muted2); padding-bottom: 7px; border-bottom: 1px solid var(--divider-soft); } /* Zeilenbeschriftung (erste Spalte einer Parameter-Zeile): dieselbe Schriftgroesse/-farbe wie zuvor - bewusst NICHT die Kopfzeilen-Grossschrift, das ist ein Zeilenname wie "Mieterhöhung p.a." oder "Umlagefähig", keine Spaltenueberschrift. */ .kalkparam-tabelle tr:not(.kopfzeile) th:first-child { font-size: 12.5px; font-weight: 400; text-transform: none; letter-spacing: normal; color: var(--text-body-soft); white-space: nowrap; } .kalkparam-tabelle td.na { padding-right: 16px; } .kalkparam-na-box { display: inline-block; width: 58px; padding: 4px 6px; font-size: 12.5px; text-align: center; border-radius: 6px; border: 1px solid #e7ebe1; background: #f2f4ef; color: var(--text-faint); } .kalkparam-tabelle td.ergebnis, .kalkparam-tabelle .ergebnis { font-weight: 700; color: var(--steuer-verlauf-text); font-size: 13px; white-space: nowrap; } /* Innerer Span mit denselben Box-Massen (width/padding) wie .kalkparam-tabelle input darueber, rechtsbuendiger Text darin - dadurch endet die Ziffer der Hausgeld-Summe exakt an derselben x-Position wie die (rechtsbuendigen) Ziffern der beiden Eingabe- felder in dieser Spalte, statt am linken Zellenrand zu kleben. Die TD selbst bleibt normale table-cell-Zelle, nur der Span simuliert die Input-Box. */ .kalkparam-tabelle td.wert span { display: inline-block; width: 58px; padding: 4px 6px; font-size: 12.5px; color: var(--text-body); text-align: right; white-space: nowrap; } /* Summenzeile: Doppelstrich als Trennlinie ueber die ganze Zeile, aber die fette/farbige Hervorhebung bleibt auf die eigentliche Gesamtsumme (.ergebnis) beschraenkt - die Zeile hat sonst keine Beschriftung (Doppelstrich signalisiert "Summe" bereits) und keine Kaestchen in den nicht genutzten Spalten. */ .kalkparam-tabelle tr.summe th, .kalkparam-tabelle tr.summe td { border-top: 4px double var(--steuer-verlauf-text); padding-top: 8px; } /* Farbliche Differenzierung der beiden Ergebnis-Verlaufskarten (Mieten-/Bewirtschaftungs- kostenentwicklung) - eigene, spezifischere Klassen statt eines Farbwechsels direkt auf .bereich.verlauf, damit die Kalkulationsparameter-Karte (bewusst neutral grau, siehe oben) unberuehrt bleibt. Blau/Gruen wiederverwendet von den Steuer-Tab-Themenfarben (.afa/.bwg), analog zur dortigen Mehrfarbigkeit. */ .bereich.verlauf.miete-farbe .bereich-kopf { background: var(--steuer-afa-bg); border-bottom-color: var(--steuer-afa-border); } .bereich.verlauf.miete-farbe .bereich-kopf h2 { color: var(--steuer-afa-text); } .bereich.verlauf.miete-farbe .jahres-tabelle tr.summe th, .bereich.verlauf.miete-farbe .jahres-tabelle tr.summe td { border-top-color: var(--steuer-afa-text); color: var(--steuer-afa-text); } /* Mehrere Tabellen in einer gemeinsamen .jahres-tabelle-Scrollbox (Marlon 2026-09-11: "eine Scroll-Leiste, die beide Tabellen bewegt" - siehe Mietenentwicklung-Karte): jede Tabelle behält ihre eigene Kopfzeile mit Label in der .kennzahl-spalte-Zelle (kein zusätzliches h3 - "wir brauchen keine weiteren Überschriften", Marlon 2026-09-11), nur der Scroll-Container ist gemeinsam. */ .bereich.verlauf.bewirtschaftung-farbe .bereich-kopf { background: var(--steuer-bwg-bg); border-bottom-color: var(--steuer-bwg-border); } .bereich.verlauf.bewirtschaftung-farbe .bereich-kopf h2 { color: var(--steuer-bwg-text); } .bereich.verlauf.bewirtschaftung-farbe .jahres-tabelle tr.summe th, .bereich.verlauf.bewirtschaftung-farbe .jahres-tabelle tr.summe td { border-top-color: var(--steuer-bwg-text); color: var(--steuer-bwg-text); } /* Gruen-Abstufungen innerhalb des Bewirtschaftungs-Tabs (Marlon 2026-09-19: "alle Kacheln dasselbe Mintgruen ... etwas anstrengend"): jede Karte ueberschreibt nur die --steuer-bwg-*-Variablen, damit Kopf, Summenzeilen, Ergebnis-Zellen und Diagramm-Balken der Karte gemeinsam mitwechseln. Die Ist-Karte bleibt im Basis-Mintgruen. */ .bewirtschaftung-farbe.gruen-a { --steuer-bwg-text: #135f55; } .bewirtschaftung-farbe.gruen-b { --steuer-bwg-bg: #e3f1df; --steuer-bwg-border: #c4e2bc; --steuer-bwg-text: #2f7a35; } .bewirtschaftung-farbe.gruen-d { --steuer-bwg-bg: #dbeee4; --steuer-bwg-border: #b7dcc8; --steuer-bwg-text: #1d6b4a; } /* Abschlagzahlung-Karte (2026-09-17): gehoert inhaltlich zur Bewirtschaftungskosten- Entwicklung direkt darunter (aktuelles Jahr vs. Mehrjahresprognose derselben Kosten) - bekommt deshalb dieselbe Gruen-Familie statt des Blaugrau-Defaults von .bereich.verlauf (der eigentlich fuer den Finanzierungs-Tab/Tilgungsplan gedacht ist und hier nur als ungenutzter Rueckfall durchschlug, siehe .kalkparam-tabelle td.ergebnis). */ .bereich.verlauf.bewirtschaftung-farbe .kalkparam-tabelle td.ergebnis, .bereich.verlauf.bewirtschaftung-farbe .kalkparam-tabelle .ergebnis { color: var(--steuer-bwg-text); } .bereich.verlauf.bewirtschaftung-farbe .kalkparam-tabelle tr.summe th, .bereich.verlauf.bewirtschaftung-farbe .kalkparam-tabelle tr.summe td { border-top-color: var(--steuer-bwg-text); } /* Gestapeltes Balkendiagramm (ein Balken je Jahr, Nettokaltmiete + umlagefaehige Kosten = Warmmiete) statt Liniendiagramm (Marlon 2026-09-02: "ein Balken je Jahr... Werte nur alle 5 Jahre"). "Kalt"/"warm" farblich wörtlich genommen: Blau fuer die Nettokaltmiete, ein warmer Orangeton fuer den Anteil, der sie zur Warmmiete macht - kein Rot, das ist im Design die Signalfarbe fuer Warnungen/negative Werte (siehe .kachel-pill.negativ). */ .chart-svg { width: 100%; height: 340px; } .chart-gitter { stroke: var(--divider-soft); stroke-width: 1; } .chart-achse { font-size: 11px; fill: var(--text-muted2); font-family: 'Inter', sans-serif; } .chart-wert { font-size: 10.5px; fill: var(--text-body-soft); font-weight: 600; font-family: 'Inter', sans-serif; } .chart-balken-kalt { fill: var(--steuer-geld-text); } .chart-balken-umlage { fill: #d9832f; } .chart-balken-heute.chart-balken-kalt { fill: #164f6d; } .chart-balken-heute.chart-balken-umlage { fill: #b3661f; } .chart-legende { display: flex; gap: 22px; padding: 4px 0 0 76px; flex-wrap: wrap; } .chart-legende-eintrag { font-size: 12.5px; color: var(--text-body-soft); display: inline-flex; align-items: center; gap: 7px; } .chart-punkt { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } .chart-punkt-kalt { background: var(--steuer-geld-text); } .chart-punkt-warm { background: #d9832f; } /* Bewirtschaftungskosten-Diagramm: Mintgrün-Familie statt Blau/Orange, eigene Farbe je Posten (Hausgeld/Instandhaltung/Mietausfall), analog zur bereits bestehenden bwg-Farbfamilie (--steuer-bwg-*) der Tabelle direkt darunter. */ .chart-balken-hausgeld { fill: var(--steuer-bwg-text); } .chart-balken-weg-ruecklage { fill: #2f8a6e; } .chart-balken-instandhaltung { fill: #4fae8c; } .chart-balken-mietausfall { fill: #a8dcc7; } .chart-balken-heute.chart-balken-hausgeld { fill: #125e54; } .chart-balken-heute.chart-balken-weg-ruecklage { fill: #1f6b53; } .chart-balken-heute.chart-balken-instandhaltung { fill: #34886a; } .chart-balken-heute.chart-balken-mietausfall { fill: #7dc2a5; } .chart-punkt-hausgeld { background: var(--steuer-bwg-text); } .chart-punkt-weg-ruecklage { background: #2f8a6e; } .chart-punkt-instandhaltung { background: #4fae8c; } .chart-punkt-mietausfall { background: #a8dcc7; } /* "Sonstiges (nicht umlagefähig)" setzt die Gruen-Familie noch eine Stufe heller fort, Erträge/ Gutschriften bekommt bewusst KEINE Gruen-/Orangefaerbung - als Gutschrift ist es kein echter Kostenposten, sondern schmaelert den Balken wieder (siehe berechne() in app.js: ertraege ist negativ) - neutrales Grau (--text-muted2) signalisiert "andere Art von Segment". */ .chart-balken-sonstiges-nicht-umlage { fill: #c9e8da; } .chart-balken-heute.chart-balken-sonstiges-nicht-umlage { fill: #9ecfb7; } .chart-balken-ertraege { fill: var(--text-muted2); } .chart-balken-heute.chart-balken-ertraege { fill: #4f5a53; } .chart-punkt-sonstiges-nicht-umlage { background: #c9e8da; } .chart-punkt-ertraege { background: var(--text-muted2); } /* Umlagefaehige Posten (2026-09-17, "Ergänze das Diagramm um die fehlenden Posten ... dieselbe Grundfarbe wie im Mietentab"): dieselbe Orange-Grundfarbe wie .chart-balken-umlage im Mietentab-Diagramm (#d9832f), als eigene Farbfamilie mit 2 helleren Tönen fuer Grundsteuer/ Sonstiges - dadurch bleiben umlagefaehige (Orange) und nicht umlagefaehige (Gruen) Posten auf einen Blick unterscheidbar, obwohl beide jetzt im selben Balken gestapelt sind. */ .chart-balken-hausgeld-umlage { fill: #d9832f; } .chart-balken-grundsteuer { fill: #e6a15c; } .chart-balken-sonstiges-umlage { fill: #f2c290; } .chart-balken-heute.chart-balken-hausgeld-umlage { fill: #b3661f; } .chart-balken-heute.chart-balken-grundsteuer { fill: #bf7a3d; } .chart-balken-heute.chart-balken-sonstiges-umlage { fill: #cf9a5e; } .chart-punkt-hausgeld-umlage { background: #d9832f; } .chart-punkt-grundsteuer { background: #e6a15c; } .chart-punkt-sonstiges-umlage { background: #f2c290; } /* PROGNOSE/RÜCKLAGEN-Zeile OBERHALB der Diagramme (nicht seitlich daneben - eine seitliche Box hätte das Diagramm gestaucht und schwerer lesbar gemacht, Feedback 2026-09-14). Duplikate der Kalkulationsparameter-Werte, editierbar (siehe synchronisiere() in app.js) - das Diagramm bleibt dadurch bei jeder Bildschirmbreite exakt so breit wie vorher (volle .bereich-inner- Breite). padding-left:76px ist bewusst ein fester Pixelwert, identisch zu .chart-legende{padding-left:76px} darunter und padL=76 im SVG, wodurch "PROGNOSE"/"RÜCKLAGEN" und die Legende garantiert auf derselben x-Position fluchten. flex-wrap:wrap lässt die Einträge auf schmalen Bildschirmen umbrechen statt das Layout zu sprengen. */ .chart-parameter-zeile-oben { display: flex; align-items: baseline; gap: 28px; flex-wrap: wrap; padding: 0 0 14px 76px; margin-bottom: 4px; border-bottom: 1px solid var(--divider-soft); } .chart-parameter-titel { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600; color: var(--text-muted2); flex: 0 0 auto; } .chart-parameter-eintrag { display: inline-flex; align-items: baseline; gap: 7px; font-size: 12.5px; color: var(--text-body-soft); white-space: nowrap; } .chart-parameter-eintrag .wert { font-weight: 700; color: var(--steuer-verlauf-text); font-variant-numeric: tabular-nums; } /* BWG "Regulär"/"Nachträglich": Prozent-Spaltenbreiten statt fester px (abgelöst 2026-09-01, siehe .karten-raster oben) — beide Tabellen füllen jetzt immer die volle, fluide Kartenbreite, egal wie breit der Bildschirm ist. Die 5 inhaltlich gleichen Spalten (Beginn/ND/Enddatum/Basis/AfA) bekommen in BEIDEN Tabellen dieselben Prozentwerte (12/9/12/12/12 = 57%), damit sie bei gleicher Kartenbreite optisch auf gleicher x-Position fluchten, obwohl Nachträglich eine Spalte ("Gehört zu") mehr hat. Bezeichnung übernimmt bei Regulär den kompletten Rest (43%), bei Nachträglich teilt sie sich den Rest mit "Gehört zu" (27% + 16% = 43%). AfA (letzte Spalte) bleibt ohne width-Regel und füllt den verbleibenden Rest automatisch (table-layout:fixed) — kein manuelles Nachrechnen nötig. ND auf 9% (statt ursprünglich 6%) angehoben, damit "10 J." nicht mehr auf zwei Zeilen umbricht ("10" über "J.") — der fehlende Platz kommt bewusst von Bezeichnung, nicht von den anderen Zahlenspalten (Marlon 2026-09-01: bei Regulär ist dort ohnehin viel Luft, bei Nachträglich stört ein zusätzlicher Zeilenumbruch im ohnehin mehrzeiligen Freitext nicht). min-width auf den Datum-/Zahlenspalten: reine Prozentwerte haben keine Untergrenze — bei sehr schmalen Karten (z.B. eine einzelne Spalte auf kleinen Bildschirmen) wurde z.B. "09.02.2026" bei 12% zu schmal und lief über den Rand hinaus, weil ein Datum ohne Leerzeichen nicht umbrechen kann (gefunden 2026-09-01 beim Testen bei 1440px). min-width sorgt für eine harte Untergrenze; reicht der Platz selbst dafür nicht, greift .tabellen-einheit { overflow-x:auto } als Fallback (scrollt dann horizontal statt Inhalt zu verlieren), siehe .karten-raster-Regeln oben. Bezeichnung/Gehört zu bekommen bewusst KEIN min-width — sie dürfen frei umbrechen (mehrzeilig), das ist für Freitext die bessere Lösung als horizontales Scrollen. */ .bereich.bwg .tabelle-kompakt.schmal.bwg-regulaer tr:not(.summe) >:first-child { width: 43%; } .bereich.bwg .tabelle-kompakt.schmal.bwg-nachtraeglich tr:not(.summe) >:first-child { width: 27%; } .bereich.bwg .tabelle-kompakt.schmal.bwg-nachtraeglich tr:not(.summe) >:nth-child(2) { width: 16%; } .bereich.bwg .tabelle-kompakt.schmal.bwg-regulaer tr:not(.summe) >:nth-child(2), .bereich.bwg .tabelle-kompakt.schmal.bwg-nachtraeglich tr:not(.summe) >:nth-child(3) { width: 12%; min-width: 85px; } .bereich.bwg .tabelle-kompakt.schmal.bwg-regulaer tr:not(.summe) >:nth-child(3), .bereich.bwg .tabelle-kompakt.schmal.bwg-nachtraeglich tr:not(.summe) >:nth-child(4) { width: 9%; min-width: 56px; } .bereich.bwg .tabelle-kompakt.schmal.bwg-regulaer tr:not(.summe) >:nth-child(4), .bereich.bwg .tabelle-kompakt.schmal.bwg-nachtraeglich tr:not(.summe) >:nth-child(5) { width: 12%; min-width: 85px; } .bereich.bwg .tabelle-kompakt.schmal.bwg-regulaer tr:not(.summe) >:nth-child(5), .bereich.bwg .tabelle-kompakt.schmal.bwg-nachtraeglich tr:not(.summe) >:nth-child(6) { width: 12%; min-width: 78px; } .bereich.bwg .tabelle-kompakt.schmal.bwg-regulaer tr:not(.summe) >:nth-child(6), .bereich.bwg .tabelle-kompakt.schmal.bwg-nachtraeglich tr:not(.summe) >:nth-child(7) { min-width: 78px; } /* Geldbeschaffungskosten (.bereich.geld, linke Spalte): bekommt dieselben 6 Spaltenpositionen wie BWG Regulär oben (.bereich.bwg), obwohl 3 davon (Spalte 2/3/5) leer bleiben. Grund: layoutAbschreibungenRaster (app.js) verschiebt die Karten je nach Höhe zwischen den beiden .karten-spalte-Containern — landet die Geld-Karte direkt unter der BWG-Karte in derselben Spalte (gleiche Kartenbreite), sollen ihre Spalten möglichst auf den BWG-Spalten fluchten statt zufällig zu versetzen. "Zahldatum" nimmt daher die Position von "Enddatum" (Spalte 4) ein, "Betrag" die von "AfA" (Spalte 6, ohne width-Regel = Rest). "Beschreibung" (Spalte 1) bekommt white-space:nowrap statt eines festen min-width-Werts: bei table-layout:auto zählt für die Spaltenbreite nur das längste EINZELNE WORT als Untergrenze, nicht die ganze Zeile — mehrwortige Beschreibungen brachen deshalb trotz width:43% ohne min-width unnötig zweizeilig um, obwohl rechts (die BWG-Spalten 2+3, hier leer) sichtbar Platz war (Marlon 2026-09-02: "da ist ja rechts viel Platz"). nowrap zwingt den Browser, die ganze Zeile als Mindestbreite zu behandeln, wodurch die Spalte auf jede Beschreibung genau so weit wächst, dass sie einzeilig passt. Die exakte BWG-Spaltenflucht geht damit für ungewöhnlich lange Beschreibungen verloren (Zahldatum/Betrag rutschen dann etwas nach rechts), aber das wiegt weniger schwer als unnötige Zeilenumbrüche. Der .tabellen-einheit-Wrapper (overflow-x:auto) fängt den Fall ab, dass die Tabelle dadurch über die Kartenbreite hinauswächst (identisches Verhalten zu BWG Regulär, das ebenfalls gelegentlich leicht überläuft, siehe dessen Kommentar oben). */ .bereich.geld .tabelle-kompakt.schmal.geld-versetzt tr:not(.summe) >:first-child { width: 43%; white-space: nowrap; } .bereich.geld .tabelle-kompakt.schmal.geld-versetzt tr:not(.summe) >:nth-child(2) { width: 12%; min-width: 85px; } .bereich.geld .tabelle-kompakt.schmal.geld-versetzt tr:not(.summe) >:nth-child(3) { width: 9%; min-width: 56px; } .bereich.geld .tabelle-kompakt.schmal.geld-versetzt tr:not(.summe) >:nth-child(4) { width: 12%; min-width: 85px; } .bereich.geld .tabelle-kompakt.schmal.geld-versetzt tr:not(.summe) >:nth-child(5) { width: 12%; min-width: 78px; } .bereich.geld .tabelle-kompakt.schmal.geld-versetzt tr:not(.summe) >:nth-child(6) { min-width: 78px; } /* ---------- Reiter (Tabs) ---------- */ /* Sitzen außerhalb der weißen Box, direkt auf dem Seitenhintergrund - deshalb gefüllter Zustand (aktiv) statt nur Unterstreichung, für ausreichend Kontrast. */ .tab-leiste { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 80px; } .tab-btn { background: none; border: none; box-shadow: none; padding: 10px 18px; font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 600; color: var(--text-body-soft); cursor: pointer; border-radius: var(--radius-pill); transition: background 140ms ease, color 140ms ease; } .tab-btn:hover { background: rgba(255, 255, 255, 0.55); color: var(--text-heading); } .tab-btn.active { background: var(--card-bg); color: var(--green); box-shadow: 0 2px 6px rgba(20, 58, 44, 0.1); } .unterabschnitt-titel { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 14.5px; color: var(--text-heading); margin: 24px 0 12px; } .feld-hinweis { font-size: 11px; color: var(--text-faint); margin-top: 4px; font-weight: 400; max-width: 480px; } button { padding: 12px 18px; background: var(--green); color: white; border: none; border-radius: var(--radius-btn); font-family: 'Inter', sans-serif; font-weight: 600; font-size: 14px; cursor: pointer; box-shadow: 0 6px 16px rgba(30, 107, 79, 0.24); transition: background 140ms ease; } button:hover { background: var(--green-hover); } /* ---------- Tabellen ---------- */ table { border-collapse: collapse; width: 100%; margin-bottom: 1rem; } th, td { border-bottom: 1px solid var(--divider); padding: 0.6rem 0.7rem; text-align: left; font-size: 13.5px; } th { background: transparent; color: var(--text-muted2); font-size: 11.5px; letter-spacing: 0.4px; text-transform: uppercase; font-weight: 600; border-bottom: 1px solid var(--divider-soft); } /* ---------- Karten / Bereiche ---------- */ .bereich { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-card); padding: 22px 48px 40px; margin-bottom: 18px; } .bereich h2 { margin: 0 0 16px; padding-bottom: 0; border-bottom: none; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 17px; color: var(--text-heading); } .kennzahlen-inline { font-size: 13.5px; color: var(--text-muted); } .karten-raster .kennzahlen-inline { max-width: 480px; } .hinweis { color: var(--text-muted); font-size: 13.5px; max-width: 60rem; margin-bottom: 20px; } /* ---------- KPI-Kacheln ---------- */ /* auto-fit statt fest 4 Spalten: passt sich der tatsächlichen Kachel-Anzahl an (Dashboard: 4, Steuer-Tab: 2) statt leere Spalten zu reservieren, wenn eine Seite weniger Kacheln zeigt. */ /* auto-fit mit 1fr (statt einer festen Obergrenze wie vormals 300px) statt lässt die Kacheln einer Zeile den verfügbaren Platz gleichmäßig unter sich aufteilen, bis die Zeile exakt bündig mit dem Kartenrand der darunterliegenden Felder abschließt (Marlon 2026-09-01: "rechteste KPI-Kachel rechtsbündig mit dem Feld darunter"), statt bei ihrer Mindest-/Wunschbreite stehen zu bleiben und rechts Leerraum zu lassen. */ .kachel-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-bottom: 18px; } .kachel { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-card); padding: 20px 20px 18px; /* Flex-Spalte + Pill mit margin-top:auto (siehe .kachel-pill unten): die Pill sitzt in JEDER Kachel bündig unten, egal wie hoch Label/Wert in dieser Kachel ausfallen - alle Kacheln einer Zeile sind durch das CSS-Grid (.kachel-reihe) ohnehin gleich hoch (Grid-Default align-items:stretch), also fluchten die Pills automatisch in einer Reihe (Marlon 2026-09-11: "Bubbles unten aligned, nicht oben"). */ display: flex; flex-direction: column; } /* min-height reserviert immer 2 Zeilen Platz, auch wenn das eigene Label nur 1 Zeile braucht - dadurch beginnt .kachel-wert (fester Abstand direkt danach) in JEDER Kachel an derselben y-Position, statt sich nach der eigenen (unterschiedlich langen) Label-Zeilenzahl zu richten. Bemessen am längsten aktuell vorkommenden Label (2-zeilig) - GRUNDSATZ, siehe [[feedback_bündige_ausrichtung_als_designprinzip]]: Kacheln/Tabellen mit ungleich langem Text müssen trotzdem bündig fluchten, indem sich alle am längsten Fall orientieren. */ .kachel-label { font-size: 12px; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-muted2); font-weight: 600; line-height: 1.4; min-height: calc(1.4em * 2); } .kachel-wert { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 28px; color: var(--text-heading); margin: 12px 0 8px; letter-spacing: -0.5px; } /* Kennzahl-Zahl folgt derselben Ampelfarbe wie der Punkt daneben, nicht nur schwarz (Marlon 2026-09-22: "die Zahl... muss aber rot sein"). */ .kachel-wert.ampel-text-rot { color: var(--dot-urgent); } .kachel-wert.ampel-text-gelb { color: var(--dot-medium); } .kachel-wert.ampel-text-gruen { color: var(--dot-normal); } .kachel-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 4px 9px; border-radius: var(--radius-pill); color: var(--text-muted); background: var(--divider-soft); align-self: flex-start; margin-top: auto; } .kachel-pill.positiv { color: var(--success-text); background: var(--success-bg); } .kachel-pill.negativ { color: #b3453f; background: #fbe3e1; } .kachel-pill.accent { color: var(--accent); background: var(--accent-soft); } /* Warnstufe (Ampel-Mittelstufe) für die 15%-Grenze-Auslastung 80-90% - dieselben Töne wie das bereits bestehende .badge-frei (Marlon 2026-09-01: Ampelsystem grün/gelb/rot). */ .kachel-pill.warnung { color: var(--badge-frei-text); background: var(--badge-frei-bg); } /* "Overrent" (eigener Mietpreis über der Marktmiete, Miete-Tab-KPI, Marlon 2026-09-10: "overrent orange") - derselbe Orangeton wie die "heute"-Balkenhervorhebung im Mieten-Chart (chart-balken-heute.chart-balken-umlage), keine neue Farbe erfunden. */ .kachel-pill.overrent { color: #b3661f; background: #f9ead8; } /* Umlagefaehig/nicht umlagefaehig (2026-09-18, "Gestalte die Pillen in den KPI-Feldern farblich angelehnt an die Farbgebung weiter unten") - dieselben zwei Farbfamilien wie im Bewirtschaftungskosten-Diagramm/der Entwicklungstabelle darunter: Orange fuer umlagefaehig (identisch mit .overrent/chart-balken-hausgeld-umlage, keine neue Farbe erfunden), das bestehende Bewirtschaftungs-Gruen (--steuer-bwg-*) fuer nicht umlagefaehig. */ .kachel-pill.umlagefaehig { color: #b3661f; background: #f9ead8; } .kachel-pill.nicht-umlagefaehig { color: var(--steuer-bwg-text); background: var(--steuer-bwg-bg); } /* Pillen von Erhaltungsaufwand-bezogenen KPIs bekommen die Kartenfarbe der Erhaltungsaufwendungen- Karte statt des allgemeinen lila .accent (Marlon 2026-09-01: "nicht lila, das ist ja lineare Abschreibungsfarbe" - gemeint ist die visuelle Assoziation mit den AfA-Kacheln, die .accent bislang als einzige nutzten, nicht eine tatsächliche AfA-Farbdefinition). */ .kachel-pill.erhaltung { color: var(--steuer-erh-text); background: var(--steuer-erh-bg); } /* ---------- Status-Badges ---------- */ .badge { font-size: 12.5px; font-weight: 600; padding: 5px 11px; border-radius: var(--radius-pill); display: inline-block; } .badge-erfolg { color: var(--success-text); background: var(--success-bg); } .badge-accent { color: var(--badge-renovierung-text); background: var(--badge-renovierung-bg); } .badge-warnung { color: var(--badge-frei-text); background: var(--badge-frei-bg); } .konto-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: var(--radius-pill); white-space: nowrap; } /* ---------- Jahres-Tabellen (Dashboard-Prognose) ---------- */ /* padding-bottom schafft Luft zwischen der letzten Tabellenzeile und der horizontalen Scrollleiste, die overflow-x:auto sonst direkt an den Inhalt anschließt (Marlon 2026-09-01: "wirkt etwas gequetscht"). */ .jahres-tabelle { overflow-x: auto; padding-bottom: 12px; } .jahres-tabelle table { width: max-content; min-width: 100%; margin-bottom: 0; table-layout: fixed; } /* Mehrere Tabellen in einer gemeinsamen Scrollbox (Marlon 2026-09-11: "eine Scroll-Leiste, die beide Tabellen bewegt") brauchen trotzdem sichtbaren Abstand zueinander wie vorher, als sie noch in getrennten Containern standen ("dicker weißer Bereich dazwischen") - 30px, der app-weite Standardabstand (siehe design_handoff README). */ .jahres-tabelle table + table { margin-top: 30px; } .jahres-tabelle th, .jahres-tabelle td { white-space: nowrap; text-align: right; width: 92px; min-width: 92px; } .jahres-tabelle .kennzahl-spalte { text-align: left; position: sticky; left: 0; background: var(--card-bg); width: 320px; min-width: 320px; white-space: normal; } .jahres-tabelle th.aktuelles-jahr, .jahres-tabelle td.aktuelles-jahr { background: var(--accent-soft); } .jahres-tabelle td.kennzahl-spalte.aktuelles-jahr { background: var(--card-bg); } tr.aktuelles-jahr { background: var(--accent-soft); font-weight: 600; } /* ---------- Sortier-/Filterbare Tabellen ---------- */ th.sortierbar { cursor: pointer; user-select: none; position: relative; padding-right: 18px; } th.sortierbar:hover { color: var(--text-body-soft); } th.sortierbar::after { content: "\2195"; position: absolute; right: 4px; opacity: 0.35; font-size: 11px; } th.sortierbar.sort-asc::after { content: "\2191"; opacity: 1; } th.sortierbar.sort-desc::after { content: "\2193"; opacity: 1; } /* ---------- Finanzierungs-Tab: Verlauf-Chart (Zins/Tilgung-Balken + Restschuld-Linie) ---------- */ /* Bewusst keine neue Farbfamilie (Marlon 2026-09-06: "nimm dieselben Farben aus den anderen Tabs") - die 3 Karten nutzen daher unverändert .bereich.verlauf (siehe oben, Abschreibungs- verlauf-Karte), dieselbe Graphit-Tönung wie dort. Balken/Linie im Chart greifen ebenfalls nur auf bereits bestehende Farb-Tokens zurück statt neue zu definieren: Zinsen = --text-muted (neutral), Tilgung = --steuer-verlauf-text (dieselbe Graphit-Farbe wie der Kartenkopf), Restschuld-Linie = --accent (bereits app-weit die Hervorhebungsfarbe, z.B. aktuelles-jahr). */ .chart-achse-rechts { fill: var(--accent); } .chart-balken-zins { fill: var(--text-muted); } .chart-balken-tilgung { fill: var(--steuer-verlauf-text); } .chart-restschuld-linie { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-dasharray: 5 4; } .chart-punkt-zins { background: var(--text-muted); } .chart-punkt-tilgung { background: var(--steuer-verlauf-text); } .chart-linie-swatch { width: 16px; height: 2px; background: var(--accent); display: inline-block; } /* Unsichtbare, volle Spaltenbreite/-höhe Trefferfläche je Jahr für den Maus-Hover-Tooltip (Marlon 2026-09-10: exakte Werte beim Drüberfahren statt nur alle 5 Jahre). fill:transparent statt fill:none, damit die Fläche trotzdem Maus-Events empfängt; leichte Hover-Einfärbung als Feedback, dass gerade eine Spalte "aktiv" ist. Der eigentliche Tooltip-Text kommt über ein natives SVG--Element in jedem Rect (siehe properties_detail.html) - kein eigenes JS/CSS-Popup mehr (das war position:fixed-basiert und zeigte bei Marlon nichts an). */ .chart-hover-ziel { fill: transparent; pointer-events: all; cursor: pointer; } .chart-hover-ziel:hover { fill: rgba(22, 36, 29, 0.05); } /* ---------- Finanzierungs-Tab: Darlehensuebersicht + Tilgungsplan (gemeinsames Spaltenraster) ---------- */ /* Beide Tabellen haben 11 Spalten mit denselben festen %-Breiten (<colgroup> in _finanzierung.html), also gleiche Gesamtbreite und gleiche Spaltenkanten. Die Planzeilen eines Kredits sind echte Zeilen DERSELBEN Tabelle (keine verschachtelte Tabelle) und stehen dadurch exakt unter den Spalten der Kreditzeile. Der Monatsplan klappt per versteckter Checkbox + Label-Pille auf (reines CSS, kein JavaScript). */ .darlehen-tabelle, .tilgung-tabelle { table-layout: fixed; width: 100%; min-width: 900px; } .darlehen-tabelle th, .tilgung-tabelle th, .darlehen-tabelle th.zahl, .tilgung-tabelle th.zahl { white-space: normal; vertical-align: bottom; } .darlehen-tabelle td:first-child, .tilgung-tabelle td:first-child { white-space: nowrap; } .darlehen-tabelle th, .darlehen-tabelle td, .tilgung-tabelle th, .tilgung-tabelle td { padding-right: 0.5rem; } /* Spalte 3-10 stehen in beiden Tabellen untereinander, aber mit gemischtem Inhalt (z. B. Anteil % oben, Zinsen € unten; Beginn-Datum oben, Gebuehren € unten). Damit die Kanten buendig laufen, sind Kopf und Zellen dieser Spalten in BEIDEN Tabellen einheitlich rechtsbuendig; Bank + Kreditart/Datum bleiben links. */ .darlehen-tabelle th:nth-child(n+3):nth-child(-n+10), .darlehen-tabelle td:nth-child(n+3):nth-child(-n+10), .tilgung-tabelle th:nth-child(n+3):nth-child(-n+10), .tilgung-tabelle td:nth-child(n+3):nth-child(-n+10) { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .darlehen-tabelle th:nth-child(n+3):nth-child(-n+10), .tilgung-tabelle th:nth-child(n+3):nth-child(-n+10) { white-space: normal; } /* Spaltenbreiten setzt finanzierung-spalten.js aus dem breitesten Inhalt + einer gleich grossen Luecke (--luecke) zwischen allen Spalten; die Pillen-Spalte bekommt ihre Luecke als Abstand links. */ .darlehen-tabelle td:nth-child(11), .darlehen-tabelle th:nth-child(11), .tilgung-tabelle td:nth-child(11), .tilgung-tabelle th:nth-child(11) { padding-left: calc(0.35rem + var(--luecke, 0px)); } /* Finanzierungsverlauf: Dreieck vor dem Darlehensnamen klappt die Jahresrechnung des Darlehens auf */ .fv-zeile { display: none; } .fv-dreieck { cursor: pointer; } /* Gruppen der aufgeklappten Rechnung: Ausgangslage -> Zinsen -> Tilgung -> Ergebnis. Ueberschriftszeile je Gruppe + farbiger Balken links (Zinsen gelb, Tilgung gruen, Ergebnis dunkel). */ .fv-tabelle tr.fv-gruppe td { padding-top: 16px; padding-bottom: 2px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; } .fv-tabelle tr.fv-gruppe td.kennzahl-spalte { padding-left: 22px; } .fv-tabelle tr.fv-zeile td.kennzahl-spalte { padding-left: 22px; box-shadow: inset 4px 0 0 var(--fv-farbe, var(--divider-soft)); } .fv-tabelle tr.fv-zeile.fv-unterposten td.kennzahl-spalte { padding-left: 40px; } .fv-tabelle tr.fv-ausgang { --fv-farbe: var(--card-border); } .fv-tabelle tr.fv-zins { --fv-farbe: var(--dot-medium); } .fv-tabelle tr.fv-tilgung { --fv-farbe: var(--green-tile); } .fv-tabelle tr.fv-ergebnis { --fv-farbe: var(--text-heading); } .fv-tabelle tr.fv-ergebnis:not(.fv-unterposten) td { color: var(--text-heading); font-weight: 600; } .fv-tabelle tr.fv-ergebnis.fv-unterposten td { color: var(--text-muted); } .fv-tabelle tr.fv-ergebnis.fv-ende td { border-top: 1px solid var(--card-border); } .fv-dreieck::before { content: "▸"; display: inline-block; width: 1.1em; color: var(--text-muted); } #fv-0:checked ~ table .fv-zeile-0 { display: table-row; } #fv-0:checked ~ table label[for="fv-0"]::before { content: "▾"; } #fv-1:checked ~ table .fv-zeile-1 { display: table-row; } #fv-1:checked ~ table label[for="fv-1"]::before { content: "▾"; } #fv-2:checked ~ table .fv-zeile-2 { display: table-row; } #fv-2:checked ~ table label[for="fv-2"]::before { content: "▾"; } #fv-3:checked ~ table .fv-zeile-3 { display: table-row; } #fv-3:checked ~ table label[for="fv-3"]::before { content: "▾"; } #fv-4:checked ~ table .fv-zeile-4 { display: table-row; } #fv-4:checked ~ table label[for="fv-4"]::before { content: "▾"; } #fv-5:checked ~ table .fv-zeile-5 { display: table-row; } #fv-5:checked ~ table label[for="fv-5"]::before { content: "▾"; } .fv-tabelle .tp-toggle:focus-visible ~ table .fv-dreieck { outline: 2px solid var(--accent); outline-offset: 2px; } .tp-toggle { position: absolute; opacity: 0; pointer-events: none; } .tp-zeile { display: none; } .tp-pille { display: inline-block; min-width: 7.25rem; text-align: center; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--steuer-verlauf-text); background: var(--steuer-verlauf-bg); padding: 5px 8px; border-radius: var(--radius-pill); white-space: nowrap; } .tp-pille::after { content: "Details anzeigen"; } .tilgung-tabelle tr.tp-plan td { background: #f9fbf7; white-space: nowrap; font-variant-numeric: tabular-nums; padding-top: 0.4rem; padding-bottom: 0.4rem; } .tilgung-tabelle tr.tp-plan.jahresende td { border-bottom: 2px solid var(--steuer-verlauf-border); } .tilgung-tabelle tr.tp-aktuell td { font-weight: 700; color: var(--steuer-verlauf-text); } .tp-toggle:focus-visible ~ table .tp-pille { outline: 2px solid var(--accent); outline-offset: 2px; } /* EUR-Spalten rechtsbuendig (wie in den anderen Tabs), Prozent-/Datumsspalten bleiben linksbuendig. table.sortable ergaenzt (Ausgaben-Tab-Umbau, 2026-09-29): die eur-Klasse ist ein App-weiter Standard, nicht auf .tabelle-kompakt beschraenkt - betrifft nur Zellen, die die Klasse tragen. */ table.tabelle-kompakt td.eur, table.tabelle-kompakt th.eur, table.sortable td.eur, table.sortable th.eur { text-align: right; font-variant-numeric: tabular-nums; } /* Kopfzeilen der Analyse-Tabellen duerfen umbrechen (sonst ragen sie bei ~1070 px Kartenbreite ueber den Rahmen) */ table.zs-tabelle th, table.zs-tabelle th.zahl { white-space: normal; vertical-align: bottom; } #tp-0:checked ~ table .tp-zeile-0 { display: table-row; } #tp-0:checked ~ table label[for="tp-0"]::after { content: "Details ausblenden"; } #tp-1:checked ~ table .tp-zeile-1 { display: table-row; } #tp-1:checked ~ table label[for="tp-1"]::after { content: "Details ausblenden"; } #tp-2:checked ~ table .tp-zeile-2 { display: table-row; } #tp-2:checked ~ table label[for="tp-2"]::after { content: "Details ausblenden"; } #tp-3:checked ~ table .tp-zeile-3 { display: table-row; } #tp-3:checked ~ table label[for="tp-3"]::after { content: "Details ausblenden"; } #tp-4:checked ~ table .tp-zeile-4 { display: table-row; } #tp-4:checked ~ table label[for="tp-4"]::after { content: "Details ausblenden"; } #tp-5:checked ~ table .tp-zeile-5 { display: table-row; } #tp-5:checked ~ table label[for="tp-5"]::after { content: "Details ausblenden"; } #tp-6:checked ~ table .tp-zeile-6 { display: table-row; } #tp-6:checked ~ table label[for="tp-6"]::after { content: "Details ausblenden"; } #tp-7:checked ~ table .tp-zeile-7 { display: table-row; } #tp-7:checked ~ table label[for="tp-7"]::after { content: "Details ausblenden"; } #tp-8:checked ~ table .tp-zeile-8 { display: table-row; } #tp-8:checked ~ table label[for="tp-8"]::after { content: "Details ausblenden"; } #tp-9:checked ~ table .tp-zeile-9 { display: table-row; } #tp-9:checked ~ table label[for="tp-9"]::after { content: "Details ausblenden"; } #tp-10:checked ~ table .tp-zeile-10 { display: table-row; } #tp-10:checked ~ table label[for="tp-10"]::after { content: "Details ausblenden"; } #tp-11:checked ~ table .tp-zeile-11 { display: table-row; } #tp-11:checked ~ table label[for="tp-11"]::after { content: "Details ausblenden"; } /* ---------- Finanzierungs-Tab: Bilanz & Belastung (2 Karten unter den Tilgungsplaenen) ---------- */ /* Wie der Rest des Tabs ohne eigene Farbfamilie (.bereich.verlauf, Graphit); die Unterdeckung nutzt das bestehende Warn-Rot (.kachel-pill.negativ). Tabellenzeilen laufen buendig mit den Balken darueber (kein Innenabstand an den Aussenkanten). */ .bilanz-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; align-items: stretch; } @container (max-width: 860px) { .bilanz-raster { grid-template-columns: minmax(0, 1fr); } } /* Subgrid: die zwei Karten einer Reihe teilen sich Kopf- und Inhaltszeile -> Koepfe immer gleich hoch */ .bilanz-raster > section.bereich { display: grid; grid-template-rows: subgrid; grid-row: span 2; } .bilanz-raster > section.bereich > .bereich-kopf, .bilanz-raster > section.bereich > .bereich-inner { min-width: 0; } .bilanz-kopf strong { white-space: nowrap; } .bilanz-raster .bereich { margin-bottom: 0; } .bilanz-block { margin-bottom: 30px; } .bilanz-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; color: var(--text-body-soft); margin-bottom: 8px; } .bilanz-kopf strong { font-size: 20px; font-weight: 600; color: var(--text-heading); letter-spacing: -0.3px; font-variant-numeric: tabular-nums; } .bilanz-stapel, .bilanz-balken { position: relative; height: 14px; border-radius: 7px; background: var(--divider-soft); } .bilanz-stapel { display: flex; overflow: hidden; background: var(--text-muted); opacity: 1; } .bilanz-stapel-bisher { background: var(--steuer-verlauf-text); } .bilanz-stapel-offen { flex: 1; } .bilanz-balken-fuellung { height: 100%; border-radius: 7px; background: var(--steuer-verlauf-text); } .bilanz-balken-fuellung.unterdeckt { background: #c0533f; } .bilanz-balken-marke { position: absolute; right: 0; top: -4px; bottom: -4px; width: 2px; background: var(--text-heading); } .bilanz-balken-marke span { position: absolute; top: 22px; right: 0; font-size: 11px; color: var(--text-muted); white-space: nowrap; } .bilanz-skala { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--text-muted); margin-top: 6px; } .bilanz-liste { width: 100%; margin: 0; } .bilanz-liste th { text-transform: none; letter-spacing: 0; font-size: 13.5px; font-weight: 500; color: var(--text-body-soft); padding-left: 0; } .bilanz-liste td { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; padding-right: 0; white-space: nowrap; } .bilanz-liste tr:last-child th, .bilanz-liste tr:last-child td { border-bottom: none; } .bilanz-liste tr.hervor th, .bilanz-liste tr.hervor td { font-weight: 700; color: var(--steuer-verlauf-text); } .bilanz-liste tr.hervor td.negativ { color: #b3453f; } .bilanz-hinweis { font-size: 12px; color: var(--text-faint); margin: 14px 0 0; line-height: 1.5; } .tabellen-filter { max-width: 320px; margin-bottom: 1rem; } .tabellen-filter-zeile { display: flex; gap: 12px; margin-bottom: 1rem; flex-wrap: wrap; } .tabellen-filter-zeile .tabellen-filter { margin-bottom: 0; } .tabellen-filter-zeile select { padding: 10px 14px; font-size: 14px; font-family: 'Inter', sans-serif; border: 1px solid #dde5d7; border-radius: var(--radius-btn); background: #ffffff; color: var(--text-body); } /* Mieter-Tabelle: table-layout:fixed statt des App-Standards auto (Marlon 2026-09-15: beim Filtern/Ausblenden von Zeilen "ändern sich die Spaltenpositionen") - unter auto bemisst der Browser jede Spalte nach dem Inhalt der SICHTBAREN Zeilen neu, das Aus-/Einblenden von Zeilen beim Filtern (row.style.display, siehe app.js) ändert also laufend die Breiten. Bei fixed zählen nur die Breiten der ersten Zeile (Kopfzeile) - fluchtet danach unabhängig vom Filter- oder Sortierzustand. Spalte 1 (Name) bekommt ebenfalls eine feste Breite statt "kein width" - sonst füllt Name unter fixed den GESAMTEN Rest der (card-breiten) Tabelle aus, was bei nur 6 schmalen Spalten eine riesige Lücke vor "Objekt" erzeugte (Marlon 2026-09-15: "riesig weißes Feld"). width:auto statt der globalen table{width:100%}-Regel lässt die Tabelle exakt auf die Summe der Spaltenbreiten schrumpfen, überschüssiger Platz bleibt rechts neben der letzten Spalte statt mittendrin. */ #mieter-tabelle { table-layout: fixed; width: auto; } #mieter-tabelle tr:first-child > :nth-child(1) { width: 220px; } #mieter-tabelle tr:first-child > :nth-child(2) { width: 90px; } #mieter-tabelle tr:first-child > :nth-child(3) { width: 120px; } #mieter-tabelle tr:first-child > :nth-child(4) { width: 130px; } #mieter-tabelle tr:first-child > :nth-child(5) { width: 130px; } #mieter-tabelle tr:first-child > :nth-child(6) { width: 130px; } /* ---------- Daten-Input: Reiter "Markt" (vormals eigener Nav-Punkt "Markt-Update", seit 2026-09-16 Unter-Tab von "Daten-Input", aus static/_mockup_markt_update.html) ---------- .standort-karte nutzt .bereich fuer die Karten-Optik, ergaenzt nur den Zwei-Spalten-Innenraum (Marktmiete/Marktwert nebeneinander) - dieselbe grid-Technik wie .spalten-zwei im Mietverhaeltnis-Block, hier aber bewusst MIT column-gap (keine Ausrichtungspflicht zu einer Tabelle darunter wie dort). */ .standort-karte { margin-bottom: 24px; } .standort-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; } @media (max-width: 760px) { .standort-inner { grid-template-columns: 1fr; } } .wertblock-titel { font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; font-weight: 700; color: var(--text-muted2); margin: 0 0 4px; } .wertblock-aktuell { font-size: 22px; font-weight: 700; color: var(--text-heading); margin: 0 0 2px; } .wertblock-stand { font-size: 12px; color: var(--text-faint); margin: 0 0 16px; } .wertblock-form { display: flex; gap: 10px; align-items: flex-end; margin-bottom: 14px; flex-wrap: wrap; } .wertblock-form label { font-size: 12px; color: var(--text-muted); display: flex; flex-direction: column; gap: 4px; font-family: 'Inter', sans-serif; } .wertblock-form input { font-family: 'Inter', sans-serif; font-size: 13.5px; padding: 7px 10px; border: 1px solid #dde5d7; border-radius: var(--radius-btn); width: 110px; } .wertblock-form input.quelle { width: 170px; } .wertblock-form button { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: var(--radius-btn); border: none; background: var(--green); color: #fff; cursor: pointer; } .wertblock-form button:hover { background: var(--green-hover); } .verlauf-tabelle { width: 100%; border-collapse: collapse; font-size: 12.5px; } .verlauf-tabelle th, .verlauf-tabelle td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--divider); } .verlauf-tabelle th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px; color: var(--text-muted2); font-weight: 600; } .verlauf-tabelle td.zahl, .verlauf-tabelle th.zahl { text-align: right; } /* ---------- Wirtschaftspläne (Bewirtschaftung-Tab, 2026-09-16) ---------- Itemisierte Posten je Jahr - eigene Tabelle statt .tabelle-kompakt, weil hier Umlagefaehig- /Ruecklage-Badges pro Zeile stehen (wie .tabelle-kompakt.daten, nur mit Badge-Spalte). */ .wp-neu-formular { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--divider); } .wp-neu-formular label { font-size: 12px; color: var(--text-muted); display: flex; flex-direction: column; gap: 4px; font-family: 'Inter', sans-serif; } .wp-neu-formular input, .wp-neu-formular select { font-family: 'Inter', sans-serif; font-size: 13.5px; padding: 7px 10px; border: 1px solid #dde5d7; border-radius: var(--radius-btn); } .wp-neu-formular button { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: var(--radius-btn); border: none; background: var(--green); color: #fff; cursor: pointer; } .wp-neu-formular button:hover { background: var(--green-hover); } /* Sammel-Erfassungsformular (2026-09-16): ein Betragsfeld je Katalog-Posten statt eines Einzeln-Hinzufuegen-Formulars - siehe wirtschaftsplan_posten_bulk in app.py. <details>/ <summary> hält das Formular standardmäßig eingeklappt (16 Katalog-Zeilen + 3 freie Zeilen waeren sonst viel Platz fuer eine selten genutzte Eingabe). */ .wp-erfassung { margin-top: 16px; } .wp-erfassung summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--steuer-bwg-text); padding: 6px 0; } .wp-erfassung-tabelle { margin-top: 12px; } .wp-erfassung-tabelle input, .wp-erfassung-tabelle select { font-family: 'Inter', sans-serif; font-size: 13px; padding: 5px 8px; border: 1px solid #dde5d7; border-radius: 6px; } .wp-erfassung-tabelle td.zahl input { width: 100px; text-align: right; } .wp-erfassung-tabelle td input[type="text"] { width: 100%; } /* 3-Bereiche-Gliederung (2026-09-16, dritte Ueberarbeitung): Marlon nach Ansicht der echten Dokumente - "es gibt eigentlich immer nur 3 Kategorien ... darunter eine Summe und dann final die Ausweisung des neuen Wohngeldes". h3.abschnitt-band (schon im Steuer-Tab etabliert) ist die EINZIGE Gliederungsebene fuer die 3 Bereiche - keine weiteren Zwischenueberschriften mehr ("nimm die Zwischenüberschriften raus", zweite Korrektur). Keine "Art"-Spalte mehr: der Bereich (die h3 darueber) sagt bereits, ob umlagefaehig/nicht/Ruecklage - eine durchgehende Tabelle je Bereich statt vieler kleiner Einzeltabellen laesst die Zahlen "enger untereinander" stehen (Marlons Formulierung). */ .wp-endsumme { margin-top: 20px; font-size: 14px; } .wp-endsumme strong { font-size: 16px; color: var(--steuer-bwg-text); } /* Spalten-Fluchtung ueber ALLE .wp-tabelle-Tabellen einer Karte hinweg (2026-09-17, GRUNDSATZ siehe oben bei .karten-raster): Bereichs-Vergleichstabellen (Posten/Verteilerschlüssel/PLAN (WEG)/IST (WEG)/PLAN (ETW)/IST (ETW)/Delta) UND die Hausgeld-Tabelle darunter haben exakt dieselben 7 Spalten-Slots - die Hausgeld-Tabelle fuellt Spalte 1 (Titel) und laesst Spalte 2 (kein Verteilerschlüssel) leer, damit "Plan (Jahr)" exakt unter "PLAN (WEG)" beginnt (Marlon: "lass die Spalte PLAN (JAHR) unterhalb von WEG-PLAN beginnen"). table-layout:fixed sorgt dafuer, dass die Prozentbreiten wirklich exakt einhalten (sonst bemisst der Browser jede Tabelle einzeln an ihrem eigenen Inhalt, siehe .karten-raster-Kommentar weiter oben zu table-layout:fixed). */ .wp-tabelle { table-layout: fixed; width: 100%; } .wp-tabelle th, .wp-tabelle td { overflow-wrap: break-word; } .wp-tabelle th:nth-child(1), .wp-tabelle td:nth-child(1) { width: 22%; } .wp-tabelle th:nth-child(2), .wp-tabelle td:nth-child(2) { width: 19%; } .wp-tabelle .badge { white-space: nowrap; } .wp-tabelle th:nth-child(3), .wp-tabelle td:nth-child(3), .wp-tabelle th:nth-child(4), .wp-tabelle td:nth-child(4), .wp-tabelle th:nth-child(5), .wp-tabelle td:nth-child(5), .wp-tabelle th:nth-child(6), .wp-tabelle td:nth-child(6), .wp-tabelle th:nth-child(7), .wp-tabelle td:nth-child(7) { width: 11.8%; } /* Anke-Import: Fehler-/Vorschau-Anzeige (2026-09-16, Daten-Input-Seite) - dieselben Rot-Töne wie .annahmen-hinweis/.wert-annahme im Ankauf-Modul (#b3453f/#8f3530/#fbe3e1), damit "hier stimmt etwas nicht bzw. wurde nicht geprüft" app-weit gleich aussieht. */ .anke-fehler { background: #fbe3e1; color: #8f3530; border-radius: 12px; padding: 12px 16px; font-size: 13.5px; margin-top: 12px; } .anke-fehler p { margin: 0 0 4px; font-weight: 600; } .anke-fehler ul { margin: 0; padding-left: 18px; } .wp-vorschau { margin-top: 12px; padding: 14px 16px; background: var(--bg-soft, #f6f8f4); border-radius: 12px; } .wp-vorschau-tabelle th.wp-hinweis, .wp-vorschau-tabelle td.wp-hinweis, .wp-vorschau-tabelle .wp-hinweis { text-align: left; } .wp-hinweis { color: #b3453f; font-size: 12.5px; } tr.hat-hinweis td:not(.wp-hinweis) { color: #8f3530; } .wp-vorschau form { margin-top: 14px; } /* Jahres-Reiter innerhalb der Wirtschaftspläne-Karte (2026-09-16) - eigener, kleinerer Pill- Stil statt der großen .tab-leiste/.tab-btn-Optik (die ist für die Haupt-Objekt-Tabs reserviert und würde hier, verschachtelt innerhalb eines bereits aktiven Tabs, zu dominant wirken). */ .unter-tab-leiste { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; } .unter-tab-leiste.jahre .unter-tab-btn { font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 600; padding: 5px 14px; border-radius: var(--radius-pill); border: 1px solid var(--card-border); background: #fff; color: var(--text-muted); cursor: pointer; } .unter-tab-leiste.jahre .unter-tab-btn:hover { background: var(--steuer-bwg-bg); } .unter-tab-leiste.jahre .unter-tab-btn.active { background: var(--steuer-bwg-bg); color: var(--steuer-bwg-text); border-color: var(--steuer-bwg-border); } /* ---------- Ankaufsmodul (aus dem freigegebenen Mockup static/_mockup_ankauf.html, 2026-09-11) ---------- Ampel = nur Farbpunkt/Skalenzone; rot gepunktet unterstrichene Zahlen = beruhen auf ungeprüfter Standardannahme (calc/ankauf_herkunft.py). Mobile Regeln sind auf .ankauf-seite begrenzt. */ .ankauf-seite ::selection { background: var(--success-bg); color: var(--text-heading); } .ankauf-zahl, .kriterien td, .ankauf-tabelle td, .kaskade td, .vergleich td { font-variant-numeric: tabular-nums; } .ampel-punkt { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--card-border); vertical-align: middle; flex-shrink: 0; } .ampel-gruen { background: var(--dot-normal); } .ampel-gelb { background: var(--dot-medium); } .ampel-rot { background: var(--dot-urgent); } .ampel-keine { background: var(--card-border); } .wert-annahme { color: #b3453f; text-decoration: underline dotted; text-decoration-thickness: 1.5px; text-underline-offset: 4px; cursor: help; } .wert-gesetzt { display: inline-flex; align-items: center; gap: 5px; } .stift { width: 12px; height: 12px; stroke: var(--text-muted); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .quelle-tag { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 0.2px; color: var(--steuer-geld-text); background: var(--steuer-geld-bg); border-radius: 6px; padding: 1px 6px; margin-left: 6px; vertical-align: 1px; } .herkunft-legende { display: flex; flex-wrap: wrap; gap: 18px; font-size: 12px; color: var(--text-muted); margin: 0 0 18px; } .herkunft-legende span { display: inline-flex; align-items: center; gap: 6px; } .status-pill { display: inline-block; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--divider); color: var(--text-body-soft); } .status-besichtigt, .status-geprueft { background: var(--steuer-bwg-bg); color: var(--steuer-bwg-text); } .status-angefragt { background: var(--steuer-geld-bg); color: var(--steuer-geld-text); } .status-angebot { background: var(--accent-soft); color: var(--accent); } .status-gekauft { background: var(--success-bg); color: var(--success-text); } .status-abgelehnt, .status-gestoppt { background: var(--divider-soft); color: var(--text-muted); } .status-wiedervorlage { background: var(--badge-frei-bg); color: var(--badge-frei-text); } .faellig { color: #b3453f; font-weight: 600; } .pipeline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 18px; } .pipeline a { display: inline-flex; align-items: baseline; gap: 7px; padding: 6px 12px; border-radius: var(--radius-pill); background: var(--card-bg); border: 1px solid var(--card-border); color: var(--text-body-soft); font-size: 13.5px; font-weight: 500; } .pipeline a b { font-weight: 700; color: var(--text-heading); } .pipeline a.active { background: var(--green); border-color: var(--green); color: #fff; } .pipeline a.active b { color: #fff; } .pipeline a.leer { color: var(--text-faint); background: transparent; border-color: transparent; padding: 6px 8px; } .pipeline .trenner { width: 1px; height: 22px; background: var(--card-border); margin: 0 6px; } .ankauf-tabelle { table-layout: auto; } .ankauf-tabelle th, .ankauf-tabelle td { overflow-wrap: normal; } .ankauf-tabelle td { white-space: nowrap; } .ankauf-tabelle td:nth-child(2) { white-space: normal; min-width: 190px; } .ankauf-tabelle tr.abgeschlossen td { color: var(--text-faint); } .ankauf-tabelle td.zahl, .ankauf-tabelle th.zahl { text-align: right; } .unterzeile { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; } .nur-mobil { display: none; } /* Szenario variieren: Ergebnis-Leiste oben (mitlaufend), darunter Regler in Spalten und die Wohnungstabelle in voller Breite – ohne horizontale Scrollleiste. Das Formular umschließt beide Parameter-Bereiche und darf daher nicht unter die globale form-Regel (max. 480 px, Flex-Spalte) fallen. */ #szenario-form { display: block; max-width: none; } /* Speichern-Aktionen sitzen jetzt im Header links vom Einklapp-Pfeil statt unten im Formular (Marlon 2026-09-22) - der alte Abstand nach oben passte nur im Fließtext-Kontext. */ .regler-kopf .aktionen { margin-top: 0; } /* Kopf/Inhalt nutzen jetzt .bereich-kopf/.bereich-inner (sauberer Header wie bei den Objekte-Tabs, Marlon 2026-09-22) statt der alten festen 28px - .bereich-inner bringt mit 30px praktisch dieselbe zusätzliche Breite für Tabelle und Regler. */ /* Drei Spalten (links/mitte/rechts): Titel links, Szenario-Pillen mittig (mit Abstand zum Speichern-Button auf beiden Seiten), "Szenario speichern" rechts vor dem Einklapp-Dreieck - alle drei auf derselben Höhe wie die Überschrift, vertikal zentriert (Marlon 2026-09-22). */ .regler-kopf { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 24px; row-gap: 10px; padding-right: 46px; } .regler-kopf .szenario-leiste { margin: 0; justify-self: center; } /* .bereich h2 (margin-bottom:16px) kommt später in der Datei und gewinnt sonst gegen .bereich-kopf h2 trotz gleicher Spezifität - das verschob den Titel im Grid sichtbar aus der Mitte (Marlon 2026-09-22, Screenshot). Höhere Spezifität statt Reihenfolge verlassen. */ .regler-kopf h2 { margin: 0; } /* Mehr Luft zum Einklapp-Dreieck (28px breit, sitzt bei right:30px) - der Button allein reichte nicht, beide überlagerten sich (Marlon 2026-09-22, Screenshot). */ .regler-kopf-rechts { justify-self: end; margin-right: 20px; } /* Sämtliche dunkelgrünen Buttons im Szenariofeld (Dialog + der zweite Speichern-Button unten im selben Formular) auf Mintgrün, passend zur "Basisszenario"-Pille (Marlon 2026-09-22). Andere .btn-primary (z.B. Schwellenwerte-Dialog) bleiben unverändert. */ #szenario-speichern-dialog .btn-primary, #ankauf-parameter .aktionen .btn-primary { background: var(--green-tile); box-shadow: 0 6px 16px rgba(42, 143, 102, .24); } #szenario-speichern-dialog .btn-primary:hover, #ankauf-parameter .aktionen .btn-primary:hover { background: var(--green-strong); } @media (max-width: 760px) { .regler-kopf { grid-template-columns: 1fr; justify-items: start; } .regler-kopf .szenario-leiste, .regler-kopf-rechts { justify-self: start; } } /* Einklapp-Dreieck immer oben rechts in der Ecke, unabhängig davon wie der übrige Kopf umbricht (Aktionen-Zeile ist oft zu lang für eine Reihe) - deshalb absolut statt im Flex-Fluss (Marlon 2026-09-22: "links des Einklapp-Pfeiles"). Gleiche Mechanik wie .kpi-pfeil. */ .regler-einklappen { position: absolute; top: 20px; right: 30px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; padding: 0; margin: 0; background: transparent; color: inherit; border: 1px solid var(--card-border); border-radius: 50%; box-shadow: none; cursor: pointer; } .regler-einklappen:hover { background: var(--success-bg); border-color: var(--green-tile); } .regler-pfeil { width: 12px; height: 12px; fill: none; stroke: var(--text-muted); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; } .regler-einklappen[aria-expanded="true"] .regler-pfeil { transform: rotate(180deg); } /* Regler: Beschriftung oben, darunter Start-/Endwert links und rechts der Spur; der aktuelle Wert steht als Blase direkt über dem Reglerpunkt (Blase ist ein Textfeld – Klick erlaubt exakte Eingabe). */ .regler-reihe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 40px; margin: 6px 0 4px; } .regler-reihe.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 28px; } /* Auf breiten Bildschirmen 4 Regler nebeneinander, auf schmaleren Stück für Stück weniger (Marlon 2026-09-22: "mein Bildschirm ist so breit... auf kleineren Bildschirmen Stück für Stück in die nächste Zeile rutschen"). */ .regler-reihe.vier { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 24px; } .regler-reihe > * { min-width: 0; } /* Kaufpreis/Baukosten (linkes Drittel) vs. Bewirtschaftung (rechte zwei Drittel), als eigener Kopf mit zwei Textsegmenten statt einem durchgehenden Strich, damit die Lücke exakt über der Spaltengrenze liegt (Marlon 2026-09-22). */ .regler-abschnitt-kopf { display: grid; grid-template-columns: 1fr 2fr; gap: 0 28px; margin: 30px 0 0; } /* Nebenkosten/Steuern/Sonstige unter Finanzierung: dieselbe Zwei-Zeilen-Aufteilung (Kopf mit Lücke im Strich + Inhalt) wie Kaufpreis/Bewirtschaftung, nur mit drei statt zwei Spalten (Marlon 2026-09-22: "dasselbe Design wie im Rest des Feldes... Abstände zwischen den Strichen"). */ .regler-abschnitt-kopf.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 900px) { .regler-abschnitt-kopf.drei { grid-template-columns: 1fr; } } .regler-eingaben > .regler-abschnitt-kopf:first-child { margin-top: 0; } .regler-abschnitt-kopf .abschnitt-band-teil { padding: 10px 0 9px; font-size: 15px; font-weight: 700; border-bottom: 2px solid var(--divider); color: var(--text-body-soft); } .regler-kauf-bewirtschaftung { display: grid; grid-template-columns: 1fr 2fr; gap: 6px 28px; margin: 6px 0 4px; } .regler-bewirtschaftung-spalte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 24px; } /* Grundsteuer/Sonstiges umlagefähig ergänzt (Marlon 2026-09-22) - 6 statt 4 Regler, 3 statt 2 je Zeile, damit es bei 2 Zeilen bleibt ("Die Regler sind aktuell recht breit"). */ .regler-bewirtschaftung-spalte.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 20px; } @media (max-width: 900px) { .regler-abschnitt-kopf, .regler-kauf-bewirtschaftung { grid-template-columns: 1fr; } .regler-bewirtschaftung-spalte.drei { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 500px) { .regler-bewirtschaftung-spalte, .regler-bewirtschaftung-spalte.drei { grid-template-columns: 1fr; } } /* Bündig mit dem Inhalt darunter statt der üblichen 20px-Einrückung des Steuer-Tab-Bandes (Marlon 2026-09-22: "Überschriften so nach links rücken, dass sie bündig... abschließen"). */ .regler-eingaben h3.abschnitt-band { padding-left: 0; padding-right: 0; } /* Oben braucht der Regler mehr Platz für die Werte-Blase über der Spur (.regler-feld padding-top:30px) - unten fehlte das Gegenstück, wodurch bei gestapelten Reglern (z.B. Nebenkosten-Spalte) die nächste Überschrift fast auf dem Balken klebte (Marlon 2026-09-22: "Abstand nach unten geringer als nach oben"). */ .regler { padding: 4px 0 16px; } .regler-label { display: block; font-size: 13px; color: var(--text-body-soft); margin-bottom: 2px; } .regler-spur { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; gap: 10px; } .regler-grenze { font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; padding-bottom: 1px; } .regler-feld { position: relative; padding-top: 30px; } /* Restbalken hell/weiß-grau statt der dunkleren --steuer-verlauf-border-Linie - die ist für Haarlinien gedacht, als Flächenfüllung liest sie sich zu grau (Marlon 2026-09-22: "alle Regler auf grau statt weiß"). --card-border ist die hellere Fläche aus demselben Farbsystem. Nur Griff/Blase tragen Akzent. */ .regler input[type="range"] { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 6px; margin: 0; padding: 0; border-radius: 4px; cursor: pointer; background: var(--card-border); } .regler input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--sage); border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(20, 36, 29, .15); cursor: pointer; } .regler input[type="range"]::-moz-range-track { height: 6px; border-radius: 4px; background: var(--card-border); border: none; } .regler input[type="range"]::-moz-range-progress { height: 6px; border-radius: 4px; background: var(--sage); } .regler input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--sage); border: 2px solid #fff; cursor: pointer; } .regler input[type="range"]:disabled { background: var(--divider); cursor: default; } .regler input[type="range"]:disabled::-webkit-slider-thumb { background: var(--text-faint); } .regler input[type="range"]:disabled::-moz-range-thumb { background: var(--text-faint); } .regler-blase { position: absolute; top: 0; transform: translateX(-50%); display: inline-flex; align-items: baseline; gap: 3px; padding: 2px 7px; border-radius: 7px; background: var(--sage); color: #fff; font-size: 12.5px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; box-shadow: 0 1px 3px rgba(0, 0, 0, .18); } .regler-blase::after { content: ""; position: absolute; left: 50%; bottom: -4px; margin-left: -4px; border: 4px solid transparent; border-bottom: 0; border-top-color: var(--sage); } .regler-blase input { width: 6ch; min-width: 2ch; max-width: 12ch; border: 0; padding: 0; margin: 0; background: transparent; color: inherit; font: inherit; text-align: right; outline: none; } .regler-blase input:focus { background: rgba(255, 255, 255, .18); border-radius: 3px; } .regler-blase span { font-weight: 500; opacity: .9; } .regler-blase.wert-annahme { background: #b3453f; text-decoration: none; } .regler-blase.wert-annahme::after { border-top-color: #b3453f; } .regler-klein .regler-feld { padding-top: 24px; } .regler-klein .regler-blase { font-size: 12px; padding: 1px 6px; } .regler-klein .regler-grenze { font-size: 11px; } /* Datumsfelder (Kaufdatum, Übergang) lassen sich nicht als Schieberegler abbilden - gleiche Label-/Abstandsoptik wie die echten Regler, aber ein normales Datumsfeld statt Schieber (Marlon 2026-09-22: "dasselbe Design wie oben, Regler für die Parameter"). */ .regler-datum .param-input.datum { width: 140px; } .regler-datum .param-input.standard::placeholder { color: #b3453f; opacity: 1; } /* Fertigstellung/Erstbezug nebeneinander statt untereinander (Marlon 2026-09-22) - die schmale Nebenkosten-Spalte reicht nicht für zwei 140px-Datumsfelder, deshalb hier volle Spaltenbreite je Feld statt der festen 140px. */ .datumsreihe { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; margin-bottom: 4px; } .datumsreihe .param-input.datum { width: 100%; } /* Baubeginn (2026-09-23): drittes Datumsfeld neben Fertigstellung/Erstbezug, nur bei Bauprojekten mit mindestens einer verkauften Einheit (s. verkauf_aktiv in ankauf_detail.html). */ .datumsreihe.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Herleitung unter den Nebenkosten-/Steuer-Reglern macht sichtbar, worauf die Sätze wirken - der volle Kaufpreis (bei Bauprojekten also Baukosten+Grundstück zusammen), nicht nur ein Teil davon (Marlon 2026-09-22: "Wie werden diese beiden Werte angewendet? Nur auf das Grundstück?"; später dieselbe Optik auch unter Steuern für die AfA-Herleitung: "Formatierung ... harmonisieren"). */ .regler-herleitung { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--divider); font-size: 12px; color: var(--text-muted); } .regler-herleitung-basis { margin-bottom: 4px; } .regler-herleitung-zeile { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; font-variant-numeric: tabular-nums; } .regler-herleitung-zeile.summe { font-weight: 600; color: var(--text-heading); border-top: 1px solid var(--divider); margin-top: 4px; padding-top: 6px; } /* Sauberer Trennstrich zwischen Nebenkosten-Herleitung und der neuen Investitionskosten-Sektion darunter, mit spürbar mehr Abstand als zwischen einzelnen Reglern (Marlon 2026-09-22: "ausreichend Abstand und sauberem Strich drunter für eine neue Sektion"). */ .spalten-trenner { border-top: 1px solid var(--divider); margin: 28px 0 0; } .spalten-trenner + .unterabschnitt-titel { margin-top: 20px; } /* Sozialwohnung: eigener Regler bleibt bedienbar (folgt per Default der zentralen Sozialmiete, kann aber manuell abweichen) - Lila markiert ihn als an die Sozialmiete gekoppelt (Marlon 2026-09-22). Der BALKEN selbst trägt das helle --lila-hell, der Griff (Kreis) bleibt weiß mit hellgrauem Rand - umgekehrt zu den normalen Reglern, deren Balken hell und deren Griff farbig (Salbeigrün) ist. Dieselbe Optik gilt für den zentralen "Miete Sozialwohnungen"-Regler, der diese Zeilen steuert. */ tr.ist-sozial input[type="range"], .regler[data-name="sozial_miete_qm"] input[type="range"] { background: var(--lila-hell); } tr.ist-sozial input[type="range"]::-moz-range-track, .regler[data-name="sozial_miete_qm"] input[type="range"]::-moz-range-track { background: var(--lila-hell); } tr.ist-sozial .regler-blase, .regler[data-name="sozial_miete_qm"] .regler-blase { background: var(--lila); } tr.ist-sozial .regler-blase::after, .regler[data-name="sozial_miete_qm"] .regler-blase::after { border-top-color: var(--lila); } tr.ist-sozial input[type="range"]::-webkit-slider-thumb, .regler[data-name="sozial_miete_qm"] input[type="range"]::-webkit-slider-thumb { background: #fff; border-color: var(--card-border); } tr.ist-sozial input[type="range"]::-moz-range-thumb, .regler[data-name="sozial_miete_qm"] input[type="range"]::-moz-range-thumb { background: #fff; border-color: var(--card-border); } /* Bottom-Margin ergänzt (statt nur oben) - sonst war der Abstand zur nächsten Sektion (z.B. Nebenkosten-Band) kleiner als anderswo (z.B. vor "Zielmiete", wo der letzte Regler noch sein eigenes 16px padding-bottom beisteuert) - Marlon 2026-09-22: "über Nebenkosten scheint mir weniger Platz nach oben zu sein als z.B. oberhalb von 'Zielmiete'". */ .regler-abgeleitet { margin: 4px 0 16px; font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums; } .feld-hinweis-inline { font-size: 12px; font-weight: 400; color: var(--text-muted); text-transform: none; letter-spacing: 0; margin-left: 8px; } /* Wohnungstabelle: eigene Spaltenbreiten (nicht .tabelle-kompakt mit fixer Label-/Wertspalte), Schieber-Spalte nimmt den Rest */ .regler-wohnungen { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 13.5px; } .regler-wohnungen th { font-size: 11px; font-weight: 600; letter-spacing: .2px; text-transform: uppercase; color: var(--text-muted); text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--card-border); } .regler-wohnungen td { padding: 7px 6px; border-bottom: 1px solid var(--divider); vertical-align: middle; } /* Auf allen Zeilen gleich (nicht nur den lila Sozialwohnung-Zeilen) - sonst verschieben sich nur deren Inhalte und nichts fluchtet mehr vertikal (Marlon 2026-09-22: "nicht mehr sauber vertikal aligned"). */ .regler-wohnungen th:first-child, .regler-wohnungen td:first-child { padding-left: 14px; } .regler-wohnungen th:last-child, .regler-wohnungen td:last-child { padding-right: 14px; } /* Gesamtsumme neutral statt farbig (wie im Finanzierungstab: [data-tab-panel="finanzierung"] .tabelle-kompakt tr.summe) - der Doppelstrich ist die Summe aus grünen UND lila Zeilen, keiner der beiden Akzente passt dafür allein (Marlon 2026-09-22). */ .regler-wohnungen tfoot tr:first-child td { border-top: 4px double var(--steuer-verlauf-text); } .regler-wohnungen tfoot td { color: var(--steuer-verlauf-text); border-bottom: 0; } .regler-wohnungen tfoot td.gesamt { color: var(--steuer-verlauf-text); } /* Spaltenbreiten per <colgroup> im Template statt gleicher 1/8-Anteile (Marlon 2026-09-22, zweiter Anlauf: "gleichmäßig verteilt" hiess eigentlich, dass die SICHTBAREN Einträge sauber verteilt aussehen - gleiche px-Breiten je Spalte reichten dafür nicht, weil kurze Werte wie "2" oder "60,90" bei Rechtsbündigkeit nah an der nächsten Spalte kleben und links viel Leerraum bleibt). Je nach Inhalt bemessen: Lage-Text und der Miete-je-m²-Regler brauchen mehr Platz als Personen/m². */ /* Gesamtmiete je Wohnung wie eine Summe: fett, Farbe folgt der Zeile (grün normal, lila Sozialwohnung) */ .regler-wohnungen .gesamt { font-weight: 700; color: var(--sage); padding-right: 0; } .regler-wohnungen tr.ist-sozial .gesamt { color: var(--lila); } .regler-wohnungen th.gesamt { color: var(--sage); } .regler-wohnungen .unterzeile { display: block; font-weight: 400; font-size: 12px; } .regler-wohnungen .eur { text-align: right; font-variant-numeric: tabular-nums; } /* Sozialwohnung-Schalter mittig statt linksbündig - sonst kleben Personen/m² (rechtsbündig) und der Schalter (bis dahin linksbündig) optisch aneinander, während rechts von ihm Leerraum bleibt (Marlon 2026-09-22: "Sozialwohnungsschalter links, Quadratmeter rechts aligned"). */ .regler-wohnungen .mitte { text-align: center; } .regler-wohnungen td.eur { white-space: nowrap; } .regler-wohnungen th { vertical-align: bottom; line-height: 1.3; } .regler-wohnungen td.lage strong { display: block; font-weight: 600; color: var(--text-heading); } .regler-wohnungen td.lage span { display: block; font-size: 12px; color: var(--text-muted); hyphens: auto; overflow-wrap: break-word; } /* Personen/Lage jetzt bearbeitbar statt reinem Text - unauffällig wie Fließtext, erst bei Fokus/Hover als Eingabefeld erkennbar (Marlon 2026-09-22). */ .regler-wohnungen td.lage input, .regler-wohnungen td.eur input { width: 100%; border: 1px solid transparent; background: transparent; font: inherit; color: inherit; padding: 1px 3px; border-radius: 5px; font-size: 12px; } /* Bei den gleichmäßig verteilten Spalten (bewusst so, Marlon 2026-09-22) reicht die Breite bei langen Lage-Texten nicht für den vollen Text - sauberes "…" statt mittendrin abgeschnittenem Text ohne jedes Zeichen dafür. */ .regler-wohnungen td.lage input { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .regler-wohnungen td.eur input { text-align: right; font-variant-numeric: tabular-nums; } .regler-wohnungen td.eur.mitte input { text-align: center; } .regler-wohnungen td.lage input:hover, .regler-wohnungen td.eur input:hover, .regler-wohnungen td.lage input:focus, .regler-wohnungen td.eur input:focus { border-color: var(--card-border); background: var(--card-bg); } .regler-wohnungen tr.ist-sozial td { background: #f4f1f8; } /* Sozialwohnung: ganz leicht grau-lila hinterlegt */ .regler-wohnungen tfoot tr.summe td { font-weight: 600; } .ja-nein { display: inline-flex; border: 1px solid var(--card-border); border-radius: 8px; overflow: hidden; } .ja-nein label { position: relative; padding: 4px 8px; font-size: 12.5px; cursor: pointer; color: var(--text-body-soft); } .ja-nein input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .ja-nein label:has(input[value="1"]:checked) { background: var(--lila); color: #fff; } .ja-nein label:has(input[value="0"]:checked) { background: var(--sage); color: #fff; } .ja-nein label:has(input[value="1"]:focus-visible) { outline: 2px solid var(--lila); outline-offset: -2px; } .ja-nein label:has(input[value="0"]:focus-visible) { outline: 2px solid var(--sage); outline-offset: -2px; } /* Verkauf-Sektion (2026-09-23): Regler dort und die beiden zentralen Regler "Verkaufspreis Wohnungen"/"Verkaufspreis Stellplatz" darunter in Gold statt Gruen/Lila - kein Zeilenhintergrund noetig, die Sektion hat ja bereits eine eigene Tabelle bekommen (Marlon 2026-09-23: "Den Hintergrund der Zeilen brauchst du farblich nicht zu hinterlegen"). */ #tabelle-verkauf .gesamt { color: var(--gold); } #tabelle-verkauf tr.ist-sozial .gesamt { color: var(--lila); } #tabelle-verkauf .regler input[type="range"], .regler[data-name="verkaufspreis_qm"] input[type="range"], .regler[data-name="stellplatzverkauf_betrag"] input[type="range"], .baudarlehen-block .regler input[type="range"] { background: var(--gold-hell); } #tabelle-verkauf .regler input[type="range"]::-moz-range-track, .regler[data-name="verkaufspreis_qm"] input[type="range"]::-moz-range-track, .regler[data-name="stellplatzverkauf_betrag"] input[type="range"]::-moz-range-track, .baudarlehen-block .regler input[type="range"]::-moz-range-track { background: var(--gold-hell); } #tabelle-verkauf .regler-blase, .regler[data-name="verkaufspreis_qm"] .regler-blase, .regler[data-name="stellplatzverkauf_betrag"] .regler-blase, .baudarlehen-block .regler-blase { background: var(--gold); } #tabelle-verkauf .regler-blase::after, .regler[data-name="verkaufspreis_qm"] .regler-blase::after, .regler[data-name="stellplatzverkauf_betrag"] .regler-blase::after, .baudarlehen-block .regler-blase::after { border-top-color: var(--gold); } /* Buttonfarbe (Regler-Thumb) an die Goldfarbe angepasst statt neutralem Weiss wie bei Sozialwohnung (Marlon 2026-09-23: "Passe bitte die Buttonfarbe des Reglers an die beige Farbe an"). Chrome- und Firefox-Pseudoelemente NIE in derselben kommagetrennten Regel mischen - ein Browser, der eines der beiden nicht kennt, verwirft sonst die GESAMTE Regel inkl. des Teils, den er koennte (live beobachtet 2026-09-23: Knopf blieb dadurch in einem Browser gruen). */ #tabelle-verkauf .regler input[type="range"]::-webkit-slider-thumb, .regler[data-name="verkaufspreis_qm"] input[type="range"]::-webkit-slider-thumb, .regler[data-name="stellplatzverkauf_betrag"] input[type="range"]::-webkit-slider-thumb, .baudarlehen-block .regler input[type="range"]::-webkit-slider-thumb { background: var(--gold); border-color: #fff; } #tabelle-verkauf .regler input[type="range"]::-moz-range-thumb, .regler[data-name="verkaufspreis_qm"] input[type="range"]::-moz-range-thumb, .regler[data-name="stellplatzverkauf_betrag"] input[type="range"]::-moz-range-thumb, .baudarlehen-block .regler input[type="range"]::-moz-range-thumb { background: var(--gold); border-color: #fff; } /* Baudarlehen-Block (Stufe 2, 2026-09-23): dieselbe Goldfamilie wie die Verkauf-Sektion, aber zurueckhaltend (kein Farbflaechen-Hintergrund wie im Steuer-Tab) - passt zum schlanken regler-eingaben-Stil, in dem h3.abschnitt-band bereits ohne Innenabstand auskommt. */ .baudarlehen-block .unterabschnitt-titel { color: var(--gold); } .baudarlehen-block .regler-herleitung { border-top-color: var(--gold); } /* Sozialwohnung-Schalter in der Verkauf-Tabelle: "Nein" gold statt gruen, kein gruener Fremdkoerper zwischen den sonst durchgehend goldenen Elementen dieser Tabelle - "Ja" bleibt lila, selber Mechanismus wie bei Zielmieten (Marlon 2026-09-23). Nur hier, oben bei Zielmieten hat Gold (noch) keine Bedeutung. */ #tabelle-verkauf .ja-nein[aria-label$="Sozialwohnung"] label:has(input[value="0"]:checked) { background: var(--gold); color: #fff; } .ja-nein label:has(input.verkauf-schalter[value="1"]:checked) { background: var(--gold); color: #fff; } .ausgeblendet { display: none; } .regler-wohnungen td.leer { color: var(--text-faint); } @media (max-width: 1500px) { .regler-reihe.vier { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 1280px) { .regler-reihe.drei, .regler-reihe.vier, .datumsreihe.drei { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1100px) { .regler-reihe, .regler-reihe.drei, .regler-reihe.vier, .datumsreihe.drei { grid-template-columns: 1fr; } } /* Kennzahl-Kacheln (Stil der Objektseiten) mit ausklappbarer Herleitung. Auf der Ankaufseite klebt die Kachelreihe beim Scrollen durch "Szenario variieren" oben (sticky innerhalb .kpi-kontext), damit man beim Schieben sieht, wie sich die Bewertung ändert - im Cockpit (properties_detail.html) gibt es keine Regler zum Durchscrollen, dort bleiben beide .kpi-reihe-Zeilen (Wirtschaftliche Bewertung, Steuerliche Situation) normale, nicht-klebende Grids im Textfluss (sonst würden sie beide auf top:0 kollidieren, Marlon/Codereview 2026-09-24). */ .kpi-kontext { position: relative; } /* .main-area ist overflow-y:auto, scrollt aber nicht selbst (das Fenster scrollt) – als Scroll-Container würde sie "position: sticky" der Kachelreihe aushebeln. Nur auf der Ankaufseite aufheben (auf .ankauf-seite beschränkt, nicht auf alle Seiten mit .kpi-kontext - seit dem Cockpit-Tab-Umbau hat auch properties_detail.html .kpi-kontext-Bloecke, dort aber ohne Sticky-Bedarf, siehe oben). */ .main-area:has(.ankauf-seite .kpi-kontext) { overflow-y: visible; } /* Basis-Grid fuer beide Seiten: auto-fit statt fest 6 Spalten, damit die Reihe unabhaengig von der tatsaechlichen Kachelzahl die volle Breite ausfuellt (Ankauf: 6-7 Kacheln, Cockpit: 4 bzw. 3-4 Kacheln je Reihe - fest repeat(6, ...) liesse die Cockpit-Reihen mit Leerraum rechts stehen). Position bleibt bewusst im normalen Fluss (nicht sticky) - siehe eigene, spezifischere Regel unten fuer .ankauf-seite. */ .kpi-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; padding: 10px 0 12px; margin-bottom: 6px; background: var(--bg); } /* Sticky-Verhalten nur auf der Ankaufseite (siehe Kommentar oben) - eigene, spezifischere Regel statt im Basis-.kpi-reihe, damit Cockpit-Kachelreihen normal mitscrollen statt beim zweiten Vorkommen mit der ersten auf top:0 zu kollidieren. */ .ankauf-seite .kpi-reihe { position: sticky; top: 0; z-index: 3; } .kpi-kachel { position: relative; text-align: left; font: inherit; color: inherit; cursor: pointer; padding: 14px 16px 12px; min-width: 0; transition: border-color .15s, box-shadow .15s; } /* Ohne eigenes background:hover gewinnt der globale button:hover (dunkelgrün, unlesbar) gegen .kachel, weil :hover als Pseudoklasse wie eine Klasse zählt (Marlon 2026-09-22). Helles Mintgrün statt --green-hover. */ .kpi-kachel:hover { border-color: var(--green-tile); background: var(--success-bg); } .kpi-kachel:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; } .kpi-kachel[aria-expanded="true"] { border-color: var(--green); box-shadow: 0 0 0 1px var(--green); } .kpi-kachel[aria-expanded="true"]::after { content: ""; position: absolute; left: 50%; bottom: -8px; margin-left: -8px; width: 14px; height: 14px; background: var(--card-bg); border-right: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(45deg); } .kpi-kopf { display: flex; align-items: flex-start; gap: 8px; padding-right: 14px; } .kpi-kopf .ampel-punkt { margin-top: 2px; } .kpi-kachel .kachel-label { min-height: calc(1.4em * 2); hyphens: auto; -webkit-hyphens: auto; overflow-wrap: normal; } .kpi-kachel .kachel-wert { display: block; font-size: 22px; margin: 8px 0 4px; white-space: nowrap; font-variant-numeric: tabular-nums; } .kpi-kachel .kachel-wert.wert-annahme { font-size: 22px; } .kpi-ziel { display: block; font-size: 11.5px; color: var(--text-muted); line-height: 1.35; } .kpi-pfeil { position: absolute; right: 10px; top: 12px; width: 12px; height: 12px; fill: none; stroke: var(--text-muted); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; } .kpi-kachel[aria-expanded="true"] .kpi-pfeil { transform: rotate(180deg); stroke: var(--green); } .kpi-herleitung { border-color: var(--green); padding: 20px 28px 22px; } .kpi-herleitung-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; } .kpi-herleitung-kopf h2 { margin: 0 0 12px; } .kpi-herleitung-wert { margin-left: 10px; color: var(--green); font-variant-numeric: tabular-nums; } .kpi-schwelle { display: grid; grid-template-columns: minmax(200px, 360px) auto; align-items: center; gap: 16px; margin-bottom: 14px; } .kpi-kaskade-wrap { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 48px; } .kpi-kaskade { width: 100%; max-width: 640px; } .kpi-kaskade-wrap .kpi-kaskade { width: auto; flex: 1 1 260px; } .kpi-kaskade tr.abschnitt td { padding-top: 14px; font-size: 11.5px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--text-muted2); border-bottom: 1px solid var(--card-border); } @media (max-width: 1280px) { /* eine kompakte Reihe, damit die klebende Leiste nicht zu hoch wird */ .kpi-reihe { gap: 8px; } .kpi-kachel { padding: 10px 10px 9px; } .kpi-kachel .kpi-ziel { display: none; } .kpi-kachel .kachel-label { font-size: 10.5px; } .kpi-kachel .kachel-wert, .kpi-kachel .kachel-wert.wert-annahme { font-size: 17px; margin: 6px 0 0; } } @media (max-width: 700px) { .kpi-reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); position: static; } } /* Objektkopf im Übersicht-Tab: Vorschaubild (Klick -> 3D-Modell) + Steckbrief */ .objekt-kopf { position: relative; display: grid; grid-template-columns: minmax(0, 520px) 1fr; gap: 32px; align-items: center; padding: 22px; } /* Zahnrad öffnet das Schwellenwerte-Pop-Up (Marlon 2026-09-22). */ .objekt-einstellungen { position: absolute; top: 14px; right: 14px; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; background: var(--card-bg); color: var(--text-muted); border: 1px solid var(--card-border); border-radius: 50%; box-shadow: none; cursor: pointer; } .objekt-einstellungen:hover { background: var(--success-bg); color: var(--text-heading); border-color: var(--green-tile); } .objekt-einstellungen svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } /* Typ-Umschalter oben rechts neben dem Bild, links vom Zahnrad (Marlon 2026-09-22: "oben rechts neben dem Bild einfügen, nicht bei den Szenarien"). */ .objekt-typ-umschalter { position: absolute; top: 14px; right: 56px; z-index: 1; } .objekt-typ-umschalter label { display: flex; align-items: center; gap: 8px; } .objekt-typ-umschalter .regler-label { margin: 0; white-space: nowrap; } .objekt-typ-umschalter select { height: 32px; padding: 0 10px; font-size: 13px; background: var(--card-bg); color: var(--text-heading); border: 1px solid var(--card-border); border-radius: 8px; box-shadow: none; cursor: pointer; } /* Padding sitzt auf dem Dialog selbst statt auf einem inneren <form> - schwellen-dialog hat ein eigenes <form>, szenario-speichern-dialog aber nicht (seine Felder gehören zum äußeren #szenario-form via formaction/form=) - beide brauchen denselben Randabstand (Marlon 2026-09-22: "sauberer Abstand am Rand"). */ .schwellen-dialog { border: none; border-radius: var(--radius-card); padding: 24px 26px 26px; max-width: 560px; width: calc(100% - 40px); box-shadow: 0 20px 48px rgba(20, 36, 29, .22); } .schwellen-dialog::backdrop { background: rgba(20, 36, 29, .45); } .schwellen-dialog form { padding: 0; } .schwellen-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 4px; } .schwellen-kopf h2 { margin: 0; } .schwellen-dialog table.kalkparam-tabelle { width: 100%; margin-top: 14px; } .schwellen-feld { margin-top: 16px; } .schwellen-feld .regler-label { margin-bottom: 6px; } .schwellen-feld input { width: 100%; } /* Alle Aktionen derselben Zeile in gleicher Größe, unabhängig davon ob primär oder klein (Marlon 2026-09-22: "übergreifend harmonisierte Schaltflächengrößen"). */ .schwellen-dialog .aktionen { margin-top: 20px; align-items: center; } .schwellen-dialog .aktionen .btn-primary, .schwellen-dialog .aktionen .btn-klein { padding: 9px 16px; font-size: 13px; } .objekt-kopf.ohne-bild { grid-template-columns: 1fr; padding: 22px 48px; } .objekt-bild { position: relative; display: block; border-radius: 12px; overflow: hidden; border: 1px solid var(--card-border); background: #fff; } .objekt-bild img { display: block; width: 100%; height: auto; aspect-ratio: 8 / 3; object-fit: cover; object-position: center 35%; transition: transform .35s ease; } .objekt-bild:hover img { transform: scale(1.02); } .objekt-bild-hinweis { position: absolute; left: 12px; bottom: 12px; background: rgba(20, 58, 44, .88); color: #fff; font-size: 12.5px; font-weight: 600; padding: 6px 11px; border-radius: var(--radius-pill); } .objekt-bild:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; } .objekt-bild-wrap { position: relative; } /* "Bild ändern" spiegelbildlich zu "3D-Modell ansehen" - links unten das eine, rechts unten das andere (Marlon 2026-09-22). Nur wenn schon ein Bild da ist; ohne Bild bleibt der Upload-Button im normalen Textfluss der Steckbrief-Spalte (kein Bild, worüber man ihn legen könnte). */ .bild-upload-ueberlagert { position: absolute; right: 12px; bottom: 12px; margin: 0; } .bild-upload-ueberlagert .btn-klein { background: rgba(255, 255, 255, .92); box-shadow: 0 1px 4px rgba(0, 0, 0, .15); } /* Freiraum oben, damit der Typ-Umschalter/Zahnrad (position:absolute) nicht die Adresse überlagert (Marlon 2026-09-22: Typ oben rechts neben dem Bild). */ .objekt-steckbrief { align-self: start; margin-top: 44px; } .objekt-steckbrief dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 22px; margin: 0 0 16px; font-size: 13.5px; } .objekt-steckbrief dt { color: var(--text-muted); } .objekt-steckbrief dd { margin: 0; white-space: nowrap; color: var(--text-heading); font-weight: 500; font-variant-numeric: tabular-nums; } .bild-upload { align-items: flex-start; } .objekt-steckbrief dd:first-of-type { white-space: normal; } @media (max-width: 1150px) { .objekt-kopf { grid-template-columns: 1fr; gap: 18px; padding: 14px; } .objekt-bild { max-width: 620px; } } /* 3D-Modell-Seite */ .modell-bereich { padding: 18px 22px 16px; } .modell-werkzeuge { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; } .modell-ansichten { display: flex; gap: 6px; } .modell-werkzeuge [aria-pressed="true"], .modell-werkzeuge [aria-pressed="true"]:hover { background: var(--green); border-color: var(--green); color: #fff; } .modell-werkzeuge button:disabled { opacity: .45; cursor: default; } .modell-hilfe { margin-left: auto; font-size: 12px; color: var(--text-muted); } .modell-buehne { position: relative; height: min(72vh, 720px); border-radius: 12px; overflow: hidden; border: 1px solid var(--card-border); } .modell-buehne canvas { display: block; touch-action: none; } .modell-labels { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .25s; } .modell-labels.an { opacity: 1; } .modell-label { position: absolute; left: 0; top: 0; white-space: nowrap; background: rgba(255, 255, 255, .94); color: var(--text-heading); font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 6px; box-shadow: 0 1px 4px rgba(0, 0, 0, .15); } .modell-label.raum { background: rgba(255, 255, 255, .82); font-weight: 500; font-size: 11px; padding: 2px 6px; box-shadow: none; border: 1px solid rgba(0, 0, 0, .08); } .modell-quelle { max-width: none; margin-top: 10px; } .annahmen-hinweis { background: #fbe3e1; color: #8f3530; border-radius: 12px; padding: 12px 14px; font-size: 13.5px; line-height: 1.45; max-width: 300px; } .annahmen-hinweis.ok { background: var(--success-bg); color: var(--success-text); } .annahmen-hinweis strong { display: block; font-size: 15px; margin-bottom: 2px; } .annahmen-hinweis a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } .kriterien { width: 100%; table-layout: fixed; } .kriterien th:nth-child(1) { width: 210px; } .kriterien th:nth-child(2) { width: 130px; } .kriterien th:nth-child(4) { width: 230px; } .kriterien th:nth-child(5) { width: 64px; } .kriterien td { vertical-align: middle; } .kriterien td.wert { font-weight: 600; font-size: 15px; color: var(--text-heading); text-align: right; padding-right: 22px; } .kriterien td.ziel { font-size: 12px; color: var(--text-muted); } .skala { position: relative; height: 10px; border-radius: 5px; display: flex; } .skala .zone { height: 100%; } .skala .zone:first-child { border-radius: 5px 0 0 5px; } .skala .zone:nth-last-child(2) { border-radius: 0 5px 5px 0; } .zone.rot { background: #f6cfcb; } .zone.gelb { background: #f6e2a9; } .zone.gruen { background: #bfe3cf; } .skala .marker { position: absolute; top: -5px; width: 4px; height: 20px; margin-left: -2px; border-radius: 2px; background: var(--text-heading); box-shadow: 0 0 0 2px var(--card-bg); transition: left 600ms cubic-bezier(0.16, 1, 0.3, 1); } .eckdaten { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0; margin: 0; } .eckdaten div { padding: 4px 18px 4px 0; } .eckdaten dt { font-size: 12px; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-muted2); font-weight: 600; margin-bottom: 6px; } .eckdaten dd { margin: 0; font-size: 20px; font-weight: 600; color: var(--text-heading); letter-spacing: -0.3px; } .zwei-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; } .chart-linie-wert { stroke: var(--green); stroke-width: 2.2; fill: none; } .chart-linie-rest { stroke: #b3661f; stroke-width: 2.2; fill: none; stroke-dasharray: 5 4; } .chart-balken-pos { fill: #7fc4a2; } .chart-balken-neg { fill: #e9a19b; } .chart-legende-strich { display: inline-block; width: 18px; height: 0; border-top: 2.2px solid var(--green); vertical-align: middle; } .chart-legende-strich.rest { border-top: 2.2px dashed #b3661f; } .chart-legende-feld { display: inline-block; width: 11px; height: 11px; border-radius: 3px; vertical-align: -1px; } .statusverlauf { list-style: none; margin: 14px 0 0; padding: 0; } .statusverlauf li { display: grid; grid-template-columns: 96px 150px 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--divider); font-size: 13.5px; } .statusverlauf li:last-child { border-bottom: 0; } .status-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .status-form select, .status-form input, .aktionen input, .ankauf-formular input, .ankauf-formular select, .ankauf-formular textarea { font: inherit; font-size: 13.5px; padding: 7px 10px; border: 1px solid var(--card-border); border-radius: 9px; background: var(--card-bg); color: var(--text-body); } .status-form select:focus, .status-form input:focus, .aktionen input:focus, .ankauf-formular input:focus, .ankauf-formular select:focus, .ankauf-formular textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; } /* Zentriert statt linksbündig: "Basisszenario" bleibt optisch der Anker, neue Szenarien reihen sich daneben ein (Marlon 2026-09-22). Nur das gerade geöffnete ist farbig hervorgehoben. */ .szenario-leiste { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; margin-bottom: 18px; } .szenario-leiste a, .szenario-leiste button { padding: 6px 13px; border-radius: var(--radius-pill); background: var(--card-bg); border: 1px solid var(--card-border); font-size: 13.5px; font-weight: 600; color: var(--text-body-soft); cursor: pointer; box-shadow: none; } .szenario-leiste a.basis, .szenario-leiste button.basis { font-weight: 700; } /* Mintgrün statt dem schweren --green, passend zu den übrigen aufgehellten Akzenten in diesem Bereich (Marlon 2026-09-22). Gilt auch für die rein clientseitige Szenario-Auswahl beim Cashflow-Diagramm (button statt a, kein Reload beim Wechseln). */ .szenario-leiste a.active, .szenario-leiste button.active { background: var(--green-tile); border-color: var(--green-tile); color: #fff; } /* Diagramm/Tabelle-Umschalter fürs Cashflow (Marlon 2026-09-22: "kann man zwischen den Diagrammen und Tabellen wechseln") - derselbe Pillen-Look wie die Szenario-Leiste, aber ohne den Rand zwischen den beiden Optionen (ein zusammenhängender Schalter statt Einzel-Pillen). */ .ansicht-umschalter { display: inline-flex; border: 1px solid var(--card-border); border-radius: var(--radius-pill); overflow: hidden; } .ansicht-umschalter button { padding: 7px 14px; font-size: 13px; font-weight: 600; color: var(--text-body-soft); background: var(--card-bg); border: none; border-radius: 0; cursor: pointer; box-shadow: none; } .ansicht-umschalter button.active { background: var(--green-tile); color: #fff; } /* Jährlich/Kumuliert sitzt über dem Diagramm selbst statt in der Kopfzeile (Marlon 2026-09-23) - kleiner und rechtsbündig, damit es nicht mit der Szenario-Leiste/dem Diagramm-Tabelle-Schalter der Kopfzeile konkurriert. */ .ansicht-umschalter-klein { display: flex; justify-content: flex-end; margin-bottom: 8px; } .ansicht-umschalter-klein button { padding: 4px 11px; font-size: 12px; } .szenario-pille { display: inline-flex; align-items: center; gap: 4px; } .szenario-loeschen { all: unset; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; color: var(--text-muted); font-size: 12px; line-height: 1; } .szenario-loeschen:hover { background: #fbe3e1; color: #8f3530; } .regler-kopf-zeile { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .btn-neutral { background: var(--steuer-verlauf-text); color: #fff; border-color: var(--steuer-verlauf-text); box-shadow: none; } .btn-neutral:hover { background: var(--text-heading); border-color: var(--text-heading); } /* Speichern-Button und Szenario-Pillen auf derselben Zeile brauchen dieselbe Höhe/Schriftgröße, sonst wirkt die Kopfzeile uneinheitlich (Marlon 2026-09-22: "Buttongröße harmonisieren"). */ .regler-kopf .btn-neutral, .regler-kopf .szenario-leiste a, .regler-kopf .szenario-leiste button { padding: 7px 14px; font-size: 13px; line-height: 1.3; } .kalkparam-tabelle th.annahme-label { color: #b3453f; } .kalkparam-tabelle input.standard::placeholder { color: #b3453f; opacity: 1; } .kalkparam-tabelle input.datum { width: 140px; } .kalkparam-tabelle td.fix { font-weight: 600; color: var(--text-heading); font-size: 13.5px; white-space: nowrap; } .aktionen { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 22px; } .aktionen input { min-width: 220px; } .live-hinweis { font-size: 12px; color: var(--text-muted); margin-left: auto; } .eingabe-tabelle input, .eingabe-tabelle select { width: 100%; } /* In die schmale Investitionskosten-Spalte verschoben (Marlon 2026-09-22) - width:auto liess die Tabelle bis dahin an den Browser-Standardbreiten der Inputs wachsen (~718px) statt sich der Spaltenbreite (~440px) unterzuordnen, mit sichtbarem Überlauf über die Kartengrenze hinaus. */ .regler-reihe .eingabe-tabelle { width: 100%; table-layout: fixed; } .regler-reihe .eingabe-tabelle th, .regler-reihe .eingabe-tabelle td { overflow-wrap: break-word; } /* Felder in derselben kompakten Optik wie die übrigen Eingaben auf der Seite (.param-input) statt der größeren Browser-Standardgröße (Marlon 2026-09-22: "Passe die Felder... in ihrer Größe an die anderen Felder auf der Seite an"). */ .regler-reihe .eingabe-tabelle input, .regler-reihe .eingabe-tabelle select { padding: 4px 6px; font-size: 12.5px; font-family: 'Inter', sans-serif; border: 1px solid #dde5d7; border-radius: 6px; } .kaskade td:last-child, .kaskade th:last-child { text-align: right; } .kaskade tr.summe td { font-weight: 700; color: var(--text-heading); border-top: 1.5px solid var(--card-border); } .kaskade td.einrueck { padding-left: 26px; color: var(--text-body-soft); } .vergleich.tabelle-kompakt td, .vergleich.tabelle-kompakt tr.kopfzeile th { text-align: right; } .vergleich.tabelle-kompakt td:first-child, .vergleich.tabelle-kompakt tr.kopfzeile th:first-child { text-align: left; } /* Jede Szenario-Spalte (nicht nur die zweite) bekommt dieselbe feste Breite, damit z.B. "Sozialmiete 18,00€" nicht umbricht (Marlon 2026-09-23: "Verbreitere die Spalten... da ist ja genug Platz"). Vorher hing nur Spalte 2 an --wert-spalte fest, Spalte 3+ blieb frei - bei width:100% auf der Tabelle bekam dadurch ausschliesslich die LETZTE Spalte den kompletten Rest-Platz zugeschlagen (bei 3 Szenarien z.B. 551px statt 170px), wodurch ihr Inhalt weit rechts abriss (Marlon 2026-09-23: "letzte Spalte... viel Platz zwischen vorletzter und letzter"). Jetzt bekommen alle Szenario-Spalten dieselbe Breite wie Spalte 2 und die Tabelle wird nicht mehr künstlich auf 100% gestreckt - Spalten ruecken zusammen, .scroll-x faengt zu viele Szenarien wie bisher per Scrollbalken ab. */ .vergleich.tabelle-kompakt th:not(:first-child), .vergleich.tabelle-kompakt td:not(:first-child) { width: var(--wert-spalte); min-width: var(--wert-spalte); max-width: var(--wert-spalte); } .vergleich.tabelle-kompakt tr.kopfzeile th { white-space: nowrap; } .vergleich .ampel-punkt { margin-left: 8px; width: 9px; height: 9px; } .scroll-x { overflow-x: auto; } .ankauf-formular label { display: block; margin-bottom: 12px; font-size: 13px; color: var(--text-body-soft); } .ankauf-formular label input, .ankauf-formular label select { display: block; width: 100%; margin-top: 4px; } @media (max-width: 760px) { .ankauf-seite .bereich { padding: 18px 16px; } .ankauf-seite .annahmen-hinweis { grid-column: 1 / -1; max-width: none; } /* Liste unterwegs: Kandidat (mit Status darunter), Rendite, Ampel */ .ankauf-tabelle th:not(:nth-child(2)):not(:nth-child(6)):not(:nth-child(8)), .ankauf-tabelle td:not(:nth-child(2)):not(:nth-child(6)):not(:nth-child(8)) { display: none; } .ankauf-tabelle td:nth-child(2) { min-width: 0; } .ankauf-tabelle th, .ankauf-tabelle td { padding-left: 6px; padding-right: 6px; } .nur-mobil { display: block; margin-top: 6px; } /* Prüfkriterien als zweizeilige Blöcke */ .kriterien, .kriterien tbody { display: block; } .kriterien tr:first-child { display: none; } .kriterien tr { display: grid; grid-template-columns: 1fr auto 14px; grid-template-areas: "name wert ampel" "skala skala skala"; column-gap: 12px; row-gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--divider); } .kriterien td { display: block; border: 0; padding: 0; } .kriterien td:nth-child(1) { grid-area: name; } .kriterien td.wert { grid-area: wert; padding-right: 0; } .kriterien td:nth-child(3) { grid-area: skala; } .kriterien td.ziel { display: none; } .kriterien td:nth-child(5) { grid-area: ampel; align-self: center; } .statusverlauf li { grid-template-columns: 84px 1fr; } .live-hinweis { margin-left: 0; } } /* ---------- Finanzierungs-Tab: Zinsbindung & Zinsänderungsrisiko (Scheibe 2) ---------- */ .zs-zeile { display: grid; grid-template-columns: 180px 1fr; align-items: center; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--divider); } table.zs-gleich tr.summe td:first-child { white-space: nowrap; } .zs-kopf { display: grid; grid-template-columns: 180px 1fr; gap: 16px; } .zs-kopf-heute { font-size: 11.5px; font-weight: 600; color: var(--accent); } .zs-name { font-size: 13.5px; font-weight: 600; color: var(--text-heading); } .zs-name small { display: block; font-weight: 500; color: var(--text-muted); font-size: 12px; } .zs-spur { position: relative; height: 22px; background: var(--divider-soft); border-radius: 6px; } .zs-bindung { position: absolute; top: 0; bottom: 0; left: 0; background: var(--steuer-verlauf-text); border-radius: 6px 0 0 6px; } .zs-danach { position: absolute; top: 0; bottom: 0; background: var(--text-muted); opacity: 0.45; border-radius: 0 6px 6px 0; } .zs-heute { position: absolute; top: -6px; bottom: -6px; left: 0; width: 2px; background: var(--accent); } .zs-achse { display: grid; grid-template-columns: 180px 1fr; gap: 16px; margin-top: 6px; } .zs-achse-skala { position: relative; height: 16px; font-size: 11.5px; color: var(--text-muted); } .zs-achse-skala span { position: absolute; transform: translateX(-50%); } .zs-achse-skala span:first-child { transform: none; } .zs-legende { display: flex; gap: 22px; margin: 14px 0 26px; font-size: 12.5px; color: var(--text-body-soft); flex-wrap: wrap; } .zs-legende i { display: inline-block; width: 14px; height: 10px; border-radius: 3px; margin-right: 7px; vertical-align: -1px; } .zs-swatch-bindung { background: var(--steuer-verlauf-text); } .zs-swatch-danach { background: var(--text-muted); opacity: 0.45; } .zs-swatch-heute { background: var(--accent); width: 3px !important; height: 14px !important; border-radius: 1px !important; } .zs-scroll { overflow-x: auto; } .zs-tabelle { width: 100%; } .zs-tabelle td.negativ, .zs-tabelle tr.summe td.negativ { color: #b3453f; } .zs-tabelle td.positiv, .zs-tabelle tr.summe td.positiv { color: var(--success-text); } .zs-kacheln { margin: 22px 0 0; } .zins-frage { font-size: 13px; color: var(--text-body-soft); margin: 0 0 10px; } .zins-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 18px; } .zins-chip { padding: 7px 14px; border-radius: var(--radius-pill); background: var(--card-bg); border: 1px solid var(--card-border); font-size: 13px; font-weight: 600; color: var(--text-body-soft); text-decoration: none; } .zins-chip:hover { border-color: var(--steuer-verlauf-text); } .zins-chip.aktiv { background: var(--steuer-verlauf-text); border-color: var(--steuer-verlauf-text); color: #fff; } .zins-eigen.zins-zeile { margin: 0 0 18px; } .zins-zeile .zins-frage { margin: 0; } .zins-eigen { display: flex; flex-direction: row; max-width: none; flex-wrap: nowrap; align-items: center; gap: 8px; margin: 0 0 0 14px; font-size: 13px; color: var(--text-body-soft); white-space: nowrap; } .zins-eigen label, .zins-eigen span { display: inline; margin: 0; } .zins-eigen input { flex: none; width: 72px; margin: 0; padding: 6px 10px; text-align: right; } /* ---------- Finanzierungs-Tab: Was-waere-wenn Sondertilgung (Scheibe 3) ---------- */ .st-eingabe { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; align-items: end; margin: 0 0 8px; max-width: none; } .st-eingabe label { display: block; font-size: 12px; letter-spacing: .4px; text-transform: uppercase; color: var(--text-muted2); font-weight: 600; margin: 0 0 6px; } .st-eingabe input[type="text"], .st-eingabe select { width: 100%; margin: 0; } .st-form { max-width: none; margin: 0; } .st-kopfzeile { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 13px; color: var(--text-body-soft); } .st-kopfzeile label { display: inline; margin: 0; } .st-kopfzeile input { flex: none; width: 72px; margin: 0; padding: 6px 10px; text-align: right; } .st-tabelle { width: 100%; min-width: 900px; table-layout: fixed; } .st-tabelle th:nth-child(1), .st-tabelle td:nth-child(1) { width: 20%; } .st-tabelle th:nth-child(2), .st-tabelle td:nth-child(2) { width: 42%; } .st-tabelle th:nth-child(3), .st-tabelle td:nth-child(3), .st-tabelle th:nth-child(4), .st-tabelle td:nth-child(4) { width: 19%; } .st-tabelle small { display: block; font-weight: 400; color: var(--text-muted); font-size: 12px; margin-top: 2px; } .st-tabelle td { vertical-align: middle; } .st-tabelle td.zahl input { width: 110px; margin: 0; padding: 6px 10px; text-align: right; } .st-tabelle tr.st-aus td { color: var(--text-faint); } .st-tabelle tr.st-aus { opacity: 0.55; background: var(--divider-soft); } .st-tabelle tr.st-aus input { background: transparent; border-color: transparent; } .st-hinweis { font-size: 12px; color: var(--text-faint); margin: 6px 0 22px; line-height: 1.5; } .st-hinweis strong { color: var(--text-body-soft); } .st-chart { width: 100%; height: 300px; } .st-chart text { font-size: 20px; fill: var(--text-muted2); font-family: 'Inter', sans-serif; } .st-gitter { stroke: var(--divider-soft); } .st-flaeche { fill: var(--steuer-verlauf-text); opacity: .10; } .st-linie-heute { fill: none; stroke: var(--text-muted); stroke-width: 2.5; stroke-dasharray: 5 4; } .st-linie-neu { fill: none; stroke: var(--steuer-verlauf-text); stroke-width: 2.5; } .st-legende { display: flex; gap: 22px; margin: 10px 0 26px; font-size: 12.5px; color: var(--text-body-soft); flex-wrap: wrap; } .st-legende i { display: inline-block; width: 18px; height: 0; border-top: 2.5px solid; margin-right: 7px; vertical-align: middle; } .st-swatch-heute { border-color: var(--text-muted); border-top-style: dashed !important; } .st-swatch-neu { border-color: var(--steuer-verlauf-text); } .zs-tabelle td.positiv { color: var(--success-text); font-weight: 600; } /* Finanzierungs-Tab: Summenstriche und -werte grundsaetzlich graphit (wie beim Finanzierungsverlauf, --steuer-verlauf-text). Rot/Gruen bleiben Wertungen (.negativ/.positiv) und werden hier nicht ueberschrieben. */ [data-tab-panel="finanzierung"] .tabelle-kompakt tr.summe th, [data-tab-panel="finanzierung"] .tabelle-kompakt tr.summe td { border-top-color: var(--steuer-verlauf-text); } [data-tab-panel="finanzierung"] .tabelle-kompakt tr.summe th:not(.negativ):not(.positiv), [data-tab-panel="finanzierung"] .tabelle-kompakt tr.summe td:not(.negativ):not(.positiv) { color: var(--steuer-verlauf-text); } /* Cockpit (properties_detail.html): Bilder-Dialog (Galerie mit Kategorie/Hauptbild/Loeschen) und "Anstehende Entscheidungen"-Liste (Task 13). Erweiterung 2026-09-25: Galerie nach Raum -> Gewerk gruppiert + Phasen-Filter (Aktuell/ Historisch/Sanierung), fuers Sanierungs-Fotoarchiv (bis zu ~150 Bilder je Objekt) - daher max-height + Scroll statt weiter wachsendem Dialog. */ .bilder-dialog { max-width: 920px; max-height: 85vh; overflow-y: auto; } .bilder-upload-form { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; } .bilder-phasen-filter { display: flex; gap: 8px; margin-bottom: 18px; } .bilder-phasen-filter .btn-klein[data-bilder-phase-filter] { padding: 6px 12px; } .bilder-phase-aktiv { background: var(--accent-soft); border-color: var(--accent); } .bilder-leer { color: var(--text-muted); font-size: 13.5px; } .bilder-raum-gruppe + .bilder-raum-gruppe { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--card-border); } .bilder-raum-titel { margin: 0 0 12px; font-size: 12.5px; letter-spacing: 0.3px; text-transform: uppercase; font-weight: 600; color: var(--text-muted2); } .bilder-gewerk-gruppe + .bilder-gewerk-gruppe { margin-top: 16px; } .bilder-gewerk-titel { margin: 0 0 8px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); } .bilder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; } .bilder-grid-eintrag { border: 1px solid var(--card-border); border-radius: 8px; padding: 8px; } .bilder-grid-eintrag[hidden] { display: none; } .bilder-grid-eintrag img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; margin-bottom: 6px; } .bilder-grid-felder { display: flex; flex-direction: column; gap: 4px; } .bilder-grid-felder select { width: 100%; font-size: 12px; padding: 3px 4px; } .bilder-grid-aktionen { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; } .hauptbild-stern { color: var(--green); font-size: 18px; } .hinweise-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .hinweise-liste li::before { content: "→"; color: var(--text-muted); margin-right: 8px; } /* Nebenkosten-Druckansicht (2026-09-27) - Sidebar/Kopf/Aktionsbuttons erscheinen nicht im Druck bzw. im WeasyPrint-PDF, siehe nebenkosten_routes.pdf(). */ @media print { .sidebar, .page-header, .no-print { display: none !important; } .nebenkosten-druck .bereich { box-shadow: none; border: none; page-break-inside: avoid; } } /* Herkunftsstufe "Schätzung Anke (Formel)": orange gepunktet, eine Stufe zwischen verifiziert und rot (Standardannahme). Vorstufe zum Reifegrad Annahme/Angabe/belegt/bewertet (Vorlage v3, 4.1). */ .wert-schaetzung { color: #b5651d; text-decoration: underline dotted; text-decoration-thickness: 1.5px; text-underline-offset: 3px; cursor: help; } .schaetzungs-hinweis { background: #fdebd6; color: #7a4310; border-radius: 12px; padding: 12px 14px; font-size: 13.5px; line-height: 1.45; margin-bottom: 14px; } .schaetzungs-hinweis strong { display: block; font-size: 15px; margin-bottom: 2px; } .regler-quelle { display: block; font-size: 12px; color: #6b6b6b; margin-top: 2px; } .regler-reset { background: none; border: 0; padding: 0 0 0 6px; color: #2b6cb0; cursor: pointer; font-size: 12px; text-decoration: underline; }