/* Solida GmbH – Immobilienbestand */ /* Farbtafel: Petrol trägt Schrift und Flächen (9,15:1 auf Weiß), Kupfer ist Akzentfarbe – als Schrift reicht nur --kupfer-dunkel (--kupfer selbst erreicht auf Weiß nur 3,44:1 und gehört an Rahmen und Symbole). Die Werte für Nebentext und Meldungen wurden am 16.09.2026 auf allen Seiten gemessen und vertieft, sodass jedes gerenderte Farbpaar AA erfüllt und der Nebentext AAA erreicht. */ :root { --petrol: #1f4e5a; --petrol-dunkel: #163a44; --petrol-hell: #e6eef0; --kupfer: #c07a45; --kupfer-dunkel: #8a4f26; /* 5,5:1 auf --kupfer-hell (vorher #9c5a2b, 4,57:1) */ --kupfer-hell: #f6ebe1; --grund: #f5f3ef; --flaeche: #fbfaf7; /* Karten leicht getönt statt reinweiß: über die Hälfte der Bildschirmfläche, reines Weiß blendet in dunklen Räumen. Text bleibt bei 14,05:1. Eingabefelder, Bilder und Vorlagenseiten bleiben bewusst #fff – sie sollen sich abheben. */ --rand: #e3ded6; --rand-stark: #cfc8bd; --text: #1f2a30; --text-leise: #4b535a; /* 7,06:1 auf --grund (vorher #66717a, exakt 4,50:1 – ohne Reserve) */ --gut: #1f5c38; /* 6,89:1 auf --gut-hell (vorher #276b43) */ --gut-hell: #e5f2ea; --warn: #7a4c0a; /* 6,49:1 auf --warn-hell (vorher #8a560c) */ --warn-hell: #fbf0dc; --schlecht: #9d3630; /* 5,76:1 auf --schlecht-hell (vorher #b3403a) */ --schlecht-hell: #f8e5e3; --zaehler: #c4314b; /* Badge-Fläche, weiße Schrift darauf: 5,40:1 */ --tuerkis: #0b6b66; /* Kalender: Übergaben und Fristen; 5,54:1 auf --tuerkis-hell */ --tuerkis-hell: #e2f3f1; --feld: #fff; /* Eingabefelder und Schreibflaechen */ /* 20.09.2026 repariert: Hier stand `var(--flaeche-leise)` – ein Verweis auf sich selbst. Das ist ein Kreis und damit ungültig, das Merkmal blieb leer, und jeder Tabellenkopf war in der hellen Darstellung durchsichtig statt getönt (gemessen: rgba(0,0,0,0)). In der dunklen Darstellung war der Wert gesetzt, deshalb fiel es nicht auf. Ein Hauch dunkler als --flaeche, in derselben warmen Richtung wie --grund. */ --flaeche-leise: #f2efe9; /* Tabellenkopf, Rohtext, gerahmte Blöcke */ /* Jede zweite Tabellenzeile. Bewusst schwächer als --flaeche-leise: Der Kopf soll die kräftigste Tönung behalten, die Streifen führen nur das Auge. Hell etwas dunkler, dunkel etwas heller als --flaeche. */ --zeile-wechsel: #f6f4f0; --auf-petrol: #fff; /* Schrift auf petrolfarbener Flaeche */ --auf-kupfer: #fff; /* Schrift auf kupferfarbener Flaeche */ --auf-text: #fff; /* Schrift auf --text als Flaeche (Kalender-Hinweis) */ --auf-status: #fff; /* Schrift auf vollflaechigem Gruen/Rot */ --auf-warn-hell: #6b4509; /* Schrift auf --warn-hell */ --auf-gut-hell: #1d5234; /* Schrift auf --gut-hell */ --radius: 10px; /* Lesebreite für Datenblöcke: Tabellen, Beschriftung/Wert-Paare und einzeln stehende Karten werden mindestens so breit – und nur breiter, wenn ihr Inhalt es braucht. Ohne das dehnten sie sich bei 1920 px auf die ganze Seite: bis 901 px je Tabellenspalte, und zwischen Beschriftung und Wert lagen rund 1000 px Leere. Tabellen mit vielen Spalten wachsen weiterhin darüber hinaus. */ --lesebreite: 900px; --schatten: 0 1px 2px rgba(31, 42, 48, .06), 0 4px 14px rgba(31, 42, 48, .05); --schrift: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; } body { font: 14px/1.5 var(--schrift); color: var(--text); background: var(--grund); -webkit-font-smoothing: antialiased; } a { color: var(--petrol); } h1, h2, h3, h4 { margin: 0; line-height: 1.25; font-weight: 600; } h1 { font-size: 26px; letter-spacing: -.01em; } h2 { font-size: 18px; } h3 { font-size: 15px; } small, .leise { color: var(--text-leise); } .zahl { font-variant-numeric: tabular-nums; } [hidden] { display: none !important; } /* ---------- Layout ---------- */ .layout { display: flex; flex-direction: column; min-height: 100vh; } /* Kopfleiste oben: Logo, waagerechtes Menü mit Ausklappmenüs, rechts Suche, Wissensdatenbank und Konto */ .kopfleiste { position: sticky; top: 0; z-index: 50; /* Umbruch als Sicherheitsnetz: lieber eine zweite Zeile als Einträge, die sich überlappen */ display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 0 14px; background: var(--flaeche); border-bottom: 1px solid var(--rand); } .leiste-kopf { display: flex; align-items: center; gap: 6px; flex: none; } .logo { display: block; flex: none; min-width: 0; padding: 4px 6px; } .logo img { display: block; width: auto; max-width: 150px; max-height: 36px; height: auto; } /* Navigation waagerecht: Direkteinträge und Ausklappmenüs nebeneinander. Reicht die Zeile nicht (z. B. breite Zähler mit echten Daten), bricht die Navigation um – lieber zwei Zeilen als waagerechter Überlauf; Zeilenabstand für den Unterstrich */ #navigation { flex: 0 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 2px; min-width: 0; padding: 6px 2px; } .leiste-rechts { display: flex; align-items: center; gap: 6px; flex: none; margin-left: auto; } .nav-abschnitt { margin: 14px 12px 4px; font-size: 12.5px; font-weight: 600; color: var(--text-leise); } .nav-eintrag { position: relative; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; margin: 2px 0; border: 0; border-radius: 6px; background: transparent; color: var(--text); font: inherit; font-size: 14px; text-align: left; text-decoration: none; cursor: pointer; } .nav-eintrag:hover { background: rgba(31, 42, 48, .05); } .nav-eintrag:active { background: rgba(31, 42, 48, .09); } .nav-eintrag:focus-visible { outline: 2px solid var(--petrol); outline-offset: -2px; } .nav-eintrag.aktiv { background: rgba(31, 78, 90, .09); font-weight: 600; } .nav-eintrag.aktiv::before, .nav-eintrag.enthaelt-aktiv::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 20px; margin-top: -10px; border-radius: 2px; background: var(--petrol); } .nav-eintrag > svg { flex: none; width: 20px; height: 20px; color: var(--text-leise); } .nav-eintrag.aktiv > svg, .nav-eintrag:hover > svg, .nav-eintrag.enthaelt-aktiv > svg { color: var(--petrol); } .nav-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-zusatz { flex: none; font-size: 12px; font-weight: 400; color: var(--text-leise); } /* Zähler (fällige Mahnungen, offene Belege, GoBD-Auffälligkeiten) als Fluent-Badge am Ende des Eintrags */ .nav-zaehler { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--zaehler); color: #fff; font-size: 12px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; } .nav-eintrag > svg.nav-pfeil { width: 16px; height: 16px; transition: transform .15s ease; } .nav-kategorie-knopf[aria-expanded="true"] > svg.nav-pfeil { transform: rotate(180deg); } .nav-unterliste { margin: 0 0 4px; } .nav-unter { min-height: 36px; padding-left: 40px; font-size: 13.5px; } /* Ausklappmenü der Kopfleiste: Knopf in der Leiste, darunter eine schwebende Liste */ .nav-menue { position: relative; flex: none; } .nav-menue-knopf { white-space: nowrap; } .nav-menue-knopf[aria-expanded="true"] { background: rgba(31, 42, 48, .07); } .nav-menue-knopf[aria-expanded="true"] > svg.nav-pfeil { transform: rotate(180deg); } .nav-menue-liste { position: absolute; top: calc(100% + 4px); left: 0; z-index: 60; width: max-content; min-width: 260px; max-width: min(340px, calc(100vw - 24px)); max-height: calc(100vh - 80px); overflow-y: auto; padding: 6px; border: 1px solid var(--rand); border-radius: 8px; background: var(--flaeche); box-shadow: 0 8px 24px rgba(31, 42, 48, .16); } .nav-menue-liste .nav-eintrag { width: 100%; } /* Gruppenüberschrift in einer schwebenden Liste („Hausverwaltung“: Miete · Kosten & Belege · Kontakte & Versicherungen) */ .nav-gruppe-titel { padding: 8px 12px 3px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-leise); } .nav-gruppe-titel:not(:first-child) { margin-top: 4px; border-top: 1px solid var(--rand); padding-top: 10px; } /* Auswahl in der Kopfleiste als Unterstrich statt als Balken links */ #navigation > .nav-eintrag.aktiv::before, #navigation > .nav-menue > .nav-menue-knopf.enthaelt-aktiv::before { left: 10px; right: 10px; top: auto; bottom: -7px; width: auto; height: 3px; margin-top: 0; } /* Mittlere Breiten (Tablet quer, kleine Laptops): Einträge enger, Symbole der Direkteinträge nur noch im Tooltip. Zuvor war die Navigation rund 1030 px breit und lief bei 1024 px über den Fensterrand. */ @media (min-width: 901px) and (max-width: 1200px) { #navigation { column-gap: 0; } #navigation > .nav-eintrag, #navigation > .nav-menue > .nav-menue-knopf { gap: 6px; padding: 0 7px; } #navigation > .nav-eintrag > svg { display: none; } #navigation > .nav-eintrag.aktiv::before, #navigation > .nav-menue > .nav-menue-knopf.enthaelt-aktiv::before { left: 7px; right: 7px; } } main { padding: 30px 38px 60px; min-width: 0; outline: none; } /* Der Inhalt nutzt die volle Fensterbreite (zuvor auf 1240 px begrenzt und mittig) – Tabellen, Raster und Kacheln gewinnen damit Platz. Fließtext bleibt davon unberührt, er behält seine Zeilenlänge (siehe unten). */ .seite { max-width: none; margin: 0; } /* Fließtext auf 100 Zeichen je Zeile begrenzen. Auf breiten Bildschirmen liefen Absätze zuvor über 190 Zeichen – dabei verliert das Auge beim Zeilenrücksprung die Spur. Tabellen, Raster und Kacheln bleiben unberührt, sie brauchen die volle Breite. */ main p, main li, main dd, main .leise, .aufgabe-text { max-width: 100ch; } .laden { padding: 40px; color: var(--text-leise); } /* ---------- Kopfbereich ---------- */ .kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 22px; flex-wrap: wrap; } .kopf .unterzeile { margin-top: 4px; font-size: 15px; color: var(--text-leise); } .kopf .etiketten { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; } .etikett { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 500; background: var(--grund); border: 1px solid var(--rand); color: var(--text); white-space: nowrap; } .etikett.gut { background: var(--gut-hell); border-color: transparent; color: var(--gut); } .etikett.warn { background: var(--warn-hell); border-color: transparent; color: var(--warn); } .etikett.schlecht { background: var(--schlecht-hell); border-color: transparent; color: var(--schlecht); } .etikett.petrol { background: var(--petrol-hell); border-color: transparent; color: var(--petrol); } .etikett.kupfer { background: var(--kupfer-hell); border-color: transparent; color: var(--kupfer-dunkel); } /* ---------- Karten & Kennzahlen ---------- */ /* Die Karte legt sich um ihren Inhalt (mindestens Lesebreite, höchstens der vorhandene Platz). Sonst lief die weiße Fläche bis zum Seitenrand, während die Tabelle darin schon bei 900 px endete – die Kopfzeile der Tabelle brach dann mitten in der Karte ab. Karten mit breiten Tabellen bleiben breit (Mieterliste, Belege). */ .karte { width: fit-content; min-width: min(100%, var(--lesebreite)); max-width: 100%; background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); box-shadow: var(--schatten); } .karte-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--rand); flex-wrap: wrap; } .karte-inhalt { padding: 18px 20px; } .karte + .karte, .abschnitt + .abschnitt { margin-top: 20px; } /* Die Regel oben gilt der Reihenfolge im DOM, nicht der Position im Raster – in einem Grid mit zwei Karten nebeneinander (.raster-2, .immo-karten) bekommt die zweite Karte denselben Abstand nach oben aufgeprägt und rutscht sichtbar tiefer als die erste (Sebastian, 23.09.2026: Kacheln auf „Immobilien" nicht ausgerichtet; betraf ebenso die zweispaltigen Karten auf der Objektseite, z. B. „Erwerb“/„Finanzierung“). Für Karten, die als Raster-Kinder nebeneinanderstehen, den Abstand wieder auf 0 setzen. */ .raster-2 > .karte + .karte, .immo-karten > .karte + .karte { margin-top: 0; } /* „auto-fit“ statt „auto-fill“: Bei voller Fensterbreite passen mehr Spuren ins Raster, als es Kacheln gibt. „auto-fill“ hielt die leeren Spuren offen – die vier bis sechs Kacheln endeten dann mitten auf dem Schirm und rechts blieb ein Loch. „auto-fit“ lässt die leeren Spuren zusammenfallen, die vorhandenen Kacheln teilen sich die Breite und stehen bündig mit Kalender und Tabellen darunter. Schmale Fenster verhalten sich unverändert. */ /* Kacheln, schlank (Sebastian, 04.11.2026): klein, zentriert, mit deutlich sichtbarem feinem Rand in Hell und Dunkel – ohne Strich, Balken oder Schatten; Zustände zeigt nur die Farbe des Werts (rot, kupfer). Der Rand nutzt --kachel-rand, in Hell kräftiger als --rand-stark. */ .kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 18px; } .kennzahl { background: var(--flaeche); border: 1px solid var(--kachel-rand, var(--rand-stark)); border-radius: var(--radius); padding: 9px 12px; text-align: center; } .kennzahl .bez { font-size: 12px; color: var(--text-leise); } /* Kaufkandidaten-Kacheln: der Wert soll in jeder Kachel derselben Zeile auf gleicher Höhe stehen (Sebastian, 22.09.2026), auch wenn eine Bezeichnung länger ist und umbricht („Gebundenes Kapital bei Zuschlag“ bricht bei mittleren Fensterbreiten auf zwei Zeilen um, die anderen bleiben einzeilig – der Wert rutschte dadurch je Kachel unterschiedlich weit nach unten). Reserviert deshalb die Höhe von zwei Zeilen für die Bezeichnung, eine einzeilige Bezeichnung steht darin mittig – nur für diese Kacheln, nicht für die vielen anderen Seiten, die dieselbe `.kennzahl`-Klasse mit durchweg kurzen, einzeiligen Bezeichnungen verwenden. */ .kennzahlen-ankauf .bez { display: flex; align-items: center; justify-content: center; min-height: 2.6em; line-height: 1.3; } .kennzahl .wert { font-size: 18px; font-weight: 500; margin-top: 1px; font-variant-numeric: tabular-nums; white-space: nowrap; } .kennzahl .zusatz { font-size: 11.5px; color: var(--text-leise); margin-top: 1px; line-height: 1.35; } .kennzahl.betont { border-color: var(--petrol); } .kennzahl .wert2 { font-size: 14px; font-weight: 600; margin-top: 2px; font-variant-numeric: tabular-nums; } .kennzahl .wert2.fehlt { font-weight: 500; color: var(--text-leise); } .vw-wert { font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; } /* Grid-Spalten dürfen schmaler als ihre Tabellen werden – die Tabellen scrollen in ihrem Rahmen (sonst Überlauf auf dem Handy) */ .vw-raster > div { min-width: 0; } .vw-rechenweg summary { cursor: pointer; font-weight: 600; margin-bottom: 6px; } /* ---------- Unternavigation ---------- */ .unternav { position: sticky; top: 0; z-index: 5; display: flex; gap: 4px; flex-wrap: wrap; margin: 0 -8px 20px; padding: 8px; background: color-mix(in srgb, var(--grund) 94%, transparent); backdrop-filter: blur(6px); border-bottom: 1px solid var(--rand); } .unternav a { padding: 6px 12px; border-radius: 7px; text-decoration: none; color: var(--text); font-weight: 500; } .unternav a:hover { background: var(--flaeche); } .abschnitt { scroll-margin-top: 64px; } .abschnitt > h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; } .abschnitt > h2::before { content: ""; width: 4px; height: 18px; border-radius: 2px; background: var(--kupfer); } /* Objektseite im Design der Hauptseite (Sebastian, 02.11.2026, Konzept doku/konzept-bereich-immobilien.md Stufe 1, Entscheidung „Reiter statt Seitenleiste“ – die Seitennavigation vom 23.09.2026 ist damit abgelöst): Kacheln wie auf der Übersicht, darunter vier Reiter (.cockpit-reiter) und ein zweispaltiges Raster wie .uebersicht-raster – links die Abschnitte des gewählten Reiters, rechts die klebende Spalte mit Wochenkalender, Fristen und offenen Punkten. Unter 1000 px rückt die Spalte unter den Inhalt. */ .objekt-reiter { display: flex; border-bottom: 1px solid var(--rand); margin: 4px 0 18px; } .objekt-reiter button { font-size: 15px; padding: 10px 2px; } .objekt-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: 20px; align-items: start; margin: 0 0 20px; } .objekt-inhalt { min-width: 0; } .objekt-inhalt > section.abschnitt + section.abschnitt { margin-top: 28px; } .objekt-seite { min-width: 0; position: sticky; top: 16px; display: flex; flex-direction: column; gap: 16px; max-height: calc(100vh - 32px); overflow-y: auto; } .objekt-seite .karte { width: 100%; min-width: 0; margin: 0; } .objekt-liste li > span:first-child { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .objekt-liste .unter { font-size: 12.5px; color: var(--text-leise); } .objekt-liste .etikett { white-space: nowrap; } @media (max-width: 1268px) { .objekt-raster { grid-template-columns: minmax(0, 1fr); } .objekt-seite { position: static; max-height: none; overflow: visible; } } /* „⋯“ im Kopf: weitere Aktionen als aufklappende Liste (details), damit wie auf der Übersicht nur ein Hauptknopf bleibt */ .mehr-menue { position: relative; } .mehr-menue > summary { list-style: none; cursor: pointer; min-width: 44px; text-align: center; font-size: 18px; line-height: 1; } .mehr-menue > summary::-webkit-details-marker { display: none; } .mehr-liste { position: absolute; right: 0; top: calc(100% + 6px); min-width: 220px; background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); box-shadow: var(--schatten); padding: 6px; z-index: 30; display: flex; flex-direction: column; } .mehr-liste > a, .mehr-liste > button { text-align: left; background: none; border: 0; font: inherit; color: var(--text); padding: 8px 10px; border-radius: 7px; cursor: pointer; text-decoration: none; } .mehr-liste > a:hover, .mehr-liste > button:hover, .mehr-liste > a:focus-visible, .mehr-liste > button:focus-visible { background: var(--flaeche-leise); } .raster-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 20px; } /* Steht in einem zweispaltigen Raster nur eine Karte (z. B. die CO₂-Kosten unter der Abrechnung), nahm sie die ganze Breite ein, während ihr Text schon bei 100 Zeichen endete – die Karte wirkte halb leer. */ .raster-2 > :only-child { max-width: var(--lesebreite); } /* ---------- Wertelisten ---------- */ /* Beschriftung und Wert gehören zusammen – ohne Obergrenze standen sie bei voller Breite rund 1000 px auseinander („Bank“ links, „Testbank eG“ erst weit rechts). */ .werte { display: grid; grid-template-columns: minmax(150px, 38%) 1fr; margin: 0; max-width: var(--lesebreite); } .werte dt, .werte dd { margin: 0; padding: 8px 0; border-bottom: 1px solid var(--grund); } .werte dt { color: var(--text-leise); padding-right: 14px; } .ankauf-werte-unterzeile { display: block; margin-top: 2px; color: var(--text-leise); font-size: 11px; font-weight: 400; } .werte dd { font-weight: 500; overflow-wrap: anywhere; } .werte dd.leer { color: var(--text-leise); font-weight: 400; } .tabelle-rahmen:focus-visible { outline: 2px solid var(--kupfer-dunkel); outline-offset: 2px; } /* Mietspiegel: Merkmale des Hauses und Abweichungen je Wohnung */ .ms-form .dialog-inhalt { max-width: 920px; } .ms-gruppe { margin: 0 0 12px; } .ms-merkmale { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 18px; align-items: end; } .ms-ja { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; line-height: 1.35; padding: 3px 0; } .ms-ja input { margin-top: 3px; flex: none; } .ms-rechenweg td { padding: 4px 8px; } .ms-hinweise { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; } .werte dt:last-of-type, .werte dd:last-of-type { border-bottom: 0; } .quelle { display: inline-block; margin-left: 6px; width: 15px; height: 15px; border-radius: 50%; background: var(--grund); color: var(--text-leise); font-size: 10px; line-height: 15px; text-align: center; cursor: help; font-weight: 600; vertical-align: 1px; } /* ---------- Tabellen ---------- */ .tabelle-rahmen { overflow-x: auto; } /* Jede zweite Zeile getönt. Bei der Mieterliste mit neun Spalten rutscht der Blick sonst leicht in die falsche Zeile – zwischen „Kaltmiete“ und „Mietspiegel €/m²“ liegen sechs Spalten. Bewusst als eigene Klasse statt für alle Tabellen: Wo drei Spalten stehen, wären Streifen nur Unruhe. */ .gestreift tbody tr:nth-child(even) { background: var(--zeile-wechsel); } /* In diesen Tabellen tragen einzelne Zellen eine zweite Zeile: die Anschrift unter der Bezeichnung, die Abweichung unter dem Angebotspreis, die Abweichung unter dem Mietspiegelwert. Oben ausgerichtet stehen die einzeiligen Werte daneben dann in der Luft – deshalb hier senkrecht in die Zeilenmitte. */ .gestreift th, .gestreift td { vertical-align: middle; } /* Mietspiegel-Balken in der Mieterliste: Schiene = ganze Bandbreite des Mietspiegels, Band = Spanne der Wohnung, Strich = Ist-Miete. Bewusst schmal und ohne Beschriftung – die Zahlen stehen direkt darüber. */ .ms-balken { position: relative; height: 8px; margin: 18px 0 16px; border-radius: 4px; background: var(--grund); border: 1px solid var(--rand); min-width: 160px; } .ms-spanne { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: var(--petrol); opacity: .45; } .ms-ist { position: absolute; top: -4px; width: 3px; height: 14px; margin-left: -1px; border-radius: 2px; background: var(--kupfer-dunkel); } /* Werte an den Markierungen: Höchstwert der Wohnung über der Schiene, Ist-Miete darunter – so überdecken sie sich nicht. */ .ms-wert { position: absolute; transform: translateX(-50%); font-size: 11px; line-height: 1; white-space: nowrap; color: var(--text-leise); font-variant-numeric: tabular-nums; } .ms-oben { top: -14px; } .ms-unten { top: 12px; color: var(--kupfer-dunkel); font-weight: 600; } /* Kärtchen der Kaufkandidaten statt einer Vergleichstabelle (Sebastian, 22.09.2026 – die Tabelle blieb auch nach dem Zusammenlegen der Spalten schlecht lesbar; hochkant statt waagerecht, damit mehrere Kärtchen nebeneinander stehen, Sebastian 22.09.2026 später). Titelbild über die volle Breite, darunter Bezeichnung/Anschrift, Stand und Anzahlen, darunter die wichtigsten Zahlen als strukturierte Liste (Bezeichnung links, Wert rechts) – die volle Rechnung steht im Kandidaten-Dialog. Die Kennzahlenliste (.kk-merkmale/.kk-zahlenblock/.kk-zahlen/.kk-gruppe-titel/.kk-fehlt/.kk-preis-stark/ .kk-netto) benutzt seit 22.09.2026 auch die Seite „Immobilien" für die Bestandskärtchen (Sebastian: „Layout der Kaufkandidaten auf den Bestand überführen") – Kartenrahmen und Bildbereich bleiben dagegen kaufkandidaten- eigen (.kk-karte/.kk-bild/.kk-preisschild), die Bestandskärtchen nutzen dafür .immo-karte (siehe unten). */ /* Über die ganze Fensterbreite statt der sonst üblichen Lesebreite (Sebastian, 22.09.2026): `.karte` ist normalerweise `width: fit-content; min-width: min(100%, 900px)` – gut für Fließtext, bremst aber ein Kärtchen-Raster, das mit mehr Breite einfach mehr Spalten nebeneinander zeigt. Eigene Klasse statt die allgemeine `.karte`-Regel zu ändern, die anderswo bewusst auf Lesebreite bleibt. */ .kk-abschnitt { width: 100%; min-width: 0; } .kk-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; } .kk-karte { display: flex; flex-direction: column; border: 1px solid var(--rand); border-radius: var(--radius); overflow: hidden; cursor: pointer; background: var(--flaeche); } .kk-karte:hover { background: var(--kupfer-hell); } .kk-karte:focus-visible { outline: 2px solid var(--petrol); outline-offset: 2px; } .kk-bild { position: relative; aspect-ratio: 4 / 3; flex-shrink: 0; overflow: hidden; } .kk-bild .titelbild { display: block; width: 100%; height: 100%; } /* Preisschild schräg über die obere Bildecke, wie ein Rabatt-Aufkleber im Supermarkt (Sebastian, 22.09.2026): Kaufpreis und Faktor auf einen Blick, ohne die Zahlenliste herunterzulesen. Klassischer Eckband-Trick: ein überbreites Band mittig über der Ecke, um 45° gedreht, `overflow: hidden` auf `.kk-bild` schneidet die überstehenden Enden am Bildrand ab. Farbe `--petrol`/`--auf-petrol` statt `--kupfer`/`--auf-kupfer`: Kupfer erreicht auf Weiß nur 3,44:1 (siehe Farbtafel oben), zu wenig für kleine fette Schrift. Erster Versuch mit `--kupfer-dunkel` sah im Hellmodus gut aus, aber diese Variable ist für Schrift AUF hellem Grund gedacht und kehrt sich im Dunkelmodus deshalb bewusst ins Helle um (`#ecbb8c`) – als Füllfläche mit weißer Schrift dann kaum noch lesbar. `--petrol`/`--auf-petrol` ist das richtige, für Flächen gepflegte Gegenpaar (9,15:1 auf Weiß) und bleibt in beiden Erscheinungsbildern kontrastreich. */ .kk-preisschild { position: absolute; top: 16px; right: -34px; width: 150px; padding: 4px 0; display: flex; flex-direction: column; align-items: center; gap: 1px; background: var(--petrol); color: var(--auf-petrol); transform: rotate(45deg); box-shadow: 0 2px 5px rgba(0, 0, 0, .3); font-size: 12px; font-weight: 700; line-height: 1.3; } .kk-inhalt { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; flex: 1; } .kk-merkmale { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; } .kk-merkmal { font-size: 12.5px; color: var(--text-leise); } /* Stand der Ankaufsprüfung auf dem Kärtchen (seit 26.10.2026): Fortschritt, Entscheidung, Unterlagen und offene Aufgaben. Der Balken ist derselbe wie in der Prüfung selbst, nur ohne Abstand nach unten. */ .kk-pruefstand { display: flex; flex-direction: column; gap: 3px; } .kk-pruefstand-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; } .kk-pruefstand .balken { margin-bottom: 0; height: 6px; } .kk-pruefstand-fuss { font-size: 11.5px; } /* Zahlen als Definitionsliste: je eine Zeile mit Bezeichnung links, Wert rechts – „strukturierter“ als eine lose umbrechende Reihe von Kärtchen (Sebastian, 22.09.2026). Monatswerte und Jahreswerte stehen in eigenen, überschriebenen Gruppen statt durcheinander (Sebastian, 22.09.2026 später) – die Einmalpreise oben bleiben ungruppiert, dafür trägt nur der Block außenherum den Trennstrich zu den Merkmalen darüber. */ .kk-zahlenblock { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--grund); display: flex; flex-direction: column; gap: 4px; } .kk-zahlen { margin: 0; display: flex; flex-direction: column; gap: 5px; } .kk-zahlen > div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .kk-zahlen dt { margin: 0; font-size: 12.5px; color: var(--text-leise); } /* Kleiner als der übrige Fließtext (Sebastian, 22.09.2026: „mache die KPIs kleiner“) – mit Rendite dazu und jeder Zeile immer sichtbar sind die Kärtchen dichter geworden, kleinere Zahlen halten sie ruhiger. */ .kk-zahlen dd { margin: 0; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } /* Netto-Rendite als zweite Zeile in derselben Zelle wie Brutto (Sebastian, 22.09.2026: „Rendite (Brutto/Netto) auch wieder mit anzeigen“) – eigene Klasse statt der allgemeinen `.leise`, die hier schon für Exposépreis in einer Zeile (nicht als Zweitzeile) steht; eine gemeinsame Regel hätte auch dessen Größe und Zeilenumbruch verändert. Kleiner und normal statt fett, damit die Zweitzeile nicht mit dem Hauptwert konkurriert. */ .kk-netto { display: block; font-size: 11.5px; font-weight: 400; color: var(--text-leise); } /* Jede Zeile steht jetzt auf jedem Kärtchen, mit „–“ statt Wert, wenn nichts erfasst ist (Sebastian, 22.09.2026: „von den Kaufkandidaten die Werte auf der Hauptseite“ sollen auf gleicher Höhe stehen – nur möglich, wenn jedes Kärtchen dieselbe Zeilenzahl hat). Der Strich gedämpft und ohne Fettung, damit er sich von echten Werten unterscheidet, ohne die Zeile selbst zu verstecken. */ .kk-fehlt { color: var(--text-leise); font-weight: 400; } /* Die vier Preise oben farblich unterschieden, damit jede Farbe etwas bedeutet statt nur zu schmücken (Sebastian, 22.09.2026): Exposépreis nur Referenz aus dem Inserat – gedämpft (`.leise`). Kaufpreis die tatsächlich verhandelte Zahl – normales, kräftiges Schwarz (unverändert). Gesamtinvestition die volle Verpflichtung – in Petrol hervorgehoben. Max. Angebot ist eine Grenze, keine feste Größe: Grün, wenn sie den Kaufpreis (oder ohne Kaufpreis den Exposépreis) noch trägt – Luft nach oben; sonst Warnfarbe – der Kaufpreis trägt sich am Ende nicht mehr selbst. */ .kk-preis-stark { color: var(--petrol); } /* Durchlaufender Unterstrich statt nur unter den Buchstaben (Sebastian, 22.09.2026) – der Strich sitzt am ganzen Block, der Block streckt sich schon von selbst über die volle Breite (`.kk-zahlenblock` ist eine Flex-Spalte, `align-items: stretch` ist die Vorgabe). */ .kk-gruppe-titel { margin-top: 6px; padding-bottom: 3px; border-bottom: 1px solid var(--rand); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--text-leise); } /* Annuität als eigene Zeile, Zins und Tilgung mit ihrem Satz darunter eingerückt (Sebastian, 22.09.2026). */ .kk-annuitaet dt, .kk-annuitaet dd { font-weight: 600; color: var(--text); } .kk-annuitaet-teil { padding-left: 14px; } .kk-annuitaet-teil dd { font-weight: 400; } /* Ampel an der Annuität: deckt die Kaltmiete sie? Grün bis 80 %, Gelb bis 100 %, Rot darüber (Sebastian, 22.09.2026). Die Farbe ist nicht die einzige Information – `aria-label`/`title` nennen Stufe und Prozentsatz. */ .kk-ampel { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: middle; margin-bottom: 1px; } .kk-ampel.gut { background: var(--gut); } .kk-ampel.warn { background: var(--warn); } .kk-ampel.schlecht { background: var(--schlecht); } /* Bilder eines Kaufkandidaten: Galerie in der Einzelansicht und Auswahl aus dem Exposé; Titelbild als Icon in der Liste */ .bilder-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; } .bild-karte { margin: 0; border: 1px solid var(--rand); border-radius: var(--radius); overflow: hidden; background: var(--flaeche-leise); } .bild-karte.titel { border-color: var(--kupfer); box-shadow: 0 0 0 2px var(--kupfer-hell); } .bild-karte img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #fff; } .bild-karte figcaption { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 8px 10px; font-size: 12.5px; } .bild-karte figcaption label { display: flex; gap: 6px; align-items: center; } /* Titelbild über die volle Kärtchenbreite (Sebastian, 22.09.2026: Kärtchen hochkant statt waagerecht) – die Randrundung sitzt am `.kk-karte`, das Bild selbst füllt `.kk-bild` (4:3, `overflow: hidden` schneidet die obere Ecke passend mit). Der Platzhalter ohne Bild hat dieselbe Fläche, damit nichts springt. */ .titelbild { object-fit: cover; background: var(--flaeche-leise); } .titelbild.leer { display: block; } /* Tabellen richten sich nach ihrem Inhalt, bleiben aber mindestens auf Lesebreite (oder füllen den Behälter, wenn der schmaler ist). Zuvor erzwang „width: 100 %“ die volle Breite auch bei zwei oder drei Spalten – der Blick musste dann bis zu 900 px je Spalte wandern. Breite Tabellen wachsen weiter: die Mietentabelle mit 16 Spalten auf 1155 px, die Datenpflege mit 12 Spalten auf die volle Breite. */ table { width: auto; min-width: min(100%, var(--lesebreite)); max-width: 100%; border-collapse: collapse; } .ankauf-mieterliste-datum { min-width: 132px; } .ankauf-ansicht[data-ansicht-inhalt="mieterliste"] .tabelle-rahmen > table { width: 100%; } th, td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--grund); vertical-align: top; } th { font-size: 12.5px; font-weight: 600; color: var(--text-leise); background: var(--flaeche-leise); border-bottom: 1px solid var(--rand); white-space: nowrap; } td.r, th.r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } tbody tr.klickbar { cursor: pointer; } tbody tr.klickbar:hover { background: var(--kupfer-hell); } tfoot td { font-weight: 600; border-top: 1px solid var(--rand); border-bottom: 0; background: var(--flaeche-leise); } td .unter { display: block; font-size: 12.5px; color: var(--text-leise); font-weight: 400; } #mieten table th, #mieten table td { padding: 9px 8px; } #mieten tbody td:first-child { white-space: nowrap; } #mieten tbody td:nth-child(2) { min-width: 150px; } /* Für Tabellen mit wenigen Zeilen, aber langen Überschriften (z. B. „Vergleichsmiete × Fläche“ bei der Kachel „Nächste Mieterhöhung“): Überschrift zweizeilig statt die Tabelle über die Fensterbreite hinaus zu treiben (Sebastian, 23.09.2026). Nur für Tabellen mit dieser Klasse – th bleibt sonst app-weit einzeilig. */ .tabelle-kopf-umbruch th { white-space: normal; } /* ---------- Hinweise ---------- */ /* Hinweisboxen enthalten nur Text: Auf breiten Bildschirmen lief die farbige Fläche über die ganze Breite, der Text darin brach aber früher um – das ließ die Box halb leer wirken. Jetzt endet die Fläche selbst bei 100 Zeichen, und der Text darin füllt sie aus (die allgemeine Begrenzung greift darin nicht noch einmal). */ .hinweisbox { display: flex; gap: 12px; padding: 12px 16px; border-radius: var(--radius); background: var(--petrol-hell); color: var(--petrol-dunkel); margin-bottom: 18px; max-width: 100ch; } .hinweisbox p, .hinweisbox li, .hinweisbox dd, .hinweisbox .leise { max-width: none; } .hinweisbox.warn { background: var(--warn-hell); color: var(--auf-warn-hell); } .hinweisbox.gut { background: var(--gut-hell); color: var(--auf-gut-hell); } .hinweisbox svg { width: 20px; height: 20px; flex: none; margin-top: 1px; } .hinweisbox p { margin: 0; } .hinweisbox ul { margin: 6px 0 0; padding-left: 18px; } details.pruefhinweise { margin-bottom: 20px; } details.pruefhinweise summary { cursor: pointer; font-weight: 600; list-style: none; } details.pruefhinweise summary::-webkit-details-marker { display: none; } details.pruefhinweise summary::after { content: " anzeigen"; font-weight: 400; text-decoration: underline; } details.pruefhinweise[open] summary::after { content: " ausblenden"; } /* ---------- Schaltflächen & Formulare ---------- */ .knopf { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 16px; border-radius: 8px; border: 1px solid var(--rand-stark); background: var(--flaeche); color: var(--text); font: inherit; font-weight: 500; cursor: pointer; text-decoration: none; white-space: nowrap; } .knopf:hover { border-color: var(--petrol); } .knopf.primaer { background: var(--petrol); border-color: var(--petrol); color: var(--auf-petrol); } .knopf.primaer:hover { background: var(--petrol-dunkel); } .knopf.kupfer { background: var(--kupfer-dunkel); border-color: var(--kupfer-dunkel); color: var(--auf-kupfer); } .knopf.kupfer:hover { background: #7d4620; border-color: #7d4620; } .knopf.gefahr { color: var(--schlecht); } .knopf.gefahr:hover { border-color: var(--schlecht); background: var(--schlecht-hell); } .knopf.klein { padding: 4px 10px; font-size: 12.5px; } .knopf:disabled { opacity: .5; cursor: not-allowed; } .knopfleiste { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } label.feld { display: block; } label.feld > span { display: block; font-size: 12.5px; color: var(--text-leise); margin-bottom: 4px; } input[type=text], input[type=number], input[type=date], input[type=tel], input[type=email], .kontakte-filter input[type=search], select, textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--rand-stark); border-radius: 7px; font: inherit; color: var(--text); background: var(--feld); } textarea { resize: vertical; min-height: 64px; } input:focus, select:focus, textarea:focus { outline: 2px solid rgba(31, 78, 90, .25); border-color: var(--petrol); } .formraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px 16px; } .formraster .breit { grid-column: 1 / -1; } /* Eine Zeile des Einheiten-Editors (Mieterliste beim Ankauf): abgesetzt, damit man sieht, was zusammengehört. */ .einheit-zeile { padding: 10px 12px; border: 1px solid var(--rand); border-radius: var(--radius); background: var(--flaeche-leise); } .einheit-zeile + .einheit-zeile { margin-top: 10px; } .schalterzeile { display: flex; gap: 8px; align-items: center; } .schalterzeile input[type="text"] { flex: 1; min-width: 0; } fieldset { border: 1px solid var(--rand); border-radius: var(--radius); padding: 14px 18px 18px; margin: 0 0 16px; } legend { padding: 0 6px; font-weight: 600; } .checkliste { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 16px; margin-top: 8px; } .checkliste label, .option { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; } .checkliste input, .option input { margin-top: 3px; accent-color: var(--petrol); } /* ---------- Upload-Assistent ---------- */ .schritte { display: flex; gap: 0; margin-bottom: 22px; counter-reset: schritt; flex-wrap: wrap; } .schritt { flex: 1; min-width: 150px; padding: 10px 14px; border-bottom: 3px solid var(--rand); color: var(--text-leise); font-weight: 500; counter-increment: schritt; } .schritt::before { content: counter(schritt) ". "; } .schritt.aktiv { border-color: var(--kupfer); color: var(--text); } .schritt.fertig { border-color: var(--petrol); color: var(--petrol); } .ablage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 46px 20px; border: 2px dashed var(--rand-stark); border-radius: var(--radius); background: var(--flaeche-leise); text-align: center; cursor: pointer; } .ablage.ueber { border-color: var(--kupfer); background: var(--kupfer-hell); } .ablage svg { width: 42px; height: 42px; color: var(--kupfer); } .fortschritt { height: 10px; border-radius: 5px; background: var(--grund); overflow: hidden; } .fortschritt > div { height: 100%; width: 0; background: linear-gradient(90deg, var(--petrol), var(--kupfer)); transition: width .25s; } .protokoll-live { margin-top: 12px; max-height: 180px; overflow-y: auto; font-size: 12.5px; color: var(--text-leise); } .vorschau { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr); gap: 20px; align-items: start; } .vorschau-feld { padding: 12px 0; border-bottom: 1px solid var(--grund); } .vorschau-feld:last-child { border-bottom: 0; } .vorschau-feld .kopfzeile { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; margin-bottom: 5px; } .vorschau-feld .kopfzeile b { font-weight: 600; } .fundstelle { margin-top: 5px; font-size: 12.5px; color: var(--text-leise); background: var(--flaeche-leise); border-left: 3px solid var(--rand); padding: 4px 8px; border-radius: 0 5px 5px 0; overflow-wrap: anywhere; } .bisher { margin-top: 4px; font-size: 12.5px; color: var(--warn); } .seitenspalte { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 16px; } .seitenbilder { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .seitenbild { margin: 0; } .seitenbild img { display: block; width: 100%; border: 1px solid var(--rand); border-radius: 6px; cursor: zoom-in; background: #fff; } .seitenbild figcaption { font-size: 12px; color: var(--text-leise); margin-top: 3px; } .seitenbild-gross { display: block; width: 100%; height: auto; border: 1px solid var(--rand); border-radius: 6px; } /* Lieferanten-Vorlage: Bereiche auf dem Beleg markieren */ .vorlage-editor { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 14px; margin-top: 12px; align-items: start; } .vorlage-felder { display: flex; flex-direction: column; gap: 6px; } .vorlage-feld { position: relative; border: 1px solid var(--rand); background: var(--flaeche); border-radius: 7px; padding: 6px 28px 6px 9px; cursor: pointer; } .vorlage-feld.markiert { border-left: 3px solid var(--petrol); } .vorlage-feld.aktiv { border-color: var(--kupfer); box-shadow: 0 0 0 2px var(--kupfer-hell); } .vorlage-feld b { font-weight: 600; font-size: 13px; } .vorlage-feld small { display: block; color: var(--text-leise); font-size: 12px; overflow-wrap: anywhere; } .vorlage-weg { position: absolute; top: 5px; right: 5px; border: 0; background: none; color: var(--text-leise); cursor: pointer; font-size: 12.5px; line-height: 1; padding: 3px; } .vorlage-weg:hover { color: var(--schlecht); } .vorlage-seite { position: relative; user-select: none; touch-action: none; cursor: crosshair; border: 1px solid var(--rand); border-radius: 6px; background: #fff; margin-top: 16px; } .vorlage-seite img { display: block; width: 100%; pointer-events: none; border-radius: 6px; } .vorlage-rahmen { position: absolute; border: 2px solid var(--petrol); background: rgba(31, 78, 90, 0.08); pointer-events: none; } .vorlage-rahmen.aktiv { border-color: var(--kupfer); background: rgba(192, 122, 69, 0.12); } /* Feldname über dem Rahmen, damit der markierte Text lesbar bleibt */ .vorlage-rahmen span { position: absolute; left: -2px; bottom: 100%; font-size: 10.5px; line-height: 15px; background: var(--petrol); color: var(--auf-petrol); padding: 0 5px; border-radius: 3px 3px 0 0; white-space: nowrap; } .vorlage-rahmen.aktiv span { background: var(--kupfer-dunkel); } /* nur der gewählte Rahmen trägt den Feldnamen – bei eng stehenden Zeilen verdecken sich die Beschriftungen sonst gegenseitig */ .vorlage-rahmen:not(.aktiv) span { display: none; } @media (max-width: 900px) { .vorlage-editor { grid-template-columns: 1fr; } } /* Inserat je Wohnung: Vorschau, Fotogalerie, Texte */ .inserat-vorschau { display: flex; gap: 14px; align-items: center; } .inserat-vorschau img, .inserat-vorschau .platzhalter { flex: none; width: 132px; height: 96px; border-radius: 7px; border: 1px solid var(--rand); } .inserat-vorschau img { object-fit: cover; background: var(--grund); } .inserat-vorschau .platzhalter { display: grid; place-items: center; border-style: dashed; border-color: var(--rand-stark); color: var(--text-leise); font-size: 12.5px; text-align: center; } .foto-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-top: 12px; } .foto-kachel { display: flex; flex-direction: column; border: 1px solid var(--rand); border-radius: 8px; overflow: hidden; background: var(--flaeche); } .foto-kachel.titelbild { border-color: var(--kupfer); box-shadow: 0 0 0 2px var(--kupfer-hell); } .foto-kachel .bild { position: relative; aspect-ratio: 4 / 3; background: var(--grund); } .foto-kachel .bild img { display: block; width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; } .foto-kachel .nr { position: absolute; left: 6px; top: 6px; font-size: 12px; line-height: 16px; padding: 0 7px; border-radius: 9px; background: rgba(22, 58, 68, 0.82); color: #fff; } .foto-kachel .nr.titel { background: var(--kupfer-dunkel); } .foto-kachel .leiste { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; } .foto-kachel input { margin: 0 6px 6px; width: calc(100% - 12px); font-size: 12.5px; } .inserat-text { margin-top: 14px; } .inserat-text input, .inserat-text textarea { width: 100%; } .text-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 4px; } .zaehler { font-size: 12px; color: var(--text-leise); } /* Aufklappbare Bereiche (details/summary im Stil einer Karte), z. B. die Bereiche im Wohnungsdialog. */ details.klappbar + details.klappbar { margin-top: 14px; } details.klappbar > summary { list-style: none; cursor: pointer; user-select: none; } details.klappbar > summary::-webkit-details-marker { display: none; } details.klappbar > summary h3 { display: flex; align-items: center; gap: 8px; } details.klappbar > summary h3::before { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--kupfer); border-bottom: 2px solid var(--kupfer); transform: rotate(-45deg); transition: transform 0.15s ease; flex: none; } details.klappbar[open] > summary h3::before { transform: rotate(45deg); } details.klappbar:not([open]) > summary { border-bottom: 0; } details.klappbar > summary:hover { background: var(--flaeche-leise); } details.klappbar > summary:focus-visible { outline: 2px solid var(--petrol); outline-offset: -2px; } .bereich-stand { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; font-size: 12.5px; } .bank-kontakt-karte { display: flex; align-items: center; gap: 12px; margin: 8px 0; } .bank-kontakt-karte > img { width: 52px; height: 52px; flex: none; object-fit: cover; border-radius: 50%; } .bank-kontakt-karte .unter { display: block; } .banken-liste { width: 100%; } .banken-konten .tabelle-rahmen { width: 100%; } .banken-kontotabelle { min-width: 900px; } .banken-kontotabelle td { vertical-align: middle; } .banken-kontotabelle td:first-child { font-weight: 500; } .banken-kontotabelle .zahl { white-space: nowrap; } .banken-ansprechpartner { margin-top: 20px; } .banken-kontakte { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 16px; margin-top: 6px; } .banken-kontakt-detail { display: flex; width: 100%; min-width: 0; align-items: center; gap: 10px; padding: 6px 8px; border: 0; border-bottom: 1px solid var(--rand); border-radius: 6px; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; } .banken-kontakt-detail:hover { background: var(--flaeche-leise); } .banken-kontakt-detail:focus-visible { outline: 2px solid var(--petrol); outline-offset: -2px; } .banken-kontakt-detail > img, .banken-kontakt-initialen { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border: 1px solid var(--rand); border-radius: 50%; object-fit: cover; background: var(--petrol-hell); color: var(--petrol); font-size: 12px; font-weight: 600; } .banken-kontakt-name { display: block; min-width: 0; } .banken-kontakt-name b, .banken-kontakt-name .unter { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .banken-kontakt-name .unter { font-size: 12px; } .banken-kontakt-pfeil { margin-left: auto; color: var(--text-leise); font-size: 20px; line-height: 1; } .warnung-text { color: var(--warn); font-weight: 600; } .gut-text { color: var(--gut); font-weight: 600; } /* zugeklappte Bereiche im Raster nicht auf die Höhe des Nachbarn strecken */ .raster-2 > details.klappbar, .raster-2 > div:has(> details.klappbar) { align-self: start; } /* GoBD: Dialog mit Pflicht-Begründung, stornierte Rechnungen, Archiv-Probelauf */ dialog.begruendung-dialog { width: min(600px, calc(100vw - 32px)); } .begruendung-inhalt { display: flex; flex-direction: column; gap: 14px; } .begruendung-optionen { display: flex; flex-direction: column; gap: 10px; } .begruendung-optionen label, .freigabe-formular label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; } .begruendung-optionen input, .freigabe-formular input { margin-top: 3px; flex: none; } .freigabe-formular { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; padding: 14px 16px; border: 1px solid var(--rand); border-radius: var(--radius); background: var(--flaeche-leise); } tr.storniert td { color: var(--text-leise); } tr.storniert td:nth-child(6) { text-decoration: line-through; } .archiv-schluessel { overflow-wrap: anywhere; font-size: 12.5px; } pre.rohtext { white-space: pre-wrap; font: 12px/1.45 Consolas, "Courier New", monospace; max-height: 340px; overflow: auto; background: var(--flaeche-leise); padding: 10px; border-radius: 7px; margin: 10px 0 0; } /* ---------- Übersicht ---------- */ /* Seite „Immobilien“: ein Kärtchen je Objekt, mehrspaltig wie bei den Kaufkandidaten (Sebastian, 22.09.2026 – „Layout der Kaufkandidaten auf den Bestand überführen“; zuvor ein einspaltiges Vier-Block-Dashboard je Objekt). Die Kennzahlenliste darunter (.kk-zahlenblock/.kk-zahlen/… – Klassen aus dem Kaufkandidaten-Kärtchen, siehe oben) wird hier unverändert mitbenutzt, nur der Kartenrahmen und der Kopf sind eigene Klassen: Bestandskarten verlinken auf eine echte Objektseite statt einen Dialog zu öffnen; seit 23.09.2026 mit Titelbild (`.kk-bild`, objekt-bilder.js), genau wie beim Kaufkandidaten – siehe dort die Begründung für den 4:3-Platzhalter. */ .immo-neu { margin-bottom: 22px; } .immo-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; align-items: start; } /* `.karte` ist normalerweise `width: fit-content; min-width: min(100%, var(--lesebreite))` – gut für Fließtext, würde eine Karte im Raster aber breiter als ihre Rasterspalte ziehen wollen. Hier auf die Spaltenbreite fixiert. */ /* Titelbild wie beim Kaufkandidaten-Kärtchen oben über die volle Breite (Sebastian, 23.09.2026: „die gleiche Unterlagenfunktion (inkl. Fotos) wie für die Kaufkandidaten“) – dafür kein Innenabstand mehr direkt auf `.immo-karte`, sondern auf dem Inhalt darunter (`.kk-inhalt`, dieselbe Klasse wie beim Kaufkandidaten). */ .immo-karte { width: auto; min-width: 0; max-width: none; overflow: hidden; } .immo-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 10px; } .immo-kopf h3 { font-size: 17px; margin: 2px 0 0; } .immo-kopf h3 a { color: inherit; text-decoration: none; } .immo-kopf h3 a:hover { color: var(--kupfer); } .immo-kopf .etiketten { display: flex; flex-wrap: wrap; gap: 6px; } .immo-link-zeile { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--grund); } .immo-link { font-size: 13px; font-weight: 600; color: var(--petrol); } .unterlagen-pflicht { margin: 0 0 10px; padding: 0; list-style: none; columns: 2; font-size: 14px; } .unterlagen-pflicht li { break-inside: avoid; padding: 2px 0; } .unterlagen-pflicht li.ok { color: var(--gut); } .unterlagen-pflicht li.fehlt { color: var(--text-leise); } @media (max-width: 600px) { .unterlagen-pflicht { columns: 1; } } /* Zahlungskalender auf der Übersicht: offene Rechnungen rot, geplante Mieteingänge grün */ .kal-steuerung { display: flex; align-items: center; gap: 8px; } .kal-titel { min-width: 130px; text-align: center; } .kal-summen { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } .etikett.schlecht.stark { background: var(--schlecht); color: var(--auf-status); } .kal-raster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--rand); border-left: 1px solid var(--rand); } /* Mieteingänge je Objekt: einzelne Mieten als Hinweis bei Mauszeiger oder Tastaturfokus */ .kal-eintrag.gruen { position: relative; } .kal-eintrag.gruen:hover, .kal-eintrag.gruen:focus-visible { z-index: 30; filter: none; background: color-mix(in srgb, var(--gut) 22%, var(--flaeche)); } .kal-eintrag { min-width: 0; } .kal-liste-eintraege { grid-template-columns: minmax(0, 1fr); } .kal-tip { display: none; position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; width: max-content; min-width: 280px; max-width: min(460px, 80vw); padding: 8px 10px; background: var(--text); color: var(--auf-text); border-radius: 8px; box-shadow: 0 6px 20px rgba(31, 42, 48, .25); font-size: 12.5px; font-weight: 400; line-height: 1.45; white-space: normal; text-align: left; } .kal-eintrag.gruen:hover .kal-tip, .kal-eintrag.gruen:focus-visible .kal-tip { display: block; } .kal-tag.rechts .kal-tip { left: auto; right: 0; } .kal-tip-kopf { display: block; margin-bottom: 4px; font-weight: 600; } .kal-tip-zeile { display: flex; justify-content: space-between; gap: 14px; } .kal-tip-zeile b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } .kal-tip-zeile.summe { margin-top: 4px; padding-top: 4px; border-top: 1px solid rgba(255, 255, 255, .3); } /* Listenansicht (schmale Bildschirme, kein Mauszeiger): einzelne Mieten stehen direkt unter dem Objekt */ .kal-liste .kal-eintrag.gruen { flex-wrap: wrap; } .kal-liste .kal-tip { display: block; position: static; width: 100%; min-width: 0; max-width: none; margin-top: 3px; padding: 3px 0 0; background: none; color: inherit; box-shadow: none; border-top: 1px solid rgba(46, 125, 79, .25); border-radius: 0; } .kal-liste .kal-tip-kopf { display: none; } .kal-liste .kal-tip-zeile.summe { border-top-color: rgba(46, 125, 79, .25); } .kal-kopf { font-size: 12.5px; font-weight: 600; color: var(--text-leise); padding: 6px 8px; background: var(--flaeche-leise); border-right: 1px solid var(--rand); border-bottom: 1px solid var(--rand); } .kal-tag { min-height: 96px; min-width: 0; padding: 4px 5px 6px; display: flex; flex-direction: column; gap: 3px; border-right: 1px solid var(--rand); border-bottom: 1px solid var(--rand); } .kal-tag.leer { background: var(--flaeche-leise); } .kal-tag.wochenende, .kal-kopf.wochenende { background: var(--flaeche); } .kal-nr { font-size: 12.5px; color: var(--text-leise); font-variant-numeric: tabular-nums; } .kal-tag.heute { box-shadow: inset 0 0 0 2px var(--petrol); } .kal-tag.heute .kal-nr { color: var(--petrol); font-weight: 700; } .kal-eintrag { display: flex; justify-content: space-between; gap: 4px; width: 100%; padding: 2px 5px; border: 0; border-left: 3px solid; border-radius: 4px; font: inherit; font-size: 12px; line-height: 1.35; text-align: left; text-decoration: none; cursor: pointer; } .kal-eintrag .kal-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kal-eintrag .kal-betrag { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; } /* Im Monatsraster sind die Zellen schmal: Name oben, Betrag darunter, damit der Name lesbar bleibt */ .kal-raster .kal-eintrag { flex-direction: column; gap: 0; } .kal-eintrag.rot { background: var(--schlecht-hell); color: var(--schlecht); border-left-color: var(--schlecht); } .kal-eintrag.rot.ueberfaellig { background: var(--schlecht); color: var(--auf-status); } .kal-eintrag.gruen { background: var(--gut-hell); color: var(--gut); border-left-color: var(--gut); } .kal-eintrag:hover { filter: brightness(.95); } .kal-eintrag:focus-visible, .kal-eintrag.gewaehlt { outline: 2px solid var(--text); outline-offset: 1px; } .kal-liste { display: none; } .kal-liste-tag { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--grund); } .kal-liste-tag.heute .kal-liste-datum { color: var(--petrol); font-weight: 700; } .kal-liste-datum { flex: none; width: 64px; font-size: 12.5px; color: var(--text-leise); } .kal-liste-eintraege { flex: 1; min-width: 0; display: grid; gap: 4px; } .kal-liste-eintraege .kal-eintrag { font-size: 13px; padding: 4px 8px; } .kal-detail { margin-top: 14px; padding: 14px 16px; border: 1px solid var(--rand); border-left: 4px solid var(--schlecht); border-radius: var(--radius); background: var(--flaeche); } .kal-detail-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .kal-werte { display: grid; grid-template-columns: max-content 1fr; gap: 2px 16px; margin: 10px 0 12px; font-size: 13px; } .kal-werte dt { color: var(--text-leise); } .kal-werte dd { margin: 0; font-variant-numeric: tabular-nums; } .kal-detail-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; } .kal-hinweis { margin: 12px 0 0; font-size: 12.5px; } .kal-punkt { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: baseline; } .kal-punkt.rot { background: var(--schlecht); } .kal-punkt.gruen { background: var(--gut); } /* Vertragsenden blau, Übergabetermine violett – Farben nur im Kalender */ .kalender, .kalender-woche { --blau: #2d5da8; --blau-hell: #e6eefa; --violett: #6a4c9c; --violett-hell: #f0ebf8; } @media (prefers-color-scheme: dark) { :root:not([data-thema="hell"]) :is(.kalender, .kalender-woche) { --blau: #8ab4e8; --blau-hell: #16243a; --violett: #b79ae0; --violett-hell: #241a33; } } :root[data-thema="dunkel"] :is(.kalender, .kalender-woche) { --blau: #8ab4e8; --blau-hell: #16243a; --violett: #b79ae0; --violett-hell: #241a33; } .kal-eintrag.blau { background: var(--blau-hell); color: var(--blau); border-left-color: var(--blau); } .kal-eintrag.violett { background: var(--violett-hell); color: var(--violett); border-left-color: var(--violett); } .kal-punkt.blau { background: var(--blau); } .kal-punkt.violett { background: var(--violett); } .kalender .etikett.blau { background: var(--blau-hell); border-color: transparent; color: var(--blau); } .kalender .etikett.violett { background: var(--violett-hell); border-color: transparent; color: var(--violett); } .kal-detail.blau { border-left-color: var(--blau); } .kal-detail.violett { border-left-color: var(--violett); } .kal-steuerung { flex-wrap: wrap; } .kal-felder { margin: 12px 0; } .kalender input[type=time] { width: 100%; padding: 8px 10px; border: 1px solid var(--rand-stark); border-radius: 7px; font: inherit; color: var(--text); background: var(--feld); } /* Wissensdatenbank: Menüpunkt über dem Benutzer, 3D-Netz, Eintrag und Verzeichnis */ .leiste-wissen { margin: 4px 12px 8px; text-decoration: none; color: inherit; } /* Aufbau: Menü „Wissen auswählen“ links, 3D-Netz in der Mitte, Eintrag rechts (auf kleineren Bildschirmen unter dem Netz) */ .wissen-raster { display: grid; grid-template-columns: 260px minmax(0, 1fr) 360px; grid-template-areas: "menue buehne detail"; gap: 16px; align-items: start; margin-bottom: 20px; } .wissen-menue { grid-area: menue; display: flex; flex-direction: column; max-height: 600px; overflow: hidden; position: sticky; top: 16px; } .wissen-buehne { grid-area: buehne; overflow: hidden; } .wissen-buehne canvas { display: block; width: 100%; height: 600px; cursor: grab; touch-action: pan-y; background: radial-gradient(circle at 50% 45%, var(--flaeche) 0%, var(--grund) 62%, var(--petrol-hell) 100%); } .wissen-detail { grid-area: detail; padding: 18px 20px; max-height: 600px; overflow-y: auto; } .wissen-menue-kopf { padding: 14px 14px 10px; border-bottom: 1px solid var(--rand); } .wissen-menue-kopf h2 { margin-bottom: 8px; font-size: 15px; } .wissen-gruppe-kopf { display: flex; align-items: center; gap: 2px; } .wissen-bereich-link { display: flex !important; align-items: center; flex: 1; min-width: 0; padding: 7px 8px !important; font-weight: 600; color: var(--text) !important; } .wissen-aufklappen { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px; border: 0; border-radius: 6px; background: none; font: inherit; font-size: 12px; color: var(--text-leise); cursor: pointer; } .wissen-aufklappen::after { content: ''; width: 6px; height: 6px; margin: -3px 1px 0; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .15s; } .wissen-gruppe.offen .wissen-aufklappen::after { margin-top: 3px; transform: rotate(-135deg); } .wissen-aufklappen:hover, .wissen-aufklappen:focus-visible { background: var(--grund); color: var(--text); } .wissen-detail h2 { font-size: 20px; margin: 4px 0 6px; } .wissen-detail h3 { margin: 16px 0 6px; font-size: 12.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-leise); } .wissen-detail p { margin: 0 0 8px; } .wissen-bereich { display: flex; align-items: center; font-size: 12.5px; color: var(--text-leise); } .wissen-kurz { font-weight: 600; } .wissen-punkte { margin: 8px 0 0; padding-left: 18px; } .wissen-punkte li { margin: 3px 0; } .wissen-hinweis { margin-top: 18px !important; padding-top: 10px; border-top: 1px solid var(--rand); font-size: 12.5px; color: var(--text-leise); } .wissen-punkt { display: inline-block; flex: none; width: 10px; height: 10px; margin-right: 6px; border-radius: 50%; } .wissen-chips { display: flex; flex-wrap: wrap; gap: 6px; } .wissen-chip { display: inline-flex; align-items: center; padding: 4px 10px; border: 1px solid var(--rand); border-radius: 999px; background: var(--flaeche); font: inherit; font-size: 12.5px; color: var(--text); text-align: left; cursor: pointer; } .wissen-chip:hover, .wissen-chip:focus-visible { border-color: var(--kupfer); background: var(--kupfer-hell); } .wissen-chip.klein { padding: 3px 9px; font-size: 12.5px; } .wissen-suche { width: 100%; padding: 7px 9px; border: 1px solid var(--rand-stark); border-radius: 7px; font: inherit; color: var(--text); background: var(--feld); } .wissen-gruppen { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 8px 10px; } .wissen-gruppe { padding: 2px 0; border-bottom: 1px solid var(--grund); } .wissen-gruppe:last-child { border-bottom: 0; } .wissen-gruppe ul { margin: 0 0 6px; padding: 0 0 0 18px; list-style: none; } .wissen-link { display: block; width: 100%; padding: 4px 8px; border: 0; border-radius: 6px; background: none; font: inherit; font-size: 13px; line-height: 1.35; color: var(--petrol); text-align: left; cursor: pointer; } .wissen-link:hover, .wissen-link:focus-visible { background: var(--grund); } .wissen-link.aktiv { background: var(--petrol-hell); font-weight: 600; } .wissen-link.ebene { font-weight: 600; color: var(--text); } .wissen-keine { margin: 4px 14px 14px; } /* Förderprogramme: Bezug zu den eigenen Objekten und Links zu offiziellen Seiten */ .wissen-objekte { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; } .wissen-objekte > li { padding: 7px 10px; border: 1px solid var(--rand); border-left: 4px solid var(--rand-stark); border-radius: 7px; font-size: 13px; } .wissen-objekte > li.passt { border-left-color: var(--gut); } .wissen-objekte > li.passt-nicht { border-left-color: var(--rand-stark); color: var(--text-leise); } .wissen-objekte > li.offen { border-left-color: var(--warn); } .wissen-objekte > li > a { font-weight: 600; } .wissen-lage { display: block; font-size: 12.5px; color: var(--text-leise); } .wissen-objekte ul { margin: 4px 0 0; padding-left: 16px; font-size: 12.5px; } .wissen-objekte ul li.ok { color: var(--gut); } .wissen-objekte ul li.nein { color: var(--schlecht); } .wissen-objekte ul li.offen { color: var(--warn); } .wissen-links { margin: 0; padding-left: 18px; font-size: 13px; } .wissen-links li { margin: 2px 0; overflow-wrap: anywhere; } /* Kalender: Rechnungen mit angenommenem Zahlungsziel, Zahlungsstand der Mieten, Mieterhöhungen nach § 558 */ .kal-eintrag.rot.angenommen { border-left-style: dashed; background: repeating-linear-gradient(135deg, var(--schlecht-hell) 0 6px, var(--schlecht-hell) 6px 12px); } .kal-eintrag.gruen.rueckstand { border-left-color: var(--warn); } .kal-eintrag.kupfer { background: var(--kupfer-hell); color: var(--kupfer-dunkel); border-left-color: var(--kupfer); } .kal-punkt.kupfer { background: var(--kupfer); } .kal-tip-status { display: block; font-style: normal; font-size: 12px; opacity: .8; } .kal-summen .etikett a { color: inherit; } /* Mietenübersicht: Soll/Ist je Wohnung und Monat, Zahlungen erfassen und aufteilen */ /* Über die ganze Fensterbreite statt der sonst üblichen Lesebreite (Sebastian, 23.09.2026: „Lass die Mietübersicht über die komplette Fensterbreite darstellen“) – wie schon bei `.kk-abschnitt` eigene Klasse statt die allgemeine `.karte`-Regel (`width: fit-content`) zu ändern, die anderswo bewusst auf Lesebreite bleibt. Die Karte allein reichte nicht: `table` ist normalerweise `width: auto` (richtet sich nach dem Inhalt, s. Kommentar oben bei `table`) – bei wenigen Wohnungen/Monaten blieb die Tabelle dadurch schmal, während die jetzt volle Karte drumherum nur leeren Hintergrund zeigte. Nur innerhalb dieser Karten auf 100 % gestreckt, nicht an der allgemeinen `table`-Regel geändert (die bewusst bei 2–3 Spalten nicht auf volle Breite zieht, siehe deren Kommentar). */ .mieten-abschnitt { width: 100%; min-width: 0; } .mieten-abschnitt table { width: 100%; } .mieten-steuerung { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; } .mieten-steuerung .feld { min-width: 240px; } .mieten-jahr { display: flex; align-items: center; gap: 8px; padding-bottom: 4px; } .mieten-jahr strong { min-width: 44px; text-align: center; font-size: 16px; } .schlecht-text { color: var(--schlecht) !important; } .mieten-legende { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-leise); } .mz-punkt { display: inline-block; width: 12px; height: 12px; margin-left: 6px; border-radius: 3px; border: 1px solid var(--rand); } .mieten-tabelle { font-size: 12.5px; } .mieten-tabelle th, .mieten-tabelle td { padding: 7px 8px; } .mieten-tabelle thead th:first-child, .mieten-tabelle tbody th { position: sticky; left: 0; z-index: 1; background: var(--flaeche); } .mieten-tabelle thead th:first-child { background: var(--flaeche-leise); } .mieten-wohnung { min-width: 190px; max-width: 260px; font-weight: 400; text-align: left; white-space: normal; } .mieten-wohnung a { font-weight: 600; } .mieten-hinweise { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .mieten-hinweise .etikett { font-size: 12px; padding: 1px 6px; } .mz { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 58px; border-left: 1px solid var(--flaeche); } .mz-bezahlt, .mz-ueberzahlt { background: var(--gut-hell); color: var(--gut); } .mz-ueberzahlt { font-weight: 700; } .mz-teilweise { background: var(--warn-hell); color: var(--warn); font-weight: 600; } .mz-offen { background: var(--schlecht-hell); color: var(--schlecht); font-weight: 600; } .mz-kuenftig { color: var(--text-leise); } .mz-vor-erfassung { background: var(--flaeche-leise); color: var(--text-leise); } /* Kontoauszug-Import in der Mietenübersicht */ .mieten-import .import-info { margin: 12px 0 4px; } .import-spalten { margin: 10px 0 12px; } .import-spalten summary, .mieten-gemerkt summary { cursor: pointer; font-weight: 600; color: var(--petrol); } .import-spalten .formraster { margin-top: 10px; } .import-filter { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 10px; } .import-tabelle td { vertical-align: top; } .import-tabelle select { max-width: 250px; } .import-text .unter { max-width: 320px; overflow-wrap: anywhere; } .import-etiketten { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .import-gewaehlt td { background: var(--gut-hell); } .import-doppelt td { opacity: .55; } .import-merken { white-space: nowrap; font-size: .9em; } .import-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; } .mieten-gemerkt summary { padding: 14px 18px; } .mieten-gemerkt .tabelle-rahmen { padding: 0 18px 14px; } .unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .mz-ohne-betrag, .mz-ohne-vertrag { background: var(--flaeche-leise); color: var(--text-leise); } .mz-kein-vertrag, .mz-verkauft { background: repeating-linear-gradient(135deg, var(--flaeche-leise) 0 5px, var(--flaeche) 5px 10px); } /* Verkauf: eigene Gruppe auf der Seite „Immobilien“, Karte auf der Objektseite */ .immo-titel { margin: 30px 0 12px; font-size: 17px; } .verkauf-karte { margin-top: 18px; } .mz[role=button] { cursor: pointer; } .mz[role=button]:hover, .mz[role=button]:focus-visible { outline: 2px solid var(--petrol); outline-offset: -2px; } /* Direkteingabe in der Zelle (Sebastian, 23.09.2026): füllt die schmale Zelle, Zahlen bleiben rechtsbündig wie der Anzeigewert. */ .mz-eingabe { width: 100%; min-width: 58px; padding: 2px 4px; border: 1px solid var(--petrol); border-radius: 4px; font: inherit; font-size: 12.5px; text-align: right; color: var(--text); background: var(--feld); } .mieten-tipp { margin: 0; padding: 8px 20px 14px; font-size: 12.5px; } .mieten-aufteilung-kurz span { display: block; font-size: 12.5px; white-space: nowrap; } .mieten-formular { margin-bottom: 20px; border-left: 4px solid var(--kupfer); } .mieten-zwischentitel { margin: 18px 0 8px; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-leise); } .mieten-auto { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .mieten-auto .feld { min-width: 220px; } .mieten-auto .leise { font-size: 12.5px; padding-bottom: 6px; } .mieten-aufteilung td { padding: 5px 6px; } .mieten-aufteilung select, .mieten-aufteilung input { min-width: 130px; padding: 6px 8px; } .mieten-aufteilung input[type=month] { border: 1px solid var(--rand-stark); border-radius: 7px; font: inherit; } .mieten-aufteilung input[name=betrag] { text-align: right; min-width: 100px; } .mieten-summe { margin: 10px 0; font-weight: 600; } .mieten-knoepfe { display: flex; gap: 8px; margin-top: 12px; } /* Objektseite: Förderangaben; Wissensdatenbank: Hinweis bei veralteter Recherche; Übersicht: fehlende Werte */ .foerderangaben { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--grund); } .foerderangaben-formular { margin-top: 10px; } .foerderangaben-formular .leise { margin: 8px 0; font-size: 12.5px; } .wissen-veraltet { margin: 14px 0 0 !important; padding: 8px 10px; border-radius: 7px; background: var(--warn-hell); color: var(--warn); font-size: 12.5px; font-weight: 600; } .kennzahl .wert.fehlt { font-size: 15px; font-weight: 500; color: var(--text-leise); } .kennzahl .zusatz a { color: var(--petrol); } @media (max-width: 1768px) { .wissen-raster { grid-template-columns: 250px minmax(0, 1fr); grid-template-areas: "menue buehne" "menue detail"; } .wissen-menue { max-height: calc(100vh - 32px); } .wissen-detail { max-height: none; } } @media (max-width: 900px) { .wissen-raster { grid-template-columns: minmax(0, 1fr); grid-template-areas: "menue" "buehne" "detail"; } .wissen-menue { position: static; max-height: 360px; } } @media (max-width: 700px) { .wissen-buehne canvas { height: 380px; } } @media (max-width: 700px) { .kal-raster { display: none; } .kal-liste { display: block; } .karte-kopf .kal-steuerung { width: 100%; justify-content: space-between; } } /* ---------- Dialog ---------- */ dialog { width: min(980px, calc(100vw - 40px)); max-height: calc(100vh - 40px); padding: 0; border: 0; border-radius: 14px; box-shadow: 0 20px 60px rgba(0, 0, 0, .25); } dialog::backdrop { background: rgba(22, 58, 68, .45); } /* Die Einzelansicht eines Kaufkandidaten trägt Rechnung, Mieterliste und Mietspiegel und wäre untereinander über 2000 px hoch. Auf breiten Schirmen bekommt sie deshalb mehr Breite. */ dialog.ankauf-dialog { width: min(1480px, calc(100vw - 40px)); } .ankauf-dialog-titelzeile { display: flex; min-width: 0; align-items: center; gap: 14px; } .ankauf-dialog-titelbild { width: 124px; height: 86px; flex: 0 0 124px; overflow: hidden; border-radius: 4px; background: var(--flaeche-leise); } .ankauf-dialog-titelbild .titelbild { display: block; width: 100%; height: 100%; } .ankauf-dialog-kopftext { min-width: 0; } .ankauf-dialog-kopftext h2 { margin-bottom: 0; } dialog.ankauf-dialog-popup { width: calc(100vw - 16px); height: calc(100dvh - 16px); max-width: none; max-height: none; overflow: hidden; border-radius: 8px; } dialog.ankauf-dialog-popup > div { display: grid; width: 100%; height: 100%; max-height: none; grid-template-columns: 220px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); } dialog.ankauf-dialog-popup .dialog-kopf { grid-column: 2; grid-row: 1; position: static; } dialog.ankauf-dialog-popup .dialog-inhalt { grid-column: 2; grid-row: 2; min-height: 0; max-height: none; overflow: auto; } dialog.ankauf-dialog-popup .dialog-fuss { grid-column: 1; grid-row: 1 / 3; position: static; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 8px; overflow-y: auto; padding: 16px 12px; border-top: 0; border-right: 1px solid var(--rand); background: var(--flaeche-leise); } dialog.ankauf-dialog-popup .dialog-fuss::before { display: none; } dialog.ankauf-dialog-popup .dialog-fuss > * { width: 100%; min-width: 0; } dialog.ankauf-dialog-popup .dialog-fuss select { white-space: normal; } dialog.ankauf-dialog-popup .ankauf-dialog-navigation { flex-direction: column; flex-wrap: nowrap; align-items: stretch; } dialog.ankauf-dialog-popup .ankauf-dialog-navigation .knopf { width: 100%; justify-content: flex-start; } dialog.ankauf-dialog-popup .ankauf-dialog-aktionen { flex-direction: column; flex-wrap: nowrap; align-items: stretch; margin-top: 0; padding-top: 12px; border-top: 1px solid var(--rand); } dialog.ankauf-dialog-popup .ankauf-dialog-aktionen .knopf { width: 100%; justify-content: flex-start; text-align: left; white-space: normal; line-height: 1.25; } dialog.ankauf-dialog-popup .ankauf-dialog-navigation-titel { flex: 0 0 auto; } .ankauf-dialog-navigation { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; } .ankauf-dialog-navigation-titel { flex: 0 0 100%; margin: 2px 4px 4px; color: var(--text-leise); font-size: 12px; font-weight: 600; } .ankauf-dialog-navigation .knopf { min-height: 36px; padding: 8px 10px; border: 0; border-radius: 4px; background: transparent; color: var(--text-leise); text-align: left; justify-content: flex-start; } .ankauf-dialog-navigation .knopf:hover { background: var(--flaeche); } .ankauf-dialog-navigation .knopf.aktiv { border-color: transparent; color: var(--petrol); background: var(--petrol-hell); box-shadow: inset 3px 0 var(--petrol); font-weight: 600; } .ankauf-dialog-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } @media (max-width: 850px) { dialog.ankauf-dialog-popup > div { grid-template-columns: 168px minmax(0, 1fr); } dialog.ankauf-dialog-popup .dialog-fuss { padding: 12px 8px; } dialog.ankauf-dialog-popup .dialog-fuss > * { padding-right: 6px; padding-left: 6px; font-size: 12px; } dialog.ankauf-dialog-popup .ankauf-dialog-navigation .knopf, dialog.ankauf-dialog-popup .ankauf-dialog-aktionen .knopf { padding-right: 6px; padding-left: 6px; font-size: 12px; } } @media (max-width: 560px) { dialog.ankauf-dialog-popup > div { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; } .ankauf-dialog-titelbild { width: 84px; height: 64px; flex-basis: 84px; } dialog.ankauf-dialog-popup .dialog-kopf { grid-column: 1; grid-row: 1; } dialog.ankauf-dialog-popup .dialog-inhalt { grid-column: 1; grid-row: 2; } dialog.ankauf-dialog-popup .dialog-fuss { grid-column: 1; grid-row: 3; flex-direction: row; flex-wrap: wrap; align-items: center; border-top: 1px solid var(--rand); border-right: 0; } dialog.ankauf-dialog-popup .ankauf-dialog-navigation { flex: 1 0 100%; flex-direction: row; align-items: center; } dialog.ankauf-dialog-popup .ankauf-dialog-navigation .knopf { width: auto; } dialog.ankauf-dialog-popup .ankauf-dialog-aktionen { flex: 1 0 100%; flex-direction: row; align-items: center; margin-top: 0; padding-top: 8px; border-top: 1px solid var(--rand); } dialog.ankauf-dialog-popup .ankauf-dialog-navigation-titel { flex: 0 0 100%; } dialog.ankauf-dialog-popup .ankauf-dialog-aktionen .knopf { width: auto; } dialog.ankauf-dialog-popup .dialog-fuss > * { width: auto; flex: 1 1 120px; } dialog.ankauf-dialog-popup .ankauf-dialog-navigation .knopf, dialog.ankauf-dialog-popup .ankauf-dialog-aktionen .knopf { flex: 1 1 110px; } } dialog.banken-dialog { width: min(1320px, calc(100vw - 32px)); max-height: min(900px, calc(100dvh - 32px)); overflow: hidden; border-radius: 10px; } dialog.banken-kontakt-dialog { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: hidden; border-radius: 10px; } .banken-kontakt-popup .dialog-kopf { align-items: center; padding: 20px 24px; border-top: 3px solid var(--kupfer); } .banken-kontakt-popup .dialog-inhalt { padding: 8px 24px 20px; } .banken-kontakt-popup .dialog-fuss { padding: 12px 24px; } .banken-kontakt-profil { display: flex; min-width: 0; align-items: center; gap: 14px; } .banken-kontakt-profil img, .banken-kontakt-profil .banken-kontakt-initialen { display: grid; place-items: center; width: 64px; height: 64px; flex: none; border: 1px solid var(--rand); border-radius: 50%; object-fit: cover; background: var(--petrol-hell); color: var(--petrol); font-size: 16px; font-weight: 600; } .banken-kontakt-profil h2 { margin: 3px 0; overflow-wrap: anywhere; } .banken-kontakt-aktionen { display: grid; gap: 0; } .banken-kontakt-aktionen > div { display: grid; gap: 3px; padding: 12px 0; border-bottom: 1px solid var(--rand); } .banken-kontakt-aktionen > div:last-child { border-bottom: 0; } .banken-kontakt-wert { width: fit-content; max-width: 100%; overflow-wrap: anywhere; font-size: 15px; font-weight: 500; } @media (max-width: 560px) { .banken-kontakt-popup .dialog-kopf { padding: 16px; } .banken-kontakt-popup .dialog-inhalt { padding: 8px 16px 16px; } .banken-kontakt-popup .dialog-fuss { padding: 10px 16px; } .banken-kontakt-profil { gap: 10px; } .banken-kontakt-profil img, .banken-kontakt-profil .banken-kontakt-initialen { width: 52px; height: 52px; } } .banken-form { display: flex; flex-direction: column; max-height: inherit; } .banken-form .dialog-inhalt { display: grid; gap: 22px; min-height: 0; overflow: auto; padding: 22px 30px; } .banken-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 0; } .banken-form legend { display: block; width: 100%; margin: 0 0 12px; padding: 0 0 8px; border-bottom: 1px solid var(--rand); color: var(--petrol); font-size: 14px; } .banken-form .dialog-kopf { padding: 18px 30px; border-top: 3px solid var(--kupfer); } .banken-form .dialog-kopf h2 { font-size: 19px; } .banken-form .dialog-inhalt { background: var(--flaeche); } .banken-form .formraster { gap: 12px 16px; } .banken-form .feld > span { margin-bottom: 3px; font-size: 12px; } .banken-form input:not([type="file"]), .banken-form select, .banken-form textarea { min-height: 34px; padding: 5px 9px; border-color: var(--rand-stark); border-radius: 5px; font-size: 13px; line-height: 1.35; } .banken-form select { padding-right: 28px; } .banken-form textarea { min-height: 58px; } .banken-form input:not([type="file"]):focus, .banken-form select:focus, .banken-form textarea:focus { outline: 2px solid rgba(31, 78, 90, .2); outline-offset: 1px; border-color: var(--petrol); } .banken-oberteile { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 30px; align-items: start; } .banken-oberteile > fieldset { min-width: 0; } .banken-oberteile > fieldset + fieldset { padding-left: 26px; border-left: 1px solid var(--rand); } .banken-form .einheit-zeile.bank-kontakt { margin: 0; padding: 12px 0; border: 0; border-top: 1px solid var(--rand); border-radius: 0; background: transparent; } .banken-form .bank-kontakt .formraster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; } .banken-form .bank-kontakt .feld > span { font-size: 12px; } .banken-form .bank-kontakt input { min-width: 0; } .banken-form .bank-kontakt [data-kontakt-vorschau] { display: block; border: 1px solid var(--rand); background: var(--flaeche-leise); } .banken-form .tabelle-rahmen { max-height: 260px; margin-bottom: 4px; } .banken-form .tabelle-rahmen input { min-width: 120px; padding: 6px 8px; } .banken-form .dialog-fuss { padding: 12px 30px; } @media (max-width: 800px) { .banken-oberteile { grid-template-columns: minmax(0, 1fr); gap: 20px; } .banken-oberteile > fieldset + fieldset { padding-left: 0; border-left: 0; } .banken-form .dialog-inhalt { padding: 18px 20px; } .banken-form .dialog-kopf, .banken-form .dialog-fuss { padding-right: 20px; padding-left: 20px; } } .ankauf-detail { display: block; } /* Fünf Kacheln seit dem 26.10.2026 (Prüfstatus kam dazu, als die Ankaufsprüfung in den Kandidaten zog). Feste Spalten in einer Reihe hätten die letzten Kacheln aus dem Dialog geschoben – sie stehen jetzt so breit wie vorher, brechen aber um, sobald die Reihe nicht mehr passt. */ .ankauf-kpi-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 285px)); justify-content: safe center; gap: 8px; margin-bottom: 16px; overflow-x: auto; } .ankauf-kpi { display: flex; min-width: 0; min-height: 72px; flex-direction: column; justify-content: center; gap: 3px; padding: 8px 9px; border: 1px solid var(--rand); border-radius: 6px; background: var(--flaeche); } /* Der Prüfstatus ist anklickbar (führt zur Ansicht „Prüfung“) – als Knopf braucht er Schrift und Ausrichtung zurück. */ button.ankauf-kpi { font: inherit; color: inherit; text-align: left; cursor: pointer; } button.ankauf-kpi:hover { border-color: var(--rand-stark); } .ankauf-kpi-pruefstand.gut { border-color: var(--gut); background: var(--gut-hell); } .ankauf-kpi-pruefstand.warn { border-color: var(--warn); background: var(--warn-hell); } .ankauf-kpi-pruefstand.schlecht { border-color: var(--schlecht); background: var(--schlecht-hell); } .ankauf-kpi-pruefstand.unbekannt { background: var(--flaeche-leise); } .ankauf-kpi-finanzierungswerte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 8px; } .ankauf-kpi-finanzierungswerte > div { display: flex; min-width: 0; flex-direction: column; gap: 1px; padding: 2px 0; } .ankauf-kpi-finanzierungswerte span { overflow: hidden; color: var(--text-leise); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; } .ankauf-kpi-finanzierungswerte b { overflow: hidden; font-size: 15px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; } .ankauf-kpi-deckung { white-space: nowrap; } .ankauf-kpi-deckung.gut { border-color: var(--gut); background: var(--gut-hell); } .ankauf-kpi-deckung.warn { border-color: var(--warn); background: var(--warn-hell); } .ankauf-kpi-deckung.schlecht { border-color: var(--schlecht); background: var(--schlecht-hell); } .ankauf-kpi-deckung.unbekannt { background: var(--flaeche-leise); } .ankauf-kpi-vermietung.gut { border-color: var(--gut); background: var(--gut-hell); } .ankauf-kpi-vermietung.warn { border-color: var(--warn); background: var(--warn-hell); } .ankauf-kpi-vermietung.schlecht { border-color: var(--schlecht); background: var(--schlecht-hell); } .ankauf-kpi-vermietung.unbekannt { background: var(--flaeche-leise); } .ankauf-kpi-titel { overflow: hidden; color: var(--text-leise); font-size: 11px; font-weight: 600; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; } .ankauf-kpi > strong { overflow: hidden; font-size: 18px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; } .ankauf-kpi-zusatz { overflow: hidden; color: var(--text-leise); font-size: 10px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; } .ankauf-kpi-vergleich { display: grid; min-width: 0; gap: 2px; font-size: 10px; font-variant-numeric: tabular-nums; } .ankauf-kpi-vergleich > span { display: flex; min-width: 0; justify-content: space-between; gap: 4px; white-space: nowrap; } .ankauf-kpi-vergleich small { color: var(--text-leise); font-size: 10px; } .ankauf-kpi-vergleich b { overflow: hidden; font-size: 14px; text-overflow: ellipsis; } .ankauf-kpi-deckung-inhalt { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; } .ankauf-kpi-deckung-werte { display: grid; min-width: 0; gap: 2px; } .ankauf-dscr-kreis { display: flex; width: 52px; height: 52px; flex: 0 0 52px; flex-direction: column; align-items: center; justify-content: center; border: 2px solid currentColor; border-radius: 50%; font-variant-numeric: tabular-nums; line-height: 1.05; } .ankauf-dscr-kreis strong { font-size: 15px; } .ankauf-dscr-kreis small { margin-top: 2px; font-size: 8px; } .ankauf-kpi-deckung.gut .ankauf-dscr-kreis { color: var(--gut); } .ankauf-kpi-deckung.warn .ankauf-dscr-kreis { color: var(--warn); } .ankauf-kpi-deckung.schlecht .ankauf-dscr-kreis { color: var(--schlecht); } .ankauf-kpi-deckung.unbekannt .ankauf-dscr-kreis { color: var(--text-leise); } .ankauf-dialog > div { display: flex; max-height: calc(100dvh - 40px); flex-direction: column; } .ankauf-dialog .dialog-inhalt { min-height: 0; overflow: auto; } .ankauf-bilder-abschnitt { margin: 20px 0; scroll-margin-top: 14px; } .ankauf-bilder-abschnitt > h3 { margin: 0 0 10px; } .ankauf-bildgruppe + .ankauf-bildgruppe { margin-top: 18px; } .ankauf-bildgruppe h4 { margin: 0 0 8px; font-size: 13px; } .ankauf-bildgruppe .bilder-raster { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } .bild-hover-aktionen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: rgba(20, 31, 36, .72); opacity: 0; visibility: hidden; transition: opacity .14s ease; } .bild-karte:hover .bild-hover-aktionen, .bild-karte:focus-within .bild-hover-aktionen { opacity: 1; visibility: visible; } .bild-hover-aktionen .knopf { display: inline-flex; max-width: calc(100% - 8px); align-items: center; justify-content: center; gap: 4px; padding: 5px 6px; border-color: rgba(255, 255, 255, .65); background: var(--flaeche); font-size: 10px; white-space: nowrap; } .bild-hover-aktionen .knopf svg, .bild-bearbeiten .knopf svg { width: 14px; height: 14px; flex: none; } .bild-bearbeiten { position: absolute; right: 4px; bottom: 4px; left: 4px; display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; padding: 4px; border-radius: 4px; background: var(--flaeche); box-shadow: var(--schatten); } .bild-bearbeiten[hidden] { display: none; } .bild-bearbeiten .knopf { display: inline-flex; align-items: center; gap: 3px; padding: 3px 5px; font-size: 9px; } @media (hover: none) { .bild-hover-aktionen { inset: auto 0 0; min-height: 34px; flex-direction: row; gap: 3px; padding: 3px; background: rgba(20, 31, 36, .76); opacity: 1; visibility: visible; } .bild-hover-aktionen .knopf { max-width: 50%; padding: 3px 4px; font-size: 9px; } } .ankauf-ansicht { min-width: 0; } .ankauf-ansicht[hidden] { display: none; } .ankauf-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: 24px; align-items: start; } .ankauf-detail-haupt { min-width: 0; } .ankauf-steckbrief { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 28px; margin-bottom: 22px; } .ankauf-steckbrief-gruppe { min-width: 0; } .ankauf-steckbrief-gruppe h3 { margin: 0 0 8px; font-size: 14px; } .ankauf-steckbrief-gruppe dl { display: grid; gap: 0; margin: 0; } .ankauf-steckbrief-zeile { display: grid; grid-template-columns: minmax(105px, .85fr) minmax(0, 1.15fr); gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--rand); } .ankauf-steckbrief-zeile dt { color: var(--text-leise); font-size: 12px; } .ankauf-steckbrief-zeile dd { min-width: 0; margin: 0; overflow-wrap: anywhere; font-size: 12.5px; font-weight: 500; } .ankauf-lagebeschreibungen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto minmax(160px, max-content) auto; gap: 18px 24px; margin: 20px 0; align-items: start; } .ankauf-lagebereich { display: grid; min-width: 0; grid-row: span 4; grid-template-rows: subgrid; align-content: start; } .ankauf-lagebeschreibungen h3, .ankauf-uebersicht-abschnitt h3 { margin: 0 0 7px; font-size: 14px; } .ankauf-lagebeschreibungen h4 { margin: 0 0 7px; font-size: 13px; } .ankauf-lagebeschreibungen p, .ankauf-uebersicht-abschnitt p { margin: 0; overflow-wrap: anywhere; white-space: pre-line; font-size: 13px; } .ankauf-lagevorschlag { margin: 20px 0; padding: 14px 0; border-top: 1px solid var(--rand); border-bottom: 1px solid var(--rand); } .ankauf-lagevorschlag > h3 { margin: 0; font-size: 14px; } .ankauf-lageaktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; } .ankauf-lageaktionen [data-lage-status] { flex: 1 1 100%; } .ankauf-lagebewertung { margin: 12px 0 0; } .ankauf-lagebewertung-kopf { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; } .ankauf-lagebewertung-kopf strong { font-size: 18px; font-variant-numeric: tabular-nums; } .ankauf-lagebewertung-kopf span { color: var(--text-leise); font-size: 12px; font-weight: 600; } .ankauf-lagebewertung ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; } .ankauf-lagebewertung li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 10px; align-items: baseline; padding: 5px 0; border-bottom: 1px solid var(--rand); font-size: 12px; } .ankauf-lagebewertung li > span:first-child { color: var(--text-leise); } .ankauf-lage-einordnung { font-size: 11px; font-weight: 600; white-space: nowrap; } .ankauf-lage-einordnung.gut { color: var(--gut); } .ankauf-lage-einordnung.warn { color: var(--warn); } .ankauf-lage-einordnung.schlecht { color: var(--schlecht); } .ankauf-lage-bewertungshinweis { margin-top: 8px !important; color: var(--text-leise); font-size: 11px !important; } .ankauf-lagekarte { margin: 14px 0 0; } .ankauf-lagekarte-bildbereich { position: relative; } .ankauf-lagekarte img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; border: 1px solid var(--rand); background: var(--flaeche-leise); } .ankauf-lagekarten-marker { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .ankauf-poi-marker { position: absolute; display: grid; width: 28px; height: 28px; place-items: center; transform: translate(-50%, -50%); padding: 0; border: 2px solid #fff; border-radius: 50%; background: var(--petrol); box-shadow: 0 1px 5px rgba(0, 0, 0, .55); color: #fff; } .ankauf-poi-marker svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .ankauf-poi-marker.poi-supermarkt { background: #237653; } .ankauf-poi-marker.poi-schule { background: #a55a16; } .ankauf-poi-marker.poi-arzt { background: #ad3434; } .ankauf-poi-marker.poi-haltestelle { background: #315d9a; } .ankauf-poi-marker.poi-bahnhof { background: #5b4c88; } .ankauf-poi-legende { display: flex; flex-wrap: wrap; gap: 5px 12px; margin-top: 7px; } .ankauf-poi-legende > span { display: inline-flex; align-items: center; gap: 5px; color: var(--text-leise); font-size: 10px; } .ankauf-poi-legende b { display: grid; width: 22px; height: 22px; min-width: 22px; place-items: center; padding: 3px; border-radius: 50%; background: #237653; color: #fff; } .ankauf-poi-legende b svg { display: block; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .ankauf-poi-legende > span:nth-child(2) b { background: #a55a16; } .ankauf-poi-legende > span:nth-child(3) b { background: #ad3434; } .ankauf-poi-legende > span:nth-child(4) b { background: #315d9a; } .ankauf-poi-legende > span:nth-child(5) b { background: #5b4c88; } .ankauf-lagekarte figcaption { margin-top: 4px; color: var(--text-leise); font-size: 10px; } .ankauf-lagekarte p { margin: 10px 0; } .ankauf-uebersicht-abschnitt { margin: 20px 0; } .ankauf-finanz-szenario { margin: 0 0 22px; padding: 0 0 18px; border-bottom: 1px solid var(--rand); } .ankauf-finanz-szenario > h3 { margin: 0 0 4px; font-size: 15px; } .ankauf-finanz-szenario > p { margin: 0; font-size: 12px; } .ankauf-finanz-regler { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 22px; margin: 16px 0; } .ankauf-finanz-regler label { display: grid; min-width: 0; gap: 8px; } .ankauf-finanz-regler label > span { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; } .ankauf-finanz-regler-mit-wert { display: grid; min-width: 0; align-content: start; gap: 8px; } .ankauf-finanz-regler-mit-wert > label { color: var(--text-leise); font-size: 12.5px; } .ankauf-finanz-regler-wertplatz { position: relative; min-width: 0; height: 39px; } .ankauf-finanz-regler-wertplatz input[type="number"] { position: absolute; top: 0; width: 82px; height: 30px; padding: 4px 6px; text-align: center; font-variant-numeric: tabular-nums; } .ankauf-finanz-kaufpreis-regler { display: grid; min-width: 0; align-content: start; gap: 8px; } .ankauf-finanz-kaufpreis-regler label { color: var(--text-leise); font-size: 12.5px; } .ankauf-finanz-kaufpreis-regler input[type="number"] { width: 100%; font-variant-numeric: tabular-nums; } .ankauf-finanz-eigenkapital-regler { display: grid; min-width: 0; align-content: start; gap: 8px; } .ankauf-finanz-eigenkapital-regler label { color: var(--text-leise); font-size: 12.5px; } .ankauf-finanz-eigenkapital-regler input[type="number"] { width: 100%; font-variant-numeric: tabular-nums; } .ankauf-finanz-regler output { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } .ankauf-finanz-regler input[type="range"] { width: 100%; margin: 0; padding: 0; accent-color: var(--petrol); } .ankauf-finanz-ergebnis dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 18px; margin: 0; } .ankauf-finanz-ergebnis-zeile dt { color: var(--text-leise); font-size: 11px; } .ankauf-finanz-ergebnis-zeile dd { margin: 2px 0 0; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; } .ankauf-kurzinfo { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 9px; margin: 0 0 12px; color: var(--text-leise); font-size: 12.5px; } .ankauf-kurzinfo > span:not(:first-child)::before { content: '·'; margin-right: 9px; color: var(--rand-stark); } .ankauf-seitenleiste { position: sticky; top: 0; display: grid; min-width: 0; align-content: start; gap: 14px; overflow: visible; padding-left: 16px; border-left: 1px solid var(--rand); } .ankauf-seitenleiste > section { min-width: 0; padding-bottom: 12px; border-bottom: 1px solid var(--rand); } .ankauf-seitenleiste > section > h3 { margin: 0 0 8px; font-size: 13px; } .ankauf-checkliste, .ankauf-telefonnotizen { margin: 0; padding: 0; list-style: none; } .ankauf-checkliste li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 6px; align-items: baseline; padding: 5px 0; font-size: 12.5px; } .ankauf-checkliste li.vorhanden > span:first-child { color: var(--gut); } .ankauf-checkliste li.fehlt > span:first-child { color: var(--kupfer-dunkel); } .ankauf-checkliste li .leise { font-size: 11px; } .ankauf-telefonnotizen { display: grid; gap: 8px; } .ankauf-telefonnotizen li { padding-bottom: 8px; border-bottom: 1px solid var(--rand); } .ankauf-telefonnotizen li > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px; font-size: 12px; } .ankauf-telefonnotizen li time { color: var(--text-leise); } .ankauf-telefonnotizen li p { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12.5px; } .ankauf-telefonnotiz-form { display: grid; gap: 7px; margin-top: 10px; } .ankauf-telefonnotiz-form textarea { min-height: 72px; font-size: 12.5px; } .ankauf-telefonnotiz-form .knopf { justify-self: start; } .ankauf-verlauf-abschnitt { display: grid; gap: 8px; } .ankauf-verlauf-abschnitt > .knopf { justify-self: start; } .ankauf-nachrichtenverlauf { display: grid; gap: 0; max-height: 300px; overflow: auto; margin: 0; padding: 0; list-style: none; } .ankauf-nachrichtenverlauf > li { display: grid; gap: 3px; padding: 8px 0; border-bottom: 1px solid var(--rand); overflow-wrap: anywhere; } .ankauf-nachrichtenverlauf > li > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 8px; font-size: 12px; } .ankauf-nachrichtenverlauf time, .ankauf-nachrichtenverlauf .leise { color: var(--text-leise); font-size: 11.5px; } .ankauf-nachrichtenverlauf p { margin: 2px 0; white-space: pre-wrap; font-size: 12.5px; } @media (max-width: 850px) { .ankauf-detail-layout { grid-template-columns: minmax(0, 1fr); gap: 18px; } .ankauf-steckbrief { grid-template-columns: minmax(0, 1fr); } .ankauf-lagebeschreibungen { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; } .ankauf-lagebereich { grid-row: auto; grid-template-rows: auto auto auto auto; } .ankauf-seitenleiste { position: static; max-height: none; overflow: visible; padding: 14px 0 0; border-top: 1px solid var(--rand); border-left: 0; } .ankauf-dialog > div { max-height: calc(100dvh - 20px); } } @media (max-width: 850px) { .ankauf-finanz-regler { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 650px) { .ankauf-finanz-regler { grid-template-columns: minmax(0, 1fr); gap: 12px; } .ankauf-finanz-ergebnis dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Die vier Blöcke zum Geld (Kaufpreis, Miete, Rendite, Finanzierung) stehen waagerecht nebeneinander; die Mieterliste darunter bekommt dadurch die volle Breite und muss nicht seitwärts gescrollt werden. „auto-fit“ statt fester vier Spalten: Bei wenig Platz – Vorschau im Aufnahme-Dialog – rücken die Blöcke von selbst untereinander. Unterhalb von 700 px zusätzlich ein Haltepunkt, denn die Mindestbreite von 300 px liefe in einem 287 px schmalen Behälter seitlich heraus. `minmax(min(300px, 100%), 1fr)` scheidet als Abkürzung aus: Ein Prozentwert macht die Spaltenzahl unbestimmt, „auto-fit“ fällt dann überall auf eine Spalte zurück. */ .werte-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; } @media (max-width: 700px) { .werte-spalten { grid-template-columns: minmax(0, 1fr); } } /* Jeder Bereich in einem eigenen Rahmen: Nebeneinander verschwimmen vier Beschriftung/Wert-Listen sonst zu einem Feld aus Zahlen. Gleiche Höhe (kein `align-items: start`), damit die Rahmen eine Linie bilden. */ .werte-spalten > div { padding: 14px 16px 10px; border: 1px solid var(--rand); border-radius: var(--radius); background: var(--flaeche-leise); } .ankauf-rechnungs-popup-trigger { display: inline-flex; align-items: center; padding: 0; border: 0; background: transparent; color: var(--petrol); font: inherit; font-weight: 600; text-align: left; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } dialog.ankauf-rechnungs-popup { width: min(760px, calc(100vw - 32px)); max-height: min(760px, calc(100dvh - 32px)); overflow: hidden; border-radius: 8px; } dialog.ankauf-rechnungs-popup > div { display: flex; max-height: calc(100dvh - 32px); flex-direction: column; } dialog.ankauf-rechnungs-popup .dialog-inhalt { min-height: 0; overflow: auto; } /* Die Trennlinien der Werteliste sind auf --grund abgestimmt (weiße Karte); auf der getönten Fläche im Rahmen verschwinden sie fast. Innerhalb der Rahmen deshalb die kräftigere Randfarbe. */ .werte-spalten .werte dt, .werte-spalten .werte dd { border-bottom-color: var(--rand); } /* Fließtext im Dialog auf Lesebreite halten: Über die ganzen 1432 px wären es rund 200 Zeichen je Zeile. */ .ankauf-detail p { max-width: 100ch; } /* Die Beschriftungen tragen mehr Text als sonst ("Nettorendite (Reinertrag auf Gesamtinvestition)"). Mit dem normalen Anteil von 38 % brachen fünf von zwanzig Zeilen um, mit 50 % keine. */ .ankauf-detail .werte, .werte-spalten .werte { grid-template-columns: minmax(130px, 50%) 1fr; } /* Zwischenüberschrift einer Werte-Gruppe (Kaufpreis, Miete, Rendite, Finanzierung). Bewusst ruhiger als eine normale h3: Sie gliedert eine Liste, sie kündigt keinen neuen Abschnitt an. */ .werte-gruppe { margin: 22px 0 6px; font-size: 13px; font-weight: 600; color: var(--text-leise); } .werte-spalten > div > .werte-gruppe:first-child { margin-top: 0; } .dialog-kopf { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 18px 24px; background: var(--flaeche); border-bottom: 1px solid var(--rand); } .dialog-inhalt { padding: 20px 24px; } .dialog-fuss { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; padding: 14px 24px; background: var(--flaeche-leise); border-top: 1px solid var(--rand); } .schliessen { border: 0; background: none; font-size: 26px; line-height: 1; cursor: pointer; color: var(--text-leise); padding: 0 4px; } /* ---------- Meldungen ---------- */ #meldungen { position: fixed; right: 20px; bottom: 20px; z-index: 50; display: flex; flex-direction: column; gap: 8px; } .meldung { padding: 11px 16px; border-radius: 8px; background: var(--petrol-dunkel); color: var(--auf-petrol); box-shadow: var(--schatten); max-width: 420px; animation: ein .2s ease-out; } .meldung.fehler { background: var(--schlecht); } @keyframes ein { from { opacity: 0; transform: translateY(6px); } } /* ---------- Responsiv & Druck ---------- */ @media (max-width: 900px) { main { padding: 20px 16px 40px; } .vorschau { grid-template-columns: 1fr; } .seitenspalte { position: static; } .raster-2 { grid-template-columns: 1fr; } } /* ---------- Konto & Anmeldung ---------- */ input[type=password] { width: 100%; padding: 8px 10px; border: 1px solid var(--rand-stark); border-radius: 7px; font: inherit; color: var(--text); background: var(--feld); } /* Benutzername als Klappmenü (Darstellung, Demo-Modus, Passwort, Abmelden) */ .konto { position: relative; display: flex; align-items: center; padding: 0 2px; } .konto-knopf { display: flex; align-items: center; gap: 8px; max-width: 220px; padding: 6px 8px; border: 1px solid transparent; border-radius: 8px; background: none; font: inherit; font-weight: 600; color: var(--petrol); cursor: pointer; } .konto-knopf:hover { background: var(--petrol-hell); } .konto-knopf[aria-expanded="true"] { background: var(--petrol-hell); border-color: var(--rand-stark); } .konto-knopf > svg { width: 18px; height: 18px; flex: none; } .konto-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .konto-knopf .nav-pfeil { width: 16px; height: 16px; transition: transform .15s ease; } .konto-knopf[aria-expanded="true"] .nav-pfeil { transform: rotate(180deg); } .konto-menue { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; width: min(330px, calc(100vw - 24px)); padding: 6px; background: var(--flaeche); border: 1px solid var(--rand-stark); border-radius: var(--radius); box-shadow: var(--schatten); } .konto-kopf { margin: 4px 10px 8px; font-weight: 600; } .konto-kopf small { font-weight: 400; color: var(--text-leise); } .konto-gruppe { margin: 0; padding: 8px 10px; border: 0; border-top: 1px solid var(--rand); } .konto-gruppe:first-of-type { border-top: 0; } .konto-gruppe legend { padding: 0; font-size: 12.5px; font-weight: 600; color: var(--text-leise); } .konto-gruppe .option { display: flex; gap: 8px; align-items: flex-start; margin-top: 7px; font-weight: 400; } .konto-gruppe .option small { color: var(--text-leise); font-size: 12px; } .konto-aktionen { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 10px; border-top: 1px solid var(--rand); } /* Demo-Modus: Rahmen ums Fenster und Abzeichen neben dem Logo – im Vorbeigehen erkennbar */ .demo-abzeichen { align-self: center; padding: 3px 9px; border-radius: 999px; background: var(--kupfer-dunkel); color: var(--auf-kupfer); font-size: 12px; font-weight: 600; white-space: nowrap; } :root[data-demo] body::after { content: ""; position: fixed; inset: 0; border: 3px solid var(--kupfer-dunkel); pointer-events: none; z-index: 100; } @media (max-width: 560px) { .demo-abzeichen { font-size: 11px; padding: 2px 7px; } } body.anmeldung { display: grid; place-items: center; min-height: 100vh; padding: 24px; } .anmelde-karte { width: min(420px, 100%); padding: 28px 30px 22px; } .anmelde-logo { display: block; width: 190px; max-width: 70%; margin: 0 auto 22px; } .anmelde-form { display: flex; flex-direction: column; gap: 14px; } .anmelde-form h1 { font-size: 22px; } .anmelde-form > .leise { margin: -8px 0 2px; } /* Handy und Tablet: Menü hinter einem Knopf in einer festen Kopfleiste, damit der Inhalt sofort sichtbar ist */ .menue-knopf { display: none; } @media (max-width: 900px) { .kopfleiste { flex-wrap: wrap; gap: 6px; padding: 6px 8px; } .kopfleiste .logo { padding: 4px 8px; } .kopfleiste .logo img { max-width: 132px; } .menue-knopf { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--rand-stark); border-radius: 8px; background: var(--flaeche); font: inherit; font-weight: 600; color: var(--petrol); cursor: pointer; } .menue-knopf svg { width: 20px; height: 20px; } /* Formular beim Hineinscrollen nicht unter der festen Kopfleiste verstecken */ .mieten-formular, #mieten-import { scroll-margin-top: 76px; } .kopfleiste:not(.menue-offen) > #navigation, .kopfleiste:not(.menue-offen) #nav-postfach, .kopfleiste:not(.menue-offen) .leiste-wissen, .kopfleiste:not(.menue-offen) .konto { display: none !important; } .kopfleiste.menue-offen { max-height: 100vh; overflow-y: auto; } /* Offenes Klappmenü: Einträge untereinander, Ausklappmenüs wachsen an Ort und Stelle auf */ .kopfleiste.menue-offen > #navigation { flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; } .kopfleiste.menue-offen .nav-menue { width: 100%; } .kopfleiste.menue-offen .nav-menue-liste { position: static; width: auto; min-width: 0; max-width: none; max-height: none; padding: 0 0 4px 12px; border: 0; border-radius: 0; background: transparent; box-shadow: none; } .kopfleiste.menue-offen .leiste-rechts { flex-basis: 100%; flex-wrap: wrap; margin-left: 0; } /* Benutzermenü im aufgeklappten Handy-Menü: an Ort und Stelle aufwachsen statt schweben */ .kopfleiste.menue-offen .konto { flex-basis: 100%; } .kopfleiste.menue-offen .konto-knopf { width: 100%; } .kopfleiste.menue-offen .konto-menue { position: static; width: auto; padding: 0 0 4px 12px; border: 0; border-radius: 0; background: transparent; box-shadow: none; } .kopfleiste.menue-offen #navigation > .nav-eintrag.aktiv::before, .kopfleiste.menue-offen #navigation > .nav-menue > .nav-menue-knopf.enthaelt-aktiv::before { left: 0; right: auto; top: 50%; bottom: auto; width: 3px; height: 20px; margin-top: -10px; } } .anmelde-form .knopf { width: 100%; padding: 10px 16px; } .anmelde-fehler { margin: 0; padding: 8px 12px; border-radius: 7px; background: var(--schlecht-hell); color: var(--schlecht); } .anmelde-hinweis { margin: 0; font-size: 12.5px; color: var(--text-leise); } .anmelde-fuss { margin: 18px 0 0; font-size: 12.5px; text-align: center; } /* Wissensdatenbank rechts in der Kopfleiste als Fluent-Eintrag */ .leiste-wissen { width: auto; margin: 0; white-space: nowrap; } #nav-postfach { display: contents; } /* Ab hier wird die Zeile eng: Wissensdatenbank nur noch als Symbol, Bedeutung steht im Tooltip */ @media (max-width: 1250px) { .leiste-wissen .nav-text { display: none; } } @media (max-width: 900px) { .leiste-kopf { flex: 1; padding: 0; border-bottom: 0; } .kopfleiste.menue-offen .leiste-wissen .nav-text { display: block; } } /* Mahnungen: Vorgang je Wohnung mit offenen Mieten, Aktionen und Verlauf der Schreiben */ .mahn-karte { margin-bottom: 16px; } .mahn-karte .karte-kopf { flex-wrap: wrap; align-items: flex-start; gap: 10px; } .mahn-karte .etiketten { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; } .mahn-raster { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; } .mahn-schwelle { margin: 8px 0 0; font-size: 12.5px; } .mahn-aktionen { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .mahn-erstellen { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; padding: 12px; border: 1px solid var(--rand); border-radius: 8px; background: var(--flaeche-leise); } .mahn-zwischentitel { margin: 4px 0 0; font-size: 12.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-leise); } .mahn-verlauf { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 13px; } .mahn-verlauf li { padding: 8px 10px; border: 1px solid var(--rand); border-radius: 8px; } .mahn-versand { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; } .mahn-versand input, .mahn-versand select { width: auto; } @media (max-width: 1268px) { .mahn-raster { grid-template-columns: minmax(0, 1fr); } } /* Kontakte: Filterleiste, Liste, Bearbeitungsdialog mit Prüfungen */ .kontakte-filter .karte-inhalt { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; } .kontakte-filter .feld { flex: 1 1 260px; } .kontakte-rollen { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 100%; order: 3; } .kontakte-rollen .knopf.aktiv { background: var(--petrol); border-color: var(--petrol); color: var(--auf-petrol); } .kontakte-rollen .knopf.aktiv .leise { color: color-mix(in srgb, var(--auf-petrol) 80%, transparent); } .kontakte-fehlend { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; } .kontakte-seite > .karte { margin-bottom: 16px; } .kontakte-tabelle td { vertical-align: top; } .kontakte-tabelle .etiketten { display: flex; flex-wrap: wrap; gap: 4px; } .kontakt-name { display: flex; align-items: flex-start; gap: 8px; } .kontakt-name svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--text-leise); } .kontakt-form fieldset { margin-bottom: 14px; } .kontakt-rollen { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 13.5px; } .kontakt-rollen label { display: inline-flex; align-items: center; gap: 5px; } .kontakt-pruefungen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; } .kontakt-ergebnis { font-size: 13px; } .kontakt-verweise { margin: 0; padding-left: 18px; } .kontakte-blz summary { cursor: pointer; } /* Suche: Eintrag in der Kopfleiste (Strg+K) und Dialog mit gruppierten Treffern */ .leiste-suche { width: auto; min-width: 190px; margin: 0; border: 1px solid var(--rand); background: var(--feld); color: var(--text-leise); } .leiste-suche:hover { border-color: var(--rand-stark); background: var(--feld); } .leiste-suche kbd, .suche-kopf kbd { font: inherit; font-size: 12px; padding: 1px 5px; border: 1px solid var(--rand); border-radius: 4px; background: var(--flaeche); color: var(--text-leise); } @media (max-width: 1250px) { .leiste-suche { min-width: 0; } .leiste-suche kbd { display: none; } } @media (max-width: 900px) { .leiste-suche { flex: none; justify-content: center; width: 40px; padding: 0; } .leiste-suche .nav-text, .leiste-suche kbd { display: none; } } dialog.suche-dialog { width: min(640px, calc(100vw - 32px)); max-height: 75vh; margin: 10vh auto auto; } dialog.suche-dialog[open] { display: flex; flex-direction: column; } .suche-kopf { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--rand); } .suche-kopf svg { flex: none; width: 20px; height: 20px; color: var(--text-leise); } .suche-feld { flex: 1; min-width: 0; padding: 6px 0; border: 0; background: transparent; font: inherit; font-size: 16px; color: var(--text); } .suche-feld:focus { outline: none; } .suche-treffer { flex: 1; margin: 0; padding: 6px; overflow-y: auto; list-style: none; } .suche-gruppe { padding: 10px 10px 4px; font-size: 12.5px; font-weight: 600; color: var(--text-leise); } .suche-eintrag { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: 6px; cursor: pointer; } .suche-eintrag.aktiv, .suche-eintrag:hover { background: rgba(31, 78, 90, .09); } .suche-titel { font-weight: 600; } .suche-unter { font-size: 12.5px; color: var(--text-leise); } .suche-leer { padding: 16px 10px; color: var(--text-leise); } .suche-fuss { margin: 0; padding: 8px 16px; border-top: 1px solid var(--rand); font-size: 12.5px; } /* Wartung & Prüfungen (Objektseite) */ .wartung-tabelle td { vertical-align: top; } .wartung-knoepfe { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; } .wartung-form h4 { margin: 0 0 12px; } .wartung-form .wartung-knoepfe { justify-content: flex-start; margin-top: 12px; } [data-wartung-bereich] { border-top: 1px solid var(--rand); } .wartung-fuss { padding-top: 10px; } .wartung-fuss p { margin: 0; font-size: 12.5px; } /* Schreiben an Mieter: Liste mit Versand und Zustimmung, Mieterhöhungsdialog, Abrechnungsteil der Einzelabrechnung */ .mieterhoehungen { margin-top: 20px; } .schreiben-zelle { min-width: 260px; } .schreiben-liste { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; } .schreiben-liste li { padding: 8px 10px; border: 1px solid var(--rand); border-radius: 8px; font-size: 13px; } .schreiben-leer { margin: 8px 0 0; } .schreiben-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; } .schreiben-form input[type=date], .schreiben-form select { width: auto; } .mieterhoehung-form fieldset { margin-bottom: 14px; } .mh-wahl { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 12px; } .mh-wahl label, .mh-check { display: inline-flex; align-items: center; gap: 6px; } .mh-check { align-self: end; padding-bottom: 8px; } .mh-vergleich td { padding: 4px; } .mh-vergleich input { min-width: 90px; } .mieterhoehung-form [data-hoechstbetrag] { margin-top: 10px; } .mh-ergebnis .werte { margin-bottom: 12px; } .bk-schreiben { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--rand); } .bk-schreiben h3 { margin: 0 0 12px; } .bk-messdienst, .bk-erstellen { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-bottom: 12px; } .bk-messdienst .feld, .bk-erstellen .feld { flex: 0 1 320px; } /* Über die ganze Fensterbreite statt der sonst üblichen Lesebreite, wie schon bei der Mietenübersicht (`.mieten-abschnitt`, Sebastian 23.09.2026) – hier nur für die Karten mit vielen Spalten (Umlagefähige Kosten, Live-Abrechnung, Rechnungen), die davon wirklich profitieren. Nicht umlagefähige Kosten, Investitionen und der Steuerberater-Bereich bleiben bewusst bei drei schmalen Spalten bzw. einem Formular auf Lesebreite – genau die Fälle, vor denen der Kommentar bei der allgemeinen `table`-Regel warnt. */ .bk-abschnitt { width: 100%; min-width: 0; } .bk-abschnitt table { width: 100%; } /* Kalender: Wartungen, Prüfungen und Abrechnungsfrist (türkis) · Kontoauszug-Import: Abbuchungen für offene Rechnungen */ /* Türkis liegt in der Farbtafel oben, damit es messbar und an einer Stelle änderbar ist */ .kal-eintrag.tuerkis { background: var(--tuerkis-hell); color: var(--tuerkis); border-left-color: var(--tuerkis); } .kal-eintrag.tuerkis.ueberfaellig { font-weight: 600; } .kal-punkt.tuerkis { background: var(--tuerkis); } .kalender .etikett.tuerkis { background: var(--tuerkis-hell); border-color: transparent; color: var(--tuerkis); } .import-zwischentitel { margin: 22px 0 6px; font-size: 16px; } /* Handy und Tablet: Tabellen ohne eigenen Scrollrahmen (z. B. Dokumentlisten) waagerecht scrollen, Knopfleisten umbrechen – die Seite selbst läuft nicht über */ .knopfleiste { flex-wrap: wrap; } /* Betriebskosten › Übergabe an den Steuerberater: Zeitraum und Knöpfe in einer Zeile, auf schmalen Bildschirmen untereinander */ .steuerberater-zeitraum { grid-template-columns: 160px 160px auto; align-items: end; } @media (max-width: 600px) { .steuerberater-zeitraum { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .steuerberater-zeitraum .knopfleiste { grid-column: 1 / -1; } } /* Scrollrahmen als Bezug für absolut positionierte Inhalte (z. B. unsichtbare Spaltentitel), damit sie mit der Tabelle abgeschnitten werden */ .tabelle-rahmen { position: relative; } @media (max-width: 900px) { main table { position: relative; display: block; max-width: 100%; overflow-x: auto; } main .tabelle-rahmen > table { display: table; max-width: none; overflow: visible; } } /* Aufgaben: je Dringlichkeit eine Liste mit Bereich, Titel, Termin und Kurztext; Filter nach Bereich */ .aufgaben-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; } .aufgaben-gruppe { margin-bottom: 16px; } .aufgaben-liste { list-style: none; margin: 0; padding: 0; } .aufgaben-liste li + li { border-top: 1px solid var(--rand); } .aufgabe { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 12px; align-items: baseline; padding: 10px 18px; color: inherit; text-decoration: none; } .aufgabe:hover, .aufgabe:focus-visible { background: var(--petrol-hell); } .aufgabe .etikett { justify-self: start; } .aufgabe-titel { font-weight: 600; } .aufgabe-termin { color: var(--text-leise); font-size: 13px; white-space: nowrap; } .aufgabe-text { grid-column: 2 / -1; color: var(--text-leise); font-size: 13px; } @media (max-width: 600px) { .aufgabe { grid-template-columns: minmax(0, 1fr) auto; } .aufgabe .etikett, .aufgabe-text { grid-column: 1 / -1; } } /* Datenpflege: Eingaben in der Tabelle, fehlende Angaben hervorgehoben */ .datenpflege-filter { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; } .datenpflege-tabelle td { vertical-align: middle; } .datenpflege-tabelle input:not([type=file]), .datenpflege-tabelle select { width: 100%; min-width: 88px; } .datenpflege-tabelle input[type=date] { min-width: 130px; } .datenpflege-tabelle input[type=file] { max-width: 190px; font-size: 12.5px; } .datenpflege-tabelle td.fehlt input, .datenpflege-tabelle td.fehlt select { border-color: var(--warn); background: var(--warn-hell); } .datenpflege-fehlt { min-width: 140px; color: var(--warn); font-size: 12.5px; } /* Übergaben & Kaution, Anpassung der Vorauszahlungen, Fristen der Finanzierung, Fehlerberichte */ .uebergaben { margin-top: 20px; } .uebergabe-knoepfe { justify-content: flex-end; gap: 6px; } .bk-vorauszahlung { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--rand); } .bk-vorauszahlung h3 { margin: 0 0 8px; } .fin-fristen { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--rand); } .fin-fristen .knopf { margin-top: 8px; } .fehlerbericht-stapel { margin: 6px 0 0; max-height: 220px; overflow: auto; white-space: pre-wrap; word-break: break-word; font-size: 12.5px; } /* Mieterwechsel: Checkliste je Wohnung mit Fortschritt */ .mieterwechsel, .modernisierung { margin-top: 20px; } .mw-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 16px; } .mw-wohnung { border: 1px solid var(--rand); border-radius: var(--radius); padding: 12px 14px; } .mw-kopf { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; margin-bottom: 6px; } .mw-wohnung progress { width: 100%; height: 6px; accent-color: var(--gut); } .mw-schritte { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .mw-schritt { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: start; font-size: 13.5px; } .mw-zeichen { width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 12.5px; border: 1px solid var(--rand-stark); color: var(--text-leise); } .mw-schritt.erledigt .mw-zeichen { background: var(--gut); border-color: var(--gut); color: var(--auf-status); } .mw-schritt.begonnen .mw-zeichen { background: var(--warn-hell); border-color: var(--warn); color: var(--warn); } .mw-schritt.spaeter { opacity: .6; } .mw-auswahl { display: flex; flex-wrap: wrap; gap: 6px 18px; } @media (max-width: 600px) { .mw-schritt { grid-template-columns: 22px minmax(0, 1fr); } .mw-schritt .knopf { grid-column: 2; justify-self: start; } } /* Übergabeprotokoll: Fotos mit Raum und Beschreibung */ .uebergabe-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 10px; margin-top: 10px; } .uebergabe-foto { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--rand); border-radius: 8px; } .uebergabe-foto canvas { max-width: 100%; height: auto; border-radius: 4px; background: var(--grund); } .uebergabe-foto .knopf { align-self: flex-end; } /* Aufgaben: Kalender-Abo und tägliche E-Mail · Betriebskosten: CO₂ und Serien · Staffeln · Hausgeld */ .aufgaben-dienste { margin-top: 20px; } .aufgaben-dienste input[readonly] { font-size: 12.5px; } .bk-zusatz .karte { margin: 0; } .staffeln-editor input { min-width: 120px; } .hausgeld-tabelle input[type=text], .hausgeld-tabelle select { width: 100%; min-width: 90px; } .hausgeld-tabelle td:nth-child(2) input { min-width: 220px; } @media print { .kopfleiste, .unternav, .knopf, #meldungen { display: none !important; } .layout { display: block; } main { padding: 0; } .karte, .kennzahl { box-shadow: none; } /* Objektseite: nur der gewählte Reiter ist sichtbar – „Drucken“ gibt trotzdem die ganze Seite aus, ohne Reiterleiste, rechte Spalte und „⋯“ (Sebastian, 23.09.2026 für die Seitennavigation, seit 02.11.2026 für die Reiter). */ .objekt-reiter, .objekt-seite, .mehr-menue { display: none !important; } .objekt-raster { display: block !important; } .objekt-inhalt section.abschnitt[hidden] { display: block !important; } } /* ---------- Einstellungen des Benutzers respektieren ---------- */ /* Wer im Betriebssystem weniger Bewegung eingestellt hat (Migräne, Schwindel, Aufmerksamkeitsstörungen), bekommt keine Übergänge und keine Einblendung. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* Wer mehr Kontrast eingestellt hat, bekommt kräftigere Ränder und Nebentext auf Haupttextstärke. */ @media (prefers-contrast: more) { :root { --rand: #b9b2a6; --rand-stark: #8d8578; --text-leise: #3a4147; } .nav-eintrag.aktiv, .nav-menue-knopf[aria-expanded="true"] { outline: 1px solid var(--petrol); } } /* Markierwerkzeug fuer Formularvorlagen */ .fv-kopfzeile { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 16px; } .fv-kopfzeile p { grid-column: 1 / -1; margin: 0; } .fv-arbeit { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 0 20px 18px; } .fv-arbeit > .fv-rechts { display: contents; } .fv-zuordnung { order: -1; } .fv-seite { min-width: 0; } .fv-leiste { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0; } .fv-pfeil { min-width: 40px; padding: 6px 10px; font-size: 18px; line-height: 1; } .fv-zoom { margin-left: auto; min-width: 120px; } .fv-buehne-rahmen { overflow: auto; max-height: 78vh; border: 1px solid var(--rand-stark); border-radius: var(--radius); background: var(--grund); } .fv-buehne { position: relative; margin: 0 auto; background: #fff; min-height: 120px; } .fv-buehne canvas { display: block; width: 100%; height: auto; touch-action: none; cursor: crosshair; } .fv-leer { padding: 40px 16px; text-align: center; margin: 0; } .fv-marken { position: absolute; inset: 0; pointer-events: none; } .fv-marke { position: absolute; box-sizing: border-box; border: 2px solid var(--kupfer-dunkel); background: rgba(192, 122, 69, .14); } .fv-marke-aktiv { border-color: var(--petrol); background: rgba(31, 78, 90, .16); box-shadow: 0 0 0 2px rgba(31, 78, 90, .25); } .fv-marke-neu { border-style: dashed; border-color: var(--petrol); background: rgba(31, 78, 90, .14); } .fv-marke-text { position: absolute; left: -2px; bottom: 100%; font-size: 10px; line-height: 1.3; background: var(--petrol); color: var(--auf-petrol); padding: 0 4px; border-radius: 3px 3px 0 0; white-space: nowrap; opacity: .9; } .fv-marke-text-innen { bottom: auto; top: -2px; border-radius: 0 0 3px 0; } .fv-zuordnung { border: 1px solid var(--rand); border-radius: var(--radius); padding: 12px 14px; margin: 0; min-width: 0; } .fv-zuordnung legend { padding: 0 6px; font-weight: 600; } .fv-masse { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .fv-listentitel { margin: 4px 0 6px; } .fv-checkliste { list-style: none; margin: 0; padding: 0; border: 1px solid var(--rand); border-radius: var(--radius); background: var(--flaeche); } .fv-eintrag { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-top: 1px solid var(--rand); } .fv-eintrag:first-child { border-top: 0; } .fv-eintrag-text { display: flex; flex-direction: column; min-width: 0; flex: 1; font-size: 13px; } .fv-eintrag-text .leise { font-size: 12px; } .fv-eintrag-aktion { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; } .fv-zeichen { width: 18px; text-align: center; color: var(--text-leise); } .fv-markiert .fv-zeichen { color: var(--gut); } .fv-fehlend { opacity: .7; } .fv-diese-seite { background: var(--petrol-hell); } /* Persönlicher Posteingang: kompakte Nachrichtenliste links, lesbare Nachricht rechts. */ .postfach-layout { display: grid; grid-template-columns: 190px minmax(250px, 340px) minmax(0, 1fr); gap: 0 18px; align-items: start; border-top: 1px solid var(--rand); } .postfach-explorer, .postfach-liste, .postfach-leser { min-width: 0; } .postfach-explorer { position: sticky; top: 72px; max-height: calc(100vh - 100px); overflow-y: auto; padding: 10px 8px 12px 0; } .postfach-explorer-kopf { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 0 4px 8px; } .postfach-explorer-kopf h2 { margin: 0; font-size: 14px; } .postfach-ordner { display: flex; width: 100%; align-items: center; gap: 8px; padding: 8px 7px; border: 0; border-radius: 5px; background: transparent; color: var(--text); text-align: left; cursor: pointer; } .postfach-ordner > svg { width: 17px; height: 17px; flex: none; color: var(--text-leise); } .postfach-ordner > span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .postfach-ordner:hover, .postfach-ordner.aktiv { background: var(--flaeche-leise); } .postfach-ordner.aktiv { color: var(--petrol); font-weight: 600; } .postfach-ordner-drop { display: none; color: var(--text-leise); font-size: 11px; } .postfach-ordner.drop-aktiv { outline: 2px solid var(--petrol); background: var(--petrol-hell); } .postfach-ordner.drop-aktiv .postfach-ordner-drop { display: inline; } .postfach-liste-kopf { padding: 12px 0 8px; border-bottom: 1px solid var(--rand); } .postfach-liste-kopf h2 { margin: 0; font-size: 16px; } .postfach-eintrag { display: block; width: 100%; padding: 12px 10px; border: 0; border-bottom: 1px solid var(--rand); background: transparent; color: var(--text); text-align: left; cursor: pointer; } .postfach-eintrag:hover, .postfach-eintrag.ausgewaehlt { background: var(--flaeche-leise); } .postfach-eintrag.ungelesen { box-shadow: inset 3px 0 var(--petrol); } .postfach-eintrag-kopf { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; } .postfach-eintrag-kopf b, .postfach-betreff { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .postfach-eintrag-kopf time, .postfach-metadaten { flex: 0 0 auto; color: var(--text-leise); font-size: 12px; } .postfach-ordnerwahl { min-width: 160px; } .postfach-ordnerwahl select { min-width: 160px; } .postfach-betreff { display: block; margin-top: 4px; } .postfach-metadaten { display: block; min-height: 14px; margin-top: 3px; } .postfach-leser { min-height: 320px; padding: 16px 0 28px 22px; border-left: 1px solid var(--rand); } .postfach-nachricht-kopf { padding-bottom: 12px; border-bottom: 1px solid var(--rand); } .postfach-menüband { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 4px; margin: -16px 0 12px; padding: 8px 0; border-bottom: 1px solid var(--rand); background: var(--grund); } .postfach-iconaktion { display: inline-flex; width: 38px; height: 36px; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--text); cursor: pointer; } .postfach-iconaktion:hover { border-color: var(--rand); background: var(--flaeche); } .postfach-iconaktion svg { width: 19px; height: 19px; } .postfach-iconaktion.gefahr { color: var(--schlecht); } .postfach-nachricht-kopf h2 { margin: 0 0 14px; font-size: 20px; overflow-wrap: anywhere; } .postfach-kopfwerte { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 5px 10px; margin: 0; font-size: 13px; } .postfach-kopfwerte dt { color: var(--text-leise); } .postfach-kopfwerte dd { min-width: 0; margin: 0; overflow-wrap: anywhere; } .postfach-anlagen { padding: 10px 0; border-bottom: 1px solid var(--rand); } .postfach-anlagen h3 { margin: 0 0 6px; font-size: 13px; } .postfach-anlagen ul { margin: 0; padding-left: 18px; } .postfach-anlagen li { margin: 3px 0; } .postfach-bildvorschau { display: block; width: fit-content; max-width: 100%; margin: 6px 0; } .postfach-bildvorschau img { display: block; max-width: min(100%, 420px); max-height: 300px; object-fit: contain; border: 1px solid var(--rand); background: var(--flaeche); } .postfach-aktionen { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--rand); } .postfach-aktionen .feld { min-width: min(220px, 100%); flex: 0 1 260px; } .postfach-aktionen .leise { flex-basis: 100%; } .postfach-text { overflow: auto; max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; line-height: 1.55; } .postfach-antwort { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rand); } .postfach-leer { padding: 14px 0; } .objekt-mailverlauf { display: grid; gap: 10px; } .objekt-mailthread { padding: 10px 0; border-bottom: 1px solid var(--rand); } .objekt-mailthread h3, .objekt-mailthread b { display: block; margin: 0 0 5px; font-size: 14px; } .objekt-mailthread ol { margin: 0; padding-left: 20px; } .objekt-mailthread li { margin: 7px 0; } .objekt-mailthread li > div { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; } .objekt-mailthread li time { color: var(--text-leise); font-size: 12px; } .objekt-mailthread > .leise { display: block; margin: 4px 0; } .postfach-zuordnung-anlagen { display: grid; gap: 7px; margin: 16px 0; padding: 10px 12px; border: 1px solid var(--rand); border-radius: var(--radius); } .postfach-zuordnung-anlagen legend { padding: 0 5px; font-weight: 600; } .postfach-zuordnung-anlagen label { display: grid; grid-template-columns: 18px minmax(120px, 1fr) minmax(120px, 1.2fr); align-items: center; gap: 8px; overflow-wrap: anywhere; } .postfach-zuordnung-anlagen .leise { font-size: 12px; } .postfach-weiterleiten-form .dialog-inhalt { display: grid; gap: 12px; } @media (max-width: 850px) { .postfach-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 0 12px; } .postfach-explorer { grid-column: 1 / -1; position: static; max-height: none; display: flex; align-items: center; gap: 4px; overflow-x: auto; padding: 7px 0; border-bottom: 1px solid var(--rand); } .postfach-explorer-kopf { flex: none; padding: 0 4px; } .postfach-explorer-kopf h2 { display: none; } .postfach-ordner { width: auto; flex: none; } .postfach-leser { padding: 12px 0 24px 12px; } } @media (max-width: 600px) { .postfach-layout { grid-template-columns: minmax(0, 1fr); } .postfach-leser { padding: 14px 0 24px; border-left: 0; border-top: 1px solid var(--rand); } .postfach-ordner > span:nth-child(2) { max-width: 110px; } .postfach-zuordnung-anlagen label { grid-template-columns: 18px minmax(0, 1fr); } .postfach-zuordnung-anlagen label .leise { grid-column: 2; } } .fv-klein { padding: 3px 8px; font-size: 12px; } @media (min-width: 1228px) { .fv-arbeit { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; } .fv-arbeit > .fv-rechts { display: block; position: sticky; top: 80px; max-height: calc(100vh - 96px); overflow: auto; padding-right: 2px; } .fv-zuordnung { order: 0; } } /* --------------------------------------------------------------------------- Dunkle Darstellung. Zwei Wege, gleiche Werte: die Systemeinstellung greift von selbst (ohne JavaScript, deshalb ohne Aufblitzen), die ausdrueckliche Wahl ueber data-thema. Die Inhaltsstoffe bleiben: Petrol und Kupfer, nur aufgehellt, damit sie auf dunklem Grund tragen. Papierflaechen (Seitenbilder, Formularvorlagen) bleiben bewusst weiss. --------------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-thema="hell"]) { color-scheme: dark; --petrol: #74bed1; --petrol-dunkel: #9bd8e7; --petrol-hell: #15323b; --kupfer: #d89a62; --kupfer-dunkel: #ecbb8c; --kupfer-hell: #33241a; --grund: #1b2328; --flaeche: #242e34; --flaeche-leise: #202a2f; --zeile-wechsel: #29353c; --feld: #0f1519; --rand: #34424a; --rand-stark: #4d5d66; --text: #e9eef0; --text-leise: #adb9be; --auf-petrol: #08171c; --auf-kupfer: #1d1109; --auf-text: #11171a; --auf-status: #1b1210; --auf-warn-hell: #f0cd94; --auf-gut-hell: #a9e6c1; --auf-warn-hell: #f0cd94; --auf-gut-hell: #a9e6c1; --gut: #78d19a; --gut-hell: #14301f; --warn: #e2b468; --warn-hell: #33270f; --schlecht: #f2938d; --schlecht-hell: #3b1e1c; --zaehler: #cf4258; --tuerkis: #66ccc4; --tuerkis-hell: #103230; --schatten: 0 1px 2px rgba(0, 0, 0, .5), 0 4px 14px rgba(0, 0, 0, .4); } } :root[data-thema="dunkel"] { color-scheme: dark; --petrol: #74bed1; --petrol-dunkel: #9bd8e7; --petrol-hell: #15323b; --kupfer: #d89a62; --kupfer-dunkel: #ecbb8c; --kupfer-hell: #33241a; --grund: #1b2328; --flaeche: #242e34; --flaeche-leise: #202a2f; --zeile-wechsel: #29353c; --feld: #0f1519; --rand: #34424a; --rand-stark: #4d5d66; --text: #e9eef0; --text-leise: #adb9be; --auf-petrol: #08171c; --auf-kupfer: #1d1109; --auf-text: #11171a; --auf-status: #1b1210; --auf-warn-hell: #f0cd94; --auf-gut-hell: #a9e6c1; --gut: #78d19a; --gut-hell: #14301f; --warn: #e2b468; --warn-hell: #33270f; --schlecht: #f2938d; --schlecht-hell: #3b1e1c; --zaehler: #cf4258; --tuerkis: #66ccc4; --tuerkis-hell: #103230; --schatten: 0 1px 2px rgba(0, 0, 0, .5), 0 4px 14px rgba(0, 0, 0, .4); } /* Bilder und Dokumentseiten sind Papier und bleiben hell; im Dunkeln nur etwas gedaempft */ @media (prefers-color-scheme: dark) { :root:not([data-thema="hell"]) .seitenbild img, :root:not([data-thema="hell"]) .fv-buehne canvas, :root:not([data-thema="hell"]) .vorlage-seite img { filter: brightness(.92); } } :root[data-thema="dunkel"] .seitenbild img, :root[data-thema="dunkel"] .fv-buehne canvas, :root[data-thema="dunkel"] .vorlage-seite img { filter: brightness(.92); } /* ---------- Grundriss & 3D-Modell (Sebastian, 25.09.2026) ---------- */ dialog.grundriss-dialog { width: min(1560px, calc(100vw - 32px)); } .gr-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--rand); margin-bottom: 14px; } .gr-tabs [role=tab] { padding: 9px 16px; border: 1px solid transparent; border-bottom: 0; border-radius: 8px 8px 0 0; background: none; font: inherit; font-weight: 600; color: var(--text-leise); cursor: pointer; } .gr-tabs [aria-selected=true] { background: var(--flaeche); border-color: var(--rand); color: var(--petrol); margin-bottom: -1px; } .gr-quelle-zeile { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 10px; } .gr-werkzeuge { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; } .gr-werkzeuge .mh-check { margin-right: 6px; } .gr-werkzeuge select, .gr-quelle-zeile select { width: auto; min-width: 120px; padding: 5px 8px; } .gr-abstand { flex: 1; } .gr-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; } @media (max-width: 1268px) { .gr-layout { grid-template-columns: minmax(0, 1fr); } .gr-seite { max-height: none; } } .gr-rahmen, .gr-3d { position: relative; height: min(58vh, 640px); min-height: 320px; border: 1px solid var(--rand); border-radius: 10px; overflow: hidden; background: var(--flaeche-leise); } .gr-rahmen { --gr-grund: #eef2f3; } .gr-rahmen canvas { display: block; touch-action: none; cursor: crosshair; } .gr-hinweis { position: absolute; left: 8px; right: 8px; bottom: 8px; padding: 6px 10px; font-size: 12.5px; background: rgba(255, 255, 255, .92); color: #1c3a44; border-radius: 6px; pointer-events: none; } .gr-hinweis:empty { display: none; } .gr-seite { display: flex; flex-direction: column; gap: 12px; max-height: min(58vh, 640px); overflow-y: auto; } .gr-block { border: 1px solid var(--rand); border-radius: 10px; padding: 12px 14px; background: var(--flaeche); } .gr-block h3 { margin: 0 0 6px; font-size: 14px; } .gr-werte { font-size: 13px; margin-bottom: 8px; } .gr-eichung { border-color: var(--kupfer); } .gr-oeffnung { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; padding: 8px 0; border-top: 1px solid var(--grund); align-items: end; } .gr-oeffnung > b { grid-column: 1 / -1; } .gr-oeffnung label { display: flex; flex-direction: column; gap: 2px; font-size: 11.5px; color: var(--text-leise); } .gr-oeffnung input { width: 100%; padding: 4px 6px; } .gr-oeffnung > button { grid-column: 1 / -1; justify-self: end; } .gr-raum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 4px 0; } .gr-raum input { flex: 1 1 130px; min-width: 0; padding: 4px 6px; } .gr-summen { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; } .gr-summen > div { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; border-bottom: 1px solid var(--grund); font-size: 13px; } .gr-summen span { color: var(--text-leise); } .gr-tabelle { min-width: 0; width: 100%; font-size: 12.5px; } .gr-tabelle th, .gr-tabelle td { padding: 4px 6px; } .gr-tabelle tr.aktiv { background: var(--kupfer-hell); } .gr-wandknopf { padding: 0; border: 0; background: none; font: inherit; color: var(--petrol); text-decoration: underline; cursor: pointer; } .gr-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; margin-bottom: 8px; } .gr-foto { padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; background: none; cursor: pointer; aspect-ratio: 4 / 3; } .gr-foto img { display: block; width: 100%; height: 100%; object-fit: cover; } .gr-foto.aktiv { border-color: var(--petrol); } .gr-leer { display: grid; place-items: center; height: 100%; padding: 20px; text-align: center; color: var(--text-leise); } .g3-buehne { position: relative; } .g3-buehne:focus-visible { outline: 2px solid var(--petrol); outline-offset: -2px; } .g3-canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; } .g3-etiketten { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .g3-etikett { position: absolute; left: 0; top: 0; padding: 2px 7px; border: 1px solid rgba(0, 0, 0, .18); border-radius: 6px; background: rgba(255, 255, 255, .93); color: #14303a; font-size: 12px; font-weight: 600; white-space: nowrap; } .g3-etikett.raum { background: rgba(255, 241, 222, .94); color: #5a2a06; } .g3-etikett.aktiv { outline: 2px solid #1f7a8c; } .g3-etikett.mass { padding: 0 3px; border: 0; border-radius: 0; background: none; color: #12252c; font-size: 12px; font-weight: 600; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 2px #fff; } .g3-etikett[data-wand], .g3-etikett[data-raum] { pointer-events: auto; cursor: pointer; } .g3-etikett[data-raum]:hover, .g3-etikett[data-raum]:focus-visible { outline: 2px solid #1f7a8c; } .g3-etikett[data-wand]:hover { border-color: #1f7a8c; } .g3-etikett.kante { background: rgba(255, 244, 228, .96); color: #5a2a06; border-color: rgba(224, 138, 30, .7); } .gr-schnitt { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; } .gr-schnitt input[type=range] { width: 140px; padding: 0; } .gr-schnitt output { min-width: 4.2em; font-variant-numeric: tabular-nums; } .gr-tabelle .unter { display: block; font-size: 11px; color: var(--text-leise); } /* Sanierungsplaner (/objekt/:id/sanierung): Raum- und Leistungstabellen mit Eingabefeldern, Ergebnis mit Spanne */ .sp-rahmen { border: 0; margin: 0; padding: 0; min-width: 0; } .sp-seite .karte + .karte, .sp-seite .sp-rahmen + .karte { margin-top: 18px; } .sp-tabelle td { vertical-align: middle; } .sp-tabelle input.sp-zahl { width: 84px; text-align: right; padding: 6px 8px; } .sp-tabelle input.sp-zahl.kurz { width: 56px; } .sp-tabelle input.sp-name { min-width: 140px; padding: 6px 8px; } .sp-tabelle input.sp-name[name=bezeichnung] { min-width: 240px; } .sp-tabelle select { min-width: 150px; padding: 6px 8px; } .sp-tabelle .sp-gewerk th { background: var(--flaeche-leise); color: var(--petrol); text-align: left; font-weight: 600; } .sp-tabelle tr[data-leistung]:not(.sp-aus) td:first-child { box-shadow: inset 4px 0 0 var(--petrol); } .sp-wahl { display: flex; gap: 8px; align-items: flex-start; min-width: 240px; cursor: pointer; } .sp-wahl input { margin-top: 3px; } .sp-einheit { display: inline-block; min-width: 34px; text-align: left; } .sp-gesamt { display: grid; grid-template-columns: minmax(0, 360px); margin-bottom: 14px; } .sp-speichern { margin-top: 18px; } .sp-einheit-wahl select { padding: 4px 10px; font-size: 12.5px; } .sp-grundriss-zeile { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin: 0 0 12px; } .sp-grundriss-vorschau { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--rand); border-radius: var(--radius); background: var(--flaeche-leise); } .sp-grundriss-vorschau h4 { margin: 0 0 8px; } .sp-filter { display: flex; gap: 6px; align-items: center; font-size: 13px; cursor: pointer; } .sp-massnahme { border: 1px solid var(--rand); border-radius: var(--radius); padding: 12px 14px; } .sp-massnahme + .sp-massnahme { margin-top: 14px; } .sp-massnahme-kopf { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; } .sp-massnahme-kopf h4 { margin: 0; } .sp-massnahme-kopf [data-sp-massnahme-weg] { margin-left: auto; } .sp-alternative { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; min-width: 0; } .sp-alternative legend { font-weight: 600; color: var(--petrol); padding: 0; margin-bottom: 4px; } .sp-alternative label { display: flex; gap: 6px; align-items: center; cursor: pointer; } .sp-alternative-zeile td { background: var(--flaeche-leise); } .sp-massnahme-auswahl { width: auto; max-width: 100%; padding: 4px 10px; font-size: 12.5px; } /* Sanierungsplaner mit Grundriss: oben ein Block über die volle Breite – Auswahl links, Grundriss rechts; darunter die Räume mit Maßnahmen nebeneinander (waagerecht verschiebbar). Schmaler als 800 px untereinander, Grundriss zuerst. */ .sp-links { min-width: 0; } .sp-plan[hidden] { display: none; } .karte.sp-plan { width: 100%; min-width: 0; margin-bottom: 18px; } .sp-plan-oben { display: grid; grid-template-columns: minmax(260px, 2fr) minmax(0, 3fr); gap: 20px; align-items: start; } .sp-plan-auswahl { min-width: 0; } @media (max-width: 800px) { .sp-plan-oben { grid-template-columns: minmax(0, 1fr); } .sp-plan-bild { order: -1; } } .sp-plan-zusammenfassung { border-top: 1px solid var(--rand); } .sp-raumkarten { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; } .sp-raumkarten:focus-visible { outline: 2px solid var(--kupfer-dunkel); outline-offset: 2px; } .sp-raumkarte { flex: 0 0 300px; display: flex; flex-direction: column; gap: 6px; text-align: left; font: inherit; color: var(--text); background: var(--flaeche); border: 1px solid var(--rand-stark); border-radius: var(--radius); padding: 10px 12px; cursor: pointer; } .sp-raumkarte:hover, .sp-raumkarte.aktiv { border-color: var(--petrol); background: var(--petrol-hell); } .sp-raumkarte:disabled { cursor: default; } .sp-raumkarte-kopf, .sp-raumkarte-zeile, .sp-raumkarte-summe { display: flex; justify-content: space-between; gap: 8px; } .sp-raumkarte-zeile { font-size: 13px; } .sp-raumkarte-zeile > :last-child, .sp-raumkarte-summe > :last-child, .sp-raumkarte-kopf > :last-child { white-space: nowrap; } @media (max-width: 560px) { .sp-raumkarte { flex-basis: 260px; } } .sp-raumkarte-summe { border-top: 1px solid var(--rand); padding-top: 6px; margin-top: auto; }.sp-plan-bild { background: var(--flaeche-leise); border-radius: var(--radius); padding: 6px; } .sp-ansicht { display: flex; gap: 6px; margin-left: auto; } .sp-plan-3d { height: 440px; border-radius: var(--radius); overflow: hidden; } .sp-plan-3d[hidden], [data-sp-plan-svg][hidden] { display: none; } @media (max-width: 800px) { .sp-plan-3d { height: 320px; } } .sp-plan-svg { display: block; width: 100%; height: auto; max-height: 70vh; } .sp-plan-raum { fill: var(--flaeche); stroke: none; cursor: pointer; } .sp-plan-raum:hover { fill: var(--petrol-hell); } .sp-plan-raum.mit-massnahme { fill: var(--kupfer-hell); } .sp-plan-raum.aktiv { fill: var(--petrol-hell); stroke: var(--petrol); stroke-width: 6; } .sp-plan-raum:focus-visible { outline: none; stroke: var(--kupfer-dunkel); stroke-width: 8; } .sp-plan-wand { stroke: var(--text); stroke-linecap: square; } .sp-plan-wand.daemm { stroke: var(--kupfer); } .sp-plan-wand.waehlbar { cursor: pointer; } .sp-plan-wand.waehlbar:hover { stroke: var(--petrol); } .sp-plan-wand.waehlbar:focus-visible { outline: none; stroke: var(--kupfer-dunkel); } .sp-plan-oeffnung { pointer-events: none; } .sp-raum-waende { margin-bottom: 12px; } .sp-raum-waende label { font-size: 13px; } /* Fördermittel-Abgleich im Sanierungsplaner */ .sp-foerder { border: 1px solid var(--rand); border-radius: var(--radius); margin-top: 10px; } .sp-foerder > summary { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 10px 12px; cursor: pointer; } .sp-foerder-betrag { margin-left: auto; font-weight: 600; white-space: nowrap; } .sp-foerder-inhalt { padding: 0 12px 12px; } .sp-foerder-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13.5px; } .sp-foerder-liste li { display: flex; gap: 8px; align-items: baseline; } .sp-foerder-stufe { flex: none; display: inline-block; min-width: 92px; font-size: 12px; font-weight: 600; padding: 1px 6px; border-radius: 6px; background: var(--flaeche-leise); color: var(--text); } .sp-foerder-liste li.stufe-ok .sp-foerder-stufe { background: var(--gut-hell); color: var(--auf-gut-hell); } .sp-foerder-liste li.stufe-nein .sp-foerder-stufe { background: var(--schlecht-hell); color: var(--schlecht); } .sp-foerder-liste li.stufe-offen .sp-foerder-stufe { background: var(--warn-hell); color: var(--auf-warn-hell); } .sp-foerder-liste li.stufe-aufgabe .sp-foerder-stufe { background: var(--petrol-hell); color: var(--petrol); } .sp-plan-oeffnung { stroke-linecap: butt; } .sp-plan-oeffnung.fenster { stroke: #7fb2cf; } .sp-plan-oeffnung.tuer, .sp-plan-oeffnung.durchgang { stroke: var(--flaeche); } .sp-plan-mass { fill: var(--text-leise); pointer-events: none; } .sp-plan-name { fill: var(--text); font-weight: 600; pointer-events: none; } .sp-plan-flaeche { font-weight: 400; fill: var(--text-leise); } .sp-raum-werte { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 4px 12px; margin: 0 0 10px; } .sp-raum-werte div { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--rand); padding: 2px 0; } .sp-raum-werte dt { color: var(--text-leise); } .sp-raum-werte dd { margin: 0; font-weight: 600; } .sp-raum-massnahmen { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; min-width: 0; } .sp-raum-massnahmen legend { font-weight: 600; color: var(--petrol); padding: 0; margin-bottom: 6px; } .sp-raum-massnahmen label { display: flex; gap: 8px; align-items: center; cursor: pointer; } .sp-raeume-wahl { margin: 0 0 10px; } .sp-tabelle tr.sp-zeile-aktiv td { background: var(--petrol-hell); } /* Interessenten (Anfragen aus ohne-makler.net) */ .anfragen-raster { display: grid; grid-template-columns: minmax(260px, 380px) minmax(0, 1fr); gap: 16px; align-items: start; } .anfragen-links, .anfragen-rechts { display: grid; gap: 12px; min-width: 0; } .anfragen-gruppe { margin: 0; } .anfragen-liste { list-style: none; margin: 0; padding: 0; display: grid; } .anfrage-zeile { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; width: 100%; text-align: left; padding: 10px 16px; background: transparent; border: 0; border-top: 1px solid var(--rand); color: var(--text); font: inherit; cursor: pointer; } .anfrage-zeile .unter { grid-column: 1 / -1; font-size: 12.5px; color: var(--text-leise); } .anfrage-zeile:hover { background: var(--petrol-hell); } .anfrage-zeile.aktiv { background: var(--petrol-hell); box-shadow: inset 3px 0 0 var(--petrol); } .anfragen-angaben { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; } .anfragen-angaben dt { color: var(--text-leise); } .anfragen-angaben dd { margin: 0; min-width: 0; overflow-wrap: anywhere; } .anfragen-anlage { display: flex; gap: 8px; align-items: center; padding: 4px 0; cursor: pointer; } .anfragen-verlauf { margin: 0; padding-left: 18px; } .anfragen-bib { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--rand); } .anfragen-bib .leise { grid-column: 1; } .anfragen-bib .knopf { grid-column: 2; grid-row: 1 / span 2; } @media (max-width: 900px) { .anfragen-raster { grid-template-columns: 1fr; } } .stift { background: transparent; border: 0; padding: 2px 4px; margin-left: 4px; color: var(--petrol); cursor: pointer; border-radius: 4px; vertical-align: middle; } .stift svg { width: 15px; height: 15px; display: block; } .stift:hover, .stift:focus-visible { background: var(--petrol-hell); } .stift-form { display: grid; gap: 6px; } .stift-form input, .stift-form textarea { width: 100%; box-sizing: border-box; } .stift-knoepfe { display: flex; gap: 6px; } .anfragen-angaben-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 44%); gap: 18px; align-items: start; } .anfragen-angaben-raster:not(:has(.anfragen-vorschau)) { grid-template-columns: minmax(0, 1fr); } .anfragen-angaben-links { min-width: 0; } .anfragen-vorschau { display: grid; gap: 8px; min-width: 0; align-content: start; } .anhang-leiste { display: flex; flex-wrap: wrap; gap: 6px; } .anhang-ansicht { border: 1px solid var(--rand); border-radius: 8px; overflow: hidden; background: var(--flaeche-leise); } .anhang-rahmen { display: block; width: 100%; height: 460px; border: 0; background: #fff; } .anhang-bild { display: block; max-width: 100%; height: auto; margin: 0 auto; } @media (max-width: 900px) { .anfragen-angaben-raster { grid-template-columns: 1fr; } .anhang-rahmen { height: 360px; } } .termin-felder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 8.5em); gap: 8px; } .termin-felder input { width: 100%; box-sizing: border-box; min-height: 100%; font: inherit; } .termin-zeile2 { margin-top: 6px; grid-template-columns: minmax(0, 8.5em) auto; align-items: center; } dialog.termin-dialog { width: min(920px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; overflow: auto; } .termin-dialog .dialog-kopf { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--rand); } .termin-dialog .dialog-kopf h2 { margin: 0; font-size: 18px; } .termin-dialog .dialog-fuss { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--rand); } .termin-inhalt { display: grid; grid-template-columns: minmax(250px, 300px) minmax(0, 1fr); gap: 20px; padding: 16px 20px; } .kal-kopf { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 8px; } .kal-raster { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; } .kal-woche { text-align: center; font-size: 11.5px; color: var(--text-leise); padding: 2px 0; } .kal-tag { position: relative; aspect-ratio: 1; min-height: 34px; border: 1px solid var(--rand); border-radius: 6px; background: var(--flaeche); color: var(--text); font: inherit; cursor: pointer; } .kal-tag:hover { background: var(--petrol-hell); } .kal-tag.vorbei { color: var(--text-leise); background: var(--flaeche-leise); } .kal-tag.heute { border-color: var(--petrol); font-weight: 700; } .kal-tag.gewaehlt { background: var(--petrol); border-color: var(--petrol); color: var(--auf-petrol); } .kal-punkt { position: absolute; right: 3px; bottom: 2px; font-style: normal; font-size: 10px; line-height: 1; padding: 1px 4px; border-radius: 8px; background: var(--kupfer-hell); color: var(--text); } .kal-tag.gewaehlt .kal-punkt { background: var(--auf-petrol); color: var(--petrol); } .kal-legende { font-size: 12px; margin: 8px 0 0; } .termin-tag h3 { margin: 0 0 8px; font-size: 16px; } .termin-liste { margin: 0 0 10px; padding-left: 18px; font-size: 13.5px; } .termin-liste .uebergabe { color: var(--text-leise); } .termin-dauer { max-width: 12em; margin-bottom: 10px; } .slot-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 5px; max-height: 300px; overflow: auto; padding: 2px; } .slot { padding: 6px 0; border-radius: 6px; border: 1px solid var(--rand-stark); background: var(--flaeche); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; } .slot.frei:hover { background: var(--petrol-hell); } .slot.belegt { background: repeating-linear-gradient(45deg, var(--flaeche-leise), var(--flaeche-leise) 5px, var(--rand) 5px, var(--rand) 7px); color: var(--text-leise); } .slot.gewaehlt { background: var(--petrol); border-color: var(--petrol); color: var(--auf-petrol); } .termin-hinweis { margin: 10px 0 0; font-size: 13.5px; } .warn-text { color: var(--auf-warn-hell); background: var(--warn-hell); padding: 1px 6px; border-radius: 4px; } @media (max-width: 760px) { .termin-inhalt { grid-template-columns: 1fr; } } dialog.termin-dialog { width: min(1240px, calc(100vw - 32px)); } .termin-inhalt { grid-template-columns: minmax(250px, 300px) minmax(0, 1fr) minmax(230px, 290px); } .termin-vereinbart { min-width: 0; border-left: 1px solid var(--rand); padding-left: 16px; } .termin-vereinbart h3 { margin: 0 0 8px; font-size: 16px; } .vereinbart-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 420px; overflow: auto; } .vereinbart { display: block; width: 100%; text-align: left; padding: 6px 8px; border: 1px solid var(--rand); border-radius: 6px; background: var(--flaeche); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; } .vereinbart:hover { background: var(--petrol-hell); } .vereinbart.eigene { border-color: var(--petrol); box-shadow: inset 3px 0 0 var(--petrol); } .vereinbart.uebergabe .v-name { color: var(--text-leise); } .vereinbart .v-datum { font-weight: 600; } .vereinbart .v-ort { display: block; font-size: 12px; color: var(--text-leise); } @media (max-width: 1268px) { .termin-inhalt { grid-template-columns: minmax(250px, 300px) minmax(0, 1fr); } .termin-vereinbart { grid-column: 1 / -1; border-left: 0; padding-left: 0; } } @media (max-width: 760px) { .termin-inhalt { grid-template-columns: 1fr; } } .ki-panel { border: 1px solid var(--petrol); border-radius: 8px; padding: 12px 14px; margin-bottom: 14px; background: var(--petrol-hell); } .ki-panel h4 { margin: 0 0 6px; } .ki-gruppen { border: 0; margin: 8px 0; padding: 0; display: grid; gap: 4px; } .ki-gruppen legend { font-weight: 600; padding: 0; margin-bottom: 4px; } .ki-gruppen label { display: flex; gap: 8px; align-items: center; cursor: pointer; } .ki-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; } .ki-liste { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; } .ki-zeile { display: grid; grid-template-columns: auto minmax(8em, 11em) minmax(0, 1fr); gap: 8px; align-items: center; } .ki-beleg { margin: 2px 0 0 28px; padding-left: 8px; border-left: 3px solid var(--rand-stark); font-size: 12.5px; color: var(--text-leise); } @media (max-width: 760px) { .ki-zeile { grid-template-columns: auto 1fr; } .ki-zeile input[type=text] { grid-column: 1 / -1; } } /* Interessenten: Ansicht wie die Anfragenverwaltung von ohne-makler.net – Ordner links, schlanke Liste in der Mitte, Detail rechts */ .anfragen-drei { display: grid; grid-template-columns: 210px minmax(300px, 380px) minmax(0, 1fr); gap: 16px; align-items: start; } .anfragen-mitte { display: grid; gap: 8px; min-width: 0; } .anfragen-ordner { display: grid; gap: 2px; position: sticky; top: 12px; } .anfragen-ordner-knopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 8px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: inherit; cursor: pointer; } .anfragen-ordner-knopf:hover { background: var(--petrol-hell); } .anfragen-ordner-knopf.aktiv { background: var(--petrol-hell); color: var(--petrol); font-weight: 600; box-shadow: inset 3px 0 0 var(--petrol); } .anfragen-ordner-knopf .zaehler { color: var(--text-leise); font-size: 12.5px; font-variant-numeric: tabular-nums; } .anfragen-werkzeuge { display: flex; flex-wrap: wrap; gap: 6px; } .anfragen-suche { width: 100%; box-sizing: border-box; padding: 8px 10px; } .anfragen-sortierzeile { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; justify-content: space-between; } .anfragen-liste-rahmen { max-height: 72vh; overflow: auto; border: 1px solid var(--rand); border-radius: 10px; background: var(--flaeche, transparent); } .anfragen-liste-rahmen .anfragen-liste { gap: 0; } li.anfrage-karte { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0 6px; align-items: start; padding: 0 8px 0 6px; border-top: 1px solid var(--rand); border-left: 4px solid transparent; } li.anfrage-karte[hidden] { display: none; } li.anfrage-karte:first-child { border-top: 0; } li.anfrage-karte.ist-neu { border-left-color: #e8913a; } li.anfrage-karte.bew-interessant { background: rgba(46, 160, 100, .13); } li.anfrage-karte.bew-uninteressant { background: rgba(220, 70, 70, .13); } li.anfrage-karte.bew-vielleicht { background: rgba(232, 145, 58, .12); } li.anfrage-karte.aktiv { box-shadow: inset 0 0 0 2px var(--petrol); } .anfrage-wahl { margin: 13px 0 0; width: 17px; height: 17px; } li.anfrage-karte .anfrage-zeile { grid-template-columns: 1fr; padding: 10px 4px; border-top: 0; background: transparent; box-shadow: none; min-width: 0; } li.anfrage-karte .anfrage-zeile:hover { background: transparent; } .anfrage-name { font-weight: 600; overflow-wrap: anywhere; } .anfrage-vorschau-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; color: var(--text); } .anfrage-fuss { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: 12px; } .bew-knoepfe { display: inline-flex; gap: 2px; align-items: center; margin-top: 6px; } .bew-knopf { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--text-leise); cursor: pointer; } .bew-knopf:hover, .bew-knopf:focus-visible { background: var(--petrol-hell); color: var(--text); } .bew-knopf.aktiv.bew-interessant { color: #1f7a4a; border-color: currentColor; } .bew-knopf.aktiv.bew-vielleicht { color: #a8610f; border-color: currentColor; } .bew-knopf.aktiv.bew-uninteressant { color: #b32d2d; border-color: currentColor; } .daumen-runter { display: inline-flex; transform: rotate(180deg); } .anfragen-rechts .karte-kopf .bew-knoepfe { margin: 0 0 0 auto; } .massen-dialog { width: min(560px, calc(100vw - 32px)); border: 1px solid var(--rand); border-radius: 12px; padding: 18px; background: var(--flaeche, #fff); color: var(--text); } .massen-dialog::backdrop { background: rgba(0, 0, 0, .45); } .massen-form { display: grid; gap: 12px; } .massen-form h2 { margin: 0; font-size: 18px; } li.anfrage-karte[draggable=true] { cursor: grab; } li.anfrage-karte.wird-gezogen { opacity: .5; } .ziehen-aktiv .anfragen-ordner-knopf[data-ziel] { outline: 1px dashed var(--petrol); outline-offset: -1px; } .anfragen-ordner-knopf.ziel-ueber { background: var(--petrol-hell); outline: 2px solid var(--petrol) !important; } @media (max-width: 1518px) { .anfragen-drei { grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); } .anfragen-ordner { grid-column: 1 / -1; position: sticky; top: 0; z-index: 6; padding: 6px 0; background: var(--grund); grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } } @media (max-width: 900px) { .anfragen-drei { grid-template-columns: minmax(0, 1fr); } .anfragen-liste-rahmen { max-height: 50vh; } } /* Interessenten: Statusbereich rechts, läuft beim Scrollen des Fensters mit (ab 1400 px Breite; darunter steht er wie bisher über den Angaben) */ .anfragen-detail { display: grid; gap: 12px; min-width: 0; } .anfragen-detail-haupt { display: grid; gap: 12px; min-width: 0; } .anfragen-status { min-width: 0; } @media (min-width: 1668px) { .anfragen-drei { grid-template-columns: 190px minmax(280px, 340px) minmax(0, 1fr); } .anfragen-detail { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; } .anfragen-detail-haupt { grid-column: 1; grid-row: 1; } .anfragen-status { grid-column: 2; grid-row: 1; position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; } .anfragen-status .formraster { grid-template-columns: minmax(0, 1fr); } .anfragen-status .termin-felder { flex-wrap: wrap; } } /* Kalender der Übersicht: kompaktere Darstellung und eigene Termine (orange) */ .kalender .karte-inhalt { padding-top: 10px; } .kalender .karte-kopf { padding-top: 10px; padding-bottom: 10px; } .kal-summen { gap: 5px; margin-bottom: 8px; } .kal-summen .etikett { font-size: 11.5px; padding: 1px 8px; } .kal-kopf { padding: 3px 6px; font-size: 12px; } .kal-tag { min-height: 64px; padding: 2px 4px 3px; gap: 2px; } .kal-nr { font-size: 11.5px; line-height: 1.2; } .kal-eintrag { font-size: 11.5px; line-height: 1.25; padding: 1px 4px; } .kal-eintrag.orange { background: var(--warn-hell); color: var(--warn); border-left-color: var(--warn); } .kal-detail.orange { border-left-color: var(--warn); } .kal-punkt.orange { background: var(--warn); } .etikett.orange { background: var(--warn-hell); border-color: transparent; color: var(--warn); } .kal-hinweis summary { cursor: pointer; font-size: 12.5px; } .kal-hinweis p { margin: 6px 0 0; } .kal-detail { margin-top: 10px; padding: 10px 14px; } /* Der Besichtigungskalender (Dialog bei den Interessenten) nutzt dieselben Klassennamen mit anderer Gestalt (.kal-tag als quadratische Schaltfläche). Im Monatsraster der Übersicht gilt wieder die kompakte Zelle – sonst werden die Tage quadratisch und der Kalender sehr hoch. */ .kal-raster .kal-tag { aspect-ratio: auto; min-height: 64px; border: 0; border-right: 1px solid var(--rand); border-bottom: 1px solid var(--rand); border-radius: 0; background: transparent; cursor: default; font: inherit; font-weight: normal; color: inherit; } .kal-raster .kal-tag.leer { background: var(--flaeche-leise); } .kal-raster .kal-tag.wochenende { background: var(--flaeche); } .kal-raster .kal-tag.heute { box-shadow: inset 0 0 0 2px var(--petrol); } .kal-raster .kal-tag:hover { background: transparent; } .kal-raster .kal-tag.leer:hover { background: var(--flaeche-leise); } .kal-raster .kal-tag.wochenende:hover { background: var(--flaeche); } /* --------------------------------------------------------------------------- Vermietungsanalyse 360° (vermietungsanalyse.js): Ampel-Chips, Annahmenformular, Bewertungstabelle und die aufklappbaren Modellkarten. --------------------------------------------------------------------------- */ .ampel { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12.5px; font-weight: 600; } .ampel.gruen { background: var(--gut-hell); color: var(--gut); } .ampel.gelb { background: var(--warn-hell); color: var(--warn); } .ampel.rot { background: var(--schlecht-hell); color: var(--schlecht); } .ampel.offen { background: var(--flaeche-leise); color: var(--text-leise); } .va-seite .va-auswahl { margin-bottom: 20px; } .va-annahmen { margin-top: 16px; } .va-annahmen fieldset:last-of-type { margin-bottom: 10px; } .va-annahmen .feld > span { line-height: 1.3; } .va-merkmale { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 14px; } .va-merkmale > .leise { flex: 1 1 100%; } .va-haken { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; } .va-tabelle th[scope="row"] { font-weight: 600; } .va-tabelle th .unter { display: block; font-size: 12.5px; color: var(--text-leise); font-weight: 400; max-width: 32ch; } .va-tabelle td { white-space: nowrap; } .va-ziel-aktiv th[scope="row"] { color: var(--petrol); } .va-ziel-aktiv th[scope="row"]::after { content: ' ◂ gewählt'; font-weight: 400; font-size: 12.5px; } details.va-modell { margin-top: 12px; } details.va-modell > summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 20px; cursor: pointer; font-weight: 600; } details.va-modell[open] > summary { border-bottom: 1px solid var(--rand); } details.va-modell > summary:focus-visible { outline: 2px solid var(--kupfer-dunkel); outline-offset: -2px; } .va-modell h4 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 20px 0 8px; } .va-modell h4:first-child { margin-top: 0; } .va-modell h5 { margin: 12px 0 4px; font-size: 13.5px; color: var(--text-leise); } .va-modell ul { margin: 0; padding-left: 20px; } .va-modell li { margin-bottom: 4px; } @media (max-width: 700px) { .va-tabelle td { white-space: normal; } .va-tabelle th .unter { display: none; } } /* --------------------------------------------------------------------------- Ankaufsprüfung (ankauf-pruefung.js, Ansicht „Prüfung“ im Kaufkandidaten): Reiter, Ampeln, Energieskala, Szenariokarten und der Fortschrittsbalken. Farben kommen aus den Variablen oben – die Vorlage brachte eigene Farbwerte mit, die hier bewusst nicht übernommen sind. --------------------------------------------------------------------------- */ .cockpit-reiter { flex-wrap: wrap; gap: 2px 14px; } /* Die Reiter stehen im Kandidaten-Dialog; dort rollt der Dialoginhalt, und der Seitenrand von `.unternav` (negativer Außenabstand) würde über den Rand des Dialogs hinausragen. */ .ankauf-dialog .cockpit-reiter { margin-left: 0; margin-right: 0; } .cockpit-reiter button { background: none; border: 0; padding: 8px 2px; font: inherit; color: var(--text-leise); cursor: pointer; border-bottom: 2px solid transparent; } .cockpit-reiter button:hover { color: var(--text); } .cockpit-reiter button.aktiv { color: var(--petrol); border-bottom-color: var(--petrol); font-weight: 600; } .cockpit-reiter .nav-zaehler { margin-left: 4px; } .balken { height: 10px; border-radius: 5px; background: var(--grund); overflow: hidden; margin-bottom: 10px; } .balken-fuell { height: 100%; background: linear-gradient(90deg, var(--petrol), var(--kupfer)); } .cockpit-schritte { display: flex; flex-wrap: wrap; gap: 8px; } .cockpit-schritt { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border: 1px solid var(--rand); border-radius: var(--radius); background: var(--feld); font-size: 13px; color: var(--text-leise); } button.cockpit-schritt { cursor: pointer; font-family: inherit; } button.cockpit-schritt:hover { border-color: var(--rand-stark); } .cockpit-schritt.erledigt { background: var(--gut-hell); color: var(--gut); border-color: var(--gut); } .ampel { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12.5px; font-weight: 600; } .ampel.gruen { background: var(--gut-hell); color: var(--gut); } .ampel.gelb { background: var(--warn-hell); color: var(--warn); } .ampel.rot { background: var(--schlecht-hell); color: var(--schlecht); } .ampel.offen { background: var(--flaeche-leise); color: var(--text-leise); } .cockpit-liste { list-style: none; margin: 0; padding: 0; } .cockpit-liste li { display: flex; align-items: center; gap: 8px; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid var(--rand); } .cockpit-liste li:last-child { border-bottom: 0; } .cockpit-liste li > span:first-child { flex: 1; } .negativ { color: var(--schlecht); } .positiv { color: var(--gut); } .warnton { color: var(--warn); } tr.gruppenzeile td { background: var(--flaeche-leise); font-size: 12.5px; } tr.hervor td { background: var(--petrol-hell); } .energieskala { display: flex; gap: 3px; margin-bottom: 10px; } .energieskala .ek { flex: 1; text-align: center; padding: 8px 2px; border-radius: 4px; font-size: 12.5px; font-weight: 600; color: var(--text); background: var(--flaeche-leise); opacity: .45; } .energieskala .ek b { display: block; font-size: 10.5px; letter-spacing: .06em; } .energieskala .ek.ist, .energieskala .ek.ziel { opacity: 1; } .energieskala .ek.ist { outline: 2px solid var(--text); } .energieskala .ek.ziel { outline: 2px dashed var(--petrol); } .energieskala .ek-Aplus, .energieskala .ek-A { background: #cfe6d4; } .energieskala .ek-B, .energieskala .ek-C { background: #dfeacb; } .energieskala .ek-D, .energieskala .ek-E { background: #f3ecc6; } .energieskala .ek-F, .energieskala .ek-G { background: #f6ddc2; } .energieskala .ek-H { background: #f3d2cf; } .cockpit-szenarien { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 18px; } button.cockpit-szenario { text-align: left; cursor: pointer; font: inherit; color: inherit; width: 100%; } button.cockpit-szenario.aktiv { border-color: var(--petrol); box-shadow: 0 0 0 1px var(--petrol); } .cockpit-szenario .wert.gross { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; } .sparkline { width: 100%; height: 34px; margin: 6px 0; } .sparkline polyline { fill: none; stroke: var(--petrol); stroke-width: 1.5; vector-effect: non-scaling-stroke; } .sparkline .null { stroke: var(--rand-stark); stroke-width: 1; vector-effect: non-scaling-stroke; } @media (max-width: 700px) { .cockpit-reiter { gap: 2px 10px; font-size: 13px; } .cockpit-liste li { flex-wrap: wrap; } } .cockpit-reiter .nav-zaehler:empty { display: none; } /* Zähler bleibt im DOM, damit er beim Nachrechnen nur gefüllt wird */ /* ---------- Vertragsmanagement ---------- */ /* Reiter der Bereiche wie im Prüfcockpit, hier aber als Links (jeder Bereich hat seine eigene Adresse) */ .vertrag-reiter { flex-wrap: wrap; gap: 2px 14px; } .vertrag-reiter a { padding: 8px 2px; color: var(--text-leise); border-bottom: 2px solid transparent; border-radius: 0; } .vertrag-reiter a:hover { background: none; color: var(--text); } .vertrag-reiter a.aktiv { color: var(--petrol); border-bottom-color: var(--petrol); font-weight: 600; } .vertrag-reiter .nav-zaehler { margin-left: 4px; } /* Knopfreihen im Kopf der Vertragsakte und unter den Formularen */ .vertrag-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; } .vertrag-form h4 { margin: 18px 0 10px; } .vertrag-form h4:first-child { margin-top: 0; } .vertrag-form .vertrag-knoepfe { margin-top: 16px; } .vertraege-tabelle td { vertical-align: top; } /* Zweite Zeile unter einem Wert der Werteliste (z. B. „durch automatische Verlängerung fortgeschrieben“) */ .werte dd .werte-unter { display: block; margin-top: 2px; color: var(--text-leise); font-size: 12px; font-weight: 400; } /* ---------- Übersicht: Zinsbindungen links, Wochenkalender rechts (Sebastian, 01.11.2026) ---------- */ /* Unter den Kennzahlen ein zweispaltiges Raster: links die Grafiken (zuerst die Zinsbindungen der Darlehen), rechts der Kalender als Wochenansicht. Die rechte Spalte ist schmal und bleibt beim Scrollen stehen; unter 1000 px rücken die Spalten untereinander. */ .uebersicht-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: 20px; align-items: start; } .uebersicht-haupt { min-width: 0; } .uebersicht-haupt > .karte { width: 100%; min-width: 0; } .uebersicht-seite { min-width: 0; position: sticky; top: 16px; } .uebersicht-seite > .karte { width: 100%; min-width: 0; margin-top: 0; } @media (max-width: 1268px) { .uebersicht-raster { grid-template-columns: minmax(0, 1fr); } .uebersicht-seite { position: static; } } /* Wochenansicht: ein Tag je Zeile, Einträge wie in der Listenansicht des Monats; die Fläche öffnet den Monat als Dialog */ .kalender-woche .karte-kopf { padding: 14px 16px 10px; } .kalender-woche .karte-inhalt { padding: 8px 12px 12px; } .kalender-woche .karte-kopf .kal-steuerung { flex-wrap: nowrap; } .kal-woche { cursor: pointer; border-radius: var(--radius); } .kal-woche:hover { background: var(--flaeche-leise); } .kal-woche-tag { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; padding: 6px 4px; border-bottom: 1px solid var(--grund); min-height: 34px; } .kal-woche-tag:last-child { border-bottom: 0; } .kal-woche-tag.wochenende { background: color-mix(in srgb, var(--flaeche-leise) 60%, transparent); } /* Vergangene Tage nur in der leisen Textfarbe – keine Deckkraft, die unterschreitet den axe-Kontrast (4,5:1) */ .kal-woche-tag.vorbei .kal-woche-datum { color: var(--text-leise); } .kal-woche-datum { display: flex; flex-direction: column; align-items: center; line-height: 1.1; padding-top: 2px; } .kal-woche-wt { font-size: 11px; color: var(--text-leise); text-transform: uppercase; letter-spacing: .04em; } .kal-woche-tagnr { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; } .kal-woche-tag.heute .kal-woche-datum { color: var(--auf-petrol); background: var(--petrol); border-radius: 8px; padding: 3px 0; } .kal-woche-tag.heute .kal-woche-wt { color: var(--auf-petrol); } .kal-woche-eintraege { display: grid; gap: 4px; align-content: start; min-width: 0; } .kal-woche-eintraege .kal-eintrag { font-size: 12.5px; padding: 3px 7px; } .kal-woche-eintraege .kal-eintrag.gruen { flex-wrap: wrap; } .kal-woche-frei { color: var(--text-leise); padding: 4px 2px; font-size: 13px; } .kal-woche-fuss { display: flex; gap: 8px; flex-wrap: wrap; justify-content: space-between; margin-top: 10px; } /* Monatskalender als Dialog: so breit wie der Platz es erlaubt, der Kalender darin wie bisher auf der Übersicht */ dialog.kalender-dialog { width: min(1240px, calc(100vw - 40px)); } dialog.kalender-dialog .dialog-inhalt { padding: 0; } dialog.kalender-dialog .kalender { border: 0; box-shadow: none; border-radius: 0; width: 100%; min-width: 0; } dialog.kalender-dialog .kalender .kal-tip { max-width: min(420px, 80vw); } /* Die Überschrift steht schon im Dialogkopf – die der Karte darin entfällt (bleibt als Name für aria-labelledby erhalten) */ dialog.kalender-dialog .kalender .karte-kopf > div:first-child { display: none; } /* Zinsbindungen: je Darlehen ein Balken bis zum Ende der Zinsbindung, gemeinsamer Maßstab in Monaten ab heute */ .zinsbindungen { --dz-kurz: var(--schlecht); --dz-mittel: #c98a12; --dz-lang: var(--gut); --dz-name: 220px; } :root[data-thema="dunkel"] .zinsbindungen { --dz-mittel: var(--warn); } @media (prefers-color-scheme: dark) { :root:not([data-thema="hell"]) .zinsbindungen { --dz-mittel: var(--warn); } } .dz-summen { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } .dz-strahl { position: relative; padding-bottom: 30px; } .dz-zeile { display: grid; grid-template-columns: var(--dz-name) minmax(0, 1fr); gap: 10px; align-items: center; min-height: 34px; padding: 3px 0; color: inherit; text-decoration: none; border-radius: 6px; position: relative; z-index: 1; } a.dz-zeile:hover, a.dz-zeile:focus-visible { background: var(--flaeche-leise); } a.dz-zeile:focus-visible { outline: 2px solid var(--petrol); outline-offset: 1px; } .dz-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 600; padding-left: 6px; } .dz-spur { position: relative; height: 22px; min-width: 0; } .dz-balken { position: absolute; left: 0; top: 2px; height: 18px; border-radius: 9px; background: var(--dz-lang); } .dz-zeile.kurz .dz-balken { background: var(--dz-kurz); } .dz-zeile.mittel .dz-balken { background: var(--dz-mittel); } .dz-zeile.lang .dz-balken { background: var(--dz-lang); } /* Variabel verzinst oder abgelaufen: kein Balken, sondern ein gestricheltes Kästchen an der Marke „heute“ */ .dz-zeile.variabel .dz-balken, .dz-zeile.abgelaufen .dz-balken { width: 18px !important; border: 2px dashed var(--dz-kurz); background: transparent; border-radius: 5px; box-sizing: border-box; } .dz-ende { position: absolute; top: 0; line-height: 22px; margin-left: 10px; font-size: 12.5px; white-space: nowrap; color: var(--text-leise); font-variant-numeric: tabular-nums; } .dz-ende.innen { margin-left: 0; margin-right: 6px; top: 3px; line-height: 16px; padding: 0 7px; border-radius: 8px; background: var(--flaeche); color: var(--text); } .dz-zeile.variabel .dz-ende, .dz-zeile.abgelaufen .dz-ende { left: 28px !important; } .dz-zeile.unbekannt .dz-ende { margin-left: 0; position: static; line-height: 22px; } .dz-achse { position: absolute; left: calc(var(--dz-name) + 10px); right: 0; top: 0; bottom: 0; pointer-events: none; z-index: 0; } .dz-marke { position: absolute; top: 0; bottom: 30px; border-left: 1px dashed var(--rand-stark); } .dz-marke.heute { left: 0; border-left: 2px solid var(--petrol); } .dz-marke.ende { right: 0; border-left: 0; } .dz-marke span { position: absolute; top: 100%; left: 0; transform: translateX(-50%); margin-top: 6px; font-size: 11.5px; color: var(--text-leise); white-space: nowrap; } .dz-marke.heute span { transform: none; left: 0; } .dz-marke.ende span { transform: none; left: auto; right: 0; } .dz-legende { display: flex; gap: 6px 18px; flex-wrap: wrap; margin-top: 10px; font-size: 12.5px; } .dz-punkt { display: inline-block; width: 11px; height: 11px; border-radius: 3px; vertical-align: -1px; margin-right: 3px; } .dz-punkt.kurz { background: var(--dz-kurz); } .dz-punkt.mittel { background: var(--dz-mittel); } .dz-punkt.lang { background: var(--dz-lang); } .dz-punkt.variabel { border: 2px dashed var(--dz-kurz); box-sizing: border-box; } /* Handy: Name über dem Balken statt daneben, der Balken bekommt die volle Breite; die gestrichelten Hilfslinien liefen sonst durch die Namen – es bleiben die Marke „heute“ und die Beschriftungen der Achse */ @media (max-width: 700px) { .zinsbindungen { --dz-name: 0px; } .dz-zeile { grid-template-columns: minmax(0, 1fr); gap: 2px; min-height: 0; padding: 6px 0; } .dz-name { font-size: 13px; padding-left: 0; } .dz-achse { left: 0; } .dz-marke:not(.heute) { border-left: 0; } .dz-ende { font-size: 11.5px; right: 0; overflow: hidden; text-overflow: ellipsis; } .dz-ende.innen { left: auto; overflow: visible; } } /* Finanzplanung nach Markus Wahle (finanzplanung.js) */ .fp-seite .kennzahlen-eng { margin-bottom: 12px; } .fp-bilanz { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; } .fp-bilanz h4 { margin: 0 0 6px; font-size: 14px; } .fp-bilanz-netto { margin: 12px 0 0; } .fp-toepfe { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; } .fp-topf { border: 1px solid var(--rand); border-radius: var(--radius); padding: 12px 14px; background: var(--grund); } .fp-topf.leer { border-style: dashed; } .fp-topf-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .fp-topf-wert { font-size: 20px; font-weight: 600; margin: 6px 0 8px; font-variant-numeric: tabular-nums; } .fp-topf p { margin: 8px 0 0; font-size: 12.5px; } .fp-summe { margin: 14px 0 0; } .fp-ampel { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .fp-ampel li { display: flex; gap: 10px; align-items: flex-start; } .fp-punkt { width: 12px; height: 12px; border-radius: 50%; flex: none; margin-top: 4px; background: var(--text-leise); } .fp-ampel li.gut .fp-punkt { background: var(--gut); } .fp-ampel li.warn .fp-punkt { background: var(--warn); } .fp-ampel li.schlecht .fp-punkt { background: var(--schlecht); } .fp-grafik { margin: 0 0 14px; } .fp-grafik svg { width: 100%; height: auto; display: block; } .fp-raster { stroke: var(--rand); stroke-width: 1; } .fp-achse { font-size: 11px; fill: var(--text-leise); } .fp-achse.marke { fill: var(--gut); font-weight: 600; } .fp-flaeche { fill: var(--petrol-hell); opacity: .7; } .fp-linie { fill: none; stroke-width: 2.5; stroke-linejoin: round; } .fp-linie.passiv { stroke: var(--petrol); } .fp-linie.fix { stroke: var(--kupfer-dunkel); stroke-dasharray: 6 4; } .fp-ereignis { stroke: var(--kupfer); stroke-width: 1.5; stroke-dasharray: 2 3; } .fp-grafik figcaption { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-leise); margin-top: 6px; } .fp-legende::before { content: ''; display: inline-block; width: 18px; height: 3px; vertical-align: middle; margin-right: 6px; border-radius: 2px; background: var(--petrol); } .fp-legende.fix::before { background: var(--kupfer-dunkel); } .fp-legende.ereignis::before { background: var(--kupfer); height: 2px; } .fp-markiert td { background: var(--gut-hell); } .fp-reiter { margin-top: -6px; } .fp-bausteine { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; } .fp-baustein { display: block; border: 1px solid var(--rand); border-radius: var(--radius); padding: 14px 16px; background: var(--flaeche); box-shadow: var(--schatten); text-decoration: none; color: var(--text); } .fp-baustein:hover { border-color: var(--petrol); } .fp-baustein-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .fp-baustein-kopf .fp-punkt { margin-top: 0; } .fp-baustein-kopf .fp-punkt.gut { background: var(--gut); } .fp-baustein-kopf .fp-punkt.warn { background: var(--warn); } .fp-baustein-kopf .fp-punkt.schlecht { background: var(--schlecht); } .fp-baustein-stand { font-size: 18px; font-weight: 600; margin: 6px 0 2px; font-variant-numeric: tabular-nums; } /* Finanzplanung: jeder Reiter nutzt die volle Fensterbreite (Sebastian, 01.11.2026) */ .fp-seite .karte, .sd-seite .karte { width: auto; min-width: 0; max-width: none; } .fp-seite .hinweisbox, .sd-seite .hinweisbox { max-width: none; } .fp-seite .formraster { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } /* Stammdaten als Reiter wie die Finanzplanung (Sebastian, 02.11.2026): Werte und Tabellen in voller Fensterbreite */ .sd-seite .raster-2 > :only-child, .sd-seite .werte, .sd-seite table { max-width: none; } .sd-seite .abschnitt > h2 { margin-top: 4px; } /* ---------- Eigentümer (Sebastian, 01.11.2026): Umschalter, Farbpunkte, Anteilsleisten, Karte „Eigentümer“ ---------- */ /* Sechs Eigentümerfarben als Variablen; der Farbschlüssel steht in eigentuemer-logik.js (EIGENTUEMER_FARBEN). Kontrast ist nur für Flächen nötig (Punkte, Balken) – Text steht immer daneben in der normalen Textfarbe. */ :root { --eig-petrol: var(--petrol); --eig-kupfer: var(--kupfer); --eig-violett: #6b4fa0; --eig-tuerkis: var(--tuerkis); --eig-oliv: #5f7a2a; --eig-rose: #a3425f; } @media (prefers-color-scheme: dark) { :root:not([data-thema="hell"]) { --eig-violett: #b79ae0; --eig-oliv: #a3c05a; --eig-rose: #e08aa6; } } :root[data-thema="dunkel"] { --eig-violett: #b79ae0; --eig-oliv: #a3c05a; --eig-rose: #e08aa6; } .eig-farbe-petrol { --eig: var(--eig-petrol); } .eig-farbe-kupfer { --eig: var(--eig-kupfer); } .eig-farbe-violett { --eig: var(--eig-violett); } .eig-farbe-tuerkis { --eig: var(--eig-tuerkis); } .eig-farbe-oliv { --eig: var(--eig-oliv); } .eig-farbe-rose { --eig: var(--eig-rose); } .eig-punkt { flex: none; display: inline-block; width: 10px; height: 10px; margin-right: 7px; border-radius: 50%; background: var(--eig, var(--text-leise)); vertical-align: 0; } /* „Alle Eigentümer“: Punkt aus mehreren Farben */ .eig-punkt.alle { background: conic-gradient(var(--eig-petrol) 0 25%, var(--eig-kupfer) 0 50%, var(--eig-violett) 0 75%, var(--eig-tuerkis) 0); } /* Umschalter neben dem Logo: wie ein Ausklappmenü der Kopfleiste, mit Punkt statt Symbol */ .eig-wahl .nav-menue-knopf { gap: 0; max-width: 220px; border: 1px solid var(--rand); border-radius: 999px; min-height: 34px; padding: 0 8px 0 10px; font-size: 13.5px; } .eig-wahl .nav-menue-knopf.eig-gewaehlt { border-color: var(--eig, var(--rand-stark)); } .eig-wahl .nav-menue-knopf > svg.nav-pfeil { margin-left: 4px; } .eig-wahl .nav-menue-liste { min-width: 240px; } .eig-wahl .nav-menue-liste .nav-eintrag { gap: 0; } .eig-wahl .nav-menue-liste .nav-eintrag .nav-text { flex: 1; } .eig-wahl .nav-menue-liste .nav-eintrag .nav-zusatz { margin-left: 10px; } @media (max-width: 1250px) { .eig-wahl .nav-menue-knopf .nav-text { display: none; } .eig-wahl .nav-menue-knopf { padding: 0 6px 0 8px; } .eig-wahl .nav-menue-knopf .eig-punkt { margin-right: 0; } } @media (max-width: 900px) { .leiste-kopf { flex: 1 1 auto; } .leiste-kopf .menue-knopf { margin-left: auto; } .kopfleiste.menue-offen .eig-wahl { width: auto; } .kopfleiste.menue-offen .eig-wahl .nav-menue-liste { position: absolute; width: max-content; min-width: 240px; max-width: min(340px, calc(100vw - 24px)); padding: 6px; border: 1px solid var(--rand); border-radius: 8px; background: var(--flaeche); box-shadow: 0 8px 24px rgba(31, 42, 48, .16); } } /* Anteilsleiste unter einer Kennzahl */ .eig-anteile { display: flex; gap: 2px; height: 6px; margin: 10px auto 0; max-width: 180px; border-radius: 3px; overflow: hidden; } .eig-anteile > span { display: block; min-width: 3px; background: var(--eig, var(--text-leise)); } /* Etikett am Objekt */ .eig-etikett { display: inline-flex; align-items: center; } .eig-etikett .eig-punkt { margin-right: 6px; } .kopf .leise .eig-punkt { margin-right: 6px; } /* Karte „Eigentümer“ auf der Übersicht: je Eigentümer eine Zeile als Schalter */ .eig-karte .karte-kopf { align-items: baseline; } .eig-zeilen { display: flex; flex-direction: column; gap: 4px; } .eig-zeile { display: grid; grid-template-columns: minmax(190px, 1.2fr) minmax(0, 2fr) minmax(110px, auto) 70px; gap: 12px; align-items: center; width: 100%; padding: 8px 8px; margin: 0; border: 0; border-radius: 8px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; } .eig-zeile:hover { background: rgba(31, 42, 48, .05); } .eig-zeile:focus-visible { outline: 2px solid var(--petrol); outline-offset: -2px; } .eig-name { display: flex; align-items: center; min-width: 0; } .eig-name-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; } .eig-name-text > b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; } .eig-name-text > .leise { font-size: 12px; } .eig-balken { position: relative; display: block; height: 14px; border-radius: 7px; overflow: hidden; background: color-mix(in srgb, var(--eig) 28%, var(--flaeche)); } .eig-schuld { position: absolute; left: 0; top: 0; bottom: 0; background: var(--eig); border-radius: 7px 0 0 7px; } .eig-werte { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.3; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 13.5px; } .eig-werte > .leise { font-size: 12px; } .eig-ek { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } .eig-summe { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rand); font-size: 13px; color: var(--text-leise); } .eig-hinweis { margin: 8px 0 0; font-size: 12.5px; } @media (max-width: 700px) { .eig-zeile { grid-template-columns: minmax(0, 1fr) 64px; grid-template-areas: "name ek" "balken balken" "werte werte"; gap: 6px 10px; } .eig-name { grid-area: name; } .eig-balken { grid-area: balken; } .eig-werte { grid-area: werte; flex-direction: row; justify-content: space-between; align-items: baseline; } .eig-ek { grid-area: ek; } } /* Pflegedialog unter Stammdaten */ .eig-form-zeile { position: relative; margin: 0 0 12px; padding: 10px 12px 12px; border: 1px solid var(--rand); border-radius: 8px; } .eig-form-zeile > legend { padding: 0 6px; font-size: 12.5px; } .eig-form-zeile > .knopf { margin-top: 10px; } /* Stammdaten › Eigentümer (Sebastian, 02.11.2026): Übersicht mit Kacheln je Eigentümer in zwei Gruppen */ .eig-kacheln { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } .eig-kachel { border-top: 3px solid var(--eig, var(--rand)); } .eig-kachel .karte-kopf h3 { display: flex; align-items: center; min-width: 0; } .eig-kachel .karte-kopf h3 a { color: inherit; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .eig-kachel .karte-kopf h3 a:hover { color: var(--petrol); } .eig-kachel .werte { max-width: none; } .eig-kachel .eig-profil { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--rand); } .kopf h1 .eig-punkt { width: 12px; height: 12px; margin-right: 10px; vertical-align: 1px; } /* Struktur und Organigramm (Sebastian, 02.11.2026) */ .og-figur figcaption { margin-top: 6px; font-size: 12.5px; } .organigramm { display: block; width: 100%; height: auto; font-family: var(--schrift); } .og-kasten:focus-visible { outline: none; } .og-kasten .og-punkt { fill: var(--eig, var(--text-leise)); } .og-kasten .og-name { fill: var(--text); font-size: 14px; font-weight: 600; } .og-kasten .og-art { fill: var(--text-leise); font-size: 12px; } .og-kante path { fill: none; stroke: var(--text-leise); stroke-width: 1.6; } .og-kante.gf path { stroke-dasharray: 5 4; } .og-kante text { fill: var(--text); font-size: 12px; font-weight: 600; } .og-kante.gf text { font-weight: 500; fill: var(--text-leise); } .eig-struktur-zeile { margin: 8px 0 0; font-size: 12.5px; } .og-gesellschaft legend { display: flex; align-items: center; font-weight: 600; font-size: 14px; } .og-titel { font-size: 12.5px; font-weight: 600; color: var(--text-leise); margin: 4px 0 6px; } .og-zeile { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; } .og-zeile select { flex: 1 1 240px; min-width: 0; } .og-anteil { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; } .og-anteil input { width: 72px; text-align: right; } .og-gf { display: flex; flex-wrap: wrap; gap: 4px 18px; } .og-gf .option { display: inline-flex; align-items: center; gap: 6px; } .og-gesellschaft legend .leise { margin-left: 5px; font-weight: 400; } /* Karte „Neuer Eintrag“ am Ende der Gruppen Gesellschaften und Personen */ .eig-kachel.eig-neu { border: 2px dashed var(--rand-stark); border-top-width: 2px; box-shadow: none; background: transparent; display: flex; align-items: center; justify-content: center; min-height: 160px; } .eig-neu-inhalt { text-align: center; } .eig-neu-inhalt .knopf { font-weight: 600; } .eig-neu-inhalt p { margin: 10px 0 0; font-size: 12.5px; max-width: 240px; } /* Organigramm als Beteiligungsdiagramm (02.11.2026): Personen als Pille mit Initiale, Gesellschaften als Kasten mit Farbbalken, Pfeile mit Prozent-Pille */ .og-kasten .og-avatar { fill: var(--eig, var(--text-leise)); } .og-kasten .og-initial { fill: var(--auf-petrol); font-size: 14px; font-weight: 700; } .og-kasten .og-name { fill: var(--text); font-size: 15px; font-weight: 600; } .og-kasten .og-art { fill: var(--text-leise); font-size: 12.5px; } .og-kasten .og-info { fill: var(--text); font-size: 12.5px; } .og-kasten .og-objekte { fill: var(--text-leise); } .og-pfeil path { fill: none; stroke: var(--text-leise); stroke-width: 1.8; } .og-spitze { fill: var(--text-leise); } .og-pille { fill: var(--petrol-hell); stroke: var(--petrol); stroke-width: 1; } .og-pille-text { fill: var(--petrol); font-size: 12px; font-weight: 700; } /* Organigramm (02.11.2026): farbiger Rahmen je Eintrag statt Balken, mittig, Kästchen als Navigation */ .og-figur { margin: 0; text-align: center; } .og-figur .organigramm { margin: 0 auto; } .og-figur figcaption { text-align: left; max-width: var(--lesebreite); margin-left: auto; margin-right: auto; } .og-kasten { cursor: pointer; } .og-kasten rect { fill: var(--flaeche); stroke: var(--eig, var(--rand-stark)); stroke-width: 2.5; transition: fill .15s ease, stroke-width .15s ease; } .og-kasten:hover rect, .og-kasten:focus-visible rect { fill: color-mix(in srgb, var(--eig, var(--petrol)) 12%, var(--flaeche)); stroke-width: 3.5; } .og-kasten .og-chevron { fill: var(--text-leise); font-size: 20px; font-weight: 600; } .og-kasten:hover .og-chevron, .og-kasten:focus-visible .og-chevron { fill: var(--eig, var(--petrol)); } /* Stammdaten › Eigentümer als Zeilenliste (Sebastian, 02.11.2026: „untereinander, Art einer Tabelle, aber nicht als Layout“) */ .eig-liste { display: flex; flex-direction: column; gap: 6px; } .eig-reihe { display: grid; grid-template-columns: minmax(200px, 1.5fr) minmax(100px, .8fr) minmax(96px, .7fr) minmax(96px, .7fr) minmax(110px, .8fr) minmax(180px, 1.6fr) auto; gap: 8px 14px; align-items: center; width: 100%; min-width: 0; max-width: none; padding: 10px 14px; margin: 0; } .eig-reihe.eig-kachel { border-top: 1px solid var(--rand); } .eig-reihe.eig-kachel.eig-farbe-petrol, .eig-reihe.eig-kachel.eig-farbe-kupfer, .eig-reihe.eig-kachel.eig-farbe-violett, .eig-reihe.eig-kachel.eig-farbe-tuerkis, .eig-reihe.eig-kachel.eig-farbe-oliv, .eig-reihe.eig-kachel.eig-farbe-rose { border-color: var(--eig); } .eig-reihe-kopf { padding: 0 14px; font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; } .eig-reihe .r { text-align: right; font-variant-numeric: tabular-nums; } .eig-sp { min-width: 0; font-size: 14px; } .eig-sp > .leise { display: block; font-size: 12px; } .eig-sp-name { display: flex; align-items: center; min-width: 0; } .eig-sp-name .eig-punkt { flex: none; } .eig-sp-name-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; } .eig-sp-name-text a { color: inherit; text-decoration: none; } .eig-sp-name-text a:hover b { color: var(--petrol); } .eig-sp-name-text .leise { font-size: 12px; } .eig-sp-struktur { font-size: 12.5px; line-height: 1.4; } .eig-sp-struktur .eig-struktur-zeile { margin: 0; } .eig-sp-struktur .eig-profil { display: block; color: var(--text-leise); margin-top: 2px; } .eig-sp-aktion { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .eig-reihe.eig-neu { display: flex; justify-content: center; border: 2px dashed var(--rand-stark); background: transparent; box-shadow: none; min-height: 0; padding: 12px 14px; } .eig-reihe.eig-neu .eig-neu-inhalt { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; text-align: left; } .eig-reihe.eig-neu .eig-neu-inhalt .leise { margin: 0; max-width: none; } @media (max-width: 1268px) { .eig-reihe-kopf { display: none; } .eig-reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); } .eig-sp-name, .eig-sp-struktur, .eig-sp-aktion { grid-column: 1 / -1; } .eig-sp-aktion { justify-content: flex-start; } .eig-reihe .r { text-align: left; } .eig-sp[data-sp]::before { content: attr(data-sp); display: block; font-size: 11.5px; color: var(--text-leise); text-transform: uppercase; letter-spacing: .02em; } } /* Zeilenliste: Aktionen untereinander, Spalten schmaler, Umbruch auf zwei Spalten schon unter 1100 px (kein waagerechter Ueberlauf bei 1024 px) */ .eig-reihe { grid-template-columns: minmax(170px, 1.4fr) minmax(88px, .7fr) minmax(84px, .6fr) minmax(84px, .6fr) minmax(96px, .7fr) minmax(150px, 1.5fr) minmax(130px, auto); } .eig-sp-aktion { flex-direction: column; align-items: stretch; justify-content: center; } .eig-sp-aktion .knopf { white-space: nowrap; text-align: center; } @media (max-width: 1368px) { .eig-reihe-kopf { display: none; } .eig-reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); } .eig-sp-name, .eig-sp-struktur, .eig-sp-aktion { grid-column: 1 / -1; } .eig-sp-aktion { flex-direction: row; justify-content: flex-start; align-items: center; } .eig-reihe .r { text-align: left; } .eig-sp[data-sp]::before { content: attr(data-sp); display: block; font-size: 11.5px; color: var(--text-leise); text-transform: uppercase; letter-spacing: .02em; } } /* Restschuld nicht erfasst: Balken ohne Füllung und gestrichelt */ .eig-balken.unbekannt { background: transparent; border: 1px dashed var(--rand-stark); box-sizing: border-box; } /* Darlehensübersicht auf der Objektseite (finanzierung.js, darlehenUebersichtHtml): Kennzahlen des Objekts, Zeitstrahl der Zinsbindungen wie auf der Übersicht und je Darlehen eine Karte mit Fristklasse, Kennzahlen und Tilgungsbalken */ .dl-objekt-kennzahlen { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 16px; } .dl-zeitstrahl { margin-bottom: 18px; padding: 12px 14px 4px; border: 1px solid var(--rand); border-radius: var(--radius); background: var(--flaeche-leise); --dz-name: 170px; } .dl-zeitstrahl .dz-summen { margin-bottom: 10px; } .dl-zeitstrahl .dz-strahl { padding-bottom: 26px; } .dl-liste { display: grid; gap: 14px; } .dl-karte { border: 1px solid var(--rand); border-left: 4px solid var(--rand-stark); border-radius: var(--radius); padding: 14px 16px; background: var(--flaeche); } .dl-karte.kurz, .dl-karte.variabel { border-left-color: var(--schlecht); } .dl-karte.mittel { border-left-color: #c98a12; } .dl-karte.lang { border-left-color: var(--gut); } :root[data-thema="dunkel"] .dl-karte.mittel { border-left-color: var(--warn); } @media (prefers-color-scheme: dark) { :root:not([data-thema="hell"]) .dl-karte.mittel { border-left-color: var(--warn); } } .dl-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px 16px; flex-wrap: wrap; margin-bottom: 12px; } .dl-titel h4 { margin: 0; font-size: 15px; } .dl-titel .leise { display: block; font-size: 13px; margin-top: 2px; } .dl-etiketten { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .dl-kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; margin-bottom: 12px; } .dl-kennzahlen .kennzahl { padding: 10px 12px; box-shadow: none; background: var(--flaeche-leise); } .dl-kennzahlen .kennzahl .wert { font-size: 18px; } .dl-kennzahlen .kennzahl .wert.fehlt { font-size: 14px; } .dl-tilgung-kopf { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13px; font-weight: 600; margin-bottom: 6px; } .dl-tilgung .balken { margin-bottom: 0; } .dl-tilgung .balken-fuell { background: linear-gradient(90deg, var(--petrol), var(--gut)); } .dl-hinweis { margin: 0; font-size: 13px; } .dl-details { margin-top: 12px; border-top: 1px dashed var(--rand); padding-top: 10px; } .dl-details > summary { font-size: 13.5px; color: var(--petrol); font-weight: 600; } .dl-details > summary::before { content: "▸ "; } .dl-details[open] > summary::before { content: "▾ "; } .dl-details .werte { margin-top: 8px; } .dl-details .fin-fristen { border-top: 0; padding-top: 0; } @media (max-width: 700px) { .dl-zeitstrahl { --dz-name: 0px; padding: 10px 10px 2px; } .dl-karte { padding: 12px; } .dl-kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .dl-kennzahlen .kennzahl { padding: 8px 6px; } .dl-kennzahlen .kennzahl .wert { font-size: 16px; white-space: normal; } } /* Gesellschafter- und Privatdarlehen (Sebastian, 02.11.2026): ohne Bankfrist – im Zeitstrahl als Zeile ohne Balken, an der Karte ein petrolfarbener Rand, damit sie sich von den Fristklassen der Bankdarlehen abheben */ .dz-zeile.intern .dz-ende { margin-left: 0; position: static; line-height: 22px; } .dl-karte.intern { border-left-color: var(--petrol); } .etikett.intern { background: var(--petrol-hell); border-color: transparent; color: var(--petrol-dunkel); } :root[data-thema="dunkel"] .etikett.intern { color: var(--petrol); } @media (prefers-color-scheme: dark) { :root:not([data-thema="hell"]) .etikett.intern { color: var(--petrol); } } .dl-aktionen { display: flex; gap: 6px; flex-wrap: wrap; } /* ---------- Mietverhältnis im Wohnungsdialog (Sebastian, 02.11.2026: „Mietverhältnis zuerst“) ---------- */ /* Etiketten mit den Vertragsmerkmalen, vier Kacheln wie auf der Hauptseite, Reiterleiste (.cockpit-reiter) und der Lebenslauf als senkrechter Zeitstrahl: Datum links, Marke auf der Linie, Text rechts. Vergangenes ist gefüllt, Kommendes hohl. */ .ml-merkmale { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; } .ml-chip-knopf { cursor: pointer; font: inherit; font-size: 12.5px; border: 1px solid currentColor; background: var(--warn-hell); } .ml-chip-knopf:hover, .ml-chip-knopf:focus-visible { filter: brightness(0.96); } .ml-kacheln { margin-bottom: 6px; } .ml-kacheln .wert-text { font-size: 17px; white-space: normal; } .einheit-reiter { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--rand); margin: 12px 0 18px; } .einheit-reiter button { font-size: 15px; padding: 10px 2px; } .ml-zeit { list-style: none; margin: 0; padding: 0; } .ml-zeit > li { display: grid; grid-template-columns: 92px 16px minmax(0, 1fr); gap: 10px; padding: 9px 0; position: relative; } .ml-zeit > li::before { content: ""; position: absolute; left: calc(92px + 10px + 7px); top: 0; bottom: 0; width: 2px; background: var(--rand-stark); } .ml-zeit > li:first-child::before { top: 18px; } .ml-zeit > li:last-child::before { bottom: calc(100% - 18px); } .ml-zeit-datum { font-size: 13px; color: var(--text-leise); font-variant-numeric: tabular-nums; text-align: right; padding-top: 2px; } .ml-zeit-marke { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--petrol); background: var(--petrol); justify-self: center; margin-top: 4px; position: relative; z-index: 1; } .ml-zeit > li.kommt .ml-zeit-marke, .ml-zeit > li.offen .ml-zeit-marke { background: var(--flaeche); } .ml-zeit-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .ml-zeit-text .unter { font-size: 12.5px; color: var(--text-leise); } .ml-einzug .ml-zeit-marke { border-color: var(--gut); } .ml-einzug:not(.kommt) .ml-zeit-marke { background: var(--gut); } .ml-erhoehung .ml-zeit-marke, .ml-staffel .ml-zeit-marke, .ml-moeglich .ml-zeit-marke { border-color: var(--kupfer); } .ml-erhoehung:not(.kommt) .ml-zeit-marke, .ml-staffel:not(.kommt) .ml-zeit-marke { background: var(--kupfer); } .ml-kuendigung .ml-zeit-marke { border-color: var(--warn); } .ml-kuendigung:not(.kommt) .ml-zeit-marke { background: var(--warn); } .ml-ende .ml-zeit-marke { border-color: var(--schlecht); } .ml-ende:not(.kommt) .ml-zeit-marke { background: var(--schlecht); } .ml-zeit > li.marke { padding: 4px 0; } .ml-zeit > li.marke .ml-zeit-marke { width: 16px; height: 16px; margin: 0; background: var(--text); border-color: var(--text); } .ml-zeit > li.marke .ml-zeit-text b { font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; } .ml-zeit > li.marke .ml-zeit-datum { font-weight: 600; color: var(--text); } @media (max-width: 700px) { .ml-zeit > li { grid-template-columns: 78px 16px minmax(0, 1fr); gap: 8px; } .ml-zeit > li::before { left: calc(78px + 8px + 7px); } } @media print { .einheit-reiter { display: none !important; } [data-epanel][hidden] { display: block !important; } } /* Handy: die vier Kacheln zweispaltig statt untereinander – sonst füllen sie den ganzen Bildschirm */ @media (max-width: 700px) { .ml-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .ml-kacheln .kennzahl { padding: 10px 8px; } .ml-kacheln .kennzahl .wert { font-size: 17px; } .ml-kacheln .wert-text { font-size: 15px; } } /* ---------- Mietverhältnis als eigene Seite (Sebastian, 02.11.2026: „Ja, eigene Seite“) ---------- */ /* Kopf wie Objekt- und Hauptseite; die Aktionen stehen rechts im Kopf statt im Dialogfuß, beim Bearbeiten unten als feste Leiste. */ .einheit-kopfaktionen { flex-wrap: wrap; justify-content: flex-end; } .einheit-inhalt { min-width: 0; } .einheit-fuss { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: 8px; padding: 12px 0; margin-top: 16px; background: var(--grund); border-top: 1px solid var(--rand); z-index: 5; } .einheit-seite fieldset { margin-bottom: 16px; } @media print { .einheit-kopfaktionen, .einheit-fuss { display: none !important; } } /* ---------- Einheitenliste mit Filter (Sebastian, 02.11.2026: „Einheitenliste mit Filter“) ---------- */ /* Filterchips mit Zähler und Suchfeld über der Liste; die Statusfarbe steht als Streifen am linken Rand der Zeile. */ .el-werkzeuge { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; padding-bottom: 12px; } .el-filter { display: flex; flex-wrap: wrap; gap: 6px; } .el-filter button { font: inherit; font-size: 13.5px; padding: 5px 12px; border: 1px solid var(--rand-stark); border-radius: 999px; background: var(--feld); color: var(--text); cursor: pointer; } .el-filter button:hover { border-color: var(--petrol); } .el-filter button[aria-pressed="true"] { background: var(--petrol-hell); border-color: var(--petrol); color: var(--petrol); font-weight: 600; } .el-filter .el-anzahl { margin-left: 6px; font-variant-numeric: tabular-nums; opacity: .85; } .el-suche input { min-width: 240px; max-width: 100%; } .el-tabelle .unter { display: block; } .el-tabelle tr.st-vermietet > td:first-child { box-shadow: inset 3px 0 0 var(--gut); } .el-tabelle tr.st-gekuendigt > td:first-child { box-shadow: inset 3px 0 0 var(--warn); } .el-tabelle tr.st-leer > td:first-child { box-shadow: inset 3px 0 0 var(--schlecht); } .el-tabelle tr.st-reserviert > td:first-child { box-shadow: inset 3px 0 0 var(--petrol); } .el-tabelle tr.st-unbekannt > td:first-child { box-shadow: inset 3px 0 0 var(--rand-stark); } @media (max-width: 700px) { .el-suche, .el-suche input { width: 100%; } } @media print { .el-werkzeuge { display: none !important; } .el-tabelle tr[hidden] { display: table-row !important; } } /* Zweite Kachelreihe der Objektseite „Laufender Betrieb“: Leerstand, Mieteingang des Monats, Cashflow (Sebastian, 02.11.2026) */ .kennzahlen-betrieb { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: -10px; } .kennzahlen-betrieb .zusatz { line-height: 1.35; } /* Übersicht „Immobilien“, Stufe 3 (02.11.2026): sechs Kacheln, Sortierung, rechte Spalte wie auf der Objektseite */ .kennzahlen-sechs { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .kennzahlen-sechs .zusatz a { color: var(--petrol); } .immo-sortierung label { white-space: nowrap; } .immo-sortierung { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 13.5px; color: var(--text-leise); } .immo-sortierung select { width: auto; min-width: 190px; font: inherit; padding: 5px 8px; border: 1px solid var(--rand); border-radius: var(--radius); background: var(--flaeche); color: var(--text); } .immobilien-seite .immo-naechster { margin: 0 0 10px; font-size: 13.5px; } /* Verlauf & Notizen (02.11.2026): Zeitleiste aus Notizen und Ereignissen */ .vl-karte .karte-inhalt { display: flex; flex-direction: column; gap: 12px; } .vl-formular { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--rand); border-radius: var(--radius); background: var(--flaeche-leise); } .vl-zeile { display: flex; flex-wrap: wrap; gap: 10px; } .vl-formular label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--text-leise); } .vl-formular select, .vl-formular input, .vl-formular textarea { font: inherit; padding: 6px 8px; border: 1px solid var(--rand); border-radius: var(--radius); background: var(--flaeche); color: var(--text); } .vl-formular textarea { width: 100%; box-sizing: border-box; resize: vertical; } .vl-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .vl-chip { font: inherit; font-size: 13px; padding: 4px 12px; border: 1px solid var(--rand); border-radius: 999px; background: var(--flaeche); color: var(--text); cursor: pointer; } .vl-chip.aktiv { color: var(--petrol); border-color: var(--petrol); font-weight: 600; } .vl-wv { align-items: flex-end; } .vl-schnell { display: flex; flex-wrap: wrap; gap: 4px; } .vl-zurueck-schalter { flex-direction: row; align-items: center; gap: 6px; margin-left: auto; font-size: 13px; color: var(--text-leise); } .vl-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .vl-eintrag { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 12px; padding: 10px 0; border-top: 1px solid var(--rand); align-items: start; } .vl-eintrag:first-child { border-top: 0; } .vl-tag { font-size: 13px; color: var(--text-leise); font-variant-numeric: tabular-nums; padding-top: 1px; } .vl-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .vl-text { margin-top: 3px; overflow-wrap: anywhere; } .vl-ereignis .vl-kopf b { font-weight: 500; color: var(--text-leise); } .vl-ereignis .vl-text { font-size: 13.5px; color: var(--text-leise); } .vl-notiz { border-left: 3px solid var(--kupfer); padding-left: 10px; } .vl-geplant { opacity: .8; } .vl-zurueck .vl-inhalt { text-decoration: line-through; opacity: .6; } .vl-aktionen { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; } @media (max-width: 700px) { .vl-eintrag { grid-template-columns: minmax(0, 1fr); gap: 4px; } .vl-aktionen { justify-content: flex-start; } } /* ---------- Kaufkandidaten: Filterleiste, Urteil, Kernzahlen ---------- Filterchips und Sortierung über der Kärtchenliste; auf jedem Kärtchen ein Urteil in einem Satz und vier Kernzahlen (Faktor, Brutto, Cashflow, DSCR). Farben tragen nie allein: Symbol und Text sagen dasselbe. */ .kk-leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 0 16px 14px; } .kk-chips { display: flex; flex-wrap: wrap; gap: 8px; } .kk-chip { font: inherit; font-size: 13px; padding: 6px 12px; min-height: 36px; border-radius: 999px; cursor: pointer; border: 1px solid var(--rand-stark); background: var(--flaeche); color: var(--text); } .kk-chip:hover { background: var(--kupfer-hell); } .kk-chip:focus-visible { outline: 2px solid var(--petrol); outline-offset: 2px; } .kk-chip[aria-pressed="true"] { background: var(--petrol); border-color: var(--petrol); color: var(--auf-petrol); font-weight: 600; } .kk-chip-zahl { margin-left: 4px; font-variant-numeric: tabular-nums; opacity: .8; } .kk-sortierung { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-leise); } .kk-sortierung select { font: inherit; font-size: 13px; min-height: 36px; padding: 4px 8px; border: 1px solid var(--rand-stark); border-radius: 8px; background: var(--feld); color: var(--text); } .kk-sortierung select:focus-visible { outline: 2px solid var(--petrol); outline-offset: 2px; } .kk-leer { text-align: center; padding: 28px 16px; } .kk-leer h3 { margin: 0 0 6px; } .kk-leer p { max-width: 52ch; margin: 0 auto; } .kk-urteil { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; line-height: 1.3; border: 1px solid transparent; background: var(--flaeche-leise); color: var(--text-leise); } .kk-urteil.gut { background: var(--gut-hell); color: var(--auf-gut-hell); } .kk-urteil.warn { background: var(--warn-hell); color: var(--auf-warn-hell); } .kk-urteil.schlecht { background: var(--schlecht-hell); color: var(--schlecht); } .kk-urteil-symbol { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; background: var(--text-leise); color: var(--flaeche); } .kk-urteil.gut .kk-urteil-symbol { background: var(--gut); color: var(--auf-status); } .kk-urteil.warn .kk-urteil-symbol { background: var(--warn); color: var(--auf-status); } .kk-urteil.schlecht .kk-urteil-symbol { background: var(--schlecht); color: var(--auf-status); } .kk-kernzahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } .kk-kern { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 2px; border-radius: 8px; background: var(--flaeche-leise); text-align: center; min-width: 0; } .kk-kern span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-leise); } .kk-kern b { font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; } .kk-kern.gut b { color: var(--gut); } .kk-kern.warn b { color: var(--warn); } .kk-kern.schlecht b { color: var(--schlecht); } .kk-naechster { font-size: 12px; color: var(--text-leise); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .kk-naechster b { color: var(--text); } @media (max-width: 520px) { .kk-leiste { padding: 0 12px 12px; } .kk-sortierung { width: 100%; } .kk-sortierung select { flex: 1; min-width: 0; } .kk-kern b { font-size: 13px; } } /* Kärtchen ohne Foto: schmaler Preisstreifen statt leerem 4:3-Feld; das Preisschild liegt dann flach statt schräg */ .kk-bild.kk-bild-leer { aspect-ratio: auto; display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 8px 16px; background: var(--petrol-hell); border-bottom: 1px solid var(--rand); } .kk-bild-leer .kk-preisschild { position: static; transform: none; width: 100%; flex-direction: row; justify-content: space-between; padding: 0; background: none; color: var(--petrol); box-shadow: none; font-size: 15px; } .kk-kein-foto { font-size: 12.5px; color: var(--text-leise); } /* Handy: die sechs Kennzahlen zu zweit nebeneinander statt je eine volle Zeile (sonst beginnt die Liste erst nach vier Bildschirmen) */ @media (max-width: 520px) { .kennzahlen-ankauf { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; } .kennzahlen-ankauf .kennzahl { padding: 10px 8px; } .kennzahlen-ankauf .kennzahl .wert { font-size: 17px; white-space: normal; } .kennzahlen-ankauf .bez { min-height: 0; } .kk-bild.kk-bild-leer { padding: 8px 12px; } } /* Bereichskopf (03.11.2026): Name des Bereichs, Kennzahlen und Reiter über dem Seiteninhalt, z. B. Hausverwaltung */ #bereichskopf:empty { display: none; } .bereichskopf { background: var(--flaeche); border-bottom: 1px solid var(--rand); padding: 20px 38px 0; } .bereich-titelzeile { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 14px; } .bereich-name { font-size: 22px; font-weight: 650; color: var(--petrol); letter-spacing: -.01em; } .bereich-aktionen { display: flex; flex-wrap: wrap; gap: 6px; } .bereichskopf .kennzahlen { margin-bottom: 16px; } .bereichskopf .kennzahl { background: var(--grund); } .bereich-reiter { display: flex; flex-wrap: wrap; gap: 2px 22px; } .bereich-reiter-eintrag { display: inline-flex; align-items: center; gap: 6px; padding: 9px 2px; color: var(--text-leise); text-decoration: none; border-bottom: 3px solid transparent; font-size: 15px; margin-bottom: -1px; } .bereich-reiter-eintrag:hover { color: var(--text); } .bereich-reiter-eintrag.aktiv { color: var(--petrol); border-bottom-color: var(--petrol); font-weight: 600; } #bereichskopf:not(:empty) + main { padding-top: 24px; } @media (max-width: 700px) { .bereichskopf { padding: 14px 14px 0; } .bereich-reiter { gap: 2px 14px; overflow-x: auto; flex-wrap: nowrap; } .bereich-reiter-eintrag { white-space: nowrap; } .bereichskopf .kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 700px) { .bereichskopf .kennzahl { padding: 9px 6px; } .bereichskopf .kennzahl .wert { font-size: 18px; } .bereichskopf .kennzahl .zusatz { font-size: 12px; } } /* Bestandsseite im neuen Design (03.11.2026): Plakette auf dem Foto, Hauptzahlen unter dem Titel, Rest aufklappbar, Filter-Chips */ .kk-plakette { position: absolute; left: 10px; bottom: 10px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--flaeche); color: var(--text); border: 1px solid var(--rand); } .kk-plakette.leer { color: var(--schlecht); border-color: var(--schlecht); } .kk-mehr { margin-top: 2px; } .kk-mehr > summary { cursor: pointer; font-size: 13.5px; color: var(--petrol); padding: 4px 0; } .kk-mehr[open] > summary { margin-bottom: 4px; } .immo-werkzeuge { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 14px; } .immo-werkzeuge .immo-sortierung { margin: 0; } .immo-chips { display: flex; flex-wrap: wrap; gap: 8px; } .immo-chip { font: inherit; font-size: 14px; padding: 6px 14px; border: 1px solid var(--rand-stark); border-radius: 999px; background: var(--flaeche); color: var(--text); cursor: pointer; } .immo-chip:hover { border-color: var(--petrol); } .immo-chip.aktiv { color: var(--petrol); border-color: var(--petrol); font-weight: 600; } .immo-chip-zahl { margin-left: 4px; color: var(--text-leise); font-variant-numeric: tabular-nums; } @media (max-width: 700px) { .immo-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; } .immo-chip { white-space: nowrap; flex: none; } } /* Objektseite im neuen Design (03.11.2026): Foto und Plakette im Kopf, sechs Hauptkacheln, weitere Kennzahlen aufklappbar */ .objekt-kopf { justify-content: flex-start; gap: 18px; } .objekt-kopf > .knopfleiste { margin-left: auto; } .objekt-kopfbild { width: 132px; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; flex: none; border: 1px solid var(--rand); } .objekt-kopfbild .titelbild { display: block; width: 100%; height: 100%; object-fit: cover; } .kk-plakette.inline { position: static; display: inline-block; vertical-align: middle; margin-left: 8px; font-size: 12px; font-weight: 600; } .kennzahlen-objekt { margin-bottom: 10px; } .kennzahlen-mehr { margin: 0 0 18px; } .kennzahlen-mehr > summary { cursor: pointer; font-size: 13.5px; color: var(--petrol); padding: 4px 0; width: fit-content; } .kennzahlen-mehr .kennzahlen-betrieb { margin-top: 8px; } /* Übersicht „Immobilien“, Stufe 3 (02.11.2026): sechs Kacheln, Sortierung, rechte Spalte wie auf der Objektseite */ .kennzahlen-sechs { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .kennzahlen-sechs .zusatz a { color: var(--petrol); } .immo-sortierung { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 13.5px; color: var(--text-leise); } .immo-sortierung select { font: inherit; padding: 5px 8px; border: 1px solid var(--rand); border-radius: var(--radius); background: var(--flaeche); color: var(--text); } .immobilien-seite .immo-naechster { margin: 0 0 10px; font-size: 13.5px; } /* Übersicht im Stil der Bestandsseite (03.11.2026): kompakte Objektkarten über den Zinsbindungen */ .uebersicht-objekte { margin: 0 0 20px; } .uebersicht-objekte-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 0 10px; } .uebersicht-objekte-kopf h2 { margin: 0; font-size: 18px; } .uebersicht-objekte-kopf a { font-size: 13.5px; color: var(--petrol); } .immo-karte-kompakt .kk-bild { aspect-ratio: 16 / 9; } .immo-karte-kompakt .kk-inhalt { gap: 8px; } .uebersicht-objekte .immo-karten { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } /* Rand der Kacheln: in Hell kräftiger als --rand-stark (Durchsicht 04.11.2026: „im Hellmodus kaum die Ränder erkennbar“) */ :root { --kachel-rand: #aaa293; } :root[data-thema="dunkel"] { --kachel-rand: #4d5d66; } @media (prefers-color-scheme: dark) { :root:not([data-thema="hell"]) { --kachel-rand: #4d5d66; } } /* Karten gleich groß, auch ohne Foto; Rendite als Preisschild am Foto, Kaltmiete und Kosten im Vergleich (Sebastian, 04.11.2026) */ .immo-karten { align-items: stretch; } .immo-karte { display: flex; flex-direction: column; } .immo-karte .kk-inhalt { flex: 1; } .immo-karte .titelbild.leer { background: var(--petrol-hell); } .kk-vergleich { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 8px 0; border-top: 1px solid var(--rand); border-bottom: 1px solid var(--rand); } .kk-vergleich > div { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; } .kk-vergleich dt { color: var(--text-leise); } .kk-vergleich dd { margin: 0; font-variant-numeric: tabular-nums; } .kk-vergleich .kk-ueberschuss { margin-top: 3px; padding-top: 4px; border-top: 1px dashed var(--rand); font-size: 15px; font-weight: 600; } .kk-vergleich .kk-ueberschuss dt { color: var(--text); font-weight: 500; } /* Ganze Karte klickbar (Sebastian, 04.11.2026): die Anschrift-Verknuepfung wird ueber die Karte gespannt; Links, Aufklapp-Zahlen und Menues liegen darueber. */ .immo-karte { position: relative; cursor: pointer; } .immo-karte h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; } .immo-karte .immo-link, .immo-karte .kk-mehr { position: relative; z-index: 2; } .immo-karte:hover { border-color: var(--petrol); } .immo-karte:focus-within { outline: 2px solid var(--petrol); outline-offset: 2px; } .immo-karte h3 a:focus-visible { outline: none; } /* Detailseiten ruhiger und klarer (Sebastian, 04.11.2026): Kennzahlen gleichmaessig, Reiter als Segmentleiste, ruhige Abschnittstitel */ .kennzahlen-objekt { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .kennzahlen-objekt > * { height: 100%; } @media (min-width: 1768px) { .kennzahlen-objekt { grid-template-columns: repeat(6, minmax(0, 1fr)); } } @media (max-width: 560px) { .kennzahlen-objekt { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } } .objekt-reiter, .einheit-reiter { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; margin: 6px 0 20px; border: 1px solid var(--rand); border-radius: 12px; background: var(--flaeche-leise); max-width: 100%; } .objekt-reiter button, .einheit-reiter button { padding: 8px 16px; border: 0; border-radius: 9px; font-size: 14.5px; color: var(--text-leise); } .ue-reiter a { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 9px; font-size: 14.5px; color: var(--text-leise); text-decoration: none; } .ue-reiter a::after { content: '↗'; margin-left: 5px; font-size: 12px; } .ue-reiter a:hover { color: var(--text); background: var(--flaeche); } .ue-reiter { margin-top: 0; } .ue-tabliste { display: contents; } .ba-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 6px 24px; margin: 6px 0 14px; } .ba-spalten h3, .ck-karte .karte-inhalt > h3 { margin: 14px 0 8px; font-size: 15px; } .ck-karte .ck-zeile-knopf a { text-decoration: none; } .ck-karte .ck-zeile-knopf a:hover { text-decoration: underline; } .ue-reiter button, .ue-reiter a { color: var(--text); } .ue-reiter button.aktiv { color: var(--petrol); } .objekt-reiter button:hover, .einheit-reiter button:hover { color: var(--text); background: var(--flaeche); } .objekt-reiter button.aktiv, .einheit-reiter button.aktiv { background: var(--flaeche); color: var(--petrol); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 0 0 1px var(--rand); border-bottom-color: transparent; } .objekt-inhalt > .abschnitt > h2 { font-size: 20px; letter-spacing: -.01em; margin-bottom: 14px; } .objekt-inhalt > .abschnitt > h2::before { display: none; } .objekt-inhalt > .abschnitt + .abschnitt { margin-top: 28px; } /* Aufklappbare Bloecke im Reiter Vermietung (Sebastian, 04.11.2026: ueberladen, einfacher) */ .klapp-liste { display: grid; gap: 10px; margin-top: 16px; } .abschnitt > .klapp-liste { margin-top: 0; } .klapp { border: 1px solid var(--rand); border-radius: 12px; background: var(--flaeche); } .klapp > summary { display: flex; align-items: baseline; gap: 12px; padding: 14px 18px; cursor: pointer; list-style: none; } .klapp > summary::-webkit-details-marker { display: none; } .klapp > summary::before { content: "\25B8"; color: var(--petrol); transition: transform .15s; } .klapp[open] > summary::before { transform: rotate(90deg); } .klapp > summary b { font-size: 15.5px; } .klapp > summary .leise { font-size: 13px; margin-left: auto; text-align: right; } .klapp > summary:hover { background: var(--flaeche-leise); border-radius: 12px; } .klapp-inhalt { padding: 0 14px 14px; display: grid; gap: 14px; } .klapp-inhalt > .karte { margin: 0; box-shadow: none; } /* --------------------------------------------------------------------------- Portfolio-Cockpit der Übersicht (04.11.2026, Vorbild „Armin Asset“ – Struktur übernommen, Schwächen nicht): Halbkreis-Anzeigen für die Beleihung, Kachelzeile, Tabelle je Eigentümer bzw. Objekt mit Summenzeile, Detaildialog und die Zinsbindungen nach Jahr. Helles Thema über die Farbtafel (die dunkle Darstellung kommt von selbst mit), Schrift nicht unter 12 px, Tabellen scrollen im eigenen Rahmen, jede Farbe trägt auch Zahl oder Wort. --------------------------------------------------------------------------- */ .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .ck-karte { width: 100%; min-width: 0; margin-bottom: 14px; } .ck-karte .karte-inhalt { padding-bottom: 12px; } .ck-hinweise { margin: 0 0 18px; font-size: 13px; } /* Anzeigen: links groß der gewählte Bestand, rechts die kleinen je Eigentümer bzw. Objekt */ .ck-anzeigen { display: grid; grid-template-columns: minmax(200px, 250px) minmax(0, 1fr); gap: 14px 20px; align-items: start; margin-bottom: 16px; } .ck-anzeigen-klein { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; } .ck-anzeige { padding: 10px 8px 9px; border: 1px solid var(--kachel-rand, var(--rand-stark)); border-radius: var(--radius); background: var(--flaeche); text-align: center; } .ck-anzeige svg { display: block; width: 100%; max-width: 132px; height: auto; margin: 0 auto; } .ck-anzeige.gross svg { max-width: 210px; } .ck-bogen-grund { fill: none; stroke: var(--rand); stroke-width: 9; stroke-linecap: round; } .ck-bogen { fill: none; stroke: var(--ck-farbe, var(--petrol)); stroke-width: 9; stroke-linecap: round; } .ck-anzeige.stufe-gut, .zd-zeile.stufe-gut { --ck-farbe: var(--gut); } .ck-anzeige.stufe-warn, .zd-zeile.stufe-warn { --ck-farbe: var(--warn); } .ck-anzeige.stufe-schlecht, .zd-zeile.stufe-schlecht { --ck-farbe: var(--schlecht); } .ck-anzeige.stufe-unbekannt, .zd-zeile.stufe-unbekannt { --ck-farbe: var(--text-leise); } /* Der Prozentwert sitzt in der Öffnung des Bogens (der Bogen endet bei 52 von 58 Einheiten Höhe) */ .ck-anzeige-wert { margin-top: -30px; font-size: 20px; font-weight: 600; line-height: 1; color: var(--ck-farbe, var(--text)); } .ck-anzeige.gross .ck-anzeige-wert { margin-top: -46px; font-size: 30px; } .ck-anzeige-titel { margin-top: 10px; font-size: 13.5px; font-weight: 600; line-height: 1.3; } .ck-anzeige.gross .ck-anzeige-titel { margin-top: 16px; font-size: 15px; } .ck-anzeige-zeile { font-size: 12.5px; line-height: 1.35; margin-top: 2px; } .ck-kacheln { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin-bottom: 14px; } /* Tabelle: feste erste Spalte, Zahlen rechts, Summenzeile abgesetzt */ .ck-tabelle-rahmen { margin-top: 2px; } .ck-tabelle, .ck-einheiten { width: 100%; border-collapse: collapse; font-size: 13.5px; } .ck-tabelle th, .ck-tabelle td, .ck-einheiten th, .ck-einheiten td { padding: 8px 10px; border-bottom: 1px solid var(--rand); vertical-align: middle; } .ck-tabelle thead th, .ck-einheiten thead th { background: var(--flaeche-leise); font-size: 12.5px; font-weight: 600; text-align: left; white-space: nowrap; } .ck-tabelle thead th[title] { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; } .ck-tabelle tbody th, .ck-einheiten tbody th { text-align: left; font-weight: 500; } .ck-tabelle tbody th { position: sticky; left: 0; z-index: 1; background: var(--flaeche); min-width: 170px; } .ck-tabelle.gestreift tbody tr:nth-child(even) th { background: var(--zeile-wechsel); } .ck-tabelle tfoot th, .ck-tabelle tfoot td { font-weight: 600; border-top: 2px solid var(--rand-stark); border-bottom: 0; background: var(--flaeche); } .ck-tabelle tfoot th { position: sticky; left: 0; z-index: 1; } .ck-tabelle .etikett { font-variant-numeric: tabular-nums; } .ck-zeile-knopf { display: block; width: 100%; padding: 2px 0; border: 0; background: none; font: inherit; color: var(--petrol); text-align: left; cursor: pointer; } .ck-zeile-knopf > b { display: flex; align-items: center; font-weight: 600; } .ck-zeile-knopf > .leise { display: block; font-size: 12.5px; } .ck-zeile-knopf:hover > b { text-decoration: underline; } .ck-zeile-knopf:focus-visible { outline: 2px solid var(--petrol); outline-offset: 2px; border-radius: 4px; } /* Detaildialog eines Objekts */ dialog.ck-dialog { width: min(1040px, calc(100vw - 40px)); } .ck-dialog-oben { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 14px 18px; align-items: start; margin-bottom: 16px; } .ck-dialog-kacheln { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin-bottom: 0; } .ck-dialog-titel { margin: 8px 0 8px; } .ck-dialog-etiketten { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } .ck-dialog .dialog-fuss .knopf { text-decoration: none; } /* Zinsbindungen nach Jahr */ .zinsdashboard { width: 100%; min-width: 0; } .zd-annahmen { display: flex; flex-wrap: wrap; gap: 10px 14px; } .zd-annahmen .feld.klein > span { margin-bottom: 2px; font-size: 12px; } .zd-annahmen .feld.klein input { width: 96px; } .zd-kacheln { margin-bottom: 14px; } .zd-zeilen { display: grid; gap: 8px; margin: 0 0 12px; } .zd-zeile { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; gap: 6px 14px; align-items: center; padding: 8px 12px; border: 1px solid var(--rand); border-radius: 8px; background: var(--flaeche-leise); } .zd-jahr { display: flex; flex-direction: column; min-width: 0; } .zd-jahr b { font-size: 15px; } .zd-jahr .leise { font-size: 12.5px; } .zd-spur { height: 14px; border-radius: 7px; background: var(--grund); border: 1px solid var(--rand); overflow: hidden; } .zd-balken { height: 100%; border-radius: 7px; background: var(--ck-farbe, var(--petrol)); } .zd-werte { display: flex; gap: 18px; } .zd-werte > span { display: flex; flex-direction: column; align-items: flex-end; font-size: 13.5px; white-space: nowrap; } .zd-werte > span > .leise { font-size: 12px; } .zd-hinweis { grid-column: 1 / -1; font-size: 12.5px; } /* Kachelzeile nach Armin Asset: neun Kacheln in einer Reihe (ab etwa 1150 px), Beschriftung klein oben links, Zahl groß */ .ck-kacheln { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; } .ck-kacheln .kennzahl { text-align: center; padding: 10px 12px; } .ck-kacheln .kennzahl .bez { font-size: 12.5px; text-align: center; } .ck-kacheln .kennzahl .wert { font-size: 19px; text-align: center; font-variant-numeric: tabular-nums; } .ck-kacheln .kennzahl .zusatz { text-align: center; white-space: normal; font-size: 12px; } .ck-kacheln .kennzahl.ck-vermoegen .wert { color: var(--gut); } .ck-kacheln .etikett { font-size: 16px; padding: 1px 9px; } /* Neu, alt, leer als drei Zahlen mit Farbe (und per Titel und Screenreader-Text erklärt) */ .ck-drei { white-space: nowrap; font-variant-numeric: tabular-nums; } .ck-drei b { font-weight: 600; } .ck-drei .gut { color: var(--gut); } .ck-drei .alt { color: var(--text); } .ck-drei .leer { color: var(--schlecht); } /* Bauzins-Voreinstellungen im Zinsdashboard */ .zd-voreinstellung { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end; } .zd-voreinstellung .knopf.aktiv { background: var(--petrol); color: #fff; border-color: var(--petrol); } @media (max-width: 760px) { .ck-anzeigen { grid-template-columns: minmax(0, 1fr); } .ck-anzeige.gross svg { max-width: 180px; } .ck-anzeigen-klein { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } .ck-tabelle tbody th { min-width: 140px; } .ck-dialog-oben { grid-template-columns: minmax(0, 1fr); } .zd-zeile { grid-template-columns: minmax(0, 1fr); } .zd-werte { justify-content: space-between; } .zd-werte > span { align-items: flex-start; } } /* Gesundheit (Menue Privates, 06.11.2026): Kacheln, Verlaufsdiagramme (SVG), Tabellen */ .gs-kacheln { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .gs-kachel .zusatz { white-space: normal; } .gs-tendenz.besser { color: var(--gut); } .gs-tendenz.schlechter { color: var(--schlecht); } .gs-diagramme { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; } .gs-diagramm { margin: 0; padding: 10px 12px 8px; background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); } .gs-diagramm figcaption { font-size: 13px; font-weight: 600; margin-bottom: 6px; } .gs-diagramm svg { display: block; width: 100%; height: auto; } .gs-balken { fill: var(--petrol); } .gs-balken.gs-teil-0 { fill: var(--petrol-dunkel); } .gs-balken.gs-teil-1 { fill: var(--kupfer); } .gs-balken.gs-teil-2 { fill: var(--petrol-hell); } .gs-linie { fill: none; stroke: var(--petrol); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; } .gs-punkt { fill: var(--kupfer); } .gs-ziel { stroke: var(--kupfer); stroke-width: 1; stroke-dasharray: 4 3; } .gs-achse { font-size: 9px; fill: var(--text-leise); } .gs-legende { display: flex; gap: 12px; font-size: 11.5px; color: var(--text-leise); margin-top: 4px; } .gs-legende i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; } .gs-legende i.gs-teil-0 { background: var(--petrol-dunkel); } .gs-legende i.gs-teil-1 { background: var(--kupfer); } .gs-legende i.gs-teil-2 { background: var(--petrol-hell); } .gs-tabelle td.zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } @media (max-width: 600px) { .gs-diagramme { grid-template-columns: 1fr; } } /* Gesundheit: Richtwerte und Rahmenfarbe je Stufe (06.11.2026) */ .gs-kachel.stufe-gut { border-color: var(--gut); box-shadow: inset 0 0 0 1px var(--gut); } .gs-kachel.stufe-warn { border-color: var(--warn); box-shadow: inset 0 0 0 1px var(--warn); } .gs-kachel.stufe-schlecht { border-color: var(--schlecht); box-shadow: inset 0 0 0 1px var(--schlecht); } .gs-stufe.gut { color: var(--gut); font-weight: 600; } .gs-stufe.warn { color: var(--warn); font-weight: 600; } .gs-stufe.schlecht { color: var(--schlecht); font-weight: 600; } .gs-tendenz.warn { color: var(--warn); } /* Gesundheit: Kacheln als Schaltflaechen, Verlauf im Dialog (06.11.2026) */ button.gs-kachel { font: inherit; color: inherit; cursor: pointer; display: block; width: 100%; text-align: center; } button.gs-kachel:focus-visible { outline: 2px solid var(--kupfer-dunkel); outline-offset: 2px; } dialog.gs-dialog { width: min(820px, calc(100vw - 32px)); } dialog.gs-dialog .gs-diagramm { margin-bottom: 10px; } dialog.gs-dialog .gs-diagramm svg { max-height: 320px; } .gs-zeitraum { margin-bottom: 12px; } .gs-zeitraum .knopf[aria-pressed="true"] { background: var(--petrol); color: #fff; border-color: var(--petrol); } .gs-legende i.gs-ziel-legende { background: none; border-top: 2px dashed var(--kupfer); height: 0; width: 14px; vertical-align: 3px; } /* ========================================================================================================================== Gesundheit: modernes, kompaktes Erscheinungsbild (Sebastian, 06.11.2026: grafisch moderner, mehr zum Thema, Bilder, Animationen; danach: „auf einem Fensterinhalt begrenzt“). Aufbau: schlanker Kopf, flacher Hero, Reiter; die Übersicht ist ein Raster aus vier Spalten (Gruppen) à vier Kacheln und füllt ab 1100 px Breite genau den Rest des Fensters (Höhe setzt gesundheit.js, `anpassen`). Bilder sind Inline-SVG (gesundheit-grafik.js). Bewegung nur über transform, stroke und width – nie über opacity auf Text –, damit die Kontrastprüfung zu jedem Zeitpunkt dieselben Farben sieht. Bei „weniger Bewegung“ setzt die globale Regel alle Animationen auf Ende. ========================================================================================================================== */ @keyframes gs-hoch { from { transform: translateY(12px); } } @keyframes gs-ring { from { stroke-dasharray: 0 100; } } @keyframes gs-zeichnen { from { stroke-dashoffset: 1; } } @keyframes gs-breit { from { width: 0; } } @keyframes gs-fuellen { from { transform: scaleY(0); } } @keyframes gs-flaeche-ein { from { opacity: 0; } } @keyframes gs-schlag { 0%, 50%, 100% { transform: scale(1); } 12% { transform: scale(1.22); } 36% { transform: scale(1.1); } } @keyframes gs-ekg { to { stroke-dashoffset: -1; } } @keyframes gs-wolke { from { transform: translateX(-50px); } to { transform: translateX(50px); } } @keyframes gs-funkeln { 0%, 100% { opacity: .25; } 50% { opacity: 1; } } @keyframes gs-glut { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.1); opacity: 1; } } .gs-sym { width: 1em; height: 1em; flex: none; } .gesundheit .abschnitt > h2::before { display: none; } .gesundheit .abschnitt > h2 { display: flex; align-items: center; gap: 10px; } .gs-gruppen-symbol { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 10px; background: var(--petrol-hell); color: var(--petrol); } .gs-gruppen-symbol .gs-sym { width: 18px; height: 18px; } [role="tabpanel"][hidden] { display: none !important; } /* ---- Kopf in einer Zeile ---- */ .gs-kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 8px; } .gs-kopf-text { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 14px; min-width: 0; } .gesundheit .gs-kopf h1 { margin: 0; font-size: 22px; line-height: 1.2; } .gs-kopf .leise { font-size: 13px; } .gs-status { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gs-kopf .knopf { white-space: nowrap; } /* ---- Hero: Morgendämmerung, Bereitschaftsring, schlagendes Herz (flach) ---- */ .gs-hero { --schlag: 1s; position: relative; overflow: hidden; isolation: isolate; margin: 0 0 8px; border-radius: 16px; color: #f4f1ea; background: #0d2a33; box-shadow: 0 8px 22px rgba(8, 28, 35, .2); animation: gs-hoch .6s ease-out backwards; } .gs-hero-bild { position: absolute; inset: 0; } .gs-hero-bild svg { display: block; width: 100%; height: 100%; } .gs-hero-schleier { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7, 26, 33, .9) 0%, rgba(7, 26, 33, .64) 55%, rgba(7, 26, 33, .12) 100%); } .gs-hero-inhalt { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(130px, 200px); gap: 18px; align-items: center; padding: 10px 22px; } .gs-hero h2, .gs-hero p, .gs-hero small, .gs-hero strong, .gs-hero li { color: inherit; } .gs-hero-ring { position: relative; width: 84px; height: 84px; } .gs-ring { display: block; } .gs-hero-ring .gs-ring { width: 100%; height: 100%; } .gs-ring-grund { stroke: currentColor; stroke-width: 3; opacity: .18; } .gs-ring-wert { stroke-width: 3; animation: gs-ring 1.2s cubic-bezier(.22, .8, .3, 1) .15s both; } .gs-hero-ring .gs-ring-wert { stroke: #cfe3e8; stroke-width: 3.2; } .hero-gut .gs-hero-ring .gs-ring-wert { stroke: #8ad6ad; } .hero-warn .gs-hero-ring .gs-ring-wert { stroke: #e8bf72; } .hero-schlecht .gs-hero-ring .gs-ring-wert { stroke: #f2938d; } .gs-hero-zahl { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; font-size: 26px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; } .gs-hero-zahl small { margin-top: 3px; font-size: 10.5px; font-weight: 400; opacity: .9; } .gs-hero-text h2 { margin: 0 0 2px; font-size: 19px; line-height: 1.2; font-weight: 600; } .gs-hero-text p { margin: 0; font-size: 13px; opacity: .92; } .gs-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; } .gs-chips li { display: inline-flex; align-items: center; gap: 6px; padding: 2px 11px 2px 8px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; background: rgba(255, 255, 255, .12); font-size: 12px; } .gs-chips .gs-sym { width: 14px; height: 14px; opacity: .9; } .gs-chips li.stufe-gut { border-color: #8ad6ad; } .gs-chips li.stufe-warn { border-color: #e8bf72; } .gs-chips li.stufe-schlecht { border-color: #f2938d; } .gs-hero-herz { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "herz bpm" "herz klein" "ekg ekg"; column-gap: 10px; align-items: center; text-align: left; } .gs-herz { grid-area: herz; width: 38px; height: 38px; fill: #ee7d76; filter: drop-shadow(0 0 10px rgba(238, 125, 118, .55)); transform-origin: center; animation: gs-schlag var(--schlag) ease-in-out infinite; } .gs-bpm { grid-area: bpm; align-self: end; font-size: 20px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; } .gs-hero-herz small { grid-area: klein; align-self: start; opacity: .9; } .gs-ekg { grid-area: ekg; width: 100%; height: 24px; margin-top: 2px; } .gs-ekg path { stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .gs-ekg-grund { stroke: rgba(244, 241, 234, .3); } .gs-ekg-licht { stroke: #ee7d76; animation: gs-ekg calc(var(--schlag) * 3) linear infinite; } .gs-stern { opacity: .5; animation: gs-funkeln 3.2s ease-in-out infinite; } .gs-stern-2 { animation-duration: 4.1s; animation-delay: 1.1s; } .gs-stern-3 { animation-duration: 2.6s; animation-delay: 2s; } .gs-sonne-glut { transform-box: fill-box; transform-origin: center; animation: gs-glut 7s ease-in-out infinite; } .gs-wolke { animation: gs-wolke 40s ease-in-out infinite alternate; } .gs-wolke-2 { animation-duration: 56s; animation-direction: alternate-reverse; } /* ---- Reiter ---- */ .gs-tabs { display: flex; align-items: center; gap: 2px; margin: 0 0 8px; overflow-x: auto; border-bottom: 1px solid var(--rand); } .gs-tab { appearance: none; margin: 0 0 -1px; padding: 7px 14px; border: 0; border-bottom: 3px solid transparent; background: none; font: inherit; font-weight: 600; color: var(--text-leise); cursor: pointer; white-space: nowrap; } .gs-tab:hover { color: var(--text); } .gs-tab[aria-selected="true"] { color: var(--petrol); border-bottom-color: var(--kupfer); } .gs-tab:focus-visible { outline: 2px solid var(--kupfer-dunkel); outline-offset: -2px; border-radius: 6px; } .gs-tabs-hinweis { margin-left: auto; padding-left: 14px; font-size: 12px; white-space: nowrap; } /* ---- Übersicht: vier Spalten (Gruppen) à vier Kacheln, füllt den Rest des Fensters ---- */ .gs-uebersicht { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; min-height: 380px; } .gs-gruppe { display: flex; flex-direction: column; gap: 4px; min-height: 0; margin: 0; } .gs-gruppe > h2 { height: 30px; margin: 0; font-size: 14px; line-height: 1.2; } .gs-bilanz { display: flex; align-items: center; gap: 4px; height: 22px; margin: 0; overflow: hidden; } .gs-pille { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; } .gs-pille.gut { background: var(--gut-hell); color: var(--gut); } .gs-pille.warn { background: var(--warn-hell); color: var(--warn); } .gs-pille.schlecht { background: var(--schlecht-hell); color: var(--schlecht); } .gs-uebersicht .gs-kacheln { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(3, minmax(0, 1fr)); flex: 1; gap: 6px; min-height: 0; margin: 0; } /* ---- Kachel: Titel, Wert mit Kurzinfo, Stufe und Richtwert; Minilinie nur auf hohen Fenstern ---- */ button.gs-kachel { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "titel symbol" "wert symbol" "ideal ideal" "zweit zweit" "spark spark"; align-content: center; column-gap: 8px; row-gap: 1px; min-height: 0; padding: 5px 12px; overflow: hidden; border-radius: 14px; text-align: left; transition: transform .18s ease, box-shadow .18s ease; animation: gs-hoch .5s ease-out backwards; } .gs-uebersicht .gs-gruppe:nth-child(2) .gs-kachel { animation-delay: .05s; } .gs-uebersicht .gs-gruppe:nth-child(3) .gs-kachel { animation-delay: .1s; } .gs-uebersicht .gs-gruppe:nth-child(4) .gs-kachel { animation-delay: .15s; } button.gs-kachel:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(31, 42, 48, .14), inset 0 0 0 1px var(--gs-farbe, var(--rand-stark)); } button.gs-kachel.stufe-gut { --gs-farbe: var(--gut); background: var(--gut-hell); } button.gs-kachel.stufe-warn { --gs-farbe: var(--warn); background: var(--warn-hell); } button.gs-kachel.stufe-schlecht { --gs-farbe: var(--schlecht); background: var(--schlecht-hell); } button.gs-kachel .bez { grid-area: titel; overflow: hidden; font-size: 12px; font-weight: 600; text-align: left; text-overflow: ellipsis; white-space: nowrap; } .gs-symbol { grid-area: symbol; position: relative; display: grid; place-items: center; align-self: center; width: 38px; height: 38px; color: var(--gs-farbe, var(--petrol)); } .gs-symbol .gs-ring { position: absolute; inset: 0; width: 100%; height: 100%; } .gs-symbol .gs-ring-grund { stroke: var(--text-leise); opacity: .22; } .gs-symbol .gs-ring-wert { stroke: var(--gs-farbe, var(--petrol)); } .gs-symbol .gs-sym { position: relative; width: 18px; height: 18px; } .gs-wertzeile { grid-area: wert; display: flex; align-items: baseline; gap: 6px; min-width: 0; } button.gs-kachel .wert { margin: 0; font-size: 22px; font-weight: 600; line-height: 1.15; text-align: left; white-space: nowrap; } .gs-pfeil { font-size: 11px; } .gs-pfeil.besser { color: var(--gut); } .gs-pfeil.schlechter { color: var(--schlecht); } .gs-meta { min-width: 0; overflow: hidden; font-size: 11.5px; color: var(--text-leise); text-overflow: ellipsis; white-space: nowrap; } .gs-idealzeile { grid-area: ideal; display: flex; gap: 6px; min-width: 0; font-size: 11.5px; } .gs-stufe { flex: none; font-weight: 600; } .gs-stufe.gut { color: var(--gut); } .gs-stufe.warn { color: var(--warn); } .gs-stufe.schlecht { color: var(--schlecht); } .gs-ideal-text { min-width: 0; overflow: hidden; color: var(--text-leise); text-overflow: ellipsis; white-space: nowrap; } .gs-spark { grid-area: spark; display: none; width: 100%; height: 26px; margin-top: 4px; overflow: visible; } .gs-spark polyline { stroke: var(--gs-farbe, var(--petrol)); stroke-width: 1.8; stroke-dasharray: 1; animation: gs-zeichnen 1.2s ease-out .25s both; } .gs-spark circle { fill: var(--gs-farbe, var(--petrol)); } @media (min-height: 940px) { .gs-spark { display: block; } } /* ---- Tagesbilanz (Reiter): Schlafphasen, Batterie, Bewegung ---- */ .gs-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 14px; } .gs-feld { padding: 14px 18px 18px; border: 1px solid var(--rand); border-radius: 16px; background: var(--flaeche); box-shadow: var(--schatten); animation: gs-hoch .5s ease-out backwards; } .gs-feld:nth-child(2) { animation-delay: .08s; } .gs-feld:nth-child(3) { animation-delay: .16s; } .gs-feld h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 14px; } .gs-feld h3 .gs-sym { width: 18px; height: 18px; color: var(--petrol); } .gs-feld-wert { font-size: 32px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; } .gs-feld-wert small { font-size: 13px; font-weight: 400; color: var(--text-leise); } .gs-feld p { margin: 6px 0 0; } .gs-phasen { display: flex; height: 16px; margin: 12px 0 10px; overflow: hidden; border-radius: 8px; background: var(--rand); } .gs-ph { display: block; height: 100%; width: var(--w); animation: gs-breit .9s cubic-bezier(.22, .8, .3, 1) .2s both; } .gs-ph-tief { background: #2f6f80; } .gs-ph-rem { background: #c07a45; } .gs-ph-leicht { background: #7fb7c6; } .gs-ph-wach { background: #d6a24a; } ul.gs-legende { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; list-style: none; } ul.gs-legende li { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-leise); } .gs-ph-punkt { display: inline-block; width: 10px; height: 10px; border-radius: 50%; } .gs-batterie-zeile { display: flex; align-items: center; gap: 18px; } .gs-batterie { width: 58px; height: 96px; flex: none; } .gs-batterie-rahmen { stroke: var(--text-leise); stroke-width: 2.5; } .gs-batterie-pol { fill: var(--text-leise); } .gs-batterie-fuell { transform-box: fill-box; transform-origin: bottom; animation: gs-fuellen 1s cubic-bezier(.22, .8, .3, 1) .2s both; } .gs-batterie-fuell.gut { fill: var(--gut); } .gs-batterie-fuell.warn { fill: var(--warn); } .gs-batterie-fuell.schlecht { fill: var(--schlecht); } .gs-batterie-marke { stroke: var(--text); stroke-width: 1.6; stroke-dasharray: 3 2; } .gs-bar { height: 12px; margin: 14px 0; overflow: hidden; border-radius: 6px; background: var(--rand); } .gs-bar > i { display: block; height: 100%; width: var(--w); border-radius: 6px; background: linear-gradient(90deg, var(--petrol), var(--kupfer)); animation: gs-breit 1s cubic-bezier(.22, .8, .3, 1) .2s both; } .gs-bar.voll > i { background: var(--gut); } .gs-mini { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; } .gs-mini li { display: flex; align-items: center; gap: 8px; font-size: 13px; } .gs-mini .gs-sym { width: 16px; height: 16px; color: var(--petrol); } /* ---- Diagramm im Dialog: Fläche, gezeichnete Linie, Punkte mit Tooltip ---- */ .gs-linie { stroke-dasharray: 1; animation: gs-zeichnen 1.1s ease-out both; } .gs-flaeche { fill: url(#gs-fg); stroke: none; animation: gs-flaeche-ein .9s ease-out .3s both; } .gs-fg-oben { stop-color: var(--petrol); stop-opacity: .34; } .gs-fg-unten { stop-color: var(--petrol); stop-opacity: 0; } .gs-punkt { transition: r .12s ease; } .gs-punkt:hover { r: 3.6; } /* ---- Herzfrequenzzonen und Aktivitäten ---- */ .gs-zonen { display: grid; gap: 14px; margin: 12px 0 18px; } .gs-zonenzeile { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 4px 14px; align-items: center; } .gs-zonen-sport { font-size: 13px; font-weight: 600; } .gs-zonenband { display: flex; height: 16px; overflow: hidden; border-radius: 8px; } .gs-z { display: block; height: 100%; width: var(--w); animation: gs-breit .9s cubic-bezier(.22, .8, .3, 1) .2s both; } .gs-z1 { background: #7fb7c6; } .gs-z2 { background: #4fae8b; } .gs-z3 { background: #d6b84a; } .gs-z4 { background: #e08a3c; } .gs-z5 { background: #cc4b43; } .gs-zonen-legende { grid-column: 2; font-size: 12px; color: var(--text-leise); } .gs-art { display: inline-flex; align-items: center; gap: 7px; } .gs-art .gs-sym { width: 17px; height: 17px; color: var(--petrol); } .gs-quelle { margin: 10px 0 0; font-size: 12px; } /* ---- Schmalere Fenster: die Seite fließt normal und scrollt ---- */ @media (max-width: 1099px) { .gs-uebersicht { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; } .gs-uebersicht .gs-kacheln { grid-template-rows: none; } button.gs-kachel { min-height: 82px; } .gs-spark { display: block; } } @media (max-width: 860px) { .gs-hero-inhalt { grid-template-columns: auto minmax(0, 1fr); padding: 14px 18px; } .gs-hero-herz { grid-column: 1 / -1; grid-template-columns: auto auto minmax(80px, 1fr); grid-template-areas: "herz bpm klein" "ekg ekg ekg"; } .gs-tabs-hinweis { display: none; } } @media (max-width: 640px) { .gs-uebersicht { grid-template-columns: 1fr; } .gs-kopf { flex-wrap: wrap; } .gs-hero-inhalt { grid-template-columns: 1fr; gap: 12px; padding: 14px 16px; } .gs-hero-text h2 { font-size: 17px; } .gs-zonenzeile { grid-template-columns: 1fr; } .gs-zonen-legende { grid-column: 1; } } /* ---- Doppelkachel (zwei Kennzahlen in einer Kachel) und Umschalter im Verlaufsdialog (06.11.2026: 12 Kacheln) ---- */ .gs-zweitzeile { grid-area: zweit; display: flex; align-items: baseline; gap: 6px; min-width: 0; margin-top: 3px; padding-top: 3px; border-top: 1px dashed var(--rand-stark); font-size: 11.5px; } .gs-zweitwert { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; } .gs-zweittitel { flex: none; color: var(--text-leise); } .gs-dot { flex: none; align-self: center; width: 8px; height: 8px; border-radius: 50%; background: var(--text-leise); opacity: .45; } .gs-dot.gut { background: var(--gut); opacity: 1; } .gs-dot.warn { background: var(--warn); opacity: 1; } .gs-dot.schlecht { background: var(--schlecht); opacity: 1; } .gs-dialog-leisten { display: flex; flex-wrap: wrap; gap: 4px 18px; } /* ---- Körperbereich links: Figur mit den Werten, BMI-Skala (Sebastian, 06.11.2026: „sportlicher, die Werte in dem Menschen, Fettanteil als Füllstand“) ---- */ @media (min-width: 1100px) { .gs-uebersicht { grid-template-columns: minmax(0, 1fr) repeat(3, minmax(0, 1fr)); } } .gs-koerper-datum { margin-left: auto; padding-left: 8px; font-size: 11.5px; color: var(--text-leise); white-space: nowrap; } .gs-koerper .gs-bilanz { flex-wrap: nowrap; } .gs-koerper-karte { position: relative; flex: 1; min-height: 0; display: flex; justify-content: center; gap: 12px; } .gs-koerper-figur { position: relative; flex: none; height: 100%; aspect-ratio: 387 / 540; } .gs-mensch, .gs-training-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } /* Füllstand für das Körperfett: Farbe nach Stufe, Wellen an der Oberfläche */ .gs-fuell { --ff: var(--petrol); } .gs-fuell.gut { --ff: var(--gut); } .gs-fuell.warn { --ff: var(--warn); } .gs-fuell.schlecht { --ff: var(--schlecht); } .gs-bild { pointer-events: none; } .gs-fuellstand, .gs-welle { fill: var(--ff); opacity: .32; } .gs-welle-2 { opacity: .26; } .gs-welle { animation: gs-welle 5s linear infinite; } .gs-welle-2 { animation-duration: 8s; animation-direction: reverse; } @keyframes gs-welle { to { transform: translateX(-100px); } } .gs-lungen { transform-box: fill-box; transform-origin: 50% 60%; animation: gs-atem var(--atem, 4.5s) ease-in-out infinite; } @keyframes gs-atem { 0%, 100% { transform: scale(.94); } 50% { transform: scale(1.07); } } .gs-zone { fill: var(--zf, var(--petrol)); opacity: .4; } .gs-zone.gut { --zf: var(--gut); } .gs-zone.warn { --zf: var(--warn); } .gs-zone.schlecht { --zf: var(--schlecht); } .gs-horizont { stroke: var(--text); stroke-width: 1; stroke-dasharray: 3 3; opacity: .55; } .gs-skala { stroke: var(--text-leise); stroke-width: 1; } .gs-norm { fill: var(--gut); } /* Werte in der Figur: Zahl mit Rand in der Flächenfarbe, damit sie auf jeder Füllung lesbar bleibt */ .gs-m-zahl, .gs-m-klein { fill: var(--text); text-anchor: middle; stroke: none; } .gs-m-zahl { font-size: 20px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; } .gs-m-mittel { font-size: 16px; } .gs-m-wert { font-size: 12.5px; font-weight: 700; } .gs-m-klein { font-size: 11px; font-weight: 600; } .gs-m-skala { fill: var(--text-leise); font-size: 11px; font-weight: 500; text-anchor: start; } .gs-m-skala-kopf { font-weight: 700; } /* Glas-Chips: halbtransparente Fläche, feiner Rahmen und Leuchten in der Stufenfarbe, Akzentbalken oben */ .gs-platte { fill: var(--flaeche); fill-opacity: .8; stroke: color-mix(in srgb, var(--text-leise) 60%, transparent); stroke-width: 1; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .32)); transition: fill-opacity .2s ease, filter .2s ease; } .gs-akzent { fill: var(--text-leise); pointer-events: none; } .gs-platte.gut { fill: color-mix(in srgb, var(--gut) 16%, var(--flaeche)); stroke: var(--gut); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--gut) 65%, transparent)); } .gs-platte.warn { fill: color-mix(in srgb, var(--warn) 16%, var(--flaeche)); stroke: var(--warn); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--warn) 65%, transparent)); } .gs-platte.schlecht { fill: color-mix(in srgb, var(--schlecht) 18%, var(--flaeche)); stroke: var(--schlecht); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--schlecht) 70%, transparent)); } .gs-akzent.gut { fill: var(--gut); } .gs-akzent.warn { fill: var(--warn); } .gs-akzent.schlecht { fill: var(--schlecht); } .gs-hot:hover .gs-platte, .gs-hot:focus-visible .gs-platte { fill-opacity: 1; } .gs-m-name { font-size: 8.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; fill: var(--text-leise); } .gs-m-tag { font-size: 9.5px; } .gs-m-tag-zahl { font-size: 14.5px; } .gs-m-waage { stroke: none; font-size: 18px; } .gs-hot { cursor: pointer; outline: none; } .gs-hit { fill: transparent; stroke: transparent; pointer-events: all; transition: fill .15s ease; } .gs-hot:hover .gs-hit { fill: color-mix(in srgb, var(--petrol) 14%, transparent); } .gs-hot:focus-visible .gs-hit { fill: color-mix(in srgb, var(--petrol) 14%, transparent); stroke: var(--kupfer-dunkel); stroke-width: 2; } /* BMI-Skala unter der Figur */ .gs-bmi { margin-top: 6px; } .gs-bmi-kopf { display: flex; align-items: baseline; gap: 8px; font-size: 12px; white-space: nowrap; } .gs-bmi-kopf strong { font-size: 13px; } .gs-bmi-ideal { margin-left: auto; font-size: 11px; color: var(--text-leise); } .gs-bmi-skala { position: relative; display: flex; height: 10px; margin: 6px 0 3px; } .gs-bmi-skala i { display: block; height: 100%; } .gs-bmi-s1 { width: 14%; border-radius: 5px 0 0 5px; background: #6fa8c6; } .gs-bmi-s2 { width: 26%; background: #4fae8b; } .gs-bmi-s3 { width: 20%; background: #d6b84a; } .gs-bmi-s4 { width: 40%; border-radius: 0 5px 5px 0; background: #cc4b43; } .gs-bmi-marke { position: absolute; top: -4px; left: var(--lage); width: 4px; height: 18px; margin-left: -2px; border-radius: 2px; background: var(--text); box-shadow: 0 0 0 2px var(--flaeche); animation: gs-marke 1s cubic-bezier(.22, .8, .3, 1) .3s backwards; } @keyframes gs-marke { from { left: 0; } } .gs-bmi-ticks { position: relative; height: 12px; font-size: 10px; color: var(--text-leise); } .gs-bmi-ticks span { position: absolute; top: 0; transform: translateX(-50%); } .gs-bmi-ticks span:first-child { transform: none; } .gs-bmi-ticks span:last-child { transform: translateX(-100%); } @media (max-width: 1099px) { .gs-koerper { grid-column: 1 / -1; } .gs-koerper-karte { flex: none; height: 420px; } } .gs-m-name.gs-m-tag { font-size: 7.6px; letter-spacing: .04em; } /* ---- Aktivität & Training: Röntgenausschnitt mit Chips, Wochenband (Sebastian, 06.11.2026) ---- */ .gs-training-karte { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 4px; } .gs-training-figur { position: relative; flex: 1; min-height: 0; } /* Oben (abgeschnittener Kopf) und unten (Becken) weich ausblenden */ .gs-training-svg .gs-bild { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%); } .gs-svg-schlaf .gs-bild { -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 84%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0, #000 84%, transparent 100%); } .gs-svg-schlaf .gs-zone { opacity: .22; } .gs-training-svg .gs-m-zahl { font-size: 26px; } .gs-training-svg .gs-m-name { font-size: 10.5px; } .gs-training-svg .gs-m-klein:not(.gs-m-name) { font-size: 12px; } .gs-training-svg .gs-m-zahl.gs-m-text { font-size: 17px; } .gs-spur { fill: color-mix(in srgb, var(--text-leise) 28%, transparent); pointer-events: none; } .gs-fort { fill: var(--text-leise); pointer-events: none; } .gs-fort.gut { fill: var(--gut); } .gs-fort.warn { fill: var(--warn); } .gs-fort.schlecht { fill: var(--schlecht); } .gs-puls { fill: #ff4d4d; opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; animation: gs-puls var(--schlag, 1s) ease-in-out infinite; pointer-events: none; } @keyframes gs-puls { 0%, 100% { transform: scale(.7); opacity: 0; } 15% { transform: scale(1.25); opacity: .45; } 40% { transform: scale(.9); opacity: .1; } } .gs-woche { flex: none; width: 100%; height: auto; overflow: visible; } .gs-w-kopf { font-size: 9px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; fill: var(--text-leise); } .gs-w-achse { stroke: var(--rand-stark); stroke-width: 1; } .gs-w-tag { font-size: 10px; fill: var(--text-leise); text-anchor: middle; } .gs-w-schritte { fill: var(--text-leise); opacity: .85; } .gs-w-schritte.gut { fill: var(--gut); } .gs-w-schritte.warn { fill: var(--warn); } .gs-w-schritte.schlecht { fill: var(--schlecht); } .gs-w-pkt { fill: var(--text-leise); } .gs-w-intens { fill: var(--petrol); } .gs-w-ziel { stroke: var(--text); stroke-width: 1.2; stroke-dasharray: 2 2; opacity: .7; } .gs-zuletzt { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 8px; margin: 0; font-size: 11px; line-height: 1.3; } @media (max-width: 1099px) { .gs-training { grid-column: 1 / -1; } .gs-training-karte { flex: none; } .gs-training-figur { flex: none; height: 440px; } } @media (prefers-reduced-motion: reduce) { .gs-puls { animation: none; } } /* ---- Reiter „Blutwerte“: Tabellen je Gruppe, Stufenfarbe je Messwert, Formular (Sebastian, 06.11.2026) ---- */ .gs-blut-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 8px; } .gs-blut-kopf .gs-bilanz { height: auto; flex-wrap: wrap; overflow: visible; } .gs-blut-gruppe { margin: 12px 0 0; } .gs-blut-gruppe > h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 0 0 4px; font-size: 14px; } .gs-blut-gbilanz { font-size: 12px; font-weight: 400; } .gs-blut-gbilanz .warn { color: var(--warn); font-weight: 600; } .gs-blut-gbilanz .schlecht { color: var(--schlecht); font-weight: 600; } /* Tabellen: gleiche Spalten in jeder Gruppe – links Wert und Zielwert, rechts die Termine gleich breit */ .gs-blut { table-layout: fixed; width: 100%; min-width: 520px; } .gs-blut .gs-bc-name { width: 34%; } .gs-blut thead th { font-size: 12px; font-weight: 600; vertical-align: bottom; } .gs-blut td, .gs-blut th[scope="row"] { vertical-align: middle; white-space: normal; } .gs-blut th[scope="row"].gs-blut-name { font-weight: 600; text-align: left; } .gs-blut-name small { font-weight: 400; font-size: 12px; } .gs-blut-ziel { display: block; margin-top: 2px; color: var(--text-leise); font-size: 12px; } .gs-blut-legende { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0 0 6px; padding: 0; list-style: none; font-size: 12px; } .gs-blut-legende li { display: inline-flex; align-items: center; gap: 6px; } .gs-blut-punkt { display: inline-block; width: 10px; height: 10px; border-radius: 3px; } .gs-blut-punkt.gut { background: var(--gut); } .gs-blut-punkt.warn { background: var(--warn); } .gs-blut-punkt.schlecht { background: var(--schlecht); } /* Messwerte: Balken links = Lage zum Zielwert; beim letzten Wert färbt die Tendenz den Hintergrund */ .gs-blut-wert { position: relative; padding-left: 12px; font-variant-numeric: tabular-nums; border-left: 4px solid var(--rand-stark); } .gs-blut-wert b { font-size: 15px; } /* Info-Symbol an der Wertbezeichnung und der gemeinsame Hinweistext (Overflow) */ .gs-info { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; border: 1px solid var(--text-leise); border-radius: 50%; background: transparent; color: var(--text-leise); font: italic 700 11px/1 Georgia, serif; vertical-align: middle; cursor: help; } .gs-info:hover, .gs-info:focus-visible, .gs-info[aria-expanded="true"] { background: var(--petrol); border-color: var(--petrol); color: #fff; outline: none; } .gs-info:focus-visible { box-shadow: 0 0 0 2px var(--flaeche), 0 0 0 4px var(--kupfer-dunkel); } .gs-info-demo { cursor: default; width: 16px; height: 16px; } .gs-info-fenster { position: fixed; z-index: 5000; max-width: min(380px, calc(100vw - 16px)); padding: 12px 14px; border: 1px solid var(--rand-stark); border-radius: 10px; background: var(--flaeche); color: var(--text); box-shadow: 0 10px 28px rgba(0, 0, 0, .28); font-size: 13px; line-height: 1.4; pointer-events: none; } .gs-info-fenster strong { font-size: 14px; } .gs-info-fenster h4 { margin: 8px 0 0; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-leise); } .gs-info-fenster p { margin: 2px 0 0; } .gs-info-fenster .gs-info-ziel { margin-top: 8px; font-weight: 600; } .gs-info-fenster .gs-info-ziel span { display: inline-block; margin-right: 6px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-leise); } .gs-blut-wert.gut { border-left-color: var(--gut); } .gs-blut-wert.warn { border-left-color: var(--warn); } .gs-blut-wert.schlecht { border-left-color: var(--schlecht); } .gs-blut-wert.letzt.t-besser { background: var(--gut-hell); color: var(--gut); } .gs-blut-wert.letzt.t-schlechter { background: var(--schlecht-hell); color: var(--schlecht); } .gs-blut-wert.letzt.t-gleich { background: var(--flaeche-leise); } .gs-blut-pfeil { margin-left: 6px; font-size: 12px; } .gs-blut-leer { color: var(--text-leise); } /* Liniendiagramm nach Organ */ .gs-blut-diagramm { margin: 18px 0 0; } .gs-blut-dia-steuer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 4px 0 8px; } .gs-blut-dia-steuer label { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; } .gs-blut-serien { display: flex; flex-wrap: wrap; gap: 6px; } .gs-blut-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid var(--rand-stark); border-radius: 999px; background: var(--flaeche); color: var(--text); font-size: 12.5px; cursor: pointer; } .gs-blut-chip i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); } .gs-blut-chip[aria-pressed="false"] { opacity: .5; } .gs-blut-chip[aria-pressed="false"] i { background: transparent; box-shadow: inset 0 0 0 2px var(--c); } .gs-blut-chip:focus-visible { outline: 2px solid var(--kupfer-dunkel); outline-offset: 2px; } .gs-blut-dia-flaeche { border: 1px solid var(--rand); border-radius: 12px; background: var(--flaeche); padding: 8px; } .gs-diagramm { display: block; width: 100%; height: auto; max-height: 420px; } .gs-dia-netz { stroke: var(--rand); stroke-width: 1; } .gs-dia-achse { fill: var(--text-leise); font-size: 11px; } .gs-dia-ziel { stroke: var(--gut); stroke-width: 1.6; stroke-dasharray: 6 4; } .gs-dia-zieltext { fill: var(--gut); font-size: 11.5px; font-weight: 600; } .gs-dia-band { fill: var(--gut); opacity: .16; } .gs-dia-ueber { fill: var(--schlecht); opacity: .07; } .gs-dia-linie { fill: none; stroke: var(--c); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; } .gs-dia-punkt { fill: var(--c); stroke: var(--flaeche); stroke-width: 1.5; } .gs-dia-punkt.schlecht { stroke: var(--schlecht); stroke-width: 2.5; } .gs-dia-punkt.warn { stroke: var(--warn); stroke-width: 2.5; } .gs-dia-wert { fill: var(--text); font-size: 11.5px; font-weight: 600; } .gs-ser-0 { --c: #3b8fd4; } .gs-ser-1 { --c: #e0703f; } .gs-ser-2 { --c: #3fae6b; } .gs-ser-3 { --c: #a56bd1; } .gs-ser-4 { --c: #d4ac2a; } .gs-ser-5 { --c: #22a8b5; } .gs-ser-6 { --c: #d9558a; } .gs-ser-7 { --c: #8aa03a; } .gs-ser-8 { --c: #9a8571; } .gs-ser-9 { --c: #6670e0; } .gs-blut-dialog { max-width: min(720px, 94vw); } .gs-blut-dialog .dialog-inhalt { max-height: 70vh; overflow-y: auto; } .gs-blut-datum { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-weight: 600; } .gs-blut-feldgruppe { margin: 0 0 10px; padding: 8px 10px; border: 1px solid var(--rand); border-radius: 10px; } .gs-blut-feldgruppe legend { padding: 0 6px; font-size: 13px; font-weight: 600; } .gs-blut-felder { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 14px; } .gs-blut-feld { display: grid; grid-template-columns: minmax(0, 1fr) 84px; align-items: center; gap: 8px; font-size: 13px; } .gs-blut-feld input { width: 100%; text-align: right; } .gs-blut-pdfzeile { margin: 0 0 10px; padding: 8px 10px; border: 1px solid var(--rand); border-radius: 10px; } .gs-blut-pdfzeile details { margin-top: 6px; } .gs-blut-pdfzeile summary { cursor: pointer; font-size: 13px; } @media (max-width: 480px) { .gs-blut-feld { grid-template-columns: minmax(0, 1fr) 76px; } } /* Steuerliche Waechter (steuergrenzen.js): 15-%-Grenze auf der Objektseite, Nebenentgelte-Quote auf der Uebersicht */ .sg-kennzahlen { margin-bottom: 12px; } .sg-balken { margin-bottom: 12px; } .sg-balken.sg-gut .balken-fuell { background: var(--gut); } .sg-balken.sg-warn .balken-fuell { background: var(--warn); } .sg-balken.sg-schlecht .balken-fuell { background: var(--schlecht); } .sg-hinweise { margin: 10px 0 0; padding-left: 18px; font-size: 12.5px; } .sg-hinweise li { margin-bottom: 4px; } .sg-gewst { margin-bottom: 18px; } .sg-gewst .karte-inhalt p svg { width: 16px; height: 16px; vertical-align: -3px; } /* --------------------------------------------------------------------------- Angleichung an die Übersicht (11.11.2026, Sebastian: „Nimm das Design der Übersicht und passe die anderen Unterseiten an“): Alle Reiterleisten der Unterseiten (Bereichskopf, Vertragsmanagement, Finanzplanung, Stammdaten, Ankaufsprüfung) im Segmentstil der Übersicht – abgerundeter Rahmen, aktiver Reiter als helle Kachel. Die Objekt- und Wohnungsseiten hatten ihn schon. --------------------------------------------------------------------------- */ .bereich-reiter, .unternav.vertrag-reiter, .unternav.cockpit-reiter:not(.objekt-reiter) { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; margin: 6px 0 14px; width: fit-content; max-width: 100%; border: 1px solid var(--rand); border-radius: 12px; background: var(--flaeche-leise); backdrop-filter: none; } .unternav.vertrag-reiter, .unternav.cockpit-reiter:not(.objekt-reiter) { margin-left: 0; margin-right: 0; margin-bottom: 20px; } .bereich-reiter-eintrag, .unternav.vertrag-reiter a, .unternav.cockpit-reiter:not(.objekt-reiter) button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; margin: 0; border: 0; border-radius: 9px; font-size: 14.5px; font-weight: 500; color: var(--text); background: none; text-decoration: none; } .bereich-reiter-eintrag:hover, .unternav.vertrag-reiter a:hover, .unternav.cockpit-reiter:not(.objekt-reiter) button:hover { background: var(--flaeche); } .bereich-reiter-eintrag.aktiv, .unternav.vertrag-reiter a.aktiv, .unternav.cockpit-reiter:not(.objekt-reiter) button.aktiv { background: var(--flaeche); color: var(--petrol); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 0 0 1px var(--rand); } .bereichskopf .bereich-reiter { margin-bottom: 14px; } @media (max-width: 700px) { .bereich-reiter { display: flex; overflow-x: auto; flex-wrap: nowrap; } .bereich-reiter-eintrag { white-space: nowrap; padding: 8px 12px; } } /* Abschnittstitel überall ohne Akzentbalken, wie auf der Übersicht und den Detailseiten */ .abschnitt > h2 { font-size: 20px; letter-spacing: -.01em; margin-bottom: 14px; } .abschnitt > h2::before { display: none; } /* --------------------------------------------------------------------------- Feinschliff (11.11.2026): Filterleisten und Kandidaten-Ansichten im Segmentstil, „Was noch fehlt“, eingeklappte Steuer-Wächter, Tabellen als Karten auf dem Handy und Druckansicht des Wertberichts. --------------------------------------------------------------------------- */ .immo-chips, .aufgaben-filter, dialog:not(.ankauf-dialog-popup) .ankauf-dialog-navigation { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--rand); border-radius: 12px; background: var(--flaeche-leise); max-width: 100%; } .immo-chip, .aufgaben-filter .knopf, dialog:not(.ankauf-dialog-popup) .ankauf-dialog-navigation .knopf { min-height: 0; padding: 7px 14px; border: 0; border-radius: 9px; background: none; box-shadow: none; font-size: 14.5px; font-weight: 500; color: var(--text); } .immo-chip:hover, .aufgaben-filter .knopf:hover, dialog:not(.ankauf-dialog-popup) .ankauf-dialog-navigation .knopf:hover { background: var(--flaeche); border: 0; } .immo-chip.aktiv, .aufgaben-filter .knopf.primaer, dialog:not(.ankauf-dialog-popup) .ankauf-dialog-navigation .knopf.aktiv { background: var(--flaeche); color: var(--petrol); font-weight: 600; border: 0; box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 0 0 1px var(--rand); } .ck-fehlt { margin-bottom: 14px; border-left: 4px solid var(--warn); } .ck-fehlt .ck-hinweise { margin: 0; } .ck-fehlt ul { margin: 0; padding-left: 18px; } .ck-fehlt li { margin: 3px 0; } .ue-waechter { margin: 0 0 14px; } .ue-waechter > summary { cursor: pointer; padding: 8px 12px; border: 1px solid var(--rand); border-radius: var(--radius); background: var(--flaeche); color: var(--petrol); font-size: 14px; font-weight: 600; list-style-position: inside; } .ue-waechter[open] > summary { margin-bottom: 12px; } dialog.bericht { width: min(820px, calc(100vw - 40px)); } dialog.bericht .ms-rechenweg { width: 100%; } dialog.bericht h3 { margin: 16px 0 8px; font-size: 15px; } @media print { body > *:not(dialog.bericht) { display: none !important; } dialog.bericht { position: static; width: auto; max-width: none; max-height: none; margin: 0; border: 0; box-shadow: none; } dialog.bericht .dialog-fuss { display: none !important; } } /* Tabellen der Übersicht werden auf dem Handy zu Karten: je Zeile eine Karte, die Spaltenüberschrift vor jedem Wert */ @media (max-width: 560px) { .ck-tabelle, .ck-tabelle tbody, .ck-tabelle tfoot, .ck-tabelle tr, .ck-tabelle td, .ck-tabelle tbody th, .ck-tabelle tfoot th { display: block; width: 100%; } .ck-tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .ck-tabelle tr { margin: 0 0 10px; padding: 4px 0; border: 1px solid var(--rand); border-radius: 10px; background: var(--flaeche); } .ck-tabelle tbody th, .ck-tabelle tfoot th { position: static; min-width: 0; padding: 8px 12px 6px; border: 0; background: none !important; } .ck-tabelle td { display: flex; justify-content: space-between; gap: 14px; padding: 4px 12px; border: 0; text-align: right; white-space: normal; } .ck-tabelle td[data-label]::before { content: attr(data-label); color: var(--text-leise); font-size: 12.5px; text-align: left; flex: 0 0 auto; } .ck-tabelle td[data-leer] { display: none; } .ck-tabelle tfoot th { border-top: 0; } .ck-tabelle tfoot tr { border-width: 2px; } } /* Korrekturen nach Blick auf die echte Seite (11.11.2026, dunkle Darstellung): Zahlenspalten mit rechtsbündiger Überschrift, Reiter ohne graue Schaltflächenfläche, Zinsbindungen über die volle Breite, Hinweis auf Eigentümer ohne Objekt. */ .ck-tabelle thead th.r { text-align: right; } .objekt-reiter button, .einheit-reiter button, .ue-reiter button, .cockpit-reiter button { background: transparent; } .objekt-reiter button.aktiv, .einheit-reiter button.aktiv, .ue-reiter button.aktiv, .cockpit-reiter button.aktiv { background: var(--flaeche); } .objekt-reiter button:hover, .einheit-reiter button:hover, .ue-reiter button:hover { background: var(--flaeche); } #ue-feld-zinsen > section, #ue-feld-zinsen .zinsbindungen { width: 100%; max-width: none; } .ck-ohne-objekt { margin: -6px 0 14px; font-size: 12.5px; } /* --------------------------------------------------------------------------- Seitenleiste links (11.11.2026, Sebastian: „Seitenleiste links“). Ab 901 px steht die bisherige Kopfleiste als feste Spalte links: oben Logo und Eigentümerwahl, in der Mitte die Hauptnavigation (Ausklappmenüs wachsen an Ort und Stelle auf, der Bereich der offenen Seite bleibt aufgeklappt), unten Vertragsmanagement, Postfach, Wissensdatenbank, Suche und Konto. Unter 901 px bleibt es beim Knopf „Menü“. Dieselben Elemente wie vorher – nur die Anordnung ändert sich. --------------------------------------------------------------------------- */ @media (min-width: 901px) { .layout { display: grid; grid-template-columns: 268px minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: start; } .kopfleiste { grid-column: 1; grid-row: 1 / span 2; position: sticky; top: 0; z-index: 50; align-self: start; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 4px; width: auto; height: 100vh; overflow-y: auto; overscroll-behavior: contain; padding: 14px 10px; border-bottom: 0; border-right: 1px solid var(--rand); } #bereichskopf { grid-column: 2; grid-row: 1; min-width: 0; } main#inhalt { grid-column: 2; grid-row: 2; min-width: 0; } #bereichskopf:empty + main#inhalt { grid-row: 1 / span 2; } .leiste-kopf { flex-direction: column; align-items: stretch; gap: 10px; padding: 0 0 8px; } .kopfleiste .logo { padding: 2px 6px 6px; } .kopfleiste .logo img { max-width: 190px; max-height: 48px; } .menue-knopf { display: none; } #navigation { flex: 1 1 auto; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0; padding: 0; min-height: 0; } #navigation > .nav-eintrag, .nav-menue-knopf { width: 100%; } #navigation > .nav-eintrag > svg { display: block; } .nav-eintrag { min-height: 38px; } .nav-menue { width: 100%; } .nav-menue-liste { position: static; width: auto; min-width: 0; max-width: none; max-height: none; padding: 0 0 4px 14px; border: 0; border-radius: 0; background: transparent; box-shadow: none; } #navigation > .nav-eintrag.aktiv::before, #navigation > .nav-eintrag.enthaelt-aktiv::before, #navigation > .nav-menue > .nav-menue-knopf.enthaelt-aktiv::before { left: 0; right: auto; top: 50%; bottom: auto; width: 3px; height: 20px; margin-top: -10px; } .nav-unterliste { margin: 0 0 6px; padding-left: 4px; } .nav-unter { min-height: 34px; padding-left: 38px; font-size: 13.5px; } .nav-unter.aktiv::before { left: 16px; } .eig-wahl .nav-menue-knopf { max-width: none; width: 100%; border-radius: 10px; } .eig-wahl .nav-menue-knopf .nav-text { display: block; } .leiste-rechts { flex-direction: column; align-items: stretch; flex: none; gap: 2px; margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--rand); } .leiste-rechts .nav-eintrag, #nav-vertraege .nav-eintrag { width: 100%; } .leiste-wissen .nav-text { display: block; } .leiste-suche { justify-content: flex-start; } .leiste-suche .nav-zusatz { margin-left: auto; } #nav-postfach { display: block; } .konto, .konto-knopf { width: 100%; } .konto-menue { position: static; width: auto; padding: 0 0 4px 12px; border: 0; border-radius: 0; background: transparent; box-shadow: none; } .bereichskopf { padding-left: 32px; padding-right: 32px; } .mieten-formular, #mieten-import { scroll-margin-top: 16px; } } /* Rote Zähler stehen vor der Bezeichnung (direkt nach dem Symbol), nicht dahinter (11.11.2026) */ .nav-eintrag > svg:first-child { order: -2; } .nav-eintrag > .nav-zaehler { order: -1; } /* Wo ein Zähler steht, ersetzt er das Symbol (nicht beides nebeneinander) */ .nav-eintrag:has(> .nav-zaehler) > svg:first-child:not(.nav-pfeil), #navigation > .nav-eintrag:has(> .nav-zaehler) > svg:first-child:not(.nav-pfeil) { display: none; }