:root{ --petrol-900:#081419; --petrol-800:#10262E; --petrol-700:#1A3B46; --petrol-600:#2A5A69; --koralle-700:#B4431F; --koralle-600:#C64E2C; --koralle-400:#FF8163; --koralle-100:#FFE8E1; --marker:#FFF3A8; --papier:#F7F7F4; --weiss:#FFFFFF; --linie:#E5E5DF; --linie-stark:#D2D2C9; --tinte:#191C18; --tinte-2:#5E635B; /* --tinte-3 wurde am 31.07. eigens fuer AA abgedunkelt — und blieb knapp darunter. #737870 erreicht auf WEISS 4,52:1 und besteht; auf den beiden Gruenden, auf denen es wirklich steht, nicht: Kopfzeile #FBFBF8 4,36:1, Papier #F7F7F4 4,21:1. Gefordert sind 4,5:1 fuer Text unter 18,66 px. #6B7068 ist optisch derselbe Grauton und erreicht 4,89 / 4,72 / 5,07 (nachgerechnet nach WCAG 2.1, Issue #44). */ --tinte-3:#6B7068; --ok:#2C7A4B; --warn:#B07D18; --stop:#AF3A2A; --r-s:5px; --r-m:8px; --r-l:12px; --sans:'Geist','Segoe UI',system-ui,sans-serif; --mono:'JetBrains Mono',Consolas,monospace; --schatten:0 1px 2px rgba(25,28,24,.05), 0 2px 8px rgba(25,28,24,.04); } *{margin:0;padding:0;box-sizing:border-box} html,body{height:100%} body{background:var(--papier);color:var(--tinte);font-family:var(--sans);font-size:15px; line-height:1.55;-webkit-font-smoothing:antialiased;overflow:hidden} .app{display:grid;grid-template-columns:220px 1fr;height:100vh} button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;text-align:left} a:focus-visible,button:focus-visible,[tabindex]:focus-visible{ outline:2px solid var(--petrol-600);outline-offset:2px;border-radius:var(--r-s)} @media(prefers-reduced-motion:reduce){*,*:before,*:after{ animation-duration:.01ms!important;transition-duration:.01ms!important}} /* ===== Seitenleiste ===== */ /* Ueber dem Panel-Schleier (z-index 5), damit die Navigation bei offener Schnellansicht erreichbar bleibt. Der Schleier liegt sonst ueber der ganzen Ansicht und faengt JEDEN ersten Klick ab: wer bei offenem Panel auf „Rechnungen" klickt, schliesst nur das Panel und bleibt stehen — der Klick muss zweimal kommen. ADR-0016 wollte das Panel ausdruecklich nicht modal („die Liste bleibt sichtbar"). Die Inhaltsflaeche behaelt den Schleier und schliesst weiterhin per Klick daneben. Leiste und Panel ueberlappen einander nie (Leiste links, Panel rechts), der hoehere Wert kostet also nichts. */ .leiste{background:var(--petrol-800);padding:16px 10px;display:flex;flex-direction:column;overflow:hidden; position:relative;z-index:7} /* Defensiv gegen die generische Listen-.kopfzeile (background/sticky/uppercase) abgeschirmt */ .leiste .kopfzeile{display:flex;align-items:center;justify-content:space-between;padding:2px 2px 16px 10px; background:transparent;border:none;height:auto;position:static;z-index:auto;border-radius:0} .leiste .kopfzeile span{font-family:var(--sans);font-size:15px;letter-spacing:-.2px; text-transform:none;color:#fff;font-weight:600} .leiste .marke{color:#fff;font-weight:600;font-size:15px;letter-spacing:-.2px} .leiste .marke span{color:var(--koralle-400)} .leiste .klapp{width:26px;height:26px;border-radius:var(--r-s);display:flex;align-items:center; justify-content:center;color:#869DA5;flex-shrink:0} .leiste .klapp svg{width:15px;height:15px} .leiste .klapp:hover{background:rgba(255,255,255,.07);color:#C5D5DA} .leiste .suche{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-s); padding:7px 11px;font-size:12.5px;color:#869DA5;margin-bottom:12px;display:flex;justify-content:space-between;width:100%} .leiste .suche em{font-style:normal;font-family:var(--mono);font-size:10.5px;background:rgba(255,255,255,.1); border-radius:3px;padding:0 5px;color:#C6D5DA} /* Eigener Klassenname: "tag" war schon an die Etiketten-Chips vergeben und vererbte Punkt und Rand (#329) */ .leiste .meintag{display:flex;gap:9px;align-items:center;text-align:left;border:0;cursor:pointer;background:rgba(255,129,99,.16); color:#fff;font-weight:500;font-size:14px;padding:8px 11px;border-radius:var(--r-s);width:100%} .leiste .meintag em{font-style:normal;font-family:var(--mono);font-size:11px;background:rgba(255,255,255,.12); color:#C6D5DA;border-radius:99px;padding:1px 7px} .leiste .meintag em{margin-left:auto} .leiste .meintag svg{width:15px;height:15px;flex-shrink:0;color:#FF8163} .leiste .meintag:hover{background:rgba(255,129,99,.22)} /* W6 (ADR-0044): bei null verschwindet die Pille */ .leiste .meintag em:empty{display:none} .leiste .meintag.aktiv{box-shadow:inset 3px 0 0 #FF8163} .leiste .rollbereich{overflow-y:auto;overflow-x:hidden;flex:1;margin:0 -4px;padding:0 4px; scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.16) transparent} /* Scrollbalken der Leiste dezent halten — der helle Standardbalken wirkt auf Petrol wie ein Fremdkörper */ .leiste .rollbereich::-webkit-scrollbar{width:6px} .leiste .rollbereich::-webkit-scrollbar-track{background:transparent} .leiste .rollbereich::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:99px} .leiste .rollbereich::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.28)} .leiste.eng .rollbereich{scrollbar-width:none} .leiste.eng .rollbereich::-webkit-scrollbar{width:0} .leiste .gruppe{font-family:var(--mono);font-size:9.5px;letter-spacing:1.5px;text-transform:uppercase; color:#869DA5;padding:13px 11px 4px} .leiste .pkt{display:flex;align-items:center;gap:9px;padding:5.5px 11px;border-radius:var(--r-s); color:#C5D5DA;font-size:13.5px;position:relative;width:100%} .leiste .pkt .sym{display:flex;flex-shrink:0} .leiste .pkt svg{width:15px;height:15px;flex-shrink:0;color:#A2B7BE} .leiste .pkt.aktiv svg{color:var(--koralle-400)} .leiste .pkt:hover:not(.aktiv){background:rgba(255,255,255,.05)} .leiste .pkt.aktiv{background:rgba(255,255,255,.11);color:#fff;font-weight:500} .leiste .pkt.aktiv:before{content:"";position:absolute;left:-10px;top:5px;bottom:5px;width:3px; background:var(--koralle-400);border-radius:0 2px 2px 0} .leiste .pkt .kz{margin-left:auto;font-family:var(--mono);font-size:9.5px;color:#869DA5; opacity:0;transition:opacity .15s} .leiste .pkt:hover .kz{opacity:1} /* Gruppen einzeln einklappbar (ADR-0041) — Muster aus petrol-grundlage.html */ .leiste .gruppe-h{margin:0} .leiste .gtitel{display:flex;align-items:center;gap:7px;width:100%;background:none;border:none; padding:13px 11px 4px;cursor:pointer;font-family:var(--mono);font-size:9.5px;letter-spacing:1.5px; text-transform:uppercase;color:#869DA5;text-align:left;position:relative} .leiste .gtitel:hover{color:#C5D5DA} .leiste .gtitel:focus-visible{outline:2px solid var(--koralle-400);outline-offset:-2px;border-radius:var(--r-s)} .leiste .gchev{display:flex;flex-shrink:0;transition:transform .15s ease-out} .leiste .gchev svg{width:12px;height:12px} .leiste .gtitel[aria-expanded="false"] .gchev{transform:rotate(-90deg)} .leiste .gname{flex:1;min-width:0} /* Regel 2 aus ADR-0041: Ist die eigene Gruppe zu, traegt die Ueberschrift den Aktiv-Strich */ .leiste .gruppe-h.hat-aktiv .gtitel[aria-expanded="false"]{color:#fff} .leiste .gruppe-h.hat-aktiv .gtitel[aria-expanded="false"]:before{content:"";position:absolute; left:-10px;top:12px;bottom:3px;width:3px;background:var(--koralle-400);border-radius:0 2px 2px 0} .leiste .gliste{list-style:none;margin:0;padding:0} .leiste .gliste[hidden]{display:none} .leiste .trenner{height:1px;background:rgba(255,255,255,.08);margin:11px 8px} .leiste .fuss{margin-top:14px;flex-shrink:0} .leiste .t-timer{display:flex;align-items:center;gap:8px;background:rgba(255,129,99,.16); border-radius:var(--r-s);padding:7px 9px;margin-bottom:8px} .leiste .t-timer .txt{flex:1;min-width:0} .leiste .t-timer .uhr{display:block;font-family:var(--mono);font-size:14.5px;font-weight:500; color:var(--koralle-400);font-variant-numeric:tabular-nums;letter-spacing:-.3px;line-height:1.3} .leiste .t-timer .p{display:block;font-size:11px;color:#FFDCD1;line-height:1.3; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .leiste .t-timer .kuerzel{font-family:var(--mono);font-size:9.5px;letter-spacing:.8px; color:#A2B7BE;flex-shrink:0;align-self:flex-start;padding-top:2px} .leiste .t-timer .halt{width:22px;height:22px;border-radius:4px;flex-shrink:0; border:1px solid rgba(255,129,99,.5);display:flex;align-items:center;justify-content:center} .leiste .t-timer .halt i{width:7px;height:7px;background:var(--koralle-400);border-radius:1px;display:block} .puls{width:7px;height:7px;border-radius:50%;background:var(--koralle-400);flex-shrink:0; animation:atmen 2.4s ease-in-out infinite} @keyframes atmen{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.82)}} @media(prefers-reduced-motion:reduce){.puls{animation:none}} .leiste .fzeile{display:flex;align-items:center;gap:7px;border-top:1px solid rgba(255,255,255,.09);padding-top:10px} .leiste .fz-mandant{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.09);border-radius:var(--r-s);padding:5px 8px;flex:1;min-width:0} .leiste .fz-mandant .kz2{width:20px;height:20px;border-radius:4px;border:1px solid #869DA5; color:#C5D5DA;font-size:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0} .leiste .fz-mandant b{display:block;color:#fff;font-size:12px;font-weight:500;line-height:1.25} .leiste .fz-mandant em{font-style:normal;font-size:9.5px;color:#869DA5;display:block;line-height:1.3} .leiste .fz-av{width:30px;height:30px;border-radius:50%;background:var(--petrol-600);color:#fff; font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0} /* ===== Eingeklappte Leiste (ADR-0022) ===== */ .app{transition:grid-template-columns .2s cubic-bezier(.4,0,.2,1)} .app.eng{grid-template-columns:60px 1fr} .leiste.eng{padding:14px 8px;align-items:center} /* font-size:0 blendet den nackten Textknoten aus, ohne dass er ein eigenes Element braucht */ /* `gap:0` — der Grundwert 9px steht zwischen Zeichen und Beschriftung. Die Beschriftung ist hier zwar auf font-size:0, der Zwischenraum blieb aber: das Zeichen sass dadurch 4,5px links der Mitte, sichtbar schief gegenueber den Kacheln darueber. */ .leiste.eng .pkt{font-size:0;gap:0;justify-content:center;width:44px;height:44px;padding:0;margin:1px 0} .leiste.eng .pkt .sym{font-size:15px} .leiste.eng .pkt .kz{display:none} .leiste.eng .pkt.aktiv:before{left:-8px;top:9px;bottom:9px} /* Die fünf Gruppenüberschriften werden zu Trennlinien. `.gruppe` ist die Klasse der Vorlage; die App baut ihre Navigation seit ADR-0041 aus `.gruppe-h > .gtitel` (aufklappbar, mit Zähler). Diese Regel griff also ins Leere: die Überschriften standen weiter da, in voller Länge, zentriert in 44px — von „VERRECHNUNG" blieb „ERRECHN" übrig, links und rechts abgeschnitten. */ .leiste.eng .gruppe{font-size:0;padding:0;width:26px;height:1px;background:rgba(255,255,255,.14);margin:7px auto} .leiste.eng .gruppe-h{width:26px;height:1px;background:rgba(255,255,255,.14);margin:9px auto;overflow:hidden} .leiste.eng .gtitel{display:none} /* Eine zugeklappte Gruppe versteckt ihre Punkte — eingeklappt gibt es aber keinen Weg, sie wieder aufzuklappen. Also sind hier alle Punkte da; die Gruppe ist nur ein Strich. */ .leiste.eng .gliste[hidden]{display:block} .leiste.eng .trenner{width:26px;margin:7px auto} .leiste.eng .kopfzeile{flex-direction:column;gap:8px;padding:0 0 12px} /* Das Markenzeichen statt eines Buchstabens: der Doppelpfeil von absoluteDYNAMICS, derselbe wie im Reiter. Ein "A" auf Koralle war ein Platzhalter aus der Vorlage. */ .leiste.eng .marke{font-size:0;width:32px;height:32px;background:url('/bild/ady-zeichen.svg') center/contain no-repeat} .leiste.eng .marke span{display:none} .leiste.eng .klapp svg{transform:scaleX(-1)} .leiste.eng .suche{width:44px;height:36px;justify-content:center;padding:0;margin-bottom:8px} .leiste.eng .suche span,.leiste.eng .suche em{display:none} .leiste.eng .suche:before{content:"⌕";font-size:17px;color:#869DA5} .leiste.eng .meintag{width:44px;height:36px;justify-content:center;padding:0;font-size:0;position:relative} /* Der Zähler bleibt neutral (ADR-0021); er zählt die wartenden Antworten (ADR-0044 W6) */ .leiste.eng .meintag:before{content:attr(data-z);font-family:var(--mono);font-size:11px;color:#C6D5DA; background:rgba(255,255,255,.12);border-radius:99px;padding:2px 8px} /* Ohne wartende Antwort stand hier eine leere Kachel — die auffaelligste Flaeche der Leiste sagte nichts. Dann eben das Wort. */ .leiste.eng .meintag[data-z=""]:before{content:"Tag";background:none;padding:0; font-family:var(--mono);font-size:10px;letter-spacing:.5px;color:#FFDCD1} .leiste.eng .meintag em,.leiste.eng .meintag svg{display:none} /* `align-items:center` liess jede Liste auf ihre Inhaltsbreite schrumpfen — der Punkt sass darin mittig, die Liste selbst aber nicht zwingend. Volle Breite, und die Zentrierung macht der Punkt (justify-content:center) allein. */ .leiste.eng .rollbereich{width:100%;display:block} .leiste.eng .gliste{width:100%} .leiste.eng .gliste li{display:flex;justify-content:center} .leiste.eng .t-timer{width:44px;padding:6px 0;justify-content:center;flex-direction:column;gap:3px} .leiste.eng .t-timer .p,.leiste.eng .t-timer .kuerzel,.leiste.eng .t-timer .halt{display:none} .leiste.eng .t-timer .uhr{font-size:10px;letter-spacing:-.2px} .leiste.eng .fzeile{flex-direction:column;gap:8px;width:100%} .leiste.eng .fz-mandant{width:44px;justify-content:center;padding:5px 0;flex:none} .leiste.eng .fz-mandant b,.leiste.eng .fz-mandant em{display:none} /* Traegt die Firma ein Zeichen, steht es hier statt des Kuerzels — dieselbe Regel wie auf der Rechnung (nur ADY hat eins hinterlegt). */ .leiste .fz-mandant .kz2.zeichen{border:none;background:url('/bild/ady-zeichen.svg') center/contain no-repeat; font-size:0} .leiste.eng .fz-mandant .kz2.zeichen{width:26px;height:26px} /* Hinweis beim Überfahren — verbindlich (ADR-0022), trägt Name und Tastenkürzel. Als schwebendes Element gebaut, weil der Rollbereich sonst seitlich abschneidet. */ .schwebe-tip{position:fixed;background:var(--petrol-900);color:#fff;font-size:12.5px; padding:5px 10px;border-radius:5px;white-space:nowrap;z-index:60;display:none; box-shadow:0 4px 14px rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.12); pointer-events:none;transform:translateY(-50%)} .schwebe-tip.an{display:block} /* ===== Arbeitsfläche ===== */ /* Quer wird gerollt, nicht abgeschnitten. `overflow-x:hidden` machte alles, was breiter war als die Flaeche, unerreichbar — bei 1180px Fensterbreite fehlten der Projektliste 26px, und die letzte Spalte war mit keiner Geste zu holen. `auto` zeigt den Balken nur, wenn wirklich etwas ueberhaengt. Die haftende Kopfzeile bleibt davon unberuehrt: die Flaeche ist wegen `overflow-y:auto` ohnehin schon der Rollbereich, an dem sie klebt. */ .flaeche{position:relative;overflow-y:auto;overflow-x:auto} .ansicht{display:none;padding:22px 30px 60px;max-width:1240px} .ansicht.an{display:block} /* Breiten-Weiche A (31.07.): Tabellen/Boards nutzen die volle Breite, Fließtext behält seine Lesebreite (die steht ohnehin an den Textblöcken selbst). Wird später eine persönliche EINSTELLUNG — der Umschalter unten rechts ist der Vorläufer davon und bewusst klein und leise, damit er beim längeren Mitlaufen nicht stört. */ .flaeche.weit .ansicht{max-width:1760px} .breiten-schalter{position:fixed;bottom:10px;right:12px;z-index:40;display:flex;align-items:center; border:1px solid var(--linie);border-radius:99px;overflow:hidden;background:var(--weiss); box-shadow:0 1px 4px rgba(25,28,24,.10);opacity:.34;transition:opacity .18s ease-out} .breiten-schalter:hover,.breiten-schalter:focus-within{opacity:1} .breiten-schalter button{padding:2px 9px;background:transparent;color:var(--tinte-3); border:none;cursor:pointer;font-family:var(--mono);font-size:9.5px;letter-spacing:.5px; line-height:1.7} .breiten-schalter button.an{background:var(--petrol-800);color:#fff} .breiten-schalter .messwert{padding:2px 9px 2px 7px;font-family:var(--mono);font-size:9px; color:var(--tinte-3);white-space:nowrap;display:none} .breiten-schalter:hover .messwert{display:block} /* Start */ .start{display:flex;flex-direction:column;align-items:center;justify-content:center; height:100%;text-align:center;padding:40px} .start h1{font-size:27px;font-weight:600;letter-spacing:-.5px;margin-bottom:8px} .start p{font-size:15px;color:var(--tinte-2);max-width:56ch;line-height:1.7;margin-bottom:22px} .start .weg{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--tinte-2); background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r-m);padding:12px 18px} .start .weg b{color:var(--tinte);font-weight:600} .start .weg .pf{color:var(--linie-stark)} /* Kopf der Liste */ .kopf{display:flex;align-items:baseline;gap:14px;margin-bottom:16px} .kopf h1{font-size:27px;font-weight:600;letter-spacing:-.5px} .kopf .anzahl{font-size:14px;color:var(--tinte-2)} .kopf .rechts{margin-left:auto} .btn{font-size:13.5px;font-weight:500;padding:7px 15px;border-radius:var(--r-s); border:1px solid var(--linie-stark);background:var(--weiss);color:var(--tinte)} .btn.primaer{background:var(--petrol-800);border-color:var(--petrol-800);color:#fff} .suchfeld{display:flex;align-items:center;gap:12px;background:var(--weiss);border:1px solid var(--linie-stark); border-radius:var(--r-m);padding:12px 16px;margin-bottom:14px;box-shadow:var(--schatten)} .suchfeld svg{width:19px;height:19px;color:var(--tinte-3);flex-shrink:0} .suchfeld input{border:none;outline:none;font-family:var(--sans);font-size:16px;flex:1;color:var(--tinte);background:transparent} .suchfeld input::placeholder{color:var(--tinte-3)} .suchfeld:focus-within{border-color:var(--petrol-600);box-shadow:0 0 0 3px rgba(42,90,105,.13)} .ansichten{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:14px} .chip{font-size:13px;padding:5px 13px;border-radius:99px;border:1px solid var(--linie); background:var(--weiss);color:var(--tinte-2)} .chip.on{background:var(--petrol-800);border-color:var(--petrol-800);color:#fff;font-weight:500} .chip .n{font-family:var(--mono);font-size:11px;opacity:.75} .chip.neu{border-style:dashed;color:var(--tinte-3)} .werkzeuge-re{margin-left:auto;display:flex;gap:4px} .werkzeug{font-size:12.5px;color:var(--tinte-2);padding:5px 11px;border-radius:var(--r-s); border:1px solid transparent;display:flex;align-items:center;gap:6px} .werkzeug:hover{background:var(--weiss);border-color:var(--linie)} .werkzeug svg{width:14px;height:14px} /* Tabelle — overflow bleibt sichtbar, sonst kann die Kopfzeile nicht haften */ .tabelle{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r-l); box-shadow:var(--schatten)} .kopfzeile,.zeile,.summe{display:grid;grid-template-columns:30px minmax(190px,2.2fr) 118px 104px 56px 84px 66px; gap:14px;padding:0 16px;align-items:center} /* Kundenlogo in der Zeile — Gegenstück zum Foto-Kreis der Kontakte, eckig weil Marke */ .zeile .klogo{width:24px;height:24px;border-radius:6px;background:var(--petrol-700);color:#fff; font-size:10.5px;font-weight:600;display:flex;align-items:center;justify-content:center; flex-shrink:0;overflow:hidden} .zeile .klogo.bild{background:var(--weiss);border:1px solid var(--linie-stark);padding:2px} .zeile .klogo svg{width:100%;height:100%;display:block} .akt-w{font-family:var(--mono);font-size:12px;color:var(--tinte-2);text-align:right;white-space:nowrap} .akt-w.still{color:var(--koralle-700);font-weight:500} /* Gruppierte Ansicht — Kopf je Gruppe, per Werkzeug umschaltbar */ .g-kopf{display:flex;align-items:center;gap:10px;padding:8px 16px;background:#F1F4F3; border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);font-size:13px} .g-kopf .pf{font-size:9px;color:var(--tinte-3)} .g-kopf b{font-family:var(--mono);font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;font-weight:600} .g-kopf .n{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--tinte-3)} .werkzeug.an{background:var(--weiss);border-color:var(--linie-stark);color:var(--tinte);font-weight:500} .kopfzeile{background:#FBFBF8;border-bottom:1px solid var(--linie);height:36px; position:sticky;top:0;z-index:2;border-radius:var(--r-l) var(--r-l) 0 0} .summe{border-radius:0 0 var(--r-l) var(--r-l)} .kopfzeile span{font-family:var(--mono);font-size:9.5px;letter-spacing:1.2px;text-transform:uppercase; color:var(--tinte-3);font-weight:500;display:flex;align-items:center;gap:5px} .kopfzeile .sortiert{color:var(--tinte);font-weight:600} /* Ohne Hinweis findet niemand, dass die Kopfzeile sortiert — Leon hat wochenlang gedacht, es gaebe die Funktion nicht. Beim Ueberfahren erscheint ein blasser Pfeil; die sortierte Spalte traegt ihren eigenen, kraeftigen (LW.sortpfeil). Wer mit Tab kommt, ueberfaehrt nichts: Ihm zeigt der Kopf den Pfeil, sobald sein Knopf den Fokus hat (#244). */ .kopfzeile [role=columnheader]{position:relative} /* Deckkraft von .45 auf .75: bei .45 kam der Pfeil auf 1,85:1 heraus und war damit kaum zu sehen — er sollte ja gerade zeigen, DASS hier sortiert wird. Eine dunklere Farbe allein half nicht: unter .75 traegt keine Farbe genug (Issue #44). */ .kopfzeile [role=columnheader]:not(.sortiert):is(:hover,:has(.lw-sortknopf:focus-visible)):after{ content:"\2195";font-size:9px;opacity:.75;margin-left:5px} .kopfzeile .re{justify-content:flex-end} .kasten{width:14px;height:14px;border:1.5px solid var(--linie-stark);border-radius:3px;background:var(--weiss)} .zeile{height:38px;border-bottom:1px solid var(--linie);width:100%;cursor:pointer; transition:background-color .15s ease-out,box-shadow .15s ease-out} .zeile:last-of-type{border-bottom:none} .zeile:hover{background:#F4F6F5;box-shadow:inset 2px 0 0 var(--petrol-600)} .zeile:active{background:#EDF1EF} .zeile.offen{background:#EDF1EF;box-shadow:inset 3px 0 0 var(--koralle-600)} .zeile .kunde{display:flex;align-items:baseline;gap:8px;min-width:0} .zeile .marke{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .zeile:hover .marke{color:var(--petrol-700)} .zeile .traeger{font-size:12.5px;color:var(--tinte-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .zeile .fokus{width:16px;height:16px;border-radius:3px;background:var(--koralle-100);color:var(--koralle-700); font-family:var(--mono);font-size:9.5px;font-weight:500;display:flex;align-items:center; justify-content:center;flex-shrink:0} .zeile .betreuer{font-size:13px;color:var(--tinte-2);display:flex;align-items:center;gap:7px;min-width:0} .zeile .bav{width:20px;height:20px;border-radius:50%;background:var(--petrol-600);color:#fff; font-size:8px;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0} /* Aktionen beim Überfahren — Ausstattungskatalog "enthalten", jetzt auch im Prototyp */ .zeile .akt-h{display:flex;gap:4px;justify-content:flex-end;opacity:0;transition:opacity .15s ease-out} .zeile:hover .akt-h,.zeile:focus-within .akt-h,.zeile:focus-visible .akt-h{opacity:1} .zeile .akt-h button{width:26px;height:26px;border:1px solid var(--linie);border-radius:var(--r-s); background:var(--weiss);display:flex;align-items:center;justify-content:center;color:var(--tinte-2); flex-shrink:0;padding:0} .zeile .akt-h button:hover{border-color:var(--petrol-600);color:var(--petrol-700)} .zeile .akt-h svg{width:13px;height:13px} .zeile .mand{font-family:var(--mono);font-size:11px;color:var(--tinte-3)} /* Seit ADR-0049 W3 stehen hier mehrere Kuerzel — bei vier Firmen laeuft die Zelle sonst in die naechste Spalte. Der volle Satz steht im title. */ .zeile>.mand{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* #123: Jede Firma als Chip, ganz in ihrer Farbe hinterlegt — Leon, 28.09.: „dass man direkt sieht: Okay, das ist ADYX, das ist ADYZEN". Der Punkt von #116 war zu leise. Die Schrift ist weiss; jede Firmenfarbe haelt dazu mindestens 4,5:1 (Test). */ .mkz{display:inline-block;padding:1.5px 7px;border-radius:99px; background:var(--m-farbe,var(--tinte-3));color:#fff;font-family:var(--mono);font-size:10.5px; font-weight:600;letter-spacing:.04em;line-height:17px;white-space:nowrap;vertical-align:middle} .zeile .re{text-align:right;font-family:var(--mono);font-size:13px} .summe{height:40px;background:#FBFBF8;border-top:1px solid var(--linie-stark)} .summe .label{font-size:13px;color:var(--tinte-2);font-weight:500} /* Kontakt-Tabelle — gleiche Zeilen, eigene Spalten */ .t-kt .kopfzeile,.t-kt .zeile,.t-kt .summe{ grid-template-columns:30px minmax(190px,1.7fr) minmax(170px,1.5fr) 116px 136px 60px} /* Nachzupflegen-Tabelle — drei Spalten. Ohne eigenes Raster erbt sie das der Kundenliste, und der Name steht in deren 30px-Auswahlspalte: er bricht um, die Zeile bleibt bei 38px, alles schiebt sich uebereinander. */ .t-uv .kopfzeile,.t-uv .zeile{grid-template-columns:minmax(150px,1fr) minmax(240px,3fr) 62px} .t-uv .fehlz{display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden; font-size:12.5px;color:var(--tinte-2)} .t-uv .fitem{background:var(--weiss);border:1px solid #F3C9BB;border-radius:99px; padding:2px 10px;cursor:pointer;color:var(--tinte);font-size:12px;font-family:var(--sans); white-space:nowrap;flex-shrink:0} .t-uv .fitem:hover{border-color:var(--koralle-600);color:var(--koralle-700)} .t-uv .zeile.weiter{cursor:default;color:var(--tinte-3)} .t-uv .zeile.weiter:hover{background:none;box-shadow:none} .t-uv .zeile.weiter .fehlz{white-space:nowrap;text-overflow:ellipsis;color:var(--tinte-3)} /* Lieferanten-Tabelle (30.07., ADR-0024/0025) — gleiche Zeilen, eigene Spalten */ .t-lf .kopfzeile,.t-lf .zeile,.t-lf .summe{ grid-template-columns:30px minmax(160px,2fr) 138px 104px 56px 92px 92px 52px} .t-lf .frist{font-size:12px} .t-lf .frist.bald{color:var(--koralle-700);font-weight:500} /* Projekt-Tabelle (30.07., ADR-0026) — gleiche Zeilen, eigene Spalten */ .t-pj .kopfzeile,.t-pj .zeile,.t-pj .summe{ grid-template-columns:30px minmax(170px,1.5fr) minmax(110px,1fr) 96px 148px 72px 112px 60px 60px} .t-pj .pjz{display:flex;align-items:baseline;gap:8px;min-width:0} .t-pj .pjz .nauf{font-family:var(--mono);font-size:10.5px;color:var(--tinte-3);white-space:nowrap} .t-pj .pjz .prioh{flex-shrink:0;display:inline-flex} .t-pj .pjz .prioh svg{width:11px;height:11px;fill:var(--stop)} .t-pj .typz{font-size:12px;color:var(--tinte-2);white-space:nowrap} .t-pj .standz{display:flex;flex-direction:column;gap:3px;justify-content:center;min-width:0} .t-pj .standz .w{font-family:var(--mono);font-size:11.5px;font-variant-numeric:tabular-nums; line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .t-pj .standz .w em{font-style:normal;color:var(--tinte-3);font-size:10.5px} .t-pj .standz .balken{height:3.5px} .t-pj .werz{display:flex;align-items:center} .t-pj .werz .bav{border:1.5px solid var(--weiss);margin-left:-5px} .t-pj .werz .bav:first-child{margin-left:0} .t-pj .werz .ohne{width:20px;height:20px;border-radius:50%;border:1.5px dashed #E0C4BF; color:var(--stop);font-size:11px;display:flex;align-items:center;justify-content:center} .stz{font-size:11px;font-weight:500;padding:1.5px 8px;border-radius:99px;display:inline-flex; align-items:center;gap:5px;white-space:nowrap;justify-self:start} .stz:before{content:"";width:4px;height:4px;border-radius:50%;background:currentColor;flex-shrink:0} .stz.laeuft{background:#EEF2F1;color:var(--petrol-700)} .stz.pruef{background:var(--koralle-100);color:var(--koralle-700)} .stz.still{background:#F2F2EE;color:var(--tinte-2)} /* ===== Stern an Zeilen (Kunden, Kontakte) ===== */ /* #100: der Stern ist ein Knopf. Er sitzt weiter wie ein Zeichen in der Zeile — kein Rahmen, kein Grund —, reagiert aber auf Maus und Tastatur. #114: derselbe Knopf steht jetzt auch in der Kunden- und der Kontaktliste. Die Regeln haengen darum an der Klasse, nicht an der Leads-Tabelle. */ /* #124: eine Zeichnung statt des Zeichens ★ — 14 px, im Knopf mittig und in der Zeile senkrecht zentriert, egal wie die Nachbarn an ihrer Grundlinie haengen. */ .sternf{color:#8A6210;flex-shrink:0;background:none;border:0;padding:0; border-radius:3px;display:inline-flex;align-items:center;justify-content:center; width:16px;height:16px;align-self:center;vertical-align:middle} .sternf svg{width:14px;height:14px;fill:currentColor;stroke:currentColor;stroke-width:1.6; stroke-linejoin:round} .sternf.leer svg{fill:none} .ag-stern svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round} .ag-stern.an svg{fill:currentColor} /* #239: nur der Knopf antwortet auf die Maus — der Stern als reines Zeichen bleibt still. */ button.sternf{cursor:pointer} button.sternf:hover{color:var(--koralle-600)} .sternf:focus-visible{outline:2px solid var(--petrol-600);outline-offset:2px} /* In Ruhe unsichtbar, sonst wäre die Liste unruhig — beim Überfahren der Zeile aber auffindbar, sonst käme niemand auf die Idee, dort zu klicken. #124: `.zeile` davor, sonst gewinnt die spaetere, gleich schwere Regel `.zeile .leer` der grauen Platzhalter — seit #114 stand der leere Stern so grau in jeder Zeile. */ .zeile .sternf.leer{color:transparent} .zeile:hover .sternf.leer, .zeile:focus-within .sternf.leer{color:var(--tinte-2)} .stz.neuz{background:#EDF1F4;color:var(--petrol-600)} .stz.angeb{background:#E2ECEF;color:var(--petrol-800)} /* petrolig — Grün gehört exklusiv "Gewonnen" */ .balken .fuell.ueber{background:var(--stop)} .g-kopf .plus{margin-left:8px;width:20px;height:20px;border:1px solid var(--linie-stark); border-radius:4px;display:flex;align-items:center;justify-content:center;color:var(--tinte-3); font-size:13px;background:var(--weiss);cursor:pointer;padding:0} .g-kopf .plus:hover{border-color:var(--koralle-600);color:var(--koralle-700);background:var(--koralle-100)} .g-kopf.zu{color:var(--tinte-2)} .t-pj .zeile.intern .marke{color:var(--tinte-2);font-weight:400} .t-pj .zeile.intern .typz,.t-pj .zeile.intern .kd-i{color:var(--tinte-3)} .t-pj .kd-i{font-size:13px;color:var(--tinte-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .t-pj .kd-i .mand{font-family:var(--mono);font-size:10.5px;color:var(--tinte-3);margin-left:6px} /* Projektseite: Kennzahlenband + Aufgabenzeilen (aus projektseite.html übernommen) */ .pjband{border-top:1px solid var(--linie);border-bottom:1px solid var(--linie); padding:15px 0 16px;margin-bottom:22px} .pjband .zeile1{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;margin-bottom:9px} .pjband .gross{font-family:var(--mono);font-size:25px;font-weight:500;letter-spacing:-.6px;line-height:1} .pjband .einheit{font-family:var(--mono);font-size:15px;color:var(--tinte-2)} .pjband .neben{font-size:13.5px;color:var(--tinte-2)} .pjband .neben b{color:var(--tinte);font-weight:500} .pjband .re2{margin-left:auto;font-size:13px;color:var(--tinte-2);text-align:right} .pjband .re2 b{display:block;color:var(--tinte);font-weight:500;font-size:13.5px} .pjband .marke2{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px; color:var(--tinte-3);margin-top:5px} .zt-pill{font-family:var(--mono);font-size:10px;color:var(--tinte-2);background:#EFEFEA; border-radius:99px;padding:1px 7px;letter-spacing:0} /* Schnellansicht von Lead und Projekt: kompaktes Band + Zuletzt-Zeilen. Das Band steht in .pband (Flex) und bekam dort nur seine Inhaltsbreite, .neben klebte links (#134). */ .ppband{flex:1;padding:0 0 4px} .ppband .z1{display:flex;align-items:baseline;gap:8px;margin-bottom:7px} .ppband .gross{font-family:var(--mono);font-size:19px;font-weight:500;letter-spacing:-.4px;line-height:1} .ppband .einheit{font-family:var(--mono);font-size:12.5px;color:var(--tinte-2)} .ppband .neben{margin-left:auto;font-size:11.5px;color:var(--tinte-2)} .ppband .marke2{display:flex;justify-content:space-between;font-family:var(--mono);font-size:9.5px; color:var(--tinte-3);margin-top:4px} .pverl{padding:5px 0;font-size:12.5px;color:var(--tinte-2)} .pverl .d{font-family:var(--mono);font-size:10.5px;color:var(--tinte-3);margin-right:7px} /* Anlege-Panel (30.07., ADR-0027 — Schnellanlage im Panel, D+B) */ /* 440 px wie in der entschiedenen Ausführung (projekt-anlegen.html) — die kurze Form braucht keine Schnellansicht-Breite; Felder blieben sonst gestreckt und leer */ #npanel{width:440px;max-width:94vw} .npfeld{margin-bottom:13px} .npfeld label{display:block;font-size:12px;font-weight:500;color:var(--tinte);margin-bottom:5px} .npfeld label em{font-style:normal;color:var(--koralle-700)} .npfeld label .opt{font-weight:400;color:var(--tinte-3);font-size:11.5px} .nein{display:flex;align-items:center;gap:8px;border:1px solid var(--linie-stark); border-radius:var(--r-s);padding:8px 11px;font-size:13.5px;background:var(--weiss); cursor:pointer;width:100%;text-align:left;font-family:var(--sans);color:var(--tinte)} .nein:hover{border-color:var(--tinte-3)} .nein .pfeil2{margin-left:auto;color:var(--tinte-3);font-size:11px} .nein .avk{width:20px;height:20px;border-radius:50%;background:var(--petrol-700);color:#fff; font-size:8px;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0} .nein.leer{color:var(--tinte-3)} input.nein{cursor:text} input.nein:focus{outline:none;border-color:var(--petrol-600);box-shadow:0 0 0 3px rgba(42,90,105,.13)} /* Segmente wie in der Ausführung: helle Einzel-Chips, Auswahl getönt statt dunkel gefüllt */ .nseg{display:grid;grid-template-columns:repeat(4,1fr);gap:5px} .nseg button{padding:7px 4px;font-size:12.5px;background:var(--weiss); border:1px solid var(--linie-stark);border-radius:var(--r-s); color:var(--tinte-2);cursor:pointer;font-family:var(--sans);text-align:center} .nseg button:hover:not(.akt){background:#F3F3EF;border-color:var(--tinte-3)} .nseg button.akt{background:#EEF2F1;border-color:var(--petrol-600);color:var(--petrol-700);font-weight:600} .nhin{font-size:11.5px;color:var(--tinte-3);margin-top:5px;line-height:1.5} .nhin b{color:var(--tinte-2);font-weight:500} .kontext-chip{font-size:10.5px;font-family:var(--mono);background:var(--koralle-100); color:var(--koralle-700);border-radius:99px;padding:1px 7px;margin-left:auto} .npfuss{display:flex;align-items:center;gap:8px;padding:12px 22px;border-top:1px solid var(--linie); background:#FCFCFA} .npfuss .enter{font-family:var(--mono);font-size:10.5px;color:var(--tinte-3);margin-right:auto} .ok-zeile{font-size:12px;font-weight:500;color:var(--ok);margin-bottom:8px;display:flex; align-items:center;gap:6px} .fehlt-block{border:1px dashed var(--linie-stark);border-radius:var(--r-m);padding:11px 14px;margin:14px 0} .fehlt-block .ft{font-family:var(--mono);font-size:10px;letter-spacing:1.3px;text-transform:uppercase; color:var(--koralle-700);font-weight:600;margin-bottom:7px} .fehlt-block .fi{font-size:13px;padding:4px 0;cursor:pointer;color:var(--tinte)} .fehlt-block .fi:hover{color:var(--petrol-700);text-decoration:underline;text-underline-offset:3px} .fehlt-block .fi em{font-style:normal;color:var(--tinte-3);font-size:12px} /* Fehlt-Leiste auf der Seite (Stufe 2) */ .fehltband{display:flex;align-items:center;gap:9px;padding:8px 22px;background:var(--koralle-100); border-bottom:1px solid #F3C9BB;font-size:12.5px;flex-wrap:wrap} .fehltband .fb{font-weight:600;color:var(--koralle-700)} .fehltband .fitem{background:var(--weiss);border:1px solid #F3C9BB;border-radius:99px; padding:2px 10px;cursor:pointer;color:var(--tinte);font-size:12px;font-family:var(--sans)} .fehltband .fitem:hover{border-color:var(--koralle-600);color:var(--koralle-700)} .fehltband .fitem.done{color:var(--tinte-3);text-decoration:line-through;cursor:default} .fehltband .zu2{margin-left:auto;font-size:11.5px;color:var(--koralle-700);cursor:pointer; background:none;border:none;font-family:var(--sans)} .leerz{border:1px dashed var(--linie-stark);border-radius:var(--r-m);padding:18px 16px; text-align:center;font-size:13px;color:var(--tinte-3)} .leerz b{display:block;color:var(--tinte-2);font-weight:500;margin-bottom:2px} .leerz button{margin-top:9px;border:1px solid var(--koralle-600);background:var(--koralle-100); color:var(--koralle-700);border-radius:var(--r-s);padding:5px 12px;font-size:12.5px; font-weight:500;cursor:pointer;font-family:var(--sans)} /* Kennzahlenband des Lieferanten: Was kostet uns das laufend? */ .band{border-top:1px solid var(--linie);border-bottom:1px solid var(--linie); padding:15px 0 16px;margin-bottom:22px} .band .zeile1{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap} .band .gross{font-family:var(--mono);font-size:25px;font-weight:500;letter-spacing:-.6px;line-height:1} .band .einheit{font-family:var(--mono);font-size:15px;color:var(--tinte-2)} .band .neben{font-size:13.5px;color:var(--tinte-2)} .band .neben b{color:var(--tinte);font-weight:500} .band .rechts{margin-left:auto;font-size:13px;color:var(--tinte-2);text-align:right} .band .rechts b{display:block;color:var(--tinte);font-weight:500;font-size:13.5px} .zeile .nmz{display:flex;align-items:center;gap:8px;min-width:0} /* Kontaktbild: Foto wenn hinterlegt, sonst Initialen auf Petrol — die Liste wirkt nie löchrig */ .zeile .kav{width:24px;height:24px;border-radius:50%;background:var(--petrol-600);color:#fff; font-size:8.5px;font-weight:600;display:flex;align-items:center;justify-content:center; flex-shrink:0;overflow:hidden} .zeile .kav.a{background:var(--petrol-700)} .zeile .kav.c{background:#3F6E7C} .zeile .kav svg,.zeile .kav img{width:100%;height:100%;display:block} .zeile .nm{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .zeile:hover .nm{color:var(--petrol-700)} .zeile .stern{color:var(--koralle-600);font-size:11px;flex-shrink:0} .zeile .kd{font-size:13px;color:var(--tinte-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .zeile .kd.frei{color:var(--tinte-3);font-style:italic} .zeile .kd em{font-style:normal;color:var(--tinte-3);font-size:12px} .zeile .funk{font-size:13px;color:var(--tinte-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .zeile .tel{font-family:var(--mono);font-size:12.5px;color:var(--tinte-2);white-space:nowrap} .zeile .leer{color:var(--tinte-3)} .unterleiste{display:flex;align-items:center;gap:16px;margin-top:12px;font-size:12.5px;color:var(--tinte-3)} kbd{font-family:var(--mono);font-size:10.5px;background:#EEEEE9;border:1px solid var(--linie); border-radius:3px;padding:1px 5px;color:var(--tinte-2)} /* ===== Panel ===== */ .schleier{position:fixed;inset:0;background:rgba(8,20,25,.22);opacity:0;pointer-events:none; transition:opacity .2s ease-out;z-index:5} .schleier.an{opacity:1;pointer-events:auto} .panel{position:fixed;top:0;right:0;bottom:0;width:58%;max-width:780px;background:var(--weiss); display:flex;flex-direction:column;z-index:6; transform:translateX(100%);transition:transform .22s cubic-bezier(.4,0,.2,1)} /* Schatten erst im geoeffneten Zustand: sonst faellt er vom zugeklappten Panel auf die Seite */ .panel.an{transform:translateX(0);box-shadow:-18px 0 50px rgba(8,20,25,.24)} /* #169 C: die Aufgabe ist schmaler — man arbeitet sie ab, die Liste daneben bleibt sichtbar */ .panel.aufgabe{width:46%;max-width:620px;min-width:min(460px,100%)} .pkopf{display:flex;align-items:center;gap:11px;padding:12px 22px;border-bottom:1px solid var(--linie); background:#FBFBF8;flex-shrink:0} .pkopf .zu{width:26px;height:26px;border-radius:var(--r-s);display:flex;align-items:center; justify-content:center;font-size:16px;color:var(--tinte-3)} .pkopf .zu:hover{background:#EFEFEA;color:var(--tinte)} .pkopf .pf{display:flex;gap:3px} .pkopf .pf span{border:1px solid var(--linie);border-radius:3px;padding:1px 8px;font-size:11.5px; color:var(--tinte-2);background:var(--weiss);font-family:var(--mono)} .pkopf .pos{font-size:12.5px;color:var(--tinte-3)} .pkopf .voll{margin-left:auto;font-size:13px;color:var(--petrol-700);border:1px solid var(--linie-stark); border-radius:var(--r-s);padding:6px 15px;background:var(--weiss);font-weight:500} .pkopf .voll:hover{border-color:var(--petrol-600);background:#F4F6F5} .pinhalt{padding:22px 26px;overflow:auto;flex:1} .pkunde{display:flex;align-items:center;gap:14px;margin-bottom:18px} .pkunde .logo{width:52px;height:52px;border-radius:12px;background:var(--weiss); border:1px solid var(--linie-stark);display:flex;align-items:center;justify-content:center; flex-shrink:0;padding:8px} .pkunde .logo svg{width:100%;height:100%} .pkunde h2{font-size:21px;font-weight:600;letter-spacing:-.3px;line-height:1.2} .pkunde h2 span{font-size:14px;color:var(--tinte-2);font-weight:400} .pkunde .sub{font-size:13px;color:var(--tinte-2);display:flex;align-items:center;gap:4px 8px;margin-top:2px; flex-wrap:wrap} /* Kontaktbild im Panelkopf — rund statt Firmenlogo-Kachel */ .pkunde .pav-g{width:52px;height:52px;border-radius:50%;background:var(--petrol-700);color:#fff; font-size:16px;font-weight:600;display:flex;align-items:center;justify-content:center; flex-shrink:0;overflow:hidden} .pkunde .pav-g svg{width:100%;height:100%;display:block} .pkunde .sub .stern{color:var(--koralle-600);font-size:11px} .pers .hap{font-size:11px;font-weight:500;color:var(--koralle-700);background:var(--koralle-100); border-radius:99px;padding:2px 9px;white-space:nowrap;flex-shrink:0} .paktionen{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:20px} .akt{border:1px solid var(--linie-stark);border-radius:var(--r-m);padding:11px 6px;text-align:center; font-size:12.5px;font-weight:500;background:var(--weiss);display:flex;flex-direction:column; align-items:center;gap:6px;color:var(--tinte)} .akt svg{width:17px;height:17px;color:var(--tinte-2)} .akt:hover{border-color:var(--tinte-3)} .akt.signal{border-color:var(--koralle-600);background:var(--koralle-100);color:var(--koralle-700)} .akt.signal svg{color:var(--koralle-700)} .pband{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;padding:13px 0; border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);margin-bottom:20px} .pband .gross{font-family:var(--mono);font-size:23px;font-weight:500;letter-spacing:-.5px} .pband .neben{font-size:13.5px;color:var(--tinte-2)} .pband .neben b{color:var(--tinte);font-weight:500} h3.gr{font-family:var(--mono);font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase; color:var(--tinte);font-weight:600;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--linie)} .pblock{margin-bottom:22px} .pers{display:flex;align-items:center;gap:11px;padding:6px 7px;margin:0 -7px;border-radius:var(--r-s)} .pers:hover{background:#EDF1EF} .pers .pav{width:30px;height:30px;border-radius:50%;background:var(--petrol-700);color:#fff; font-size:10.5px;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0} .pers .info{flex:1;min-width:0} .pers .nm{font-size:14px;font-weight:500} .pers .ro{font-size:12px;color:var(--tinte-2)} .pers .tel{font-family:var(--mono);font-size:13px;color:var(--tinte-2)} .pers .stern{color:var(--koralle-600);font-size:11px} .pproj{display:grid;grid-template-columns:1fr 150px;gap:16px;align-items:center;padding:9px 0; border-top:1px solid var(--linie)} .pproj:first-of-type{border-top:none} .pproj .nm{font-size:14px;font-weight:500;color:var(--petrol-700)} .pproj .un{font-size:12.5px;color:var(--tinte-3)} .pproj .kennz{text-align:right;font-family:var(--mono);font-size:13px} .pproj .kennz em{font-style:normal;color:var(--tinte-3);font-size:11.5px} /* Panel-Projekte: gemeinsame Form (Zahl über Balken) und klickbar wie überall */ .pproj{cursor:pointer;border-radius:var(--r-s);padding-left:8px;padding-right:22px;margin:0 -8px; position:relative;transition:background-color .15s ease-out} .pproj:hover{background:#F4F6F5} .pproj:after{content:"›";position:absolute;right:6px;top:50%;transform:translateY(-50%); color:var(--linie-stark);font-size:16px;transition:color .15s ease-out} .pproj:hover:after{color:var(--petrol-700)} .pproj .kennz .wert{display:block;margin-bottom:4px} .pers{cursor:pointer;border-radius:var(--r-s);width:100%;text-align:left} .pers:hover .nm{color:var(--petrol-700)} .weiter{background:var(--papier);border-radius:var(--r-m);padding:12px 15px;font-size:13.5px; color:var(--tinte-2);display:flex;align-items:center;gap:12px} .weiter b{color:var(--tinte)} .weiter .pf{margin-left:auto;color:var(--petrol-700);font-weight:500;font-size:13px} /* ===== Kundenseite ===== */ .seite{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r-l); box-shadow:var(--schatten);overflow:hidden} .skopfleiste{display:flex;align-items:center;gap:10px;padding:9px 22px;border-bottom:1px solid var(--linie); background:#FBFBF8;font-size:12.5px;color:var(--tinte-3)} .skopfleiste .brot{display:flex;align-items:center;gap:7px} .skopfleiste .brot button{color:var(--petrol-700);font-size:12.5px} .skopfleiste .brot button:hover{text-decoration:underline} .skopfleiste .rechts{margin-left:auto;display:flex;gap:6px;align-items:center} .kn{border:1px solid var(--linie-stark);border-radius:var(--r-s);padding:4px 11px; background:var(--weiss);color:var(--tinte-2);font-size:12.5px;white-space:nowrap} .buehne{display:grid;grid-template-columns:1fr 300px} .haupt{padding:22px 26px 30px;min-width:0} .lspalte{border-left:1px solid var(--linie);background:#FCFCFA;padding:20px 20px 30px} .kkopf{display:flex;align-items:flex-start;gap:16px;margin-bottom:18px} .kkopf .logo{width:92px;height:92px;border-radius:14px;background:var(--weiss); border:1px solid var(--linie-stark);display:flex;align-items:center;justify-content:center; flex-shrink:0;padding:12px} .kkopf .logo svg{width:100%;height:100%} /* Kontaktfoto im Seitenkopf — rund statt Logo-Kachel */ .kkopf .foto{width:84px;height:84px;border-radius:50%;overflow:hidden;flex-shrink:0; border:1px solid var(--linie-stark);background:#D8D3C8} .kkopf .foto svg{width:100%;height:100%;display:block} .notiz{background:var(--papier);border-radius:var(--r-m);padding:11px 13px; font-size:12.5px;color:var(--tinte-2);line-height:1.6} /* Status-Kennzeichen: nur „Fokus" trägt Koralle, alle anderen bleiben leise */ .epill{display:inline-block;font-size:11.5px;font-weight:500;padding:1px 9px;border-radius:99px; background:#EDF1EF;color:var(--petrol-700)} .epill.signal{background:var(--koralle-100);color:var(--koralle-700)} .kkopf h1{font-size:26px;font-weight:600;letter-spacing:-.5px;line-height:1.2} .kkopf h1 span{font-size:15px;color:var(--tinte-2);font-weight:400} .kkopf .sub{font-size:13.5px;color:var(--tinte-2);margin-top:5px;display:flex;align-items:center; gap:9px;flex-wrap:wrap} .fokus{width:17px;height:17px;border-radius:4px;background:var(--koralle-100);color:var(--koralle-700); font-family:var(--mono);font-size:10px;font-weight:500;display:inline-flex;align-items:center;justify-content:center} .betreuer{display:inline-flex;align-items:center;gap:6px} .betreuer .mav{width:20px;height:20px;border-radius:50%;background:var(--petrol-600);color:#fff; font-size:8.5px;font-weight:600;display:flex;align-items:center;justify-content:center} .web{display:inline-flex;align-items:center;gap:5px;color:var(--petrol-700);text-decoration:none;font-weight:500} .web svg{width:13px;height:13px} .web:hover{text-decoration:underline} .pin{display:flex;align-items:flex-start;gap:10px;padding:9px 0 12px;margin-bottom:20px; border-bottom:1px solid var(--linie);font-size:13.5px;color:var(--tinte-2);line-height:1.55} .pin svg{width:14px;height:14px;color:var(--koralle-600);flex-shrink:0;margin-top:3px} .pin b{color:var(--tinte);font-weight:600} h3.zt{font-family:var(--mono);font-size:11.5px;letter-spacing:1.7px;text-transform:uppercase; color:var(--tinte);font-weight:600;margin-bottom:12px;padding-bottom:7px; border-bottom:1px solid var(--linie-stark)} .block{margin-bottom:30px} .pz{display:grid;grid-template-columns:1fr 168px 16px;gap:20px;align-items:center; padding:11px 12px;margin:0 -12px;border-top:1px solid var(--linie); border-radius:var(--r-m);width:calc(100% + 24px); transition:background-color .15s ease-out,box-shadow .15s ease-out} .pz:first-of-type{border-top:none} .pz:hover{background:#F4F6F5;box-shadow:inset 2px 0 0 var(--petrol-600)} .pz:after{content:"›";color:var(--linie-stark);font-size:18px;line-height:1;text-align:right; transition:color .15s ease-out,transform .15s ease-out} .pz:hover:after{color:var(--petrol-700);transform:translateX(3px)} .pz .nm{font-size:14.5px;font-weight:600;color:var(--petrol-700)} .pz .un{font-size:12.5px;color:var(--tinte-3);margin-top:1px;display:flex;gap:8px} .pz .un .mand{font-family:var(--mono);letter-spacing:.3px} .pz .kennz{text-align:right} .pz .kennz .wert{font-family:var(--mono);font-size:13.5px;display:block;margin-bottom:5px} .pz .kennz .wert em{font-style:normal;color:var(--tinte-3);font-size:12px} .balken{height:4px;background:#EDEDE7;border-radius:99px;overflow:hidden} .balken .fuell{height:100%;background:var(--petrol-600);border-radius:99px;display:block} .balken .fuell.warn{background:var(--koralle-600)} .balken .fuell.dauer{background:#C4D2D6} .werkzeuge{display:flex;gap:8px;align-items:center;margin-bottom:11px} .suche-verlauf{flex:1;display:flex;align-items:center;gap:10px;background:var(--weiss); border:1px solid var(--linie-stark);border-radius:var(--r-m);padding:8px 13px;min-width:0} .suche-verlauf svg{width:16px;height:16px;color:var(--tinte-3);flex-shrink:0} .suche-verlauf input{border:none;outline:none;font-family:var(--sans);font-size:13.5px;flex:1; color:var(--tinte);background:transparent;min-width:0} .ikon{width:36px;height:36px;border:1px solid var(--linie-stark);border-radius:var(--r-m); background:var(--weiss);display:flex;align-items:center;justify-content:center; color:var(--tinte-2);flex-shrink:0} .ikon svg{width:16px;height:16px} .ikon:hover{border-color:var(--tinte-3);color:var(--tinte);background:#FCFCFA} .ikon.signal{border-color:var(--koralle-600);background:var(--koralle-100);color:var(--koralle-700)} .filter{display:flex;gap:6px;margin-bottom:6px;flex-wrap:wrap;align-items:center} .fchip{font-size:12.5px;padding:4px 11px;border-radius:99px;border:1px solid var(--linie); background:var(--weiss);color:var(--tinte-2)} .fchip.on{background:var(--petrol-800);border-color:var(--petrol-800);color:#fff;font-weight:500} .spur{position:relative;padding-left:34px} .spur:before{content:"";position:absolute;left:11px;top:10px;bottom:10px;width:1px;background:var(--linie)} .spur .e{position:relative;padding:9px 26px 9px 10px;margin-left:-10px;border-radius:var(--r-m); width:calc(100% + 10px);transition:background-color .15s ease-out,box-shadow .15s ease-out} .spur .e:hover{background:#F4F6F5;box-shadow:inset 2px 0 0 var(--petrol-600)} .spur .e:hover .t{color:var(--petrol-700)} .spur .e:after{content:"›";position:absolute;right:8px;top:50%;transform:translateY(-50%); color:var(--linie-stark);font-size:17px;opacity:0;transition:opacity .15s ease-out} .spur .e:hover:after{opacity:1;color:var(--petrol-700)} .spur .e .sym{position:absolute;left:-24px;top:10px;width:23px;height:23px;border-radius:50%; background:var(--weiss);border:1px solid var(--linie-stark);display:flex;align-items:center; justify-content:center;color:var(--tinte-2);transition:border-color .15s,color .15s} .spur .e:hover .sym{border-color:var(--petrol-600);color:var(--petrol-700)} .spur .e .sym svg{width:12px;height:12px} .spur .e.jetzt .sym{border-color:var(--koralle-400);background:var(--koralle-100);color:var(--koralle-700)} .spur .e.mahnt .sym{border-color:#E0C4BF;background:#FBF0EE;color:var(--stop)} .spur .e .z1{display:flex;justify-content:space-between;gap:12px;align-items:baseline} .spur .e .t{font-size:14px} .spur .e .t .betrag{font-family:var(--mono);color:var(--tinte-2);font-size:13px} .spur .e .d{font-family:var(--mono);font-size:11.5px;color:var(--tinte-3);white-space:nowrap} .spur .e .z2{font-size:12.5px;color:var(--tinte-2)} .spur .e .zustand{font-size:11.5px;font-weight:500;padding:1px 8px;border-radius:99px; background:#FBF0EE;color:var(--stop);margin-left:2px} .spur .monat{font-family:var(--mono);font-size:10px;letter-spacing:1.4px;text-transform:uppercase; color:var(--tinte-3);padding:16px 0 4px;position:relative} .spur .monat:before{content:"";position:absolute;left:-27px;top:16px;width:9px;height:9px; border-radius:50%;background:var(--weiss);border:1px solid var(--linie)} .spur .monat:first-child{padding-top:2px} .spur .monat:first-child:before{top:2px} .aufklapp{font-size:13px;color:var(--petrol-700);padding:7px 0 0;font-weight:500} .aufklapp em{font-style:normal;color:var(--tinte-3);font-weight:400} .lakt{display:flex;flex-direction:column;gap:7px;margin-bottom:20px} .lakt .b{border:1px solid var(--linie-stark);border-radius:var(--r-s);padding:8px 12px; font-size:13px;background:var(--weiss);display:flex;align-items:center;gap:9px;font-weight:500;width:100%} .lakt .b svg{width:15px;height:15px;color:var(--tinte-2);flex-shrink:0} .lakt .b.signal{border-color:var(--koralle-600);background:var(--koralle-100);color:var(--koralle-700)} .lakt .b.signal svg{color:var(--koralle-700)} .lgruppe{margin-bottom:19px} .ltitel{font-family:var(--mono);font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase; color:var(--tinte);font-weight:600;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--linie)} .lzeile{font-size:13.5px;padding:3px 0;display:flex;justify-content:space-between;gap:10px;align-items:baseline} .lzeile .l{color:var(--tinte-3);font-size:12.5px;flex-shrink:0} .lzeile .w{color:var(--tinte);text-align:right} .lzeile .w.mono{font-family:var(--mono);font-size:13px} /* Kontaktwege sind Verweise (#129) — eine lange Adresse bricht um statt über den Rand */ .lzeile .w .web{display:inline;overflow-wrap:anywhere} a.akt,.lakt a.b{text-decoration:none} .lakt a.b{color:var(--tinte)} .lperson{display:flex;align-items:center;gap:9px;padding:6px 7px;margin:0 -7px; border-radius:var(--r-s);width:calc(100% + 14px);transition:background-color .15s ease-out} .lperson:hover{background:#EDF1EF} .lperson:hover .nm{color:var(--petrol-700)} .lperson .av{width:24px;height:24px;border-radius:50%;font-size:9px;font-weight:600;color:#fff; display:flex;align-items:center;justify-content:center;flex-shrink:0} .lperson .av.a{background:var(--petrol-700)} .lperson .av.b{background:var(--petrol-600)} .lperson .av.c{background:#3F6E7C} .lperson .nm{font-size:13.5px;flex:1;min-width:0;text-align:left} .lperson .fu{font-size:11.5px;color:var(--tinte-3)} .lperson .stern{color:var(--koralle-600);font-size:10px} .chips{display:flex;flex-wrap:wrap;gap:5px} .chips span{font-size:12px;color:var(--tinte-2);background:#F2F2EE;border-radius:var(--r-s);padding:2px 8px} .abc{display:inline-flex;border:1px solid var(--linie-stark);border-radius:var(--r-s);overflow:hidden} .abc span{width:23px;height:21px;display:flex;align-items:center;justify-content:center; font-family:var(--mono);font-size:11px;color:var(--tinte-3);border-left:1px solid var(--linie); background:var(--weiss)} .abc span:first-child{border-left:none} .abc span.on{background:var(--koralle-100);color:var(--koralle-700);font-weight:600} .spark{width:100%;height:30px;display:block;margin:8px 0 3px} .spark rect{fill:#C7D5D9} .spark rect.stark{fill:var(--petrol-600)} .spark-fuss{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px; color:var(--tinte-3);margin-bottom:5px} .offen-block{border:1px solid var(--linie-stark);border-radius:var(--r-m);padding:11px 13px 12px; background:var(--weiss)} .offen-block .zahl{font-family:var(--mono);font-size:19px;font-weight:500;display:block;line-height:1.2} .offen-block .txt{font-size:12.5px;color:var(--tinte-2);display:block;margin:2px 0 10px;line-height:1.45} .offen-block .knopf{display:block;text-align:center;border:1px solid var(--koralle-600); background:var(--koralle-100);color:var(--koralle-700);border-radius:var(--r-s); padding:6px 10px;font-size:12.5px;font-weight:500;width:100%} /* Strategie A (29.07.): Klappzeilen mit Kernzahl, Innenleben verdichtet */ .klappz{display:flex;align-items:center;gap:8px;padding:10px 2px;border-top:1px solid var(--linie); font-size:13px;cursor:pointer;border-radius:var(--r-s);width:100%; transition:background-color .15s ease-out} .klappz:hover{background:#F4F6F5} .klappz .pf{font-size:9px;color:var(--tinte-3);width:10px;flex-shrink:0;display:inline-block; transition:transform .15s ease-out} .klappz[aria-expanded="true"] .pf{transform:rotate(90deg)} .klappz .tt{font-family:var(--mono);font-size:10px;letter-spacing:1.3px;text-transform:uppercase; color:var(--tinte);font-weight:600;flex-shrink:0} .klappz .kern{margin-left:auto;font-size:12px;color:var(--tinte-2);text-align:right; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .klappz .kern .mo{font-family:var(--mono);font-size:11.5px} .klapp-inhalt{display:none;padding:2px 2px 12px 20px} .klapp-inhalt.an{display:block} .satz{font-size:13px;color:var(--tinte-2);line-height:1.7;padding:2px 0} .satz .mo{font-family:var(--mono);font-size:12.5px;color:var(--tinte)} /* Hinweis für nicht gebaute Bereiche */ .nichtgebaut{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px); background:var(--petrol-800);color:#fff;padding:11px 20px;border-radius:var(--r-m); font-size:13.5px;box-shadow:0 8px 24px rgba(8,20,25,.28);opacity:0;pointer-events:none; transition:opacity .2s ease-out,transform .2s ease-out;z-index:30} .nichtgebaut.an{opacity:1;transform:translateX(-50%) translateY(0)} .nichtgebaut b{color:var(--koralle-400);font-weight:500} /* Wegweiser */ .wegweiser{position:fixed;right:22px;bottom:22px;background:var(--weiss);border:1px solid var(--linie-stark); border-radius:var(--r-m);padding:11px 15px;font-size:12.5px;color:var(--tinte-2); box-shadow:var(--schatten);z-index:20;max-width:250px;line-height:1.55} .wegweiser b{color:var(--tinte);display:block;margin-bottom:3px;font-size:11px;font-family:var(--mono); letter-spacing:1.2px;text-transform:uppercase} .wegweiser.weg{display:none} /* ===== Zeiterfassung (30.07., ADR-0028) — alle Klassen zt-präfixiert ===== */ .zt-reiter{display:flex;gap:2px;align-items:center;margin-bottom:16px} .zt-reiter button{padding:5px 13px;border-radius:var(--r-s);border:none;background:transparent; color:var(--tinte-2);font-size:13px;font-weight:500;font-family:var(--sans);cursor:pointer} .zt-reiter button.aktiv{background:var(--petrol-800);color:#fff} /* #213 Punkt 1: ohne :not(.an) gewann diese Regel gegen den aktiven Umschalter (Liste/Board) — weisse Schrift auf hellem Grund */ .zt-reiter button:hover:not(.aktiv):not(.an){background:#F0F0EB} .zt-reiter .rolle{font-size:10.5px;font-family:var(--mono);color:var(--tinte-3);margin-left:2px} .zt-reiter .rechts{margin-left:auto;display:flex;gap:6px} .zt-kn{border:1px solid var(--linie-stark);border-radius:var(--r-s);padding:4px 11px; background:var(--weiss);color:var(--tinte-2);font-size:12.5px;white-space:nowrap;cursor:pointer; font-family:var(--sans)} .zt-tkopf{display:flex;align-items:baseline;gap:12px;margin-bottom:14px} .zt-tkopf h1{font-size:21px;font-weight:600;letter-spacing:-.3px} .zt-tkopf .datum{font-size:13.5px;color:var(--tinte-2)} .zt-tkopf .rechts{margin-left:auto;display:flex;gap:4px} .zt-woche{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:18px} .zt-wtag{border:1px solid var(--linie);border-radius:var(--r-m);padding:7px 10px;background:#FCFCFA; cursor:pointer;position:relative;font-family:var(--sans);text-align:left} .zt-wtag:hover{border-color:var(--linie-stark)} .zt-wtag .wt{font-size:11px;color:var(--tinte-3);display:flex;justify-content:space-between} .zt-wtag .sum{font-family:var(--mono);font-size:14px;font-weight:500;margin-top:2px;color:var(--tinte)} .zt-wtag .sum span{font-size:11px;color:var(--tinte-3);font-weight:400} .zt-wtag.heute{border-color:var(--petrol-700);background:var(--weiss);box-shadow:var(--schatten)} .zt-wtag.heute .wt{color:var(--petrol-700);font-weight:600} .zt-wtag .lp{position:absolute;top:8px;right:8px;width:6px;height:6px;border-radius:50%;background:var(--warn)} .zt-wtag.leer .sum{color:var(--tinte-3)} .zt-wtag.we{background:transparent;border-style:dashed;opacity:.6} .zt-wbilanz{display:flex;gap:22px;align-items:baseline;padding:13px 14px 0;border-top:1px solid var(--linie); margin-top:4px} .zt-wbilanz .zt-block b{font-family:var(--mono);font-size:16px;font-weight:500} .zt-wbilanz .zt-block span{font-size:12px;color:var(--tinte-3);display:block} .zt-wbilanz .hinw{margin-left:auto;font-size:12.5px;color:var(--warn);font-weight:500} .zt-brot{font-size:12.5px;color:var(--tinte-3);margin-bottom:12px} .zt-brot button{background:none;border:none;color:var(--petrol-700);font-size:12.5px;cursor:pointer; font-family:var(--sans);padding:0;text-decoration:none} .zt-brot button:hover{text-decoration:underline} /* ===== Direktbearbeitung (ADR-0029) — Demo auf der Kontaktseite ===== */ .lzeile.editierbar{cursor:pointer;border-radius:5px;margin:0 -6px;padding:3px 6px;position:relative} .lzeile.editierbar:hover{background:#EDF1EF} .lzeile.editierbar:hover::after{content:"✎";position:absolute;right:6px;top:50%; transform:translateY(-50%);font-size:11px;color:var(--tinte-2)} .lzeile.editierbar:hover .w{opacity:.35} .lzeile.editierbar.aktiv-edit:hover .w{opacity:1} .lzeile.editierbar.aktiv-edit:hover::after{content:none} .editfeld{border:1px solid var(--petrol-600);box-shadow:0 0 0 3px rgba(42,90,105,.13); border-radius:5px;padding:2px 8px;font-family:var(--mono);font-size:13px;width:158px; text-align:right;outline:none;background:#fff;color:var(--tinte)} .gespeichert-mark{color:var(--ok);font-size:11.5px;font-weight:500;margin-left:6px} .stat-dd{position:absolute;right:0;top:calc(100% + 4px);background:#fff; border:1px solid var(--linie-stark);border-radius:5px;box-shadow:0 10px 26px rgba(8,20,25,.14); z-index:6;min-width:150px;overflow:hidden} .stat-dd button{display:flex;width:100%;padding:6px 10px;background:none;border:none;cursor:pointer; font-family:var(--sans);font-size:12.5px;text-align:left;align-items:center;gap:7px} .stat-dd button:hover{background:#F4F6F5} /* ===== Timer-Flow: Ruhezustand im Leisten-Fuß + Start-Fenster (30.07., ADR-0028) ===== */ .weg2{display:none!important} .leiste .t-ruhe{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);border-radius:var(--r-s);padding:8px 10px;margin-bottom:8px; cursor:pointer;width:100%;font-family:var(--sans)} .leiste .t-ruhe:hover{background:rgba(255,129,99,.14);border-color:rgba(255,129,99,.4)} .leiste .t-ruhe .play{width:0;height:0;border-style:solid;border-width:5px 0 5px 8px; border-color:transparent transparent transparent var(--koralle-400);display:block;flex-shrink:0} .leiste .t-ruhe .lbl{flex:1;color:#C5D5DA;font-size:13px;text-align:left} .leiste .t-ruhe em{font-style:normal;font-family:var(--mono);font-size:9.5px; background:rgba(255,255,255,.1);border-radius:3px;padding:1px 5px;color:#C6D5DA} /* Eingeklappte Leiste: Ruhe-Timer wird zum reinen Play-Symbol (wie alle eng-Varianten) */ .leiste.eng .t-ruhe{width:44px;height:36px;justify-content:center;padding:0;gap:0} .leiste.eng .t-ruhe .lbl,.leiste.eng .t-ruhe em{display:none} .leiste.eng .t-ruhe .play{border-width:6px 0 6px 10px} /* Start-Fenster rutscht neben die schmale Leiste statt sie zu verdecken (Popover liegt als Geschwister NACH .app, daher ~ statt Nachfahre) */ .app.eng ~ .zt-startpop{left:70px} .zt-popfang{position:fixed;inset:0;z-index:29;display:none} .zt-popfang.an{display:block} .zt-startpop{position:fixed;left:14px;bottom:100px;width:430px;max-width:calc(100vw - 28px);background:var(--weiss); border:1px solid var(--linie-stark);border-radius:var(--r-m); box-shadow:0 8px 28px rgba(8,20,25,.28);overflow:hidden;z-index:30;display:none} .zt-startpop.an{display:block} .zt-startpop .fussz{padding:7px 14px;border-top:1px solid var(--linie);font-size:11px; color:var(--tinte-3);background:#FCFCFA} /* Leerhinweis in Auswahllisten (Umbuchen im Zeilenmenü der Zeiterfassung) */ .zt-leer2{padding:10px 14px;font-size:12.5px;color:var(--tinte-3)} /* ===== Zwei-Ebenen-Korrektur + Leistungsprüfung + Journal (30.07., ADR-0030) ===== */ .zt-korr{display:none;border:1px solid var(--koralle-400);border-radius:var(--r-m);background:var(--weiss); box-shadow:var(--schatten);margin:2px 0;overflow:hidden} .zt-korr.offen{display:block} .zt-korr .kk{display:flex;align-items:center;gap:12px;padding:9px 14px;background:#FDF6F3; border-bottom:1px solid var(--linie);font-size:12.5px;color:var(--tinte-2)} .zt-korr .kk b{color:var(--koralle-700)} .zt-korr .kz3{display:flex;align-items:center;gap:14px;padding:12px 14px;flex-wrap:wrap;font-size:13px} .zt-korr .ebene{display:flex;flex-direction:column;gap:3px} .zt-korr .ebene label{font-family:var(--mono);font-size:9.5px;letter-spacing:1px;text-transform:uppercase; color:var(--tinte-3)} .zt-korr .ebene input{width:76px;border:1px solid var(--linie-stark);border-radius:var(--r-s); padding:6px 8px;font-family:var(--mono);font-size:13.5px;text-align:center;color:var(--tinte)} .zt-korr .ebene input:focus{outline:none;border-color:var(--petrol-600)} .zt-korr .erkl{flex:1;min-width:220px;font-size:12px;color:var(--tinte-2);line-height:1.5} .zt-korr .kfuss{display:flex;gap:8px;justify-content:flex-end;padding:10px 14px; border-top:1px solid var(--linie);background:#FCFCFA} .zt-angepasst{color:#7B5CB8 !important;font-weight:500;cursor:help} /* Leistungsprüfung */ .pf-liste{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r-l); box-shadow:var(--schatten);overflow:hidden;max-width:860px} .pf-kopf{display:flex;align-items:center;gap:10px;padding:12px 20px;border-bottom:1px solid var(--linie); background:#FBFBF8;font-size:13px;color:var(--tinte-2)} .pf-kopf b{color:var(--tinte)} .pf-kopf .rechts3{margin-left:auto;display:flex;gap:7px} .pf-zeile{display:flex;align-items:center;gap:12px;padding:10px 20px;border-bottom:1px solid var(--linie); font-size:13.5px;width:100%;background:none;border-left:none;border-right:none;border-top:none; font-family:var(--sans);text-align:left;cursor:pointer} .pf-zeile:hover{background:#FBFBF8} .pf-zeile:last-child{border-bottom:none} .pf-zeile .pn{width:230px;font-weight:500;color:var(--tinte)} .pf-zeile .pn span{display:block;font-size:11.5px;color:var(--tinte-3);font-weight:400} .pf-zeile .std2{width:130px;text-align:right;font-family:var(--mono);font-size:12.5px;color:var(--tinte-2)} .pf-zeile .zst{width:150px;margin-left:auto;font-size:12px;text-align:right;flex-shrink:0} .pf-spalten{display:flex;align-items:center;gap:12px;padding:7px 20px 6px; border-bottom:1px solid var(--linie-stark);font-family:var(--mono);font-size:10px; letter-spacing:1px;text-transform:uppercase;color:var(--tinte-3)} .pf-spalten .s1{width:230px}.pf-spalten .s2{width:130px;text-align:right} .pf-spalten .s3{width:150px;margin-left:auto;text-align:right} .pf-spalten .s4{width:120px;text-align:right} .pf-zeile .zst.ok{color:var(--ok)} .pf-zeile .zst.offen2{color:var(--warn);font-weight:500} .pf-zeile .jk{border:1px solid var(--linie-stark);border-radius:var(--r-s);padding:4px 11px; background:var(--weiss);color:var(--tinte-2);font-size:12px;white-space:nowrap; width:120px;text-align:center;flex-shrink:0} .pf-zeile:hover .jk{border-color:var(--petrol-600);color:var(--petrol-700)} /* Journal-Papier — bewusst nah am Bestands-PDF (~90 %), leicht moderner */ .jl-blatt{background:#fff;border:1px solid var(--linie);border-radius:6px;box-shadow:var(--schatten); max-width:860px;padding:34px 42px 26px;font-size:13px;color:#1a1a1a;font-family:var(--sans)} .jl-kopf{display:flex;align-items:baseline;justify-content:space-between;font-size:11.5px; color:#555;margin-bottom:4px} .jl-titel{text-align:center;font-size:16.5px;font-weight:700;letter-spacing:.3px;margin-bottom:2px} .jl-unter{text-align:center;font-size:10.5px;color:#777;margin-bottom:18px} .jl-projekt{font-size:14px;font-weight:700;margin:14px 0 10px} .jl-ma{display:grid;grid-template-columns:1fr 60px 52px 52px 56px 60px;gap:6px;align-items:baseline; border-bottom:1.5px solid #333;padding-bottom:3px;margin-top:16px;font-weight:700;font-size:12.5px} .jl-ma .r{text-align:right} .jl-b{display:grid;grid-template-columns:86px 1fr 52px 52px 56px 60px;gap:6px;align-items:baseline; padding:5px 0 1px;font-size:12.5px} .jl-b .r{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--mono);font-size:12px} .jl-txt{grid-column:1 / -1;padding:0 0 3px 86px;color:#444;font-size:12px;line-height:1.45} .jl-summe{display:grid;grid-template-columns:1fr 56px 60px;gap:6px;border-top:1px solid #999; margin-top:6px;padding-top:4px;font-weight:700;font-size:12.5px} .jl-summe .r{text-align:right;font-family:var(--mono);font-size:12px} .jl-gesamt{display:grid;grid-template-columns:1fr 56px 60px;gap:6px;border-top:2px solid #333; margin-top:20px;padding-top:6px;font-weight:700;font-size:13px} .jl-gesamt .r{text-align:right;font-family:var(--mono)} .jl-fuss{border-top:1px solid #bbb;margin-top:30px;padding-top:8px;text-align:center; font-size:10px;color:#888;line-height:1.5} /* Direktbearbeitung am Wert (ADR-0029): Ruhe -> Stift beim Überfahren -> Enter speichert, Esc verwirft */ .ie-wert{cursor:text;border-radius:4px;padding:0 3px;margin:0 -3px;white-space:nowrap} .ie-wert:hover{background:#F5F0EC;box-shadow:inset 0 0 0 1px var(--linie-stark)} .ie-wert:hover::after{content:"✎";font-size:10px;margin-left:4px;color:var(--tinte-3)} .ie-input{font:inherit;font-family:inherit;color:inherit;border:1px solid var(--petrol-600); border-radius:4px;padding:0 4px;outline:none;background:var(--weiss);min-width:60px} .ie-haken{color:var(--ok);font-size:11px;margin-left:4px;animation:hakenweg 1.2s forwards} @keyframes hakenweg{0%,60%{opacity:1}100%{opacity:0}} /* Zeilenmenü und Rückgängig-Fenster (30.07., Sascha bestätigt) */ .zt-menue{position:fixed;z-index:45;background:var(--weiss);border:1px solid var(--linie-stark); border-radius:var(--r-m);box-shadow:0 8px 28px rgba(8,20,25,.24);min-width:250px;display:none; overflow:hidden} .zt-menue.an{display:block} .zt-menue .mi{display:block;width:100%;text-align:left;padding:8px 14px;font-size:13px; background:none;border:none;font-family:var(--sans);cursor:pointer;color:var(--tinte)} .zt-menue .mi:hover{background:#F5F0EC} .zt-menue .mi.rot{color:var(--stop)} .zt-menue .mi .sub{display:block;font-size:11px;color:var(--tinte-3)} .zt-menue .mt{font-family:var(--mono);font-size:9px;letter-spacing:1.2px;text-transform:uppercase; color:var(--tinte-3);padding:8px 14px 3px;border-top:1px solid var(--linie)} #zt-undo{position:fixed;left:50%;bottom:66px;transform:translateX(-50%) translateY(16px); background:var(--petrol-800);color:#fff;padding:10px 18px;border-radius:9px;display:flex; gap:16px;align-items:center;font-size:13.5px;opacity:0;pointer-events:none; transition:all .18s ease-out;z-index:50;box-shadow:0 10px 30px rgba(8,20,25,.35);white-space:nowrap} #zt-undo.an{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto} #zt-undo button{background:none;border:none;color:var(--koralle-400);font-weight:600; font-size:13.5px;cursor:pointer;font-family:var(--sans)} /* „Älteres anzeigen" statt Innen-Scrollen (Kundenseite) */ .pz-aeltere{display:block;width:100%;text-align:left;padding:8px 10px;border:none;background:none; font-family:var(--sans);font-size:12.5px;color:var(--petrol-700);cursor:pointer;border-radius:var(--r-s)} .pz-aeltere:hover{background:#F5F0EC} .pz-aeltere em{font-style:normal;color:var(--tinte-3)} /* ===== Personal — Mitarbeiterseite (30.07.) ===== */ .mkopf{display:flex;align-items:flex-start;gap:16px;margin-bottom:22px} .mkopf .mfoto{width:92px;height:92px;border-radius:50%;background:var(--petrol-600);color:#fff; font-size:30px;font-weight:600;letter-spacing:-.5px;display:flex;align-items:center; justify-content:center;flex-shrink:0} .mkopf h1{font-size:26px;font-weight:600;letter-spacing:-.5px;line-height:1.2} .mkopf h1 span{font-size:15px;color:var(--tinte-2);font-weight:400} .mkopf .sub{font-size:13.5px;color:var(--tinte-2);margin-top:5px;display:flex;align-items:center; gap:9px;flex-wrap:wrap} .mkopf .sub .mono{font-family:var(--mono);font-size:12.5px} .lebt{display:inline-flex;align-items:center;gap:6px;font-weight:500;color:var(--ok)} .lebt i{width:8px;height:8px;border-radius:50%;background:var(--ok);display:inline-block} .rollechip{font-size:11.5px;font-weight:500;padding:1px 9px;border-radius:99px; background:#EAF0EE;color:var(--petrol-700)} .wtage{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;max-width:470px;margin-bottom:10px} .wtag{border:1px solid var(--linie-stark);border-radius:var(--r-m);padding:8px 0 9px; text-align:center;background:var(--weiss)} .wtag .tg{font-family:var(--mono);font-size:9.5px;letter-spacing:1.2px;text-transform:uppercase; color:var(--tinte-3);display:block;margin-bottom:3px} .wtag .st{font-family:var(--mono);font-size:15px;font-weight:500;font-variant-numeric:tabular-nums} .wtag.frei{background:#F5F5F1;border-style:dashed;border-color:var(--linie)} .wtag.frei .st{color:var(--tinte-3);font-weight:400} .wsumme{font-size:13.5px;color:var(--tinte-2);margin-bottom:14px} .wsumme .mo{font-family:var(--mono);font-size:13px;color:var(--tinte)} .historie{border-top:1px solid var(--linie);padding-top:9px;font-size:13px;color:var(--tinte-2)} .historie .hz{display:flex;gap:14px;padding:3px 0;align-items:baseline} .historie .hz .von{font-family:var(--mono);font-size:12px;color:var(--tinte-3);width:96px;flex-shrink:0} .historie .hz b{font-weight:500;color:var(--tinte)} .historie .hz .jetztchip{font-size:10.5px;font-weight:500;background:var(--koralle-100); color:var(--koralle-700);border-radius:99px;padding:0 7px} .infoz{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;color:var(--tinte-3); margin-top:12px;line-height:1.55;max-width:64ch} .infoz svg{width:13px;height:13px;flex-shrink:0;margin-top:3px} .gf-marke{font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.3px; text-transform:none;background:var(--koralle-100);color:var(--koralle-700); border-radius:99px;padding:1px 8px} .sichtwahl{display:flex;align-items:center;gap:8px;margin-bottom:12px;font-size:12.5px;color:var(--tinte-3)} #a-mseite .zt .neu{margin-left:auto;font-family:var(--sans);font-size:12.5px;color:var(--petrol-700); letter-spacing:0;text-transform:none;font-weight:500} #a-mseite .fehlt{color:var(--tinte-3);font-style:italic} #a-mseite[data-sicht="verwaltung"] .nur-gf{display:none} /* Personal-Tabelle (30.07.) — gleiche Zeilen, eigene Spalten */ .t-ma .kopfzeile,.t-ma .zeile,.t-ma .summe{ grid-template-columns:30px minmax(180px,1.8fr) 118px 110px 64px 60px 118px 60px} .t-ma .pers-z{display:flex;align-items:center;gap:8px;min-width:0} .t-ma .funkz,.t-ma .rollz{font-size:12.5px;color:var(--tinte-2);white-space:nowrap; overflow:hidden;text-overflow:ellipsis} .t-ma .modz{font-family:var(--mono);font-size:12px;text-align:right;color:var(--tinte); font-variant-numeric:tabular-nums} .t-ma .einz{font-family:var(--mono);font-size:11.5px;color:var(--tinte-2);white-space:nowrap} .t-ma .wo-z{display:flex;flex-direction:column;gap:3px;justify-content:center;min-width:0} .t-ma .wo-z .w{font-family:var(--mono);font-size:11.5px;font-variant-numeric:tabular-nums;line-height:1} .t-ma .wo-z .w em{font-style:normal;color:var(--tinte-3);font-size:10.5px} .t-ma .wo-z .balken{height:3.5px} .t-ma .wo-z .w.hinten{color:var(--koralle-700);font-weight:500} .t-ma .zeile.weg .marke{color:var(--tinte-3);font-weight:400} .t-ma .zeile.weg .bav{background:#B9BDB6} .t-ma .zeile.weg .funkz,.t-ma .zeile.weg .rollz,.t-ma .zeile.weg .modz, .t-ma .zeile.weg .einz{color:var(--tinte-3)} /* Zugangs-Handgriffe (31.07., ADR-0040) — klein, weil selten gebraucht */ .zgriff{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap} .zgriff button{border:1px solid var(--linie-stark);border-radius:var(--r-s);background:var(--weiss); color:var(--tinte-2);font-size:12px;padding:4px 10px;font-family:var(--sans);cursor:pointer; transition:border-color .15s ease-out,color .15s ease-out} .zgriff button:hover{border-color:var(--petrol-600);color:var(--petrol-700)} .zgriff button.warnend:hover{border-color:var(--stop);color:var(--stop)} .selbst{font-size:11.5px;color:var(--tinte-3);line-height:1.5;margin-top:9px; border-top:1px solid var(--linie);padding-top:8px} /* ===== Personal — Organigramm (31.07., ADR-0039) ===== */ .orga{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r-l); box-shadow:var(--schatten);padding:30px 24px 34px} .o-ebene{display:flex;justify-content:center} .o-karte{background:var(--weiss);border:1px solid var(--linie-stark);border-radius:var(--r-m); padding:9px 14px;display:flex;gap:10px;align-items:center;cursor:pointer;text-align:left; min-width:190px;transition:background-color .15s ease-out,border-color .15s ease-out} .o-karte:hover{background:#F4F6F5;border-color:var(--petrol-600)} .o-karte:hover .nm{color:var(--petrol-700)} .o-karte .bav{width:30px;height:30px;border-radius:50%;background:var(--petrol-600);color:#fff; font-size:10px;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0} .o-karte .nm{font-size:13.5px;font-weight:600;line-height:1.25;display:block;color:var(--tinte)} .o-karte .fu{font-size:11.5px;color:var(--tinte-3);display:flex;gap:6px;align-items:baseline;flex-wrap:wrap} .o-karte .fu .mand{font-family:var(--mono);font-size:10px} .o-karte .abwp{font-size:10.5px;color:var(--tinte-3);background:#F2F2EE;border-radius:99px; padding:1px 7px;white-space:nowrap;margin-left:auto} .o-verbind{width:1px;height:20px;background:var(--linie-stark);margin:0 auto} .o-quer{height:1px;background:var(--linie-stark);margin:0 auto;max-width:780px} .o-teams{display:flex;gap:14px;justify-content:center;align-items:flex-start;flex-wrap:wrap; margin-top:20px} .o-team{display:flex;flex-direction:column;gap:8px;position:relative} .o-team:before{content:"";position:absolute;top:-20px;left:50%;width:1px;height:20px; background:var(--linie-stark)} .o-team .tt{font-family:var(--mono);font-size:9.5px;letter-spacing:1.4px;text-transform:uppercase; color:var(--tinte-3);text-align:center;font-weight:600} /* ===== Aufgaben (31.07., ADR-0035) — Tabelle, Board, Team; Detail per Panel (ADR-0016) ===== */ .t-ag .kopfzeile,.t-ag .zeile{grid-template-columns:34px minmax(240px,1fr) minmax(120px,230px) 118px 34px 34px 34px} .zeile.erledigt .ag-titel .t{color:var(--tinte-3);text-decoration:line-through} .zeile.erledigt .ag-proj,.zeile.erledigt .ag-st{opacity:.5} .ag-stern{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center; border-radius:var(--r-s);cursor:pointer;color:#CFCFC6;font-size:15px;line-height:1;border:none; background:transparent;padding:0;font-family:var(--sans)} .ag-stern:hover{background:#EFF1EE;color:var(--tinte-2)} .ag-stern.an{color:var(--koralle-600)} .ag-titel{min-width:0;display:flex;align-items:center;gap:8px} .ag-titel .t{font-size:13.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* Prioritaet dreistufig (Sascha 01.08., loest die Dringend-Flagge aus W8 ab) */ .ag-prio{font-family:var(--mono);font-size:9px;letter-spacing:.8px;border-radius:3px; padding:1px 6px;flex-shrink:0;font-weight:500} .ag-prio.hoch{background:var(--koralle-600);color:#fff} .ag-prio.mittel{background:#F7EFD9;color:var(--warn);border:1px solid #E8D9B0} .ag-prio.niedrig{background:#F2F2EE;color:var(--tinte-3);border:1px solid var(--linie)} .ag-unter{font-family:var(--mono);font-size:10.5px;color:var(--tinte-3);white-space:nowrap;flex-shrink:0} .ag-serie{color:var(--tinte-3);font-size:12px;flex-shrink:0} .ag-pruefball{font-size:10px;color:var(--petrol-600);border:1px solid #CBD8DC;border-radius:3px; padding:0 5px;flex-shrink:0;font-family:var(--mono);letter-spacing:.4px} .ag-proj{font-size:12px;color:var(--tinte-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ag-proj .mk{font-family:var(--mono);font-size:9.5px;color:var(--tinte-3);margin-right:5px} .ag-proj.frei{color:var(--tinte-3);font-style:italic} .ag-proj.frei .zuord{font-style:normal;color:var(--petrol-600);text-decoration:underline; text-underline-offset:2px;margin-left:5px;font-size:11px} .ag-st{font-size:11px;font-weight:500;padding:1.5px 8px;border-radius:99px;display:inline-flex; align-items:center;gap:5px;white-space:nowrap;justify-self:start} .ag-st:before{content:"";width:4px;height:4px;border-radius:50%;background:currentColor;flex-shrink:0} .ag-st.offen{background:#F2F2EE;color:var(--tinte-2)} .ag-st.arbeit{background:#EEF2F1;color:var(--petrol-700)} .ag-st.warten{background:#F7EFD9;color:var(--warn)} .ag-st.pruef{background:var(--koralle-100);color:var(--koralle-700)} .ag-st.fertig{background:#E4EFE7;color:var(--ok)} .ag-fael{font-family:var(--mono);font-size:11px;color:var(--tinte-2);white-space:nowrap} .ag-fael.rot{color:var(--stop);font-weight:500} .ag-fael.leer{color:var(--tinte-3)} .g-kopf .ag-hin{margin-left:auto;font-size:11px;color:var(--tinte-3);font-weight:400; font-family:var(--sans);text-transform:none;letter-spacing:0} .g-kopf .ag-hin em{font-style:normal;color:var(--koralle-700)} color:var(--tinte-3);font-weight:600;margin:14px 0 6px} border-radius:var(--r-s);padding:2px 6px;margin:0 -6px;cursor:text} .ag-ua{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:13px;border-bottom:1px solid var(--linie)} .ag-ua:last-of-type{border-bottom:none} .ag-ua .hk{width:15px;height:15px;border:1.5px solid var(--linie-stark);border-radius:4px;flex-shrink:0; display:inline-flex;align-items:center;justify-content:center;background:var(--weiss);font-size:10px} .ag-ua.done .hk{background:var(--petrol-600);border-color:var(--petrol-600);color:#fff} .ag-ua.done .t{color:var(--tinte-3);text-decoration:line-through} .ag-ua .t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ag-ua .wer{font-family:var(--mono);font-size:9.5px;color:var(--tinte-3);flex-shrink:0} .ag-ua .bis{font-family:var(--mono);font-size:10px;color:var(--tinte-2);flex-shrink:0} .ag-meta .fk{margin-bottom:13px} .ag-meta .l{font-family:var(--mono);font-size:9.5px;letter-spacing:1.2px;text-transform:uppercase; color:var(--tinte-3);margin-bottom:2px} .ag-meta .w{font-size:13.5px;color:var(--tinte)} .ag-meta .neben{font-size:11px;color:var(--tinte-3);line-height:1.5;margin-top:1px} .ag-meta .avk{display:inline-flex;width:20px;height:20px;border-radius:50%;background:var(--petrol-600); color:#fff;font-size:9px;font-weight:600;align-items:center;justify-content:center; vertical-align:-5px;margin-right:6px} .ag-akt{display:flex;flex-direction:column;gap:7px;margin-top:16px} .ag-akt .b{border:1px solid var(--linie-stark);border-radius:var(--r-s);padding:7px 10px; font-size:12.5px;background:var(--weiss);display:flex;align-items:center;justify-content:center; gap:6px;font-weight:500;cursor:pointer;font-family:var(--sans);color:var(--tinte-2)} .ag-akt .b.signal{border-color:var(--koralle-600);background:var(--koralle-100);color:var(--koralle-700)} .ag-akt .b.tuer{border-color:var(--petrol-600);color:var(--petrol-700)} .ag-akt .b:hover{border-color:var(--tinte-3)} .ag-umsch{margin-left:auto;display:flex;border:1px solid var(--linie-stark); border-radius:var(--r-s);overflow:hidden;align-self:center} .ag-umsch button{font-size:12.5px;padding:4px 12px;background:var(--weiss);color:var(--tinte-2); cursor:pointer;border:none;font-family:var(--sans)} .ag-umsch button+button{border-left:1px solid var(--linie-stark)} .ag-umsch button.an{background:var(--petrol-800);color:#fff;font-weight:500;cursor:default} .ag-board{display:grid;grid-template-columns:repeat(5,minmax(200px,1fr));gap:10px;overflow-x:auto; padding-bottom:6px} .ag-spalte{background:#F1F2EF;border:1px solid var(--linie);border-radius:var(--r-m); padding:9px 9px 11px} .ag-spalte .sk{display:flex;align-items:center;gap:7px;padding:2px 4px 9px;font-size:12.5px} .ag-spalte .sk b{font-weight:600;white-space:nowrap} .ag-spalte .sk .n{font-family:var(--mono);font-size:10.5px;color:var(--tinte-3);background:var(--weiss); border:1px solid var(--linie);border-radius:99px;padding:0 7px} .ag-spalte .sk .n.sig{background:var(--koralle-600);border-color:var(--koralle-600);color:#fff;font-weight:500} .ag-karte{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r-m); box-shadow:var(--schatten);padding:9px 11px;margin-bottom:8px;cursor:pointer;position:relative} .ag-karte:hover{border-color:var(--petrol-600)} .ag-karte .av{width:19px;height:19px;border-radius:50%;background:var(--petrol-600);color:#fff; font-size:8.5px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0} /* Board-Bedienung (W16): Ziehen = Statuswechsel */ .ag-karte.zieh{cursor:grab} .ag-karte.zieh:active{cursor:grabbing} .ag-karte.zieht{opacity:.35;border-style:dashed} .ag-spalte.ziel{outline:2px dashed var(--petrol-600);outline-offset:-2px;background:#EAF0EE} .ag-karte:focus-visible{outline:2px solid var(--koralle-400);outline-offset:2px} /* Trello-Handgriffe (01.08.): Karte hebt sich beim Ziehen, Lücke zeigt das Ziel, Anlegen passiert in der Spalte, Marken sagen was drinsteckt */ .ag-karte.zieht{opacity:.9;transform:rotate(1.6deg) scale(1.02); box-shadow:0 8px 20px rgba(25,28,24,.18);border-color:var(--petrol-600);border-style:solid} .ag-spalte.zu-sp{min-width:44px;width:44px;padding:9px 5px;cursor:pointer;overflow:hidden} .ag-spalte.zu-sp .ag-karte,.ag-spalte.zu-sp .ab-schnell,.ag-spalte.zu-sp .n-hinweis{display:none} .ag-spalte.zu-sp .sk{writing-mode:vertical-rl;gap:9px;padding:4px 0;align-items:center} /* #213 Punkt 2: der Zaehler dreht nicht mit dem senkrechten Kopf — aufrecht und rund */ .ag-spalte.zu-sp .sk .n{margin:0;writing-mode:horizontal-tb;min-width:20px;height:20px;padding:0 5px; display:inline-flex;align-items:center;justify-content:center;line-height:1;box-sizing:border-box} .ag-spalte.zu-sp:hover{background:#E9ECE8} .ag-spalte .sk .klapp-sp{width:32px;height:32px;margin:-6px -6px -6px 0;border:none;background:transparent;color:var(--tinte-3); cursor:pointer;padding:0;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;border-radius:50%} .ag-spalte .sk .klapp-sp svg{width:14px;height:14px} .ag-spalte .sk .klapp-sp:hover{color:var(--petrol-700);background:var(--weiss)} .ag-spalte .sk .klapp-sp:focus-visible{outline:2px solid var(--koralle-400)} .ag-spalte.zu-sp .sk .klapp-sp{margin:0} /* Verblassen (#160 Trello 6b) — nur mit Einstellung, Maus und Fokus holen zurueck */ .ag-board.verblassen .ag-karte.alt{opacity:.55;transition:opacity .16s} .ag-board.verblassen .ag-karte.alt:hover,.ag-board.verblassen .ag-karte.alt:focus-within{opacity:1} @media (prefers-reduced-motion: reduce){.ag-board.verblassen .ag-karte.alt{transition:none}} #a-aufgaben .g-kopf{cursor:pointer} #a-aufgaben .g-kopf:hover{background:#EDF0EE} #a-aufgaben .g-kopf:focus-visible{outline:2px solid var(--koralle-400);outline-offset:-2px} #a-aufgaben .g-kopf.zu{color:var(--tinte-2)} /* Schnellansicht Aufgabe (ADR-0016) — Faktenblock im Panel */ /* Anlegen nach W14 — Titel groß, Beschreibung darunter, Eigenschaften als beschriftete Chips */ .ag-neu-titel{width:100%;border:none;outline:none;font-family:var(--sans);font-size:19px; font-weight:600;letter-spacing:-.3px;color:var(--tinte);padding:2px 0 4px} .ag-neu-titel::placeholder{color:#B9BDB6;font-weight:500} .ag-neu-beschr{width:100%;border:none;outline:none;font-family:var(--sans);font-size:13px; color:var(--tinte-2);padding:2px 0 12px;line-height:1.6} .ag-neu-beschr::placeholder{color:var(--tinte-3)} .ag-chips{display:flex;flex-wrap:wrap;gap:6px;padding-bottom:14px;border-bottom:1px solid var(--linie)} .ag-chips .ch{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--linie-stark); border-radius:99px;background:var(--weiss);color:var(--tinte-2);padding:4px 11px;font-size:12.5px; font-family:var(--sans);cursor:pointer;line-height:1.5} .ag-chips .ch svg{width:13px;height:13px;flex-shrink:0} .ag-chips .ch:hover{border-color:var(--tinte-3);color:var(--tinte)} .ag-chips .ch.gesetzt{background:#EEF2F1;border-color:var(--petrol-600);color:var(--petrol-700);font-weight:500} .ag-chips .ch.signal{background:var(--koralle-100);border-color:var(--koralle-600);color:var(--koralle-700);font-weight:500} .ag-chips .ch .avk{width:18px;height:18px;border-radius:50%;background:var(--petrol-600);color:#fff; font-size:8.5px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0} .ag-neu-hin{font-size:11.5px;color:var(--tinte-3);line-height:1.55;padding-top:12px} .npfuss .ag-ziel{font-size:12px;color:var(--tinte-3);margin-right:auto} .npfuss .ag-ziel b{color:var(--tinte-2);font-weight:500} /* Fakten kompakt (01.08.): Gesetztes zweispaltig, Offenes als schmale Reihe darunter. Der frühere Angebots-Stapel war sechs Zeilen hoch und drängte das Gespräch aus dem Bild. */ .agd-fakten2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px 16px} .agd-fakten2 .f2{display:flex;flex-direction:column;gap:1px;min-width:0} .agd-fakten2 .l2{font-family:var(--mono);font-size:9px;letter-spacing:1.1px;text-transform:uppercase; color:var(--tinte-3)} .agd-fakten2 .w2{font-size:13px;color:var(--tinte);display:flex;align-items:center;min-width:0} .agd-fakten2 .avk{display:inline-flex;width:19px;height:19px;border-radius:50%;background:var(--petrol-600); color:#fff;font-size:8.5px;font-weight:600;align-items:center;justify-content:center; margin-right:6px;flex-shrink:0} .agd-offen2{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px} .agd-offen2 .o2{display:inline-flex;align-items:center;gap:6px;border:1px dashed var(--linie-stark); border-radius:99px;background:transparent;color:var(--tinte-3);padding:4px 11px;font-size:11.5px; cursor:pointer;font-family:var(--sans)} .agd-offen2 .o2 svg{width:13px;height:13px} .agd-offen2 .o2:hover{border-color:var(--petrol-600);color:var(--petrol-700);background:#F4F6F5} /* Unteraufgaben (Sascha 01.08.: "aus UX-Sicht viel schöner") — Fortschritt oben, Haken als echtes Ziel, Zeile ruhig, Handgriffe erst beim Zeigen */ .ua-fort{display:inline-flex;align-items:center;gap:7px;float:right;font-weight:400} .ua-balken{width:56px;height:4px;background:var(--linie);border-radius:99px;overflow:hidden;display:block} .ua-balken i{display:block;height:100%;background:var(--petrol-600);border-radius:99px} .ua-fort em{font-style:normal;font-family:var(--mono);font-size:10px;color:var(--tinte-3); letter-spacing:0;text-transform:none} .ua-liste{margin-bottom:4px} .ua2{display:flex;align-items:center;gap:10px;padding:7px 6px;margin:0 -6px;border-radius:var(--r-s); font-size:13px;transition:background-color .12s} .ua2:hover{background:#F4F6F5} .ua2 .hk2{width:18px;height:18px;border:1.5px solid var(--linie-stark);border-radius:5px;flex-shrink:0; background:var(--weiss);cursor:pointer;color:transparent;font-size:11px;line-height:1;padding:0; display:flex;align-items:center;justify-content:center;transition:all .12s} .ua2 .hk2:hover{border-color:var(--petrol-600);color:#C3D3D8} .ua2.done .hk2{background:var(--petrol-600);border-color:var(--petrol-600);color:#fff} .ua2 .t2{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ua2.done .t2{color:var(--tinte-3);text-decoration:line-through} .ua2 .bis2{font-family:var(--mono);font-size:10px;color:var(--tinte-2);flex-shrink:0} .ua2 .wer2{width:20px;height:20px;border-radius:50%;background:var(--petrol-600);color:#fff; font-size:8.5px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0} .ua2.done .wer2{background:#B9BDB6} .ua2 .hoch2,.ua2 .weg{border:none;background:transparent;color:var(--tinte-3);cursor:pointer; font-size:12px;line-height:1;padding:2px 4px;opacity:0;flex-shrink:0;transition:opacity .12s} .ua2:hover .hoch2,.ua2:hover .weg{opacity:1} .ua2 .hoch2:hover,.ua2 .weg:hover{color:var(--petrol-700)} .ua-neu2{display:flex;align-items:center;gap:10px;padding:6px 6px;margin:2px -6px 0;border-radius:var(--r-s)} .ua-neu2:focus-within{background:#F4F6F5} .ua-neu2 .pl{width:18px;text-align:center;color:var(--tinte-3);font-size:14px;flex-shrink:0} .ua-neu2 input{flex:1;min-width:0;border:none;outline:none;background:transparent; font-family:var(--sans);font-size:13px;color:var(--tinte);padding:2px 0} .ua-neu2 input::placeholder{color:var(--tinte-3)} /* Dateien (Sascha 01.08.) — Liste plus Abwurffläche */ .dat-liste{margin-bottom:8px} .dat{display:flex;align-items:center;gap:10px;padding:7px 6px;margin:0 -6px;border-radius:var(--r-s); font-size:13px} .dat:hover{background:#F4F6F5} .dat .ic{width:30px;height:30px;border-radius:var(--r-s);display:flex;align-items:center; justify-content:center;font-family:var(--mono);font-size:8.5px;font-weight:500;flex-shrink:0; letter-spacing:.3px} .dat .ic.pdf{background:#F6E3E0;color:var(--stop)} .dat .ic.bild{background:#E4EFE7;color:var(--ok)} .dat .ic.doc{background:#E2EAF0;color:var(--petrol-700)} .dat .dt{flex:1;min-width:0;line-height:1.35} .dat .dt b{display:block;font-weight:500;font-size:12.5px;white-space:nowrap;overflow:hidden; text-overflow:ellipsis;color:var(--petrol-700);cursor:pointer} .dat .dt em{font-style:normal;font-size:10.5px;color:var(--tinte-3)} .dat .weg{border:none;background:transparent;color:var(--tinte-3);cursor:pointer;font-size:12px; padding:2px 4px;opacity:0;flex-shrink:0} .dat:hover .weg{opacity:1} .dat-zone{display:flex;align-items:center;gap:10px;border:1px dashed var(--linie-stark); border-radius:var(--r-m);padding:11px 13px;font-size:12.5px;color:var(--tinte-3);cursor:pointer; transition:all .15s} .dat-zone svg{width:18px;height:18px;flex-shrink:0} .dat-zone em{font-style:normal;color:var(--tinte-3);opacity:.85} .dat-zone:hover{border-color:var(--petrol-600);color:var(--petrol-700);background:#F4F6F5} .dat-zone.bereit{border-color:var(--petrol-600);border-style:solid;background:#EAF0EE; color:var(--petrol-700)} /* Gespräch & Verlauf (überarbeitet 01.08.): Beiträge bekommen Luft und eine ruhige Sprechblase, System-Ereignisse sind je Tag zusammengefasst und deutlich zurückgenommen. Vorher standen beide Sorten gleichrangig untereinander — genau das war die Unruhe. */ .gv2{display:flex;flex-direction:column;gap:14px} .gv2 .beitrag{display:flex;gap:10px} .gv2 .av2{width:26px;height:26px;border-radius:50%;background:var(--petrol-600);color:#fff; font-size:9.5px;font-weight:600;display:flex;align-items:center;justify-content:center; flex-shrink:0;margin-top:2px} .gv2 .beitrag.eigen .av2{background:var(--koralle-700)} .gv2 .bt{min-width:0;flex:1} .gv2 .bk{display:flex;align-items:baseline;gap:8px;margin-bottom:3px} .gv2 .bk b{font-size:13px;font-weight:600;color:var(--tinte)} .gv2 .bk em{font-style:normal;font-size:10.5px;color:var(--tinte-3);font-family:var(--mono)} .gv2 .btext{font-size:13px;line-height:1.6;color:var(--tinte-2);background:#F4F6F5; border-radius:2px 10px 10px 10px;padding:8px 12px} .gv2 .beitrag.eigen .btext{background:#FFF4EF} .gv2 .erw{color:var(--petrol-700);font-weight:500} .gv2 .sys2{display:flex;gap:9px;align-items:baseline;font-size:11.5px;color:var(--tinte-3); line-height:1.5;padding-left:36px} .gv2 .sys2 .sd{font-family:var(--mono);font-size:9.5px;flex-shrink:0;width:38px} .gv2 .sys2 .stext{min-width:0} .gv2 .sys2 b{font-weight:500;color:var(--tinte-2)} .gv2 .sys2 s{color:#B9BDB6} .gv-eingabe{display:flex;align-items:center;gap:10px;margin-top:14px;padding-top:12px; border-top:1px solid var(--linie)} .gv-eingabe .av{width:26px;height:26px;border-radius:50%;background:var(--koralle-700);color:#fff; font-size:9.5px;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0} .gv-eingabe input{flex:1;min-width:0;border:1px solid var(--linie-stark);border-radius:99px; padding:8px 14px;font-family:var(--sans);font-size:12.5px;color:var(--tinte);outline:none} .gv-eingabe input:focus{border-color:var(--petrol-600);box-shadow:0 0 0 3px rgba(42,90,105,.13)} .gv-eingabe .senden{width:32px;height:32px;border-radius:50%;border:1px solid var(--linie-stark); background:var(--weiss);color:var(--tinte-3);cursor:pointer;flex-shrink:0;font-size:13px} .gv-eingabe .senden:hover{border-color:var(--petrol-600);color:var(--petrol-700);background:#F4F6F5} /* ===== Leistungskatalog (31.07., ADR-0033/0038) — lk-präfixiert, gegen Bestands-CSS geprüft ===== */ .t-lk .kopfzeile,.t-lk .zeile,.t-lk .summe{ grid-template-columns:30px minmax(170px,1.7fr) 104px 128px 76px 84px 60px} .t-lk .lkz{display:flex;align-items:baseline;gap:8px;min-width:0} .t-lk .lkz .abo{font-family:var(--mono);font-size:9.5px;letter-spacing:.6px;color:var(--petrol-600); border:1px solid #CBD8DC;border-radius:3px;padding:0 5px;flex-shrink:0} .t-lk .typz.fremd{color:var(--tinte-3)} .t-lk .preisz{font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap; display:flex;flex-direction:column;line-height:1.25;justify-content:center} .t-lk .preisz em{font-style:normal;font-size:10px;color:var(--tinte-3)} .t-lk .stdz{font-family:var(--mono);font-size:11.5px;color:var(--tinte-2);white-space:nowrap} .t-lk .stdz em{font-style:normal;font-size:10px;color:var(--tinte-3)} .t-lk .verkz{font-family:var(--mono);font-size:11px;color:var(--tinte-3);text-align:right;white-space:nowrap} .lk-reiter{display:flex;gap:4px;align-items:center;margin:-6px 0 14px} .lk-reiter .r{font-size:14px;padding:6px 14px;border-radius:var(--r-s);color:var(--tinte-2);cursor:pointer; background:none;border:none;font-family:var(--sans)} .lk-reiter .r.on{background:var(--petrol-800);color:#fff;font-weight:500} .lk-rumpf{display:grid;grid-template-columns:minmax(0,1fr) 296px;gap:0;background:var(--weiss); border:1px solid var(--linie);border-radius:var(--r-l);box-shadow:var(--schatten);overflow:hidden} .lk-buehne{padding:18px 24px 26px;min-width:0} .lk-bt{font-family:var(--mono);font-size:10px;letter-spacing:1.4px;text-transform:uppercase; color:var(--tinte);font-weight:600;margin:22px 0 9px;padding-bottom:6px;border-bottom:1px solid var(--linie)} .lk-bt:first-child{margin-top:0} .lk-text{font-size:14px;color:var(--tinte-2);line-height:1.7;max-width:72ch;border-radius:var(--r-s); padding:2px 6px;margin:0 -6px;cursor:text} .lk-text:hover{background:#F4F6F5;box-shadow:0 0 0 1px var(--linie-stark)} .lk-proz{border:1px dashed var(--linie-stark);border-radius:var(--r-m);padding:12px 16px; color:var(--tinte-3);font-size:13px;line-height:1.7} .lk-proz .z{display:flex;gap:10px;align-items:baseline} .lk-proz .z .d{font-family:var(--mono);font-size:10.5px;white-space:nowrap;width:64px;flex-shrink:0} .lk-proz .z b{color:var(--tinte-2);font-weight:500} .lk-fakten{border-left:1px solid var(--linie);background:#FCFCFA;padding:18px 20px 26px;min-width:0} .lk-fk{margin-bottom:15px} .lk-fk .l{font-family:var(--mono);font-size:9.5px;letter-spacing:1.2px;text-transform:uppercase; color:var(--tinte-3);margin-bottom:3px} .lk-fk .w{font-size:14px;color:var(--tinte)} .lk-fk .w.geld{font-family:var(--mono);font-size:16px;font-weight:500;letter-spacing:-.3px} .lk-fk .neben{font-size:11.5px;color:var(--tinte-3);line-height:1.5;margin-top:2px} @media(max-width:900px){.lk-rumpf{grid-template-columns:1fr}.lk-fakten{border-left:none;border-top:1px solid var(--linie)}} /* Das Erklär-Band: wie Prozess und Leistung zusammenhängen (ADR-0038) */ .lk-kette{display:flex;align-items:stretch;gap:0;background:var(--weiss);border:1px solid var(--linie); border-radius:var(--r-l);box-shadow:var(--schatten);padding:16px 18px;margin-bottom:16px;overflow-x:auto} .lk-kette .kk{border:1.5px solid var(--linie-stark);border-radius:var(--r-m);background:#FAFAF7; padding:10px 14px;flex:1;min-width:170px} .lk-kette .kk .t{font-family:var(--mono);font-size:9.5px;letter-spacing:1.2px;text-transform:uppercase; color:var(--tinte-3);margin-bottom:3px} .lk-kette .kk .n{font-weight:600;font-size:13.5px;line-height:1.3} .lk-kette .kk .d{font-size:11.5px;color:var(--tinte-2);margin-top:3px;line-height:1.45} .lk-kette .kk.arbeit{border-color:var(--koralle-600);background:#FFF6F3} .lk-kette .kk.haupt{border-color:var(--petrol-600);background:#F2F6F6} .lk-kette .kpf{display:flex;flex-direction:column;align-items:center;justify-content:center; padding:0 10px;color:var(--tinte-3);flex-shrink:0} .lk-kette .kpf .p{font-size:16px;line-height:1} .lk-kette .kpf .b{font-family:var(--mono);font-size:9px;letter-spacing:.5px;white-space:nowrap;margin-top:2px} .lk-proz .z.klick{cursor:pointer;border-radius:var(--r-s);margin:0 -6px;padding:1px 6px} .lk-proz .z.klick:hover{background:#F4F6F5} .lk-proz .z.klick:hover b{color:var(--petrol-700);text-decoration:underline;text-underline-offset:3px} /* ===== Angebote (ADR-0043) — Modul .agb, Stile bewusst eingeschraenkt ===== */ .nur-sr{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important} .agb.listenansicht{padding:22px 30px 60px;max-width:1760px;margin:0 auto} .agb .lkopf{display:flex;align-items:baseline;gap:12px;margin-bottom:14px;flex-wrap:wrap} .agb .lkopf h1{font-size:23px;font-weight:600;letter-spacing:-.4px} .agb .lkopf .anzahl{font-size:13px;color:var(--tinte-3)} .agb .lkopf .rechts{margin-left:auto;display:flex;gap:8px} .agb .neu-kn{border:1px solid var(--petrol-700);background:var(--petrol-800);color:#fff;border-radius:var(--r-s);padding:7px 14px;font-size:13.5px;font-weight:500;display:inline-flex;gap:7px;align-items:center} .agb .neu-kn svg{width:15px;height:15px} .agb .neu-kn:hover{background:var(--petrol-700)} .agb .suchfeld{display:flex;align-items:center;gap:10px;background:var(--weiss);border:1px solid var(--linie-stark);border-radius:var(--r-m);padding:9px 14px;margin-bottom:12px} .agb .suchfeld svg{width:16px;height:16px;color:var(--tinte-3)} .agb .suchfeld input{border:0;outline:0;background:transparent;min-width:0;flex:1} .agb .suchfeld:focus-within{border-color:var(--petrol-600);box-shadow:0 0 0 3px rgba(42,90,105,.13)} .agb .ansichten{display:flex;gap:6px;align-items:center;margin-bottom:14px;flex-wrap:wrap} .agb .chip{font-size:12.5px;padding:4px 11px;border-radius:99px;border:1px solid var(--linie);background:var(--weiss);color:var(--tinte-2);display:inline-flex;gap:6px;align-items:center} .agb .chip .n{font:10.5px var(--mono);color:var(--tinte-3)} .agb .chip.on{background:var(--petrol-800);border-color:var(--petrol-800);color:#fff;font-weight:500} .agb .chip.on .n{color:#C6D5DA} .agb .werkzeuge{margin-left:auto} .agb .werkzeug{font-size:12.5px;padding:4px 11px;border-radius:var(--r-s);border:1px solid var(--linie-stark);background:var(--weiss);color:var(--tinte-2)} .agb .tabellen-scroll{overflow-x:auto;background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r-l);box-shadow:var(--schatten)} .agb .tabelle{font-size:13.5px;min-width:870px} .agb .tabelle>.kopfzeile,.agb .tabelle>.zeile{display:grid;grid-template-columns:34px minmax(210px,1.45fr) minmax(160px,1fr) 150px 100px 132px 112px;gap:10px;align-items:center;padding:0 14px} .agb .tabelle>.kopfzeile{height:36px;background:#FBFBF8;border-bottom:1px solid var(--linie);font:10px var(--mono);letter-spacing:1.2px;text-transform:uppercase;color:var(--tinte-3)} .agb .kasten{width:14px;height:14px;border:1.5px solid var(--linie-stark);border-radius:3px;background:var(--weiss);display:inline-block} .agb .g-kopf{display:flex;align-items:center;gap:8px;padding:7px 14px;background:#F6F7F5;border-bottom:1px solid var(--linie);font-size:12.5px} .agb .g-kopf .pf{font-size:9px;color:var(--tinte-3)} .agb .g-kopf .n{font:10.5px var(--mono);color:var(--tinte-3)} .agb .g-kopf[hidden],.agb .zeile[hidden]{display:none} .agb .zeile{height:48px;border-bottom:1px solid var(--linie);cursor:pointer;position:relative} .agb .zeile:hover,.agb .zeile:focus-visible{background:#F4F6F5;box-shadow:inset 2px 0 0 var(--petrol-600)} .agb .zeile:last-child{border-bottom:0} .agb .angebotsname{min-width:0} .agb .angebotsname b{display:block;color:var(--petrol-700);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .agb .kunde b{font-weight:500} .agb .kunde small,.agb .wert small{display:block;color:var(--tinte-3);font-size:11px} .agb .wert{text-align:right;font-family:var(--mono);white-space:nowrap} .agb .wert b{font-size:12px} .agb .datum{font:11px var(--mono);color:var(--tinte-2)} .agb .betreuer{display:flex;align-items:center;gap:7px;white-space:nowrap} .agb .kuerzelbild{width:26px;height:26px;border-radius:50%;background:#E6ECEB;color:var(--petrol-700);display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;flex-shrink:0} .agb .stz{font-size:11px;font-weight:500;padding:2px 8px;border-radius:99px;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;justify-self:start} .agb .stz:before{content:"";width:4px;height:4px;border-radius:50%;background:currentColor} .agb .stz.entwurf{background:#F2F2EE;color:var(--tinte-2)} .agb .stz.pruefung{background:var(--koralle-100);color:var(--koralle-700)} .agb .stz.versendet{background:#EAF2F0;color:var(--petrol-700)} .agb .stz.abgelaufen{background:#F7E9E5;color:var(--stop)} .agb .leer-filter{padding:30px;text-align:center;color:var(--tinte-3);display:none} .agb .leer-filter.an{display:block} .panel.agb{position:fixed;z-index:80;right:0;top:0;bottom:0;width:58vw;max-width:840px;background:var(--weiss);border-left:1px solid var(--linie-stark);display:flex;flex-direction:column;transform:translateX(102%);transition:transform .22s cubic-bezier(.2,.8,.2,1)} .panel.agb.an{transform:translateX(0);box-shadow:-14px 0 34px rgba(25,28,24,.14)} .panel.agb[aria-hidden=true]{visibility:hidden;transition:transform .22s,visibility 0s .22s} .panel.agb[aria-hidden=false]{visibility:visible} .panel.agb.schmal{width:min(460px,100vw)} .panel.agb.bibliothek{width:min(720px,100vw)} .panel.agb>form{height:100%;min-height:0;display:flex;flex-direction:column} .panel.agb>form>.prumpf{flex:1;overflow:auto} .agb .pkopf{padding:16px 20px 14px;border-bottom:1px solid var(--linie);flex-shrink:0} .agb .pkopf-oben{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px} .agb .panel-steuerung{display:flex;align-items:center;gap:6px} .agb .symbol-kn{width:30px;height:30px;border:1px solid var(--linie);border-radius:var(--r-s);display:flex;align-items:center;justify-content:center;color:var(--tinte-2)} .agb .symbol-kn:hover{background:#F2F2EE} .agb .symbol-kn svg{width:15px;height:15px} .agb .panel-stand{font:10.5px var(--mono);color:var(--tinte-3)} .agb .pkopf h2{font-size:20px;letter-spacing:-.35px} .agb .pkopf p{font-size:12.5px;color:var(--tinte-2);margin-top:2px} .agb .panel-daten{display:flex;gap:7px;align-items:center;margin-top:7px;color:var(--tinte-2);font-size:12.5px} .agb .prumpf{flex:1;overflow:auto;padding:18px 20px} .agb .pfuss{padding:12px 20px;border-top:1px solid var(--linie);background:#FCFCFA;display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-shrink:0} .agb .pfuss .ziel{margin-right:auto;color:var(--tinte-3);font-size:11.5px} .agb .knopf{border:1px solid var(--linie-stark);background:var(--weiss);border-radius:var(--r-s);padding:7px 12px;font-size:13px;font-weight:500;display:inline-flex;align-items:center;justify-content:center;gap:6px} .agb .knopf:hover{background:#F4F6F5} .agb .knopf.haupt{border-color:var(--petrol-700);background:var(--petrol-800);color:#fff} .agb .knopf.haupt:hover{background:var(--petrol-700)} .agb .knopf.signal{border-color:var(--koralle-600);background:var(--koralle-100);color:var(--koralle-700)} .agb .knopf:disabled{opacity:.45;cursor:not-allowed} .agb .naechster{border-left:3px solid var(--koralle-400);padding:2px 0 2px 13px;margin-bottom:22px} .agb .ueberzeile{font:9.5px var(--mono);letter-spacing:1.2px;text-transform:uppercase;color:var(--tinte-3)} .agb .naechster b{display:block;font-size:16px;margin-top:3px} .agb .naechster p{font-size:12.5px;color:var(--tinte-2);margin-top:2px} .agb .panel-fakten{border-top:1px solid var(--linie)} .agb .panel-fakt{display:grid;grid-template-columns:145px minmax(0,1fr);gap:12px;padding:11px 0;border-bottom:1px solid var(--linie)} .agb .panel-fakt>span:first-child{font-size:12px;color:var(--tinte-3)} .agb .panel-fakt strong{display:block;font-weight:500} .agb .panel-fakt strong+small{display:block;color:var(--tinte-3);font-size:11.5px;margin-top:2px} .agb .wertpaar{display:flex;gap:26px;flex-wrap:wrap} .agb .wertpaar small{display:block;color:var(--tinte-3);font-size:10.5px} .agb .wertpaar b{font:13px var(--mono)} .agb .aktivitaet{padding-top:18px} .agb .aktivitaet b{display:block;font-size:12px} .agb .aktivitaet p{font-size:12.5px;color:var(--tinte-2);margin-top:3px} .agb .startwahl{border:0;margin-bottom:20px} .agb .startwahl legend{font-weight:600;margin-bottom:8px} .agb .startoption{width:100%;display:grid;grid-template-columns:18px 1fr auto;gap:10px;align-items:start;padding:12px 0;border-bottom:1px solid var(--linie);text-align:left} .agb .startoption:first-of-type{border-top:1px solid var(--linie)} .agb .startoption .wahlkreis{width:16px;height:16px;border:1.5px solid var(--linie-stark);border-radius:50%;margin-top:2px} .agb .startoption.aktiv .wahlkreis{border:5px solid var(--petrol-700)} .agb .startoption b{display:block;font-size:13.5px} .agb .startoption small{display:block;color:var(--tinte-2);margin-top:2px} .agb .startoption em{font-style:normal;font-size:10px;color:var(--tinte-3)} .agb .quellhinweis{padding:10px 12px;background:#F2F6F6;border-left:2px solid var(--petrol-600);font-size:12px;margin-bottom:18px} .agb .quellhinweis b{display:block} .agb .quellhinweis small{color:var(--tinte-2)} .agb .felder{display:grid;gap:13px} .agb .feld label{display:block;font-size:11.5px;color:var(--tinte-2);margin-bottom:4px} .agb .feld label em{font-style:normal;color:var(--stop)} .agb .feld input,.agb .feld select,.agb .feld textarea{width:100%;border:1px solid var(--linie-stark);background:var(--weiss);border-radius:var(--r-s);padding:8px 10px;outline:0} .agb .feld textarea{min-height:120px;resize:vertical} .agb .feld input:focus,.agb .feld select:focus,.agb .feld textarea:focus{border-color:var(--petrol-600);box-shadow:0 0 0 3px rgba(42,90,105,.12)} .agb.werkansicht{height:100%;overflow:hidden} .agb.werkansicht.an{display:flex;flex-direction:column} .agb .werkkopf{position:static;z-index:15;background:rgba(247,247,244,.96);border-bottom:1px solid var(--linie);padding:12px 22px;display:flex;gap:18px;align-items:center;min-height:70px;flex-shrink:0} .agb .werktitel{min-width:0;flex:1} .agb .kontext{display:flex;gap:7px;align-items:center;font-size:11.5px;color:var(--tinte-3);margin-bottom:1px} .agb .kontext button{color:var(--petrol-700);font-weight:500} .agb .titelzeile{display:flex;gap:9px;align-items:center;min-width:0} .agb .titelzeile h1{font-size:21px;letter-spacing:-.4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .agb .speicherstand{font-size:10.5px;color:var(--tinte-3)} .agb .kopfaktionen{display:flex;align-items:center;gap:7px} .agb .modus{display:flex;border:1px solid var(--linie-stark);border-radius:var(--r-s);overflow:hidden;background:var(--weiss)} .agb .modus button{padding:6px 10px;font-size:12px} .agb .modus button[aria-pressed=true]{background:var(--petrol-800);color:#fff} .agb .werk-rumpf{padding:18px 22px 55px;overflow:auto;min-height:0;flex:1} .agb .werkraster{display:grid;grid-template-columns:minmax(0,1fr) 296px;max-width:1500px;margin:0 auto;background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r-l);box-shadow:var(--schatten);overflow:hidden} .agb .buehne{min-width:0;padding:0 22px 26px} .agb .einfuegeleiste{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--linie);margin:0 -22px 18px;padding:10px 22px;display:flex;gap:6px;align-items:center;overflow-x:auto} .agb .einfuegeleiste button{white-space:nowrap} .agb .einfuegen-haupt{border-color:var(--petrol-600);color:var(--petrol-700);background:#F2F6F6} .agb .dokument-scroll{overflow-x:auto;padding:2px 0 12px} .agb .papier{width:min(760px,100%);min-width:620px;margin:0 auto;background:#fff;padding:42px 52px 48px;border:1px solid var(--linie);box-shadow:0 8px 26px rgba(25,28,24,.06);font-size:13px} .agb .briefkopf{display:flex;justify-content:space-between;gap:20px;padding-bottom:28px;border-bottom:1px solid var(--linie)} .agb .agenturlogo{font-weight:600;font-size:15px} .agb .agenturlogo span{color:var(--koralle-700)} .agb .agenturadresse{text-align:right;font-size:10.5px;color:var(--tinte-3)} .agb .empfaenger{margin:28px 0 25px} .agb .empfaenger .absender{font-size:9px;color:var(--tinte-3);margin-bottom:6px} .agb .angebots-kicker{font:9.5px var(--mono);letter-spacing:.7px;color:var(--tinte-3);text-transform:uppercase} .agb .papier h2{font-size:26px;line-height:1.2;margin:7px 0 13px;letter-spacing:-.5px} .agb .papier .einleitung{font-size:14px;line-height:1.7;color:var(--tinte-2);margin-bottom:29px} .agb .papier [contenteditable=true]{border-radius:3px} .agb .papier [contenteditable=true]:hover{background:#F7F8F6;box-shadow:0 0 0 4px #F7F8F6} .agb .papier [contenteditable=true]:focus{outline:2px solid var(--petrol-600);outline-offset:4px} .agb .dokumentgruppe{margin:25px 0} .agb .gruppenkopf{display:flex;gap:14px;align-items:baseline;border-bottom:1px solid var(--tinte);padding-bottom:7px} .agb .gruppenkopf h3{font-size:16px;flex:1} .agb .gruppenkopf strong{font:12px var(--mono)} .agb .gruppenintro{color:var(--tinte-2);margin:9px 0 12px} .agb .position{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:18px;padding:15px 0;border-bottom:1px solid var(--linie)} .agb .position h4{font-size:14px;margin-bottom:5px} .agb .position p{color:var(--tinte-2);line-height:1.65} .agb .optional-marke{display:inline-block;font:9px var(--mono);color:var(--koralle-700);background:var(--koralle-100);padding:1px 6px;border-radius:99px;margin-left:5px} .agb .preis-kn{text-align:right} .agb .preis-kn b{display:block;font:12px var(--mono)} .agb .preis-kn small{display:block;color:var(--tinte-3);font-size:10px} .agb .preis-kn span{font-size:10.5px;color:var(--petrol-700);text-decoration:underline;text-underline-offset:2px} .agb .gruppen-summe{display:flex;justify-content:space-between;padding-top:10px;font-weight:500} .agb .gruppen-summe strong{font:12px var(--mono)} .agb .positions-editor{grid-column:1/-1;background:#F7F8F6;border-top:1px solid var(--linie);padding:11px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px} .agb .positions-editor[hidden]{display:none} .agb .positions-editor label{font-size:10px;color:var(--tinte-3)} .agb .positions-editor input,.agb .positions-editor select{width:100%;border:1px solid var(--linie-stark);background:#fff;border-radius:4px;padding:6px} .agb .positions-editor .editor-aktion{display:flex;align-items:end} .agb .positions-editor .editor-aktion button{width:100%} .agb .kontext-einfuegen{display:flex;align-items:center;gap:7px;margin:10px 0;padding:7px 0;border-top:1px dashed var(--linie-stark);border-bottom:1px dashed var(--linie-stark);color:var(--tinte-3);font-size:11px} .agb .kontext-einfuegen span{margin-right:auto} .agb .kontext-einfuegen button{color:var(--petrol-700);padding:3px 6px;border-radius:4px} .agb .kontext-einfuegen button:hover{background:#F2F6F6} .agb .dokument-summe{margin-top:26px;margin-left:auto;width:310px} .agb .summenzeile{display:flex;justify-content:space-between;padding:5px 0} .agb .summenzeile span:last-child{font-family:var(--mono)} .agb .summenzeile.haupt{border-top:1px solid var(--linie-stark);font-weight:600;font-size:14px;padding-top:8px} .agb .bedingungen{margin-top:24px;color:var(--tinte-2);line-height:1.65} .agb .leerstart{padding:42px 28px;text-align:center;border:1px dashed var(--linie-stark);background:#FBFBF8;margin:28px auto;max-width:620px} .agb .leerstart[hidden]{display:none} .agb .leerstart .leer-symbol{width:42px;height:42px;border-radius:50%;background:#EAF0EF;color:var(--petrol-700);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-size:24px} .agb .leerstart h2{font-size:19px} .agb .leerstart p{color:var(--tinte-2);max-width:52ch;margin:5px auto 15px} .agb.werkseite.leer [data-nur-gefuellt]{display:none!important} .agb.werkseite.aus-null [data-optionale-gruppe]{display:none!important} .agb .fakten{border-left:1px solid var(--linie);background:#FCFCFA;padding:18px 18px 25px;min-width:0} .agb .fakten h2{font-size:14px} .agb .fakten-kopf{display:flex;justify-content:space-between;align-items:start;padding-bottom:12px;border-bottom:1px solid var(--linie)} .agb .fakten-kopf small{display:block;color:var(--tinte-3)} .agb .version{font:9.5px var(--mono);color:var(--tinte-3)} .agb .hauptsumme{padding:14px 0;border-bottom:1px solid var(--linie)} .agb .hauptsumme>small{font-size:10px;color:var(--tinte-3)} .agb .hauptsumme>strong{display:block;font:21px var(--mono);letter-spacing:-.5px} .agb .wiederkehrend{display:flex;justify-content:space-between;margin-top:6px;font-size:11.5px} .agb .wiederkehrend b{font-family:var(--mono)} .agb .vitalwerte{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:11px} .agb .vitalwerte span{border-top:1px solid var(--linie);padding-top:6px} .agb .vitalwerte small{display:block;color:var(--tinte-3)} .agb .vitalwerte b{font:12px var(--mono)} .agb .bereitschaft{display:flex;gap:9px;align-items:center;padding:12px 0;border-bottom:1px solid var(--linie);color:var(--ok)} .agb .bereitschaft.offen{color:var(--warn)} .agb .bereitschaft i{width:25px;height:25px;border-radius:50%;background:#EAF3ED;display:flex;align-items:center;justify-content:center;font:600 8px var(--sans);font-style:normal} .agb .bereitschaft.offen i{background:#F6F0E4;font-size:12px} .agb .bereitschaft small{display:block;color:var(--tinte-3)} .agb .faktenblock{padding:13px 0;border-bottom:1px solid var(--linie)} .agb .fakten-titel{font:9.5px var(--mono);letter-spacing:1.1px;text-transform:uppercase;color:var(--tinte-3);margin-bottom:8px} .agb .empfaenger-zeile{display:flex;align-items:center;gap:8px} .agb .empfaenger-zeile span:nth-child(2){min-width:0;flex:1} .agb .empfaenger-zeile b,.agb .empfaenger-zeile small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .agb .empfaenger-zeile small{color:var(--tinte-3)} .agb .faktenraster{display:grid;grid-template-columns:1fr 1fr;gap:11px} .agb .faktenraster small{display:block;color:var(--tinte-3);font-size:10px} .agb .faktenraster b,.agb .faktenraster button{font-size:12px;font-weight:500} .agb .faktenzeile{display:flex;justify-content:space-between;padding:3px 0;font-size:12px} .agb .faktenzeile strong{font-family:var(--mono)} .agb .spannenbalken{height:4px;background:#E8E8E2;border-radius:99px;margin-top:8px;overflow:hidden} .agb .spannenbalken i{display:block;height:100%;width:64%;background:var(--petrol-600)} .agb .preisquelle{font-size:10.5px;color:var(--tinte-3);margin-top:6px} .agb .pruefpunkte{display:grid;grid-template-columns:1fr 1fr;gap:5px;font-size:11px;color:var(--ok)} .agb .faktenaktionen{padding-top:14px} .agb .faktenaktionen .knopf{width:100%} .agb .faktenaktionen small{display:block;text-align:center;color:var(--tinte-3);margin-top:5px} .agb .verlauf{max-width:1500px;margin:13px auto 0;background:#fff;border:1px solid var(--linie);border-radius:var(--r-m)} .agb .verlauf summary{padding:10px 14px;cursor:pointer;font-weight:500} .agb .verlauf summary small{float:right;color:var(--tinte-3);font-weight:400} .agb .zeitspur{padding:0 14px 12px} .agb .ereignis{padding:8px 0;border-top:1px solid var(--linie);font-size:12px} .agb .ereignis span{display:block;color:var(--tinte-3)} .agb.werkseite.pdf .einfuegeleiste,.agb.werkseite.pdf .kontext-einfuegen,.agb.werkseite.pdf .preis-kn span,.agb.werkseite.pdf .positions-editor{display:none!important} .agb.werkseite.pdf .papier [contenteditable]{pointer-events:none} body.agb-fokus .app{grid-template-columns:minmax(0,1fr)} body.agb-fokus .leiste,body.agb-fokus .agb .fakten{display:none} body.agb-fokus .agb .werkraster{grid-template-columns:minmax(0,1fr)} body.agb-fokus .agb .buehne{padding-left:30px;padding-right:30px} .agb .bibliothek-suche{display:flex;gap:8px;align-items:center;border:1px solid var(--linie-stark);border-radius:var(--r-s);padding:8px 10px} .agb .bibliothek-suche input{border:0;outline:0;flex:1;min-width:0} .agb .bibliothek-kategorien{display:flex;gap:5px;flex-wrap:wrap;padding:12px 0;border-bottom:1px solid var(--linie)} .agb .bibliothek-raster{display:grid;grid-template-columns:minmax(0,1fr) 245px;min-height:390px} .agb .bibliothek-liste{border-right:1px solid var(--linie);padding-right:14px} .agb .bibliothek-vorschau{padding-left:16px} .agb .bibliothek-zeile{width:100%;display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 7px;border-bottom:1px solid var(--linie);text-align:left} .agb .bibliothek-zeile:hover,.agb .bibliothek-zeile.aktiv{background:#F3F6F5} .agb .bibliothek-zeile.aktiv{box-shadow:inset 2px 0 0 var(--petrol-600)} .agb .typzeichen{width:27px;height:27px;border-radius:5px;background:#EAF0EF;color:var(--petrol-700);display:flex;align-items:center;justify-content:center;font:10px var(--mono)} .agb .bibliothek-zeile b{display:block;font-size:13px} .agb .bibliothek-zeile small,.agb .bibliothek-zeile em{display:block;color:var(--tinte-3);font-size:10.5px;font-style:normal} .agb .bibliothek-preis{text-align:right;font:11px var(--mono)} .agb .bibliothek-vorschau .ueberzeile{margin-bottom:7px} .agb .bibliothek-vorschau h3{font-size:17px} .agb .bibliothek-vorschau p{font-size:12px;color:var(--tinte-2);margin:7px 0 15px} .agb .vorschau-fakt{border-top:1px solid var(--linie);padding:7px 0} .agb .vorschau-fakt small{display:block;color:var(--tinte-3)} .agb .vorschau-fakt b{font-size:12px} .agb .bibliothek-leer{display:none;padding:25px;text-align:center;color:var(--tinte-3)} .agb .bibliothek-leer.an{display:block} .agb .versandcheck{margin:17px 0;border-top:1px solid var(--linie)} .agb .pruefzeile{display:flex;gap:8px;align-items:center;padding:9px 0;border-bottom:1px solid var(--linie);font-size:12px} .agb .pruefzeile i{color:var(--ok);font-style:normal} .agb .pruefzeile small{margin-left:auto;color:var(--tinte-3)} .agb .versandhinweis{font-size:11.5px;color:var(--tinte-2);background:#F2F6F6;border-left:2px solid var(--petrol-600);padding:9px 11px} @media(max-width:1180px){.agb .werkraster{grid-template-columns:1fr} .agb .fakten{border-left:0;border-top:1px solid var(--linie)} body.agb-fokus .agb .fakten{display:none}} @media(max-width:1050px){.agb.listenansicht{padding:18px 20px 50px} .panel.agb{width:min(680px,100vw)}} @media(max-width:720px){.agb.listenansicht{padding:15px 14px 45px} .agb .lkopf{align-items:center} .agb .lkopf .rechts{margin-left:auto} .agb .ansichten{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px} .agb .werkzeuge{margin-left:0} .agb .werkkopf{padding:10px 12px;align-items:flex-start;flex-wrap:wrap} .agb .werktitel{flex-basis:calc(100% - 30px)} .agb .kopfaktionen{width:100%;justify-content:flex-end} .agb .werk-rumpf{padding:10px 8px 35px} .agb .buehne{padding:0 10px 18px} .agb .einfuegeleiste{top:0;margin:0 -10px 12px;padding:8px 10px} .agb .fakten{padding:15px} .agb .verlauf summary small{float:none;display:block} .agb .panel-fakt{grid-template-columns:110px minmax(0,1fr)} .agb .bibliothek-raster{grid-template-columns:1fr} .agb .bibliothek-liste{border-right:0;padding-right:0} .agb .bibliothek-vorschau{display:none} .panel.agb .pfuss .ziel{display:none}} @media(max-width:430px){.agb .lkopf h1{font-size:21px} .agb .lkopf .anzahl{order:3;width:100%} .agb .neu-kn{padding:7px 10px} .agb .titelzeile h1{font-size:18px} .agb .kopfaktionen .fokus-kn{display:none} .agb .modus button{padding:6px 8px} .agb .papier{padding:34px 38px} .agb .positions-editor{grid-template-columns:1fr 1fr} .agb .pfuss{padding:10px 12px} .agb .pkopf,.agb .prumpf{padding-left:14px;padding-right:14px} .agb .wertpaar{gap:12px}} .agb [hidden]{display:none!important} /* Gegenregeln: globale Prototyp-Muster, die nicht ins Angebots-Modul gehoeren. .buehne ist auf Detailseiten ein Zweispalten-Raster (ADR-0018), hier die Dokumentflaeche; .pkopf ist im Bestand ein Flex-Listenkopf, hier ein gestapelter Panel-Kopf. */ .agb .buehne{display:block;grid-template-columns:none} .agb .pkopf{display:block;background:transparent;gap:0} .agb .zeile .kunde{display:block} .agb .suchfeld{box-shadow:none} .agb .werkzeuge{margin-bottom:0} .agb .tabelle{background:transparent;border:0;box-shadow:none;border-radius:0} .agb .tabelle>.kopfzeile{position:static} .agb .g-kopf{border-top:0} /* ===== Einstellungen (03.08.) — Bildschirm hinter dem Menue am Benutzerbild (ADR-0022). Der Entwurf stammt aus codex/entwuerfe/einstellungen/; die Sektionsleiste links ist die von Sascha bestaetigte Fassung. ALLE Regeln sind unter .einst gekapselt, weil der Prototyp Namen wie .monat, .ereignis oder .ueberzeile bereits fuehrt; die sieben wirklich kollidierenden Klassen tragen zusaetzlich das Praefix e-. ===== */ .einst *{box-sizing:border-box;margin:0;padding:0} .einst [hidden]{display:none!important} .einst [tabindex]:focus-visible{outline:2px solid var(--petrol-600);outline-offset:2px;border-radius:var(--r-s)} /* Verbindliche Seitenleiste aus ui-muster.html, Stand ADR-0041. */ .benutzermenue{position:fixed;left:132px;bottom:55px;width:190px;background:var(--weiss);color:var(--tinte);border:1px solid var(--linie-stark);border-radius:var(--r-m);box-shadow:0 12px 32px rgba(8,20,25,.18);padding:6px;z-index:80;transform-origin:bottom right;animation:einst-menuein .14s ease-out} .benutzermenue button{width:100%;display:flex;padding:8px 10px;border-radius:var(--r-s);font-size:13px} .benutzermenue button:hover, .benutzermenue button:focus-visible{background:#F0F2EF} .benutzermenue .aktiv{color:var(--petrol-700);font-weight:600;background:#EDF2F1} .benutzermenue hr{border:0;border-top:1px solid var(--linie);margin:5px} @keyframes einst-menuein{from{opacity:0;transform:translateY(5px) scale(.98)}to{opacity:1;transform:none}} .app.eng .benutzermenue{left:66px} /* Einstellungen: ruhige Arbeitsfläche mit einer dominanten inneren Navigation. */ .einst .arbeitsflaeche{height:100%;overflow:auto;min-width:0} .einst .seitenkopf{min-height:72px;padding:13px 28px;border-bottom:1px solid var(--linie);background:rgba(247,247,244,.96);display:flex;align-items:center;gap:20px;position:sticky;top:0;z-index:30} .einst .seitenkopf .titel{flex:1;min-width:0} .einst .pfad{font-size:11px;color:var(--tinte-3);margin-bottom:1px} .einst .seitenkopf h1{font-size:23px;line-height:1.15;letter-spacing:-.4px} .einst .kopfwerkzeuge{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .einst .sichtwahl-hinweis{font-size:11.5px;color:var(--tinte-3)} .einst .rollenauswahl{border:1px solid var(--linie-stark);background:var(--weiss);border-radius:var(--r-s);padding:6px 9px;font-size:12px} .einst .rahmen{max-width:1500px;margin:0 auto;padding:22px 28px 60px} .einst .einstellungsraster{display:grid;grid-template-columns:248px minmax(0,1fr);gap:28px;align-items:start} .einst .sektionen{position:sticky;top:94px;min-width:0} .einst .sektion-suche{display:flex;align-items:center;gap:8px;border:1px solid var(--linie-stark);background:var(--weiss);border-radius:var(--r-m);padding:8px 10px;margin-bottom:14px} .einst .sektion-suche svg{width:15px;height:15px;color:var(--tinte-3);flex-shrink:0} .einst .sektion-suche input{min-width:0;width:100%;border:0;outline:0;background:transparent;font-size:13px} .einst .suchinfo{font-size:11px;color:var(--tinte-3);min-height:18px;margin:-8px 2px 8px} .einst .navblock{margin-bottom:18px} .einst .navblock h2{font:10px var(--mono);letter-spacing:1.3px;text-transform:uppercase;color:var(--tinte-3);padding:0 8px 6px} .einst .snav{width:100%;display:flex;align-items:center;gap:9px;text-align:left;padding:7px 9px;border-radius:var(--r-s);font-size:13.5px;color:var(--tinte-2);position:relative} .einst .snav:hover{background:#ECEFEB;color:var(--tinte)} .einst .snav.aktiv{background:#E7ECEA;color:var(--petrol-700);font-weight:600} .einst .snav.aktiv:before{content:'';position:absolute;left:-1px;top:7px;bottom:7px;width:2px;border-radius:2px;background:var(--koralle-600)} .einst .snav .anz{margin-left:auto;font:10px var(--mono);color:var(--tinte-3)} .einst .snav[hidden]{display:none} .einst .geltung{margin-top:16px;padding:10px 11px;border-left:2px solid var(--petrol-600);background:#EFF3F2;font-size:11.5px;color:var(--tinte-2)} .einst .inhalt{min-width:0} .einst .bereich{display:none;animation:einst-bereichin .16s ease-out} .einst .bereich.aktiv{display:block} @keyframes einst-bereichin{from{opacity:.35;transform:translateY(3px)}to{opacity:1;transform:none}} .einst .bereichkopf{display:flex;align-items:flex-start;gap:18px;padding-bottom:17px;border-bottom:1px solid var(--linie);margin-bottom:20px} .einst .bereichkopf>div{flex:1} .einst .e-ueberzeile{display:block;font:10px var(--mono);letter-spacing:1.2px;text-transform:uppercase;color:var(--koralle-700);margin-bottom:5px} .einst .bereichkopf h2{font-size:26px;line-height:1.15;letter-spacing:-.5px} .einst .bereichkopf p{font-size:13.5px;color:var(--tinte-2);margin-top:6px;max-width:70ch} .einst .scope{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--linie);background:var(--weiss);border-radius:99px;padding:5px 9px;font:10.5px var(--mono);color:var(--tinte-2);white-space:nowrap} .einst .scope:before{content:'';width:5px;height:5px;border-radius:50%;background:var(--petrol-600)} .einst .hinweis{border-left:3px solid var(--koralle-400);background:#FFF8F5;padding:11px 14px;margin-bottom:18px;font-size:12.5px;color:var(--tinte-2)} .einst .hinweis b{color:var(--tinte)} .einst .hinweis.warn{border-color:var(--warn);background:var(--warn-bg)} .einst .einstellungsgruppe{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r-l);box-shadow:var(--schatten);margin-bottom:16px;overflow:hidden} .einst .e-gruppenkopf{padding:15px 18px 12px;display:flex;gap:12px;align-items:flex-start;border-bottom:1px solid var(--linie)} .einst .e-gruppenkopf>div{flex:1} .einst .e-gruppenkopf h3{font-size:16px;line-height:1.3} .einst .e-gruppenkopf p{font-size:12.5px;color:var(--tinte-2);margin-top:3px} .einst .statuspille{font:9.5px var(--mono);text-transform:uppercase;letter-spacing:.6px;padding:3px 7px;border-radius:99px;background:var(--ok-bg);color:var(--ok);white-space:nowrap} .einst .statuspille.offen{background:var(--warn-bg);color:var(--warn)} .einst .listenwerkzeug{display:flex;align-items:center;gap:8px;padding:9px 18px;background:#FBFBF8;border-bottom:1px solid var(--linie)} .einst .listenwerkzeug .ergebnis{font-size:11.5px;color:var(--tinte-3);flex:1} .einst .kleinknopf{border:1px solid var(--linie-stark);background:var(--weiss);border-radius:var(--r-s);padding:5px 9px;font-size:12px;font-weight:500} .einst .kleinknopf:hover{background:#F0F2EF} .einst .kleinknopf.haupt{background:var(--petrol-800);color:#fff;border-color:var(--petrol-800)} .einst .kleinknopf.haupt:hover{background:var(--petrol-700)} .einst .wertkopf, .einst .wertzeile{display:grid;grid-template-columns:minmax(180px,1.45fr) minmax(110px,.72fr) 92px 116px;gap:12px;align-items:center;padding:0 18px} .einst .wertkopf{height:34px;background:#FCFCFA;border-bottom:1px solid var(--linie);font:9.5px var(--mono);letter-spacing:1px;text-transform:uppercase;color:var(--tinte-3)} .einst .wertzeile{min-height:46px;border-bottom:1px solid var(--linie);font-size:13px} .einst .wertzeile:last-child{border-bottom:0} .einst .wertname{display:flex;align-items:center;gap:8px;min-width:0} .einst .griff{color:var(--linie-stark);font:15px var(--mono);cursor:grab} .einst .nameknopf{min-width:0;text-align:left;font-weight:500;color:var(--petrol-700);padding:4px 2px;border-radius:3px} .einst .nameknopf:hover:after, .einst .nameknopf:focus-visible:after{content:' bearbeiten';font-size:10px;color:var(--tinte-3);font-weight:400} .einst .nameeingabe{width:100%;border:1px solid var(--petrol-600);border-radius:var(--r-s);padding:5px 7px;background:#fff;box-shadow:0 0 0 3px rgba(42,90,105,.11)} .einst .verwendung{font-size:11.5px;color:var(--tinte-2);text-align:left} .einst .verwendung:hover{text-decoration:underline;color:var(--petrol-700)} .einst .standard{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--tinte-2)} .einst .standard input{accent-color:var(--petrol-700)} .einst .zeilenaktionen{display:flex;justify-content:flex-end;gap:3px} .einst .symbolknopf{width:26px;height:26px;border:1px solid transparent;border-radius:var(--r-s);display:flex;align-items:center;justify-content:center;color:var(--tinte-3);font-size:14px} .einst .symbolknopf:hover{border-color:var(--linie);background:#F2F3F0;color:var(--tinte)} .einst .symbolknopf.gefahr:hover{background:var(--stop-bg);color:var(--stop);border-color:#EDC9C1} .einst .neu-zeile{background:#F4F7F6} .einst .inaktive{border-top:1px solid var(--linie)} .einst .inaktive summary{cursor:pointer;list-style:none;padding:10px 18px;font-size:12px;color:var(--tinte-2);display:flex;justify-content:space-between} .einst .inaktive summary::-webkit-details-marker{display:none} .einst .inaktive summary:after{content:'anzeigen';font-size:11px;color:var(--petrol-700)} .einst .inaktive[open] summary:after{content:'schließen'} .einst .inaktiv-zeile{display:flex;justify-content:space-between;align-items:center;padding:9px 18px;border-top:1px solid var(--linie);font-size:12.5px;color:var(--tinte-2);background:#FAFAF7} .einst .inaktiv-zeile del{text-decoration:none} .einst .inaktiv-zeile del:after{content:' · inaktiv';font-size:10px;color:var(--tinte-3)} .einst .breitenwahl{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:18px} .einst .breiteoption{border:1px solid var(--linie-stark);border-radius:var(--r-m);padding:15px;text-align:left;display:grid;grid-template-columns:22px 1fr;gap:10px} .einst .breiteoption:hover{border-color:var(--petrol-600)} .einst .breiteoption[aria-pressed=true]{border-color:var(--petrol-700);box-shadow:0 0 0 2px rgba(42,90,105,.1);background:#F5F8F7} .einst .radiokreis{width:17px;height:17px;border:1.5px solid var(--linie-stark);border-radius:50%;margin-top:2px} .einst .breiteoption[aria-pressed=true] .radiokreis{border:5px solid var(--petrol-700)} .einst .breiteoption b{display:block} .einst .breiteoption small{display:block;color:var(--tinte-2);margin-top:3px} .einst .breitenbild{height:42px;border:1px solid var(--linie);background:var(--papier);margin-top:10px;display:flex;justify-content:center;align-items:stretch;padding-top:7px} .einst .breitenbild i{display:block;background:#DCE5E2;border:1px solid #C9D5D1} .einst .breitenbild.e-schmal i{width:67%} .einst .breitenbild.breit i{width:93%} .einst .kalenderkopf{display:flex;gap:8px;align-items:center;padding:12px 18px;border-bottom:1px solid var(--linie)} .einst .kalenderkopf strong{flex:1} .einst .jahresraster{display:grid;grid-template-columns:repeat(4,minmax(130px,1fr));gap:1px;background:var(--linie);padding:1px} .einst .e-monat{background:var(--weiss);padding:12px;min-height:100px} .einst .e-monat h4{font:10px var(--mono);letter-spacing:1px;text-transform:uppercase;color:var(--tinte-3);margin-bottom:7px} .einst .feiertag{display:flex;gap:7px;align-items:baseline;padding:2px 0;font-size:11.5px} .einst .feiertag time{font:10.5px var(--mono);color:var(--petrol-700);min-width:33px} .einst .feiertag.betrieb time{color:var(--koralle-700)} .einst .feiertag.betrieb span:after{content:' · betriebsfrei';font-size:9.5px;color:var(--koralle-700)} .einst .e-monat.leer:after{content:'keine Feiertage';font-size:10.5px;color:var(--tinte-3)} .einst .kalenderlegende{display:flex;gap:18px;padding:10px 18px;font-size:10.5px;color:var(--tinte-3)} .einst .kalenderlegende i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--petrol-600);margin-right:5px} .einst .kalenderlegende .betrieb i{background:var(--koralle-600)} .einst .mandantenkopf{display:flex;gap:10px;align-items:center;margin-bottom:16px;padding:11px 14px;background:var(--petrol-800);color:#fff;border-radius:var(--r-m)} .einst .mandantenkopf label{font-size:11px;color:#C5D5DA} .einst .mandantenkopf select{border:1px solid rgba(255,255,255,.22);background:var(--petrol-700);color:#fff;border-radius:var(--r-s);padding:6px 32px 6px 9px} .einst .mandantenkopf small{margin-left:auto;color:#AFC0C5} .einst .untertabs{display:flex;gap:2px;border-bottom:1px solid var(--linie);overflow:auto;padding:0 2px;margin-bottom:16px} .einst .untertabs button{padding:8px 11px;font-size:12px;color:var(--tinte-2);white-space:nowrap;border-bottom:2px solid transparent} .einst .untertabs button[aria-selected=true]{color:var(--petrol-700);font-weight:600;border-color:var(--koralle-600)} .einst .formular{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r-l);overflow:hidden} .einst .formular h3{font-size:15px;padding:14px 18px;border-bottom:1px solid var(--linie)} .einst .formularraster{display:grid;grid-template-columns:1fr 1fr} .einst .formfeld{padding:12px 18px;border-bottom:1px solid var(--linie)} .einst .formfeld:nth-child(odd){border-right:1px solid var(--linie)} .einst .formfeld label{display:block;font-size:10.5px;color:var(--tinte-3);margin-bottom:4px} .einst .formfeld input, .einst .formfeld select{width:100%;border:0;background:transparent;padding:3px 0;font-weight:500;outline:0} .einst .formfeld input:not([readonly]):focus{box-shadow:inset 0 -2px var(--petrol-600)} .einst .formfeld input[readonly]{color:var(--tinte-2)} .einst .formfeld .leer{font-weight:400;color:var(--warn)} .einst .schloss{font-size:10.5px;color:var(--tinte-3);margin-top:2px} .einst .formularfuss{display:flex;justify-content:flex-end;gap:8px;padding:11px 18px;background:#FBFBF8} .einst .nummern{padding:0 18px} .einst .nummerzeile{display:grid;grid-template-columns:1fr 120px 120px;gap:14px;align-items:center;padding:11px 0;border-bottom:1px solid var(--linie)} .einst .nummerzeile:last-child{border:0} .einst .nummerzeile small{color:var(--tinte-3);display:block} .einst .nummerzeile span:nth-child(n+2){font:12px var(--mono)} .einst .verlaufzeile{display:grid;grid-template-columns:minmax(160px,1.1fr) 1fr 100px 110px;gap:12px;align-items:center;padding:11px 18px;border-bottom:1px solid var(--linie);font-size:12.5px} .einst .verlaufzeile:last-child{border:0} .einst .verlaufzeile b{font-weight:500} .einst .verlaufzeile small{display:block;color:var(--tinte-3)} .einst .verlaufzeile time{font:10.5px var(--mono);color:var(--tinte-2)} .einst .verlaufknopf{color:var(--petrol-700);font-weight:500;text-align:right} .einst .verlaufknopf:hover{text-decoration:underline} .einst .gueltig{font:10.5px var(--mono);color:var(--tinte-2)} /* Die kompakte Gegenprobe des Entwurfs ist hier bewusst nicht enthalten: Sascha hat am 03.08.2026 die dauerhafte Sektionsleiste gewählt. Auf schmalen Bildschirmen wird die Sektionswahl weiter unten waagrecht — das ist ihr Verhalten, keine zweite Variante. */ .einst .suchleer{text-align:center;padding:50px 20px;color:var(--tinte-2)} .einst .suchleer b{display:block;font-size:18px;color:var(--tinte);margin-bottom:5px} .einst dialog{border:0;border-radius:var(--r-l);width:min(500px,calc(100vw - 32px));box-shadow:0 24px 64px rgba(8,20,25,.3);padding:0;color:var(--tinte)} .einst dialog::backdrop{background:rgba(8,20,25,.36)} .einst .dialogkopf{padding:18px 20px 13px;border-bottom:1px solid var(--linie)} .einst .dialogkopf h2{font-size:19px} .einst .dialogkopf p{font-size:12.5px;color:var(--tinte-2);margin-top:3px} .einst .dialogrumpf{padding:18px 20px} .einst .folgen{background:var(--warn-bg);border-left:3px solid var(--warn);padding:11px 13px;font-size:12.5px;margin-bottom:14px} .einst .dialogrumpf label{font-size:11px;color:var(--tinte-2);display:block;margin-bottom:4px} .einst .dialogrumpf textarea, .einst .dialogrumpf input{width:100%;border:1px solid var(--linie-stark);border-radius:var(--r-s);padding:8px 10px} .einst .dialogfuss{padding:12px 20px;border-top:1px solid var(--linie);display:flex;justify-content:flex-end;gap:8px;background:#FCFCFA} .einst .e-schleier{position:fixed;inset:0;background:rgba(8,20,25,.22);z-index:70;opacity:0;pointer-events:none;transition:opacity .18s} .einst .e-schleier.an{opacity:1;pointer-events:auto} .einst .verlaufpanel{position:fixed;z-index:75;right:0;top:0;bottom:0;width:min(460px,100vw);background:var(--weiss);border-left:1px solid var(--linie-stark);transform:translateX(102%);transition:transform .22s;display:flex;flex-direction:column} .einst .verlaufpanel.an{transform:none;box-shadow:-14px 0 34px rgba(25,28,24,.14)} .einst .panelkopf{padding:18px 20px 14px;border-bottom:1px solid var(--linie);display:flex;gap:12px;align-items:flex-start} .einst .panelkopf>div{flex:1} .einst .panelkopf h2{font-size:20px} .einst .panelkopf p{font-size:12.5px;color:var(--tinte-2)} .einst .panelrumpf{padding:20px;overflow:auto} .einst .e-ereignis{padding:0 0 22px 22px;border-left:1px solid var(--linie-stark);position:relative} .einst .e-ereignis:before{content:'';position:absolute;left:-4px;top:3px;width:7px;height:7px;border-radius:50%;background:var(--petrol-600)} .einst .e-ereignis b{font-size:13.5px} .einst .e-ereignis p{font-size:12px;color:var(--tinte-2);margin-top:3px} .einst .e-ereignis time{display:block;font:10px var(--mono);color:var(--tinte-3);margin-top:5px} .einst .toast{position:fixed;right:20px;bottom:20px;background:var(--petrol-900);color:#fff;border-radius:var(--r-m);padding:10px 14px;font-size:12.5px;box-shadow:0 8px 24px rgba(8,20,25,.25);z-index:120;animation:einst-toastin .18s ease-out} @keyframes einst-toastin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} /* Zustandswörter stehen im sichtbaren Text oder in der Legende, nicht in CSS-Pseudoinhalten. */ .einst .inaktive summary:after, .einst .inaktiv-zeile del:after, .einst .e-monat.leer:after, .einst .feiertag.betrieb span:after{content:none} .einst .suchergebnisse{display:grid;gap:3px;margin:-5px 0 14px} .einst .suchtreffer{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;text-align:left;padding:8px 9px;border:1px solid transparent;border-radius:var(--r-s);background:var(--weiss)} .einst .suchtreffer:hover, .einst .suchtreffer:focus-visible{border-color:var(--linie-stark);box-shadow:var(--schatten)} .einst .suchtreffer b{display:block;font-size:12.5px;color:var(--petrol-700);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .einst .suchtreffer small{display:block;margin-top:1px;color:var(--tinte-3);font-size:10.5px} .einst .suchtreffer>span:last-child{color:var(--koralle-600)} .einst .suchkeintreffer{padding:10px 9px;border-left:2px solid var(--warn);background:var(--warn-bg);font-size:11.5px;color:var(--tinte-2)} .einst .mandantenkopf{position:relative} .einst .mandantenlabel{font-size:11px;color:#C5D5DA;white-space:nowrap} .einst .mandantenauswahl{min-width:245px;display:flex;align-items:center;gap:12px;justify-content:space-between;border:1px solid rgba(255,255,255,.28);background:var(--petrol-700);color:#fff;border-radius:var(--r-s);padding:7px 10px;text-align:left} .einst .mandantenauswahl:hover, .einst .mandantenauswahl[aria-expanded=true]{background:#376B79;border-color:rgba(255,255,255,.48)} .einst .mandantenauswahl span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .einst .mandantenzahl{font:10px var(--mono);color:#C5D5DA;white-space:nowrap} .einst .mandantenmenue{position:absolute;left:116px;top:50px;width:min(390px,calc(100vw - 48px));z-index:55;background:var(--weiss);color:var(--tinte);border:1px solid var(--linie-stark);border-radius:var(--r-m);box-shadow:0 16px 44px rgba(8,20,25,.22);padding:8px} .einst .mandantensuche{display:flex;align-items:center;gap:7px;border:1px solid var(--linie-stark);border-radius:var(--r-s);padding:7px 9px;margin-bottom:7px} .einst .mandantensuche svg{width:15px;height:15px;color:var(--tinte-3)} .einst .mandantensuche input{width:100%;min-width:0;border:0;outline:0;background:transparent} .einst .mandantenoption{width:100%;display:grid;grid-template-columns:36px minmax(0,1fr) 18px;gap:9px;align-items:center;text-align:left;padding:8px;border-radius:var(--r-s)} .einst .mandantenoption:hover, .einst .mandantenoption:focus-visible{background:#EEF2F0} .einst .mandantenoption[aria-selected=true]{background:#E7ECEA} .einst .mandantenoption .e-mk{width:32px;height:32px;display:grid;place-items:center;background:var(--petrol-800);color:#fff;border-radius:7px;font:10px var(--mono)} .einst .mandantenoption b{display:block;font-size:12.5px} .einst .mandantenoption small{display:block;color:var(--tinte-3);font-size:10.5px} .einst .mandantenoption .haken{color:var(--koralle-600);font-weight:700} .einst .mandantenleer{padding:12px 9px;color:var(--tinte-2);font-size:11.5px} .einst .mandantenbestand{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--linie);border-top:1px solid var(--linie)} .einst .mandantenkarte{display:grid;grid-template-columns:38px minmax(0,1fr);gap:10px;align-items:center;padding:12px 18px;background:var(--weiss)} .einst .mandantenkarte .e-mk{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--linie-stark);border-radius:8px;color:var(--petrol-700);font:10px var(--mono);background:#F5F8F7} .einst .mandantenkarte b{display:block;font-size:12.5px} .einst .mandantenkarte small{display:block;color:var(--tinte-3);margin-top:1px} .einst .wachstumshinweis{padding:10px 18px;border-top:1px solid var(--linie);background:#FBFBF8;font-size:11.5px;color:var(--tinte-2)} @media(hover:hover) and (pointer:fine){.einst .wertzeile:not(.neu-zeile) .zeilenaktionen{opacity:0;transform:translateX(3px);transition:opacity .12s,transform .12s} .einst .wertzeile:hover .zeilenaktionen, .einst .wertzeile:focus-within .zeilenaktionen{opacity:1;transform:none}} .einst .symbolknopf:disabled{opacity:.22;cursor:default} .einst .symbolknopf:disabled:hover{border-color:transparent;background:transparent;color:var(--tinte-3)} @media(max-width:1050px){.einst .seitenkopf{align-items:flex-start} .einst .kopfwerkzeuge{justify-content:flex-end} .einst .einstellungsraster{grid-template-columns:215px minmax(0,1fr);gap:20px} .einst .rahmen{padding-left:20px;padding-right:20px} .einst .jahresraster{grid-template-columns:repeat(3,1fr)}} @media(max-width:780px){.einst .arbeitsflaeche{height:auto;overflow:visible} .einst .seitenkopf{position:sticky;min-height:64px;padding:10px 14px;display:block} .einst .seitenkopf h1{font-size:20px} .einst .kopfwerkzeuge{margin-top:9px;justify-content:flex-start} .einst .sichtwahl-hinweis{display:none} .einst .rahmen{padding:14px 12px 40px} .einst .einstellungsraster{display:block} .einst .sektionen{position:sticky;top:91px;z-index:20;background:var(--papier);padding:8px 0} .einst .sektion-suche{margin-bottom:7px} .einst .suchinfo, .einst .geltung{display:none} .einst .navblock{display:flex;overflow-x:auto;gap:4px;margin:0} .einst .navblock h2{display:none} .einst .snav{width:auto;white-space:nowrap;border:1px solid var(--linie);background:var(--weiss);padding:6px 9px} .einst .snav.aktiv{background:var(--petrol-800);color:#fff} .einst .snav.aktiv:before, .einst .snav .anz{display:none} .einst .inhalt{padding-top:16px} .einst .bereichkopf{display:block} .einst .scope{margin-top:10px} .einst .wertkopf{display:none} .einst .wertzeile{grid-template-columns:minmax(150px,1fr) 90px;gap:6px;padding:10px 12px} .einst .wertzeile .standard{grid-column:1} .einst .wertzeile .zeilenaktionen{grid-column:2;grid-row:1/3} .einst .listenwerkzeug, .einst .e-gruppenkopf{padding-left:12px;padding-right:12px} .einst .breitenwahl{grid-template-columns:1fr} .einst .jahresraster{grid-template-columns:repeat(2,1fr)} .einst .formularraster{grid-template-columns:1fr} .einst .formfeld:nth-child(odd){border-right:0} .einst .nummerzeile{grid-template-columns:1fr 88px} .einst .nummerzeile span:last-child{display:none} .einst .verlaufzeile{grid-template-columns:1fr 90px} .einst .verlaufzeile>:nth-child(3), .einst .verlaufzeile>:nth-child(4){display:none} .einst .mandantenkopf{align-items:flex-start;flex-wrap:wrap} .einst .mandantenkopf small{width:100%;margin:0} .benutzermenue{display:none}} @media(max-width:430px){.einst .jahresraster{grid-template-columns:1fr} .einst .seitenkopf .pfad{display:none} .einst .rollenauswahl{max-width:145px} .einst .bereichkopf h2{font-size:23px}} @media(max-width:780px){.einst .suchergebnisse{margin-bottom:7px;max-height:232px;overflow:auto} .einst .mandantenkopf{display:grid;grid-template-columns:auto minmax(0,1fr) auto} .einst .mandantenauswahl{min-width:0;width:100%} .einst .mandantenzahl{align-self:center} .einst .mandantenkopf small{grid-column:1/-1} .einst .mandantenmenue{left:0;right:0;top:58px;width:auto} .einst .mandantenbestand{grid-template-columns:1fr}} /* Einbau: Breite und Polster stellt die Arbeitsflaeche (Breiten-Einstellung), der Bereich bringt nur seinen Inhalt mit. */ .einst .rahmen{max-width:none;margin:0;padding:0} .einst .sektionen{top:4px} .einst .ekopf{padding-bottom:13px;border-bottom:1px solid var(--linie);margin-bottom:18px} .einst .ekopf h1{font-size:23px;line-height:1.15;letter-spacing:-.4px} .einst .epfad{font-size:11px;color:var(--tinte-3);margin-bottom:2px} .einst input,.einst select,.einst textarea{font:inherit;color:inherit} .einst .kleinknopf,.einst .symbolknopf,.einst .breiteoption{text-align:center} .einst .breiteoption{text-align:left} /* ===== Rechnungen (03.08., ADR-0046) — Modul .rg / .t-rg, Stile bewusst eingeschraenkt ===== Wichtig: Der Prototyp vergibt generische Klassennamen (.betrag, .st, .zeile, .fakten ...) mehrfach. Alle Regeln dieses Bereichs haengen deshalb an .t-rg oder .rg. */ .t-rg .kopfzeile,.t-rg .zeile{ grid-template-columns:84px minmax(168px,1.6fr) 112px 104px 144px 58px} .t-rg .rnr{font-family:var(--mono);font-size:12.5px;font-variant-numeric:tabular-nums; color:var(--petrol-700);font-weight:500;white-space:nowrap} .t-rg .rnr.leer{color:var(--tinte-3);font-weight:400;font-style:italic; font-family:var(--sans);font-size:11.5px} .t-rg .rkd{min-width:0;display:flex;flex-direction:column;justify-content:center;line-height:1.22} .t-rg .rkd .nm{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--tinte)} .t-rg .zeile:hover .rkd .nm{color:var(--petrol-700)} .t-rg .rkd .tr{font-size:11px;color:var(--tinte-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .t-rg .rbet{font-family:var(--mono);font-size:12.5px;font-variant-numeric:tabular-nums; white-space:nowrap;text-align:right;display:flex;flex-direction:column;line-height:1.22} .t-rg .rbet em{font-style:normal;font-size:9px;color:var(--tinte-3);letter-spacing:.4px} /* Zwei Ebenen, zwei Spalten (ADR-0046 W5): links der Beleg, rechts das Geld. Die Datumszeile der frueheren Spalte "Faellig am" wohnt jetzt unter der Zahlungsmarke — sie beschrieb immer schon die Zahlungsebene. Wo es keine Forderung gibt (Entwurf, Zur Pruefung, Storniert), bleibt die Spalte leer statt etwas zu behaupten. */ .t-rg .rzahl{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px; line-height:1.2} .t-rg .rzahl em{font-style:normal;font-size:10px;color:var(--tinte-3);white-space:nowrap; font-family:var(--sans)} .t-rg .rzahl em.spaet{color:var(--stop)} .t-rg .rzahl.leer{font-family:var(--mono);font-size:11.5px;color:var(--tinte-3)} .t-rg .rzahl.leer em{display:block;font-family:var(--sans)} .t-rg .rmand{font-family:var(--mono);font-size:11px;color:var(--tinte-3)} /* Statusmarken getoent (ADR-0017); Koralle nur dort, wo jemand handeln muss */ .rst{font-size:11px;font-weight:500;padding:1.5px 8px;border-radius:99px;display:inline-flex; align-items:center;gap:5px;white-space:nowrap;justify-self:start} .rst:before{content:"";width:4px;height:4px;border-radius:50%;background:currentColor;flex-shrink:0} .rst-entwurf{background:#F2F2EE;color:var(--tinte-2)} /* Versendet ist der haeufigste Belegzustand und verlangt nichts — also die leiseste Marke */ .rst-vers{background:#EDF1F0;color:var(--tinte-2)} .rst-pruef{background:#FFE8E1;color:var(--koralle-700)} .rst-offen{background:#EEF2F1;color:var(--petrol-700)} .rst-spaet{background:#F7E7E4;color:var(--stop)} .rst-bez{background:#E6F0E9;color:#2C7A4B} .rst-storno{background:#F2F2EE;color:var(--tinte-3);text-decoration:line-through} /* Die Rechnungs-Seite: Werkbank im Entwurf, Archiv-Blick nach dem Versand */ .rg .rgkopf{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding-bottom:14px; border-bottom:1px solid var(--linie);margin-bottom:18px} .rg .rgkopf h1{font-size:23px;font-weight:600;letter-spacing:-.4px} .rg .rgkopf .sub{font-size:12.5px;color:var(--tinte-2)} .rg .rgkopf .rst{margin-left:auto} .rg .rgzurueck{font-family:var(--mono);font-size:11px;color:var(--tinte-3);cursor:pointer; background:none;border:none;padding:0;display:block;margin-bottom:3px} .rg .rgzurueck:hover{color:var(--petrol-700)} .rg .rgrumpf{display:grid;grid-template-columns:minmax(0,1fr) 292px;gap:22px;align-items:start} .rg .rgbuehne{min-width:0} .rg .rgbt{font-family:var(--mono);font-size:10px;letter-spacing:1.4px;text-transform:uppercase; color:var(--tinte);font-weight:600;margin:0 0 9px;padding-bottom:6px;border-bottom:1px solid var(--linie)} .rg .rgbt .hin{float:right;font-family:var(--sans);text-transform:none;letter-spacing:0; font-weight:400;font-size:11px;color:var(--tinte-3)} /* Das Dokument als Buehne (ADR-0018-Ausnahme, nur fuer Belege im Entwurf) */ .rg .rgbeleg{background:var(--weiss);border:1px solid var(--linie-stark);border-radius:var(--r-m); padding:24px 26px 22px;box-shadow:0 1px 3px rgba(25,28,24,.06);font-size:12.5px;color:var(--tinte-2)} .rg .rgbeleg .logo{font-weight:600;font-size:15px;color:var(--tinte);letter-spacing:-.3px;margin-bottom:20px} .rg .rgbeleg .logo span{color:var(--koralle-700)} .rg .rgkopfraster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,210px);gap:20px;margin-bottom:18px} .rg .rgempf{line-height:1.5} .rg .rgempf b{color:var(--tinte);font-weight:500;display:block} .rg .rgmeta{font-size:11.5px} .rg .rgmeta .m{display:flex;gap:8px;padding:1px 0} .rg .rgmeta .m .l{color:var(--tinte-3);width:92px;flex-shrink:0} .rg .rgmeta .m .w{font-family:var(--mono);font-size:11px;color:var(--tinte)} .rg .rgmeta .m .w.fehlt{color:var(--tinte-3);font-style:italic;font-family:var(--sans);font-size:11.5px} .rg .rgbeleg h4{font-size:16px;font-weight:600;color:var(--tinte);margin:16px 0 12px;letter-spacing:-.2px} .rg .rganrede{margin-bottom:12px} /* Eigener Scrollbereich: die Positionstabelle darf den Belegrahmen nie sprengen */ .rg .rghuelle{overflow-x:auto;margin-bottom:4px} .rg .rgpos{width:100%;border-collapse:collapse;font-size:12px;min-width:326px} .rg .rgpos th{text-align:left;font-family:var(--mono);font-size:9.5px;letter-spacing:1px; text-transform:uppercase;color:var(--tinte-3);font-weight:500;padding:0 6px 6px; border-bottom:1px solid var(--linie-stark)} .rg .rgpos th.re{text-align:right} .rg .rgpos td{padding:9px 6px;border-bottom:1px solid var(--linie);vertical-align:top} .rg .rgpos td.re{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap} /* Die Positionsbezeichnung ist mehrzeilig: Artikelname als Kopf, darunter die Beschreibung des Altsystems (jede Leistung eine Zeile, beginnt mit "+"), teils eingerueckt. HTML faltet diese Umbrueche sonst zu Leerzeichen und alles laeuft in einem Absatz zusammen — auf dem Beleg, den der Kunde bekommt. `pre-wrap` statt `pre-line`, weil die Einrueckung der Unterzeilen aus der Quelle mitgemeint ist. */ .rg .rgpos .tit{color:var(--tinte);font-weight:500;font-size:12.5px;white-space:pre-wrap} .rg .rgpos .plus{color:var(--tinte-3);font-size:11.5px;line-height:1.5;margin-top:3px} .rg .rgpos .plus i{font-style:normal;color:var(--koralle-700)} .rg .rgpos tr.bearb{cursor:text} .rg .rgpos tr.bearb:hover td{background:#F4F6F5} .rg .rgerz{display:inline-block;font-family:var(--mono);font-size:9px;letter-spacing:.5px; border:1px solid var(--linie-stark);border-radius:3px;padding:0 5px;color:var(--tinte-3); margin-left:7px;vertical-align:1px;text-transform:uppercase} .rg .rgposneu{padding:8px 6px;font-size:12px;color:var(--tinte-3);cursor:pointer; border-bottom:1px solid var(--linie)} .rg .rgposneu:hover{color:var(--koralle-700)} .rg .rgsum{margin-top:12px;margin-left:auto;width:min(290px,100%);font-size:12px} .rg .rgsum .s{display:flex;justify-content:space-between;padding:3px 0;font-family:var(--mono); font-variant-numeric:tabular-nums} .rg .rgsum .s span:first-child{font-family:var(--sans);color:var(--tinte-2)} .rg .rgsum .s.ges{border-top:1px solid var(--linie-stark);margin-top:5px;padding-top:6px; font-weight:500;color:var(--tinte);font-size:13.5px} .rg .rgschluss{margin-top:18px;padding-top:14px;border-top:1px solid var(--linie);font-size:11.5px; line-height:1.6;color:var(--tinte-3)} .rg .rgschluss b{color:var(--tinte-2);font-weight:500} /* Die Faktenleiste */ .rg .rgfakt{background:#FCFCFA;border:1px solid var(--linie);border-radius:var(--r-m); padding:16px 18px 20px;min-width:0;position:sticky;top:8px} .rg .rgfk{margin-bottom:14px} .rg .rgfk .l{font-family:var(--mono);font-size:9.5px;letter-spacing:1.2px;text-transform:uppercase; color:var(--tinte-3);margin-bottom:3px} .rg .rgfk .w{font-size:13.5px;color:var(--tinte);line-height:1.4} .rg .rgfk .w.geld{font-family:var(--mono);font-size:17px;font-weight:500;letter-spacing:-.3px; font-variant-numeric:tabular-nums} .rg .rgfk .neben{font-size:11.5px;color:var(--tinte-3);line-height:1.5;margin-top:2px} .rg .rgherk{display:inline-block;font-family:var(--mono);font-size:9.5px;letter-spacing:.5px; border:1px solid var(--linie-stark);border-radius:3px;padding:0 6px;color:var(--tinte-2); margin-left:6px;vertical-align:1px} .rg .rgpruef{border-top:1px solid var(--linie);margin-top:14px;padding-top:12px} .rg .rgpruef .tl{font-family:var(--mono);font-size:9.5px;letter-spacing:1.2px;text-transform:uppercase; color:var(--tinte-3);margin-bottom:6px} .rg .rgpl{display:flex;gap:8px;align-items:baseline;font-size:12px;padding:3px 0;color:var(--tinte-2)} .rg .rgpl .z{flex-shrink:0;width:13px;font-family:var(--mono);font-size:11px;color:#2C7A4B} .rg .rgpl.off{color:var(--koralle-700);font-weight:500} .rg .rgpl.off .z{color:var(--koralle-700)} .rg .rgsperre{margin-top:13px;border:1px solid var(--koralle-600);background:#FFE8E1; border-radius:var(--r-m);padding:11px 13px;font-size:12px;color:var(--koralle-700);line-height:1.55} .rg .rgsperre b{display:block;font-weight:600;margin-bottom:2px} .rg .rghaupt{width:100%;margin-top:11px;border:1px solid var(--linie-stark);background:#F2F2EE; color:var(--tinte-3);border-radius:var(--r-s);padding:9px;font-size:13px;font-weight:500; cursor:not-allowed;display:flex;align-items:center;justify-content:center;gap:7px} .rg .rghaupt svg{width:14px;height:14px} .rg .rghaupt.frei{border-color:var(--koralle-600);background:var(--koralle-600);color:#fff;cursor:pointer} .rg .rgneben{width:100%;margin-top:7px;border:1px solid var(--linie-stark);background:var(--weiss); color:var(--tinte-2);border-radius:var(--r-s);padding:7px;font-size:12.5px;cursor:pointer} .rg .rgneben:hover{border-color:var(--tinte-3);color:var(--tinte)} /* Archiv-Blick */ .rg .rgarchiv{background:#EEF2F1;border:1px solid #CBD8DC;border-radius:var(--r-m);padding:10px 13px; font-size:12px;color:var(--petrol-700);line-height:1.55;margin-bottom:16px;display:flex;gap:9px} .rg .rgarchiv svg{width:15px;height:15px;flex-shrink:0;margin-top:2px} .rg .rgzstand{border:1px solid var(--linie);border-radius:var(--r-m);background:var(--weiss); padding:13px 15px;margin-bottom:14px} .rg .rgzstand .z1{display:flex;align-items:baseline;gap:9px;margin-bottom:6px} .rg .rgzstand .gr{font-family:var(--mono);font-size:17px;font-weight:500;font-variant-numeric:tabular-nums} .rg .rgbezahlt{width:100%;border:1px solid #2C7A4B;background:#E6F0E9;color:#2C7A4B; border-radius:var(--r-s);padding:8px;font-size:12.5px;font-weight:500;cursor:pointer; display:flex;align-items:center;justify-content:center;gap:7px} .rg .rgbezahlt svg{width:14px;height:14px} /* #224: Geöffnet ersetzt ein Feld den Knopf. Klickbar sind nur noch Datum und „Buchen" darin. */ .rg .rgbezahlt.offen{cursor:default} /* Mit `.offen` schlägt die Regel auch `.zeile .akt-h button` — sonst wäre „Buchen" in der Liste ein 26-px-Kästchen wie die Sinnbilder daneben. */ .rg .rgbezahlt.offen .rgbuchen{width:auto;height:auto;padding:0;border:none;background:none;color:inherit; font-weight:600;text-decoration:underline;text-underline-offset:2px} /* In der Liste ist die Aktionsspalte 58px schmal. Das Feld ragte dort über beide Ränder und wurde rechts abgeschnitten — jetzt legt es sich links neben „Ganz öffnen" über die Zeile. */ .t-rg .akt-h{position:relative} .t-rg .akt-h .rgbezahlt.offen{position:absolute;right:30px;top:50%;transform:translateY(-50%);z-index:2; width:auto;padding:4px 8px;font-size:12px;white-space:nowrap} .rg .rgbezug{display:flex;gap:9px;align-items:baseline;padding:6px 0;font-size:12.5px; color:var(--tinte-2);border-bottom:1px solid var(--linie)} .rg .rgbezug:last-child{border-bottom:none} .rg .rgbezug .d{font-family:var(--mono);font-size:10.5px;color:var(--tinte-3);width:58px;flex-shrink:0} .rg .rgbezug a{color:var(--petrol-700);font-weight:500;text-decoration:none;cursor:pointer} .rg .rgbezug a:hover{text-decoration:underline} .rg .rgverl{display:flex;gap:10px;align-items:baseline;padding:6px 0;font-size:12.5px;color:var(--tinte-2)} .rg .rgverl .d{font-family:var(--mono);font-size:10.5px;color:var(--tinte-3);width:58px;flex-shrink:0} .rg .rgverl .wer{font-size:11px;color:var(--tinte-3)} @media(max-width:900px){ .rg .rgrumpf{grid-template-columns:minmax(0,1fr)} .rg .rgfakt{position:static} .rg .rgkopfraster{grid-template-columns:minmax(0,1fr)} } @media(max-width:640px){ .rg .rgbeleg{padding:16px 15px} } /* ===== Mein Tag (ADR-0044) — zwei Zonen, Klassen mt- gekapselt unter #a-meintag ===== */ #a-meintag .mt-zone{margin-bottom:28px;max-width:860px} #a-meintag .mt-zkopf{display:flex;align-items:baseline;gap:8px;padding-bottom:7px;border-bottom:1px solid var(--linie-stark)} #a-meintag .mt-zkopf h2{font-family:var(--mono);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--tinte);font-weight:600;margin:0} #a-meintag .mt-anz{font-family:var(--mono);font-size:10px;color:var(--tinte-3)} #a-meintag .mt-zeit{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--tinte-2)} #a-meintag .mt-zeit b{color:var(--tinte);font-weight:500} #a-meintag .mt-az{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid var(--linie);font-size:13.5px} #a-meintag .mt-kreis{width:17px;height:17px;border:1.6px solid var(--linie-stark);border-radius:50%;flex-shrink:0;cursor:pointer;background:none;padding:0} #a-meintag .mt-kreis:hover{border-color:var(--tinte-3)} #a-meintag .mt-az.erledigt .mt-kreis{background:#2C7A4B;border-color:#2C7A4B} #a-meintag .mt-az.erledigt .mt-t{text-decoration:line-through;color:var(--tinte-3)} #a-meintag .mt-az.mt-blend{opacity:0;transition:opacity .25s ease} @media (prefers-reduced-motion:reduce){#a-meintag .mt-az.mt-blend{transition:none}} #a-meintag .mt-txt{flex:1;min-width:0} #a-meintag .mt-proj{display:block;font-size:11.5px;color:var(--tinte-3)} #a-meintag .mt-stern{color:#B07D18;font-size:14px;flex-shrink:0} #a-meintag .mt-spaet{font-family:var(--mono);font-size:10px;color:var(--stop);background:#F9E9E6;border-radius:3px;padding:1px 6px;font-weight:500;flex-shrink:0} #a-meintag .mt-serie{color:var(--tinte-3);font-size:12px} #a-meintag .mt-vorschlag{display:flex;align-items:center;gap:10px;padding:9px 4px;font-size:12.5px;color:var(--tinte-3);border-bottom:1px solid var(--linie)} #a-meintag .mt-vorschlag .mt-vtext{flex:1;font-style:italic} #a-meintag .mt-x{background:none;border:none;color:var(--tinte-3);cursor:pointer;font-size:13px;padding:2px 6px} #a-meintag .mt-x:hover{color:var(--tinte)} #a-meintag .mt-neu{display:flex;align-items:center;gap:10px;padding:9px 4px} #a-meintag .mt-neu .mt-plus{color:var(--tinte-3);font-size:15px;line-height:1} #a-meintag .mt-neu input{flex:1;border:none;outline:none;font:inherit;font-size:13.5px;background:none;color:var(--tinte)} #a-meintag .mt-neu input::placeholder{color:var(--tinte-3)} #a-meintag .mt-neu:focus-within .mt-plus{color:var(--koralle-700)} #a-meintag .mt-pz{display:flex;align-items:flex-start;gap:12px;padding:12px 4px;border-bottom:1px solid var(--linie)} #a-meintag .mt-art{font-family:var(--mono);font-size:9px;letter-spacing:.8px;text-transform:uppercase;color:#1A3B46;background:#E8EEF0;border-radius:3px;padding:2px 7px;flex-shrink:0;margin-top:2px} #a-meintag .mt-art.warnend{color:var(--koralle-700);background:#FFE8E1} #a-meintag .mt-pt{font-size:14px;font-weight:500} #a-meintag .mt-sub{display:block;font-size:12.5px;color:var(--tinte-2);margin-top:1px;line-height:1.5;font-weight:400} #a-meintag .mt-akt{display:flex;gap:6px;flex-wrap:wrap;flex-shrink:0;margin-top:2px} #a-meintag .mt-akt .btn{padding:4px 11px;font-size:12px} /* je Frage-Zeile genau eine Haupt-Antwort in der Signalfarbe (Schnellansicht-Regel) */ #a-meintag .mt-akt .btn.mt-haupt{background:var(--koralle-700);border-color:var(--koralle-700);color:#fff} #a-meintag .mt-akt .btn.mt-leise{border-color:transparent;color:var(--tinte-3)} #a-meintag .mt-leer{display:none;padding:16px 4px 6px;font-size:13px;color:var(--tinte-3);font-style:italic} #a-meintag .mt-warten.leer-an .mt-leer{display:block} /* Bereich Wissen - Rahmen des Bildschirms */ #a-wissen{padding:0;max-width:none;position:relative;overflow:hidden} /* 100vh statt 100%: .flaeche scrollt selbst, ein Prozentwert loest dort nicht auf */ #a-wissen.an{display:flex;height:100vh} #a-wissen>*{min-height:0} /* ===== Bereich Wissen (ADR-0047) - alle Klassen w- praefixiert und unter #a-wissen gekapselt ===== */ #a-wissen [hidden]{display:none !important} #a-wissen .w-baumspalte{width:262px;flex-shrink:0;background:var(--weiss);border-right:1px solid var(--linie); display:flex;flex-direction:column;overflow:hidden} #a-wissen .w-bs-kopf{padding:12px 13px 10px;border-bottom:1px solid var(--linie);flex-shrink:0} #a-wissen .w-bs-such{background:var(--papier);border:1px solid var(--linie2);border-radius:var(--r-s); padding:7px 10px;display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--tinte-3); width:100%;font-family:inherit;cursor:pointer;text-align:left} #a-wissen .w-bs-such svg{width:14px;height:14px;flex-shrink:0} #a-wissen .w-bs-neu{margin-top:8px;width:100%;background:var(--koralle-700);color:#fff;border:none; border-radius:var(--r-s);padding:7px 10px;font-family:inherit;font-size:13px;font-weight:500; cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px} #a-wissen .w-bs-neu svg{width:14px;height:14px} #a-wissen .w-bs-baum{flex:1;min-height:0;overflow-y:auto;padding:9px 8px 12px} #a-wissen .w-abt{font-family:var(--mono);font-size:9.5px;letter-spacing:1.4px;text-transform:uppercase; color:var(--tinte-3);padding:10px 8px 4px;display:flex;align-items:center;gap:6px;width:100%; background:none;border:none;cursor:pointer;font-weight:500} #a-wissen .w-abt .w-ch{font-size:9px;width:9px;flex-shrink:0} #a-wissen .w-abt .w-z{margin-left:auto;font-family:var(--mono);font-size:9.5px;color:var(--tinte-3)} #a-wissen .w-knoten{display:flex;align-items:center;gap:6px;padding:4px 8px;border-radius:var(--r-s);font-size:13.5px; color:var(--tinte);cursor:pointer;width:100%;background:none;border:none;font-family:inherit;text-align:left} #a-wissen .w-knoten:hover{background:#F0F0EA} #a-wissen .w-knoten .w-ch{font-size:9px;color:var(--tinte-3);width:9px;flex-shrink:0} #a-wissen .w-knoten .w-nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #a-wissen .w-blatt{display:block;padding:3.5px 8px 3.5px 31px;font-size:13px;color:var(--tinte-2);text-decoration:none; border-radius:var(--r-s);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #a-wissen .w-blatt:hover{background:#F0F0EA;color:var(--tinte)} #a-wissen .w-blatt.w-jetzt{background:var(--koralle-100);color:var(--koralle-700);font-weight:500} #a-wissen .w-eingang{background:#FBFBF8;border:1px solid var(--linie);border-radius:var(--r-m);padding:7px 8px;margin:0 0 6px} #a-wissen .w-eingang .w-et{font-family:var(--mono);font-size:9px;letter-spacing:1.4px;text-transform:uppercase; color:var(--tinte-3);padding:2px 6px 5px} #a-wissen .w-ez{display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:var(--r-s);font-size:13px; color:var(--tinte);width:100%;background:none;border:none;font-family:inherit;cursor:pointer;text-align:left} #a-wissen .w-ez:hover{background:#F0F0EA} #a-wissen .w-ez svg{width:14px;height:14px;color:var(--tinte-3);flex-shrink:0} #a-wissen .w-ez .w-z{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--tinte-3)} #a-wissen .w-papierkorb{border-top:1px solid var(--linie);padding:8px;flex-shrink:0} /* Baumspalte einklappen */ #a-wissen .w-bs-kopfzeile{display:flex;align-items:center;gap:6px;margin-bottom:8px} #a-wissen .w-bs-titel{font-family:var(--mono);font-size:9.5px;letter-spacing:1.4px;text-transform:uppercase; color:var(--tinte-3);flex:1;font-weight:500} #a-wissen .w-bs-klapp{width:26px;height:26px;border-radius:var(--r-s);display:flex;align-items:center; justify-content:center;color:var(--tinte-3);background:none;border:none;cursor:pointer;flex-shrink:0} #a-wissen .w-bs-klapp:hover{background:#F0F0EA;color:var(--tinte)} #a-wissen .w-bs-klapp svg{width:15px;height:15px} #a-wissen .w-baumspalte.w-zu{width:38px;padding:0} #a-wissen .w-baumspalte.w-zu .w-bs-kopf{padding:9px 6px;border-bottom:1px solid var(--linie)} .w-baumspalte.w-zu .w-bs-titel,.w-baumspalte.w-zu .w-bs-such,.w-baumspalte.w-zu .w-bs-neu, #a-wissen .w-baumspalte.w-zu .w-bs-baum, #a-wissen .w-baumspalte.w-zu .w-papierkorb{display:none} #a-wissen .w-baumspalte.w-zu .w-bs-klapp svg{transform:rotate(180deg)} /* Handgriffe am Baumeintrag */ #a-wissen .w-zeile{display:flex;align-items:center;border-radius:var(--r-s)} #a-wissen .w-zeile:hover{background:#F0F0EA} #a-wissen .w-zeile .w-knoten, #a-wissen .w-zeile .w-blatt, #a-wissen .w-zeile .w-abt{flex:1;min-width:0;background:none} #a-wissen .w-zeile .w-knoten:hover, #a-wissen .w-zeile .w-blatt:hover{background:none} #a-wissen .w-griffe{display:flex;gap:1px;padding-right:4px;opacity:0;flex-shrink:0} #a-wissen .w-zeile:hover .w-griffe, #a-wissen .w-zeile:focus-within .w-griffe, #a-wissen .w-griffe.w-offen{opacity:1} #a-wissen .w-griff{width:22px;height:22px;border-radius:4px;display:flex;align-items:center;justify-content:center; color:var(--tinte-3);background:none;border:none;cursor:pointer} #a-wissen .w-griff:hover{background:var(--linie);color:var(--tinte)} #a-wissen .w-griff:focus-visible{outline:2px solid var(--koralle-700);outline-offset:1px;opacity:1} #a-wissen .w-griff svg{width:13px;height:13px} /* Faktenleiste einklappen */ #a-wissen .w-fk-kopf{display:flex;align-items:center;gap:6px;margin-bottom:14px} #a-wissen .w-fk-titel{font-family:var(--mono);font-size:9.5px;letter-spacing:1.4px;text-transform:uppercase; color:var(--tinte-3);flex:1;font-weight:500} #a-wissen .w-fk-klapp{width:26px;height:26px;border-radius:var(--r-s);display:flex;align-items:center; justify-content:center;color:var(--tinte-3);background:none;border:none;cursor:pointer;flex-shrink:0} #a-wissen .w-fk-klapp:hover{background:var(--linie);color:var(--tinte)} #a-wissen .w-fk-klapp svg{width:15px;height:15px} #a-wissen .w-fakten.w-zu{width:38px;padding:9px 6px} #a-wissen .w-fakten.w-zu .w-fk-titel, #a-wissen .w-fakten.w-zu .w-block{display:none} #a-wissen .w-fakten.w-zu .w-fk-kopf{margin-bottom:0;justify-content:center} #a-wissen .w-fakten.w-zu .w-fk-klapp svg{transform:rotate(180deg)} /* Bilder in Wissensseiten */ #a-wissen figure.w-bild{margin:14px 0 18px;max-width:640px} #a-wissen figure.w-bild .w-rahmen{border:1px solid var(--linie2);border-radius:var(--r-m);overflow:hidden; background:var(--papier)} #a-wissen figure.w-bild .w-balken{height:22px;background:#E9E9E2;border-bottom:1px solid var(--linie2);display:flex; align-items:center;gap:5px;padding:0 9px} #a-wissen figure.w-bild .w-balken i{width:7px;height:7px;border-radius:50%;background:var(--linie2);display:block} #a-wissen figure.w-bild .w-balken span{font-family:var(--mono);font-size:9px;color:var(--tinte-3);margin-left:6px} #a-wissen figure.w-bild .w-flaeche{padding:14px 16px;display:flex;flex-direction:column;gap:7px;background:var(--weiss)} #a-wissen figure.w-bild .w-zl{height:8px;border-radius:2px;background:#E7E7E0} #a-wissen figure.w-bild .w-zl.w-kurz{width:42%}figure.w-bild .w-zl.w-mittel{width:68%}figure.w-bild .w-zl.w-lang{width:88%} #a-wissen figure.w-bild .w-zl.w-betont{background:#D7E3EA;height:11px;width:54%} #a-wissen figure.w-bild .w-kasten{height:54px;border-radius:4px;background:#F1F1EA;border:1px dashed var(--linie2)} #a-wissen figure.w-bild .w-markierung{outline:2px solid var(--koralle-600);outline-offset:2px;border-radius:2px} #a-wissen figure.w-bild figcaption{font-size:13px;color:var(--tinte-2);margin-top:8px;line-height:1.5} #a-wissen figure.w-bild figcaption b{color:var(--tinte);font-weight:600} #a-wissen figure.w-bild .w-fehlt{font-size:13px;color:var(--koralle-700);margin-top:8px;display:flex;align-items:center; gap:8px;border:1px dashed var(--koralle-400);border-radius:var(--r-s);padding:7px 11px;background:#FFFBF9} #a-wissen figure.w-bild .w-fehlt svg{width:15px;height:15px;flex-shrink:0} #a-wissen figure.w-bild .w-vorschlag{font-size:13px;color:var(--tinte-2);margin-top:8px;border:1px solid var(--linie); border-left:3px solid var(--petrol-600);border-radius:var(--r-s);padding:9px 12px;background:#FBFBF8} #a-wissen figure.w-bild .w-vorschlag .w-vk{font-family:var(--mono);font-size:9.5px;letter-spacing:1.3px; text-transform:uppercase;color:var(--tinte-3);display:block;margin-bottom:4px} #a-wissen figure.w-bild .w-vorschlag .w-vb{display:flex;gap:7px;margin-top:8px} #a-wissen figure.w-bild .w-vorschlag button{border:1px solid var(--linie2);background:var(--weiss);border-radius:var(--r-s); padding:3px 11px;font-size:12.5px;font-family:inherit;color:var(--tinte-2);cursor:pointer} #a-wissen figure.w-bild .w-vorschlag button.w-haupt{background:var(--koralle-700);border-color:var(--koralle-700);color:#fff} #a-wissen .w-bildreihe{display:flex;gap:12px;flex-wrap:wrap;margin:14px 0 18px} #a-wissen .w-bildreihe figure.w-bild{margin:0;max-width:236px;flex:1;min-width:200px} #a-wissen .w-zeilenmenue{position:absolute;width:214px;background:var(--weiss);border:1px solid var(--linie2); border-radius:var(--r-m);box-shadow:0 8px 26px rgba(25,28,24,.18);padding:5px;z-index:9} #a-wissen .w-zm{display:flex;align-items:center;gap:10px;padding:6px 9px;border-radius:var(--r-s);font-size:13.5px; color:var(--tinte);cursor:pointer;width:100%;background:none;border:none;font-family:inherit;text-align:left} #a-wissen .w-zm:hover{background:var(--koralle-100)} #a-wissen .w-zm svg{width:15px;height:15px;color:var(--tinte-3);flex-shrink:0} #a-wissen .w-zm.w-gefahr{color:var(--koralle-700)} #a-wissen .w-zm.w-gefahr svg{color:var(--koralle-700)} #a-wissen .w-zm-trenn{height:1px;background:var(--linie);margin:4px 6px} #a-wissen .w-zm-fuss{font-size:11.5px;color:var(--tinte-3);padding:5px 10px 4px;line-height:1.45} #a-wissen .w-baumspalte button:focus-visible, #a-wissen .w-baumspalte a:focus-visible{outline:2px solid var(--koralle-700); outline-offset:1px;border-radius:var(--r-s)} /* Rechte Seite */ #a-wissen .w-bue{flex:1;min-width:0;background:var(--weiss);display:flex;flex-direction:column;overflow:hidden} /* ===== Kopfband: gleiche Hoehe im Lesen und im Schreiben ===== */ #a-wissen .w-kband{background:var(--weiss);border-bottom:1px solid var(--linie);height:44px;flex-shrink:0; display:flex;align-items:center;padding:0 16px 0 20px;gap:3px} #a-wissen .w-kband .w-lesezeile{display:flex;align-items:center;gap:10px;width:100%;font-size:13px;color:var(--tinte-3)} #a-wissen .w-kband .w-lesezeile .w-stand{font-family:var(--mono);font-size:11.5px} #a-wissen .w-kband .w-lesezeile .w-schreib{margin-left:auto;border:1px solid var(--linie2);background:var(--weiss); border-radius:var(--r-s);padding:4px 12px;font-size:13px;font-family:inherit;color:var(--tinte-2);cursor:pointer} #a-wissen .w-wb{width:32px;height:30px;border-radius:var(--r-s);display:flex;align-items:center;justify-content:center; color:var(--petrol-700);background:none;border:none;cursor:pointer;flex-shrink:0} #a-wissen .w-wb:hover{background:#EFEFE9;color:var(--petrol-900)} #a-wissen .w-wb[aria-pressed="true"]{background:var(--koralle-100);color:var(--koralle-700)} #a-wissen .w-wb:focus-visible{outline:2px solid var(--koralle-700);outline-offset:1px} #a-wissen .w-wb svg{width:16px;height:16px} #a-wissen .w-wb b{font-size:14px;font-weight:700} #a-wissen .w-wb .w-h{font-size:12px;font-weight:600;font-family:var(--mono)} #a-wissen .w-wtrenn{width:1px;height:18px;background:var(--linie2);margin:0 5px;flex-shrink:0} #a-wissen .w-kband .w-rechts{margin-left:auto;display:flex;align-items:center;gap:10px} #a-wissen .w-wgespeichert{font-family:var(--mono);font-size:11px;color:var(--tinte-3);display:flex;align-items:center;gap:6px} #a-wissen .w-wgespeichert .w-pkt{width:6px;height:6px;border-radius:50%;background:var(--ok);flex-shrink:0} #a-wissen .w-mehrmenue{position:absolute;top:44px;left:0;width:262px;background:var(--weiss); border:1px solid var(--linie2);border-radius:var(--r-m);box-shadow:0 8px 26px rgba(25,28,24,.16); padding:6px;z-index:7} #a-wissen .w-mehrmenue .w-mt{font-family:var(--mono);font-size:9px;letter-spacing:1.3px;text-transform:uppercase; color:var(--tinte-3);padding:5px 9px 5px} #a-wissen .w-mz{display:flex;align-items:center;gap:10px;padding:6px 9px;border-radius:var(--r-s);font-size:13.5px; color:var(--tinte);cursor:pointer;width:100%;background:none;border:none;font-family:inherit;text-align:left} #a-wissen .w-mz:hover{background:var(--koralle-100)} #a-wissen .w-mz svg{width:15px;height:15px;color:var(--tinte-3);flex-shrink:0} #a-wissen .w-seitekopf{background:var(--weiss);border-bottom:1px solid var(--linie);padding:13px 24px 0;flex-shrink:0} #a-wissen .w-zugehoer{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--tinte-3);margin-bottom:6px; flex-wrap:wrap} #a-wissen .w-zugehoer a{color:var(--koralle-700);text-decoration:none;font-weight:500} #a-wissen .w-zugehoer a:hover{text-decoration:underline} #a-wissen .w-titelfeld{font-size:21px;font-weight:600;letter-spacing:-.45px;margin-bottom:11px;display:inline-block; border-bottom:2px solid transparent;padding-bottom:1px} #a-wissen .w-schreibt .w-titelfeld{border-bottom-color:var(--linie2)} #a-wissen .w-rumpf{flex:1;min-height:0;overflow-y:auto;display:flex;position:relative} /* Getauscht am 04.08.: der Text bekommt Weiss, die Faktenleiste den Papierton */ #a-wissen .w-hauptspalte{flex:1;min-width:0;padding:16px 26px 30px;position:relative;background:var(--weiss)} #a-wissen .w-fakten{width:264px;flex-shrink:0;border-left:1px solid var(--linie);background:var(--papier); padding:16px 18px 30px} #a-wissen .w-fakten .w-block{margin-bottom:18px} #a-wissen .w-fakten .w-bt{font-family:var(--mono);font-size:9.5px;letter-spacing:1.5px;text-transform:uppercase; color:var(--tinte-3);margin-bottom:8px;padding-bottom:5px;border-bottom:1px solid var(--linie)} #a-wissen .w-fakten .w-fz{margin-bottom:10px} #a-wissen .w-fakten .w-fz .w-l{display:block;font-size:11px;color:var(--tinte-3);line-height:1.4} #a-wissen .w-fakten .w-fz .w-v{display:block;font-size:13.5px;color:var(--tinte);font-weight:500;line-height:1.45; overflow-wrap:anywhere} #a-wissen .w-fakten .w-fz .w-v a{color:var(--koralle-700);text-decoration:none} #a-wissen .w-fakten .w-fz .w-einladung{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--koralle-700); background:none;border:1px dashed var(--linie2);border-radius:var(--r-s);padding:3px 9px; font-family:inherit;cursor:pointer} #a-wissen .w-fakten .w-fz .w-einladung:hover{border-color:var(--koralle-600);background:#FFFBF9} #a-wissen .w-fakten .w-vlink{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:13.5px; color:var(--koralle-700);text-decoration:none} #a-wissen .w-fakten .w-vlink svg{width:14px;height:14px;flex-shrink:0;color:var(--tinte-3)} #a-wissen .w-fakten .w-vlink:hover{text-decoration:underline} #a-wissen .w-fakten .w-keiner{font-size:13px;color:var(--tinte-3);font-style:italic} #a-wissen .w-fakten .w-stand{font-family:var(--mono);font-size:11px;color:var(--tinte-3);line-height:1.7} #a-wissen .w-fakten .w-stand a{color:var(--koralle-700);text-decoration:none} #a-wissen .w-fakten a:focus-visible, #a-wissen .w-fakten button:focus-visible{outline:2px solid var(--koralle-700);outline-offset:2px; border-radius:var(--r-s)} #a-wissen .w-buehne h5{font-size:16px;font-weight:600;letter-spacing:-.25px;margin:18px 0 6px} #a-wissen .w-buehne h5:first-child{margin-top:0} #a-wissen .w-buehne p{font-size:14.5px;margin-bottom:10px} #a-wissen .w-buehne ul{margin:0 0 11px 20px;font-size:14.5px;color:var(--tinte-2)} #a-wissen .w-warnk{background:#FDF6E7;border:1px solid #EFDCAE;border-left:3px solid var(--warn); border-radius:var(--r-s);padding:10px 14px;font-size:14px;color:#6B5310;margin-bottom:14px} #a-wissen mark{background:var(--marker);color:inherit;padding:0 2px;border-radius:2px} #a-wissen .w-cursor{display:inline-block;width:2px;height:1.05em;background:var(--koralle-600); vertical-align:-.18em;animation:w-blink 1.1s steps(1) infinite} @keyframes w-blink{0%,49%{opacity:1}50%,100%{opacity:0}} @media (prefers-reduced-motion:reduce){.w-cursor{animation:none}} #a-wissen .w-ausgewaehlt{background:#CFE0F5;border-radius:2px} #a-wissen .w-blase{position:absolute;background:var(--petrol-800);border-radius:var(--r-m);padding:4px;display:flex; gap:2px;box-shadow:0 6px 20px rgba(0,0,0,.3);z-index:6} #a-wissen .w-blase button{width:30px;height:28px;border-radius:4px;border:none;background:none;color:var(--leiste-text); cursor:pointer;display:flex;align-items:center;justify-content:center} #a-wissen .w-blase button:hover{background:var(--leiste-hover);color:#fff} #a-wissen .w-blase button:focus-visible{outline:2px solid var(--koralle-400);outline-offset:1px} #a-wissen .w-blase svg{width:14px;height:14px} #a-wissen .w-blase b{font-size:13px} /* Leerzustand */ #a-wissen .w-leer{padding:34px 4px 0;max-width:60ch} #a-wissen .w-leer h6{font-size:17px;font-weight:600;margin-bottom:7px;letter-spacing:-.2px} #a-wissen .w-leer p{font-size:14.5px;margin-bottom:14px} #a-wissen .w-leer .w-tipp{font-size:13px;color:var(--tinte-3);border-top:1px solid var(--linie);padding-top:11px} /* Befunde */ /* ===== Listen-Werkzeuge (ADR-0048): Filter · Spalten · Gruppieren · Zeilenende ===== ACHTUNG Namensraum: menue, haken, zahl, fest, baustein und trenner sind in dieser Datei bereits anderweitig vergeben (maschinell geprüft: 15/8/17/21/6/1 Treffer). Deshalb trägt hier ALLES das Präfix lw- — nichts davon kommt sonst im Prototyp vor. */ .werkzeuge-re{position:relative} .ansichten{position:relative} /* #224: Das ✕ einer eigenen Ansicht steht neben dem Chip, nicht darin (kein Knopf im Knopf), und liegt über dessen rechtem Ende. `.chip.lw-eigen` schlägt die Polster der Varianten (.agb, Aufgaben-Reiter); die Farbe folgt dem Chip über `+`, erben kann sie nicht. */ .lw-eigenpaar{position:relative;display:inline-flex} .ansichten .lw-eigenpaar .chip.lw-eigen{padding-right:30px} .lw-eigenpaar .lw-ab{position:absolute;top:0;right:0;bottom:0;width:30px;display:flex;align-items:center; justify-content:center;font-size:12px;color:var(--tinte-2);opacity:.6} .lw-eigenpaar .lw-ab:hover,.lw-eigenpaar .lw-ab:focus-visible{opacity:1} .lw-eigenpaar .chip.on + .lw-ab{color:#fff} .lw-menue{position:absolute;top:calc(100% + 6px);right:0;z-index:40;background:var(--weiss); border:1px solid var(--linie-stark);border-radius:var(--r-m);padding:6px;min-width:218px;display:none; box-shadow:0 4px 16px rgba(25,28,24,.13),0 1px 3px rgba(25,28,24,.08)} .lw-menue.auf{display:block} .lw-mtitel{font-family:var(--mono);font-size:9.5px;letter-spacing:1.2px;text-transform:uppercase; color:var(--tinte-3);padding:7px 10px 5px} .lw-punkt{display:flex;align-items:center;gap:9px;width:100%;padding:7px 10px;border-radius:var(--r-s); font-size:13.5px;color:var(--tinte)} .lw-punkt:hover{background:#F1F4F3} .lw-punkt[aria-disabled="true"]{color:var(--tinte-3);cursor:default} .lw-punkt[aria-disabled="true"]:hover{background:transparent} .lw-punkt .lw-haken{width:15px;height:15px;flex-shrink:0;color:var(--petrol-700)} .lw-punkt .lw-haken svg{width:15px;height:15px;display:block} .lw-punkt.aus .lw-haken{opacity:0} .lw-punkt .lw-fest{font-family:var(--mono);font-size:9.5px;color:var(--tinte-3);margin-left:auto} .lw-trenner{height:1px;background:var(--linie);margin:5px 2px} /* Der Werkzeug-Knopf zeigt seinen Zustand: Anzahl der Bedingungen, Feld der Gruppierung */ .werkzeug .lw-zahl{font-family:var(--mono);font-size:10.5px;background:var(--petrol-800);color:#fff; border-radius:99px;padding:0 5px;min-width:16px;text-align:center} .werkzeug .lw-weg{margin-left:2px;opacity:.55;font-size:13px} .werkzeug .lw-weg:hover{opacity:1;color:var(--koralle-700)} /* Filterzeile — zwischen Werkzeugleiste und Tabelle, zeigt jederzeit was wirkt */ .lw-filterzeile{display:none;align-items:center;gap:7px;flex-wrap:wrap;background:var(--weiss); border:1px solid var(--linie);border-radius:var(--r-m);padding:9px 12px;margin-bottom:12px; box-shadow:var(--schatten);position:relative} .lw-filterzeile.auf{display:flex} .lw-filterzeile .lw-menue{left:0;right:auto} .lw-fl{font-family:var(--mono);font-size:9.5px;letter-spacing:1.2px;text-transform:uppercase; color:var(--tinte-3);margin-right:3px} .lw-baustein{display:inline-flex;align-items:center;gap:7px;background:#F1F4F3;border:1px solid var(--linie); border-radius:99px;padding:3px 6px 3px 11px;font-size:12.5px;color:var(--tinte)} .lw-baustein em{font-style:normal;color:var(--tinte-3)} .lw-baustein b{font-weight:500} .lw-baustein .lw-ab{width:17px;height:17px;border-radius:50%;display:flex;align-items:center; justify-content:center;color:var(--tinte-3);font-size:12px;line-height:1} .lw-baustein .lw-ab:hover{background:var(--linie-stark);color:var(--tinte)} /* Baustein aus einer gespeicherten Ansicht, den der Filter nicht selbst bauen kann („Meine", „Überfällig") — er wirkt im echten Bestand, die Beispieldaten zeigen es nicht. */ .lw-baustein.lw-sonder{background:#FBFBF8;border-style:dashed} .lw-baustein.lw-sonder .lw-zeichen{font-family:var(--mono);font-size:9px;color:var(--tinte-3); border:1px solid var(--linie-stark);border-radius:3px;padding:0 3px;margin-right:1px} .lw-plus{font-size:12.5px;color:var(--petrol-700);padding:4px 10px;border-radius:99px; border:1px dashed var(--linie-stark);font-weight:500} .lw-plus:hover{background:#F1F4F3;border-color:var(--petrol-600)} .lw-leer{font-size:13px;color:var(--tinte-3)} .lw-alle{margin-left:auto;font-size:12.5px;color:var(--tinte-3);text-decoration:underline; text-underline-offset:3px} .lw-alle:hover{color:var(--koralle-700)} /* Gruppenkopf wird ein echter Knopf, damit er einklappbar und tastaturbedienbar ist */ button.g-kopf{width:100%;cursor:pointer;text-align:left} button.g-kopf:hover{background:#EAEEED} button.g-kopf .pf{transition:transform .15s ease-out;display:inline-block} button.g-kopf.zu .pf{transform:rotate(-90deg)} /* Spaltenwahl schaltet das Raster um — nur dort, wo die Liste verdrahtet ist */ .tabelle[data-lw-raster] .kopfzeile, .tabelle[data-lw-raster] .zeile, .tabelle[data-lw-raster] .summe{grid-template-columns:var(--lw-spalten)} .lw-verborgen{display:none!important} /* Wenige, benannte Zellen werden direkt in der Liste bearbeitet (ADR-0029 W3) — Excel-artiges Editieren macht sonst jede Zeile zum Formular. Bis #104 war es genau eine: die Status-Marke. Jetzt auch Herkunft (Menü) und Nachfassen (Datumsfeld). */ .lw-zellenwahl,.lw-zellendatum{position:relative;cursor:pointer} .lw-zellenwahl:after,.lw-zellendatum:after{content:"▾";font-size:8px;margin-left:5px; opacity:0;transition:opacity .12s;flex-shrink:0} .zeile:hover .lw-zellenwahl:after,.lw-zellenwahl:focus-visible:after, .zeile:hover .lw-zellendatum:after,.lw-zellendatum:focus-visible:after{opacity:.55} .lw-zellenwahl .lw-menue,.lw-zellendatum .lw-menue{top:calc(100% + 5px);left:0;right:auto; min-width:186px} .lw-zellenwahl .lw-punkt{padding:5px 8px} /* Der Kalender ist kein Menü: ein Feld, darunter höchstens „Leeren". */ .lw-datumkasten{display:flex;flex-direction:column;gap:6px} .lw-dfeld{font:inherit;font-size:12px;font-family:var(--mono);border:1px solid var(--linie-stark); border-radius:var(--r-s);padding:4px 6px;background:var(--weiss);color:var(--tinte)} .lw-dschnell{justify-content:space-between;gap:12px;padding:5px 8px;font-size:13px} .lw-dwann{font-family:var(--mono);font-size:11px;color:var(--tinte-3);flex-shrink:0} .lw-dleer{justify-content:center;padding:4px 8px;font-size:12px;color:var(--tinte-2)} .lw-gesperrt{cursor:help} .lw-leerzustand{padding:34px 16px;text-align:center;color:var(--tinte-3);font-size:14px} .lw-leerzustand b{display:block;color:var(--tinte-2);font-weight:500;font-size:15px;margin-bottom:4px} /* ================================================================ Aufgaben-Bausteine (#160) */ .ab-kreis,.ab-stern{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center; border:none;background:transparent;color:var(--tinte-3);cursor:pointer;border-radius:50%;padding:0;flex-shrink:0; transition:color .16s,background .16s} .ab-kreis svg,.ab-stern svg{width:20px;height:20px} .ab-kreis:hover,.ab-stern:hover{color:var(--petrol-700);background:rgba(42,90,105,.08)} .ab-kreis.an{color:var(--ok)} /* #160/#368: Polster auf ~42 px Trefferflaeche, sichtbar bleibt der 32-px-Kreis */ .ab-kreis{position:relative} .ab-kreis::after{content:'';position:absolute;inset:-5px;border-radius:50%} .ab-stern.an{color:var(--koralle-600)} .ab-stern.an svg{fill:currentColor} /* Dringend-Flagge (#184) — dieselbe Groesse wie der Stern, Koralle wenn gesetzt */ .ab-flagge{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center; border:none;background:transparent;color:var(--tinte-3);cursor:pointer;border-radius:50%;padding:0;flex-shrink:0; transition:color .16s,background .16s} .ab-flagge svg{width:17px;height:17px} .ab-flagge:hover{color:var(--koralle-600);background:rgba(198,78,44,.08)} .ab-flagge.an{color:var(--koralle-600)} .ab-flagge.an svg{fill:currentColor} .ab-flagge:focus-visible{outline:2px solid var(--koralle-400);outline-offset:2px} .ab-kreis:focus-visible,.ab-stern:focus-visible,.ab-etikett:focus-visible,.ab-kuerzel:focus-visible{ outline:2px solid var(--koralle-400);outline-offset:2px} .ab-faellig,.ab-zaehler{display:inline-flex;align-items:center;gap:4px;font-family:var(--mono); font-size:10.5px;color:var(--tinte-3);white-space:nowrap;border-radius:4px;padding:1px 5px} .ab-faellig svg,.ab-zaehler svg{width:12px;height:12px} .ab-faellig.bald{background:#F7EFD9;color:#7A5B12} .ab-faellig.spaet{background:var(--koralle-100);color:var(--koralle-700);font-weight:500} .ab-faellig.fertig{color:var(--ok);text-decoration:line-through} .ab-etiketten{display:flex;flex-wrap:wrap;gap:4px} .ab-etikett{font-size:10px;font-weight:500;line-height:1.5;border-radius:4px;padding:1px 7px;border:none; font-family:var(--sans);cursor:default} button.ab-etikett{cursor:pointer;min-height:20px;position:relative} button.ab-etikett::after{content:'';position:absolute;inset:-6px -2px} /* Klickflaeche 32 px bei 20 px Sichtbarkeit */ .ab-etikett[data-farbe="petrol"]{background:#DCE8EB;color:var(--petrol-800)} .ab-etikett[data-farbe="koralle"]{background:var(--koralle-100);color:var(--koralle-700)} .ab-etikett[data-farbe="warn"]{background:#F7EFD9;color:#7A5B12} .ab-etikett[data-farbe="stop"]{background:#F6DEDB;color:#8A2F26} .ab-etikett[data-farbe="ok"]{background:#DDEEE2;color:#245C36} .ab-kuerzel{position:relative;width:22px;height:22px;border-radius:50%;background:var(--petrol-600);color:#fff;font-size:9px; font-weight:600;display:inline-flex;align-items:center;justify-content:center;border:none;padding:0;font-family:var(--sans)} button.ab-kuerzel{cursor:pointer} button.ab-kuerzel::after{content:'';position:absolute;inset:-5px} /* Klickflaeche 32 px bei 22 px Sichtbarkeit */ @media (prefers-reduced-motion: reduce){ .ab-kreis,.ab-stern,.ag-karte,.ag-spalte,.ap-zeile,.ab-kbox,.lw-suche-klapp input{transition:none} } .ab-schnell{display:flex;align-items:center;gap:8px;border:1px solid var(--linie-stark);border-radius:var(--r-s); background:var(--weiss);padding:0 10px;margin-bottom:10px;color:var(--petrol-700)} .ab-schnell svg{width:18px;height:18px;flex-shrink:0} .ab-schnell input{flex:1;border:none;outline:none;font-family:var(--sans);font-size:13.5px;padding:10px 0;color:var(--tinte);background:transparent} .ab-schnell:focus-within{border-color:var(--petrol-600);box-shadow:0 0 0 3px rgba(42,90,105,.12)} .ab-vorlaeufig{opacity:.55;padding:8px 12px;font-size:13px} /* #169: Status als Form, Prioritaet als Fahne — in Zeile und Auswahlfenster gleich */ .ab-st{width:15px;height:15px;border-radius:50%;border:2px solid currentColor;display:inline-block;flex:none} .ab-st.offen{color:#8A8F86} .ab-st.bearb{color:#2A6FB0;background:linear-gradient(90deg,currentColor 50%,transparent 50%)} .ab-st.warten{color:var(--warn);border-style:dashed} .ab-st.pruef{color:#7A4FB0;background:conic-gradient(currentColor 0 75%,transparent 75%)} .ab-st.fertig{color:var(--ok);background:currentColor} .ab-fl{width:15px;height:15px;flex:none} .ab-fl.hoch{color:var(--koralle-600)} .ab-fl.normal{color:var(--tinte-3)} .ab-fl.niedrig{color:#2A6FB0} .ab-avatar{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center; font-size:10px;font-weight:700;color:#fff;background:var(--petrol-600);flex:none} .lw-suche-klapp{display:inline-flex;align-items:center;gap:4px} .lw-suche-klapp input{width:0;opacity:0;border:1px solid var(--linie-stark);border-radius:var(--r-s);padding:4px 8px; font-size:12.5px;visibility:hidden;transition:width 160ms,opacity 160ms,visibility 0s 160ms} .lw-suche-klapp.auf input{width:200px;opacity:1;visibility:visible;transition-delay:0s} .lw-suche-klapp .werkzeug{min-width:32px;min-height:32px;justify-content:center} /* ================================================================ Panel der Aufgabe (#160 Punkt 2) */ .ap{display:flex;flex-direction:column;gap:14px} .ap-kopf{display:flex;align-items:flex-start;gap:6px} .pinhalt.ap{display:flex;flex-direction:column;gap:24px;padding:24px 28px 28px} .ap-kopftitel{flex:1;min-width:0;display:flex;align-items:center;gap:6px;opacity:0;transform:translateY(4px); transition:opacity 160ms ease,transform 160ms ease;pointer-events:none} .ap-kopftitel.an{opacity:1;transform:none;pointer-events:auto} .ap-kopftitel b{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ap-kopfkreis{width:18px;height:18px;display:inline-flex;color:var(--tinte-3);flex:none} .ap-kopfkreis svg{width:18px;height:18px} .ap-kopfkreis.an{color:var(--ok)} .ap-titel{flex:1;font-size:19px;font-weight:600;line-height:1.35;padding:2px 6px;border-radius:var(--r-s); outline:none;letter-spacing:-.005em} .ap-titel:hover{background:#F4F6F5} .ap-titel:focus{background:var(--weiss);box-shadow:0 0 0 2px var(--koralle-400)} .ap-titel.fertig{color:var(--tinte-3);text-decoration:line-through} .ap-unterzeile{display:flex;align-items:center;gap:10px;margin:-16px 0 0 38px;flex-wrap:wrap} .ap-herkunft{font-size:12.5px;color:var(--tinte-3)} .ap-zeit{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--linie-stark);border-radius:999px; padding:4px 12px 4px 10px;font-size:13px;color:var(--tinte-2);min-height:32px;background:var(--weiss);cursor:pointer} .ap-zeit:hover{border-color:var(--petrol-600);color:var(--petrol-700)} .ap-zeit svg{width:13px;height:13px;color:var(--koralle-600)} .ap-zeit.laeuft{background:var(--koralle-100);border-color:var(--koralle-400);color:var(--koralle-700)} .ap-uhr{font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums} .ap-abschnitt{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;font-weight:700; letter-spacing:.12em;text-transform:uppercase;color:var(--tinte);padding-bottom:8px;border-bottom:1px solid var(--linie);margin:0 0 6px} .ap-abschnitt-neben{margin-left:auto;font-weight:500;letter-spacing:.02em;text-transform:none;color:var(--tinte-3);font-variant-numeric:tabular-nums} .ap-zeit:disabled{opacity:.45;cursor:default} .ap-zeilen{display:flex;flex-direction:column} .ap-zeile{display:grid;grid-template-columns:32px 118px 1fr auto;align-items:center;gap:6px;min-height:40px;padding:3px 6px; border-bottom:1px solid var(--linie);cursor:pointer;transition:background 160ms ease} .ap-zeile:hover,.ap-zeile.offen{background:#F4F6F5} .ap-zeile.offen{box-shadow:inset 2px 0 0 var(--petrol-600)} .ap-zeile:focus-visible{outline:2px solid var(--koralle-400);outline-offset:-2px} .ap-sym{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;color:var(--tinte-3);flex-shrink:0} .ap-sym svg{width:18px;height:18px} .ap-etikett{font-size:13px;color:var(--tinte-2)} /* Bei 460 px Panelbreite gibt zuerst der Kunde neben dem Projekt nach, nie der Wert selbst. */ .ap-wert{display:flex;align-items:center;gap:8px;min-width:0;font-size:14px;white-space:nowrap} .ap-kurz{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .ap-neben{font-size:12.5px;color:var(--tinte-3);white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis;flex:0 1000 auto} .ap-leer{display:inline-flex;align-items:center;gap:6px;color:var(--petrol-700)} .ap-leer svg{width:12px;height:12px} .ap-zeile:hover .ap-leer{text-decoration:underline;text-underline-offset:3px} .ap-spaet{color:var(--koralle-700);font-weight:500} .ap-marke{display:inline-flex;align-items:center;font-size:11.5px;font-weight:600;color:var(--koralle-700); background:var(--koralle-100);border-radius:999px;padding:1px 8px} .ap-x-platz{width:32px} .ap-gespeichert-blitz{flex:none;max-width:120px;overflow:hidden;display:inline-flex;align-items:center;gap:4px;font-size:11.5px;color:var(--ok);animation:ap-blitz 1.6s ease forwards} .ap-gespeichert-blitz svg{width:12px;height:12px} /* Am Ende schrumpft der Hinweis auf null, damit der Wert seinen Platz zurueckbekommt. */ @keyframes ap-blitz{0%{opacity:0}15%{opacity:1}75%{opacity:1;max-width:120px}100%{opacity:0;max-width:0}} .ap-zeile.ap-etik{grid-template-columns:32px 1fr} /* #169 B2: das Auswahlfenster — am body, ueber Panel (6) und Schleier (5) */ .ap-wahl{position:fixed;z-index:60;width:300px;background:var(--weiss);border:1px solid var(--linie-stark);border-radius:var(--r-l); box-shadow:0 12px 32px rgba(8,20,25,.18);padding:6px;animation:ap-auf 160ms cubic-bezier(.2,.8,.2,1);outline:none} .ap-wahl.oben{animation-name:ap-auf-oben} @keyframes ap-auf{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}} @keyframes ap-auf-oben{from{opacity:0;transform:translateY(4px) scale(.98)}to{opacity:1;transform:none}} .ap-wahl-suche{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--linie);padding:2px 8px 8px 10px;margin:0 -6px 4px} .ap-wahl-suche svg{width:14px;height:14px;color:var(--tinte-3);flex:none} .ap-wahl-suche input,.ap-wahl-datum input{flex:1;min-width:0;border:0;outline:0;padding:0 4px;font-family:var(--sans);font-size:13.5px;height:30px;background:none} .ap-wahl-treffer{max-height:260px;overflow:auto} .ap-wahl-option{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:6px 8px;border:0;background:none; border-radius:var(--r-m);font-family:var(--sans);font-size:13.5px;min-height:36px;color:var(--tinte);cursor:pointer} .ap-wahl-option:hover,.ap-wahl-option.aktiv{background:#EEF3F4} .ap-wahl-option.gewaehlt{font-weight:600} .ap-wahl-option.leeren{color:var(--koralle-700)} .ap-wahl-option mark{background:none;color:var(--petrol-700);font-weight:700} .ap-wahl-rechts{margin-left:auto;font-size:12px;color:var(--tinte-3);display:flex;align-items:center;gap:8px} .ap-wahl-rechts svg{width:14px;height:14px;color:var(--petrol-700)} .ap-wahl-taste{font-family:var(--mono);font-size:10.5px;color:var(--tinte-3);border:1px solid var(--linie);border-radius:4px;padding:0 5px;min-width:18px;text-align:center} .ap-wahl-klein{font-size:12px;color:var(--tinte-3);font-weight:400} .ap-wahl-gruppe{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--tinte-3);padding:8px 8px 2px} .ap-wahl-trenner{height:1px;background:var(--linie);margin:4px 2px} .ap-wahl-nichts{padding:10px 8px;color:var(--tinte-3);font-size:13px} .ap-wahl-datum{display:flex;align-items:center;gap:8px;border:1px solid var(--linie-stark);border-radius:var(--r-m);padding:0 10px;height:34px;margin:2px 2px 6px} .ap-wahl-datum:focus-within{border-color:var(--petrol-600)} .ap-wahl-datum svg{width:15px;height:15px;color:var(--tinte-3);flex:none} .ap-wahl-datum small{font-size:11.5px;color:var(--ok);white-space:nowrap} .ap-wahl-datum small.falsch{color:var(--koralle-700)} .ap-wahl-ik{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border:0;background:none; border-radius:var(--r-s);color:var(--tinte-2);cursor:pointer} .ap-wahl-ik:hover{background:#ECEEEA;color:var(--tinte)} .ap-wahl-ik svg{width:16px;height:16px} .ap-kal-kopf{display:flex;align-items:center;justify-content:space-between;padding:4px 4px 2px} .ap-kal-kopf b{font-size:13.5px;font-weight:600} .ap-kal{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;padding:0 4px 4px} .ap-kal span{font-family:var(--mono);font-size:10px;color:var(--tinte-3);text-align:center;padding:4px 0} .ap-kal button{height:32px;border:0;background:none;border-radius:var(--r-m);font-family:var(--sans);font-size:13px; font-variant-numeric:tabular-nums;color:var(--tinte);cursor:pointer} .ap-kal button:hover{background:#EEF3F4} .ap-kal button.fremd{color:#8A8F86} .ap-kal button.we{color:var(--tinte-3)} .ap-kal button.heute{color:var(--koralle-700);font-weight:700;box-shadow:inset 0 0 0 1px var(--koralle-400)} .ap-kal button.gewaehlt{background:var(--petrol-800);color:#fff;font-weight:600;box-shadow:none} .ap-wahl :focus-visible{outline:2px solid var(--koralle-400);outline-offset:-2px} .ap-x{width:32px;height:32px;border:none;background:transparent;color:var(--tinte-3);cursor:pointer;border-radius:50%; display:inline-flex;align-items:center;justify-content:center;opacity:0;transition:opacity .16s} .ap-x svg{width:14px;height:14px} .ap-zeile:hover .ap-x,.ap-zeile:focus-within .ap-x{opacity:1} .ap-x:hover{color:var(--koralle-700);background:var(--koralle-100)} .ap-x:focus-visible{outline:2px solid var(--koralle-400);opacity:1} .ap-fuss{display:flex;align-items:center;gap:8px;margin-top:8px;padding-top:10px;border-top:1px solid var(--linie); font-size:11.5px;color:var(--tinte-3)} .ap-fuss>span{flex:1} .ap-weg{width:32px;height:32px;border:none;background:transparent;color:var(--tinte-3);cursor:pointer;border-radius:50%; display:inline-flex;align-items:center;justify-content:center} .ap-weg svg{width:16px;height:16px} .ap-weg:hover{color:var(--koralle-700);background:var(--koralle-100)} .ap-rot{color:#fff;background:var(--koralle-600);border-color:var(--koralle-600)} .ap h3.gr{margin:0 0 6px} /* Schritte im Aufgabenpanel (#160 Punkt 2 F) */ .ap-schritte{display:flex;flex-direction:column} .ap-fortschritt{height:4px;border-radius:2px;background:var(--linie);overflow:hidden;margin:2px 0 8px} .ap-fortschritt i{display:block;height:100%;background:var(--ok);transition:width 260ms cubic-bezier(.2,.8,.2,1)} .ap-schritt{display:flex;align-items:center;gap:2px;min-height:38px;border-radius:var(--r-s);padding-right:2px;transition:background 160ms ease} .ap-schritt:hover,.ap-schritt:focus-within{background:#F4F6F5} .ap-schritt.zieht{opacity:.45} .ap-schritt.ziel-oben{box-shadow:inset 0 2px 0 var(--petrol-600)} .ap-schritt.ziel-unten{box-shadow:inset 0 -2px 0 var(--petrol-600)} .ap-griff{width:18px;height:32px;display:inline-flex;align-items:center;justify-content:center;color:var(--tinte-3); cursor:grab;opacity:0;transition:opacity 160ms ease;flex:none} .ap-griff svg{width:10px;height:14px} .ap-schritt:hover .ap-griff{opacity:1} .ap-schritt-text{flex:1;font-size:14px;padding:4px 6px;border-radius:var(--r-s);outline:none} .ap-schritt-text:focus{background:var(--weiss);box-shadow:0 0 0 2px var(--koralle-400)} .ap-schritt.an .ap-schritt-text{color:var(--tinte-3);text-decoration:line-through} .ap-schritt:hover .ap-x,.ap-schritt:focus-within .ap-x{opacity:1} .ap-schritt-neu{display:flex;align-items:center;gap:8px;border:1px solid var(--linie-stark);border-radius:var(--r-m); padding:0 10px 0 12px;height:40px;margin-top:6px;background:var(--weiss);cursor:text;transition:border-color 160ms ease,box-shadow 160ms ease} .ap-schritt-neu svg{width:16px;height:16px;color:var(--koralle-600);flex:none} .ap-schritt-neu input{flex:1;border:0;outline:0;font-family:var(--sans);font-size:14px;background:none;height:100%;color:var(--tinte)} .ap-schritt-neu input::placeholder{color:var(--tinte-2)} .ap-schritt-neu:hover{border-color:var(--petrol-600)} .ap-schritt-neu:focus-within{border-color:var(--petrol-600);box-shadow:0 0 0 3px rgba(42,90,105,.15)} .ap-schritt-neu kbd,.ap-tipp kbd{font-family:var(--mono);font-size:10.5px;color:var(--tinte-3);border:1px solid var(--linie); border-bottom-width:2px;border-radius:4px;padding:0 5px} .ap-schritt-neu kbd{opacity:0;transition:opacity 160ms ease} .ap-schritt-neu:focus-within kbd{opacity:1} .ap-alle-fertig{display:flex;align-items:center;gap:10px;background:#DDEEE2;color:#1F5A37;border-radius:var(--r-m); padding:8px 8px 8px 12px;margin-top:8px;font-size:13px} .ap-alle-fertig svg{width:16px;height:16px;flex:none} .ap-alle-fertig span{flex:1} .ap-alle-fertig button{background:var(--ok);color:#fff;border:0;border-radius:var(--r-s);padding:5px 12px;font-size:12.5px; font-weight:500;min-height:32px;cursor:pointer} .ap-alle-fertig button:hover{background:#246640} /* Notiz, Gespraech, Etiketten im Aufgabenpanel (#160 Punkt 2, E/G) */ .ap-block{display:flex;flex-direction:column;gap:4px} .ap-notiz{width:100%;min-height:40px;overflow:hidden;border:1px solid transparent;border-radius:var(--r-m);background:#F4F5F2; padding:10px 12px;resize:none;font-family:var(--sans);font-size:14px;color:var(--tinte);transition:border-color 160ms ease,background 160ms ease} .ap-notiz:hover{background:#EFF1ED} .ap-notiz:focus{outline:none;border-color:var(--petrol-600);background:var(--weiss)} .ap-gespeichert{font-size:11px;color:var(--ok);min-height:14px} .ap-verlauf{display:flex;flex-direction:column;gap:10px;padding:4px 0 10px} .ap-ereignis{display:flex;gap:10px;font-size:12.5px;color:var(--tinte-3);align-items:center} .ap-ereignis i{width:22px;display:flex;justify-content:center;flex:none} .ap-ereignis i::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--linie-stark)} .ap-ereignis b{color:var(--tinte-2);font-weight:500} .ap-beitrag{display:flex;gap:10px;align-items:flex-start;font-size:14px} .ap-b-kopf{font-size:12.5px;color:var(--tinte-3)} .ap-b-kopf b{color:var(--tinte);font-weight:600} .ap-b-text{white-space:pre-wrap;overflow-wrap:anywhere} .ap-b-anh{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px;margin-top:6px} .ap-b-bild{width:160px;height:104px;border:1px solid var(--linie);border-radius:var(--r-m);padding:0;cursor:zoom-in; background:#F4F5F2 center/cover no-repeat} .ap-b-pdf{display:flex;align-items:center;gap:10px;border:1px solid var(--linie);border-radius:var(--r-m);padding:6px 12px 6px 6px; font-family:var(--sans);font-size:13px;background:var(--weiss);color:var(--tinte);text-align:left;cursor:pointer} .ap-b-pdf:hover{border-color:var(--petrol-600)} .ap-b-pdf small{display:block;font-size:11px;color:var(--tinte-3)} .ap-beitrag{position:relative} .ap-b-rumpf{flex:1;min-width:0} /* Eigene Kommentare bearbeiten und löschen (#249) — Aufgabe und Projekt teilen sich das Menü */ .km-menue{position:absolute;top:-4px;right:0;display:flex;gap:2px;background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r-m); padding:2px;opacity:0;transition:opacity 180ms cubic-bezier(.2,.8,.2,1);box-shadow:0 2px 6px rgba(25,28,24,.06)} [data-kommentar]:hover .km-menue,[data-kommentar]:focus-within .km-menue{opacity:1} .km-bearbeitet-gerade .km-menue{display:none} .km-menue button{font-family:var(--sans);font-size:12px;padding:3px 8px;border:0;border-radius:4px;background:transparent;color:var(--tinte-2);min-height:28px;cursor:pointer} .km-menue button:hover{background:#F2F4F2;color:var(--tinte)} .km-menue button.weg:hover{background:var(--koralle-100);color:var(--koralle-700)} .km-bearb{font-size:11.5px;color:var(--tinte-3);font-style:italic} .km-edit{display:block;width:100%;border:1px solid var(--petrol-600);border-radius:var(--r-m);padding:8px 12px;resize:none;font-family:var(--sans); font-size:14px;color:var(--tinte);box-shadow:0 0 0 3px rgba(42,90,105,.15);margin-top:3px;outline:none} .km-edit-tipp{font-size:11.5px;color:var(--tinte-3);margin-top:3px} @media (prefers-reduced-motion:reduce){.km-menue{transition:none}} .ap-kommentar{display:flex;align-items:flex-start;gap:10px} .ap-kommentar>.ab-avatar{margin-top:9px} .ap-k-feld{flex:1;position:relative;border:1px solid var(--linie-stark);border-radius:var(--r-m);background:var(--weiss); transition:border-color 160ms ease,box-shadow 160ms ease} .ap-k-feld:focus-within{border-color:var(--petrol-600);box-shadow:0 0 0 3px rgba(42,90,105,.15)} .ap-k-zeile{display:flex;align-items:flex-end;gap:2px;padding-right:4px} .ap-k-text{flex:1;border:0;outline:0;resize:none;font-family:var(--sans);font-size:14px;padding:9px 12px;min-height:40px;max-height:160px; background:none;line-height:1.45;overflow:hidden;color:var(--tinte)} .ap-k-klammer{width:32px;height:32px;margin-bottom:4px;display:inline-flex;align-items:center;justify-content:center; border-radius:var(--r-s);color:var(--tinte-2);cursor:pointer} .ap-k-klammer:hover{background:#ECEEEA;color:var(--tinte)} .ap-k-klammer:focus-visible{outline:2px solid var(--koralle-400);outline-offset:-2px} .ap-k-klammer svg{width:17px;height:17px} .ap-k-klammer input{display:none} .ap-k-anh{display:flex;flex-wrap:wrap;gap:8px;padding:0 10px 10px} .ap-k-anh:empty{display:none} .ap-wartend{position:relative;width:64px;height:64px;border:1px solid var(--linie);border-radius:var(--r-m);overflow:hidden; background:#F4F5F2;display:grid;place-items:center} .ap-wartend img{width:100%;height:100%;object-fit:cover} .ap-wartend-pdf{font-family:var(--mono);font-size:10px;font-weight:700;color:var(--koralle-700);text-align:center;line-height:1.2;padding:4px} .ap-wartend-pdf small{display:block;font-family:var(--sans);font-weight:400;color:var(--tinte-3);font-size:9px;word-break:break-all;max-height:22px;overflow:hidden} .ap-wartend button{position:absolute;top:5px;right:5px;width:22px;height:22px;border:0;border-radius:50%;background:rgba(16,38,46,.75); color:#fff;display:grid;place-items:center;cursor:pointer} .ap-wartend button svg{width:11px;height:11px} .ap-wartend button::after{content:'';position:absolute;inset:-5px} .ap-tipp{font-size:11.5px;color:var(--tinte-3);margin:5px 0 0 32px;opacity:0;transition:opacity 160ms ease} .ap-kommentar:focus-within + .ap-tipp{opacity:1} .ap-k-ablage{position:absolute;inset:-1px;border:2px dashed var(--petrol-600);border-radius:var(--r-m);background:rgba(234,240,241,.94); display:none;align-items:center;justify-content:center;gap:8px;color:var(--petrol-700);font-size:13px;font-weight:500;z-index:2;pointer-events:none} .ap-k-feld.zieht .ap-k-ablage{display:flex} .ap-k-ablage svg{width:16px;height:16px} .ap-etik{cursor:default} .ap-etik:hover{background:transparent} .ab-etikett.aus{opacity:.4} .ab-etikett.aus:hover{opacity:.8} .ap-datei{display:flex;align-items:center;gap:10px;min-height:40px;padding:3px 4px;border-radius:var(--r-s)} .ap-datei:hover{background:#F4F6F5} .ap-datei:hover .ap-x,.ap-datei:focus-within .ap-x{opacity:1} .ap-vorschau{width:36px;height:36px;border:1px solid var(--linie);border-radius:6px;background:var(--weiss); font-family:var(--mono);font-size:9px;color:var(--tinte-3);cursor:pointer;flex-shrink:0} .ap-vorschau.bild{background-size:cover;background-position:center} .ap-datei-text{flex:1;display:flex;flex-direction:column;font-size:12.5px;min-width:0} .ap-datei-text b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ap-datei-text small{font-size:10.5px;color:var(--tinte-3)} .ap-ablage{display:flex;align-items:center;gap:10px;border:1px dashed var(--linie-stark);border-radius:var(--r-m);padding:10px 12px; color:var(--tinte-2);font-size:13.5px;cursor:pointer;margin-top:4px;transition:border-color 160ms ease,background 160ms ease} .ap-ablage:hover{border-color:var(--petrol-600);background:#F6F9F9} .ap-ablage:focus-visible{outline:2px solid var(--koralle-400);outline-offset:2px} .ap-ablage svg{width:16px;height:16px;color:var(--petrol-700);flex:none} .ap-ablage b{color:var(--petrol-700);font-weight:500} .ap-ablage input{display:none} .ap-ablage.zieht{border-color:var(--petrol-600);border-style:solid;background:#EAF0F1} /* ================================================================ Board (#160 Punkt 3) */ .ag-spalte .sk .n-hinweis{font-size:10.5px;color:var(--tinte-3);margin-left:auto} .ag-spalte .sk .n{margin-left:auto} /* #184: Plus im Spaltenkopf, Feld am Spaltenende, Leertext ein Satz */ .ag-spalte .sk .ab-st{width:12px;height:12px} .ag-spalte .sk .sp-plus{width:32px;height:32px;margin:-7px -4px -7px 0;border:none;background:transparent;color:var(--tinte-2); cursor:pointer;padding:0;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-s)} .ag-spalte .sk .sp-plus svg{width:14px;height:14px} .ag-spalte .sk .sp-plus:hover{color:var(--petrol-700);background:var(--weiss)} .ag-spalte .sk .sp-plus:focus-visible{outline:2px solid var(--koralle-400)} .ag-spalte.zu-sp .sk .sp-plus,.ag-spalte.zu-sp .ag-sp-leer{display:none} .ag-spalte .ab-schnell{margin-top:4px;background:var(--weiss);border:1px solid var(--petrol-600)} .ag-spalte .ab-schnell input{font-size:12.5px} .ag-sp-leer{font-size:12px;color:var(--tinte-2);line-height:1.45;padding:10px 8px;margin:0 0 6px; border:1px dashed var(--linie-stark);border-radius:var(--r-m)} .ag-sp-leer[hidden]{display:none} .ag-spalte:not(.zu-sp) .sk .klapp-sp{opacity:0;transition:opacity .16s} .ag-spalte:not(.zu-sp) .sk:hover .klapp-sp,.ag-spalte .sk .klapp-sp:focus-visible{opacity:1} @media (hover:none){.ag-spalte:not(.zu-sp) .sk .klapp-sp{opacity:1}} @media (prefers-reduced-motion:reduce){.ag-spalte .sk .klapp-sp{transition:none}} .ag-spalte .ab-vorlaeufig{background:var(--weiss);border:1px dashed var(--petrol-600);border-radius:var(--r-m);padding:9px 11px;margin-top:6px;font-size:12.5px;color:var(--tinte-3)} .ag-auswahl{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--tinte-2); background:#EDF3F1;border:1px solid var(--petrol-600);border-radius:var(--r-s);padding:4px 8px 4px 10px} .ag-auswahl b{font-weight:600;color:var(--petrol-800)} .ag-auswahl select{border:1px solid var(--linie-stark);border-radius:var(--r-s);padding:5px 8px;font-size:12.5px;background:var(--weiss);font-family:var(--sans)} .ag-auswahl select,.ag-auswahl .kn{min-height:32px} .ag-auswahl[hidden]{display:none} /* Karte (#160 Punkt 3 E, #184 Nummer 16) — hoechstens drei Zeilen */ .ag-karte{padding:8px 10px 8px 6px} .ag-karte.fertig{opacity:.62} .ag-karte[hidden]{display:none} .ak-kopf{display:flex;align-items:flex-start;gap:2px} .ak-kopf .ab-kreis{flex-shrink:0} .ak-titel{flex:1;min-width:0;font-size:12.5px;font-weight:500;line-height:1.4;padding-top:7px;overflow-wrap:break-word;hyphens:auto} .ag-karte.griffe-1 .ak-titel{padding-right:30px} .ag-karte.griffe-2 .ak-titel{padding-right:62px} .ag-karte.fertig .ak-titel{text-decoration:line-through;color:var(--tinte-3)} /* Griffe oben rechts: gesetzt immer, sonst beim Ueberfahren und bei Tastaturfokus; ohne Hover immer */ .ak-griffe{position:absolute;top:3px;right:3px;display:flex;background:var(--weiss);border-radius:16px} .ak-griffe .ab-stern:not(.an),.ak-griffe .ab-flagge:not(.an){display:none} .ag-karte:hover .ak-griffe .ab-stern,.ag-karte:hover .ak-griffe .ab-flagge,.ag-karte:focus-within .ak-griffe .ab-stern,.ag-karte:focus-within .ak-griffe .ab-flagge{display:inline-flex} @media (hover:none){.ak-griffe .ab-stern,.ak-griffe .ab-flagge{display:inline-flex}} @media (hover:none){.ag-karte .ak-titel{padding-right:62px}} /* Steht das Kaestchen oben rechts (Auswahl oder Tastaturfokus), ruecken die Griffe links daneben */ .ag-board.auswahl-aktiv .ak-griffe{right:30px} .ag-karte:focus-visible .ak-griffe,.ag-karte:has(:focus-visible) .ak-griffe{right:30px} .ag-board.auswahl-aktiv .ag-karte .ak-titel{padding-right:30px} .ag-board.auswahl-aktiv .ag-karte.griffe-1 .ak-titel{padding-right:60px} .ag-board.auswahl-aktiv .ag-karte.griffe-2 .ak-titel{padding-right:92px} .ak-projekt{font-size:11.5px;color:var(--tinte-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:34px;margin:-2px 0 3px} .ak-projekt .k{color:var(--tinte-3);margin-left:5px} .ak-fuss{display:flex;align-items:center;flex-wrap:wrap;gap:4px 9px;padding-left:34px;min-height:18px} .ak-fuss .ab-wort{font-size:12px} .ak-fuss .ab-etikett{font-size:9.5px;padding:0 6px} .ak-rechts{margin-left:auto;display:inline-flex;align-items:center} /* #184: Das Kuerzel sitzt fest unten rechts — sonst rutscht es in schmalen Spalten allein in eine vierte Zeile. */ .ag-karte .ak-rechts{position:absolute;right:8px;bottom:6px} .ak-fuss:has(.ak-rechts){padding-right:30px;min-height:22px} /* Listenzeile der Aufgaben (#160 Trello 2, #179) — eine Zeile je Aufgabe, alle gleich hoch */ .t-ag .zeile{min-height:40px} .t-ag .zeile:focus-visible{outline:2px solid var(--koralle-400);outline-offset:-2px} .t-ag .ag-titel{display:flex;align-items:center;gap:8px} .t-ag .ag-titel .t{min-width:0;font-size:14px} .t-ag .zeile.erledigt .ag-titel .t{text-decoration:line-through;color:var(--tinte-3)} .t-ag .ab-etiketten{display:inline-flex} /* O: Zusatzangaben rechtsbündig in einer Flucht; wird es eng, kürzt sich zuerst der Titel */ .t-ag .ag-meta{display:inline-flex;align-items:center;gap:6px;flex:none;margin-left:auto;padding-left:12px} /* D: Fälligkeit in Worten — überfällig zusätzlich als Wort für Vorleser */ .ab-wort{font-size:13px;color:var(--tinte-2);white-space:nowrap;font-variant-numeric:tabular-nums} .ab-wort.bald{color:#8A6510;font-weight:500} .ab-wort.spaet{color:var(--koralle-700);font-weight:500} .ab-wort.fertig{color:var(--tinte-3)} /* E, M: Projekt vorn, Kunde leise; ohne Projekt ein leises Angebot */ .ag-proj2{min-width:0;font-size:13px;color:var(--tinte);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ag-proj2 .k{color:var(--tinte-3);margin-left:6px;font-size:12px} /* #185 V: ein leiser Knopf — Unterstriche gehören zu Webseiten, nicht in eine Arbeitsliste */ .ag-zuord{justify-self:start;color:var(--tinte-3);font-size:12.5px;padding:3px 8px;margin-left:-8px;border-radius:var(--r-s)} .ag-zuord:hover{background:rgba(42,90,105,.08);color:var(--petrol-700)} .zeile.erledigt .ag-proj2,.zeile.erledigt .ag-zuord{opacity:.6} /* C: das Statussymbol als Knopf */ .ag-st-kn{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer} .ag-st-kn:hover,.ag-st-kn[aria-expanded="true"]{background:rgba(42,90,105,.08)} #a-aufgaben .g-kopf .ab-st{width:12px;height:12px} /* J: der Gruppenkopf bleibt unter dem Spaltenkopf stehen */ #a-aufgaben .g-kopf{position:sticky;top:36px;z-index:1} /* P: nach einer Änderung leuchtet die Zeile kurz auf; Q: Abgehaktes verweilt */ @keyframes ag-blitz{from{background:#DCE8EB}to{background:transparent}} .t-ag .zeile.ag-blitz{animation:ag-blitz 1.2s ease-out} .t-ag .zeile.ag-verweilt{opacity:.6;transition:opacity 160ms ease} @media (prefers-reduced-motion:reduce){.t-ag .zeile.ag-blitz{animation:none;background:#EAF0F1}} /* #184 Nummer 9 und 10: die Karte leuchtet am Ziel auf, Abgehaktes verweilt */ @keyframes ag-blitz-karte{from{background:#DCE8EB}to{background:var(--weiss)}} .ag-karte.ag-blitz{animation:ag-blitz-karte 1.2s ease-out} .ag-karte.ag-verweilt{opacity:.6;transition:opacity 160ms ease} @media (prefers-reduced-motion:reduce){.ag-karte.ag-blitz{animation:none;background:#EAF0F1}.ag-karte.ag-verweilt{transition:none}} /* Etiketten-Verwaltung (#160 Trello 3) */ .et-zeile{display:flex;align-items:center;gap:12px;min-height:40px;border-bottom:1px solid var(--linie);padding:4px 0} .et-zeile:hover .ap-x,.et-zeile:focus-within .ap-x{opacity:1} .et-name{flex:1;padding:4px 6px;border-radius:var(--r-s);outline:none} .et-name[contenteditable]:focus{background:var(--weiss);box-shadow:0 0 0 2px var(--koralle-400)} .et-zeile small{color:var(--tinte-3);font-size:11px;min-width:80px} .et-palette{display:inline-flex;gap:0} /* sichtbar 22 px, Klickflaeche 32 px (::after) */ .et-farbe{position:relative;width:22px;height:22px;margin:5px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0} .et-farbe::after{content:"";position:absolute;inset:-5px} .et-farbe:disabled{cursor:default} .et-farbe.an{border-color:var(--tinte);box-shadow:0 0 0 2px var(--weiss) inset} .et-farbe:focus-visible{outline:2px solid var(--koralle-400);outline-offset:1px} /* gleiche Farben wie .ab-etikett, damit die Palette das Etikett nicht anders zeigt */ .et-farbe[data-farbe="petrol"]{background:#DCE8EB;box-shadow:inset 0 0 0 1px var(--petrol-800)} .et-farbe[data-farbe="koralle"]{background:var(--koralle-100);box-shadow:inset 0 0 0 1px var(--koralle-700)} .et-farbe[data-farbe="warn"]{background:#F7EFD9;box-shadow:inset 0 0 0 1px #7A5B12} .et-farbe[data-farbe="stop"]{background:#F6DEDB;box-shadow:inset 0 0 0 1px #8A2F26} .et-farbe[data-farbe="ok"]{background:#DDEEE2;box-shadow:inset 0 0 0 1px #245C36} .et-farbe.an[data-farbe]{border-color:var(--tinte)} .et-neu{display:flex;gap:8px;align-items:center;margin-top:6px} .et-neu input{flex:1;min-height:32px;border:1px solid var(--linie-stark);border-radius:var(--r-s);padding:7px 10px;font-size:13px;font-family:var(--sans)} .et-neu select{min-height:32px;border:1px solid var(--linie-stark);border-radius:var(--r-s);padding:7px 8px;font-size:12.5px;background:var(--weiss);font-family:var(--sans)} .et-name[contenteditable]{min-height:32px;display:flex;align-items:center} /* Filterleiste am Board (#160 Trello 4) */ .ag-filter{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:0 0 12px} .ag-chip{display:inline-flex;align-items:center;gap:6px;min-height:32px;border:1px solid var(--linie-stark);border-radius:99px; background:var(--weiss);color:var(--tinte-2);padding:0 12px;font-size:12.5px;font-family:var(--sans);cursor:pointer} .ag-chip .n{font-family:var(--mono);font-size:10.5px;color:var(--tinte-3)} .ag-chip.an{background:#EDF3F1;border-color:var(--petrol-600);color:var(--petrol-800);font-weight:500} .ag-chip.an .n{color:var(--petrol-700)} .ag-chip.mahnt .n{color:var(--koralle-700)} .ag-chip.leise{border-color:transparent;color:var(--tinte-3)} .ag-chip .x{position:relative;width:24px;height:24px;margin-right:-8px;border:none;background:transparent;color:inherit;cursor:pointer;border-radius:50%;display:inline-flex;align-items:center;justify-content:center} .ag-chip .x::after{content:'';position:absolute;inset:-4px} /* Klickflaeche 32 px bei 24 px Sichtbarkeit */ .ag-chip .x svg{width:12px;height:12px} .ag-chip .x:hover{background:var(--koralle-100);color:var(--koralle-700)} .ag-chip:focus-visible,.ag-chip .x:focus-visible{outline:2px solid var(--koralle-400);outline-offset:1px} /* #184: Suche am Board — dieselbe Lupe wie die Liste, Personenwahl rechts */ .ag-filter .ag-board-suche{margin-left:4px} /* #184 Nummer 19: Personenwahl ueber dem Team-Board */ .ag-personen{display:inline-flex;align-items:center;gap:4px;margin-left:auto;flex-wrap:wrap} .ag-person{width:32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center; font-size:10.5px;font-weight:600;color:#fff;background:var(--petrol-600);border:2px solid transparent; box-shadow:0 0 0 1px var(--linie);cursor:pointer;padding:0;transition:box-shadow .16s} .ag-person:hover{box-shadow:0 0 0 2px var(--petrol-600)} .ag-person.an{border-color:var(--weiss);box-shadow:0 0 0 2px var(--koralle-600)} .ag-person.aus{opacity:.35} .ag-person.aus:hover,.ag-person.aus:focus-visible{opacity:1} .ag-person:focus-visible{outline:2px solid var(--koralle-400);outline-offset:2px} @media (prefers-reduced-motion:reduce){.ag-person{transition:none}} /* ===== #185 Feinschliff der Aufgaben-Liste ===== */ /* R: Ansichten, Werkzeuge, Anlegen und Tabelle bilden eine Karte. Kein overflow — die Menüs ragen über den Rand, und der Spaltenkopf muss haften können. */ .ag-liste-rahmen{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r-l);box-shadow:var(--schatten)} .ag-liste-rahmen .tabelle{border:none;box-shadow:none;border-radius:0 0 var(--r-l) var(--r-l)} .ag-liste-rahmen .kopfzeile{border-radius:0} .ag-liste-rahmen .ansichten{margin:0;padding:0 12px 0 8px;gap:2px;border-bottom:1px solid var(--linie);flex-wrap:wrap} .ag-liste-rahmen .ansichten .chip{border:none;border-radius:0;background:transparent;color:var(--tinte-2); padding:12px 10px 11px;font-size:13.5px;box-shadow:inset 0 -2px 0 transparent;white-space:nowrap; transition:color 160ms ease,box-shadow 160ms ease} .ag-liste-rahmen .ansichten .chip:hover{color:var(--tinte)} .ag-liste-rahmen .ansichten .chip.on{color:var(--tinte);font-weight:600;box-shadow:inset 0 -2px 0 var(--koralle-600)} .ag-liste-rahmen .lw-eigenpaar .chip.on + .lw-ab{color:var(--tinte)} .ag-liste-rahmen .ansichten .chip.on .n{opacity:.75} .ag-liste-rahmen .ansichten .chip.mahnt:not(.on) .n{color:var(--koralle-700);opacity:1} .ag-liste-rahmen .ansichten .chip.neu{color:var(--petrol-700);font-size:12.5px;margin-left:6px} .ag-liste-rahmen .ansichten .chip.neu:hover{text-decoration:none;color:var(--petrol-800)} .ag-liste-rahmen .ansichten .chip[hidden]{display:none} .ag-liste-rahmen .werkzeuge-re{align-items:center;padding:6px 0} .ag-liste-rahmen .werkzeug{white-space:nowrap} .ag-liste-rahmen .lw-filterzeile{margin:0;border:none;border-bottom:1px solid var(--linie);border-radius:0;box-shadow:none} /* T: die Anlagezeile ist die erste Zeile der Tabelle — wer tippt, sieht, wohin es geht */ #a-aufgaben .ab-schnell{border:none;border-bottom:1px solid var(--linie);border-radius:0;padding:0 16px 0 22px; gap:12px;min-height:42px;box-shadow:none;position:relative} #a-aufgaben .ab-schnell svg{width:16px;height:16px;color:var(--tinte-3)} #a-aufgaben .ab-schnell input{font-size:14px} #a-aufgaben .ab-schnell:focus-within{box-shadow:inset 2px 0 0 var(--koralle-600);background:#FBFBF8} #a-aufgaben .ab-schnell:focus-within svg{color:var(--koralle-600)} #a-aufgaben .ab-vorlaeufig{display:block;line-height:40px;padding-left:62px} /* U: die Zeile reagiert als Ganzes (Fläche und Kante), der Zeiger bleibt ein Pfeil */ #a-aufgaben .zeile{cursor:default} /* ===== #193 Aufgaben-Liste, dritte Runde ===== */ /* 1: Status und Stern haben ein Zeichen im Kopf statt eines leeren Feldes */ #a-aufgaben .kopfzeile .ag-kopf-ik{display:inline-flex;align-items:center;justify-content:center;width:100%;color:var(--tinte-3)} #a-aufgaben .kopfzeile .ag-kopf-ik svg{width:14px;height:14px} #a-aufgaben .kopfzeile .ag-kopf-ik .ag-st,#a-aufgaben .kopfzeile .ag-kopf-ik > span{transform:scale(.8)} /* 2: die Anlagezeile steht im Raster der Tabelle — Projekt unter „Projekt", Fällig unter „Fällig" */ #a-aufgaben .ab-schnell.ab-felder{display:grid;grid-template-columns:var(--lw-spalten,34px minmax(240px,1fr) minmax(120px,230px) 118px 34px 34px 34px); column-gap:14px;padding:0 16px;align-items:center} /* #213 Punkt 3: Abstand und Rand wie .kopfzeile/.zeile (gap 14, padding 16) — mit eigenen Werten lagen die Spalten je nach Breite bis zu 60 px neben ihren Köpfen. */ #a-aufgaben .ab-felder > svg{justify-self:center} #a-aufgaben .ab-felder > input{min-width:0;padding-left:0} #a-aufgaben .ab-feld{visibility:hidden;justify-self:start;margin-left:-10px;max-width:calc(100% + 10px);display:inline-flex;align-items:center;gap:6px;height:28px; padding:0 9px;border:1px dashed var(--linie-stark);border-radius:var(--r-m);background:transparent; font-size:12.5px;color:var(--tinte-3);white-space:nowrap;overflow:hidden;cursor:pointer} #a-aufgaben .ab-feld svg{width:14px;height:14px;flex-shrink:0;color:currentColor} #a-aufgaben .ab-feld span{overflow:hidden;text-overflow:ellipsis} #a-aufgaben .ab-schnell:focus-within .ab-feld,#a-aufgaben .ab-feld.gesetzt,#a-aufgaben .ab-feld[aria-expanded="true"]{visibility:visible} #a-aufgaben .ab-feld:hover{border-color:var(--petrol-600);color:var(--petrol-700)} #a-aufgaben .ab-feld.gesetzt{border-style:solid;border-color:#C9D9DD;background:#EEF4F5;color:var(--petrol-800)} #a-aufgaben .ab-feld[aria-expanded="true"],#a-aufgaben .ab-feld:focus-visible{outline:none;border-style:solid;border-color:var(--petrol-600); box-shadow:0 0 0 3px rgba(42,90,105,.14);color:var(--petrol-800)} #a-aufgaben .ab-tipp{display:none;grid-column:2 / -1;font-size:11.5px;color:var(--tinte-3);white-space:nowrap;margin:-6px 0 0 0;padding-bottom:8px} #a-aufgaben .ab-felder > input:focus ~ .ab-tipp{display:block} #a-aufgaben .ab-tipp kbd{font-family:var(--mono);font-size:10.5px;border:1px solid var(--linie-stark);border-radius:4px;padding:0 5px;background:var(--weiss);margin:0 2px;color:var(--tinte-2)} /* 4: Zeit starten — leise, aber erkennbar: #243 hebt die Ruhefarbe von 1,5 : 1 auf --tinte-3, weil ein Bedienelement 3 : 1 braucht (#179 N, WCAG 1.4.11). Nur das gesperrte bleibt blass und zeigt sich erst, wenn die Zeile Maus oder Tastatur hat — sonst umrahmte der Fokus ein leeres Feld. */ #a-aufgaben .ag-zeit{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;color:var(--tinte-3)} #a-aufgaben .ag-zeit svg{width:15px;height:15px} #a-aufgaben .ag-zeit:not([aria-disabled]):hover,#a-aufgaben .ag-zeit:not([aria-disabled]):focus-visible{background:rgba(42,90,105,.08);color:var(--petrol-700)} #a-aufgaben .ag-zeit[aria-disabled]{color:transparent;cursor:default} #a-aufgaben .zeile:hover .ag-zeit[aria-disabled],#a-aufgaben .zeile:focus-within .ag-zeit[aria-disabled]{color:var(--linie)} /* 5: der Weg zu den Erledigten steht leise hinter der Zahl */ #a-aufgaben .summe .ag-erledigte{display:inline-flex;align-items:center;gap:6px;margin-left:14px;padding:3px 8px;border-radius:var(--r-s); font-size:13px;font-weight:400;color:var(--tinte-3)} #a-aufgaben .summe .ag-erledigte svg{width:15px;height:15px} #a-aufgaben .summe .ag-erledigte:hover{background:rgba(42,90,105,.08);color:var(--petrol-700)} /* ===== Zeiterfassung v2 (#192) ===== */ /* Task 6: ein Suchfeld „Woran arbeitest du?" — im Tagesblatt und im Strg-T-Fenster. Vorschläge in drei Gruppen (Deine Aufgaben · Zuletzt gebucht · Weitere Projekte). */ .zv-starter{position:relative;margin:0 0 18px} .zv-such{display:flex;align-items:center;gap:10px;height:50px;padding:0 6px 0 14px;background:var(--weiss); border:1px solid var(--linie-stark);border-radius:var(--r-l);transition:border-color 160ms,box-shadow 160ms} .zv-such:focus-within{border-color:var(--petrol-600);box-shadow:0 0 0 3px rgba(42,90,105,.12)} .zv-such > svg{width:17px;height:17px;flex-shrink:0;color:var(--tinte-3)} .zv-such input{flex:1;min-width:0;height:100%;border:0;background:transparent;font:inherit;font-size:14.5px;color:var(--tinte)} .zv-such input::placeholder{color:var(--tinte-3)} .zv-such input:focus-visible{outline:none} .zv-such kbd{font-family:var(--mono);font-size:10.5px;color:var(--tinte-3);border:1px solid var(--linie);border-radius:4px;padding:1px 5px;white-space:nowrap} .zv-los{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border-radius:var(--r-m); background:var(--petrol-800);color:var(--weiss);font-weight:600;transition:background 160ms} .zv-los:hover{background:var(--petrol-700)} .zv-los svg{width:13px;height:13px;color:var(--koralle-400);fill:currentColor} .zv-liste{display:none;position:absolute;left:0;right:0;top:54px;z-index:30;max-height:420px;overflow:auto;padding:6px; background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r-l);box-shadow:0 8px 28px rgba(8,20,25,.16)} .zv-liste.an{display:block} .zv-gruppe{padding:8px 10px 4px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--tinte-3)} .zv-zeile{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;min-height:44px; padding:7px 10px;border-radius:var(--r-s);text-align:left;transition:background 160ms} .zv-zeile:hover,.zv-zeile.an{background:#EEF4F5} .zv-zeile > svg{width:16px;height:16px;color:var(--petrol-600)} .zv-text{display:flex;flex-direction:column;min-width:0;line-height:1.35} .zv-titel{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .zv-unter{font-size:12px;color:var(--tinte-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .zv-rechts{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--tinte-2);white-space:nowrap} .zv-rechts.bald{color:#8A6510;font-weight:500} .zv-leer{padding:10px;font-size:13px;color:var(--tinte-3)} /* Im Strg-T-Fenster steht die Liste im Fluss — das Fenster schneidet ab, was herausragt. */ .zt-startpop .zv-starter{margin:0} .zt-startpop .zv-such{height:46px;border:0;border-bottom:1px solid var(--linie);border-radius:0;box-shadow:none} .zt-startpop .zv-liste{position:static;max-height:360px;border:0;border-radius:0;box-shadow:none} @media (prefers-reduced-motion: reduce){.zv-such,.zv-los,.zv-zeile{transition:none}} /* Task 7: das Tagesblatt der Person über alle Firmen — Kopf, laufende Uhr, Kette, Fußzeile. */ .zv-tagkopf{display:flex;align-items:center;gap:12px;margin:2px 0 14px} .zv-tagkopf h1{margin:0;font-size:24px;font-weight:600;letter-spacing:-.3px;color:var(--tinte)} .zv-tagkopf .rechts{margin-left:auto;display:flex;align-items:center;gap:6px} .zv-heute-marke{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase; color:var(--koralle-700);border:1px solid var(--koralle-400);border-radius:99px;padding:2px 9px} .zv-pfeil{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0; border:1px solid var(--linie-stark);border-radius:var(--r-s);background:var(--weiss);color:var(--tinte-2); cursor:pointer;transition:border-color 160ms,color 160ms} .zv-pfeil:hover:not(:disabled){border-color:var(--petrol-600);color:var(--petrol-700)} .zv-pfeil:disabled{opacity:.4;cursor:default} .zv-pfeil svg{width:15px;height:15px} .zt-wtag.zv-untersoll .sum{color:#8A6510} /* Die laufende Uhr steht nur heute im eigenen Tag. */ .zv-lauf{display:flex;align-items:center;gap:14px;margin:0 0 18px;padding:10px 10px 10px 16px; border:1px solid var(--koralle-400);border-radius:var(--r-l); background:linear-gradient(0deg,rgba(255,129,99,.06),rgba(255,129,99,.06)),var(--weiss)} .zv-puls{width:9px;height:9px;border-radius:50%;background:var(--koralle-600);flex-shrink:0;animation:zv-puls 1.6s ease-in-out infinite} @keyframes zv-puls{50%{opacity:.35}} .zv-uhr{font-family:var(--mono);font-size:22px;font-weight:500;letter-spacing:-.5px;color:var(--koralle-700);min-width:92px} .zv-w{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35} .zv-w b{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .zv-w span{font-size:12.5px;color:var(--tinte-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .zv-stopp{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border:0;border-radius:var(--r-m); background:var(--petrol-800);color:var(--weiss);font:inherit;font-weight:600;cursor:pointer;transition:background 160ms} .zv-stopp:hover{background:var(--petrol-700)} .zv-stopp i{width:9px;height:9px;border-radius:2px;background:var(--koralle-400);display:block} /* Firmenmarke an Zeilen anderer Firmen — die gewählte Firma trägt keine. */ .zv-fm{display:inline-flex;margin-left:8px;vertical-align:middle} .zv-fm .mkz{font-size:10px} /* Fremder Tag: wessen Blatt, und ob man darin etwas darf. */ .zv-fremd{display:flex;align-items:center;gap:11px;margin:0 0 14px;padding:8px 10px 8px 14px; background:#FDF6F3;border:1px solid var(--koralle-400);border-radius:var(--r-m);font-size:13px;color:var(--tinte-2)} .zv-fremd b{color:var(--tinte)} .zv-fremd .leise{color:var(--tinte-3)} .zv-fremd .zt-kn{margin-left:auto} .zv-av{width:30px;height:30px;border-radius:50%;background:var(--petrol-600);color:var(--weiss);font-size:11px;font-weight:600; display:flex;align-items:center;justify-content:center;flex-shrink:0} /* Die Kette: Zeit · Woran · Tätigkeit · Dauer · verrechenbar · Menü. */ .zv-kette{margin-top:6px} .zv-kk,.zv-kz{display:grid;grid-template-columns:118px minmax(0,1fr) 120px 64px 80px 34px;gap:12px;align-items:center} .zv-kette.ohne-verr .zv-kk,.zv-kette.ohne-verr .zv-kz{grid-template-columns:118px minmax(0,1fr) 120px 64px 34px} .zv-kk{padding:0 10px 6px;border-bottom:1px solid var(--linie);font-family:var(--mono);font-size:10.5px; letter-spacing:.08em;text-transform:uppercase;color:var(--tinte-3)} .zv-kk .r{text-align:right} .zv-kz{padding:8px 10px;border-bottom:1px solid var(--linie);transition:background 160ms} .zv-kz:hover{background:#FBFBF8} .zv-zeit{font-family:var(--mono);font-size:12.5px;color:var(--tinte-2);white-space:nowrap} .zv-woran{min-width:0;display:flex;flex-direction:column;line-height:1.4} .zv-l1,.zv-l2{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .zv-l1 b{font-size:14px;font-weight:600;color:var(--tinte)} .zv-kunde{margin-left:8px;font-size:12.5px;color:var(--tinte-3)} .zv-l2{font-size:12.5px;color:var(--tinte-2)} .zv-l2:empty{display:none} .zv-aufg{display:inline-flex;align-items:center;gap:5px;min-height:24px;padding:0;border:0;background:none; font:inherit;font-size:12.5px;color:var(--petrol-700);cursor:pointer} .zv-aufg:hover{text-decoration:underline} .zv-aufg.still{color:var(--tinte-2);cursor:default} .zv-aufg.still:hover{text-decoration:none} .zv-aufg svg{width:12px;height:12px;flex-shrink:0} .zv-notiz{margin-left:5px;color:var(--tinte-3)} .zv-etikett{display:inline-block;max-width:100%;padding:1px 9px;border-radius:99px;background:#EEF2F1;color:var(--petrol-700); font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .zv-dauer,.zv-verr{font-family:var(--mono);font-size:13px;text-align:right;white-space:nowrap} .zv-dauer{color:var(--tinte);font-weight:500} .zv-verr{color:var(--tinte-2)} .zv-verr.gekuerzt{color:#6A42A8} .zv-verr.null{color:var(--tinte-3)} .zv-mehr{width:32px;height:32px;padding:0;border:0;border-radius:var(--r-s);background:none;color:var(--tinte-3); font:inherit;font-size:15px;letter-spacing:1px;cursor:pointer;transition:background 160ms,color 160ms} .zv-mehr:hover{background:#F0F0EB;color:var(--tinte)} .zv-kz.live{background:#FFF9F7;border:1px solid var(--koralle-400);border-radius:var(--r-m)} .zv-kz.live .zv-zeit,.zv-kz.live .zv-dauer{color:var(--koralle-700)} /* Eine Lücke: gestreift, sagt, wie lang sie ist, und was man mit ihr tun kann. */ .zv-kz.zv-luecke{grid-template-columns:118px minmax(0,1fr);background:repeating-linear-gradient(135deg,#FCFAF3 0 8px,#fff 8px 16px)} .zv-kette.ohne-verr .zv-kz.zv-luecke{grid-template-columns:118px minmax(0,1fr)} .zv-luecke .zv-zeit{color:#8A6510} .zv-lwas{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:12.5px;color:#8A6510} .zv-lk{min-height:32px;padding:0 12px;border:1px solid var(--linie-stark);border-radius:var(--r-s);background:var(--weiss); font:inherit;font-size:12.5px;color:var(--tinte-2);cursor:pointer;transition:border-color 160ms,color 160ms} .zv-lk:first-of-type{margin-left:auto} .zv-lk:hover{border-color:var(--petrol-600);color:var(--petrol-700)} .zv-leerzeile{padding:16px 10px;font-size:13px;color:var(--tinte-3)} /* Der Fuß als eine Zeile. */ .zt-fusszeile{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;margin-top:12px;padding:12px 10px 0; font-size:13px;color:var(--tinte-2)} .zt-fusszeile b{font-family:var(--mono);font-weight:500;color:var(--tinte)} .zt-fusszeile .sep{color:var(--tinte-3)} .zt-fusszeile .warn{color:#8A6510} @media (max-width: 720px){ .zv-kk{display:none} .zv-kz,.zv-kette.ohne-verr .zv-kz{grid-template-columns:minmax(0,1fr) auto 34px;row-gap:4px} .zv-kz .zv-zeit{grid-column:1 / -1} .zv-kz > span:nth-child(3),.zv-kz .zv-verr{display:none} .zv-kz.zv-luecke,.zv-kette.ohne-verr .zv-kz.zv-luecke{grid-template-columns:minmax(0,1fr)} .zv-lauf{flex-wrap:wrap} } @media (prefers-reduced-motion: reduce){ .zv-pfeil,.zv-stopp,.zv-kz,.zv-mehr,.zv-lk{transition:none} .zv-puls{animation:none} } /* Task 8: der Nachtrag — eine Karte über der Kette, mit demselben Suchfeld wie der Start. Steht er offen, tritt er an die Stelle von Suchfeld oder laufender Uhr. */ .zv-nachplatz.offen + .zv-starter,.zv-nachplatz.offen + .zv-lauf{display:none} .zv-nachtrag{margin:0 0 18px;padding:14px 16px;background:var(--weiss);border:1px solid var(--petrol-600); border-radius:var(--r-l);box-shadow:0 0 0 3px rgba(42,90,105,.08)} .zv-nk{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-weight:600;color:var(--tinte)} .zv-x{margin-left:auto;min-height:32px;padding:0 8px;border:0;border-radius:var(--r-s);background:none; font:inherit;font-size:12.5px;font-weight:400;color:var(--tinte-3);cursor:pointer} .zv-x:hover{color:var(--tinte)} .zv-nreihe{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:10px} .zv-nfeld{height:38px;padding:0 10px;border:1px solid var(--linie-stark);border-radius:var(--r-m);background:var(--weiss); font:inherit;font-size:13.5px;color:var(--tinte);transition:border-color 160ms} .zv-nfeld:focus{border-color:var(--petrol-600);outline:none} .zv-nfeld.zeit{width:96px;font-family:var(--mono)} .zv-nfeld.text{flex:1;min-width:0} .zv-ndauer{font-size:12.5px;color:var(--tinte-3);white-space:nowrap} .zv-ndauer b{font-family:var(--mono);font-weight:500;color:var(--tinte)} .zv-nachtrag .zv-starter{flex:1;min-width:280px;margin:0} .zv-nachtrag .zv-such{height:38px;border-radius:var(--r-m)} .zv-nachtrag .zv-liste{top:42px} .zv-gewaehlt{display:flex;align-items:center;gap:8px;flex:1;min-width:280px;min-height:38px;padding:4px 6px 4px 10px; border:1px solid var(--linie-stark);border-radius:var(--r-m);background:#EEF4F5} .zv-gewaehlt > svg{width:16px;height:16px;flex-shrink:0;color:var(--petrol-600)} .zv-gewaehlt .zv-text{flex:1} .zv-taet{max-width:160px;padding:0 2px;border:0;border-bottom:1px dashed var(--linie-stark);background:transparent; font:inherit;font-size:12px;color:var(--tinte-2);cursor:pointer} .zv-taet:focus-visible{outline:2px solid var(--petrol-600);outline-offset:1px} .zv-aendern{min-height:32px;padding:0 8px;border:0;border-radius:var(--r-s);background:none;font:inherit;font-size:12.5px; color:var(--tinte-2);cursor:pointer;transition:background 160ms} .zv-aendern:hover{background:var(--weiss);color:var(--tinte)} .zv-nfuss{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--tinte-2)} .zv-luft{flex:1} .zv-haken{display:inline-flex;align-items:center;gap:6px;min-height:32px;cursor:pointer} .zv-haken input{width:16px;height:16px;margin:0;accent-color:var(--petrol-800)} .zv-buchen{height:34px;padding:0 16px;border:0;border-radius:var(--r-s);background:var(--petrol-800);color:var(--weiss); font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:background 160ms} .zv-buchen:hover:not(:disabled){background:var(--petrol-700)} .zv-buchen:disabled{opacity:.5;cursor:default} /* Die eben gebuchte Zeile leuchtet kurz auf — wie in der Aufgaben-Liste. */ .zv-kz.zv-blitz{animation:ag-blitz 1.2s ease-out} @media (prefers-reduced-motion: reduce){ .zv-nfeld,.zv-aendern,.zv-buchen{transition:none} .zv-kz.zv-blitz{animation:none;background:#EAF0F1} } /* Task 9: die Woche nach Projekt und das Team (Tag | Woche) — ein Raster für beide Wochen. */ .zv-rasterhuelle{overflow-x:auto;background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r-l)} .zv-raster{width:100%;min-width:640px;border-collapse:separate;border-spacing:0} .zv-raster th,.zv-raster td{height:40px;padding:0 10px;border-bottom:1px solid var(--linie);text-align:right; font-family:var(--mono);font-size:12.5px;white-space:nowrap;font-variant-numeric:tabular-nums} .zv-raster th{height:34px;font-size:10.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--tinte-3)} .zv-raster th.h{color:var(--petrol-700);font-weight:700} /* Der Tageskopf als Knopf (#325): sieht aus wie der Kopf, die Schrift bleibt bündig mit der Spalte. */ .zv-raster th button{padding:3px 6px;margin-right:-6px;border-radius:var(--r-s);letter-spacing:inherit; text-transform:inherit;transition:background 160ms} .zv-raster th button:hover{background:#EAF0F1} .zv-raster .pr{width:40%;text-align:left;font-family:var(--sans);font-size:13.5px;white-space:normal} .zv-raster th.pr{font-family:var(--mono);font-size:10.5px} .zv-raster .pr b{font-weight:600;color:var(--tinte)} .zv-raster .pr .zv-etikett{margin-left:8px;vertical-align:middle} .zv-raster tr.zv-unter td{height:32px;color:var(--tinte-2)} .zv-raster tr.zv-unter .pr{padding-left:28px;font-size:13px} .zv-raster td.null{color:var(--linie-stark)} .zv-raster td.we{background:#FBFBF9} .zv-raster td.zelle{cursor:pointer;transition:background 160ms} .zv-raster td.zelle:hover{background:#EAF0F1} .zv-raster td.sm{font-weight:700;color:var(--tinte)} .zv-raster tr.zv-summe td{font-weight:700;background:#F6F7F4;color:var(--tinte)} .zv-raster tr.zv-soll td{color:var(--tinte-3)} .zv-raster td.warnz{color:#8A6510;font-weight:600} .zv-raster tr:last-child td{border-bottom:0} .zv-raster .zv-leer{color:var(--tinte-3)} .zv-person{display:inline-flex;align-items:center;gap:10px} .zv-person small,.zv-tz .nm small{color:var(--tinte-3);font-weight:400;font-size:12.5px} .zv-av.klein{width:24px;height:24px;font-size:9px} .zv-punkt{display:inline-block;width:6px;height:6px;margin-left:4px;border-radius:50%;background:var(--koralle-600);vertical-align:middle} /* Umschalter Tag | Woche */ .zv-segment{display:inline-flex;margin-left:10px;padding:2px;border:1px solid var(--linie-stark);border-radius:var(--r-s);background:var(--weiss)} .zv-segment button{min-height:30px;padding:0 12px;border:0;border-radius:4px;background:none;font:inherit;font-size:12.5px; color:var(--tinte-2);cursor:pointer;transition:background 160ms,color 160ms} .zv-segment button.an{background:var(--petrol-800);color:var(--weiss);cursor:default} .zv-segment button:hover:not(.an){background:#F0F0EB} /* Team-Tag: je Person eine Zeile mit Balken gegen das Soll und dem Stand. */ .zv-tliste{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r-l);overflow:clip} .zv-tz{display:grid;grid-template-columns:34px minmax(0,1fr) 240px 120px 150px;gap:12px;align-items:center;width:100%; min-height:50px;padding:10px 16px;border:0;border-bottom:1px solid var(--linie);background:none;font:inherit; text-align:left;cursor:pointer;transition:background 160ms} .zv-tz:last-child{border-bottom:0} .zv-tz:hover{background:#F2F4F2} .zv-tz .nm{font-weight:500;color:var(--tinte);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .zv-tz .std{font-family:var(--mono);font-size:12.5px;text-align:right;color:var(--tinte-2)} .zv-balken{height:6px;border-radius:3px;background:#EEF0EC;overflow:hidden} .zv-balken i{display:block;height:100%;border-radius:3px;background:var(--petrol-600)} .zv-stand{display:inline-flex;align-items:center;gap:6px;font-size:12.5px} .zv-stand.ok{color:var(--ok)} .zv-stand.fehlt{color:#8A6510;font-weight:500} .zv-stand.abw{color:var(--tinte-3)} .zv-stand.lauft{color:var(--koralle-700)} .zv-stand.lauft::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--koralle-600)} @media (max-width: 720px){ /* Schmal: Name, dann Balken mit den Stunden rechts daneben, dann der Stand. Die Stunden bleiben stehen — am Wochenende (Soll 0, kein Stand) wären sie sonst das Einzige, was fehlt. */ .zv-tz{grid-template-columns:34px minmax(0,1fr) auto;row-gap:6px} .zv-tz .zv-av{grid-row:1 / span 2;align-self:start} .zv-tz .nm{grid-column:2 / span 2;grid-row:1} .zv-tz .zv-balken{grid-column:2;grid-row:2} .zv-tz .std{grid-column:3;grid-row:2} .zv-tz .zv-stand{grid-column:2 / span 2;grid-row:3} .zv-tagkopf{flex-wrap:wrap} } @media (prefers-reduced-motion: reduce){ .zv-raster td.zelle,.zv-segment button,.zv-tz{transition:none} } /* Aufgaben-Panel: Abschnitt „Zeit" (P10). Summe im Kopf fett, wer gerade daran sitzt in Koralle. */ #ap-zeitabschnitt .ap-abschnitt-neben{color:var(--tinte);font-weight:700} .zv-az-lauf{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:13px;color:var(--koralle-700)} .zv-az-lauf .zv-punkt{margin-left:0} .zv-az-pers{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 8px} .zv-az-chip{display:inline-flex;align-items:center;gap:6px;padding:2px 10px 2px 3px;border:1px solid var(--linie); border-radius:99px;font-size:12.5px;color:var(--tinte)} .zv-az-chip b{font-family:var(--mono);font-variant-numeric:tabular-nums} .zv-az-b{display:grid;grid-template-columns:78px 104px 24px minmax(0,1fr) auto;gap:10px;align-items:center; padding:6px 0;border-top:1px solid var(--linie);font-size:13px} .zv-az-tag{color:var(--tinte-2);white-space:nowrap} .zv-az-zeit{font-family:var(--mono);font-size:12px;color:var(--tinte-2);font-variant-numeric:tabular-nums;white-space:nowrap} .zv-az-text{color:var(--tinte-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .zv-az-dauer{font-family:var(--mono);font-weight:700;text-align:right;white-space:nowrap} .zv-az-mehr{align-self:flex-start;min-height:32px;padding:0 10px;margin-top:4px;border:0;border-radius:var(--r-s);background:none; font:inherit;font-size:13px;color:var(--petrol-600);cursor:pointer;transition:background 160ms} .zv-az-mehr:hover{background:#F0F0EB} .zv-az-leer,.zv-az-leise{margin:0;font-size:12.5px;color:var(--tinte-3)} @media (max-width: 720px){ .zv-az-b{grid-template-columns:70px 92px minmax(0,1fr) auto} .zv-az-b .zv-av{display:none} } @media (prefers-reduced-motion: reduce){.zv-az-mehr{transition:none}} /* ===== #211: an das freigegebene Mockup (concept/mockups/zeiterfassung-v2.html) angeglichen ===== Steht am Ende, damit es die Regeln von #192 und die alten zt-Regeln übersteuert. `zt-reiter` und `zt-kn` nutzen auch andere Bereiche — deshalb hängt alles an eigenen zv-Klassen. */ /* Reiter mit Unterstrich statt dunkler Pille. */ .zt-reiter.zv-reiter{gap:4px;border-bottom:1px solid var(--linie);margin-bottom:18px} .zv-reiter > button{padding:8px 12px;border:0;border-bottom:2px solid transparent;border-radius:0;margin-bottom:-1px; font-size:13.5px;font-weight:400;color:var(--tinte-2)} .zv-reiter > button.aktiv{background:transparent;color:var(--tinte);font-weight:600;border-bottom-color:var(--petrol-800)} .zv-reiter > button:hover:not(.aktiv){background:transparent;color:var(--tinte)} .zv-reiter .rechts{gap:8px;padding-bottom:6px} /* Knöpfe wie im Mockup: rechts in den Reitern und im Nachtrag groß, im Kopf klein. */ .zv-reiter .rechts .zt-kn,.zv-nfuss .zt-kn{padding:7px 13px;border:1px solid var(--linie-stark);border-radius:var(--r-m); background:var(--weiss);color:var(--tinte);font-size:13.5px;font-weight:500} .zv-tagkopf .zt-kn,.zv-fremd .zt-kn{padding:4px 10px;border-radius:var(--r-m);color:var(--tinte);font-size:12.5px;font-weight:500} .zv-reiter .rechts .zt-kn:hover,.zv-nfuss .zt-kn:hover,.zv-tagkopf .zt-kn:hover,.zv-fremd .zt-kn:hover{background:#F2F4F2} .zv-buchen{height:auto;padding:7px 13px;border:1px solid var(--petrol-800);border-radius:var(--r-m);font-size:13.5px;font-weight:500} /* Kopf: Datum groß und fett, an der Grundlinie, „Heute" als helle Pille. */ .zv-tagkopf{align-items:baseline;margin:0 0 14px} .zv-tagkopf h1{font-size:26px;font-weight:700;letter-spacing:-.01em} .zv-tagkopf .rechts{gap:4px} .zv-heute-marke{position:relative;top:-3px;padding:1px 9px;border:0;border-radius:99px;background:#EAF0F1; font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--petrol-600)} .zv-pfeil{width:30px;height:30px;border-radius:var(--r-m)} /* Wochenstreifen: weiße Tage, Summe fett, gewählter Tag mit doppeltem Rand. */ .zv-streifen{margin-bottom:16px} .zv-streifen .zt-wtag{padding:6px 10px;background:var(--weiss)} .zv-streifen .zt-wtag .wt{font-size:11.5px} .zv-streifen .zt-wtag .sum{margin-top:0;font-size:13px;font-weight:700;white-space:nowrap} .zv-streifen .zt-wtag .sum span{font-size:11px;font-weight:500} .zv-streifen .zt-wtag.heute{border-color:var(--petrol-800);box-shadow:inset 0 0 0 1px var(--petrol-800)} .zv-streifen .zt-wtag.heute .wt{color:var(--tinte-3);font-weight:400} .zv-streifen .zt-wtag.we{opacity:1;background:transparent} .zv-streifen .zt-wtag.we .sum{color:var(--linie-stark)} .zv-streifen .zt-wtag .lp{top:6px;right:6px;width:7px;height:7px} /* Laufende Uhr: helles Koralle, große fette Ziffern, der Punkt sendet eine Welle. */ .zv-lauf{gap:16px;border-color:#F4C9BB;background:#FFF6F3} .zv-uhr{min-width:112px;font-size:24px;font-weight:700;letter-spacing:0} .zv-stopp{font-size:14px} .zv-puls{box-shadow:0 0 0 0 rgba(198,78,44,.5);animation:zv-welle 1.8s infinite} @keyframes zv-welle{70%{box-shadow:0 0 0 8px rgba(198,78,44,0)}100%{box-shadow:0 0 0 0 rgba(198,78,44,0)}} /* Fremder Tag: ruhige weiße Leiste. */ .zv-fremd{gap:12px;padding:10px 14px;background:var(--weiss);border-color:var(--linie);border-radius:var(--r-l);font-size:13.5px;color:var(--tinte)} .zv-av{background:var(--petrol-700);font-weight:700} /* Die Kette als Karte. */ .zv-kette{margin-top:0;background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r-l);overflow:clip} .zv-kk{height:34px;padding:0 12px 0 16px;letter-spacing:.1em} .zv-kz{min-height:56px;padding:8px 12px 8px 16px} .zv-kette > .zv-kz:last-child{border-bottom:0} .zv-kz:hover{background:#F2F4F2} .zv-l2{display:flex;align-items:center;gap:6px;font-size:13px} .zv-l2:empty{display:none} .zv-l2 .zv-aufg{flex:0 1 auto;min-width:0;overflow:hidden;white-space:nowrap} .zv-l2 .zv-notiz{min-width:0;margin-left:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .zv-aufg{font-size:13px;font-weight:500} .zv-aufg svg{width:14px;height:14px} .zv-aufg:hover{text-underline-offset:3px} .zv-notiz.allein{margin-left:0;color:var(--tinte-2)} .zv-etikett{padding:1px 7px;border-radius:4px;background:#F1F2EE;color:var(--tinte-2);font-size:11px;line-height:1.5} .zv-dauer{font-weight:700} .zv-verr.null{color:var(--linie-stark)} /* ··· erst beim Überfahren — mit Tastatur und auf Touch-Geräten bleibt es da. */ .zv-mehr{height:28px;opacity:0} .zv-kz:hover .zv-mehr,.zv-mehr:focus-visible,.zv-mehr[aria-expanded="true"]{opacity:1} .zv-mehr:hover{background:var(--linie)} @media (hover: none){.zv-mehr{opacity:1}} .zv-kz.live{border:0;border-bottom:1px solid var(--linie);border-radius:0} /* Lücke: flacher, Text und zwei Textlinks. */ .zv-kz.zv-luecke{min-height:40px} .zv-lwas{gap:12px;font-size:13px;color:var(--tinte-2)} .zv-lk{min-height:28px;padding:0;border:0;background:none;color:var(--petrol-700);font-size:13px;font-weight:600} .zv-lk:first-of-type{margin-left:0} .zv-lk:hover{color:var(--petrol-700);text-decoration:underline;text-underline-offset:3px} .zv-leerzeile{padding:22px 16px} /* Fuß: Zahlen fett, Trenner leise. */ .zt-fusszeile{gap:6px;margin-top:0;padding:12px 4px} .zt-fusszeile b{font-weight:700} .zt-fusszeile .sep{color:var(--linie-stark)} .zt-fusszeile .warn{font-weight:500} /* Firmenmarke: Größe und Form wie im Mockup, die Farben bleiben die der App. */ .zv-fm .mkz{padding:1px 5px;border-radius:4px;font-size:9.5px;font-weight:700;letter-spacing:.06em;line-height:15px} /* Nachtrag: Zeitfelder schmal und ohne Uhr-Symbol. */ .zv-nfeld.zeit{width:86px} .zv-nfeld.zeit::-webkit-calendar-picker-indicator{display:none} /* Team: Stunden in voller Tinte, Umschalter ohne Innenrand. */ .zv-tz .std{color:var(--tinte)} .zv-segment{padding:0;border-radius:var(--r-m);overflow:hidden} .zv-segment button{min-height:28px;padding:4px 12px;border-radius:0} /* Panel: der Hinweis unter den Buchungen. */ .zv-az-hinweis{margin:8px 0 0;font-size:12.5px;color:var(--tinte-3)} /* Schmal: nichts schiebt die Seite seitlich — die Reiter brechen um, der Streifen scrollt in sich. */ .zv-streifen{grid-template-columns:repeat(7,minmax(0,1fr))} .zv-reiter{flex-wrap:wrap} @media (max-width: 720px){ .zv-kz{padding:8px 12px} .zv-streifen{grid-template-columns:repeat(7,minmax(64px,1fr));gap:4px;overflow-x:auto;padding-bottom:2px} .zv-streifen .zt-wtag{padding:5px 7px} .zv-reiter > button{padding:8px 9px} } @media (prefers-reduced-motion: reduce){.zv-puls{animation:none}} /* ===== #186 Team-Liste — Kopf je Person, Kürzel, Plus, Spalte „Wer" (Mockup aufgaben-team-liste.html) ===== */ #a-aufgaben .g-kopf.person{min-height:40px;padding-top:0;padding-bottom:0;gap:8px;white-space:nowrap} #a-aufgaben .g-kopf.person b{font-family:var(--sans);font-size:13.5px;font-weight:600;letter-spacing:0;text-transform:none} #a-aufgaben .g-kopf.person em{font-style:normal;font-size:12.5px;color:var(--tinte-3);margin-left:-2px} #a-aufgaben .g-kopf .spaet{font-family:var(--mono);font-size:11px;font-weight:500;color:var(--koralle-700)} /* Das Plus erscheint erst beim Überfahren — angelegt wird für genau diese Person */ #a-aufgaben .g-kopf.person .plus{margin-left:auto;width:26px;height:26px;border:0;border-radius:var(--r-s);background:none; font-family:var(--sans);font-size:17px;color:var(--tinte-3);opacity:0} #a-aufgaben .g-kopf.person:hover .plus,#a-aufgaben .g-kopf.person:focus-within .plus,#a-aufgaben .g-kopf.person .plus:focus-visible{opacity:1} #a-aufgaben .g-kopf.person .plus:hover{background:#E1E6E3;color:var(--petrol-700)} .ag-bav{width:24px;height:24px;border-radius:50%;background:var(--petrol-600);color:#fff;display:inline-flex;align-items:center; justify-content:center;font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:0;text-transform:none;flex:none} .ag-bav.du{background:var(--koralle-700)} .ag-bav.leer{background:#B9BDB4} .ag-bav.klein{width:22px;height:22px;font-size:9px} .ag-team .ag-wer{display:inline-flex;justify-content:center} /* Dringend: die Flagge direkt hinter dem Titel */ .t-ag .ag-flagge{color:var(--koralle-600);display:inline-flex;flex:none} .t-ag .ag-flagge svg{width:14px;height:14px;fill:currentColor} /* ===== Projektliste v2 (#167) ===== */ /* Werte wörtlich aus concept/mockups/projektliste-v2.html, gekapselt unter .pl2. Die Mockup-Klassen heißen hier wie im Listenwerkzeug: .z → .zeile, .grp → .g-kopf, .ans → .chip, .zk → .kopfzeile, .karte → .pl-karte, .reiter → .pl-reiter, .such-feld → .lw-suchfeld. */ .pl2{font-size:14px;line-height:1.5} .pl2 .kopf{margin-bottom:16px} .pl2 .kopf h1{font-size:28px;font-weight:700;letter-spacing:-.01em} /* Reiter oben: die vier Arten */ .pl2 .pl-reiter{display:flex;align-items:center;gap:4px;margin-bottom:14px;flex-wrap:wrap} .pl2 .pl-reiter > button{padding:6px 14px;font-size:13.5px;color:var(--tinte-2);border-radius:var(--r-m);display:inline-flex;align-items:center;gap:7px} .pl2 .pl-reiter > button .n{font-family:var(--mono);font-size:11px;color:var(--tinte-3)} .pl2 .pl-reiter > button:hover{background:#EEF0EC;color:var(--tinte)} .pl2 .pl-reiter > button.an{background:var(--petrol-800);color:#fff;font-weight:500} .pl2 .pl-reiter > button.an .n{color:#9FB7BE} /* Karte mit Werkleiste: Chips links, Suche rechts */ .pl2 .pl-karte{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r-l);box-shadow:0 1px 2px rgba(25,28,24,.04)} .pl2 #lw-leiste .ansichten{display:flex;flex-wrap:wrap;align-items:center;gap:2px;margin:0;padding:0 8px 0 10px;min-height:46px;border-bottom:1px solid var(--linie);position:relative} .pl2 #lw-leiste .chip{position:relative;height:46px;padding:0 10px;display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:var(--tinte-2);white-space:nowrap; border:0;border-radius:0;background:transparent;box-shadow:none} .pl2 #lw-leiste .chip .n{font-family:var(--mono);font-size:10.5px;color:var(--tinte-3);opacity:1} .pl2 #lw-leiste .chip:hover{color:var(--tinte);background:transparent} .pl2 #lw-leiste .chip.on{color:var(--tinte);font-weight:600;background:transparent} .pl2 #lw-leiste .chip.on:after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;border-radius:2px;background:var(--koralle-600)} .pl2 #lw-leiste .chip.mahnt .n{color:var(--koralle-700)} .pl2 #lw-leiste .werkzeuge-re{margin-left:auto;display:flex;gap:2px;align-items:center} .pl2 .lw-suchfeld{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--linie-stark);border-radius:var(--r-m);padding:3px 8px;background:var(--weiss)} .pl2 .lw-suchfeld input{border:0;background:none;width:190px;font-size:13px;line-height:1.5;padding:2px 0;outline:none;height:auto;box-shadow:none} .pl2 .lw-suchfeld:focus-within{outline:2px solid var(--koralle-400);outline-offset:1px} .pl2 .lw-suchfeld svg{width:14px;height:14px;color:var(--tinte-3);flex:none} /* Tabelle: Raster je Reiter, auf schmalen Schirmen seitlich scrollbar */ .pl2 .tabelle{overflow-x:auto;border:0;border-radius:0;box-shadow:none;background:transparent} .pl2 .tabelle > *{min-width:860px} .pl2 .t-projekte{--lw-spalten:minmax(240px,1.6fr) 44px 132px 150px 150px 78px 64px} .pl2 .t-retainer{--lw-spalten:minmax(240px,1.6fr) 44px 200px minmax(170px,1fr) 78px 64px} .pl2 .t-intern{--lw-spalten:minmax(230px,1.6fr) 44px 150px 78px 64px} .pl2 .t-laufend{--lw-spalten:minmax(240px,1.6fr) 44px 190px 130px 78px 64px} .pl2 .tabelle .kopfzeile,.pl2 .tabelle .zeile{display:grid;grid-template-columns:var(--lw-spalten);align-items:center;column-gap:12px;padding:0 12px 0 16px} .pl2 .tabelle .kopfzeile{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--tinte-3);height:36px;min-height:0; border-bottom:1px solid var(--linie);border-radius:0;position:sticky;top:0;z-index:3;background:#FBFBF8;white-space:nowrap;font-weight:400} .pl2 .kopfzeile [role="columnheader"]{font-weight:400;display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 4px;margin-left:-4px;border-radius:var(--r-s);white-space:nowrap;justify-self:start} .pl2 .kopfzeile [role="columnheader"]:hover{color:var(--tinte);background:#F1F2EE} .pl2 .kopfzeile [role="columnheader"].sortiert{color:var(--tinte);font-weight:700} .pl2 .kopfzeile .sortpfeil{font-size:9px} /* Gruppenkopf nach Bereich */ .pl2 .tabelle .g-kopf{display:flex;align-items:center;gap:8px;width:100%;white-space:nowrap;text-align:left;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:var(--tinte);padding:0 14px;height:40px;background:#F1F2EE;border:0;border-bottom:1px solid var(--linie);border-radius:0;position:sticky;top:36px;z-index:2} .pl2 .tabelle .g-kopf:hover{background:#ECEEE9} .pl2 .tabelle .g-kopf b{font-weight:700} .pl2 .tabelle .g-kopf .pf{font-size:10px;color:var(--tinte-3);transition:transform 120ms ease;width:10px} .pl2 .tabelle .g-kopf.zu .pf{transform:rotate(-90deg)} .pl2 .tabelle .g-kopf .n{font-weight:500;color:var(--tinte-3);letter-spacing:.02em;text-transform:none} .pl2 .tabelle .g-kopf .rot{font-weight:500;color:var(--koralle-700);letter-spacing:.02em;text-transform:none} .pl2 .tabelle .g-kopf .plus{margin-left:auto;width:26px;height:26px;border-radius:var(--r-s);display:inline-flex;align-items:center;justify-content:center;color:var(--tinte-3); font-family:var(--sans);font-size:17px;font-weight:400;opacity:0;background:transparent;border:0} .pl2 .tabelle .g-kopf:hover .plus,.pl2 .tabelle .g-kopf .plus:focus-visible{opacity:1} .pl2 .tabelle .g-kopf .plus:hover{background:#E1E6E3;color:var(--petrol-700)} /* Zeile */ .pl2 .tabelle .zeile{min-height:48px;border-bottom:1px solid var(--linie);position:relative;cursor:pointer} .pl2 .tabelle .zeile:hover{background:#F4F6F5;box-shadow:inset 2px 0 0 var(--petrol-600)} .pl2 .tabelle .zeile.blass{opacity:.62} .pl2 .tabelle .zeile:focus-visible{outline:2px solid var(--koralle-400);outline-offset:-2px;background:#F4F6F5} .pl2 .name{min-width:0;display:flex;flex-direction:column;line-height:1.3} .pl2 .name .t{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pl2 .name .k{font-size:12.5px;color:var(--tinte-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pl2 .name .k .st-wort{font-weight:500;color:var(--tinte-2)} .pl2 .name .k .st-wort.angeb{color:var(--petrol-600)} .pl2 .bav{width:26px;height:26px;border-radius:50%;background:var(--petrol-600);color:#fff;display:inline-flex;align-items:center;justify-content:center; font-family:var(--mono);font-size:9.5px;font-weight:700;flex:none} .pl2 .bav.du{background:var(--koralle-700)} .pl2 .ohne-wer{width:26px;height:26px;border-radius:50%;border:1.5px dashed #B9BDB4;color:var(--tinte-3);display:inline-flex;align-items:center;justify-content:center;font-size:12px} .pl2 .leer{color:#B5B9B0} /* Fortschritt gerechnet aus Aufgaben */ .pl2 .fort{display:flex;align-items:center;gap:8px;font-size:12.5px;white-space:nowrap} .pl2 .fort .bal{width:52px;height:5px;border-radius:3px;background:#E8EAE5;overflow:hidden} .pl2 .fort .bal i{display:block;height:100%;background:var(--petrol-600);border-radius:3px} .pl2 .fort.voll .bal i{background:var(--ok)} .pl2 .fort b{font-family:var(--mono);font-weight:500;font-size:12px} .pl2 .fort.voll b{color:var(--ok)} .pl2 .fort.voll b:after{content:" ✓"} /* Zieltermin */ .pl2 .ziel{font-size:13px;white-space:nowrap} .pl2 .ziel.spaet{color:var(--koralle-700);font-weight:500} .pl2 .ziel em{font-style:normal;font-size:11.5px;margin-left:4px} .pl2 .ziel.bald{color:#8A6510;font-weight:500} /* Stunden und Kontingent */ .pl2 .std{display:flex;flex-direction:column;gap:3px;white-space:nowrap;position:relative} .pl2 .std .w{font-family:var(--mono);font-size:12.5px} .pl2 .std .w em{font-style:normal;color:var(--tinte-3)} .pl2 .std .bal{height:5px;border-radius:3px;background:#E8EAE5;overflow:hidden;width:100%;max-width:130px} .pl2 .std .bal i{display:block;height:100%;background:var(--petrol-600);border-radius:3px} .pl2 .std.warn .bal i{background:var(--warn)} .pl2 .std.ueber .bal i{background:var(--koralle-600)} .pl2 .std.ueber .w{color:var(--koralle-700);font-weight:700} .pl2 .std .mehr{font-family:var(--sans);font-size:11px;font-weight:600;color:var(--koralle-700);margin-left:6px} /* Reporting direkt änderbar */ .pl2 .rep{appearance:none;-webkit-appearance:none;border:1px solid transparent;background:transparent;border-radius:var(--r-s);padding:3px 22px 3px 7px;font-size:13px;height:auto; max-width:100%;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,#9a9e96 50%),linear-gradient(135deg,#9a9e96 50%,transparent 50%); background-position:calc(100% - 11px) 52%,calc(100% - 7px) 52%;background-size:4px 4px;background-repeat:no-repeat;justify-self:start;box-shadow:none} .pl2 .rep:hover{border-color:var(--linie-stark);background-color:var(--weiss)} .pl2 .rep.nichts{color:var(--tinte-3)} /* Laufend: offene Stunden, ab fünf mit Plakette */ .pl2 .offen-h{font-family:var(--mono);font-size:13px} .pl2 .offen-h.reif{font-weight:700;color:var(--petrol-800)} .pl2 .offen-h.reif:after{content:"abrechenbar";font-family:var(--sans);font-size:10.5px;font-weight:500;color:var(--petrol-600);background:#E2ECEF;border-radius:99px;padding:1px 7px;margin-left:8px} /* Aktivität und Aktionen */ .pl2 .pl-akt{font-size:12.5px;color:var(--tinte-3);white-space:nowrap} .pl2 .pl-akt.alt{color:#8A6510;font-weight:500} .pl2 .pl-akt.alt em{font-style:normal;font-size:11.5px;margin-left:4px} .pl2 .akt-h{display:flex;gap:2px;justify-content:flex-end;opacity:0} .pl2 .zeile:hover .akt-h,.pl2 .zeile:focus-within .akt-h{opacity:1} .pl2 .akt-h button{width:28px;height:28px;border-radius:var(--r-s);display:inline-flex;align-items:center;justify-content:center;color:var(--tinte-3)} .pl2 .akt-h button:hover{background:rgba(42,90,105,.1);color:var(--petrol-700)} .pl2 .akt-h svg{width:15px;height:15px} /* Fuß und Leerzustand */ .pl2 .pl-karte > .fuss{display:flex;align-items:center;gap:14px;padding:11px 16px;font-size:13px;color:var(--tinte-2);flex-wrap:wrap;border:0;background:transparent} .pl2 .fuss .info{margin-left:auto;color:var(--tinte-3);font-size:12.5px} .pl2 .lw-leerzustand{padding:34px 16px;text-align:center;color:var(--tinte-3);font-size:13.5px} .pl2 .lw-leerzustand b{display:block;color:var(--tinte);font-size:15px;font-weight:700;margin-bottom:2px} .pl2 .lw-leer-knopf{margin-top:12px;display:inline-flex;gap:8px} .pl2 .lw-leer-knopf button{padding:6px 12px;border:1px solid var(--linie);border-radius:var(--r-m);font-size:13px;color:var(--petrol-700);background:var(--weiss)} .pl2 .lw-leer-knopf button:hover{background:#F4F6F5} .pl2 .std .w,.pl2 .offen-h,.pl2 .pl-akt,.pl2 .fort b{font-variant-numeric:tabular-nums} /* Bestandsregeln des Listenwerkzeugs, die sonst durchschlügen (maschinell gefunden): .kopfzeile span setzt 9,5 px, .g-kopf b eine eigene Schrift, .zeile .akt-h button einen Rahmen, .zeile:last-of-type nimmt die letzte Linie — das Mockup hat sie über dem Fuß. */ .pl2 .tabelle .kopfzeile span{font-size:inherit;letter-spacing:inherit;font-family:inherit;color:inherit} .pl2 .tabelle .g-kopf b{font-family:inherit;font-size:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit} .pl2 .zeile .akt-h button{border:0;background:transparent} .pl2 .tabelle .zeile:last-of-type{border-bottom:1px solid var(--linie)} @media (prefers-reduced-motion:reduce){.pl2 *{transition:none!important;animation:none!important}} /* ===== Projektseite Werkbank (#261) ===== */ /* Nach concept/mockups/projektseite-v3.html (ADR-0065). Alles hängt an der Wurzel .pw oder trägt den Vorsatz pw- — dieselben Kurznamen (art, angaben, stand …) gibt es in anderen Bereichen. Das Auswahlfenster hängt am body und heisst deshalb .pw-wahl. Rollbereich ist #haupt; die Leiste klebt mit top:-22px, damit ihr Polster oben herausrollt und nur die 46px hohe Zeile stehen bleibt. */ .pw,.pw-wahl{--hover:#F2F4F2;--wahl-hover:#EAF0F1;--warn-100:#F7EEDB;--stop-100:#F9E5E1;--ok-100:#E3F0E8; --rein:180ms cubic-bezier(.2,.8,.2,1)} .pw button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0;touch-action:manipulation} .pw svg{flex:none} .pw .av{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center; font-size:10px;font-weight:700;color:#fff;background:var(--petrol-600);flex:none;background-size:cover} .pw-werk{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:start} .pw-arbeit{min-width:0} @media (max-width:1400px){.pw-werk{grid-template-columns:minmax(0,1fr)}} /* A · Titel */ .pw-oben{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--tinte-3);margin-bottom:8px} .pw-oben a{color:var(--petrol-700);text-decoration:none} .pw-blaettern{margin-left:auto;display:flex;gap:2px} .pw-titel{display:flex;align-items:center;gap:12px;flex-wrap:wrap;position:relative} .pw-titel h1{margin:0;font-size:26px;letter-spacing:-.01em;line-height:1.2} .pw-titel h1 button{border-radius:var(--r-s);padding:0 4px;margin-left:-4px;text-align:left;font-weight:inherit} .pw-titel h1 button:hover{background:#E9ECE8} .pw-titel h1 input{font-size:26px;font-weight:700;letter-spacing:-.01em;border:1px solid var(--petrol-600);border-radius:var(--r-s); padding:0 6px;box-shadow:0 0 0 3px rgba(42,90,105,.15);width:min(520px,100%);font-family:inherit} .pw-art{display:inline-flex;align-items:center;gap:4px;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.08em; border:1px solid var(--linie-stark);border-radius:999px;padding:2px 9px;color:var(--tinte-2);background:#fff;text-transform:uppercase} .pw button.pw-art{padding:2px 6px 2px 9px;border:1px solid var(--linie-stark);background:#fff} .pw-art svg{width:10px;height:10px} .pw button.pw-art:hover,.pw button.pw-art.pw-offen{border-color:var(--petrol-600);color:var(--tinte)} .pw-kunde{font-size:14px;color:var(--tinte-2)} .pw-kunde a{color:var(--tinte-2);text-decoration:underline;text-decoration-color:var(--linie-stark);text-underline-offset:3px} .pw-kunde a:hover{color:var(--petrol-700)} /* #266: Kunde wechseln im Titel der Projektseite */ .pw-kunde{display:inline-flex;align-items:center;gap:2px} .pw button.pw-kunde-wechsel{display:inline-flex;align-items:center;padding:3px;border:0;border-radius:4px;background:none;color:var(--tinte-3);cursor:pointer} .pw-kunde-wechsel svg{width:13px;height:13px} .pw button.pw-kunde-wechsel:hover,.pw button.pw-kunde-wechsel.pw-offen{color:var(--petrol-700)} .pw-knoepfe{margin-left:auto;display:flex;gap:8px} .pw .pw-akt{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--linie-stark);border-radius:var(--r-m);padding:0 14px; height:36px;font-size:13.5px;background:#fff;white-space:nowrap} .pw .pw-akt:hover{border-color:var(--petrol-600)} .pw .pw-akt.signal{background:var(--koralle-400);border-color:var(--koralle-400);color:#fff;font-weight:500} .pw .pw-akt.signal:hover{background:#F2714F} .pw-akt svg{width:15px;height:15px} .pw-notiz{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:13.5px;color:var(--tinte-2);min-height:28px} .pw-notiz svg{width:14px;height:14px;color:var(--koralle-700)} .pw-notiz button{text-align:left;border-radius:var(--r-s);padding:2px 6px;margin-left:-6px} .pw-notiz button:hover{background:#E9ECE8} .pw .pw-leise{color:var(--tinte-3)} .pw-notiz input{flex:1;max-width:640px;height:30px;border:1px solid var(--petrol-600);border-radius:var(--r-s);padding:0 8px; box-shadow:0 0 0 3px rgba(42,90,105,.15);font:inherit;color:var(--tinte)} .pw :focus-visible,.pw-wahl :focus-visible{outline:2px solid var(--koralle-400);outline-offset:1px;border-radius:var(--r-s)} .pw input:focus-visible{outline:none} /* B · Angaben */ .pw-angaben{margin-top:14px;display:grid;grid-template-columns:repeat(auto-fill,minmax(172px,1fr)); border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);position:relative} .pw-ang{display:flex;flex-direction:column;justify-content:center;gap:1px;min-height:56px;padding:6px 10px;border-radius:var(--r-m); text-align:left;position:relative;min-width:0} .pw button.pw-ang{padding:6px 10px;align-items:stretch} .pw button.pw-ang:hover,.pw .pw-ang.pw-offen{background:var(--hover)} .pw .pw-ang.pw-offen{box-shadow:inset 0 -2px 0 var(--petrol-600)} .pw-ang .pw-et{font-size:11.5px;color:var(--tinte-3);display:flex;align-items:center;gap:5px} .pw-ang .pw-et svg{width:11px;height:11px} .pw-ang .pw-w{font-size:14px;display:flex;align-items:center;gap:7px;min-width:0;white-space:nowrap;overflow:hidden} .pw-ang .pw-neben{font-size:12px;color:var(--tinte-3)} .pw-ang .pw-txt{overflow:hidden;text-overflow:ellipsis} .pw-ang .pw-fehlt{color:var(--koralle-700);font-weight:500;display:inline-flex;align-items:center;gap:5px} .pw-ang .pw-einl{color:var(--petrol-700);display:inline-flex;align-items:center;gap:5px;opacity:.85} .pw-ang .pw-fehlt svg,.pw-ang .pw-einl svg{width:11px;height:11px} .pw-ang .pw-nicht{color:var(--tinte-3)} .pw-ang.geld .pw-et{color:var(--petrol-600)} .pw-ang .pw-spaet{color:var(--koralle-700);font-weight:500} .pw-gespeichert{display:inline-flex;align-items:center;color:var(--ok);animation:pw-blitz 1.6s ease forwards} .pw-gespeichert svg{width:13px;height:13px} @keyframes pw-blitz{0%{opacity:0}15%{opacity:1}75%{opacity:1}100%{opacity:0}} .pw-stz{display:inline-flex;align-items:center;gap:6px} .pw-stz i{width:8px;height:8px;border-radius:50%;background:currentColor} .pw-stz.laeuft{color:var(--ok)}.pw-stz.angeb{color:var(--warn)}.pw-stz.still{color:var(--tinte-3)} .pw-stz span{color:var(--tinte)} .pw-recht{font-size:12px;color:var(--tinte-3);display:flex;gap:6px;align-items:center;padding:6px 10px 0} .pw-recht svg{width:12px;height:12px} /* D · Stand */ .pw-stand{margin-top:14px;display:grid;grid-template-columns:minmax(240px,1.3fr) minmax(220px,1.2fr) auto; border:1px solid var(--linie);border-radius:var(--r-l);background:#fff;position:relative} .pw-stand>div{padding:12px 16px;min-width:0} .pw-stand>div+div{border-left:1px solid var(--linie)} @media (max-width:900px){.pw-stand{grid-template-columns:1fr}.pw-stand>div+div{border-left:0;border-top:1px solid var(--linie)}} .pw-s-et{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--tinte-3);margin-bottom:4px;display:flex;gap:8px;align-items:center} .pw .pw-s-et button{font-family:var(--sans);letter-spacing:0;font-size:12px;color:var(--petrol-700);text-decoration:underline; text-underline-offset:3px;margin-left:auto} .pw-z1{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap} .pw-gross{font-size:22px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.01em;line-height:1.2} .pw-einheit{font-size:13px;color:var(--tinte-2)} .pw-z1 .pw-rechts{margin-left:auto;font-size:12.5px;color:var(--tinte-3);font-variant-numeric:tabular-nums} .pw-z1 .ueber{color:var(--koralle-700);font-weight:600} .pw-balken{display:block;height:6px;border-radius:3px;background:var(--linie);overflow:hidden;margin-top:8px} .pw-balken i{display:block;height:100%;background:var(--petrol-600)} .pw-balken i.warn{background:var(--warn)}.pw-balken i.ueber{background:var(--koralle-400)} .pw-plakette{font-size:11.5px;font-weight:600;color:var(--ok);background:var(--ok-100);border-radius:999px;padding:1px 8px} .pw-marge{margin-top:10px;font-size:12.5px;color:var(--tinte-2);background:#F4F5F2;border-radius:var(--r-m);overflow:hidden} .pw .pw-s-aufg{display:block;text-align:left;border-radius:var(--r-m);margin:-4px -6px;padding:4px 6px;width:calc(100% + 12px)} .pw .pw-s-aufg:hover{background:var(--hover)} .pw-s-aufg .pw-z{font-size:14px} .pw-s-aufg .pw-z b{font-weight:600} .pw-s-aufg .pw-spaet{color:var(--koralle-700);font-weight:500} .pw-naechst{display:flex;gap:6px;align-items:center;font-size:13px;color:var(--tinte-2);margin-top:3px;white-space:nowrap;overflow:hidden} .pw-naechst span{overflow:hidden;text-overflow:ellipsis} .pw-naechst svg{width:12px;height:12px;color:var(--tinte-3)} .pw-team{display:flex;gap:4px;align-items:center;flex-wrap:wrap} .pw .pw-team button{position:relative;border-radius:50%;padding:2px} .pw-team button .av{width:30px;height:30px;font-size:11px} .pw-team button:hover .av{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--petrol-600)} .pw-team button.an .av{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--koralle-400)} .pw-team button.verant::after{content:"";position:absolute;left:50%;bottom:-3px;transform:translateX(-50%);width:14px;height:2px; border-radius:1px;background:var(--petrol-800)} .pw-punkt-ue{position:absolute;top:0;right:0;width:9px;height:9px;border-radius:50%;background:var(--koralle-600);box-shadow:0 0 0 2px #fff} /* E · Klebende Leiste */ .pw-klebe{position:sticky;top:-22px;z-index:20;margin:0 -28px;padding:22px 28px 0;background:var(--papier)} .pw-kl-innen{display:flex;align-items:center;gap:4px;border-bottom:1px solid var(--linie-stark);height:46px;position:relative} .pw-kl-name{font-weight:600;font-size:14px;max-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;opacity:0; transition:max-width var(--rein),opacity var(--rein),margin var(--rein)} .pw-klebe.fest .pw-kl-name{max-width:280px;opacity:1;margin-right:12px} .pw-kl-trenn{width:1px;height:20px;background:var(--linie-stark);margin-right:8px;opacity:0;transition:opacity var(--rein)} .pw-klebe.fest .pw-kl-trenn{opacity:1} .pw-kl-sprung{display:flex;align-items:center;min-width:0;overflow-x:auto;scrollbar-width:none} .pw .pw-sprung{display:inline-flex;align-items:center;gap:6px;height:46px;padding:0 10px;font-size:13.5px;color:var(--tinte-2); border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap} .pw .pw-sprung:hover{color:var(--tinte)} .pw .pw-sprung.an{color:var(--tinte);font-weight:600;border-bottom-color:var(--petrol-800)} .pw-sprung .pw-n{font-family:var(--mono);font-size:11px;color:var(--tinte-3);font-weight:500} .pw .pw-n.spaet{color:var(--koralle-700)} .pw .pw-kl-zeit{margin-left:auto;opacity:0;pointer-events:none;transition:opacity var(--rein);height:32px} .pw-klebe.fest .pw-kl-zeit{opacity:1;pointer-events:auto} /* Blöcke */ .pw-block{margin-top:22px;background:#fff;border:1px solid var(--linie);border-radius:var(--r-l);padding:14px 18px 10px; position:relative;scroll-margin-top:70px} .pw .pb{scroll-margin-top:70px} .pw-b-kopf{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-bottom:10px;border-bottom:1px solid var(--linie);min-height:40px} .pw-b-kopf h2{margin:0;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.12em} .pw-b-kopf .pw-zahl{font-family:var(--mono);font-size:11px;color:var(--tinte-3)} .pw-b-kopf .pw-rechts{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap;align-items:center} .pw .pw-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--linie-stark);border-radius:999px;padding:0 10px; height:30px;font-size:12.5px;background:#fff;color:var(--tinte-2)} .pw .pw-chip.mit-av{padding-left:4px} .pw .pw-chip:hover{border-color:var(--petrol-600)} .pw .pw-chip.an{background:var(--petrol-800);border-color:var(--petrol-800);color:#fff} .pw-chip .pw-n{font-variant-numeric:tabular-nums;opacity:.7} .pw .pw-chip.filter-an{background:var(--wahl-hover);border-color:var(--petrol-600);color:var(--tinte)} .pw-chip.filter-an svg{width:12px;height:12px} .pw .pw-knopf-klein{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border:1px solid var(--linie-stark); border-radius:var(--r-m);font-size:12.5px;background:#fff} .pw .pw-knopf-klein:hover{border-color:var(--petrol-600)} .pw-knopf-klein svg{width:13px;height:13px} .pw-spalten{display:grid;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--tinte-3);padding:9px 0 5px; border-bottom:1px solid var(--linie)} .pw-spalten span{padding:0 8px}.pw-spalten .r{text-align:right} .pw-leer-zeile{display:flex;align-items:center;gap:10px;padding:12px 8px;color:var(--tinte-3);font-size:13.5px} .pw .pw-leer-zeile button{color:var(--petrol-700);text-decoration:underline;text-underline-offset:3px} .pw .pw-ik{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-s);color:var(--tinte-3)} .pw-ik svg{width:15px;height:15px} .pw .pw-ik:hover{background:#E6EAE6;color:var(--tinte)} /* F · Aufgaben: Kreis | Titel | Fällig | Status | Wer | Zeit | Aktionen */ .pw-a-raster,.pw-az{grid-template-columns:34px minmax(200px,1fr) 104px 112px 44px 76px 64px} .pw-az{display:grid;align-items:center;min-height:42px;border-top:1px solid var(--linie);position:relative;cursor:pointer; transition:background var(--rein)} .pw-az:hover{background:var(--hover)} .pw-az.gefiltert{background:var(--wahl-hover);box-shadow:inset 3px 0 0 var(--petrol-600)} .pw-az .pw-kreis{width:34px;display:flex;justify-content:center} .pw-az .ab-kreis,.pw-az .ab-stern{width:30px;height:30px} .pw-az .ab-kreis svg,.pw-az .ab-stern svg{width:18px;height:18px} .pw-az.fertig .pw-t{text-decoration:line-through;color:var(--tinte-3)} .pw-az .pw-t{padding:0 8px;min-width:0;display:flex;align-items:center;gap:8px;font-size:13.5px} .pw-az .pw-t .pw-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pw-az .pw-f{padding:0 8px;font-size:13px;color:var(--tinte-2);white-space:nowrap} .pw-az .pw-f.spaet{color:var(--koralle-700);font-weight:500} .pw-az .pw-f.heute{color:var(--tinte);font-weight:600} .pw-az .pw-st{padding:0 8px;font-size:12.5px;display:flex;align-items:center;gap:6px;color:var(--tinte-2);white-space:nowrap} .pw-az .pw-wer{display:flex;justify-content:center} .pw .pw-zeitk{justify-self:end;margin-right:4px;height:30px;padding:0 8px;border-radius:var(--r-s);font-variant-numeric:tabular-nums; font-size:13px;color:var(--tinte)} .pw .pw-zeitk:not(:disabled):hover{background:#E3E8E9;box-shadow:inset 0 0 0 1px var(--petrol-600);color:var(--petrol-800)} .pw .pw-zeitk.null{color:var(--tinte-3);cursor:default} .pw .pw-zeitk.an{background:var(--petrol-800);color:#fff} .pw-az .pw-akts{display:flex;justify-content:flex-end;gap:2px;padding-right:4px} .pw-az .pw-start{opacity:0;transition:opacity var(--rein)} .pw-az:hover .pw-start,.pw-az .pw-start:focus-visible{opacity:1} .pw .pw-az .pw-start:hover{color:var(--koralle-700);background:var(--koralle-100)} .pw-az .ab-stern:not(.an){opacity:0} .pw-az:hover .ab-stern,.pw-az .ab-stern:focus-visible{opacity:1} @media (hover:none){.pw-az .pw-start,.pw-az .ab-stern:not(.an){opacity:1}} .pw-a-grp{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--tinte-3);padding:12px 8px 4px;display:flex;gap:8px} .pw-anlage{display:grid;grid-template-columns:34px 1fr auto;align-items:center;min-height:42px;border-top:1px solid var(--linie)} .pw-anlage .pw-plus{display:flex;justify-content:center;color:var(--tinte-3)} .pw-anlage .pw-plus svg{width:15px;height:15px} .pw-anlage input{border:0;outline:0;background:none;height:40px;padding:0 8px;font:inherit;font-size:13.5px;width:100%;color:var(--tinte)} .pw-anlage input::placeholder{color:var(--tinte-3)} .pw-anlage .pw-tipp{font-size:11.5px;color:var(--tinte-3);padding-right:10px;opacity:0;transition:opacity var(--rein);white-space:nowrap} .pw-anlage:focus-within .pw-tipp,.pw-anlage .pw-tipp:has(.pw-anlage-f){opacity:1} .pw-anlage-f{color:var(--petrol-700);font-weight:500;margin-right:10px} .pw-anlage:focus-within{box-shadow:inset 0 -2px 0 var(--petrol-600)} .pw .pw-mehr{display:block;width:100%;text-align:left;padding:10px 8px;font-size:13px;color:var(--petrol-700);border-top:1px solid var(--linie)} .pw .pw-mehr:hover{background:var(--hover)} /* I · Wissen, J · Belege */ .pw-w-raster,.pw-wz{grid-template-columns:minmax(220px,1fr) 150px 140px} .pw-l-raster,.pw-lz{grid-template-columns:130px 100px minmax(160px,1fr) 120px 120px} .pw .pw-wz,.pw .pw-lz{display:grid;align-items:center;min-height:42px;border-top:1px solid var(--linie);cursor:pointer;width:100%;text-align:left} .pw .pw-wz:hover,.pw .pw-lz:hover{background:var(--hover)} .pw-wz>span,.pw-lz>span{padding:0 8px;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:8px} .pw-wz .pw-txt{overflow:hidden;text-overflow:ellipsis} .pw-lz .r{justify-content:flex-end;font-variant-numeric:tabular-nums} .pw-lz .pw-nr{font-family:var(--mono);font-size:12.5px} .pw-marke{display:inline-flex;align-items:center;font-size:12px;border-radius:999px;padding:1px 9px;font-weight:500} .pw-marke.ok{color:var(--ok);background:var(--ok-100)} .pw-marke.offen{color:var(--petrol-700);background:var(--wahl-hover)} .pw-marke.spaet{color:var(--stop);background:var(--stop-100)} .pw-marke.leise{color:var(--tinte-2);background:#EEEFEB} .pw-doc{display:inline-flex} .pw-doc svg{width:15px;height:15px;color:var(--tinte-3)} /* K · Gespräch und Verlauf: klebt rechts und reicht bis unten */ .pw-spalte{position:sticky;top:0;align-self:start;height:calc(100vh - 140px);min-height:420px;display:flex;flex-direction:column; background:#fff;border:1px solid var(--linie);border-radius:var(--r-l);overflow:hidden} @media (max-width:1400px){.pw-spalte{position:relative;height:560px}} /* Auswahlfenster an einer Angabe (hängt am body) */ .pw-wahl .pw-wahl-titel{font-size:12px;color:var(--tinte-3);padding:4px 8px 6px} .pw-wahl .pw-wahl-titel b{color:var(--tinte);font-weight:600} .pw-wahl .pw-wahl-zahl{display:flex;align-items:center;gap:8px;border:1px solid var(--linie-stark);border-radius:var(--r-m); padding:0 10px;margin:2px;height:38px} .pw-wahl .pw-wahl-zahl:focus-within{border-color:var(--petrol-600)} .pw-wahl .pw-wahl-zahl input{flex:1;border:0;outline:0;font:inherit;font-size:13.5px;height:30px;min-width:0;background:none;color:var(--tinte)} .pw-wahl .pw-wahl-zahl span{font-size:13px;color:var(--tinte-3)} .pw-wahl .pw-wahl-hilfe{font-size:11.5px;color:var(--tinte-3);padding:6px 8px 2px} .pw-wahl .pw-stz{display:inline-flex;align-items:center} .pw-wahl .pw-stz i{width:8px;height:8px;border-radius:50%;background:currentColor} .pw-wahl .pw-stz.laeuft{color:var(--ok)}.pw-wahl .pw-stz.angeb{color:var(--warn)}.pw-wahl .pw-stz.still{color:var(--tinte-3)} .pw-wahl .av{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center; font-size:10px;font-weight:700;color:#fff;flex:none} @media (prefers-reduced-motion:reduce){.pw *{transition:none!important;animation:none!important}} /* ===== Projektseite Buchungen (#258) ===== */ /* Nach concept/mockups/projektseite-v2.html. Die Farben, die das Haus noch nicht kennt (Violett für „weniger verrechnet", die zarten Gründe), stehen nur hier: am Block und am Auswahlfenster, das am body hängt. */ .pb,.pb-wahl{--violett:#6A3FA0;--violett-100:#EFE8F8;--hover:#F2F4F2;--wahl-hover:#EAF0F1; --warn-100:#F7EEDB;--stop-100:#F9E5E1;--menu:#C5D5DA;--rein:120ms ease; --schatten-hoch:0 10px 30px rgba(8,20,25,.18),0 2px 6px rgba(8,20,25,.08)} .pb{margin-top:22px;background:#fff;border:1px solid var(--linie);border-radius:var(--r-l);padding:16px 18px 10px;position:relative} .pb .av{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center; font-size:10px;font-weight:700;color:#fff;background:var(--petrol-600);flex:none;background-size:cover} .pb-kopf{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-bottom:10px;border-bottom:1px solid var(--linie)} .pb-kopf h2{margin:0;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.12em} .pb-kopf .zahl{font-family:var(--mono);font-size:11px;color:var(--tinte-3)} .pb-filter{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto;position:relative;align-items:center} .pb-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--linie-stark);border-radius:999px;padding:0 10px 0 4px;height:30px;font-size:12.5px;background:#fff;color:var(--tinte-2)} .pb-chip.alle{padding-left:10px} .pb-chip:hover{border-color:var(--petrol-600)} .pb-chip.an{background:var(--petrol-800);border-color:var(--petrol-800);color:#fff} .pb-chip .n{font-variant-numeric:tabular-nums;opacity:.7} .pb-ansicht{display:inline-flex;border:1px solid var(--linie-stark);border-radius:var(--r-m);overflow:hidden;margin-left:8px} .pb-ansicht button{height:30px;padding:0 12px;font-size:12.5px;color:var(--tinte-2)} .pb-ansicht button.an{background:var(--petrol-800);color:#fff} .pb-spalten,.pb-bz{display:grid;grid-template-columns:28px 94px 34px 128px minmax(200px,1fr) 124px 64px 116px 64px} .pb.mit-betrag .pb-spalten,.pb.mit-betrag .pb-bz{grid-template-columns:28px 94px 34px 128px minmax(200px,1fr) 124px 64px 116px 82px 64px} /* Unter der klebenden Leiste der Projektseite (.pw-klebe, 46px, #261) bleiben Spaltenköpfe und Monat stehen */ .pb-spalten{position:sticky;top:46px;z-index:4;background:#fff;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em; color:var(--tinte-3);padding:10px 0 6px;border-bottom:1px solid var(--linie)} .pb-spalten span{padding:0 8px}.pb-spalten .r{text-align:right} .pb-monat{display:flex;align-items:center;gap:12px;padding:14px 6px 8px;flex-wrap:wrap;position:sticky;top:77px;z-index:3;background:#fff} .pb-monat .m-name{font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.1em} .pb-monat .m-summe{font-size:13px;color:var(--tinte-2);font-variant-numeric:tabular-nums} .pb-monat .m-summe b{color:var(--tinte);font-weight:600} .pb-monat .m-summe .ab{color:var(--violett)} .pb-monat .m-zu{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--warn);background:var(--warn-100);border-radius:999px;padding:2px 10px 2px 8px} .pb-monat .m-zu svg{width:13px;height:13px} .pb-monat .m-oeffnen{font-size:12.5px;color:var(--petrol-700);text-decoration:underline;text-underline-offset:3px;margin-left:auto} .pb-monat .m-oeffnen:hover{color:var(--petrol-900)} .pb-kast{width:16px;height:16px;accent-color:var(--petrol-700);cursor:pointer;margin:0} .pb-bz{align-items:center;min-height:42px;border-top:1px solid var(--linie);position:relative;transition:background var(--rein)} .pb-bz:hover{background:var(--hover)} .pb-bz.gewaehlt{background:var(--wahl-hover);box-shadow:inset 3px 0 0 var(--petrol-600)} .pb-bz.tagstart{border-top-color:var(--linie-stark)} .pb-bz .c-wahl{display:flex;justify-content:center} .pb-bz .c-wahl .pb-kast{opacity:0;transition:opacity var(--rein)} .pb-bz:hover .c-wahl .pb-kast,.pb-bz .c-wahl .pb-kast:checked,.pb.waehlt .pb-bz .c-wahl .pb-kast,.pb-bz .c-wahl .pb-kast:focus-visible{opacity:1} .pb-z{display:flex;align-items:center;gap:6px;min-width:0;height:34px;padding:0 8px;border-radius:var(--r-s);text-align:left;font-size:13.5px;position:relative;white-space:nowrap} .pb-z .txt{overflow:hidden;text-overflow:ellipsis} button.pb-z:hover{background:#E6EAE6;box-shadow:inset 0 0 0 1px var(--linie-stark)} button.pb-z.offen{background:#fff;box-shadow:inset 0 0 0 1px var(--petrol-600)} .pb-z.zahl{justify-content:flex-end;font-variant-numeric:tabular-nums} .pb-z.leise,.pb-z .leise{color:var(--tinte-3)} .pb-z.datum,.pb-z.zeit{font-variant-numeric:tabular-nums} .pb-z.datum.wdh .txt{color:transparent} .pb-bz:hover .pb-z.datum.wdh .txt,.pb-z.datum.wdh:focus-visible .txt{color:var(--tinte-3)} .pb-z.datum.heute:not(.wdh) .txt{color:var(--koralle-700);font-weight:600} /* Der Kunde liest den Text im Leistungsjournal, deshalb bis zwei Zeilen statt abgeschnitten */ .pb-z.textz{white-space:normal;height:auto;min-height:34px;padding:5px 8px;line-height:1.4} .pb-z.textz .txt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .pb-fehlt{color:var(--warn);font-style:italic} .pb-z.ein{padding:0 2px;position:relative} .pb-z.ein input{width:100%;height:32px;border:1px solid var(--petrol-600);border-radius:var(--r-s);padding:0 8px;font:inherit;font-size:13.5px; box-shadow:0 0 0 3px rgba(42,90,105,.15);background:#fff;font-variant-numeric:tabular-nums;outline:none} .pb-z.ein textarea{width:100%;min-height:52px;border:1px solid var(--petrol-600);border-radius:var(--r-s);padding:6px 8px;font:inherit;font-size:13.5px; line-height:1.4;resize:none;box-shadow:0 0 0 3px rgba(42,90,105,.15);background:#fff;margin:3px 0;outline:none} .pb-z.ein.falsch input,.pb-z.ein.falsch textarea{border-color:var(--stop);box-shadow:0 0 0 3px rgba(175,58,42,.15)} .pb-z.ein.zahl input{text-align:right} .pb-ein-tipp{position:absolute;left:2px;top:100%;margin-top:2px;z-index:6;font-size:11px;color:var(--tinte-3);background:#fff;border:1px solid var(--linie); border-radius:4px;padding:1px 6px;white-space:nowrap;box-shadow:0 2px 6px rgba(25,28,24,.08)} .pb-bz:has(.pb-fehler) .pb-ein-tipp{display:none} .pb-vr{display:inline-flex;align-items:center;gap:6px} .pb-vr.gleich{color:var(--tinte-3)} .pb-vr .weniger{background:var(--violett-100);color:var(--violett);font-weight:600;border-radius:999px;padding:1px 8px} .pb-vr .von{font-size:11.5px;color:var(--tinte-3)} .pb-vr .null{background:#EEEFEB;color:var(--tinte-2);border-radius:999px;padding:1px 8px;font-size:12.5px} .pb-akts{display:flex;justify-content:flex-end;gap:2px;padding-right:4px} .pb-ik{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-s);color:var(--tinte-3)} .pb-ik svg{width:16px;height:16px} .pb-ik:hover{background:#E6EAE6;color:var(--tinte)} .pb-ik.weg:hover{background:var(--koralle-100);color:var(--koralle-700)} .pb-bz .pb-akts .pb-ik{opacity:0;transition:opacity var(--rein)} .pb-bz:hover .pb-akts .pb-ik,.pb-bz .pb-akts .pb-ik:focus-visible,.pb-bz .pb-akts .pb-ik.offen{opacity:1} .pb-bz .pb-akts .pb-ik.umb{opacity:.55} .pb-bz:hover .pb-akts .pb-ik.umb{opacity:1} .pb-bz.zu .pb-z{color:var(--tinte-2)} .pb-bz.zu .pb-akts .pb-ik{opacity:1;color:var(--warn)} .pb-bz.zu .pb-akts .pb-ik:hover{background:var(--warn-100)} .pb-bz.zu{cursor:default} .pb-person{display:flex;justify-content:center;align-items:center} button.pb-person{height:34px;border-radius:var(--r-s);position:relative} button.pb-person:hover{background:#E6EAE6} .pb-gespeichert{display:inline-flex;align-items:center;color:var(--ok);animation:pb-blitz 1.6s ease forwards} .pb-gespeichert svg{width:13px;height:13px} button.pb-person .pb-gespeichert{position:absolute;right:-2px;top:2px} @keyframes pb-blitz{0%{opacity:0}15%{opacity:1}75%{opacity:1}100%{opacity:0}} .pb-fehler{position:absolute;z-index:30;top:40px;right:70px;max-width:420px;background:var(--stop-100);color:var(--stop);border:1px solid #E9B9B0; border-radius:var(--r-m);padding:7px 12px;font-size:12.5px;box-shadow:var(--schatten-hoch);white-space:normal} .pb-fehler small{display:block;color:var(--tinte-2)} .pb-aeltere{display:block;width:100%;padding:10px 8px;font-size:12.5px;color:var(--petrol-700);border-top:1px solid var(--linie)} .pb-aeltere:hover{background:var(--hover)} .pb-leer{padding:18px 6px;color:var(--tinte-3);font-size:13px} .pb-hinweis{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;color:var(--tinte-3);padding:12px 6px 4px;border-top:1px solid var(--linie)} .pb-hinweis svg{width:14px;height:14px;margin-top:2px;flex:none} .pb-journal{margin-top:12px} .pb-journal .j-monat{display:flex;align-items:baseline;gap:12px;padding:12px 6px 6px;font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.1em} .pb-journal .j-monat span{font-family:var(--sans);font-weight:400;letter-spacing:0;font-size:13px;color:var(--tinte-2)} .pb-journal .j-zeile{display:grid;grid-template-columns:94px 1fr 150px 70px;align-items:start;border-top:1px solid var(--linie);padding:8px 0;font-size:13.5px;width:100%;text-align:left} .pb-journal .j-zeile:hover:not(:disabled){background:var(--hover)} .pb-journal .j-zeile:disabled{cursor:default;color:var(--tinte)} .pb-journal .j-zeile>span{padding:0 8px} .pb-journal .j-zeile .r{text-align:right;font-variant-numeric:tabular-nums} .pb-journal .j-zeile small{display:block;color:var(--tinte-3);font-size:12px} .pb-journal .j-summe{display:flex;justify-content:flex-end;gap:10px;border-top:1px solid var(--linie-stark);padding:8px 8px 4px;font-weight:600;font-variant-numeric:tabular-nums} .pb-journal .j-weg{font-size:12.5px;color:var(--tinte-3);padding:4px 8px 10px} .pb-journal .j-tipp{font-size:12.5px;color:var(--tinte-3);padding:10px 6px 0} .pb-mehrfach{position:sticky;bottom:16px;z-index:25;margin:10px auto 0;display:flex;align-items:center;gap:6px;width:max-content;max-width:100%; background:var(--petrol-800);color:#fff;border-radius:var(--r-l);padding:6px 6px 6px 16px;box-shadow:var(--schatten-hoch);font-size:13px;animation:pb-auf 160ms cubic-bezier(.2,.8,.2,1)} .pb-mehrfach .anz{font-weight:600;margin-right:6px;font-variant-numeric:tabular-nums} .pb-mehrfach .anz small{font-weight:400;color:var(--menu);margin-left:6px;font-size:inherit} .pb-mehrfach button{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 11px;border-radius:var(--r-m);color:#fff} .pb-mehrfach button:hover,.pb-mehrfach button.offen{background:var(--petrol-700)} .pb-mehrfach button svg{width:15px;height:15px} .pb-mehrfach button.weg:hover{background:var(--koralle-700)} .pb-mehrfach .trenn{width:1px;height:20px;background:var(--petrol-600);margin:0 4px} /* Auswahlfenster: hängt am body, damit kein Block es abschneidet */ .pb-wahl{position:fixed;z-index:60;width:300px;background:#fff;border:1px solid var(--linie-stark);border-radius:var(--r-l);box-shadow:var(--schatten-hoch); padding:6px;font-size:13.5px;line-height:1.4;animation:pb-auf 160ms cubic-bezier(.2,.8,.2,1);outline:none} @keyframes pb-auf{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}} .pb-wahl .wahl-titel{font-size:12px;color:var(--tinte-3);padding:4px 8px 6px} .pb-wahl .wahl-titel b{color:var(--tinte);font-weight:600} .pb-wahl .wahl-suche{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--linie);padding:2px 8px 8px 10px;margin:0 -6px 4px} .pb-wahl .wahl-suche svg{width:15px;height:15px;color:var(--tinte-3)} .pb-wahl .wahl-suche input,.pb-wahl .wahl-zahl input{flex:1;border:0;outline:0;font:inherit;font-size:13.5px;height:30px;min-width:0;background:none} .pb-wahl .opts{max-height:320px;overflow:auto} .pb-wahl .gruppe-titel{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--tinte-3);padding:6px 8px 2px} .pb-wahl .option{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:6px 8px;border-radius:var(--r-m);font-size:13.5px;min-height:36px} .pb-wahl .option:hover,.pb-wahl .option.aktiv-tast{background:var(--wahl-hover)} .pb-wahl .option.gewaehlt{font-weight:600} .pb-wahl .option .klein{display:block;font-size:11.5px;color:var(--tinte-3);font-weight:400} .pb-wahl .option .rechts{margin-left:auto;font-size:12px;color:var(--tinte-3);display:flex;align-items:center;gap:8px;font-weight:400} .pb-wahl .option .taste{font-family:var(--mono);font-size:10.5px;color:var(--tinte-3);border:1px solid var(--linie);border-radius:4px;padding:0 5px;min-width:18px;text-align:center} .pb-wahl .option .pb-haken{width:16px;height:16px;color:var(--petrol-700)} .pb-wahl .option.violett .wert{color:var(--violett);font-weight:600} .pb-wahl .av{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;flex:none} .pb-wahl .wahl-trenner{height:1px;background:var(--linie);margin:4px 2px} .pb-wahl .wahl-zahl{display:flex;align-items:center;gap:8px;border:1px solid var(--linie-stark);border-radius:var(--r-m);padding:0 10px;margin:2px;height:38px} .pb-wahl .wahl-zahl:focus-within{border-color:var(--petrol-600)} .pb-wahl .wahl-zahl span{font-size:13px;color:var(--tinte-3)} .pb-wahl .wahl-hilfe{font-size:11.5px;color:var(--tinte-3);padding:6px 8px 2px} .pb-wahl .wahl-fehler{font-size:12px;color:var(--stop);padding:4px 8px 0} .pb-wahl.grund{width:330px;padding:12px 14px;font-size:13px} .pb-wahl.grund .g-kopf{display:flex;gap:8px;align-items:center;font-weight:600;color:var(--warn);margin-bottom:4px} .pb-wahl.grund .g-kopf svg{width:15px;height:15px} .pb-wahl.grund p{margin:0;color:var(--tinte-2)} .pb-wahl .kal{padding:4px 4px 2px} .pb-wahl .kal-kopf{display:flex;align-items:center;gap:4px;padding:0 2px 6px} .pb-wahl .kal-kopf b{flex:1;text-align:center;font-weight:600;font-size:13px} .pb-wahl .kal-kopf .pb-ik{width:28px;height:28px} .pb-wahl .kal-raster{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center} .pb-wahl .kal-raster .wt{font-size:10.5px;color:var(--tinte-3);font-family:var(--mono);padding:2px 0} .pb-wahl .kal-raster button{height:32px;border-radius:var(--r-s);font-size:13px;font-variant-numeric:tabular-nums;text-align:center} .pb-wahl .kal-raster button:hover{background:var(--wahl-hover)} .pb-wahl .kal-raster button.heute{box-shadow:inset 0 0 0 1px var(--koralle-400)} .pb-wahl .kal-raster button.an{background:var(--petrol-800);color:#fff} .pb-wahl .kal-raster button.gesperrt{color:#B8BBB3;cursor:not-allowed;background:repeating-linear-gradient(135deg,transparent 0 4px,#F1F1EC 4px 8px)} /* Schmal: die Tabelle rollt quer im Block, die Seite nicht */ @media (max-width:1100px){.pb{overflow-x:auto}.pb-spalten,.pb-bz{min-width:880px}} @media (prefers-reduced-motion: reduce){.pb-gespeichert,.pb-mehrfach,.pb-wahl{animation:none}} /* ===== Projekt-Schnellansicht (#249) ===== */ /* Werte aus concept/mockups/projekt-schnellansicht.html, Aufbau B: oben fest, das Gespräch füllt den Rest mit eigenem Bildlauf, die Eingabe steht am Fuß. Alles hängt an .ps — im Panel ist das die Wurzel, auf der Projektseite der Kasten um den Strang. */ .ps{--ps-hover:#F2F4F2;--ps-wahl-hover:#EAF0F1;--ps-ok-100:#E3F0E8;--ps-rein:180ms cubic-bezier(.2,.8,.2,1)} .ps .ps-tuer{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--linie-stark);border-radius:999px;padding:4px 12px;font-size:12.5px; color:var(--petrol-700);min-height:32px;margin-left:auto;background:var(--weiss);cursor:pointer} .ps .ps-tuer:hover{border-color:var(--petrol-600);background:var(--ps-wahl-hover)} .ps .ps-tuer svg{width:12px;height:12px} .ps .ps-inhalt{flex:1;min-height:0;overflow:hidden;padding:22px 28px 0;display:flex;flex-direction:column;gap:14px} /* Titel */ .ps .ps-titelblock{display:flex;gap:14px;align-items:flex-start} .ps .ps-logo{width:44px;height:44px;border-radius:12px;background:var(--petrol-800);display:flex;align-items:center;justify-content:center;flex:none} .ps .ps-logo svg{width:22px;height:22px} .ps .ps-titel-text{flex:1;min-width:0} .ps .ps-titelblock h2{margin:0;font-size:20px;font-weight:600;letter-spacing:-.005em;line-height:1.3} .ps .ps-sub{font-size:13px;color:var(--tinte-2);margin-top:2px;display:flex;gap:6px;flex-wrap:wrap;align-items:center} .ps .ps-art{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.08em;border:1px solid var(--linie-stark);border-radius:999px;padding:1px 8px;color:var(--tinte-2)} .ps .ps-aktionen{display:flex;gap:8px;margin-top:12px} .ps .ps-akt{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--linie-stark);border-radius:var(--r-m);padding:0 14px;height:36px; font-family:var(--sans);font-size:13.5px;background:var(--weiss);color:var(--tinte);cursor:pointer} .ps .ps-akt:hover{border-color:var(--petrol-600)} .ps .ps-akt svg{width:15px;height:15px} .ps .ps-akt.signal{background:var(--koralle-400);border-color:var(--koralle-400);color:#fff;font-weight:500} .ps .ps-akt.signal:hover{background:var(--koralle-600);border-color:var(--koralle-600)} .ps .ps-abschnitt{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--tinte); padding-bottom:8px;border-bottom:1px solid var(--linie);margin-bottom:6px} .ps .ps-abschnitt .ps-neben{margin-left:auto;font-weight:500;letter-spacing:.02em;color:var(--tinte-3);font-size:11px;font-variant-numeric:tabular-nums} /* B · Angaben, zweispaltig */ .ps .ps-zeilen{display:grid;grid-template-columns:1fr 1fr;column-gap:18px} .ps .ps-zeile{display:grid;grid-template-columns:28px 1fr;grid-template-rows:auto auto;align-items:center;column-gap:6px;min-height:42px;padding:5px 6px; border-bottom:1px solid var(--linie);transition:background var(--ps-rein)} .ps .ps-zeile.kann{cursor:pointer} .ps .ps-zeile.kann:hover,.ps .ps-zeile.offen{background:var(--ps-hover)} .ps .ps-zeile.offen{box-shadow:inset 2px 0 0 var(--petrol-600)} .ps .ps-zeile:focus-visible{outline:2px solid var(--koralle-400);outline-offset:-2px} .ps .ps-sym{grid-row:1 / span 2;width:28px;height:32px;display:inline-flex;align-items:center;justify-content:center;color:var(--tinte-3)} .ps .ps-sym svg{width:18px;height:18px} .ps .ps-etikett{font-size:11.5px;line-height:1.2;color:var(--tinte-2)} .ps .ps-wert{display:flex;align-items:center;gap:8px;min-width:0;font-size:13.5px} .ps .ps-wert .ps-neben{font-size:12.5px;color:var(--tinte-3);white-space:nowrap} .ps .ps-leer{display:inline-flex;align-items:center;gap:6px;color:var(--petrol-700);opacity:.8} .ps .ps-leer svg{width:12px;height:12px} .ps .ps-zeile.kann:hover .ps-leer{opacity:1;text-decoration:underline;text-underline-offset:3px} .ps .ps-nicht{color:var(--tinte-3)} .ps .ps-stift{margin-left:auto;width:14px;height:14px;color:var(--tinte-3);opacity:0;transition:opacity var(--ps-rein);flex:none} .ps .ps-zeile.kann:hover .ps-stift,.ps .ps-zeile.kann:focus-visible .ps-stift{opacity:1} .ps .ps-spaet{color:var(--koralle-700);font-weight:500} .ps .ps-av{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;background:var(--petrol-600);flex:none} .ps .ps-gespeichert{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;color:var(--ok);animation:ps-blitz 1.6s ease forwards} .ps .ps-gespeichert svg{width:12px;height:12px} @keyframes ps-blitz{0%{opacity:0}15%{opacity:1}75%{opacity:1}100%{opacity:0}} .ps .ps-stz{display:inline-flex;align-items:center;gap:6px} .ps .ps-stz i{width:8px;height:8px;border-radius:50%;background:currentColor} .ps .ps-stz.laeuft{color:var(--ok)} .ps .ps-stz.angeb{color:var(--warn)} .ps .ps-stz.still{color:var(--tinte-3)} .ps .ps-stz span{color:var(--tinte)} .ps .ps-recht{font-size:12px;color:var(--tinte-3);margin-top:6px;display:flex;gap:6px;align-items:center} .ps .ps-recht svg{width:12px;height:12px;flex:none} /* C · Band */ .ps .ps-band{border:1px solid var(--linie);border-radius:var(--r-l);padding:8px 14px;background:#FCFCFA} .ps .ps-z1{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap} .ps .ps-gross{font-size:17px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.01em} .ps .ps-einheit{font-size:13px;color:var(--tinte-2)} .ps .ps-rechts{margin-left:auto;font-size:12.5px;color:var(--tinte-3);font-variant-numeric:tabular-nums} .ps .ps-balken{display:block;height:4px;border-radius:3px;background:var(--linie);overflow:hidden;margin-top:6px} .ps .ps-balken i{display:block;height:100%;background:var(--petrol-600)} .ps .ps-balken i.warn{background:var(--warn)} .ps .ps-plakette{font-size:11.5px;font-weight:600;color:var(--ok);background:var(--ps-ok-100);border-radius:999px;padding:1px 8px} /* D · Aufgaben als eine Zeile */ .ps .ps-aufg-zeile{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--linie);border-radius:var(--r-m);cursor:pointer;font-size:13.5px} .ps .ps-aufg-zeile:hover{border-color:var(--petrol-600)} .ps .ps-aufg-zeile.leer{cursor:default;color:var(--tinte-3)} .ps .ps-aufg-zeile.leer:hover{border-color:var(--linie)} .ps .ps-aufg-zeile .ps-neben{margin-left:auto;font-size:12.5px;color:var(--tinte-3);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ps .ps-aufg-zeile .ps-spaet{font-size:12.5px} .ps .ps-aufg-zeile svg{flex:none} /* E · Gespräch und Verlauf */ .ps .ps-gespraech{flex:1;min-height:180px;display:flex;flex-direction:column} .ps .ps-strang{flex:1;overflow:auto;padding:4px 6px 6px 0;display:flex;flex-direction:column;gap:12px} .ps .ps-platz{margin-top:auto} .ps .ps-ereignis{display:flex;gap:10px;font-size:12.5px;color:var(--tinte-3);align-items:baseline} .ps .ps-ereignis i{width:30px;display:flex;justify-content:center;flex:none} .ps .ps-ereignis i::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--linie-stark);transform:translateY(-2px)} .ps .ps-ereignis b{color:var(--tinte-2);font-weight:500} .ps .ps-alt{text-decoration:line-through;text-decoration-color:var(--linie-stark)} .ps .ps-monat{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--tinte-3);text-align:center;margin:4px 0} .ps .ps-beitrag{display:flex;gap:10px;align-items:flex-start;font-size:14px;position:relative} .ps .ps-beitrag>.ps-av{width:30px;height:30px;font-size:11px;margin-top:2px} .ps .ps-rumpf{flex:1;min-width:0} .ps .ps-b-kopf{font-size:12.5px;color:var(--tinte-3);display:flex;gap:6px;align-items:baseline} .ps .ps-b-kopf b{color:var(--tinte);font-weight:600} .ps .ps-blase{background:#F4F5F2;border-radius:4px var(--r-l) var(--r-l) var(--r-l);padding:8px 12px;margin-top:3px;white-space:pre-wrap;overflow-wrap:anywhere;display:inline-block;max-width:100%} .ps .ps-beitrag.eigen .ps-blase{background:var(--koralle-100)} .ps .ps-b-anh{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px} .ps .ps-b-bild{width:160px;height:104px;border:1px solid var(--linie);border-radius:var(--r-m);padding:0;cursor:zoom-in;background:#F4F5F2 center/cover no-repeat} .ps .ps-b-pdf{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--linie);border-radius:var(--r-m);padding:6px 12px 6px 6px;font-family:var(--sans); font-size:13px;background:var(--weiss);color:var(--tinte);text-align:left;cursor:pointer} .ps .ps-b-pdf:hover{border-color:var(--petrol-600)} .ps .ps-vs{width:32px;height:32px;border:1px solid var(--linie);border-radius:6px;display:grid;place-items:center;font-family:var(--mono);font-size:9px;font-weight:700;color:var(--koralle-700);background:#FFF6F2} .ps .ps-b-pdf small{display:block;font-size:11px;color:var(--tinte-3)} /* F · Eingabe am Fuß */ .ps .ps-eingabe{flex:none;border-top:1px solid var(--linie);padding:12px 28px 14px;background:var(--weiss)} .ps .ps-kommentar{display:flex;align-items:flex-start;gap:10px} .ps .ps-kommentar>.ps-av{width:30px;height:30px;font-size:11px;margin-top:5px} .ps .ps-k-feld{flex:1;border:1px solid var(--linie-stark);border-radius:var(--r-m);background:var(--weiss);transition:border-color var(--ps-rein),box-shadow var(--ps-rein)} .ps .ps-k-feld:focus-within,.ps .ps-k-feld.zieht{border-color:var(--petrol-600);box-shadow:0 0 0 3px rgba(42,90,105,.15)} .ps .ps-k-zeile{display:flex;align-items:flex-end;gap:2px;padding-right:4px} .ps .ps-k-feld textarea{flex:1;border:0;outline:0;resize:none;font-family:var(--sans);font-size:14px;padding:9px 12px;min-height:40px;max-height:140px; background:none;line-height:1.45;overflow:hidden;color:var(--tinte)} .ps .ps-ik{width:32px;height:32px;margin-bottom:4px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-s);color:var(--tinte-2);cursor:pointer} .ps .ps-ik:hover{background:#ECEEEA;color:var(--tinte)} .ps .ps-ik:focus-visible{outline:2px solid var(--koralle-400);outline-offset:-2px} .ps .ps-ik svg{width:16px;height:16px} .ps .ps-ik input{display:none} .ps .ps-k-anh{display:flex;flex-wrap:wrap;gap:8px;padding:0 10px 10px} .ps .ps-k-anh:empty{display:none} .ps .ps-wartend{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--linie);border-radius:var(--r-m);padding:4px 6px 4px 8px;font-size:12.5px;background:#F4F5F2} .ps .ps-wartend button{width:22px;height:22px;border:0;border-radius:50%;display:grid;place-items:center;color:var(--tinte-3);background:transparent;cursor:pointer} .ps .ps-wartend button:hover{background:var(--koralle-100);color:var(--koralle-700)} .ps .ps-wartend button svg{width:10px;height:10px} .ps .ps-k-tipp{font-size:11.5px;color:var(--tinte-3);margin:5px 0 0 40px} /* Auf der Projektseite (#261): kein Fuß des Panels, das Gespräch füllt die rechte Spalte bis unten */ .ps.ps-seite{flex:1;min-height:0;display:flex;flex-direction:column;padding:0} .ps.ps-seite .ps-abschnitt{display:none} .ps.ps-seite .ps-gespraech{flex:1;min-height:0;display:flex;flex-direction:column} .ps.ps-seite .ps-strang{max-height:none;flex:1;min-height:0;overflow:auto;padding:12px 16px} .ps.ps-seite .ps-eingabe{border-top:1px solid var(--linie);padding:10px 12px 12px;background:transparent} @media (prefers-reduced-motion:reduce){.ps *{transition:none!important;animation:none!important}} /* ===== Kontaktseite (#268) ===== */ /* Der Kopf der Kontaktseite nach concept/mockups/kontaktseite-v3.html. Alles haengt an der Wurzel .kts (bzw. .kts-wahl fuer das Auswahlfenster am body): generische Mockup-Namen wie .titel, .ang oder .wahl gibt es im Prototyp mehrfach, deshalb das Praefix. */ .kts,.kts-wahl{--hover:#F2F4F2;--wahl-hover:#EAF0F1;--schatten-hoch:0 4px 10px rgba(25,28,24,.08),0 12px 40px rgba(25,28,24,.14)} /* Nur die eigenen Knöpfe zurücksetzen: der Verlauf darunter bringt seine (.ikon …) mit. :where hält die Gewichtung niedrig, damit .kts .kts-akt & Co. ihren Rahmen behalten. */ .kts :where(button[class*="kts-"]){font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0;touch-action:manipulation} .kts svg,.kts-wahl svg{flex:none} .kts .kts-ik{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-m);color:var(--tinte-2)} .kts .kts-ik:hover{background:var(--hover);color:var(--tinte)} .kts-ik svg{width:16px;height:16px} /* Zeile eins und zwei */ .kts-oben{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:12.5px;color:var(--tinte-3);margin-bottom:10px} .kts-oben a{color:var(--petrol-700);text-decoration:none} .kts-oben>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .kts-oben .kts-blaettern{margin-left:auto;display:flex;gap:2px} .kts-titel{display:flex;align-items:center;gap:14px;flex-wrap:wrap;position:relative} .kts-foto{width:64px;height:64px;border-radius:50%;flex:none;position:relative;display:flex;align-items:center;justify-content:center; background:var(--petrol-600) center/cover no-repeat;color:#fff;font-size:22px;font-weight:600;cursor:pointer;transition:box-shadow .15s} .kts-foto:hover::after,.kts-foto.kts-ziel::after{content:"";position:absolute;inset:0;border-radius:50%;background:rgba(16,38,46,.35)} .kts-foto .kts-kam{position:absolute;inset:0;display:none;align-items:center;justify-content:center;z-index:1} .kts-foto:hover .kts-kam,.kts-foto:focus-visible .kts-kam{display:flex} .kts-foto .kts-kam svg{width:20px;height:20px} .kts-foto.kts-ziel{box-shadow:0 0 0 3px var(--koralle-400)} .kts-foto.kts-nur{cursor:default} .kts-foto.kts-nur:hover::after{display:none} .kts-foto-hinweis{font-size:12px;color:var(--tinte-2);margin-top:4px;max-width:220px} .kts-text{min-width:0;flex:1} .kts-z1{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .kts-titel h1{margin:0;font-size:26px;font-weight:700;letter-spacing:-.01em;line-height:1.2;display:flex;align-items:center;gap:6px} .kts-wert{border-radius:var(--r-s);padding:0 4px;margin-left:-4px;cursor:pointer} .kts-wert:hover{background:#E9ECE8} .kts-titel h1 .ie-input{font-size:26px;font-weight:700;letter-spacing:-.01em;max-width:100%} .kts-z2 .ie-input{font-size:14px;max-width:100%} .kts .kts-stern{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-m);color:var(--linie-stark)} .kts-stern svg{width:18px;height:18px;fill:currentColor} .kts .kts-stern.kts-an{color:var(--koralle-600)} .kts button.kts-stern:hover{background:var(--hover);color:var(--koralle-400)} .kts button.kts-stern.kts-an:hover{color:var(--koralle-700)} .kts-z2{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:2px;font-size:14px;color:var(--tinte-2)} .kts .kts-leise{color:var(--tinte-3)} .kts-kmarke{display:inline-flex;align-items:center;border:1px solid var(--linie-stark);border-radius:999px;background:#fff;font-size:13px;overflow:hidden} .kts-kmarke .kts-kn{display:inline-flex;align-items:center;gap:6px;padding:2px 10px} .kts-kmarke a.kts-kn{color:var(--tinte);text-decoration:none} .kts-kmarke a.kts-kn:hover{background:var(--hover)} .kts-kmarke .kts-punkt{width:7px;height:7px;border-radius:50%;background:var(--ok)} .kts-kmarke .kts-punkt.kts-ruht{background:var(--warn)} .kts-kmarke .kts-punkt.kts-ehem{background:var(--tinte-3)} .kts-kmarke .kts-st{color:var(--tinte-3);font-size:12px} .kts-kmarke .kts-kn svg{width:11px;height:11px;color:var(--tinte-3)} .kts .kts-kmarke .kts-wechsel{border-left:1px solid var(--linie);padding:2px 6px;display:inline-flex;align-items:center;color:var(--tinte-3);align-self:stretch} .kts .kts-kmarke .kts-wechsel:hover{background:var(--hover);color:var(--tinte)} .kts-kmarke .kts-wechsel svg{width:12px;height:12px} .kts .kts-kmarke.kts-leer{border:1px dashed var(--linie-stark);border-radius:999px;color:var(--petrol-700);background:#fff} .kts .kts-kmarke.kts-leer:hover{background:var(--wahl-hover)} .kts-kmarke.kts-leer svg{width:11px;height:11px} .kts-geb{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;color:var(--koralle-700);background:var(--koralle-100);border-radius:999px;padding:2px 9px} .kts-geb svg{width:12px;height:12px} /* Knöpfe */ .kts-knoepfe{display:flex;gap:8px;align-self:flex-start;margin-top:6px} .kts .kts-akt{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--linie-stark);border-radius:var(--r-m);padding:0 14px;height:36px;font-size:13.5px;background:#fff;white-space:nowrap} .kts .kts-akt:hover{border-color:var(--petrol-600)} .kts .kts-akt.kts-signal{background:var(--koralle-400);border-color:var(--koralle-400);color:#fff;font-weight:500} .kts .kts-akt.kts-signal:hover{background:#F2714F} .kts-akt .kts-nr{font-family:var(--mono);font-size:12.5px;font-weight:500} .kts-akt svg{width:15px;height:15px} .kts .kts-akt.kts-nachtragen{background:#fff;border-style:dashed;border-color:var(--koralle-400);color:var(--koralle-700)} /* Merkzettel */ .kts-notiz{display:flex;align-items:center;gap:8px;margin:8px 0 0 78px;font-size:13.5px;color:var(--tinte-2);min-height:28px} .kts-notiz:empty{display:none} .kts-notiz svg{width:14px;height:14px;color:var(--koralle-700)} .kts .kts-notiz button{text-align:left;border-radius:var(--r-s);padding:2px 6px;margin-left:-6px} .kts .kts-notiz button:hover{background:#E9ECE8} .kts-notiz .kts-notiz-text{white-space:pre-wrap} .kts-notiz .kts-zu{color:var(--tinte-3);font-size:12px;white-space:nowrap} .kts-feld-ein{flex:1;max-width:640px;min-height:30px;border:1px solid var(--petrol-600);border-radius:var(--r-s);padding:4px 8px; box-shadow:0 0 0 3px rgba(42,90,105,.15);background:#fff;min-width:0;font:inherit;color:inherit;resize:none;line-height:1.45;outline:none} /* Angaben */ .kts-ang-rand{border-bottom:1px solid var(--linie);margin-top:14px} .kts-angaben{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));border-top:1px solid var(--linie);position:relative} .kts-angaben.kts-mehr{border-top:1px dashed var(--linie)} .kts-mehr[hidden]{display:none} .kts-mehr-zeile{display:flex} .kts .kts-mehr-zeile .kts-ang-mehr{display:inline-flex;min-height:40px} .kts .kts-ang{display:flex;flex-direction:column;justify-content:center;gap:1px;min-height:56px;padding:6px 10px;border-radius:var(--r-m);text-align:left;position:relative;min-width:0} .kts .kts-ang[role="button"],.kts button.kts-ang{cursor:pointer} .kts .kts-ang[role="button"]:hover,.kts button.kts-ang:hover,.kts .kts-ang.kts-offen{background:var(--hover)} .kts .kts-ang.kts-offen{box-shadow:inset 0 -2px 0 var(--petrol-600)} .kts-ang .kts-et{font-size:11.5px;color:var(--tinte-3);display:flex;align-items:center;gap:5px} .kts-ang .kts-et svg{width:11px;height:11px} .kts-ang .kts-w{font-size:14px;display:flex;align-items:center;gap:7px;min-width:0;white-space:nowrap;overflow:hidden} .kts-ang .kts-w.kts-mono{font-family:var(--mono);font-size:12.5px} .kts-ang .kts-w .kts-txt{overflow:hidden;text-overflow:ellipsis} .kts-ang .kts-w a{color:var(--petrol-700);display:inline-flex} .kts-ang .kts-w a svg{width:12px;height:12px} .kts-ang .kts-w a.vom-kunden{color:var(--tinte-3);font-size:13px} .kts-ang .kts-fehlt{color:var(--koralle-700);font-weight:500;display:inline-flex;align-items:center;gap:5px;font-family:var(--sans);font-size:13.5px} .kts-ang .kts-einl{color:var(--petrol-700);display:inline-flex;align-items:center;gap:5px;opacity:.85;font-family:var(--sans);font-size:13.5px} .kts-ang .kts-fehlt svg,.kts-ang .kts-einl svg{width:11px;height:11px} .kts .kts-ang.kts-gesperrt{cursor:help} .kts-ang .ie-input{width:100%!important;height:28px} .kts .kts-ang-mehr{flex-direction:row;align-items:center;justify-content:flex-start;gap:6px;color:var(--petrol-700);font-size:13.5px} .kts-ang-mehr svg{width:13px;height:13px;transition:transform .15s} .kts-ang-mehr[aria-expanded="true"] svg{transform:rotate(180deg)} .kts-ang .kts-loesch{color:var(--stop);font-size:13.5px;display:inline-flex;gap:6px;align-items:center} .kts-ang .kts-loesch svg{width:13px;height:13px} .kts-freig{display:flex;flex-direction:column;gap:2px;font-size:12.5px} .kts-freig label{display:flex;gap:6px;align-items:center;cursor:pointer} .kts-gespeichert{display:inline-flex;align-items:center;color:var(--ok);animation:kts-blitz 1.6s ease forwards} .kts-gespeichert svg{width:13px;height:13px} @keyframes kts-blitz{0%{opacity:0}15%{opacity:1}75%{opacity:1}100%{opacity:0}} .kts-recht{font-size:12px;color:var(--tinte-3);display:flex;gap:6px;align-items:center;padding:6px 10px 0} .kts-recht svg{width:12px;height:12px;flex:none} /* Tags und Herkunft */ .kts-einord{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 10px 0} .kts-tag{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;border-radius:999px;padding:2px 6px 2px 10px;font-weight:500} .kts-tag.kts-nur{padding-right:10px} .kts .kts-tag .kts-weg{width:16px;height:16px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;opacity:.55;color:inherit} .kts .kts-tag .kts-weg:hover,.kts .kts-tag .kts-weg:focus-visible{opacity:1;background:rgba(0,0,0,.08)} .kts-tag .kts-weg svg{width:9px;height:9px} .kts .kts-tag-plus{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;border:1px dashed var(--linie-stark);border-radius:999px;padding:2px 10px;color:var(--petrol-700)} .kts .kts-tag-plus:hover{border-color:var(--petrol-600);background:var(--wahl-hover)} .kts-tag-plus svg{width:10px;height:10px} .kts-herk{margin-left:auto;font-size:12.5px;color:var(--tinte-3);display:inline-flex;align-items:center;gap:6px} .kts-herk b{font-weight:500;color:var(--tinte-2)} .kts-herk svg{width:13px;height:13px} .kts-dubl{font-size:12.5px;color:var(--tinte-3);padding:6px 10px 0} .kts-dubl a{color:var(--petrol-700)} /* Klebende Leiste: sie überbrückt den Rand der Seitenfläche (30px), damit sie über die volle Breite reicht */ .kts-klebe{position:sticky;top:0;z-index:30;margin:0 -30px;padding:0 30px;height:0;overflow:visible} .kts-kl-innen{display:flex;align-items:center;gap:10px;height:54px;background:rgba(247,247,244,.96);backdrop-filter:blur(6px); border-bottom:1px solid var(--linie);padding:0 4px;transform:translateY(-8px);opacity:0;pointer-events:none;transition:all .18s} .kts-klebe.kts-an .kts-kl-innen{transform:none;opacity:1;pointer-events:auto} .kts-kl-innen .kts-fk{width:30px;height:30px;border-radius:50%;background:var(--petrol-600) center/cover;color:#fff;font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center;flex:none} .kts-kl-innen .kts-nm{font-weight:600;font-size:15px;white-space:nowrap} .kts-kl-innen .kts-fu{font-size:13px;color:var(--tinte-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .kts-kl-innen .kts-r{margin-left:auto;display:flex;gap:8px} .kts .kts-kl-innen .kts-akt{height:32px} .kts-verlauf{margin-top:26px} /* Auswahlfenster am body */ .kts-wahl{position:fixed;z-index:60;width:280px;background:#fff;border:1px solid var(--linie-stark);border-radius:var(--r-l);box-shadow:var(--schatten-hoch);padding:6px;animation:kts-auf 160ms cubic-bezier(.2,.8,.2,1)} @keyframes kts-auf{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}} .kts-wahl .kts-wahl-titel{font-size:12px;color:var(--tinte-3);padding:4px 8px 6px} .kts-wahl .kts-wahl-liste{max-height:280px;overflow:auto} .kts-wahl .kts-option{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:6px 8px;border-radius:var(--r-m);font-size:13.5px;min-height:34px;border:0;background:none;cursor:pointer;color:inherit;font-family:inherit} .kts-wahl .kts-option:hover,.kts-wahl .kts-option:focus-visible{background:var(--wahl-hover)} .kts-wahl .kts-rechts{margin-left:auto;display:flex;align-items:center;gap:8px;color:var(--tinte-3);font-size:12px} .kts-wahl .kts-haken{width:16px;height:16px;color:var(--petrol-700)} .kts-wahl .kts-farbe{width:10px;height:10px;border-radius:50%;flex:none} .kts-wahl .kts-option.kts-neu{color:var(--petrol-700)} .kts-wahl .kts-option.kts-neu svg{width:12px;height:12px} .kts-wahl .kts-wahl-such{display:flex;align-items:center;gap:8px;border:1px solid var(--linie-stark);border-radius:var(--r-m);padding:0 10px;margin:2px 2px 6px;height:36px} .kts-wahl .kts-wahl-such:focus-within{border-color:var(--petrol-600)} .kts-wahl .kts-wahl-such input{flex:1;border:0;outline:0;font-size:13.5px;min-width:0;background:none;font-family:inherit} .kts-wahl .kts-wahl-such svg{width:13px;height:13px;color:var(--tinte-3)} /* Strang (#268 Aufgabe 4) — nach kontaktseite-v3.html, Abschnitte G bis J. Die Box trägt kein overflow, sonst hielte die Eingabe nicht mehr am unteren Rand (position:sticky). */ .kts .kts-verlauf{background:#fff;border:1px solid var(--linie);border-radius:var(--r-l);position:relative} .kts-v-kopf{display:flex;align-items:center;gap:10px;padding:14px 16px 10px;border-bottom:1px solid var(--linie);flex-wrap:wrap} .kts-v-kopf h2{margin:0;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.12em} .kts-v-zahl{font-size:12px;color:var(--tinte-3)} .kts-v-chips{display:flex;gap:4px;margin-left:6px} .kts .kts-fchip{font-size:12.5px;border:1px solid var(--linie);border-radius:999px;padding:2px 10px;color:var(--tinte-2);background:#fff} .kts .kts-fchip:hover{border-color:var(--linie-stark)} .kts .kts-fchip.kts-an{background:var(--petrol-800);border-color:var(--petrol-800);color:#fff} .kts-v-suche{margin-left:auto;display:flex;align-items:center;gap:6px;border:1px solid var(--linie);border-radius:var(--r-m);padding:0 8px;height:30px;width:220px;max-width:100%;background:#fff} .kts-v-suche:focus-within{border-color:var(--petrol-600)} .kts-v-suche svg{width:13px;height:13px;color:var(--tinte-3)} .kts-v-suche input{border:0;outline:0;background:none;font:inherit;font-size:13px;flex:1;min-width:0;color:var(--tinte)} .kts-strang{display:flex;flex-direction:column;gap:14px;padding:14px 18px 18px} .kts-strang-leer{color:var(--tinte-3);font-size:13px;padding:8px 0} .kts-monat{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--tinte-3);display:flex;align-items:center;gap:10px;margin:4px 0} .kts-monat::before,.kts-monat::after{content:"";flex:1;height:1px;background:var(--linie)} .kts-ereignis{display:flex;gap:10px;font-size:12.5px;color:var(--tinte-3);align-items:baseline} .kts-ereignis i{width:30px;display:flex;justify-content:center;flex:none} .kts-ereignis i::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--linie-stark);transform:translateY(-2px)} .kts-ereignis b{color:var(--tinte-2);font-weight:500} .kts-ereignis .kts-alt{text-decoration:line-through;text-decoration-color:var(--linie-stark)} .kts-beitrag{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;position:relative} .kts-av{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;background:var(--petrol-600);flex:none;margin-top:1px} .kts .kts-av-klein{width:24px;height:24px;font-size:9.5px} .kts-rumpf{flex:1;min-width:0} .kts-b-kopf{font-size:12px;color:var(--tinte-3);display:flex;gap:8px;align-items:center;flex-wrap:wrap} .kts-b-kopf b{color:var(--tinte);font-weight:600;font-size:13px} .kts-typ{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;color:var(--petrol-700);background:var(--wahl-hover);border-radius:999px;padding:0 8px} .kts-typ svg{width:11px;height:11px} .kts-blase{background:#F4F5F2;border-radius:4px var(--r-l) var(--r-l) var(--r-l);padding:8px 12px;margin-top:4px;white-space:pre-wrap;overflow-wrap:anywhere;display:inline-block;max-width:100%} .kts-beitrag.kts-eigen>.kts-rumpf>.kts-blase{background:var(--koralle-100)} .kts-b-anh{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px} .kts .kts-anhang{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;border:1px solid var(--linie);border-radius:var(--r-m);padding:4px 10px;background:#fff;color:var(--tinte-2)} .kts .kts-anhang:hover{border-color:var(--linie-stark)} .kts-anhang svg{width:13px;height:13px} .kts .kts-anh-bild{width:72px;height:54px;border:1px solid var(--linie);border-radius:var(--r-m);background:#F4F5F2} .kts-b-fuss{display:flex;gap:12px;margin-top:4px;font-size:12px} .kts .kts-b-fuss button{color:var(--tinte-3)} .kts .kts-b-fuss button:hover{color:var(--petrol-700);text-decoration:underline;text-underline-offset:3px} .kts-b-menue{position:absolute;right:0;top:-2px;display:none;gap:2px;background:#fff;border:1px solid var(--linie);border-radius:var(--r-m);padding:2px} .kts-beitrag:hover:not(:has(.kts-beitrag:hover))>.kts-b-menue,.kts-beitrag:focus-within:not(:has(.kts-beitrag:focus-within))>.kts-b-menue{display:flex} .kts .kts-b-menue button{font-size:12px;padding:2px 8px;border-radius:var(--r-s);color:var(--tinte-2)} .kts .kts-b-menue button:hover{background:var(--hover)} .kts .kts-b-menue .kts-b-weg{color:var(--stop)} .kts-b-edit{display:block;width:100%;margin-top:4px;border:1px solid var(--petrol-600);border-radius:var(--r-m);padding:8px 12px;font:inherit;font-size:13.5px;resize:none;box-shadow:0 0 0 3px rgba(42,90,105,.15)} .kts-b-edit-tipp{font-size:11px;color:var(--tinte-3);margin-top:3px} .kts-antworten{margin:10px 0 0;padding-left:14px;border-left:2px solid var(--linie);display:flex;flex-direction:column;gap:10px} .kts-a-feld{display:flex;gap:8px;align-items:flex-end} .kts-a-feld textarea{flex:1;border:1px solid var(--petrol-600);border-radius:var(--r-m);padding:6px 10px;font:inherit;font-size:13px;resize:none;min-height:34px;box-shadow:0 0 0 3px rgba(42,90,105,.15)} .kts-telefonat{border:1px solid var(--koralle-400);background:#FFF8F5;border-radius:var(--r-l);padding:10px 12px;margin:0 0 10px} .kts-tel-kopf{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--koralle-700);font-weight:500;flex-wrap:wrap} .kts-tel-kopf svg{width:14px;height:14px} .kts-uhr{font-family:var(--mono);font-size:12.5px;margin-left:2px} .kts-tel-punkt{width:8px;height:8px;border-radius:50%;background:var(--koralle-600);animation:kts-puls 1.4s ease infinite} @keyframes kts-puls{50%{opacity:.25}} .kts-tel-r{margin-left:auto;display:flex;gap:8px} .kts-telefonat textarea{display:block;width:100%;margin-top:8px;border:1px solid var(--linie-stark);border-radius:var(--r-m);padding:8px 10px;font:inherit;font-size:13.5px;resize:vertical;min-height:58px;background:#fff} .kts-telefonat textarea:focus{border-color:var(--petrol-600);box-shadow:0 0 0 3px rgba(42,90,105,.15);outline:0} .kts .kts-knopf-k{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:var(--r-m);font-size:12.5px;border:1px solid var(--linie-stark);background:#fff;color:var(--tinte)} .kts .kts-knopf-k:hover{border-color:var(--petrol-600)} .kts .kts-knopf-k.kts-primaer{background:var(--petrol-800);border-color:var(--petrol-800);color:#fff} .kts-eingabe{position:sticky;bottom:0;z-index:20;background:#fff;border-top:1px solid var(--linie);padding:10px 14px 12px;border-radius:0 0 var(--r-l) var(--r-l)} .kts-eingabe.kts-zieht{box-shadow:inset 0 0 0 2px var(--petrol-600)} .kts-k-feld{display:flex;align-items:flex-end;border:1px solid var(--linie-stark);border-radius:var(--r-m);background:#fff} .kts-k-feld:focus-within{border-color:var(--petrol-600);box-shadow:0 0 0 3px rgba(42,90,105,.15)} .kts-k-feld textarea{flex:1;border:0;outline:0;resize:none;font:inherit;font-size:13.5px;padding:9px 12px;min-height:40px;background:none;line-height:1.45;color:var(--tinte)} .kts-k-feld .kts-ik{margin:0 2px 5px 0} .kts .kts-k-feld .kts-ik[aria-disabled="true"]{opacity:.45;cursor:help} .kts .kts-k-feld .kts-senden{margin:0 5px 5px 2px;background:var(--petrol-800);color:#fff} .kts .kts-k-feld .kts-senden:hover{background:var(--petrol-700);color:#fff} .kts-k-anh{display:flex;flex-wrap:wrap;gap:6px} .kts-k-anh:not(:empty){margin-top:6px} .kts-wartend{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;border:1px solid var(--linie);border-radius:var(--r-m);padding:2px 4px 2px 10px;color:var(--tinte-2)} .kts-wartend svg{width:13px;height:13px} .kts-wartend small{color:var(--tinte-3)} .kts .kts-wartend button{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-s);color:var(--tinte-3)} .kts .kts-wartend button:hover{background:var(--hover);color:var(--tinte)} .kts-k-tipp{font-size:11px;color:var(--tinte-3);margin-top:5px;display:flex;gap:12px;flex-wrap:wrap} .kts-k-tipp kbd{font-family:var(--mono);font-size:10.5px;border:1px solid var(--linie);border-radius:4px;padding:0 4px} @media (max-width:900px){.kts-knoepfe{width:100%;padding-left:78px}} @media (max-width:600px){.kts-notiz{margin-left:0}.kts-knoepfe{padding-left:0;flex-wrap:wrap}.kts-v-suche{margin-left:0;width:100%}.kts-strang{padding:12px 12px 16px}} @media (prefers-reduced-motion:reduce){.kts *,.kts-wahl{transition:none!important;animation:none!important}} /* ===== Leadseite (#275) ===== */ /* Nach concept/mockups/leadseite-v3.html (ADR-0067). Alles hängt an der Wurzel .ls oder am Auswahlfenster .ls-wahl (das der Aufgaben, am body) und trägt den Vorsatz ls- — Kurznamen wie angaben, zeile, beitrag gibt es in anderen Bereichen. Rollbereich ist #haupt. */ .ls,.ls-wahl,.ll,.ll-dlg{--hover:#F2F4F2;--wahl-hover:#EAF0F1;--warn-100:#F7EEDB;--stop-100:#F9E5E1;--ok-100:#E3F0E8; --violett:#6A3FA0;--violett-100:#EFE8F8;--schatten-hoch:0 4px 10px rgba(25,28,24,.08),0 12px 40px rgba(25,28,24,.14)} .ls :where(button),.ls-wahl :where(button),.ll :where(button),.ll-dlg :where(button){font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0;touch-action:manipulation} .ls :where(input,textarea),.ls-wahl :where(input,textarea){font:inherit;color:inherit} .ls svg,.ls-wahl svg,.ll svg,.ll-dlg svg{flex:none} .ls .ls-ik{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-m);color:var(--tinte-2)} .ls .ls-ik:hover{background:var(--hover);color:var(--tinte)} .ls .ls-ik svg{width:16px;height:16px} .ls .ls-ik[aria-disabled="true"]{opacity:.45;cursor:help} .ls .ls-av,.ls-wahl .ls-av,.ll .ls-av{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center; font-size:10px;font-weight:700;color:#fff;background:var(--petrol-600);flex:none} /* A · Titel */ .ls .ls-oben{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--tinte-3);margin-bottom:10px} .ls .ls-oben a{color:var(--petrol-700);text-decoration:none} .ls .ls-blaettern{margin-left:auto;display:flex;gap:2px} .ls .ls-titel{display:flex;align-items:center;gap:14px;flex-wrap:wrap;position:relative} .ls .ls-lmarke{width:56px;height:56px;border-radius:14px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--petrol-800);color:#fff} .ls .ls-lmarke svg{width:24px;height:24px} .ls .ls-t-text{min-width:0;flex:1} .ls .ls-t-z1{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .ls .ls-titel h1{margin:0;font-size:26px;letter-spacing:-.01em;line-height:1.2} .ls .ls-titel h1 button{border-radius:var(--r-s);padding:0 4px;margin-left:-4px;text-align:left;font-weight:inherit} .ls .ls-titel h1 button:hover{background:#E9ECE8} .ls .ls-titel h1 input{font-size:26px;font-weight:700;letter-spacing:-.01em;width:min(520px,100%);border:1px solid var(--petrol-600); border-radius:var(--r-s);padding:0 6px;box-shadow:0 0 0 3px rgba(42,90,105,.15);background:#fff} .ls .ls-stern{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-m);color:var(--linie-stark)} .ls .ls-stern svg{width:18px;height:18px} .ls .ls-stern.an{color:var(--koralle-600)} .ls .ls-stern:hover{background:var(--hover);color:var(--koralle-400)} .ls .ls-stern.an:hover{color:var(--koralle-700)} .ls .ls-t-z2{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:2px;font-size:14px;color:var(--tinte-2)} .ls .ls-knoepfe{display:flex;gap:8px;align-self:flex-start;margin-top:6px;flex-wrap:wrap} @media (max-width:900px){.ls .ls-knoepfe{width:100%;padding-left:70px}} .ls .ls-akt{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--linie-stark);border-radius:var(--r-m);padding:0 14px;height:36px; font-size:13.5px;background:#fff;white-space:nowrap;color:var(--tinte);text-decoration:none} .ls .ls-akt:hover{border-color:var(--petrol-600)} .ls .ls-akt.signal{background:var(--koralle-400);border-color:var(--koralle-400);color:#fff;font-weight:500} .ls .ls-akt.signal:hover{background:#F2714F} .ls .ls-akt.signal .ls-nr{font-family:var(--mono);font-size:12.5px;font-weight:500} .ls .ls-akt svg{width:15px;height:15px} .ls .ls-akt.nachtragen{background:#fff;border:1px dashed var(--koralle-400);color:var(--koralle-700)} /* A · Status — sechs Status, sechs Farben */ .ls .ls-stz,.ls-wahl .ls-stz,.ll .ls-stz{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;border-radius:999px;padding:2px 10px 2px 9px;white-space:nowrap} .ls .ls-stz i,.ls-wahl .ls-stz i,.ll .ls-stz i{width:7px;height:7px;border-radius:50%;background:currentColor} .ls button.ls-stz:hover{filter:brightness(.96);box-shadow:0 0 0 1px currentColor inset} .ls button.ls-stz svg{width:11px;height:11px;opacity:.7} .ls .ls-st-Neu,.ls-wahl .ls-st-Neu,.ll .ls-st-Neu{background:#E6EEF6;color:#2B5C8A} .ls .ls-st-Gespraech,.ls-wahl .ls-st-Gespraech,.ll .ls-st-Gespraech{background:var(--ok-100);color:var(--ok)} .ls .ls-st-Angebot,.ls-wahl .ls-st-Angebot,.ll .ls-st-Angebot{background:var(--violett-100);color:var(--violett)} .ls .ls-st-Pausiert,.ls-wahl .ls-st-Pausiert,.ll .ls-st-Pausiert{background:var(--warn-100);color:#8A6212} .ls .ls-st-Gewonnen,.ls-wahl .ls-st-Gewonnen,.ll .ls-st-Gewonnen{background:#2C7A4B;color:#fff} .ls .ls-st-Verloren,.ls-wahl .ls-st-Verloren,.ll .ls-st-Verloren{background:#ECEDE9;color:var(--tinte-3)} .ls .ls-st-Verloren b,.ll .ls-st-Verloren b{font-weight:400} /* B · Wer */ .ls .ls-kmarke{display:inline-flex;align-items:center;border:1px solid var(--linie-stark);border-radius:999px;background:#fff;font-size:13px;overflow:hidden} .ls .ls-kn{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;color:var(--tinte);text-decoration:none} .ls .ls-kn:hover{background:var(--hover)} .ls .ls-kn i{width:7px;height:7px;border-radius:50%;background:var(--ok)} .ls .ls-kn .ls-st{color:var(--tinte-3);font-size:12px} .ls .ls-kn svg{width:11px;height:11px;color:var(--tinte-3)} .ls .ls-firma-z{display:inline-flex;align-items:center;gap:6px} .ls .ls-firma-z>svg{width:13px;height:13px;color:var(--tinte-3)} .ls .ls-firma-txt{font-weight:500;color:var(--tinte)} .ls .ls-noch{font-size:12px;color:var(--tinte-3)} .ls .ls-verbinden{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;border:1px dashed var(--linie-stark);border-radius:999px;padding:1px 10px;color:var(--petrol-700)} .ls .ls-verbinden:hover{border-color:var(--petrol-600);background:var(--wahl-hover)} .ls .ls-verbinden svg{width:10px;height:10px} .ls .ls-vorschlag{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--petrol-700);background:var(--wahl-hover);border-radius:999px;padding:2px 4px 2px 10px} .ls .ls-vorschlag button{background:#fff;border:1px solid var(--linie-stark);border-radius:999px;padding:0 9px;font-size:12px} .ls .ls-vorschlag button:hover{border-color:var(--petrol-600)} .ls .ls-trenn{color:var(--linie-stark)} /* C · Worum es geht, Nachfassen */ .ls .ls-zeilen{margin:10px 0 0 70px;display:flex;flex-direction:column;gap:2px;position:relative} @media (max-width:600px){.ls .ls-zeilen{margin-left:0}} .ls .ls-zeile{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--tinte-2);min-height:30px} .ls .ls-zeile>svg{width:14px;height:14px;color:var(--tinte-3);flex:none} .ls .ls-z-worum>svg{color:var(--koralle-700)} .ls .ls-wk{text-align:left;border-radius:var(--r-s);padding:2px 6px;margin-left:-6px} .ls .ls-wk:hover{background:#E9ECE8} .ls .ls-worum{white-space:pre-wrap} .ls .ls-leise{color:var(--tinte-3)} .ls .ls-leise svg{width:11px;height:11px} .ls .ls-feld-ein{height:30px;border:1px solid var(--petrol-600);border-radius:var(--r-s);padding:0 8px;box-shadow:0 0 0 3px rgba(42,90,105,.15);background:#fff;min-width:0;outline:0} .ls textarea.ls-feld-ein{flex:1;max-width:640px;height:auto;min-height:30px;padding:4px 8px;resize:none;line-height:1.45} .ls .ls-nf{font-weight:600;color:var(--tinte)} .ls .ls-nf.faellig{color:var(--koralle-700)} .ls .ls-nf-dat{font-family:var(--mono);font-size:12.5px;color:var(--tinte-3)} .ls .ls-nf-schritt{color:var(--tinte)} .ls .ls-nf-schritt.ls-leise{color:var(--tinte-3)} .ls .ls-nachfassen>svg{color:var(--koralle-600)} .ls .ls-zu-z{color:var(--tinte-3);font-size:13px} /* G · Hinweis bei angenommenem Angebot */ .ls .ls-hinweis{display:flex;align-items:center;gap:10px;margin:12px 0 0;padding:10px 12px;border-radius:var(--r-l);background:var(--ok-100);color:#1F5A37;font-size:13.5px;flex-wrap:wrap} .ls .ls-hinweis>svg{width:16px;height:16px} .ls .ls-hinweis .ls-r{margin-left:auto;display:flex;gap:8px} /* D · Angaben */ .ls .ls-ang-rand{border-bottom:1px solid var(--linie);margin-top:14px} .ls .ls-angaben{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));border-top:1px solid var(--linie);position:relative} .ls .ls-angaben.ls-mehr{border-top:1px dashed var(--linie)} .ls .ls-ang{display:flex;flex-direction:column;justify-content:center;gap:1px;min-height:56px;padding:6px 10px;border-radius:var(--r-m);text-align:left;position:relative;min-width:0} .ls button.ls-ang:hover,.ls .ls-ang.ls-offen{background:var(--hover)} .ls .ls-ang.ls-offen{box-shadow:inset 0 -2px 0 var(--petrol-600)} .ls .ls-et{font-size:11.5px;color:var(--tinte-3);display:flex;align-items:center;gap:5px} .ls .ls-von{color:var(--tinte-3)} .ls .ls-w{font-size:14px;display:flex;align-items:center;gap:7px;min-width:0;white-space:nowrap;overflow:hidden} .ls .ls-w.mono{font-family:var(--mono);font-size:12.5px} .ls .ls-w.ls-klein{font-size:13px;color:var(--tinte-2)} .ls .ls-txt{overflow:hidden;text-overflow:ellipsis;display:inline-flex;align-items:center;gap:7px} .ls .ls-fehlt{color:var(--koralle-700);font-weight:500;display:inline-flex;align-items:center;gap:5px;font-family:var(--sans);font-size:13.5px} .ls .ls-fehlt svg{width:11px;height:11px} .ls .ls-einl{color:var(--petrol-700);display:inline-flex;align-items:center;gap:5px;opacity:.85;font-family:var(--sans);font-size:13.5px} .ls .ls-einl svg{width:11px;height:11px} .ls .ls-w input{width:100%;height:28px} .ls .ls-ang-mehr{flex-direction:row;align-items:center;justify-content:flex-start;gap:6px;color:var(--petrol-700);font-size:13.5px} .ls .ls-ang-mehr svg{width:13px;height:13px;transition:transform .15s} .ls .ls-ang-mehr[aria-expanded="true"] svg{transform:rotate(180deg)} .ls .ls-loesch{color:var(--stop);font-size:13.5px;display:inline-flex;gap:6px;align-items:center} .ls .ls-loesch svg{width:13px;height:13px} .ls .ls-gespeichert{display:inline-flex;align-items:center;color:var(--ok);animation:ls-blitz 1.6s ease forwards} .ls .ls-gespeichert svg{width:13px;height:13px} @keyframes ls-blitz{0%{opacity:0}15%{opacity:1}75%{opacity:1}100%{opacity:0}} /* F · Angebote */ .ls .ls-angebote{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 10px 0} .ls .ls-et2{font-size:11.5px;color:var(--tinte-3);margin-right:2px} .ls .ls-ang-chip{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;border:1px solid var(--linie);border-radius:var(--r-m);padding:3px 10px;background:#fff;color:var(--tinte);text-decoration:none} .ls .ls-ang-chip:hover{border-color:var(--petrol-600)} .ls .ls-ang-chip .ls-nr{font-family:var(--mono);font-size:12px} .ls .ls-betrag{font-family:var(--mono);font-size:12px;color:var(--tinte-2)} .ls .ls-ang-chip svg{width:11px;height:11px;color:var(--tinte-3)} .ls .ls-ast{font-size:11.5px;border-radius:999px;padding:0 7px} .ls .ls-ast-Entwurf{background:#ECEDE9;color:var(--tinte-2)} .ls .ls-ast-Pruefung{background:var(--warn-100);color:#8A6212} .ls .ls-ast-Versendet{background:var(--violett-100);color:var(--violett)} .ls .ls-ast-Angenommen{background:var(--ok-100);color:var(--ok)} .ls .ls-ast-Abgelehnt{background:var(--stop-100);color:var(--stop)} .ls .ls-tag-plus{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;border:1px dashed var(--linie-stark);border-radius:999px;padding:2px 10px;color:var(--petrol-700)} .ls .ls-tag-plus:hover{border-color:var(--petrol-600);background:var(--wahl-hover)} .ls .ls-tag-plus svg{width:10px;height:10px} /* I · Klebende Leiste — erscheint, sobald der Titel aus dem Bild ist */ .ls .ls-klebe{position:sticky;top:0;z-index:30;margin:0 -30px;padding:0 30px;height:0;overflow:visible} .ls .ls-kl-innen{display:flex;align-items:center;gap:10px;height:54px;background:rgba(247,247,244,.96);backdrop-filter:blur(6px); border-bottom:1px solid var(--linie);padding:0 4px;transform:translateY(-8px);opacity:0;pointer-events:none;transition:all .18s} .ls .ls-klebe.an .ls-kl-innen{transform:none;opacity:1;pointer-events:auto} .ls .ls-fk{width:30px;height:30px;border-radius:8px;background:var(--petrol-800);color:#fff;display:flex;align-items:center;justify-content:center;flex:none} .ls .ls-fk svg{width:15px;height:15px} .ls .ls-kl-nm{font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .ls .ls-kl-fu{font-size:13px;color:var(--tinte-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .ls .ls-r{margin-left:auto;display:flex;gap:8px} .ls .ls-kl-innen .ls-akt{height:32px} /* H · Verlauf */ .ls .ls-verlauf{margin-top:26px;background:#fff;border:1px solid var(--linie);border-radius:var(--r-l);position:relative} .ls .ls-v-kopf{display:flex;align-items:center;gap:10px;padding:14px 16px 10px;border-bottom:1px solid var(--linie);flex-wrap:wrap} .ls .ls-v-kopf h2{margin:0;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.12em} .ls .ls-n{font-size:12px;color:var(--tinte-3)} .ls .ls-v-chips{display:flex;gap:4px;margin-left:6px} .ls .ls-fchip{font-size:12.5px;border:1px solid var(--linie);border-radius:999px;padding:2px 10px;color:var(--tinte-2);background:#fff} .ls .ls-fchip:hover{border-color:var(--linie-stark)} .ls .ls-fchip.an{background:var(--petrol-800);border-color:var(--petrol-800);color:#fff} .ls .ls-v-suche{margin-left:auto;display:flex;align-items:center;gap:6px;border:1px solid var(--linie);border-radius:var(--r-m);padding:0 8px;height:30px;width:220px;max-width:100%} .ls .ls-v-suche:focus-within{border-color:var(--petrol-600)} .ls .ls-v-suche svg{width:13px;height:13px;color:var(--tinte-3)} .ls .ls-v-suche input{border:0;outline:0;background:none;font-size:13px;flex:1;min-width:0} .ls .ls-strang{display:flex;flex-direction:column;gap:14px;padding:14px 18px 18px} .ls .ls-g-monat{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--tinte-3);display:flex;align-items:center;gap:10px;margin:4px 0;text-transform:uppercase} .ls .ls-g-monat::before,.ls .ls-g-monat::after{content:"";flex:1;height:1px;background:var(--linie)} .ls .ls-ereignis{display:flex;gap:10px;font-size:12.5px;color:var(--tinte-3);align-items:baseline} .ls .ls-ereignis i{width:30px;display:flex;justify-content:center;flex:none} .ls .ls-ereignis i::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--linie-stark);transform:translateY(-2px)} .ls .ls-ereignis b{color:var(--tinte-2);font-weight:500} .ls .ls-alt{text-decoration:line-through;text-decoration-color:var(--linie-stark)} .ls .ls-beitrag{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;position:relative} .ls .ls-avatar{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;background:var(--petrol-600);flex:none;margin-top:1px} .ls .ls-rumpf{flex:1;min-width:0} .ls .ls-kopf{font-size:12px;color:var(--tinte-3);display:flex;gap:8px;align-items:center;flex-wrap:wrap} .ls .ls-kopf b{color:var(--tinte);font-weight:600;font-size:13px} .ls .ls-typ{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;color:var(--petrol-700);background:var(--wahl-hover);border-radius:999px;padding:0 8px} .ls .ls-typ svg{width:11px;height:11px} .ls .ls-bearbeitet{font-size:11.5px;color:var(--tinte-3);font-style:italic} .ls .ls-blase{background:#F4F5F2;border-radius:4px var(--r-l) var(--r-l) var(--r-l);padding:8px 12px;margin-top:4px;white-space:pre-wrap;display:inline-block;max-width:100%;overflow-wrap:anywhere} .ls .ls-beitrag.eigen>.ls-rumpf>.ls-blase{background:var(--koralle-100)} .ls .ls-betreff{font-weight:600} .ls .ls-b-menue{position:absolute;right:0;top:-2px;display:none;gap:2px;background:#fff;border:1px solid var(--linie);border-radius:var(--r-m);padding:2px} .ls .ls-beitrag:hover>.ls-b-menue,.ls .ls-beitrag:focus-within>.ls-b-menue{display:flex} .ls .ls-b-menue button{font-size:12px;padding:2px 8px;border-radius:var(--r-s);color:var(--tinte-2)} .ls .ls-b-menue button:hover{background:var(--hover)} .ls .ls-b-menue button.ls-weg{color:var(--stop)} .ls .ls-antworten{margin:10px 0 0;padding-left:14px;border-left:2px solid var(--linie);display:flex;flex-direction:column;gap:10px} .ls .ls-antworten .ls-avatar{width:24px;height:24px;font-size:9.5px} .ls .ls-leer-strang{color:var(--tinte-3);font-size:13px;padding:8px 0} /* H · Telefonat-Zeile */ .ls .ls-telefonat{border:1px solid var(--koralle-400);background:#FFF8F5;border-radius:var(--r-l);padding:10px 12px;margin:0 0 10px} .ls .ls-tel-kopf{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--koralle-700);font-weight:500;flex-wrap:wrap} .ls .ls-tel-kopf svg{width:14px;height:14px} .ls .ls-uhr{font-family:var(--mono);font-size:12.5px;margin-left:2px} .ls .ls-punkt-l{width:8px;height:8px;border-radius:50%;background:var(--koralle-600);animation:ls-puls 1.4s ease infinite} @keyframes ls-puls{50%{opacity:.25}} .ls .ls-telefonat textarea{width:100%;margin-top:8px;border:1px solid var(--linie-stark);border-radius:var(--r-m);padding:8px 10px;font-size:13.5px;resize:vertical;min-height:58px;background:#fff;outline:0} .ls .ls-telefonat textarea:focus{border-color:var(--petrol-600);box-shadow:0 0 0 3px rgba(42,90,105,.15)} .ls .ls-knopf,.ls-wahl .ls-knopf{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:var(--r-m);font-size:12.5px;border:1px solid var(--linie-stark);background:#fff;color:var(--tinte);white-space:nowrap} .ls .ls-knopf:hover,.ls-wahl .ls-knopf:hover{border-color:var(--petrol-600)} .ls .ls-knopf.primaer,.ls-wahl .ls-knopf.primaer{background:var(--petrol-800);border-color:var(--petrol-800);color:#fff} /* H · W8 „Nächstes Nachfassen?" */ .ls .ls-weiter{border:1px solid var(--petrol-600);background:#F3F7F8;border-radius:var(--r-l);padding:9px 11px;margin:0 0 10px;position:relative;animation:ap-auf 180ms cubic-bezier(.2,.8,.2,1)} .ls .ls-w-kopf{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--petrol-700);font-weight:500;margin-bottom:7px;flex-wrap:wrap} .ls .ls-w-kopf>svg{width:13px;height:13px} .ls .ls-jetzt{font-weight:400;color:var(--tinte-3)} .ls .ls-w-kopf .ls-w-zu{margin-left:auto;width:24px;height:24px;color:var(--tinte-3)} .ls .ls-w-kopf .ls-w-zu:hover{background:#E4ECEE} .ls .ls-w-kopf .ls-w-zu svg{width:11px;height:11px} .ls .ls-w-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center} .ls .ls-w-chips .ls-grund{font-size:12px;padding:2px 10px} .ls .ls-w-schritt{display:flex;gap:8px;margin-top:8px;align-items:center} .ls .ls-w-schritt .ls-satz{flex:1;height:30px;margin:0;background:#fff} /* H · Schreibfeld */ .ls .ls-eingabe{position:sticky;bottom:0;z-index:20;background:#fff;border-top:1px solid var(--linie);padding:10px 14px 12px;border-radius:0 0 var(--r-l) var(--r-l)} .ls .ls-k-feld{display:flex;align-items:flex-end;border:1px solid var(--linie-stark);border-radius:var(--r-m);background:#fff} .ls .ls-k-feld:focus-within{border-color:var(--petrol-600);box-shadow:0 0 0 3px rgba(42,90,105,.15)} .ls .ls-k-feld.zieht{border-color:var(--petrol-600);background:var(--wahl-hover)} .ls .ls-k-feld textarea{flex:1;border:0;outline:0;resize:none;font-size:13.5px;padding:9px 12px;min-height:40px;background:none;line-height:1.45} .ls .ls-k-feld .ls-ik{margin:0 2px 5px 0} .ls .ls-k-feld .ls-senden{margin:0 5px 5px 2px;background:var(--petrol-800);color:#fff} .ls .ls-k-feld .ls-senden:hover{background:var(--petrol-700);color:#fff} .ls .ls-wartend{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px} .ls .ls-wartend[hidden]{display:none} .ls .ls-wanh{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;border:1px solid var(--linie);border-radius:var(--r-m);padding:2px 4px 2px 10px;background:#fff} .ls .ls-wanh small{color:var(--tinte-3)} .ls .ls-wanh button{width:20px;height:20px;border-radius:var(--r-s);color:var(--tinte-3)} .ls .ls-wanh button:hover{background:var(--hover);color:var(--tinte)} .ls .ls-k-tipp{font-size:11px;color:var(--tinte-3);margin-top:5px;display:flex;gap:12px;flex-wrap:wrap} .ls .ls-k-tipp kbd{font-family:var(--mono);font-size:10.5px;border:1px solid var(--linie);border-radius:4px;padding:0 4px} .ls .ls-fuss-luft{height:28px} /* Datum: der Wähler des Browsers, das Feld selbst bleibt unsichtbar */ .ls .ls-datum-k,.ls-wahl .ls-datum-k{position:relative;display:inline-flex} .ls .ls-datum-i,.ls-wahl .ls-datum-i{position:absolute;left:0;bottom:0;width:1px;height:1px;opacity:0;pointer-events:none;border:0;padding:0} .ls .ls-datum-i.ls-sichtbar,.ls-wahl .ls-datum-i.ls-sichtbar{position:static;width:auto;height:28px;opacity:1;pointer-events:auto;border:1px solid var(--linie-stark);border-radius:var(--r-m);padding:0 6px} /* Auswahlfenster: das der Aufgaben, mit Inhalt für Verloren, Gewonnen, Nachfassen, Angebot */ .ls-wahl .ls-wahl-titel{font-size:12px;color:var(--tinte-3);padding:4px 8px 6px} .ls-wahl .ls-wahl-fussnote{border-top:1px solid var(--linie);margin-top:4px;padding-top:8px} .ls-wahl .ap-wahl-option>svg{width:14px;height:14px;color:var(--tinte-3)} .ls-wahl .ls-leise{color:var(--tinte-3)} .ls-wahl.ls-breit{width:340px;padding:12px} .ls-wahl.ls-breit .ls-wahl-titel{padding:0 0 8px} .ls-wahl p{margin:0 0 10px;font-size:13px;color:var(--tinte-2);line-height:1.5} .ls-wahl p b{color:var(--tinte);font-weight:600} .ls-wahl .ls-gruende,.ll-dlg .ls-gruende{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px} .ls .ls-grund,.ls-wahl .ls-grund,.ll-dlg .ls-grund{font-size:12.5px;border:1px solid var(--linie-stark);border-radius:999px;padding:3px 11px;background:#fff} .ls .ls-grund:hover,.ls-wahl .ls-grund:hover,.ll-dlg .ls-grund:hover{border-color:var(--petrol-600)} .ls .ls-grund.an,.ls-wahl .ls-grund.an,.ll-dlg .ls-grund.an{background:var(--petrol-800);border-color:var(--petrol-800);color:#fff} .ls .ls-satz,.ls-wahl .ls-satz{width:100%;height:32px;border:1px solid var(--linie-stark);border-radius:var(--r-m);padding:0 10px;font-size:13px;margin-bottom:10px;outline:0} .ls .ls-satz:focus,.ls-wahl .ls-satz:focus{border-color:var(--petrol-600);box-shadow:0 0 0 3px rgba(42,90,105,.15)} .ls-wahl .ls-wahl-fuss{display:flex;gap:8px;justify-content:flex-end;align-items:center} .ls-wahl .ls-links{margin-right:auto;font-size:12.5px;color:var(--tinte-3)} .ls-wahl .ls-links:hover{color:var(--petrol-700);text-decoration:underline;text-underline-offset:3px} .ls-wahl .ls-wahl-fuss .ls-datum-k{margin-right:auto} .ls-wahl .ls-wahl-fuss .ls-datum-k .ls-links{margin-right:0} .ls-wahl .ls-kasten{border:1px solid var(--linie);border-radius:var(--r-m);padding:8px 10px;margin-bottom:10px;font-size:12.5px;color:var(--tinte-2);display:grid;gap:2px} .ls-wahl .ls-kasten b{color:var(--tinte);font-weight:500} /* #275 W6: die offenen Anfragen des Kunden in einer Zeile über den Projekten */ .kd-anfragen{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:14px 0 4px;font-size:13px} .kd-anfragen-et{font-size:11.5px;color:var(--tinte-3)} .kd-anfrage{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--linie);border-radius:var(--r-m);padding:3px 10px;background:#fff;color:var(--tinte);text-decoration:none} .kd-anfrage:hover{border-color:var(--petrol-600)} .kd-anfrage b{font-weight:500} .kd-anfrage-st{font-size:11.5px;color:var(--tinte-3)} .kd-anfrage-nf{font-size:11.5px;color:var(--tinte-2)} .kd-anfrage-nf.faellig{color:var(--koralle-700);font-weight:500} /* ===== Lead-Schnellansicht (#275 Etappe 2) ===== */ /* Nach concept/mockups/lead-schnellansicht-v3.html. Dieselbe Wurzel .ls wie die Leadseite, dazu .lsp: Kopf oben, Inhalt rollt (steht beim Öffnen unten), Schreibfeld fest unten. */ .panel.lsp-panel{width:58%;max-width:780px;min-width:min(520px,100%)} .ls.lsp{display:flex;flex-direction:column;height:100%;min-height:0} .lsp .lsp-kopf{display:flex;align-items:center;gap:4px;padding:10px 16px;border-bottom:1px solid var(--linie);background:#FAFAF8;min-height:53px;flex:none} .lsp .lsp-kopf .ls-ik:disabled{opacity:.35;cursor:default;background:none} .lsp .lsp-zaehl{font-size:12.5px;color:var(--tinte-3);margin:0 6px;font-variant-numeric:tabular-nums} .lsp .lsp-tuer{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--linie-stark);border-radius:999px;padding:4px 12px;font-size:12.5px; color:var(--petrol-700);min-height:32px;margin-left:auto;text-decoration:none} .lsp .lsp-tuer:hover{border-color:var(--petrol-600);background:var(--wahl-hover)} .lsp .lsp-tuer svg{width:12px;height:12px} .lsp .lsp-inhalt{flex:1;min-height:0;overflow:auto;padding:20px 26px 14px;display:flex;flex-direction:column;gap:14px;position:relative} .lsp .ls-titel{align-items:flex-start} .lsp .ls-lmarke{width:44px;height:44px;border-radius:12px} .lsp .ls-lmarke svg{width:20px;height:20px} .lsp .ls-titel h1{font-size:21px;font-weight:650;letter-spacing:-.005em;line-height:1.25} .lsp .ls-titel h1 input{font-size:21px;font-weight:650} .lsp .ls-t-z2{font-size:13.5px} .lsp .ls-knoepfe{width:100%;padding-left:58px;margin-top:-4px} .lsp .ls-akt{height:32px;padding:0 12px;font-size:13px} .lsp .ls-akt svg{width:14px;height:14px} .lsp .ls-angaben{grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--linie)} @media (max-width:1100px){.lsp .ls-angaben{grid-template-columns:repeat(2,minmax(0,1fr))}} .lsp .lsp-verlauf{display:flex;flex-direction:column;gap:12px} .lsp .lsp-verlauf .ls-v-kopf{padding:0;border:0;margin-top:6px} .lsp .lsp-verlauf .ls-v-kopf h2{font-size:11px} .lsp .lsp-ganz{margin-left:auto;font-size:12.5px;color:var(--petrol-700);text-decoration:none} .lsp .lsp-ganz:hover{text-decoration:underline;text-underline-offset:3px} .lsp .ls-strang{padding:0;gap:12px} .lsp .lsp-aelter{align-self:center;font-size:12.5px;color:var(--petrol-700);border:1px solid var(--linie);border-radius:999px;padding:2px 12px;background:#fff} .lsp .lsp-aelter:hover{border-color:var(--petrol-600)} .lsp .ls-eingabe.lsp-eingabe{position:static;flex:none;border-radius:0;padding:12px 26px 14px} .lsp .ls-k-feld textarea{font-size:14px;max-height:140px} .lsp .lsp-entwurf{font-size:11.5px;color:var(--koralle-700);margin-left:auto} .lsp .lsp-entwurf[hidden]{display:none} @media (max-width:700px){.panel.lsp-panel{width:100%;min-width:0}.lsp .lsp-inhalt{padding:16px}.lsp .ls-eingabe.lsp-eingabe{padding:10px 16px 12px}.lsp .ls-knoepfe{padding-left:0}} /* ===== Kontakt-Schnellansicht (#268) ===== */ /* Werte aus concept/mockups/kontakt-schnellansicht-v3.html. Alles haengt an der Wurzel .ksa — im Panel ist das #panel-wurzel selbst. Die Mockup-Namen (.titel, .ang, .tag …) gibt es im Prototyp mehrfach, deshalb das Praefix; das Auswahlfenster am body ist das der Seite (.kts-wahl). Aufbau wie die Projekt-Schnellansicht: Kopf fest, der Inhalt rollt, das Schreibfeld steht am Fuss. */ .ksa{--ksa-hover:#F2F4F2;--ksa-wahl-hover:#EAF0F1} /* Nur die eigenen Knoepfe zuruecksetzen; :where haelt die Gewichtung niedrig, damit .ksa .ksa-akt & Co. ihren Rahmen behalten. */ .ksa :where(button[class*="ksa-"]){font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0;touch-action:manipulation} .ksa svg{flex:none} .ksa :where([class*="ksa-"]):focus-visible{outline:2px solid var(--koralle-400);outline-offset:1px} /* A · Kopf */ .ksa .ksa-kopf{display:flex;align-items:center;gap:4px;padding:10px 16px;border-bottom:1px solid var(--linie);background:#FAFAF8;min-height:53px;flex:none} .ksa .ksa-ik{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-s);color:var(--tinte-2)} .ksa .ksa-ik:hover:not(:disabled){background:#ECEEEA;color:var(--tinte)} .ksa .ksa-ik:disabled{opacity:.35;cursor:default} .ksa .ksa-ik svg{width:16px;height:16px} .ksa .ksa-zaehl{font-size:12.5px;color:var(--tinte-3);margin:0 6px;font-variant-numeric:tabular-nums} .ksa .ksa-tuer{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--linie-stark);border-radius:999px;padding:4px 12px;font-size:12.5px;color:var(--petrol-700);min-height:32px;margin-left:auto;background:var(--weiss)} .ksa .ksa-tuer:hover{border-color:var(--petrol-600);background:var(--ksa-wahl-hover)} .ksa .ksa-tuer svg{width:12px;height:12px} .ksa .ksa-inhalt{flex:1;min-height:0;overflow:auto;padding:20px 26px 14px;display:flex;flex-direction:column;gap:14px} /* B · Titel */ .ksa .ksa-titel{display:flex;align-items:flex-start;gap:14px} .ksa .ksa-foto{width:56px;height:56px;border-radius:50%;flex:none;position:relative;display:flex;align-items:center;justify-content:center; background:var(--petrol-600) center/cover no-repeat;color:#fff;font-size:19px;font-weight:600;cursor:pointer;transition:box-shadow .15s} .ksa .ksa-foto:hover::after,.ksa .ksa-foto.ksa-ziel::after{content:"";position:absolute;inset:0;border-radius:50%;background:rgba(16,38,46,.35)} .ksa .ksa-foto .ksa-kam{position:absolute;inset:0;display:none;align-items:center;justify-content:center;z-index:1} .ksa .ksa-foto:hover .ksa-kam,.ksa .ksa-foto:focus-visible .ksa-kam{display:flex} .ksa .ksa-foto .ksa-kam svg{width:18px;height:18px} .ksa .ksa-foto.ksa-ziel{box-shadow:0 0 0 3px var(--koralle-400)} .ksa .ksa-foto.ksa-nur{cursor:default} .ksa .ksa-foto.ksa-nur:hover::after{display:none} .ksa .ksa-text{min-width:0;flex:1} .ksa .ksa-z1{display:flex;align-items:center;gap:6px;flex-wrap:wrap} .ksa .ksa-titel h2{margin:0;font-size:21px;font-weight:650;letter-spacing:-.005em;line-height:1.25} .ksa .ksa-stern{width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-m);color:var(--linie-stark)} .ksa .ksa-stern svg{width:16px;height:16px;fill:currentColor} .ksa .ksa-stern.ksa-an{color:var(--koralle-600)} .ksa button.ksa-stern:hover{background:var(--ksa-hover);color:var(--koralle-400)} .ksa button.ksa-stern.ksa-an:hover{color:var(--koralle-700)} .ksa .ksa-geb{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;color:var(--koralle-700);background:var(--koralle-100);border-radius:999px;padding:1px 9px} .ksa .ksa-geb svg{width:12px;height:12px} .ksa .ksa-z2{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:2px;font-size:13.5px;color:var(--tinte-2)} .ksa .ksa-kmarke{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--linie-stark);border-radius:999px;background:#fff;font-size:12.5px;padding:1px 9px;color:var(--tinte)} .ksa .ksa-punkt{width:7px;height:7px;border-radius:50%;background:var(--ok)} .ksa .ksa-punkt.ksa-ruht{background:var(--warn)} .ksa .ksa-punkt.ksa-ehem{background:var(--tinte-3)} .ksa .ksa-knoepfe{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap} .ksa .ksa-akt{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--linie-stark);border-radius:var(--r-m);padding:0 12px;height:32px;font-size:13px;background:#fff;white-space:nowrap} .ksa .ksa-akt:hover{border-color:var(--petrol-600)} .ksa .ksa-akt.ksa-signal{background:var(--koralle-400);border-color:var(--koralle-400);color:#fff;font-weight:500} .ksa .ksa-akt.ksa-signal:hover{background:#F2714F} .ksa .ksa-akt .ksa-nr{font-family:var(--mono);font-size:12px} .ksa .ksa-akt svg{width:14px;height:14px} .ksa .ksa-akt.ksa-nachtragen{border-style:dashed;border-color:var(--koralle-400);color:var(--koralle-700)} /* C · Merkzettel */ .ksa .ksa-notiz{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--tinte-2);min-height:26px} .ksa .ksa-notiz svg{width:13px;height:13px;color:var(--koralle-700)} .ksa .ksa-notiz-text{white-space:pre-wrap} .ksa .ksa-leise{color:var(--tinte-3)} .ksa .ksa-leise{display:inline-flex;align-items:center;gap:6px} .ksa .ksa-leise svg{color:currentColor;width:11px;height:11px} /* D · Angaben */ .ksa .ksa-angaben{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)} .ksa .ksa-ang{display:flex;flex-direction:column;justify-content:center;gap:1px;min-height:50px;padding:5px 8px;border-radius:var(--r-m);text-align:left;min-width:0} .ksa .ksa-ang[role="button"]{cursor:pointer} .ksa .ksa-ang[role="button"]:hover,.ksa .ksa-ang.ksa-offen{background:var(--ksa-hover)} .ksa .ksa-ang.ksa-offen{box-shadow:inset 0 -2px 0 var(--petrol-600)} .ksa .ksa-et{font-size:11px;color:var(--tinte-3);display:flex;align-items:center;gap:5px} .ksa .ksa-et svg{width:10px;height:10px} .ksa .ksa-w{font-size:13.5px;display:flex;align-items:center;gap:6px;min-width:0;white-space:nowrap;overflow:hidden} .ksa .ksa-w.ksa-mono{font-family:var(--mono);font-size:12px} .ksa .ksa-txt{overflow:hidden;text-overflow:ellipsis} .ksa .ksa-fehlt{color:var(--koralle-700);font-weight:500;display:inline-flex;align-items:center;gap:5px;font-family:var(--sans);font-size:13px} .ksa .ksa-fehlt svg{width:10px;height:10px} .ksa .ksa-ang.ksa-gesperrt{cursor:help} .ksa .ksa-ang .ie-input{width:100%!important;height:28px} .ksa .ksa-gespeichert{display:inline-flex;align-items:center;color:var(--ok);animation:ksa-blitz 1.6s ease forwards} .ksa .ksa-gespeichert svg{width:12px;height:12px} @keyframes ksa-blitz{0%{opacity:0}15%{opacity:1}75%{opacity:1}100%{opacity:0}} .ksa .ksa-recht{font-size:12px;color:var(--tinte-3);display:flex;gap:6px;align-items:center;margin-top:-6px} .ksa .ksa-recht svg{width:12px;height:12px;flex:none} /* E · Tags und Herkunft */ .ksa .ksa-einord{display:flex;align-items:center;gap:6px;flex-wrap:wrap} .ksa .ksa-tag{display:inline-flex;align-items:center;gap:4px;font-size:12px;border-radius:999px;padding:1px 5px 1px 9px;font-weight:500} .ksa .ksa-tag.ksa-nur{padding-right:9px} .ksa .ksa-tag .ksa-weg{width:15px;height:15px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;opacity:.55;color:inherit} .ksa .ksa-tag .ksa-weg:hover,.ksa .ksa-tag .ksa-weg:focus-visible{opacity:1;background:rgba(0,0,0,.08)} .ksa .ksa-tag .ksa-weg svg{width:8px;height:8px} .ksa .ksa-tag-plus{display:inline-flex;align-items:center;gap:4px;font-size:12px;border:1px dashed var(--linie-stark);border-radius:999px;padding:1px 9px;color:var(--petrol-700)} .ksa .ksa-tag-plus:hover{border-color:var(--petrol-600);background:var(--ksa-wahl-hover)} .ksa .ksa-tag-plus svg{width:10px;height:10px} .ksa .ksa-herk{margin-left:auto;font-size:12px;color:var(--tinte-3);display:inline-flex;align-items:center;gap:5px} .ksa .ksa-herk b{font-weight:500;color:var(--tinte-2)} .ksa .ksa-herk svg{width:12px;height:12px} /* F · Verlauf: die letzten drei Beitraege, Aenderungszeilen, Monatstrenner */ .ksa .ksa-strang{display:flex;flex-direction:column;gap:12px} .ksa .ksa-v-kopf{display:flex;align-items:center;gap:10px;margin-top:6px} .ksa .ksa-v-kopf h3{margin:0;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.12em} .ksa .ksa-v-zahl{font-size:12px;color:var(--tinte-3)} .ksa .ksa-ganz{margin-left:auto;font-size:12.5px;color:var(--petrol-700)} .ksa .ksa-ganz:hover,.ksa .ksa-ganz:focus-visible{text-decoration:underline;text-underline-offset:3px} .ksa .ksa-aelter{align-self:center;font-size:12.5px;color:var(--petrol-700);border:1px solid var(--linie);border-radius:999px;padding:2px 12px;background:#fff} .ksa .ksa-aelter:hover{border-color:var(--petrol-600)} .ksa .ksa-monat{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--tinte-3);display:flex;align-items:center;gap:10px} .ksa .ksa-monat::before,.ksa .ksa-monat::after{content:"";flex:1;height:1px;background:var(--linie)} .ksa .ksa-ereignis{display:flex;gap:10px;font-size:12px;color:var(--tinte-3);align-items:baseline} .ksa .ksa-ereignis i{width:28px;display:flex;justify-content:center;flex:none} .ksa .ksa-ereignis i::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--linie-stark);transform:translateY(-2px)} .ksa .ksa-ereignis b{color:var(--tinte-2);font-weight:500} .ksa .ksa-alt{text-decoration:line-through;text-decoration-color:var(--linie-stark)} .ksa .ksa-beitrag{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;position:relative} .ksa .ksa-av{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;color:#fff;background:var(--petrol-600);flex:none;margin-top:1px} .ksa .ksa-av.ksa-av-klein{width:22px;height:22px;font-size:9px} .ksa .ksa-rumpf{flex:1;min-width:0} .ksa .ksa-b-kopf{font-size:12px;color:var(--tinte-3);display:flex;gap:8px;align-items:center;flex-wrap:wrap} .ksa .ksa-b-kopf b{color:var(--tinte);font-weight:600;font-size:13px} .ksa .ksa-typ{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;color:var(--petrol-700);background:var(--ksa-wahl-hover);border-radius:999px;padding:0 8px} .ksa .ksa-typ svg{width:11px;height:11px} .ksa .ksa-blase{background:#F4F5F2;border-radius:4px var(--r-l) var(--r-l) var(--r-l);padding:7px 11px;margin-top:3px;white-space:pre-wrap;overflow-wrap:anywhere;display:inline-block;max-width:100%} .ksa .ksa-beitrag.ksa-eigen>.ksa-rumpf>.ksa-blase{background:var(--koralle-100)} .ksa .ksa-b-anh{display:flex;gap:6px;flex-wrap:wrap;margin-top:5px} .ksa .ksa-anh-bild{width:72px;height:54px;border-radius:var(--r-m);border:1px solid var(--linie);background:#F4F5F2 center/cover no-repeat;overflow:hidden} .ksa .ksa-anh-bild img{width:100%;height:100%;object-fit:cover;display:block} .ksa .ksa-anhang{display:inline-flex;align-items:center;gap:5px;font-size:12px;border:1px solid var(--linie);border-radius:var(--r-m);padding:3px 9px;color:var(--tinte-2);background:#fff} .ksa .ksa-anhang:hover{border-color:var(--petrol-600)} .ksa .ksa-anhang svg{width:12px;height:12px} .ksa .ksa-b-fuss{display:flex;gap:12px;margin-top:3px;font-size:12px} .ksa .ksa-b-antw{color:var(--tinte-3)} .ksa .ksa-b-antw:hover,.ksa .ksa-b-antw:focus-visible{color:var(--petrol-700);text-decoration:underline;text-underline-offset:3px} .ksa .ksa-antworten{margin:8px 0 0;padding-left:12px;border-left:2px solid var(--linie);display:flex;flex-direction:column;gap:8px} .ksa .ksa-a-feld{display:flex;gap:8px;align-items:flex-end} .ksa .ksa-a-feld textarea{flex:1;border:1px solid var(--petrol-600);border-radius:var(--r-m);padding:5px 10px;font-size:13px;resize:none;min-height:32px;box-shadow:0 0 0 3px rgba(42,90,105,.15);outline:0;font-family:inherit} .ksa .ksa-leer{color:var(--tinte-3);font-size:13px;padding:6px 0 0;text-align:center} /* G · Schreibfeld am Fuss; Telefonat-Zeile darueber */ .ksa .ksa-eingabe{flex:none;border-top:1px solid var(--linie);padding:12px 26px 14px;background:#fff;position:relative;transition:box-shadow var(--rein)} .ksa .ksa-eingabe:empty{display:none} .ksa .ksa-eingabe.ksa-zieht{box-shadow:inset 0 0 0 2px var(--koralle-400)} .ksa .ksa-telefonat{border:1px solid var(--koralle-400);background:#FFF8F5;border-radius:var(--r-l);padding:9px 11px;margin:0 0 10px} .ksa .ksa-tel-kopf{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--koralle-700);font-weight:500} .ksa .ksa-tel-kopf svg{width:13px;height:13px;flex:none} .ksa .ksa-uhr{font-family:var(--mono);font-size:12px} .ksa .ksa-tel-punkt{width:8px;height:8px;border-radius:50%;background:var(--koralle-600);flex:none;animation:ksa-puls 1.4s ease infinite} .ksa .ksa-tel-punkt.ksa-steht{animation:none;opacity:.5} @keyframes ksa-puls{50%{opacity:.25}} .ksa .ksa-tel-r{margin-left:auto;display:flex;gap:8px} .ksa .ksa-telefonat textarea{width:100%;margin-top:8px;border:1px solid var(--linie-stark);border-radius:var(--r-m);padding:7px 10px;font-size:13px;resize:vertical;min-height:52px;background:#fff;font-family:inherit;outline:0} .ksa .ksa-telefonat textarea:focus{border-color:var(--petrol-600);box-shadow:0 0 0 3px rgba(42,90,105,.15)} .ksa .ksa-knopf-k{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:var(--r-m);font-size:12.5px;border:1px solid var(--linie-stark);background:#fff;color:var(--tinte)} .ksa .ksa-knopf-k:hover{border-color:var(--petrol-600)} .ksa .ksa-knopf-k.ksa-primaer{background:var(--petrol-800);border-color:var(--petrol-800);color:#fff} .ksa .ksa-k-feld{display:flex;align-items:flex-end;border:1px solid var(--linie-stark);border-radius:var(--r-m);background:#fff;transition:border-color var(--rein),box-shadow var(--rein)} .ksa .ksa-k-feld:focus-within{border-color:var(--petrol-600);box-shadow:0 0 0 3px rgba(42,90,105,.15)} .ksa .ksa-k-feld textarea{flex:1;border:0;outline:0;resize:none;font-size:14px;padding:9px 12px;min-height:40px;max-height:140px;background:none;line-height:1.45;font-family:inherit} .ksa .ksa-k-feld .ksa-ik{margin:0 2px 4px 0} .ksa .ksa-k-feld .ksa-ik[aria-disabled="true"]{opacity:.45;cursor:help} .ksa .ksa-k-feld .ksa-senden{margin:0 4px 4px 2px;background:var(--petrol-800);color:#fff} .ksa .ksa-k-feld .ksa-senden:hover{background:var(--petrol-700);color:#fff} .ksa .ksa-k-anh{display:flex;gap:6px;flex-wrap:wrap} .ksa .ksa-k-anh:not(:empty){margin-top:6px} .ksa .ksa-wartend{display:inline-flex;align-items:center;gap:5px;font-size:12px;border:1px solid var(--linie);border-radius:999px;padding:1px 4px 1px 9px;background:#F4F5F2} .ksa .ksa-wartend small{color:var(--tinte-3)} .ksa .ksa-wartend svg{width:11px;height:11px} .ksa .ksa-w-weg{width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--tinte-3)} .ksa .ksa-w-weg:hover,.ksa .ksa-w-weg:focus-visible{background:rgba(0,0,0,.08);color:var(--tinte)} .ksa .ksa-k-tipp{font-size:11px;color:var(--tinte-3);margin-top:5px;display:flex;gap:12px;flex-wrap:wrap} .ksa .ksa-k-tipp kbd{font-family:var(--mono);font-size:10.5px;border:1px solid var(--linie);border-radius:4px;padding:0 4px} .ksa .ksa-entwurf{font-size:11.5px;color:var(--koralle-700);margin-left:auto} @media (max-width:1100px){.ksa .ksa-angaben{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (prefers-reduced-motion:reduce){.ksa *,.ksa{transition:none!important;animation:none!important}} /* ===== Kontaktliste (#268) ===== */ /* Etappe 3, Mockup kontaktliste-v3: Werkleiste und Sammelleiste, Zeile mit zwei Ebenen, Gruppe „Neu" in Koralle. Wurzel .kl am Rahmen der Liste; die Liste selbst bleibt LW-Markup (.zeile, .g-kopf, .tags). Das Tag-Fenster ist das der Kontaktseite (.kts-wahl am body). */ .kl .kl-werk,.kl .kl-sammel{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:7px 10px;min-height:50px;margin-bottom:8px;border:1px solid var(--linie);border-radius:var(--r-l);background:#fff} .kl .kl-werk[hidden],.kl .kl-sammel[hidden]{display:none} /* #307: Alle 1.900 Zeilen stehen im Markup, das Listenwerkzeug filtert und gruppiert darauf. Gerechnet werden nur die, die ins Bild kommen — das Layout beim Öffnen fiel von 260 auf 25 ms. Die 52px sind die Höhe einer Zeile; `auto` merkt sich danach die echte. */ .kl .t-kt > .zeile{content-visibility:auto;contain-intrinsic-size:auto 52px} .kl .kl-such{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--linie-stark);border-radius:var(--r-m);padding:4px 8px;background:#fff} .kl .kl-such:focus-within{border-color:var(--petrol-600)} .kl .kl-such input{border:0;outline:0;background:none;width:200px;font-size:13px;padding:1px 0;font-family:inherit} .kl .kl-such svg{width:14px;height:14px;color:var(--tinte-3)} .kl .kl-wz{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:var(--r-m);font-size:13px;color:var(--tinte-2);white-space:nowrap;border:0;background:none;cursor:pointer;font-family:inherit} .kl .kl-wz svg{width:14px;height:14px} .kl .kl-wz:hover,.kl .kl-wz[aria-expanded="true"]{background:#EEF0EC;color:var(--tinte)} .kl .kl-filter{display:inline-flex;flex-wrap:wrap;gap:4px} .kl .kl-chip{font-size:12.5px;padding:3px 5px 3px 10px;gap:4px} .kl .kl-chip button{width:16px;height:16px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;opacity:.6;border:0;background:none;color:inherit;cursor:pointer;padding:0} .kl .kl-chip button:hover,.kl .kl-chip button:focus-visible{opacity:1;background:rgba(0,0,0,.08)} .kl .kl-chip svg{width:9px;height:9px} .kl .kl-sammel{background:#EAF0F1} .kl .kl-zahl{font-weight:600;font-size:13.5px;padding:0 8px 0 4px} .kl .kl-sk{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:var(--r-m);font-size:13px;background:#fff;border:1px solid var(--linie-stark);color:var(--tinte);cursor:pointer;font-family:inherit} .kl .kl-sk:hover{border-color:var(--petrol-600)} .kl .kl-sk svg{width:13px;height:13px} .kl .kl-sk.kl-weg{color:var(--stop)} .kl .kl-sk:disabled{opacity:.5;cursor:default;border-color:var(--linie-stark)} .kl .kl-hinweis{font-size:12px;color:var(--tinte-3)} .kl .kl-aufheben{margin-left:auto;font-size:13px;color:var(--tinte-2);padding:6px 10px;border-radius:var(--r-m);border:0;background:none;cursor:pointer;font-family:inherit} .kl .kl-aufheben:hover{background:rgba(0,0,0,.05)} .kl .zeile{height:auto;min-height:52px} .kl .zeile.kl-gewaehlt{background:#EEF4F5} .kl .zeile .kav{width:32px;height:32px;font-size:11px} .kl .kl-tx{min-width:0;display:flex;flex-direction:column;line-height:1.3} .kl .kl-t{display:flex;align-items:center;gap:6px;min-width:0} .kl .kl-k{font-size:12.5px;color:var(--tinte-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .kl .kl-leer{color:var(--tinte-3)} .kl .kl-firma{min-width:0;display:flex;flex-direction:column;line-height:1.3;font-size:13px} .kl .kl-firma .fma{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .kl .kl-kd{font-size:12px;color:var(--tinte-3);display:flex;align-items:center;gap:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .kl .kl-kd:empty{display:none} .kl .kl-kd i{width:6px;height:6px;border-radius:50%;background:var(--ok);flex:none} .kl .kl-tel{font-family:var(--mono);font-size:12.5px;white-space:nowrap} .kl .kl-fehlt{color:var(--koralle-700);font-size:12.5px} .kl .kl-tags{min-height:30px;border-radius:var(--r-m);padding:2px 4px;margin:0 -4px} .kl .kl-darf:hover,.kl .kl-darf:focus-visible{background:#fff;box-shadow:inset 0 0 0 1px var(--linie-stark)} .kl .kl-tags:not(.kl-darf){cursor:help} .kl .kl-plus{font-size:12px;color:var(--petrol-700);opacity:0;display:inline-flex;align-items:center;gap:3px;flex:none} .kl .kl-plus svg{width:10px;height:10px} .kl .zeile:hover .kl-plus,.kl .kl-darf:focus-visible .kl-plus{opacity:1} .kl .zeile .erst{font-family:inherit;font-size:12.5px;color:var(--tinte-3)} .kl .zeile .erst.kl-frisch{color:var(--koralle-700);font-weight:500} .kl .kl-akt .kl-ok:hover{background:var(--ok-100);color:var(--ok);border-color:var(--ok)} .kl .kl-grp[data-lw-gruppe="neu"]{background:#FFF3EE;color:var(--koralle-700)} .kl .kl-grp[data-lw-gruppe="neu"] .n{color:var(--koralle-700)} .kl .kl-erkl{margin-left:auto;font-size:12px;color:var(--tinte-3)} .kl .zeile.kl-raus{animation:kl-raus .32s ease forwards} @keyframes kl-raus{to{opacity:0;transform:translateX(16px)}} .kl .zeile.kl-rein{animation:kl-rein .5s ease} @keyframes kl-rein{from{background:#FFE8E1}to{background:transparent}} .kl .kl-fuss{display:flex;align-items:center;gap:14px;padding:11px 16px;font-size:13px;color:var(--tinte-2);flex-wrap:wrap} .kl .kl-rest{color:var(--tinte-3)} /* Aufgabe 12: Geburtstag am Namen, Foto auf die Zeile ziehen, Tag-Feld im Anlege-Panel (.kl am Feld). */ .kl .kl-geb{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:500;color:var(--koralle-700);background:var(--koralle-100);border-radius:999px;padding:0 7px;flex:none;white-space:nowrap} .kl .kl-geb svg{width:11px;height:11px} .kl .zeile.kl-ziel{box-shadow:inset 0 0 0 2px var(--koralle-400);background:#FFF8F5} .kl .kl-tagfeld{display:flex;flex-wrap:wrap;gap:4px;align-items:center;min-height:36px;border:1px solid var(--linie-stark);border-radius:var(--r-m);padding:4px 6px;background:#fff} .kl .kl-tp{font-size:12.5px;color:var(--petrol-700);display:inline-flex;align-items:center;gap:3px;padding:2px 6px;border-radius:var(--r-s);border:0;background:none;cursor:pointer;font-family:inherit} .kl .kl-tp:hover,.kl .kl-tp[aria-expanded="true"]{background:#EAF0F1} .kl .kl-tp svg{width:10px;height:10px} @media (max-width:1100px){.kl .kl-such input{width:150px}.kl .kl-erkl{display:none}} @media (prefers-reduced-motion:reduce){.kl *,.kl{transition:none!important;animation:none!important}} /* ===== Leadliste (#275 Etappe 3) ===== */ /* Nach concept/mockups/leadliste-v3.html (ADR-0067). Wurzel .ll (neben .pl2 für Kopf und Schrift), Dialoge .ll-dlg, Fenster .ls-wahl.ll-w; alle eigenen Klassen mit Vorsatz ll-. */ .ll .ll-neu svg{width:14px;height:14px} .ll .ll-karte{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r-l);box-shadow:0 1px 2px rgba(25,28,24,.04);position:relative} /* Werkleiste */ .ll .ll-werk{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:7px 10px;min-height:50px;border-bottom:1px solid var(--linie)} .ll .ll-chips{display:flex;gap:4px;flex-wrap:wrap} .ll .ll-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;font-size:13px;color:var(--tinte-2);border:1px solid transparent} .ll .ll-chip:hover{background:#EEF0EC;color:var(--tinte)} .ll .ll-chip.an{background:var(--petrol-800);color:#fff} .ll .ll-chip .n{font-size:11.5px;opacity:.75;font-variant-numeric:tabular-nums} .ll .ll-chip.mahnt .n{background:var(--koralle-400);color:#fff;opacity:1;border-radius:999px;padding:0 6px;font-weight:600} .ll .ll-strich{width:1px;height:22px;background:var(--linie);margin:0 4px} .ll .ll-such{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--linie-stark);border-radius:var(--r-m);padding:4px 8px;background:#fff} .ll .ll-such:focus-within{border-color:var(--petrol-600)} .ll .ll-such input{border:0;outline:0;background:none;width:200px;font-size:13px;padding:1px 0;height:auto;box-shadow:none} .ll .ll-such svg{width:14px;height:14px;color:var(--tinte-3)} .ll .ll-rechts{margin-left:auto;display:flex;gap:2px;align-items:center} .ll .ll-wz{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:var(--r-m);font-size:13px;color:var(--tinte-2);white-space:nowrap} .ll .ll-wz svg{width:14px;height:14px} .ll .ll-wz:hover{background:#EEF0EC;color:var(--tinte)} /* Sammelleiste: ersetzt die Werkleiste, sobald etwas angehakt ist */ .ll .ll-sammel{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:7px 10px;min-height:50px;border-bottom:1px solid var(--linie);background:#EAF0F1;border-radius:var(--r-l) var(--r-l) 0 0} .ll .ll-sammel .ll-zahl{font-weight:600;font-size:13.5px;padding:0 8px 0 4px} .ll .ll-sk{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:var(--r-m);font-size:13px;background:#fff;border:1px solid var(--linie-stark)} .ll .ll-sk:hover{border-color:var(--petrol-600)} .ll .ll-sk svg{width:13px;height:13px} .ll .ll-sk.weg{color:var(--stop)} .ll .ll-aufheben{margin-left:auto;font-size:13px;color:var(--tinte-2);padding:6px 10px;border-radius:var(--r-m)} .ll .ll-aufheben:hover{background:rgba(0,0,0,.05)} /* Tabelle: die Spuren setzt die Spaltenwahl */ .ll .ll-tabelle{overflow-x:auto} .ll .ll-raster{min-width:var(--ll-breite,1150px)} @media (min-width:1100px){.ll .ll-tabelle{overflow:visible}.ll .ll-raster{min-width:0}} .ll .ll-zk,.ll .ll-z{display:grid;grid-template-columns:var(--ll-spuren);align-items:center;column-gap:12px;padding:0 12px 0 10px} .ll .ll-zk{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--tinte-3);height:36px;border-bottom:1px solid var(--linie); position:sticky;top:0;z-index:3;background:#FBFBF8;white-space:nowrap} .ll .ll-sb{display:inline-flex;align-items:center;gap:4px;text-transform:uppercase;letter-spacing:.1em;font-family:var(--mono);font-size:10.5px;color:var(--tinte-3);text-align:left;justify-self:start} .ll .ll-sb:hover{color:var(--tinte)} .ll .ll-sb.an{color:var(--petrol-700)} .ll .ll-sb svg{width:10px;height:10px} .ll .ll-re-k{justify-self:end} .ll .ll-grp{display:flex;align-items:center;gap:8px;width:100%;white-space:nowrap;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; padding:0 14px;height:40px;background:#F1F2EE;border-bottom:1px solid var(--linie)} .ll .ll-grp .n{font-weight:500;color:var(--tinte-3);letter-spacing:.02em;text-transform:none} .ll .ll-grp .ls-stz{font-family:var(--sans);letter-spacing:0;text-transform:none;font-size:11.5px;padding:1px 9px 1px 8px} .ll .ll-grp.leer-g{color:var(--tinte-3)} .ll .ll-erkl{margin-left:auto;font-family:var(--sans);font-weight:400;letter-spacing:0;text-transform:none;font-size:12px;color:var(--tinte-3)} .ll .ll-plus{margin-left:6px;width:22px;height:22px;border-radius:var(--r-s);display:inline-flex;align-items:center;justify-content:center;color:var(--petrol-700);opacity:.7} .ll .ll-plus:hover{background:#E4E7E1;opacity:1} .ll .ll-plus svg{width:11px;height:11px} /* Zeile */ .ll .ll-z{min-height:52px;border-bottom:1px solid var(--linie);position:relative;cursor:pointer;transition:background .12s} .ll .ll-z:hover{background:var(--hover);box-shadow:inset 2px 0 0 var(--petrol-600)} .ll .ll-z:focus-visible{outline:2px solid var(--koralle-400);outline-offset:-2px} .ll .ll-z.gewaehlt{background:#EEF4F5} .ll .ll-z.ll-rein{animation:ll-rein .5s ease} @keyframes ll-rein{from{background:#FFE8E1}to{background:transparent}} .ll .ll-hk{width:18px;height:18px;border-radius:4px;border:1.5px solid #B9BDB4;display:inline-flex;align-items:center;justify-content:center;background:#fff;opacity:0} .ll .ll-z:hover .ll-hk,.ll .ll-z:focus-visible .ll-hk,.ll .ll-hk.an,.ll .ll-zk .ll-hk,.ll .ll-hk:focus-visible{opacity:1} .ll .ll-hk.an,.ll .ll-hk.halb{background:var(--petrol-700);border-color:var(--petrol-700);color:#fff} .ll .ll-hk svg{width:11px;height:11px} .ll .ll-anf{display:flex;flex-direction:column;min-width:0;line-height:1.3} .ll .ll-t{font-size:14px;font-weight:500;display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden} .ll .ll-sn{overflow:hidden;text-overflow:ellipsis} .ll .ll-u{font-size:12px;color:var(--tinte-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ll .ll-sternz{width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;border-radius:4px;color:#C9CCC4;flex:none} .ll .ll-sternz.an{color:var(--koralle-600)} .ll .ll-sternz:hover{background:#ECEEEA;color:var(--koralle-400)} .ll .ll-sternz svg{width:13px;height:13px} .ll .ll-zelle{border-radius:var(--r-m);padding:3px 6px;margin:0 -6px;min-width:0;text-align:left;display:flex;flex-direction:column;line-height:1.3;cursor:pointer} .ll .ll-zelle.ll-reihe{flex-direction:row;align-items:center;min-height:30px} .ll .ll-zelle:hover{background:#fff;box-shadow:inset 0 0 0 1px var(--linie-stark)} .ll .ll-wer .ll-p{font-size:13px;display:flex;align-items:center;gap:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} .ll .ll-wer .ll-p svg{width:11px;height:11px;color:var(--tinte-3)} .ll .ll-ptext{color:var(--tinte-2)} .ll .ll-kd{font-size:12px;color:var(--tinte-3);display:flex;align-items:center;gap:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} .ll .ll-kd i{width:6px;height:6px;border-radius:50%;background:var(--ok);flex:none} .ll .ll-kd.ohne b{font-weight:400;color:var(--tinte-2)} .ll .ll-nfz .ll-d{font-size:13px;white-space:nowrap} .ll .ll-nfz .ll-dt{font-family:var(--mono);font-size:11.5px;color:var(--tinte-3);margin-left:4px} .ll .ll-nfz.faellig .ll-d{color:var(--koralle-700);font-weight:600} .ll .ll-nfz .ll-s{font-size:12px;color:var(--tinte-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} .ll .ll-betr{display:flex;align-items:center;gap:6px;font-size:13px;min-width:0;white-space:nowrap} .ll .ll-fehlt{color:var(--koralle-700);font-size:12.5px;display:inline-flex;align-items:center;gap:3px} .ll .ll-fehlt svg{width:10px;height:10px} .ll .ll-text{font-size:12.5px;color:var(--tinte-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ll .ll-leer{color:#B5B9B0} .ll .ll-re{font-family:var(--mono);font-size:12.5px;text-align:right;font-variant-numeric:tabular-nums} .ll .ll-akt-w{font-size:12.5px;color:var(--tinte-3);white-space:nowrap} .ll .ll-stz-k{max-width:100%;border-radius:999px} .ll .ll-stz-k .ls-stz{font-size:12px;padding:1px 9px 1px 8px;max-width:100%;overflow:hidden;text-overflow:ellipsis} .ll .ll-stz-k:hover .ls-stz{box-shadow:0 0 0 1px currentColor inset} .ll .ll-akt-h{display:flex;gap:2px;justify-content:flex-end;opacity:0} .ll .ll-z:hover .ll-akt-h,.ll .ll-z:focus-within .ll-akt-h{opacity:1} .ll .ll-akt-h a,.ll .ll-akt-h button{width:28px;height:28px;border-radius:var(--r-s);display:inline-flex;align-items:center;justify-content:center;color:var(--tinte-3)} .ll .ll-akt-h a:hover,.ll .ll-akt-h button:hover{background:rgba(42,90,105,.1);color:var(--petrol-700)} .ll .ll-akt-h svg{width:15px;height:15px} /* Leer und Fuß */ .ll .ll-leer-ansicht{display:block;padding:34px 16px;text-align:center;color:var(--tinte-2)} .ll .ll-leer-ansicht b{display:block;color:var(--tinte);margin-bottom:4px} .ll .ll-leer-ansicht button{margin-top:10px;border:1px solid var(--linie-stark);border-radius:999px;padding:4px 12px;font-size:13px;color:var(--petrol-700);background:#fff} .ll .ll-fuss{display:flex;align-items:center;gap:14px;padding:11px 16px;font-size:13px;color:var(--tinte-2);flex-wrap:wrap} .ll .ll-rest{color:var(--tinte-3)} /* Fenster an den Zellen */ /* Breiten wie im Listen-Mockup: schmaler als auf der Leadseite, „Wer" so breit wie die Datumswahl */ .ls-wahl.ll-w{width:280px} .ls-wahl.ll-w.ls-breit,.ls-wahl.ll-w.ll-wer-w{width:330px} .ls-wahl.ll-schmal{width:240px} .ls-wahl .ll-w-hinweis{font-size:12px;color:var(--tinte-3);margin:0 0 10px} .ls-wahl.ll-w p{margin:0 0 12px;font-size:13px;line-height:1.5} .ap-wahl.ll-ueber{z-index:95} /* Dialoge: Neuer Lead, Löschen */ .ll-dlg label{display:block;font-size:12px;color:var(--tinte-3);margin:10px 0 4px} .ll-dlg label:first-child{margin-top:0} .ll-dlg .ll-f{width:100%;height:36px;border:1px solid var(--linie-stark);border-radius:var(--r-m);padding:0 10px;font-size:14px;background:#fff} .ll-dlg .ll-f:focus{border-color:var(--petrol-600);box-shadow:0 0 0 3px rgba(42,90,105,.15);outline:0} .ll-dlg select.ll-f{padding:0 8px} .ll-dlg .ll-zwei{display:grid;grid-template-columns:1fr 1fr;gap:10px} .ll-dlg .ll-pflicht{color:var(--koralle-700)} .ll-dlg .ll-vor{font-size:11.5px;color:var(--tinte-3);margin-top:6px} .ll-dlg .ll-wer-feld{display:flex;align-items:center;gap:6px;min-height:36px;border:1px solid var(--linie-stark);border-radius:var(--r-m);padding:0 10px;font-size:14px;cursor:text;flex-wrap:wrap} .ll-dlg .ll-wer-feld:hover,.ll-dlg .ll-wer-feld:focus-visible{border-color:var(--petrol-600)} .ll-dlg .ll-wer-feld .ll-platz{color:var(--tinte-3)} .ll-dlg .ll-wer-feld svg{width:13px;height:13px;color:var(--tinte-3)} .ll-dlg .ll-wahlmarke{display:inline-flex;align-items:center;gap:5px;background:var(--wahl-hover);border-radius:999px;padding:1px 6px 1px 9px;font-size:13px} .ll-dlg .ll-wahlmarke button{width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;opacity:.6} .ll-dlg .ll-wahlmarke button svg{width:8px;height:8px} .ll-dlg .ls-gruende{margin:0} .ll-dlg .ll-d-satz{margin:0 0 8px} .ll-dlg .ll-d-liste{margin:0 0 10px;padding-left:18px;max-height:200px;overflow:auto} .ll-dlg .ll-d-liste span{color:var(--tinte-3)} .ll-dlg .ll-d-fuss{margin:0;font-size:12.5px;color:var(--tinte-3)} .kn.ll-weg{background:var(--stop);border-color:var(--stop);color:#fff} /* ===== Kontaktgraph (#268) ===== */ /* Etappe 4, Mockup kontakt-graph-v3: Umschalter „Liste | Graph" im Kopf beider Ansichten (eigene Wurzel .kg-umschalter), Karte mit Werkleiste und Bühne (Wurzel .kg). Suchfeld, „Tag filtern" und Filter-Chips bringt die Wurzel der Liste mit, die am selben Rahmen steht. Knoten, Linien und Namen malt Sigma auf seine Leinwände; hier stehen nur die HTML-Ebenen darüber. */ .kg,.kg-umschalter{--hover:#F2F4F2;--schatten-hoch:0 10px 30px rgba(8,20,25,.18),0 2px 6px rgba(8,20,25,.08)} .kg-umschalter{display:inline-flex;border:1px solid var(--linie-stark);border-radius:var(--r-m);overflow:hidden;background:#fff} .kg-umschalter button{padding:6px 12px;font-size:13px;display:inline-flex;gap:6px;align-items:center;color:var(--tinte-2);border:0;background:none;cursor:pointer;font-family:inherit} .kg-umschalter button svg{width:14px;height:14px} .kg-umschalter button.an{background:var(--petrol-800);color:#fff;cursor:default} .kg-umschalter button:not(.an):hover{background:var(--hover)} /* 820 px Fensterbreite: Kopf mit Importieren und Neuer Kontakt passt nur, wenn der Umschalter nur Symbole zeigt */ .kg-umschalter{flex-shrink:0} @media (max-width:1000px){.kg-umschalter button span{display:none}} .kg .kg-karte{background:#fff;border:1px solid var(--linie);border-radius:var(--r-l);box-shadow:var(--schatten);position:relative;display:flex;flex-direction:column;min-height:calc(100vh - 190px)} .kg .kg-werk{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:7px 10px;min-height:50px;border-bottom:1px solid var(--linie)} .kg .kg-tasten{margin-left:auto;display:flex;gap:4px;align-items:center;font-size:12px;color:var(--tinte-3)} .kg .kg-tasten kbd{font-family:var(--mono);font-size:10.5px;border:1px solid var(--linie);border-radius:4px;padding:0 4px;color:var(--tinte-2)} .kg .kg-buehne{position:relative;flex:1;min-height:420px;overflow:hidden;border-radius:0 0 var(--r-l) var(--r-l);background:radial-gradient(circle at 1px 1px,#E9EAE4 1px,transparent 0) 0 0/22px 22px} .kg .kg-flaeche{position:absolute;inset:0;cursor:grab;user-select:none;touch-action:none} .kg .kg-flaeche.kg-zeigt{cursor:pointer} .kg .kg-flaeche.kg-linie{cursor:context-menu} .kg .kg-flaeche.kg-zieht{cursor:grabbing} .kg .kg-wolke{position:absolute;border-radius:50%;background:#F1F2EE;border:1px dashed var(--linie-stark);transform:translate(-50%,-50%);pointer-events:none} .kg .kg-wolke[hidden]{display:none} .kg .kg-wolke span{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--tinte-3);white-space:nowrap} .kg .kg-zoom{position:absolute;right:12px;bottom:12px;z-index:2;display:flex;flex-direction:column;background:#fff;border:1px solid var(--linie-stark);border-radius:var(--r-m);overflow:hidden;box-shadow:var(--schatten)} .kg .kg-zoom button{width:32px;height:30px;display:flex;align-items:center;justify-content:center;color:var(--tinte-2);font-size:16px;border:0;background:none;cursor:pointer;font-family:inherit;padding:0} .kg .kg-zoom button+button{border-top:1px solid var(--linie)} .kg .kg-zoom button:hover{background:var(--hover)} .kg .kg-zoom .kg-alles{font-size:12px} .kg .kg-hinweis{position:absolute;left:12px;bottom:12px;z-index:2;font-size:11.5px;color:var(--tinte-3);background:rgba(255,255,255,.85);border-radius:var(--r-s);padding:3px 8px;pointer-events:none} .kg .kg-tip{position:absolute;z-index:5;pointer-events:none;background:var(--petrol-800);color:#fff;font-size:12px;border-radius:var(--r-s);padding:5px 9px;white-space:nowrap;transform:translate(-50%,calc(-100% - 12px))} .kg .kg-tip[hidden]{display:none} .kg .kg-tip b{font-weight:600} .kg .kg-tip span{color:#9FB7BE} .kg .kg-leer{position:absolute;left:50%;top:16px;transform:translateX(-50%);z-index:3;pointer-events:none;font-size:13.5px;color:var(--tinte-2);background:#fff;border:1px solid var(--linie);border-radius:var(--r-m);padding:6px 12px;box-shadow:var(--schatten)} .kg .kg-leer[hidden]{display:none} .kg .kg-fehler{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;font-size:13.5px;color:var(--tinte-2);text-align:center;padding:16px} /* Pflegen (Aufgabe 15): Lasso über Sigma, unsichtbarer Anker für das Linien-Menü, Sammelleiste. */ .kg .kg-flaeche.kg-lassot{cursor:crosshair} .kg .kg-lasso{position:absolute;inset:0;z-index:1;pointer-events:none} .kg .kg-lasso[hidden]{display:none} .kg .kg-lasso svg{display:block;width:100%;height:100%} .kg .kg-lasso path{fill:rgba(255,129,99,.10);stroke:#FF8163;stroke-width:1.5;stroke-dasharray:5 4} .kg .kg-anker{position:absolute;width:0;height:0;pointer-events:none} .kg .kg-sammel{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:6;display:flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--linie-stark);border-radius:var(--r-l);box-shadow:var(--schatten-hoch);padding:6px 8px;white-space:nowrap} .kg .kg-sammel[hidden]{display:none} .kg .kg-zahl{font-weight:600;font-size:13px;padding:0 8px 0 4px} .kg .kg-sk{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:var(--r-m);font-size:13px;background:#fff;border:1px solid var(--linie-stark);color:var(--tinte);cursor:pointer;font-family:inherit} .kg .kg-sk:hover{border-color:var(--petrol-600)} .kg .kg-sk svg{width:13px;height:13px} .kg .kg-aufheben{font-size:12.5px;color:var(--tinte-2);padding:5px 8px;border-radius:var(--r-m);border:0;background:none;cursor:pointer;font-family:inherit} .kg .kg-aufheben:hover{background:var(--hover)} /* Die rote Option im Linien-Menü: das Fenster hängt am body, eigene Wurzel .kg-menue. */ .kg-menue .kg-weg{color:var(--stop)} .kg-menue .kg-weg svg{width:14px;height:14px} @media (max-width:1100px){.kg .kg-tasten{display:none}} @media (prefers-reduced-motion:reduce){.kg *,.kg,.kg-umschalter *{transition:none!important;animation:none!important}}