/* ========================================================================== Innuvis — Bereichsfarbe und Bereichswechsler ========================================================================== Innuvis spricht zwei Zielgruppen mit verschiedenen Fragen an: Betreiber, die ihre eigene Anlage pruefen (Blau), und Dienstleister, die fuer andere pruefen und die Software unter eigener Marke einsetzen (Bernstein). Angesprochen wird in beiden Bereichen mit Sie — die Trennung traegt die Farbe, nicht das Pronomen (siehe ANNAHMEN.md I1). Statt zwei Seitenfamilien mit doppelter Pflege gibt es EINE Komponenten- sammlung und einen Farbtausch: belegt die Akzent-Tokens aus in-page.css neu. Jede Komponente, die sich an diese Tokens haelt, wechselt automatisch mit. WARUM BERNSTEIN --------------- #F5B342 erreicht auf --in-bg (#0A0118) 11,1:1 und auf --in-surface (#0F0520) 10,7:1 — als Text also komfortabel ueber AA. Umgekehrt erreicht --in-bg auf der Bernstein-Flaeche denselben Wert, das Token laesst sich daher als Text UND als Flaeche verwenden. Das ist der Unterschied zum Signal-Gelb bei rawe-hermetics, das als Text auf Weiss nur 1,58:1 schafft und deshalb reine Flaechenfarbe bleiben muss. WICHTIG: Schrift auf der Bernstein-Flaeche ist IMMER --in-on-accent (fast schwarz), niemals weiss — Weiss auf #F5B342 ergibt 1,9:1. ========================================================================== */ body.in-bereich-dienstleister{ --in-accent:#F5B342; --in-accent-line:#F5B342; --in-accent-surface:#F5B342; --in-accent-surface-hover:#D9992E; --in-on-accent:#0A0118; } /* Der Knopf aus in-base.css haengt noch an --in-blue und wuerde weisse Schrift auf Bernstein setzen. Hier wird er auf die Akzent-Tokens umgehaengt — Flaeche bernstein, Schrift fast schwarz. */ body.in-bereich-dienstleister .in-btn{ background:var(--in-accent-surface); color:var(--in-on-accent); } body.in-bereich-dienstleister .in-btn:hover{ background:var(--in-accent-surface-hover); } body.in-bereich-dienstleister .in-btn-ghost:hover{ border-color:var(--in-accent-line); } body.in-bereich-dienstleister .in-btn:focus-visible, body.in-bereich-dienstleister .in-btn-ghost:focus-visible, body.in-bereich-dienstleister .in-nav a:focus-visible, body.in-bereich-dienstleister .in-footer-col a:focus-visible, body.in-bereich-dienstleister .in-nav-toggle-input:focus-visible ~ .in-nav-toggle{ outline-color:var(--in-accent); } body.in-bereich-dienstleister .in-nav a:hover, body.in-bereich-dienstleister .in-nav a[aria-current], body.in-bereich-dienstleister .in-footer-col a:hover{ color:var(--in-accent); } /* Der Hover-Schein der Karten ist in in-page.css als fester Blauwert hinterlegt; im Bernstein-Bereich waere das ein Farbbruch. */ body.in-bereich-dienstleister a.in-card:hover{ box-shadow:0 16px 32px rgba(245,179,66,.16); } /* Der Lichtschein hinter dem Hero ebenso. */ body.in-bereich-dienstleister .in-hero::before{ background:radial-gradient(circle at 50% 50%,#2A1B02 0%,transparent 70%); } /* ========================================================================== Bereichswechsler — die sichtbare Trennlinie zwischen beiden Welten ========================================================================== Sitzt direkt unter dem Kopf und beantwortet zwei Fragen auf einen Blick: In welchem Bereich bin ich? Und wie komme ich in den anderen? Aufbau (verbindlich): aria-current="true" markiert den aktuellen Bereich. Die Links sind ganz normale Links; data-in-zielgruppe merkt die Wahl (siehe in-weiche.js). ========================================================================== */ .in-bereichswechsler{ background:var(--in-surface); border-bottom:1px solid var(--in-border); } .in-bereichswechsler-inner{ display:flex;align-items:center;gap:20px;flex-wrap:wrap; min-height:52px;padding-top:8px;padding-bottom:8px; } .in-bereichswechsler-label{ font-size:var(--in-t-xs);color:var(--in-text-dim); } .in-bereichswechsler-optionen{ display:flex;gap:8px; } .in-bereichswechsler-optionen a{ display:inline-block; font-size:var(--in-t-s);font-weight:600;text-decoration:none; color:var(--in-text-dim); /* 10px statt 7px: bringt das Tippziel von 38px auf 44px Hoehe. */ padding:10px 16px;border-radius:999px; border:1px solid transparent; transition:color .15s ease, border-color .15s ease, background-color .15s ease; } .in-bereichswechsler-optionen a:hover{ color:var(--in-text);border-color:var(--in-border); } .in-bereichswechsler-optionen a[aria-current]{ background:var(--in-accent-surface); color:var(--in-on-accent); } .in-bereichswechsler-optionen a[aria-current]:hover{ background:var(--in-accent-surface-hover); color:var(--in-on-accent);border-color:transparent; } .in-bereichswechsler-optionen a:focus-visible{ outline:2px solid var(--in-accent);outline-offset:2px; } /* Im Unternehmensbereich ist der aktive Knopf blau mit weisser Schrift — das faellt automatisch aus den Standard-Tokens heraus, hier steht nur der Vollstaendigkeit halber, dass er dieselbe Form behaelt. */ @media (max-width:560px){ .in-bereichswechsler-inner{gap:10px;align-items:flex-start;flex-direction:column} .in-bereichswechsler-optionen a{padding:10px 13px} } @media (prefers-reduced-motion:reduce){ .in-bereichswechsler-optionen a{transition:color .15s ease} }