/* Dunkelmodus für tools.ihre-finanzarchitekten.de und die Anmeldeseiten (29.09.2026). Folgt der Einstellung des Geräts; der Knopf unten rechts (dunkel.js) legt es fest: data-farbe="dunkel" | "hell" am , ohne Attribut = wie das Gerät. */ :root[data-farbe="dunkel"] { --blau: #5CB3EE; --dunkel: #E4EDF5; --tief: #0B1520; --warm: #0F1A26; --weiss: #172636; --text: #E4EBF2; --grau: #A3B3C3; --rand: #2A3E52; --gruen: #58C98A; --rot: #F08A7E; --flaeche2: #1D3044; color-scheme: dark; } :root[data-farbe="dunkel"] input[type=text], :root[data-farbe="dunkel"] input[type=email], :root[data-farbe="dunkel"] input[type=password], :root[data-farbe="dunkel"] input[type=number], :root[data-farbe="dunkel"] select, :root[data-farbe="dunkel"] textarea, :root[data-farbe="dunkel"] .block, :root[data-farbe="dunkel"] .mini, :root[data-farbe="dunkel"] .knopf.hell, :root[data-farbe="dunkel"] .todo, :root[data-farbe="dunkel"] .todo-feld .todo, :root[data-farbe="dunkel"] .kachel, :root[data-farbe="dunkel"] .legende .muster, :root[data-farbe="dunkel"] .eigene-dialog button, :root[data-farbe="dunkel"] dialog { background: var(--weiss); color: var(--text); } :root[data-farbe="dunkel"] .knopf { background: #2C6FA3; color: #fff; } :root[data-farbe="dunkel"] .knopf:hover { background: #245D8A; } :root[data-farbe="dunkel"] .knopf.hell:hover, :root[data-farbe="dunkel"] .kachel .bearbeiten:hover { background: var(--flaeche2); } :root[data-farbe="dunkel"] .reiter:hover, :root[data-farbe="dunkel"] .reiter.aktiv { background: var(--weiss); } :root[data-farbe="dunkel"] .reiter small, :root[data-farbe="dunkel"] .marke.offen { background: var(--flaeche2); color: var(--grau); } :root[data-farbe="dunkel"] .tabelle td, :root[data-farbe="dunkel"] .faktor-liste li { border-bottom-color: var(--rand); } :root[data-farbe="dunkel"] .geheim, :root[data-farbe="dunkel"] .todo pre, :root[data-farbe="dunkel"] .anleitung-dialog pre { background: var(--flaeche2); color: var(--text); } :root[data-farbe="dunkel"] .meldung.fehler, :root[data-farbe="dunkel"] .marke.aus { background: #3A1E1C; color: #F4B2A9; border-color: #5A2D29; } :root[data-farbe="dunkel"] .meldung.ok { background: #16321F; color: #9FDFB6; border-color: #24492F; } :root[data-farbe="dunkel"] .meldung.info, :root[data-farbe="dunkel"] .marke.admin, :root[data-farbe="dunkel"] .kachel em.server.s1, :root[data-farbe="dunkel"] .legende .marke-at { background: #173247; color: #9CCDF0; border-color: #24465F; } :root[data-farbe="dunkel"] .marke.kunde, :root[data-farbe="dunkel"] .kachel em.server.s2, :root[data-farbe="dunkel"] .legende .marke-nc { background: #3A2A14; color: #F0C58A; } :root[data-farbe="dunkel"] .todo-feld .todo.erledigt .todo-fuss .todo-status { color: var(--gruen); } :root[data-farbe="dunkel"] .kachel:hover, :root[data-farbe="dunkel"] .todo-feld .todo:hover { box-shadow: 0 8px 24px rgba(0,0,0,.35); } :root[data-farbe="dunkel"] .eigene-dialog .speichern { background: #2C6FA3; border-color: #2C6FA3; color: #fff; } :root[data-farbe="dunkel"] .logo, :root[data-farbe="dunkel"] .logo-klein { filter: brightness(1.25); } @media (max-width: 700px) { :root[data-farbe="dunkel"] .reiter, :root[data-farbe="dunkel"] .reiter:hover { background: var(--weiss); color: var(--grau); } :root[data-farbe="dunkel"] .reiter.aktiv, :root[data-farbe="dunkel"] .reiter.aktiv:hover { background: #2C6FA3; border-color: #2C6FA3; color: #fff; } } @media (prefers-color-scheme: dark) { :root:not([data-farbe="hell"]) { --blau: #5CB3EE; --dunkel: #E4EDF5; --tief: #0B1520; --warm: #0F1A26; --weiss: #172636; --text: #E4EBF2; --grau: #A3B3C3; --rand: #2A3E52; --gruen: #58C98A; --rot: #F08A7E; --flaeche2: #1D3044; color-scheme: dark; } :root:not([data-farbe="hell"]) input[type=text], :root:not([data-farbe="hell"]) input[type=email], :root:not([data-farbe="hell"]) input[type=password], :root:not([data-farbe="hell"]) input[type=number], :root:not([data-farbe="hell"]) select, :root:not([data-farbe="hell"]) textarea, :root:not([data-farbe="hell"]) .block, :root:not([data-farbe="hell"]) .mini, :root:not([data-farbe="hell"]) .knopf.hell, :root:not([data-farbe="hell"]) .todo, :root:not([data-farbe="hell"]) .todo-feld .todo, :root:not([data-farbe="hell"]) .kachel, :root:not([data-farbe="hell"]) .legende .muster, :root:not([data-farbe="hell"]) .eigene-dialog button, :root:not([data-farbe="hell"]) dialog { background: var(--weiss); color: var(--text); } :root:not([data-farbe="hell"]) .knopf { background: #2C6FA3; color: #fff; } :root:not([data-farbe="hell"]) .knopf:hover { background: #245D8A; } :root:not([data-farbe="hell"]) .knopf.hell:hover, :root:not([data-farbe="hell"]) .kachel .bearbeiten:hover { background: var(--flaeche2); } :root:not([data-farbe="hell"]) .reiter:hover, :root:not([data-farbe="hell"]) .reiter.aktiv { background: var(--weiss); } :root:not([data-farbe="hell"]) .reiter small, :root:not([data-farbe="hell"]) .marke.offen { background: var(--flaeche2); color: var(--grau); } :root:not([data-farbe="hell"]) .tabelle td, :root:not([data-farbe="hell"]) .faktor-liste li { border-bottom-color: var(--rand); } :root:not([data-farbe="hell"]) .geheim, :root:not([data-farbe="hell"]) .todo pre, :root:not([data-farbe="hell"]) .anleitung-dialog pre { background: var(--flaeche2); color: var(--text); } :root:not([data-farbe="hell"]) .meldung.fehler, :root:not([data-farbe="hell"]) .marke.aus { background: #3A1E1C; color: #F4B2A9; border-color: #5A2D29; } :root:not([data-farbe="hell"]) .meldung.ok { background: #16321F; color: #9FDFB6; border-color: #24492F; } :root:not([data-farbe="hell"]) .meldung.info, :root:not([data-farbe="hell"]) .marke.admin, :root:not([data-farbe="hell"]) .kachel em.server.s1, :root:not([data-farbe="hell"]) .legende .marke-at { background: #173247; color: #9CCDF0; border-color: #24465F; } :root:not([data-farbe="hell"]) .marke.kunde, :root:not([data-farbe="hell"]) .kachel em.server.s2, :root:not([data-farbe="hell"]) .legende .marke-nc { background: #3A2A14; color: #F0C58A; } :root:not([data-farbe="hell"]) .todo-feld .todo.erledigt .todo-fuss .todo-status { color: var(--gruen); } :root:not([data-farbe="hell"]) .kachel:hover, :root:not([data-farbe="hell"]) .todo-feld .todo:hover { box-shadow: 0 8px 24px rgba(0,0,0,.35); } :root:not([data-farbe="hell"]) .eigene-dialog .speichern { background: #2C6FA3; border-color: #2C6FA3; color: #fff; } :root:not([data-farbe="hell"]) .logo, :root:not([data-farbe="hell"]) .logo-klein { filter: brightness(1.25); } @media (max-width: 700px) { :root:not([data-farbe="hell"]) .reiter, :root:not([data-farbe="hell"]) .reiter:hover { background: var(--weiss); color: var(--grau); } :root:not([data-farbe="hell"]) .reiter.aktiv, :root:not([data-farbe="hell"]) .reiter.aktiv:hover { background: #2C6FA3; border-color: #2C6FA3; color: #fff; } } } /* Umschalter */ .farbe-knopf { position: fixed; right: 14px; bottom: 14px; z-index: 50; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--rand); background: var(--weiss); color: var(--dunkel); font-size: 17px; line-height: 1; cursor: pointer; box-shadow: 0 2px 10px rgba(15,33,55,.15); display: flex; align-items: center; justify-content: center; } .farbe-knopf:hover { border-color: var(--blau); } /* Neu-laden-Knopf über dem Farbknopf */ .neu-laden-knopf { bottom: 60px; font-size: 19px; } .neu-laden-knopf.dreht { animation: neu-drehen .8s linear infinite; } @keyframes neu-drehen { to { transform: rotate(360deg); } }