/* ===================================================================== Derks-en-Zo - Konfigurator 2026 Gleicher Aufbau in jeder Kundendatei: 1 KUNDE Farbe, Logo, Schrift, Flaechen - die einzige Stelle mit Kundenwerten 2 AUTOMATIK rechnet die Schriftfarbe auf der Kundenfarbe (nicht anfassen) 3 MECHANIK verteilt die Werte auf die Oberflaeche, in allen Dateien identisch Laedt nach der Obuk.css und ueberschreibt nur Kundenwerte. ===================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Play:wght@400;700&display=swap'); /* --- 1 KUNDE ------------------------------------------------------- */ :root { --kunde: rgb(163, 28, 44); /* DIE eine Zeile je Kunde */ --ui-text: var(--mcol01); /* Navigation links; nur bei dunkler Sidebar: rgb(255, 255, 255) */ --top-text: var(--ui-text); /* Impressum/Anmelden; nur bei dunkler Kopfzeile + heller Sidebar: rgb(255,255,255) */ --acol01: var(--kunde); /* Anfrage-Kachel: Kundenfarbe statt OBUK-Gruen */ --auf-kunde: rgb(255, 255, 255); /* Schrift auf Kundenfarbe; Rueckfall Browser vor 2024, bei heller Marke dort rgb(25,32,39) */ --auf-kunde-weich: rgb(255, 255, 255);/* dito Modal- und Preiskopf */ } /* Logo */ .logo { background-image: url("../../resources/logos/Derks-en-Zo.png"); margin-left: 20px; margin-top: 5px; width: 359px; } .pr-logo { margin: auto; max-height: 50px; width: 257px; content: url("../../resources/logos/Derks-en-Zo.png"); filter: invert(0) sepia(0%) brightness(100%); } /* Schrift */ .kname { color: rgb(163, 28, 44); text-align: left; font-family: "Play", sans-serif; font-weight: 500; font-style: normal; font-size: 18pt; } .sidebar .nav-item { font-size: 12pt; text-align: left; font-family: "Open Sans", sans-serif; font-weight: 300; font-style: normal; } /* Flaechen */ .top-row { height: 90px !important; } .stxt { color: rgb(0, 0, 0); background-color: rgb(233, 236, 239); border: 0px; border-radius: 4px; cursor: pointer; width: 320px; height: 25px; margin-left: 5px; margin-bottom: 15px; } .top-row-bg { background-color: rgb(255, 255, 255); } .sidebar { height: 100vh; background-color: rgb(255, 255, 255); } .perleft { background-color: rgb(251, 252, 250); } .modb { background-color: rgb(255, 255, 255); } .sidebar .nav-line { background-color: var(--kunde); } /* --- 2 AUTOMATIK - nicht anfassen ------------------------------------ Schrift auf der Kundenfarbe: weiss oder dunkel, Schwelle 0.21. Rueckfallwerte stehen in Block 1, Custom Properties haben keinen Fallback. */ @supports (color: rgb(from white r g b)) { :root { --auf-kunde: rgb(from var(--kunde) calc(clamp(0, (.21 - (.2126*r*r + .7152*g*g + .0722*b*b) / 65025) * 100000, 1) * 255) calc(clamp(0, (.21 - (.2126*r*r + .7152*g*g + .0722*b*b) / 65025) * 100000, 1) * 255) calc(clamp(0, (.21 - (.2126*r*r + .7152*g*g + .0722*b*b) / 65025) * 100000, 1) * 255)); /* dunkle Variante = Ruheton rgb(25,32,39) statt Schwarz */ --auf-kunde-weich: rgb(from var(--kunde) calc(25 + clamp(0, (.21 - (.2126*r*r + .7152*g*g + .0722*b*b) / 65025) * 100000, 1) * 230) calc(32 + clamp(0, (.21 - (.2126*r*r + .7152*g*g + .0722*b*b) / 65025) * 100000, 1) * 223) calc(39 + clamp(0, (.21 - (.2126*r*r + .7152*g*g + .0722*b*b) / 65025) * 100000, 1) * 216)); } } /* --- 3 MECHANIK - nicht anfassen, in allen Dateien identisch -------- */ /* Icons sind Masken. Ihre Farbe wird in jedem Zustand ausdruecklich gesetzt, damit sie exakt der Schrift daneben entspricht. */ /* Navigation links. Echtes Markup: li.nav-item > div.nav-link > span.nav-icon + span Unterpunkte liegen IM li ihres Oberpunkts - deshalb nur .nav-link:hover, nie .nav-item:hover, sonst faerbt ein Unterpunkt das Icon seines Oberpunkts mit. */ .sidebar .nav-icon { background-color: var(--ui-text); } .sidebar .nav-link { color: var(--ui-text); } /* Kopfzeile: Impressum (a in div.nav-link) und Anmelden (div.nav-link) samt Icon */ .top-row a, .top-row .nav-link { color: var(--top-text); } .top-row .nav-icon { background-color: var(--top-text); } /* Kopfzeile Hover - Impressum und Anmelden stecken jeweils in einem div.nav-link - die blaugraue Hoverflaeche liefert die Obuk.css dem Div; hier werden Schrift und Icon DARIN weiss - der Stern ist noetig, weil der Link eine eigene Farbe hat und deshalb nichts vom Div erbt */ .top-row .nav-link:hover, .top-row .nav-link:hover * { color: var(--bcol03); } .top-row .nav-link:hover .nav-icon { background-color: var(--bcol03); } /* Aktionsleiste rechts. Liegt immer auf dem hellen Verlauf, daher fester Dunkelton. */ .action-icon { background-color: var(--mcol01); } .action-link, .action-link * { color: var(--mcol01); } /* Hover: Flaeche Kundenfarbe, Schrift und Icon kippen gemeinsam */ .sidebar .nav-link:hover, .action-link:hover { background-color: var(--kunde); } .sidebar .nav-link:hover, .sidebar .nav-link:hover *, .action-link:hover, .action-link:hover *, .action-link:hover .action-label { color: var(--auf-kunde); } .sidebar .nav-link:hover .nav-icon, .action-link:hover .action-icon { background-color: var(--auf-kunde); } /* Anfrage-Kachel und Buttons ruhend: Kundenfarbe */ .bgacol01, .bgacol01 * { color: var(--auf-kunde); } .bgacol01 .action-icon { background-color: var(--auf-kunde); } .btn-primary { background-color: var(--kunde); color: var(--auf-kunde); } /* deren Hover: Blaugrau + Weiss wie im OBUK-Standard - Buttonzeile setzt Altdateien mit eigenem .btn-primary:hover gleich - Kachelzeile noetig, sonst haelt die Hover-Regel oben sie auf Kundenfarbe - .action-label-Varianten noetig: die Obuk.css setzt dort mit (0,3,0) */ .btn-primary:hover:not(:disabled) { background-color: var(--mcol03); } .bgacol01:hover { background-color: var(--mcol03); } .bgacol01:hover, .bgacol01:hover *, .bgacol01:hover .action-label { color: var(--bcol03); } .bgacol01:hover .action-icon { background-color: var(--bcol03); } /* Modalkopf inkl. X */ .modh { background-color: var(--kunde); } .modh, .modh *, .modx { color: var(--auf-kunde-weich); } .modx:hover { color: var(--auf-kunde-weich); } /* Preisliste: Kopf Kundenfarbe, Flaeche heller Anflug davon - color-mix kennt kein alter Browser, dort bleibt die Flaeche weiss */ .ptop { background-color: var(--kunde); color: var(--auf-kunde-weich); } .pbase { background-color: color-mix(in srgb, var(--kunde) 10%, rgb(255, 255, 255)); }