/* ============================================================ ZL RÄUMUNGEN — Heller Grundton (Standard) Die Seite ist durchgehend hell und freundlich: heller Kopf, heller Startbereich, helles Anfrageformular. Einzige dunkle Fläche ist der Fussbereich — er rahmt die Seite nach unten ab. Wird über aktiviert (Standard). Mit data-modus="dunkel" gilt wieder der dunkle Aufbau aus style.css; die Palette "dunkel" schaltet zusätzlich die Grundflächen um. ============================================================ */ [data-modus="hell"]{ /* Wärmere, freundlichere Neutraltöne als im dunklen Aufbau */ --pg:#FBFAF9; /* Seitengrund, ein Hauch warm */ --card:#FFFFFF; --sunk:#F2F0EE; /* abgesetzte Bänder */ --line:rgba(28,31,34,.11); --line-2:rgba(28,31,34,.22); } /* ---------- Kopfzeile hell ---------- */ [data-modus="hell"] .hd{ background:rgba(255,255,255,.92); backdrop-filter:saturate(1.6) blur(10px); border-bottom:1px solid var(--line); } [data-modus="hell"] .logo b{color:var(--hd)} [data-modus="hell"] .logo span span{color:var(--tx-mut)} /* Die Fusszeile bleibt auch im hellen Aufbau dunkel — dort war das Logo bisher dunkelgrau auf dunklem Grund und damit praktisch unsichtbar. */ [data-modus="hell"] .ft .logo b{color:#fff} [data-modus="hell"] .ft .logo span span{color:var(--on-dark-mut)} /* .has-sub muss mit — sonst behält der Leistungen-Link die Farbe für dunklen Grund und steht blass auf dem weissen Kopf. */ [data-modus="hell"] .nav > a, [data-modus="hell"] .nav > .has-sub > a{color:var(--tx)} [data-modus="hell"] .nav > a:hover, [data-modus="hell"] .nav > .has-sub > a:hover{color:var(--hd)} [data-modus="hell"] .nav > a[aria-current="page"], [data-modus="hell"] .nav > .has-sub > a[aria-current="page"]{color:var(--hd); border-bottom-color:var(--acc)} [data-modus="hell"] .hd-tel{color:var(--hd)} [data-modus="hell"] .hd-tel small{color:var(--tx-mut)} [data-modus="hell"] .burger{border-color:var(--line-2); color:var(--hd)} /* Mega-Menü hell */ [data-modus="hell"] .mega{ background:#fff; border-top:1px solid var(--line); border-bottom:3px solid var(--acc); box-shadow:0 22px 54px rgba(28,31,34,.13); } [data-modus="hell"] .mega-t{color:var(--acc)} [data-modus="hell"] .mega-t::after{background:var(--line)} [data-modus="hell"] .mega a.mega-i:hover{background:var(--sunk); border-color:var(--line)} [data-modus="hell"] .mega-i b{color:var(--hd)} [data-modus="hell"] .mega-i span{color:var(--tx-mut)} [data-modus="hell"] .mega-cta{background:var(--sunk); border-color:var(--line)} [data-modus="hell"] .mega-cta b{color:var(--hd)} [data-modus="hell"] .mega-cta p{color:var(--tx-mut)} [data-modus="hell"] .mega-cta .tel{color:var(--hd)} /* Ausklappmenü hell */ [data-modus="hell"] .nav-drop{background:#fff; border-bottom:3px solid var(--acc); box-shadow:0 20px 40px rgba(28,31,34,.12)} [data-modus="hell"] .nav-drop .grp{color:var(--acc)} /* :not(.btn) ist nötig — sonst überschreibt diese Regel den roten Offerten-Knopf im Ausklappmenü und stellt graue Schrift auf Rot. */ [data-modus="hell"] .nav-drop a:not(.btn){color:var(--tx)} [data-modus="hell"] .nav-drop a:not(.btn):hover{color:var(--hd)} [data-modus="hell"] .nav-drop li + li{border-top-color:var(--line)} /* ---------- Startbereich hell ---------- */ [data-modus="hell"] .hero{ background:linear-gradient(170deg,#FFFFFF 0%,var(--pg) 46%,var(--sunk) 100%); color:var(--tx); } [data-modus="hell"] .hero h1{color:var(--hd)} [data-modus="hell"] .hero h1 em{color:var(--acc)} [data-modus="hell"] .hero .lead{color:var(--tx)} [data-modus="hell"] .hero .kick{color:var(--acc)} [data-modus="hell"] .hero .kick::before{background:var(--acc)} [data-modus="hell"] .hero-facts{border-top-color:var(--line)} [data-modus="hell"] .hero-facts div{color:var(--tx)} [data-modus="hell"] .hero-facts svg{color:var(--acc)} [data-modus="hell"] .hero .btn-b{color:var(--hd); border-color:var(--line-2)} [data-modus="hell"] .hero .btn-b:hover{background:var(--hd); color:#fff} [data-modus="hell"] .hero .float{opacity:.16} /* Platzhalterbilder hell, damit sie die Fläche nicht erschlagen */ [data-modus="hell"] .ph{background:linear-gradient(135deg,#E9E5E1,#DCD7D2)} [data-modus="hell"] .ph::after{background-image:repeating-linear-gradient(45deg,transparent 0 13px,rgba(28,31,34,.035) 13px 26px)} [data-modus="hell"] .ph svg{color:rgba(28,31,34,.26)} [data-modus="hell"] .ph-note{background:rgba(255,255,255,.78); color:var(--tx-mut)} /* Grosse Bento-Kachel: dunkler Verlauf nur unten, damit der Text hält */ [data-modus="hell"] .tile--big .tile-in{ background:linear-gradient(0deg,rgba(20,24,36,.9) 26%,rgba(20,24,36,0)); } /* ---------- Sektionen ---------- */ [data-modus="hell"] .sec-dark{background:var(--sunk); color:var(--tx)} [data-modus="hell"] .sec-dark h1, [data-modus="hell"] .sec-dark h2, [data-modus="hell"] .sec-dark h3, [data-modus="hell"] .sec-dark h4{color:var(--hd)} [data-modus="hell"] .sec-dark .lead{color:var(--tx)} [data-modus="hell"] .sec-dark .kick{color:var(--acc)} [data-modus="hell"] .sec-dark .kick::before{background:var(--acc)} [data-modus="hell"] .sec-dark .btn-b{color:var(--hd); border-color:var(--line-2)} [data-modus="hell"] .sec-dark .btn-b:hover{background:var(--hd); color:#fff} [data-modus="hell"] .sec-dark .gebiet span{border-color:var(--line-2); color:var(--tx)} [data-modus="hell"] .sec-dark .tl{border-left-color:var(--line-2)} [data-modus="hell"] .sec-dark .tl-step p{color:var(--tx-mut)} [data-modus="hell"] .sec-dark .tl-step::before{outline-color:var(--sunk)} /* Kernkanton-Karte: im hellen Aufbau farbig statt dunkel */ [data-modus="hell"] .kt-c--kern{background:var(--acc-soft); border-left:3px solid var(--acc)} [data-modus="hell"] .kt-c--kern b{color:var(--hd)} [data-modus="hell"] .kt-c--kern span{color:var(--tx-mut)} /* ---------- Anfrageformular hell ---------- */ [data-modus="hell"] .form-sec{background:var(--sunk)} [data-modus="hell"] .form-sec h2{color:var(--hd)} [data-modus="hell"] .form-sec .lead{color:var(--tx)} [data-modus="hell"] .form-sec .kick{color:var(--acc)} [data-modus="hell"] .form-sec .kick::before{background:var(--acc)} /* Die Farbtoken des Formulars auf hell umstellen. Das Formular leitet fast alles aus --acc ab, deshalb genügen die Flächen-, Linien- und Textfarben. */ [data-modus="hell"] .aform{ --brand:var(--hd); /* NICHT var(--acc) — das waere ringfoermig und macht --acc leer, samt allen daraus gemischten Token (--t9 … --t28, --glow). Folge waere: kein Knopf-Hintergrund, kein Fokusring, keine Auswahl-Markierung. */ --acc:var(--acc-marke); --acc-ink:#FFFFFF; /* Das Fehlerrot des dunklen Formulars ist auf hellem Grund zu blass. */ --bad:#C0261E; --card:#FFFFFF; --card2:#FBFAF9; --chip:#F4F2F0; --line:rgba(28,31,34,.14); --line2:rgba(28,31,34,.24); --text:#4A4E53; --head:#1E2124; --mut:#64696F; --mut2:#8A8E93; --info:#0F6B8C; box-shadow:0 2px 4px rgba(28,31,34,.04), 0 18px 44px rgba(28,31,34,.09); } [data-modus="hell"] .aform .rail{background:var(--sunk)} [data-modus="hell"] .aform .card{border:1px solid rgba(28,31,34,.12)} /* ---------- Fussbereich: bleibt dunkel als Abschluss ---------- */ /* (keine Überschreibung nötig — .ft nutzt weiterhin --navy) */ /* ---------- Schlusszeile ---------- */ /* Die Schlusszeile ist in beiden Aufbauten hell — im dunklen Modus liefert paletten.css die passenden Token dafür. */ /* ---------- Schatten statt harter Kanten ---------- Im hellen Aufbau tragen leichte Schatten die Tiefe, sonst wirken die Flächen flach. */ [data-modus="hell"] .tile, [data-modus="hell"] .usp-c, [data-modus="hell"] .karte, [data-modus="hell"] .kontakt-c, [data-modus="hell"] .stimme{box-shadow:0 1px 2px rgba(28,31,34,.04), 0 6px 18px rgba(28,31,34,.05)} [data-modus="hell"] .tile:hover{box-shadow:0 4px 10px rgba(28,31,34,.07), 0 18px 40px rgba(28,31,34,.10)} [data-modus="hell"] .kt-liste{box-shadow:0 1px 2px rgba(28,31,34,.04), 0 6px 18px rgba(28,31,34,.05)} /* ---------- Karte im hellen Aufbau ---------- */ [data-modus="hell"] .ch-flaeche{fill:#FFFFFF; stroke:var(--line-2)} [data-modus="hell"] .ch-see{fill:var(--sunk)} [data-modus="hell"] .pin-l{stroke:var(--pg)} [data-modus="hell"] .sec-sunk .pin-l, [data-modus="hell"] .sec-dark .pin-l{stroke:var(--sunk)}