:root { --akzent: #4f46e5; --akzent-dunkel: #4338ca; --text: #1f2333; --grau: #6b7280; --rand: #e3e6ef; --flaeche: #fff; --hintergrund: #f5f6fa; --radius: 10px; } * { box-sizing: border-box; } body { margin: 0; background: var(--hintergrund); color: var(--text); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } a { color: var(--akzent); text-decoration: none; } a:hover { text-decoration: underline; } /* Kopf */ .kopf { display: flex; align-items: center; gap: 24px; background: var(--flaeche); border-bottom: 1px solid var(--rand); padding: 12px 22px; position: sticky; top: 0; z-index: 10; } .marke { font-weight: 700; font-size: 1.05rem; color: var(--text); } .kopf nav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; } .kopf nav a { padding: 6px 12px; border-radius: 7px; color: var(--grau); font-weight: 500; } .kopf nav a:hover { background: var(--hintergrund); text-decoration: none; } .kopf nav a.aktiv { background: var(--akzent); color: #fff; } .kopf-rechts { display: flex; align-items: center; gap: 12px; } .benutzername { color: var(--grau); font-size: .88rem; } /* Breiter Satzspiegel: die Seiten sind Tabellen und Karten, kein Fliesstext. Auf schmalen Bildschirmen greift ohnehin die Prozentbreite. */ main { max-width: 1560px; margin: 0 auto; padding: 26px 22px 60px; } h1 { font-size: 1.5rem; margin: 0 0 20px; } h2 { font-size: 1.05rem; margin: 0 0 12px; display: flex; align-items: baseline; gap: 10px; } .quelle { font-size: .75rem; color: var(--grau); font-weight: 400; } /* Kacheln */ .kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 12px; margin-bottom: 26px; } .kachel { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); padding: 16px 18px; display: flex; flex-direction: column; gap: 2px; color: var(--text); } a.kachel:hover { border-color: var(--akzent); text-decoration: none; } .kachel-zahl { font-size: 1.7rem; font-weight: 700; line-height: 1.1; } .kachel-text { font-size: .82rem; color: var(--grau); } /* Blöcke und Tabellen */ .block { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 18px; } .tabelle { width: 100%; border-collapse: collapse; } .tabelle th, .tabelle td { padding: 8px 10px; border-bottom: 1px solid var(--rand); text-align: left; } .tabelle th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--grau); font-weight: 600; } .th-sortierbar { color: inherit; text-decoration: none; white-space: nowrap; } .th-sortierbar:hover { color: var(--akzent); text-decoration: underline; } .tabelle tbody tr:last-child td { border-bottom: none; } .tabelle .r { text-align: right; } .leer, .klein { color: var(--grau); font-size: .88rem; margin: 0; } [hidden] { display: none !important; } /* Schaltflächen */ .btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; padding: 8px 15px; border-radius: 8px; border: 1px solid var(--rand); background: var(--flaeche); color: var(--text); font: inherit; font-weight: 600; font-size: .88rem; } .btn:hover { border-color: var(--akzent); text-decoration: none; } .btn-primary { background: var(--akzent); border-color: var(--akzent); color: #fff; } .btn-primary:hover { background: var(--akzent-dunkel); } .btn-klein { padding: 5px 11px; font-size: .82rem; } /* Aktionsspalte: der Knopf soll nicht umbrechen, auch nicht neben Symbolen. */ .nowrap { white-space: nowrap; } /* Meldungen */ .meldung { padding: 10px 14px; border-radius: 8px; margin: 0 0 16px; font-size: .9rem; } .fehler { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; } .hinweis { background: #dcfce7; color: #166534; border: 1px solid #86efac; } /* Anmeldung */ .login-seite { display: grid; place-items: center; min-height: 100vh; } .login-karte { background: var(--flaeche); border: 1px solid var(--rand); border-radius: 14px; padding: 30px 32px; width: min(370px, 92vw); display: flex; flex-direction: column; gap: 14px; box-shadow: 0 8px 30px rgba(20, 25, 60, .07); } .login-karte h1 { margin: 0 0 4px; font-size: 1.25rem; text-align: center; } .login-karte label { display: flex; flex-direction: column; gap: 5px; font-size: .85rem; color: var(--grau); } .login-karte input { padding: 9px 11px; border: 1px solid var(--rand); border-radius: 8px; font: inherit; color: var(--text); } .login-karte input:focus { outline: 2px solid var(--akzent); outline-offset: 1px; border-color: var(--akzent); } .login-karte .btn { justify-content: center; margin-top: 4px; } .fuss { text-align: center; color: var(--grau); font-size: .8rem; padding: 20px; } /* --- Seitenkopf und Suche ------------------------------------------------- */ .seiten-kopf { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; } .seiten-kopf h1 { margin: 0; flex: 1; } .anzahl { font-size: .8rem; font-weight: 600; color: var(--grau); background: var(--flaeche); border: 1px solid var(--rand); padding: 2px 9px; border-radius: 20px; vertical-align: middle; margin-left: 6px; } .suchleiste { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; } .suchleiste input[type=search], .suchleiste select { padding: 8px 11px; border: 1px solid var(--rand); border-radius: 8px; font: inherit; min-width: 200px; } /* --- Formulare ------------------------------------------------------------ */ .feldgitter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .feldgitter label { display: flex; flex-direction: column; gap: 5px; font-size: .82rem; color: var(--grau); } .feldgitter .breit2 { grid-column: span 2; } .feldgitter .breit4 { grid-column: 1 / -1; } .feldgitter input, .feldgitter select, .feldgitter textarea { padding: 8px 11px; border: 1px solid var(--rand); border-radius: 8px; font: inherit; color: var(--text); background: #fff; width: 100%; } .feldgitter input:focus, .feldgitter select:focus, .feldgitter textarea:focus { outline: 2px solid var(--akzent); outline-offset: 1px; border-color: var(--akzent); } .feldgitter textarea { resize: vertical; } /* Rechenknopf neben einem Feld: sitzt auf der Höhe der Eingabefelder */ .feldgitter .rechenknopf { display: flex; align-items: flex-end; } /* Auswahlfeld mit Knopf daneben (z.B. "+ neu"), auf einer Zeile trotz der Spalte im Label */ .feld-mit-knopf { display: flex; gap: 6px; } .feld-mit-knopf select { flex: 1; min-width: 0; } .rechenzeile { margin: 10px 0 0; min-height: 1.1em; } .aktionsleiste { display: flex; gap: 10px; align-items: center; margin-top: 4px; } .btn-gefahr { background: #fee2e2; color: #991b1b; border-color: #fca5a5; margin-left: auto; } .btn-gefahr:hover { background: #fecaca; border-color: #f87171; } /* --- Marken und Zustände -------------------------------------------------- */ [class^="marke-"] { font-size: .74rem; font-weight: 600; padding: 2px 8px; border-radius: 12px; background: #eef0fb; color: #4338ca; } .marke-vermittler { background: #fef3c7; color: #92400e; } .marke-endkunde { background: #dbeafe; color: #1e40af; } .marke-lieferant { background: #f3e8ff; color: #6b21a8; } .marke-sonstige { background: #f1f5f9; color: #475569; } .status-aktiv { color: #166534; font-weight: 600; font-size: .82rem; } tr.gedimmt { opacity: .55; } a.benutzername { color: var(--grau); } @media (max-width: 760px) { .feldgitter { grid-template-columns: 1fr 1fr; } .feldgitter .breit2, .feldgitter .breit4 { grid-column: 1 / -1; } } /* --- Herkunft der Firmen -------------------------------------------------- */ .herkunft-kimai { font-size: .74rem; font-weight: 600; padding: 2px 8px; border-radius: 12px; background: #e0f2fe; color: #075985; white-space: nowrap; } .herkunft-crm { font-size: .74rem; font-weight: 600; padding: 2px 8px; border-radius: 12px; background: #f1f5f9; color: #475569; } .info { background: #e0f2fe; color: #075985; border: 1px solid #7dd3fc; } input.gesperrt, .gesperrt { background: #f8fafc; color: var(--grau); cursor: not-allowed; } /* --- Kanban --------------------------------------------------------------- */ .tafel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: start; } .spalte { background: #eef0f6; border: 1px solid var(--rand); border-radius: var(--radius); padding: 12px; } .spalte h2 { font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; color: var(--grau); margin: 0 0 10px; display: flex; align-items: center; gap: 6px; } .karten { display: flex; flex-direction: column; gap: 9px; min-height: 90px; border-radius: 8px; } .karten.ziel { outline: 2px dashed var(--akzent); outline-offset: 3px; } .karte { background: var(--flaeche); border: 1px solid var(--rand); border-left: 3px solid #cbd5e1; border-radius: 8px; padding: 10px 12px; cursor: pointer; box-shadow: 0 1px 2px rgba(20,25,60,.05); } .karte:hover { border-color: var(--akzent); } .karte.zieht { opacity: .45; } .karte.prio-high { border-left-color: #dc2626; } .karte.prio-ongoing { border-left-color: #0891b2; } .karte.prio-medium { border-left-color: #94a3b8; } .karte.prio-low { border-left-color: #cbd5e1; } .karte-titel { font-weight: 600; font-size: .92rem; line-height: 1.35; } .karte-text { color: var(--grau); font-size: .82rem; margin-top: 5px; } .karte-fuss { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; } .chip { font-size: .72rem; background: #eef0fb; color: #4338ca; padding: 2px 8px; border-radius: 10px; } .chip-person { background: #ecfdf5; color: #047857; } .chip-spaet { background: #fee2e2; color: #991b1b; font-weight: 600; } /* --- Dialog --------------------------------------------------------------- */ .ueberlagerung { position: fixed; inset: 0; background: rgba(15,20,45,.45); display: grid; place-items: center; padding: 20px; z-index: 50; } .ueberlagerung[hidden] { display: none; } .dialog-karte { background: var(--flaeche); border-radius: 14px; padding: 24px 26px; width: min(680px, 96vw); max-height: 92vh; overflow: auto; box-shadow: 0 20px 60px rgba(15,20,45,.28); } .dialog-karte h2 { margin: 0 0 16px; font-size: 1.15rem; } .dialog-karte .aktionsleiste { margin-top: 18px; } @media (max-width: 820px) { .tafel { grid-template-columns: 1fr; } } /* --- Prioritäten ---------------------------------------------------------- */ .karte-kopf { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; } .prio { font-size: .66rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 1px 7px; border-radius: 4px; } .prio-marke-high { background: #fee2e2; color: #991b1b; } .prio-marke-ongoing { background: #cffafe; color: #155e75; } .prio-marke-medium { background: #f1f5f9; color: #475569; } .prio-marke-low { background: #f8fafc; color: #94a3b8; } .chip-projekt { background: #ede9fe; color: #5b21b6; font-weight: 600; } .karte-kopf .chip { margin-left: auto; } /* --- Kalender ------------------------------------------------------------- */ .monatsleiste { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .monatsleiste strong { font-size: 1.05rem; min-width: 170px; text-align: center; } .kalender { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--rand); border: 1px solid var(--rand); border-radius: var(--radius); overflow: hidden; } .kal-wochentag { background: #eef0f6; padding: 7px 9px; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--grau); } .kal-tag { background: var(--flaeche); min-height: 106px; padding: 5px 6px; display: flex; flex-direction: column; gap: 3px; min-width: 0; overflow: hidden; } .kal-tag.kal-fremd { background: #fafbfd; } .kal-tag.kal-we { background: #f7f8fc; } .kal-tag.kal-heute { box-shadow: inset 0 0 0 2px var(--akzent); } .kal-zahl { font-size: .78rem; font-weight: 600; color: var(--grau); } .kal-heute .kal-zahl { color: var(--akzent); } .kal-fremd .kal-zahl { opacity: .45; } .kal-eintrag { font-size: .74rem; padding: 3px 6px; border-radius: 4px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; } .kal-eintrag:hover { filter: brightness(.94); } .kal-eintrag.erledigt { text-decoration: line-through; opacity: .55; } /* Zeiteinträge aus Kimai: bewusst anders als Aufgaben - gruener Balken links und Stundenzahl in fester Ziffernbreite, damit sie untereinander stehen. */ .kal-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; } .kal-summe { font-size: .68rem; font-weight: 700; color: #047857; background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 999px; padding: 0 5px; white-space: nowrap; } .kal-fremd .kal-summe { opacity: .5; } .kal-zeit { display: flex; gap: 5px; align-items: baseline; font-size: .72rem; color: #065f46; background: #ecfdf5; border-left: 3px solid #10b981; border-radius: 0 4px 4px 0; padding: 2px 5px; text-decoration: none; overflow: hidden; } .kal-zeit:hover { background: #d1fae5; text-decoration: none; } .kal-zeit-dauer { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; } /* min-width:0 ist Pflicht: ohne das behaelt der Text im Flex-Element seine volle Eigenbreite, die Tagesspalte waechst mit und das Raster schiebt Sa/So aus dem Bild. */ .kal-zeit-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kal-zeit.abgerechnet { color: var(--grau); background: #f3f4f6; border-left-color: #9ca3af; } .kal-legende { margin-top: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .kal-zeit-muster { pointer-events: none; } /* Termine aus den Checklisten - eigene Farbe, damit sie weder mit Aufgaben noch mit Zeiteinträgen verwechselt werden */ .kal-termin { display: flex; align-items: center; gap: 5px; margin-top: 3px; padding: 2px 5px; border-radius: 5px; border-left: 3px solid #a855f7; background: #f5f3ff; color: #5b21b6; font-size: .72rem; cursor: pointer; text-decoration: none; } .kal-termin:hover { background: #ede9fe; } .kal-termin.erledigt { text-decoration: line-through; opacity: .55; } .kal-termin-zeit { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; } .kal-termin-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ohne-datum { display: flex; flex-wrap: wrap; gap: 6px; } .ohne-datum .kal-eintrag { white-space: normal; } @media (max-width: 820px) { .kal-tag { min-height: 74px; } .monatsleiste strong { min-width: auto; } } /* --- Zeiterfassung -------------------------------------------------------- */ /* Das Buchungsformular braucht keine 1,35 Teile - die Monatsliste schon. minmax(0,...) verhindert, dass lange Beschreibungen die Spalte aufblähen. */ .zeit-raster { display: grid; grid-template-columns: minmax(340px, 0.8fr) minmax(0, 1.2fr); gap: 16px; align-items: start; } .tabelle-eng th, .tabelle-eng td { padding: 5px 8px; font-size: .85rem; } @media (max-width: 900px) { .zeit-raster { grid-template-columns: 1fr; } } /* --- Zeitzeilen ----------------------------------------------------------- */ /* Überschrift mit Schaltfläche am rechten Rand, ohne Umbruch der Plaketten */ .kopf-mit-knopf { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .kopf-mit-knopf .btn { margin-left: auto; } .kopf-mit-knopf .btn ~ .btn { margin-left: 0; } /* Merkmale abrechenbar / abgerechnet: schmale Spalten, Zeichen statt Text */ .merkmal { color: #d1d5db; font-size: .85rem; } .merkmal.ja { color: #059669; } .tabelle-eng th.r[title] { white-space: nowrap; } .aktionsleiste .haken { display: flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--grau); } .zeit-verlauf { grid-column: 1 / -1; } .zeit-verlauf h2 .anzahl { margin-left: 6px; } .summenzeile th { background: var(--hell); font-weight: 700; } /* Kopfzeile eines Projektblocks: Name samt Laufzeit, rechts die Projektsumme */ tr.projektzeile > td { background: var(--hell); font-weight: 700; border-top: 2px solid var(--rand); } tr.projektzeile .klein { font-weight: 400; margin-left: 6px; } /* Stundenbudget: was noch offen ist - ueberzogen in der Warnfarbe */ .rest-offen { color: var(--grau); } .rest-weg { color: #991b1b; font-weight: 600; } .anzahl-warnung { background: #fee2e2; border-color: #fca5a5; color: #991b1b; } /* Kommentar zur Buchung: eigene Zeile unter der Beschreibung, bewusst zurueckhaltend */ .zeit-kommentar { display: block; color: var(--grau); font-size: .78rem; margin-top: 2px; } .zeit-zeile { cursor: pointer; } .zeit-zeile:hover { background: #f6f7fc; } .zeit-zeile.gewaehlt { background: #eef0fb; box-shadow: inset 3px 0 0 var(--akzent); } .zeit-zeile.exportiert { color: var(--grau); cursor: default; } .zeit-zeile.exportiert:hover { background: transparent; } .zeile-kimai { text-decoration: none; color: var(--grau); font-size: 1rem; padding: 0 4px; } .zeile-kimai:hover { color: var(--akzent); text-decoration: none; } .datei-symbol { margin-right: 6px; } code { background: #f1f5f9; padding: 1px 6px; border-radius: 4px; font-size: .85em; } /* --- Neue Dokumente ------------------------------------------------------- */ .neu-leiste { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--rand); } .neu-leiste input[type=text] { padding: 7px 10px; border: 1px solid var(--rand); border-radius: 8px; font: inherit; min-width: 190px; } .chip-doku { background: #fef3c7; color: #92400e; font-weight: 600; text-decoration: none; } .chip-doku:hover { background: #fde68a; text-decoration: none; } .doku-verweis { font-size: .85rem; padding: 2px 0 6px; } /* --- Umschalter aktiv/alle ------------------------------------------------ */ .schalter { display: inline-flex; border: 1px solid var(--rand); border-radius: 8px; overflow: hidden; } .schalter a { padding: 8px 14px; font-size: .85rem; font-weight: 600; color: var(--grau); background: var(--flaeche); text-decoration: none; display: flex; align-items: center; gap: 6px; } .schalter a + a { border-left: 1px solid var(--rand); } .schalter a:hover { background: var(--hintergrund); text-decoration: none; } .schalter a.an { background: var(--akzent); color: #fff; } .zaehler { font-size: .74rem; opacity: .75; font-weight: 500; } .schalter a.an .zaehler { opacity: .9; } .schalter-klein a { padding: 4px 9px; font-size: .76rem; } .projekt-filter { float: right; font-weight: 400; display: flex; align-items: center; gap: 4px; } .projekt-filter input { width: auto; margin: 0; } .projekt-filter label { display: inline; color: var(--grau); cursor: pointer; } .haken { flex-direction: row !important; align-items: center; gap: 7px !important; color: var(--text) !important; } .haken input { width: auto !important; } h3 { font-size: .95rem; margin: 0 0 12px; } .anzahl-geld { background: #ecfdf5; border-color: #a7f3d0; color: #047857; } /* --- Notizen-Editor ------------------------------------------------------- */ .feld { display: flex; flex-direction: column; gap: 5px; } .feld-beschriftung { font-size: .82rem; color: var(--grau); } .editor-leiste { display: flex; gap: 3px; align-items: center; flex-wrap: wrap; border: 1px solid var(--rand); border-bottom: none; border-radius: 8px 8px 0 0; padding: 5px 7px; background: #fafbfd; } .editor-leiste button { border: 1px solid transparent; background: none; cursor: pointer; padding: 3px 8px; border-radius: 5px; font: inherit; font-size: .82rem; color: var(--text); } .editor-leiste button:hover { background: #eef0f6; border-color: var(--rand); } .editor-leiste .trenner { width: 1px; height: 16px; background: var(--rand); margin: 0 3px; } .editor-leiste .abstand { margin-left: auto; } .editor-leiste button.quelle { font-family: ui-monospace, monospace; font-size: .74rem; color: var(--grau); } /* Im Quelltext-Modus greifen die Auszeichnungsknöpfe nicht - das soll man sehen */ .editor-leiste-aus button:not(.quelle) { opacity: .35; pointer-events: none; } .editor-quelltext { border: 1px solid var(--rand); border-radius: 0 0 8px 8px; padding: 9px 11px; min-height: 120px; font: .82rem/1.5 ui-monospace, "Cascadia Mono", Consolas, monospace; resize: vertical; width: 100%; box-sizing: border-box; } .editor-quelltext:focus { outline: 2px solid var(--akzent); outline-offset: -1px; } .editor { border: 1px solid var(--rand); border-radius: 0 0 8px 8px; padding: 9px 11px; min-height: 96px; max-height: 260px; overflow-y: auto; background: #fff; font: inherit; } .editor:focus { outline: 2px solid var(--akzent); outline-offset: -1px; } .editor:empty::before { content: attr(data-platzhalter); color: #b6bccd; } .editor p { margin: 0 0 .5em; } /* Überschriften im Notizfeld: erkennbar, aber ohne den Dialog zu sprengen */ .editor h2 { font-size: 1.05rem; margin: .2em 0 .4em; } .editor h3 { font-size: .95rem; margin: .2em 0 .4em; } .editor ul, .editor ol { margin: 0 0 .5em; padding-left: 1.3em; } /* --- Checkliste ----------------------------------------------------------- */ .checkliste { display: flex; flex-direction: column; gap: 5px; } .check-zeile { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .check-zeile input[type=text] { flex: 1; padding: 6px 9px; border: 1px solid var(--rand); border-radius: 7px; font: inherit; } .check-zeile input[type=checkbox] { width: auto; margin: 0; flex: 0 0 auto; } .check-zeile.erledigt input[type=text] { text-decoration: line-through; color: var(--grau); background: #fafbfd; } /* Termin am Checklistenpunkt: schmal, die Uhrzeit erscheint erst mit Datum. Die Auswahl muss `.feldgitter input { width: 100% }` schlagen - sonst zieht sich das Datumsfeld über die ganze Zeile und drückt den Text auf null Breite. */ .check-zeile .check-termin, .check-neu .check-termin, .check-zeile .check-zeit, .check-neu .check-zeit { flex: 0 0 auto; padding: 5px 7px; border: 1px solid var(--rand); border-radius: 7px; font-size: .78rem; color: var(--grau); } .check-zeile .check-termin, .check-neu .check-termin { width: 8.4rem; } .check-zeile .check-zeit, .check-neu .check-zeit { width: 5.4rem; } .check-zeile input[type=text] { min-width: 6rem; } .check-zeile.hat-termin .check-termin { color: var(--text); border-color: var(--akzent); } .check-zeile.erledigt .check-termin, .check-zeile.erledigt .check-zeit { opacity: .55; } .check-weg { border: none; background: none; color: #c3c8d6; cursor: pointer; font-size: .95rem; padding: 2px 5px; border-radius: 5px; } .check-weg:hover { color: #c00; background: #fee2e2; } .check-neu { display: flex; gap: 7px; margin-top: 7px; flex-wrap: wrap; } .check-neu input[type=text] { flex: 1; min-width: 8rem; padding: 7px 10px; border: 1px dashed var(--rand); border-radius: 7px; font: inherit; } /* --- Checklistenstand auf der Karte --------------------------------------- */ .karte-check { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: .74rem; color: var(--grau); font-weight: 600; } .karte-check.vollstaendig { color: #047857; } .check-symbol { font-size: .9rem; } .check-balken { flex: 1; height: 4px; background: #e8ebf3; border-radius: 3px; overflow: hidden; } .check-balken span { display: block; height: 100%; background: var(--akzent); border-radius: 3px; } .karte-check.vollstaendig .check-balken span { background: #10b981; } /* Naechster Termin aus der Checkliste, auf der Karte */ .karte-termin { display: flex; align-items: center; gap: 5px; margin-top: 6px; padding: 2px 6px; border-radius: 5px; background: #f5f3ff; color: #5b21b6; font-size: .72rem; } .karte-termin.spaet { background: #fee2e2; color: #991b1b; font-weight: 600; } .karte-termin-wann { white-space: nowrap; font-variant-numeric: tabular-nums; } .karte-termin-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .karte-termin-mehr { margin-left: auto; opacity: .7; } /* Sammelknopf in der Spaltenüberschrift */ .spalte-aktion { margin-left: auto; display: inline; } .spalte-aktion .btn { font-weight: 500; text-transform: none; letter-spacing: 0; } .login-logo { display: block; margin: 0 auto 4px; } .marke { display: inline-flex; align-items: center; gap: 9px; } .marke img { border-radius: 6px; } .konto-punkt { display: inline-block; width: 11px; height: 11px; border-radius: 50%; } input[type=color] { padding: 2px; height: 38px; cursor: pointer; } /* ---- Mail ---------------------------------------------------------------- */ .mail-leiste { display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; margin-bottom:1rem; } .mail-leiste .suchleiste { display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; } .mail-leiste .haken { font-size:.85rem; color:var(--grau); display:flex; gap:.3rem; align-items:center; } .mail-stand { color:var(--grau); margin-left:auto; white-space:nowrap; } .schalter .zaehler { display:inline-block; margin-left:.35rem; padding:0 .35rem; border-radius:8px; background:var(--akzent); color:#fff; font-size:.72rem; font-weight:600; } .mail-raster { display:grid; grid-template-columns:minmax(280px, 380px) 1fr; gap:1rem; align-items:start; } .mail-liste { padding:0; max-height:calc(100vh - 230px); overflow-y:auto; } .mail-zeile { display:flex; gap:.6rem; padding:.7rem .8rem; border-bottom:1px solid var(--rand); text-decoration:none; color:inherit; } .mail-zeile:hover { background:var(--hell); } .mail-bulk { display:flex; gap:.4rem; align-items:center; padding:.45rem .6rem; border-bottom:1px solid var(--rand); background:var(--hell); position:sticky; top:0; z-index:2; } .mail-bulk .haken { margin:0 .2rem 0 .25rem; } .mail-zeile-huelle { display:flex; align-items:center; gap:.35rem; padding-left:.5rem; border-bottom:1px solid var(--rand); } .mail-zeile-huelle .mail-zeile { flex:1; min-width:0; border-bottom:none; } .mail-zeile-huelle:hover { background:var(--hell); } .mail-zeile.offen { background:var(--hell); box-shadow:inset 3px 0 0 var(--akzent); } .mail-zeile.ungelesen .mail-betreff, .mail-zeile.ungelesen .mail-von { font-weight:600; } .konto-punkt { width:9px; height:9px; border-radius:50%; flex:0 0 9px; margin-top:.4rem; display:inline-block; } .mail-inhalt { min-width:0; flex:1; } .mail-kopf { display:flex; justify-content:space-between; gap:.5rem; font-size:.85rem; } .mail-von, .mail-betreff { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; } .mail-datum { color:var(--grau); font-size:.78rem; white-space:nowrap; } .mail-betreff { font-size:.9rem; margin-top:.1rem; } .mail-fuss { display:flex; gap:.4rem; align-items:center; font-size:.78rem; color:var(--grau); margin-top:.2rem; } .blaettern { display:flex; gap:.8rem; align-items:center; justify-content:center; padding:.8rem; } .mail-ansicht { max-height:calc(100vh - 230px); overflow-y:auto; } .mail-titel { font-size:1.15rem; margin:0 0 .6rem; } .mail-meta { border-bottom:1px solid var(--rand); padding-bottom:.7rem; margin-bottom:.9rem; display:flex; flex-direction:column; gap:.15rem; } .mail-bilder { font-size:.85rem; } .mail-anhaenge { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:.9rem; } .mail-anhaenge .anhang { display:inline-flex; gap:.35rem; align-items:center; padding:.35rem .6rem; border:1px solid var(--rand); border-radius:6px; font-size:.85rem; text-decoration:none; color:inherit; background:var(--hell); } .mail-anhaenge .anhang:hover { border-color:var(--akzent); } .mail-koerper { line-height:1.55; overflow-x:auto; word-break:break-word; } .mail-koerper img { max-width:100%; height:auto; } .mail-koerper table { max-width:100%; } .mail-koerper blockquote { border-left:3px solid var(--rand); margin:.6rem 0; padding-left:.8rem; color:var(--grau); } .mail-koerper pre { white-space:pre-wrap; font-family:inherit; margin:0; } @media (max-width: 900px) { .mail-raster { grid-template-columns:1fr; } .mail-liste, .mail-ansicht { max-height:none; } } .mail-aktionen { display:flex; gap:.4rem; flex-wrap:wrap; margin:.8rem 0 1rem; padding-bottom:.8rem; border-bottom:1px solid var(--rand); } .editor-mail { min-height: 260px; } .editor-mail .zitatkopf, .mail-koerper .zitatkopf { color: var(--grau); font-size: .88rem; } /* ---- Bewerbungen ------------------------------------------------------- */ .status-badge { display: inline-block; font-size: .74rem; font-weight: 600; padding: 2px 8px; border-radius: 12px; white-space: nowrap; background: #f1f5f9; color: #475569; } .sb-entwurf { background: #f1f5f9; color: #475569; } .sb-beworben { background: #e0e7ff; color: #3730a3; } .sb-rueckfrage { background: #fef9c3; color: #854d0e; } .sb-interview { background: #cffafe; color: #155e75; } .sb-angebot { background: #ffedd5; color: #9a3412; } .sb-gewonnen { background: #dcfce7; color: #166534; } .sb-abgelehnt { background: #fee2e2; color: #991b1b; } .sb-zurueckgezogen { background: #f3f4f6; color: #6b7280; } .sb-kein_feedback { background: #f3f4f6; color: #6b7280; } td.wv-faellig { color: #991b1b; font-weight: 600; } tr.zeile-inaktiv td { color: var(--grau); } label.ankreuz { flex-direction: row; align-items: center; gap: 7px; } label.ankreuz input { width: auto; } .bew-verlauf { list-style: none; margin: 12px 0 0; padding: 0; } .bew-verlauf li { display: flex; gap: 9px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--rand); font-size: .9rem; } .bew-verlauf li:first-child { border-top: none; } .bew-verlauf-zeit { color: var(--grau); font-variant-numeric: tabular-nums; white-space: nowrap; font-size: .82rem; } .bew-verlauf-sym { width: 1.2em; text-align: center; flex: none; } .bew-verlauf-text { min-width: 0; } .kal-bewerbung { display: flex; gap: 5px; align-items: center; margin-top: 3px; padding: 2px 6px; border-radius: 6px; font-size: .78rem; background: #eef2ff; border-left: 3px solid var(--akzent); color: inherit; text-decoration: none; } .kal-bewerbung:hover { background: #e0e7ff; text-decoration: none; } .kal-bewerbung-marke { font-weight: 700; flex: none; } .kal-bewerbung-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* „An CRM anhängen" unter der geöffneten Nachricht */ .mail-an-crm { margin:.4rem 0 1rem; padding:.7rem 0 0; border-top:1px solid var(--rand); } .mail-an-crm form { display:flex; gap:.4rem; flex-wrap:wrap; align-items:center; margin-bottom:.45rem; } .mail-an-crm select { max-width:22rem; } .mail-an-crm p.klein { margin:.2rem 0 0; } /* ---- Auswahllisten pflegen (Zahnrad neben dem Auswahlfeld) --------------- */ .auswahl-knopf { border: 1px solid var(--rand); background: var(--flaeche); color: var(--grau); border-radius: 6px; cursor: pointer; font-size: .9rem; line-height: 1; padding: 4px 7px; margin-left: 6px; vertical-align: middle; } .auswahl-knopf:hover { border-color: var(--akzent); color: var(--akzent); } .auswahl-dialog { border: none; border-radius: 12px; padding: 0; width: 92%; max-width: 520px; box-shadow: 0 20px 60px rgba(0,0,0,.3); color: var(--text); background: var(--flaeche); } .auswahl-dialog::backdrop { background: rgba(0,0,0,.45); } .auswahl-kopf { display: flex; align-items: baseline; gap: .6rem; padding: 1rem 1.1rem .8rem; border-bottom: 1px solid var(--rand); } .auswahl-kopf .klein { flex: 1; } .auswahl-schliessen { border: none; background: none; cursor: pointer; font-size: 1.3rem; line-height: 1; color: var(--grau); padding: 0 .2rem; } .auswahl-schliessen:hover { color: var(--text); } .auswahl-koerper { padding: .9rem 1.1rem; max-height: 60vh; overflow-y: auto; } .auswahl-zeile { display: flex; align-items: center; gap: 5px; margin-bottom: 6px; } .auswahl-zeile button { border: 1px solid var(--rand); background: var(--flaeche); color: var(--grau); border-radius: 5px; cursor: pointer; padding: 3px 7px; font-size: .78rem; line-height: 1; } .auswahl-zeile button:disabled { opacity: .35; cursor: default; } .auswahl-zeile button:not(:disabled):hover { border-color: var(--akzent); color: var(--akzent); } .auswahl-zeile input { flex: 1; padding: 5px 8px; border: 1px solid var(--rand); border-radius: 6px; font: inherit; font-size: .88rem; background: var(--flaeche); color: var(--text); } .auswahl-zeile .auswahl-weg:not(:disabled):hover { border-color: #f87171; color: #b91c1c; } .auswahl-neu { display: flex; gap: 6px; margin-top: .9rem; } .auswahl-neu input { flex: 1; padding: 6px 9px; border: 1px solid var(--rand); border-radius: 6px; font: inherit; font-size: .88rem; background: var(--flaeche); color: var(--text); } .auswahl-fuss { display: flex; align-items: center; gap: .6rem; padding: .8rem 1.1rem; border-top: 1px solid var(--rand); } .auswahl-fuss .klein { flex: 1; } /* ---- Stellenfunde -------------------------------------------------------- */ .sb-neu { background: #e0e7ff; color: #3730a3; } .sb-gesehen { background: #f1f5f9; color: #475569; } .sb-verworfen { background: #fee2e2; color: #991b1b; } .sb-offen { background: #dcfce7; color: #166534; } .sb-geschlossen { background: #f3f4f6; color: #6b7280; } /* Auffaellige Markierung neben dem Titel: schon als Bewerbung uebernommen. Bewusst kraeftiger als der normale .status-badge - genau das soll beim Ueberfliegen der Liste ins Auge springen. */ .beworben-marke { display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .01em; background: #16a34a; color: #fff; padding: 2px 9px; border-radius: 12px; margin-left: 6px; white-space: nowrap; vertical-align: middle; } .stellensuche-status { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; margin-bottom: .8rem; padding: .7rem .9rem; border: 1px solid var(--rand); border-radius: 10px; background: var(--flaeche); } .stellensuche-status .klein { color: var(--grau); } .sf-massenleiste { display: flex; align-items: center; gap: .7rem; margin-bottom: .5rem; } .sf-fortschritt { display: flex; align-items: center; gap: .7rem; margin: -.2rem 0 .8rem; } .sf-fortschritt-balken { flex: 1; max-width: 260px; height: 8px; border-radius: 4px; background: var(--rand); overflow: hidden; } .sf-fortschritt-fuellung { height: 100%; width: 0; background: var(--akzent); transition: width .3s ease; } /* Markieren: Stern-Umschalter je Zeile, geschuetzt-markierte Zeile dezent hervorgehoben. */ .sf-marker-knopf { border: none; background: none; cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 2px; color: #ca8a04; } .sf-marker-knopf:hover { opacity: .7; } tr.zeile-markiert td { background: #fffbeb; } .stichwort-liste { display: flex; flex-wrap: wrap; gap: 6px; margin: .5rem 0 .9rem; } /* .chip (Grundfarben/Schrift) kommt aus der Kanban-Karte weiter oben - hier nur das Layout dazu. */ .stichwort-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 6px 3px 10px; } .stichwort-chip.aus { background: #f1f5f9; color: var(--grau); } .stichwort-chip.negativ { background: #fee2e2; color: #991b1b; } .stichwort-chip.negativ.aus { background: #f1f5f9; color: var(--grau); } .stichwort-chip button { border: none; background: none; cursor: pointer; color: inherit; opacity: .55; font-size: .85rem; line-height: 1; padding: 0 2px; } .stichwort-chip button:hover { opacity: 1; } .stichwort-neu { display: flex; gap: 6px; margin-bottom: 1rem; } .stichwort-neu input { padding: 5px 9px; border: 1px solid var(--rand); border-radius: 6px; font: inherit; font-size: .85rem; background: var(--flaeche); color: var(--text); } /* RAV-Nachweis: Kopfzeile mit Zeitraum ueber der Tabelle. */ .rav-kopf { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem; } .rav-kopf h2 { margin: 0 0 4px; } .rav-kopf p { margin: 0 0 2px; } .rav-kopf .r { text-align: right; } /* Feste Spaltenbreiten (siehe in der Ansicht) statt Auto-Layout - sonst drueckt ein langer Ausschreibungstitel die Nachbarspalten je nach Bildschirmbreite unterschiedlich weit auseinander. Lange Woerter/Titel brechen in der Zelle um, statt die Spalte zu sprengen. */ .rav-tabelle { table-layout: fixed; } .rav-tabelle th, .rav-tabelle td { overflow-wrap: break-word; } /* Beim Drucken nur den Nachweis selbst zeigen - Kopfzeile, Navigation, Filterleiste und Knopfleiste raus, keine Schatten/Rahmen, die auf Papier nichts bringen. Querformat, weil sechs Spalten inkl. voller Firmenadresse im Hochformat zu eng sind. */ @media print { @page { size: landscape; margin: 1cm; } .kopf, .fuss, .keine-druckansicht { display: none !important; } body, main { margin: 0; padding: 0; background: #fff; } .rav-druck { box-shadow: none; border: none; padding: 0; } .rav-kopf h2 { font-size: 1.1rem; } .rav-kopf p { font-size: .8rem; } .rav-druck .tabelle th, .rav-druck .tabelle td { padding: 3px 6px; font-size: .62rem; line-height: 1.25; } .rav-druck .tabelle th { font-size: .58rem; } /* .klein setzt font-size in rem (wurzel-relativ) - das ignoriert die geschrumpfte Tabellenschrift oben, die Adresse unter der Firma wirkte dadurch groesser als der fette Firmenname selbst. Hier ausdruecklich mitschrumpfen. */ .rav-druck .tabelle .klein { font-size: .56rem; } } /* ========================================================================== Webmail — Verfassen (Standalone-Seite mailneu.php) ========================================================================== */ .mailneu textarea { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .9rem; line-height: 1.55; } .smtp-protokoll { margin-top: 12px; } .smtp-protokoll pre { background: #0f172a; color: #cbd5e1; padding: 12px; border-radius: 8px; overflow-x: auto; font-size: .78rem; } /* Standalone-Kalender (kalender.php) */ a.kal-zahl { text-decoration: none; align-self: flex-start; } a.kal-zahl:hover { text-decoration: underline; } .kal-marke { display: inline-flex; align-items: center; gap: 4px; margin-right: 12px; } .kal-marke .punkt, .punkt { display: inline-block; width: 9px; height: 9px; border-radius: 50%; } .kal-termin { color: var(--text); } .kal-termin-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ========================================================================== Webmail — Vierspaltenansicht im Stil von Betterbird Ordner | Liste | Nachricht | Termine ========================================================================== */ main:has(.wm) { max-width: none; margin: 0; padding: 0; } .wm { --w-ordner: 220px; --w-liste: 340px; --w-agenda: 250px; --split: 8px; display: grid; grid-template-columns: var(--w-ordner) var(--split) minmax(300px, 1fr) var(--split) var(--w-agenda); height: calc(100vh - 118px); border-top: 1px solid var(--rand); } .wm.wm-mit-nachricht { grid-template-columns: var(--w-ordner) var(--split) var(--w-liste) var(--split) minmax(340px, 1fr) var(--split) var(--w-agenda); } .wm.agenda-zu { grid-template-columns: var(--w-ordner) var(--split) 1fr; } .wm.wm-mit-nachricht.agenda-zu { grid-template-columns: var(--w-ordner) var(--split) var(--w-liste) var(--split) 1fr; } .wm.agenda-zu .wm-split[data-rolle="agenda"] { display: none; } .wm > * { overflow: auto; min-width: 0; } .wm > .wm-ordner, .wm > .wm-liste, .wm > .wm-nachricht { border-right: 1px solid var(--rand); } /* Ziehbare Trenner zwischen den Spalten. Die Greiffläche wird per JS-Handle über den 6px breiten Balken gebildet — KEIN über die Nachbarspalten ragendes ::before mehr (das schluckte sonst Klicks auf die rechte Kante der Nachrichtenliste). */ .wm-split { background: var(--rand); cursor: col-resize; position: relative; } .wm-split:hover, .wm-split.zieht { background: var(--akzent); } body.wm-zieht { cursor: col-resize; user-select: none; } /* Ordner */ .wm-ordner { background: #fbfbfd; padding: 8px; font-size: .84rem; } .wm-neu { display: block; text-align: center; margin-bottom: 10px; } .grp { margin-bottom: 12px; } .grp-kopf { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--grau); font-weight: 700; padding: 4px 6px; } .grp-zeile, .tree-row, .konto-grp > summary { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 6px; color: var(--text); white-space: nowrap; cursor: pointer; } .grp-zeile:hover, .tree-row:hover, .konto-grp > summary:hover { background: #eef0f6; text-decoration: none; } .grp-zeile.active, .tree-row.active { background: var(--akzent); color: #fff; } .grp-zeile.active .badge, .tree-row.active .badge { color: #fff; } .grp-zeile .ic { width: 16px; text-align: center; } .grp-zeile .nm, .tree-row a, .tree-noselect, .konto-grp > summary .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; } .tree-row a { color: inherit; } .badge { font-size: .72rem; color: var(--grau); font-variant-numeric: tabular-nums; } .konto-grp { margin-bottom: 2px; } .konto-grp > summary { list-style: none; font-weight: 600; } .konto-grp > summary::-webkit-details-marker { display: none; } .konto-grp > summary .punkt { flex: none; } .konto-baum { padding-left: 4px; } ul.tree { list-style: none; margin: 0; padding: 0; } ul.tree ul.tree { padding-left: 13px; } .tree-row { padding: 3px 6px; } .tw, .tw-leer { width: 14px; height: 14px; flex: none; border: 0; background: none; padding: 0; cursor: pointer; } .tw::before { content: "\25B8"; color: var(--grau); font-size: .72rem; } li.has-kids.auf > .tree-row .tw::before { content: "\25BE"; } .tree-kids { display: none; } li.auf > .tree-kids { display: block; } .tree-noselect { color: var(--grau); } .mini { color: var(--grau); font-size: .78rem; padding: 4px 6px; margin: 0; } /* Liste */ .wm-liste { display: flex; flex-direction: column; background: var(--flaeche); } .wm-liste-kopf { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--rand); flex: none; } .wm-liste-kopf .ordner-name { font-weight: 600; font-size: .82rem; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wm-liste-kopf .anzahl { color: var(--grau); font-size: .8rem; } .wm-liste-kopf .btn { margin-left: 0; } .wm-liste-kopf { flex-wrap: nowrap; padding: 5px 10px; } .wm-liste-kopf .btn-klein { padding: 2px 8px; } .wm-suche { padding: 6px 10px; border-bottom: 1px solid var(--rand); display: flex; gap: 6px; align-items: center; flex: none; } .wm-suche input[type="search"] { flex: 1; padding: 5px 9px; border: 1px solid var(--rand); border-radius: 7px; font: inherit; font-size: .85rem; } .wm-suche .x { color: var(--grau); padding: 0 4px; } .wm-aktionen { display: flex; gap: 4px; flex-wrap: wrap; padding: 6px 10px; border-bottom: 1px solid var(--rand); align-items: center; flex: none; } .wm-aktionen .alle { font-size: .78rem; color: var(--grau); display: flex; gap: 4px; align-items: center; } .wm-aktionen .alle input { width: 15px; height: 15px; } .wm-auswahl { font-size: .74rem; font-weight: 700; color: #fff; background: var(--akzent); border-radius: 999px; padding: 1px 8px; } ul.msgs { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; } ul.msgs li { display: grid; grid-template-columns: 22px 34px 1fr 20px; gap: 8px; align-items: center; padding: 7px 10px 7px 7px; border-bottom: 1px solid #eef0f4; border-left: 3px solid transparent; background: var(--flaeche); } ul.msgs li:hover { background: #f5f7fd; } /* Gelesen: gedämpft, kein Rand. */ ul.msgs li .msg .from { color: #6b7280; font-weight: 500; } ul.msgs li .msg .subj { color: #9aa0ac; font-weight: 400; } ul.msgs li .avatar { opacity: .6; } /* Ungelesen: kräftig, blauer Rand, leichte Tönung, Punkt. */ ul.msgs li.ungelesen { background: #eef3ff; border-left-color: var(--akzent); } ul.msgs li.ungelesen .msg .from { color: #111827; font-weight: 800; } ul.msgs li.ungelesen .msg .subj { color: #1f2937; font-weight: 600; } ul.msgs li.ungelesen .avatar { opacity: 1; } ul.msgs li.ungelesen .msg .time { color: var(--akzent-dunkel); font-weight: 700; } /* Geöffnet: klar hervorgehoben, schlägt beide. */ ul.msgs li.auf { background: #dbe3fb; border-left-color: var(--akzent-dunkel); } ul.msgs li.auf .msg .from, ul.msgs li.auf .msg .subj { color: #1e1b4b; } ul.msgs li.leer { display: block; padding: 24px; text-align: center; color: var(--grau); } ul.msgs .pick { display: flex; justify-content: center; align-items: center; } ul.msgs .pick input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; } ul.msgs .pick-grp { flex-direction: column; gap: 3px; cursor: pointer; } ul.msgs .pick-grp .kchip { width: 14px; height: 3px; border-radius: 2px; } ul.msgs .kchip { width: 4px; height: 30px; border-radius: 2px; } /* Zum Verschieben/Löschen angehakte Zeilen deutlich zeigen. */ ul.msgs li:has(.pick input:checked) { background: #fff7ed; border-left-color: #f59e0b; } .avatar { width: 34px; height: 34px; border-radius: 50%; color: #fff; font-weight: 700; font-size: .8rem; display: flex; align-items: center; justify-content: center; position: relative; } /* Absender-Logo über den Initialen; fehlt es, bleibt der Buchstabe (siehe Fehler-Handler in app.js). */ .avatar > img, .nx-avatar > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; border-radius: 50%; padding: 3px; box-sizing: border-box; } .nx-avatar { position: relative; } li.ungelesen .avatar::after { z-index: 1; } li.ungelesen .avatar::after { content: ""; position: absolute; right: -1px; top: -1px; width: 10px; height: 10px; border-radius: 50%; background: var(--akzent); border: 2px solid var(--flaeche); } a.msg { display: block; min-width: 0; color: var(--text); } a.msg:hover { text-decoration: none; } .msg .r1 { display: flex; justify-content: space-between; gap: 8px; } .msg .from { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .msg .time { color: var(--grau); font-size: .76rem; white-space: nowrap; flex: none; } .msg .r2 { display: flex; gap: 5px; align-items: baseline; } .msg .subj { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .msg .clip { font-size: .72rem; flex: none; } .msg .clip.spam { background: #fee2e2; color: #b91c1c; border-radius: 3px; padding: 0 3px; font-weight: 700; } .stern { color: #d1d5db; cursor: pointer; text-align: center; } .stern.an { color: #f59e0b; } .blaettern { display: flex; gap: 10px; align-items: center; justify-content: center; padding: 8px; border-top: 1px solid var(--rand); color: var(--grau); font-size: .85rem; flex: none; } /* Nachricht */ .wm-nachricht { display: flex; flex-direction: column; background: var(--flaeche); } .nx-werkzeug { border-bottom: 1px solid var(--rand); padding: 6px 8px; flex: none; } .nx-form { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; } .nx-btn { display: inline-flex; align-items: center; gap: 3px; padding: 4px 8px; border: 1px solid var(--rand); border-radius: 6px; background: var(--flaeche); color: var(--text); font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; white-space: nowrap; } .nx-btn:hover { background: #eef0f6; text-decoration: none; } .nx-ham { border-color: #86efac; background: #f0fdf4; color: #15803d; } .nx-spam { border-color: #fdba74; background: #fff7ed; color: #c2410c; } .nx-gefahr { color: #b91c1c; } .nx-zu { margin-left: auto; } .nx-trenn { width: 1px; align-self: stretch; background: var(--rand); margin: 0 3px; } .nx-kopf { padding: 12px 16px; border-bottom: 1px solid var(--rand); flex: none; } .nx-betreff { font-size: 1.15rem; font-weight: 700; margin-bottom: 8px; } .nx-zeile { display: flex; gap: 10px; align-items: flex-start; } .nx-avatar { width: 38px; height: 38px; border-radius: 50%; color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; } .nx-vonblock { flex: 1; min-width: 0; } .nx-adr, .nx-an { color: var(--grau); font-size: .82rem; } .nx-datum { color: var(--grau); font-size: .82rem; white-space: nowrap; } .nx-score { margin-top: 10px; font-size: .8rem; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 6px 10px; border-radius: 7px; background: #f1f5f9; } .nx-score.nx-verdaechtig { background: #fff7ed; } .nx-score.nx-spam { background: #fef2f2; } .nx-dkim { background: #dcfce7; color: #166534; border-radius: 4px; padding: 1px 6px; font-weight: 600; } .nx-pkt { font-weight: 700; font-variant-numeric: tabular-nums; } .nx-detail { color: var(--grau); } .nx-aktion { background: #e2e8f0; border-radius: 4px; padding: 1px 6px; font-weight: 600; } .nx-score.nx-spam .nx-aktion { background: #fecaca; color: #991b1b; } .nx-symbole { width: 100%; } .nx-symbole summary { cursor: pointer; color: var(--akzent); } .nx-symbole table { border-collapse: collapse; margin-top: 6px; width: 100%; } .nx-symbole td { padding: 2px 6px; border-bottom: 1px solid var(--rand); font-size: .76rem; vertical-align: top; } .nx-symbole td:first-child { text-align: right; font-variant-numeric: tabular-nums; } .nx-symbole td.plus { color: #dc2626; } .nx-symbole td.minus { color: #16a34a; } .nx-symbole td:nth-child(2) { font-family: ui-monospace, monospace; } .bilder-hinweis { margin: 10px 16px 0; background: var(--hintergrund); border: 1px dashed var(--rand); border-radius: 7px; padding: 6px 10px; font-size: .82rem; } .nx-koerper { padding: 14px 16px; overflow: auto; flex: 1; overflow-wrap: anywhere; line-height: 1.4; } .nx-koerper img { max-width: 100%; height: auto; } /* Grund-Reset für Mail-HTML: knappe Abstände, damit Mails ohne eigene Regeln nicht mit riesigen Absatzlücken erscheinen (Outlook zählt auf sein