/* Interner Bereich. Dichter und funktionaler als die Kundenansicht. */ :root{ --petrol:#11405B; --hellblau:#5EB3D8; --pale:#D6EEF5; /* Der Akzent ist das helle Nefino-Blau. Gruen ist keine Hausfarbe, sondern die Produktfarbe von Geo, siehe die Produktfarben weiter unten. */ --akzent:#5EB3D8; /* Produktfarben der Nefino.LI-Seiten */ --p-news:#CF18C9; --p-geo:#AFCA0B; --p-projektregister:#F39200; --p-planstatus:#FFCC00; /* Projects-Mint fuer Data as a Service, die beiden uebrigen neutral in Petroltoenen */ --p-daas:#6AB8A6; --p-assets:#5EB3D8; --p-sonstiges:#9AA7AE; --lime:var(--p-geo); --orange:#F39200; --text:#16242E; --grau:#5C6D78; --linie:#C9D8E0; --weiss:#fff; --flaeche:#F4F8FA; --gut:#2E7D52; --warn:#B06A00; --krit:#A8322B; /* Stapelebenen. z-index wirkt nur bei positionierten Elementen, und position:sticky macht auch ohne z-index schon einen eigenen Stapelkontext auf. Deshalb nur diese Stufen benutzen, keine gewuerfelten Grosswerte. 0 Inhalt: positionierte Teile ohne eigenen Wert, etwa die Spaltenkoepfe (th.sortbar, von intern.js gesetzt) und die Vertragsbalken (.vtbahn). Bewusst ohne z-index, sonst sperrt der Spaltenkopf seinen eigenen Tooltip in sich ein und der naechste Kopf legt sich darueber. 10 --e-band linke Menuespalte der Profilseite (.links). Sie ist sticky und damit ein eigener Stapelkontext, hebt also ihr Untermenue mit an. 11 --e-flyout das aufgeklappte Untermenue, innerhalb dieser Spalte ueber der Menueleiste. Wirkt nur im Stapelkontext von .links. 20 --e-kopf Kopfleiste oben, deckt die Menuespalte beim Rollen zu. 30 --e-tip Tooltips, liegen ueber Inhalt, Menuespalte und Kopfleiste. 40 --e-schiene Menueschiene links, immer ganz oben. */ --e-band:10; --e-flyout:11; --e-kopf:20; --e-tip:30; --e-schiene:40; } *{box-sizing:border-box;border-radius:0} /* hidden muss staerker sein als jede Klasse, die display setzt */ [hidden]{display:none !important} body{margin:0;font:15px/1.5 Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--text); background:var(--flaeche)} a{color:var(--petrol)} /* Menueschiene links. 56 Pixel schmal, die Beschriftung klappt beim Zeigen auf. Das Band liegt fest am Fensterrand, der Platzhalter haelt die Spalte frei. */ .zeichen{position:absolute;width:0;height:0;overflow:hidden} .schale{display:flex;align-items:stretch;min-height:100vh} .schiene{flex:0 0 56px;width:56px} .sinnen{position:fixed;left:0;top:0;bottom:0;width:56px;z-index:var(--e-schiene);overflow:hidden; background:var(--petrol);display:flex;flex-direction:column; transition:width .12s ease, box-shadow .12s ease} .schiene:hover .sinnen,.schiene:focus-within .sinnen{width:196px; box-shadow:5px 0 18px rgba(17,64,91,.30)} .sinnen .wort{white-space:nowrap;opacity:0;transition:opacity .1s ease} .schiene:hover .wort,.schiene:focus-within .wort{opacity:1} .smarke{display:flex;align-items:center;gap:12px;flex:0 0 52px;padding:0 18px; color:#fff;text-decoration:none;font-weight:700;font-size:14px} .smarke .mal{width:24px;height:24px;flex:0 0 24px;display:block} .smarke .bereich{font-style:normal;font-weight:400;color:var(--hellblau)} .smarke:focus-visible{outline:2px solid var(--akzent);outline-offset:-2px} .spunkt{display:flex;align-items:center;gap:14px;padding:11px 18px;color:#CFE3EE; text-decoration:none;font-size:14px;border-left:3px solid transparent} .spunkt svg{width:19px;height:19px;flex:0 0 19px;margin-left:-3px;stroke:currentColor;fill:none; stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .spunkt:hover{background:rgba(255,255,255,.08);color:#fff} .spunkt.an{background:rgba(255,255,255,.12);color:#fff;border-left-color:var(--akzent)} .spunkt:focus-visible{outline:2px solid var(--akzent);outline-offset:-2px} .sfuss{margin-top:auto;padding:14px 18px;font-size:12px;color:#7FA8C0;overflow:hidden} /* Kopfleiste. Hell und schmal, traegt nur die Suche und das Konto. */ .rumpf{flex:1;min-width:0} /* Nur die Kopfleiste der Seite. In sales_preisliste.php heisst auch eine Tabellenzelle so, und die soll keine 52 Pixel hohe Flexleiste werden. */ header.kopf{position:sticky;top:0;z-index:var(--e-kopf);background:var(--weiss); border-bottom:1px solid var(--linie);display:flex;align-items:center;gap:18px; height:52px;padding:0 24px} .wer{display:flex;align-items:center;gap:14px;margin-left:auto;font-size:13px; color:var(--grau);white-space:nowrap} .wer a{color:var(--petrol)} main{max-width:none;padding:26px 24px 70px} h1{font-size:24px;font-weight:700;color:var(--petrol);margin:0 0 6px} .unter{color:var(--grau);font-size:14px;margin:0 0 24px;max-width:70ch} h2{font-size:16px;font-weight:700;color:var(--petrol);margin:0 0 12px} .karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin:0 0 28px} .karte{background:var(--weiss);border:1px solid var(--linie);padding:16px 18px} .karte .wert{font-size:27px;font-weight:700;color:var(--petrol);line-height:1.1; font-variant-numeric:tabular-nums} .karte .lbl{font-size:12.5px;color:var(--grau);margin-top:5px} .karte .zus{font-size:12px;margin-top:7px} .block{background:var(--weiss);border:1px solid var(--linie);padding:20px 22px;margin:0 0 22px} table{border-collapse:collapse;width:100%;font-size:14px;background:var(--weiss)} .tabelle{overflow-x:auto;border:1px solid var(--linie);margin:0 0 20px} /* Lange Listen bekommen einen Deckel und rollen in sich. Dreissig Aktivitaeten schieben sonst alles darunter aus dem Bild. Der Spaltenkopf bleibt stehen. */ .tabelle.rollt,.tabelle.rollt.passt{max-height:26rem;overflow-y:auto} .tabelle.rollt thead th{position:sticky;top:0;z-index:1} th{background:var(--petrol);color:#fff;text-align:left;padding:9px 13px;font-size:12px; font-weight:700;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap} td{padding:9px 13px;border-top:1px solid var(--linie);vertical-align:middle} /* Sortierbare Spaltenkoepfe */ th.sortbar{cursor:pointer;user-select:none;position:relative;padding-right:22px} th.sortbar:hover{background:#17567A} th.sortbar:focus-visible{outline:2px solid var(--lime);outline-offset:-3px} th.sortbar .pfeil{position:absolute;right:9px;top:50%;transform:translateY(-50%); font-size:9px;line-height:1;color:#7FA8C0} th.sortbar .pfeil::after{content:"\2195"} th.sortbar[aria-sort=ascending] .pfeil::after{content:"\25B2"} th.sortbar[aria-sort=descending] .pfeil::after{content:"\25BC"} th.sortbar[aria-sort=ascending] .pfeil, th.sortbar[aria-sort=descending] .pfeil{color:var(--lime)} tbody tr:nth-child(even) td{background:var(--flaeche)} td.num,th.num{text-align:right;font-variant-numeric:tabular-nums} td.mono{font-family:"Roboto Mono",ui-monospace,monospace;font-size:13px;color:var(--petrol)} .nebensatz{display:block;font-style:normal;font-size:11.5px;color:var(--grau);margin-top:3px; white-space:nowrap} /* Auswahlspalte und Sammelaktion der Firmenliste */ th.haken,td.haken{width:34px;text-align:center;padding-left:10px;padding-right:6px} td.haken input{width:16px;height:16px;margin:0;accent-color:var(--petrol);cursor:pointer} th.haken .nurlesen{color:#8FB6CC;font-size:13px} .sammel{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 24px; background:var(--weiss);border:1px solid var(--linie);border-left:3px solid var(--petrol); padding:12px 16px;font-size:14px} .sammel select{font:inherit;font-size:14px;padding:8px 10px;border:1px solid var(--linie); background:var(--weiss);color:var(--text)} .sammel .hint{color:var(--grau);font-size:12.5px;margin-left:auto} /* Sprung in den HubSpot-Datensatz der Firma */ td.hsakt{width:1%;white-space:nowrap} td.hsakt .hslink{margin-left:12px} .hslink{display:inline-block;font-size:12px;color:var(--petrol);text-decoration:none; border-bottom:1px solid var(--linie);margin-left:10px;padding-bottom:1px} /* Das Sprocket von HubSpot vor dem Verweis, in ihrem eigenen Orange. Als Hintergrundbild, damit alle drei Stellen es ohne eigenes Markup bekommen. */ .hslink::before{content:"";display:inline-block;width:14px;height:14px;margin-right:6px; vertical-align:-2.5px;background:url("data:image/svg+xml,") center/contain no-repeat} .hslink::after{content:" \2197";color:var(--grau)} .hslink:hover{border-bottom-color:var(--petrol)} .merker{display:inline-block;font-size:11.5px;font-weight:700;padding:2px 7px; letter-spacing:.04em;text-transform:uppercase;border:1px solid currentColor;white-space:nowrap} .m-gut{color:var(--gut)} .m-warn{color:var(--warn)} .m-krit{color:var(--krit)} .m-grau{color:var(--grau)} /* Produktmerker: Text in Petrol, die Produktfarbe traegt das Quadrat davor */ .merker.m-prod{color:var(--petrol);border-color:var(--linie);padding-left:6px} .merker.m-prod::before{content:"";display:inline-block;width:7px;height:7px; background:var(--pf);margin-right:5px;vertical-align:0} input[type=text],input[type=password]{font:inherit;font-size:14px;padding:8px 10px; border:1px solid var(--linie);background:var(--weiss);color:var(--text);width:100%} input:focus{outline:2px solid var(--hellblau);outline-offset:-1px;border-color:var(--hellblau)} input.geld{text-align:right;font-variant-numeric:tabular-nums;max-width:130px} label.zeile{display:grid;grid-template-columns:200px 1fr;gap:14px;align-items:center; padding:9px 0;border-bottom:1px solid var(--linie)} label.zeile:last-child{border-bottom:0} label.zeile b{font-weight:400;color:var(--grau);font-size:14px} .feldgruppe{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px} .feld{display:block} .feld b{display:block;font-weight:400;color:var(--grau);font-size:12.5px;margin-bottom:5px} .btn{font:inherit;font-weight:700;font-size:14px;padding:10px 20px;border:1px solid transparent; cursor:pointer;text-decoration:none;display:inline-block} .btn-haupt{background:var(--petrol);color:#fff;border-color:var(--petrol)} .btn-haupt:hover{background:#17567A;border-color:#17567A} .btn-neben{background:var(--weiss);color:var(--petrol);border-color:var(--linie)} .btn-neben:hover{border-color:var(--petrol)} .leiste{display:flex;gap:10px;align-items:center;margin-top:20px;padding-top:18px; border-top:1px solid var(--linie)} .hinweis{padding:12px 16px;margin:0 0 18px;font-size:14px;border-left:3px solid} .h-gut{background:#E9F5EE;border-color:var(--gut);color:#1F5C3B} .h-warn{background:#FBF2E2;border-color:var(--warn);color:#7A4A00} /* Einschraenkung aus einer Kachel der Startseite: sachlich, keine Warnung. */ .h-info{background:var(--pale);border-color:var(--hellblau);color:var(--petrol)} .h-krit{background:#FBEAEA;border-color:var(--krit);color:#8A2A25} .matrix td.p{font-variant-numeric:tabular-nums;text-align:right;font-weight:500;color:var(--petrol)} .matrix th.eck{background:var(--petrol)} .matrix td.kopf{background:var(--pale);font-weight:700;color:var(--petrol);white-space:nowrap} .anmelden{max-width:380px;margin:80px auto;background:var(--weiss); border:1px solid var(--linie);border-top:3px solid var(--petrol);padding:30px 32px} .anmelden h1{font-size:20px;margin-bottom:20px} .anmelden .feld{margin-bottom:14px} .fuss{border-top:1px solid var(--linie);margin-top:44px;padding-top:16px; font-size:12.5px;color:var(--grau);display:flex;gap:20px;flex-wrap:wrap} @media (max-width:820px){ label.zeile{grid-template-columns:1fr;gap:4px} main{padding:20px 16px 50px} header.kopf{padding:0 16px;gap:12px} .wer span{display:none} } @media (prefers-reduced-motion: reduce){ .sinnen,.sinnen .wort{transition:none} } /* --------------------------------------------- Kopfband der Firmenansicht Eine Reihe, kein Raster. Der Wertkasten links faellt weg, sobald zu einer Firma keine Nefino.LI-Nutzer bekannt sind, und die Personen- und die Webinaransicht haben ihn nie. Im festen Raster 250px + Rest rutschten die vier Zahlenkarten dann in die 250er Spalte und das Band zerfiel. Flex gibt dem Kasten seine Breite, wenn er da ist, und laesst die Zahlen sonst den ganzen Platz nehmen, ohne dass eine Vorlage etwas dazu sagen muss. */ /* Mit dem Gespraechswert stehen bis zu vier Kaesten nebeneinander, dahinter die Zahlen. Ohne Umbruch wird die Zahlenspalte platt gedrueckt. */ .kopfband{display:flex;gap:14px;margin:0 0 16px;flex-wrap:wrap} .kopfband > .zahlen{min-width:320px} .kopfband > .wertkasten{flex:0 0 250px} .kopfband > .zahlen{flex:1 1 auto;min-width:0} /* Untereinander liegt die Hauptachse senkrecht, dort waeren die 250 eine Hoehe und der Wertkasten bekaeme unten ein leeres Feld. */ @media (max-width:900px){ .kopfband{flex-direction:column} .kopfband > .wertkasten,.kopfband > .zahlen{flex:0 0 auto} } .wertkasten{background:var(--petrol);color:#fff;padding:14px 16px;display:flex; flex-direction:column;gap:9px} .wertkasten.schwach{background:#7A2A24} .wertkasten.mittel{background:#7A5A16} .wertkasten .lbl{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#B9D2DF} .wertkasten.schwach .lbl,.wertkasten.mittel .lbl{color:#F0D9D5} .wertkasten .hilfe{background:rgba(255,255,255,.22)} .wertzahl{display:flex;align-items:baseline;gap:7px} .wertzahl b{font-size:44px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums} .wertzahl span{font-size:12px;color:#B9D2DF} .wertkasten.schwach .wertzahl span,.wertkasten.mittel .wertzahl span{color:#F0D9D5} .teile{display:flex;flex-direction:column;gap:5px;margin-top:2px} .teil{display:grid;grid-template-columns:70px 1fr 26px;gap:8px;align-items:center; font-size:10.5px;color:#CFE3EE} .wertkasten.schwach .teil,.wertkasten.mittel .teil{color:#F0D9D5} .teil .sp{height:5px;background:rgba(255,255,255,.18)} .teil .sp i{display:block;height:100%;background:var(--lime)} .wertkasten.schwach .sp i,.wertkasten.mittel .sp i{background:#F5A79F} .teil u{text-decoration:none;text-align:right;font-variant-numeric:tabular-nums} /* „von 100" hinter einer Kennzahl, kleiner und ruhiger als die Zahl selbst. */ .zk .z .von{font-size:13px;font-weight:400;color:var(--grau);margin-left:5px} .zahlen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px; background:var(--linie);border:1px solid var(--linie)} @media (max-width:900px){ .zahlen{grid-template-columns:repeat(2,minmax(0,1fr))} } .zk{background:var(--weiss);padding:12px 15px;display:flex;flex-direction:column;gap:3px} .zk .lbl{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--grau)} .zk .z{font-size:23px;font-weight:700;color:var(--petrol);line-height:1.2; font-variant-numeric:tabular-nums} .zk .zus{font-size:11.5px;color:var(--grau)} .zk .zus.gut{color:var(--gut)} .zk .zus.krit{color:var(--krit)} .zk .zus.kuend,.zk .zus.kuendalt{margin-top:5px;padding-top:5px;border-top:1px solid var(--linie)} .zk .zus.kuend{color:var(--krit);font-weight:600} /* Was hier zu tun ist */ .tun{background:#FBF2E2;border:1px solid var(--linie);border-left:3px solid var(--warn); padding:13px 16px;margin:0 0 18px} .tun.rot{background:#FBEAEA;border-left-color:var(--krit)} .tun h4{font-size:13.5px;font-weight:700;color:var(--petrol);margin:0 0 7px} .tun ul{margin:0;padding-left:17px;font-size:13.5px;line-height:1.7;color:var(--text)} /* Vertragsband. Eigene Namen, .vz und .vw gehoeren dem Nutzungsdiagramm. */ /* Die Achse sitzt im selben Raster wie die Balken, sonst passen die Jahreszahlen nicht zu den Balkenanfaengen. */ .vtkopf{padding-bottom:0;margin-bottom:4px} .vtachse{position:relative;display:block;height:16px; border-bottom:1px solid var(--linie);font-size:10.5px;color:var(--grau)} .vtachse i{position:absolute;top:1px;font-style:normal;transform:translateX(-50%); white-space:nowrap;padding:0 3px} .vtachse i:first-child{transform:none;padding-left:0} .vtachse .heute{position:absolute;top:0;bottom:-2px;width:1px;background:var(--krit)} .vtbahn .heute{position:absolute;top:-1px;bottom:-1px;width:1px;background:var(--krit); opacity:.45;text-decoration:none} .vtz{display:grid;grid-template-columns:210px minmax(0,1fr) 92px 92px;gap:11px; align-items:center;padding:3px 0;font-size:13px} @media (max-width:820px){ .vtz{grid-template-columns:1fr 92px} .vtbahn{grid-column:1 / -1} } .vtn{display:flex;align-items:center;gap:7px;white-space:nowrap;overflow:hidden; text-overflow:ellipsis;color:var(--text)} .vtn::before{content:"";width:9px;height:9px;flex:0 0 9px;background:var(--pf,var(--linie))} .vtbahn{position:relative;height:16px;background:var(--flaeche);border:1px solid var(--linie)} .vtbahn b{position:absolute;top:0;bottom:0;display:block;background:var(--pf,var(--petrol)); opacity:.9} .vtbahn b.offen::after{content:"";position:absolute;right:0;top:0;bottom:0;width:14px; background:linear-gradient(to right,transparent,var(--flaeche))} .vtr{font-size:11.5px;color:var(--grau);white-space:nowrap} .vtw{text-align:right;font-weight:700;color:var(--petrol);font-variant-numeric:tabular-nums} .vtfuss{font-size:12px;color:var(--grau);margin:12px 0 0} /* Was zuletzt passiert ist */ .zweispalt{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:18px; align-items:start} @media (max-width:900px){ .zweispalt{grid-template-columns:1fr} } .ab{list-style:none;margin:0;padding:0} .ab li{display:grid;grid-template-columns:82px 10px minmax(0,1fr);gap:9px;align-items:start; padding:8px 0;font-size:13px;border-top:1px solid var(--linie)} .ab li:first-child{border-top:0} .ab time{color:var(--grau);font-size:12px;white-space:nowrap;padding-top:1px} .ab s{text-decoration:none;width:8px;height:8px;margin-top:5px;background:var(--linie)} .ab li.wichtig s{background:var(--petrol)} .ab b{font-weight:500;color:var(--text)} .ab em{font-style:normal;color:var(--grau);display:block;font-size:12px;margin-top:1px} /* Profilseite mit linkem Menueband */ .profil{display:grid;grid-template-columns:210px minmax(0,1fr);gap:26px;align-items:start} /* position:sticky macht hier einen eigenen Stapelkontext auf, auch ohne z-index. Das Untermenue der Preisliste steckt darin fest, sein eigener z-index zaehlt also nur innerhalb dieser Spalte. Ohne die Ebene hier legen sich die spaeter im Quelltext stehenden positionierten Teile des Inhalts darueber: die Spaltenkoepfe der Personentabelle (th.sortbar) und die Vertragsbalken. */ .links{position:sticky;top:20px;z-index:var(--e-band)} /* Zweispaltiges Menueband: links die Bereiche der Firma, rechts die Produkte der geltenden Preisliste. Beide Spalten tragen ihre eigenen Kennzahlen. */ /* Menueband nach dem Vorbild von HubSpot: dunkles Band links, das Untermenue klappt als schwebendes Feld darueber auf und schiebt den Inhalt nicht weg. */ .profil{grid-template-columns:196px minmax(0,1fr);gap:22px} .band{position:relative;background:var(--weiss);border:1px solid var(--linie)} /* Angedockt: sobald ein Produkt gewaehlt ist, wird das Untermenue zur zweiten Spalte des Bandes. Die Gesamtkosten darunter bekommen dieselbe Breite mit. */ .profil.angedockt{grid-template-columns:420px minmax(0,1fr)} /* Die Gesamtkosten stehen unter dem Hauptmenue, nicht unter dem Untermenue */ .profil.angedockt .summe{width:196px} .band.angedockt{display:grid;grid-template-columns:196px minmax(0,1fr)} .band.angedockt .flyout{position:static;width:auto;z-index:auto; border:0;border-left:1px solid var(--linie);box-shadow:none} .sp-links{padding:5px 0} .sp-links a{display:block;padding:9px 13px;text-decoration:none; border-left:3px solid transparent;color:var(--text);font-size:13px;line-height:1.3} .sp-links a + a{border-top:1px solid var(--linie)} .sp-links a:hover{background:var(--flaeche);color:var(--petrol)} .sp-links a.an{background:var(--pale);color:var(--petrol);font-weight:700;border-left-color:var(--petrol)} .sp-links a > span{display:flex;align-items:center;gap:7px} .sp-links a .auf{margin-left:auto;font-size:13px;color:var(--grau);line-height:1} .sp-links a.an .auf{color:var(--petrol)} .sp-links a i{display:block;font-style:normal;font-size:11px;color:var(--grau);margin-top:2px; font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sp-links a.an i{color:var(--petrol)} .sp-links a .punkt{width:6px;height:6px;background:var(--warn);flex:0 0 auto} /* Die Versionsseite nutzt dieselbe Leiste, ihre Punkte heissen dort .pkt */ .band .pkt{display:block;padding:9px 13px;text-decoration:none;color:var(--text); font-size:13px;line-height:1.3;border-left:3px solid transparent} .band .pkt + .pkt{border-top:1px solid var(--linie)} .band .pkt:hover{background:var(--flaeche);color:var(--petrol)} .band .pkt.an{background:var(--pale);color:var(--petrol);font-weight:700;border-left-color:var(--petrol)} .band .pkt > span{display:inline-flex;align-items:center;gap:7px} .band .pkt .punkt{width:6px;height:6px;background:var(--warn);display:inline-block; margin-left:6px;vertical-align:middle} .band .pkt i{display:block;font-style:normal;font-size:11px;color:var(--grau);margin-top:2px; font-variant-numeric:tabular-nums} .band .pkt.an i{color:var(--petrol)} /* Das Untermenue: hell mit dunkler Schrift, klar abgesetzt vom dunklen Band */ .flyout{position:absolute;left:100%;top:0;width:224px;z-index:var(--e-flyout); background:var(--weiss);border:1px solid var(--linie);padding:5px 0; box-shadow:0 6px 20px rgba(17,64,91,.20)} .flyout .t{font:500 10px/1 "Roboto Mono",ui-monospace,monospace;letter-spacing:.13em; text-transform:uppercase;color:var(--grau);padding:9px 14px 8px} .flyout a{display:block;padding:8px 14px;text-decoration:none;color:var(--text);font-size:13px; line-height:1.3;border-left:3px solid transparent} .flyout a + a{border-top:1px solid var(--linie)} .flyout a:hover{background:var(--flaeche);color:var(--petrol)} .flyout a.an{background:var(--pale);color:var(--petrol);font-weight:700;border-left-color:var(--petrol)} .flyout a > span{display:flex;align-items:center;gap:7px} .flyout a i{display:block;font-style:normal;font-size:11px;color:var(--grau);margin-top:2px; font-variant-numeric:tabular-nums} .flyout a.an i{color:var(--petrol)} .flyout a .punkt{width:6px;height:6px;background:var(--warn);flex:0 0 auto} .flyout .leer{font-size:12px;color:var(--grau);padding:2px 14px 10px;line-height:1.45} .flyout[hidden]{display:none} @media (max-width:900px){ .profil,.profil.angedockt{grid-template-columns:1fr} .profil > *,.links{min-width:0} .profil.angedockt .summe{width:auto} .band.angedockt{grid-template-columns:1fr} .band{position:static;min-width:0} .band .pkt{white-space:nowrap} .sp-links{display:flex;overflow-x:auto} .sp-links a{white-space:nowrap;border-left:0;border-top:3px solid transparent} .sp-links a.an{border-left:0;border-top-color:var(--petrol)} .sp-links a i{display:none} .flyout{position:static;width:auto;border-left:0;border-right:0;box-shadow:none} } /* Jedes Produkt traegt seine eigene Farbe von den Nefino.LI-Seiten. Der Streifen steht links am Menuepunkt, in den Gesamtkosten als Punkt. */ .pf-news{--pf:var(--p-news)} .pf-geo{--pf:var(--p-geo)} .pf-projektregister{--pf:var(--p-projektregister)} .pf-planstatus{--pf:var(--p-planstatus)} .pf-daas{--pf:var(--p-daas)} .pf-assets{--pf:var(--p-assets)} .pf-sonstiges{--pf:var(--p-sonstiges)} .flyout a.pf,.flyout a.pf.an,.band .pkt.pf,.band .pkt.pf.an{border-left-color:var(--pf)} .summe .sz.pf .sn::before{content:"";display:inline-block;width:7px;height:7px; background:var(--pf);margin-right:7px;vertical-align:1px} /* Produktkasten zwischen Menueband und Gesamtkosten */ .pkasten{background:var(--weiss);border:1px solid var(--linie); margin-top:16px;padding:14px 16px} .pkasten h3{font-size:13.5px;font-weight:700;color:var(--petrol);margin:0 0 10px} .pkasten .leer{font-size:12.5px;color:var(--grau);margin:0;line-height:1.45} .pz{display:flex;align-items:baseline;gap:8px;padding:6px 0; border-bottom:1px solid var(--linie)} .pz:last-of-type{border-bottom:0} .pz::before{content:"";width:9px;height:9px;flex:0 0 9px;background:var(--pf); align-self:center} .pz.aus::before{background:var(--linie)} .pz .pn{font-size:13.5px;font-weight:700;color:var(--petrol)} .pz.aus .pn{font-weight:400;color:var(--grau)} .pz .pw{font-size:11.5px;color:var(--grau);margin-left:auto;white-space:nowrap; font-variant-numeric:tabular-nums} .phint{font-size:11px;color:var(--grau);margin:10px 0 0;line-height:1.45} .profil.angedockt .pkasten{width:196px} @media (max-width:900px){ .profil.angedockt .pkasten{width:auto} } .summe{background:var(--weiss);border:1px solid var(--linie);border-top:3px solid var(--petrol); margin-top:16px;padding:15px 16px} .summe h3{font-size:13.5px;font-weight:700;color:var(--petrol);margin:0 0 4px} .summe .hint{font-size:11.5px;color:var(--grau);margin:0 0 12px;line-height:1.4} .summe .leer{font-size:13px;color:var(--grau);margin:0} .summe .sz{font-size:13px;padding-top:9px} .summe .sz .sn{color:var(--text)} .summe .sz .sn i{display:block;font-style:normal;font-size:11.5px;color:var(--grau)} .summe .sz b{display:block;font-variant-numeric:tabular-nums;color:var(--petrol); white-space:nowrap;font-size:14.5px;margin-top:1px} .summe .sd{font-size:11.5px;color:var(--grau);padding-bottom:8px;border-bottom:1px solid var(--linie)} .summe .total{border-top:2px solid var(--petrol);margin-top:10px;padding-top:10px;font-weight:700} .summe .total b{font-size:17px} /* Kennzahlen und Balkenbild der Nutzung im Firmenprofil. Eckige Balken, weil die ganze Oberflaeche eckig ist. */ .kennz{display:flex;flex-wrap:wrap;gap:8px 26px;align-items:baseline; padding:0 0 16px;border-bottom:1px solid var(--linie);margin:0 0 16px; font-size:13.5px;color:var(--grau)} .kennz b{font-size:21px;font-weight:700;color:var(--petrol);margin-right:5px; font-variant-numeric:tabular-nums} .kennz .produkte{display:inline-flex;gap:6px} .vtitel{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--grau); margin:0 0 10px} .verlauf{display:flex;flex-direction:column;gap:6px;max-width:620px} .vz{display:grid;grid-template-columns:190px minmax(0,1fr) 42px;gap:12px;align-items:center} .vw{font-size:13.5px;color:var(--text)} .vb{display:block;height:16px;background:var(--flaeche);border:1px solid var(--linie)} .vb i{display:block;height:100%;min-width:0} .vv{font-size:14px;font-weight:700;color:var(--petrol);text-align:right; font-variant-numeric:tabular-nums} .vfuss{font-size:12px;color:var(--grau);margin:16px 0 0} /* Verweis auf ein Personenprofil */ a.pname{color:var(--petrol);text-decoration:none;border-bottom:1px solid var(--linie)} a.pname:hover{border-bottom-color:var(--petrol)} /* Nutzertabelle. Der Balken zeigt die Groesse, die Sortierung die Rangfolge, die Farbe bleibt fuer alle gleich und haengt nicht am Rang. */ table.pers td{vertical-align:middle} table.pers td.mail{font-size:12.5px;color:var(--grau);overflow-wrap:anywhere} table.pers td.balken{width:200px} table.pers td.balken .vb{display:inline-block;width:110px;height:12px;vertical-align:middle; background:var(--flaeche);border:1px solid var(--linie)} table.pers td.balken .bz{display:inline-block;margin-left:9px;font-weight:700;color:var(--petrol); font-variant-numeric:tabular-nums;min-width:44px;text-align:right;vertical-align:middle} table.pers .merker.m-prod{font-size:10.5px;padding:1px 5px} @media (max-width:700px){ .vz{grid-template-columns:1fr 60px} .vb{grid-column:1 / -1} } /* Startseite einer Preislisten-Version: Stand, Zahlen und der Weg, sie in Kraft zu setzen. Steht ueber den Laufzeitfaktoren, weil das die Frage ist, mit der man den Reiter aufmacht. */ .vstand{border:1px solid var(--linie);border-left:4px solid var(--warn); background:var(--flaeche);padding:14px 16px;margin:0 0 18px} .vstand.vstand-aktiv{border-left-color:var(--gut)} .vstand.vstand-archiviert{border-left-color:var(--grau)} .vstand-kopf{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .vstand-kopf h2{margin:0;font-size:17px} .vstand-zeit{font-size:12.5px;color:var(--grau)} .vstand-satz{margin:8px 0 0;font-size:13.5px;color:var(--grau);line-height:1.45;max-width:70ch} .vstand-zahlen{display:flex;gap:28px;flex-wrap:wrap;margin:14px 0 0} .vstand-zahlen span{display:flex;flex-direction:column;font-size:12px;color:var(--grau)} .vstand-zahlen b{font-size:18px;color:var(--petrol);font-variant-numeric:tabular-nums} .vstand-los{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0 0; padding-top:12px;border-top:1px solid var(--linie)} .vstand-los label{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--grau)} .vstand-los input[type=date]{font:inherit;font-size:13px;padding:5px 7px; border:1px solid var(--linie);background:var(--weiss)} /* Umschaltung Preisart. Eine Zeile je Assetklasse, Spalten sauber untereinander. */ /* Ohne Deckel zieht die mittlere Spalte den Komplettpreis auf breiten Schirmen bis an den rechten Fensterrand. Die Breite reicht fuer die drei Knoepfe, zwei offene Rabattstufen und die beiden Staffelknoepfe. */ .modus{background:var(--weiss);border:1px solid var(--linie);margin:0 0 16px;max-width:1140px} .modus.mitvgl{max-width:1290px} .mkopf,.modus .mz{display:grid;grid-template-columns:190px minmax(0,1fr) 150px; gap:14px;align-items:center} /* Wie viele Vergleichsspalten es gibt, steht erst beim Rendern fest. Die Vorlage schreibt das Raster deshalb als Variable an den Kasten. */ .modus.mitvgl .mkopf,.modus.mitvgl .mz{grid-template-columns:var(--mspalten,190px minmax(0,1fr) 150px 150px)} .mkopf{padding:9px 16px;background:var(--petrol);color:#fff; font:700 11px/1 Roboto,Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase} .modus .mz{padding:7px 16px;border-top:1px solid var(--linie)} .modus .mz:nth-child(odd){background:var(--flaeche)} .modus .mn{font-weight:700;color:var(--petrol);font-size:13.5px} .modus .mz.aus .mn{font-weight:400;color:var(--grau)} .modus .mw{display:flex;gap:0;flex-wrap:wrap} /* Die drei Preisarten als zusammenhaengende Schalterleiste */ .mopt{display:inline-flex;align-items:center;gap:7px;font-size:13px;cursor:pointer; border:1px solid var(--linie);border-right:0;padding:6px 12px;background:var(--weiss); white-space:nowrap} /* Hinter den Labels steht noch der Staffelknopf, deshalb of-type. */ .mopt:last-of-type{border-right:1px solid var(--linie)} .mopt.an{background:var(--pale);border-color:var(--hellblau);color:var(--petrol);font-weight:700} .mopt.an + .mopt{border-left-color:var(--hellblau)} .mopt input[type=radio]{width:auto;margin:0;accent-color:var(--petrol)} .modus .mr{text-align:right} .modus .mr .geld{max-width:140px} .mkopf .mr{text-align:right} .modus .hint{font-size:12.5px;color:var(--grau);margin:0;line-height:1.45} .modus .mfuss{display:flex;gap:16px;align-items:center;padding:11px 16px; border-top:1px solid var(--linie);background:var(--flaeche)} .modus .mfuss .hint{flex:1} .mspeichern{display:flex;gap:10px;align-items:center;white-space:nowrap} /* Zwei Knoepfe an einem langen Formular: der Hinweis sagt, dass etwas offen ist. */ .offen{font-size:12.5px;color:var(--warn);font-weight:700} @media (max-width:820px){ .mkopf{display:none} .modus .mz{grid-template-columns:1fr;gap:8px;padding:12px 16px} .modus .mr{text-align:left} } /* Auswahl der Vergleichsliste */ .vglwahl{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px; background:var(--flaeche);border:1px solid var(--linie);padding:10px 14px;font-size:13.5px} .vglwahl label{color:var(--grau)} /* Die Auswahl ist breit genug fuer "Vertragspreise (4 Klassen, ab …)", ohne den Rest der Zeile zu verdraengen. */ /* Mehrfachauswahl im Stil des Befundmenues der Firmenliste, damit die Seite nur eine Art von Klappmenue kennt. */ .vglmenue > summary{min-width:250px} .vglmenue .bliste{min-width:420px} .vglmenue .bzeile b{font-size:12px;white-space:nowrap} /* Die bereits gewaehlten Listen zeigen im Menue dieselbe Farbe wie ihre Spalte. */ .vglmenue .bzeile.vglan{border-left-color:var(--vgf)} .vglmenue .bzeile.vglan span::before{content:"";display:inline-block;width:8px;height:8px; margin-right:6px;background:var(--vgf)} .bhinweis{font-size:12px;color:var(--grau)} /* Die gewaehlten Listen als abwerfbare Marken hinter dem Menue. */ .vgljetzt{display:flex;flex-wrap:wrap;gap:6px} a.vglmarke{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;text-decoration:none; padding:4px 8px;border:1px solid var(--linie);border-left:4px solid var(--vgf,var(--hellblau)); background:#EEF2F4;color:var(--petrol)} a.vglmarke::before{content:"";width:9px;height:9px;background:var(--vgf,var(--hellblau))} a.vglmarke:hover{background:var(--pale);border-color:var(--petrol); border-left-color:var(--vgf,var(--hellblau))} .vglwahl .vglan{font-weight:700;color:var(--petrol)} .vglwert{display:block;font-size:12px;color:var(--grau);white-space:nowrap; font-variant-numeric:tabular-nums} .mr .vglwert{text-align:right;padding-right:2px} /* Der Vergleich steht als eigener Block rechts daneben, in ruhigem Grau, damit er nicht mit den eigenen Feldern verwechselt wird. Die Kante links und die Beschriftung "Vergleich" sagen, wo die fremden Zahlen anfangen. */ .modus .vglkopf,.modus .vglzelle{align-self:stretch;display:flex;flex-direction:column; justify-content:center;align-items:flex-end; border-left:1px solid var(--vgf,var(--linie)); background:#EEF2F4; background:color-mix(in srgb, var(--vgf, #5EB3D8) 7%, #fff)} /* Kraeftig nur am Anfang des Blocks, duenn zwischen den einzelnen Listen. Die Farbe kommt je Liste aus --vgf, das die Vorlage an die Zelle schreibt. */ .modus .vglkopf.vglstart,.modus .vglzelle.vglstart{border-left:3px solid var(--vgf,var(--hellblau))} .modus .vglkopf{border-top:4px solid var(--vgf,var(--hellblau))} .modus .vglkopf{margin:-9px -16px -9px 0;padding:9px 16px 9px 10px;background:#1B546F; background:color-mix(in srgb, var(--vgf, #5EB3D8) 26%, #11405B)} .modus .vglzelle{margin:-7px -16px -7px 0;padding:7px 16px 7px 10px} .modus .mz:nth-child(odd) .vglzelle{background:#E6EDF0; background:color-mix(in srgb, var(--vgf, #5EB3D8) 13%, #fff)} .modus .vglkopf i{font-style:normal;font-size:9.5px;letter-spacing:.1em; color:#CBD9E0;color:color-mix(in srgb, var(--vgf, #5EB3D8) 55%, #fff);margin-bottom:2px} .modus .vglzelle .vglwert{padding-right:0} th.vglspalte{background:#4A6470; background:color-mix(in srgb, var(--vgf, #5EB3D8) 26%, #11405B)} th.vglspalte i{display:block;font-style:normal;font-size:10px;font-weight:400; letter-spacing:.03em;text-transform:none;color:var(--hellblau); color:color-mix(in srgb, var(--vgf, #5EB3D8) 55%, #fff);margin-top:3px} td.vglspalte{background:#EEF2F4; background:color-mix(in srgb, var(--vgf, #5EB3D8) 7%, #fff); color:var(--grau);font-size:13px;font-variant-numeric:tabular-nums; border-left:1px solid var(--vgf,var(--linie))} tbody tr:nth-child(even) td.vglspalte{background:#E6EDF0; background:color-mix(in srgb, var(--vgf, #5EB3D8) 13%, #fff)} th.vglstart,td.vglstart{border-left:3px solid var(--vgf,var(--hellblau))} /* Der Balken ueber der Ueberschrift traegt die Farbe der Liste. */ th.vglspalte{border-top:4px solid var(--vgf,var(--hellblau))} td.vglspalte .ja{color:#2E7D52} td.vglspalte .nein{color:var(--grau)} /* Die Preistabelle bleibt schmal: Wertspalten so breit wie noetig, das Bundesland nimmt den Rest. */ .tabelle table th.num,.tabelle table td.num{width:1%;white-space:nowrap} /* Die Laendertabelle waechst mit der Zahl der Spalten, statt immer die volle Breite zu belegen. Bei einer einzigen Assetklasse bleibt sie schmal. */ table.laender{width:max-content;max-width:100%;min-width:520px} table.laender td,table.laender th{padding-top:6px;padding-bottom:6px} table.laender td:first-child{padding-right:40px} td.num .geld{max-width:120px} .enthaltenwahl{display:none;justify-content:flex-end;gap:6px;align-items:center; font-size:13px;color:var(--petrol);white-space:nowrap} .enthaltenwahl input[type=checkbox]{width:auto;margin:0;accent-color:var(--petrol)} /* Tooltips */ .hilfe{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px; margin-left:6px;font:700 10.5px/1 inherit;font-family:inherit;cursor:help;position:relative; color:var(--weiss);background:var(--hellblau);vertical-align:middle;flex:0 0 auto; border:0;padding:0;appearance:none} .hilfe:focus{outline:2px solid var(--orange);outline-offset:2px} .hilfe .tip{display:none;position:absolute;left:50%;bottom:calc(100% + 9px);transform:translateX(-50%); width:290px;max-width:78vw;background:var(--petrol);color:#EAF3F8;font-size:12.5px;font-weight:400; line-height:1.5;padding:10px 13px;text-align:left;z-index:var(--e-tip);cursor:auto; box-shadow:0 2px 10px rgba(17,64,91,.28)} .hilfe .tip::after{content:"";position:absolute;top:100%;left:50%;margin-left:-6px; border:6px solid transparent;border-top-color:var(--petrol)} .hilfe:hover .tip,.hilfe:focus .tip,.hilfe:focus-within .tip{display:block} /* Im Tabellenkopf klappt der Kasten nach unten. Der Tabellenrahmen scrollt und wuerde ihn nach oben hin abschneiden. */ .tabelle th .hilfe .tip{bottom:auto;top:calc(100% + 9px);left:0;transform:none; white-space:normal;text-transform:none;letter-spacing:0;font-weight:400; font-size:12.5px;line-height:1.5} .tabelle th .hilfe .tip::after{top:auto;bottom:100%;left:12px;margin-left:0; border-top-color:transparent;border-bottom-color:var(--petrol)} .tabelle th.tip-rechts .hilfe .tip{left:auto;right:0} .tabelle th.tip-rechts .hilfe .tip::after{left:auto;right:12px} /* am linken Rand nicht aus dem Bild laufen */ .band .hilfe .tip,.summe .hilfe .tip{left:0;transform:none} .band .hilfe .tip::after,.summe .hilfe .tip::after{left:12px} /* Globale Suche in der Kopfleiste */ .suche{display:flex;align-items:center;gap:9px;height:34px;width:340px;max-width:46vw; padding:0 11px;border:1px solid var(--linie);background:var(--weiss)} .suche svg{width:15px;height:15px;flex:0 0 15px;stroke:var(--grau);fill:none;stroke-width:1.8; stroke-linecap:round} .suche input{font:inherit;font-size:13.5px;border:0;background:none;padding:0;width:100%; color:var(--text)} .suche input::placeholder{color:var(--grau)} .suche input:focus{outline:0} .suche:focus-within{border-color:var(--hellblau);box-shadow:inset 0 0 0 1px var(--hellblau)} /* Zwei Grafiken nebeneinander: Anmeldeverlauf links, Webinare rechts. Unter 780px stapeln sie, dann greifen wieder die breiten Beschriftungen. */ .gspalten{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr)); gap:22px 34px;align-items:start} .gspalten .verlauf{max-width:none} .verlauf.wroll{max-height:230px;overflow-y:auto;padding-right:4px} .gspalten .vz{grid-template-columns:158px minmax(0,1fr) 34px;gap:10px} .gspalten .vw{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* Datum zuerst und in fester Breite, dann fluchten die Titel darunter. */ .vw em{font-style:normal;color:var(--grau);font-size:11.5px; font-variant-numeric:tabular-nums} /* Ein Kaestchen je Webinar, von alt nach neu. Die Farbe ist die des Themas, blass heisst nicht dabei gewesen. Die Spur rollt, es kommen Webinare dazu. */ .wpkt{display:inline-flex;gap:3px;vertical-align:middle;max-width:100px; overflow-x:auto;overflow-y:hidden;padding-bottom:3px;scrollbar-width:thin} .wpkt i{flex:0 0 auto;display:block;width:9px;height:15px;cursor:default; background:var(--pf,var(--p-sonstiges));border:1px solid var(--pf,var(--p-sonstiges))} .wpkt i.weg{opacity:.2} .wpz{margin-left:9px;font-size:13px;font-weight:700;color:var(--petrol); font-variant-numeric:tabular-nums} .wpz.wpz-null{color:var(--grau);font-weight:400} /* Nicht --linie: das ist eine Rahmenfarbe und ergibt auf Weiss 1,5 zu 1, damit ist der Text nicht lesbar. --grau kommt auf 5,4 zu 1. */ .leerwert{color:var(--grau)} /* Erklaerkasten der Kacheln. Haengt am body, nicht an der Zelle: die Rollspur und der Tabellenrahmen wuerden ihn sonst abschneiden. */ #wtip{position:fixed;z-index:var(--e-tip);max-width:270px;padding:8px 10px; background:var(--petrol);color:var(--weiss);font-size:12.5px;line-height:1.45; box-shadow:0 2px 10px rgba(17,64,91,.28);pointer-events:none} #wtip b{display:block;font-size:13px;margin-bottom:2px} #wtip .wt-thema{display:inline-block;margin-right:6px;padding:1px 5px; background:var(--pf,var(--p-sonstiges));color:var(--petrol);font-weight:700; font-size:11px;text-transform:uppercase;letter-spacing:.04em} #wtip .wt-dabei{display:block;margin-top:3px;color:var(--pale)} /* Webinarkarten im Ueberblick der Firma. Eine Karte je Webinar, die Zahl sind die Teilnehmer aus dieser Firma. Das kleine Quadrat traegt die Produktfarbe, wie bei den Produktmerkern, damit die Themen wiedererkennbar bleiben. */ .wgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px; margin-top:14px} .wkarte{display:block;padding:12px 13px 13px;border:1px solid var(--linie); background:var(--weiss);text-decoration:none;color:var(--text)} .wkarte:hover{border-color:var(--petrol);background:var(--flaeche)} .wk-datum{display:block;font-size:11.5px;color:var(--grau); font-variant-numeric:tabular-nums;letter-spacing:.04em} .wk-zahl{display:block;font-size:30px;font-weight:700;color:var(--petrol);line-height:1.1; margin-top:2px;font-variant-numeric:tabular-nums} .wk-von{display:block;font-size:11.5px;color:var(--grau);margin-bottom:7px} .wk-titel{display:block;font-size:12.5px;line-height:1.35} .wk-titel::before{content:"";display:inline-block;width:7px;height:7px; background:var(--pf,var(--p-sonstiges));margin-right:5px;vertical-align:0} .wkarte.leer .wk-zahl{color:var(--grau)} .wkarte.leer .wk-titel::before{opacity:.3} /* Reiterleiste einer Listenseite. Die Firmenansicht hat ihre eigene Spalte, hier reicht eine Zeile ueber dem Inhalt. */ .reiter{display:flex;gap:1px;margin:0 0 22px;border-bottom:2px solid var(--linie)} .reiter a{padding:9px 18px;font-size:14px;font-weight:600;color:var(--grau); text-decoration:none;background:var(--flaeche);border:1px solid var(--linie); border-bottom:0;margin-bottom:-2px} .reiter a:hover{color:var(--petrol);background:var(--pale)} .reiter a.an{background:var(--petrol);color:var(--weiss);border-color:var(--petrol)} .reiter a b{display:inline-block;margin-left:8px;font-size:11px;padding:1px 6px; background:var(--warn);color:var(--weiss)} .reiter a.an b{background:var(--hellblau);color:var(--petrol)} /* Streudiagramm Jahreswert gegen Aktivitaetswert */ .streurahmen{border:1px solid var(--linie);background:var(--weiss);padding:10px 6px;margin:0 0 20px} svg.streu{display:block;width:100%;height:auto} svg.streu .gitter{stroke:var(--linie);stroke-width:1;stroke-dasharray:2 3} svg.streu .ax{font-size:11.5px;fill:var(--grau)} svg.streu .ar{text-anchor:end} svg.streu .am{text-anchor:middle} svg.streu .sq{font-size:12px;font-weight:700;fill:#A8322B;opacity:.75} svg.streu .pn{font-size:11.5px;fill:var(--text)} svg.streu .pkt{stroke:var(--weiss);stroke-width:1.5;opacity:.82;cursor:pointer} svg.streu a:hover .pkt{opacity:1;stroke:var(--petrol);stroke-width:2} svg.streu .k-gut{fill:#2E7D52} svg.streu .k-warn{fill:#D08A00} svg.streu .k-krit{fill:#A8322B} svg.streu .k-leer{fill:#9AA7AE} /* Zahl, die auffallen soll, ohne gleich ein Merker zu sein */ td.warnzahl{color:var(--krit);font-weight:700} table.breit th,table.breit td{padding:7px 9px;font-size:13px} /* Fuenf Kacheln nebeneinander. Der Vierersatz des Firmenprofils laesst die fuenfte in eine zweite Reihe fallen und reisst ein graues Loch daneben. */ .zahlen.fuenf{grid-template-columns:repeat(5,minmax(0,1fr))} @media (max-width:1100px){ .zahlen.fuenf{grid-template-columns:repeat(3,minmax(0,1fr))} } @media (max-width:700px){ .zahlen.fuenf{grid-template-columns:repeat(2,minmax(0,1fr))} } /* --------------------------------------------------------- Startseite --- Eine Zeile je Firma, der Grund als Marke daneben. Die Zeilenfarbe am linken Rand macht die Schwere sichtbar, ohne dass jemand die Marken lesen muss. */ .tabelle table.breit tbody tr.r1 td:first-child{box-shadow:inset 3px 0 0 var(--krit)} .tabelle table.breit tbody tr.r2 td:first-child{box-shadow:inset 3px 0 0 var(--warn)} .tabelle table.breit tbody tr.r3 td:first-child{box-shadow:inset 3px 0 0 var(--hellblau)} .tabelle table.breit tbody td{vertical-align:top;padding-top:9px;padding-bottom:9px} /* Zweite Zeile in einer Zelle: die Begruendung zur Zahl darueber */ .nebentext{display:block;font-size:11.5px;line-height:1.4;color:var(--grau);margin-top:2px} /* Grund einer Zeile. Mehrere stehen nebeneinander. */ .grund{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.08em; text-transform:uppercase;padding:2px 6px;border:1px solid currentColor;margin:0 5px 3px 0} .grund.g-krit{color:var(--krit)} .grund.g-warn{color:var(--warn)} .grund.g-info{color:var(--petrol)} td.warum{min-width:210px} /* Aktivitaetswert als Bahn. Die Zahl steht daneben, der Balken ist die Einordnung. */ .sbahn{display:block;width:104px;height:6px;background:var(--flaeche); border:1px solid var(--linie)} .sbahn i{display:block;height:100%} .sbahn i.schwach{background:var(--krit)} .sbahn i.mittel{background:var(--warn)} .sbahn i.stark{background:var(--gut)} /* Ruhiger Zustand, wenn nichts offen ist. Soll nicht nach Fehler aussehen. */ .ruhe{background:var(--weiss);border:1px solid var(--linie);border-left:3px solid var(--gut); padding:18px 20px;margin-top:18px} .ruhe .rtitel{margin:0 0 5px;font-weight:700;color:var(--gut)} .ruhe p{margin:0;color:var(--grau)} /* Was keine Firmenzeile ist: Zuordnung und Webinare, nebeneinander unter der Liste. */ .fusskarten{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px;margin-top:26px} .fkarte{background:var(--weiss);border:1px solid var(--linie);padding:15px 18px 17px} .fkarte h3{margin:0 0 7px;font-size:13px;letter-spacing:.1em;text-transform:uppercase; color:var(--grau)} .fkarte p{margin:0 0 10px;color:var(--grau);font-size:13px} .fkarte ul{margin:0 0 12px;padding-left:17px;font-size:13.5px} .fkarte li{margin-bottom:4px} .fkarte li b{font-variant-numeric:tabular-nums} /* Anwesenheitskurve eines Webinars. Die Zeitachse steht als eigene Zeile darunter, nicht im SVG: preserveAspectRatio=none verzerrt sonst die Schrift. */ .zeitbild{margin-top:14px;position:relative} .zhoch{font-size:11.5px;color:var(--grau);margin-bottom:2px} .zhoch b{color:var(--petrol);font-size:13px} .zeitbild svg{display:block;width:100%;height:172px} .zeitbild .zg{stroke:var(--linie);stroke-width:1;vector-effect:non-scaling-stroke} .zeitbild .za{stroke:var(--grau);stroke-width:1;vector-effect:non-scaling-stroke} .zachse{position:relative;height:16px;margin-top:2px} .zachse span{position:absolute;transform:translateX(-50%);font-size:11px;color:var(--grau); font-variant-numeric:tabular-nums} /* Erklärung der einzelnen Teile des Aktivitätswerts. Drei Sachen sind hier anders als beim üblichen Fragezeichen: die erste Spalte braucht Platz für den Knopf, der Kasten klappt nach unten, weil der Wertkasten ganz oben auf der Seite sitzt, und er bekommt einen hellen Rand, sonst verschwimmt Petrol auf Petrol. Dazu die Vererbung aus .lbl abstellen, sonst steht die ganze Erklärung in Grossbuchstaben mit Sperrschrift. */ .teil{grid-template-columns:94px 1fr 26px} .wertkasten .hilfe .tip{text-transform:none;letter-spacing:0;border:1px solid var(--hellblau)} .wertkasten .teil .hilfe .tip{bottom:auto;top:calc(100% + 9px);left:-8px;transform:none} .wertkasten .teil .hilfe .tip::after{top:auto;bottom:100%;left:18px;margin-left:0; border-top-color:transparent;border-bottom-color:var(--hellblau)} /* Erklärkasten in einer Tabellenzelle. Der Rahmen der Tabelle rollt waagerecht, und overflow-x:auto macht auch senkrecht einen Scrollbereich daraus: ein Kasten, der nach oben aufklappt, wird in der ersten Zeile abgeschnitten. Deshalb klappt er hier nach unten, und in den unteren Zeilen setzt intern.js die Klasse tip-hoch, damit er dort wieder nach oben geht. Passt die Tabelle ohne Rollen in ihren Rahmen, hebt intern.js das Beschneiden ganz auf. */ .tabelle.passt{overflow:visible} .tabelle td .hilfe .tip{bottom:auto;top:calc(100% + 9px);left:-8px;transform:none; white-space:normal;font-weight:400;text-transform:none;letter-spacing:0} .tabelle td .hilfe .tip::after{top:auto;bottom:100%;left:16px;margin-left:0; border-top-color:transparent;border-bottom-color:var(--petrol)} .tabelle td.tip-hoch .hilfe .tip{top:auto;bottom:calc(100% + 9px)} .tabelle td.tip-hoch .hilfe .tip::after{bottom:auto;top:100%; border-bottom-color:transparent;border-top-color:var(--petrol)} /* Trichter der Marketing-Mails: zugestellt, geoeffnet, geklickt. Die Balken laufen gegen die Zustellungen, deshalb wird die Spur nach unten kuerzer. */ .trichter{display:flex;flex-direction:column;gap:7px;margin:14px 0 4px} .tz{display:grid;grid-template-columns:96px minmax(0,1fr) 62px 48px minmax(0,150px); gap:12px;align-items:center;font-size:13.5px} .tw{color:var(--text)} .tb{display:block;height:18px;background:var(--flaeche);border:1px solid var(--linie)} .tb i{display:block;height:100%} .tv{text-align:right;font-weight:700;color:var(--petrol);font-variant-numeric:tabular-nums} .tq{text-align:right;color:var(--grau);font-variant-numeric:tabular-nums} .tk{color:var(--grau);font-size:12.5px} @media (max-width:820px){ .tz{grid-template-columns:88px minmax(0,1fr) 54px 44px} .tk{display:none} } /* Langer Erklärtext. In der Standardbreite von 290 Pixeln wird daraus eine schmale Säule über den halben Bildschirm. */ .hilfe.breit .tip{width:470px} /* Themenliste der Mails: Balken nach Sendungen, rechts die beiden Raten. */ .themenliste{display:flex;flex-direction:column;gap:7px;margin-top:12px} .thz{display:grid;grid-template-columns:minmax(0,1fr) 110px 54px 62px 62px;gap:12px; align-items:center;font-size:13.5px} /* Ohne Prozente faellt die Zahlenspalte weg, die Angaben werden breiter. */ .themenliste.knapp .thz{grid-template-columns:minmax(0,1fr) 110px 76px 76px} .thw{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .thw em{font-style:normal;color:var(--grau);font-size:11.5px;margin-left:5px} .thb{display:block;height:16px;background:var(--flaeche);border:1px solid var(--linie)} .thb i{display:block;height:100%} .thn{text-align:right;font-variant-numeric:tabular-nums;color:var(--grau)} .thq{text-align:right;font-variant-numeric:tabular-nums;line-height:1.15} .thq strong{display:block;color:var(--petrol)} .thq em{font-style:normal;font-size:10.5px;color:var(--grau);letter-spacing:.03em} @media (max-width:860px){ .thz{grid-template-columns:minmax(0,1fr) 60px 56px 56px} .themenliste.knapp .thz{grid-template-columns:minmax(0,1fr) 72px 72px} .thb{display:none} } /* ------------------------------------------------- Kacheln der Startseite --- Eine Kachel je Art von Arbeit. Die Dringlichkeit steht als Streifen oben, damit die Reihenfolge auch ohne Lesen erkennbar ist. Feste Mindestbreite statt fester Spaltenzahl: die Zahl der Kacheln wechselt mit der Lage. */ .kacheln{display:grid;grid-template-columns:repeat(auto-fill,minmax(288px,1fr)); gap:14px;margin:22px 0 24px;align-items:start} .kachel{background:var(--weiss);border:1px solid var(--linie);border-top-width:3px; display:flex;flex-direction:column;min-width:0} .kachel.k-krit{border-top-color:var(--krit)} .kachel.k-warn{border-top-color:var(--warn)} .kachel.k-info{border-top-color:var(--hellblau)} .kkopf{display:flex;align-items:center;justify-content:space-between;gap:10px; padding:11px 14px 0} .kkopf .kt{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase} .k-krit .kt{color:var(--krit)} .k-warn .kt{color:var(--warn)} .k-info .kt{color:var(--petrol)} .kkopf .kn{font-size:11.5px;font-weight:700;color:var(--grau); font-variant-numeric:tabular-nums} .kzahl{margin:6px 0 0;padding:0 14px;display:flex;align-items:baseline;gap:7px;flex-wrap:wrap} .kzahl b{font-size:25px;font-weight:700;color:var(--petrol);line-height:1.1; font-variant-numeric:tabular-nums} .kzahl span{font-size:11.5px;color:var(--grau)} .ksatz{margin:8px 0 12px;padding:0 14px;font-size:12.5px;color:var(--grau);line-height:1.45} .kliste{margin:0;padding:0;list-style:none;border-top:1px solid var(--flaeche)} .kliste li{display:flex;align-items:baseline;justify-content:space-between;gap:10px; padding:7px 14px;border-bottom:1px solid var(--flaeche);font-size:13px} .kliste li:last-child{border-bottom:0} .kliste a{color:var(--petrol);text-decoration:none;font-weight:500; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .kliste a:hover{text-decoration:underline} .kliste li > span{color:var(--grau);white-space:nowrap;font-variant-numeric:tabular-nums} /* Die Nebenkacheln tragen Saetze statt Firmennamen, die brauchen zwei Zeilen. */ .kliste.kpunkte li{display:block;color:var(--text);line-height:1.45} .kfuss{margin:auto 0 0;padding:10px 14px;border-top:1px solid var(--flaeche);font-size:12.5px} .kfuss a{color:var(--petrol)} /* ------------------------------------------------------- Anmeldung, das Tor */ /* Die Seite vor der Anmeldung traegt die Klasse tor. Sie laeuft ganzflaechig, ohne Menueschiene und ohne Kopfleiste, mit dem Windfeld im Hintergrund. */ body.tor{background:#07202f;color:#fff} body.tor .schale{min-height:100vh} body.tor .rumpf{display:flex;align-items:center;justify-content:center} body.tor main{padding:40px 20px;width:100%;max-width:none} .tor-bild{position:fixed;inset:0;z-index:0;background:#07202f} .tor-bild canvas{display:block;width:100%;height:100%} /* Legt die Mitte ruhig, damit Marke und Formular lesbar bleiben. */ .tor-schleier{position:absolute;inset:0; background:radial-gradient(ellipse 54% 58% at 50% 46%, rgba(7,32,47,.74) 0%, rgba(7,32,47,.42) 50%, rgba(7,32,47,0) 82%)} .tor-mitte{position:relative;z-index:1;display:flex;flex-direction:column; align-items:center;gap:34px;width:100%} .tor-marke{display:flex;align-items:center;gap:26px} .tor-marke .tm-bild{display:block;height:104px;width:auto} .tor-marke .tm-zeilen{display:flex;flex-direction:column;gap:9px} .tor-marke .tm-wort{display:block;height:32px;width:auto} .tor-marke .tm-unter{display:flex;justify-content:space-between;width:100%; font-size:15px;font-weight:500;text-transform:uppercase;color:var(--hellblau)} /* Die drei Striche der Bildmarke bauen sich nacheinander auf, danach der Schriftzug. Einmal beim Oeffnen, nicht in Schleife. */ .tor-marke .marke-bild path{opacity:0;animation:strich .9s ease-out forwards} .tor-marke .marke-bild path:nth-child(1){animation-delay:.05s} .tor-marke .marke-bild path:nth-child(2){animation-delay:.2s} .tor-marke .marke-bild path:nth-child(3){animation-delay:.35s} .tor-marke .marke-bild path:nth-child(4){animation-delay:.5s} .tor-marke .tm-wort{opacity:0;animation:auftauchen .8s ease-out .62s forwards} .tor-marke .tm-unter{opacity:0;animation:auftauchen .8s ease-out .82s forwards} .tor-mitte .anmelden{opacity:0;animation:auftauchen .8s ease-out .95s forwards} @keyframes strich{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} @keyframes auftauchen{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} body.tor .anmelden{margin:0;width:100%;max-width:370px; box-shadow:0 20px 56px rgba(2,14,22,.55)} @media (max-width:620px){ .tor-marke{flex-direction:column;gap:16px;text-align:center} .tor-marke .tm-bild{height:78px} .tor-mitte{gap:26px} } @media (prefers-reduced-motion: reduce){ .tor-marke .marke-bild path,.tor-marke .tm-wort,.tor-marke .tm-unter, .tor-mitte .anmelden{animation:none;opacity:1;transform:none} } /* Kopf der Startseite mit Wahl des Einstiegs */ .sichtkopf{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap} .sichtkopf h1{margin:0} .sichtwahl{display:flex;align-items:center;gap:9px;margin:0} .sichtwahl label{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--grau)} .sichtwahl select{font:inherit;font-size:13.5px;padding:6px 10px;background:var(--weiss); border:1px solid var(--linie);color:var(--petrol);min-width:180px} /* Eine Kachel mit Grafik braucht zwei Spalten */ .kachel.breit{grid-column:span 2} @media (max-width:640px){ .kachel.breit{grid-column:span 1} } .kgrafik{padding:4px 10px 0} .kachel .knam{color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .kliste li > span.kwarn{color:var(--krit);font-weight:600} /* Bestandsgrafik: Balken je Jahr, Linie fuer den Bestand */ svg.bestand{display:block;width:100%;height:auto} svg.bestand .nulllinie{stroke:var(--linie);stroke-width:1} svg.bestand .bneu{fill:var(--gut)} svg.bestand .bweg{fill:var(--krit)} svg.bestand .blinie{fill:none;stroke:var(--petrol);stroke-width:2} svg.bestand .bpunkt{fill:var(--petrol)} svg.bestand .bax{font-size:10.5px;fill:var(--grau);text-anchor:middle} .klegende{margin:6px 0 0;padding:0 14px 4px;font-size:11.5px;color:var(--grau)} .klegende i{display:inline-block;width:10px;height:10px;margin:0 4px 0 10px; vertical-align:-1px} .klegende i:first-child{margin-left:0} .klegende .lneu{background:var(--gut)} .klegende .lweg{background:var(--krit)} .klegende .llinie{height:2px;width:14px;background:var(--petrol);vertical-align:3px} /* Gebuendelte Zeile: Firmenname, dahinter wie viele Geschaefte dahinterstehen */ .kliste .kzeile{display:flex;align-items:baseline;gap:8px;min-width:0} .kliste .kzeile > a,.kliste .kzeile > .knam{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .kliste .kzeile i{font-style:normal;font-size:11.5px;color:var(--grau);white-space:nowrap} /* Ein Kaestchen je Geschaeft hinter dem Firmennamen, in der Produktfarbe. Dieselbe Sprache wie die Webinarkaestchen im Firmenprofil. */ .dpkt{display:inline-flex;gap:3px;flex:0 0 auto;align-items:center} .dpkt i{display:block;width:9px;height:15px;cursor:help; background:var(--pf,var(--p-sonstiges));border:1px solid var(--pf,var(--p-sonstiges))} .dpkt i:hover{outline:2px solid var(--petrol);outline-offset:1px} #wtip span{display:block;margin-top:3px;color:var(--pale)} /* Zeichen in der Beschriftung eines Wertkastens: Person oder Firma. */ .wertkasten .lbl{display:flex;align-items:center;gap:6px} .wkz{width:14px;height:14px;flex:0 0 14px;stroke:currentColor;fill:none; stroke-width:1.7;stroke-linecap:square;opacity:.85} .wertkasten .wertzahl a{color:inherit;text-decoration:none; border-bottom:2px solid rgba(255,255,255,.35)} .wertkasten .wertzahl a:hover{border-bottom-color:#fff} .wkfuss{margin:4px 0 0;font-size:11px;line-height:1.35;color:#CFE3EE} .wertkasten.schwach .wkfuss,.wertkasten.mittel .wkfuss{color:#F0D9D5} /* Stehen zwei Kaesten im Kopfband, brauchen die Zahlen darunter frueher zwei Reihen, sonst werden die vier Felder zu schmal. */ @media (max-width:1240px){ .kopfband.zwei > .zahlen{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:900px){ .kopfband.zwei{flex-direction:column} .kopfband.zwei > .wertkasten{flex:0 0 auto} } /* Werkzeugleiste der Firmenliste: Suche, Kundenstatus, Befund in einer Zeile. Vierzehn Filterknoepfe nebeneinander waren zwei Zeilen Farbe ohne Ordnung, der Befund steckt jetzt in einem Auswahlfeld mit Gruppen. */ .werkzeugleiste{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap; background:var(--weiss);border:1px solid var(--linie);padding:12px 14px;margin:0 0 18px} .wfeld{display:flex;flex-direction:column;gap:5px;margin:0} .wfeld > span{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--grau)} .wfeld input,.wfeld select{font:inherit;font-size:14px;padding:8px 10px; border:1px solid var(--linie);background:var(--weiss);color:var(--text)} .wfeld select{min-width:190px} .wfeld input:focus,.wfeld select:focus{outline:2px solid var(--hellblau);outline-offset:-1px} .wsuche{flex:1;min-width:220px} .wbefund select{min-width:230px} .werkzeugleiste .btn{margin-bottom:0} .wzurueck{font-size:13px;color:var(--grau);margin-bottom:10px} @media (max-width:700px){ .wfeld,.wsuche{flex:1 1 100%} } /* Befundspalte: dieselben Merker wie die Kacheln, aber anklickbar */ a.merker{text-decoration:none} a.merker:hover{filter:brightness(.92)} /* Befundmenue: eigenes Aufklappen statt