/* ============================================================ Belegverwaltung — Design ------------------------------------------------------------ Quelle der Wahrheit ist das Referenz-Mockup (siehe DESIGN.md): dunkle Leiste oben, warmes Papier, weisse Flaechen mit duennen Linien, keine Schatten, kaum Farbe. --ox ausschliesslich fuer Fristueberschreitung. ============================================================ */ /* Geist (Vercel) - variable Schnittweite deckt 400/500/600/700 in einer Datei ab. Selbst ausgeliefert aus wwwroot/lib/geist (geist-npm-Paket 1.7.2, OFL-Lizenz daneben) - kein CDN, das die IP jedes Nutzers sieht (#270). */ @font-face { font-family: 'Geist'; src: url('../lib/geist/Geist-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } :root { --font: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif; /* ---------- Palette ---------- */ --t1: #123E43; /* Titel, Zahlen, Leiste, primaere Buttons - dunkles Teal */ --t2: #4F6367; /* Kontexttext, Nebensaetze - Petrol-Grau statt Braun */ --t3: #93A6A8; /* Zeitangaben, Beiwerk, Platzhalter - helles Petrol-Grau statt Braun */ --paper: #F8F8F6; /* EINHEITLICHER Hintergrund - Topbar, Sidebar, Seite; fast weiss (#205), die Karten heben sich ueber ihre Linie ab */ --surface: #FFFFFF; /* Karten, Tabellen, Eingabefelder - bleibt die hellste Flaeche */ --rule: #E5E2DB; /* tragende Linien, Rahmen - neutraler als frueher, passt zum helleren Papier */ --rule2: #EFEDE8; /* Trennlinien in Listen */ --ox: #A4362A; /* AUSSCHLIESSLICH Fristueberschreitung */ /* Aktivzustand der Navigation - einzige Stelle, die bewusst Orange traegt. */ --accent-orange: #F85A12; --accent-orange-soft: #FFF0E8; /* Abstufungen von t1/ox fuer Zustaende - keine neuen Farben */ --t1-hover: #0C2E32; --t1-soft: #E1EBEC; --ox-hover: #8B2E24; --ox-soft: #F3E4E0; /* Rundungen (#205): vier Stufen, keine Einzelwerte mehr im Stylesheet. Ziel ist die Mitte zwischen "alles eckig" und "alles fast rund" - Pillen (999px) und Kreise (50%) bleiben davon unberuehrt. */ --radius-xs: 6px; /* Kleinkram: Badges, Tags, Menuezeilen, Zeilen-Hover */ --radius-sm: 10px; /* Bedienelemente: Buttons, Eingabefelder, Icon-Knoepfe */ --radius: 12px; /* Flaechen: Karten, Tabellen, Menues, Panels */ --radius-lg: 16px; /* Grosse Flaechen: Popups, Kacheln der Zentrale */ --nav-h: 62px; --sidebar-w: 224px; /* ---------- Alte Tokennamen (noch von einzelnen Seiten gelesen) ---------- */ --font-sans: var(--font); --accent: var(--t1); --accent-strong: var(--t1-hover); --accent-hover: var(--t1-hover); --accent-soft: var(--t1-soft); --accent-contrast: var(--paper); --bg: var(--paper); --surface-2: var(--rule2); --surface-hover: var(--t1-soft); --border: var(--rule); --border-strong: var(--rule); --text: var(--t1); --text-muted: var(--t2); --text-faint: var(--t3); --pos: var(--t1); --pos-soft: var(--t1-soft); --neg: var(--t1); --neg-soft: var(--rule2); --warn: var(--t2); --warn-soft: var(--rule2); --info: var(--t2); --info-soft: var(--rule2); --shadow-sm: none; --shadow-md: none; --shadow-lg: none; } /* Bootstrap auf die Palette ziehen, damit ungestylte Reste nicht ausreissen. */ :root, [data-bs-theme="light"] { --bs-body-font-family: var(--font); --bs-body-bg: var(--paper); --bs-body-color: var(--t1); --bs-border-color: var(--rule); --bs-primary: var(--t1); --bs-primary-rgb: 50, 39, 30; --bs-link-color: var(--t1); --bs-link-color-rgb: 50, 39, 30; --bs-link-hover-color: var(--t1-hover); --bs-link-hover-color-rgb: 43, 33, 26; --bs-emphasis-color: var(--t1); --bs-secondary-color: var(--t2); --bs-tertiary-bg: var(--rule2); --bs-border-radius: var(--radius-sm); --bs-border-radius-sm: var(--radius-xs); --bs-border-radius-lg: var(--radius); --bs-border-radius-xl: var(--radius-lg); } * { box-sizing: border-box; } html { background: var(--paper); } /* Die Seite selbst scrollt nie - .content ist fuer jede Seite der einzige Scroll-Container (Grund: ohne diesen Riegel kann bei sehr knapp zu hohem Inhalt der Mausrad-Scroll an html/body haengen bleiben statt an der eigentlich gemeinten Flaeche - beobachtet auf der Zentrale). */ html, body { height: 100%; overflow: hidden; } body { margin: 0; font-family: var(--font); font-size: 15px; line-height: 1.45; color: var(--t1); background: var(--paper); -webkit-font-smoothing: antialiased; } /* Startbildschirm (#332): #app-splash in _Host.cshtml bis der Circuit steht, dieselbe Klasse in MainLayout.razor, solange Firma/Benutzer geprueft werden. Gleiches Aussehen, damit der Wechsel nicht springt. Ausgeblendet ueber den Marker .app-ready, den MainLayout vor den statischen Splash rendert - ohne Skript und ohne :has(). */ .app-splash { position: fixed; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; background: var(--paper); } .app-splash-logo { height: 56px; width: auto; opacity: .9; } .app-ready ~ #app-splash { display: none; } /* Archivo ist von Haus aus kraeftig - 500 wirkt hier schon wie "fett", 600 bleibt Namen und Summen vorbehalten. */ h1, h2, h3, h4, h5, h6 { color: var(--t1); margin: 0; font-weight: 500; line-height: 1.25; } h1 { font-size: 20px; } h2 { font-size: 17px; } h5 { font-size: 16px; } a { color: var(--t1); text-decoration: none; } p { margin: 0 0 10px; } .text-muted { color: var(--t2) !important; } b, strong { font-weight: 600; } /* Beträge sind keine Sprache: bleiben in jeder Sprache und auch im RTL-Layout rechtsbündig und in lateinischen Ziffern (die Kultur für Zahlenformate ist ohnehin fix de-AT, siehe LOCALIZATION.md). direction:ltr + unicode-bidi:isolate verhindert, dass der Bidi-Algorithmus z.B. "1.465,80 €" neben arabischem Text umsortiert; text-align:right überschreibt bewusst Bootstraps logisches .text-end (das in RTL nach links kippen würde) - beide Klassen stehen an jeder Geldstelle nebeneinander. */ .text-money, .tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; direction: ltr; unicode-bidi: isolate; text-align: right; } :focus-visible { outline: 2px solid var(--t1); outline-offset: 2px; } ::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-thumb { background: var(--rule); border: 3px solid var(--paper); border-radius: 8px; } ::-webkit-scrollbar-track { background: transparent; } /* ============================================================ Kopfleiste + Sidebar ------------------------------------------------------------ Topbar, Sidebar und Seite teilen sich denselben Ton (--paper, einheitlich). Kein Strich unter der Topbar - die einzige Trennung ist die eine gefadete Vertikale bei --sidebar-w (.app-divider, unten), die ueber die volle Hoehe durchlaeuft und oben/unten ausblendet. ============================================================ */ .topnav { position: sticky; top: 0; z-index: 60; height: var(--nav-h); background: var(--paper); color: var(--t1); display: flex; align-items: center; gap: 10px; padding-inline-end: 24px; } .topnav-brand { display: flex; align-items: center; justify-content: flex-start; gap: 10px; color: var(--t1); width: var(--sidebar-w); flex-shrink: 0; height: 100%; /* Fluchtet mit den Nav-Icons (#205): deren Zeichen beginnt bei 30px. Das Logo-PNG hat links ~9px transparenten Rand, davor nur die duenne Dachlinie - der kraeftige Schriftzug beginnt erst ~14.5px nach der Bildkante. Auf den Schriftzug ausgerichtet, nicht auf die Dachlinie, sonst wirkt das Logo eingerueckt. */ padding-inline: 15px 12px; } .topnav-brand:hover { color: var(--t1); } .topnav-logo { width: 26px; height: 26px; flex-shrink: 0; background: var(--t1); color: var(--paper); border-radius: var(--radius-sm); display: grid; place-items: center; overflow: hidden; font-size: 11px; font-weight: 600; letter-spacing: .02em; } .topnav-logo img { width: 100%; height: 100%; object-fit: cover; } .topnav-brand-logo { height: 56px; width: auto; max-width: 100%; object-fit: contain; display: block; } .topnav-spacer { flex: 1; } .topnav-search { display: flex; align-items: center; gap: 8px; width: 500px; height: 38px; margin: 0; margin-inline-start: 20px; background: #FFFFFF; border: 1px solid var(--rule); border-radius: var(--radius); padding-block: 0; padding-inline: 16px; } .topnav-search:focus-within { border-color: var(--t3); } .topnav-search > .bi-search { color: var(--t3); font-size: 15px; flex-shrink: 0; } .topnav-search input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--t1); font: inherit; font-size: 14.5px; } .topnav-search input::placeholder { color: var(--t3); } .topnav-search input::-webkit-search-cancel-button { display: none; } .topnav-icon { position: relative; flex-shrink: 0; width: 36px; height: 36px; border-radius: var(--radius-sm); border: 0; display: grid; place-items: center; background: transparent; color: var(--t2); font-size: 17px; } .topnav-icon:hover { background: var(--t1-soft); color: var(--t1); } .topnav-badge { position: absolute; top: 3px; inset-inline-end: 3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--radius-xs); display: grid; place-items: center; background: var(--t1); color: var(--paper); font-size: 10.5px; font-weight: 700; } .topnav-burger { display: none; color: var(--t1); } .topnav-burger:hover { background: var(--t1-soft); } @keyframes menu-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .topnav-popover { position: absolute; top: calc(var(--nav-h) + 6px); inset-inline-end: 24px; z-index: 70; width: 320px; padding: 6px; background: var(--surface); color: var(--t1); border: 1px solid var(--rule); border-radius: var(--radius); animation: menu-in .16s cubic-bezier(.2,.8,.2,1) both; } .topnav-popover-title { font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--t2); padding: 8px 10px 4px; } .topnav-popover-empty { padding: 10px 10px 14px; color: var(--t2); font-size: 14.5px; } /* ============================================================ Profil - Avatar, Name, Firma, Chevron; ein Klick oeffnet das Menue mit Sprachumschalter (Ausklapp-Untermenue) und Einstellungen. ============================================================ */ .profile { position: relative; flex-shrink: 0; margin-inline-start: 4px; } .profile-trigger { display: flex; align-items: center; gap: 10px; padding: 5px 10px 5px 5px; border-radius: var(--radius); background: transparent; border: 0; cursor: pointer; font-family: var(--font); max-width: 220px; } .profile-trigger:hover { background: var(--t1-soft); } .profile-text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 1.3; } .profile-name { font-size: 14px; font-weight: 600; color: var(--t1); max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .profile-company { font-size: 12px; color: var(--t2); max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .profile-chevron { flex-shrink: 0; font-size: 12px; color: var(--t2); transition: transform .15s ease; } .profile-chevron.up { transform: rotate(180deg); } .profile-menu { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 70; min-width: 230px; padding: 6px; background: var(--surface); color: var(--t1); border: 1px solid var(--rule); border-radius: var(--radius); animation: menu-in .16s cubic-bezier(.2,.8,.2,1) both; } .profile-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 10px; border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--t1); font: 500 14.5px var(--font); text-align: start; cursor: pointer; } .profile-menu-item:hover { background: var(--t1-soft); } .profile-menu-item > i:first-child { font-size: 16px; width: 18px; text-align: center; color: var(--t2); flex-shrink: 0; } .profile-menu-caret { margin-inline-start: auto; font-size: 12px; color: var(--t3); transition: transform .15s ease; } .profile-menu-caret.open { transform: rotate(90deg); } .profile-submenu { padding-inline-start: 28px; padding-block: 2px 4px; display: flex; flex-direction: column; gap: 1px; } .profile-submenu-item { padding: 8px 10px; border-radius: var(--radius-xs); color: var(--t2); font-size: 14px; } .profile-submenu-item:hover { background: var(--t1-soft); color: var(--t1); } .profile-submenu-item.active { color: var(--t1); font-weight: 600; } .profile-menu-sep { height: 1px; margin: 4px 6px; background: var(--rule2); } .profile-backdrop { position: fixed; inset: 0; z-index: 65; border: 0; background: transparent; } /* ---------- Sidebar ---------- */ .app-body { height: calc(100vh - var(--nav-h)); display: flex; position: relative; } .sidebar { width: var(--sidebar-w); flex-shrink: 0; height: 100%; overflow-y: auto; background: var(--paper); padding: 16px 14px 16px; /* Spalte, damit der Firmenblock (#205) unten sitzt, egal wie viele Punkte darueber stehen. */ display: flex; flex-direction: column; } /* Die eine Trennlinie zwischen Sidebar und Inhalt - faedet oben (unter der Topbar) und unten aus statt hart durchzulaufen. Ueberspannt bewusst die ganze Fensterhoehe (fixed, nicht Teil von .sidebar), damit sie ohne Bruch durch Topbar und Arbeitsflaeche durchgeht. Nur am Desktop - am Handy ist die Sidebar eine Schublade ohne feste Spalte daneben. --t3 statt --rule, weil Topbar/Sidebar/Inhalt jetzt dieselbe Flaeche sind - ohne den Farbunterschied braucht die Linie selbst mehr Praesenz, um noch als Trennung zu lesen. */ .app-divider { position: fixed; top: 0; bottom: 0; inset-inline-start: var(--sidebar-w); width: 1px; z-index: 61; pointer-events: none; background: linear-gradient(to bottom, transparent 0%, var(--t3) 18%, var(--t3) 82%, transparent 100%); } /* Firma ganz unten (#205): margin-top:auto schiebt den Block ans Ende der Spalte; Innenabstand links wie die Nav-Links, damit Logo und Icons fluchten. */ .sidebar-tenant { display: flex; align-items: center; gap: 10px; flex-shrink: 0; margin-top: auto; padding-block: 14px 2px; padding-inline: 14px 6px; border-top: 1px solid var(--rule2); color: var(--t2); min-width: 0; } .sidebar-nav { flex-shrink: 0; margin-bottom: 16px; } .sidebar-tenant-name { font-size: 13.5px; font-weight: 500; color: var(--t2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebar-nav { display: flex; flex-direction: column; gap: 2px; } .sidebar-link { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: var(--radius-sm); color: var(--t2); font-size: 15px; font-weight: 400; border-inline-start: 3px solid transparent; transition: background .12s ease, color .12s ease, border-color .12s ease; } .sidebar-link i { font-size: 16px; width: 18px; text-align: center; flex-shrink: 0; color: var(--t3); } .sidebar-link:hover { background: var(--t1-soft); color: var(--t1); } .sidebar-link:hover i { color: var(--t2); } /* Aktiv: Text bleibt in --t1 (Kontrast auf dem hellen Orange-Ton waere zu schwach fuer Fliesstext) - Orange traegt der Akzentbalken, das Icon und der getoente Hintergrund. */ .sidebar-link.active { background: var(--accent-orange-soft); color: var(--t1); font-weight: 600; border-inline-start-color: var(--accent-orange); } .sidebar-link.active i { color: var(--accent-orange); } /* Warnpunkt (#214): eine Rechnung ist ueberfaellig oder ein Angebot wartet aufs Nachfassen. Rot und pulsierend - auffallen ist hier die Aufgabe, deshalb bewusst nicht --ox (das bleibt ruhig, fuer die Kennzeichnung in Listen). */ .nav-alert-dot { position: relative; margin-inline-start: auto; width: 9px; height: 9px; flex-shrink: 0; border-radius: 50%; background: #FF3B3B; box-shadow: 0 0 8px rgba(255, 59, 59, .8); } .nav-alert-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #FF3B3B; animation: nav-alert-pulse 1.8s cubic-bezier(.2, .6, .4, 1) infinite; } @keyframes nav-alert-pulse { from { transform: scale(1); opacity: .7; } to { transform: scale(3); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .nav-alert-dot::after { animation: none; } } /* Unterpunkte (#195): eingerueckt, eine Spur kleiner, mit einer feinen Fuehrungslinie links, damit die Zugehoerigkeit ohne Ueberschrift klar ist. */ .sidebar-sub { display: flex; flex-direction: column; gap: 1px; margin: 1px 0 4px 20px; padding-inline-start: 8px; border-inline-start: 1px solid var(--rule); } .sidebar-sub .sidebar-link { padding: 7px 10px; font-size: 14px; } .sidebar-sub .sidebar-link i { font-size: 14.5px; } .sidebar-group { width: 100%; background: transparent; border-top: 0; border-bottom: 0; border-inline-end: 0; text-align: start; cursor: pointer; font: inherit; font-size: 15px; } .sidebar-group .sidebar-chevron { margin-inline-start: auto; font-size: 12px; width: auto; transition: transform .15s ease; } .sidebar-group.open .sidebar-chevron { transform: rotate(180deg); } /* Todo ist die Handy-Ansicht - am Desktop nicht in der Sidebar. */ .sidebar-link-mobil { display: none; } /* Trennt Stammdaten von den oberen Menuepunkten - eine gefadete Linie statt einer Rubrik-Ueberschrift, kraeftiger als die Listenlinien (--rule2) sonst, damit sie neben den Menuepunkten nicht untergeht. */ .sidebar-divider { height: 2px; margin: 16px 6px; border: 0; background: linear-gradient(to right, transparent 0%, var(--t3) 20%, var(--t3) 80%, transparent 100%); } .sidebar-backdrop { position: fixed; inset: var(--nav-h) 0 0 0; z-index: 55; border: 0; background: rgba(50,39,30,.35); display: none; } /* ---------- Inhalt ---------- */ .content { flex: 1 1 auto; min-width: 0; height: 100%; overflow-y: auto; max-width: 1680px; margin: 0 auto; padding: 32px 40px 56px; } /* ============================================================ Bausteine: Karten, Zeilen, Buttons, Pills ============================================================ */ .card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: none; color: var(--t1); overflow: hidden; } .card-accent { border-inline-start: 3px solid var(--t1); } .card-accent.ox { border-inline-start-color: var(--ox); } .card-band { background: var(--t1); color: var(--paper); font-size: 12.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; padding: 8px 18px; } .card-body { padding: 16px 18px; } .card-title { font-size: 16.5px; font-weight: 500; } .card-sub { color: var(--t2); font-size: 15px; margin-top: 3px; } .card-sub .ox { color: var(--ox); } .card-amount { font-size: 16px; font-weight: 500; margin-top: 4px; font-variant-numeric: tabular-nums; } .card-amount.ox { color: var(--ox); } .card-sep { border: 0; border-top: 1px solid var(--rule2); margin: 14px -18px; } .card-q { font-size: 15px; color: var(--t1); } .pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .pill { font: 400 14px var(--font); color: var(--t2); padding: 7px 13px; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; line-height: 1.2; } .pill:hover { border-color: var(--t3); color: var(--t1); } .pill.on { background: var(--t1); color: var(--paper); border-color: var(--t1); } .pill-input { font: 500 14px var(--font); color: var(--t1); padding: 6px 10px; border: 1px solid var(--t3); border-radius: var(--radius-sm); background: var(--surface); min-width: 120px; outline: 0; } .btn-dark, .btn-ox { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--t1); color: var(--paper); border: 1px solid var(--t1); border-radius: var(--radius-sm); font: 500 15px var(--font); padding: 11px 18px; line-height: 1.2; cursor: pointer; white-space: nowrap; transition: background .12s ease; } .btn-dark:hover { background: var(--t1-hover); color: var(--paper); } .btn-ox { background: var(--ox); border-color: var(--ox); } .btn-ox:hover { background: var(--ox-hover); color: var(--paper); } .btn-dark.wide, .btn-ox.wide { width: 100%; } .btn-dark.sm, .btn-ox.sm { font-size: 14px; padding: 8px 14px; } .btn-dark:disabled { opacity: .55; cursor: default; } /* Listenzeilen direkt auf dem Papier - keine Karte um jede Zeile. */ .rows { } .row-item { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding: 13px 8px; margin: 0 -8px; border-bottom: 1px solid var(--rule2); cursor: pointer; border-radius: var(--radius-xs); } .row-item:hover { background: rgba(50,39,30,.035); } .row-item:last-of-type { border-bottom: 0; } .row-main { min-width: 0; } .row-title { font-size: 16px; font-weight: 400; color: var(--t1); } .row-title .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--t1); margin-block: 0 2px; margin-inline-end: 8px; } .row-sub { font-size: 14.5px; color: var(--t2); margin-top: 2px; } .row-sub .ox { color: var(--ox); } .row-amt { font-size: 16px; color: var(--t2); font-variant-numeric: tabular-nums; white-space: nowrap; padding-top: 1px; } .row-amt.ox { color: var(--ox); } .row-tag { font-size: 14.5px; color: var(--t3); white-space: nowrap; padding-top: 1px; } .rows-more { color: var(--t3); font-size: 14.5px; padding: 12px 0 0; } .rows-more a { color: var(--t2); text-decoration: underline; } .rows-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--rule); margin-top: 14px; padding-top: 14px; } .rows-total span { color: var(--t2); font-size: 15px; } .rows-total b { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; } .rows-empty { color: var(--t3); font-size: 14.5px; padding: 12px 0; } /* Zurueck zur Liste - sitzt ueber dem Seitentitel, leise, aber immer da. */ .back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--t2); font-size: 14px; margin-bottom: 10px; } .back-link:hover { color: var(--t1); } .back-link i { font-size: 14px; } .form-section-title { font-size: 15px; font-weight: 500; margin: 6px 0 8px; } .pos-table thead th { background: transparent; padding-inline: 8px; } .pos-table tbody td { padding: 7px 8px; border-bottom: 1px solid var(--rule2); } /* ============================================================ Popup (Beleg anlegen) ============================================================ */ .dlg-backdrop { position: fixed; inset: 0; z-index: 80; background: rgba(50,39,30,.42); animation: dlg-fade .18s ease-out both; } .dlg { /* Zentriert ueber left/right 0 + margin auto, NICHT ueber transform: ein bleibendes transform macht das Popup zum Bezugsrahmen aller position:fixed-Kinder (Bildviewer, Editor, Kalender): die lagen dann im Popup statt im Fenster und wurden dort abgeschnitten - Firefox zeigte den Viewer deshalb gar nicht (#218). Die Animation setzt transform nur, solange sie laeuft. */ position: fixed; top: 5vh; left: 0; right: 0; margin-inline: auto; z-index: 81; width: min(1060px, calc(100vw - 32px)); max-height: 90vh; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-lg); outline: none; transform: none; animation: dlg-in .24s cubic-bezier(.2,.8,.2,1) backwards; } .dlg.dlg-sm { width: min(680px, calc(100vw - 32px)); } /* Mittlere Groesse fuer Stammdaten mit Unterseiten (#212): Leiste links + Felder. */ .dlg.dlg-md { width: min(880px, calc(100vw - 32px)); } .dlg .validation-errors { margin-bottom: 14px; } .dlg-backdrop.out { animation: dlg-fade .16s ease-in reverse both; } .dlg.out { animation: dlg-out .16s ease-in both; } @keyframes dlg-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes dlg-in { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } } @keyframes dlg-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(8px) scale(.99); } } .dlg-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px 14px; border-bottom: 1px solid var(--rule); } .dlg-head h2 { font-size: 18px; } .dlg-x { width: 36px; height: 36px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--t2); font-size: 16px; display: grid; place-items: center; cursor: pointer; } .dlg-x:hover { background: var(--t1-soft); color: var(--t1); } .dlg-body { overflow: auto; padding: 20px 24px 8px; } .dlg-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 24px 18px; border-top: 1px solid var(--rule); } /* ============================================================ Uebersicht ("Heute") ============================================================ */ .heute-line { color: var(--t3); font-size: 15px; margin-bottom: 22px; } /* Hero: Gruss + Anspruch links, die Wellen-Grafik rechts, blutet ueber den Seitenrand von .content hinaus. Die Grafik ist absolut positioniert statt ein Flex-Kind - so bestimmt allein der Text die Hoehe von .hero (der Hero wird dadurch so klein wie der Text braucht), und die Grafik kann frei darueber schweben, unabhaengig davon wo der Text sitzt. */ .hero { position: relative; display: flex; align-items: flex-start; gap: 28px; margin-bottom: 6px; /* Die Karten beginnen erst unter der Grafik, nicht darueber. Weil die Grafik absolut sitzt, muss .hero ihre Unterkante selbst nachbilden: 10px (top) + sichtbarer Teil unterhalb des Gipfels = 53% der Bildhoehe (bei 40% sitzt der Gipfel, ab ~93% ist das PNG leer). Bildhoehe = 76% Breite * 764/2058, gedeckelt ueber max-width 1400px. cqw bezieht sich auf .zentrale (container-type unten). */ min-height: calc(10px + min(14.95cqw, 275px)); } .hero-text { flex-shrink: 1; min-width: 220px; max-width: 480px; } .hero-eyebrow { color: var(--t2); font-size: 14px; margin-bottom: 4px; } .hero-title { font-size: 25px; font-weight: 600; line-height: 1.3; color: var(--t1); margin: 0; } .hero-image { /* Absolut relativ zu .hero: nimmt an dessen Groessenberechnung nicht mehr teil (der Hero-Block ist also nur so hoch wie der Text), "oben" ist hier frei einstellbar (auch negativ) statt an die Flex-Zeile gebunden. Breite 76% von .hero, Hoehe aus aspect-ratio. Der hoechste Gipfel liegt bei ~40% der Bildhoehe - translateY(-40%) zieht ihn unabhaengig von der Bildgroesse auf Hoehe der Grusszeile (.hero-eyebrow). */ position: absolute; top: 10px; inset-inline-end: -40px; z-index: 0; transform: translateY(-40%); width: 76%; min-width: 260px; max-width: 1400px; aspect-ratio: 2058 / 764; height: auto; object-fit: contain; object-position: right top; pointer-events: none; user-select: none; } @media (max-width: 900px) { .hero { min-height: 0; } .hero-image { display: none; } .hero-text { flex-shrink: 1; max-width: none; } } /* Schnellzugriff direkt unter dem Titel, im Hero-Text selbst - kein eigener Block mehr danach, damit die Karten darunter naeher heranruecken. */ .hero-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .btn-hero { display: inline-flex; align-items: center; gap: 6px; padding: 11px 16px; border-radius: var(--radius-sm); font: 500 13.5px var(--font); line-height: 1.2; cursor: pointer; white-space: nowrap; transition: background .12s ease, border-color .12s ease, color .12s ease; } .btn-hero i { font-size: 13px; } .btn-hero-primary { background: var(--t1); color: var(--paper); border: 1px solid var(--t1); } .btn-hero-primary:hover { background: var(--t1-hover); border-color: var(--t1-hover); } .btn-hero-secondary { background: var(--white); color: var(--t1); border: 1px solid var(--rule); } .btn-hero-secondary:hover { border-color: var(--t3); background: var(--t1-soft); } /* Karten-Grundform - noch von Catch Up (.col-head) und dem Projekt-Ueberblick (.dash-card) benutzt. */ .dash-card { background: #FFFFFF; border: 0; border-radius: var(--radius-lg); padding: 18px 20px 20px; display: flex; flex-direction: column; min-height: 0; } .col-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; } .col-head h2 { font-size: 16px; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; } .col-head h2 > .bi { color: var(--t1); font-size: 16px; line-height: 1; } .col-head span { color: var(--t3); font-size: 14px; } /* Die Zentrale scrollt nie als Ganzes - Liste und Chat scrollen fuer sich, die Scrollleiste zeigt sich erst beim Hover. ".content-zentrale" setzt MainLayout.razor beim Rendern auf der Startseite (#332, vorher per JS) - ein ":has(.zentrale)"-Selektor matcht zwar laut Element.matches(), wird aber nicht aus der Stylesheet-Kaskade angewendet. */ .content.content-zentrale { height: 100%; overflow: hidden; display: flex; flex-direction: column; /* Mehr Kopfabstand als die uebrigen Seiten - der Hero bekommt Luft nach oben, die Grafik haengt zusaetzlich frei darueber (.hero-image). */ padding-top: 48px; padding-bottom: 20px; } .zentrale { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; container-type: inline-size; } .zentrale .heute-line, .zentrale .hero { flex: 0 0 auto; } .zentrale-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable; } .zentrale-scroll::-webkit-scrollbar-thumb { background: transparent; } .zentrale-scroll:hover::-webkit-scrollbar-thumb, .zentrale-scroll:focus-within::-webkit-scrollbar-thumb { background: var(--rule); } /* ============================================================ Zentrale (#214) - die eine Seite, die Kunst sein darf. Bewusste Ausnahme von DESIGN.md (siehe dort): unter dem hellen Hero liegen vier Tafeln in Nacht-Petrol, wie die Bergkette im Hero-Bild bei Daemmerung. Farbe traegt hier Bedeutung: jedes Projekt hat seinen Akzent (Balken oben = Icon unten), Orange-Glut heisst Auslastung, Gruen heisst Geld. Bewegung nur beim Laden und unter dem Finger, und nie bei "prefers-reduced-motion". ============================================================ */ @font-face { font-family: 'Geist Mono'; src: url('../lib/geist/GeistMono-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } .zx { --zx-text: #EAF4F2; --zx-dim: rgba(234, 244, 242, .64); --zx-faint: rgba(234, 244, 242, .38); --zx-line: rgba(255, 255, 255, .08); --zx-glass: rgba(255, 255, 255, .055); --zx-glass-hi: rgba(255, 255, 255, .1); --zx-ink: #0A2225; /* Grund der Tafeln, auch Ring um die Avatare */ --zx-glut: #FF7A2F; --zx-gold: #FFB547; --zx-green: #3BE39A; --zx-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace; } /* Projekt-Akzente: Glut, Tuerkis, Koralle, Kobalt, Flieder, Limette. */ .zx-accent-0 { --a1: #FF8A3D; --a2: #FFC15E; } .zx-accent-1 { --a1: #22D3BE; --a2: #8BF0D8; } .zx-accent-2 { --a1: #FF6B6B; --a2: #FFA88E; } .zx-accent-3 { --a1: #6F93FF; --a2: #B4C6FF; } .zx-accent-4 { --a1: #B67CFA; --a2: #E6B9FF; } .zx-accent-5 { --a1: #9BE135; --a2: #D7F89A; } /* Links Zeitleiste (flach) ueber den laufenden Projekten, rechts der Chat ueber die ganze Hoehe. Ohne Chat-Recht nimmt die linke Spalte alles. */ .zx-board { position: relative; z-index: 1; flex: 1 1 auto; min-height: 0; display: grid; gap: 16px; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); grid-template-rows: clamp(132px, 16vh, 168px) minmax(0, 1fr); } .zx-board.no-chat { grid-template-columns: minmax(0, 1fr); } .zx-week { grid-column: 1; grid-row: 1; } .zx-running { grid-column: 1; grid-row: 2; } .zx-chat { grid-column: 2; grid-row: 1 / span 2; } /* Hero auf der Zentrale flacher, die Grafik ruckt hoeher - mehr Platz fuer die Tafeln. */ /* Der Hero reicht bis an die Oberkante und schneidet das Bild unten ab - so darf die Grafik gross sein, die Spitze bleibt ganz, der Fuss verschwindet an der Kante. */ .zx .hero { overflow: hidden; margin-top: calc(-1 * var(--zt, 48px)); padding-top: var(--zt, 48px); margin-inline-end: -40px; padding-inline-end: 40px; min-height: calc(var(--zt, 48px) + min(10.5cqw, 196px)); } .zx .hero-image { top: calc(var(--zt, 48px) + 10px); width: 96%; max-width: 1800px; inset-inline-end: 0; transform: translateY(-46%); } .zx-panel { position: relative; isolation: isolate; min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: 16px 18px; border-radius: 22px; overflow: hidden; color: var(--zx-text); background: radial-gradient(120% 140% at 0% 0%, rgba(34, 211, 190, .16), transparent 55%), radial-gradient(90% 120% at 100% 110%, rgba(255, 122, 47, .14), transparent 60%), linear-gradient(158deg, #154A50 0%, #0E3236 52%, var(--zx-ink) 100%); border: 1px solid rgba(255, 255, 255, .06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 24px 48px -26px rgba(6, 28, 31, .75); animation: zx-rise .6s cubic-bezier(.2, .8, .2, 1) backwards; /* nicht "both": ein stehenbleibendes transform macht die Tafel zum Bezugsrahmen fuer Popups darin (#218) */ } .zx-chat { animation-delay: .06s; } .zx-running { animation-delay: .12s; } /* Koernung - nimmt den Verlaeufen das Plastik. */ .zx-panel::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .07; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } @keyframes zx-rise { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: none; } } .zx-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; min-height: 30px; } .zx-head h2 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: .01em; color: #FFFFFF; white-space: nowrap; } .zx-kw { font: 500 12px var(--zx-mono); color: var(--zx-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: capitalize; } .zx-count { font: 600 11.5px var(--zx-mono); color: var(--zx-ink); background: linear-gradient(135deg, var(--zx-glut), var(--zx-gold)); padding: 2px 8px; border-radius: 999px; box-shadow: 0 0 14px rgba(255, 122, 47, .45); } .zx-tools { margin-inline-start: auto; display: flex; align-items: center; gap: 6px; } .zx-icon, .zx-chip { height: 30px; display: inline-grid; place-items: center; flex-shrink: 0; border: 1px solid var(--zx-line); background: var(--zx-glass); color: var(--zx-text); border-radius: 10px; cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .15s ease; } .zx-icon { width: 30px; font-size: 13px; } .zx-chip { padding: 0 11px; font: 500 12.5px var(--font); } .zx-icon:hover, .zx-chip:hover { background: var(--zx-glass-hi); border-color: rgba(255, 255, 255, .16); } .zx-icon:active, .zx-chip:active { transform: scale(.94); } .zx-empty { color: var(--zx-faint); font-size: 13.5px; padding: 18px 4px; text-align: center; } .zx-dim { color: var(--zx-faint); } /* ---------- Projekte der Woche ---------- */ .zx-week-body { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .zx-week-days, .zx-week-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); } .zx-week-days { flex: none; padding-bottom: 8px; border-bottom: 1px solid var(--zx-line); margin-bottom: 8px; } .zx-day { display: flex; align-items: baseline; justify-content: center; gap: 6px; color: var(--zx-dim); } .zx-day span { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; } .zx-day b { font: 600 13px var(--zx-mono); color: var(--zx-text); } .zx-day.weekend { opacity: .55; } .zx-day.today b { color: var(--zx-ink); background: linear-gradient(135deg, var(--zx-glut), var(--zx-gold)); padding: 0 7px; border-radius: 8px; box-shadow: 0 0 18px rgba(255, 122, 47, .65); } /* Heute als leuchtende Saeule hinter Kopf und Balken. */ .zx-today-col { position: absolute; top: -4px; bottom: -6px; z-index: 0; pointer-events: none; inset-inline-start: calc(var(--d) * 100% / 7); width: calc(100% / 7); border-radius: 14px; background: linear-gradient(180deg, rgba(255, 122, 47, .16), rgba(255, 122, 47, .03) 70%, transparent); box-shadow: inset 0 0 0 1px rgba(255, 122, 47, .22); } .zx-week-scroll { position: relative; z-index: 1; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; /* Tageslinien als Hintergrund - laufen bis ganz nach unten, egal wie viele Zeilen. */ background-image: linear-gradient(to right, var(--zx-line) 1px, transparent 1px); background-size: calc(100% / 7) 100%; background-attachment: local; } .zx-week-scroll::-webkit-scrollbar { width: 0; height: 0; } .zx-week-grid { grid-auto-rows: 21px; row-gap: 5px; padding: 1px 0 4px; } .zx-bar { position: relative; margin-inline: 4px; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 0 10px; border-radius: 9px; text-decoration: none; font: 600 11.5px var(--font); color: #08201F; background: linear-gradient(90deg, var(--a1), var(--a2)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 20px -8px var(--a1); animation: zx-grow .7s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.25s + var(--i, 0) * 45ms); transition: transform .15s ease, filter .15s ease, box-shadow .15s ease; } .zx-bar:hover { color: #08201F; transform: translateY(-1px); filter: brightness(1.08) saturate(1.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 10px 26px -6px var(--a1); } .zx-bar > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zx-bar > i { font-size: 12px; flex-shrink: 0; } .zx-bar .zx-bar-done { margin-inline-start: auto; } /* Laeuft ueber den Wochenrand: Kante weg, sanft ausgeblendet. */ .zx-bar.cont-l { border-start-start-radius: 0; border-end-start-radius: 0; margin-inline-start: 0; -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.35), #000 22px); mask-image: linear-gradient(90deg, rgba(0,0,0,.35), #000 22px); } .zx-bar.cont-r { border-start-end-radius: 0; border-end-end-radius: 0; margin-inline-end: 0; -webkit-mask-image: linear-gradient(270deg, rgba(0,0,0,.35), #000 22px); mask-image: linear-gradient(270deg, rgba(0,0,0,.35), #000 22px); } .zx-bar.cont-l.cont-r { -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.35), #000 22px, #000 calc(100% - 22px), rgba(0,0,0,.35)); mask-image: linear-gradient(90deg, rgba(0,0,0,.35), #000 22px, #000 calc(100% - 22px), rgba(0,0,0,.35)); } .zx-bar.closed { filter: saturate(.35) brightness(.85); opacity: .7; box-shadow: none; } [dir="rtl"] .zx-bar.cont-l { -webkit-mask-image: linear-gradient(270deg, rgba(0,0,0,.35), #000 22px); mask-image: linear-gradient(270deg, rgba(0,0,0,.35), #000 22px); } [dir="rtl"] .zx-bar.cont-r { -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.35), #000 22px); mask-image: linear-gradient(90deg, rgba(0,0,0,.35), #000 22px); } @keyframes zx-grow { from { clip-path: inset(0 100% 0 0 round 9px); opacity: .3; } to { clip-path: inset(0 0 0 0 round 0); opacity: 1; } } .zx-week-empty { position: absolute; inset: 0; display: grid; place-items: center; } /* ---------- Laufende Projekte ---------- */ .zx-list { list-style: none; margin: 0 -8px; padding: 0 8px; } .zx-list li + li .zx-proj::before { content: ""; position: absolute; top: 0; inset-inline: 56px 10px; height: 1px; background: var(--zx-line); } .zx-list li { animation: zx-slide .5s cubic-bezier(.2, .8, .2, 1) both; } .zx-list li:nth-child(1) { animation-delay: .25s; } .zx-list li:nth-child(2) { animation-delay: .3s; } .zx-list li:nth-child(3) { animation-delay: .35s; } .zx-list li:nth-child(4) { animation-delay: .4s; } .zx-list li:nth-child(5) { animation-delay: .45s; } .zx-list li:nth-child(n+6) { animation-delay: .5s; } @keyframes zx-slide { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } } .zx-proj { position: relative; display: grid; align-items: center; gap: 14px; grid-template-columns: 42px minmax(150px, 1.5fr) minmax(110px, 1fr) minmax(110px, 1fr) 84px minmax(92px, auto); padding: 8px 10px; border-radius: 14px; color: var(--zx-text); text-decoration: none; transition: background .15s ease; } .zx-proj:hover { background: rgba(255, 255, 255, .05); color: var(--zx-text); } .zx-proj-icon { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; font-size: 18px; color: #08201F; background: linear-gradient(140deg, var(--a1), var(--a2)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 8px 22px -8px var(--a1); transition: transform .2s cubic-bezier(.2, .8, .2, 1); } .zx-proj:hover .zx-proj-icon { transform: rotate(-6deg) scale(1.06); } .zx-proj-main { min-width: 0; display: flex; flex-direction: column; gap: 4px; } .zx-proj-name { font-size: 14.5px; font-weight: 600; color: #FFFFFF; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zx-proj-sub { display: flex; align-items: center; gap: 8px; min-width: 0; } .zx-proj-customer { font-size: 12.5px; color: var(--zx-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Status-Pillen auf Nacht: dieselben Toene, nur leuchtend statt pastell. */ .zx-proj-progress { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .zx-proj-progress small, .zx-proj-next small { font-size: 11.5px; color: var(--zx-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zx-bar-track { position: relative; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; } .zx-bar-fill { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: inherit; background: linear-gradient(90deg, #22D3BE, var(--zx-green)); box-shadow: 0 0 12px rgba(59, 227, 154, .55); animation: zx-fill 1.1s cubic-bezier(.2, .8, .2, 1) both; animation-delay: .4s; overflow: hidden; } /* Ein Lichtstreif wandert ueber den Balken - langsam, nur alle paar Sekunden. */ .zx-bar-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); transform: translateX(-100%); animation: zx-sheen 3.6s ease-in-out 1.6s infinite; } @keyframes zx-fill { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } @keyframes zx-sheen { 0% { transform: translateX(-100%); } 45%, 100% { transform: translateX(100%); } } .zx-proj-next { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .zx-proj-next b { font: 600 12.5px var(--zx-mono); color: var(--zx-text); text-transform: capitalize; } .zx-people { display: flex; align-items: center; justify-content: flex-start; } .zx-people .avatar { border-color: var(--zx-ink); border-width: 2px; margin-inline-start: -8px; } .zx-people .avatar:first-child { margin-inline-start: 0; } .zx-people .zx-more { background: rgba(255, 255, 255, .12); color: var(--zx-text); font-size: 9.5px; } .zx-value { justify-self: end; text-align: end; white-space: nowrap; font: 650 15px var(--zx-mono); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--zx-green); text-shadow: 0 0 18px rgba(59, 227, 154, .45); } .zx-value small { display: block; font: 500 10.5px var(--font); letter-spacing: .04em; text-transform: uppercase; color: rgba(59, 227, 154, .65); text-shadow: none; } .zx-value.offer { color: rgba(59, 227, 154, .72); text-shadow: none; } .zx-value.none { color: var(--zx-faint); text-shadow: none; } .zx-sum { flex: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 10px -18px -16px; padding: 14px 28px 16px; border-top: 1px solid var(--zx-line); background: linear-gradient(180deg, transparent, rgba(59, 227, 154, .07)); } .zx-sum-label { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--zx-dim); } .zx-sum-label small { display: block; margin-top: 3px; letter-spacing: .02em; text-transform: none; font-size: 12px; color: rgba(59, 227, 154, .7); } .zx-sum-value { font: 700 30px/1 var(--zx-mono); letter-spacing: -.04em; font-variant-numeric: tabular-nums; background: linear-gradient(100deg, #7BFFC4 0%, var(--zx-green) 40%, #22D3BE 70%, #7BFFC4 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 16px rgba(59, 227, 154, .45)); animation: zx-shine 6s linear infinite; } @keyframes zx-shine { to { background-position: -220% 0; } } @media (prefers-reduced-motion: reduce) { .zx-panel, .zx-bar, .zx-cell, .zx-list li, .zx-bar-fill, .zx-bar-fill::after, .zx-sum-value { animation: none !important; } } /* Niedrige Bildschirme (Laptop 768px): weniger Luft ueber dem Hero und eine flachere obere Reihe, damit die Projektliste mehr als zwei Zeilen zeigt. */ @media (max-height: 860px) and (min-width: 901px) { .content.content-zentrale { padding-top: 26px; padding-bottom: 14px; --zt: 26px; } .zentrale .hero-actions { margin-top: 12px; } .zx-board { gap: 12px; grid-template-rows: 128px minmax(0, 1fr); } .zx-panel { padding: 12px 16px; border-radius: 18px; } .zx-head { margin-bottom: 8px; } .zx-week-days { padding-bottom: 6px; margin-bottom: 6px; } .zx-week-grid { grid-auto-rows: 20px; row-gap: 5px; } .zx-proj { padding-block: 6px; } .zx-proj-icon { width: 38px; height: 38px; border-radius: 12px; font-size: 16px; } .zx-sum { margin: 8px -16px -12px; padding: 10px 26px 12px; } .zx-sum-value { font-size: 26px; } } /* Mittelbreit: Projektliste ohne Termin-Spalte, damit Wert und Leute bleiben. */ @media (max-width: 1400px) { .zx-proj { grid-template-columns: 42px minmax(140px, 1.5fr) minmax(100px, 1fr) 76px minmax(84px, auto); } .zx-proj-next { display: none; } } @media (max-width: 1100px) { .zx-board { display: flex; flex-direction: column; } .zx-week { min-height: 150px; } .zx-chat { height: 560px; } } @media (max-width: 900px) { /* Am Handy scrollt .content wie jede andere Seite - kein Fest-Layout. */ .content.content-zentrale { height: 100%; overflow-y: auto; display: block; } .zentrale { display: block; } .zentrale-scroll { overflow: visible; } .zx-board { display: flex; } .zx-week { overflow-x: auto; } .zx-week-body { min-width: 560px; } .zx-proj { grid-template-columns: 42px minmax(0, 1fr) auto; row-gap: 8px; } .zx-proj-progress { grid-column: 2 / -1; grid-row: 2; } .zx-people { display: none; } } /* Feed der Baustellen (mittlere Spalte) */ .feed-card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); margin-bottom: 20px; overflow: hidden; cursor: pointer; transition: border-color .12s ease; } .feed-card:hover { border-color: var(--t3); } /* ============================================================ Catch Up als Messenger (CatchUpChat.razor, #97) ------------------------------------------------------------ Zeilen wie in Slack/Teams statt Karten: Initialen links, darueber Name + [Auftrag] + [Todo] + Uhrzeit. Akzente nur Petrol und Orange - Auftrag-Tags petrol, Todo-Tags orange; Initialen-Kreise wie ueberall ueber Avatar.razor (#205). ============================================================ */ .cu-head { align-items: center; gap: 12px; margin-bottom: 8px; } .cu-thread-wrap { position: relative; flex: 0 1 300px; min-width: 0; } .cu-thread { width: 100%; height: 32px; display: flex; align-items: center; gap: 8px; padding: 0 10px 0 12px; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: #FFFFFF; color: var(--t1); font: 500 13.5px var(--font); cursor: pointer; text-align: start; } .cu-thread:hover, .cu-thread:focus-visible { border-color: var(--t3); outline: none; } .cu-thread > .bi-chevron-down { margin-inline-start: auto; font-size: 11px; color: var(--t2); } /* .cu-head: sonst greift ".col-head span" (grau, 14px) auf die Eintraege durch. */ .cu-head .cu-thread-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--t1); font-size: inherit; } .cu-head .cu-thread-num { color: var(--t3); font-size: 12px; font-weight: 400; white-space: nowrap; } .cu-head .cu-time { font-size: 12px; } .cu-thread-list { position: absolute; top: 36px; inset-inline-start: 0; z-index: 21; width: max(100%, 300px); max-height: 320px; overflow-y: auto; background: #FFFFFF; border: 1px solid var(--rule); border-radius: var(--radius); padding: 6px; box-shadow: 0 8px 24px rgba(18, 62, 67, .12); } .cu-thread-list button { width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--t1); font: 14px var(--font); text-align: start; cursor: pointer; } .cu-thread-list button:hover { background: var(--t1-soft); } .cu-thread-list button.on { background: var(--t1-soft); font-weight: 600; } .cu-thread-list .cu-dot { margin-inline-start: auto; } /* Neue Nachrichten - Orange, die zweite Akzentfarbe neben Petrol. */ .cu-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--accent-orange); box-shadow: 0 0 0 3px var(--accent-orange-soft); } /* Schritte am Auftrag - leise wie "Nachricht gelöscht", zentriert zwischen den Nachrichten. */ .cu-event { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 8px 0; padding: 0 12px; text-align: center; color: var(--t3); font-size: 13px; font-style: italic; } .cu-event > .bi { font-style: normal; color: var(--t2); } .cu-event .cu-time { font-style: normal; } .cu-pending-thumb { padding: 0 !important; border: 0; background: none; cursor: pointer; border-radius: var(--radius-sm); } .cu-pending-tag { font-style: normal; color: var(--accent-orange); font-size: 12px; margin-inline-start: 6px; } .cu-editor-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; } .cu-tool { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: #FFFFFF; color: var(--t1); font: 13.5px var(--font); cursor: pointer; } .cu-tool:hover { border-color: var(--t3); } .cu-tool.on { background: var(--t1); border-color: var(--t1); color: var(--paper); } .cu-editor-canvas { display: flex; justify-content: center; background: #FFFFFF; border: 1px solid var(--rule2); border-radius: var(--radius); padding: 8px; } .cu-editor-canvas canvas { max-width: 100%; max-height: 58vh; touch-action: none; cursor: crosshair; border-radius: var(--radius-xs); background: #FFFFFF; } .cu-editor-caption { width: 100%; margin-top: 12px; padding: 8px 12px; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: #FFFFFF; color: var(--t1); font: 14px var(--font); outline: none; } .cu-editor-caption:focus { border-color: var(--t3); } .cu-editor-canvas { position: relative; } .cu-sending-overlay { position: absolute; inset: 0; z-index: 2; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; gap: 10px; background: rgba(255, 255, 255, .78); color: var(--t1); font-size: 14.5px; font-weight: 500; } .cu-spinner { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; display: inline-block; border: 3px solid var(--accent-orange-soft); border-top-color: var(--accent-orange); animation: cu-spin .8s linear infinite; vertical-align: -4px; } .cu-spinner.small { width: 14px; height: 14px; border-width: 2px; vertical-align: -2px; } .cu-spinner.light { border-color: rgba(255, 255, 255, .4); border-top-color: #FFFFFF; } .btn-primary .cu-spinner { border-color: rgba(255, 255, 255, .35); border-top-color: #FFFFFF; margin-inline-end: 4px; } .cu-pending-tag.loading { color: var(--t2); } @keyframes cu-spin { to { transform: rotate(360deg); } } .cu-photo-open { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--radius); } .cu-photo-open:focus-visible { outline: 2px solid var(--t1); outline-offset: 2px; } .cu-head-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 4px; } .cu-search { width: 200px; height: 32px; padding: 0 10px; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: #FFFFFF; color: var(--t1); font: 14px var(--font); outline: none; } .cu-search:focus { border-color: var(--t3); } .cu-search::-webkit-search-cancel-button { display: none; } /* eigenes X daneben */ .cu-icon-btn { width: 32px; height: 32px; border: 0; border-radius: var(--radius-sm); flex-shrink: 0; display: grid; place-items: center; cursor: pointer; background: transparent; color: var(--t2); font-size: 15px; transition: background .12s ease, color .12s ease; } .cu-icon-btn:hover, .cu-icon-btn.on { background: var(--t1-soft); color: var(--t1); } .cu-menu-wrap { position: relative; } .cu-menu-backdrop { position: fixed; inset: 0; z-index: 20; } .cu-menu { position: absolute; top: 36px; inset-inline-end: 0; z-index: 21; min-width: 200px; background: #FFFFFF; border: 1px solid var(--rule); border-radius: var(--radius); padding: 6px; box-shadow: 0 8px 24px rgba(18, 62, 67, .12); } .cu-menu button { width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--t1); font: 14px var(--font); text-align: start; cursor: pointer; } .cu-menu button:hover:not(:disabled) { background: var(--t1-soft); } .cu-menu button:disabled { color: var(--t3); cursor: default; } .cu-menu-hint { padding: 2px 10px 6px; font-size: 12.5px; color: var(--t3); } .cu-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .cu-messages { padding-block: 4px 8px; margin-inline: -8px; padding-inline: 8px; } .cu-day { display: flex; align-items: center; gap: 12px; margin: 14px 0 6px; color: var(--t3); font-size: 12.5px; } .cu-day::before, .cu-day::after { content: ""; flex: 1; height: 1px; background: var(--rule2); } .cu-msg { position: relative; display: flex; gap: 12px; padding: 6px 8px; margin-inline: -8px; border-radius: var(--radius-sm); transition: background .12s ease; } .cu-msg + .cu-msg:not(.cont) { margin-top: 6px; } .cu-msg.cont { padding-top: 1px; } .cu-msg:hover { background: #F7F6F2; } .cu-msg.cu-flash { background: var(--accent-orange-soft); } .cu-avatar-gap { width: 36px; flex-shrink: 0; } .cu-main { flex: 1; min-width: 0; } .cu-meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; line-height: 1.3; margin-bottom: 2px; } .cu-name { font-weight: 600; font-size: 14.5px; } .cu-tag { display: inline-block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 1px 7px; border-radius: var(--radius-xs); border: 0; font: 500 11.5px var(--font); line-height: 1.5; vertical-align: 1px; } .cu-tag::before { content: "["; opacity: .55; } .cu-tag::after { content: "]"; opacity: .55; } .cu-tag-auftrag { background: var(--t1-soft); color: var(--t1); cursor: pointer; } .cu-tag-auftrag:hover { background: #CFE0E1; } .cu-tag-todo { background: var(--accent-orange-soft); color: #B6420C; } .cu-time { color: var(--t3); font-size: 12px; } .cu-text { font-size: 14.5px; color: var(--t1); white-space: pre-wrap; overflow-wrap: anywhere; } .cu-text .translated-note { white-space: normal; } .cu-edited { color: var(--t3); font-size: 12px; margin-inline-start: 4px; } .cu-deleted { color: var(--t3); font-style: italic; font-size: 14px; } .cu-quote { display: block; max-width: 520px; margin: 2px 0 4px; padding: 4px 10px; border: 0; border-inline-start: 3px solid var(--accent-orange); border-radius: var(--radius-xs); background: #F4F3EF; text-align: start; cursor: pointer; font: 13px var(--font); } .cu-quote:hover { background: #ECEBE6; } .cu-quote-name { display: block; font-weight: 600; color: var(--t1); } .cu-quote-text { display: block; color: var(--t2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cu-quote-text.muted { color: var(--t3); font-style: italic; } .cu-photo { margin: 4px 0 2px; max-width: 340px; } .cu-photo img, .cu-photo canvas { display: block; max-width: 100%; max-height: 260px; width: auto; height: auto; border-radius: var(--radius); border: 1px solid var(--rule2); background: #FFFFFF; } .cu-photo canvas:not(.ready) { width: 240px; height: 160px; } .cu-photo figcaption { margin-top: 4px; font-size: 14px; color: var(--t1); } /* Hover-Leiste rechts oben an der Nachricht - erst beim Hover sichtbar, wie die Scrollleisten und Aktionsbuttons sonst im System. */ .cu-actions { position: absolute; top: -12px; inset-inline-end: 8px; z-index: 2; display: flex; gap: 2px; padding: 3px; background: #FFFFFF; border: 1px solid var(--rule); border-radius: var(--radius-sm); box-shadow: 0 2px 8px rgba(18, 62, 67, .08); opacity: 0; pointer-events: none; transition: opacity .1s ease; } .cu-msg:hover .cu-actions, .cu-actions:focus-within { opacity: 1; pointer-events: auto; } .cu-actions button { width: 28px; height: 28px; border: 0; border-radius: var(--radius-xs); display: grid; place-items: center; cursor: pointer; background: transparent; color: var(--t2); font-size: 14px; } .cu-actions button:hover { background: var(--t1-soft); color: var(--t1); } .cu-actions button.danger:hover { background: var(--ox-soft); color: var(--ox); } .cu-error { margin: 6px 0 0; padding: 8px 12px; border-radius: var(--radius-sm); cursor: pointer; background: var(--ox-soft); color: var(--ox); font-size: 13.5px; } .cu-composer { flex-shrink: 0; margin-top: 8px; border: 1px solid var(--rule); border-radius: var(--radius); background: #FFFFFF; } .cu-composer:focus-within { border-color: var(--t3); } .cu-compose-bar, .cu-pending { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--rule2); font-size: 13px; color: var(--t2); } .cu-compose-bar > i { color: var(--accent-orange); } .cu-compose-bar.edit > i { color: var(--t1); } .cu-compose-bar span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cu-compose-bar b { color: var(--t1); font-weight: 600; margin-inline-end: 4px; } .cu-compose-bar button, .cu-pending button { border: 0; background: transparent; color: var(--t3); cursor: pointer; padding: 2px 4px; border-radius: var(--radius-xs); } .cu-compose-bar button:hover, .cu-pending button:hover { color: var(--t1); background: var(--t1-soft); } .cu-pending img { width: 48px; height: 48px; object-fit: cover; border-radius: var(--radius-sm); } .cu-pending span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cu-input-row { display: flex; align-items: flex-end; gap: 6px; padding: 6px; } .cu-attach { position: relative; overflow: hidden; margin: 0; } .cu-attach input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .cu-input-row textarea { flex: 1; min-width: 0; resize: none; border: 0; outline: 0; background: transparent; padding: 6px 4px; max-height: 140px; color: var(--t1); font: 14.5px/1.45 var(--font); } .cu-input-row textarea::placeholder { color: var(--t3); } .cu-send { width: 34px; height: 34px; border: 0; border-radius: var(--radius-sm); flex-shrink: 0; display: grid; place-items: center; cursor: pointer; background: var(--accent-orange); color: #FFFFFF; font-size: 14px; transition: background .12s ease, opacity .12s ease; } .cu-send:hover:not(:disabled) { background: #DD4A08; } .cu-send:disabled { opacity: .35; cursor: default; } .feed-body { padding: 16px 20px 18px; } .feed-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 16px; } .feed-head b { font-weight: 600; } .feed-head .where { color: var(--t2); } .feed-head .when { color: var(--t3); font-size: 14px; white-space: nowrap; } .feed-note { font-size: 17px; line-height: 1.4; margin: 8px 0 0; } .feed-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 14px; } .feed-photo { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-xs); overflow: hidden; background: var(--rule2); } .feed-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .feed-photo span { position: absolute; inset-inline-start: 10px; bottom: 8px; color: #fff; font-size: 13px; text-shadow: 0 1px 2px rgba(0,0,0,.55); } .feed-foot { margin-top: 12px; color: var(--t3); font-size: 14px; } .feed-foot b { color: var(--t1); font-size: 19px; font-weight: 500; margin-inline-end: 6px; } /* Compact Todo mini-list on BelegDetail - narrower column than the full-page rows. */ .row-item.todo-mini { padding: 8px 4px; margin: 0; font-size: 14px; } /* ============================================================ Todo-Detail - kompakt, kein Scrollen fuer die ueblichen Faelle. ============================================================ */ .todo-detail-head { margin-bottom: 10px; } .todo-title-input { font: 600 20px var(--font); color: var(--t1); border: 1px solid transparent; background: transparent; padding: 3px 5px; border-radius: var(--radius-sm); width: 100%; } .todo-title-input:hover, .todo-title-input:focus { border-color: var(--rule); background: var(--surface); outline: none; } .todo-detail-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--t2); font-size: 14px; margin-top: 4px; } .todo-meta-input { font: 400 13.5px var(--font); color: var(--t2); border: 1px solid var(--rule); background: var(--surface); border-radius: var(--radius-sm); padding: 3px 6px; width: auto; } .todo-desc-input { font: 400 14px var(--font); color: var(--t2); border: 1px dashed transparent; background: transparent; width: 100%; resize: none; padding: 3px 5px; margin-top: 4px; border-radius: var(--radius-sm); display: block; overflow: hidden; } .todo-desc-input:hover, .todo-desc-input:focus { border-color: var(--rule); background: var(--surface); outline: none; } .todo-desc-input:placeholder-shown:not(:focus) { min-height: 0; } .todo-timer-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--rule2); border-bottom: 1px solid var(--rule2); margin: 8px 0; } .todo-timer-elapsed { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 15px; } .todo-time-history { font-size: 13.5px; color: var(--t2); padding: 4px 0 8px; display: flex; flex-direction: column; gap: 2px; } /* Fotos - kleine Thumbnails, damit sie nicht viel Platz brauchen. */ .todo-photos-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; } .photo-thumb-sm { width: 52px; height: 52px; cursor: pointer; flex-shrink: 0; } .photo-thumb-sm img { width: 52px; height: 52px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--rule); display: block; } .photo-thumb-sm:hover img { border-color: var(--t3); } .photo-add-btn { width: 52px; height: 52px; border-radius: var(--radius-sm); border: 1px dashed var(--rule); display: grid; place-items: center; color: var(--t3); cursor: pointer; flex-shrink: 0; position: relative; } .photo-add-btn:hover { border-color: var(--t3); color: var(--t1); } .photo-add-btn input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; } /* Notizen - messenger-artig statt Tabellenzeilen. */ .todo-chat { border: 1px solid var(--rule); border-radius: var(--radius); margin-bottom: 10px; } .todo-chat-scroll { max-height: 180px; overflow-y: auto; padding: 8px 10px; } .chat-bubble { background: var(--rule2); border-radius: var(--radius); padding: 6px 10px; margin-bottom: 6px; max-width: 85%; } .chat-bubble:last-child { margin-bottom: 0; } .chat-text { font-size: 14.5px; white-space: pre-wrap; } .chat-meta { font-size: 12px; color: var(--t3); margin-top: 2px; } .todo-chat-input { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--rule2); } .todo-chat-input input { flex: 1; } .feed-top { background: var(--paper); padding: 16px 20px; border-bottom: 1px solid var(--rule); } .feed-top .feed-note { font-size: 16px; } .feed-top .sub { color: var(--t2); font-size: 15px; margin-block: 4px 0; margin-inline-start: 26px; } .feed-top .when { color: var(--t3); font-size: 14px; margin-top: 6px; } .check { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-inline-end: 8px; background: var(--t1); color: var(--paper); border-radius: var(--radius-xs); font-size: 12px; vertical-align: -3px; } .feed-bottom { padding: 16px 20px 18px; } .feed-bottom p { margin: 0 0 12px; font-size: 15px; } .feed-caption { color: var(--t3); font-size: 14px; margin-top: 10px; } /* ============================================================ Seitenkopf, Tabellen, Formulare, Badges (uebrige Seiten) ============================================================ */ .page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; } .page-head h1 { font-size: 20px; } .page-head .subtitle { color: var(--t2); font-size: 14.5px; margin-top: 3px; } .page-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .btn { font-family: var(--font); font-weight: 400; font-size: 14.5px; line-height: 1.2; padding: 9px 14px; border-radius: var(--radius-sm); min-height: 38px; display: inline-flex; align-items: center; gap: 7px; transition: background .12s ease, border-color .12s ease, color .12s ease; box-shadow: none !important; transform: none !important; } .btn i { font-size: 15px; } .btn-sm { padding: 6px 10px; font-size: 13.5px; min-height: 32px; } .btn-primary { background: var(--t1); border-color: var(--t1); color: var(--paper); font-weight: 500; } .btn-primary:hover, .btn-primary:focus { background: var(--t1-hover); border-color: var(--t1-hover); color: var(--paper); } /* Auch gesperrt Petrol (#201) - sonst greift Bootstraps Hellblau. */ .btn-primary:disabled, .btn-primary.disabled { background: var(--t1); border-color: var(--t1); color: var(--paper); opacity: .5; } .btn-outline-secondary, .btn-outline-primary, .btn-outline-danger, .btn-light { color: var(--t1); border: 1px solid var(--rule); background: var(--surface); } .btn-outline-secondary:hover, .btn-outline-primary:hover, .btn-outline-danger:hover, .btn-light:hover { background: var(--t1-soft); color: var(--t1); border-color: var(--t3); } .btn-icon { width: 38px; height: 38px; padding: 0; justify-content: center; border: 1px solid var(--rule); background: var(--surface); color: var(--t2); border-radius: var(--radius-sm); } .btn-icon:hover { color: var(--t1); border-color: var(--t3); } /* Primär-Knopf "Nächster Schritt" (#145) - eine Hauptsache je Belegseite, groß genug für einen Klick mit Handschuhen (mind. 48px). */ .next-step-btn { min-height: 48px; padding: 12px 22px; font-size: 15px; } .row-actions { opacity: 0; transition: opacity .12s ease; } tr:hover .row-actions, tr:focus-within .row-actions, .rz-data-row:hover .row-actions, .rz-data-row:focus-within .row-actions, .row-item:hover .row-actions, .row-item:focus-within .row-actions { opacity: 1; } @media (hover: none) { .row-actions { opacity: 1; } } .surface, .surface-pad { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 20px; } .border, .border-top, .border-bottom { border-color: var(--rule) !important; } .rounded, .rounded-3 { border-radius: var(--radius) !important; } .data-card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; } .table { --bs-table-bg: transparent; --bs-table-color: var(--t1); --bs-table-border-color: var(--rule); margin-bottom: 0; color: var(--t1); font-size: 15px; } .table thead th { background: var(--paper); color: var(--t2); font-size: 12.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; border-bottom: 1px solid var(--rule); padding: 10px 16px; white-space: nowrap; } /* Sortierbare Spaltenkoepfe (SortHeader.razor, #205): der ganze Kopf ist der Knopf, der Pfeil zeigt sich leise erst beim Hover oder wenn sortiert ist. */ .table thead th.th-sortable { padding: 0; } .th-sort { display: inline-flex; align-items: center; gap: 5px; width: 100%; padding: 10px 16px; border: 0; background: transparent; cursor: pointer; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: start; } .text-end > .th-sort { justify-content: flex-end; } .th-sort i { font-size: 11px; color: var(--t3); opacity: 0; transition: opacity .12s ease; } .th-sort:hover { color: var(--t1); } .th-sort:hover i, .th-sort:focus-visible i, .th-sort.on i { opacity: 1; } .th-sort.on { color: var(--t1); } .th-sort.on i { color: var(--accent-orange); } .table-sm thead th.th-sortable .th-sort { padding: 7px 10px; } .table tbody td { padding: 11px 16px; border-bottom: 1px solid var(--rule2); vertical-align: middle; } .table tbody tr:last-child td { border-bottom: 0; } .table-hover tbody tr:hover { background: rgba(50,39,30,.035); } .table-sm tbody td, .table-sm thead th { padding: 7px 10px; } .margin-positive, .margin-negative { color: var(--t1); font-weight: 600; } .totals-box .fw-bold { font-weight: 700 !important; } .form-label { font-size: 14px; font-weight: 400; color: var(--t2); margin-bottom: 5px; } .form-control, .form-select { background: var(--surface); border: 1px solid var(--rule); color: var(--t1); border-radius: var(--radius-sm); padding: 9px 12px; font-size: 15px; min-height: 40px; font-family: var(--font); } .form-control::placeholder { color: var(--t3); } .form-control:focus, .form-select:focus { background: var(--surface); color: var(--t1); border-color: var(--t1); box-shadow: none; } /* Bewusste, eng begrenzte Ausnahme von "ox nur fuer Fristueberschreitung" (siehe DESIGN.md): ein leeres Pflichtfeld, das gerade das Absenden blockiert, braucht dieselbe Dringlichkeit. */ .form-control.is-required-empty { border-color: var(--ox); } .form-control.is-required-empty:focus { border-color: var(--ox); box-shadow: 0 0 0 3px var(--ox-soft); } /* Kontakt-Auswahl (RadzenDropDown mit Filter statt langem natives