:root { --navy: #06090f; --navy-2: #0b1422; --navy-3: #101c2e; --mint: #2ee6a8; --mint-tief: #0f9b6e; --mint-dunkel: #0b3d2c; --cyan: #38bdf8; --cyan-tief: #0e7fb3; --grund: #f3f6fa; --flaeche: #ffffff; --flaeche-2: #f7f9fc; --linie: #e2e8f0; --linie-2: #cbd5e1; --schrift: #0f172a; --schrift-2: #475569; --schrift-3: #94a3b8; --ok: #0f7a52; --ok-bg: #e4f6ee; --ok-rand: #b8e4cf; --warn: #8a5a08; --warn-bg: #fdf3dc; --warn-rand: #f0d9a3; --risk: #b42323; --risk-bg: #fdeaea; --risk-rand: #f2bcbc; --info: #0b6a95; --info-bg: #e6f4fb; --info-rand: #b6dff2; --neutral: #475569; --neutral-bg: #eef2f6; --neutral-rand: #d5dde6; --radius: 14px; --radius-s: 9px; --schatten: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 28px -16px rgba(15, 23, 42, .18); --schatten-gross: 0 2px 4px rgba(15, 23, 42, .05), 0 24px 48px -20px rgba(15, 23, 42, .28); --leuchten: 0 0 0 1px rgba(46, 230, 168, .35), 0 8px 28px -8px rgba(46, 230, 168, .45); --seite: 240px; --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", sans-serif; --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace; } * { box-sizing: border-box; } html { height: 100%; } body { margin: 0; min-height: 100%; background: var(--grund); color: var(--schrift); font: 14.5px/1.55 var(--font); -webkit-font-smoothing: antialiased; } a { color: var(--cyan-tief); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, p { margin: 0; } button, input, select, textarea { font: inherit; } .zahl { font-variant-numeric: tabular-nums; } .leise { color: var(--schrift-2); } .winzig { font-size: 12px; color: var(--schrift-3); } .mono { font-family: var(--mono); font-size: 12.5px; } svg { width: 16px; height: 16px; vertical-align: -3px; } dl { margin: 0; } .nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* =========================================================== Anwendungshuelle */ .huelle { display: grid; grid-template-columns: var(--seite) 1fr; min-height: 100vh; } .seitenleiste { background: linear-gradient(180deg, var(--navy-2) 0%, var(--navy-3) 100%); color: #93a4bb; display: flex; flex-direction: column; padding: 20px 14px 16px; position: sticky; top: 0; height: 100vh; border-right: 1px solid rgba(255,255,255,.06); } .marke { display: flex; align-items: center; gap: 11px; padding: 2px 8px 22px; color: #fff; } .marke-text { display: flex; flex-direction: column; min-width: 0; } .marke svg { width: 34px; height: 34px; flex: none; filter: drop-shadow(0 6px 14px rgba(46,230,168,.28)); } .marke-name { font-weight: 800; font-size: 16px; letter-spacing: -.01em; line-height: 1.1; } .marke-name b { color: var(--cyan); font-weight: 800; margin-left: 5px; } .marke-unter { font-size: 11.5px; color: #6f8199; margin-top: 3px; } .menue { display: flex; flex-direction: column; gap: 2px; } .menue a { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 9px; color: #a3b2c7; font-weight: 500; font-size: 13.5px; transition: background .12s, color .12s; } .menue a:hover { background: rgba(255,255,255,.05); color: #eaf0f7; text-decoration: none; } .menue a[aria-current="page"] { background: linear-gradient(135deg, rgba(46,230,168,.16), rgba(56,189,248,.12)); color: #fff; box-shadow: inset 0 0 0 1px rgba(46,230,168,.35); } .menue svg { width: 17px; height: 17px; flex: none; opacity: .85; } .aufgaben-badge { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: #d92d20; color: #fff; font: 700 11px/1 var(--font); font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--flaeche); } .menue .aufgaben-badge { margin-left: auto; box-shadow: 0 0 0 2px var(--navy-2); } .bereichsnav .aufgaben-badge { margin-left: 7px; } .menue a[aria-current="page"] svg { color: var(--mint); opacity: 1; } .menue-titel { font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.2px; color: #5b6b84; padding: 18px 12px 6px; } .wer { margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.07); display: flex; align-items: center; gap: 10px; } .avatar { width: 34px; height: 34px; border-radius: 50%; flex: none; background: linear-gradient(135deg, var(--mint), var(--cyan)); color: var(--navy); font-weight: 800; font-size: 12.5px; display: grid; place-items: center; letter-spacing: .03em; } .wer-name { display: block; color: #eaf0f7; font-weight: 600; font-size: 13px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wer-kanzlei { display: block; color: #7d8ea6; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wer-text { min-width: 0; flex: 1; } .wer form { margin: 0; } .wer .knopf { margin: 0; padding: 5px 9px; font-size: 12px; background: transparent; color: #a3b2c7; border: 1px solid rgba(255,255,255,.14); box-shadow: none; } .wer .knopf:hover { color: #fff; border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.05); filter: none; box-shadow: none; } .inhalt { min-width: 0; } .inhalt:has(> .bereichsnav) { --bereich-navhoehe: 55px; } .bereichsnav { display: flex; gap: 24px; align-items: stretch; height: 55px; padding: 0 28px; overflow-x: auto; background: var(--flaeche); border-bottom: 1px solid var(--linie); } .bereichsnav a { display: flex; align-items: center; flex: none; color: var(--schrift-2); font-size: 13px; font-weight: 600; border-bottom: 3px solid transparent; padding: 0 2px; white-space: nowrap; } .bereichsnav a:hover { color: var(--mint-dunkel); text-decoration: none; } .bereichsnav a[aria-current="page"] { color: var(--mint-dunkel); border-bottom-color: var(--mint-tief); } @media (max-width: 56rem) { .bereichsnav { gap: 20px; padding: 0 16px; } } main { max-width: 1180px; margin: 0 auto; padding: 28px 32px 80px; } main.schmal { max-width: 720px; } /* ============================================================= Seitenkopf */ .kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; } .kopf h1 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; } .kopf .unter { color: var(--schrift-2); font-size: 13.5px; margin-top: 4px; } .kopf-rechts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .brotkrumen { font-size: 12.5px; color: var(--schrift-3); margin-bottom: 6px; } .brotkrumen a { color: var(--schrift-2); } .chip { display: inline-flex; align-items: center; gap: 7px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 999px; padding: 6px 12px; font-size: 12.5px; color: var(--schrift-2); box-shadow: var(--schatten); white-space: nowrap; } .chip svg { width: 14px; height: 14px; } .kopf-rechts .knopf { margin: 0; } .chip.muster { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-rand); } /* ================================================================ Kacheln */ .kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 22px; } .kachel { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 15px 18px 13px; box-shadow: var(--schatten); position: relative; overflow: hidden; } .kachel-titel { font-size: 12px; color: var(--schrift-2); font-weight: 600; } .kachel-wert { font-size: 26px; font-weight: 750; letter-spacing: -.02em; margin-top: 4px; line-height: 1.1; font-variant-numeric: tabular-nums; } .kachel-wert.mint { color: var(--mint-tief); } .kachel-text { font-size: 12px; color: var(--schrift-3); margin-top: 6px; } /* ================================================================= Karten */ .karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 18px 20px; margin: 0 0 16px; box-shadow: var(--schatten); } .karte.leer { border-style: dashed; box-shadow: none; background: transparent; } .karte.tabelle { padding: 0; overflow-x: auto; } .karte.tabelle > h2, .karte.tabelle > p { margin: 14px 18px; } .listenfilter { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; } .listenfilter > div { flex: 1 1 180px; min-width: 0; } .listenfilter select { width: 100%; margin-bottom: 0; } .listenfilter button { margin: 0; } .karte.tabelle table { margin: 0; } .karte.tabelle .tabellenkopf { padding: 14px 18px 0; } .karte.vorschlag { border-color: rgba(46,230,168,.45); box-shadow: var(--schatten), inset 3px 0 0 var(--mint); } .karte h2 { font-size: 15px; font-weight: 700; letter-spacing: -.01em; } .karte h2 + p.leise, .karte h3 + p.leise { margin-top: 2px; } .karte h3 { font-size: 13.5px; font-weight: 700; margin: 18px 0 8px; } .karte h3:first-child { margin-top: 0; } h2.abschnitt { font-size: 12px; text-transform: uppercase; letter-spacing: .09em; color: var(--schrift-2); font-weight: 700; margin: 26px 0 10px; } h2.abschnitt:first-of-type { margin-top: 0; } .karte-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; } .spalten > .karte { margin: 0; } @media (max-width: 64rem) { .spalten { grid-template-columns: 1fr; } } /* Original und Kontierung gleichzeitig sichtbar; das Original bleibt beim Scrollen stehen. */ main.rechnung-detail { max-width: 1600px; } .beleg-abgleich { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; } .beleg-original { position: sticky; top: 24px; min-width: 0; } .beleg-vorschlaege { min-width: 0; } .beleg-dateiname { overflow-wrap: anywhere; color: var(--schrift-2); font-size: 12px; margin-bottom: 12px; } .beleg-pdf { display: block; width: 100%; height: max(540px, calc(100vh - 250px)); border: 1px solid var(--linie); border-radius: var(--radius-s); background: #f0f2f5; } .beleg-bild { max-height: calc(100vh - 250px); min-height: 320px; overflow: auto; background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: var(--radius-s); } .beleg-bild img { display: block; width: 100%; height: auto; } .beleg-original > .winzig { margin-top: 10px; } .beleg-abgleich .kontierung, .ap-mitte .kontierung { grid-template-columns: 1fr 1fr; } .beleg-abgleich .kontierung .pfeil, .ap-mitte .kontierung .pfeil { display: none; } .beleg-abgleich .kontierung .betrag, .ap-mitte .kontierung .betrag { grid-column: 1 / -1; text-align: left; } .beleg-abgleich .spalten, .ap-mitte .spalten { grid-template-columns: 1fr; } @media (max-width: 80rem) { .beleg-abgleich { grid-template-columns: 1fr; } .beleg-original { position: static; } .beleg-pdf { height: 65vh; min-height: 380px; } .beleg-bild { max-height: 65vh; } } /* ---- Rechnungsarbeitsplatz (LED-63, Candis-Bedienvorbild docs/candis-bedienanalyse-2026-09-13.md): kompakter Kopf, darunter EIN Bildschirm hoher Bereich (Seitenleiste/Original/Formular mit jeweils eigenem Scroll), darunter ein zuschaltbares Positionspanel mit fester Hoehe. public/arbeitsplatz.js schaltet Sichtbarkeit per hidden-Attribut um und misst die tatsaechlich verbleibende Fensterhoehe (Kopf/Meldungen sind je nach Zustand unterschiedlich hoch) - ohne Skript bleibt .ap-viewport auf der CSS-Mindesthoehe stehen und alles bleibt bedienbar, nur eben ohne die feste Bildschirmfuellung. ---- */ .ap-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 12px; box-shadow: var(--schatten); flex: none; } .ap-toolbar .ap-titel { font-weight: 700; font-size: 13.5px; } .ap-toolbar .ap-titel span { display: block; font-weight: 400; color: var(--schrift-3); font-size: 11.5px; } .ap-werkzeuge { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; } .ap-mandatwechsel { flex: none; font-size: 12.5px; } .ap-mandatwechsel > summary { cursor: pointer; list-style: none; color: var(--schrift-2); padding: 6px 4px; } .ap-mandatwechsel > summary::-webkit-details-marker { display: none; } .ap-mandatwechsel[open] { position: relative; } .ap-mandatwechsel[open] > .karte { position: absolute; right: 0; top: 100%; z-index: 5; width: 320px; margin: 6px 0 0; } .ap-klara { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--schrift-2); flex: 1 1 260px; min-width: 0; } .ap-klara span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ap-klara strong { font-weight: 700; } .klara-avatar { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; flex: none; background: #d7f3fb url('/klara/sternbild/portrait.webp?v=1') center/cover no-repeat; border: 1px solid #0891b2; } .klara-marker, .klara-spark { color: #7c5cff; margin-left: 3px; font-size: 12px; cursor: help; } .klara-feld { position: relative; } .klara-feld input, .klara-feld select, input.klara-glanz, select.klara-glanz { border-color: rgba(124, 92, 255, .55); box-shadow: 0 0 0 3px rgba(124, 92, 255, .12); } @keyframes klara-glanz-kf { 0% { text-shadow: 0 0 0 rgba(124, 92, 255, 0); box-shadow: 0 0 0 3px rgba(124, 92, 255, .12); } 35% { text-shadow: 0 0 10px rgba(124, 92, 255, .55); box-shadow: 0 0 0 5px rgba(124, 92, 255, .22); } 100% { text-shadow: 0 0 0 rgba(124, 92, 255, 0); box-shadow: 0 0 0 3px rgba(124, 92, 255, .12); } } .klara-glanz, .klara-feld.klara-glanz input, .klara-feld.klara-glanz select, input.klara-glanz, select.klara-glanz { animation: klara-glanz-kf 1.4s ease-out 1; } @media (prefers-reduced-motion: reduce) { .klara-glanz, .klara-feld.klara-glanz input, .klara-feld.klara-glanz select, input.klara-glanz, select.klara-glanz { animation: none; } } /* Zwei Faelle (Zwischenreview 14.09.2026, Punkt 2): bei einem bereits zugeordneten Belegeingang (data-ap-fenster) steht der Arbeitsplatz direkt unter einem kompakten Kopf - dort darf/soll er den restlichen Bildschirm fuellen, arbeitsplatz.js misst dafuer die tatsaechlich verbleibende Hoehe. Bei der manuellen Erfassung stehen zusaetzliche Auswahl-/Upload-Karten OBERHALB - deren Hoehe schwankt (Fehler, Mandantenliste), ein Bildschirm-Fit waere dort negativ/0 und wuerde das Formular verstecken. Ohne das Attribut bleibt es deshalb bei einer festen Mindesthoehe und normalem Dokumentfluss (kein height:calc, kein JS-Eingriff). */ .ap-viewport { display: flex; flex-direction: column; min-height: 560px; } .ap-viewport[data-ap-fenster] { min-height: 0; height: calc(100vh - 260px); } .ap-mitte { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(420px, 520px); gap: 16px; } .ap-sidebar { width: 300px; min-width: 0; min-height: 0; height: 100%; overflow-y: auto; display: flex; flex-direction: column; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: var(--schatten); } .ap-sidebar[hidden] { display: none; } /* Ist die Seitenleiste sichtbar, wird sie zur ERSTEN Spalte - Original/Formular ruecken auf 2/3. */ .ap-mitte:has(> .ap-sidebar:not([hidden])) { grid-template-columns: 300px minmax(0, 1fr) minmax(420px, 520px); } .ap-sidebar-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--linie); flex: none; } .ap-sidebar-kopf h2 { font-size: 14px; } .ap-sidebar-inhalt { padding: 14px 16px 16px; overflow-y: auto; min-height: 0; } .ap-zeitleiste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .ap-zeitleiste li { border-left: 2px solid var(--linie); padding: 2px 0 2px 12px; font-size: 12.5px; } .ap-zl-titel { font-weight: 600; display: flex; align-items: center; gap: 6px; } .ap-zl-meta { color: var(--schrift-3); font-size: 11px; margin-top: 2px; } .ap-kommentarform { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--linie); } .ap-kommentarform textarea { margin-bottom: 8px; } .ap-kommentarform button { margin: 0; } .ap-original, .erfassung-felder, .ap-formular { min-height: 0; height: 100%; overflow-y: auto; } .ap-original { display: flex; flex-direction: column; } .ap-original .beleg-original { display: flex; flex-direction: column; flex: 1; min-height: 0; margin: 0; } .ap-original .beleg-pdf, .ap-original .beleg-bild { flex: 1; min-height: 0; height: auto; } @media (max-width: 80rem) { .ap-mitte, .ap-mitte:has(> .ap-sidebar:not([hidden])) { grid-template-columns: 1fr; flex: none; } /* .ap-viewport[data-ap-fenster] (Attributselektor, 0,0,2,0) ist spezifischer als die vorherige reine .ap-viewport-Regel (0,0,1,0) und gewann - der Bildschirm-Fit blieb auf schmalen Screens aktiv, obwohl arbeitsplatz.js die Inline-Hoehe entfernt (Abnahmefund 14.09.2026). Beide Selektoren explizit mit derselben Regel treffen. */ .ap-viewport, .ap-viewport[data-ap-fenster] { height: auto; min-height: 0; } .ap-sidebar { height: auto; max-height: 60vh; } .ap-original, .erfassung-felder, .ap-formular { height: auto; overflow-y: visible; } /* Browserbefund 14.09.2026: .ap-original .beleg-pdf (zwei Klassen) ist spezifischer als das fruehere .beleg-pdf { height:65vh } oben und gewann deshalb auf schmalen Bildschirmen mit height:auto/flex:1 in einem nicht mehr hoch begrenzten Container - der PDF-Rahmen fiel auf ~150px zusammen. Gleiche Spezifitaet, gleicher Geltungsbereich, aber NACH der Basisregel notiert: gewinnt in der Kaskade und stellt eine feste, brauchbare Hoehe wieder her. Gilt fuer Erfassung UND Belegseite (beide nutzen .ap-original), kein Inline-Stil, keine CSP-Ausnahme noetig. Der Container waechst dabei natuerlich mit (kein flex:1 mehr hier). */ .ap-original .beleg-pdf { flex: none; height: 65vh; min-height: 380px; } .ap-original .beleg-bild { flex: none; max-height: 65vh; height: auto; } } .ap-positionen-panel { flex: none; height: 32vh; min-height: 220px; margin-top: 14px; overflow-y: auto; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); box-shadow: var(--schatten); } .ap-positionen-panel[hidden] { display: none; } @media (max-width: 700px) { .ap-positionen-panel { height: 46vh; } } /* Belegseite (rechnungSeite): kein umschliessender Bildschirm-Arbeitsplatz wie bei der Erfassung, die Seitenleiste steht deshalb frei oberhalb des bestehenden Original/Vorschlaege-Rasters statt in einer Grid-Spalte. */ .ap-mitte-frei .ap-sidebar { width: 100%; max-width: 460px; height: auto; max-height: 60vh; margin-bottom: 16px; } .ap-mitte-frei .ap-sidebar-inhalt { overflow-y: auto; max-height: 44vh; } /* -------------------------------------------------- Rechnung erfassen (LED-63) */ main.rechnung-erfassung { max-width: 1680px; } .erfassung-intro { max-width: 760px; } .erfassung-form fieldset.karte { min-width: 0; } .erfassung-form fieldset.karte legend { font-size: 15px; font-weight: 700; letter-spacing: -.01em; padding: 0 6px 0 0; margin-bottom: 12px; } .erfassung-felder { display: flex; flex-direction: column; gap: 0; } .unterkarte { background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: var(--radius-s); padding: 12px 14px; margin-top: 12px; } .unterkarte > summary { cursor: pointer; font-weight: 650; font-size: 13.5px; list-style: none; } .unterkarte > summary::-webkit-details-marker { display: none; } .unterkarte > summary::before { content: "▸ "; } .unterkarte[open] > summary::before { content: "▾ "; } .unterkarte[open] > summary { margin-bottom: 12px; } /* Fester Fuss AUSSERHALB der scrollenden Spalten (Zwischenreview 14.09.2026, Punkt 3) - bleibt sichtbar, auch wenn die Positionstabelle geoeffnet ist. */ .ap-aktionen-fest { flex: none; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; background: var(--flaeche); border-top: 1px solid var(--linie); padding: 12px 4px; margin-top: 10px; } @media (max-width: 80rem) { .ap-aktionen-fest { position: sticky; bottom: 0; } } /* ---- Positionstabelle: echte -Zeilen fuer Bezeichnung/Netto/Steuer/ Brutto/Steuersatz/Kostenstelle, seltene Felder (Artikelnummer, Split von) erst in einer per JS auf-/zuklappbaren Detailzeile darunter (Zwischen- review 14.09.2026: keine 12 vollen Formulare als Hauptdarstellung, aber auch keine Akkordeon-Liste - eine echte Tabelle). Ohne arbeitsplatz.js bleiben alle Detailzeilen offen (kein hidden-Attribut zum Umschalten, siehe positionsErfassungBlock/zeile()). ---- */ .pz-kopf { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; padding: 13px 18px; border-bottom: 1px solid var(--linie); font-size: 13px; background: var(--flaeche); } /* KEIN eigenes position:sticky mehr hier (Abnahmefund 14.09.2026): zwei unabhaengig "geratene" sticky-Offsets (dieser Kopf UND die Tabellenkoepfe) liessen sich nur mit einem fragilen, handgeschaetzten Pixelwert koordinieren - der stimmte in der Praxis nicht und verdeckte die erste Zeile. Nur noch die Tabellenkoepfe selbst bleiben beim Scrollen sichtbar. */ /* Nur horizontal - overflow-y bleibt "visible", damit die sticky-Bezugsbox fuer th (unten) beim umschliessenden .ap-positionen-panel bleibt, nicht hier (sonst haette dieser Wrapper keine eigene Scrollhoehe und der Tabellenkopf wuerde nie tatsaechlich "kleben"). */ .pz-tabelle-wrap { overflow-x: auto; } table.pz-tabelle { width: 100%; min-width: 1020px; table-layout: fixed; border-collapse: collapse; font-size: 12.5px; } /* Spaltenbreiten ueber :nth-child statt - Inline-Styles werden von der CSP (style-src 'self') blockiert und liessen den Browser alle acht Spalten gleich breit (~150px) darstellen (Abnahmefund 14.09.2026). Reihenfolge: Nr., Bezeichnung, Netto, Steuer, Brutto, Steuersatz, Kostenstelle, Aktion. */ .pz-tabelle col:nth-child(1) { width: 40px; } .pz-tabelle col:nth-child(2) { width: 300px; } .pz-tabelle col:nth-child(3), .pz-tabelle col:nth-child(4), .pz-tabelle col:nth-child(5) { width: 120px; } .pz-tabelle col:nth-child(6) { width: 100px; } .pz-tabelle col:nth-child(7) { width: 130px; } .pz-tabelle col:nth-child(8) { width: 90px; } .pz-tabelle th { text-align: left; font-weight: 700; color: var(--schrift-2); background: var(--flaeche-2); border-bottom: 1px solid var(--linie); padding: 8px 12px; text-transform: uppercase; letter-spacing: .04em; font-size: 10.5px; position: sticky; top: 0; z-index: 1; } .pz-tabelle td { padding: 8px 12px; border-bottom: 1px solid var(--linie); vertical-align: middle; overflow: hidden; } .pz-tabelle tr.pz-details-zeile > td { border-bottom: 1px dashed var(--linie); background: var(--flaeche-2); padding: 14px 18px 18px; } .pz-tabelle tr.pz-details-zeile[hidden] { display: none; } .pz-zahl { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .pz-bez-zelle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pz-tabelle input, .pz-tabelle select { width: 100%; min-width: 0; } .pz-zahl input { text-align: right; } .pz-details-knopf { font-size: 11.5px; padding: 5px 10px; margin: 0; } @media (max-width: 700px) { /* table.pz-tabelle (stil.ts oben) hat dieselbe Spezifitaet PLUS den Elementselektor (0,0,1,1) und schlug die vorherige reine Klassenregel .pz-tabelle (0,0,1,0) - die mobile Tabelle blieb dadurch bei 1020px Mindestbreite und table-layout:fixed stehen (Abnahmefund 14.09.2026). */ table.pz-tabelle { min-width: 0; table-layout: auto; } .pz-tabelle colgroup { display: none; } .pz-tabelle thead { display: none; } .pz-tabelle, .pz-tabelle tbody, .pz-tabelle tr, .pz-tabelle td { display: block; width: 100% !important; } .pz-tabelle tr:not(.pz-details-zeile) { border-bottom: 1px solid var(--linie); padding: 8px 0; } .pz-tabelle td { padding: 3px 4px; border-bottom: 0; } .pz-tabelle td[data-spalte]::before { content: attr(data-spalte) ": "; color: var(--schrift-3); font-weight: 600; } .pz-zahl { text-align: left; } } /* ---- Datenfelder (Beschriftung ueber Wert) ---- */ .felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 18px; } .felder.breit { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } .feld { min-width: 0; } .feld dt { font-size: 11.5px; color: var(--schrift-3); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; } .feld dd { margin: 3px 0 0; font-size: 14px; overflow-wrap: anywhere; } .feld dd.gross { font-size: 18px; font-weight: 700; letter-spacing: -.01em; } .feld dd .leise { font-size: 12.5px; } /* Luna war sich bei diesem Wert unsicher (LED-88): gelb, mit Grund darunter */ .feld.unsicher { background: var(--warn-bg); border: 1px solid var(--warn-rand); border-radius: 8px; padding: 6px 8px; margin: -7px -9px; } .feld.unsicher dt { color: var(--warn); } .unsicher-grund { display: block; margin-top: 3px; font-size: 12px; color: var(--warn); } input[data-unsicher], select[data-unsicher], textarea[data-unsicher] { background: var(--warn-bg); border-color: var(--warn-rand); } /* Standort laut Rechnung weicht vom Postfach ab (LED-89): Grund gelb oben an den Buchungsvorschlägen */ .standort-hinweis { background: var(--warn-bg); border: 1px solid var(--warn-rand); border-radius: 8px; padding: 10px 12px; margin: 0 0 14px; font-size: 13.5px; } .standort-hinweis strong { color: var(--warn); } td.unsicher-zelle { background: var(--warn-bg); } /* Vorauswahl ueberschrieben (LED-96): "Fuer kuenftige Rechnungen merken" direkt unter dem Feld */ .merken-feld { margin: 10px 0 2px; padding: 8px 10px; background: var(--info-bg); border: 1px solid var(--info-rand); border-radius: 8px; } .merken-feld[hidden] { display: none; } label.merken-haken { display: flex; gap: 8px; align-items: center; margin: 0; font-weight: 600; } label.merken-haken.winzig { margin-top: 6px; font-weight: 500; } .merken-feld .winzig { margin: 4px 0 0; color: var(--schrift-2); } .feld.voll { grid-column: 1 / -1; } /* ---- Kontierung: Konto -> Gegenkonto ---- */ .kontierung { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 14px; align-items: center; background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: var(--radius-s); padding: 14px 16px; margin: 12px 0; } .kontierung .pfeil { color: var(--schrift-3); font-size: 18px; } .konto-nr { font-size: 20px; font-weight: 750; letter-spacing: -.01em; font-variant-numeric: tabular-nums; } .konto-name { font-size: 12.5px; color: var(--schrift-2); } .konto-rolle { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--schrift-3); font-weight: 700; } .kontierung .betrag { text-align: right; } .kontierung .betrag .konto-nr { color: var(--schrift); } @media (max-width: 40rem) { .kontierung { grid-template-columns: 1fr; } .kontierung .pfeil { display: none; } .kontierung .betrag { text-align: left; } } .begruendung { display: flex; gap: 10px; align-items: flex-start; background: linear-gradient(135deg, rgba(46,230,168,.08), rgba(56,189,248,.06)); border: 1px solid rgba(46,230,168,.28); border-radius: var(--radius-s); padding: 12px 14px; margin: 12px 0; font-size: 13.5px; } .begruendung svg { width: 18px; height: 18px; flex: none; color: var(--mint-tief); margin-top: 1px; } /* ---- Konfidenz ---- */ .konfidenz { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; } .konfidenz strong, .konfidenz .leise { white-space: nowrap; } .balken { width: 70px; height: 6px; border-radius: 3px; background: var(--neutral-bg); overflow: hidden; } .balken i { display: block; height: 100%; border-radius: 3px; background: var(--mint-tief); } .balken.warn i { background: #d99a1e; } .balken.risk i { background: var(--risk); } /* ================================================================ Abzeichen */ .abz { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.5; white-space: nowrap; border: 1px solid var(--neutral-rand); background: var(--neutral-bg); color: var(--neutral); } .abz::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; } .abz.ok { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-rand); } .abz.warn { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-rand); } .abz.risk { background: var(--risk-bg); color: var(--risk); border-color: var(--risk-rand); } .abz.info { background: var(--info-bg); color: var(--info); border-color: var(--info-rand); } .abz.mint { background: rgba(46,230,168,.14); color: var(--mint-dunkel); border-color: rgba(46,230,168,.45); } /* ================================================================= Tabellen */ table { width: 100%; border-collapse: collapse; margin-top: 4px; } th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--linie); vertical-align: top; font-size: 13.5px; } thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--schrift-2); font-weight: 700; background: var(--flaeche-2); border-bottom: 1px solid var(--linie-2); white-space: nowrap; } tbody tr:last-child td { border-bottom: 0; } tbody tr:hover td { background: #f8fbff; } td.zahl, th.zahl { text-align: right; font-variant-numeric: tabular-nums; } th[scope="row"] { font-weight: 600; color: var(--schrift-2); width: 34%; background: transparent; font-size: 13px; text-transform: none; letter-spacing: 0; } .karte.tabelle th:first-child, .karte.tabelle td:first-child { padding-left: 18px; } .karte.tabelle th:last-child, .karte.tabelle td:last-child { padding-right: 18px; } td form { margin: 0; } td .knopf { margin: 0; } td.risk { color: var(--risk); font-weight: 600; } /* ================================================================ Formulare */ label { display: block; margin: 14px 0 5px; font-weight: 600; font-size: 13px; color: var(--schrift); } label:first-of-type { margin-top: 0; } label .leise { font-weight: 500; } input[type=text], input[type=search], input[type=email], input[type=password], input[type=date], input[type=file], select, textarea { width: 100%; padding: 9px 11px; font-size: 14px; border: 1px solid var(--linie-2); border-radius: var(--radius-s); background: #fff; color: inherit; transition: border-color .12s, box-shadow .12s; } textarea { resize: vertical; min-height: 84px; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--mint-tief); box-shadow: 0 0 0 3px rgba(46,230,168,.25); } button:focus-visible, a:focus-visible { outline: 3px solid rgba(56,189,248,.55); outline-offset: 2px; } form p.leise { margin-top: 10px; font-size: 12.5px; } .formzeile { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 16px; } .formzeile label { margin-top: 14px; } .datei-ablage { position: relative; margin: 16px 0 10px; } .datei-ablage .datei-ablage-hinweis { position: absolute; inset: 20px 18px auto; margin: 0; pointer-events: none; line-height: 1.5; } .datei-ablage-hinweis strong { display: block; font-size: 16px; } .datei-ablage-hinweis span { display: block; font-weight: 400; color: var(--schrift-2); margin-top: 4px; } .datei-ablage input[type=file] { display: block; width: 100%; min-height: 160px; padding: 98px 18px 18px; border: 2px dashed var(--linie-2); border-radius: var(--radius); background: var(--flaeche-2); cursor: pointer; } .datei-ablage:hover input[type=file], .datei-ablage input[type=file]:focus { border-color: var(--mint-tief); background: var(--flaeche); } .datei-ablage input[type=file]::file-selector-button { padding: 8px 12px; margin-right: 12px; border: 1px solid var(--linie-2); border-radius: var(--radius-s); background: var(--flaeche); color: var(--schrift); font: inherit; font-weight: 600; cursor: pointer; } @media (max-width: 36rem) { .datei-ablage input[type=file] { padding-top: 116px; } } .aktionen { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 16px; } .aktionen form { margin: 0; } .aktionen .knopf { margin: 0; } /* ================================================================== Knoepfe */ .knopf, button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; margin-top: 14px; padding: 9px 16px; font-size: 13.5px; font-weight: 650; background: linear-gradient(135deg, #34f0b2 0%, #22c993 100%); color: #052018; border: 0; border-radius: var(--radius-s); cursor: pointer; box-shadow: 0 6px 18px -8px rgba(46,230,168,.65), inset 0 1px 0 rgba(255,255,255,.35); transition: transform .08s, box-shadow .12s, filter .12s; text-decoration: none; white-space: nowrap; } .knopf:hover, button:hover { filter: brightness(1.04); box-shadow: 0 8px 22px -8px rgba(46,230,168,.75), inset 0 1px 0 rgba(255,255,255,.35); text-decoration: none; } .knopf:active, button:active { transform: translateY(1px); } .knopf.zweit, button.zweit { background: var(--flaeche); color: var(--schrift); border: 1px solid var(--linie-2); box-shadow: var(--schatten); } .knopf.zweit:hover, button.zweit:hover { background: var(--flaeche-2); filter: none; box-shadow: var(--schatten); } .knopf.gefahr, button.gefahr { background: #fff; color: var(--risk); border: 1px solid var(--risk-rand); box-shadow: none; } .knopf.gefahr:hover, button.gefahr:hover { background: var(--risk-bg); filter: none; box-shadow: none; } .knopf.dunkel, button.dunkel { background: var(--navy-3); color: #eaf0f7; box-shadow: none; } .knopf.dunkel:hover, button.dunkel:hover { background: #17283f; filter: none; box-shadow: none; } .knopf.klein, button.klein { padding: 5px 10px; font-size: 12.5px; margin: 0; } .knopf svg { width: 15px; height: 15px; } .leisetaste { margin: 0; } /* ================================================================ Meldungen */ .meldung { border-radius: var(--radius-s); padding: 11px 14px; margin: 0 0 16px; border: 1px solid; font-size: 13.5px; display: flex; gap: 10px; align-items: flex-start; } .meldung::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; margin-top: 7px; } .meldung.fehler { background: var(--risk-bg); border-color: var(--risk-rand); color: var(--risk); } .meldung.gut { background: var(--ok-bg); border-color: var(--ok-rand); color: var(--ok); } .meldung.hinweis { background: var(--warn-bg); border-color: var(--warn-rand); color: var(--warn); } .meldung.hinweis strong { color: inherit; } .meldung .code { display: block; margin-top: 6px; color: var(--schrift); } .meldung > div { min-width: 0; flex: 1; } /* ==================================================================== Code */ code, .code, pre.code { font-family: var(--mono); font-size: 12.5px; background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: 6px; padding: 2px 6px; overflow-wrap: anywhere; } pre.code { padding: 12px 14px; overflow-x: auto; white-space: pre; margin: 8px 0 0; line-height: 1.5; max-height: 26rem; } pre.ocr-text { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 28rem; overflow-y: auto; } .hash { font-family: var(--mono); font-size: 12px; color: var(--schrift-2); } /* ============================================================ Nachweiskette */ .kette { list-style: none; margin: 0; padding: 0; position: relative; } .kette::before { content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, var(--mint), var(--cyan)); opacity: .5; border-radius: 1px; } .kette li { position: relative; padding: 6px 0 14px 34px; } .kette li::before { content: ""; position: absolute; left: 6px; top: 12px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid var(--mint-tief); box-sizing: border-box; } .kette li:last-child { padding-bottom: 2px; } .kette .ereignis { font-weight: 650; font-size: 13.5px; } .kette .meta { font-size: 12px; color: var(--schrift-2); margin-top: 2px; display: flex; flex-wrap: wrap; gap: 4px 12px; } .kette .details { font-family: var(--mono); font-size: 11.5px; color: var(--schrift-3); margin-top: 4px; overflow-wrap: anywhere; } /* ================================================================ Leerstand */ .leerstand { text-align: center; padding: 34px 20px; color: var(--schrift-2); } .leerstand svg { width: 40px; height: 40px; color: var(--schrift-3); margin-bottom: 10px; } .leerstand p { max-width: 36rem; margin: 0 auto; } .leerstand .knopf { margin-top: 16px; } /* ==================================================================== Fuss */ .fuss { max-width: 1180px; margin: 0 auto; padding: 0 32px 28px; color: var(--schrift-3); font-size: 12px; display: flex; gap: 14px; flex-wrap: wrap; } /* ================================================================ Das Tor */ /* Anmeldung, zweiter Faktor, Einladung: dunkle Buehne wie die Website. */ body.tor { background: radial-gradient(ellipse 1100px 700px at 85% -10%, #0e2033 0%, transparent 55%), radial-gradient(ellipse 900px 600px at -10% 110%, #0b1f1a 0%, transparent 55%), var(--navy); color: #e8eef4; display: flex; flex-direction: column; } .tor-kopf { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 22px 32px; } .tor-kopf .marke { padding: 0; } .tor-kopf .chip { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); color: #93a4bb; box-shadow: none; } .tor-buehne { position: relative; flex: 1; display: grid; place-items: center; padding: 20px 20px 60px; } .tor-karte { width: 100%; max-width: 420px; background: rgba(13, 24, 38, .78); border: 1px solid rgba(255,255,255,.1); border-radius: 18px; padding: 30px 30px 26px; box-shadow: 0 30px 80px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(46,230,168,.06), 0 0 60px -20px rgba(46,230,168,.25); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .tor-karte.breit { max-width: 520px; } .tor-karte h1 { font-size: 22px; font-weight: 750; letter-spacing: -.02em; color: #fff; } .tor-karte .unter { color: #8fa3b5; font-size: 13.5px; margin-top: 5px; } .tor-karte label { color: #c7d2df; margin-top: 16px; } .tor-karte input[type=text], .tor-karte input[type=email], .tor-karte input[type=password] { background: rgba(6, 9, 15, .6); border-color: rgba(255,255,255,.14); color: #fff; padding: 11px 12px; } .tor-karte input:focus { border-color: var(--mint); box-shadow: 0 0 0 3px rgba(46,230,168,.22); } .tor-karte .knopf, .tor-karte button { width: 100%; margin-top: 20px; padding: 11px 16px; font-size: 14px; } .tor-karte .knopf.zweit, .tor-karte button.zweit { background: transparent; color: #c7d2df; border-color: rgba(255,255,255,.16); box-shadow: none; margin-top: 10px; } .tor-karte .knopf.zweit:hover, .tor-karte button.zweit:hover { background: rgba(255,255,255,.05); color: #fff; box-shadow: none; } .tor-karte a { color: var(--cyan); } .tor-karte .leise { color: #8fa3b5; } .tor-karte p.leise { font-size: 12.5px; } .tor-karte .meldung { margin: 16px 0 0; } .tor-karte .meldung.fehler { background: rgba(180,35,35,.16); border-color: rgba(242,120,120,.35); color: #ffb4b4; } .tor-karte .meldung.gut { background: rgba(46,230,168,.12); border-color: rgba(46,230,168,.35); color: #9ff0d3; } .tor-karte .meldung.hinweis { background: rgba(224,169,79,.14); border-color: rgba(224,169,79,.4); color: #f3d9a4; } .tor-karte .code, .tor-karte code { background: rgba(6,9,15,.7); border-color: rgba(255,255,255,.12); color: #e8eef4; } .tor-karte .geheimnis { display: block; font-size: 17px; letter-spacing: .14em; text-align: center; padding: 10px; margin: 8px 0; } .tor-karte .qr-feld { display: flex; justify-content: center; margin: 14px 0 8px; } .tor-karte .qr-feld svg { width: 13rem; height: 13rem; max-width: 100%; background: #fff; border-radius: 10px; padding: 8px; } .tor-karte .karte { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.08); box-shadow: none; padding: 16px; margin: 18px 0 0; color: #dbe4ee; } .tor-karte .karte h2 { color: #fff; font-size: 14px; margin-bottom: 6px; } .tor-karte .karte p { font-size: 13px; } .tor-fuss { position: relative; text-align: center; color: #4f6275; font-size: 12px; padding: 0 20px 24px; } /* ================================================================ Schmal */ @media (max-width: 56rem) { .huelle { grid-template-columns: 1fr; } .seitenleiste { position: static; height: auto; padding: 12px 14px; gap: 8px; } .marke { padding-bottom: 8px; } .menue { flex-direction: row; flex-wrap: wrap; } .menue a { padding: 7px 10px; font-size: 13px; } .menue-titel { display: none; } .wer { margin-top: 4px; padding-top: 10px; } main { padding: 20px 16px 60px; } .fuss { padding: 0 16px 20px; } .tor-kopf { padding: 16px 18px; } .tor-karte { padding: 24px 20px 20px; } } @media (max-width: 36rem) { table, thead, tbody, tr, th, td { display: block; } thead { display: none; } tbody tr { border-bottom: 1px solid var(--linie); padding: 8px 0; } tbody tr:last-child { border-bottom: 0; } td { border: 0; padding: 3px 18px; } td::before { content: attr(data-spalte); display: block; color: var(--schrift-3); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; } td:not([data-spalte])::before { content: none; } td.zahl { text-align: left; } th[scope="row"] { width: auto; padding: 8px 18px 0; } th[scope="row"] + td { padding-bottom: 8px; } } main.freigaben { max-width:1800px; padding:24px 28px 60px; } .fg-aufgaben { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:24px; } .fg-aufgaben a { display:flex;flex-direction:column;gap:4px;padding:18px 20px;border:1px solid var(--linie);border-radius:12px;background:#fff;color:var(--schrift); } .fg-aufgaben a:hover { border-color:var(--mint-tief);text-decoration:none; } .fg-aufgaben span { color:var(--schrift-2);font-weight:600; }.fg-aufgaben strong {font-size:30px;line-height:1.4}.fg-aufgaben strong svg{width:32px;height:32px}.fg-aufgaben small {color:var(--schrift-2)} .fg-reiter {display:flex;gap:24px;border-bottom:1px solid var(--linie);margin-bottom:20px;flex-wrap:wrap}.fg-reiter a{padding:12px 0;color:var(--schrift-2);font-weight:600}.fg-reiter a[aria-current]{color:var(--mint-dunkel);border-bottom:3px solid var(--mint-tief)}.fg-reiter span,.fg-anzahl{border-radius:12px;background:var(--neutral-bg);padding:2px 7px;font-size:12px} .fg-filter{display:flex;align-items:end;gap:12px;flex-wrap:wrap;margin:0 0 20px}.fg-filter>div{flex:1;min-width:170px}.fg-filter>div:first-child{flex:1.5;min-width:220px}.fg-filter label{margin-top:0}.fg-filter input,.fg-filter select{margin-bottom:0}.fg-filter button{margin:0}.fg-filter>a{padding-bottom:9px} .fg-spalten{position:relative;align-self:end;padding:9px 0}.fg-spalten summary{cursor:pointer}.fg-spalten>div{position:absolute;top:100%;right:0;width:300px;max-height:440px;overflow:auto;z-index:4;background:#fff;border:1px solid var(--linie);border-radius:9px;padding:16px;box-shadow:var(--schatten-gross)}.fg-spalten label{display:flex;gap:8px;margin:5px 0}.fg-spalten input{width:auto} .fg-tabelle{margin-top:0}.fg-tabelle th{white-space:nowrap}.fg-tabelle td{vertical-align:middle}.fg-rechnung-link{font-weight:650;white-space:nowrap}.fg-mir,.fg-dringend{display:block;color:var(--warn);font-size:12px;margin-top:4px}.fg-mir{color:var(--mint-tief)} .fg-detail-kopf{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:0 0 18px}.fg-detail-kopf>div{display:flex;gap:12px;align-items:center}.fg-detail-kopf span{color:var(--schrift-2)} .fg-arbeitsplatz{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,440px);grid-template-areas:"original daten" "historie daten";gap:18px;align-items:start} .fg-original{grid-area:original;background:#e9edf2;border:1px solid var(--linie);border-radius:12px;overflow:hidden;min-width:0}.fg-original header{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:#fff;border-bottom:1px solid var(--linie)}.fg-original h2{font-size:14px;margin:0}.fg-dateiname{font-size:12px;color:var(--schrift-2);padding:8px 16px;overflow-wrap:anywhere}.fg-original iframe{display:block;width:100%;height:calc(100vh - 220px - var(--bereich-navhoehe,0px));min-height:560px;border:0;background:#fff}.fg-original img{display:block;width:100%;height:auto}.fg-leer{padding:64px 24px;text-align:center;color:var(--schrift-2)}.fg-leer svg{width:40px;height:40px;color:var(--mint-tief);margin-bottom:12px}.fg-leer h2{font-size:18px;margin-bottom:6px}.fg-leer a{display:inline-block;margin-top:16px} .fg-daten{grid-area:daten;min-width:0;background:#fff;border:1px solid var(--linie);border-radius:12px;overflow:clip;position:sticky;top:18px}.fg-daten-scroll{padding:20px;max-height:calc(100vh - 375px);min-height:260px;overflow:auto;scrollbar-gutter:stable}.fg-rechnung-titel{display:flex;justify-content:space-between;gap:10px;align-items:center}.fg-rechnung-titel h1{font-size:20px;margin:0;overflow-wrap:anywhere}.fg-rechnung-titel strong{font-size:19px;white-space:nowrap}.fg-rechnung-titel small{color:var(--schrift-2)}.fg-eingang{font-size:12px;color:var(--schrift-2);margin:6px 0 16px}.fg-daten h2{font-size:14px;margin:22px 0 12px}.fg-felder{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}.fg-feld.breit{grid-column:1/-1}.fg-feld dt{font-size:11.5px;color:var(--schrift-2);margin-bottom:4px}.fg-feld dd{margin:0;padding:9px 10px;background:var(--flaeche-2);border:1px solid var(--linie);border-radius:6px;min-height:39px;font-size:13px;overflow-wrap:anywhere}.fg-pruefungen{border:1px solid var(--linie);border-radius:7px;padding:10px;font-size:12px}.fg-pruefungen summary{cursor:pointer;font-weight:600}.fg-pruefungen p{margin-top:8px}.fg-position{border:1px solid var(--linie);border-radius:8px;padding:12px;margin-bottom:12px}.fg-position summary{font-size:13px;font-weight:600;cursor:pointer}.fg-position summary span{display:block;color:var(--schrift-2);font-weight:400}.fg-position dl{margin-top:12px}.fg-quelle{font-size:12px;color:var(--schrift-2);margin-top:12px}.fg-hinweis{padding:12px;background:var(--warn-bg);border-radius:7px} .fg-schritte{list-style:none;padding:0;margin:16px 0}.fg-schritte li{display:flex;gap:12px;padding-bottom:18px}.fg-schritt-nr{flex:none;width:26px;height:26px;display:grid;place-items:center;border:1px solid var(--linie-2);border-radius:50%;color:var(--schrift-2);font-size:12px}.fg-schritte .fertig .fg-schritt-nr{background:var(--ok-bg);color:var(--ok)}.fg-schritte .aktuell .fg-schritt-nr{border:2px solid var(--mint-tief);color:var(--mint-tief)}.fg-schritte small{display:block;font-size:11.5px;color:var(--schrift-2)}.fg-schritte p{font-size:12.5px;margin:5px 0}.fg-schritte strong{font-size:13px} .fg-entscheidung{padding:16px 20px;background:#fff;border-top:1px solid var(--linie);box-shadow:0 -5px 18px -15px #34445a}.fg-entscheidung>small{color:var(--schrift-2);font-size:10px;letter-spacing:.08em}.fg-entscheidung h2{margin:4px 0 6px;font-size:15px}.fg-entscheidung p{font-size:12px;color:var(--schrift-2);margin-bottom:8px}.fg-entscheidung label{font-size:11.5px;margin-top:8px}.fg-entscheidung select,.fg-entscheidung textarea{padding:7px 9px;margin:0;font-size:12px}.fg-aktionen{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.fg-aktionen button{flex:1;margin:0;white-space:nowrap;font-size:12px;padding:9px 12px}.fg-aktionen button[value=rueckfrage]{flex-basis:100%} .fg-historie{grid-area:historie;border:1px solid var(--linie);border-radius:12px;background:#fff;padding:20px;min-width:0}.fg-historie h2{font-size:14px;margin-bottom:16px}.fg-historie form{padding-bottom:20px;border-bottom:1px solid var(--linie)}.fg-historie label{font-size:12px;margin-top:0}.fg-historie textarea{font-size:13px}.fg-historie button{font-size:12px;margin-top:8px}.fg-historie small{display:block;font-size:11px;color:var(--schrift-2);margin-top:4px}.fg-zeitachse{list-style:none;padding:0 0 0 12px;margin:20px 0 0;border-left:1px solid var(--linie)}.fg-zeitachse li{position:relative;padding:0 0 22px 8px}.fg-zeitachse li:before{content:"";position:absolute;left:-16px;top:6px;width:7px;height:7px;border-radius:50%;background:var(--mint-tief)}.fg-zeitachse strong{font-size:12.5px}.fg-zeitachse p{font-size:13px;margin-top:8px;white-space:pre-wrap;overflow-wrap:anywhere} .fg-daten{display:flex;flex-direction:column;height:calc(100dvh - 110px - var(--bereich-navhoehe,0px))}.fg-daten-scroll{flex:1;min-height:0;max-height:none}.fg-entscheidung{flex:none;max-height:58dvh;overflow:auto} @media(min-width:1450px){.fg-arbeitsplatz{grid-template-columns:220px minmax(0,1fr) 400px;grid-template-areas:"historie original daten"}.fg-historie{max-height:calc(100vh - 110px - var(--bereich-navhoehe,0px));overflow:auto;position:sticky;top:18px;padding:16px}.fg-original{position:sticky;top:18px}} @media(max-width:1150px){.fg-arbeitsplatz{grid-template-columns:minmax(0,1fr) minmax(310px,380px)}.fg-aufgaben{grid-template-columns:repeat(2,minmax(0,1fr))}main.freigaben{padding:20px}.fg-daten-scroll{padding:16px}.fg-rechnung-titel{display:block}} @media(max-width:760px){.fg-arbeitsplatz{grid-template-columns:minmax(0,1fr);grid-template-areas:"original" "daten" "historie"}.fg-daten{position:static;overflow:visible;height:auto}.fg-daten-scroll{max-height:none;overflow:visible}.fg-entscheidung{position:sticky;bottom:0;z-index:2;border-radius:0 0 12px 12px;max-height:none;overflow:visible}.fg-original iframe{height:65vh;min-height:350px}.fg-detail-kopf{align-items:start}.fg-detail-kopf>div{flex-direction:column;align-items:end}.fg-spalten>div{left:0;right:auto}.fg-reiter{gap:14px;font-size:12px}.fg-rechnung-titel{display:flex}.fg-aufgaben{gap:8px}.fg-aufgaben a{padding:14px}.fg-aufgaben small{font-size:11px}main.freigaben{padding:16px 12px 40px}} /* ====================================================== Arbeitsuebersicht */ main.au { container-type: inline-size; } .au-leiste { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin: 0 0 20px; } .au-filter { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin: 0; min-width: 0; } .au-filter > div { min-width: 0; } .au-filter label { margin: 0 0 5px; } .au-filter select { width: auto; min-width: min(17rem, 100%); max-width: 100%; } .au-filter button { margin: 0; } .au-stand { color: var(--schrift-2); font-size: 12.5px; margin-left: auto; font-variant-numeric: tabular-nums; } .au-zurueck { margin: 0 0 14px; font-size: 13px; } .au-bereich { margin: 0 0 24px; } .au-bereichskopf { display: flex; align-items: baseline; gap: 4px 14px; flex-wrap: wrap; margin: 0 0 10px; } .au-bereichskopf h2.abschnitt { margin: 0; } .au-bereichskopf p { color: var(--schrift-3); font-size: 12px; } .au-karten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } @container (max-width: 640px) { .au-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @container (max-width: 330px) { .au-karten { grid-template-columns: minmax(0, 1fr); } } .au-karte { /* Die Mindesthöhe fasst eine Kachel mit Arbeit (zweizeilige Verteilung, umbrechender Fuß): So sind auch die Kacheln verschiedener Bereiche gleich hoch. */ position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 214px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 14px 16px 12px; box-shadow: var(--schatten); } .au-karte.au-arbeit { border-left: 4px solid var(--cyan-tief); padding-left: 13px; } .au-karte.au-leer { background: var(--flaeche-2); box-shadow: none; } .au-karte h3 { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--schrift-2); } .au-zahl { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--schrift-2); line-height: 1.3; overflow-wrap: anywhere; } .au-n { font-size: 34px; font-weight: 750; letter-spacing: -.02em; line-height: 1; color: var(--schrift); font-variant-numeric: tabular-nums; } .au-leer .au-n, .au-ohne-zahl .au-n { color: var(--schrift-3); } .au-balken { display: block; width: 100%; height: 6px; margin: 10px 0 7px; border-radius: 3px; background: var(--linie); overflow: hidden; } .au-balken rect { fill: var(--cyan-tief); } .au-verteilung, .au-offen { color: var(--schrift-2); font-size: 12px; overflow-wrap: anywhere; } .au-ohne-zahl + .au-offen { margin-top: 8px; } .au-offen + .au-offen { margin-top: 4px; } .au-ok { display: flex; align-items: center; gap: 6px; color: var(--ok); font-size: 12.5px; font-weight: 650; } .au-ok svg { width: 15px; height: 15px; flex: none; } .au-karte > :nth-last-child(2) { margin-bottom: 10px; } .au-fuss { margin-top: auto; padding-top: 9px; border-top: 1px solid var(--linie); display: flex; align-items: center; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap; font-size: 13px; } .au-fuss > a { font-weight: 600; } .au-leer .au-fuss > a { color: var(--schrift-2); } .au-cta { font-weight: 650; font-size: 13.5px; } .au-mandanten { font-size: 13px; } .au-mandanten > summary, .au-mehr > summary { cursor: pointer; color: var(--schrift-2); font-weight: 600; } .au-mandanten.au-wahl > summary { color: var(--cyan-tief); font-weight: 650; font-size: 13.5px; } .au-leer .au-mandanten.au-wahl > summary { color: var(--schrift-2); font-weight: 600; font-size: 13px; } .au-karte .au-liste { position: absolute; left: -1px; right: -1px; top: calc(100% + 6px); z-index: 5; max-height: 320px; overflow: auto; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius-s); box-shadow: var(--schatten-gross); padding: 4px 14px 10px; } .au-mandanten ul { list-style: none; margin: 6px 0 0; padding: 0; } .au-mandanten li { padding: 3px 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .au-mehr { margin-top: 4px; } .au-sortierung { color: var(--schrift-3); font-size: 11.5px; margin-top: 6px; } .au-zeile { border: 1px dashed var(--linie-2); border-radius: var(--radius); color: var(--schrift-2); font-size: 13.5px; min-width: 0; padding: 12px 16px; display: flex; flex-direction: column; gap: 6px; } .au-zeile strong { color: var(--schrift); font-weight: 650; } .au-teilweise { border-style: dashed; border-color: var(--linie-2); } .au-karte.au-arbeit.au-teilweise { border-left: 4px solid var(--cyan-tief); } .au-hinweis p + p { margin-top: 8px; } .au-aktionen { display: flex; gap: 10px 16px; flex-wrap: wrap; align-items: center; } .au-aktionen .knopf { margin: 0; } main.au .meldung.hinweis a { color: inherit; font-weight: 650; text-decoration: underline; } .au-beschreibung { margin-top: 2px; font-size: 12.5px; white-space: pre-line; overflow-wrap: anywhere; } main.au td details ul { margin: 6px 0 0; padding-left: 18px; } main.au td details summary { cursor: pointer; color: var(--schrift-2); font-size: 12.5px; } main.fb { max-width: 1800px; padding: 24px 28px 48px; } .fb-kopf { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 0 0 20px; } .fb-kopf h1 { font-size: 24px; font-weight: 600; line-height: 1.25; } .fb-kopf-rechts { display: flex; gap: 10px; align-items: center; } .freigabenav .freigabenav-hochladen { margin: 0 0 0 auto; align-self: center; height: 34px; border-bottom: 0; padding: 0 14px; display: inline-flex; gap: 6px; align-items: center; color: #fff; font-size: 13px; } .freigabenav .freigabenav-hochladen:hover { color: #fff; } .freigabenav .freigabenav-hochladen[aria-current] { color: #fff; } /* Status-Chips (Candis: „Ausstehend“ gelb, „Exportiert“ farbig …) */ .fb-chip { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 550; line-height: 18px; white-space: nowrap; border: 1px solid transparent; } .fb-chip-ausstehend { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-rand); } .fb-chip-rueckfrage { color: var(--info); background: var(--info-bg); border-color: var(--info-rand); } .fb-chip-abgelehnt { color: var(--risk); background: var(--risk-bg); border-color: var(--risk-rand); } .fb-chip-freigegeben { color: var(--ok); background: var(--ok-bg); border-color: var(--ok-rand); } .fb-chip-uebergeben { color: #0b3d2c; background: #d9f7ec; border-color: #9fe6cb; } .fb-chip-vorbereitung, .fb-chip-ersetzt { color: var(--neutral); background: var(--neutral-bg); border-color: var(--neutral-rand); } /* Kürzel-Kreise für Personen */ .fb-kuerzel { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: 10.5px; font-weight: 650; letter-spacing: .02em; flex: none; border: 2px solid #fff; } .fb-kuerzel-0 { background: #dff3ff; color: #0b5d7d; } .fb-kuerzel-1 { background: #ddf7ec; color: #0b5b40; } .fb-kuerzel-2 { background: #fdf0d5; color: #7a4f06; } .fb-kuerzel-3 { background: #ece9fb; color: #4b3c9e; } .fb-kuerzel-4 { background: #fde6e6; color: #9b2a2a; } .fb-kuerzel-5 { background: #e6ebf2; color: #34445a; } .fb-kuerzel-mehr { background: var(--neutral-bg); color: var(--neutral); } .fb-kuerzel-gruppe { display: inline-flex; } .fb-kuerzel-gruppe .fb-kuerzel + .fb-kuerzel { margin-left: -7px; } /* Info-Spalte */ .fb-info { display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 5px; margin-right: 4px; border: 1px solid var(--linie); border-radius: 6px; font-size: 12px; color: var(--schrift-2); background: #fff; } .fb-info svg { width: 13px; height: 13px; vertical-align: 0; } .fb-info-ueberfaellig { color: var(--risk); background: var(--risk-bg); border-color: var(--risk-rand); } /* Leerer Zustand */ .fb-erledigt { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 96px; padding: 16px; border-radius: 10px; background: var(--ok-bg); color: var(--ok); text-align: center; font-size: 13px; } .fb-erledigt svg { width: 20px; height: 20px; } .fb-erledigt span { color: var(--schrift-2); font-size: 12px; } /* Werkzeugleiste: Suche, Umschalter, Menüs */ .fb-werkzeuge { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 14px; } .fb-luecke { flex: 1; } .fb-suche { display: flex; align-items: center; height: 36px; border: 1px solid var(--linie); border-radius: 8px; background: #fff; padding: 0 4px 0 12px; min-width: 240px; } .fb-suche input { border: 0; outline: 0; margin: 0; padding: 0; height: 34px; width: 100%; font-size: 13.5px; background: transparent; box-shadow: none; } .fb-suche .fb-knopf-symbol { border: 0; height: 30px; } .fb-suche:focus-within { border-color: var(--mint-tief); box-shadow: 0 0 0 3px rgba(15,155,110,.12); } .fb-umschalter { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--linie); border-radius: 8px; background: var(--flaeche-2); } .fb-umschalter a { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 6px; color: var(--schrift); font-size: 12.5px; font-weight: 500; white-space: nowrap; } .fb-umschalter a:hover { background: #eef2f6; text-decoration: none; } .fb-umschalter a[aria-current] { background: #e3e9f0; font-weight: 650; } .fb-umschalter span { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #fff; border: 1px solid var(--linie); font-size: 11px; display: inline-grid; place-items: center; } .fb-umschalter a[aria-current] span { background: var(--navy-3); border-color: var(--navy-3); color: #fff; } .fb-knopf-leise, .fb-knopf-rahmen, .fb-knopf-symbol { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--schrift); cursor: pointer; list-style: none; background: transparent; border: 1px solid transparent; margin: 0; box-shadow: none; } .fb-knopf-rahmen { border-color: var(--linie); background: #fff; font-weight: 500; } .fb-knopf-rahmen.gesetzt, .fb-knopf-symbol.gesetzt { border-color: var(--mint-tief); color: var(--mint-dunkel); background: #effbf6; } .fb-knopf-symbol { padding: 0 9px; border-color: var(--linie); background: #fff; } .fb-knopf-leise:hover, .fb-knopf-rahmen:hover, .fb-knopf-symbol:hover { background: var(--flaeche-2); } .fb-pfeil { font-size: 10px; color: var(--schrift-3); } .fb-menue { position: relative; } .fb-menue > summary { list-style: none; } .fb-menue > summary::-webkit-details-marker { display: none; } .fb-menue[open] > summary { background: var(--flaeche-2); } .fb-menue > form, .fb-menue > div { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; background: #fff; border: 1px solid var(--linie); border-radius: 10px; box-shadow: var(--schatten-gross); } .fb-menue.rechts > form, .fb-menue.rechts > div { left: auto; right: 0; } .fb-gruppe-titel { font-size: 10.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--schrift-3); margin: 0 0 10px; } .fb-filterfuss { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--linie); grid-column: 1 / -1; font-size: 12.5px; } .fb-filterfuss button, .fb-vorlage-neu button, .fb-klarapanel button { margin: 0; height: 32px; padding: 0 14px; font-size: 12.5px; } /* „+ Filter“: links die Gruppen, rechts die gewählte Gruppe (Umschalten per CSS, ohne Skript) */ .fb-filterpanel { display: grid; grid-template-columns: 210px 300px; width: 512px; max-width: calc(100vw - 40px); } .fb-gruppenliste { list-style: none; margin: 0; padding: 6px; border-right: 1px solid var(--linie); max-height: 430px; overflow: auto; } .fb-gruppenliste input { position: absolute; opacity: 0; pointer-events: none; } .fb-gruppenliste label { display: flex; align-items: center; gap: 6px; padding: 7px 8px; margin: 0; border-radius: 6px; font-size: 13px; font-weight: 450; color: var(--schrift); cursor: pointer; } .fb-gruppenliste label svg { margin-left: auto; width: 14px; height: 14px; color: var(--schrift-3); } .fb-gruppenliste label:hover { background: var(--flaeche-2); } .fb-gruppenliste input:checked + label { background: #e3e9f0; font-weight: 600; } .fb-gruppenliste input:focus-visible + label { outline: 2px solid var(--mint-tief); } .fb-abschnitt { padding: 10px 8px 4px; font-size: 10.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--schrift-3); } .fb-punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--mint-tief); display: inline-block; } .fb-gruppen { padding: 14px; max-height: 430px; overflow: auto; } .fb-gruppe { display: none; border: 0; margin: 0; padding: 0; min-width: 0; } .fb-gruppe legend { font-size: 10.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--schrift-3); margin-bottom: 10px; padding: 0; } .fb-filterpanel:has(#fb-g-zustand:checked) .fb-gruppe[data-g="zustand"], .fb-filterpanel:has(#fb-g-info:checked) .fb-gruppe[data-g="info"], .fb-filterpanel:has(#fb-g-partner:checked) .fb-gruppe[data-g="partner"], .fb-filterpanel:has(#fb-g-betrag:checked) .fb-gruppe[data-g="betrag"], .fb-filterpanel:has(#fb-g-kost1:checked) .fb-gruppe[data-g="kost1"], .fb-filterpanel:has(#fb-g-kost2:checked) .fb-gruppe[data-g="kost2"], .fb-filterpanel:has(#fb-g-belegdatum:checked) .fb-gruppe[data-g="belegdatum"], .fb-filterpanel:has(#fb-g-eingang:checked) .fb-gruppe[data-g="eingang"], .fb-filterpanel:has(#fb-g-faellig:checked) .fb-gruppe[data-g="faellig"], .fb-filterpanel:has(#fb-g-angefragt:checked) .fb-gruppe[data-g="angefragt"], .fb-filterpanel:has(#fb-g-anforderer:checked) .fb-gruppe[data-g="anforderer"], .fb-filterpanel:has(#fb-g-freigeber:checked) .fb-gruppe[data-g="freigeber"], .fb-filterpanel:has(#fb-g-mandat:checked) .fb-gruppe[data-g="mandat"] { display: block; } .fb-auswahlliste { display: flex; flex-direction: column; gap: 2px; max-height: 300px; overflow: auto; } .fb-auswahlliste label { display: flex; align-items: center; gap: 8px; margin: 0; padding: 5px 4px; border-radius: 6px; font-size: 13px; font-weight: 400; color: var(--schrift); cursor: pointer; } .fb-auswahlliste label:hover { background: var(--flaeche-2); } .fb-auswahlliste input { width: auto; margin: 0; } .fb-auswahlliste hr { border: 0; border-top: 1px solid var(--linie); margin: 4px 0; width: 100%; } .fb-zeitspanne { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; } .fb-zeitspanne label { font-size: 11.5px; color: var(--schrift-2); margin: 0; } .fb-zeitspanne input { margin: 4px 0 0; height: 34px; font-size: 13px; } .fb-leer-hinweis { font-size: 12.5px; } .fb-schnellpanel { width: 300px; padding: 14px 0 0; } .fb-schnellpanel > .fb-auswahlliste, .fb-schnellpanel > .fb-zeitspanne, .fb-schnellpanel > p { margin: 0 14px 12px; } /* Klara-Filter, gespeicherte Ansichten, Spalten */ .fb-klarapanel { width: 380px; max-width: calc(100vw - 40px); padding: 12px; display: flex; flex-direction: column; gap: 10px; } .fb-klarapanel textarea { margin: 0; font-size: 13px; resize: vertical; } .fb-klarapanel button { width: 100%; } .fb-klara > summary svg, .fb-klarahinweis svg { color: var(--mint-tief); } .fb-klarahinweis { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; margin: 0 0 12px; border: 1px solid var(--ok-rand); background: #f2fbf7; border-radius: 9px; font-size: 13px; } .fb-vorlagenpanel { width: 320px; padding: 14px; } .fb-vorlagenpanel ul { list-style: none; margin: 0 0 12px; padding: 0; } .fb-vorlagenpanel li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 0; } .fb-vorlagenpanel li a { font-size: 13px; color: var(--schrift); } .fb-vorlagenpanel li a[aria-current] { font-weight: 650; color: var(--mint-dunkel); } .fb-vorlagenpanel li .fb-knopf-symbol { height: 26px; padding: 0 5px; } .fb-vorlage-neu { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--linie); padding-top: 12px; } .fb-vorlage-neu label { font-size: 12px; color: var(--schrift-2); margin: 0; } .fb-vorlage-neu input { margin: 0; height: 34px; font-size: 13px; } .fb-spaltenpanel { width: 280px; padding: 14px 0 0; } .fb-spaltenpanel > p { margin: 0 14px 8px; } .fb-spaltenpanel ul { list-style: none; margin: 0; padding: 0 8px 8px; max-height: 360px; overflow: auto; } .fb-spaltenpanel li { display: flex; align-items: center; justify-content: space-between; padding: 2px 6px; border-radius: 6px; } .fb-spaltenpanel li:hover { background: var(--flaeche-2); } .fb-spaltenpanel li.aus label { color: var(--schrift-2); } .fb-spaltenpanel label { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 400; color: var(--schrift); padding: 4px 0; } .fb-spaltenpanel input[type=checkbox] { width: auto; margin: 0; } .fb-hoch { margin: 0; height: 24px; width: 26px; padding: 0; background: transparent; color: var(--schrift-2); border: 1px solid var(--linie); border-radius: 6px; box-shadow: none; font-size: 12px; } /* Aktive Filter als Chips */ .fb-aktive-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 12px; } .fb-filterchip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 6px 0 10px; border-radius: 13px; background: #e9f7f1; border: 1px solid var(--ok-rand); color: var(--mint-dunkel); font-size: 12px; font-weight: 550; } .fb-filterchip span { font-size: 14px; line-height: 1; color: var(--schrift-2); } .fb-filterchip:hover { text-decoration: none; border-color: var(--mint-tief); } /* Tabelle im Candis-Stil: ruhig, 56 px Zeilen, ganze Zeile anklickbar */ .fb-tabelle { background: #fff; border: 1px solid var(--linie); border-radius: 12px; overflow: auto; } .fb-tabelle table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; margin: 0; } .fb-tabelle th { position: sticky; top: 0; z-index: 4; background: var(--flaeche-2); color: var(--schrift-2); font-size: 12px; font-weight: 600; text-align: left; white-space: nowrap; height: 40px; padding: 0 14px; border-bottom: 1px solid var(--linie); } .fb-tabelle th { text-transform: none; letter-spacing: 0; } .fb-tabelle th a { color: inherit; display: inline-flex; align-items: center; gap: 4px; } .fb-tabelle th a:hover { color: var(--schrift); text-decoration: none; } .fb-sortierpfeil { font-size: 11px; color: var(--schrift-3); } .fb-sortierpfeil.aktiv { color: var(--mint-tief); } .fb-tabelle td { height: 56px; padding: 0 14px; border-bottom: 1px solid var(--linie); vertical-align: middle; white-space: nowrap; } .fb-tabelle tbody tr { position: relative; } .fb-tabelle tbody tr:hover td { background: #f8fafc; } .fb-tabelle tbody tr.gewaehlt td { background: #f2fbf7; } .fb-tabelle tbody tr:last-child td { border-bottom: 0; } .fb-tabelle .zahl { text-align: right; font-variant-numeric: tabular-nums; } .fb-tabelle th.zahl a { justify-content: flex-end; } .fb-tabelle .fb-wahl { width: 44px; padding-right: 0; position: relative; z-index: 3; } .fb-wahl input { width: 16px; height: 16px; margin: 0; cursor: pointer; } .fb-sp-lieferant { max-width: 280px; overflow: hidden; text-overflow: ellipsis; } .fb-sp-lieferant a, .fb-sp-lieferant small { display: block; overflow: hidden; text-overflow: ellipsis; } .fb-zeilenlink { color: var(--schrift); font-weight: 650; } .fb-zeilenlink::after { content: ""; position: absolute; inset: 0; z-index: 1; } .fb-zeilenlink:hover { text-decoration: none; } .fb-sp-lieferant small { color: var(--schrift-3); font-size: 12px; } .fb-tabelle .fb-kuerzel, .fb-tabelle .fb-info { position: relative; z-index: 2; } .fb-leer { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 64px 16px; color: var(--schrift-2); white-space: normal; } .fb-leer svg { width: 32px; height: 32px; color: var(--mint-tief); padding: 14px; box-sizing: content-box; background: var(--ok-bg); border-radius: 50%; margin-bottom: 6px; } .fb-leer strong { color: var(--schrift); font-size: 15px; } /* Fußzeile mit Auswahl, Summen und Export */ .fb-auswahlleiste { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 16px; margin-top: 10px; padding: 8px 0; background: var(--grund); } .fb-auswahlleiste.aktiv { padding: 10px 14px; background: #f2fbf7; border: 1px solid var(--ok-rand); border-radius: 12px; } .fb-fuss { font-size: 12px; color: var(--schrift-2); margin-right: auto; } .fb-summen { display: flex; gap: 18px; } .fb-summen span { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; } .fb-summen small { font-size: 11px; color: var(--schrift-2); } .fb-summen strong { font-size: 13px; font-variant-numeric: tabular-nums; } .fb-knopf-primaer { display: inline-flex; align-items: center; gap: 6px; margin: 0; height: 34px; padding: 0 14px; font-size: 12.5px; } .fb-auswahlleiste:not(.aktiv) .fb-knopf-primaer { background: #fff; color: var(--schrift); border: 1px solid var(--linie); box-shadow: none; } @media (max-width: 56rem) { main.fb { padding: 16px; } .fb-suche { min-width: 0; flex: 1 1 100%; } .fb-filterpanel { grid-template-columns: 1fr; width: calc(100vw - 32px); } .fb-gruppenliste { border-right: 0; border-bottom: 1px solid var(--linie); max-height: 180px; } .fb-menue > form, .fb-menue > div { position: fixed; left: 16px; right: 16px; top: 120px; width: auto; } } main.fb.fd { padding: 12px 16px 6px; } .fd-huelle { container: fd / inline-size; --fd-abzug: calc(var(--bereich-navhoehe, 0px) + 80px); --fd-hoehe: calc(100vh - var(--fd-abzug)); } @supports (height: 100dvh) { .fd-huelle { --fd-hoehe: calc(100dvh - var(--fd-abzug)); } } .fd-huelle.fd-mit-meldung { --fd-abzug: calc(var(--bereich-navhoehe, 0px) + 127px); } .fd-meldung .meldung { margin: 0 0 10px; padding: 8px 12px; } .fd-huelle summary:focus-visible { outline: 3px solid rgba(56, 189, 248, .55); outline-offset: 2px; } .fd-huelle button { transition: none; } .fd-leise { margin: 6px 0 0; font-size: 12.5px; color: var(--schrift-2); } /* ---- Kopfleiste: Zurück, Blättern, Historie ein/aus ---- */ .fd-leiste { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; min-height: 40px; margin: 0 0 10px; } .fd-leiste-links, .fd-leiste-rechts { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; min-width: 0; } .fd-zurueck { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px 0 8px; border-radius: 8px; color: var(--schrift); font-size: 13.5px; font-weight: 600; white-space: nowrap; } .fd-zurueck:hover { background: #e9eef4; text-decoration: none; } .fd-blaettern { display: inline-flex; align-items: center; gap: 2px; height: 34px; padding: 0 3px; border: 1px solid var(--linie); border-radius: 8px; background: #fff; font-size: 13px; font-variant-numeric: tabular-nums; } .fd-stelle { min-width: 38px; text-align: center; font-weight: 600; color: var(--schrift); } .fd-pfeil { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; color: var(--schrift); } a.fd-pfeil:hover { background: var(--neutral-bg); text-decoration: none; } .fd-pfeil-aus { color: var(--linie-2); } .fd-umschalter { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border: 1px solid var(--linie); border-radius: 8px; background: #fff; color: var(--schrift); font-size: 13px; font-weight: 600; white-space: nowrap; } .fd-umschalter:hover { background: var(--flaeche-2); text-decoration: none; } .fd-umschalter.an { background: #e3e9f0; border-color: #d0d9e4; } /* ---- Raster: untereinander (Daten, Original, Verlauf), ab 1160 px drei Spalten ---- */ .fd-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; } .fd-daten { order: 1; } .fd-original { order: 2; } .fd-verlauf { order: 3; } .fd-daten, .fd-verlauf { min-width: 0; background: #fff; border: 1px solid var(--linie); border-radius: 12px; } @container fd (min-width: 1160px) { .fd-raster { height: var(--fd-hoehe); min-height: 540px; align-items: stretch; grid-template-columns: clamp(280px, 24%, 320px) minmax(0, 1fr) clamp(400px, 30%, 440px); } .fd-raster.fd-ohne-verlauf { grid-template-columns: minmax(0, 1fr) clamp(400px, 30%, 440px); } .fd-verlauf, .fd-original, .fd-daten { order: 0; min-height: 0; } .fd-verlauf { overflow: hidden; } .fd-zeitachse { flex: 1; min-height: 0; overflow: auto; } .fd-flaeche { height: auto; min-height: 0; } .fd-daten { display: flex; flex-direction: column; } .fd-daten-scroll { flex: 1; min-height: 0; overflow: auto; scrollbar-gutter: stable; border-radius: 11px 11px 0 0; } .fd-aktion { position: static; flex: none; max-height: 62%; } } /* ---- Verlauf links ---- */ .fd-verlauf { display: flex; flex-direction: column; padding: 14px 14px 0; } .fd-verlauf h2 { margin: 0 0 12px; font-size: 14px; font-weight: 700; } .fd-kommentar { position: relative; margin: 0 0 14px; } .fd-kommentar textarea { display: block; min-height: 66px; margin: 0; padding: 9px 46px 9px 11px; border-radius: 10px; font-size: 13.5px; } .fd-senden { position: absolute; right: 7px; bottom: 7px; width: 32px; height: 32px; margin: 0; padding: 0; border-radius: 8px; } .fd-zeitachse { list-style: none; margin: 0; padding: 0 0 14px; display: flex; flex-direction: column; gap: 16px; } .fd-ereignis { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; } .fd-ereignis > div { min-width: 0; } .fd-ereignis p { margin: 0; } .fd-ereignis-kopf { font-size: 12.5px; color: var(--schrift-2); } .fd-ereignis-kopf strong { color: var(--schrift); font-weight: 650; } .fd-ereignis-was { margin-top: 1px; font-size: 13px; } .fd-blase { margin-top: 6px; padding: 8px 11px; border-radius: 4px 12px 12px 12px; background: var(--neutral-bg); font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; } .fd-ereignis-notiz { margin-top: 3px; font-size: 12px; color: var(--schrift-2); overflow-wrap: anywhere; } .fd-ereignis-extra { margin-top: 3px; font-size: 11.5px; color: var(--schrift-2); } /* ---- Original in der Mitte ---- */ .fd-original { min-width: 0; display: flex; flex-direction: column; background: #e9edf2; border: 1px solid var(--linie); border-radius: 12px; overflow: hidden; } .fd-werkzeug { flex: none; display: flex; align-items: center; gap: 14px; min-height: 44px; padding: 6px 14px; background: #fff; border-bottom: 1px solid var(--linie); } .fd-dateiname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--schrift-2); } .fd-werkzeug a { display: inline-flex; align-items: center; gap: 6px; flex: none; color: var(--schrift); font-size: 13px; font-weight: 600; } .fd-werkzeug a:hover { color: var(--cyan-tief); text-decoration: none; } .fd-flaeche { flex: 1; display: flex; height: 78vh; min-height: 460px; background: #e9edf2; } .fd-flaeche iframe { display: block; flex: 1; width: 100%; height: 100%; border: 0; background: #e9edf2; } .fd-bild { flex: 1; overflow: auto; padding: 14px; } .fd-bild img { display: block; max-width: 100%; height: auto; margin: 0 auto; background: #fff; } .fd-leerzustand { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 56px 24px; background: #fff; color: var(--schrift-2); text-align: center; } .fd-leerzustand svg { width: 36px; height: 36px; color: var(--mint-tief); margin-bottom: 6px; } .fd-leerzustand h2 { font-size: 16px; color: var(--schrift); } /* ---- Daten rechts ---- */ .fd-daten-scroll { padding: 16px 18px 20px; } .fd-daten-kopf { margin: 0 0 12px; } .fd-titelzeile { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 10px; } .fd-titelzeile h1 { font-size: 18px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; } .fd-eingang { margin: 4px 0 0; font-size: 12.5px; color: var(--schrift-2); } .fd-daten-scroll h2, .fd-daten-scroll .karte h2 { display: flex; align-items: center; gap: 8px; margin: 26px 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--schrift-2); } .fd-anzahl { min-width: 20px; height: 18px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 9px; background: var(--neutral-bg); font-size: 11px; letter-spacing: 0; color: var(--schrift-2); } .fd-hinweis { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--warn-bg); color: var(--warn); font-size: 13px; } /* Prüf-Chip */ .fd-pruefung { margin: 0 0 14px; } .fd-pruefung > summary, .fd-pruefung-neutral > span { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--neutral-rand); border-radius: 14px; background: var(--neutral-bg); color: var(--neutral); font-size: 12.5px; font-weight: 650; cursor: pointer; list-style: none; } .fd-pruefung-neutral > span { cursor: default; font-weight: 600; } .fd-pruefung > summary::-webkit-details-marker { display: none; } .fd-pruefung > summary svg:last-child { width: 13px; height: 13px; } .fd-pruefung[open] > summary svg:last-child { transform: rotate(90deg); } .fd-pruefung-ok > summary { color: var(--ok); background: var(--ok-bg); border-color: var(--ok-rand); } .fd-pruefung-warn > summary { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-rand); } .fd-pruefung-risk > summary { color: var(--risk); background: var(--risk-bg); border-color: var(--risk-rand); } .fd-pruefung ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 7px; } .fd-pruefung li { display: flex; gap: 8px; font-size: 12.5px; line-height: 1.45; } .fd-pruefung li svg { flex: none; width: 14px; height: 14px; margin-top: 3px; } .fd-pruefung li.ok svg { color: var(--ok); } .fd-pruefung li.warn svg { color: var(--warn); } .fd-pruefung li.risk svg { color: var(--risk); } /* Felder: Beschriftung klein darüber, Wert im grauen Kasten */ .fd-felder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 12px; margin: 0; } .fd-feld { min-width: 0; margin: 0; } .fd-breit { grid-column: 1 / -1; } .fd-feld dt { margin: 0 0 3px; font-size: 11.5px; font-weight: 600; color: var(--schrift-2); } .fd-feld dd { margin: 0; min-height: 36px; padding: 8px 10px; border: 1px solid var(--linie); border-radius: 8px; background: var(--flaeche-2); font-size: 13.5px; line-height: 1.35; overflow-wrap: anywhere; } .fd-nichts { color: #64748b; } .fd-feld dd.fd-zusatz { min-height: 0; margin-top: 4px; padding: 0; border: 0; background: none; font-size: 12px; } .fd-zusatz-warn { color: var(--warn); } .fd-summe dd { background: #fff; border-color: var(--linie-2); font-size: 15.5px; font-weight: 700; font-variant-numeric: tabular-nums; } .fd-warn dd { background: var(--warn-bg); border-color: var(--warn-rand); color: var(--warn); } /* Vorkontierung je Position */ .fd-position { margin: 0 0 10px; border: 1px solid var(--linie); border-radius: 10px; background: #fff; } .fd-position > summary { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 10px 12px; cursor: pointer; list-style: none; font-size: 13px; font-weight: 600; } .fd-position > summary::-webkit-details-marker { display: none; } .fd-position-name::before { content: "▸"; margin-right: 6px; color: var(--schrift-3); } .fd-position[open] .fd-position-name::before { content: "▾"; } .fd-position > summary strong { font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; } .fd-position > .fd-felder { padding: 0 12px; } .fd-position > .fd-quelle { margin: 0; padding: 10px 12px 12px; } .fd-quelle { margin: 10px 0 0; font-size: 12px; color: var(--schrift-2); } /* Kostenstellen (kostenformular aus kostenstellen.ts): ohne Kartenrahmen, passend zu den Feldern */ .fd-daten-scroll section.karte { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; } .fd-daten-scroll section.karte > p { margin: 0 0 10px; font-size: 12px; color: var(--schrift-2); } .fd-daten-scroll fieldset.karte { min-width: 0; margin: 0 0 10px; padding: 10px 12px 12px; border: 1px solid var(--linie); border-radius: 10px; box-shadow: none; } .fd-daten-scroll fieldset.karte legend { padding: 0 6px; font-size: 13px; font-weight: 650; } .fd-daten-scroll .karte label { margin: 10px 0 4px; font-size: 12px; color: var(--schrift-2); } .fd-daten-scroll .karte label:first-of-type { margin-top: 2px; } .fd-daten-scroll .karte select { padding: 7px 9px; font-size: 13px; } .fd-daten-scroll .karte button { height: 34px; margin: 6px 0 0; padding: 0 14px; font-size: 13px; } /* Bestell- und Zahlungsangaben (nur Buchhaltung) */ .fd-aufklapper { margin: 12px 0 0; border: 1px solid var(--linie); border-radius: 10px; background: #fff; } .fd-aufklapper > summary { padding: 10px 12px; cursor: pointer; list-style: none; font-size: 13px; font-weight: 600; } .fd-aufklapper > summary::-webkit-details-marker { display: none; } .fd-aufklapper > summary::before { content: "▸ "; color: var(--schrift-3); } .fd-aufklapper[open] > summary::before { content: "▾ "; } .fd-aufklapper > form { padding: 0 12px 12px; } .fd-aufklapper .fd-formfeld label { margin: 10px 0 4px; font-size: 12px; color: var(--schrift-2); } .fd-aufklapper .fd-formfeld input, .fd-aufklapper .fd-formfeld select { padding: 7px 9px; font-size: 13px; } .fd-formzeile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 10px; } .fd-aufklapper .fd-knopf { height: 34px; margin-top: 10px; } /* Freigabeschritte */ .fd-schritte { list-style: none; margin: 14px 0 0; padding: 0; } .fd-schritt { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; padding-bottom: 16px; } .fd-schritt:not(:last-child)::before { content: ""; position: absolute; left: 12.5px; top: 28px; bottom: 2px; width: 1px; background: var(--linie-2); } .fd-schritt-nr { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--linie-2); border-radius: 50%; background: #fff; color: var(--schrift-2); font-size: 12px; } .fd-schritt-nr svg { width: 14px; height: 14px; vertical-align: 0; } .fd-schritt.fertig .fd-schritt-nr { background: var(--ok-bg); border-color: var(--ok-rand); color: var(--ok); } .fd-schritt.aktuell .fd-schritt-nr { border: 2px solid var(--mint-tief); color: var(--mint-tief); font-weight: 700; } .fd-schritt-text { min-width: 0; display: flex; flex-direction: column; gap: 3px; } .fd-schritt-text strong { font-size: 13px; } .fd-schritt-status { font-size: 12px; color: var(--schrift-2); } .fd-schritt-personen { display: flex; align-items: center; gap: 8px; font-size: 12.5px; overflow-wrap: anywhere; } .fd-schritt-text small { font-size: 11.5px; color: var(--schrift-2); } .fd-bearbeiten { width: 100%; margin-top: 18px; } /* ---- Knöpfe ---- */ .fd-knopf { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; margin: 0; padding: 0 16px; border: 1px solid transparent; border-radius: var(--radius-s); font-size: 14px; font-weight: 650; line-height: 1; white-space: nowrap; cursor: pointer; text-decoration: none; list-style: none; box-shadow: none; transition: none; filter: none; transform: none; } .fd-knopf:hover, .fd-knopf:active { text-decoration: none; box-shadow: none; filter: none; transform: none; } summary.fd-knopf::-webkit-details-marker { display: none; } .fd-knopf svg { width: 16px; height: 16px; vertical-align: 0; } .fd-knopf-primaer { background: linear-gradient(135deg, #34f0b2 0%, #22c993 100%); color: #052018; } .fd-knopf-primaer:hover { background: linear-gradient(135deg, #2ce5a9 0%, #1fbd8a 100%); } .fd-knopf-zweit { background: #fff; color: var(--schrift); border-color: var(--linie-2); } .fd-knopf-zweit:hover { background: var(--flaeche-2); } .fd-knopf-gefahr { background: #fff; color: var(--risk); border-color: var(--risk-rand); } .fd-knopf-gefahr:hover { background: var(--risk-bg); } .fd-voll { width: 100%; } /* ---- Karte „Nächster Schritt“: fest unten im rechten Panel ---- */ .fd-aktion { position: sticky; bottom: 0; z-index: 3; max-height: 70vh; overflow: auto; padding: 14px 18px 16px; border-top: 1px solid var(--linie); border-radius: 0 0 11px 11px; background: #fff; box-shadow: 0 -12px 18px -16px rgba(15, 23, 42, .4); } .fd-aktion-etikett { margin: 0 0 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; color: var(--schrift-2); } .fd-aktion-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .fd-aktion-kopf h2 { font-size: 15px; font-weight: 700; line-height: 1.3; } .fd-aktion-kopf .fb-kuerzel-gruppe, .fd-aktion-kopf > .leise { flex: none; } .fd-aktion-schritt { margin: 2px 0 0; font-size: 12.5px; color: var(--schrift-2); } .fd-aktion-hinweis { margin: 8px 0 0; font-size: 12px; line-height: 1.45; color: var(--schrift-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .fd-fuer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 12.5px; color: var(--schrift-2); } .fd-fuer a { display: inline-flex; align-items: center; height: 26px; padding: 0 9px; border: 1px solid var(--linie); border-radius: 6px; color: var(--schrift); font-weight: 500; } .fd-fuer a:hover { background: var(--flaeche-2); text-decoration: none; } .fd-fuer a[aria-current] { background: var(--navy-3); border-color: var(--navy-3); color: #fff; font-weight: 650; } .fd-fuer strong { color: var(--schrift); font-weight: 650; } .fd-knopfreihe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: start; margin-top: 12px; } .fd-knopfreihe > form { margin: 0; } .fd-grund > summary { width: 100%; } .fd-grund[open] > summary.fd-knopf-zweit { background: var(--neutral-bg); } .fd-knopfreihe > .fd-grund[open] { grid-column: 1 / -1; } .fd-knopfreihe:has(> .fd-grund[open]) > form { display: none; } .fd-grundform { display: grid; gap: 8px; margin: 10px 0 0; } .fd-grundform label { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--schrift-2); } .fd-grundform textarea { min-height: 76px; margin: 0; padding: 8px 10px; font-size: 13.5px; } .fd-grund-klein { margin-top: 10px; } .fd-grund-klein > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; color: var(--cyan-tief); font-size: 13px; font-weight: 600; } .fd-grund-klein > summary::-webkit-details-marker { display: none; } .fd-grund-klein > summary:hover { text-decoration: underline; } .fd-aktion > .fd-grundform:last-child { margin-top: 12px; } /* ---- Schmale Inhaltsbreite ---- */ @container fd (max-width: 520px) { .fd-felder, .fd-formzeile { grid-template-columns: minmax(0, 1fr); } .fd-leiste-links, .fd-leiste-rechts { width: 100%; } .fd-umschalter { margin-left: auto; } } /* Auf dem Handy liegt Klaras runder Knopf unten rechts über dem Fenster; die Karte lässt dort Platz. */ @media (max-width: 56rem) { .fd-aktion { padding-right: 84px; } } /* LED-114: Vier-Augen – statt „Freigeben“ die Erklärung, warum hier jemand anderes freigeben sollte. */ .fd-vieraugen { flex: 1; margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--warn-bg); border: 1px solid var(--warn-rand); color: var(--warn); font-size: 12px; line-height: 1.45; } /* ================================================================ Dashboard */ .fbd-filter { margin: -8px 0 18px; font-size: 13px; color: var(--schrift-2); } .fbd-abschnitt { margin: 0 0 28px; } .fbd-abschnitt > h2 { margin: 0 0 12px; font-size: 15px; font-weight: 600; line-height: 1.3; } .fbd-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 340px)); gap: 16px; align-items: start; } .fbd-karte { padding: 16px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; } .fbd-karte > h3 { margin: 0 0 12px; font-size: 14px; font-weight: 600; line-height: 1.3; } .fbd-zeilen { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } .fbd-zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 8px 14px; background: var(--neutral-bg); border: 1px solid transparent; border-radius: 8px; color: var(--schrift); font-size: 13.5px; text-decoration: none; } .fbd-zeile:hover { background: #e4eaf1; text-decoration: none; } .fbd-zeile strong { font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; } .fbd-zeile-rot { background: var(--risk-bg); border-color: var(--risk-rand); color: var(--risk); } .fbd-zeile-rot:hover { background: #fbdcdc; } /* ===================================================================== Eingang */ .fbd-hinweis { display: block; max-width: 38ch; margin-top: 4px; color: var(--schrift-2); font-size: 12px; font-weight: 400; line-height: 1.4; white-space: normal; } .fbd-chip-auslesen { color: var(--info); background: var(--info-bg); border-color: var(--info-rand); } .fbd-chip-klaeren { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-rand); } .fbd-chip-fehler { color: var(--risk); background: var(--risk-bg); border-color: var(--risk-rand); } /* =================================================================== Hochladen */ .fbd-formular { max-width: 760px; padding: 20px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; } .fbd-unternehmen { margin: 0 0 14px; color: var(--schrift-2); font-size: 13.5px; } .fbd-unternehmen strong { color: var(--schrift); } .fbd-ablage { position: relative; margin: 14px 0 10px; } .fbd-ablage-hinweis { position: absolute; inset: 30px 24px auto; margin: 0; display: grid; justify-items: center; gap: 4px; text-align: center; line-height: 1.5; pointer-events: none; } .fbd-ablage-hinweis svg { width: 34px; height: 34px; color: var(--schrift-3); } .fbd-ablage-hinweis strong { font-size: 16px; font-weight: 600; } .fbd-ablage-hinweis span { color: var(--schrift-2); font-size: 13px; font-weight: 400; } .fbd-ablage input[type=file] { display: block; width: 100%; min-height: 240px; padding: 150px 24px 24px; border: 2px dashed var(--linie-2); border-radius: var(--radius); background: var(--flaeche-2); cursor: pointer; } .fbd-ablage:hover input[type=file], .fbd-ablage input[type=file]:focus { border-color: var(--mint-tief); background: var(--flaeche); } .fbd-ablage input[type=file]::file-selector-button { margin-right: 12px; padding: 8px 12px; border: 1px solid var(--linie-2); border-radius: var(--radius-s); background: var(--flaeche); color: var(--schrift); font: inherit; font-weight: 600; cursor: pointer; } .fbd-grenzen { margin: 0 0 4px; color: var(--schrift-2); font-size: 12.5px; } @media (max-width: 36rem) { .fbd-karten { grid-template-columns: 1fr; } .fbd-ablage input[type=file] { padding-top: 170px; } } main.fb.fe { max-width: 1040px; } .fe h2 { font-size: 16px; font-weight: 650; line-height: 1.3; } .fe h3 { margin: 0 0 8px; font-size: 13px; font-weight: 650; line-height: 1.3; color: var(--schrift-2); } .fe h4 { margin: 0 0 6px; font-size: 13px; font-weight: 650; } .fe ul, .fe ol { list-style: none; margin: 0; padding: 0; } .fe fieldset { min-width: 0; margin: 0; padding: 0; border: 0; } .fe summary { cursor: pointer; } .fe button { margin: 0; } .fe .knopf { margin: 0; } .fe button:disabled { opacity: .5; cursor: not-allowed; } .fe button.nur-vorlesen { padding: 0; border: 0; box-shadow: none; } .fe .fe-leise { color: var(--schrift-2); font-size: 13px; line-height: 1.5; } /* ---------------------------------------------------------------- Karten und Kopf */ .fe-karte { margin: 0 0 16px; padding: 20px 22px; background: #fff; border: 1px solid var(--linie); border-radius: 12px; } .fe-karte-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin: 0 0 6px; } .fe-karte-kopf a { font-size: 13px; } .fe-kopfzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; } .fe-kopfkarte h2 { font-size: 18px; } .fe-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; } .fe-satz { margin: 10px 0 0; font-size: 14.5px; line-height: 1.5; } .fe-kopfkarte .fe-leise { margin-top: 4px; } .fe-knopfzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 16px; } .fe-karte > h2 + .fe-leise { margin-top: 4px; } .fe-bestaetigung { border-color: var(--mint-tief); } .fe-bestaetigung > p { margin: 10px 0 0; } .fe-link { border-color: var(--mint-tief); } .fe-link p { margin: 6px 0 14px; font-size: 13.5px; line-height: 1.5; } .fe-link input { font-family: var(--mono); font-size: 13px; } .fe-details { margin: 12px 0 0; } .fe-details summary { font-size: 13px; font-weight: 600; } .fe-details ul { margin: 8px 0 0 18px; list-style: disc; } .fe-details li { padding: 2px 0; font-size: 13px; } /* Hinweise, Warnungen und Fehler direkt an der Stelle, an der sie gelten */ .fe-box { margin: 12px 0 0; padding: 9px 12px; border: 1px solid; border-left-width: 4px; border-radius: 8px; font-size: 13px; line-height: 1.5; } .fe-box a { color: inherit; font-weight: 650; text-decoration: underline; } .fe-art-fehler { color: var(--risk); background: var(--risk-bg); border-color: var(--risk-rand); } .fe-art-warnung { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-rand); } .fe-art-hinweis { color: var(--info); background: var(--info-bg); border-color: var(--info-rand); } /* ---------------------------------------------------------------------- Ablauf */ .fe-abschnitt { margin: 4px 0 14px; } .fe-abschnitt h2 { font-size: 17px; } .fe-abschnitt .fe-leise { margin-top: 2px; max-width: 70ch; } .fe-start h3 { margin: 0; font-size: 15px; color: var(--schrift); } .fe-start .fe-leise { margin-top: 4px; } .fe-start-knoepfe { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 16px; } .fe .fe-start-knopf { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 6px; height: 100%; padding: 16px; background: #fff; color: var(--schrift); border: 1px solid var(--linie-2); border-radius: 12px; box-shadow: none; text-align: left; white-space: normal; } .fe .fe-start-knopf:hover { background: #f2fbf7; border-color: var(--mint-tief); box-shadow: none; filter: none; } .fe-start-knopf strong { font-size: 14.5px; font-weight: 650; } .fe-start-knopf span { font-size: 13px; font-weight: 400; line-height: 1.45; color: var(--schrift-2); } .fe-stufe-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 0 0 14px; } .fe-nr { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--navy-3); color: #fff; font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; } .fe-stufe-name { flex: 1 1 14rem; min-width: 0; } .fe .fe-stufe-name input { margin: 0; font-size: 15px; font-weight: 600; } .fe-stufe-werkzeuge { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; } .fe-feld { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 4px 16px; padding: 14px 0; border-top: 1px solid var(--linie); } .fe-feld > h3 { margin: 5px 0 0; } .fe-feld-inhalt { min-width: 0; } .fe-wann { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; } .fe-wann-fest { margin: 4px 0 0; font-size: 14px; font-weight: 500; } .fe .fe-wahl { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 500; } .fe .fe-wahl input[type=radio] { width: 16px; height: 16px; margin: 0; } .fe input.fe-betrag { width: 8.5rem; margin: 0 2px; text-align: right; font-variant-numeric: tabular-nums; } .fe-personen { margin: 0; } .fe-person { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 9px 0; border-bottom: 1px solid var(--linie); } .fe-person:last-child { border-bottom: 0; } .fe-person-text { display: flex; flex: 1 1 12rem; flex-direction: column; min-width: 0; line-height: 1.3; } .fe-person-text strong { font-size: 14px; font-weight: 600; } .fe-person-text small { font-size: 12px; color: var(--schrift-2); overflow-wrap: anywhere; } .fe-modus { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 10px 0 0; } .fe .fe-modus label { margin: 0; font-size: 13px; } .fe .fe-modus select { width: auto; min-width: 14rem; margin: 0; } .fe-hinzu { margin: 12px 0 0; background: var(--flaeche-2); border: 1px dashed var(--linie-2); border-radius: 10px; } .fe-hinzu > summary { padding: 10px 14px; font-size: 13px; font-weight: 600; color: var(--mint-dunkel); list-style: none; } .fe-hinzu > summary::-webkit-details-marker { display: none; } .fe-hinzu[open] > summary { border-bottom: 1px dashed var(--linie-2); } .fe-hinzu-inhalt { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px 28px; padding: 14px; } .fe-hinzu-teil .fe-leise { margin: 8px 0 0; font-size: 12.5px; } .fe .fe-hinzu-teil button { margin-top: 12px; } .fe-weitere { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 16px; } /* ------------------------------------------------- Zuständigkeit nach Kostenstellen */ .fe-uebersicht { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 12px 0 6px; padding: 10px 12px; background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: 8px; font-size: 13.5px; } .fe-recht { padding: 16px 0; border-top: 1px solid var(--linie); scroll-margin-top: 16px; } .fe-recht-kopf { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 14px; } .fe-dims { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px 28px; } .fe-dim legend { margin: 0 0 6px; padding: 0; font-size: 13px; font-weight: 650; } .fe .fe-haken { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 3px 0; font-size: 13.5px; font-weight: 400; line-height: 1.4; } .fe .fe-haken input { flex: none; width: 15px; height: 15px; margin: 3px 0 0; } .fe-stellen { display: grid; max-height: 14rem; margin: 4px 0; padding-left: 4px; overflow: auto; } .fe-dim:has(input[name$="_alle"]:checked) .fe-stellen { opacity: .45; } /* ------------------------------------------------------------------- Ausprobieren */ .fe-probe-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin: 14px 0 0; } .fe-probe-form > div { flex: 1 1 11rem; min-width: 0; } .fe .fe-probe-form label { margin: 0 0 4px; } .fe .fe-probe-form input, .fe .fe-probe-form select { margin: 0; } .fe-probe-ergebnis { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--linie); } .fe-probe-kopf { margin: 0 0 12px; font-size: 14px; } .fe-probe-stufen { display: grid; gap: 12px; } .fe-probe-stufe { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 0 12px; align-items: start; } .fe-probe-stufe p { margin: 4px 0 0; font-size: 13.5px; } .fe-entfaellt { opacity: .7; } .fe-entfaellt .fe-nr { background: var(--neutral-bg); color: var(--neutral); } .fe-probe-person { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; } .fe-probe-niemand { color: var(--risk); font-weight: 600; } .fe-ausgeschlossen { color: var(--schrift-2); font-size: 13px; } /* ------------------------------------------------------------------- Vertretungen */ .fe-vertretungen { margin: 10px 0 0; } .fe-vertretungen li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 9px 0; border-bottom: 1px solid var(--linie); font-size: 13.5px; } .fe-vertretungen li:last-child { border-bottom: 0; } /* ---------------------------------------------------------------------- Fußleiste */ .fe-fuss { position: sticky; bottom: 0; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 20px 0 0; padding: 12px 16px; background: #fff; border: 1px solid var(--linie); border-radius: 12px; box-shadow: var(--schatten-gross); } .fe-fuss-status { margin-right: auto; font-size: 12.5px; color: var(--schrift-2); } .fe-fuss-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; } /* ------------------------------------------------------------ Liste der Unternehmen */ .fe-einleitung { margin: -6px 0 16px; } .fe-liste { display: grid; gap: 12px; } .fe-zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin: 0; } .fe-zeile-haupt { flex: 1 1 18rem; min-width: 0; } .fe-zeile h2 a { color: var(--schrift); } .fe-zeile .fe-leise { margin-top: 4px; } @media (max-width: 56rem) { main.fb.fe { padding: 16px; } .fe-karte { padding: 16px; } .fe-feld { grid-template-columns: minmax(0, 1fr); } .fe-feld > h3 { margin-top: 0; } .fe-stufe-werkzeuge { margin-left: 0; } .fe-fuss { position: static; } }