/* Hausverwaltung 2 – Basis-Styles Dark/Light (C) über CSS-Variablen; Standard folgt dem System (prefers-color-scheme), manuelle Wahl über data-theme am . */ :root { --hintergrund: #f5f6f8; --flaeche: #ffffff; --text: #1c2430; --text-leise: #5a6572; --akzent: #2b6cb0; --rand: #d7dce2; --warnung: #b7791f; --alarm: #c53030; } /* Dunkles Theme, wenn System dunkel ist und keine manuelle Wahl vorliegt */ @media (prefers-color-scheme: dark) { html[data-theme="auto"] { --hintergrund: #14181d; --flaeche: #1e242c; --text: #e6e9ed; --text-leise: #9aa4af; --akzent: #63a4e0; --rand: #323a44; } } /* Manuelle Wahl (C) */ html[data-theme="dunkel"] { --hintergrund: #14181d; --flaeche: #1e242c; --text: #e6e9ed; --text-leise: #9aa4af; --akzent: #63a4e0; --rand: #323a44; } html[data-theme="hell"] { /* nutzt die :root-Werte */ } * { box-sizing: border-box; } body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--hintergrund); color: var(--text); line-height: 1.5; } /* Breites Layout (B) */ .kopf { background: var(--flaeche); border-bottom: 1px solid var(--rand); } .kopf-innen, .inhalt, .fuss { max-width: 1400px; margin: 0 auto; padding: 0 1.5rem; } .kopf-innen { display: flex; align-items: center; gap: 1.5rem; height: 56px; } .logo { font-weight: 700; color: var(--text); text-decoration: none; } .navigation { display: flex; gap: 1rem; flex: 1; } .navigation a { color: var(--text-leise); text-decoration: none; } .navigation a:hover { color: var(--akzent); } .kopf-rechts { display: flex; align-items: center; gap: .75rem; } .inline { display: inline; } .inhalt { padding: 1.5rem; min-height: calc(100vh - 130px); } .karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; } .karte { background: var(--flaeche); border: 1px solid var(--rand); border-radius: 8px; padding: 1rem 1.25rem; min-width: 0; overflow-wrap: break-word; } .karte h2 { margin-top: 0; font-size: 1.05rem; } button { background: var(--akzent); color: #fff; border: 0; border-radius: 6px; padding: .4rem .9rem; cursor: pointer; } #theme-umschalter { background: transparent; color: var(--text); font-size: 1.1rem; } .fuss { padding: 1rem 1.5rem; color: var(--text-leise); font-size: .85rem; } /* Info-Button (AZ) – Grundstil für spätere Popups */ .info-knopf { display: inline-flex; align-items: center; justify-content: center; width: 1.2em; height: 1.2em; border-radius: 50%; background: var(--rand); color: var(--text); font-size: .8em; cursor: help; margin-left: .3em; } /* Formulare */ .formular-schmal { max-width: 360px; display: grid; gap: .8rem; } .formular-schmal label { display: grid; gap: .25rem; font-size: .9rem; color: var(--text-leise); } .formular-schmal input, .formular-schmal select, .formular-schmal textarea { padding: .5rem .6rem; border: 1px solid var(--rand); border-radius: 6px; background: var(--flaeche); color: var(--text); font-size: 1rem; width: 100%; max-width: 100%; min-width: 0; } .formular-schmal input[type="file"] { padding: .35rem; } .hinweis-fehler { color: var(--alarm); } /* Meldungsliste (R) */ .meldungsliste { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; } .meldungsliste li { border-left: 3px solid var(--rand); padding-left: .6rem; } .meldungsliste li.schwere-warnung { border-color: var(--warnung); } .meldungsliste li.schwere-alarm { border-color: var(--alarm); } .meldungsliste small { color: var(--text-leise); display: block; } /* Tabellen */ .tabelle { width: 100%; border-collapse: collapse; background: var(--flaeche); border: 1px solid var(--rand); border-radius: 8px; } /* Tabellen mit vielen Spalten dürfen in schmalen Karten horizontal scrollen, statt über den Rand hinauszulaufen. */ .tabelle-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } .tabelle-wrap .tabelle { min-width: 34rem; } .tabelle th, .tabelle td { padding: .5rem .7rem; text-align: left; border-bottom: 1px solid var(--rand); vertical-align: top; } .tabelle thead th { color: var(--text-leise); font-size: .85rem; } .tabelle input, .tabelle select { padding: .3rem .5rem; border: 1px solid var(--rand); border-radius: 5px; background: var(--hintergrund); color: var(--text); width: 100%; max-width: 220px; } .aktionen form { margin-bottom: .3rem; } /* Flash-Meldungen */ .flash { padding: .6rem .9rem; border-radius: 6px; border: 1px solid var(--rand); background: var(--flaeche); } .flash-ok { border-left: 4px solid var(--akzent); } .flash-fehler { border-left: 4px solid var(--alarm); color: var(--alarm); } /* Secrets / Codes */ code.secret { font-size: 1.1rem; letter-spacing: .05em; word-break: break-all; background: var(--hintergrund); padding: .3rem .5rem; border-radius: 5px; display: inline-block; } .code-liste { columns: 2; list-style: none; padding: 0; } .code-liste li { margin-bottom: .3rem; } select { padding: .4rem .5rem; border: 1px solid var(--rand); border-radius: 6px; background: var(--flaeche); color: var(--text); } /* Formular-Ergänzungen (Phase 2) */ .formular-schmal textarea { padding: .5rem .6rem; border: 1px solid var(--rand); border-radius: 6px; background: var(--flaeche); color: var(--text); font: inherit; resize: vertical; } label.zeile { display: flex; align-items: center; gap: .5rem; color: var(--text); } /* Checkbox-Zeilen behalten auch in .formular-schmal ihr Flex-Layout (sonst greift die Grid-Regel und der Text rutscht nach rechts). */ .formular-schmal label.zeile { display: flex; align-items: center; gap: .5rem; text-align: left; justify-content: flex-start; } .formular-schmal label.zeile input[type="checkbox"] { width: auto; flex: 0 0 auto; margin: 0; } .knopf-link { display: inline-block; background: var(--akzent); color: #fff; padding: .4rem .9rem; border-radius: 6px; text-decoration: none; } .karte h3 { margin-top: 1.2rem; font-size: 1rem; } .tabelle input[type="date"] { max-width: 160px; } /* Messpunkte & Diagramme (Phase 2) */ .leise { color: var(--text-leise); font-weight: normal; font-size: .85em; } .link-liste { list-style: none; padding: 0; display: grid; gap: .4rem; } .formular-zeile { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; } .formular-zeile { flex-wrap: wrap; } .formular-zeile input, .formular-zeile select { padding: .45rem .6rem; border: 1px solid var(--rand); border-radius: 6px; background: var(--flaeche); color: var(--text); min-width: 0; flex: 1 1 8rem; } button.klein { padding: .15rem .5rem; font-size: .8rem; background: var(--rand); color: var(--text); } .qr svg { border-radius: 6px; } /* SVG-Diagramm (Kern\Diagramm) – Farben folgen dem Theme (C) */ .diagramm { width: 100%; max-width: 760px; height: auto; display: block; } .diagramm .dg-gitter { stroke: var(--rand); stroke-width: 1; } .diagramm .dg-achslinie{ stroke: var(--text-leise); stroke-width: 1; } .diagramm .dg-achse { fill: var(--text-leise); font-size: 11px; font-family: inherit; } .diagramm .dg-vorjahr { fill: var(--rand); } .diagramm .dg-aktuell { fill: var(--akzent); } .diagramm-leer { color: var(--text-leise); } /* Dokumente (Phase 3) */ .breit-links { grid-template-columns: 2fr 1fr; } @media (max-width: 900px) { .breit-links { grid-template-columns: 1fr; } } .pdf-vorschau { width: 100%; height: 75vh; border: 1px solid var(--rand); border-radius: 6px; background: #fff; } input[type="file"] { color: var(--text); } /* Abrechnung (Phase 4) */ .abrechnung-blatt { max-width: 800px; } .abrechnung-blatt .absender { color: var(--text-leise); font-size: .85rem; margin-bottom: 1.5rem; } .abrechnung-blatt tfoot td { border-top: 2px solid var(--text-leise); } .abrechnung-blatt .saldo td { font-size: 1.1rem; } .status-knoepfe { display: flex; gap: .5rem; flex-wrap: wrap; } .status-knoepfe form { margin: 0; } /* Forecast & API (Phase 5) */ .forecast { margin-top: 1rem; padding: .7rem .9rem; background: var(--hintergrund); border-left: 3px solid var(--akzent); border-radius: 4px; } fieldset { border: 1px solid var(--rand); border-radius: 6px; padding: .6rem .8rem; } fieldset legend { color: var(--text-leise); font-size: .85rem; padding: 0 .3rem; } /* Druck (Seite/Daten drucken bzw. als PDF speichern) */ .druck-knopf { background: var(--rand); color: var(--text); font-size: .9rem; padding: .3rem .7rem; border-radius: 6px; cursor: pointer; } .druck-knopf:hover { background: var(--akzent); color: #fff; } @media print { .kopf, .fuss, .druck-knopf, .status-knoepfe, .kein-druck, form.inline, .knopf-link, button { display: none !important; } body { background: #fff; color: #000; } .inhalt { max-width: 100%; padding: 0; } .karte { border: none; box-shadow: none; break-inside: avoid; } .tabelle { border: 1px solid #999; } .tabelle th, .tabelle td { border-color: #999; } a { color: #000; text-decoration: none; } .diagramm { max-width: 100%; } } /* Inline-Bearbeiten (Ablesungen/Geräte korrigieren) */ details.bearbeiten { display: inline-block; } details.bearbeiten > summary { cursor: pointer; color: var(--akzent); list-style: none; padding: .15rem .5rem; border-radius: 4px; background: var(--rand); display: inline-block; } details.bearbeiten > summary::-webkit-details-marker { display: none; } details.bearbeiten[open] > summary { margin-bottom: .5rem; } details.bearbeiten .formular-zeile, details.bearbeiten .formular-schmal { padding: .6rem; background: var(--hintergrund); border-radius: 6px; border: 1px solid var(--rand); margin-top: .3rem; } /* Gefahrenzone (Löschen) */ .karte.gefahr { border-color: var(--alarm); } .karte.gefahr h2 { color: var(--alarm); } .knopf-gefahr { background: var(--alarm); } .knopf-gefahr:hover { filter: brightness(1.1); } /* Vorlagen-Editor */ .editor-toolbar { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; padding: .5rem; background: var(--hintergrund); border: 1px solid var(--rand); border-radius: 6px 6px 0 0; } .editor-toolbar button { background: var(--flaeche); color: var(--text); border: 1px solid var(--rand); padding: .25rem .6rem; } .editor-toolbar button:hover { background: var(--akzent); color: #fff; } .toolbar-trenner { flex: 1; } .baustein-wahl { font-size: .85rem; color: var(--text-leise); display: flex; align-items: center; gap: .4rem; } .editor-flaeche { min-height: 260px; padding: 1rem; border: 1px solid var(--rand); border-top: 0; border-radius: 0 0 6px 6px; background: var(--flaeche); color: var(--text); line-height: 1.5; } .editor-flaeche:focus { outline: 2px solid var(--akzent); } .nk-tabelle { width: 100%; border-collapse: collapse; margin: 1rem 0; } .nk-tabelle th, .nk-tabelle td { border: 1px solid #999; padding: 5px 8px; text-align: left; } .nk-tabelle .summe td { border-top: 2px solid #000; } /* Anschreiben-Vorschau */ .anschreiben-vorschau .anschreiben { max-width: 800px; line-height: 1.6; } .anschreiben-vorschau .anschreiben h2 { margin: 1rem 0 .5rem; } /* Volle Breite: Karte spannt über alle Spalten des .karten-Rasters */ .karten .karte.voll-breit { grid-column: 1 / -1; } /* Kostenposten-Sichtbarkeit */ .sicht-wahl { border: 1px solid var(--rand); border-radius: 6px; padding: .5rem .7rem; margin: .3rem 0; } .sicht-wahl legend { font-size: .9rem; color: var(--text-leise); padding: 0 .3rem; } .wohnung-auswahl { margin-left: 1.4rem; margin-top: .2rem; }