/* Ceramic Design Portal — dunkles Theme nach Website-Hero (#0b191b -> #0c2b2e). Verlaufs-Budget (Anti-Kitsch): Primaer-Button, aktiver Nav-Link, Header- Unterstrich — sonst nie als Flaeche. Mobile-first, Touch-Ziele >= 44px. :root-Variablen vorbereitet fuer spaeteres Light-Theme ([data-theme=light]). */ :root { color-scheme: dark; --bg1: #0b191b; --bg2: #0c2b2e; --card: #112427; --card2: #0d1e21; --ink: #eef7f7; --muted: #93aab0; --line: #23393d; --brand1: #4ef7ff; --brand2: #ffcd1b; --accent: #35d0d0; --accent-ink: #06282b; --accent2: #6fdcdc; --ok: #4ade80; --warn: #fbbf24; --err: #f87171; --badge-open: rgba(78, 247, 255, .14); --badge-open-ink: #7ee9f2; --badge-work: rgba(255, 205, 27, .14); --badge-work-ink: #ffd75e; --badge-done: rgba(74, 222, 128, .14); --badge-done-ink: #6fe8a0; --badge-err: rgba(248, 113, 113, .16); --badge-err-ink: #fca5a5; --input-bg: #0d1e21; --row-hover: #172b2e; --th-bg: #0d1e21; --flash-ok-bg: rgba(74, 222, 128, .13); --flash-err-bg: rgba(248, 113, 113, .14); --flash-warn-bg: rgba(251, 191, 36, .13); --shadow: 0 10px 30px rgba(0, 0, 0, .35); --panel-bg: rgba(11, 25, 27, .92); --nav-ink: #9fb6b9; } /* Light-Theme: dieselben Marken-Tokens (--brand1/2 bleiben, Verlauf-Identitaet!), nur Flaechen + Text hell. Aktiv via (Server aus Cookie). */ [data-theme="light"] { color-scheme: light; --bg1: #eef3f3; --bg2: #f7fafa; --card: #ffffff; --card2: #f2f6f6; --ink: #17272a; --muted: #5c7276; --line: #dbe6e6; --accent: #0aa5a5; --accent-ink: #ffffff; --accent2: #0a7f7f; --ok: #15803d; --warn: #b45309; --err: #b91c1c; --badge-open: rgba(10, 165, 165, .12); --badge-open-ink: #0a7d7d; --badge-work: rgba(180, 120, 20, .16); --badge-work-ink: #8a5a00; --badge-done: rgba(21, 128, 61, .13); --badge-done-ink: #15803d; --badge-err: rgba(185, 28, 28, .12); --badge-err-ink: #b91c1c; --input-bg: #ffffff; --row-hover: #eef4f4; --th-bg: #eef2f4; --flash-ok-bg: rgba(21, 128, 61, .10); --flash-err-bg: rgba(185, 28, 28, .10); --flash-warn-bg: rgba(180, 90, 9, .12); --shadow: 0 10px 30px rgba(20, 40, 45, .12); --panel-bg: rgba(255, 255, 255, .9); --nav-ink: #5c7276; } * { box-sizing: border-box; } .sprite { display: none; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font: 16px/1.5 system-ui, "Segoe UI", sans-serif; color: var(--ink); background: linear-gradient(180deg, var(--bg1), var(--bg2)) fixed; } /* Dezente Marken-Glows, rein CSS (kein Asset) */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(560px 400px at 15% 8%, rgba(78, 247, 255, .06), transparent 70%), radial-gradient(680px 500px at 88% 95%, rgba(255, 205, 27, .05), transparent 70%); } a { color: var(--accent2); } h1 { font-size: 1.5rem; font-weight: 700; margin: 0 0 1rem; letter-spacing: .01em; } h2 { font-size: 1.1rem; font-weight: 600; margin: 1.6rem 0 .6rem; } p { margin: .4rem 0 .8rem; } small, .muted { color: var(--muted); } .right { text-align: right; } /* ── Header + Navigation (mobile-first: Burger, ab 860px inline) ── */ .topbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 16px; position: sticky; top: 0; z-index: 20; background: var(--panel-bg); backdrop-filter: blur(6px); border-bottom: 3px solid transparent; border-image: linear-gradient(90deg, var(--brand1), var(--brand2)) 1; /* Verlauf #1 */ } .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; min-height: 44px; } .brand img { display: block; } .brand-lines { display: flex; flex-direction: column; line-height: 1.15; } .brand-lines strong { color: var(--ink); font-size: 15px; font-weight: 700; letter-spacing: .02em; } .brand-lines small { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; } .top-right { margin-left: auto; display: flex; align-items: center; gap: 10px; order: 2; } .userbox { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 13px; max-width: 210px; } .userbox-ic { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; } .userbox-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .theme-toggle { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 10px; cursor: pointer; color: var(--nav-ink); border: 1px solid var(--line); border-radius: 10px; background: var(--card); } .theme-toggle:hover { color: var(--ink); border-color: var(--accent); } .theme-toggle .glyph { width: 22px; height: 22px; flex: none; stroke: currentColor; fill: none; } .theme-toggle .t-dark, .theme-toggle .t-light { display: none; } [data-theme="dark"] .theme-toggle .t-dark { display: block; } [data-theme="light"] .theme-toggle .t-light { display: block; } .nav { display: none; width: 100%; flex-direction: column; gap: 4px; padding: 6px 0; order: 3; } .tile { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 14px; text-decoration: none; color: var(--nav-ink); font-weight: 600; font-size: 15px; border-radius: 12px; border: 2px solid transparent; } .tile .glyph { width: 24px; height: 24px; flex: none; stroke: currentColor; fill: none; } .tile-label { white-space: nowrap; } .tile:hover { color: var(--ink); background: var(--row-hover); } .tile.active { color: var(--ink); background: linear-gradient(var(--card), var(--card)) padding-box, linear-gradient(135deg, var(--brand1), var(--brand2)) border-box; /* Verlauf #2 */ } .tile-badge { position: absolute; top: 5px; left: 26px; min-width: 18px; height: 18px; padding: 0 5px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; border-radius: 999px; background: var(--err); color: #fff; } .nav .nav-logout { margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0; } .nav-t { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; pointer-events: none; } .nav-burger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; margin-left: auto; order: 1; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; background: var(--card); } .nav-burger i { display: block; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .15s, opacity .15s; } .nav-t:checked ~ .nav { display: flex; } .nav-t:checked ~ .nav-burger i:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-t:checked ~ .nav-burger i:nth-child(2) { opacity: 0; } .nav-t:checked ~ .nav-burger i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (min-width: 860px) { .nav-burger { display: none; } .nav { display: flex !important; width: auto; flex-direction: row; gap: 2px; order: 0; flex: 1; justify-content: center; padding: 0; } .top-right { order: 0; } .tile { flex-direction: column; gap: 3px; min-height: 0; padding: 6px 9px; font-size: 11.5px; } .tile .glyph { width: 26px; height: 26px; } .tile-label { font-size: 11.5px; letter-spacing: .01em; } .tile-badge { top: 0; left: auto; right: 4px; } .nav .nav-logout { margin: 0; border-top: 0; border-radius: 12px; } } /* Sprachmenue (details/summary, rein HTML+CSS; portal.js schliesst bei Klick daneben) */ .langmenu { position: relative; } .langmenu summary { list-style: none; cursor: pointer; user-select: none; display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); font-weight: 700; font-size: 13px; letter-spacing: .06em; color: var(--accent2); } .langmenu summary::-webkit-details-marker { display: none; } .langmenu[open] summary { border-color: var(--accent); } .langmenu-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 150px; display: flex; flex-direction: column; padding: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); } .langmenu-list a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--ink); text-decoration: none; border-radius: 8px; font-size: 15px; } .langmenu-list a:hover { background: var(--row-hover); } .langmenu-list a.cur { color: var(--accent2); font-weight: 700; } /* ── Inhalt: zentrierte Karten, max 900px ── */ main { width: 100%; max-width: 900px; margin: 0 auto; padding: 20px 16px 40px; flex: 1; } main.wide { max-width: 1200px; } .card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 20px; margin-bottom: 16px; } .card h2:first-child { margin-top: 0; } /* Konto-Seite: Praxisdaten+Labor | Passwort+Sprache nebeneinander, Team volle Breite. Symmetrie: beide Spalten teilen sich eine Grid-Zeile; die letzte Karte der kuerzeren Spalte streckt sich (flex:1) bis zur Unterkante der laengeren. */ .acct-grid { display: grid; grid-template-columns: 1fr; column-gap: 18px; } @media (min-width: 860px) { .acct-grid { grid-template-columns: 1fr 1fr; } .acct-grid > div:not(.acct-full) { display: flex; flex-direction: column; } .acct-grid > div:not(.acct-full) > .card:last-child { flex: 1; } .acct-grid > .acct-full { grid-column: 1 / -1; } } /* ── Buttons (>= 44px Touch) ── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 22px; border-radius: 10px; cursor: pointer; font: inherit; font-weight: 700; font-size: 15px; text-decoration: none; border: 1px solid var(--line); background: var(--card2); color: var(--ink); } .btn:hover { background: var(--row-hover); } .btn-primary { border: 0; color: #06282b; background: linear-gradient(135deg, var(--brand1), var(--brand2)); /* Verlauf #3 */ } .btn-primary:hover { filter: brightness(1.08); } .btn-secondary { background: transparent; color: var(--accent2); } .btn-danger { background: rgba(248, 113, 113, .12); border-color: rgba(248, 113, 113, .4); color: var(--err); } .btn-danger:hover { background: rgba(248, 113, 113, .2); } .btn-block { display: flex; width: 100%; } .btn[disabled] { opacity: .5; pointer-events: none; } .btnrow { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 1rem; align-items: center; } /* ── Formulare ── */ .field { display: block; margin-bottom: 14px; } .field > span { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; } .field small { display: block; color: var(--muted); margin-top: 3px; font-size: 12.5px; } input, select, textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit; background: var(--input-bg); color: var(--ink); } textarea { min-height: 90px; resize: vertical; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); } input[type="date"] { color-scheme: inherit; } .grid2 { display: grid; grid-template-columns: 1fr; gap: 0 18px; } @media (min-width: 640px) { .grid2 { grid-template-columns: 1fr 1fr; } } /* ── Tabellen (auf schmalen Screens horizontal scrollbar) ── */ .tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--card); } .tbl { width: 100%; border-collapse: collapse; min-width: 560px; } .tbl th, .tbl td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); } .tbl tr:last-child td { border-bottom: 0; } .tbl th { background: var(--th-bg); font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); white-space: nowrap; } .tbl tbody tr:hover td { background: var(--row-hover); } .tbl a { font-weight: 600; } /* ── Status-Badges ── */ .badge { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; background: var(--badge-open); color: var(--badge-open-ink); } .badge-open { background: var(--badge-open); color: var(--badge-open-ink); } /* offen/uebermittelt */ .badge-work { background: var(--badge-work); color: var(--badge-work-ink); } /* in Arbeit */ .badge-done { background: var(--badge-done); color: var(--badge-done-ink); } /* abgeschlossen */ .badge-err { background: var(--badge-err); color: var(--badge-err-ink); } /* Fehler/zurueckgewiesen */ .badge-draft { background: rgba(147, 170, 176, .16); color: var(--muted); } /* Entwurf */ /* ── Filter-Pills (Fallliste offen/abgeschlossen) ── */ .filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } .filters a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--muted); text-decoration: none; font-weight: 600; font-size: 14px; } .filters a:hover { color: var(--ink); } .filters a.active { border-color: var(--accent); color: var(--accent2); background: rgba(53, 208, 208, .1); } /* ── Empty-State ── */ .empty { text-align: center; padding: 40px 20px; color: var(--muted); } .empty strong { display: block; color: var(--ink); font-size: 1.05rem; margin-bottom: 6px; } /* ── Timeline (Falldetail) ── */ .timeline { list-style: none; margin: 0; padding: 0 0 0 22px; position: relative; } .timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--line); } .tl-item { position: relative; padding: 0 0 18px 14px; } .tl-item:last-child { padding-bottom: 0; } .tl-item::before { content: ""; position: absolute; left: -21px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--card); border: 2px solid var(--accent); } .tl-item.tl-done::before { border-color: var(--ok); background: var(--ok); } .tl-item.tl-err::before { border-color: var(--err); background: var(--err); } .tl-item strong { display: block; font-size: 15px; } .tl-item time { color: var(--muted); font-size: 12.5px; } .tl-item .tl-note { display: block; color: var(--muted); font-size: 13.5px; margin-top: 2px; } /* ── Upload (Liste + Fortschrittsbalken) ── */ .up-drop { border: 2px dashed var(--line); border-radius: 14px; padding: 26px 16px; text-align: center; color: var(--muted); cursor: pointer; background: var(--card2); } .up-drop:hover, .up-drop.over { border-color: var(--accent); color: var(--ink); } .up-list { list-style: none; margin: 12px 0 0; padding: 0; } .up-item { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; background: var(--card2); font-size: 14px; } .up-item .up-name { flex: 1; min-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .up-item .up-size { color: var(--muted); font-size: 12.5px; } .up-item.up-err { border-color: rgba(248, 113, 113, .5); } .up-bar { flex-basis: 100%; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; } .up-bar > i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; } .up-item.up-done .up-bar > i { background: var(--ok); width: 100%; } /* ── Zahnraster (FDI, 2 Boegen; Feinlogik in zahnschema.js) ── */ .zr { margin: 8px 0 4px; } .zr-jaw { font-size: 12.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin: 10px 0 6px; } .zr-arch { display: grid; grid-template-columns: repeat(16, 1fr); gap: 4px; } .zr-tooth { min-height: 44px; min-width: 0; padding: 2px 0; cursor: pointer; border: 1px solid var(--line); border-radius: 8px; background: var(--card2); color: var(--muted); font: inherit; font-size: 12px; font-weight: 700; text-align: center; } .zr-tooth:hover { color: var(--ink); border-color: var(--accent); } .zr-tooth.sel { background: rgba(53, 208, 208, .18); border-color: var(--accent); color: var(--accent2); } .zr-tooth:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .zr-count { margin-top: 8px; font-size: 13.5px; color: var(--muted); } @media (max-width: 560px) { .zr-arch { grid-template-columns: repeat(8, 1fr); } .zr-arch .zr-tooth:nth-child(8) { margin-bottom: 6px; } /* Quadranten-Umbruch */ } /* ── Arbeitsarten-Kacheln ── */ .wt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; } .wt-tile { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 64px; padding: 10px; cursor: pointer; border: 2px solid var(--line); border-radius: 12px; background: var(--card2); color: var(--ink); font: inherit; font-weight: 600; font-size: 14.5px; } .wt-tile:hover { border-color: var(--accent); } .wt-tile.sel { border-color: var(--accent); background: rgba(53, 208, 208, .14); color: var(--accent2); } /* ── Subtyp (Schiene/Kiefer) + Anprobe-Termine ── */ .lbl { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; } #splint-wrap + #jaw-wrap, #jaw-wrap { margin-top: 0; } .jaw-opts { display: flex; gap: 8px; flex-wrap: wrap; } .jaw-opt { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; cursor: pointer; border: 2px solid var(--line); border-radius: 10px; background: var(--card2); color: var(--ink); font-weight: 600; } .jaw-opt input { position: absolute; opacity: 0; width: 0; height: 0; } .jaw-opt:hover { border-color: var(--accent); } .jaw-opt.sel { border-color: var(--accent); background: rgba(53, 208, 208, .14); color: var(--accent2); } .tryin-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; } .tryin-row input { flex: 1; } .tryin-del { flex: none; min-width: 44px; padding: 0 12px; font-size: 20px; line-height: 1; } /* ── Auftragsformular: Zwei-Spalten — LabOS-Proportionen 1:1 (labos.css main/.case-grid) ── 1200px zentriert; Infos links flexibel, Arbeitsbereich rechts fix 420–620px. */ body.ofv2-page main { max-width: 1200px; } .of-grid { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: start; } @media (min-width: 1100px) { .of-grid { grid-template-columns: minmax(360px, 1fr) minmax(420px, 620px); } } .of-left, .of-right { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .of-work { padding: 0; overflow: hidden; } /* Reiter-Leiste + geteilter Prothese/Modellguss-Button */ .of-tabs { display: flex; gap: 4px; padding: 6px; border-bottom: 1px solid var(--line); flex-wrap: wrap; } .of-tab, .of-tab-half { flex: 1; min-height: 44px; padding: 0 12px; cursor: pointer; font: inherit; font-weight: 600; font-size: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--card2); color: var(--muted); } .of-tab:hover, .of-tab-half:hover { color: var(--ink); } .of-tab.on, .of-tab-half.on { color: var(--ink); background: linear-gradient(var(--card), var(--card)) padding-box, linear-gradient(135deg, var(--brand1), var(--brand2)) border-box; border: 2px solid transparent; } .of-tab-split { display: flex; gap: 0; flex: 1.5; padding: 0; border: 0; background: none; min-height: 0; } .of-tab-split .of-tab-half { border-radius: 0; } .of-tab-split .of-tab-half:first-child { border-radius: 10px 0 0 10px; } .of-tab-split .of-tab-half:last-child { border-radius: 0 10px 10px 0; border-left-width: 0; } .of-pane { padding: 16px; } /* ── Zahnbogen (anatomisches SVG-Hufeisen) — wie LabOS: KEIN Cap, die 620px-Karte deckelt ── */ .arch-svg { display: block; width: 100%; height: auto; margin: 0 auto; } .tooth { cursor: pointer; } .tooth:hover { filter: brightness(1.12); } .tooth-shape { fill: var(--tcol, #e8e8e8); stroke: #9fb0b3; stroke-width: 1.5; } .tooth-num { font: 700 12px system-ui; fill: #06282b; text-anchor: middle; pointer-events: none; } #job-liste { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; } /* ── Zahn-Popup (Arbeitsart waehlen) ── */ .zmodal-overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: rgba(5, 14, 15, .7); padding: 16px; } .zmodal { width: min(420px, 94vw); background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; } .zmodal-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line); } .zmodal-head strong { font-size: 15px; } .zmodal-x { border: 0; background: none; color: var(--muted); font-size: 18px; cursor: pointer; padding: 0 4px; } .zmodal-body { padding: 16px; } .ztile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; } .ztile { min-height: 48px; padding: 8px 10px; border: 0; border-radius: 10px; cursor: pointer; font: inherit; font-weight: 700; font-size: 14px; } .ztile:hover { filter: brightness(1.06); } .ztile.on { outline: 3px solid var(--ink); outline-offset: 1px; } .zmodal-rm { margin-top: 12px; width: 100%; } .zmodal-body h3 { margin: 14px 0 8px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; } .zmodal-body h3:first-child { margin-top: 0; } .zmodal-foot { display: flex; gap: 8px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--line); } .zmodal-foot .btn[disabled] { opacity: .45; cursor: not-allowed; } .zb-hint { font-size: 12.5px; margin-left: auto; } .zb-allsys { margin-top: 8px; width: 100%; } .ztile-grid + .ztile-grid { margin-top: 8px; } .zopt-implant { margin-top: 12px; } /* Implantat-Groesse: Durchmesser und Plattform gehoeren zusammen und sind beide kurz. */ .zimpl-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; } .zimpl-row .zopt { display: block; font-size: 14px; margin: 0; } .zimpl-row .zopt input { margin-top: 4px; width: 100%; } /* ── Werkarten-Zeilen (Schiene mit OK/UK, Prothese/Modellguss) ── Grid statt Flex-wrap: Name links (darf umbrechen), Pill-Spalte IMMER rechtsbuendig — nie mehr „mal rechts, mal drunter" (Nutzer-Feedback: wirkte chaotisch). */ .works-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); } .works-row:last-child { border-bottom: 0; } .works-name { font-weight: 600; min-width: 0; font-size: 15px; } .works-row .jaw-opts { white-space: nowrap; flex-wrap: nowrap; } .works-row .jaw-opt { min-height: 40px; min-width: 60px; justify-content: center; padding: 0 14px; font-size: 14px; } .works-sep { border-top: 2px solid var(--line); margin: 6px 0; } /* ── Job-Liste (zugewiesene Arbeiten) ── */ .jobrow { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card2); font-size: 14px; } .jobdot { width: 14px; height: 14px; border-radius: 4px; flex: none; } .jobrow > span:last-of-type { flex: 1; } .jobdel { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 15px; flex: none; } .jobdel:hover { color: var(--err); } /* ── Startseiten-Cockpit (LabOS-Portierung: Uhr + Kalender + KPI + Statusleiste) ── */ body.dash-page main { max-width: none; margin: 0; padding: 0; } body.dash-page::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(700px 500px at 18% 10%, rgba(78, 247, 255, .09), transparent 70%), radial-gradient(800px 600px at 85% 92%, rgba(255, 205, 27, .06), transparent 70%), linear-gradient(rgba(110, 225, 230, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(110, 225, 230, .04) 1px, transparent 1px); background-size: auto, auto, 48px 48px, 48px 48px; } [data-theme="light"] body.dash-page::before, html[data-theme="light"] body.dash-page::before { background: radial-gradient(700px 500px at 18% 10%, rgba(10, 165, 165, .07), transparent 70%), radial-gradient(800px 600px at 85% 92%, rgba(255, 205, 27, .08), transparent 70%), linear-gradient(rgba(20, 60, 65, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(20, 60, 65, .05) 1px, transparent 1px); background-size: auto, auto, 48px 48px, 48px 48px; } .dash { max-width: 1280px; margin: 0 auto; padding: 24px 24px 12px; display: grid; gap: 20px; grid-template-columns: 1fr 320px; grid-template-areas: "hero rail" "kpis rail" "status status"; min-height: calc(100vh - 160px); } .dash-hero { grid-area: hero; position: relative; display: flex; align-items: flex-end; padding: 24px; min-height: 320px; overflow: hidden; } .dash-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: url(/static/logomark.svg) no-repeat center / min(46vh, 380px); opacity: .07; } .dash-clock time { display: block; font-size: clamp(64px, 12vw, 132px); font-weight: 200; line-height: 1; letter-spacing: .01em; font-variant-numeric: tabular-nums; } .dash-date { font-size: clamp(18px, 2.4vw, 26px); color: var(--muted); } .dash-kpis { grid-area: kpis; display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; } .dash-kpis .kpi { flex: 1; min-width: 130px; text-decoration: none; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 2px; transition: box-shadow .15s; } .dash-kpis .kpi:hover { box-shadow: 0 0 0 1px rgba(53, 208, 208, .45); } .dash-kpis .kpi strong { font-size: 32px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; } .dash-kpis .kpi span { font-size: 13px; color: var(--muted); } .dash-kpis .kpi-warn strong { color: var(--warn); } .dash-kpis .kpi-err strong { color: var(--err); } .dash-rail { grid-area: rail; display: flex; flex-direction: column; gap: 16px; } .dash-search { position: relative; } .dash-search .glyph { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; stroke: var(--muted); pointer-events: none; } .dash-search input { padding-left: 36px; width: 100%; } .dash-cal { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px; } .dash-cal header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .dash-cal header a { text-decoration: none; padding: 2px 10px; border-radius: 8px; color: var(--ink); } .dash-cal header a:hover { background: var(--row-hover); } .dash-cal table { border: none; background: transparent; width: 100%; border-collapse: collapse; } .dash-cal th { background: transparent; padding: 4px 0; text-align: center; font-size: 11px; color: var(--muted); } .dash-cal td { border: none; padding: 2px; text-align: center; height: 36px; } .dash-cal .day, .dash-cal td a { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 10px; text-decoration: none; color: var(--ink); position: relative; font-variant-numeric: tabular-nums; } .dash-cal .other { color: var(--muted); opacity: .45; } .dash-cal .today { outline: 1px solid var(--accent); } .dash-cal td a.due { border: 2px solid transparent; background: linear-gradient(var(--card), var(--card)) padding-box, linear-gradient(135deg, var(--brand1), var(--brand2)) border-box; font-weight: 600; } .dash-cal td a.due sup { font-size: 9px; color: var(--brand2); position: absolute; top: 1px; right: 3px; } .dash-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; } .statusbar { grid-area: status; display: flex; gap: 22px; flex-wrap: wrap; align-items: center; padding: 8px 16px; font-size: 12.5px; color: var(--muted); background: var(--panel-bg); border-radius: 10px; border-top: 2px solid transparent; border-image: linear-gradient(90deg, var(--brand1), var(--brand2)) 1; } .statusbar .right { margin-left: auto; } @media (max-width: 900px) { .dash { grid-template-columns: 1fr; grid-template-areas: "hero" "kpis" "rail" "status"; } .dash-hero { min-height: 200px; } } /* ── Meldungen (Admin-Triage): Feed, Ruhe-Zustand, Grid, 7-Tage-Balken ── Nur Token-Farben → Dark + Light gratis; Verlaufs-Budget bleibt unberührt. */ .kpis.kpis-6 { grid-template-columns: repeat(2, 1fr); } @media (min-width: 720px) { .kpis.kpis-6 { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1100px) { .kpis.kpis-6 { grid-template-columns: repeat(6, 1fr); } } .meld-state .badge { font-size: 14px; padding: 8px 14px; } .alerts { list-style: none; margin: 0; padding: 0; } .alert { display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; align-items: center; padding: 10px 14px; margin-bottom: 8px; background: var(--card2); border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: 10px; } .alert-err { border-left-color: var(--err); } .alert-warn { border-left-color: var(--warn); } .alert strong { font-size: 14.5px; grid-column: 1; } .alert .a-detail { color: var(--muted); font-size: 13px; grid-column: 1; } .alert .a-act { grid-column: 2; grid-row: 1 / span 2; padding: 6px 12px; font-size: 13px; white-space: nowrap; } @media (max-width: 640px) { .alert { grid-template-columns: 1fr; } .alert .a-act { grid-column: 1; grid-row: auto; justify-self: start; } } .empty-ok { text-align: center; padding: 44px 20px; color: var(--muted); } .empty-ok .glyph-big { width: 48px; height: 48px; stroke: var(--ok); fill: none; display: block; margin: 0 auto 10px; } .empty-ok strong { display: block; color: var(--ink); font-size: 1.1rem; margin-bottom: 4px; } .meld-grid { display: grid; grid-template-columns: 1fr 320px; gap: 0 16px; align-items: start; } @media (max-width: 900px) { .meld-grid { grid-template-columns: 1fr; } } .meld-links { display: grid; gap: 10px; margin-bottom: 16px; } .meld-foot { text-align: center; font-size: 12.5px; } .bars { display: flex; gap: 6px; align-items: flex-end; height: 96px; margin-top: 10px; } .bars .bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; font-size: 11px; color: var(--muted); } .bars .bar b { color: var(--ink); font-size: 11px; font-variant-numeric: tabular-nums; } .bars .bar i { display: block; width: 100%; max-width: 34px; border-radius: 4px 4px 0 0; background: var(--accent); opacity: .85; } .bars .b0 i { height: 2px; background: var(--line); } .bars .b1 i { height: 12%; } .bars .b2 i { height: 24%; } .bars .b3 i { height: 36%; } .bars .b4 i { height: 48%; } .bars .b5 i { height: 60%; } .bars .b6 i { height: 72%; } .bars .b7 i { height: 86%; } .bars .b8 i { height: 100%; } /* ── Rechnungs-Detail (Sammel -> Arbeiten -> Einzelrechnung) ── */ .inv-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; } .inv-h1 { margin: 0 0 4px; font-size: 1.3rem; } .inv-head-right { display: flex; align-items: center; gap: 14px; } .inv-gross { font-size: 24px; font-variant-numeric: tabular-nums; } .inv-workgrp { border: 1px solid var(--line); border-radius: 12px; background: var(--card2); margin-bottom: 10px; overflow: hidden; } .inv-workgrp summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; font-weight: 600; list-style: none; flex-wrap: wrap; } .inv-workgrp summary::-webkit-details-marker { display: none; } .inv-workgrp summary::before { content: "▸"; color: var(--muted); margin-right: 4px; } .inv-workgrp[open] summary::before { content: "▾"; } .inv-workgrp summary:hover { background: var(--row-hover); } .inv-sub { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; } .inv-workgrp .tbl-wrap { padding: 0 12px 12px; } .inv-caselink { padding: 0 16px 12px; margin: 0; } .inv-bclist { margin: 8px 0 0 18px; } /* ── Team-Verwaltung (Assistenz-Konten im Konto) ── */ .team-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .team-inline { display: flex; gap: 6px; align-items: center; margin: 0; } .team-inline input[type="password"] { max-width: 170px; } .btn-sm { min-height: 36px; padding: 0 12px; font-size: 13px; } /* ── Flash-Meldungen ── */ .flash { padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; font-weight: 600; transition: opacity .4s; } .flash-ok { background: var(--flash-ok-bg); color: var(--ok); } .flash-err { background: var(--flash-err-bg); color: var(--err); } .flash-warn { background: var(--flash-warn-bg); color: var(--warn); } .flash.fade { opacity: 0; } /* ── Bestaetigungs-Modal (portal.js, data-confirm) ── */ .pmodal-overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: rgba(5, 14, 15, .7); padding: 16px; } .pmodal { width: min(440px, 94vw); background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 18px; } .pmodal p { margin: 0 0 16px; } .pmodal .btnrow { margin: 0; justify-content: flex-end; } /* ── Content-Modal (Fall-Popup, portal.js) — theme-adaptiv via CSS-Variablen ── */ .pmodal-wide { width: min(680px, 94vw); max-width: 100%; max-height: calc(100vh - 60px); display: flex; flex-direction: column; padding: 0; overflow: hidden; } .pmodal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; font-size: 17px; border-bottom: 3px solid transparent; border-image: linear-gradient(90deg, var(--brand1), var(--brand2)) 1; } .pmodal-head strong { font-weight: 700; } .pmodal-x { border: none; background: none; cursor: pointer; font-size: 22px; line-height: 1; color: var(--muted); padding: 0 4px; } .pmodal-x:hover { color: var(--ink); } .pmodal-body { padding: 16px 18px; overflow-y: auto; } .pmodal-body .kv { margin: 0; } .pmodal-foot { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--line); } .pmodal-foot .pm-right { margin-left: auto; } /* Medien-Upload-QR im Popup: Detailliste links, QR rechts (rot markierter Bereich) */ .pmodal-cols { display: flex; gap: 20px; align-items: flex-start; } .pmodal-cols .kv { flex: 1 1 auto; min-width: 0; } .pmodal-qr { flex: none; width: 150px; text-align: center; } .pmodal-qr .qr { width: 150px; height: 150px; display: block; } .pmodal-qr .cap { margin-top: 8px; font-size: 12px; line-height: 1.35; color: var(--muted); } .pmodal-qr .cap strong { display: block; margin-bottom: 2px; color: var(--ink); font-size: 12.5px; } @media (max-width: 559px) { .pmodal-cols { flex-direction: column; } .pmodal-qr { width: 100%; } .pmodal-qr .qr { width: 140px; height: 140px; margin: 0 auto; } } /* Medien-Upload-QR auf der Bestaetigungsseite (zentriert in der schmalen Card) */ .submitted-qr { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); text-align: center; } .submitted-qr .qr { width: 160px; height: 160px; display: block; margin: 10px auto 0; } .submitted-qr .cap strong { display: block; color: var(--ink); font-size: 13px; } .submitted-qr .cap span { color: var(--muted); font-size: 12px; line-height: 1.35; } /* Klickbare Fallzeilen (Popup); Link bleibt als Fallback */ .orow { cursor: pointer; } .orow:hover { background: var(--row-hover); } /* Fallback-Druck: nur das Popup drucken (window.print bei fehlendem Zettel) */ @media print { body > *:not(.pmodal-overlay) { display: none !important; } .pmodal-overlay { position: static; background: none; padding: 0; display: block; } .pmodal-wide { width: auto; max-width: 100%; max-height: none; box-shadow: none; border: none; } .pmodal-head { border-image: none; border-bottom: 2px solid var(--ink); } .pmodal-x, .pmodal-foot { display: none !important; } } /* ── Key-Value-Zeilen (Falldetail) ── */ .kv { display: grid; grid-template-columns: 1fr; gap: 2px 18px; margin: 0; } @media (min-width: 560px) { .kv { grid-template-columns: max-content 1fr; } } .kv dt { color: var(--muted); font-size: 13px; padding-top: 6px; } .kv dd { margin: 0 0 6px; font-weight: 600; } .barcode { font-family: Consolas, monospace; font-size: 1.2rem; font-weight: 700; letter-spacing: .06em; } /* ── Dashboard (Start) ── */ .dash-hero { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .dash-h1 { margin: 0 0 2px; } .dash-cta { flex: none; } .dash-cta .glyph, .btn .glyph { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; } .kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 16px; } @media (min-width: 720px) { .kpis { grid-template-columns: repeat(4, 1fr); } } .kpi { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; text-decoration: none; background: var(--card); border: 1px solid var(--line); border-radius: 14px; color: var(--ink); } .kpi:hover { border-color: var(--accent); } .kpi strong { font-size: 2rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; } .kpi span { font-size: 13px; color: var(--muted); } .kpi-warn strong { color: var(--warn); } .kpi-err strong { color: var(--err); } .card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .card-head h2 { margin: 0; } .btn-sm { min-height: 36px; padding: 0 14px; font-size: 14px; } /* ── Verwaltung-Hub ── */ .vw-grid { display: grid; grid-template-columns: 1fr; gap: 12px; } @media (min-width: 640px) { .vw-grid { grid-template-columns: 1fr 1fr; } } .vw-tile { display: flex; align-items: center; gap: 14px; padding: 16px 18px; text-decoration: none; background: var(--card); border: 1px solid var(--line); border-radius: 14px; color: var(--ink); } .vw-tile:hover { border-color: var(--accent); } .vw-tile .glyph { width: 26px; height: 26px; flex: none; stroke: currentColor; fill: none; color: var(--accent2); } .vw-txt { display: flex; flex-direction: column; } .vw-txt strong { font-size: 15px; } .vw-txt small { color: var(--muted); font-size: 13px; } /* ── Footer ── */ .footer { border-top: 1px solid var(--line); padding: 18px 16px 26px; text-align: center; } .footer p { margin: 4px 0; font-size: 12.5px; color: var(--muted); } .footer a { color: var(--muted); } .footer a:hover { color: var(--accent2); } /* ── Auth-Shell (Login/Registrierung: minimal, Vollbild-Hintergrund + Karte) ── */ .auth-body { margin: 0; min-height: 100vh; color: var(--ink); font: 16px/1.5 system-ui, "Segoe UI", sans-serif; background: #07272b url("/static/auth-bg.jpg") center/cover no-repeat fixed; } /* Login-Hintergrundvideo (16:9, stumm, Loop) — formatfüllend unter der Vignette; auth-bg.jpg bleibt Poster (Ladezeit) + Fallback (Mobil/reduzierte Bewegung). */ .auth-bg-video { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; border: 0; } @media (prefers-reduced-motion: reduce) { .auth-bg-video { display: none; } } @media (max-width: 640px) { .auth-bg-video { display: none; } } .auth-body::before { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(1200px 820px at 50% 42%, rgba(4, 14, 15, .30), rgba(4, 14, 15, .74)); } [data-theme="light"] .auth-body::before { background: radial-gradient(1200px 820px at 50% 42%, rgba(255, 255, 255, .18), rgba(18, 36, 40, .5)); } .auth-corner { position: fixed; top: 14px; right: 14px; z-index: 3; display: flex; gap: 8px; align-items: center; } .auth-main { position: relative; z-index: 2; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; } .auth-card { width: min(440px, 100%); padding: 24px 26px 30px; background: var(--panel-bg); backdrop-filter: blur(12px); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); } .auth-brand { display: flex; align-items: center; gap: 11px; text-decoration: none; margin-bottom: 12px; } .auth-brand .brand-lines strong { display: block; color: var(--ink); font-size: 17px; font-weight: 700; letter-spacing: .01em; } .auth-brand .brand-lines small { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .09em; } .auth-h1 { font-size: 1.28rem; margin: 6px 0 16px; } /* ── Chatbot (Kunden-Navigationshilfe, rein clientseitig) ── */ .cbot-launch { position: fixed; right: 18px; bottom: 18px; z-index: 90; width: 56px; height: 56px; padding: 14px; cursor: pointer; border: 0; border-radius: 50%; color: #06282b; background: linear-gradient(135deg, var(--brand1), var(--brand2)); box-shadow: var(--shadow); } .cbot-launch .glyph { width: 28px; height: 28px; stroke: currentColor; fill: none; } .cbot-launch:hover { filter: brightness(1.06); } .cbot-panel { position: fixed; right: 18px; bottom: 84px; z-index: 90; width: min(360px, calc(100vw - 36px)); max-height: min(560px, calc(100vh - 120px)); display: flex; flex-direction: column; overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); } /* display:flex oben schlaegt sonst die UA-Regel fuer [hidden] — Panel liesse sich nie schliessen */ .cbot-panel[hidden] { display: none; } .cbot-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-bottom: 2px solid transparent; border-image: linear-gradient(90deg, var(--brand1), var(--brand2)) 1; } .cbot-close { border: 0; background: none; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; } .cbot-body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; } .cbot-msg { max-width: 86%; padding: 9px 12px; border-radius: 12px; font-size: 14.5px; line-height: 1.4; } .cbot-bot { align-self: flex-start; background: var(--card2); border: 1px solid var(--line); border-bottom-left-radius: 4px; } .cbot-user { align-self: flex-end; background: rgba(53, 208, 208, .16); color: var(--accent2); border-bottom-right-radius: 4px; } .cbot-cta { display: inline-flex; margin-top: 8px; } .cbot-chips { display: flex; flex-wrap: wrap; gap: 6px; } .cbot-chip { border: 1px solid var(--line); background: var(--card2); color: var(--ink); border-radius: 999px; padding: 7px 12px; font: inherit; font-size: 13px; cursor: pointer; } .cbot-chip:hover { border-color: var(--accent); color: var(--accent2); } .cbot-form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); } .cbot-form input { flex: 1; min-height: 40px; } .cbot-form button { flex: none; } .nowrap { white-space: nowrap; } /* ── Downloadbereich (/downloads) ─────────────────────────────────────────── */ .dl-list { list-style: none; margin: 8px 0 0; padding: 0; } .dl-item { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; background: var(--card2); } .dl-item:last-child { margin-bottom: 0; } .dl-info { flex: 1 1 260px; min-width: 0; } .dl-info strong { display: block; font-size: 15px; } .dl-info p { margin: 3px 0 0; color: var(--muted); font-size: 13.5px; } .dl-meta { display: block; margin-top: 6px; color: var(--muted); font-size: 12.5px; } .dl-sum { color: var(--muted); font-size: 11.5px; letter-spacing: .02em; } .dl-btn { display: inline-flex; align-items: center; gap: 8px; flex: none; } .dl-btn .glyph { width: 18px; height: 18px; stroke: currentColor; fill: none; } @media (max-width: 560px) { .dl-btn { width: 100%; justify-content: center; } }