/* G&P Drive — interner Bereich */ :root{ /* Flächen */ --ink:#0B0D10; /* Seitengrund */ --ink-2:#12151A; /* Karten und Tabellen */ --ink-3:#171B21; /* leicht erhöht */ /* Linien */ --line:rgba(var(--tint),.06); --line-soft:rgba(var(--tint),.05); /* Text, vier Stufen */ --bone:#E9ECEF; /* Haupttext */ --txt-2:#C9CED4; /* Zellinhalte */ --mute:#99A1AB; /* Nebenangaben */ --mute-2:#6A727C; /* Spaltenköpfe, Datumsangaben */ /* Gold ist der einzige Akzent: Primäraktion und aktiver Zustand */ /* Akzentfarbe. Die Variablennamen heißen aus historischen Gründen weiter „gold" — sie werden an über vierhundert Stellen verwendet. Der Wert bestimmt die Farbe, nicht der Name. */ /* Zwei Töne für zwei Aufgaben: Die Fläche muss weißen Text tragen, also etwas tiefer. Als Schrift auf dunklem Grund darf sie heller sein — ein Ton für beides funktioniert bei Blau nicht. */ --gold:#2C6FD8; /* Flächen von Knöpfen und Marken */ --gold-2:#7BAAF9; /* hellere Kante der Verläufe */ --gold-ink:#7BAAF9; /* Akzent als Schriftfarbe */ /* Ampel: Rot heißt jetzt handeln, Bernstein bald fällig, sonst neutral */ --bad:#E26D64; --bad-txt:#E8887F; --warn:#E0A63F; --ok:#55B87C; --neutral:#3E4650; /* unauffälliger Punkt für „alles in Ordnung" */ --blue:#7BA7D9; /* Nachtschicht */ /* Abstände */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:28px; --s7:40px; /* Schrift */ --t-xs:11px; --t-sm:12px; --t-md:13px; --t-base:13.5px; --t-lg:14px; --t-xl:21px; /* Rundungen */ --r-sm:6px; --r-md:8px; --r-lg:12px; /* Grundton für Auf- und Abhellungen. Auf dunklem Grund hellt Weiß auf; im hellen Thema wird daraus ein Dunkelton, der abdunkelt. Dadurch wirken Hover, Trennlinien und Karten in beiden Fassungen richtig, ohne dass jede Regel doppelt geschrieben werden muss. */ --tint: 255,255,255; --gold-rgb: 76,141,246; /* Diagrammfarben: mehrere Reihen brauchen unterscheidbare Töne, die auch nebeneinander nicht verschwimmen. Gold bleibt die Hausfarbe und führt die erste Reihe; die übrigen sind kühler, damit klar bleibt, welche Kurve die wichtige ist. */ --c1: #4C8DF6; /* Blau — Hauptreihe */ --c2: #35B8B0; /* Türkis */ --c3: #8AB4F8; /* helleres Blau */ --c4: #C86FA8; /* Rosé */ --c5: #6FBF73; /* Grün */ --c6: #E0864A; /* Orange */ --on-gold:#FFFFFF; /* Text auf farbiger Fläche */ --aside-bg:#0a1215; /* Seitenleiste, eine Spur tiefer als der Grund */ --warn-txt:#E0C48A; /* Text in Hinweiskästen */ /* Schatten und Verläufe */ --shadow-1: 0 20px 50px -30px #000; --shadow-2: 0 40px 90px -50px #000; --glow: rgba(var(--gold-rgb),.10); color-scheme: dark; } /* ========================================================================= Helles Thema Umgeschaltet wird über data-theme="light" am -Element. Nur die Variablen werden neu gesetzt — kein einziges Bauteil muss doppelt gepflegt werden. Die Ampelfarben bleiben, sie tragen Bedeutung. ========================================================================= */ html[data-theme="light"]{ /* Flächen: nicht reinweiß, das blendet auf Bildschirmen */ --ink:#F4F5F7; --ink-2:#FFFFFF; --ink-3:#FAFBFC; --line:rgba(15,23,30,.12); --line-soft:rgba(15,23,30,.08); /* Text: dieselben vier Stufen, nur umgekehrt */ --bone:#14181D; --txt-2:#2C333B; --mute:#5A636D; --mute-2:#828B95; /* Auf Weiß braucht der Akzent einen tieferen Ton als auf Dunkel, sonst verschwimmt er — besonders als Schriftfarbe. */ --gold:#1A73E8; --gold-2:#4C8DF6; --gold-ink:#1257C4; --gold-rgb: 26,115,232; --on-gold:#FFFFFF; --aside-bg:#EDEFF2; --warn-txt:#7A5A0C; /* Ampel etwas kräftiger — helle Flächen schlucken Farbe */ --bad:#C33A31; --bad-txt:#B3352C; --warn:#B37A12; --ok:#2E8B57; --neutral:#B8BFC7; --blue:#3B6FA8; --tint: 15,23,30; /* Im hellen Thema etwas tiefer, damit sie auf Weiß tragen */ --c1: #1A73E8; --c2: #1F8C86; --c3: #4A85D8; --c4: #A44E85; --c5: #4A9350; --c6: #C2662F; --shadow-1: 0 12px 30px -22px rgba(15,23,30,.5); --shadow-2: 0 24px 60px -40px rgba(15,23,30,.45); --glow: rgba(var(--gold-rgb),.14); color-scheme: light; } *{box-sizing:border-box;margin:0;padding:0} body{background:var(--ink);color:var(--bone); font-family:"Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif; font-size:var(--t-base);line-height:1.5;-webkit-font-smoothing:antialiased} h1,h2,h3{font-family:inherit;font-weight:700;letter-spacing:-.01em;line-height:1.2} a{color:var(--gold-ink)} button{font-family:inherit} /* „mono" heißt hier: Ziffern stehen bündig untereinander — nicht zwingend Schreibmaschinenschrift. Für Beträge, Daten und Mengen ist die Hausschrift ruhiger; sie hat feste Ziffernbreiten und fügt sich in Fließtext ein. Echte Kennungen behalten die Monospace, siehe unten. */ .mono { font-variant-numeric: tabular-nums; letter-spacing: 0; } code, .vin, kbd, .mono-tech { font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace; font-variant-numeric: tabular-nums } .hide{display:none!important} /* ---------- Login / Setup ---------- */ .center-page{min-height:100vh;display:grid;place-items:center;padding:24px; background:radial-gradient(700px 420px at 50% 8%,rgba(var(--gold-rgb),.1),transparent 65%),var(--ink)} .gate-box{width:100%;max-width:430px;border:1px solid var(--line);border-radius:20px;padding:32px; background:linear-gradient(165deg,var(--ink-2),var(--ink-3));box-shadow:var(--shadow-2)} .gate-box .mark{width:42px;height:42px;border-radius:10px;display:grid;place-items:center; background:linear-gradient(150deg,var(--gold-2),var(--gold));color:var(--on-gold); font-family:inherit;font-weight:900;font-size:14px;margin-bottom:18px} .gate-box h1{font-size:24px} .gate-box p{color:var(--mute);font-size:14px;margin-top:8px} .gate-box code{background:rgba(var(--tint),.06);padding:1px 5px;border-radius:4px;font-size:13px} .fineprint{color:var(--mute);font-size:12px;margin-top:20px;text-align:center} .alert{border-radius:12px;padding:13px 15px;font-size:13.5px;line-height:1.55;margin-top:16px} .alert-bad{border:1px solid rgba(224,92,92,.35);background:rgba(224,92,92,.09);color:#F0AEAD} .alert-warn{border:1px solid rgba(224,169,59,.35);background:rgba(224,169,59,.08);color:var(--warn-txt)} .alert-warn b{color:var(--warn)} /* ---------- Formulare ---------- */ label.lbl{display:block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase; color:var(--mute);margin:0 0 7px;font-family:ui-monospace,monospace} input[type=text],input[type=date],input[type=time],input[type=number],input[type=password],select,textarea{ width:100%;background:rgba(var(--tint),.03);border:1px solid var(--line-soft);border-radius:11px; padding:11px 13px;color:var(--bone);font-family:inherit;font-size:15px; transition:border-color .2s,background .2s} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);background:rgba(var(--gold-rgb),.05)} input[type=date],input[type=time]{color-scheme:dark} input[readonly]{color:var(--gold-ink);font-weight:600} select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--mute) 50%),linear-gradient(135deg,var(--mute) 50%,transparent 50%); background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px; background-repeat:no-repeat;padding-right:38px} select option{background:var(--ink-2);color:var(--bone)} textarea{resize:vertical;min-height:110px;line-height:1.6} input::placeholder,textarea::placeholder{color:#5c6f73} .f{margin-bottom:15px} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:13px} .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:13px} .chk{display:flex;align-items:flex-start;gap:11px;cursor:pointer;padding:11px 13px;border-radius:11px; border:1px solid var(--line-soft);background:rgba(var(--tint),.02);transition:border-color .2s,background .2s} .chk:hover{border-color:var(--line)} .chk input{width:19px;height:19px;flex:none;margin-top:1px;accent-color:var(--gold-ink);cursor:pointer} .chk b{display:block;font-weight:600;font-size:14.5px} .chk small{display:block;color:var(--mute);font-size:12.5px} .chk.on{border-color:var(--gold);background:rgba(var(--gold-rgb),.08)} .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:14px; padding:11px 18px;border-radius:999px;cursor:pointer;border:1px solid transparent;background:transparent; color:var(--bone);transition:transform .15s,background .2s,border-color .2s,box-shadow .25s} .btn:hover{transform:translateY(-1px)} .btn:disabled{opacity:.5;cursor:wait;transform:none} .btn svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8} .btn-gold{background:linear-gradient(150deg,var(--gold-2),var(--gold));color:var(--on-gold); box-shadow:0 10px 26px -12px rgba(var(--gold-rgb),.6)} .btn-ghost{background:transparent;border-color:var(--line);color:var(--bone)} .btn-ghost:hover{border-color:var(--gold);background:rgba(var(--gold-rgb),.08)} .btn-bad{background:transparent;border-color:rgba(224,92,92,.4);color:#E8908F} .btn-bad:hover{background:rgba(224,92,92,.12);border-color:var(--bad)} .btn-sm{padding:8px 14px;font-size:13px} .btn-block{width:100%} /* ---------- Layout ---------- */ .app{display:grid;grid-template-columns:236px 1fr;min-height:100vh} aside{border-right:1px solid var(--line-soft);background:var(--aside-bg);padding:20px 16px; position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:5px;overflow:auto} .logo{display:flex;align-items:center;gap:10px;padding:6px 8px 20px} .logo .mark{width:30px;height:30px;border-radius:8px;flex:none;display:grid;place-items:center; background:linear-gradient(150deg,var(--gold-2),var(--gold));color:var(--on-gold); font-family:inherit;font-weight:900;font-size:11px} .logo b{font-family:inherit;font-weight:900;font-size:14px;letter-spacing:.02em} .logo small{display:block;color:var(--mute);font-size:10.5px;font-weight:500} .navb{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:11px;cursor:pointer; color:var(--mute);font-size:14.5px;font-weight:500;border:1px solid transparent;background:transparent; width:100%;text-align:left;transition:background .2s,color .2s,border-color .2s} .navb svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.5; opacity:.75;transition:opacity .2s,stroke .2s} .navb:hover svg{opacity:1} .navb.on svg{opacity:1;stroke:var(--gold)} .navb:hover{color:var(--bone);background:rgba(var(--tint),.03)} .navb.on{color:var(--bone);background:rgba(var(--gold-rgb),.1);border-color:var(--line)} .side-foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--line-soft)} .who{padding:8px 13px 12px;font-size:12px;color:var(--mute)} .who b{display:block;color:var(--bone);font-size:13px} main{padding:34px 34px 80px;overflow-x:hidden} .page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:28px} .page-head h1{font-size:clamp(24px,3vw,34px)} .page-head p{color:var(--mute);font-size:15px;margin-top:6px} .eyebrow{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink); font-family:ui-monospace,monospace} .actions{display:flex;gap:10px;flex-wrap:wrap} .panel{border:1px solid var(--line-soft);border-radius:18px; background:linear-gradient(180deg,var(--ink-2),var(--ink-3));padding:24px;margin-bottom:20px} .panel h2{font-size:19px;margin-bottom:4px} .panel .sub{color:var(--mute);font-size:13.5px;margin-bottom:18px} /* ---------- Kennzahlen & Tabellen ---------- */ .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px} .kpi{border:1px solid var(--line-soft);border-radius:14px;padding:18px;background:rgba(var(--tint),.02)} .kpi .n{font-family:inherit;font-weight:800;font-size:30px;letter-spacing:-.02em} .kpi .n.gold{color:var(--gold-ink)} .kpi .l{color:var(--mute);font-size:12.5px;margin-top:2px} .tbl{width:100%;border-collapse:collapse} .tbl th{text-align:left;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute); font-weight:500;padding:0 12px 12px;border-bottom:1px solid var(--line-soft); font-family:ui-monospace,monospace} .tbl td{padding:14px 12px;border-bottom:1px solid var(--line-soft);font-size:14.5px;vertical-align:middle} .tbl tr:last-child td{border-bottom:0} .tbl tbody tr{cursor:pointer;transition:background .18s} .tbl tbody tr:hover{background:rgba(var(--gold-rgb),.05)} .plate{display:inline-block;font-family:ui-monospace,monospace;font-size:13px;border:1px solid var(--line); border-radius:6px;padding:4px 9px;background:rgba(var(--gold-rgb),.07);color:var(--gold-ink);white-space:nowrap} .tag{display:inline-flex;align-items:center;font-size:10px;letter-spacing:.08em;text-transform:uppercase; border-radius:999px;padding:4px 10px;border:1px solid;white-space:nowrap;font-family:ui-monospace,monospace} .tag.ok{color:var(--ok);border-color:rgba(63,191,127,.35);background:rgba(63,191,127,.1)} .tag.warn{color:var(--warn);border-color:rgba(224,169,59,.35);background:rgba(224,169,59,.1)} .tag.bad{color:var(--bad);border-color:rgba(224,92,92,.35);background:rgba(224,92,92,.1)} .tag.n{color:var(--mute);border-color:var(--line-soft);background:rgba(var(--tint),.03)} .empty{text-align:center;padding:52px 20px;color:var(--mute)} .empty svg{width:42px;height:42px;stroke:var(--line);fill:none;stroke-width:1.4;margin-bottom:14px} .empty p{font-size:14.5px;margin-bottom:16px} /* ---------- Modal ---------- */ .modal{position:fixed;inset:0;z-index:150;display:none;padding:24px;overflow-y:auto; background:rgba(5,10,12,.82);backdrop-filter:blur(4px)} .modal.open{display:block} .modal-box{max-width:900px;margin:0 auto;border:1px solid var(--line);border-radius:20px; background:linear-gradient(180deg,var(--ink-2),var(--ink-3));box-shadow:var(--shadow-2)} .modal-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:22px 26px; border-bottom:1px solid var(--line-soft);position:sticky;top:0;z-index:3; background:var(--ink-2);border-radius:20px 20px 0 0} .modal-head h2{font-size:21px} .modal-body{padding:26px} .modal-foot{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;padding:18px 26px; border-top:1px solid var(--line-soft)} .x{background:transparent;border:1px solid var(--line-soft);border-radius:10px;width:34px;height:34px; color:var(--mute);cursor:pointer;font-size:18px;line-height:1;flex:none} .x:hover{color:var(--bone);border-color:var(--line)} fieldset{border:0;padding:0;margin:0 0 26px} legend{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink); padding-bottom:14px;width:100%;border-bottom:1px solid var(--line-soft);margin-bottom:16px; font-family:ui-monospace,monospace} /* ---------- Skizze ---------- */ #sketch{display:block;width:100%;height:auto;touch-action:none;cursor:crosshair} .hint{color:var(--mute);font-size:12.5px} /* ---------- Dateien ---------- */ /* Ablagefeld: eine Zeile hoch, nicht ein halber Bildschirm. Die Felder sind Nebensache — die abgelegten Dateien sind der Inhalt. */ .drop{border:1px dashed var(--line);border-radius:9px;padding:9px 12px;cursor:pointer; background:rgba(var(--gold-rgb),.03);transition:background .2s,border-color .2s; display:flex;align-items:baseline;gap:8px;text-align:left} .drop:hover{background:rgba(var(--gold-rgb),.08);border-color:var(--gold)} .drop.busy{opacity:.5;cursor:wait} .drop b{display:inline;font-size:13px} .drop small{color:var(--mute);font-size:11.5px} /* Kachelstreifen: kleine Vorschaubilder, Name nur beim Überfahren. Bei zehn Anhängen zählt jeder Millimeter. */ .files{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px} .files:empty{margin-top:0} .file{position:relative;border:1px solid var(--line-soft);border-radius:7px;overflow:hidden; width:58px;height:58px;background:rgba(var(--tint),.03)} .file img{width:58px;height:58px;object-fit:cover;display:block;cursor:zoom-in} .file .doc{width:58px;height:58px;display:grid;place-items:center;color:var(--gold-ink);cursor:pointer} .file .doc svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.5} /* Der Dateiname liegt über dem Bild und erscheint erst beim Überfahren — sichtbar bleibt er trotzdem, über den Titel-Hinweis. */ .file span{position:absolute;inset:auto 0 0 0;padding:3px 4px;font-size:9px;line-height:1.2; color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.85)); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; opacity:0;transition:opacity .15s;pointer-events:none} .file:hover span{opacity:1} .file.pending span{opacity:1} .file .del{position:absolute;top:2px;right:2px;width:18px;height:18px;border-radius:5px;border:0; background:rgba(5,10,12,.8);color:#E8908F;cursor:pointer;font-size:13px;line-height:1} .file .del:hover{background:var(--bad);color:#fff} .file.pending{border-color:var(--gold);border-style:dashed} /* ---------- Detailansicht ---------- */ .dl{display:grid;grid-template-columns:auto 1fr;gap:10px 20px;font-size:14.5px} .dl dt{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);padding-top:2px; font-family:ui-monospace,monospace} .dl dd{font-weight:500} .money{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .money div{border:1px solid var(--line-soft);border-radius:12px;padding:14px;background:rgba(var(--tint),.02)} .money .k{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute); font-family:ui-monospace,monospace} .money .v{font-family:inherit;font-weight:800;font-size:20px;margin-top:3px} /* ---------- Toast ---------- */ .toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,180%);z-index:300; background:var(--ink-3);border:1px solid var(--gold);border-radius:12px;padding:13px 20px;font-size:14px; box-shadow:0 20px 50px -18px #000;transition:transform .4s cubic-bezier(.16,1,.3,1);max-width:90vw} .toast.show{transform:translate(-50%,0)} .toast.err{border-color:var(--bad)} .notice{border:1px solid rgba(224,169,59,.3);background:rgba(224,169,59,.07);border-radius:13px; padding:14px 16px;font-size:13px;color:var(--warn-txt);line-height:1.55;margin-bottom:20px} .notice b{color:var(--warn)} :focus-visible{outline:2px solid var(--gold-2);outline-offset:2px;border-radius:6px} @media(max-width:900px){ .app{grid-template-columns:1fr} aside{position:static;height:auto;flex-direction:row;flex-wrap:wrap;border-right:0; border-bottom:1px solid var(--line-soft)} .logo{width:100%;padding-bottom:12px} .navb{width:auto;flex:1;min-width:112px;justify-content:center} .side-foot{width:100%;border-top:0;padding-top:8px;display:flex;align-items:center;gap:10px} aside{height:auto;overflow:visible} .side-foot{position:static;margin-top:0} .who{padding:0 8px;flex:1} main{padding:24px 18px 70px} .kpis{grid-template-columns:1fr 1fr} .grid2,.grid3,.money{grid-template-columns:1fr} .modal{padding:0} .modal-box{border-radius:0;border:0;min-height:100vh} .modal-head{border-radius:0} .tbl thead{display:none} .modal-foot{position:sticky;bottom:0;background:var(--ink-2)} } @media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}} /* ===== Wartung ===== */ .badge { margin-left: auto; min-width: 20px; padding: 1px 7px; border-radius: 999px; background: var(--bad, #C0392B); color: #fff; font: 600 11px/1.6 'JetBrains Mono', monospace; text-align: center; } .sep { display: flex; align-items: center; gap: 12px; margin: 22px 0 16px; color: var(--gold, var(--gold)); font: 600 11px/1 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; } .sep::after { content: ''; flex: 1; height: 1px; background: rgba(var(--gold-rgb),.28); } .panel-head { padding: 16px 18px; border-bottom: 1px solid var(--line, rgba(var(--tint),.08)); } .panel-head .sub { margin-top: 3px; } .vd-sub { margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line, rgba(var(--tint),.08)); color: var(--mute, var(--mute)); font-size: 14px; } /* ===== Sortierbare Tabellen ===== */ .tbl-sort th.sortable { cursor: pointer; user-select: none; white-space: nowrap; transition: color .15s; } .tbl-sort th.sortable:hover { color: var(--gold, var(--gold)); } .tbl-sort th.sortable.on { color: var(--gold, var(--gold)); } /* ===== Ansichtswahl ===== */ .segmented { display: inline-flex; border: 1px solid var(--line, rgba(var(--tint),.12)); border-radius: 8px; overflow: hidden; } .segmented button { padding: 8px 14px; border: 0; background: transparent; color: var(--mute, var(--mute)); font: 500 13px/1 inherit; cursor: pointer; } .segmented button.on { background: rgba(var(--gold-rgb),.16); color: var(--gold, var(--gold)); } /* ===== Öl-Anzeige mit Balken (deutlich größer) ===== */ .pct { display: flex; align-items: center; gap: 10px; min-width: 130px; } .pct b { font-size: 15px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; min-width: 48px; text-align: right; } .pct-bar { flex: 1; height: 8px; border-radius: 999px; background: rgba(var(--tint),.09); overflow: hidden; } .pct-bar i { display: block; height: 100%; border-radius: 999px; } .pct-ok b { color: var(--ok, #3E9C6D); } .pct-ok .pct-bar i { background: var(--ok, #3E9C6D); } .pct-warning b { color: var(--warn, #D08A2E); } .pct-warning .pct-bar i { background: var(--warn, #D08A2E); } .pct-critical b, .pct-overdue b { color: var(--bad, #C0392B); } .pct-critical .pct-bar i, .pct-overdue .pct-bar i { background: var(--bad, #C0392B); } .pct-none { color: var(--mute, var(--mute)); font-size: 13px; } /* ===== Kartenansicht ===== */ .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; } .card { padding: 16px; border: 1px solid var(--line, rgba(var(--tint),.09)); border-left: 3px solid var(--line, rgba(var(--tint),.09)); border-radius: 10px; background: var(--panel, var(--ink-2)); cursor: pointer; transition: border-color .15s, transform .1s; } .card:hover { transform: translateY(-2px); } .card.sev-overdue, .card.sev-critical { border-left-color: var(--bad, #C0392B); } .card.sev-warning { border-left-color: var(--warn, #D08A2E); } .card.sev-ok { border-left-color: var(--ok, #3E9C6D); } .card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .card-model { color: var(--mute, var(--mute)); font-size: 14px; margin-bottom: 4px; } .card-km { font-size: 18px; margin-bottom: 12px; } .card-lines { color: var(--mute, var(--mute)); font-size: 12px; line-height: 1.8; margin: 10px 0; } .card-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 12px; } .card-hu { color: var(--mute, var(--mute)); font-size: 11px; white-space: nowrap; } /* ===== Schicht ===== */ .shift { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font: 600 12px/1.5 inherit; white-space: nowrap; } .shift-tag { background: rgba(208, 138, 46, .16); color: #E0A754; } .shift-nacht { background: rgba(90, 130, 190, .16); color: #7FA6D8; } .shift-beide { background: rgba(62, 156, 109, .16); color: #55B487; } .sdot { font-style: normal; margin-right: 4px; } .sdot.shift-tag { color: #E0A754; background: none; } .sdot.shift-nacht { color: #7FA6D8; background: none; } .sdot.shift-beide { color: #55B487; background: none; } /* Fahrer-Chips in der Fahrzeugtabelle */ .drv-chip { font-size: 13px; white-space: nowrap; } .drv-chip.empty { color: var(--mute, var(--mute)); font-size: 12px; font-style: italic; } /* Maps-Link */ a.maps { display: inline-flex; align-items: center; gap: 5px; color: var(--txt, var(--bone)); text-decoration: none; border-bottom: 1px dotted var(--line, rgba(var(--tint),.25)); } a.maps:hover { color: var(--gold, var(--gold)); border-bottom-color: var(--gold, var(--gold)); } a.maps svg { fill: none; stroke: currentColor; stroke-width: 1.8; flex-shrink: 0; } .plate.sm { font-size: 11px; padding: 2px 6px; } /* Kennzahlenleiste */ .stats { display: flex; flex-wrap: wrap; gap: 28px; padding: 16px 20px; margin-bottom: 18px; border: 1px solid var(--line, rgba(var(--tint),.08)); border-radius: 10px; background: var(--panel, var(--ink-2)); } .stats .k { color: var(--mute, var(--mute)); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; } .stats .v { font-size: 22px; font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; } /* ===== Mehrfachauswahl ===== */ th.cbx, td.cbx { width: 36px; padding-right: 0; text-align: center; } td.cbx input, th.cbx input { width: 16px; height: 16px; accent-color: var(--gold, var(--gold)); cursor: pointer; } tr.picked { background: rgba(var(--gold-rgb),.07); } .bulkbar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; margin-bottom: 12px; border: 1px solid rgba(var(--gold-rgb),.35); border-radius: 10px; background: rgba(var(--gold-rgb),.08); font-size: 14px; } .bulkbar b { color: var(--gold-ink); font-variant-numeric: tabular-nums; } .bulkbar .spacer { flex: 1; } /* ===== Strafen ===== */ tr.dim { opacity: .45; } tr.dim:hover { opacity: 1; } .upload-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; } .chk { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; } .chk input { width: 16px; height: 16px; accent-color: var(--gold, var(--gold)); } /* ===== Abwesenheits-Kalender ===== */ .calbar { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } .calbar b { font-size: 16px; min-width: 150px; } .calbar .spacer { flex: 1; } .calbar .leg { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--mute, var(--mute)); } .leg .dot, .cal-more { width: 12px; height: 12px; border-radius: 3px; display: inline-block; } .cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; background: var(--line, rgba(var(--tint),.06)); border-radius: 10px; padding: 4px; } .cal-wd { text-align: center; padding: 8px 0; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--mute, var(--mute)); text-transform: uppercase; letter-spacing: .05em; } .cal-cell { min-height: 92px; background: var(--panel, var(--ink-2)); border-radius: 6px; padding: 5px; cursor: pointer; transition: background .12s; overflow: hidden; } .cal-cell:hover { background: rgba(var(--tint),.06); } .cal-cell.empty { background: transparent; cursor: default; } .cal-cell.we { background: var(--ink-3); } .cal-cell.today { outline: 2px solid var(--gold, var(--gold)); outline-offset: -2px; } .cal-n { font-size: 12px; font-weight: 600; color: var(--mute); font-variant-numeric: tabular-nums; } .cal-cell.today .cal-n { color: var(--gold, var(--gold)); } .cal-bar { margin-top: 3px; padding: 2px 6px; border-radius: 4px; font-size: 11px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; } .cal-more { color: var(--mute, var(--mute)); font-size: 10px; margin-top: 2px; width: auto; height: auto; } .abs-urlaub { background: #B7902E; } .abs-krank { background: #B0413E; } .abs-sonstiges { background: #3E7C9C; } .drv-lines { display: flex; flex-direction: column; gap: 8px; } .drv-line { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--panel2, var(--ink-3)); border-radius: 8px; cursor: pointer; } .drv-line:hover { background: rgba(var(--tint),.06); } .drv-line .sub { color: var(--mute, var(--mute)); font-size: 12px; } .drv-line.empty { color: var(--mute, var(--mute)); font-size: 13px; cursor: default; font-style: italic; } @media (max-width: 640px) { .cal-cell { min-height: 64px; } .cal-bar { font-size: 9px; padding: 1px 3px; } .calbar { flex-wrap: wrap; } .calbar .leg { display: none; } } .cal-ic { margin-right: 3px; font-size: 9px; opacity: .85; } /* ===== Untermenü in der Navigation ===== */ .subnav { display: none; flex-direction: column; margin: 2px 0 2px 0; } .subnav.open { display: flex; } .navb.sub { /* Bündig mit dem Text der Oberpunkte: Innenabstand 12px plus Symbol 18px plus Abstand 11px. */ padding-left: 41px; font-size: 14px; opacity: .85; } .navb.sub svg { width: 16px; height: 16px; } .navb.sub.on { opacity: 1; } /* ===== Belegungs-Zeitleiste ===== */ .tl { padding: 8px 4px; } .tl-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; } .tl-label { width: 90px; flex-shrink: 0; font-size: 12px; color: var(--mute, var(--mute)); } .tl-track { position: relative; flex: 1; height: 28px; background: var(--panel2, var(--ink-3)); border-radius: 6px; overflow: hidden; } .tl-track.mini { height: 11px; } .tl-track.mini + .tl-track.mini { margin-top: 2px; } .tl-ticks { background: transparent; height: 18px; } .tl-ticks span { position: absolute; font: 600 10px/1 'JetBrains Mono', monospace; color: var(--mute, var(--mute)); text-transform: uppercase; } .tl-today { position: absolute; top: -4px; width: 2px; height: 300px; background: var(--gold, var(--gold)); opacity: .45; z-index: 6; pointer-events: none; } /* Fahrzeug-Zeile (kompakt, aufklappbar) */ .tl-veh { border-bottom: 1px solid var(--line, rgba(var(--tint),.06)); } .tl-vhead { display: flex; align-items: center; gap: 8px; padding: 8px 4px; cursor: pointer; } .tl-vhead:hover { background: rgba(var(--tint),.02); } .tl-caret { width: 14px; color: var(--mute, var(--mute)); font-size: 11px; } .tl-mini { flex: 1; margin-left: 8px; } .tl-detail { padding: 4px 4px 12px 26px; } .tl-row { display: flex; align-items: center; gap: 12px; margin: 4px 0; } /* Segmente nach Status */ .tl-seg { position: absolute; top: 2px; bottom: 2px; border-radius: 4px; font-size: 11px; font-weight: 600; color: #fff; line-height: 24px; padding: 0 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; box-sizing: border-box; background: #3E6A8A; } .tl-track.mini .tl-seg { font-size: 0; padding: 0; line-height: 0; top: 0; bottom: 0; } .tl-seg.temp { background: #B7902E; } /* Vertretung */ .tl-seg.absent { /* Urlaub/Krankheit: schraffiert */ background: repeating-linear-gradient(45deg, rgba(120,130,135,.5), rgba(120,130,135,.5) 5px, rgba(120,130,135,.25) 5px, rgba(120,130,135,.25) 10px); color: #cfd8dc; border: 1px solid rgba(120,130,135,.5); } .tl-seg.gap { /* niemand: leer/rot */ background: repeating-linear-gradient(45deg, rgba(176,65,62,.22), rgba(176,65,62,.22) 6px, rgba(176,65,62,.38) 6px, rgba(176,65,62,.38) 12px); border: 1px dashed rgba(176,65,62,.7); cursor: default; } .tl-tag { font-size: 9px; opacity: .8; font-weight: 700; } /* ===== Zeitleisten-Zoom ===== */ .tl-zoom { display: flex; align-items: center; gap: 10px; flex-shrink: 0; padding-top: 2px; } .tl-zoom input[type=range] { width: 160px; accent-color: var(--gold, var(--gold)); cursor: pointer; } @media (max-width: 640px) { .tl-zoom { width: 100%; margin-top: 8px; } .tl-zoom input[type=range] { flex: 1; width: auto; } } /* ===== Untere Navigationsleiste + Burger (nur Handy) ===== */ .botbar { display: none; } .sheet { display: none; } @media (max-width: 820px) { /* Seitenleiste weg, untere Leiste her */ .app > aside { display: none; } main { padding-bottom: 76px; } /* Platz für die feste Leiste */ .botbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--panel, var(--ink-2)); border-top: 1px solid var(--line, rgba(var(--tint),.08)); padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); box-shadow:var(--shadow-1); } .botb { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; background: none; border: 0; cursor: pointer; position: relative; color: var(--mute, var(--mute)); padding: 6px 2px; border-radius: 10px; font: inherit; } .botb svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .botb span { font-size: 10.5px; font-weight: 600; } .botb.on { color: var(--gold, var(--gold)); } .botb .badge { position: absolute; top: 2px; right: 50%; margin-right: -18px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--bad, #B0413E); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; } /* Aufklappmenü */ .sheet { display: block; position: fixed; inset: 0; z-index: 50; visibility: hidden; } .sheet.open { visibility: visible; } .sheet-back { position: absolute; inset: 0; background: rgba(0,0,0,.5); opacity: 0; transition: opacity .2s; } .sheet.open .sheet-back { opacity: 1; } .sheet-panel { position: absolute; left: 0; right: 0; bottom: 0; background: var(--panel, var(--ink-2)); border-top-left-radius: 18px; border-top-right-radius: 18px; padding: 8px 12px calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateY(100%); transition: transform .25s ease; max-height: 80vh; overflow-y: auto; } .sheet.open .sheet-panel { transform: translateY(0); } .sheet-grip { width: 40px; height: 4px; border-radius: 2px; background: var(--line, rgba(var(--tint),.2)); margin: 8px auto 14px; } .sheetb { display: flex; align-items: center; gap: 14px; width: 100%; background: none; border: 0; cursor: pointer; text-align: left; color: var(--text, var(--bone)); padding: 14px 12px; border-radius: 10px; font: 600 15px/1 inherit; text-decoration: none; } .sheetb:hover, .sheetb.on { background: rgba(var(--gold-rgb),.1); } .sheetb.on { color: var(--gold, var(--gold)); } .sheetb svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } } /* ===== Drag & Drop + vorgemerkte Dateien ===== */ .drop.dragover { border-color: var(--gold, var(--gold)); background: rgba(var(--gold-rgb),.12); box-shadow: inset 0 0 0 2px var(--gold, var(--gold)); } .file.pending { opacity: .85; } .file.pending .doc { background: rgba(var(--gold-rgb),.12); border: 1px dashed rgba(var(--gold-rgb),.5); } .file.pending .pendtag { position: absolute; bottom: 4px; left: 4px; right: 4px; font-size: 9px; font-style: normal; text-align: center; background: var(--gold, var(--gold)); color: #1a1205; border-radius: 3px; padding: 1px 0; } /* ===== Unfall: Ampelpunkt, Summe ===== */ /* Statuspunkte: klein genug, dass sie in einer Zeile mit Text nicht dominieren. Der Hof außen herum ist auf 2px zurückgenommen — mit 3px und 12px Durchmesser kamen sich benachbarte Punkte ins Gehege. */ .dot-status { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; } .dot-status.ok { background: var(--ok); box-shadow: 0 0 0 2px rgba(78,156,107,.16); } .dot-status.bad { background: var(--bad); box-shadow: 0 0 0 2px rgba(176,65,62,.16); } .crash-sum { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--line, rgba(var(--tint),.06)); } .crash-sum > span:first-child { color: var(--mute, var(--mute)); font-size: 13px; } .crash-sum b { font-size: 17px; } .crash-sum .sub { color: var(--mute, var(--mute)); font-size: 11px; margin-right: 8px; } /* ===== Klappmenü ===== */ .menu-wrap { position: relative; display: inline-block; } .menu { display: none; position: absolute; top: 100%; left: 0; margin-top: 4px; z-index: 30; background: var(--panel, var(--ink-2)); border: 1px solid var(--line, rgba(var(--tint),.1)); border-radius: 10px; padding: 5px; min-width: 200px; box-shadow: 0 8px 28px rgba(0,0,0,.4); } .menu.open { display: block; } .menu button { display: block; width: 100%; text-align: left; background: none; border: 0; cursor: pointer; color: var(--text, var(--bone)); padding: 10px 12px; border-radius: 7px; font: inherit; font-size: 14px; } .menu button:hover { background: rgba(var(--gold-rgb),.12); } /* ===== Schicht als einfarbige Punkte ===== */ .sdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; } .sdot.shift-tag { background: var(--gold); } /* Tag = gold */ .sdot.shift-nacht { background: #5B7BB4; } /* Nacht = blau */ .sdot.shift-beide { background: #6B8E3D; } /* beide = grün */ .shift { display: inline-flex; align-items: center; white-space: nowrap; } /* ===== Adresse einzeilig ===== */ .wohnort { max-width: 260px; } .addr-cell { display: inline-flex; align-items: center; gap: 5px; max-width: 240px; } .addr-cell .addr-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nocoord { color: var(--warn, var(--gold)); cursor: help; margin-left: 4px; } /* ===== Freie Schicht kompakt ===== */ @keyframes freePulse { 0% { box-shadow: 0 0 0 0 rgba(217, 83, 79, .55); } 70% { box-shadow: 0 0 0 6px rgba(217, 83, 79, 0); } 100% { box-shadow: 0 0 0 0 rgba(217, 83, 79, 0); } } /* ===== Entwürfe ===== */ .draft-panel { border: 1px solid rgba(var(--gold-rgb),.35); } /* ===== Upload-Fortschrittsleiste ===== */ .drop { position: relative; } .drop-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 20px; background: rgba(0,0,0,.35); border-radius: 0 0 8px 8px; overflow: hidden; } .drop-prog-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--gold, var(--gold)); transition: width .15s ease; } .drop-prog-txt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); font-variant-numeric: tabular-nums; } /* ===== Live-Suchfeld ===== */ .searchbar { position: relative; display: flex; align-items: center; margin-bottom: 14px; } .searchbar svg { position: absolute; left: 12px; width: 16px; height: 16px; fill: none; stroke: var(--mute, var(--mute)); stroke-width: 2; stroke-linecap: round; pointer-events: none; } .searchbar input { width: 100%; padding: 11px 38px 11px 38px; background: var(--panel2, var(--ink-3)); border: 1px solid var(--line, rgba(var(--tint),.1)); border-radius: 10px; color: var(--text, var(--bone)); font: inherit; font-size: 14.5px; } .searchbar input:focus { outline: none; border-color: var(--gold, var(--gold)); } .searchbar input::-webkit-search-cancel-button { display: none; } .search-clear { position: absolute; right: 8px; width: 26px; height: 26px; border: 0; cursor: pointer; background: none; color: var(--mute, var(--mute)); font-size: 20px; line-height: 1; border-radius: 6px; display: flex; align-items: center; justify-content: center; } .search-clear:hover { background: rgba(var(--tint),.06); color: var(--text, var(--bone)); } /* ===== Durchsuchbare Auswahl (Combobox) ===== */ .combo { position: relative; } .combo-input { width: 100%; padding: 10px 12px; background: var(--panel2, var(--ink-3)); border: 1px solid var(--line, rgba(var(--tint),.1)); border-radius: 8px; color: var(--text, var(--bone)); font: inherit; font-size: 14.5px; cursor: text; } .combo-input:focus { outline: none; border-color: var(--gold, var(--gold)); } .combo-list { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 60; background: var(--panel, var(--ink-2)); border: 1px solid var(--line, rgba(var(--tint),.12)); border-radius: 10px; padding: 5px; max-height: 260px; overflow-y: auto; box-shadow: 0 10px 30px rgba(0,0,0,.45); } .combo.open .combo-list { display: block; } .combo-opt { padding: 9px 11px; border-radius: 7px; cursor: pointer; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .combo-opt:hover, .combo-opt.active { background: rgba(var(--gold-rgb),.16); } .combo-empty { padding: 9px 11px; color: var(--mute, var(--mute)); font-size: 13px; } /* ===== Fahrzeug-Ausstattung ===== */ .eq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 14px; margin-bottom: 14px; } /* Ausstattung im Fahrzeugfenster: eine Zeile je Teil, Haken oder Kreuz */ .eq-list { display: grid; gap: 2px; } .eq-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--r-md); font-size: 14px; color: var(--txt-2); } .eq-row:nth-child(odd) { background: rgba(var(--tint),.025); } .eq-row.miss { color: var(--bone); } .eq-mark { display: inline-flex; width: 16px; height: 16px; flex: none; } .eq-mark svg { width: 100%; height: 100%; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke: var(--ok); } .eq-row.miss .eq-mark svg { stroke: var(--bad); } .eq-state { margin-left: auto; font-size: 12px; color: var(--mute-2); } .eq-row.miss .eq-state { color: var(--bad-txt); font-weight: 600; } /* Die Zahl in der Liste — deutet an, dass ein Hinweis dranhängt */ .eq-num { cursor: help; border-bottom: 1px dotted rgba(var(--tint),.25); } /* Auswahlfeld in der Filterleiste */ .filterbar select { height: 30px; padding: 0 26px 0 10px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--mute); font-size: 13px; font-family: inherit; cursor: pointer; } .filterbar select.on { border-color: var(--gold); color: var(--gold-ink); background: rgba(var(--gold-rgb),.10); } .eq-cell { display: inline-flex; align-items: center; gap: 3px; } .eq-ic { display: inline-flex; width: 18px; height: 18px; } .eq-ic svg { width: 100%; height: 100%; fill: none; stroke-width: 1.7; stroke-linejoin: round; } .eq-ic.has svg { stroke: var(--ok, #4E9C6B); opacity: .95; } .eq-ic.miss svg { stroke: var(--mute, var(--mute)); opacity: .28; } .eq-warn { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; margin-left: 4px; border-radius: 50%; background: rgba(176,65,62,.2); border: 1px solid rgba(176,65,62,.6); color: #E8A5A0; font: 700 11px/1 system-ui, sans-serif; cursor: help; } /* ===== Finanzen: Kennzahlen und Balken ===== */ .stat-s { color: var(--mute, var(--mute)); font-size: 11.5px; margin-top: 3px; } .bars { display: flex; align-items: flex-end; gap: 8px; padding: 14px 14px 8px; height: 132px; } .bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; } .bar { width: 100%; max-width: 34px; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--gold), rgba(var(--gold-rgb),.45)); min-height: 3px; /* Wachsen beim Erscheinen: Die Höhe steht im style-Attribut, hier wird sie von unten aufgezogen. Das zeigt beiläufig, worauf man schaut — Balken, die einfach da sind, übersieht man leichter. */ transform-origin: bottom; animation-name: bar-auf; animation-duration: .5s; animation-timing-function: cubic-bezier(.22,.9,.3,1); animation-fill-mode: backwards; } @keyframes bar-auf { from { transform: scaleY(0); opacity: .3; } } /* Nacheinander statt alle gleichzeitig — sonst wirkt es wie ein Zucken */ .bar-col:nth-child(1) .bar { animation-delay: .00s } .bar-col:nth-child(2) .bar { animation-delay: .04s } .bar-col:nth-child(3) .bar { animation-delay: .08s } .bar-col:nth-child(4) .bar { animation-delay: .12s } .bar-col:nth-child(5) .bar { animation-delay: .16s } .bar-col:nth-child(6) .bar { animation-delay: .20s } .bar-col:nth-child(7) .bar { animation-delay: .24s } .bar-col:nth-child(8) .bar { animation-delay: .28s } .bar-col:nth-child(9) .bar { animation-delay: .32s } .bar-col:nth-child(10) .bar { animation-delay: .36s } .bar-col:nth-child(11) .bar { animation-delay: .40s } .bar-col:nth-child(12) .bar { animation-delay: .44s } .bar-val { font-size: 10.5px; font-weight: 600; color: var(--mute); margin-bottom: 4px; font-variant-numeric: tabular-nums; } .bar-lbl { font-size: 10px; color: var(--mute-2); margin-top: 5px; white-space: nowrap; } /* Auch die Balken in Tabellen ziehen sich auf */ .bar-avg .fill, .tbl .bar > i { transform-origin: left; animation-name: fill-auf; animation-duration: .55s; animation-timing-function: cubic-bezier(.22,.9,.3,1); animation-fill-mode: backwards; } @keyframes fill-auf { from { transform: scaleX(0); } } /* ===== Aktualitätsanzeige Finanzen ===== */ .freshness { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; padding: 9px 14px; margin-bottom: 14px; border-radius: 8px; background: rgba(var(--tint),.03); border: 1px solid var(--line, rgba(var(--tint),.07)); font-size: 13px; } .freshness.stale { border-color: rgba(var(--gold-rgb),.45); background: rgba(var(--gold-rgb),.08); } /* ===== Zeitraumauswahl Finanzen ===== */ .range-box { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .range-box input[type="date"] { padding: 8px 10px; background: var(--panel2, var(--ink-3)); border: 1px solid var(--line, rgba(var(--tint),.1)); border-radius: 8px; color: var(--text, var(--bone)); font: inherit; font-size: 13px; } td.cash { color:var(--gold-ink); } /* ===== Schnellauswahl Zeitraum ===== */ .quick-range { display: flex; gap: 4px; flex-wrap: wrap; } .quick-range button { padding: 7px 11px; font-size: 12.5px; cursor: pointer; background: transparent; color: var(--mute, var(--mute)); border: 1px solid var(--line, rgba(var(--tint),.1)); border-radius: 7px; } .quick-range button:hover { color: var(--text, var(--bone)); border-color: rgba(var(--tint),.2); } .quick-range button.on { color: var(--gold, var(--gold)); border-color: rgba(var(--gold-rgb),.55); background: rgba(var(--gold-rgb),.10); } /* ===== Abrechnungstabelle: große, gut lesbare Zahlen ===== */ .tbl .mono.big { font-size: 15px; font-weight: 600; } .tbl tfoot td { border-top: 2px solid var(--line, rgba(var(--tint),.14)); padding-top: 12px; font-weight: 600; } .tbl-bill td, .tbl-bill th { padding-top: 12px; padding-bottom: 12px; } /* ===== Ausklappbarer CSV-Import in den Finanzen ===== */ .csv-box { padding: 0; } .csv-box > summary { cursor: pointer; padding: 14px 18px; list-style: none; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .csv-box > summary::-webkit-details-marker { display: none; } .csv-box > summary::before { content: '▸'; color: var(--gold, var(--gold)); font-size: 13px; transition: transform .15s; } .csv-box[open] > summary::before { transform: rotate(90deg); } .csv-box > summary:hover { background: rgba(var(--tint),.02); } .csv-box > *:not(summary) { padding: 0 18px; } .csv-box > *:last-child { padding-bottom: 18px; } /* ===== Einsatzzeiten: Wochentagspunkte ===== */ .wdrow { display: flex; gap: 3px; } .wd { width: 20px; height: 20px; border-radius: 5px; cursor: default; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; letter-spacing: 0; } .wd.on { background: rgba(74,163,110,.28); color: #7FD1A2; } /* gefahren */ .wd.gap { background: rgba(214,90,90,.22); color: #E48B8B; } /* keine Fahrt */ .wd.off { background: rgba(var(--tint),.06); color: var(--mute, var(--mute)); } /* abwesend gemeldet */ /* Gesperrte Felder für Rollen ohne Berechtigung */ .feld-gesperrt { opacity: .5; } .feld-gesperrt input, .feld-gesperrt select { cursor: not-allowed; } /* ===== Fahrzeugdetail: Stammdaten links, Wartung rechts ===== */ .veh-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; align-items: start; } .veh-cols > div > fieldset:last-child { margin-bottom: 18px; } @media (max-width: 860px) { .veh-cols { grid-template-columns: 1fr; gap: 0; } } /* Drei Kennzahlen nebeneinander bleiben auch in der schmalen Spalte lesbar */ .money-3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 520px) { .money-3 { grid-template-columns: 1fr; } } /* Werkstatttermin-Kennzeichen in der Fahrzeugliste */ .svc-dot { display: inline-flex; align-items: center; gap: 5px; color: var(--warn, #D8A33A); font-size: 12px; font-weight: 600; white-space: nowrap; } .svc-dot::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--warn, #D8A33A); flex: none; } /* ===== Bild aus der Zwischenablage einfügen ===== */ .drop.paste-ziel { border-color: rgba(var(--gold-rgb),.55); box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb),.25); } .drop.paste-ziel::after { content: 'Strg+V'; position: absolute; top: 6px; right: 8px; font-size: 10.5px; letter-spacing: .04em; color: var(--gold, var(--gold)); opacity: .75; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .drop { position: relative; } .drop:focus-visible { outline: 2px solid rgba(var(--gold-rgb),.6); outline-offset: 2px; } /* ===== Fahrerermittlung: anklickbare Ergebniskarten ===== */ .lk-karte { padding: 12px 14px; margin-bottom: 8px; } .lk-karte.klickbar { cursor: pointer; transition: border-color .12s, background .12s; } .lk-karte.klickbar:hover { border-color: rgba(var(--gold-rgb),.55); background: rgba(var(--gold-rgb),.06); } .lk-nimm { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--gold, var(--gold)); white-space: nowrap; opacity: .8; } .lk-karte.klickbar:hover .lk-nimm { opacity: 1; } /* Zweites Fenster über dem ersten (Ermittlung aus dem Strafenformular) */ #mLookup { z-index: 1200; } /* ===== Filterleiste ===== */ .filterbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 14px; } .filter-lbl { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute, var(--mute)); margin-right: 4px; } .filterbar button { padding: 6px 11px; font-size: 12.5px; cursor: pointer; background: transparent; color: var(--mute, var(--mute)); border: 1px solid var(--line, rgba(var(--tint),.1)); border-radius: 999px; transition: color .12s, border-color .12s, background .12s; } .filterbar button:hover { color: var(--text, var(--bone)); border-color: rgba(var(--tint),.22); } .filterbar button.on { color: var(--gold, var(--gold)); border-color: rgba(var(--gold-rgb),.55); background: rgba(var(--gold-rgb),.10); } .filterbar button.leer { opacity: .4; } .filterbar button.leer:hover { opacity: .7; } .filter-clear { color: var(--warn, #D8A33A) !important; border-style: dashed !important; } /* ===================================================================== Listen auf schmalen Bildschirmen Aus jeder Tabellenzeile wird eine kompakte Karte. Welche Rolle eine Zelle dabei spielt, steht als Klasse an der Zelle: .c-main Überschrift der Karte (Name, Kennzeichen) .c-side rechts außen, erste Zeile (Status, Betrag) .c-meta Nebenangaben, fließen in eine gemeinsame Zeile .c-sub eigene Zeile darunter, gedämpft (Adresse) .c-off auf schmalen Bildschirmen weggelassen ===================================================================== */ @media (max-width: 900px) { .tbl tbody tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--line-soft); } .tbl td { display: block; padding: 0; border: 0; text-align: left !important; } .tbl td::before { display: none; } .tbl td.c-pick { order: 0; flex: none; } .tbl td.c-main { order: 1; flex: 1 1 auto; min-width: 0; font-size: var(--t-base); font-weight: 600; } .tbl td.c-side { order: 2; flex: none; margin-left: auto; } /* Zwei rechtsbündige Zellen würden sich gegenseitig aus dem Bild schieben — nur die erste rückt an den Rand. */ .tbl td.c-side ~ td.c-side { margin-left: 0; } /* Datum und Kennzeichen teilen sich die erste Zeile */ .tbl td.c-main + td.c-main { flex: 0 1 auto; font-weight: 600; } .tbl td.c-meta { order: 3; flex: none; font-size: var(--t-sm); color: var(--mute); } .tbl td.c-meta + .c-meta::before { content: '·'; margin-right: var(--s3); color: var(--line); display: inline; } .tbl td.c-sub { order: 4; flex: 1 1 100%; font-size: var(--t-sm); color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tbl td.c-off { display: none; } /* Zeilen ohne Rollenangabe verhalten sich wie bisher */ .tbl tbody tr:not(:has(.c-main)) { display: block; padding: var(--s4) 0; } .tbl tbody tr:not(:has(.c-main)) td { display: flex; justify-content: space-between; gap: var(--s4); padding: var(--s2) 0; } .tbl tbody tr:not(:has(.c-main)) td::before { content: attr(data-l); display: block; font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); flex: none; font-family: ui-monospace, monospace; } } /* Sperrhinweis neben der Bewertung */ .susp-wrap { display: block; margin-top: var(--s1); } @media (max-width: 900px) { .susp-wrap { display: inline-block; margin: 0 0 0 var(--s2); } } /* Nebenangabe direkt hinter dem Haupttext (Personalnummer, Modell) */ .nr { margin-left: var(--s2); font-weight: 400; color: var(--mute); font-size: var(--t-sm); } @media (min-width: 901px) { .nr { display: block; margin: 2px 0 0; } } /* ===================================================================== Aufklappbare Einstellungsblöcke Nur was gebraucht wird, ist offen. Der Rest bleibt greifbar, ohne die Seite zu füllen. ===================================================================== */ .panel.setting { padding: 0; margin-bottom: var(--s3); } .panel.setting > summary { list-style: none; cursor: pointer; padding: var(--s4) var(--s5); display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; transition: background .15s; } .panel.setting > summary::-webkit-details-marker { display: none; } .panel.setting > summary::before { content: ''; flex: none; width: 7px; height: 7px; border-right: 1.5px solid var(--mute); border-bottom: 1.5px solid var(--mute); transform: rotate(-45deg); transition: transform .18s, border-color .18s; margin-right: var(--s1); position: relative; top: -2px; } .panel.setting[open] > summary::before { transform: rotate(45deg); border-color: var(--gold); } .panel.setting > summary:hover { background: rgba(var(--tint),.02); } .panel.setting > summary:hover::before { border-color: var(--bone); } .panel.setting .s-title { font-family: inherit; font-weight: 700; font-size: var(--t-lg); letter-spacing: -.01em; } .panel.setting .s-sub { color: var(--mute); font-size: var(--t-sm); } .panel.setting[open] > summary { border-bottom: 1px solid var(--line-soft); } .panel.setting .s-body { padding: var(--s5); } .panel.setting .s-body > .sub:first-child { margin-top: 0; } /* --- Einstellungen: Gruppen mit Zwischenüberschrift -------------------- Sechzehn Blöcke untereinander sind eine Wand. Die Gruppen geben der Seite eine Gliederung, ohne dass etwas versteckt wird. */ .set-group { margin-bottom: var(--s7); } .set-group-head { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; padding: 0 0 var(--s2); margin-bottom: var(--s4); border-bottom: 1px solid var(--line-soft); } .set-group-head h2 { margin: 0; font-size: var(--t-xl); letter-spacing: -.02em; color:var(--gold-ink); } .set-group-head span { color: var(--mute); font-size: var(--t-sm); } .set-group.hide { display: none; } @media (max-width: 900px) { .set-group { margin-bottom: var(--s6); } .set-group-head h2 { font-size: var(--t-lg); } } @media (max-width: 900px) { .panel.setting > summary { padding: var(--s3) var(--s4); } .panel.setting .s-body { padding: var(--s4); } .panel.setting .s-title { font-size: var(--t-base); } .panel.setting .s-sub { flex: 1 1 100%; } } /* ===================================================================== Ruhigerer Gesamteindruck Weniger gefüllte Flächen, weniger konkurrierende Farbe. Kennzeichnungen tragen nur dort Farbe, wo sie eine Handlung auslösen sollen. ===================================================================== */ /* Kennzeichnungen: Umriss statt Füllung, kein Versalsatz */ .tag { font-size: var(--t-xs); letter-spacing: .02em; text-transform: none; border-radius: var(--r-sm); padding: 3px 8px; font-family: inherit; font-weight: 600; background: transparent; } .tag.ok { color: var(--ok); border-color: rgba(63,191,127,.30); } .tag.warn { color: var(--warn); border-color: rgba(224,169,59,.34); } .tag.bad { color: var(--bad); border-color: rgba(224,92,92,.34); background: rgba(224,92,92,.07); } .tag.n { color: var(--mute); border-color: var(--line-soft); } /* Knöpfe: kein Anheben beim Überfahren, ruhigere Kanten */ .btn { border-radius: var(--r-md); transition: background .15s, border-color .15s, color .15s; } .btn:hover { transform: none; } .btn-gold { background: var(--gold); color: var(--on-gold); border-color: var(--gold); } .btn-gold:hover { background: var(--gold-2); border-color: var(--gold-2); } /* Eingabefelder und Flächen mit derselben Rundung */ input[type=text], input[type=date], input[type=time], input[type=number], input[type=password], input[type=search], input[type=month], select, textarea { border-radius: var(--r-md); } .panel { border-radius: var(--r-lg); } /* Seitenkopf: klare Rangfolge statt konkurrierender Größen */ .page-head { margin-bottom: var(--s5); align-items: baseline; } .page-head h1 { font-size: var(--t-xl); } .eyebrow { font-size: var(--t-xs); letter-spacing: .14em; } /* Kennzahlenfelder ruhiger */ .money, .stats { gap: var(--s3); } .money > div, .stats > div { border-radius: var(--r-md); } /* Tabellen: mehr Luft, weniger Linien */ .tbl th { font-size: var(--t-xs); letter-spacing: .06em; font-weight: 600; padding-bottom: var(--s2); } .tbl td { padding: var(--s3) var(--s3) var(--s3) 0; } .tbl tbody tr { border-bottom: 1px solid var(--line-soft); } .tbl tbody tr:last-child { border-bottom: 0; } /* Kennzeichen: kleiner und ruhiger */ .plate { border-radius: var(--r-sm); } /* Aufklappbarer Abschnitt im Detailfenster */ .fold { border-top: 1px solid var(--line-soft); margin-top: var(--s4); } .fold > summary { list-style: none; cursor: pointer; padding: var(--s3) 0; display: flex; align-items: baseline; gap: var(--s3); font-family: inherit; font-weight: 700; font-size: var(--t-md); letter-spacing: .01em; } .fold > summary::-webkit-details-marker { display: none; } .fold > summary::before { content: ''; flex: none; width: 6px; height: 6px; border-right: 1.5px solid var(--mute); border-bottom: 1.5px solid var(--mute); transform: rotate(-45deg); transition: transform .18s, border-color .18s; position: relative; top: -2px; } .fold[open] > summary::before { transform: rotate(45deg); border-color: var(--gold); } .fold > summary:hover::before { border-color: var(--bone); } .fold-hint { margin-left: auto; font-family: inherit; font-weight: 400; font-size: var(--t-sm); color: var(--mute); } .fold-body { padding: 0 0 var(--s4); } /* ===================================================================== Entwurf „Flotten-Redesign": ruhiger, dunkler, mehr Überblick Gold trägt nur Primäraktion und aktiven Zustand. Zustände zeigt ein kleiner Punkt statt farbiger Fläche — Rot heißt jetzt handeln, Bernstein bald fällig, sonst neutral. ===================================================================== */ /* ---------- Seitenleiste ---------- */ /* Die Leiste darf scrollen, der Fußbereich klebt am unteren Rand — sonst rutscht „Abmelden" bei vielen Menüpunkten aus dem Sichtfeld und niemand vermutet, dass die Leiste überhaupt scrollbar ist. Die Knöpfe liegen direkt in