/* ============================================================ app.css — Oberfläche der gemeinsamen App Farben aus dem bestehenden CRM, damit es nach einer Anwendung aussieht und nicht nach zwei zusammengeklebten Programmen. ============================================================ */ :root { --bg: #f5f4f1; --flaeche: #ffffff; --flaeche2: #f0ede8; --rand: #ddd9d0; --akzent: #304945; --akzent2: #89a2ab; --akzent-hell: #e4e9eb; --text: #1a1a18; --text2: #5a5a54; --text3: #9a9a92; --rot: #c0392b; --rot-hell: #fdf0ee; --gruen: #1e7e34; --gruen-hell: #e6f4ea; --gelb: #b8860b; --gelb-hell: #fefae8; --radius: 8px; --schatten: 0 1px 3px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.05); } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: Arial, Helvetica, sans-serif; background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.5; } /* ── Anmeldeseite ───────────────────────────────────────────── */ body.anmeldeseite, body.meldungsseite { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--akzent); padding: 20px; } body.anmeldeseite main, body.meldungsseite main { background: var(--flaeche); border-radius: 12px; padding: 32px; width: 100%; max-width: 380px; box-shadow: var(--schatten); } body.anmeldeseite h1, body.meldungsseite h1 { font-size: 18px; color: var(--akzent); } body.anmeldeseite .unter { font-size: 13px; color: var(--text3); margin-bottom: 18px; } body.anmeldeseite form { margin-bottom: 12px; } body.anmeldeseite label { display: block; font-size: 12px; color: var(--text2); margin: 12px 0 4px; } body.anmeldeseite input { width: 100%; padding: 10px 12px; border: 1px solid var(--rand); border-radius: var(--radius); font-size: 14px; font-family: inherit; } body.anmeldeseite input:focus { outline: 2px solid var(--akzent2); outline-offset: 1px; } body.anmeldeseite button, body.meldungsseite button { width: 100%; margin-top: 16px; padding: 11px; border: none; border-radius: var(--radius); background: var(--akzent); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; } body.anmeldeseite button.zweitrangig { background: var(--flaeche2); color: var(--akzent); } body.anmeldeseite .fuss { margin-top: 14px; text-align: center; font-size: 12px; } body.anmeldeseite .fuss a, body.meldungsseite a { color: var(--akzent); } body.anmeldeseite .hinweistext { font-size: 13px; color: var(--text2); background: var(--gelb-hell); border: 1px solid #e6d9a0; border-radius: var(--radius); padding: 12px; } body.anmeldeseite code { background: var(--flaeche2); padding: 1px 5px; border-radius: 4px; font-family: Consolas, monospace; } .meldung { margin: 10px 0 0; padding: 9px 12px; border-radius: 7px; font-size: 13px; line-height: 1.4; } .meldung.gut { background: var(--gruen-hell); color: var(--gruen); } .meldung.schlecht{ background: var(--rot-hell); color: var(--rot); } .meldung.warn { background: var(--gelb-hell); color: var(--gelb); } /* ── App-Hülle ──────────────────────────────────────────────── */ #app { display: flex; min-height: 100vh; } #seitenleiste { width: 232px; min-width: 232px; background: var(--akzent); color: #fff; display: flex; flex-direction: column; } #seitenleiste .marke { padding: 20px 18px 16px; border-bottom: 1px solid rgba(255,255,255,.12); } #seitenleiste .marke strong { display: block; font-size: 14px; } #seitenleiste .marke span { font-size: 11px; opacity: .65; } #seitenleiste nav { flex: 1; padding: 10px 0; } #seitenleiste .gruppe { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; opacity: .5; padding: 14px 18px 6px; } #seitenleiste .nav { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 18px; background: none; border: none; border-left: 3px solid transparent; color: rgba(255,255,255,.78); font-size: 13px; font-weight: 500; font-family: inherit; cursor: pointer; } /* Die kleinen Zeichen vor jedem Punkt – wie im alten CRM. Als eigene Spalte mit fester Breite, damit die Beschriftungen bündig stehen. */ #seitenleiste .nav .icon { font-size: 15px; width: 20px; text-align: center; flex: none; } #seitenleiste .nav:hover { background: rgba(255,255,255,.08); color: #fff; } #seitenleiste .nav.aktiv { background: rgba(255,255,255,.13); color: #fff; border-left-color: #fff; } #seitenleiste .nav:focus-visible { outline: 2px solid #fff; outline-offset: -2px; } #seitenleiste .abmelden { padding: 14px 18px; border-top: 1px solid rgba(255,255,255,.12); } #seitenleiste .abmelden button { width: 100%; padding: 7px; border-radius: 6px; cursor: pointer; border: 1px solid rgba(255,255,255,.25); background: transparent; color: rgba(255,255,255,.85); font-family: inherit; font-size: 12px; } #seitenleiste .abmelden button:hover { background: rgba(255,255,255,.1); color: #fff; } main { flex: 1; display: flex; flex-direction: column; min-width: 0; } /* Klebt oben fest. Ohne das steht die Rückmeldung aus #hinweis bei einer langen Seite (Einstellungen!) weit außerhalb des Sichtbereichs: Man drückt unten einen Knopf, die Antwort erscheint oben und ist nach sechs Sekunden wieder fort – der Knopf wirkt kaputt. */ #kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 28px; background: var(--flaeche); border-bottom: 1px solid var(--rand); position: sticky; top: 0; z-index: 5; } #kopf h1 { font-size: 18px; font-weight: 600; } #hinweis { font-size: 12px; color: var(--text2); } #hinweis.gut { color: var(--gruen); } #hinweis.schlecht { color: var(--rot); } #banner { margin: 16px 24px 0; padding: 10px 14px; border-radius: var(--radius); font-size: 13px; background: var(--gelb-hell); border: 1px solid #e6d9a0; color: #7a5c00; } #inhalt { padding: 24px 28px 40px; } /* ── Karten und Tabellen ──────────────────────────────────────── MIT 0.9.5 IN VOLLER BREITE, wie im alten CRM (crm.bs-bremer.de). Melanies Rückmeldung vom 24.08.2026: das alte Design ist "viel ansprechender, breiter". Die 720-Pixel-Grenze stammte aus der ersten Fassung und ließ rechts eine große leere Fläche stehen. */ .karte { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 16px; box-shadow: var(--schatten); } /* Die Überschrift als Kopfzeile der Karte, mit Trennlinie – das card-header-Muster des alten CRM. Nur die ERSTE Überschrift wird zur Kopfzeile; eine h2 mitten in der Karte bleibt eine Zwischenzeile. */ .karte > h2:first-child { margin: -18px -20px 16px; padding: 13px 20px; border-bottom: 1px solid var(--rand); font-size: 15px; color: var(--text); } .karte h2 { font-size: 14px; margin-bottom: 10px; color: var(--akzent); } .karte .klein { font-size: 12px; color: var(--text2); margin-bottom: 10px; } .karte .gross { font-size: 15px; font-weight: 600; margin-bottom: 6px; } .platzhalter { border-style: dashed; background: var(--flaeche2); box-shadow: none; text-align: center; padding: 36px 20px; color: var(--text3); } table { border-collapse: collapse; width: 100%; font-size: 13px; } table.status th { text-align: left; font-weight: 400; color: var(--text2); padding: 5px 12px 5px 0; width: 55%; } table.status td { padding: 5px 0; } /* Tabellenköpfe wie im alten CRM: klein, versal, auf grauem Grund. */ table.liste th { text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text2); border-bottom: 1px solid var(--rand); padding: 8px 12px 8px 0; } table.liste td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--flaeche2); } .gut { color: var(--gruen); } .schlecht { color: var(--rot); } .laedt { color: var(--text3); font-size: 13px; } .zustand { font-size: 13px; font-weight: 600; margin-bottom: 10px; } /* ── Formularfelder in Karten ───────────────────────────────── */ .feld { margin-bottom: 10px; } .feld label { display: block; font-size: 12px; color: var(--text2); margin-bottom: 3px; } .feld input { width: 100%; max-width: 340px; padding: 8px 10px; border: 1px solid var(--rand); border-radius: 6px; font-size: 14px; font-family: inherit; } .feld input:focus { outline: 2px solid var(--akzent2); outline-offset: 1px; } .feld select { width: 100%; max-width: 340px; padding: 8px 10px; border: 1px solid var(--rand); border-radius: 6px; font-size: 14px; font-family: inherit; background: var(--flaeche); } .feld select:focus { outline: 2px solid var(--akzent2); outline-offset: 1px; } .karte button { margin-top: 6px; padding: 8px 16px; border: none; border-radius: 6px; background: var(--akzent); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; } .karte button:hover { background: #243734; } .karte button.gefahr { background: var(--rot); } /* Ein gesperrter Knopf muss auch gesperrt AUSSEHEN – sonst hält man den fehlenden Klickerfolg für einen Fehler. */ .karte button:disabled, .karte button:disabled:hover { background: var(--rand); color: var(--text3); cursor: not-allowed; } .geheimnis { font-family: Consolas, monospace; font-size: 17px; letter-spacing: .1em; background: var(--flaeche2); border: 1px solid var(--rand); border-radius: 6px; padding: 12px; margin: 10px 0; word-break: break-all; } /* ── Karten nebeneinander (Stammdaten | Ansprechpartner) ───── Ein Raster mit auto-fit: passen zwei Spalten von mindestens 360 px nebeneinander, stehen die Karten nebeneinander; sonst bricht der Browser von sich aus untereinander um (Melanie, 09.09.2026). Eine einzelne Karte füllt die ganze Breite. */ .kartenreihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 16px; align-items: start; } .kartenreihe > .karte { margin-bottom: 0; min-width: 0; } .kartenreihe { margin-bottom: 16px; } /* ── Notizen am Kunden ──────────────────────────────────────── */ .vorformatiert { white-space: pre-line; overflow-wrap: anywhere; } #karte-notizen .werkzeugleiste { margin-bottom: 12px; } /* Das Schreibfenster nutzt die ganze Kartenbreite – hier wird geschrieben. */ #karte-notizen .feld textarea { max-width: none; } .notiz { border-top: 1px solid var(--rand); padding: 10px 0 8px; } .notiz:first-child { border-top: none; padding-top: 0; } .notiz-kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; } .notiz-zeit { font-size: 12px; color: var(--text2); flex: 1; } .notiz-text { font-size: 14px; } /* ── Schmale Bildschirme ────────────────────────────────────── */ @media (max-width: 760px) { #app { flex-direction: column; } #seitenleiste { width: 100%; min-width: 0; } #seitenleiste nav { display: flex; flex-wrap: wrap; padding: 6px; } #seitenleiste .gruppe { width: 100%; padding: 8px 12px 2px; } #seitenleiste .nav { width: auto; border-left: none; border-radius: 6px; } #inhalt { padding: 16px; } } /* ── Datenübernahme ─────────────────────────────────────────── */ .karte .zweitrangig { background: var(--flaeche2); color: var(--akzent); margin-left: 8px; } .karte .zweitrangig:hover { background: #e4e0d8; } .pfad { font-family: Consolas, monospace; font-size: 12px; color: var(--text2); background: var(--flaeche2); border: 1px solid var(--rand); border-radius: 6px; padding: 7px 10px; margin-bottom: 10px; word-break: break-all; } .bericht { margin-top: 14px; } .bericht:empty { display: none; } .blocktitel { font-size: 12px; font-weight: 600; margin: 14px 0 5px; color: var(--text2); } .blocktitel.schlecht { color: var(--rot); } .blocktitel.warn { color: var(--gelb); } .blocktitel.gut { color: var(--gruen); } .block ul { margin: 0 0 0 18px; font-size: 12px; color: var(--text2); } .block li { margin-bottom: 3px; } /* ── Fachmodule (crm.js) ────────────────────────────────────── */ .werkzeugleiste { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; } .werkzeugleiste .wachsend { flex: 1; } /* Rückmeldung direkt neben einem Knopf, statt nur oben in der Kopfzeile. */ .nebenmeldung { font-size: 12px; color: var(--text2); } /* Beschriftung der Jahreswahl und kleine Knöpfe in Listenzeilen. */ .jahrbeschriftung { font-size: 12px; color: var(--text2); } .karte button.klein, .werkzeugleiste button.klein, table.liste button.klein { padding: 4px 10px; font-size: 12px; margin-top: 0; } /* Knöpfe in Tabellenzeilen: das btn-secondary-Muster des alten CRM, statt des grauen Browser-Standards. */ table.liste button.klein { border: 1px solid var(--rand); border-radius: 6px; background: var(--flaeche2); color: var(--text); cursor: pointer; font-family: inherit; font-weight: 500; } table.liste button.klein:hover { background: var(--rand); } .text2 { color: var(--text3); } .nebenmeldung.gut { color: var(--gruen); } .nebenmeldung.schlecht { color: var(--rot); } .werkzeugleiste input[type=search], .werkzeugleiste select, .werkzeugleiste input[type=text] { padding: 8px 10px; border: 1px solid var(--rand); border-radius: 6px; font-size: 14px; font-family: inherit; min-width: 200px; } .werkzeugleiste button { padding: 8px 16px; border: none; border-radius: 6px; cursor: pointer; background: var(--akzent); color: #fff; font-size: 13px; font-weight: 600; font-family: inherit; } .werkzeugleiste button.zweitrangig { background: var(--flaeche2); color: var(--akzent); } table.liste.breit { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten); margin-bottom: 16px; } table.liste.breit th { padding: 10px 14px; background: var(--flaeche2); } table.liste.breit td { padding: 11px 14px; } table.liste.breit tbody tr:last-child td { border-bottom: none; } /* Zeilen heben sich unter dem Zeiger, wie im alten CRM – auch ohne Klickziel. */ table.liste.breit tbody tr:hover td { background: var(--flaeche2); } tr.klickbar { cursor: pointer; } tr.klickbar:hover td, table.liste.breit tbody tr.klickbar:hover td { background: var(--akzent-hell); } .fett { font-weight: 600; } .rechts { text-align: right; } .warnfarbe { color: var(--gelb); } .status-entwurf { color: var(--text3); } .status-offen { color: var(--akzent); font-weight: 600; } .status-bezahlt { color: var(--gruen); } .status-storniert { color: var(--rot); text-decoration: line-through; } /* Kennzahlkacheln nach dem stat-card-Muster des alten CRM. */ .kennzahlen { display: flex; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; } .kennzahl { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); padding: 14px 20px; min-width: 170px; } .kennzahl span { display: block; font-size: 11px; color: var(--text2); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; } .kennzahl strong { font-size: 22px; font-weight: 600; color: var(--akzent); } .kennzahl.warn strong { color: var(--rot); } /* ── Abzeichen (Badges) wie im alten CRM ─────────────────────── */ .abzeichen { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 11px; font-weight: 500; white-space: nowrap; text-decoration: none; } .abzeichen.status-bezahlt { background: var(--gruen-hell); color: var(--gruen); } .abzeichen.status-offen { background: var(--gelb-hell); color: var(--gelb); } .abzeichen.status-entwurf { background: var(--flaeche2); color: var(--text3); } .abzeichen.status-storniert { background: var(--flaeche2); color: var(--text3); text-decoration: line-through; } .abzeichen.abz-rot { background: var(--rot-hell); color: var(--rot); } .abzeichen.abz-grau { background: var(--flaeche2); color: var(--text3); } /* Mehrere kleine Knöpfe nebeneinander in einer Tabellenzelle. */ .zeilenknoepfe { white-space: nowrap; } .zeilenknoepfe button { margin-right: 6px; } .zeilenknoepfe button:last-child { margin-right: 0; } .feldpaar { display: flex; gap: 12px; flex-wrap: wrap; } .feldpaar .feld { flex: 1; min-width: 140px; } .feld textarea { width: 100%; max-width: 520px; padding: 8px 10px; border: 1px solid var(--rand); border-radius: 6px; font-size: 14px; font-family: inherit; resize: vertical; } /* Logovorschau in den Einstellungen. Als Klasse und nicht als style-Attribut: die CSP erlaubt kein inline-Style. */ .logovorschau { max-height: 60px; max-width: 200px; } .karte input[type=file] { font-size: 13px; } .karte label.kasten { display: inline-flex; align-items: center; gap: 5px; margin-right: 16px; font-size: 13px; } .ap-zeile, .pos-zeile, .timerzeile { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; align-items: center; } .ap-zeile input, .pos-zeile input, .timerzeile input, .timerzeile select { padding: 7px 9px; border: 1px solid var(--rand); border-radius: 6px; font-size: 13px; font-family: inherit; } .ap-zeile input, .pos-zeile .p-text, .timerzeile input[type=text] { flex: 1; min-width: 120px; } .timerzeile select { min-width: 180px; } .timerzeile.laufend { background: var(--gruen-hell); padding: 10px; border-radius: 6px; } /* Stopp-Fenster (0.9.18): eigene Folgezeile unter der Timerzeile, damit die Nachfrage die Felder der Zeile nicht zusammendrückt. */ .stopp-bereich .nachfrage { margin-top: 0; margin-bottom: 12px; } /* Zeiteintrag in seiner Zeile bearbeiten (0.9.14): die Zelle wird zum Feld */ tr.zeit-bearbeitung td { vertical-align: top; } tr.zeit-bearbeitung input, tr.zeit-bearbeitung select { width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid var(--rand); border-radius: 6px; font-size: 13px; font-family: inherit; } tr.zeit-bearbeitung .ze-dauer { min-width: 80px; } tr.zeit-bearbeitung-meldung td { padding-top: 0; } tr.zeit-bearbeitung-meldung .ze-meldung { display: block; margin: 0; padding: 6px 8px; font-size: 12px; } .timeranzeige { font-family: Consolas, monospace; font-size: 18px; font-weight: 600; min-width: 90px; color: var(--gruen); } .karte button.klein { padding: 5px 10px; font-size: 12px; } .aktionen { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; } .nachfrage { margin-top: 12px; padding: 12px 14px; border-radius: var(--radius); background: var(--gelb-hell); border: 1px solid #e6d9a0; } .nachfrage p { font-size: 13px; margin-bottom: 10px; } /* Eigene Knopf-Beschreibung: eine Nachfrage kann auch AUSSERHALB einer Karte stehen (Bezahlt-Fenster in der Rechnungsliste) – dort griffe ".karte button" nicht und der Browser-Standard käme heraus. */ .nachfrage button { margin-right: 8px; margin-top: 4px; padding: 8px 16px; border: none; border-radius: 6px; cursor: pointer; background: var(--akzent); color: #fff; font-size: 13px; font-weight: 600; font-family: inherit; } .nachfrage button:hover { background: #243734; } .nachfrage button.zweitrangig { background: var(--flaeche2); color: var(--akzent); } .nachfrage .feld input[type=date] { max-width: 220px; } .nachfrage input { width: 100%; max-width: 420px; padding: 8px 10px; margin-bottom: 10px; border: 1px solid var(--rand); border-radius: 6px; font-family: inherit; font-size: 13px; } .zeitliste { display: flex; flex-direction: column; gap: 5px; margin: 10px 0; max-height: 260px; overflow-y: auto; } .zeitwahl { font-size: 13px; display: flex; align-items: center; gap: 7px; } /* ── Kennzeichen (Ankreuzfeld mit Erklärung) ──────────────────── [hidden] ausdrücklich mit !important: .feld setzt display, und ein ausgeblendeter Kasten muss sicher verschwinden – sonst stünde ein Kennzeichen da, das für die gewählte Zeile gar nicht gilt. */ [hidden] { display: none !important; } /* Das laufende Jahr in einem mehrjährigen Plan (AfA, Sammelposten): hervorgehoben, damit auf einen Blick zu sehen ist, welche Rate gerade zählt. */ tr.hervor > td { background: var(--akzent-hell); font-weight: 600; } .kennzeichen { margin: 4px 0 12px; padding: 10px 12px; border-radius: var(--radius); background: var(--gelb-hell); border: 1px solid #e6d9a0; } .kennzeichen .klein { margin-bottom: 0; } .feld.ankreuz { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .feld.ankreuz label { display: inline; margin-bottom: 0; font-size: 13px; color: var(--text); } .feld.ankreuz input[type=checkbox] { width: auto; margin: 0; } /* Mehrere Ankreuzfelder untereinander, etwas eingerückt – etwa die Abschnittswahl für die Unterlagen ans Finanzamt. */ .ankreuzliste { margin: 10px 0 12px; padding-left: 2px; } .ankreuzliste .feld.ankreuz { margin-bottom: 4px; } /* ── Filtern und Sortieren ───────────────────────────────────── EINE ZEILE, SOLANGE NICHTS GEFILTERT IST. Die erste Fassung war eine volle Karte mit Feldraster und schob die Tabelle aus dem Bild. Jetzt ist es ein
-Block: zugeklappt eine schmale Leiste, offen das Raster. */ .filterblock { margin: 0 0 12px; border: 1px solid var(--rand, #d8d4cd); border-radius: 8px; background: #fff; } .filterblock > summary { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 7px 12px; cursor: pointer; font-size: 13px; list-style: none; /* das Standard-Dreieck weg … */ } .filterblock > summary::-webkit-details-marker { display: none; } .filterblock > summary::before { content: '▸'; /* … und ein eigenes, das mitdreht */ font-size: 11px; color: var(--akzent2, #89a2ab); } .filterblock[open] > summary::before { content: '▾'; } .filterblock > summary:hover { background: rgba(0, 0, 0, .03); } .filterblock .filtertitel { font-weight: 600; color: var(--akzent); } .filterblock .nebenmeldung { margin: 0; font-size: 12px; } .filterinhalt { padding: 2px 12px 10px; border-top: 1px solid #eee; } .filterfelder { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px 12px; margin: 10px 0; } .filterfelder .feld { margin-bottom: 0; } .filterfelder .feld label { font-size: 11.5px; margin-bottom: 2px; } .filterfelder input, .filterfelder select { padding: 5px 8px; font-size: 13px; } /* Sortierbare Spaltenköpfe: der ganze Kopf ist der Knopf, damit man nicht ein 8 Pixel breites Pfeilchen treffen muss. */ th.sortierbar { padding: 0; } th.sortierbar .sortknopf { display: block; width: 100%; padding: 10px 12px; border: none; background: none; font: inherit; font-weight: 600; color: inherit; text-align: left; cursor: pointer; } th.sortierbar .sortknopf:hover { background: rgba(0, 0, 0, .05); } th.sortiert .sortknopf { color: var(--akzent); } /* Hinweis, dass gefiltert ist – bewusst auffällig. Eine gefilterte Liste, der man das nicht ansieht, lässt an den eigenen Zahlen zweifeln. */ .warnfarbe { color: #8a5a00; } /* ── Diagramme ───────────────────────────────────────────────── Selbst gezeichnetes SVG (keine Bibliothek – die CSP erlaubt keine fremden Skripte, und auf dem Webspace gibt es keinen Paketverwalter). Farben stehen im JavaScript als Attribut am Balken, damit die Serienzuordnung an EINER Stelle steht; hier nur Achsen, Gitter und die Legende. */ .dia-rahmen { overflow-x: auto; margin-top: 4px; } svg.dia { display: block; width: 100%; height: auto; max-width: 760px; } /* Zurückhaltend: das Gitter darf die Balken nicht überstrahlen. */ .dia-gitter { stroke: #e6e2da; stroke-width: 1; } .dia-nulllinie { stroke: #b9b3a8; stroke-width: 1.5; } .dia-achse { font-size: 10.5px; fill: var(--text2, #6b6a64); } .dia-wert { font-size: 10.5px; fill: var(--text, #2c2b28); font-weight: 600; } .dia-legende { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; color: var(--text2, #6b6a64); margin: 6px 0 2px; } .dia-legende .dia-marke:not(:first-child) { margin-left: 10px; } .dia-marke { display: inline-block; width: 11px; height: 11px; border-radius: 3px; } .dia-marke-ein { background: #2a78d6; } .dia-marke-aus { background: #eb6834; } .dia-marke-gewinn { background: #1e7e34; } .dia-marke-verlust { background: #c0392b; } /* Zwischenüberschrift in einer Karte (etwa über den zwei Aufstellungen nach Anlage-EÜR-Zeilen). */ h3.unterzeile { font-size: 14px; margin: 14px 0 6px; color: var(--akzent); } h3.unterzeile:first-of-type { margin-top: 8px; } /* Ein Formularbereich, in dem gerade kein Formular steht, soll auch kein leerer weißer Kasten sein. Fiel auf einem Bildschirmfoto auf: zwischen „Neue Ausgabe" und der Tabelle klaffte eine leere Karte. */ .karte:empty { display: none; } /* ── Belegarchiv ─────────────────────────────────────────────── Der Belegkasten steht am Fuß jedes Buchungsformulars und ist überall derselbe Baustein (assets/belege.js). Deshalb hier eine Beschreibung statt sechs. */ .belegkasten { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--rand); } .belegkasten h3 { font-size: 14px; margin: 0 0 8px; color: var(--akzent); } .belegkasten .feld { margin-bottom: 6px; } .belegkasten .belegfeld { max-width: 24em; } /* Ein Beleg je Zeile: Name, dahinter klein Art und Größe, rechts der Knopf. Kein Aufzählungspunkt – die Zeile ist schon eine Liste. */ .belegliste { list-style: none; margin: 0 0 10px; padding: 0; } .belegliste li { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 5px 0; border-bottom: 1px solid var(--rand); } .belegliste li:last-child { border-bottom: none; } .belegliste li > a { font-weight: 600; } .belegliste li > button { margin-left: auto; margin-top: 0; } /* Die Belegmarke in Listenzeilen (📎 2) und der aufklappbare Rechnungs- text einer verzahnten Einnahme.
ohne Standard-Dreieck; die Zusammenfassung sieht aus wie ein Verweis, der Inhalt legt sich als kleiner Kasten unter die Zeile. */ .belegzelle { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .belegklapp { display: block; } /* Aufgeklappt nimmt die Marke die ganze Zellenbreite: der Kasten rutscht unter die Belegnummer statt daneben. */ .belegzelle > .belegklapp[open] { flex-basis: 100%; } .belegklapp > summary { list-style: none; cursor: pointer; color: var(--akzent); white-space: nowrap; display: inline-block; } .belegklapp > summary::-webkit-details-marker { display: none; } .belegzelle > .belegklapp > summary { font-size: 12px; } .belegklapp.rechnungsklapp > summary { white-space: normal; text-decoration: underline dotted; margin-left: 0; font-size: inherit; } .belegklapp[open] > summary { font-weight: 600; } .belegklapp > .belegliste, .belegklapp > .werkzeugleiste { margin: 6px 0 2px; padding: 8px 10px; background: var(--flaeche2); border: 1px solid var(--rand); border-radius: 6px; font-size: 12.5px; } .belegklapp > .belegliste li { border-bottom: none; padding: 2px 0; } .belegklapp > .werkzeugleiste.klein { gap: 6px; margin-bottom: 0; } .belegklapp > .werkzeugleiste.klein button { margin-top: 0; } .werkzeugleiste.klein button.klein { padding: 4px 10px; font-size: 12px; } /* Woran ein Beleg hängt – in der Archivtabelle. Mehrere Fundstellen sind der Normalfall (ein Kaufbeleg an Ausgabe UND Anlage). */ .fundstellen { list-style: none; margin: 0; padding: 0; font-size: 12.5px; } .fundstellen li { padding: 1px 0; } /* Eine Karte, die etwas erklärt statt etwas anzuzeigen. */ .hinweiskarte { border-left: 3px solid var(--gelb); } .hinweiskarte p:last-child { margin-bottom: 0; } /* ── Planung ─────────────────────────────────────────────────── Zwölf Zeilen mit je zwei Eingabefeldern. Die Felder bleiben schmal: ein Betragsfeld über die halbe Tabellenbreite lädt zu Eingaben ein, die dort nicht hingehören. */ .planfeld { width: 9em; max-width: 100%; padding: 5px 7px; text-align: right; } #liste-planung td:first-child { white-space: nowrap; } #liste-planung tfoot td { font-weight: 600; } /* ── Startseite ──────────────────────────────────────────────── Kacheln, die weiterführen. Eine Zahl ohne Weg dorthin ist eine Sackgasse — deshalb ist die klickbare Kachel ein echter