/* K&K Deal Desk — Styles (ausgelagert). */ /* ========================================================================== DIE HELLE PALETTE. Direkt darunter steht die dunkle - und zwar EINMAL. ========================================================================== Umgeschaltet wird über `data-theme` am -Element: "light" oder "dark". Gesetzt wird es von `public/darstellung.js`, das als erstes im steht und VOR dem ersten Zeichnen läuft - sonst blitzt bei jedem Seitenaufruf kurz die helle Fassung auf, und ein Weißblitz auf dunklem Bildschirm sieht nach einem Fehler aus. DREI ZUSTÄNDE FÜR DEN MENSCHEN, ZWEI FÜR DEN STIL. Das Skript löst „wie das System" selbst auf und schreibt immer "light" oder "dark" hin. Der Stil braucht die dunkle Palette deshalb nur einmal - stünde hier zusätzlich eine `prefers-color-scheme`-Abfrage, gäbe es jede Farbe doppelt, und beim nächsten neuen Ton würde nur eine der beiden Stellen gepflegt. Übernommen aus K&K COMPASS, wo dasselbe Muster steht. DIE HELLIGKEITEN SIND NICHT UMGEDREHT, sondern gewählt. Ein einfaches Invertieren macht aus einem freundlichen Blau ein giftiges Gelb. Der Grundton bleibt das Navy der Marke, nur dunkler; die Karten liegen darüber, nicht darunter. Die Werte stammen aus K&K COMPASS, wo sie im Betrieb sind. WAS DIE DRUCKANSICHT ANGEHT: `#print-area` setzt seine Farben durchweg selbst (schwarz auf weiß) und rührt diese Palette nicht an. Nur der Grundton käme von hier - der wird in `@media print` festgehalten. */ :root{ /* Das dunkle Beiwerk: Kopfzeile, Reiterleiste, Anmeldung, Begrüßungsband. Es ist in BEIDEN Fassungen dunkel - deshalb eine eigene Marke und nicht --ink. Genau daran wäre das Umschalten sonst gescheitert: --ink diente als Schrift UND als Grund der Kopfzeile. Im Dunkeln muss die Schrift hell werden und die Kopfzeile dunkel bleiben; mit einer Marke für beides geht das nicht. */ --chrom:#14202E; --ink:#14202E;--ink-soft:#33475B; /* Am 04.09.2026 von #6B7A8A abgedunkelt. Beim Nachmessen der Kontraste fuer die dunkle Fassung fiel auf, dass der Ton in der HELLEN Fassung unter 4,5:1 lag - auf Weiss 4,40, auf dem Grund der Seite 3,78, auf einem gesperrten Feld 3,89. Das war vorher schon so und hat mit der Umstellung nichts zu tun; gefunden hat es erst das Nachmessen. Mit #5C6979 sind es 5,60 / 4,81 / 4,95. Betrifft die kleinen Beschriftungen unter den Kennzahlen - genau dort zaehlt es. */ --muted:#5C6979; --text:#14202E; /* Schrift in Eingabefeldern und Tabellen */ --paper:#EBEEF2; /* der Grund der Seite */ --surface:#FFFFFF; /* Karten liegen DARÜBER */ --surface-2:#F4F6FB; --feld:#FFFFFF; /* Eingabefelder und Knöpfe innerhalb einer Karte */ --flaeche-sanft:#F7F9FB; --locked:#EEF1F7; /* gesperrtes Feld */ --line:#DBE1E8;--line-soft:#E9EDF1;--line-strong:#C9D2DC; --auf-farbe:#FFFFFF; /* Schrift auf farbiger Füllung */ --accent:#0E7A5A;--accent-deep:#0A5C44;--accent-wash:#E7F2EE;--accent-line:#B7DDCE; --amber:#B87514;--amber-wash:#FBF1DF;--amber-line:#F0D38A;--amber-text:#8A5A00;--amber-strong:#B26A00; --danger:#BC3B2E;--danger-wash:#F8E7E4;--danger-line:#F0C4BD;--danger-text:#A23227; --danger-strong:#C0392B;--danger-press:#A93226; --primary:#254ca6;--primary-press:#1d3e85;--primary-wash:#EAF0FA;--primary-line:#C3D3EE; --primary-soft:#EAF0FA;--brand:#254ca6; /* HAUSFARBE VON K&K CONNECT: #e8883a. Sie steht im Steckbrief dieses Projekts (kk-werkzeug.json, Feld `farbe`), und K&K COMPASS faerbt den Werkzeugnamen daraus. Jedes der drei Werkzeuge hat eine eigene: CONNECT #e8883a, FLOWRIZON #254ca6, WORKNEX #0E7A5A. ZWEI WERTE, WEIL ES ZWEI GRUENDE GIBT — nicht zwei Schemata: --marke-auf-chrom gilt in der Kopfleiste. Die liegt auf `--chrom` und ist in BEIDEN Schemata dunkel (#14202E hell / #0B1120 dunkel); gemessen 6,28:1 und 7,19:1. Dort bleibt die angemeldete Farbe unveraendert. --marke gilt dort, wo die Marke auf einer Karte steht (Anmeldekarte). Deren Grund ist im hellen Schema weiss, und dort erreicht #e8883a nur 2,62:1 — zu wenig fuer Schrift. Der Wert unten ist derselbe Farbton (27 Grad) mit derselben Saettigung (79 %), nur die Helligkeit von 57 auf 40 Prozent gesenkt: 4,54:1 auf Weiss. */ --marke:#b75e15;--marke-auf-chrom:#e8883a; --neutral-wash:#ECEFF3;--neutral-text:#5C6979;--neutral-line:#D5DCE6; /* Text war #71809A: 3,46 auf dem Badge */ --overlay:rgba(30,42,74,.45);--overlay-stark:rgba(30,42,74,.55); --r:12px;--r-sm:8px; --sh-fein:0 1px 2px rgba(20,32,46,.05); --sh-karte:0 6px 18px rgba(37,76,166,.14); --sh-pop:0 12px 32px rgba(20,32,46,.24); --sh-lg:0 18px 50px rgba(20,32,46,.35); --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --sans:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,sans-serif; } :root[data-theme="dark"]{ /* Kopfzeile und Reiter werden dunkler als die Seite, nicht heller: sie sollen weiter als Rahmen wirken und nicht als Karte. */ --chrom:#0B1120; --ink:#E6EBF5; /* nicht reinweiß, das flimmert */ --ink-soft:#B7C2D6;--muted:#98A5BC;--text:#E6EBF5; --paper:#101827; --surface:#182234; /* Karten liegen DARÜBER, also heller */ --surface-2:#1E2A3E; --feld:#1E2A3E; --flaeche-sanft:#1E2A3E; --locked:#151E2E; --line:#2B3852;--line-soft:#232F45;--line-strong:#3A4763; /* Auf den jetzt hellen Füllfarben trägt ein dunkler Ton. */ --auf-farbe:#0B1120; /* Die Farben müssen HELLER werden, sonst verschwinden sie auf dunklem Grund. Die zarten Töne („wash") kehren sich um: aus einem hellen Hauch wird ein dunkler. */ --accent:#46C48B;--accent-deep:#7FE0B4;--accent-wash:#12301F;--accent-line:#1D4834; --amber:#E0B15C;--amber-wash:#2C2413;--amber-line:#4A3C1C;--amber-text:#EFD6A3;--amber-strong:#E0B15C; --danger:#FF8A80;--danger-wash:#2E1717;--danger-line:#5A2A26;--danger-text:#FFB4AC; --danger-strong:#FF8A80;--danger-press:#FFB4AC; --primary:#5B8CFF;--primary-press:#7BA3FF;--primary-wash:#1B2A4D;--primary-line:#2E4680; --primary-soft:#1B2A4D;--brand:#5B8CFF; /* Auf der dunklen Karte traegt die Marke ihre angemeldete Farbe: 6,08:1 auf #182234. */ --marke:#e8883a; --neutral-wash:#232F45;--neutral-text:#98A5BC;--neutral-line:#3A4763; --overlay:rgba(5,9,18,.62);--overlay-stark:rgba(5,9,18,.72); /* Schatten im Dunkeln aus Schwarz, nicht aus dem Navy - sonst sind sie nicht zu sehen. */ --sh-fein:0 1px 2px rgba(0,0,0,.40); --sh-karte:0 6px 18px rgba(0,0,0,.45); --sh-pop:0 12px 32px rgba(0,0,0,.55); --sh-lg:0 18px 50px rgba(0,0,0,.60); /* Bildlaufleisten, Auswahllisten und Datumsfelder des Browsers mitziehen - sonst steht eine weiße Leiste an einer dunklen Seite. */ color-scheme:dark; } /* hidden muss hidden bedeuten. Der Browser bringt dafuer nur `[hidden]{display:none}` mit - eine Regel ohne Klasse. Jede eigene Regel wie `.agenda-banner{display:flex}` sticht sie aus, und das Element bleibt trotz gesetztem `hidden` sichtbar. Am 04.09.2026 traf das fuenf Stellen; am auffaelligsten den Hinweisstreifen auf der Startseite, der einmal erschienen nie wieder verschwand und dann eine veraltete Zahl zeigte. Auch `btn_mailimport` war betroffen - ein Menueeintrag, der nur mit Berechtigung erscheinen soll. Deshalb hier einmal zentral, statt fuenfmal einzeln. */ [hidden]{display:none !important;} *{box-sizing:border-box;} /* Formularelemente erben die Schrift (sonst Browser-Default Arial). Explizite --sans/--mono-Regeln je Element bleiben wirksam (höhere Spezifität). */ button,input,select,textarea{font-family:inherit;} html,body{margin:0;padding:0;} /* Scrollbalken-Platz immer reservieren → Kopf/Inhalt haben auf allen Seiten dieselbe Breite */ html{scrollbar-gutter:stable;} body{font-family:var(--sans);background:var(--paper);color:var(--ink);font-size:15px;line-height:1.5; font-feature-settings:"tnum" 1,"lnum" 1;-webkit-font-smoothing:antialiased;} .num{font-family:var(--mono);font-feature-settings:"tnum" 1;} header{background:var(--chrom);color:#fff;padding:0 clamp(16px,4vw,40px);} .head-inner{max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:space-between; gap:16px;min-height:64px;flex-wrap:nowrap;padding:12px 0;} .wordmark{display:flex;align-items:center;gap:13px;flex:0 0 auto;} .wordmark .mark{font-family:var(--mono);font-weight:600;letter-spacing:.18em;font-size:15px;text-transform:uppercase;} /* Titel neben dem 34px-Icon: kräftig und gut lesbar (Verhältnis Icon:Text ≈ 1,7). */ .wordmark .sub{color:#EAF0F6;font-size:20px;font-weight:600;letter-spacing:.01em;} .wordmark .wm-text{display:flex;flex-direction:column;justify-content:center;line-height:1.1;} .wordmark .wm-claim{color:#aebfd4;font-size:11px;font-style:italic;font-weight:500;letter-spacing:.01em;margin-top:1px;} /* „CONNECT" in der eigenen Hausfarbe. KORRIGIERT AM 07.09.2026: Hier stand „in der Marken-Orange des Planungstools (FLOWRIZON)". Das war verdreht — #e8883a ist die Hausfarbe VON CONNECT (siehe kk-werkzeug.json hier), und FLOWRIZON hat Blau (#254ca6). Umgekehrt trug FLOWRIZON in seiner eigenen Wortmarke bis heute dieses Orange. Beide Werkzeuge haben ihre Farben also gegenseitig vertauscht dokumentiert und verwendet; wer beide offen hatte, sah zweimal dieselbe. In FLOWRIZON ist das am 07.09.2026 ebenfalls geradegezogen worden. Zwei Regeln, weil die Marke auf zwei verschiedenen Gruenden steht — Begruendung bei den Variablen oben. */ .marke-connect{color:var(--marke);} header .marke-connect{color:var(--marke-auf-chrom);} .gate{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:7px 12px;} .gate label{font-size:12px;color:#9FB0C0;letter-spacing:.03em;text-transform:uppercase;} .gate input{width:62px;background:transparent;border:none;border-bottom:1px solid rgba(255,255,255,.35); color:#fff;font-family:var(--mono);font-size:15px;text-align:right;padding:2px 4px;} .gate input:focus{outline:none;border-bottom-color:#fff;} .gate .pct{color:#9FB0C0;font-family:var(--mono);} /* Kopfzeile (Header + Reiter) beim Scrollen fixiert. */ .tabwrap{background:var(--chrom);position:sticky;top:0;z-index:900;} .tabs{max-width:1180px;margin:0 auto;display:flex;gap:2px;padding:0 clamp(16px,4vw,40px);} .tab{appearance:none;border:none;background:transparent;cursor:pointer;font-family:var(--sans); font-size:14px;font-weight:500;color:#9FB0C0;padding:12px 18px;border-radius:8px 8px 0 0; letter-spacing:.01em;transition:background .15s,color .15s;} .tab:hover{color:#fff;} .tab[aria-selected="true"]{background:var(--paper);color:var(--ink);font-weight:600;} .tab .idx{font-family:var(--mono);font-size:11px;color:var(--accent);margin-right:8px;} main{max-width:1180px;margin:0 auto;padding:clamp(20px,4vw,36px) clamp(16px,4vw,40px) 64px;} .grid{display:grid;grid-template-columns:1fr 388px;gap:28px;align-items:start;} .panel[hidden]{display:none;} .card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px 22px;margin-bottom:18px;} .eyebrow{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-deep); margin:0 0 14px;display:flex;align-items:center;gap:10px;} .eyebrow span.tag{font-family:var(--mono);color:var(--muted);letter-spacing:.05em;} .eyebrow::after{content:"";height:1px;background:var(--line-soft);flex:1;} .field{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:7px 0;} .field + .field{border-top:1px solid var(--line-soft);} .field label{font-size:14px;color:var(--ink-soft);flex:1;} .field label small{display:block;color:var(--muted);font-size:12px;font-weight:400;margin-top:1px;} .inputbox{display:flex;align-items:center;gap:6px;flex-shrink:0;} .inputbox .unit{color:var(--muted);font-family:var(--mono);font-size:13px;min-width:14px;text-align:left;} input.val{width:104px;text-align:right;font-family:var(--mono);font-size:15px;color:var(--ink); background:var(--feld);border:1px solid var(--line);border-radius:7px;padding:7px 10px; transition:border-color .15s,box-shadow .15s;} input.val.sm{width:78px;} input.val.auto{background:var(--paper);color:var(--muted);border-style:dashed;} .builder{margin:-2px 0 14px;padding:12px 14px 10px;background:var(--paper);border:1px dashed var(--line);border-radius:10px;} .builder .field{margin-bottom:10px;} .builder .field:last-of-type{margin-bottom:0;} .builder-sum{margin-top:10px;padding-top:9px;border-top:1px solid var(--line);font:500 12.5px/1.55 var(--sans);color:var(--ink);} .builder-sum span{color:var(--muted);font-weight:400;} .builder-sum b{color:var(--accent-deep);} input.val:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash);} .field.dual .inputbox + .inputbox{margin-left:8px;} .footnote{font-size:12px;color:var(--muted);line-height:1.55;margin:4px 2px 0;} .ministats{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px dashed var(--line);} .ministat .k{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);} .ministat .v{font-family:var(--mono);font-size:16px;font-weight:500;margin-top:2px;} .seg{display:inline-flex;background:var(--paper);border-radius:8px;padding:3px;gap:3px;} .seg button{appearance:none;border:none;background:transparent;cursor:pointer;font-family:var(--sans); font-size:13px;font-weight:500;color:var(--muted);padding:5px 12px;border-radius:6px;} .seg button[aria-pressed="true"]{background:var(--feld);color:var(--ink);box-shadow:0 1px 2px rgba(20,32,46,.12);} .result{position:sticky;top:92px;} /* unter der fixierten Kopfzeile */ .result-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;} .verdict{padding:16px 20px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line);transition:background .2s;} .verdict .dot{width:12px;height:12px;border-radius:50%;flex-shrink:0;} .verdict .txt{font-weight:600;font-size:14px;line-height:1.3;} .verdict .txt small{display:block;font-weight:400;font-size:12px;color:var(--muted);margin-top:1px;} .v-go{background:var(--accent-wash);}.v-go .dot{background:var(--accent);}.v-go .txt{color:var(--accent-deep);} .v-warn{background:var(--amber-wash);}.v-warn .dot{background:var(--amber);}.v-warn .txt{color:var(--amber);} .v-stop{background:var(--danger-wash);}.v-stop .dot{background:var(--danger);}.v-stop .txt{color:var(--danger);} .hero{padding:20px 20px 16px;} .hero-label{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);} .hero-figs{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:8px;} .hero-main .big{font-family:var(--mono);font-size:32px;font-weight:600;letter-spacing:-.02em;color:var(--ink);line-height:1;} .hero-main .cap{font-size:12px;color:var(--muted);margin-top:6px;} .hero-marge{text-align:right;} .hero-marge .big{font-family:var(--mono);font-size:26px;font-weight:600;line-height:1;} .hero-marge .cap{font-size:12px;color:var(--muted);margin-top:6px;} .market{background:var(--flaeche-sanft);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 20px;} .market-row{display:flex;align-items:center;justify-content:space-between;gap:12px;} .market-row label{font-size:13px;font-weight:600;color:var(--ink);} .market-row label small{display:block;font-weight:400;color:var(--muted);font-size:12px;} /* Zweite Zeile im Marktfeld: zwei Auswahlfelder statt eines Eingabefelds. Auf schmalen Fenstern rutschen sie unter das Etikett. */ .market-row.market-kd{margin-top:10px;flex-wrap:wrap;} .za-kd-pick{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;} .za-kd-pick select{padding:7px 9px;border:1px solid var(--line-strong);border-radius:var(--r-sm);font-size:12.5px;color:var(--text);background:var(--surface);max-width:190px;} .za-kd-pick select:disabled{opacity:.55;} .reset{appearance:none;background:none;border:none;cursor:pointer;color:var(--accent);font-family:var(--sans); font-size:12px;padding:2px 0;margin-top:6px;} .reset:hover{text-decoration:underline;} input.market-in{width:118px;text-align:right;font-family:var(--mono);font-size:17px;font-weight:500;color:var(--ink); background:var(--feld);border:1px solid var(--accent);border-radius:8px;padding:8px 11px;} input.market-in:focus{outline:none;box-shadow:0 0 0 3px var(--accent-wash);} .gauge{height:8px;background:var(--line-soft);border-radius:4px;margin:16px 20px 4px;position:relative;overflow:hidden;} .gauge .fill{height:100%;border-radius:4px;transition:width .25s,background .25s;} .gauge-mark{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink);opacity:.55;} .gauge-legend{display:flex;justify-content:space-between;padding:2px 20px 16px;font-size:11px;color:var(--muted);font-family:var(--mono);} .breakdown{border-top:1px solid var(--line);padding:14px 20px 18px;} .brow{display:flex;justify-content:space-between;gap:12px;padding:5px 0;font-size:13px;} .brow .k{color:var(--ink-soft);} .brow .v{font-family:var(--mono);color:var(--ink);} .brow.plus .v{color:var(--ink-soft);} .brow.minus .v{color:var(--danger);} .brow.sum{border-top:1px solid var(--line-soft);margin-top:4px;padding-top:9px;font-weight:600;} .brow.sum .k{color:var(--ink);} .brow.grand{border-top:2px solid var(--ink);margin-top:4px;padding-top:10px;} .brow.grand .k{font-weight:700;} .brow.grand .v{font-weight:600;font-size:15px;} .secondary{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-top:1px solid var(--line);} .sec{background:var(--surface);padding:13px 20px;} .sec .k{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);} .sec .v{font-family:var(--mono);font-size:18px;font-weight:500;margin-top:3px;} .benchblock{border-top:1px solid var(--line);padding:13px 20px 14px;} .bench-h{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;} .bench-row{display:flex;justify-content:space-between;gap:12px;padding:4px 0;align-items:baseline;font-size:13px;} .bench-row .k{color:var(--ink-soft);flex-shrink:0;} .bench-row .rv{text-align:right;} .bench-row .rv b{font-family:var(--mono);font-weight:500;color:var(--ink);} .bench-row .rv .tag{display:block;font-size:11px;margin-top:1px;} .bench-row.sub{border-top:1px dashed var(--line);margin-top:3px;padding-top:7px;} .bench-row.sub .k{font-weight:600;color:var(--ink);} .bench-row.tot{border-top:1px solid var(--ink-soft);margin-top:3px;padding-top:8px;} .bench-row.tot .k{font-weight:700;color:var(--ink);} .bench-row.tot .rv b{font-weight:700;} .bench-sep{height:0;border-top:1px solid var(--line);margin:11px 0 4px;} .ztable{border-top:1px solid var(--line);padding:12px 20px 16px;} .ztable .zhead{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;} .zrow{display:flex;justify-content:space-between;font-size:13px;padding:3px 0;} .zrow .v{font-family:var(--mono);} /* Zuschlagstabelle mit drei Wertspalten (Preis, Kosten, DB). Eigene Klasse, damit die einspaltigen Zeilen (Equal Pay, Zielmarge) unveraendert bleiben. */ .zrow.z4{display:grid;grid-template-columns:1fr auto auto auto;gap:12px;} .zrow.z4 .v{min-width:64px;text-align:right;} .zrow.zkopf{display:grid;grid-template-columns:1fr auto auto auto;gap:12px; font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted); border-bottom:1px solid var(--line);padding-bottom:4px;margin-bottom:2px;} .zrow.zkopf .v{min-width:64px;text-align:right;font-family:inherit;} .zrow.zmisch{border-top:1px solid var(--line);margin-top:4px;padding-top:6px;font-weight:600;} /* Zuschlag und Anteil nebeneinander: Sie gehoeren zusammen und sollen nicht als zwei unabhaengige Felder untereinander stehen. */ .za-zpaar{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center; margin-top:10px;} .za-zpaar label{font-size:13px;} .za-zpaar .unit{white-space:nowrap;} .scenario-note{font-size:12px;color:var(--muted);margin-top:10px;line-height:1.5;} .ptable{display:grid;grid-template-columns:1fr 52px 78px 78px;gap:9px 9px;align-items:center;} .ptable .phdr{font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);text-align:right;padding-bottom:3px;} .ptable .pname{font-size:13.5px;color:var(--ink-soft);} .ptable .pname small{display:block;color:var(--muted);font-size:11px;} .ptable input.val{width:100%;text-align:right;font-family:var(--mono);font-size:13.5px;padding:6px 7px;} .comparechip{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--flaeche-sanft); border-top:1px solid var(--line);padding:11px 20px;font-size:13px;} .comparechip .k{color:var(--ink-soft);} .comparechip .v{font-family:var(--mono);font-weight:500;} .grouptot{display:flex;justify-content:space-between;align-items:center;margin-top:6px;padding-top:12px; border-top:1px solid var(--line);font-weight:600;font-size:14px;color:var(--ink);} .grouptot .num{font-family:var(--mono);} details.phase{border:1px solid var(--line);border-radius:9px;margin-bottom:8px;background:var(--feld);} details.phase[open]{border-color:var(--accent);} details.phase summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:11px 13px;} details.phase summary::-webkit-details-marker{display:none;} .ph-chev{flex-shrink:0;transition:transform .15s;color:var(--muted);} details.phase[open] .ph-chev{transform:rotate(90deg);} .ph-name{flex:1;font-size:14px;font-weight:600;color:var(--ink);} .ph-name small{display:block;font-weight:400;font-size:11px;color:var(--muted);} .ph-tot{font-family:var(--mono);font-size:12px;color:var(--muted);text-align:right;white-space:nowrap;} .ph-tot b{color:var(--ink);font-weight:600;} .li-table{border-top:1px solid var(--line-soft);padding:8px 13px 12px;} .li-rate{display:flex;align-items:center;justify-content:flex-end;gap:8px;font-size:11px;color:var(--muted); text-transform:uppercase;letter-spacing:.04em;font-weight:600;padding:2px 0 7px;} .li-rate input{width:54px;text-align:right;font-family:var(--mono);font-size:12.5px;color:var(--ink); background:var(--feld);border:1px solid var(--line);border-radius:5px;padding:4px 6px;} .li-rate input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-wash);} .li-hdr,.li-row{display:grid;grid-template-columns:1fr 40px 44px 56px 56px;gap:7px;align-items:center;} .li-hdr{padding:4px 0 5px;font-size:10px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);} .li-hdr span:nth-child(n+2){text-align:center;} .li-row{padding:3px 0;} .li-row .li-name{font-size:12px;color:var(--ink-soft);line-height:1.25;} .li-row input.val{width:100%;text-align:right;font-family:var(--mono);font-size:12px;padding:5px 5px;} .li-row input.val.auto{background:var(--paper);color:var(--muted);border-style:dashed;} .li-tog{appearance:none;border:1px solid var(--line);background:var(--feld);border-radius:5px;cursor:pointer; font-family:var(--sans);font-size:10px;font-weight:600;color:var(--muted);padding:5px 0;width:100%;letter-spacing:.02em;} .li-tog[data-mode="auto"]{border-color:var(--accent);color:var(--accent-deep);background:var(--accent-wash);} .head-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;flex:1 1 auto;min-width:0;} /* App-Icon oben links, als erstes Element der Wortmarke (vor dem K&K-Logo). */ .app-mark{height:52px;width:52px;border-radius:11px;display:block;flex:0 0 auto;box-shadow:0 1px 5px rgba(0,0,0,.30);} /* Globale Suche im Header */ .gsearch{position:relative;flex:0 1 220px;min-width:140px;max-width:240px;} .gsearch input{width:100%;padding:8px 12px;border:1px solid rgba(255,255,255,.18);border-radius:8px;background:rgba(255,255,255,.10);color:#EAF0F6;font-size:13px;font-family:inherit;} .gsearch input::placeholder{color:#9FB0C0;} .gsearch input:focus{outline:none;border-color:var(--primary);background:rgba(255,255,255,.16);} .gsearch-panel{position:absolute;top:calc(100% + 6px);left:0;width:min(420px,90vw);max-height:70vh;overflow:auto;background:var(--surface);border:1px solid var(--line-strong);border-radius:10px;box-shadow:0 14px 40px rgba(20,32,46,.28);z-index:940;padding:6px;} .gs-group-t{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:8px 10px 3px;} .gs-item{display:block;width:100%;text-align:left;background:none;border:0;border-radius:7px;padding:7px 10px;cursor:pointer;color:var(--ink);} .gs-item:hover,.gs-item.gs-active{background:var(--primary-wash);} .gs-item b{font-size:13px;font-weight:600;display:block;} .gs-item span{font-size:11.5px;color:var(--muted);} .gs-empty{padding:12px 10px;color:var(--muted);font-size:12.5px;} .headbtn{appearance:none;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16); border-radius:8px;color:#fff;font-family:var(--sans);font-size:13px;font-weight:500;cursor:pointer;padding:9px 12px;} .headbtn:hover{background:rgba(255,255,255,.14);} /* Knopf mit nur einem Zeichen (Darstellung umschalten): quadratisch, damit er neben den beschrifteten Knoepfen nicht zusammensackt. Das Zeichen ist gross genug, um es auch als Mondsichel noch zu erkennen. */ .headbtn-zeichen{min-width:38px;padding:8px 10px;font-size:15px;line-height:1;text-align:center;} .headin{appearance:none;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:8px; color:#fff;font-family:var(--sans);font-size:13px;padding:9px 12px;min-width:170px;} .headin::placeholder{color:rgba(255,255,255,.45);} .headin:focus{outline:none;border-color:var(--accent);background:rgba(255,255,255,.12);} .save-status{font-family:var(--sans);font-size:12px;color:rgba(255,255,255,.6);min-width:60px;} .save-status.ok{color:var(--accent);} .headsel{appearance:none;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:8px; color:#fff;font-family:var(--sans);font-size:13px;padding:9px 12px;max-width:180px;cursor:pointer;} .headsel:focus{outline:none;border-color:var(--accent);} .headsel option{color:var(--ink);} /* Header-Dropdown-Menüs (statt vieler Einzel-Buttons) */ .hmenu{position:relative;display:inline-block;} .hmenu-toggle::after{content:" \25BE";opacity:.75;font-size:11px;} .hmenu-panel{position:absolute;top:calc(100% + 6px);left:0;min-width:236px;background:var(--surface);border:1px solid var(--line-strong);border-radius:10px;box-shadow:0 12px 34px rgba(20,32,46,.24);padding:6px;display:none;z-index:1200;} .hmenu-panel.hmenu-right{right:0;left:auto;} .hmenu.open .hmenu-panel{display:block;} .hmenu-item{display:block;width:100%;text-align:left;background:none;border:0;border-radius:7px;padding:9px 12px;font-family:var(--sans);font-size:13px;color:var(--ink);cursor:pointer;white-space:nowrap;} .hmenu-item:hover{background:var(--primary-wash);color:var(--primary-press);} .hmenu-item.hmenu-danger:hover{background:var(--danger-wash);color:var(--danger);} .hmenu-sep{height:1px;background:var(--line);margin:5px 6px;} .headbtn-primary{background:var(--primary);border-color:var(--primary);color:var(--auf-farbe);} .headbtn-primary:hover{background:var(--primary-press);} /* Tablet / schmale Bildschirme */ @media (max-width:900px){ .grid{grid-template-columns:1fr;gap:18px;} main{padding:16px 14px 48px;} .head-inner{gap:10px 12px;} .headin{min-width:120px;flex:1 1 140px;} .headsel{max-width:150px;} .hmenu-panel{min-width:210px;} .of-grid,.pa-fields{grid-template-columns:1fr;} .server-card{width:min(94vw,560px);} .li-table,.ptable{overflow-x:auto;} .cv-price{font-size:clamp(40px,11vw,64px);} } /* ---- Handy (<=520px): Kopfleiste kompakt stapeln ---- */ @media (max-width:520px){ header{padding:0 12px;} .head-inner{gap:8px 10px;padding:10px 0;min-height:0;flex-wrap:wrap;} .wordmark{gap:9px;flex:1 1 100%;} .wordmark .sub{font-size:16px;} .wordmark .wm-claim{font-size:9.5px;} .app-mark{width:42px;height:42px;} .head-actions{gap:8px;width:100%;} .gsearch{flex:1 1 100%;max-width:none;min-width:0;order:-1;} /* Suche in eigene Zeile, ganz oben */ .gate{flex:1 1 auto;} .headsel,.headin{flex:1 1 100%;max-width:none;min-width:0;} .headbtn{padding:7px 11px;font-size:13px;} .headbtn-primary{flex:1 1 100%;} /* „Kundenansicht" volle Breite */ .hmenu{flex:1 1 auto;} .hmenu-toggle{width:100%;} .hmenu-panel{max-width:calc(100vw - 24px);} #menu-user{flex:1 1 100%;} .server-card{width:96vw;max-height:92vh;padding:16px 14px;} .db-kpis{grid-template-columns:1fr 1fr;gap:8px;} .of-actions{flex-wrap:wrap;} .adm-table{font-size:12px;} .adm-table th,.adm-table td{padding:6px 6px;} /* Kundenansicht: Kopf-Aktionsleiste umbrechen statt überlaufen */ #customer-view .cv-top{flex-wrap:wrap;gap:10px 12px;padding:14px 16px;} #customer-view .cv-actions{flex:1 1 100%;justify-content:flex-end;flex-wrap:wrap;} } .pf-toolbar{display:flex;justify-content:flex-end;margin:-4px 0 12px;} .toolbtn{appearance:none;background:var(--feld);border:1px solid var(--line);border-radius:7px;cursor:pointer; font-family:var(--sans);font-size:13px;font-weight:500;color:var(--ink-soft);padding:7px 13px;} .toolbtn:hover{border-color:var(--accent);color:var(--accent-deep);} /* ---- Druck / PDF ---- */ #print-area{display:none;} #print-area .pr-head{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:2px solid #14202E;padding-bottom:10px;margin-bottom:18px;} #print-area .pr-brand{font-family:var(--mono);font-weight:600;letter-spacing:.12em;font-size:18px;color:#14202E;} #print-area .pr-meta{text-align:right;font-size:12px;color:#6B7A8A;line-height:1.5;} #print-area .pr-title{font-size:22px;margin:0 0 4px;color:#14202E;} #print-area .pr-sub{color:#6B7A8A;margin-bottom:8px;font-size:14px;} #print-area .pr-figs{display:flex;gap:36px;margin:16px 0 20px;} #print-area .pr-fig-l{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#6B7A8A;} #print-area .pr-fig-v{font-family:var(--mono);font-size:26px;font-weight:600;color:#14202E;margin-top:3px;} #print-area .pr-break{border-top:1px solid #DBE1E8;padding-top:8px;max-width:430px;} #print-area .pr-lines{border-collapse:collapse;margin:16px 0;width:100%;max-width:430px;} #print-area .pr-lines td{padding:5px 0;font-size:13px;border-bottom:1px solid #EEF1F4;} #print-area .pr-lines td:last-child{text-align:right;font-family:var(--mono);} #print-area .pr-phases{border-collapse:collapse;width:100%;margin:18px 0;} #print-area .pr-phases th,#print-area .pr-phases td{text-align:left;padding:5px 8px;font-size:12px;border-bottom:1px solid #E9EDF1;color:#14202E;} #print-area .pr-phases th{color:#6B7A8A;font-size:10px;text-transform:uppercase;letter-spacing:.05em;} #print-area .pr-phases th:nth-child(n+2),#print-area .pr-phases td:nth-child(n+2){text-align:right;font-family:var(--mono);} #print-area .pr-foot{margin-top:24px;padding-top:10px;border-top:1px solid #DBE1E8;font-size:11px;color:#6B7A8A;line-height:1.5;} #print-area .pr-phase-h{font-size:14px;margin:18px 0 6px;display:flex;justify-content:space-between;border-bottom:1px solid #14202E;padding-bottom:4px;color:#14202E;break-inside:avoid;} #print-area .pr-phase-h span{font-family:var(--mono);font-weight:600;} #print-area .pr-items{border-collapse:collapse;width:100%;margin-bottom:8px;} #print-area .pr-items th,#print-area .pr-items td{text-align:left;padding:3px 8px;font-size:11.5px;border-bottom:1px solid #EEF1F4;color:#14202E;} #print-area .pr-items th{color:#6B7A8A;font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;} #print-area .pr-items th:nth-child(n+2),#print-area .pr-items td:nth-child(n+2){text-align:right;font-family:var(--mono);} @media print{ /* NUR der Druckbereich wird gedruckt - alles andere ist weg. Bis zum 15.09.2026 stand hier `.tabwrap,main{display:none}`, also eine AUFZAEHLUNG dessen, was verschwinden soll. Die 34 Dialoge liegen aber als Geschwister von
im Rumpf und waren nicht aufgezaehlt: Wer aus einem offenen Dialog heraus druckte, bekam das FORMULAR aufs Papier, und der Brief lag darunter. Genau so ist es passiert. Eine Aufzaehlung muss gepflegt werden und wird beim naechsten Dialog wieder vergessen - deshalb jetzt andersherum: alles aus, eines an. */ body > *{display:none !important;} #print-area{display:block !important;} @page{size:A4 portrait;margin:18mm;} /* Papier ist immer weiss. Wer in der dunklen Fassung arbeitet, soll trotzdem lesbar drucken: Grund und Grundton werden hier festgehalten. Alle uebrigen Farben setzt #print-area ohnehin selbst. */ body{background:#fff;color:#14202E;} #print-area{color:#14202E;} } /* ---- Fahrer international (Reiter 05) ------------------------------------ Der Reiter borgt sich die Aufklapper und die Ergebniskarte von Medical PV; eigen sind nur die dreispaltige Positionszeile (Position, Stunden, Fremdkosten - hier gibt es kein Entweder-Oder wie dort), der Schalter am Zusatzpaket und die beiden kleinen Tabellen im Ergebnis. */ .field.field-breit{flex-direction:column;align-items:stretch;gap:8px;} .field.field-breit label{flex:none;} .seg-wrap{flex-wrap:wrap;} .fh-hdr,.fh-row{display:grid;grid-template-columns:1fr 52px 68px;gap:7px;align-items:center;} .fh-hdr{padding:4px 0 5px;font-size:10px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);} .fh-hdr span:nth-child(n+2){text-align:center;} .fh-row{padding:3px 0;} .fh-row .li-name{font-size:12px;color:var(--ink-soft);line-height:1.25;} .fh-row input.val{width:100%;text-align:right;font-family:var(--mono);font-size:12px;padding:5px 5px;} /* Schalter im Kopf eines Zusatzpakets. Ausgeschaltete Pakete bleiben lesbar, treten aber zurueck - sonst sieht man nicht auf einen Blick, was im Preis ist. */ .zp-tog{appearance:none;border:1px solid var(--line);background:var(--feld);border-radius:5px;cursor:pointer; font-family:var(--sans);font-size:10px;font-weight:600;color:var(--muted);padding:4px 9px;letter-spacing:.03em; margin-left:10px;flex-shrink:0;} .zp-tog[aria-pressed="true"]{border-color:var(--accent);color:var(--accent-deep);background:var(--accent-wash);} details.phase.zp-aus > summary .ph-name, details.phase.zp-aus > summary .ph-tot{opacity:.55;} /* Frei bestuecktes Paket: vier Spalten statt drei (die letzte ist der Entfernen-Knopf), dazu die Knopfzeile darunter. */ .fh-hdr-frei,.fh-row-frei{grid-template-columns:1fr 52px 68px 22px;} .fh-row-frei input.val{width:100%;text-align:right;font-family:var(--mono);font-size:12px;padding:5px 5px;} .fh-row-frei input[data-fk="n"]{text-align:left;font-family:var(--sans);} .fh-row-frei .of-pos-del{border:none;background:none;cursor:pointer;color:var(--muted);font-size:12px;padding:0;line-height:1;} .fh-row-frei .of-pos-del:hover{color:var(--danger);} .frei-name{width:100%;text-align:left;font-family:var(--sans);} .fh-frei-add{display:flex;gap:8px;flex-wrap:wrap;padding:9px 0 2px;} .fh-frei-add .frei-weg{color:var(--danger);} #fh_zpfrei_liste{margin-top:6px;} /* "Naechster Schritt" im Angebotsdialog: ein ruhiger Hinweis ueber den Schaltflaechen, kein Alarm. Er sagt, was jetzt dran ist. */ .of-schritt{margin:14px 0 0;padding:9px 12px;border-left:3px solid var(--primary); background:var(--flaeche-sanft);color:var(--ink-soft);font-size:12.5px;line-height:1.5;border-radius:0 6px 6px 0;} .of-schritt:empty{display:none;} .fh-zp,.fh-staffel{width:100%;border-collapse:collapse;font-size:12.5px;} .fh-zp th,.fh-staffel th{text-align:left;font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase; color:var(--muted);padding:0 0 5px;} .fh-zp td,.fh-staffel td{padding:4px 0;border-top:1px solid var(--line-soft);color:var(--ink-soft);} .fh-zp th:nth-child(n+2),.fh-zp td:nth-child(n+2), .fh-staffel th:nth-child(n+2),.fh-staffel td:nth-child(n+2){text-align:right;font-family:var(--mono);} .fh-zp tr.aus td{color:var(--muted);} .fh-zp tr.sum td{font-weight:600;color:var(--ink);border-top:1px solid var(--line);} .fh-staffel tr.aktiv td{color:var(--ink);font-weight:600;} .builder-sum .warn{color:var(--amber-text,var(--danger));font-weight:600;} @media (max-width:880px){.grid{grid-template-columns:1fr;}.result{position:static;}.tabs{overflow-x:auto;}.tab{white-space:nowrap;}} *:focus-visible{outline:2px solid var(--accent);outline-offset:2px;} @media (prefers-reduced-motion:reduce){*{transition:none!important;}} .warnbox{display:flex;gap:9px;align-items:flex-start;margin-bottom:14px;padding:11px 13px;border-radius:9px;background:var(--danger-wash);border:1px solid var(--danger);color:var(--danger);font:500 12.5px/1.5 var(--sans);} .warnbox.amber{background:var(--amber-wash);border-color:var(--amber);color:var(--amber-text);} .warnbox b{font-weight:700;} .warnbox .wi{font-size:15px;line-height:1.1;flex-shrink:0;} .pk-chart{margin-top:12px;} .pk-chart svg{width:100%;height:auto;display:block;overflow:visible;} .pk-chart .axis{stroke:var(--line);stroke-width:1;} .pk-chart .zero{stroke:var(--ink-soft);stroke-width:1;stroke-dasharray:3 3;} .pk-chart .cum{fill:none;stroke:var(--accent-deep);stroke-width:2;} .pk-chart .cumneg{fill:none;stroke:var(--danger);stroke-width:2;} .pk-chart .be-line{stroke:var(--accent-deep);stroke-width:1;stroke-dasharray:2 2;} .pk-chart .be-dot{fill:var(--accent-deep);} .pk-chart .clab{font:500 10px var(--mono);fill:var(--muted);} .pk-chart .vlab{font:600 10px var(--mono);fill:var(--ink);} /* ---- Login-Overlay + Server-Dialog (Phase 1) ---- */ #login-overlay{position:fixed;inset:0;background:var(--chrom);display:grid;place-items:center;z-index:1000;} /* hidden-Attribut muss das display:grid der Overlays überstimmen, sonst bleiben sie sichtbar */ #login-overlay[hidden],#server-modal[hidden]{display:none !important;} .login-card{background:var(--surface);border-radius:var(--r);padding:28px;width:min(360px,92vw);box-shadow:var(--sh-lg);} .login-card h2{margin:0 0 2px;} .login-card p.sub{color:var(--muted);margin:0 0 16px;font-size:12px;} .login-card label{display:block;font-size:12px;color:var(--muted);margin:12px 0 4px;} .login-card input{width:100%;padding:10px 12px;border:1px solid var(--line-strong);border-radius:var(--r-sm);font-size:14px;} .login-card button{width:100%;margin-top:18px;padding:11px;border:0;border-radius:var(--r-sm);background:var(--primary);color:var(--auf-farbe);font-weight:600;cursor:pointer;} .login-error{color:var(--accent);font-size:13px;margin-top:10px;min-height:16px;} .login-or{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:11px;margin:16px 0 10px;text-transform:uppercase;letter-spacing:.06em;} .login-or::before,.login-or::after{content:"";flex:1;height:1px;background:var(--line);} .login-sso-btn{display:block;text-align:center;padding:10px 12px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);font-weight:600;font-size:14px;text-decoration:none;cursor:pointer;} .login-sso-btn:hover{background:var(--primary-wash);border-color:var(--primary);color:var(--primary-press);} .user-badge{color:#C7D0E4;font-size:12px;padding:0 6px;white-space:nowrap;} .head-sep{width:1px;height:22px;background:rgba(255,255,255,.18);display:inline-block;margin:0 2px;vertical-align:middle;} #server-modal{position:fixed;inset:0;background:var(--overlay);display:grid;place-items:center;z-index:900;} .server-card{background:var(--surface);border-radius:var(--r);padding:22px;width:min(560px,94vw);max-height:86vh;overflow:auto;box-shadow:var(--sh-lg);} .server-card h3{margin:0 0 12px;} .server-list{list-style:none;margin:0;padding:0;} .server-list li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:8px;cursor:pointer;} .server-list li:hover{border-color:var(--primary);background:var(--primary-soft);} .server-list .meta{color:var(--muted);font-size:12px;} .server-empty{color:var(--muted);font-size:13px;padding:8px 2px;} .list-search{width:100%;padding:9px 12px;margin:0 0 10px;border:1px solid var(--line-strong);border-radius:var(--r-sm);font-size:13px;color:var(--text);background:var(--surface);} .modal-close{float:right;background:none;border:0;font-size:18px;cursor:pointer;color:var(--muted);line-height:1;} /* AÜ/WV-Umschalter oben im Zeitarbeit-Reiter */ .za-mode-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 16px;} .za-mode-bar .za-mode-lbl{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600;} .za-mode-hint{font-size:12px;color:var(--muted);} #za_branche,#za_bz_stufe{width:100%;padding:9px 12px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--surface);font-size:14px;color:var(--text);} .za-bz-hint{display:block;margin-top:5px;font-size:11px;color:var(--muted);} .za-bz-hint.za-warn{color:var(--danger-strong);font-weight:600;} .za-multi label{display:flex;align-items:flex-start;gap:8px;cursor:pointer;font-weight:500;} .za-multi input[type=checkbox]{margin-top:3px;flex:0 0 auto;} .za-multi small{display:block;color:var(--muted);font-weight:400;margin-top:1px;} #za_taetigkeit{min-width:230px;padding:9px 12px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--surface);font-size:14px;color:var(--text);} #za_taet_save,#za_taet_manage{padding:8px 12px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);font-weight:600;font-size:12px;cursor:pointer;} .locked-field{background:var(--locked) !important;color:var(--muted) !important;cursor:not-allowed;} /* Verwaltungs-Modal für Tätigkeitsbereich-Vorlagen */ #preset-admin-modal{position:fixed;inset:0;background:var(--overlay);display:grid;place-items:center;z-index:950;} #preset-admin-modal[hidden]{display:none !important;} #preset-admin-modal .server-card{width:min(700px,95vw);} .pa-toolbar{display:flex;gap:8px;align-items:center;margin-bottom:12px;flex-wrap:wrap;} #pa_select{flex:1;min-width:180px;padding:8px 10px;border:1px solid var(--line-strong);border-radius:var(--r-sm);font-size:14px;background:var(--surface);color:var(--text);} .pa-btn{padding:8px 12px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);font-weight:600;font-size:12px;cursor:pointer;} #pa_save.pa-btn{background:var(--primary);color:var(--auf-farbe);border-color:var(--primary);} .pa-name-lbl{display:block;font-size:12px;color:var(--muted);margin-bottom:12px;} .pa-name-lbl input{display:block;width:100%;margin-top:4px;padding:8px 10px;border:1px solid var(--line-strong);border-radius:var(--r-sm);font-size:14px;color:var(--text);} .pa-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;max-height:44vh;overflow:auto;padding:2px;} .pa-f{display:flex;flex-direction:column;font-size:11px;color:var(--muted);gap:3px;} .pa-f input{padding:7px 9px;border:1px solid var(--line-strong);border-radius:var(--r-sm);font-size:13px;color:var(--text);} .pa-actions{display:flex;align-items:center;gap:12px;margin-top:14px;} /* Angebots-Editor / -Liste / Firmendaten */ #equalpay-modal,#offer-modal,#offer-list-modal,#company-modal,#users-modal,#audit-modal,#versions-modal,#tasks-modal,#dashboard-modal,#customers-modal,#send-modal,#dossier-modal,#form-modal,#retention-modal,#candidates-modal,#cand-modal,#placement-modal,#task-modal,#preview-modal,#corr-modal,#corrview-modal,#contracts-modal,#appointments-modal,#reports-modal,#kanban-modal,#combi-modal,#pw-modal{position:fixed;inset:0;background:var(--overlay);display:grid;place-items:center;z-index:960;} #equalpay-modal[hidden],#offer-modal[hidden],#offer-list-modal[hidden],#company-modal[hidden],#users-modal[hidden],#audit-modal[hidden],#versions-modal[hidden],#tasks-modal[hidden],#dashboard-modal[hidden],#customers-modal[hidden],#send-modal[hidden],#dossier-modal[hidden],#form-modal[hidden],#retention-modal[hidden],#candidates-modal[hidden],#cand-modal[hidden],#placement-modal[hidden],#task-modal[hidden],#preview-modal[hidden],#corr-modal[hidden],#corrview-modal[hidden],#contracts-modal[hidden],#appointments-modal[hidden],#reports-modal[hidden],#kanban-modal[hidden],#combi-modal[hidden],#pw-modal[hidden]{display:none !important;} .combi-list{display:flex;flex-direction:column;gap:6px;max-height:52vh;overflow:auto;} .combi-item{display:grid;grid-template-columns:auto 1fr auto auto auto;gap:10px;align-items:center;padding:9px 11px;border:1px solid var(--line);border-radius:8px;cursor:pointer;background:var(--surface);} .combi-item:hover{border-color:var(--primary);} .combi-item .ci-name{font-size:13px;color:var(--ink);font-weight:500;} .combi-item .ci-name em{color:var(--primary-press);font-style:normal;font-weight:600;font-size:11px;} .combi-item .ci-ber{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;} .combi-item .ci-marge{font-family:var(--mono);font-size:12px;color:var(--muted);white-space:nowrap;min-width:56px;text-align:right;} .combi-item .ci-marge.ci-low{color:var(--danger-strong);font-weight:700;} .combi-item .ci-satz{font-family:var(--mono);font-size:12.5px;color:var(--ink);white-space:nowrap;} .combi-hint{display:block;margin-top:10px;font-size:11.5px;color:var(--muted);} #contracts-modal .server-card,#appointments-modal .server-card,#reports-modal .server-card,#sync-modal .server-card{width:min(900px,96vw);} #kanban-modal .server-card{width:min(1150px,97vw);} .kanban{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:8px;} .kb-col{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:8px;display:flex;flex-direction:column;} .kb-col.kb-over{outline:2px dashed var(--primary);outline-offset:-2px;} .kb-col h4{margin:2px 4px 8px;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);display:flex;justify-content:space-between;align-items:center;} .kb-col h4 .kb-count{color:var(--ink);font-family:var(--mono);} .kb-cards{display:flex;flex-direction:column;gap:7px;min-height:48px;flex:1;} .kb-card{background:var(--surface);border:1px solid var(--line-strong);border-radius:8px;padding:8px 10px;cursor:grab;} .kb-card:hover{border-color:var(--primary);} .kb-card.kb-drag{opacity:.45;} .kb-card .kb-cust{font-weight:600;color:var(--ink);font-size:12.5px;} .kb-card .kb-no{font-family:var(--mono);color:var(--muted);font-size:10.5px;} .kb-card .kb-meta{color:var(--muted);font-size:11px;margin-top:2px;display:flex;justify-content:space-between;gap:8px;} .kb-card .kb-warn{color:var(--amber-strong);font-weight:600;} .kb-hint{color:var(--muted);font-size:11.5px;margin:12px 2px 0;} @media (max-width:820px){ .kanban{grid-template-columns:1fr 1fr;} } @media (max-width:520px){ .kanban{grid-template-columns:1fr;} } .rp-bars{display:flex;flex-direction:column;gap:7px;margin:6px 0 2px;} .rp-bar{display:grid;grid-template-columns:130px 1fr 48px;align-items:center;gap:10px;font-size:12.5px;} .rp-bar .rp-track{background:var(--paper);border-radius:6px;height:16px;overflow:hidden;} .rp-bar .rp-fill{height:100%;border-radius:6px;background:var(--primary);} .rp-bar .rp-n{text-align:right;font-family:var(--mono);color:var(--ink);} .rp-bar.rp-win .rp-fill{background:var(--accent);} .rp-bar.rp-lose .rp-fill{background:var(--danger-strong);} .adm-table th.r,.adm-table td.r{text-align:right;} #candidates-modal .server-card{width:min(900px,96vw);} #cand-modal .server-card{width:min(920px,96vw);} #form-modal .server-card{width:min(680px,95vw);} #task-modal .server-card,#placement-modal .server-card{width:min(560px,95vw);} tr.tk-over td{color:var(--danger-text);} .tk-badge{display:inline-block;font-size:10px;font-weight:700;color:var(--danger-text);background:var(--danger-wash);border-radius:6px;padding:1px 6px;margin-left:4px;vertical-align:middle;} input.tk-done{width:16px;height:16px;cursor:pointer;} #preview-modal .pv-card{width:min(1000px,96vw);} .pv-body{margin-top:10px;height:min(74vh,760px);background:var(--surface-2,#f4f6fb);border:1px solid var(--line,#dfe3ee);border-radius:10px;overflow:auto;display:flex;} .pv-frame{width:100%;height:100%;border:0;border-radius:10px;} .pv-imgwrap{margin:auto;padding:12px;} .pv-imgwrap img{max-width:100%;max-height:70vh;display:block;border-radius:6px;box-shadow:0 2px 10px rgba(0,0,0,.15);} .pv-none{margin:auto;color:var(--muted);text-align:center;padding:30px;line-height:1.6;} .fm-fields{max-height:60vh;} .fm-f{display:flex;flex-direction:column;gap:4px;margin-bottom:10px;font-size:12px;color:var(--muted);} .fm-f>span{font-weight:500;} .fm-f input,.fm-f select,.fm-f textarea{padding:8px 10px;border:1px solid var(--line-strong);border-radius:var(--r-sm);font-size:13px;color:var(--text);background:var(--surface);font-family:inherit;} .fm-f textarea{min-height:60px;resize:vertical;} .fm-check{flex-direction:row;align-items:center;gap:8px;color:var(--text);font-size:13px;} .fm-check input{width:auto;} #dossier-modal .server-card{width:min(1040px,96vw);} /* Sechs Spalten (Firma, Kd.-Nr., Status, Ansprechpartner, Ort, Schaltflaechen) passen nicht in die Standardbreite von 560 px - ohne diese Angabe zwingt die Kundenliste dem Fenster einen Querbalken auf. */ #customers-modal .server-card{width:min(1080px,96vw);} /* Das Formular soll nicht auf volle Breite gezogen werden - nur die Tabelle braucht sie. Ein einzeiliges Eingabefeld ueber 1000 px liest sich schlecht. */ #customers-modal .of-grid{max-width:760px;} /* Die drei Schaltflaechen nebeneinander - aber nur, wenn das Fenster breit genug ist. Erzwungen wuerden sie sonst einen Querbalken ausloesen, also genau das, was hier weg soll. */ @media (min-width:1000px){ #customers-modal .adm-table td:last-child, #dossier-modal .adm-table td:last-child{white-space:nowrap;} } .ds-stamm{font-size:13px;color:var(--text);background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin:4px 0 2px;line-height:1.5;} .ds-upload{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:4px 0 8px;} .ds-upload select,.ds-upload input{padding:7px 9px;border:1px solid var(--line-strong);border-radius:var(--r-sm);font-size:13px;color:var(--text);background:var(--surface);} .ds-upload input[type=text]{min-width:140px;} .cu-filterbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:6px 0 4px;} .cu-filterbar .list-search{flex:1 1 200px;min-width:150px;} .cu-filterbar select{padding:6px 8px;border:1px solid var(--line-strong);border-radius:var(--r-sm);font-size:12.5px;background:var(--surface);color:var(--ink);} .cu-filterbar .cu-seg{display:flex;gap:6px;align-items:center;margin-left:auto;} .ds-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:4px 0 8px;} .ds-row input[type=text],.ds-row input:not([type]),.ds-row input[type=email]{padding:7px 9px;border:1px solid var(--line-strong);border-radius:var(--r-sm);font-size:13px;color:var(--text);background:var(--surface);} /* Datumsfeld und Auswahlfelder in der Zeile mitnehmen: die Satz-Zeile der Kundenakte besteht ueberwiegend daraus und saehe sonst unfertig aus. */ .ds-row input[type=date],.ds-row select{padding:7px 9px;border:1px solid var(--line-strong);border-radius:var(--r-sm);font-size:13px;color:var(--text);background:var(--surface);} .ds-row input[inputmode=decimal]{text-align:right;} .ds-check{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);} .ds-timeline{max-height:34vh;} .tl-item{display:flex;gap:10px;padding:7px 2px;border-bottom:1px solid var(--line);} .tl-dot{flex:0 0 auto;width:9px;height:9px;border-radius:50%;margin-top:5px;background:var(--primary);} .tl-item.tl-notiz .tl-dot{background:var(--amber,#B45309);} .tl-main{flex:1;min-width:0;} .tl-text{font-size:13px;color:var(--text);} .tl-meta{font-size:11px;color:var(--muted);margin-top:1px;} .tl-del{background:none;border:0;color:var(--muted);cursor:pointer;font-size:12px;} .tl-del:hover{color:var(--danger);} #offer-modal .server-card{width:min(780px,96vw);} #company-modal .server-card{width:min(560px,95vw);} /* 1000 statt 920: die Spalten der Nutzerverwaltung brauchen 925 px, sonst bleibt genau dort ein Querbalken stehen. */ #users-modal .server-card{width:min(1000px,96vw);} #audit-modal .server-card{width:min(920px,96vw);} /* Vier Abschnitte mit Kennzahlen-Kacheln untereinander: bei 560 px passen drei Kacheln nebeneinander und die Karte wird unnoetig lang. Bei 780 px sind es vier, das spart mehrere Zeilen Hoehe. */ #retention-modal .server-card{width:min(780px,96vw);} /* Konzern-Sicht: geerbte Bloecke in der Kundenakte. Sie sind bewusst abgesetzt und nicht untergemischt - was dem Dach gehoert, laesst sich hier nicht bearbeiten, und das soll man sehen. */ .kz-sub{margin:14px 0 4px;font-size:12.5px;font-weight:600;color:var(--muted); display:flex;align-items:center;gap:8px;flex-wrap:wrap;} .kz-check{display:flex;align-items:center;gap:7px;cursor:pointer;} .kz-check input{width:auto;margin:0;} .kz-konzern small{display:block;margin-top:3px;color:var(--muted);font-weight:400;} /* Preisrunde: Hinweis auf fehlende aktuelle Verrechnungssaetze. Bewusst als Hinweis gehalten und nicht als Fehler eingefaerbt - ein fehlender Satz ist oft voellig in Ordnung (nichts verhandelt, Standort ruht). */ .pr-hinweis{margin:8px 0 10px;padding:10px 12px;border-radius:10px; border:1px solid var(--amber-line);background:var(--amber-wash);} .pr-kopf{font-size:13px;font-weight:600;color:var(--amber-text);} .pr-liste{display:flex;flex-direction:column;gap:5px;margin-top:7px;} .pr-zeile{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:12.5px;} .pr-zeile .pr-q{font-weight:600;} .pr-zeile .pr-alt{color:var(--muted);} .pr-fuss{margin-top:8px;font-size:11.5px;color:var(--muted);line-height:1.45;} .pr-marke{display:inline-block;padding:1px 6px;border-radius:6px;font-size:11px; background:var(--amber-wash);border:1px solid var(--amber-line);color:var(--amber-text); margin-left:6px;white-space:nowrap;} /* Klappknopf am Sammelkunden. Als Dreieck statt Text: Er steht in einer Tabellenzelle vor dem Firmennamen und darf ihn nicht wegdruecken. */ .kz-klapp{appearance:none;border:none;background:none;cursor:pointer;padding:0 6px 0 0; color:var(--muted);font-size:11px;line-height:1;} .kz-klapp:hover{color:var(--ink);} /* Zugeordnete Stellen leicht eingerueckt und ruhiger - das Dach fuehrt. */ .adm-table tr.kz-stelle td:first-child{padding-left:22px;} .adm-table tr.kz-stelle td{background:var(--neutral-wash);} .kz-marke{display:inline-block;padding:1px 6px;border-radius:6px;font-size:11px; background:var(--neutral-wash);border:1px solid var(--line);color:var(--muted);margin-left:6px;} /* Lange Zeichenketten ohne Leerzeichen - E-Mail-Adressen, Kennungen, das JSON in der Protokollspalte "Details" - lassen sich nicht umbrechen und schieben die ganze Tabelle in die Breite. Hier duerfen sie es. */ .adm-table .adm-mono,#audit-modal .adm-table td:last-child{overflow-wrap:anywhere;} /* ... aber mit Boden. Ohne Mindestbreite darf die Spalte bis fast auf null schrumpfen, und aus einer E-Mail-Adresse wird ein senkrechtes Band aus zwei Buchstaben je Zeile. Lesbar schlaegt schmal. */ .adm-table td.adm-mono{min-width:8em;} #versions-modal .server-card{width:min(620px,95vw);} /* Admin-Tabellen */ .adm-table{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:6px;} .adm-table th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600;padding:7px 8px;border-bottom:1px solid var(--line-strong);position:sticky;top:0;background:var(--surface);} .adm-table td{padding:6px 8px;border-bottom:1px solid var(--line);color:var(--text);vertical-align:middle;} /* Schmales Fenster: die Zellen enger setzen, damit die Spalten auch dort ohne Querbalken hineinpassen (je Spalte 6 px gespart). Gilt fuer alle Tabellen - die Kundenliste war nur die erste, an der es auffiel. */ @media (max-width:999px){ .adm-table{font-size:12px;} .adm-table th,.adm-table td{padding:6px 5px;} } /* Im schmalen Fenster ist der Innenabstand der Dialogkarte (2 x 22 px) der teuerste Platz auf der Seite. 2 x 14 px genuegen und geben der Tabelle 16 px zurueck - genug, damit die Nutzerverwaltung ab 900 statt erst ab 910 px Fensterbreite ohne Querbalken auskommt. */ @media (max-width:999px){ .server-card{padding:18px 14px;} } .adm-table tr.inactive{opacity:.5;} /* KEINE eigene Hoehenbegrenzung: Die Karte des Dialogs rollt selbst (.server-card, max-height 86vh). Ein zweiter Rollbereich darin ergibt zwei Rollbalken uebereinander - in der Kundenakte waren es neun solcher Kaesten in einer Karte. Die Tabelle waechst jetzt mit ihrem Inhalt; overflow:auto bleibt nur fuer den Notfall, dass sie doch zu breit wird. */ .adm-scroll{overflow:auto;margin-top:6px;} .adm-table select,.adm-table input{padding:5px 7px;border:1px solid var(--line-strong);border-radius:var(--r-sm);font-size:12px;color:var(--text);background:var(--surface);} .adm-badge{display:inline-block;padding:1px 8px;border-radius:999px;font-size:11px;background:var(--primary-wash);color:var(--primary-press);} /* Dauerhafte Administration: ruhig, kein Alarm — es ist eine Festlegung, keine Warnung. Eigene Farbe, damit sie sich vom "aktiv" daneben abhebt. */ .adm-badge.adm-fest{background:var(--flaeche-sanft);color:var(--ink-soft);border:1px solid var(--line-strong);} /* Bereichs-Auswahl (Nutzerverwaltung) */ .ber-pick{display:flex;flex-wrap:wrap;gap:2px 10px;align-items:center;min-width:210px;} .ber-pick label{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;color:var(--ink);white-space:nowrap;cursor:pointer;} .ber-pick input[type=checkbox]{margin:0;} .ber-pick input:disabled + *,.ber-pick label:has(input:disabled){color:var(--muted);cursor:default;} /* Die feste Mindestbreite von 210 px haelt die fuenf Bereiche in einer Zeile. In der Nutzerverwaltung ist das die breiteste Spalte (220 von 799 px) und damit der Grund, warum die Tabelle im schmalen Fenster nicht passt. Dort duerfen die Kaestchen umbrechen - sichtbar bleiben alle. */ @media (max-width:999px){ .ber-pick{min-width:110px;} } .ber-pick .ber-note{flex:1 1 100%;color:var(--muted);font-size:10.5px;font-style:italic;} .of-f.full > span + .ber-pick{margin-top:4px;} .adm-mini{background:none;border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:4px 9px;font-size:12px;cursor:pointer;color:var(--ink);} .adm-mini:hover{background:var(--primary-wash);} .adm-mini.adm-danger:hover{background:var(--danger-wash);color:var(--danger);} .adm-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:end;margin:4px 0 2px;} .adm-filters label{display:flex;flex-direction:column;font-size:11px;color:var(--muted);gap:3px;} .adm-filters input{padding:7px 9px;border:1px solid var(--line-strong);border-radius:var(--r-sm);font-size:12.5px;color:var(--text);background:var(--surface);} .adm-mono{font-family:var(--mono);font-size:11.5px;} /* min-width:0 - ohne das behalten Rasterfelder die Mindestbreite ihres Inhalts und schieben den Dialog auf. */ .of-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;} .of-grid>*{min-width:0;} .of-f{display:flex;flex-direction:column;font-size:11px;color:var(--muted);gap:3px;} /* Der erklaerende Zusatz gehoert unter die Beschriftung, nicht dahinter. Er brach bisher nur zufaellig um - je nachdem, ob die Zeile voll war. Bei breiten Feldern klebte er am Namen ("ZuwendungenSumme aus ..."). */ .of-f > span > small{display:block;font-weight:400;line-height:1.35;margin-top:1px;} .of-f.full{grid-column:1 / -1;} .of-f input,.of-f textarea,.of-f select{padding:8px 10px;border:1px solid var(--line-strong);border-radius:var(--r-sm);font-size:13px;color:var(--text);background:var(--surface);} /* Ein Auswahlfeld richtet sich nach seinem laengsten Eintrag. Seit die Kunden ihre Betriebsstaette im Namen tragen ("Nehlsen MV GmbH & Co. KG - Betriebsstaette Trollenhagen (Wertstoffverwertung)") sprengte das den Dialog "Vermittlung anlegen" auf 1399 px in einer 560 px breiten Karte. Kein Bedienelement darf breiter werden als sein Platz. */ .server-card select,.server-card input,.server-card textarea{max-width:100%;} .of-f textarea{min-height:52px;resize:vertical;} .of-sec{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600;margin:15px 0 7px;} .of-pos{display:flex;flex-direction:column;gap:6px;} /* Sechs Spalten, aber "bisher" nur bei der Preisanpassung. Die Spalte wird nicht entfernt, sondern auf Breite 0 gesetzt - sonst muesste das Raster an zwei Stellen gepflegt werden und Kopf und Zeilen liefen auseinander. Umgeschaltet wird ueber die Klasse "mit-alt" am Positionsblock. */ .of-pos-head .nur-pa,.of-pos-row input[data-k="satz_alt"]{display:none;} .of-pos.mit-alt .of-pos-row input[data-k="satz_alt"], .of-pos-head.mit-alt .nur-pa{display:block;} .of-pos-head.mit-alt,.of-pos.mit-alt .of-pos-row{grid-template-columns:1.5fr 1.4fr .75fr .75fr .7fr 24px;} .of-pos-head.mit-alt .nur-pa{text-align:right;} .of-pos-row input[data-k="satz_alt"]{text-align:right;font-family:var(--mono);color:var(--muted);} .of-hint{font-size:12px;color:var(--muted);margin:2px 0 6px;} .of-pos-head{display:grid;grid-template-columns:1.6fr 1.6fr .8fr .7fr 24px;gap:6px;padding:0 0 3px;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600;} .of-pos-head span:nth-child(3){text-align:right;} .of-pos-row{display:grid;grid-template-columns:1.6fr 1.6fr .8fr .7fr 24px;gap:6px;align-items:center;} .of-pos-row input{min-width:0;padding:7px 8px;border:1px solid var(--line-strong);border-radius:var(--r-sm);font-size:13px;color:var(--text);} .of-pos-row input[data-k="satz"]{text-align:right;font-family:var(--mono);} .of-pos-del{border:none;background:none;color:var(--danger,#C2410C);cursor:pointer;font-size:16px;line-height:1;} .za-offer-cta{width:100%;margin-top:16px;padding:12px 14px;border:none;border-radius:10px;background:var(--primary);color:var(--auf-farbe);font:inherit;font-weight:600;font-size:14px;cursor:pointer;transition:background .15s;} .za-offer-cta:hover{background:var(--primary-press);} .pa-btn.ghost{background:none;border:1px dashed var(--line-strong);color:var(--ink);margin-top:8px;} .pa-btn.ghost:hover{background:var(--primary-wash);border-color:var(--primary);} /* Abgesetztes Feld „Aus Tätigkeitsbereich übernehmen" */ .of-taet-add{margin-top:12px;padding:12px 14px;background:var(--paper);border:1px solid var(--line);border-radius:10px;} .of-taet-add .of-taet-lbl{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600;margin-bottom:8px;} .of-taet-add .of-taet-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;} .of-taet-add select{padding:8px 10px;border:1px solid var(--line-strong);border-radius:var(--r-sm);font-size:13px;color:var(--text);background:var(--surface);} .of-taet-add #of_taet_sel{flex:1;min-width:170px;} .of-taet-add #of_kdsatz_sel{flex:1;min-width:220px;} .of-taet-add .of-taet-hint{display:block;margin-top:8px;font-size:11px;color:var(--muted);} @media (max-width:640px){ .of-pos-head{display:none;} .of-pos-row{grid-template-columns:1fr 1fr;} .of-pos-row .of-pos-del{grid-column:2;justify-self:end;} } .of-actions{display:flex;align-items:center;gap:10px;margin-top:16px;flex-wrap:wrap;} .of-no{font-family:var(--mono);font-weight:600;color:var(--ink);} /* Angebots-Dokument im Druck */ #print-area .of-addr{display:flex;justify-content:space-between;gap:24px;margin:20px 0 8px;} #print-area .of-sender{font-size:10.5px;color:#6B7A8A;line-height:1.5;} #print-area .of-cust{font-size:13px;line-height:1.55;color:#14202E;} #print-area .of-meta{text-align:right;font-size:12px;color:#6B7A8A;line-height:1.7;white-space:nowrap;} #print-area .of-postab{width:100%;border-collapse:collapse;margin:14px 0;} #print-area .of-postab th,#print-area .of-postab td{text-align:left;padding:7px 8px;font-size:12.5px;border-bottom:1px solid #E9EDF1;color:#14202E;vertical-align:top;} #print-area .of-postab th{color:#6B7A8A;font-size:10px;text-transform:uppercase;letter-spacing:.05em;} #print-area .of-postab td.r,#print-area .of-postab th.r{text-align:right;font-family:var(--mono);white-space:nowrap;} /* KK-Talents-Branding: Markenfarbe für Chrome-Akzente + Logo */ .eyebrow{color:var(--primary);} .tab .idx{color:var(--primary);} .wordmark{align-items:center;} .brand-logo{height:24px;filter:brightness(0) invert(1);opacity:.95;display:block;} .wm-sep{width:1px;height:20px;background:rgba(255,255,255,.28);display:inline-block;} .login-logo{display:block;height:30px;margin:0 auto 18px;} #print-area .pr-logo{height:30px;} /* Angebots-Anschreiben (nach K&K-Vorlage) — mm-basiert für A4-Druck */ #print-area .ofl{position:relative;min-height:243mm;font-family:var(--sans);color:#1a1a1a;} #print-area .ofl-logo{text-align:right;margin:0 0 5mm;} #print-area .ofl-logo .pr-logo{height:8.5mm;} #print-area .ofl-sender{font-size:8pt;color:#333;margin:3mm 0 1.5mm;} #print-area .ofl-cust{font-size:11pt;line-height:1.4;color:#000;max-width:90mm;} #print-area .ofl-date{text-align:right;font-size:10.5pt;color:#000;margin-top:8mm;} #print-area .ofl-nr{font-weight:700;font-size:12.5pt;color:#000;margin:3mm 0 4mm;} #print-area .ofl-p{font-size:10.5pt;line-height:1.35;color:#1a1a1a;margin:0 0 2.2mm;max-width:118mm;} #print-area .ofl-postab{width:118mm;border-collapse:collapse;margin:3mm 0 3.5mm;} #print-area .ofl-postab th{text-align:left;font-size:10.5pt;font-weight:700;border-bottom:1pt solid #000;padding:1mm 0 1.5mm;} #print-area .ofl-postab th.r,#print-area .ofl-postab td.r{text-align:right;white-space:nowrap;} #print-area .ofl-postab td{font-size:10.5pt;padding:1.4mm 0;color:#000;} #print-area .ofl-postab .ofl-posdesc{font-size:8.5pt;color:#555;} /* Volle Textbreite statt 96mm: bei langen Bezeichnungen wie "Mehrarbeitszuschlag (ab der 41. Wochenstunde)" brach sonst die Zeile und der Prozentwert rutschte darunter. */ #print-area .ofl-z{width:112mm;margin:1mm 0 2.5mm 6mm;} #print-area .ofl-zrow{display:flex;justify-content:space-between;gap:6mm;font-size:10.5pt;padding:.3mm 0;color:#1a1a1a;} #print-area .ofl-zrow span:last-child{white-space:nowrap;} /* Bausteine der beiden Vorlagen vom 07.09.2026 (Erstangebot AÜ und Preisanpassung). Maße und Schriftgrößen folgen dem vorhandenen Brief, damit alle Schreiben gleich aussehen. Farben sind hier fest: Papier ist immer weiß, deshalb rührt #print-area die Palette nicht an. */ #print-area .ofl-titel{font-weight:700;font-size:12.5pt;color:#000;margin:6mm 0 0;max-width:118mm;line-height:1.3;} #print-area .ofl-titelnr{font-size:11pt;color:#000;margin:.8mm 0 4mm;} #print-area .ofl-h{font-size:11pt;font-weight:700;color:#000;margin:4mm 0 1.5mm;break-after:avoid;} /* Zweispaltige Merkmalstabelle (Eckdaten des Einsatzes) */ #print-area .ofl-eck{width:118mm;border-collapse:collapse;margin:1mm 0 2mm;} #print-area .ofl-eck td{font-size:10.5pt;padding:1.2mm 0;color:#000;vertical-align:top;border-bottom:.4pt solid #ccc;} #print-area .ofl-eck td:first-child{width:52mm;color:#333;padding-right:4mm;} /* Vierspaltige Gegenüberstellung (bisher / neu / Veränderung) */ #print-area .ofl-patab{width:118mm;border-collapse:collapse;margin:1mm 0 2.5mm;} #print-area .ofl-patab th{text-align:left;font-size:10pt;font-weight:700;border-bottom:1pt solid #000;padding:1mm 0 1.5mm;} #print-area .ofl-patab td{font-size:10.5pt;padding:1.4mm 0;color:#000;border-bottom:.4pt solid #ddd;} #print-area .ofl-patab .r{text-align:right;white-space:nowrap;padding-left:4mm;} /* Spiegelstriche wie in den Vorlagen: Pfeil, eingerückt, ohne Aufzählungspunkt */ #print-area .ofl-li{list-style:none;margin:1mm 0 2mm;padding:0 0 0 6mm;max-width:112mm;} #print-area .ofl-li li{font-size:10.5pt;line-height:1.35;color:#1a1a1a;margin:0 0 1.2mm;text-indent:-5mm;padding-left:5mm;} #print-area .ofl-li li::before{content:"→  ";} #print-area .ofl-rolle{font-size:10pt;color:#333;margin:.4mm 0 0;} #print-area .ofl-sign{font-size:10.5pt;color:#000;margin:1mm 0 0;} #print-area .ofl-info{position:absolute;right:0;bottom:18mm;width:48mm;text-align:right;font-size:7.5pt;color:#5A5A5A;line-height:1.4;} #print-area .ofl-info b{color:#1a1a1a;} #print-area .ofl-ctrl{position:absolute;right:0;bottom:0;width:72mm;border:.5pt solid #999;font-size:7pt;color:#333;} #print-area .ofl-ctrl div{padding:1.4mm 2mm;} #print-area .ofl-ctrl div:first-child{border-bottom:.5pt solid #999;} /* AGB-Anhang */ #print-area .agb-page{page-break-before:always;break-before:page;padding-top:6px;} #print-area .agb-title{font-size:15px;color:#14202E;margin:0 0 2px;} #print-area .agb-sub{font-size:11px;color:#6B7A8A;margin:0 0 12px;} #print-area .agb-h{font-size:12px;color:#14202E;margin:12px 0 4px;font-weight:700;break-after:avoid;} #print-area .agb-p{font-size:9.5px;line-height:1.45;color:#2A3644;margin:0 0 7px;text-align:justify;} #print-area .agb-ul{margin:4px 0 7px;padding-left:18px;font-size:9.5px;color:#2A3644;line-height:1.45;} /* Kundenansicht (Präsentationsmodus fürs Kundengespräch) — nur Preise, keine Interna */ #customer-view{position:fixed;inset:0;background:var(--surface);z-index:2000;display:none;flex-direction:column;} #customer-view.show{display:flex;} .cv-top{display:flex;align-items:center;justify-content:space-between;padding:22px clamp(20px,4vw,40px);border-bottom:1px solid var(--line);} .cv-logo{height:30px;} .cv-close{border:1px solid var(--line-strong);background:var(--surface);border-radius:8px;padding:9px 16px;cursor:pointer;font-weight:600;font-size:13px;color:var(--ink);} .cv-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:32px;} .cv-area{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--primary);font-weight:700;} .cv-label{font-size:18px;color:var(--muted);margin-top:20px;} .cv-price{font-family:var(--mono);font-size:clamp(48px,9vw,84px);font-weight:600;color:var(--ink);line-height:1.05;letter-spacing:-.02em;margin-top:4px;} .cv-chips{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:26px;} .cv-chip{background:var(--primary-wash);color:var(--primary-press);border-radius:999px;padding:9px 18px;font-size:15px;font-weight:500;} .cv-lines{margin-top:28px;min-width:min(460px,92vw);text-align:left;} .cv-line{display:flex;justify-content:space-between;gap:24px;padding:11px 2px;border-bottom:1px solid var(--line-soft);font-size:16px;color:var(--ink-soft);} .cv-line .v{font-family:var(--mono);color:var(--ink);font-weight:500;} .cv-foot{padding:16px clamp(20px,4vw,40px);border-top:1px solid var(--line);color:var(--muted);font-size:12px;text-align:center;} .cv-actions{display:flex;gap:10px;align-items:center;} .cv-btn-primary{border:1px solid var(--primary);background:var(--primary);color:var(--auf-farbe);border-radius:8px;padding:9px 16px;cursor:pointer;font-weight:600;font-size:13px;} .cv-incl{margin-top:30px;min-width:min(520px,92vw);text-align:left;background:var(--primary-wash);border-radius:12px;padding:18px 22px;} .cv-incl-h{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--primary-press);font-weight:700;margin-bottom:8px;} .cv-incl ul{margin:0;padding-left:20px;color:var(--ink-soft);font-size:15px;line-height:1.7;} /* --- Startseite / Home --- */ #home{display:none;} body.home-active #home{display:block;max-width:1100px;margin:0 auto;animation:homeIn .22s ease;} body.home-active .tabs{display:none !important;} body.home-active main>.panel{display:none !important;} /* Kalkulationsspezifische Kopf-Elemente (Marge, Auswahl, Bezeichnung, Status, Kundenansicht) auf der Startseite ausblenden */ body.home-active .calc-only{display:none !important;} /* ===== Kontext-Unterleiste: kalkulationsspezifische Bedienelemente unter den Reitern (heller Balken) ===== */ .calc-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 22px;padding:12px 16px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh-fein);} body.home-active .calc-toolbar{display:none;} .calc-toolbar #btn_customer_view{margin-left:auto;} /* Steuerelemente stammen aus dem dunklen Header → für hellen Balken umfärben */ .calc-toolbar .gate{background:var(--primary-wash);border:1px solid var(--line);} .calc-toolbar .gate label{color:var(--muted);} .calc-toolbar .gate input{color:var(--ink);border-bottom:1px solid var(--line);} .calc-toolbar .gate input:focus{border-bottom-color:var(--primary);} .calc-toolbar .gate .pct{color:var(--muted);} .calc-toolbar .headin{background:var(--feld);border:1px solid var(--line);color:var(--ink);} .calc-toolbar .headin::placeholder{color:var(--muted);} .calc-toolbar .headin:focus{border-color:var(--primary);background:var(--feld);} .calc-toolbar .headsel{background:var(--feld);border:1px solid var(--line);color:var(--ink);} .calc-toolbar .headsel:focus{border-color:var(--primary);} .calc-toolbar .headsel option{color:var(--ink);} .calc-toolbar .save-status{color:var(--muted);} .calc-toolbar .save-status.ok{color:var(--accent);} /* Dieselbe Korrektur fuer die Dialoge. Die Grundregel der Statuszeile steht bei den Knoepfen der dunklen Kopfleiste und faerbt weiss (60 %). Auf einer hellen Dialogkarte ist das weiss auf weiss - jede Bestaetigung wie "gespeichert" war dort unsichtbar. Fuer die Werkzeugleiste war es schon einmal aufgefallen und behoben worden, fuer die Dialoge nicht. */ .server-card .save-status{color:var(--muted);} .server-card .save-status.ok{color:var(--accent);} @keyframes homeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}} .home-hero{position:relative;overflow:hidden;background:linear-gradient(120deg,var(--chrom),var(--primary));color:#fff;border-radius:16px;padding:28px 30px;margin:4px 0 24px;box-shadow:0 8px 24px rgba(20,32,46,.18);} /* Icon als dezentes Wasserzeichen (kein zweites Logo — Marke steht im Header). */ .home-hero .hero-mark{position:absolute;right:-14px;top:50%;transform:translateY(-50%);opacity:.13;pointer-events:none;} .home-hero .hero-mark img{width:132px;height:132px;display:block;border-radius:22px;} .home-hero .hero-text{position:relative;z-index:1;} .home-hero h1{margin:2px 0 4px;font-size:26px;font-weight:700;line-height:1.15;} .home-hero .hero-sub{margin:0;color:#dfe8f3;font-size:14px;} .home-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:28px;} .home-kpi{background:var(--surface);border:1px solid var(--line-strong);border-radius:12px;padding:16px 18px;} .home-kpi .k-v{font-family:var(--mono);font-size:25px;font-weight:700;color:var(--ink);} .home-kpi .k-k{font-size:12px;color:var(--muted);margin-top:3px;} .home-kpi .k-sub{font-size:11px;color:var(--primary-press);margin-top:4px;font-weight:600;} .home-h{font-size:15px;color:var(--ink);margin:0 0 12px;font-weight:700;} .home-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:30px;} .home-card{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;background:var(--surface);border:1px solid var(--line-strong);border-radius:12px;padding:16px 18px;cursor:pointer;font-family:inherit;transition:border-color .15s,box-shadow .15s,transform .15s;} .home-card:hover{border-color:var(--primary);box-shadow:var(--sh-karte);transform:translateY(-2px);} .home-card .hc-ic{font-size:23px;} .home-card .hc-t{font-size:15px;font-weight:600;color:var(--ink);} .home-card .hc-s{font-size:12px;color:var(--muted);} .home-cols{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-bottom:20px;} .home-list{display:flex;flex-direction:column;gap:8px;} .home-row{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:10px 13px;cursor:pointer;transition:border-color .15s;} .home-row:hover{border-color:var(--primary);} .home-row .r-main{font-size:13px;color:var(--ink);} .home-row .r-sub{font-size:11px;color:var(--muted);margin-top:2px;} .home-row .r-tag{font-size:11px;font-family:var(--mono);color:var(--muted);white-space:nowrap;} .home-empty{color:var(--muted);font-size:13px;padding:10px 2px;} /* Kopfzeile „Zu erledigen" mit Meine/Alle-Umschalter */ .home-h-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;} .home-h-row .home-h{margin:0;} .agenda-scope{display:inline-flex;border:1px solid var(--line-strong);border-radius:8px;overflow:hidden;} .agenda-scope button{appearance:none;border:0;background:var(--surface);color:var(--muted);font:inherit;font-size:12px;padding:5px 11px;cursor:pointer;} .agenda-scope button+button{border-left:1px solid var(--line);} .agenda-scope button.is-on{background:var(--primary);color:var(--auf-farbe);} /* Login-Hinweis / Wiedervorlagen-Banner (nur bei überfällig/heute) */ .agenda-banner{display:flex;align-items:center;gap:10px;width:100%;text-align:left;appearance:none;cursor:pointer;font:inherit; border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin:0 0 20px;background:var(--primary-wash);color:var(--ink);} .agenda-banner .ab-ic{font-size:16px;line-height:1;} .agenda-banner .ab-go{margin-left:auto;font-size:12px;font-weight:600;color:var(--primary-press);white-space:nowrap;} .agenda-banner.is-overdue{background:var(--danger-wash);border-color:var(--danger-line);} .agenda-banner.is-today{background:var(--amber-wash);border-color:var(--amber-line);} /* Dringlichkeit der Einträge (linker Farbbalken) */ .home-row.agenda-overdue{border-left:3px solid var(--danger-strong);} .home-row.agenda-today{border-left:3px solid var(--amber-strong);} .home-row.agenda-freigabe{border-left:3px solid var(--primary);} .home-row.agenda-upcoming{border-left:3px solid var(--line-strong);} .home-row .ab-warn{color:var(--amber-strong);font-weight:600;} @media (max-width:820px){ .home-kpis{grid-template-columns:1fr 1fr;} .home-cols{grid-template-columns:1fr;} } /* --- Status-Badges: Interessent / Kunde --- */ .status-badge{display:inline-block;font-size:11px;font-weight:600;padding:2px 9px;border-radius:999px;letter-spacing:.02em;vertical-align:middle;white-space:nowrap;} .status-interessent{background:var(--amber-wash);color:var(--amber-text);border:1px solid var(--amber-line);} .status-kunde{background:var(--primary-wash);color:var(--primary-press);border:1px solid var(--primary-line);} .status-inaktiv{background:var(--neutral-wash);color:var(--neutral-text);border:1px solid var(--neutral-line);} /* Vertrags-Status */ .status-aktiv{background:var(--accent-wash);color:var(--accent-deep);border:1px solid var(--accent-line);} .status-gekuendigt{background:var(--danger-wash);color:var(--danger-text);border:1px solid var(--danger-line);} .status-beendet{background:var(--neutral-wash);color:var(--neutral-text);border:1px solid var(--neutral-line);} /* Kalkulations-Freigabe (Status in der Kontext-Unterleiste) */ .calc-freigabe{display:inline-flex;align-items:center;gap:6px;} .calc-st-entwurf{background:var(--amber-wash);color:var(--amber-text);border:1px solid var(--amber-line);} .calc-st-freigegeben{background:var(--accent-wash);color:var(--accent-deep);border:1px solid var(--accent-line);} .calc-st-archiviert{background:var(--neutral-wash);color:var(--neutral-text);border:1px solid var(--neutral-line);} /* Termin-Status */ .status-geplant{background:var(--primary-wash);color:var(--primary-press);border:1px solid var(--primary-line);} .status-erledigt{background:var(--accent-wash);color:var(--accent-deep);border:1px solid var(--accent-line);} .status-abgesagt{background:var(--neutral-wash);color:var(--neutral-text);border:1px solid var(--neutral-line);} /* Vertrags-Fristen in der Liste */ .adm-table td.ct-over{color:var(--danger-strong);font-weight:700;} .adm-table td.ct-soon{color:var(--amber-strong);font-weight:600;} .ct-auto{color:var(--primary);font-weight:700;} .ds-status-badge{font-size:12px;margin-left:8px;} /* --- CRM-Picker, Freigabe, Pipeline-Dashboard (Ergänzung) --- */ .of-cust-pick{display:flex;gap:8px;align-items:center;margin:0 0 10px;} .of-cust-pick select{flex:1;min-width:180px;padding:8px 10px;border:1px solid var(--line-strong);border-radius:var(--r-sm);font-size:13px;color:var(--text);background:var(--surface);} .of-freigabe-row{display:flex;align-items:center;gap:10px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line);flex-wrap:wrap;} .of-freigabe-badge{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:600;} .of-freigabe-badge.fb-offen{background:var(--amber-wash);color:var(--amber-text);} .of-freigabe-badge.fb-ok{background:var(--accent-wash);color:var(--accent-deep);} .of-freigabe-badge.fb-no{background:var(--danger-wash,#fbe4dc);color:var(--danger,#C2410C);} .of-freigabe-hint{font-size:12px;color:var(--muted);flex:1;min-width:140px;} #tasks-modal .server-card,#dashboard-modal .server-card{width:min(900px,96vw);} .db-head{display:flex;align-items:center;justify-content:space-between;gap:12px;} .db-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:6px 0 4px;} .db-tile{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:12px 14px;} .db-tile .db-v{font-family:var(--mono);font-size:22px;font-weight:600;color:var(--ink);} .db-tile .db-k{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-top:2px;} .db-status,.db-bereich{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 2px;} .db-chip{display:flex;flex-direction:column;gap:2px;background:var(--surface);border:1px solid var(--line-strong);border-radius:8px;padding:8px 12px;min-width:120px;} .db-chip .c-k{font-size:11px;color:var(--muted);} .db-chip .c-v{font-family:var(--mono);font-size:15px;font-weight:600;color:var(--ink);} .db-chip .c-sub{font-size:11px;color:var(--muted);} @media (max-width:900px){ .db-kpis{grid-template-columns:1fr 1fr;} } .db-firststeps{background:var(--surface);border:1px dashed var(--line-strong);border-radius:10px;padding:14px 16px;} .db-firststeps .fs-title{font-weight:600;color:var(--ink);font-size:13px;margin-bottom:6px;} .db-firststeps .fs-steps{margin:0;padding-left:20px;color:var(--muted);font-size:13px;line-height:1.7;} .linklike{background:none;border:none;padding:0;font:inherit;color:var(--primary);font-weight:600;cursor:pointer;text-decoration:underline;} .linklike:hover{color:var(--primary-press);} /* Retention/Löschkonzept-Ansicht */ .rt-note{font-size:12px;color:var(--muted);background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin:2px 0 8px;} .rt-sub{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:10px 0 4px;font-weight:600;} /* Zweistufiger Löschen-Knopf (Nutzerverwaltung): scharf geschalteter Zustand */ .adm-mini.adm-armed{background:var(--danger-strong);border-color:var(--danger-strong);color:var(--auf-farbe);font-weight:600;} .adm-mini.adm-armed:hover{background:var(--danger-press);} /* zvoove-Abgleich */ .sy-modus{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:4px 0 6px;} .sy-modus .sy-hint{font-size:11.5px;color:var(--muted);} .sy-note{font-size:12px;color:var(--muted);margin:2px 0 8px;} .sy-list{display:flex;flex-direction:column;gap:8px;} .sy-ent{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:var(--surface);} .sy-ent .sy-sub{font-size:11px;color:var(--muted);margin-top:2px;} .sy-fehler{margin-top:8px;padding:10px 12px;border:1px solid var(--danger-line);background:var(--danger-wash);border-radius:9px;font-size:12px;color:var(--danger-text);} .sy-fehler ul{margin:6px 0 0 16px;padding:0;} .adm-table td.sy-err{color:var(--danger-strong);font-weight:700;} /* Hinweis an der Angebots-Schaltfläche (ersetzt native Dialoge) */ .cta-note{margin-top:8px;padding:9px 11px;border-radius:9px;font-size:12px;line-height:1.45;} .cta-note-warn{background:var(--amber-wash);border:1px solid var(--amber-line);color:var(--amber-text);} .cta-note-stop{background:var(--danger-wash);border:1px solid var(--danger-line);color:var(--danger-text);} /* Eigener Bestätigungsdialog (Ersatz für window.confirm) */ #ui-confirm,#ui-prompt{position:fixed;inset:0;background:var(--overlay-stark);display:grid;place-items:center;z-index:2000;} #ui-confirm .uc-card,#ui-prompt .uc-card{background:var(--surface);border-radius:12px;padding:20px 22px;width:min(440px,92vw);box-shadow:var(--sh-lg);} #ui-confirm .uc-text,#ui-prompt .uc-text{font-size:14px;line-height:1.5;color:var(--ink);white-space:pre-line;} #ui-confirm .uc-actions,#ui-prompt .uc-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px;} #ui-confirm .uc-btn,#ui-prompt .uc-btn{appearance:none;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink); border-radius:8px;padding:9px 16px;font:inherit;font-size:13px;cursor:pointer;} #ui-confirm .uc-btn:hover,#ui-prompt .uc-btn:hover{background:var(--paper);} #ui-confirm .uc-ok,#ui-prompt .uc-ok{background:var(--primary);border-color:var(--primary);color:var(--auf-farbe);font-weight:600;} #ui-confirm .uc-ok:hover,#ui-prompt .uc-ok:hover{background:var(--primary-press);} /* Eingabeabfrage: Feld und Fehlerzeile. Alles Uebrige teilt sie sich mit der Rueckfrage darueber - beide sollen sich gleich anfuehlen. */ #ui-prompt .up-feld{width:100%;box-sizing:border-box;margin-top:12px;padding:9px 11px; border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--surface); color:var(--text);font-family:var(--sans);font-size:14px;} #ui-prompt .up-feld:focus{outline:none;border-color:var(--primary);} #ui-prompt .up-fehler{margin-top:6px;font-size:12.5px;color:var(--danger-strong);} #ui-confirm .uc-ok.uc-danger{background:var(--danger-strong);border-color:var(--danger-strong);} #ui-confirm .uc-ok.uc-danger:hover{background:var(--danger-press);} /* Equal-Pay-Rechner */ #equalpay-modal .server-card{width:min(620px,94vw);} .ep-btn{margin-top:6px;font-size:12px;padding:5px 10px;} .ep-intro{font-size:12.5px;color:var(--muted);margin:2px 0 10px;line-height:1.45;} .ep-eingabe{display:flex;align-items:center;gap:6px;} /* Hintergrund ausdruecklich setzen: ohne ihn nimmt das Feld die Vorgabe des Browsers (bei dunkler Darstellung ein anderes Grau als unsere Palette) und faellt neben den Nachbarfeldern auf. */ .ep-eingabe input{flex:1;min-width:0;padding:8px 10px;border:1px solid var(--line-strong);border-radius:var(--r-sm); font-size:13px;color:var(--text);background:var(--feld);text-align:right;font-family:var(--mono);} .ep-eingabe .unit{font-size:12px;color:var(--muted);min-width:26px;} .ep-tab td{padding:6px 8px;border-bottom:1px solid var(--line);} .ep-tab td.r{text-align:right;font-family:var(--mono);white-space:nowrap;} /* Die Zeilen, auf die es ankommt: Stundenentgelt und daraus der Satz */ .ep-tab td.ep-stark{font-weight:700;color:var(--accent-deep);} .ep-tab tr:has(td.ep-stark) td{background:var(--accent-wash);} .ep-tab td.ep-leer{color:var(--muted);text-align:center;font-style:italic;} /* Zulagenliste: Bezeichnung, Betrag, Rhythmus, Entfernen */ .ep-zkopf,.ep-zrow{display:grid;grid-template-columns:1.6fr .9fr .8fr 24px;gap:6px;align-items:center;} .ep-zkopf{padding:0 0 3px;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);} .ep-zkopf span:nth-child(2){text-align:right;} .ep-zrow{margin-bottom:6px;} .ep-zrow input[data-k="bez"],.ep-zrow select{min-width:0;padding:7px 9px;border:1px solid var(--line-strong); border-radius:var(--r-sm);font-size:13px;color:var(--text);background:var(--feld);} .ep-zrow .ep-eingabe input{padding:7px 9px;} #ep_zulage_add{margin:2px 0 4px;font-size:12px;padding:5px 10px;} .ep-hinweis{font-size:12.5px;color:var(--muted);margin:8px 0 0;min-height:1.2em;} .ep-actions{margin-top:14px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;} .ep-actions button[disabled]{opacity:.45;cursor:not-allowed;} /* Hinweismeldungen (uiMeldung) — oben rechts, gestapelt, verschwinden von allein. Liegen ueber allem, auch ueber Dialogen (z-index hoeher als #ui-confirm mit 2000): eine Fehlermeldung, die hinter einem Dialog haengt, waere nutzlos. Farben kommen aus der Palette, damit sie in beiden Fassungen tragen. */ /* Unten rechts, nicht oben: oben klebt die Kopfzeile mit den Menues, und eine Meldung, die sie sieben Sekunden lang verdeckt, steht im Weg. */ #ui-meldungen{position:fixed;bottom:16px;right:16px;z-index:2100;display:flex;flex-direction:column;gap:8px; max-width:min(420px,calc(100vw - 32px));pointer-events:none;} #ui-meldungen .um{pointer-events:auto;display:flex;align-items:flex-start;gap:10px;cursor:pointer; padding:11px 12px;border-radius:10px;border:1px solid var(--line-strong);background:var(--surface); color:var(--ink);box-shadow:var(--sh-pop);font-size:13.5px;line-height:1.45; animation:um-auf .16s ease-out;} @keyframes um-auf{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}} #ui-meldungen .um-fehler{background:var(--danger-wash);border-color:var(--danger-line);color:var(--danger-text);} #ui-meldungen .um-text{flex:1;min-width:0;overflow-wrap:anywhere;} #ui-meldungen .um-zu{flex:0 0 auto;appearance:none;border:none;background:none;cursor:pointer; color:inherit;opacity:.55;font-size:13px;line-height:1;padding:1px 2px;} #ui-meldungen .um-zu:hover{opacity:1;} @media (prefers-reduced-motion:reduce){#ui-meldungen .um{animation:none;}}