/* * MARKEN-EINSTIEG-1: die gemeinsame Schicht der EINSTIEGSFLAECHEN — Anmeldung, zweiter * Faktor, Passwortwege, Einladung. * * WARUM EINE EIGENE DATEI UND KEINE ZEILE IN DEN p08-DATEIEN: Die `public/css/p08-*.css` * sind eingefroren. `P08CssStilvergleichTest` Phase 2 vergleicht ihre Regellisten Zeile fuer * Zeile gegen eine im Repository verankerte historische Baseline; eine hinzugefuegte Regel * dort ist keine Verbesserung, sondern ein abweichender Nachweis. Dieselbe Antwort hat * PRODUKT-RAHMEN-1 mit `p09-rahmen.css` gegeben: eine eigene Datei DANEBEN, geladen NACH der * p08-Datei der jeweiligen Ansicht. * * SIE STEHT FUER SICH: `auth/login.blade.php`, `auth/zweitfaktor.blade.php` und * `auth/zweitfaktor-einrichten.blade.php` laden `physicon.css` NICHT. Diese Datei darf also * keinen Token von dort voraussetzen. Sie benutzt genau eine Variable, `--marke-primaer`, * und die setzt das `` jeder dieser sieben Ansichten aus `config/branding.php`. Der * Literalwert `#024059` dahinter ist der LETZTE Rueckfall fuer den Fall, dass die Variable * gar nicht gesetzt ist; er ist der heutige Wert von `branding.primary_color` und nicht der * ansichtseigene Rueckfall (`auth/*` fuehrt dort `#1f3a5f`). Gemessen steht an allen sieben * Flaechen `rgb(2, 64, 89)`. * * SIE FAERBT KEIN MARKENASSET UM, RUNDET KEINES EIN ZWEITES MAL UND BAUT KEINES NACH * (Markenstandard, Abschnitt 4.6 und 6). */ /* ── 1 · DAS PRODUKT-LOCKUP AN DEN FLAECHEN, DIE BISHER KEINES TRUGEN ────────────────────── * * `auth/zweitfaktor` und `auth/zweitfaktor-einrichten` sind Produktzugangsflaechen im Sinn * von Abschnitt 2a des Markenstandards — ein Mensch kommt dort in das Produkt hinein. Sie * trugen den Produktnamen bis hierher als FLIESSTEXT in der Ueberschrift („Physicon OS · * zweiter Faktor") und damit als einzige Einstiegsflaechen gar kein Zeichen. * * 32 px ist die Mindest-Iconhoehe des Standards (Abschnitt 4.4). Die beiden Anmeldungen * tragen 34 px (Abschnitt 4.5) — das bleibt unberuehrt, weil diese Regel an einer eigenen * Klasse haengt und nicht an `.box img`. * * `width:auto` haelt das Seitenverhaeltnis 5,37 : 1, `max-width:100%` die Karte auf schmalen * Flaechen. KEIN `border-radius` (die Rundung steckt im Asset), KEIN `object-fit:cover` * (das beschnitte es), KEIN Filter. */ .einstieg-marke { display:block; height:32px; width:auto; max-width:100%; margin:0 0 14px; } /* Die ROLLE neben dem Zeichen, nicht der Name: gelesen ergibt sich „Physicon OS · Leitstelle" (Markenstandard, Abschnitt 5). Ein zweiter Textknoten mit dem Produktnamen waere die doppelte Ansage, die der Standard verbietet. */ .einstieg-rolle { margin:0 0 3px; color:#5b6570; font-size:13px; font-weight:600; letter-spacing:.02em; } /* ── 2 · DER SEITENRAND AUF SCHMALEN GERAETEN ───────────────────────────────────────────── * * GEMESSEN bei 390 px, vor diesem Vorgang: Die Karte des Portal-Logins ist 400 px breit plus * zweimal 40 px Innenabstand, also 480 px in einer 390 px breiten Lage. Sie laeuft NICHT ueber * — `body` ist ein Flexbehaelter, und ein Flexelement schrumpft. Sie liegt danach aber von * Bildschirmkante zu Bildschirmkante: gemessen `links 0, rechts 390`. Die 18-px-Rundung und * der Schlagschatten der Karte liegen damit auf der Kante und sind wirkungslos, und der Text * beginnt am Rand des Geraets. * * `box-sizing: border-box` NUR HIER: Ausserhalb dieser Medienregel bliebe die Karte sonst um * ihren Innenabstand schmaler als bisher — das waere eine Aenderung an Lagen, die niemand * gemeldet hat. `calc(100% - 32px)` rechnet gegen die Breite des Behaelters, nicht gegen * `100vw`: `vw` schliesst eine Rollleiste ein und ergaebe einen ungleichen Rand. * * 22 px Innenabstand statt 40 px: Die Karte ist danach 358 px breit, der Inhalt 314 px — vier * Pixel MEHR als die 310 px vorher, und zusaetzlich 16 px Luft an jeder Seite. */ @media (max-width: 480px) { .box { box-sizing: border-box; max-width: calc(100% - 32px); padding-left: 22px; padding-right: 22px; } } /* ── 3 · DER SICHTBARE FOKUS ────────────────────────────────────────────────────────────── * * GEMESSEN, vor diesem Vorgang: Keine dieser Flaechen fuehrte eine eigene Fokusregel. Sichtbar * war deshalb der Ring des Browsers — und dessen Farbe haengt am Geraet: `rgb(229,151,0)` in * der Telefonlage, `rgb(16,16,16)` am Schreibtisch. Gegen den petrolfarbenen Hauptknopf sind * das 1,70 : 1, gegen die weisse Karte 2,40 : 1; WCAG 2.2 (1.4.11) verlangt 3 : 1. Der * Tastaturweg durch die Anmeldung war damit je nach Geraet verschieden eingefaerbt und auf * dem wichtigsten Knopf praktisch unsichtbar. * * ZWEI BAENDER, UND DAS IST DER GANZE TRICK: innen ein weisser Ring, aussen der Markenton. * Auf der weissen Karte traegt das aeussere Band (Petrol auf Weiss, 11,17 : 1), auf dem * petrolfarbenen Knopf das innere (Weiss auf Petrol, 11,17 : 1). Ein EINfarbiger Ring hat nur * ein Band und muss es allein schaffen — daran scheitert der des Browsers. * * `:focus-visible` und nicht `:focus`: Ein Mausklick auf einen Knopf soll keinen Ring stehen * lassen, ein Tabulatordruck schon. Die Regel steht ohne `!important` und gilt fuer die * Bedienziele dieser Flaechen, nicht global — geladen wird die Datei nur von ihnen. * * KEINE eigene `border-radius`-Zeile: Ein `outline` folgt der Rundung, die das Element schon * hat. Eine zweite Zahl hier verformte das Feld im Moment des Fokus. */ .box :focus-visible { outline: 3px solid var(--marke-primaer, #024059); outline-offset: 2px; box-shadow: 0 0 0 2px #fff; }