/* tecis-CI · gemeinsame Basis für alle Vertriebstools Farben und Schriften gem. Corporate Design Manual V1.0. Schriften lokal gehostet (kein Google-CDN -> DSGVO-sauber, offlinefähig). */ /* Telefonmodus (Robin, 10.10.2026, CI-MOBIL.md): alle Regeln der Handy-App stehen in mobil.css, jede unter html.vt-mobil. Per @import, weil so alle Seiten samt Anmeldung und eingebetteten Vergleichen die Datei bekommen, ohne dass eine Seite geaendert werden muss, und weil ein @import das Malen blockiert wie ci.css selbst: kein Aufblitzen der Schreibtischfassung. Nur screen bis 760 px: ab 761 px und beim Drucken greift nichts. Relativ zu dieser Datei, damit die Durchreiche (/_beta/gemeinsam/) auch mobil.css aus der Beta holt (LEITFADEN 14, fester Pfad). Kein ?v=-Stempel noetig: die Dateien kommen mit max-age=0 und must-revalidate. Muss die erste Regel der Datei bleiben, sonst verwirft der Browser den @import. */ @import url('mobil.css') screen and (max-width:760px); @font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/gemeinsam/schriften/DMSans-Regular.woff2') format('woff2');} @font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/gemeinsam/schriften/DMSans-Medium.woff2') format('woff2');} @font-face{font-family:'DM Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/gemeinsam/schriften/DMSans-SemiBold.woff2') format('woff2');} @font-face{font-family:'DM Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/gemeinsam/schriften/DMSans-Bold.woff2') format('woff2');} @font-face{font-family:'Tinos';font-style:normal;font-weight:400;font-display:swap;src:url('/gemeinsam/schriften/Tinos-Regular.woff2') format('woff2');} @font-face{font-family:'Tinos';font-style:normal;font-weight:700;font-display:swap;src:url('/gemeinsam/schriften/Tinos-Bold.woff2') format('woff2');} :root{ --navy:#00325B; --sky:#009EE3; --lime:#D3D800; --sand:#CBCDB9; /* Eine Breite fuer Kopfzeile, Inhalt und Fusszeile aller Werkzeuge, dieselbe wie auf der Startseite. Robin am 13.09.2026: das muss einheitlich sein. Seit 17.10.2026 (Robin: "die gesamte Breite nutzen", 16:9 mit 1.920 Pixeln liess je 180 Pixel frei) 2.400 statt 1.560: bis dahin laeuft jede Seite ueber die ganze Breite, erst sehr breite Bildschirme behalten Raender. */ --seitenbreite:2400px; --navySoft:#0A4372; --ink:#1c2b38; --bg:#F3F5F4; } /* ---------- Verstecktes bleibt versteckt ---------- Das Attribut hidden versteckt nur ueber die Browserregel [hidden]{display:none}, und die verliert gegen jede eigene display-Angabe. Ein .kvzeile{display:flex} liess damit die Krankenversicherung des Partners stehen, obwohl die Zeile versteckt war und bei Ledigen nichts zu suchen hat (Robin, 09.09.2026). In der Steuerreform war das schon zweimal einzeln geflickt; hier gilt es fuer alle Werkzeuge. */ [hidden]{display:none !important;} /* ---------- Dunkle Ansicht ---------- Rueckmeldung 115 von Nadine Hillen (22.09.2026): "eine dunkel ansicht waere nice". Robin am 22.09.2026: erst ein Entwurf; am 23.09.2026 nach dem Entwurf: komplett fuer alles bauen. Umgeschaltet wird im Kontomenue und im Profil (gemeinsam/ansicht.js), gesetzt beim Laden von sprache.js. Vorerst nur in der Beta freigegeben (DUNKEL_LIVE in ansicht.js). Alles steht in @media screen: beim Drucken mit Strg+P bleibt das Blatt hell. Das PDF schaltet die Seite fuer den Abzug selbst auf hell (pdf.js). Die Ansicht entsteht ueber Variablen, nicht Werkzeug fuer Werkzeug. Die Bausteine tragen dafuer Farbrollen mit dem hellen Wert als Rueckfall, etwa var(--karte,#fff): ist die Rolle nicht gesetzt, bleibt alles wie bisher. Gesetzt werden die Rollen nur hier. --navy wechselt dabei die Rolle. Im Hellen ist es die Farbe der Zahlen und Titel, und die muss im Dunkeln hell werden. Wo Navy eine Flaeche mit weisser Schrift ist (Knoepfe, gewaehlte Chips, Symbole), steht in den Bausteinen --navy-flaeche, und die bleibt Navy. Die Kernaussage bleibt Navy mit Limettenzahl wie im Hellen: auf dem dunklen Grund ist sie die einzige satt blaue Flaeche und faellt dadurch erst recht auf. Kontraste gerechnet nach WCAG (22.09.2026): Zahlen und Titel 14,8:1 auf der Karte, Fliesstext 12,5:1, Sekundaertext 7,6:1, leiser Text 5,3:1, Himmelblau 5,6:1, Limette auf der Kernaussage 8,5:1, Weiss darauf 13,1:1, Achsenschrift der Diagramme 5,5:1, Violett als Linie 3,9:1. */ @media screen{ :root[data-ansicht="dunkel"]{ color-scheme:dark; /* Flaechen, von tief nach hoch */ --mulde:#0C1620; --bg:#0B141D; --karte:#121E2A; --karte-getoent:#172533; --schwebe:#1B2B3A; --erhaben:#26394B; --gesperrt:#2C3B49; /* Rest der Reglerbahn: 2,6:1 zur Karte, damit die Bahn zu sehen ist, und 2,0:1 zum himmelblauen Teil davor. Vorher #2A3B4B (1,5:1) in Firefox und das feste Hellgrau in Chrome (23.09.2026). Zweiter Durchgang am selben Tag: die Bahn zeigt den Bereich eines Bedienelements und braucht 3:1. #5A7087 traegt 3,3:1 auf der Karte, 3,0:1 getoent, 3,6:1 auf dem Seitengrund und 1,7:1 zum Himmelblau; die Grenze markiert der Knopf. Dieselbe Rolle nimmt der Ring der Umsatzplanung. */ --bahngrund:#5A7087; /* Ausgegraut, aber lesbar (23.09.2026): Inhalt, der noch nicht greift (Sollzins vor Stufe 4, leere Gruppen, gesperrte PDF-Karte), steht im Hellen mit seiner eigenen Deckkraft von 0,4 bis 0,6. Im Dunkeln lag leiser Text damit bei 2,3 bis 3,6:1. Mit 0,75 kommt leiser Text auf 4,9:1, Fliesstext auf 7,6:1, und der Abstand zum vollen Wert (12,5:1) zeigt weiter, dass es ruht. Die Werkzeuge schreiben opacity:var(--ausgegraut,). */ --ausgegraut:.75; --rand:#223242; --rand-stark:#33475A; --rollbalken:#33475A; --rollbalken-schwebe:#4A6076; /* Leise Trennlinie in Listen (Profil, Meine Rueckmeldungen). War nicht gesetzt, dort griff der helle Rueckfall #F0F2F0 (Pruefung 23.09.2026). */ --rand-leicht:#1A2836; /* Rahmen, die Bedeutung tragen (Robin, 23.09.2026: "an etlichen Stellen muss man die Augen zusammenkneifen"): Eingabefelder, Auswahlfelder, Chips, Segmente, Nulllinien. WCAG 1.4.11 verlangt 3:1 zur Umgebung, --rand-stark brachte nur 1,8:1 und bleibt fuer Trenner und Gitter. #627890: 3,7:1 auf der Karte, 3,4:1 auf der getoenten Flaeche, 3,2:1 auf der Schwebeflaeche, 4,1:1 auf dem Seitengrund. */ --rand-feld:#627890; /* Der gewaehlte Teil eines Umschalters (.tg, .mt, Filterleisten, Listen): im Hellen hebt ihn ein Schatten, der im Dunkeln verschwindet. Die Flaeche allein trug 1,1 bis 1,5:1 zur Mulde. Dazu ein himmelblauer Ring, 6,1:1 zur Mulde, 5,6:1 zur Karte. */ --gewaehlt-schatten:inset 0 0 0 1px var(--sky); /* Ruhende Kreise und erledigte Schritte (Admin, Vier-Wege): im Hellen Navy auf Grau, im Dunkeln leise Schrift auf erhabener Flaeche, 5,3:1. */ --ruht-grund:var(--erhaben); --ruht-schrift:var(--schrift-leise); /* Dichte und Haeufigkeit als RGB fuer rgba() (Waermekarte im Admin): im Hellen Navy, im Dunkeln Himmelblau, sonst unsichtbar (1,3:1). */ --dichte-rgb:0,158,227; /* Pfeile in Auswahlfeldern stehen als Bild im CSS und waren im Dunkeln Navy auf Navy (1,3:1). Hier derselbe Pfeil in leiser Schrift, 7,5:1. */ --pfeil-wahl:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%239DB0C0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --pfeil-weiter:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239DB0C0' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E"); --pfeil-wahl-klein:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239DB0C0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); /* Schrift */ --navy:#EAF1F7; --tinte:#D6DFE7; --schrift-leise:#9DB0C0; --schrift-leiser:#7F93A5; --gewaehlt-rand:var(--sky); --tinte-navy:var(--navy); /* --blau-schwebe war #123650: Himmelblau darauf nur 4,2:1 (Kennzahl der AVD-Umsatzplanung). #103049 traegt 4,5:1 (23.09.2026). */ --blau-getoent:#0E2B40; --blau-schwebe:#103049; --blau-rand:#1E4A68; --blau-schrift:var(--sky); /* "Laeuft lokal" und Betaprogramm: Limette statt des Olivgruens, das auf Dunkel nicht zu lesen ist (Leitfaden: Gruen heisst tecis-Limette). */ --lokal-grund:#1E2614; --lokal-rand:#3A461A; --lokal-schrift:var(--lime); --wip-grund:#2C2113; --wip-rand:#4D3A1E; --wip-schrift:#F0C07A; --beta-kopf:#271B0E; /* Getoente Hinweise der einzelnen Werkzeuge: Limette fuer Vorteile, Rot nur fuer Warnungen und Fehlbetraege, im Dunkeln im Rose #FFC7C2 wie die Luecke im Diagramm (Leitfaden Abschnitt 5). */ --lime-getoent:#1F2512; --lime-rand:#3F4A18; --rot-getoent:#2E1719; --rot-rand:#5A2A2A; --rot-schrift:#FFC7C2; --gruen:var(--lime); /* Dieselben Rollen unter den Namen, die app.css, werkzeug.css und einzelne Seiten schon fuehren. */ --ink:var(--tinte); --mut:var(--schrift-leise); --mut2:var(--schrift-leiser); --weiss:var(--karte); --card:var(--karte); --flaeche:var(--karte-getoent); --linie:var(--rand); --line:var(--rand); --linie-stark:var(--rand-feld); --wz-ink:var(--tinte); --wz-mut:var(--schrift-leise); --wz-mut2:var(--schrift-leiser); --wz-linie:var(--rand); --wz-rand:var(--rand-feld); /* Eigene Namen einzelner Werkzeuge fuer dieselben Rollen (Vorteilsregal, Strukturrechner, Transkription, Steuerreform, Bausparen oder Depot). Die Werkzeuge setzen sie in ihrem eigenen :root; diese Regel wiegt schwerer und gilt deshalb im Dunkeln vor ihnen. --blue, --navyTief und --bsp sind dort Navy als Schrift und Datenfarbe und werden wie --navy hell; wo sie eine Flaeche mit weisser Schrift tragen, steht im Werkzeug --navy-flaeche. */ --surface:var(--karte); --karte2:var(--karte-getoent); --plane:var(--bg); --grund:var(--bg); --text:var(--tinte); --ink-2:var(--schrift-leise); --muted:var(--schrift-leise); --gedaempft:var(--schrift-leise); --ink-3:var(--schrift-leiser); --leise:var(--schrift-leiser); /* --line-strong ist im Bauspar-Vergleich die Nulllinie (dort bewusst 3:1), --linieStark im Vorteilsregal der Rahmen der Felder und Knoepfe. */ --border:var(--rand); --line-strong:var(--rand-feld); --linieStark:var(--rand-feld); --blue:var(--navy); --navyTief:var(--navy); --bsp:var(--navy); /* Depot im Bauspar-Vergleich: im Hellen der gedaempfte Ton #0079AD, als Schrift auf der dunklen Karte nur 3,5:1. Im Dunkeln Himmelblau wie die Depotlinie, 5,6:1 auf der Karte (23.09.2026, vorher als Notloesung im Werkzeug selbst). */ --dep:var(--sky); /* Himmelblau als Flaeche unter weisser Schrift, etwa ein Knopf beim Zeigen: Weiss auf #009EE3 traegt nur 3,0:1. Im Dunkeln der gedaempfte Ton #0079AD, 4,8:1. Hell bleibt es Himmelblau (Anlass Robin, Pruefung 23.09.2026). Schreibweise: var(--sky-flaeche,var(--sky)). */ --sky-flaeche:#0079AD; /* Schild Betaprogramm: Weiss auf #4C8B3B 4,2:1, #458338 traegt 4,6:1 (23.09.2026). Schreibweise: var(--beta-schild,#4C8B3B). */ --beta-schild:#458338; --blue-light:var(--blau-getoent); --bsp-soft:var(--blau-getoent); --dep-soft:var(--blau-getoent); --gut-soft:var(--blau-getoent); --warn-soft:var(--wip-grund); --warnGrund:var(--wip-grund); --warnLinie:var(--wip-rand); --warn:var(--wip-schrift); --amber:var(--wip-schrift); --jaGrund:var(--lokal-grund); --jaLinie:var(--lokal-rand); --green:var(--lime); --rotGrund:var(--rot-getoent); --rotLinie:var(--rot-rand); --rot:var(--rot-schrift); --red:var(--rot-schrift); --schatten:0 1px 2px rgba(0,0,0,.35),0 8px 26px rgba(0,0,0,.28); --wz-schatten:0 1px 2px rgba(0,0,0,.35),0 10px 30px rgba(0,0,0,.3); --shadow:var(--wz-schatten); } /* Felder ohne eigene Flaeche bekaemen im Dunkeln das Grau des Browsers (etwa das Textfeld der Rueckmeldung). Ohne Gewicht (:where), damit jede Angabe eines Werkzeugs vorgeht. */ :where(:root[data-ansicht="dunkel"]) :where(input,textarea,select){background-color:var(--karte);} /* Platzhalter in Feldern: das Grau des Browsers trug im Dunkeln nur 3,4 bis 3,7:1. Leiser Text wie ueberall: 5,3:1 auf der Karte, 4,9:1 getoent (23.09.2026). */ :where(:root[data-ansicht="dunkel"]) ::placeholder{color:var(--schrift-leiser);opacity:1;} /* Die Kernaussage bekommt eine feine himmelblaue Kante. Ohne sie hebt sich das Navy nur um 1,3:1 von der dunklen Karte ab. */ :root[data-ansicht="dunkel"] .aussage{box-shadow:inset 0 0 0 1px rgba(0,158,227,.35);} /* Gewaehlte Sprache im Sprachmenue: Navy hob sich nur mit 1,3:1 von der Karte ab, dazu der himmelblaue Ring wie in den Auswahllisten (23.09.2026). */ :root[data-ansicht="dunkel"] .vt-sprachmenue button.aktiv{box-shadow:var(--gewaehlt-schatten);} /* Diagramme: die Werkzeuge schreiben ihre Farben als Attribut ins Bild (stroke="#00325B"). Eine CSS-Angabe schlaegt ein Attribut, deshalb greift das hier ohne Aenderung im Werkzeug. Navy wird wie die Schrift hell, Gitterlinien werden zur dunklen Linie, weisse Ringe um Punkte zur Karte. Weisse Schrift auf farbigen Stuecken bleibt weiss. Die Symbole der Startseite (.sym) stehen auf Navy und bleiben, wie sie sind. */ :root[data-ansicht="dunkel"] svg [stroke="#00325B" i]{stroke:var(--navy);} :root[data-ansicht="dunkel"] svg [fill="#00325B" i]{fill:var(--navy);} :root[data-ansicht="dunkel"] svg stop[stop-color="#00325B" i]{stop-color:var(--navy);} :root[data-ansicht="dunkel"] svg [stroke="#EEF1EF" i], :root[data-ansicht="dunkel"] svg [stroke="#EEF1F0" i], :root[data-ansicht="dunkel"] svg [stroke="#F0F2F0" i], :root[data-ansicht="dunkel"] svg [stroke="#E8ECEA" i], :root[data-ansicht="dunkel"] svg [stroke="#E1E4DE" i], :root[data-ansicht="dunkel"] svg [stroke="#EAEEEC" i], :root[data-ansicht="dunkel"] svg [stroke="#ECEFED" i], :root[data-ansicht="dunkel"] svg [stroke="#E7EAE7" i], :root[data-ansicht="dunkel"] svg [stroke="#E4E8E4" i], :root[data-ansicht="dunkel"] svg [stroke="#E3E7E4" i], :root[data-ansicht="dunkel"] svg [stroke="#F4F6F4" i], :root[data-ansicht="dunkel"] svg [stroke="#DCE0DA" i], :root[data-ansicht="dunkel"] svg [stroke="#CFD6DC" i], :root[data-ansicht="dunkel"] svg [stroke="#C9D2CB" i], :root[data-ansicht="dunkel"] svg [stroke="#C4CBC6" i]{stroke:var(--rand-stark);} :root[data-ansicht="dunkel"] svg [fill="#ECEFED" i], :root[data-ansicht="dunkel"] svg [fill="#EEF1EF" i]{fill:var(--mulde);} :root[data-ansicht="dunkel"] svg [stroke="#fff" i], :root[data-ansicht="dunkel"] svg [stroke="#ffffff" i]{stroke:var(--karte);} :root[data-ansicht="dunkel"] svg :not(text):not(tspan)[fill="#fff" i], :root[data-ansicht="dunkel"] svg :not(text):not(tspan)[fill="#ffffff" i]{fill:var(--karte);} :root[data-ansicht="dunkel"] .sym svg [fill="#00325B" i]{fill:#00325B;} :root[data-ansicht="dunkel"] .sym svg [stroke="#00325B" i]{stroke:#00325B;} /* Dunkle Toene der Auswertungspalette (Admin) trugen auf der Karte unter 3:1: Dunkelhimmelblau #006A9B 2,8:1, Grau #5F6B76 2,9:1. Im Dunkeln heller im selben Ton, 3,9:1 und 5,4:1 (23.09.2026). */ :root[data-ansicht="dunkel"] svg [fill="#006A9B" i]{fill:#2380B5;} :root[data-ansicht="dunkel"] svg [stroke="#006A9B" i]{stroke:#2380B5;} :root[data-ansicht="dunkel"] svg stop[stop-color="#006A9B" i]{stop-color:#2380B5;} :root[data-ansicht="dunkel"] svg [fill="#5F6B76" i]{fill:#8593A0;} :root[data-ansicht="dunkel"] svg [stroke="#5F6B76" i]{stroke:#8593A0;} :root[data-ansicht="dunkel"] svg stop[stop-color="#5F6B76" i]{stop-color:#8593A0;} :root[data-ansicht="dunkel"] :is(i,span):empty:is([style*="#006A9B" i],[style*="rgb(0, 106, 155)"]){background:#2380B5 !important;} :root[data-ansicht="dunkel"] :is(i,span):empty:is([style*="#5F6B76" i],[style*="rgb(95, 107, 118)"]){background:#8593A0 !important;} /* Farbpunkte in Legende und Wertekaestchen, die Navy als Stilangabe tragen: sie folgen der hellen Linie. Dazu jedes leere i oder span mit Navy im style (Legenden in Riester oder AV-Depot, Vorsorgeplanung, Admin): dort stand Navy als Punkt auf der dunklen Karte mit 1,3:1 (23.09.2026). */ :root[data-ansicht="dunkel"] i:empty[style*="#00325B" i], :root[data-ansicht="dunkel"] span:empty[style*="#00325B" i], :root[data-ansicht="dunkel"] i:empty[style*="rgb(0, 50, 91)"], :root[data-ansicht="dunkel"] span:empty[style*="rgb(0, 50, 91)"], :root[data-ansicht="dunkel"] .dot[style*="#00325B" i], :root[data-ansicht="dunkel"] .tip i[style*="#00325B" i], :root[data-ansicht="dunkel"] .tip i[style*="rgb(0, 50, 91)"], :root[data-ansicht="dunkel"] .vtd-punkt[style*="rgb(0, 50, 91)"], :root[data-ansicht="dunkel"] .vtd-punkt[style*="#00325B" i]{background:var(--navy) !important;} } /* ---------- Touch ---------- Unter 16px zoomt iOS beim Antippen eines Feldes in die Seite hinein. Gilt fuer alle Werkzeuge - deshalb hier und nicht je Seite. !important, weil einzelne Werkzeuge ihre Felder kleiner setzen. */ @media (hover:none) and (pointer:coarse){ input, select, textarea { font-size:16px !important; } }